chore: add avatar to no-antd components

* feat: update routing and permissions for AI Assistant feature

* feat: ai assistant routing, mid-execution auth recovery

* chore: remove local overrides

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.1
+    image: signoz/signoz:v0.126.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.1
+    image: signoz/signoz:v0.126.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.1}
+    image: signoz/signoz:${VERSION:-v0.126.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.1}
+    image: signoz/signoz:${VERSION:-v0.126.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

frontend/package.json

@@ -50,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.22",
+    "@signozhq/ui": "0.0.23",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/plugins/rules/no-antd-components.mjs

@@ -19,6 +19,7 @@ const BANNED_COMPONENTS = {
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
+	Avatar: 'Use @signozhq/ui/avatar instead of antd Avatar.',
 };
 
 export default {

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.22
-        version: 0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.23
+        version: 0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3279,8 +3279,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.22':
-    resolution: {integrity: sha512-CJDyA4H+uXG/U2/d7/nRMNY6WIW0YWc843mfzUQALjm+xOhbO4T+qt67THjV4s1wTMs1cZLkmScbMddf+hXLIQ==}
+  '@signozhq/ui@0.0.23':
+    resolution: {integrity: sha512-JqIYlVHksPf07rLGWm1mgV+qpaTFfXIrXUdW0YsDN57wnW5Mu2TaMcertegJVJz/XK/sWcUVVCGXwmx1F//wqQ==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -12041,7 +12041,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.22(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

frontend/src/AppRoutes/Private.tsx

@@ -102,7 +102,11 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <>{children}</>;
 	}
 
-	if (pathname.startsWith('/ai-assistant/') && !isAIAssistantEnabled) {
+	if (
+		(pathname === ROUTES.AI_ASSISTANT_BASE ||
+			pathname.startsWith('/ai-assistant/')) &&
+		!isAIAssistantEnabled
+	) {
 		return <Redirect to={ROUTES.HOME} />;
 	}
 

frontend/src/AppRoutes/index.tsx

@@ -229,18 +229,18 @@ function App(): JSX.Element {
 		}
 
 		setRoutes((prev) => {
-			const hasAi = prev.some((r) => r.path === ROUTES.AI_ASSISTANT);
+			const hasAi = prev.some((r) => r.key === 'AI_ASSISTANT');
 			if (isAIAssistantEnabled === hasAi) {
 				return prev;
 			}
 			if (isAIAssistantEnabled) {
-				const aiRoute = defaultRoutes.find((r) => r.path === ROUTES.AI_ASSISTANT);
+				const aiRoute = defaultRoutes.find((r) => r.key === 'AI_ASSISTANT');
 				if (!aiRoute) {
 					return prev;
 				}
-				return [...prev.filter((r) => r.path !== ROUTES.AI_ASSISTANT), aiRoute];
+				return [...prev.filter((r) => r.key !== 'AI_ASSISTANT'), aiRoute];
 			}
-			return prev.filter((r) => r.path !== ROUTES.AI_ASSISTANT);
+			return prev.filter((r) => r.key !== 'AI_ASSISTANT');
 		});
 	}, [isLoggedInState, isAIAssistantEnabled]);
 
@@ -254,6 +254,7 @@ function App(): JSX.Element {
 		if (
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
+			pathname === '/ai-assistant' ||
 			pathname.startsWith('/ai-assistant/')
 		) {
 			window.Pylon?.('hideChatBubble');

frontend/src/AppRoutes/routes.ts

@@ -501,7 +501,7 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.AI_ASSISTANT,
+		path: [ROUTES.AI_ASSISTANT_BASE, ROUTES.AI_ASSISTANT],
 		exact: true,
 		component: AIAssistantPage,
 		key: 'AI_ASSISTANT',

frontend/src/api/AIAPIInstance.ts

@@ -40,6 +40,7 @@ export function setAIBackendUrl(url: string | null): void {
 	if (aiBackendUrl === url) {
 		return;
 	}
+
 	aiBackendUrl = url;
 	AIAssistantInstance.defaults.baseURL = url ? `${url}${AI_API_PATH}` : '';
 }

frontend/src/api/ai-assistant/sigNozAIAssistantAPI.schemas.ts

@@ -37,6 +37,16 @@ export enum ApplyFilterSignalDTO {
 	traces = 'traces',
 	metrics = 'metrics',
 }
+export enum ApprovalStateDTO {
+	pending = 'pending',
+	approved = 'approved',
+	rejected = 'rejected',
+	superseded = 'superseded',
+}
+export enum ApprovalActionTypeDTO {
+	modify = 'modify',
+	delete = 'delete',
+}
 /**
  * Resolved approval (approved/rejected/superseded) anchored on the assistant message that proposed it. Pending approvals never appear here - they live at the top-level pendingApproval slot.
  */
@@ -63,16 +73,6 @@ export interface ApprovalActionSummaryDTO {
 	resolvedAt: string;
 }
 
-export enum ApprovalActionTypeDTO {
-	modify = 'modify',
-	delete = 'delete',
-}
-export enum ApprovalStateDTO {
-	pending = 'pending',
-	approved = 'approved',
-	rejected = 'rejected',
-	superseded = 'superseded',
-}
 export type ApprovalSummaryDTODiff = { [key: string]: unknown };
 
 export interface ApprovalSummaryDTO {
@@ -139,6 +139,16 @@ export interface CancelRequestDTO {
 	threadId: string;
 }
 
+export enum ExecutionStateDTO {
+	queued = 'queued',
+	running = 'running',
+	awaiting_approval = 'awaiting_approval',
+	awaiting_clarification = 'awaiting_clarification',
+	resumed = 'resumed',
+	completed = 'completed',
+	failed = 'failed',
+	canceled = 'canceled',
+}
 export interface CancelResponseDTO {
 	/**
 	 * @type string
@@ -153,6 +163,13 @@ export type ClarificationFieldDTOOptions = string[] | null;
 
 export type ClarificationFieldDTODefault = string | string[] | null;
 
+export enum ClarificationFieldTypeDTO {
+	text = 'text',
+	number = 'number',
+	select = 'select',
+	multi_select = 'multi_select',
+	boolean = 'boolean',
+}
 export interface ClarificationFieldDTO {
 	/**
 	 * @type string
@@ -175,13 +192,6 @@ export interface ClarificationFieldDTO {
 	default?: ClarificationFieldDTODefault;
 }
 
-export enum ClarificationFieldTypeDTO {
-	text = 'text',
-	number = 'number',
-	select = 'select',
-	multi_select = 'multi_select',
-	boolean = 'boolean',
-}
 export enum ClarificationStateDTO {
 	pending = 'pending',
 	submitted = 'submitted',
@@ -252,178 +262,21 @@ export interface ClarifyResponseDTO {
 	executionId: string;
 }
 
-export type CreateMessageRequestDTOContexts = MessageContextDTO[] | null;
-
-export type CreateMessageRequestDTOForkFromMessageId = string | null;
-
-export interface CreateMessageRequestDTO {
-	/**
-	 * @type string
-	 * @maxLength 20000
-	 * @minLength 1
-	 */
-	content: string;
-	contexts?: CreateMessageRequestDTOContexts;
-	forkFromMessageId?: CreateMessageRequestDTOForkFromMessageId;
-}
-
-export interface CreateMessageResponseDTO {
-	/**
-	 * @type string
-	 * @format uuid
-	 */
-	executionId: string;
-}
-
-export type CreateThreadRequestDTOTitle = string | null;
-
-export interface CreateThreadRequestDTO {
-	title?: CreateThreadRequestDTOTitle;
-}
-
-export interface CreateThreadResponseDTO {
-	/**
-	 * @type string
-	 * @format uuid
-	 */
-	threadId: string;
-}
-
-export type ErrorBodyDTOErrors = ErrorResponseAdditionalDTO[] | null;
-
-export type ErrorBodyDTOUrl = string | null;
-
 /**
- * Inner error object — matches Go ErrorsJSON.
- */
-export interface ErrorBodyDTO {
-	/**
-	 * @type string
-	 * @pattern ^[a-z_]+$
-	 */
-	code: string;
-	/**
-	 * @type string
-	 */
-	message: string;
-	errors?: ErrorBodyDTOErrors;
-	url?: ErrorBodyDTOUrl;
-}
-
-/**
- * Top-level error envelope — matches Go RenderErrorResponse.
- */
-export interface ErrorResponseDTO {
-	/**
-	 * @type string
-	 */
-	status?: string;
-	error: ErrorBodyDTO;
-}
-
-/**
- * Single sub-error entry — matches Go ErrorsResponseerroradditional.
- */
-export interface ErrorResponseAdditionalDTO {
-	/**
-	 * @type string
-	 */
-	message: string;
-}
-
-export enum ExecutionStateDTO {
-	queued = 'queued',
-	running = 'running',
-	awaiting_approval = 'awaiting_approval',
-	awaiting_clarification = 'awaiting_clarification',
-	resumed = 'resumed',
-	completed = 'completed',
-	failed = 'failed',
-	canceled = 'canceled',
-}
-export enum FeedbackRatingDTO {
-	positive = 'positive',
-	negative = 'negative',
-}
-export type FeedbackRequestDTOComment = string | null;
-
-export interface FeedbackRequestDTO {
-	rating: FeedbackRatingDTO;
-	comment?: FeedbackRequestDTOComment;
-}
-
-export interface FeedbackResponseDTO {
-	[key: string]: unknown;
-}
-
-export interface HTTPValidationErrorDTO {
-	/**
-	 * @type array
-	 */
-	detail?: ValidationErrorDTO[];
-}
-
-export const HealthResponseDTOValue = {
-	/**
-	 * @type string
-	 */
-	status: 'ok',
-} as const;
-export type HealthResponseDTO = typeof HealthResponseDTOValue;
-
-export type MessageActionDTOActionMetadataId = string | null;
-
-export type MessageActionDTOResourceType = string | null;
-
-export type MessageActionDTOResourceId = string | null;
-
-export type MessageActionDTOState = string | null;
-
-export type MessageActionDTOInputAnyOf = { [key: string]: unknown };
-
-export type MessageActionDTOInput = MessageActionDTOInputAnyOf | null;
-
-export type MessageActionDTOTooltip = string | null;
-
-export type MessageActionDTOSignal = ApplyFilterSignalDTO | null;
-
-export type MessageActionDTOQueryAnyOf = { [key: string]: unknown };
-
-export type MessageActionDTOQuery = MessageActionDTOQueryAnyOf | null;
-
-export type MessageActionDTOUrl = string | null;
-
-/**
- * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
- */
-export interface MessageActionDTO {
-	kind: MessageActionKindDTO;
-	/**
-	 * @type string
-	 */
-	label: string;
-	actionMetadataId?: MessageActionDTOActionMetadataId;
-	resourceType?: MessageActionDTOResourceType;
-	resourceId?: MessageActionDTOResourceId;
-	state?: MessageActionDTOState;
-	input?: MessageActionDTOInput;
-	tooltip?: MessageActionDTOTooltip;
-	signal?: MessageActionDTOSignal;
-	query?: MessageActionDTOQuery;
-	url?: MessageActionDTOUrl;
-}
-
-export enum MessageActionKindDTO {
-	undo = 'undo',
-	revert = 'revert',
-	restore = 'restore',
-	follow_up = 'follow_up',
-	open_resource = 'open_resource',
-	open_docs = 'open_docs',
-	apply_filter = 'apply_filter',
-}
-export enum MessageContentTypeDTO {
-	markdown = 'markdown',
+   * Identifier exposed on the wire for each counter row.
+  
+  Mirrors the ``RateLimitCounterType`` model enum minus the cost
+  counter. The daily-cost limit is enforced internally (Redis
+  counter + 429 from the pre-flight gate) but never surfaced on the
+  customer-facing API: shipping the raw provider cost to tenant users
+  pins our public pricing model to what we pay Anthropic and forecloses
+  markup, per-seat bundling, or tiered pricing. Cost stays internal on
+  ``assistant_executions`` + Redis for billing.
+   */
+export enum CounterTypeNameDTO {
+	hourly_message = 'hourly_message',
+	daily_message = 'daily_message',
+	daily_token = 'daily_token',
 }
 /**
  * "auto" if derived from current page; "mention" if explicitly @-picked.
@@ -482,6 +335,193 @@ export interface MessageContextDTO {
 	metadata?: MessageContextDTOMetadata;
 }
 
+export type CreateMessageRequestDTOContexts = MessageContextDTO[] | null;
+
+export type CreateMessageRequestDTOForkFromMessageId = string | null;
+
+export interface CreateMessageRequestDTO {
+	/**
+	 * @type string
+	 * @maxLength 20000
+	 * @minLength 1
+	 */
+	content: string;
+	contexts?: CreateMessageRequestDTOContexts;
+	forkFromMessageId?: CreateMessageRequestDTOForkFromMessageId;
+}
+
+export interface CreateMessageResponseDTO {
+	/**
+	 * @type string
+	 * @format uuid
+	 */
+	executionId: string;
+}
+
+export type CreateThreadRequestDTOTitle = string | null;
+
+export interface CreateThreadRequestDTO {
+	title?: CreateThreadRequestDTOTitle;
+}
+
+export interface CreateThreadResponseDTO {
+	/**
+	 * @type string
+	 * @format uuid
+	 */
+	threadId: string;
+}
+
+/**
+ * Single sub-error entry — matches Go ErrorsResponseerroradditional.
+ */
+export interface ErrorResponseAdditionalDTO {
+	/**
+	 * @type string
+	 */
+	message: string;
+}
+
+export type ErrorBodyDTOErrors = ErrorResponseAdditionalDTO[] | null;
+
+export type ErrorBodyDTOUrl = string | null;
+
+/**
+ * Inner error object — matches Go ErrorsJSON.
+ */
+export interface ErrorBodyDTO {
+	/**
+	 * @type string
+	 * @pattern ^[a-z_]+$
+	 */
+	code: string;
+	/**
+	 * @type string
+	 */
+	message: string;
+	errors?: ErrorBodyDTOErrors;
+	url?: ErrorBodyDTOUrl;
+}
+
+/**
+ * Top-level error envelope — matches Go RenderErrorResponse.
+ */
+export interface ErrorResponseDTO {
+	/**
+	 * @type string
+	 */
+	status?: string;
+	error: ErrorBodyDTO;
+}
+
+export enum FeedbackRatingDTO {
+	positive = 'positive',
+	negative = 'negative',
+}
+export type FeedbackRequestDTOComment = string | null;
+
+export interface FeedbackRequestDTO {
+	rating: FeedbackRatingDTO;
+	comment?: FeedbackRequestDTOComment;
+}
+
+export interface FeedbackResponseDTO {
+	[key: string]: unknown;
+}
+
+export type ValidationErrorDTOLocItem = string | number;
+
+export type ValidationErrorDTOCtx = { [key: string]: unknown };
+
+export interface ValidationErrorDTO {
+	/**
+	 * @type array
+	 */
+	loc: ValidationErrorDTOLocItem[];
+	/**
+	 * @type string
+	 */
+	msg: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	input?: unknown;
+	/**
+	 * @type object
+	 */
+	ctx?: ValidationErrorDTOCtx;
+}
+
+export interface HTTPValidationErrorDTO {
+	/**
+	 * @type array
+	 */
+	detail?: ValidationErrorDTO[];
+}
+
+export const HealthResponseDTOValue = {
+	/**
+	 * @type string
+	 */
+	status: 'ok',
+} as const;
+export type HealthResponseDTO = typeof HealthResponseDTOValue;
+
+export type MessageActionDTOActionMetadataId = string | null;
+
+export type MessageActionDTOResourceType = string | null;
+
+export type MessageActionDTOResourceId = string | null;
+
+export type MessageActionDTOState = string | null;
+
+export type MessageActionDTOInputAnyOf = { [key: string]: unknown };
+
+export type MessageActionDTOInput = MessageActionDTOInputAnyOf | null;
+
+export type MessageActionDTOTooltip = string | null;
+
+export type MessageActionDTOSignal = ApplyFilterSignalDTO | null;
+
+export type MessageActionDTOQueryAnyOf = { [key: string]: unknown };
+
+export type MessageActionDTOQuery = MessageActionDTOQueryAnyOf | null;
+
+export type MessageActionDTOUrl = string | null;
+
+export enum MessageActionKindDTO {
+	undo = 'undo',
+	revert = 'revert',
+	restore = 'restore',
+	follow_up = 'follow_up',
+	open_resource = 'open_resource',
+	open_docs = 'open_docs',
+	apply_filter = 'apply_filter',
+}
+/**
+ * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
+ */
+export interface MessageActionDTO {
+	kind: MessageActionKindDTO;
+	/**
+	 * @type string
+	 */
+	label: string;
+	actionMetadataId?: MessageActionDTOActionMetadataId;
+	resourceType?: MessageActionDTOResourceType;
+	resourceId?: MessageActionDTOResourceId;
+	state?: MessageActionDTOState;
+	input?: MessageActionDTOInput;
+	tooltip?: MessageActionDTOTooltip;
+	signal?: MessageActionDTOSignal;
+	query?: MessageActionDTOQuery;
+	url?: MessageActionDTOUrl;
+}
+
+export enum MessageContentTypeDTO {
+	markdown = 'markdown',
+}
 export enum MessageRoleDTO {
 	user = 'user',
 	assistant = 'assistant',
@@ -616,6 +656,10 @@ export interface RevertRequestDTO {
 	actionMetadataId: string;
 }
 
+export enum ScopeDTO {
+	user = 'user',
+	org = 'org',
+}
 export type ThreadDetailResponseDTOTitle = string | null;
 
 export type ThreadDetailResponseDTOState = ExecutionStateDTO | null;
@@ -663,18 +707,6 @@ export interface ThreadDetailResponseDTO {
 
 export type ThreadListResponseDTONextCursor = string | null;
 
-export interface ThreadListResponseDTO {
-	/**
-	 * @type array
-	 */
-	threads: ThreadSummaryDTO[];
-	nextCursor?: ThreadListResponseDTONextCursor;
-	/**
-	 * @type boolean
-	 */
-	hasMore?: boolean;
-}
-
 export type ThreadSummaryDTOTitle = string | null;
 
 export type ThreadSummaryDTOState = ExecutionStateDTO | null;
@@ -709,6 +741,18 @@ export interface ThreadSummaryDTO {
 	updatedAt: string;
 }
 
+export interface ThreadListResponseDTO {
+	/**
+	 * @type array
+	 */
+	threads: ThreadSummaryDTO[];
+	nextCursor?: ThreadListResponseDTONextCursor;
+	/**
+	 * @type boolean
+	 */
+	hasMore?: boolean;
+}
+
 export interface UndoRequestDTO {
 	/**
 	 * @type string
@@ -726,28 +770,29 @@ export interface UpdateThreadRequestDTO {
 	archived?: UpdateThreadRequestDTOArchived;
 }
 
-export type ValidationErrorDTOLocItem = string | number;
+export type UsageResponseDTONextPage = string | null;
 
-export type ValidationErrorDTOCtx = { [key: string]: unknown };
+/**
+ * One row in the ``GET /usage`` response.
+ */
+export interface UsageRowDTO {
+	type: CounterTypeNameDTO;
+	scope: ScopeDTO;
+	used: number;
+	limit: number;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	resetsAt: string;
+}
 
-export interface ValidationErrorDTO {
+export interface UsageResponseDTO {
 	/**
 	 * @type array
 	 */
-	loc: ValidationErrorDTOLocItem[];
-	/**
-	 * @type string
-	 */
-	msg: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	input?: unknown;
-	/**
-	 * @type object
-	 */
-	ctx?: ValidationErrorDTOCtx;
+	data: UsageRowDTO[];
+	nextPage?: UsageResponseDTONextPage;
 }
 
 export type ApprovalEventDTODiff = { [key: string]: unknown };
@@ -909,6 +954,20 @@ export interface ErrorEventDTO {
 	retryAction?: RetryActionDTO;
 }
 
+/**
+   * Per-connection SSE keep-alive emitted every `sse_heartbeat_interval_seconds`.
+  
+  Carries no `executionId` and no `eventId` — heartbeats are wire-level
+  keep-alives, not part of the replayable event log.
+   */
+export const HeartbeatEventDTOValue = {
+	/**
+	 * @type string
+	 */
+	type: 'heartbeat',
+} as const;
+export type HeartbeatEventDTO = typeof HeartbeatEventDTOValue;
+
 export type MessageActionEventDTOActionMetadataId = string | null;
 
 export type MessageActionEventDTOResourceType = string | null;
@@ -1315,3 +1374,14 @@ export type SubmitFeedbackApiV1AssistantMessagesMessageIdFeedbackPostHeaders = {
 	 */
 	'X-SigNoz-URL'?: string | null;
 };
+
+export type GetUsageApiV1AssistantUsageGetHeaders = {
+	/**
+	 * @description SigNoz auth token (Bearer or raw JWT)
+	 */
+	authorization?: string | null;
+	/**
+	 * @description SigNoz instance base URL for multi-tenant deployments. Falls back to SIGNOZ_API_URL env var when omitted.
+	 */
+	'X-SigNoz-URL'?: string | null;
+};

frontend/src/constants/routes.ts

@@ -88,6 +88,7 @@ const ROUTES = {
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
 	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',
 	AI_ASSISTANT: '/ai-assistant/:conversationId',
+	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
 } as const;

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

@@ -178,7 +178,7 @@ export default function MessageBubble({
 					</div>
 				</div>
 
-				{!isUser && (
+				{!isUser && !message.isRateLimitError && (
 					<MessageFeedback
 						message={message}
 						onRegenerate={onRegenerate}

frontend/src/container/AIAssistant/store/useAIAssistantStore.ts

@@ -1,10 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 
 import type {
+	ErrorResponseDTO,
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
@@ -21,7 +23,6 @@ import {
 	regenerateMessage,
 	rejectExecution,
 	sendMessage as sendMessageToThread,
-	SSEStreamError,
 	streamEvents,
 	submitFeedback,
 	ThreadSummary,
@@ -193,13 +194,75 @@ function resetStreamingState(
 	};
 }
 
+/**
+ * Marker thrown by `runStreamingLoop` when an SSE event reports
+ * `invalid_token`. Callers that own an originating action (sendMessage /
+ * approve / clarify / regenerate) catch this and re-issue that action via
+ * `streamWithAuthRetry`; the retry's first REST call will 401, at which point
+ * the shared axios `interceptorRejected` rotates the access token and replays.
+ */
+class AuthExpiredError extends Error {
+	constructor() {
+		super('Access token expired during execution');
+		this.name = 'AuthExpiredError';
+	}
+}
+
+/**
+ * Runs the originating action (e.g. sendMessage POST) and streams the
+ * resulting execution. On `AuthExpiredError`, re-issues `start` once — the
+ * retry's REST call hits 401, the shared axios interceptor rotates the
+ * access token and replays, and the new SSE picks up the rotated token from
+ * localStorage. Backend signals `retryAction: 'manual'` for `invalid_token`,
+ * so the dead execution can't be resumed — only a fresh one helps.
+ */
+async function streamWithAuthRetry(
+	conversationId: string,
+	start: () => Promise<string>,
+	set: StoreSetter,
+): Promise<void> {
+	for (let attempt = 0; attempt <= 1; attempt += 1) {
+		if (attempt > 0) {
+			// Drop any partial content/events from the previous attempt so the
+			// retried execution's stream isn't concatenated with the dead one.
+			set((s) => {
+				resetStreamingState(s, conversationId);
+			});
+		}
+		// eslint-disable-next-line no-await-in-loop
+		const executionId = await start();
+		const ctrl = newStreamController(conversationId);
+		try {
+			// eslint-disable-next-line no-await-in-loop
+			await runStreamingLoop(executionId, {
+				conversationId,
+				set,
+				signal: ctrl.signal,
+			});
+			streamControllers.delete(conversationId);
+			return;
+		} catch (err) {
+			streamControllers.delete(conversationId);
+			if (err instanceof AuthExpiredError && attempt < 1) {
+				continue;
+			}
+			throw err;
+		}
+	}
+}
+
 /**
  * Runs one SSE execution stream, updating the per-conversation stream state.
  *
  * Breaks early and sets pendingApproval / pendingClarification when the
  * agent needs user input before it can continue.
  *
- * Throws on `error` events — the caller's catch block handles UI feedback.
+ * On an `invalid_token` error event (e.g. MCP auth expired mid-execution),
+ * throws `AuthExpiredError` so the caller can re-issue the originating
+ * action via `streamWithAuthRetry`. We don't refresh here ourselves — the
+ * retry's REST call will 401 and the shared axios `interceptorRejected`
+ * handles rotation + replay. Throws on any other `error` event — the
+ * caller's catch block handles UI feedback.
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 async function runStreamingLoop(
@@ -325,6 +388,15 @@ async function runStreamingLoop(
 			});
 			break;
 		} else if (event.type === 'error') {
+			// MCP/SigNoz auth expired mid-execution — signal the caller to
+			// re-issue the originating action. The retry's REST call will hit
+			// 401 and the shared axios `interceptorRejected` will rotate the
+			// access token + replay, so we don't refresh here ourselves.
+			// (Backend sets `retryAction: 'manual'`, so the failed execution
+			// can't itself be resumed — only a fresh one helps.)
+			if (event.error.code === 'invalid_token') {
+				throw new AuthExpiredError();
+			}
 			throw Object.assign(new Error(event.error.message), {
 				retryAction: event.retryAction,
 			});
@@ -412,13 +484,41 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }
 
+function parseErrorBody(value: unknown): string | null {
+	if (typeof value === 'string') {
+		try {
+			return parseErrorBody(JSON.parse(value));
+		} catch {
+			return null;
+		}
+	}
+	const message = (value as ErrorResponseDTO | undefined)?.error?.message;
+	return typeof message === 'string' && message.length > 0 ? message : null;
+}
+
 /**
- * Commits an error message and removes the stream entry.
+ * Returns the backend's `error.message` when `err` is a 429 axios response
+ * (typically from the threads API surface — createThread, sendMessage, approve,
+ * clarify, regenerate). Returns null for any other error so callers fall
+ * through to their generic copy.
+ */
+function rateLimitMessage(err: unknown): string | null {
+	if (axios.isAxiosError(err) && err.response?.status === 429) {
+		return parseErrorBody(err.response.data);
+	}
+	return null;
+}
+
+/**
+ * Commits an error message and removes the stream entry. When `isRateLimit`
+ * is true, the committed message is flagged so the feedback/regenerate bar
+ * is hidden — clicking regenerate would just 429 again.
  */
 function finalizeStreamingError(
 	conversationId: string,
 	errorContent: string,
 	set: StoreSetter,
+	isRateLimit = false,
 ): void {
 	set((s) => {
 		const conv = s.conversations[conversationId];
@@ -428,6 +528,7 @@ function finalizeStreamingError(
 				role: 'assistant',
 				content: errorContent,
 				createdAt: Date.now(),
+				...(isRateLimit ? { isRateLimitError: true } : {}),
 			});
 			conv.updatedAt = Date.now();
 		}
@@ -801,7 +902,12 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					});
 
 					// Reconnect to SSE if backend execution is still running
-					// and we don't already have an active SSE reader for this thread
+					// and we don't already have an active SSE reader for this
+					// thread. No auth-retry wrapper here: on `invalid_token`
+					// there's no "originating action" to redo — reopening the
+					// same dead executionId would just re-emit the failure.
+					// Let the error bubble; the user can send a new message,
+					// which will go through `streamWithAuthRetry`.
 					if (
 						detail.activeExecutionId &&
 						!streamControllers.has(threadId) &&
@@ -1052,14 +1158,12 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 							}
 						});
 					}
-					const executionId = await sendMessageToThread(threadId, text, contexts);
-					const ctrl = newStreamController(convId);
-					await runStreamingLoop(executionId, {
-						conversationId: convId,
+					const tid = threadId;
+					await streamWithAuthRetry(
+						convId,
+						() => sendMessageToThread(tid, text, contexts),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(convId);
+					);
 
 					if (!hasPendingInput(convId, get)) {
 						finalizeStreamingMessage(convId, set, get);
@@ -1070,11 +1174,14 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] sendMessage failed:', err);
-					const message =
-						err instanceof SSEStreamError && err.status === 429
-							? 'You sent that a bit too quickly. Please wait a moment and try again.'
-							: 'Something went wrong while fetching the response. Please try again.';
-					finalizeStreamingError(convId, message, set);
+					const rateLimit = rateLimitMessage(err);
+					finalizeStreamingError(
+						convId,
+						rateLimit ??
+							'Something went wrong while fetching the response. Please try again.',
+						set,
+						rateLimit !== null,
+					);
 				}
 			},
 
@@ -1094,14 +1201,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				});
 
 				try {
-					const executionId = await approveExecution(approvalId);
-					const ctrl = newStreamController(conversationId);
-					await runStreamingLoop(executionId, {
+					await streamWithAuthRetry(
 						conversationId,
+						() => approveExecution(approvalId),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(conversationId);
+					);
 					if (!hasPendingInput(conversationId, get)) {
 						finalizeStreamingMessage(conversationId, set, get);
 					}
@@ -1110,10 +1214,13 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] approveAction failed:', err);
+					const rateLimit = rateLimitMessage(err);
 					finalizeStreamingError(
 						conversationId,
-						'Something went wrong while processing the approval. Please try again.',
+						rateLimit ??
+							'Something went wrong while processing the approval. Please try again.',
 						set,
+						rateLimit !== null,
 					);
 				}
 			},
@@ -1176,14 +1283,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				});
 
 				try {
-					const executionId = await regenerateMessage(messageId);
-					const ctrl = newStreamController(conversationId);
-					await runStreamingLoop(executionId, {
+					await streamWithAuthRetry(
 						conversationId,
+						() => regenerateMessage(messageId),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(conversationId);
+					);
 					if (!hasPendingInput(conversationId, get)) {
 						finalizeStreamingMessage(conversationId, set, get);
 					}
@@ -1192,10 +1296,13 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
+					const rateLimit = rateLimitMessage(err);
 					finalizeStreamingError(
 						conversationId,
-						'Something went wrong while regenerating the response. Please try again.',
+						rateLimit ??
+							'Something went wrong while regenerating the response. Please try again.',
 						set,
+						rateLimit !== null,
 					);
 				}
 			},
@@ -1245,14 +1352,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				});
 
 				try {
-					const executionId = await clarifyExecution(clarificationId, answers);
-					const ctrl = newStreamController(conversationId);
-					await runStreamingLoop(executionId, {
+					await streamWithAuthRetry(
 						conversationId,
+						() => clarifyExecution(clarificationId, answers),
 						set,
-						signal: ctrl.signal,
-					});
-					streamControllers.delete(conversationId);
+					);
 					if (!hasPendingInput(conversationId, get)) {
 						finalizeStreamingMessage(conversationId, set, get);
 					}
@@ -1261,10 +1365,13 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] submitClarification failed:', err);
+					const rateLimit = rateLimitMessage(err);
 					finalizeStreamingError(
 						conversationId,
-						'Something went wrong while processing your answers. Please try again.',
+						rateLimit ??
+							'Something went wrong while processing your answers. Please try again.',
 						set,
+						rateLimit !== null,
 					);
 				}
 			},

frontend/src/container/AIAssistant/types.ts

@@ -86,6 +86,11 @@ export interface Message {
 	actions?: MessageActionDTO[];
 	/** Persisted feedback rating — set after user votes and the API confirms. */
 	feedbackRating?: FeedbackRating | null;
+	/**
+	 * Set on client-side rate-limit error messages so the feedback/regenerate
+	 * bar (copy/vote/regenerate) is hidden — retrying would just 429 again.
+	 */
+	isRateLimitError?: boolean;
 	createdAt: number;
 }
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/TypeSelect.tsx

@@ -15,7 +15,7 @@ function TypeSelect({ onChange, value }: TypeSelectProps): JSX.Element {
 
 	return (
 		<ProcessorTypeWrapper>
-			<PipelineIndexIcon size="small">1</PipelineIndexIcon>
+			<PipelineIndexIcon>1</PipelineIndexIcon>
 			<ProcessorTypeContainer>
 				<ProcessorType>{t('processor_type')}</ProcessorType>
 				<StyledSelect

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -76,9 +76,7 @@ function ProcessorFieldInput({
 			}
 		>
 			{!fieldData?.compact && (
-				<PipelineIndexIcon size="small">
-					{Number(fieldData.id) + 1}
-				</PipelineIndexIcon>
+				<PipelineIndexIcon>{Number(fieldData.id) + 1}</PipelineIndexIcon>
 			)}
 			<FormWrapper>
 				{fieldData.name === 'enable_flattening' ? (

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/styles.tsx

@@ -1,14 +1,15 @@
-import { Avatar, Select } from 'antd';
-import { themeColors } from 'constants/theme';
+import { ReactNode } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Select } from 'antd';
 import styled from 'styled-components';
 
-export const PipelineIndexIcon = styled(Avatar)`
-	background-color: ${themeColors.navyBlue};
-	height: 1.5rem;
-	width: 1.5rem;
-	font-size: 0.875rem;
-	line-height: 1.375rem;
-`;
+export function PipelineIndexIcon({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	return <Badge color="robin">{children}</Badge>;
+}
 
 export const ProcessorTypeWrapper = styled.div`
 	display: flex;

frontend/src/container/PipelinePage/PipelineListsView/styles.tsx

@@ -1,4 +1,6 @@
-import { Avatar, Button, Table, TableProps } from 'antd';
+import { ReactNode } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button, Table, TableProps } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { themeColors } from 'constants/theme';
 import { StyledCSS } from 'container/GantChart/Trace/styles';
@@ -34,14 +36,13 @@ export const ListDataStyle = styled.div`
 	line-height: 1.25rem;
 `;
 
-export const ProcessorIndexIcon = styled(Avatar)`
-	background-color: ${themeColors.navyBlue};
-	height: 1rem;
-	width: 1rem;
-	font-size: 0.75rem;
-	line-height: 0.813rem;
-	font-weight: 400;
-`;
+export function ProcessorIndexIcon({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	return <Badge color="robin">{children}</Badge>;
+}
 
 export const StyledTable: React.FC<TableProps<any> & { isDarkMode: boolean }> =
 	styled(Table)`

frontend/src/container/PipelinePage/tests/__snapshots__/PipelineExpandView.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`PipelinePage should render PipelineExpandView section 1`] = `
 <DocumentFragment>
-  .c2 {
+  .c1 {
   margin: 0.125rem;
   padding: 0.313rem;
   border: none;
@@ -12,15 +12,6 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
   line-height: 1.25rem;
 }
 
-.c1 {
-  background-color: #1668DC;
-  height: 1rem;
-  width: 1rem;
-  font-size: 0.75rem;
-  line-height: 0.813rem;
-  font-weight: 400;
-}
-
 .c0 .ant-table-tbody > tr > td {
   border: none;
 }
@@ -72,14 +63,13 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: right;"
                     >
                       <span
-                        class="ant-avatar ant-avatar-circle c1 css-dev-only-do-not-override-2i2tap"
+                        class="_badge_1etd5_1"
+                        data-capitalize="false"
+                        data-color="robin"
+                        data-slot="badge"
+                        data-variant="default"
                       >
-                        <span
-                          class="ant-avatar-string"
-                          style="transform: scale(1) translateX(-50%);"
-                        >
-                          1
-                        </span>
+                        1
                       </span>
                     </td>
                     <td
@@ -87,7 +77,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: left;"
                     >
                       <div
-                        class="c2"
+                        class="c1"
                       >
                         grok use common asd
                       </div>
@@ -103,14 +93,13 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: right;"
                     >
                       <span
-                        class="ant-avatar ant-avatar-circle c1 css-dev-only-do-not-override-2i2tap"
+                        class="_badge_1etd5_1"
+                        data-capitalize="false"
+                        data-color="robin"
+                        data-slot="badge"
+                        data-variant="default"
                       >
-                        <span
-                          class="ant-avatar-string"
-                          style="transform: scale(1) translateX(-50%);"
-                        >
-                          2
-                        </span>
+                        2
                       </span>
                     </td>
                     <td
@@ -118,7 +107,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: left;"
                     >
                       <div
-                        class="c2"
+                        class="c1"
                       >
                         rename auth
                       </div>
@@ -134,14 +123,13 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: right;"
                     >
                       <span
-                        class="ant-avatar ant-avatar-circle c1 css-dev-only-do-not-override-2i2tap"
+                        class="_badge_1etd5_1"
+                        data-capitalize="false"
+                        data-color="robin"
+                        data-slot="badge"
+                        data-variant="default"
                       >
-                        <span
-                          class="ant-avatar-string"
-                          style="transform: scale(1) translateX(-50%);"
-                        >
-                          3
-                        </span>
+                        3
                       </span>
                     </td>
                     <td
@@ -149,7 +137,7 @@ exports[`PipelinePage should render PipelineExpandView section 1`] = `
                       style="text-align: left;"
                     >
                       <div
-                        class="c2"
+                        class="c1"
                       >
                         json parser
                       </div>

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

@@ -8,6 +8,7 @@
 	align-items: center;
 	padding: 8px 16px;
 	gap: 8px;
+	min-height: 52px;
 
 	// KeyValueLabel renders with a global `.key-value-label` root; keep it from
 	// shrinking on the trace details header.
@@ -20,6 +21,28 @@
 	flex-shrink: 0;
 }
 
+.traceIdSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+.filterSection {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	margin-left: auto;
+}
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
 .filter {
 	min-width: 0;
 }
@@ -29,15 +52,6 @@
 	flex: 1;
 }
 
-.oldViewBtn {
-	flex-shrink: 0;
-}
-
-.analyticsBtn {
-	flex-shrink: 0;
-	margin-left: auto;
-}
-
 .subHeader {
 	display: flex;
 	align-items: center;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -21,6 +21,7 @@ import {
 	ArrowLeft,
 	CalendarClock,
 	ChartPie,
+	CornerUpLeft,
 	Server,
 	Timer,
 } from '@signozhq/icons';
@@ -117,7 +118,7 @@ function TraceDetailsHeader({
 		<div className={styles.wrapper}>
 			<div className={styles.header}>
 				{!isFilterExpanded && (
-					<>
+					<div className={styles.traceIdSection}>
 						<Button
 							variant="solid"
 							color="secondary"
@@ -133,20 +134,39 @@ function TraceDetailsHeader({
 							badgeValue={traceID || ''}
 							maxCharacters={100}
 						/>
-					</>
+					</div>
 				)}
 				{isDataLoaded && (
-					<>
+					<div
+						className={cx(
+							styles.filterSection,
+							isFilterExpanded && styles.isExpanded,
+						)}
+					>
 						{!isFilterExpanded && (
-							<>
-								<TooltipProvider>
+							<TooltipProvider>
+								<div className={styles.headerActions}>
 									<TooltipRoot>
 										<TooltipTrigger asChild>
 											<Button
 												variant="ghost"
 												size="icon"
 												color="secondary"
-												className={styles.analyticsBtn}
+												aria-label="Switch to legacy trace view"
+												onClick={handleSwitchToOldView}
+											>
+												<CornerUpLeft size={14} />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent>Switch to legacy trace view</TooltipContent>
+									</TooltipRoot>
+									<TooltipRoot>
+										<TooltipTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												color="secondary"
+												aria-label="Analytics"
 												onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
 											>
 												<ChartPie size={14} />
@@ -154,15 +174,18 @@ function TraceDetailsHeader({
 										</TooltipTrigger>
 										<TooltipContent>Analytics</TooltipContent>
 									</TooltipRoot>
-								</TooltipProvider>
-								<TraceOptionsMenu
-									showTraceDetails={showTraceDetails}
-									onToggleTraceDetails={handleToggleTraceDetails}
-									onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
-								/>
-							</>
+									<TraceOptionsMenu
+										showTraceDetails={showTraceDetails}
+										onToggleTraceDetails={handleToggleTraceDetails}
+										onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
+									/>
+								</div>
+							</TooltipProvider>
 						)}
-						<div className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}>
+						<div
+							key="filter"
+							className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}
+						>
 							<Filters
 								startTime={filterMetadata.startTime}
 								endTime={filterMetadata.endTime}
@@ -173,18 +196,7 @@ function TraceDetailsHeader({
 								onCollapse={(): void => setIsFilterExpanded(false)}
 							/>
 						</div>
-						{!isFilterExpanded && (
-							<Button
-								variant="solid"
-								color="secondary"
-								size="sm"
-								className={styles.oldViewBtn}
-								onClick={handleSwitchToOldView}
-							>
-								Legacy View
-							</Button>
-						)}
-					</>
+					</div>
 				)}
 			</div>
 

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceOptionsMenu.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
-import { Ellipsis } from '@signozhq/icons';
+import { Settings2 } from '@signozhq/icons';
 
 import { useTraceStore } from '../stores/traceStore';
 
@@ -93,7 +93,8 @@ function TraceOptionsMenu({
 				variant="ghost"
 				size="icon"
 				color="secondary"
-				prefix={<Ellipsis size={14} />}
+				aria-label="Trace options"
+				prefix={<Settings2 size={14} />}
 			/>
 		</Dropdown>
 	);

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

@@ -6,6 +6,7 @@ import TraceDetailsHeader from '../TraceDetailsHeader';
 
 const mockGoBack = jest.fn();
 const mockPush = jest.fn();
+const mockReplace = jest.fn();
 const mockHasInAppHistory = jest.fn();
 
 jest.mock('lib/history', () => ({
@@ -13,13 +14,47 @@ jest.mock('lib/history', () => ({
 	default: {
 		goBack: (): void => mockGoBack(),
 		push: (path: string): void => mockPush(path),
-		replace: jest.fn(),
+		replace: (path: string): void => mockReplace(path),
 		location: { pathname: '/', search: '' },
 		listen: (): (() => void) => (): void => undefined,
 	},
 	hasInAppHistory: (): boolean => mockHasInAppHistory(),
 }));
 
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useParams: (): { id: string } => ({ id: 'trace-123' }),
+}));
+
+const mockSetLocalStorageKey = jest.fn();
+jest.mock('api/browser/localstorage/set', () => ({
+	__esModule: true,
+	default: (key: string, value: string): void =>
+		mockSetLocalStorageKey(key, value),
+}));
+
+jest.mock(
+	'../../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => <div data-testid="filters-stub" />,
+	}),
+);
+
+jest.mock('../../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel', () => ({
+	__esModule: true,
+	default: ({ isOpen }: { isOpen: boolean }): JSX.Element => (
+		<div data-testid="analytics-panel" data-open={isOpen ? 'true' : 'false'} />
+	),
+}));
+
+jest.mock('components/FieldsSelector', () => ({
+	__esModule: true,
+	default: ({ isOpen }: { isOpen: boolean }): JSX.Element => (
+		<div data-testid="fields-selector" data-open={isOpen ? 'true' : 'false'} />
+	),
+}));
+
 const baseProps = {
 	filterMetadata: {
 		startTime: 0,
@@ -58,3 +93,70 @@ describe('TraceDetailsHeader – back button', () => {
 		expect(mockGoBack).not.toHaveBeenCalled();
 	});
 });
+
+describe('TraceDetailsHeader – action cluster', () => {
+	beforeEach(() => {
+		mockReplace.mockClear();
+		mockSetLocalStorageKey.mockClear();
+	});
+
+	it('does not render the action buttons while data is still loading', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded={false} />);
+
+		expect(
+			screen.queryByRole('button', { name: /switch to legacy trace view/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /^analytics$/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /trace options/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders Legacy View, Analytics, and Settings action buttons once data is loaded', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		expect(
+			screen.getByRole('button', { name: /switch to legacy trace view/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /^analytics$/i }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /trace options/i }),
+		).toBeInTheDocument();
+	});
+
+	it('routes to the legacy trace view and persists the preference on click', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		fireEvent.click(
+			screen.getByRole('button', { name: /switch to legacy trace view/i }),
+		);
+
+		expect(mockSetLocalStorageKey).toHaveBeenCalledWith(
+			'TRACE_DETAILS_PREFER_OLD_VIEW',
+			'true',
+		);
+		expect(mockReplace).toHaveBeenCalledTimes(1);
+		expect(mockReplace).toHaveBeenCalledWith(
+			expect.stringContaining('/trace-old/trace-123'),
+		);
+	});
+
+	it('toggles the AnalyticsPanel open state when the Analytics button is clicked', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		const panel = screen.getByTestId('analytics-panel');
+		expect(panel).toHaveAttribute('data-open', 'false');
+
+		const analyticsBtn = screen.getByRole('button', { name: /^analytics$/i });
+
+		fireEvent.click(analyticsBtn);
+		expect(panel).toHaveAttribute('data-open', 'true');
+
+		fireEvent.click(analyticsBtn);
+		expect(panel).toHaveAttribute('data-open', 'false');
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.module.scss

@@ -3,12 +3,6 @@
 	align-items: center;
 	gap: 12px;
 
-	// QuerySearch child sets `query-builder-search-v2` globally; size it to the
-	// search container by reaching into the descendant.
-	:global(.query-builder-search-v2) {
-		width: 100%;
-	}
-
 	// ToggleGroup children use generated class names; nest the global selectors
 	// under the local row so they only apply inside this filter row.
 	:global([class*='toggle-group']) {
@@ -20,8 +14,43 @@
 	}
 }
 
+// Expanded-mode root: grows to fill .filter wrapper, and lets the search
+// input flex within. In collapsed mode none of these grow — the whole
+// Filters region is content-sized (just the pill + result + toggle).
 .isExpanded {
 	flex: 1;
+
+	.searchInput {
+		flex: 1;
+	}
+
+	.searchAndNav {
+		flex: 1;
+	}
+}
+
+.categoryControls {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.searchInput {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+}
+
+.searchPill {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.searchAndNav {
+	display: flex;
+	align-items: center;
+	min-width: 0;
 }
 
 .searchContainer {
@@ -29,6 +58,25 @@
 	min-width: 0;
 }
 
+.resultActions {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+}
+
+.expandedActions {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.highlightControl {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
 .pill {
 	display: flex;
 	align-items: center;
@@ -85,14 +133,6 @@
 	border-radius: 4px;
 }
 
-.collapseBtn {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: none;
-}
-
 .highlightErrorsToggle {
 	display: flex;
 	align-items: center;
@@ -100,37 +140,3 @@
 	flex-shrink: 0;
 	white-space: nowrap;
 }
-
-.preNextToggle {
-	display: flex;
-	flex-shrink: 0;
-	gap: 12px;
-}
-
-.preNextCount {
-	display: flex;
-	align-items: center;
-	margin: auto;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.filterStatus {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.hasError {
-	color: var(--destructive);
-	cursor: help;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -1,15 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import {
-	ChevronDown,
-	ChevronUp,
-	Copy,
-	Info,
-	Loader,
-	Search,
-	X,
-} from '@signozhq/icons';
+import { ChevronsRight, Copy, Search, X } from '@signozhq/icons';
 import { Switch } from '@signozhq/ui/switch';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { toast } from '@signozhq/ui/sonner';
@@ -21,7 +13,6 @@ import {
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
@@ -42,6 +33,7 @@ import {
 	SpanCategory,
 	useSpanCategoryFilter,
 } from './hooks/useSpanCategoryFilter';
+import QueryResult from './QueryResult';
 
 import styles from './Filters.module.scss';
 
@@ -152,6 +144,16 @@ function Filters({
 		runQuery(expressionRef.current);
 	}, [runQuery]);
 
+	const handleClear = useCallback((): void => {
+		setExpression('');
+		expressionRef.current = '';
+		setFilters({ items: [], op: 'AND' });
+		setFilteredSpanIds([]);
+		onFilteredSpansChange?.([], false);
+		setCurrentSearchedIndex(0);
+		setNoData(false);
+	}, [onFilteredSpansChange]);
+
 	// Expression-based filter hooks
 	const filterProps = {
 		expression,
@@ -266,164 +268,167 @@ function Filters({
 		</div>
 	);
 
-	const statusIndicators = (
-		<>
-			{isFetching && <Loader className="animate-spin" />}
-			{error && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span className={cx(styles.filterStatus, styles.hasError)}>
-							<Info />
-							API error
-						</span>
-					</TooltipTrigger>
-					<TooltipContent>
-						{(error as AxiosError)?.message || 'Something went wrong'}
-					</TooltipContent>
-				</TooltipRoot>
-			)}
-			{!error && noData && (
-				<Typography.Text className={styles.filterStatus}>
-					No results found
-				</Typography.Text>
-			)}
-		</>
+	const hasExpression = expression.trim().length > 0;
+	const hasResults = filteredSpanIds.length > 0;
+
+	const handlePrev = useCallback((): void => {
+		handlePrevNext(currentSearchedIndex - 1);
+		setCurrentSearchedIndex((prev) => prev - 1);
+	}, [currentSearchedIndex, handlePrevNext]);
+
+	const handleNext = useCallback((): void => {
+		handlePrevNext(currentSearchedIndex + 1);
+		setCurrentSearchedIndex((prev) => prev + 1);
+	}, [currentSearchedIndex, handlePrevNext]);
+
+	const pill = (
+		/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+		<div className={styles.pill} onClick={onExpand}>
+			<Search size={12} />
+			<span className={styles.pillText}>{expression || 'Search...'}</span>
+			{expression && <span className={styles.pillIndicator} />}
+		</div>
 	);
 
-	// --- COLLAPSED VIEW ---
-	if (!isExpanded) {
-		const pill = (
-			/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-			<div className={styles.pill} onClick={onExpand}>
-				<Search size={12} />
-				<span className={styles.pillText}>{expression || 'Search...'}</span>
-				{expression && <span className={styles.pillIndicator} />}
-			</div>
-		);
+	const pillWithPopover = expression ? (
+		<TooltipRoot>
+			<TooltipTrigger asChild>{pill}</TooltipTrigger>
+			<TooltipContent side="bottom" align="start">
+				<div className={styles.pillPopover}>
+					<div className={styles.pillPopoverHeader}>
+						<Typography.Text>Search query</Typography.Text>
+						<Button
+							variant="ghost"
+							size="icon"
+							color="secondary"
+							onClick={(): void => {
+								setCopy(expression);
+								toast.success('Copied to clipboard', {
+									richColors: false,
+									position: 'top-right',
+								});
+							}}
+						>
+							<Copy size={12} />
+						</Button>
+					</div>
+					<div className={styles.pillPopoverExpression}>{expression}</div>
+				</div>
+			</TooltipContent>
+		</TooltipRoot>
+	) : (
+		pill
+	);
 
-		return (
-			<TooltipProvider>
-				<div className={styles.root}>
-					{expression ? (
-						<TooltipRoot>
-							<TooltipTrigger asChild>{pill}</TooltipTrigger>
-							<TooltipContent side="bottom" align="start">
-								<div className={styles.pillPopover}>
-									<div className={styles.pillPopoverHeader}>
-										<Typography.Text>Search query</Typography.Text>
+	// Mode-conditional render: only one of (pill | QuerySearch) is mounted
+	// at a time. Collapsing unmounts the editor — half-written queries are
+	// dropped, so collapse can't accidentally commit a malformed expression
+	// and fire an erroring /query_range request.
+	return (
+		<TooltipProvider>
+			{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+			<div
+				className={cx(styles.root, isExpanded && styles.isExpanded)}
+				ref={containerRef}
+				onBlur={(e): void => {
+					const relatedTarget = e.relatedTarget as Node | null;
+					const blurredIntoSelf = !!containerRef.current?.contains(relatedTarget);
+					if (!blurredIntoSelf) {
+						handleBlur();
+					}
+				}}
+			>
+				{isExpanded && (
+					<div className={styles.categoryControls}>
+						<ToggleGroup
+							type="single"
+							value={selectedCategory}
+							onChange={(value): void => {
+								if (value) {
+									handleCategoryChange(value as SpanCategory);
+								}
+							}}
+							size="sm"
+						>
+							{categories.map((category) => (
+								<ToggleGroupItem key={category} value={category}>
+									{category}
+								</ToggleGroupItem>
+							))}
+						</ToggleGroup>
+					</div>
+				)}
+
+				<div className={styles.searchInput}>
+					{isExpanded ? (
+						<div className={styles.searchAndNav}>
+							<div className={styles.searchContainer}>
+								<QuerySearch
+									queryData={{
+										...BASE_FILTER_QUERY,
+										filters,
+										filter: { expression },
+									}}
+									onChange={handleExpressionChange}
+									onRun={handleRunQuery}
+									dataSource={DataSource.TRACES}
+									placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
+								/>
+							</div>
+						</div>
+					) : (
+						<div className={styles.searchPill}>{pillWithPopover}</div>
+					)}
+				</div>
+
+				<div className={styles.resultActions}>
+					<QueryResult
+						hasExpression={hasExpression}
+						hasResults={hasResults}
+						isFetching={isFetching}
+						error={error}
+						noData={noData}
+						currentIndex={currentSearchedIndex}
+						total={filteredSpanIds.length}
+						onPrev={handlePrev}
+						onNext={handleNext}
+						showNavigation={isExpanded}
+					/>
+					{isExpanded && (
+						<div className={styles.expandedActions}>
+							{hasExpression && (
+								<TooltipRoot>
+									<TooltipTrigger asChild>
 										<Button
 											variant="ghost"
 											size="icon"
 											color="secondary"
-											onClick={(): void => {
-												setCopy(expression);
-												toast.success('Copied to clipboard', {
-													richColors: false,
-													position: 'top-right',
-												});
-											}}
+											onClick={handleClear}
 										>
-											<Copy size={12} />
+											<X size={14} />
 										</Button>
-									</div>
-									<div className={styles.pillPopoverExpression}>{expression}</div>
-								</div>
-							</TooltipContent>
-						</TooltipRoot>
-					) : (
-						pill
+									</TooltipTrigger>
+									<TooltipContent>Clear filter</TooltipContent>
+								</TooltipRoot>
+							)}
+							<TooltipRoot>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										color="secondary"
+										onClick={onCollapse}
+									>
+										<ChevronsRight size={14} />
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent>Collapse filters</TooltipContent>
+							</TooltipRoot>
+						</div>
 					)}
-					{highlightErrorsToggle}
-					{statusIndicators}
 				</div>
-			</TooltipProvider>
-		);
-	}
 
-	// --- EXPANDED VIEW ---
-	return (
-		<TooltipProvider>
-			<div className={cx(styles.root, styles.isExpanded)}>
-				<ToggleGroup
-					type="single"
-					value={selectedCategory}
-					onChange={(value): void => {
-						if (value) {
-							handleCategoryChange(value as SpanCategory);
-						}
-					}}
-					size="sm"
-				>
-					{categories.map((category) => (
-						<ToggleGroupItem key={category} value={category}>
-							{category}
-						</ToggleGroupItem>
-					))}
-				</ToggleGroup>
-				{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-				<div
-					className={styles.searchContainer}
-					ref={containerRef}
-					onBlur={(e): void => {
-						if (!containerRef.current?.contains(e.relatedTarget as Node)) {
-							handleBlur();
-						}
-					}}
-				>
-					<QuerySearch
-						queryData={{
-							...BASE_FILTER_QUERY,
-							filters,
-							filter: { expression },
-						}}
-						onChange={handleExpressionChange}
-						onRun={handleRunQuery}
-						dataSource={DataSource.TRACES}
-						placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
-					/>
-				</div>
-				{filteredSpanIds.length > 0 && (
-					<div className={styles.preNextToggle}>
-						<Typography.Text className={styles.preNextCount}>
-							{currentSearchedIndex + 1} / {filteredSpanIds.length}
-						</Typography.Text>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === 0}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex - 1);
-								setCurrentSearchedIndex((prev) => prev - 1);
-							}}
-						>
-							<ChevronUp size={14} />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === filteredSpanIds.length - 1}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex + 1);
-								setCurrentSearchedIndex((prev) => prev + 1);
-							}}
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</div>
-				)}
-				<Button
-					variant="ghost"
-					size="icon"
-					color="secondary"
-					className={styles.collapseBtn}
-					onClick={onCollapse}
-				>
-					<X size={14} />
-				</Button>
-				{highlightErrorsToggle}
-				{statusIndicators}
+				<div className={styles.highlightControl}>{highlightErrorsToggle}</div>
 			</div>
 		</TooltipProvider>
 	);

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/QueryResult.module.scss

@@ -0,0 +1,32 @@
+.resultNavCount {
+	padding: 0 6px;
+	white-space: nowrap;
+	color: var(--l1-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+}
+
+.resultNavDivider {
+	width: 1px;
+	height: 14px;
+	background: var(--l3-border);
+	margin: 0 4px;
+	flex-shrink: 0;
+}
+
+.filterStatus {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 18px;
+}
+
+.hasError {
+	color: var(--destructive);
+	cursor: help;
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/QueryResult.tsx

@@ -0,0 +1,111 @@
+import { ChevronDown, ChevronUp, Info, Loader } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import cx from 'classnames';
+
+import styles from './QueryResult.module.scss';
+
+type QueryResultProps = {
+	hasExpression: boolean;
+	hasResults: boolean;
+	isFetching: boolean;
+	error: unknown;
+	noData: boolean;
+	currentIndex: number;
+	total: number;
+	onPrev: () => void;
+	onNext: () => void;
+	showNavigation?: boolean;
+};
+
+function QueryResult({
+	hasExpression,
+	hasResults,
+	isFetching,
+	error,
+	noData,
+	currentIndex,
+	total,
+	onPrev,
+	onNext,
+	showNavigation = true,
+}: QueryResultProps): JSX.Element | null {
+	if (!hasExpression) {
+		return null;
+	}
+
+	let content: JSX.Element | null = null;
+	if (hasResults && showNavigation) {
+		// Prefer count over loader on refresh so stale results stay visible.
+		content = (
+			<>
+				<Typography.Text className={styles.resultNavCount}>
+					{currentIndex + 1} / {total}
+				</Typography.Text>
+				<Button
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					disabled={currentIndex === 0}
+					onClick={onPrev}
+				>
+					<ChevronUp size={14} />
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon"
+					color="secondary"
+					disabled={currentIndex === total - 1}
+					onClick={onNext}
+				>
+					<ChevronDown size={14} />
+				</Button>
+			</>
+		);
+	} else if (isFetching) {
+		content = <Loader className="animate-spin" />;
+	} else if (error) {
+		content = (
+			<TooltipRoot>
+				<TooltipTrigger asChild>
+					<span className={cx(styles.filterStatus, styles.hasError)}>
+						<Info />
+						API error
+					</span>
+				</TooltipTrigger>
+				<TooltipContent>
+					{(error as AxiosError)?.message || 'Something went wrong'}
+				</TooltipContent>
+			</TooltipRoot>
+		);
+	} else if (noData) {
+		content = (
+			<Typography.Text className={styles.filterStatus}>
+				No results found
+			</Typography.Text>
+		);
+	}
+
+	if (!content) {
+		return null;
+	}
+
+	return (
+		<>
+			{content}
+			{showNavigation && <span className={styles.resultNavDivider} />}
+		</>
+	);
+}
+
+QueryResult.defaultProps = {
+	showNavigation: true,
+};
+
+export default QueryResult;

frontend/src/pages/WorkspaceLocked/CustomerStoryCard.tsx

@@ -1,4 +1,5 @@
-import { Avatar, Card, Space } from 'antd';
+import { Avatar } from '@signozhq/ui/avatar';
+import { Card, Space } from 'antd';
 
 import './customerStoryCard.styles.scss';
 
@@ -22,7 +23,7 @@ function CustomerStoryCard({
 			<Card className="customer-story-card">
 				<Space size="middle" direction="vertical">
 					<Card.Meta
-						avatar={<Avatar size={48} src={avatar} />}
+						avatar={<Avatar size="xl" src={avatar} />}
 						title={personName}
 						description={role}
 					/>

frontend/src/styles.scss

@@ -825,4 +825,5 @@ body.ai-assistant-panel-open {
 // overrides
 :root {
 	--input-focus-outline-width: 0;
+	--radius-2: 4px;
 }

frontend/src/utils/permission/index.ts

@@ -135,4 +135,5 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_ASSISTANT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],
+	AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
 };