feat(dashboard): suggest variables in panel title input

Assisted-by: Claude Opus 5.5

frontend/src/AppRoutes/index.tsx

@@ -12,14 +12,13 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -59,6 +58,7 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
+		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,8 +66,6 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isSavedViewEnabled = useSavedViewEnabled();
-	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -255,9 +253,7 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
-		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
-			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -267,32 +263,71 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname, isSavedViewEnabled]);
+	}, [pathname]);
 
-	// Identity for the Pylon widget. Whether this user gets Pylon at all is
-	// `useChatSupport`'s call — this only fills in who they are.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		if (chatSupport !== ChatSupportState.Pylon) {
-			return;
+		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
+		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
+		// to something went wrong which would ideally need a reload.
+		if (
+			!isFetchingFeatureFlags &&
+			(featureFlags || featureFlagsFetchError) &&
+			activeLicense &&
+			trialInfo
+		) {
+			let isChatSupportEnabled = false;
+			let isPremiumSupportEnabled = false;
+			if (featureFlags && featureFlags.length > 0) {
+				isChatSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
+						?.active || false;
+
+				isPremiumSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
+						?.active || false;
+			}
+			const showAddCreditCardModal =
+				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
+
+			if (
+				isLoggedInState &&
+				isChatSupportEnabled &&
+				!showAddCreditCardModal &&
+				(isCloudUser || isEnterpriseSelfHostedUser) &&
+				window.signozBootData?.settings?.pylon?.enabled
+			) {
+				const email = user.email || '';
+				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+				let emailHash = '';
+
+				if (email && secret) {
+					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+				}
+
+				window.pylon = {
+					chat_settings: {
+						app_id: window.signozBootData?.settings?.pylon?.appId,
+						email: user.email,
+						name: user.displayName || user.email,
+						email_hash: emailHash,
+					},
+				};
+			}
 		}
-
-		const email = user.email || '';
-		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-		let emailHash = '';
-
-		if (email && secret) {
-			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-		}
-
-		window.pylon = {
-			chat_settings: {
-				app_id: window.signozBootData?.settings?.pylon?.appId,
-				email: user.email,
-				name: user.displayName || user.email,
-				email_hash: emailHash,
-			},
-		};
-	}, [chatSupport, user]);
+	}, [
+		isLoggedInState,
+		user,
+		pathname,
+		trialInfo?.trialConvertedToSubscription,
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
+		activeLicense,
+		trialInfo,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+	]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -1,103 +0,0 @@
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
-
-interface AddCreditCardModalProps {
-	open: boolean;
-	onClose: () => void;
-	onAddCreditCard?: () => void;
-}
-
-/**
- * Shown to trial users who have not added a card, in place of chat support.
- * Submitting creates the subscription and opens the returned billing URL.
- */
-function AddCreditCardModal({
-	open,
-	onClose,
-	onAddCreditCard,
-}: AddCreditCardModalProps): JSX.Element {
-	const { notifications } = useNotifications();
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
-	);
-
-	const handleAddCreditCard = (): void => {
-		onAddCreditCard?.();
-		updateCreditCard({ url: getBaseUrl() });
-	};
-
-	return (
-		<Modal
-			className="add-credit-card-modal"
-			title={<span className="title">Add Credit Card for Chat Support</span>}
-			open={open}
-			closable
-			onCancel={onClose}
-			destroyOnClose
-			footer={[
-				<Button
-					key="cancel"
-					onClick={onClose}
-					className="cancel-btn"
-					icon={<X size={16} />}
-				>
-					Cancel
-				</Button>,
-				<AuthZTooltip
-					key="submit"
-					checks={[SubscriptionCreatePermission]}
-					withPortal={false}
-				>
-					<Button
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
-					>
-						Add Credit Card
-					</Button>
-				</AuthZTooltip>,
-			]}
-		>
-			<Typography.Text className="add-credit-card-text">
-				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
-				Add a credit card to access SigNoz chat support to your workspace.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
-
-export default AddCreditCardModal;

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,15 +1,63 @@
 import { useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { MessageSquareText } from '@signozhq/icons';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
+	const { notifications } = useNotifications();
+
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
 	const { pathname } = useLocation();
 
+	const handleAddCreditCard = (): void => {
+		logEvent('Add Credit card modal: Clicked', {
+			source: `chat support icon`,
+			page: pathname,
+		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
+	};
+
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -28,16 +76,47 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={(): void => {
-					logEvent('Add Credit card modal: Clicked', {
-						source: `chat support icon`,
-						page: pathname,
-					});
-				}}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</>
 	);
 }

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,14 +1,22 @@
 import { useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Tooltip } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp } from '@signozhq/icons';
+import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -33,6 +41,7 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -110,12 +119,43 @@ function LaunchChatSupport({
 		}
 	};
 
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
+
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -135,11 +175,47 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={handleAddCreditCard}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</div>
 	) : null;
 }

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',
 }

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;
 

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 && (
@@ -885,7 +878,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{showAddCreditCardModal && !isSavedViewEnabled && <ChatSupportGateway />}
+				{showAddCreditCardModal && <ChatSupportGateway />}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

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;
 	}

frontend/src/container/BottomStrip/AskNoz/AskNoz.module.scss

@@ -1,36 +0,0 @@
-.askNoz {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-}
-
-.badge {
-	flex-shrink: 0;
-	display: inline-flex;
-	line-height: 0;
-	color: var(--accent-primary);
-}
-
-.pulseDot {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	line-height: 0;
-	animation: askNozDotPulse 1.5s ease-in-out infinite;
-	transform: scale(0.8);
-	margin-right: -12px;
-}
-
-@keyframes askNozDotPulse {
-	0%,
-	100% {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	50% {
-		opacity: 0.35;
-		transform: scale(0.82);
-	}
-}

frontend/src/container/BottomStrip/AskNoz/AskNoz.tsx

@@ -1,76 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import Noz from 'components/Noz/Noz';
-import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
-import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
-import {
-	openAIAssistant,
-	useAIAssistantStore,
-} from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import ROUTES from 'constants/routes';
-import { Dot } from '@signozhq/icons';
-
-import styles from './AskNoz.module.scss';
-
-/**
- * Opens the Noz drawer, matching the header entry it replaces. Cmd+K opens the
- * modal instead; this is deliberately the drawer.
- *
- * Carries the header's pending badge: when Noz is blocked on the user
- * (`awaiting_approval` / `awaiting_clarification`) a dot pulses. Without it,
- * hiding the header button would remove a notification rather than move it.
- */
-function AskNoz(): JSX.Element | null {
-	const { pathname } = useLocation();
-	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
-	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);
-	const pendingUserInputCount = useAIAssistantStore(
-		selectPendingUserInputStreamCount,
-	);
-
-	// Noz is already on screen in the modal, so the "needs you" dot would be noise.
-	const showPendingBadge = pendingUserInputCount > 0 && !isModalOpen;
-
-	// The drawer does not render on the Noz full page, so the button would be inert.
-	const isAIAssistantPage = pathname.startsWith(ROUTES.AI_ASSISTANT_BASE);
-
-	if (!isAIAssistantEnabled || isDrawerOpen || isAIAssistantPage) {
-		return null;
-	}
-
-	return (
-		<div className={styles.askNoz} data-testid="bottom-strip-ask-noz">
-			{showPendingBadge && (
-				<span className={styles.badge} aria-hidden>
-					<span className={styles.pulseDot}>
-						<Dot size={36} />
-					</span>
-				</span>
-			)}
-			<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					className="noz-wave"
-					prefix={<Noz size={16} />}
-					onClick={(): void => openAIAssistant()}
-					aria-label={
-						showPendingBadge
-							? `Ask Noz, ${pendingUserInputCount} ${
-									pendingUserInputCount === 1 ? 'action needs' : 'actions need'
-								} your response`
-							: 'Ask Noz'
-					}
-				>
-					Ask Noz
-				</Button>
-			</TooltipSimple>
-		</div>
-	);
-}
-
-export default AskNoz;

frontend/src/container/BottomStrip/AskNoz/__tests__/AskNoz.test.tsx

@@ -1,133 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { openAIAssistant } from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { render } from 'tests/test-utils';
-
-import AskNoz from '../AskNoz';
-
-jest.mock('hooks/useIsAIAssistantEnabled');
-jest.mock('container/AIAssistant/store/useAIAssistantStore', () => ({
-	openAIAssistant: jest.fn(),
-	useAIAssistantStore: jest.fn(),
-}));
-
-const mockEnabled = useIsAIAssistantEnabled as jest.MockedFunction<
-	typeof useIsAIAssistantEnabled
->;
-const mockOpen = openAIAssistant as jest.MockedFunction<typeof openAIAssistant>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const { useAIAssistantStore } = jest.requireMock(
-	'container/AIAssistant/store/useAIAssistantStore',
-) as { useAIAssistantStore: jest.Mock };
-
-/** The component reads the store through three separate selector calls. */
-function mockStore({
-	isDrawerOpen = false,
-	isModalOpen = false,
-	pendingCount = 0,
-}: {
-	isDrawerOpen?: boolean;
-	isModalOpen?: boolean;
-	pendingCount?: number;
-} = {}): void {
-	const state = { isDrawerOpen, isModalOpen, streams: {} };
-	useAIAssistantStore.mockImplementation((selector: (s: unknown) => unknown) => {
-		const picked = selector(state);
-		// `selectPendingUserInputStreamCount` walks `streams`, which is empty here,
-		// so stand in the count we want to assert against.
-		return typeof picked === 'number' ? pendingCount : picked;
-	});
-}
-
-// `TooltipSimple` replaces its trigger's props, so the testId lives on the
-// wrapper and the button itself is reached by role — there is only ever one.
-const SLOT = 'bottom-strip-ask-noz';
-
-describe('AskNoz', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockEnabled.mockReturnValue(true);
-		mockStore();
-	});
-
-	describe('visibility', () => {
-		it('renders when the assistant is enabled', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toBeInTheDocument();
-		});
-
-		it('renders nothing when the assistant is disabled', () => {
-			mockEnabled.mockReturnValue(false);
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing while the drawer is open', () => {
-			mockStore({ isDrawerOpen: true });
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing on the Noz full page, where the drawer does not mount', () => {
-			const { queryByTestId } = render(<AskNoz />, undefined, {
-				initialRoute: '/ai-assistant/some-conversation-id',
-			});
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('what it does', () => {
-		it('opens the drawer on click', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			fireEvent.click(getByRole('button'));
-
-			expect(mockOpen).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('pending badge', () => {
-		it('announces the count when Noz is waiting on the user', () => {
-			mockStore({ pendingCount: 2 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 2 actions need your response',
-			);
-		});
-
-		it('uses the singular for one pending action', () => {
-			mockStore({ pendingCount: 1 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 1 action needs your response',
-			);
-		});
-
-		it('stays quiet when nothing is pending', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-
-		it('stays quiet while the modal is open, Noz is already on screen', () => {
-			mockStore({ isModalOpen: true, pendingCount: 3 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-	});
-});

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -1,42 +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);
-
-	--button-font-size: 12px;
-
-	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-4);
-	min-width: 0;
-}
-
-.left {
-	cursor: default;
-}
-
-// Temporary placeholder for the left slot. Replaced later.
-.version {
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

frontend/src/container/BottomStrip/LeftSlot/LeftSlot.tsx

@@ -1,29 +0,0 @@
-import * as Sentry from '@sentry/react';
-import { useAppContext } from 'providers/App/App';
-
-import StripTypography from '../components/StripTypography/StripTypography';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-
-function LeftSlot(): JSX.Element | null {
-	const { versionData } = useAppContext();
-	const left = useBottomStripStore((state) => state.left);
-	const ownerId = useBottomStripStore((state) => state.ownerId);
-	const version = versionData?.version?.trim();
-	const versionNode = version ? (
-		<StripTypography>{version}</StripTypography>
-	) : null;
-
-	if (!left) {
-		return versionNode;
-	}
-
-	return (
-		// Keyed so a page whose node threw does not leave the boundary latched on
-		// the fallback for every page after it.
-		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
-			{left}
-		</Sentry.ErrorBoundary>
-	);
-}
-
-export default LeftSlot;

frontend/src/container/BottomStrip/SupportButton/SupportButton.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { MessageSquareText } from '@signozhq/icons';
-
-function SupportButton(): JSX.Element | null {
-	const chatSupport = useChatSupport();
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
-		useState(false);
-
-	if (chatSupport === ChatSupportState.Unavailable) {
-		return null;
-	}
-
-	const handleClick = (): void => {
-		if (chatSupport === ChatSupportState.NeedsCard) {
-			setIsAddCreditCardModalOpen(true);
-			return;
-		}
-		window.Pylon?.('show');
-	};
-
-	return (
-		<>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<MessageSquareText size={16} />}
-				onClick={handleClick}
-				testId="bottom-strip-support"
-			>
-				Support
-			</Button>
-
-			<AddCreditCardModal
-				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-			/>
-		</>
-	);
-}
-
-export default SupportButton;

frontend/src/container/BottomStrip/SupportButton/__tests__/SupportButton.test.tsx

@@ -1,81 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { render } from 'tests/test-utils';
-
-import SupportButton from '../SupportButton';
-
-jest.mock('hooks/useChatSupport', () => ({
-	...jest.requireActual('hooks/useChatSupport'),
-	useChatSupport: jest.fn(),
-}));
-
-const mockChatSupport = useChatSupport as jest.MockedFunction<
-	typeof useChatSupport
->;
-
-const BUTTON = 'bottom-strip-support';
-const MODAL_TITLE = 'Add Credit Card for Chat Support';
-
-describe('SupportButton', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		window.Pylon = jest.fn() as never;
-	});
-
-	describe('when Pylon is available', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.Pylon));
-
-		it('shows the button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the Pylon widget on click', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(window.Pylon).toHaveBeenCalledWith('show');
-		});
-
-		it('does not open the credit card modal', () => {
-			const { getByTestId, queryByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(queryByText(MODAL_TITLE)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('when the user needs a card', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.NeedsCard));
-
-		it('shows the same button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the credit card modal on click, not Pylon', () => {
-			const { getByTestId, getByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(getByText(MODAL_TITLE)).toBeInTheDocument();
-			expect(window.Pylon).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('when support is unavailable', () => {
-		beforeEach(() =>
-			mockChatSupport.mockReturnValue(ChatSupportState.Unavailable),
-		);
-
-		it('renders nothing at all', () => {
-			const { queryByTestId } = render(<SupportButton />);
-
-			expect(queryByTestId(BUTTON)).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/BottomStrip/__tests__/BottomStrip.test.tsx

@@ -1,165 +0,0 @@
-import { type ReactNode, useState } from 'react';
-import { fireEvent } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-import { Info } from 'types/api/v1/version/get';
-
-import BottomStrip, {
-	BOTTOM_STRIP_HEIGHT,
-	BOTTOM_STRIP_HEIGHT_VAR,
-	BOTTOM_STRIP_ON_CLASS,
-} from '..';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-import { useBottomStripLeft } from '../useBottomStripLeft';
-
-/** Stands in for a page that puts something on the left of the strip. */
-function Page({ children }: { children: ReactNode }): null {
-	useBottomStripLeft(children);
-	return null;
-}
-
-/** A page whose value changes without needing `rerender`. */
-function ChangingPage(): JSX.Element {
-	const [count, setCount] = useState(600);
-
-	useBottomStripLeft(`${count} traces`);
-
-	return (
-		<button type="button" onClick={(): void => setCount(42)}>
-			change
-		</button>
-	);
-}
-
-/** A page node that blows up while the strip renders it. */
-function Boom(): JSX.Element {
-	throw new Error('bad left node');
-}
-
-const VERSION = 'v0.134.67';
-const versionData: Info = { version: VERSION, ee: 'Y', setupCompleted: true };
-const withVersion = { appContextOverrides: { versionData } };
-
-describe('BottomStrip', () => {
-	// The store is module level, so it outlives each test.
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	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 { getByText } = render(<BottomStrip />, undefined, {
-				appContextOverrides: {
-					versionData: { version, ee: 'Y', setupCompleted: true },
-				},
-			});
-
-			expect(getByText(version)).toBeInTheDocument();
-		},
-	);
-
-	it('renders the strip without a version when none is available', () => {
-		const { getByTestId } = render(<BottomStrip />, undefined, {
-			appContextOverrides: { versionData: null },
-		});
-
-		const strip = getByTestId('bottom-strip');
-
-		expect(strip).toBeInTheDocument();
-		expect(strip).toHaveTextContent('');
-	});
-
-	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
-	// re-renders the original tree. These drive change through state and through
-	// separate trees instead, which the module-level store lets them share.
-	describe('left slot', () => {
-		it('shows what the page put there instead of the version', () => {
-			render(<Page>600 traces</Page>);
-			const { getByText, queryByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-			expect(queryByText(VERSION)).not.toBeInTheDocument();
-		});
-
-		it('falls back to the version once the page is gone', () => {
-			const page = render(<Page>600 traces</Page>);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			page.unmount();
-
-			expect(getByText(VERSION)).toBeInTheDocument();
-		});
-
-		it('updates when the page changes what it shows', () => {
-			render(<ChangingPage />);
-			const { getByText, getByRole } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-
-			fireEvent.click(getByRole('button', { name: 'change' }));
-
-			expect(getByText('42 traces')).toBeInTheDocument();
-		});
-
-		it('falls back to the version when the page node throws', () => {
-			// React logs the caught error, which is noise here.
-			const consoleError = jest
-				.spyOn(console, 'error')
-				.mockImplementation(() => {});
-
-			render(
-				<Page>
-					<Boom />
-				</Page>,
-			);
-			const { getByTestId, getByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByTestId('bottom-strip')).toBeInTheDocument();
-			expect(getByText(VERSION)).toBeInTheDocument();
-
-			consoleError.mockRestore();
-		});
-
-		it('keeps the new page value when the old page unmounts after it', () => {
-			// Navigation order: the next page mounts before the last one unmounts,
-			// so without the owner guard the outgoing page wipes the incoming value.
-			const pageA = render(<Page>page A</Page>);
-			render(<Page>page B</Page>);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			pageA.unmount();
-
-			expect(getByText('page B')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/BottomStrip/components/StripSeparator/StripSeparator.module.scss

@@ -1,15 +0,0 @@
-.separator {
-	flex-shrink: 0;
-	width: 1px;
-	height: 14px;
-	background: var(--l2-border);
-}
-
-// Strip items hide themselves by rendering null, which would otherwise leave a
-// separator dangling at an edge or two of them side by side. Collapsing them
-// here keeps the call sites free of visibility plumbing.
-.separator:first-child,
-.separator:last-child,
-.separator + .separator {
-	display: none;
-}

frontend/src/container/BottomStrip/components/StripSeparator/StripSeparator.tsx

@@ -1,7 +0,0 @@
-import styles from './StripSeparator.module.scss';
-
-function StripSeparator(): JSX.Element {
-	return <span className={styles.separator} aria-hidden />;
-}
-
-export default StripSeparator;

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.module.scss

@@ -1,10 +0,0 @@
-.stripTypography {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.tsx

@@ -1,34 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import styles from './StripTypography.module.scss';
-
-interface StripTypographyProps {
-	children: ReactNode;
-	/** Leading icon, aligned and spaced for you. Same shape as `Button`'s. */
-	prefix?: ReactNode;
-	className?: string;
-}
-
-/**
- * Everything the strip renders goes through this: the version, a plain count, or
- * an icon with a key and value. It owns the strip's type and alignment and
- * nothing else — how a consumer colours its own content is theirs.
- */
-function StripTypography({
-	children,
-	prefix,
-	className,
-}: StripTypographyProps): JSX.Element {
-	return (
-		<span className={cx(styles.stripTypography, className)}>
-			{prefix}
-			<Typography.Text as="span">{children}</Typography.Text>
-		</span>
-	);
-}
-
-StripTypography.defaultProps = { prefix: undefined, className: undefined };
-
-export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -1,43 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-import AskNoz from './AskNoz/AskNoz';
-import LeftSlot from './LeftSlot/LeftSlot';
-import StripSeparator from './components/StripSeparator/StripSeparator';
-import SupportButton from './SupportButton/SupportButton';
-
-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 {
-	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}>
-				<LeftSlot />
-			</div>
-			<div className={styles.right}>
-				<AskNoz />
-				<StripSeparator />
-				<SupportButton />
-			</div>
-		</div>
-	);
-}
-
-export default BottomStrip;

frontend/src/container/BottomStrip/store/useBottomStripStore.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-import { create } from 'zustand';
-
-interface BottomStripState {
-	/** What the strip shows on the left, or null to fall back to the version. */
-	left: ReactNode | null;
-	/** Which page owns the current value — see `clearLeft`. */
-	ownerId: string | null;
-	setLeft: (ownerId: string, left: ReactNode) => void;
-	clearLeft: (ownerId: string) => void;
-}
-
-export const useBottomStripStore = create<BottomStripState>()((set, get) => ({
-	left: null,
-	ownerId: null,
-	setLeft: (ownerId, left): void => set({ left, ownerId }),
-	// Only the current owner may clear. On a plain route swap React runs the old
-	// page's cleanup before the new page's effect, so this is moot, but two
-	// consumers can be mounted at once (a page under a drawer): the one that set
-	// last owns the slot, and the other unmounting must not wipe it.
-	clearLeft: (ownerId): void => {
-		if (get().ownerId === ownerId) {
-			set({ left: null, ownerId: null });
-		}
-	},
-}));

frontend/src/container/BottomStrip/useBottomStripLeft.ts

@@ -1,23 +0,0 @@
-import { type ReactNode, useEffect, useId } from 'react';
-
-import { useBottomStripStore } from './store/useBottomStripStore';
-
-/**
- * Puts `node` on the left of the bottom strip for as long as the calling page is
- * mounted. Pass null to show nothing and let the version through.
- *
- * There is no refresh API by design: a page that refetches re-renders, which
- * produces a new node, which re-runs this effect. Wrap the node in `useMemo`
- * keyed on the values it shows, or the store is written on every render.
- */
-export function useBottomStripLeft(node: ReactNode | null): void {
-	const ownerId = useId();
-	const setLeft = useBottomStripStore((state) => state.setLeft);
-	const clearLeft = useBottomStripStore((state) => state.clearLeft);
-
-	useEffect(() => {
-		setLeft(ownerId, node);
-
-		return (): void => clearLeft(ownerId);
-	}, [node, ownerId, setLeft, clearLeft]);
-}

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);

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;

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;

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%;

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;

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;
 }
 

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -181,9 +181,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;

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);
 }

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);

frontend/src/hooks/__tests__/useChatSupport.test.tsx

@@ -1,148 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { useAppContext } from 'providers/App/App';
-
-jest.mock('providers/App/App');
-jest.mock('hooks/useGetTenantLicense');
-
-const mockAppContext = useAppContext as jest.MockedFunction<
-	typeof useAppContext
->;
-const mockLicense = useGetTenantLicense as jest.MockedFunction<
-	typeof useGetTenantLicense
->;
-
-const flag = (name: FeatureKeys, active: boolean): Record<string, unknown> => ({
-	name,
-	active,
-	usage: 0,
-	usage_limit: -1,
-	route: '',
-});
-
-function setup({
-	chatSupport = true,
-	premiumSupport = false,
-	trialConverted = false,
-	isCloudUser = true,
-	isEnterpriseSelfHostedUser = false,
-	isLoggedIn = true,
-	pylonEnabled = true,
-	isFetchingFeatureFlags = false,
-	activeLicense = {} as unknown,
-	trialInfo = {} as unknown,
-} = {}): void {
-	window.signozBootData = {
-		settings: { pylon: { enabled: pylonEnabled } },
-	} as never;
-
-	mockAppContext.mockReturnValue({
-		featureFlags: [
-			flag(FeatureKeys.CHAT_SUPPORT, chatSupport),
-			flag(FeatureKeys.PREMIUM_SUPPORT, premiumSupport),
-		],
-		isFetchingFeatureFlags,
-		featureFlagsFetchError: null,
-		trialInfo: trialInfo && { trialConvertedToSubscription: trialConverted },
-		isLoggedIn,
-		activeLicense,
-	} as never);
-
-	mockLicense.mockReturnValue({
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-	} as never);
-}
-
-const state = (): ChatSupportState =>
-	renderHook(() => useChatSupport()).result.current;
-
-describe('useChatSupport', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	describe('pylon', () => {
-		it('hands off to Pylon for a cloud user past trial', () => {
-			setup({ trialConverted: true });
-
-			expect(state()).toBe(ChatSupportState.Pylon);
-		});
-
-		it('hands off to Pylon for enterprise self-hosted', () => {
-			setup({
-				trialConverted: true,
-				isCloudUser: false,
-				isEnterpriseSelfHostedUser: true,
-			});
-
-			expect(state()).toBe(ChatSupportState.Pylon);
-		});
-
-		it('hands off to Pylon when premium support is on, card or not', () => {
-			setup({ premiumSupport: true, trialConverted: false });
-
-			expect(state()).toBe(ChatSupportState.Pylon);
-		});
-
-		it('offers nothing when Pylon is not configured server side', () => {
-			setup({ trialConverted: true, pylonEnabled: false });
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-	});
-
-	describe('needsCard', () => {
-		it('offers the card flow to a cloud user still on trial', () => {
-			setup({ trialConverted: false, premiumSupport: false });
-
-			expect(state()).toBe(ChatSupportState.NeedsCard);
-		});
-
-		it('offers nothing to a non-cloud user needing a card', () => {
-			setup({
-				trialConverted: false,
-				isCloudUser: false,
-				isEnterpriseSelfHostedUser: true,
-			});
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-	});
-
-	describe('unavailable', () => {
-		it('offers nothing without the chat support flag', () => {
-			setup({ chatSupport: false });
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-
-		it('offers nothing when logged out', () => {
-			setup({ isLoggedIn: false });
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-
-		it('offers nothing while the flags are still loading', () => {
-			setup({ isFetchingFeatureFlags: true });
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-
-		it('offers nothing before the licence has loaded', () => {
-			setup({ activeLicense: null });
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-
-		it('offers nothing on a tenant that is neither cloud nor enterprise', () => {
-			setup({
-				trialConverted: true,
-				isCloudUser: false,
-				isEnterpriseSelfHostedUser: false,
-			});
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-	});
-});

frontend/src/hooks/useChatSupport.ts

@@ -1,70 +0,0 @@
-import { FeatureKeys } from 'constants/features';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useAppContext } from 'providers/App/App';
-import { useMemo } from 'react';
-
-export enum ChatSupportState {
-	/** Pylon is configured for this user — hand off to the widget. */
-	Pylon = 'pylon',
-	/** Trial without a card — offer the Add Credit Card flow instead. */
-	NeedsCard = 'needsCard',
-	/** No support entry at all. */
-	Unavailable = 'unavailable',
-}
-
-export function useChatSupport(): ChatSupportState {
-	const {
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		trialInfo,
-		isLoggedIn,
-		activeLicense,
-	} = useAppContext();
-	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
-
-	return useMemo(() => {
-		const isReady =
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo;
-		if (!isReady || !isLoggedIn) {
-			return ChatSupportState.Unavailable;
-		}
-
-		const flag = (name: FeatureKeys): boolean =>
-			featureFlags?.find((f) => f.name === name)?.active || false;
-
-		if (!flag(FeatureKeys.CHAT_SUPPORT)) {
-			return ChatSupportState.Unavailable;
-		}
-
-		const needsCard =
-			!flag(FeatureKeys.PREMIUM_SUPPORT) &&
-			!trialInfo?.trialConvertedToSubscription;
-
-		if (needsCard) {
-			// The credit card flow is cloud-only
-			return isCloudUser
-				? ChatSupportState.NeedsCard
-				: ChatSupportState.Unavailable;
-		}
-
-		const pylonConfigured = Boolean(
-			window.signozBootData?.settings?.pylon?.enabled,
-		);
-		return (isCloudUser || isEnterpriseSelfHostedUser) && pylonConfigured
-			? ChatSupportState.Pylon
-			: ChatSupportState.Unavailable;
-	}, [
-		activeLicense,
-		featureFlags,
-		featureFlagsFetchError,
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-		isFetchingFeatureFlags,
-		isLoggedIn,
-		trialInfo,
-	]);
-}

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;
-}

frontend/src/pages/AlertList/AlertList.styles.scss

@@ -1,29 +1,4 @@
 .alerts-container {
-	// Hands the page height down to the active tab so its content can bound itself
-	// instead of guessing with 100vh. Child combinators only, nested Tabs
-	// (Configuration) must not be caught.
-	flex: 1;
-	min-height: 0;
-
-	> .ant-tabs-content-holder {
-		display: flex;
-		flex-direction: column;
-
-		> .ant-tabs-content {
-			flex: 1;
-			min-height: 0;
-			display: flex;
-			flex-direction: column;
-
-			> .ant-tabs-tabpane-active {
-				flex: 1;
-				min-height: 0;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-	}
-
 	.top-level-tab.periscope-tab {
 		padding: 2px 0;
 	}
@@ -65,9 +40,5 @@
 
 	.alert-rules-container {
 		margin-top: 10px;
-		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
 	}
 }

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

@@ -13,10 +13,10 @@ import type { EQueryType } from 'types/common/dashboard';
 import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import ConfigActions from './ConfigActions/ConfigActions';
+import PanelTitleInput from './PanelTitleInput/PanelTitleInput';
 import SectionSlot from './SectionSlot/SectionSlot';
 
 import styles from './ConfigPane.module.scss';
-import { DASHBOARD_NAME_MAX_LENGTH } from '../../constants';
 import { PanelKind } from '../../Panels/types/panelKind';
 
 interface ConfigPaneProps {
@@ -94,12 +94,9 @@ function ConfigPane({
 			<div className={styles.group}>
 				<div className={styles.field}>
 					<Typography.Text>Title</Typography.Text>
-					<Input
-						data-testid="panel-editor-v2-title"
+					<PanelTitleInput
 						value={spec.display.name}
-						placeholder="Panel title"
-						maxLength={DASHBOARD_NAME_MAX_LENGTH}
-						onChange={(e): void => setDisplayField('name', e.target.value)}
+						onChange={(value): void => setDisplayField('name', value)}
 					/>
 				</div>
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTitleInput/PanelTitleInput.module.scss

@@ -0,0 +1,3 @@
+.autoComplete {
+	width: 100%;
+}

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

@@ -0,0 +1,107 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import { AutoComplete, Input } from 'antd';
+import type { InputRef } from 'antd';
+import { useDashboardVariableNames } from 'pages/DashboardPage/DashboardContainer/hooks/useDashboardVariableNames';
+
+import { DASHBOARD_NAME_MAX_LENGTH } from '../../../constants';
+import { findVariableToken, insertVariable } from './variableToken';
+
+import styles from './PanelTitleInput.module.scss';
+
+interface PanelTitleInputProps {
+	value: string;
+	onChange: (value: string) => void;
+}
+
+interface VariableOption {
+	/** Whole title after insertion, so antd's change event carries it. */
+	value: string;
+	label: string;
+	cursor: number;
+}
+
+function PanelTitleInput({
+	value,
+	onChange,
+}: PanelTitleInputProps): JSX.Element {
+	const variableNames = useDashboardVariableNames();
+	const inputRef = useRef<InputRef>(null);
+	const pendingCursor = useRef<number | null>(null);
+	const [cursor, setCursor] = useState(0);
+	const [focused, setFocused] = useState(false);
+	const [dismissed, setDismissed] = useState(false);
+
+	const options = useMemo<VariableOption[]>(() => {
+		const token = findVariableToken(value, cursor);
+		if (!token) {
+			return [];
+		}
+		const query = token.query.toLowerCase();
+		return variableNames
+			.filter((name) => name.toLowerCase().startsWith(query))
+			.map((name) => {
+				const next = insertVariable(value, token, name);
+				return { value: next.text, label: name, cursor: next.cursor };
+			});
+	}, [value, cursor, variableNames]);
+
+	useLayoutEffect(() => {
+		if (pendingCursor.current === null) {
+			return;
+		}
+		inputRef.current?.input?.setSelectionRange(
+			pendingCursor.current,
+			pendingCursor.current,
+		);
+		setCursor(pendingCursor.current);
+		pendingCursor.current = null;
+	}, [value]);
+
+	const syncCursor = (): void => {
+		setCursor(inputRef.current?.input?.selectionStart ?? 0);
+	};
+
+	const handleChange = (next: string): void => {
+		const picked = options.find((option) => option.value === next);
+		if (picked) {
+			pendingCursor.current = picked.cursor;
+			setDismissed(true);
+		} else {
+			setDismissed(false);
+			syncCursor();
+		}
+		onChange(next);
+	};
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+		if (event.key === 'Escape') {
+			setDismissed(true);
+		}
+	};
+
+	return (
+		<AutoComplete
+			className={styles.autoComplete}
+			value={value}
+			maxLength={DASHBOARD_NAME_MAX_LENGTH}
+			options={options}
+			open={focused && !dismissed && options.length > 0}
+			filterOption={false}
+			onChange={handleChange}
+		>
+			<Input
+				ref={inputRef}
+				data-testid="panel-editor-v2-title"
+				placeholder="Panel title"
+				onKeyDown={handleKeyDown}
+				onKeyUp={syncCursor}
+				onClick={syncCursor}
+				onFocus={(): void => setFocused(true)}
+				onBlur={(): void => setFocused(false)}
+			/>
+		</AutoComplete>
+	);
+}
+
+export default PanelTitleInput;

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

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import PanelTitleInput from '../PanelTitleInput';
+
+jest.mock(
+	'pages/DashboardPage/DashboardContainer/hooks/useDashboardVariableNames',
+	() => ({
+		useDashboardVariableNames: (): string[] => ['service.name', 'env'],
+	}),
+);
+
+function Harness({ initial = '' }: { initial?: string }): JSX.Element {
+	const [value, setValue] = useState(initial);
+	return <PanelTitleInput value={value} onChange={setValue} />;
+}
+
+describe('PanelTitleInput', () => {
+	it('suggests no variables until a `$` is typed', async () => {
+		const user = userEvent.setup();
+		render(<Harness />);
+
+		await user.type(screen.getByTestId('panel-editor-v2-title'), 'Latency');
+
+		expect(screen.queryByText('env')).not.toBeInTheDocument();
+	});
+
+	it('suggests variables matching the text after `$`', async () => {
+		const user = userEvent.setup();
+		render(<Harness />);
+
+		await user.type(
+			screen.getByTestId('panel-editor-v2-title'),
+			'Latency of $se',
+		);
+
+		await expect(screen.findByText('service.name')).resolves.toBeInTheDocument();
+		expect(screen.queryByText('env')).not.toBeInTheDocument();
+	});
+
+	it('inserts the picked variable into the title', async () => {
+		const user = userEvent.setup();
+		render(<Harness />);
+		const input = screen.getByTestId('panel-editor-v2-title');
+
+		await user.type(input, 'Latency of $se');
+		await user.click(await screen.findByText('service.name'));
+
+		expect(input).toHaveValue('Latency of $service.name');
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTitleInput/__tests__/variableToken.test.ts

@@ -0,0 +1,30 @@
+import { findVariableToken, insertVariable } from '../variableToken';
+
+describe('findVariableToken', () => {
+	it('finds the token being typed before the cursor', () => {
+		expect(findVariableToken('Latency of $ser', 15)).toStrictEqual({
+			start: 11,
+			query: 'ser',
+		});
+	});
+
+	it('matches a bare `$`', () => {
+		expect(findVariableToken('by $', 4)).toStrictEqual({ start: 3, query: '' });
+	});
+
+	it('ignores a token the cursor has moved past', () => {
+		expect(findVariableToken('$env in prod', 12)).toBeNull();
+	});
+});
+
+describe('insertVariable', () => {
+	it('replaces the whole token, including text after the cursor', () => {
+		const token = { start: 4, query: 'ser' };
+		expect(
+			insertVariable('p99 $service_x for', token, 'service.name'),
+		).toStrictEqual({
+			text: 'p99 $service.name for',
+			cursor: 17,
+		});
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTitleInput/variableToken.ts

@@ -0,0 +1,30 @@
+const TOKEN_BEFORE_CURSOR = /\$([\w.]*)$/;
+const IDENTIFIER_PREFIX = /^[\w.]*/;
+
+export interface VariableToken {
+	start: number;
+	query: string;
+}
+
+export function findVariableToken(
+	text: string,
+	cursor: number,
+): VariableToken | null {
+	const match = TOKEN_BEFORE_CURSOR.exec(text.slice(0, cursor));
+	if (!match) {
+		return null;
+	}
+	return { start: match.index, query: match[1] };
+}
+
+/** Also replaces identifier chars after the cursor: `$ser|vice` leaves no `vice`. */
+export function insertVariable(
+	text: string,
+	token: VariableToken,
+	name: string,
+): { text: string; cursor: number } {
+	const before = text.slice(0, token.start);
+	const after = text.slice(token.start + 1).replace(IDENTIFIER_PREFIX, '');
+	const inserted = `${before}$${name}`;
+	return { text: `${inserted}${after}`, cursor: inserted.length };
+}

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

@@ -23,6 +23,11 @@ jest.mock(
 	}),
 );
 
+jest.mock(
+	'pages/DashboardPage/DashboardContainer/hooks/useDashboardVariableNames',
+	() => ({ useDashboardVariableNames: (): string[] => [] }),
+);
+
 function textSpec(): DashboardtypesPanelSpecDTO {
 	return {
 		display: { name: 'Runbook', description: 'steps' },

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/useContextLinkVariables.ts

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { dtoToFormModel } from 'pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/variableAdapters';
-import { useDashboardFetchRequired } from 'pages/DashboardPage/DashboardContainer/hooks/useDashboardFetchRequired';
+import { useDashboardVariableNames } from 'pages/DashboardPage/DashboardContainer/hooks/useDashboardVariableNames';
 
 import type { VariableItem } from './types';
 
@@ -22,15 +21,7 @@ const GLOBAL_TIMESTAMP_VARIABLES: VariableItem[] = [
 export function useContextLinkVariables(): VariableItem[] {
 	const { currentQuery } = useQueryBuilder();
 
-	const { variables: variableDtos } = useDashboardFetchRequired();
-
-	const dashboardVariableNames = useMemo(
-		() =>
-			variableDtos
-				.map((dto) => dtoToFormModel(dto).name)
-				.filter((name): name is string => !!name),
-		[variableDtos],
-	);
+	const dashboardVariableNames = useDashboardVariableNames();
 
 	// `_`-prefixed to match V1 and avoid colliding with dashboard-variable names.
 	const fieldVariableNames = useMemo(() => {

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

@@ -12,6 +12,7 @@ import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/quer
 import type { PanelActionsConfig } from '../Panel';
 import PanelActionsMenu from '../PanelActionsMenu/PanelActionsMenu';
 import { EMPTY_PANEL_QUERY_DATA } from '../utils/emptyPanelQueryData';
+import { usePanelTitle } from '../hooks/usePanelTitle';
 import PanelHeaderSearch from './PanelHeaderSearch';
 import PanelStatusPopover from '../PanelStatus/PanelStatusPopover';
 import {
@@ -67,7 +68,7 @@ function PanelHeader(props: PanelHeaderProps): JSX.Element {
 	const { panelId, panel, panelActions, hideActions } = props;
 	const query = props.mode === 'query' ? props : null;
 
-	const name = panel.spec.display.name;
+	const name = usePanelTitle(panel);
 	const description = panel.spec.display.description;
 	const errorDetail = useMemo(
 		() => panelStatusFromError(query?.error),

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

@@ -5,13 +5,13 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from '@signozhq/ui/dialog';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { ConfigProvider } from 'antd';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { useRef } from 'react';
 
 import ViewPanelModalContent from './ViewPanelModalContent';
+import ViewPanelModalTitle from './ViewPanelModalTitle';
 import styles from './ViewPanelModal.module.scss';
 
 interface ViewPanelModalProps {
@@ -31,8 +31,6 @@ function ViewPanelModal({
 	open,
 	onClose,
 }: ViewPanelModalProps): JSX.Element {
-	const name = panel?.spec.display.name ?? '';
-
 	// Render antd popups into the dialog (not document.body) so they stay inside the
 	// modal's interactive, focus-trapped layer instead of being blocked by Radix.
 	const contentRef = useRef<HTMLDivElement>(null);
@@ -54,11 +52,11 @@ function ViewPanelModal({
 			>
 				<DialogHeader>
 					<DialogTitle>
-						<TooltipSimple title={name} arrow>
-							<Typography.Text className={styles.title}>
-								{name ? `${name} - (View mode)` : 'View mode'}
-							</Typography.Text>
-						</TooltipSimple>
+						{panel ? (
+							<ViewPanelModalTitle panel={panel} />
+						) : (
+							<Typography.Text className={styles.title}>View mode</Typography.Text>
+						)}
 					</DialogTitle>
 				</DialogHeader>
 				<DialogCloseButton />

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

@@ -0,0 +1,24 @@
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { usePanelTitle } from '../hooks/usePanelTitle';
+import styles from './ViewPanelModal.module.scss';
+
+interface ViewPanelModalTitleProps {
+	panel: DashboardtypesPanelDTO;
+}
+
+function ViewPanelModalTitle({ panel }: ViewPanelModalTitleProps): JSX.Element {
+	const name = usePanelTitle(panel);
+
+	return (
+		<TooltipSimple title={name} arrow>
+			<Typography.Text className={styles.title}>
+				{name ? `${name} - (View mode)` : 'View mode'}
+			</Typography.Text>
+		</TooltipSimple>
+	);
+}
+
+export default ViewPanelModalTitle;

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

@@ -1,8 +1,12 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	type DashboardtypesPanelDTO,
+	Querybuildertypesv5VariableTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
+import { useDashboardStore } from 'pages/DashboardPage/DashboardContainer/store/useDashboardStore';
 import type { ReactElement } from 'react';
 import type { Warning } from 'types/api';
 
@@ -100,6 +104,30 @@ describe('PanelHeader title and description', () => {
 		expect(screen.getByText('My panel')).toBeInTheDocument();
 	});
 
+	it('substitutes dashboard variables into the panel name', () => {
+		useDashboardStore.setState({
+			dashboardId: 'dash-1',
+			resolvedVariables: {
+				'dash-1': {
+					service: {
+						type: Querybuildertypesv5VariableTypeDTO.query,
+						value: ['cart', 'api'],
+					},
+				},
+			},
+		});
+		renderWithProvider(
+			<PanelHeader
+				{...baseProps}
+				panel={makePanel({ name: 'Latency of $service ({{missing}})' })}
+			/>,
+		);
+		expect(
+			screen.getByText('Latency of cart, api ({{missing}})'),
+		).toBeInTheDocument();
+		useDashboardStore.setState({ dashboardId: '', resolvedVariables: {} });
+	});
+
 	it('shows the description info icon when a description is provided', () => {
 		renderWithProvider(
 			<PanelHeader

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

@@ -89,7 +89,7 @@ jest.mock(
 	'pages/DashboardPage/DashboardContainer/store/useDashboardStore',
 	() => ({
 		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
-			selector({ dashboardId: 'dash-1' }),
+			selector({ dashboardId: 'dash-1', resolvedVariables: {} }),
 	}),
 );
 

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

@@ -38,7 +38,7 @@ jest.mock(
 	'pages/DashboardPage/DashboardContainer/store/useDashboardStore',
 	() => ({
 		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
-			selector({ dashboardId: 'dash-1' }),
+			selector({ dashboardId: 'dash-1', resolvedVariables: {} }),
 	}),
 );
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDownloadPanelCsv.ts

@@ -8,6 +8,8 @@ import type { PanelOfKind } from 'pages/DashboardPage/DashboardContainer/Panels/
 import { downloadCsv } from 'pages/DashboardPage/DashboardContainer/Panels/utils/downloadCsv';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 
+import { usePanelTitle } from './usePanelTitle';
+
 interface UseDownloadPanelCsvArgs {
 	panel: DashboardtypesPanelDTO;
 	data: PanelQueryData;
@@ -29,7 +31,7 @@ export function useDownloadPanelCsv({
 	data,
 	canDownloadCsv,
 }: UseDownloadPanelCsvArgs): () => void {
-	const fileName = panel.spec.display.name;
+	const fileName = usePanelTitle(panel);
 
 	return useCallback((): void => {
 		if (!canDownloadCsv) {

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

@@ -10,6 +10,7 @@ import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/quer
 import { buildDownloadMenuItem } from '../utils/buildDownloadMenuItem';
 import { useDownloadPanelCsv } from './useDownloadPanelCsv';
 import { useDownloadPanelImage } from './useDownloadPanelImage';
+import { usePanelTitle } from './usePanelTitle';
 
 interface UseDownloadPanelMenuItemArgs {
 	panelId: string;
@@ -28,7 +29,7 @@ export function useDownloadPanelMenuItem({
 	data,
 	actions,
 }: UseDownloadPanelMenuItemArgs): MenuItem | null {
-	const panelName = panel.spec.display.name;
+	const panelName = usePanelTitle(panel);
 	const downloadPanelCsv = useDownloadPanelCsv({
 		panel,
 		data,

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/usePanelTitle.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { interpolateVariables } from 'pages/DashboardPage/DashboardContainer/Panels/utils/interpolateVariables';
+import { selectResolvedVariables } from 'pages/DashboardPage/DashboardContainer/store/slices/variableSelectionSlice';
+import { useDashboardStore } from 'pages/DashboardPage/DashboardContainer/store/useDashboardStore';
+
+export function usePanelTitle(panel: DashboardtypesPanelDTO): string {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const variables = useDashboardStore(selectResolvedVariables(dashboardId));
+	const name = panel.spec.display.name;
+
+	return useMemo(() => interpolateVariables(name, variables), [name, variables]);
+}

frontend/src/pages/DashboardPage/DashboardContainer/components/LockedIndicator/LockedIndicator.module.scss

@@ -2,9 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	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: 0;
 	width: 100%;
 	z-index: 100;

frontend/src/pages/DashboardPage/DashboardContainer/hooks/useDashboardVariableNames.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { dtoToFormModel } from 'pages/DashboardPage/DashboardContainer/DashboardSettings/Variables/variableAdapters';
+
+import { useDashboardFetchRequired } from './useDashboardFetchRequired';
+
+export function useDashboardVariableNames(): string[] {
+	const { variables } = useDashboardFetchRequired();
+
+	return useMemo(
+		() =>
+			variables
+				.map((dto) => dtoToFormModel(dto).name)
+				.filter((name): name is string => !!name),
+		[variables],
+	);
+}

frontend/src/pages/Support/Support.styles.scss

@@ -1,4 +1,7 @@
 .support-page-container {
+	max-height: 100vh;
+	overflow: hidden;
+
 	.support-page-header {
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);

frontend/src/pages/TraceDetailsV3/StripInfo/StripInfo.module.scss

@@ -1,3 +0,0 @@
-.hasErrors {
-	color: var(--destructive);
-}

frontend/src/pages/TraceDetailsV3/StripInfo/StripInfo.tsx

@@ -1,37 +0,0 @@
-import StripSeparator from 'container/BottomStrip/components/StripSeparator/StripSeparator';
-import StripTypography from 'container/BottomStrip/components/StripTypography/StripTypography';
-import cx from 'classnames';
-import { ChartNoAxesGantt, TriangleAlert } from '@signozhq/icons';
-
-import styles from './StripInfo.module.scss';
-
-interface StripInfoProps {
-	totalSpansCount: number;
-	totalErrorSpansCount: number;
-}
-
-function StripInfo({
-	totalSpansCount,
-	totalErrorSpansCount,
-}: StripInfoProps): JSX.Element {
-	return (
-		<>
-			<StripTypography prefix={<ChartNoAxesGantt size={13} />}>
-				Spans: {totalSpansCount}
-			</StripTypography>
-			<StripSeparator />
-			<StripTypography
-				prefix={
-					<TriangleAlert
-						size={13}
-						className={cx({ [styles.hasErrors]: totalErrorSpansCount > 0 })}
-					/>
-				}
-			>
-				Errors: {totalErrorSpansCount}
-			</StripTypography>
-		</>
-	);
-}
-
-export default StripInfo;

frontend/src/pages/TraceDetailsV3/StripInfo/__tests__/StripInfo.test.tsx

@@ -1,23 +0,0 @@
-import { render } from 'tests/test-utils';
-
-import StripInfo from '../StripInfo';
-
-describe('StripInfo', () => {
-	it('shows the span and error counts', () => {
-		const { getByText } = render(
-			<StripInfo totalSpansCount={600} totalErrorSpansCount={4} />,
-		);
-
-		expect(getByText('Spans: 600')).toBeInTheDocument();
-		expect(getByText('Errors: 4')).toBeInTheDocument();
-	});
-
-	it('shows zero counts rather than hiding them', () => {
-		const { getByText } = render(
-			<StripInfo totalSpansCount={0} totalErrorSpansCount={0} />,
-		);
-
-		expect(getByText('Spans: 0')).toBeInTheDocument();
-		expect(getByText('Errors: 0')).toBeInTheDocument();
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -1,6 +1,5 @@
 .root {
-	flex: 1;
-	min-height: 0;
+	height: calc(100vh);
 	display: flex;
 	flex-direction: column;
 }

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -14,9 +14,7 @@ import { Collapse } from 'antd';
 import { useDetailsPanel } from 'components/DetailsPanel';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { useBottomStripLeft } from 'container/BottomStrip/useBottomStripLeft';
 import useGetTraceV4 from 'hooks/trace/useGetTraceV4';
-import StripInfo from './StripInfo/StripInfo';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { ResizableBox } from 'periscope/components/ResizableBox';
@@ -146,19 +144,6 @@ function TraceDetailsV3(): JSX.Element {
 
 	const allSpans = traceData?.payload?.spans || [];
 	const totalSpansCount = traceData?.payload?.totalSpansCount || 0;
-	const totalErrorSpansCount = traceData?.payload?.totalErrorSpansCount || 0;
-
-	useBottomStripLeft(
-		useMemo(
-			() => (
-				<StripInfo
-					totalSpansCount={totalSpansCount}
-					totalErrorSpansCount={totalErrorSpansCount}
-				/>
-			),
-			[totalSpansCount, totalErrorSpansCount],
-		),
-	);
 	const isFullDataLoaded =
 		totalSpansCount > 0 && totalSpansCount <= allSpans.length;
 
@@ -456,10 +441,7 @@ function TraceDetailsV3(): JSX.Element {
 																})}
 															>
 																<TriangleAlert size={13} />
-																Errors:{' '}
-																{traceData.payload.totalErrorSpansCount ?? (
-																	<span className="translate-safe">{0}</span>
-																)}
+																Errors: {traceData.payload.totalErrorSpansCount ?? 0}
 															</span>
 														</span>
 													) : null}

frontend/src/pages/TracesFunnelDetails/TracesFunnelDetails.styles.scss

@@ -1,24 +1,13 @@
 .traces-funnel-details {
 	display: flex;
-	height: 100%;
+	// 45px -> height of the tab bar
+	height: calc(100vh - 45px);
 
 	&__steps-config {
 		flex-shrink: 0;
 		width: 600px;
 		border-right: 1px solid var(--l1-border);
-		// Positioning context for the absolute .steps-footer.
 		position: relative;
-		display: flex;
-		flex-direction: column;
-
-		// Scoped here so the modal usage of FunnelConfiguration on trace details
-		// stays in normal flow.
-		.funnel-configuration {
-			flex: 1;
-			min-height: 0;
-			display: flex;
-			flex-direction: column;
-		}
 	}
 	&__steps-results {
 		width: 100%;

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration.styles.scss

@@ -4,17 +4,14 @@
 		flex-direction: column;
 		justify-content: flex-start;
 		&.funnel-details-page {
-			flex: 1;
-			min-height: 0;
-			// .steps-footer is absolute against the config column, so its 64px is
-			// reserved rather than laid out.
-			margin-bottom: 64px;
+			height: calc(
+				100vh - 170px
+			); // 64px bottom bar + 61px configuration header + 45px page navbar
 			overflow: auto;
 		}
 	}
 
 	&__header {
-		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;

frontend/src/styles.scss

@@ -813,12 +813,6 @@ body.ai-assistant-panel-open {
 	}
 }
 
-body.bottom-strip-on {
-	.PylonChat-chatWindowFrameContainer {
-		bottom: var(--bottom-strip-height, 0px) !important;
-	}
-}
-
 [role='tab'] {
 	color: var(--foreground) !important;
 }