refactor(trace-details): name the strip hook for the page and let it publish

A page's hook owns both the items and putting them in the strip, so the name
says which page it belongs to and the page has one call rather than two.

frontend/src/AppRoutes/index.tsx

@@ -12,13 +12,14 @@ 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';
@@ -58,7 +59,6 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
-		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,6 +66,8 @@ 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);
@@ -253,7 +255,9 @@ 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' ||
@@ -263,71 +267,32 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname]);
+	}, [pathname, isSavedViewEnabled]);
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	// Identity for the Pylon widget. Whether this user gets Pylon at all is
+	// `useChatSupport`'s call — this only fills in who they are.
 	useEffect(() => {
-		// 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,
-					},
-				};
-			}
+		if (chatSupport !== ChatSupportState.Pylon) {
+			return;
 		}
-	}, [
-		isLoggedInState,
-		user,
-		pathname,
-		trialInfo?.trialConvertedToSubscription,
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		activeLicense,
-		trialInfo,
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-	]);
+
+		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]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -0,0 +1,103 @@
+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/AddCreditCardModal/stories/AddCreditCardModal.stories.mocks.tsx

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+const SUBSCRIPTIONS = 'http://localhost/api/v1/subscriptions';
+
+export const createSubscriptionHandlers = [
+	rest.post(SUBSCRIPTIONS, (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json({ data: { redirectURL: '' } })),
+	),
+];

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { screen, userEvent, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { createSubscriptionHandlers } from './AddCreditCardModal.stories.mocks';
+
+import AddCreditCardModal from '../AddCreditCardModal';
+
+/** Stands in for the surfaces that open it: the strip's Support button, and
+ * `LaunchChatSupport` in the custom domain and onboarding flows. */
+function ModalFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button
+				data-testid="open-add-credit-card"
+				onClick={(): void => setOpen(true)}
+			>
+				Contact support
+			</Button>
+			<AddCreditCardModal open={open} onClose={(): void => setOpen(false)} />
+		</>
+	);
+}
+
+const meta = {
+	title: 'Components/Add Credit Card Modal',
+	component: ModalFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+	parameters: {
+		msw: { handlers: createSubscriptionHandlers },
+	},
+} satisfies Meta<typeof ModalFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** What a trial user without a card sees in place of chat support. */
+export const Default: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('open-add-credit-card'),
+		);
+		await screen.findByRole('dialog', {
+			name: /Add Credit Card for Chat Support/i,
+		});
+	},
+};

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,63 +1,15 @@
 import { useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-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';
+import { MessageSquareText } from '@signozhq/icons';
 
 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">
@@ -76,47 +28,16 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				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>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
 		</>
 	);
 }

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,22 +1,14 @@
 import { useMemo, useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button, Tooltip } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 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, CreditCard, X } from '@signozhq/icons';
+import { CircleHelp } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -41,7 +33,6 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -119,43 +110,12 @@ 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
@@ -175,47 +135,11 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				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>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={handleAddCreditCard}
+			/>
 		</div>
 	) : null;
 }

frontend/src/container/AppLayout/index.tsx

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

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

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

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

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

@@ -11,6 +11,8 @@
 	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
@@ -23,14 +25,21 @@
 .right {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-6);
+	gap: var(--spacing-4);
 	min-width: 0;
 }
 
-// Temporary placeholder for the left slot. Replaced later.
-.version {
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+.left {
+	cursor: default;
+}
+
+// separator b/w strip entities
+.left > *:not(:last-child)::after,
+.right > *:not(:last-child)::after {
+	content: '';
+	flex-shrink: 0;
+	width: 1px;
+	height: 14px;
+	background: var(--l2-border);
+	margin-left: var(--spacing-4);
 }

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

@@ -0,0 +1,53 @@
+import * as Sentry from '@sentry/react';
+import { useAppContext } from 'providers/App/App';
+
+import StripKeyValue from '../components/StripKeyValue/StripKeyValue';
+import StripTypography from '../components/StripTypography/StripTypography';
+import { useBottomStripStore } from '../store/useBottomStripStore';
+import { type StripItem, StripItemKind } from '../types';
+
+function renderItem(item: StripItem, index: number): JSX.Element {
+	if (item.kind === StripItemKind.KeyValue) {
+		return (
+			<StripKeyValue
+				key={index}
+				label={item.label}
+				value={item.value}
+				prefix={item.prefix}
+				tone={item.tone}
+			/>
+		);
+	}
+
+	return (
+		// eslint-disable-next-line react/no-array-index-key
+		<StripTypography key={index} prefix={item.prefix}>
+			{item.text}
+		</StripTypography>
+	);
+}
+
+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?.length) {
+		return versionNode;
+	}
+
+	return (
+		// Keyed so a page whose items throw does not leave the boundary latched on
+		// the fallback for every page after it.
+		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
+			{left.map(renderItem)}
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default LeftSlot;

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

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

@@ -0,0 +1,81 @@
+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,12 +1,65 @@
+import { useMemo, 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 { useBottomStrip } from '../useBottomStrip';
+import { StripItemKind } from '../types';
+
+/** Stands in for a page that puts something on the left of the strip. */
+function Page({ text }: { text: string }): null {
+	useBottomStrip(useMemo(() => [{ kind: StripItemKind.Text, text }], [text]));
+	return null;
+}
+
+/**
+ * A page whose icon throws when the strip renders it. `prefix` is the one place
+ * the config still takes a node, so it is the only way a page can break it.
+ */
+function BoomPage(): null {
+	useBottomStrip([{ kind: StripItemKind.Text, text: 'boom', prefix: <Boom /> }]);
+	return null;
+}
+
+/** A page whose value changes without needing `rerender`. */
+function ChangingPage(): JSX.Element {
+	const [count, setCount] = useState(600);
+
+	useBottomStrip(
+		useMemo(
+			() => [{ kind: StripItemKind.Text, text: `${count} traces` }],
+			[count],
+		),
+	);
+
+	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 />);
 
@@ -28,22 +81,96 @@ describe('BottomStrip', () => {
 	it.each([['v0.134.67'], ['main-64f1c2a']])(
 		'renders the build version %p exactly as given',
 		(version) => {
-			const { getByTestId } = render(<BottomStrip />, undefined, {
+			const { getByText } = render(<BottomStrip />, undefined, {
 				appContextOverrides: {
 					versionData: { version, ee: 'Y', setupCompleted: true },
 				},
 			});
 
-			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
+			expect(getByText(version)).toBeInTheDocument();
 		},
 	);
 
 	it('renders the strip without a version when none is available', () => {
-		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
+		const { getByTestId } = render(<BottomStrip />, undefined, {
 			appContextOverrides: { versionData: null },
 		});
 
-		expect(getByTestId('bottom-strip')).toBeInTheDocument();
-		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
+		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 text="600 traces" />);
+			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 text="600 traces" />);
+			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(<BoomPage />);
+			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 text="page A" />);
+			render(<Page text="page B" />);
+			const { getByText } = render(<BottomStrip />, undefined, withVersion);
+
+			pageA.unmount();
+
+			expect(getByText('page B')).toBeInTheDocument();
+		});
 	});
 });

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

@@ -0,0 +1,24 @@
+// `:` is spaced like a word, per the Figma, so the gap here is a space width
+// rather than the wider gap between whole items.
+.keyValue {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+
+	color: var(--l2-foreground);
+	white-space: nowrap;
+}
+
+.prefix {
+	display: inline-flex;
+	align-items: center;
+	margin-right: var(--spacing-1);
+}
+
+.warning {
+	color: var(--warning);
+}
+
+.error {
+	color: var(--destructive);
+}

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

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import { StripTone } from '../../types';
+
+import styles from './StripKeyValue.module.scss';
+
+export interface StripKeyValueProps {
+	label: string;
+	value: string | number;
+	/** Leading icon. Same shape as `Button`'s. */
+	prefix?: ReactNode;
+	/** Tints the icon; the text stays neutral at every tone. */
+	tone?: StripTone;
+}
+
+/** A labelled number, rendered `Spans : 31`. */
+function StripKeyValue({
+	label,
+	value,
+	prefix,
+	tone,
+}: StripKeyValueProps): JSX.Element {
+	return (
+		<span className={styles.keyValue}>
+			{prefix && (
+				<span className={cx(styles.prefix, tone && styles[tone])} data-tone={tone}>
+					{prefix}
+				</span>
+			)}
+			<Typography.Text as="span" className={styles.label}>
+				{label}
+			</Typography.Text>
+			<Typography.Text as="span" className={styles.colon}>
+				:
+			</Typography.Text>
+			<Typography.Text as="span" className={styles.value}>
+				{value}
+			</Typography.Text>
+		</span>
+	);
+}
+
+StripKeyValue.defaultProps = { prefix: undefined, tone: StripTone.Default };
+
+export default StripKeyValue;

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

@@ -0,0 +1,46 @@
+import { render } from 'tests/test-utils';
+
+import { StripTone } from '../../../types';
+
+import StripKeyValue from '../StripKeyValue';
+
+describe('StripKeyValue', () => {
+	it('renders the label and the value around a colon it owns', () => {
+		const { getByText, container } = render(
+			<StripKeyValue label="Spans" value={31} />,
+		);
+
+		expect(getByText('Spans')).toBeInTheDocument();
+		expect(getByText('31')).toBeInTheDocument();
+		// The consumer never builds the string, so the spacing cannot drift.
+		expect(container.textContent).toBe('Spans:31');
+	});
+
+	it('tints only the icon when the tone is set', () => {
+		const { container } = render(
+			<StripKeyValue
+				label="Errors"
+				value={4}
+				tone={StripTone.Error}
+				prefix={<svg data-testid="icon" />}
+			/>,
+		);
+
+		// The tone lands on the icon, never on the text.
+		expect(container.querySelector('[data-tone]')).toHaveAttribute(
+			'data-tone',
+			'error',
+		);
+	});
+
+	it('leaves the icon untinted by default', () => {
+		const { container } = render(
+			<StripKeyValue label="Errors" value={0} prefix={<svg />} />,
+		);
+
+		expect(container.querySelector('[data-tone]')).toHaveAttribute(
+			'data-tone',
+			'default',
+		);
+	});
+});

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

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './StripTypography.module.scss';
+
+interface StripTypographyProps {
+	children: ReactNode;
+	/** Leading icon. Same shape as `Button`'s. */
+	prefix?: ReactNode;
+}
+
+/** A single phrase. A labelled number belongs in `StripKeyValue`. */
+function StripTypography({
+	children,
+	prefix,
+}: StripTypographyProps): JSX.Element {
+	return (
+		<span className={styles.stripTypography}>
+			{prefix}
+			<Typography.Text as="span">{children}</Typography.Text>
+		</span>
+	);
+}
+
+StripTypography.defaultProps = { prefix: undefined };
+
+export type { StripTypographyProps };
+export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -1,5 +1,8 @@
 import { useLayoutEffect } from 'react';
-import { useAppContext } from 'providers/App/App';
+
+import AskNoz from './AskNoz/AskNoz';
+import LeftSlot from './LeftSlot/LeftSlot';
+import SupportButton from './SupportButton/SupportButton';
 
 import styles from './BottomStrip.module.scss';
 
@@ -9,9 +12,6 @@ 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(
@@ -28,13 +28,12 @@ function BottomStrip(): JSX.Element {
 	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>
-				)}
+				<LeftSlot />
+			</div>
+			<div className={styles.right}>
+				<AskNoz />
+				<SupportButton />
 			</div>
-			<div className={styles.right} />
 		</div>
 	);
 }

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

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+
+import type { StripItem } from '../types';
+
+interface BottomStripState {
+	/** What the strip shows on the left, or null to fall back to the version. */
+	left: StripItem[] | null;
+	/** Which page owns the current value — see `clearLeft`. */
+	ownerId: string | null;
+	setLeft: (ownerId: string, left: StripItem[] | null) => 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/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+export enum StripTone {
+	Default = 'default',
+	Warning = 'warning',
+	Error = 'error',
+}
+
+export enum StripItemKind {
+	/** A phrase in the page's own words, e.g. "18 services". */
+	Text = 'text',
+	/** A labelled number, rendered `label : value`. */
+	KeyValue = 'keyValue',
+}
+
+/** What a page may put on the left of the strip. */
+export type StripItem =
+	| {
+			kind: StripItemKind.Text;
+			text: string;
+			prefix?: ReactNode;
+	  }
+	| {
+			kind: StripItemKind.KeyValue;
+			/** Without a colon; the strip renders the separator. */
+			label: string;
+			value: string | number;
+			prefix?: ReactNode;
+			/** Tints the icon; the text stays neutral at every tone. */
+			tone?: StripTone;
+	  };

frontend/src/container/BottomStrip/useBottomStrip.ts

@@ -0,0 +1,25 @@
+import { useEffect, useId } from 'react';
+
+import { useBottomStripStore } from './store/useBottomStripStore';
+import type { StripItem } from './types';
+
+/**
+ * Puts `items` in the bottom strip for as long as the calling page is mounted.
+ * Pass null to show nothing and let the version through. The left is the only
+ * side a page contributes to; the right is the strip's own.
+ *
+ * There is no refresh API by design: a page that refetches re-renders, which
+ * produces new items, which re-runs this effect. Memoise the array where it is
+ * built, or the store is written on every render.
+ */
+export function useBottomStrip(items: StripItem[] | null): void {
+	const ownerId = useId();
+	const setLeft = useBottomStripStore((state) => state.setLeft);
+	const clearLeft = useBottomStripStore((state) => state.clearLeft);
+
+	useEffect(() => {
+		setLeft(ownerId, items);
+
+		return (): void => clearLeft(ownerId);
+	}, [items, ownerId, setLeft, clearLeft]);
+}

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

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

@@ -0,0 +1,70 @@
+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/pages/TraceDetailsV3/__tests__/useTraceDetailsStripInfo.test.tsx

@@ -0,0 +1,57 @@
+import { renderHook } from '@testing-library/react';
+import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
+import { StripItemKind, StripTone } from 'container/BottomStrip/types';
+
+import { useTraceDetailsStripInfo } from '../useTraceDetailsStripInfo';
+
+describe('useTraceDetailsStripInfo', () => {
+	beforeEach(() => {
+		useBottomStripStore.setState({ left: null, ownerId: null });
+	});
+
+	it('puts the span and error counts in the strip', () => {
+		renderHook(() =>
+			useTraceDetailsStripInfo({
+				totalSpansCount: 600,
+				totalErrorSpansCount: 4,
+			}),
+		);
+
+		expect(useBottomStripStore.getState().left).toMatchObject([
+			{ kind: StripItemKind.KeyValue, label: 'Spans', value: 600 },
+			{
+				kind: StripItemKind.KeyValue,
+				label: 'Errors',
+				value: 4,
+				tone: StripTone.Error,
+			},
+		]);
+	});
+
+	it('leaves the error item untoned when nothing failed', () => {
+		renderHook(() =>
+			useTraceDetailsStripInfo({
+				totalSpansCount: 600,
+				totalErrorSpansCount: 0,
+			}),
+		);
+
+		expect(useBottomStripStore.getState().left?.[1]).toMatchObject({
+			value: 0,
+			tone: StripTone.Default,
+		});
+	});
+
+	it('clears the strip when the page unmounts', () => {
+		const { unmount } = renderHook(() =>
+			useTraceDetailsStripInfo({
+				totalSpansCount: 600,
+				totalErrorSpansCount: 4,
+			}),
+		);
+
+		unmount();
+
+		expect(useBottomStripStore.getState().left).toBeNull();
+	});
+});

frontend/src/pages/TraceDetailsV3/index.tsx

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

frontend/src/pages/TraceDetailsV3/useTraceDetailsStripInfo.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { ChartNoAxesGantt, TriangleAlert } from '@signozhq/icons';
+import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
+import {
+	type StripItem,
+	StripItemKind,
+	StripTone,
+} from 'container/BottomStrip/types';
+
+interface UseTraceDetailsStripInfoArgs {
+	totalSpansCount: number;
+	totalErrorSpansCount: number;
+}
+
+/**
+ * Takes the counts rather than fetching them: the trace query key includes the
+ * selected span, so a fetch here would fire on every span click.
+ */
+export function useTraceDetailsStripInfo({
+	totalSpansCount,
+	totalErrorSpansCount,
+}: UseTraceDetailsStripInfoArgs): void {
+	const items = useMemo<StripItem[]>(
+		() => [
+			{
+				kind: StripItemKind.KeyValue,
+				label: 'Spans',
+				value: totalSpansCount,
+				prefix: <ChartNoAxesGantt size={13} />,
+			},
+			{
+				kind: StripItemKind.KeyValue,
+				label: 'Errors',
+				value: totalErrorSpansCount,
+				prefix: <TriangleAlert size={13} />,
+				tone: totalErrorSpansCount > 0 ? StripTone.Error : StripTone.Default,
+			},
+		],
+		[totalSpansCount, totalErrorSpansCount],
+	);
+
+	useBottomStrip(items);
+}

frontend/src/styles.scss

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