feat: rename AI Assistant to Noz and introduce Noz component with hov… (#11510)

* feat: rename AI Assistant to Noz and introduce Noz component with hover animation

* fix(ai-assistant): render Noz empty-state icon at true brand color

The .emptyIcon wrapper around the large empty-state Noz mascot applied
opacity: 0.85. Since opacity composites against the background, the brand
red (#E5484D) measured as #E96469 over the light panel and #C53F44 over
the dark panel instead of its true value. Removed the opacity so the
mascot keeps #E5484D in both themes.

---------

Co-authored-by: makeavish <makeavish786@gmail.com>

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Dot, Sparkles } from '@signozhq/icons';
+import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
+import Noz from 'components/Noz/Noz';
 import { Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { AIAssistantEvents } from 'container/AIAssistant/events';
@@ -21,6 +22,7 @@ import FeedbackModal from './FeedbackModal';
 import ShareURLModal from './ShareURLModal';
 
 import './HeaderRightSection.styles.scss';
+import { Typography } from '@signozhq/ui/typography';
 
 interface HeaderRightSectionProps {
 	enableAnnouncements: boolean;
@@ -107,21 +109,22 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<TooltipSimple title="AI Assistant">
+					<TooltipSimple title="Noz">
 						<Button
 							variant="solid"
 							color="secondary"
+							className="noz-wave"
 							onClick={handleOpenAIAssistant}
 							aria-label={
 								showHeaderPendingBadge
 									? pendingUserInputCount === 1
-										? 'Open AI Assistant, 1 action needs your response'
-										: `Open AI Assistant, ${pendingUserInputCount} actions need your response`
-									: 'Open AI Assistant'
+										? 'Open Noz, 1 action needs your response'
+										: `Open Noz, ${pendingUserInputCount} actions need your response`
+									: 'Open Noz'
 							}
-							prefix={<Sparkles size={14} color="var(--primary)" />}
+							prefix={<Noz size={20} />}
 						>
-							AI Assistant
+							<Typography.Text>Noz</Typography.Text>
 						</Button>
 					</TooltipSimple>
 				</div>

frontend/src/components/Noz/Noz.module.scss

@@ -0,0 +1,86 @@
+@keyframes noz-wave-wiggle {
+	0%,
+	100% {
+		transform: rotate(0deg);
+	}
+	25% {
+		transform: rotate(20deg);
+	}
+	75% {
+		transform: rotate(-20deg);
+	}
+}
+
+.noz {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 0;
+	overflow: visible;
+
+	svg {
+		display: block;
+		overflow: visible;
+	}
+
+	:global {
+		.noz-arm-left {
+			transform-origin: 4.18383px 13.4752px;
+			transform: rotate(0deg);
+			transition: transform 0.55s cubic-bezier(0.34, 1.7, 0.5, 1);
+			will-change: transform;
+		}
+
+		.noz-arm-wiggle {
+			transform-origin: 4.18383px 13.4752px;
+			transform: rotate(0deg);
+			will-change: transform;
+		}
+
+		.noz-head {
+			transform-origin: 12.02px 18.37px;
+			transform: rotate(0deg);
+			transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.5, 1);
+			will-change: transform;
+		}
+	}
+
+	&:hover {
+		:global(.noz-arm-left) {
+			transform: rotate(145deg) scale(1, 1.7);
+		}
+
+		:global(.noz-arm-wiggle) {
+			animation: noz-wave-wiggle 0.7s ease-in-out 0.2s infinite;
+		}
+
+		:global(.noz-head) {
+			transform: rotate(9deg);
+		}
+	}
+}
+
+:global(.noz-wave):hover {
+	:global(.noz-arm-left) {
+		transform: rotate(145deg) scale(1, 1.7);
+	}
+
+	:global(.noz-arm-wiggle) {
+		animation: noz-wave-wiggle 0.7s ease-in-out 0.2s infinite;
+	}
+
+	:global(.noz-head) {
+		transform: rotate(9deg);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.noz {
+		:global(.noz-arm-left),
+		:global(.noz-arm-wiggle),
+		:global(.noz-head) {
+			transition: none;
+			animation: none !important;
+		}
+	}
+}

frontend/src/components/Noz/Noz.tsx

@@ -0,0 +1,100 @@
+import cx from 'classnames';
+
+import styles from './Noz.module.scss';
+
+interface NozProps {
+	size?: number;
+	className?: string;
+}
+
+/**
+ * Noz — the SigNoz AI assistant mascot. Waves on hover.
+ *
+ * Hover behavior:
+ *  - Hovering the icon itself triggers the wave.
+ *  - To make a parent element (e.g. a Button) trigger the wave on its own
+ *    hover, add the class `noz-wave` to that parent.
+ */
+export default function Noz({ size = 24, className }: NozProps): JSX.Element {
+	return (
+		<span
+			className={cx(styles.noz, className)}
+			style={{ width: size, height: size }}
+			aria-hidden="true"
+		>
+			<svg
+				viewBox="-2 0.5 28 28"
+				width={size}
+				height={size}
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				{/* body */}
+				<rect
+					x="4.35938"
+					y="8.49908"
+					width="15.4569"
+					height="11.978"
+					rx="1.76147"
+					fill="#E5484D"
+				/>
+				{/* legs */}
+				<rect
+					x="6.87012"
+					y="19.0679"
+					width="3.34679"
+					height="3.69908"
+					rx="0.880734"
+					fill="#E5484D"
+				/>
+				<rect
+					x="13.916"
+					y="19.0679"
+					width="3.34679"
+					height="3.69908"
+					rx="0.880734"
+					fill="#E5484D"
+				/>
+				{/* right arm (static) */}
+				<rect
+					x="18.7598"
+					y="13.4752"
+					width="2.11376"
+					height="3.69908"
+					rx="0.880734"
+					fill="#E5484D"
+				/>
+				{/* left arm: outer group does the "lift", inner does the wiggle */}
+				<g className="noz-arm-left">
+					<g className="noz-arm-wiggle">
+						<rect
+							x="3.12695"
+							y="13.4752"
+							width="2.11376"
+							height="3.69908"
+							rx="0.880734"
+							fill="#E5484D"
+						/>
+					</g>
+				</g>
+				{/* head: face + eye + hat tilt together */}
+				<g className="noz-head">
+					<circle cx="12.0217" cy="14.4881" r="3.87523" fill="#F5F5F5" />
+					<path
+						d="M12.0237 12.8024C12.0237 13.7328 11.2673 14.4892 10.337 14.4892C10.0339 14.4892 9.74926 14.4101 9.50152 14.2678C9.47517 14.5551 9.49888 14.8502 9.57795 15.1428C9.93901 16.4921 11.3279 17.2933 12.6773 16.9323C14.0267 16.5712 14.8279 15.1823 14.4668 13.8329C14.1453 12.6285 13.0041 11.8616 11.8023 11.967C11.942 12.2121 12.0237 12.4967 12.0237 12.8024Z"
+						fill="#0A0C10"
+					/>
+					<path
+						d="M8.33833 7.94578L9.83358 4.31319C10.1302 3.59261 10.6676 2.99939 11.355 2.63299L13.9181 1.26684C14.1327 1.15169 14.3804 1.34885 14.3194 1.58439L13.6703 4.06892C13.6511 4.14046 13.6424 4.21374 13.6424 4.28876C13.6424 4.39868 13.6633 4.5086 13.7052 4.61154L15.0382 7.94578H11.4248L11.6307 7.32813L12.3356 7.09259C12.449 7.05421 12.5257 6.94778 12.5257 6.82739C12.5257 6.707 12.449 6.60057 12.3356 6.56218L11.6307 6.32664L11.3951 5.62176C11.3568 5.51009 11.2503 5.43333 11.1299 5.43333C11.0096 5.43333 10.9031 5.5101 10.8647 5.6235L10.6292 6.32839L9.92431 6.56393C9.8109 6.60231 9.73413 6.70874 9.73413 6.82913C9.73413 6.94952 9.8109 7.05595 9.92431 7.09434L10.6292 7.32988L10.8351 7.94752H8.33833V7.94578ZM12.1 3.43558C12.0808 3.378 12.0285 3.33962 11.9674 3.33962C11.9064 3.33962 11.854 3.378 11.8348 3.43558L11.7179 3.78802L11.3655 3.90492C11.3079 3.92411 11.2695 3.97645 11.2695 4.03752C11.2695 4.09859 11.3079 4.15093 11.3655 4.17012L11.7179 4.28702L11.8348 4.63946C11.854 4.69704 11.9064 4.73542 11.9674 4.73542C12.0285 4.73542 12.0808 4.69704 12.1 4.63946L12.2169 4.28702L12.5694 4.17012C12.6269 4.15093 12.6653 4.09859 12.6653 4.03752C12.6653 3.97645 12.6269 3.92411 12.5694 3.90492L12.2169 3.78802L12.1 3.43558ZM7.78 7.91088H15.5965C15.9053 7.91088 16.1548 8.16038 16.1548 8.4692C16.1548 8.77803 15.9053 9.02753 15.5965 9.02753H7.78C7.47118 9.02753 7.22168 8.77803 7.22168 8.4692C7.22168 8.16038 7.47118 7.91088 7.78 7.91088Z"
+						fill="#4E74F8"
+					/>
+				</g>
+			</svg>
+		</span>
+	);
+}
+
+Noz.defaultProps = {
+	size: 24,
+	className: undefined,
+};

frontend/src/components/TanStackTableView/TanStackTableText.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import cx from 'classnames';
 
 import tableStyles from './TanStackTable.module.scss';
@@ -22,21 +22,19 @@ type WithDangerousHtml = BaseProps & {
 
 export type TanStackTableTextProps = WithChildren | WithDangerousHtml;
 
-function TanStackTableText({
-	children,
-	className,
-	dangerouslySetInnerHTML,
-	...rest
-}: TanStackTableTextProps): JSX.Element {
-	return (
+const TanStackTableText = forwardRef<HTMLSpanElement, TanStackTableTextProps>(
+	({ children, className, dangerouslySetInnerHTML, ...rest }, ref) => (
 		<span
+			ref={ref}
 			className={cx(tableStyles.tableCellText, className)}
 			dangerouslySetInnerHTML={dangerouslySetInnerHTML}
 			{...rest}
 		>
 			{children}
 		</span>
-	);
-}
+	),
+);
+
+TanStackTableText.displayName = 'TanStackTableText';
 
 export default TanStackTableText;

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -76,4 +76,19 @@
 
 .cmd-item-icon {
 	margin-right: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	svg {
+		height: 16px !important;
+		width: 16px !important;
+	}
+
+	&.noz-icon {
+		svg {
+			height: 20px !important;
+			width: 20px !important;
+		}
+	}
 }

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import cx from 'classnames';
 import { useLocation } from 'react-router-dom';
 import {
 	CommandDialog,
@@ -162,7 +163,11 @@ export function CmdKPalette({
 								value={it.name}
 								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
 							>
-								<span className="cmd-item-icon">{it.icon}</span>
+								<span
+									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
+								>
+									{it.icon}
+								</span>
 								{it.name}
 								{it.shortcut && it.shortcut.length > 0 && (
 									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>

frontend/src/constants/shortcutActions.tsx

@@ -15,10 +15,10 @@ import {
 	ListMinus,
 	ScrollText,
 	Settings,
-	Sparkles,
 	TowerControl,
 	Workflow,
 } from '@signozhq/icons';
+import Noz from 'components/Noz/Noz';
 import { ROLES } from 'types/roles';
 
 export type CmdAction = {
@@ -292,11 +292,11 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 	if (aiAssistant) {
 		actions.unshift({
 			id: 'ai-assistant',
-			name: 'Open AI Assistant',
+			name: 'Open Noz',
 			shortcut: ['cmd+j'],
-			keywords: 'ai assistant chat ask sparkles copilot',
-			section: 'AI Assistant',
-			icon: <Sparkles size={14} />,
+			keywords: 'noz ai assistant chat ask sparkles copilot',
+			section: 'Noz',
+			icon: <Noz size={16} />,
 			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
 			perform: aiAssistant.open,
 		});

frontend/src/container/AIAssistant/AIAssistantDrawer/AIAssistantDrawer.tsx

@@ -4,7 +4,8 @@ import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Drawer } from 'antd';
 import ROUTES from 'constants/routes';
-import { Maximize2, MessageSquare, Plus, X } from '@signozhq/icons';
+import { Maximize2, Plus, X } from '@signozhq/icons';
+import Noz from 'components/Noz/Noz';
 
 import ConversationView from '../ConversationView';
 import { useAIAssistantStore } from '../store/useAIAssistantStore';
@@ -46,9 +47,9 @@ export default function AIAssistantDrawer(): JSX.Element {
 			closeIcon={null}
 			title={
 				<div>
-					<div>
-						<MessageSquare size={16} />
-						<span>AI Assistant</span>
+					<div className="noz-wave">
+						<Noz size={16} />
+						<span>Noz</span>
 					</div>
 
 					<div>

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -4,7 +4,8 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
-import { History, Maximize2, Minus, Plus, Sparkles, X } from '@signozhq/icons';
+import { History, Maximize2, Minus, Plus, X } from '@signozhq/icons';
+import Noz from 'components/Noz/Noz';
 
 import logEvent from 'api/common/logEvent';
 
@@ -142,15 +143,15 @@ export default function AIAssistantModal(): JSX.Element | null {
 				className={styles.backdrop}
 				role="dialog"
 				aria-modal="true"
-				aria-label="AI Assistant"
+				aria-label="Noz"
 				onClick={handleBackdropClick}
 			>
 				<div className={styles.modal}>
 					{/* Header */}
 					<div className={styles.header}>
-						<div className={styles.title}>
-							<Sparkles size={16} color="var(--primary)" />
-							<span>AI Assistant</span>
+						<div className={`${styles.title} noz-wave`}>
+							<Noz size={16} />
+							<span>Noz</span>
 							<kbd className={styles.shortcut}>
 								<span>⌘</span>
 								<span>J</span>

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -3,7 +3,8 @@ import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
-import { History, Maximize2, Plus, Sparkles, X } from '@signozhq/icons';
+import { History, Maximize2, Plus, X } from '@signozhq/icons';
+import Noz from 'components/Noz/Noz';
 
 import logEvent from 'api/common/logEvent';
 
@@ -137,9 +138,9 @@ export default function AIAssistantPanel(): JSX.Element | null {
 				{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
 				<div className={styles.resizeHandle} onMouseDown={handleResizeMouseDown} />
 				<div className={styles.header}>
-					<div className={styles.title}>
-						<Sparkles size={18} color="var(--primary)" />
-						<span>AI Assistant</span>
+					<div className={`${styles.title} noz-wave`}>
+						<Noz size={18} />
+						<span>Noz</span>
 					</div>
 
 					<div className={styles.actions}>

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
-import { Bot } from '@signozhq/icons';
+import Noz from 'components/Noz/Noz';
 
 import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
 import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
@@ -42,15 +42,15 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 	}
 
 	return (
-		<TooltipSimple title="AI Assistant">
+		<TooltipSimple title="Noz">
 			<Button
 				variant="solid"
 				color="primary"
-				className={styles.trigger}
+				className={`${styles.trigger} noz-wave`}
 				onClick={handleOpen}
-				aria-label="Open AI Assistant"
+				aria-label="Open Noz"
 			>
-				<Bot size={20} />
+				<Noz size={24} />
 			</Button>
 		</TooltipSimple>
 	);

frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.module.scss

@@ -28,7 +28,6 @@
 
 .emptyIcon {
 	margin-bottom: 4px;
-	opacity: 0.85;
 }
 
 .emptyTitle {

frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx

@@ -7,8 +7,8 @@ import {
 	ChartBar,
 	Search,
 	Zap,
-	Sparkles,
 } from '@signozhq/icons';
+import Noz from 'components/Noz/Noz';
 
 import logEvent from 'api/common/logEvent';
 
@@ -177,10 +177,10 @@ export default function VirtualizedMessages({
 	if (messages.length === 0 && !showStreamingSlot) {
 		return (
 			<div className={styles.empty}>
-				<div className={styles.emptyIcon}>
-					<Sparkles size={24} color="var(--primary)" />
+				<div className={`${styles.emptyIcon} noz-wave`}>
+					<Noz size={48} />
 				</div>
-				<h3 className={styles.emptyTitle}>SigNoz AI Assistant</h3>
+				<h3 className={styles.emptyTitle}>Noz</h3>
 				<p className={styles.emptySubtitle}>
 					Ask questions about your traces, logs, metrics, and infrastructure.
 				</p>

frontend/src/container/SideNav/NavItem/NavItem.tsx

@@ -27,7 +27,7 @@ export default function NavItem({
 	showIcon?: boolean;
 	dataTestId?: string;
 }): JSX.Element {
-	const { label, icon, isBeta, isNew } = item;
+	const { label, icon, isBeta, isNew, isEarlyAccess } = item;
 
 	const handleTogglePinClick = (
 		event: React.MouseEvent<SVGSVGElement, MouseEvent>,
@@ -53,7 +53,11 @@ export default function NavItem({
 		>
 			{showIcon && <div className="nav-item-active-marker" />}
 			<div className={cx('nav-item-data', isBeta ? 'beta-tag' : '')}>
-				{showIcon && <div className="nav-item-icon">{icon}</div>}
+				{showIcon && (
+					<div className={cx('nav-item-icon', isEarlyAccess ? 'noz-wave' : '')}>
+						{icon}
+					</div>
+				)}
 
 				<div className="nav-item-label">{label}</div>
 
@@ -73,6 +77,12 @@ export default function NavItem({
 					</div>
 				)}
 
+				{isEarlyAccess && (
+					<div className="nav-item-early-access">
+						<Badge color="robin">Early Access</Badge>
+					</div>
+				)}
+
 				{onTogglePin && !isPinned && (
 					<Tooltip title="Add to shortcuts" placement="right">
 						<Pin

frontend/src/container/SideNav/SideNav.styles.scss

@@ -579,7 +579,8 @@
 	}
 
 	.nav-item-beta,
-	.nav-item-new {
+	.nav-item-new,
+	.nav-item-early-access {
 		display: none;
 	}
 
@@ -623,6 +624,23 @@
 		background: var(--l3-background);
 	}
 
+	.sidenav-early-access-tag {
+		font-variant-numeric: lining-nums tabular-nums slashed-zero;
+		font-feature-settings:
+			'case' on,
+			'cpsp' on,
+			'dlig' on,
+			'salt' on;
+		font-family: Inter;
+		font-size: 9px;
+		font-style: normal;
+		font-weight: 300;
+		line-height: 12px;
+		letter-spacing: 0.3px;
+		text-transform: uppercase;
+		border-radius: 12px;
+	}
+
 	&:not(.pinned) {
 		.nav-item {
 			.nav-item-data {
@@ -839,7 +857,8 @@
 		}
 
 		.nav-item-beta,
-		.nav-item-new {
+		.nav-item-new,
+		.nav-item-early-access {
 			display: block;
 		}
 	}
@@ -1012,7 +1031,8 @@
 		}
 
 		.nav-item-beta,
-		.nav-item-new {
+		.nav-item-new,
+		.nav-item-early-access {
 			display: block;
 		}
 	}

frontend/src/container/SideNav/menuItems.tsx

@@ -44,6 +44,7 @@ import {
 	SidebarItem,
 } from './sideNav.types';
 import { Style } from '@signozhq/design-tokens';
+import Noz from 'components/Noz/Noz';
 
 export const getStartedMenuItem = {
 	key: ROUTES.GET_STARTED,
@@ -92,9 +93,10 @@ const AI_ASSISTANT_NAV_KEY = '/ai-assistant/new';
 
 export const aiAssistantMenuItem = {
 	key: AI_ASSISTANT_NAV_KEY,
-	label: 'AI Assistant',
-	icon: <Sparkles size={16} className="ai-assistant-icon" />,
+	label: 'Noz',
+	icon: <Noz size={16} />,
 	itemKey: 'ai-assistant',
+	isEarlyAccess: true,
 };
 
 export const shortcutMenuItem = {

frontend/src/container/SideNav/sideNav.types.ts

@@ -14,6 +14,7 @@ export interface SidebarItem {
 	label?: ReactNode;
 	isBeta?: boolean;
 	isNew?: boolean;
+	isEarlyAccess?: boolean;
 	isPinned?: boolean;
 	children?: SidebarItem[];
 	isExternal?: boolean;

frontend/src/pages/AIAssistantPage/AIAssistantPage.tsx

@@ -9,7 +9,7 @@ import { AIAssistantEvents } from 'container/AIAssistant/events';
 import { normalizePage } from 'container/AIAssistant/hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
 import { VariantContext } from 'container/AIAssistant/VariantContext';
-import { Sparkles } from '@signozhq/icons';
+import Noz from 'components/Noz/Noz';
 
 import styles from './AIAssistantPage.module.scss';
 import ConversationsList from 'container/AIAssistant/components/ConversationsList';
@@ -116,9 +116,9 @@ export default function AIAssistantPage(): JSX.Element {
 		<VariantContext.Provider value="page">
 			<div className={styles.page}>
 				<div className={styles.header}>
-					<div className={styles.title}>
-						<Sparkles size={16} color="var(--primary)" />
-						<span>AI Assistant</span>
+					<div className={`${styles.title} noz-wave`}>
+						<Noz size={18} />
+						<span>Noz</span>
 					</div>
 				</div>