test(integration): log body scalar-and-object key collapses

The nested log body cannot hold a key that is both a scalar and an object
(db.function and db.function.arg) — the counterpart to the flattened trace
attributes bag, which keeps both.

Assisted-by: Claude Opus 4.8

.github/workflows/goci.yaml

@@ -67,7 +67,7 @@ jobs:
         with:
           go-version: "1.24"
       - name: check-semconv-generated-files
-        run: make semconv-check
+        run: go run ./scripts/semconv -check
   build:
     if: |
       github.event_name == 'merge_group' ||

Makefile

@@ -262,10 +262,6 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 semconv-generate: ## Regenerate semantic-convention families for Go and TypeScript
 	@go run ./scripts/semconv
 
-.PHONY: semconv-check
-semconv-check: ## Fail if the generated semantic-convention files are stale
-	@go run ./scripts/semconv -check
-
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"

docs/api/openapi.yml

@@ -184,7 +184,6 @@ components:
         headers:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         html:
           type: string
@@ -218,7 +217,6 @@ components:
         metadata:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         sendResolved:
           nullable: true
@@ -260,7 +258,6 @@ components:
           type: string
         customFields:
           additionalProperties: {}
-          nullable: true
           type: object
         description:
           type: string
@@ -271,7 +268,6 @@ components:
         labels:
           items:
             type: string
-          nullable: true
           type: array
         priority:
           type: string
@@ -350,7 +346,6 @@ components:
         details:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         message:
           type: string
@@ -379,7 +374,6 @@ components:
         details:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         group:
           type: string
@@ -457,7 +451,6 @@ components:
         actions:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
-          nullable: true
           type: array
         apiUrl:
           format: password
@@ -471,7 +464,6 @@ components:
         fields:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
-          nullable: true
           type: array
         footer:
           type: string
@@ -1771,15 +1763,12 @@ components:
           additionalProperties: {}
           nullable: true
           type: object
-        syncState:
-          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
         timestampMillis:
           format: int64
           type: integer
       required:
       - timestampMillis
       - data
-      - syncState
       type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
@@ -2024,8 +2013,6 @@ components:
           format: date-time
           nullable: true
           type: string
-        syncState:
-          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
       required:
       - account_id
       - cloud_account_id
@@ -2035,7 +2022,6 @@ components:
       - providerAccountId
       - integrationConfig
       - removedAt
-      - syncState
       type: object
     CloudintegrationtypesGettableServicesMetadata:
       properties:
@@ -2135,9 +2121,6 @@ components:
           type: object
         providerAccountId:
           type: string
-        syncedVersion:
-          nullable: true
-          type: integer
       required:
       - data
       type: object
@@ -2150,18 +2133,6 @@ components:
         gcp:
           $ref: '#/components/schemas/CloudintegrationtypesGCPIntegrationConfig'
       type: object
-    CloudintegrationtypesRegionState:
-      enum:
-      - enabled
-      - disabled
-      type: string
-    CloudintegrationtypesRegionSyncState:
-      properties:
-        state:
-          $ref: '#/components/schemas/CloudintegrationtypesRegionState'
-      required:
-      - state
-      type: object
     CloudintegrationtypesService:
       properties:
         assets:
@@ -2303,23 +2274,6 @@ components:
         metrics:
           type: boolean
       type: object
-    CloudintegrationtypesSyncState:
-      nullable: true
-      properties:
-        inSync:
-          type: boolean
-        regions:
-          additionalProperties:
-            $ref: '#/components/schemas/CloudintegrationtypesRegionSyncState'
-          type: object
-        version:
-          format: int64
-          type: integer
-      required:
-      - version
-      - inSync
-      - regions
-      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -21186,9 +21140,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - role:read
+        - ADMIN
       - tokenizer:
-        - role:read
+        - ADMIN
       summary: Get users by role id
       tags:
       - users
@@ -25774,11 +25728,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user role
       tags:
       - users
@@ -25829,11 +25781,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:detach
-        - role:detach
+        - ADMIN
       - tokenizer:
-        - user:detach
-        - role:detach
+        - ADMIN
       summary: Delete user role
       tags:
       - users
@@ -25895,9 +25845,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user role
       tags:
       - users
@@ -25944,9 +25894,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:list
+        - ADMIN
       - tokenizer:
-        - user:list
+        - ADMIN
       summary: List users v2
       tags:
       - users
@@ -26007,13 +25957,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - user:create
-        - user:attach
-        - role:attach
+        - ADMIN
       summary: Create user
       tags:
       - users
@@ -26058,9 +26004,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:delete
+        - ADMIN
       - tokenizer:
-        - user:delete
+        - ADMIN
       summary: Delete user
       tags:
       - users
@@ -26116,9 +26062,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user by user id
       tags:
       - users
@@ -26173,9 +26119,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:update
+        - ADMIN
       - tokenizer:
-        - user:update
+        - ADMIN
       summary: Update user v2
       tags:
       - users
@@ -26232,9 +26178,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:list
+        - ADMIN
       - tokenizer:
-        - factor-password:list
+        - ADMIN
       summary: Get reset password token for a user
       tags:
       - users
@@ -26298,11 +26244,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       - tokenizer:
-        - factor-password:create
-        - user:attach
+        - ADMIN
       summary: Create or regenerate reset password token for a user
       tags:
       - users
@@ -26361,9 +26305,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - user:read
+        - ADMIN
       - tokenizer:
-        - user:read
+        - ADMIN
       summary: Get user roles
       tags:
       - users
@@ -26677,7 +26621,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - tokenizer: []
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
       summary: Updates my password
       tags:
       - users

docs/contributing/go/authz.md

@@ -121,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). When a side's ids come from a list extractor (`BodyJSONArray` or a custom `ResourceIDsExtractor`) and that list resolves to nothing at request time, there is nothing to link: the def resolves to no resources, so no check runs and no audit event is emitted (e.g. inviting a user with an empty `userRoles`). A single-id side (`OneID`) always resolves to exactly one id and fails closed when it is empty. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

docs/contributing/query-range.md

@@ -84,9 +84,9 @@ A storage answers four questions and nothing else:
 | WhenAbsent | Absent row reads | Positive filter | Raw select | Multi-candidate column | Field keys |
 |---|---|---|---|---|---|
 | `AlwaysPresent` | a real value | no guard | no guard | no branch, ends the candidate list | table columns |
-| `AbsentIsSentinel` | `''`, 0, false, and that is not a value | exists guard | exists guard | presence branch | map attributes, cast JSON paths, string families of such members |
+| `AbsentIsSentinel` | `''`, 0, false, and that is not a value | exists guard | exists guard | presence branch | map attributes, cast JSON paths, string families |
 | `AbsentIsNull` | NULL | no guard | no guard | presence branch | multi-era folds, body JSON paths, numeric families |
-| `AbsentIsValue` | `''`, and that is the keyless contract | no guard | no guard | no presence branch | metrics labels, rule state history labels, and families of such members |
+| `AbsentIsValue` | `''`, and that is the keyless contract | no guard | no guard | no presence branch | metrics labels, rule state history labels |
 
 ### The generic layer
 
@@ -109,7 +109,7 @@ The functions, from the outside in:
 | `RejectsBodyFunction(traits, operator)` | Runs before resolution. A storage without body functions (`has`, `hasAny`, `hasAll`, `hasToken`, `search`) errors. The fingerprint side of a split skips the term, because the main query evaluates it. After resolution, `Condition` errors when `has`, `hasAny`, `hasAll`, or `hasToken` lands on a map-backed key (resource, attribute, scope), before the split can drop it. |
 | `SharedCondition(...)` | The `Compile` of every storage without its own condition language: `LogicalRead`, the shared data-type collision cast, `OperatorCondition`, then the guard rule. |
 | `OperatorCondition(...)` | The operator switch over an already cast read. A storage with its own cast policy composes with it. |
-| `LogicalRead(...)` | The only place family expressions are built. A single-member field reads through its member. A family merges the member reads, current member first: `COALESCE(NULLIF(m1, ''), NULLIF(m2, ''), '')` for strings, `multiIf` with a NULL tail for numbers. It ORs the member presence tests. A row without any member reads what the tail of the merge reads. When every member reads its sentinel as a value, so does the family. A member with a value map reads through `TransformRead`. `NOT EXISTS` is the read's `Absence`, the storage's own negated form. |
+| `LogicalRead(...)` | The only place family expressions are built. A single-member field reads through its member. A family merges the member reads, current member first: `COALESCE(NULLIF(m1, ''), NULLIF(m2, ''), '')` for strings, `multiIf` with a NULL tail for numbers. It ORs the member presence tests. A row without any member reads what the tail of the merge reads. A member with a value map reads through `TransformRead`. `NOT EXISTS` is the read's `Absence`, the storage's own negated form. |
 
 ### A resolved key
 

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -183,52 +183,32 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, errors.New(errors.TypeAlreadyExists, cloudintegrationtypes.ErrCodeCloudIntegrationAlreadyConnected, errMessage)
 	}
 
-	storableAccount, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
+	account, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
 	if err != nil {
 		return nil, err
 	}
 
-	account, err := cloudintegrationtypes.NewAccountFromStorable(storableAccount)
-	if err != nil {
-		return nil, err
-	}
-
-	syncState := account.NextSyncState(req.SyncedVersion)
-
 	// If account has been removed (disconnected), return a minimal response with empty integration config.
+	// The agent uses this response to clean up resources
 	if account.RemovedAt != nil {
-		// Heartbeat stays frozen after removal, only the sync state is updated.
-		if account.AgentReport != nil && syncState != nil {
-			account.UpdateSyncState(syncState)
-
-			storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
-			if err != nil {
-				return nil, err
-			}
-
-			err = module.store.UpdateAgentReport(ctx, storableAccount)
-			if err != nil {
-				return nil, err
-			}
-		}
-
 		return cloudintegrationtypes.NewAgentCheckInResponse(
 			req.ProviderAccountID,
 			account.ID.StringValue(),
 			new(cloudintegrationtypes.ProviderIntegrationConfig),
 			account.RemovedAt,
-			syncState,
 		), nil
 	}
 
-	account.UpdateAgentReport(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data, syncState))
+	// update account with cloud provider account id and agent report (heartbeat)
+	account.Update(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data))
 
-	storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
+	err = module.store.UpdateAccount(ctx, account)
 	if err != nil {
 		return nil, err
 	}
 
-	err = module.store.UpdateAgentReport(ctx, storableAccount)
+	// Get account as domain object for config access (enabled regions, etc.)
+	domainAccount, err := cloudintegrationtypes.NewAccountFromStorable(account)
 	if err != nil {
 		return nil, err
 	}
@@ -243,7 +223,8 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, err
 	}
 
-	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, account, storedServices)
+	// Delegate integration config building entirely to the provider module
+	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, domainAccount, storedServices)
 	if err != nil {
 		return nil, err
 	}
@@ -253,7 +234,6 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		account.ID.StringValue(),
 		integrationConfig,
 		account.RemovedAt,
-		syncState,
 	), nil
 }
 

frontend/src/AppRoutes/index.tsx

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

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -104,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
+	actions?: AlertmanagertypesChannelSlackActionDTO[];
 	/**
 	 * @type string
 	 * @format password
@@ -125,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
+	fields?: AlertmanagertypesChannelSlackFieldDTO[];
 	/**
 	 * @type string
 	 */
@@ -166,19 +166,13 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
 	email = 'email',
 }
-export type AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf = {
+export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelEmailConfigDTOHeaders =
-	AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf | null;
-
 export interface AlertmanagertypesChannelEmailConfigDTO {
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
 	/**
@@ -245,16 +239,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
 	pagerduty = 'pagerduty',
 }
-export type AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf = {
+export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails =
-	AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf | null;
-
 export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	/**
 	 * @type string
@@ -277,7 +265,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -319,16 +307,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
 	opsgenie = 'opsgenie',
 }
-export type AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf = {
+export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails =
-	AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf | null;
-
 export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	/**
 	 * @type string
@@ -344,7 +326,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -441,16 +423,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export type AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf = {
+export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
 	[key: string]: unknown;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields =
-	AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf | null;
-
 export interface AlertmanagertypesChannelJiraConfigDTO {
 	/**
 	 * @type string
@@ -458,7 +434,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -474,9 +450,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	labels?: string[] | null;
+	labels?: string[];
 	/**
 	 * @type string
 	 */
@@ -567,23 +543,17 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
 	incidentio = 'incidentio',
 }
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf = {
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata =
-	AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf | null;
-
 export interface AlertmanagertypesChannelIncidentIOConfigDTO {
 	/**
 	 * @type string
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
 	/**
@@ -3396,37 +3366,6 @@ export interface CloudintegrationtypesAWSServiceConfigDTO {
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
 }
 
-export enum CloudintegrationtypesRegionStateDTO {
-	enabled = 'enabled',
-	disabled = 'disabled',
-}
-export interface CloudintegrationtypesRegionSyncStateDTO {
-	state: CloudintegrationtypesRegionStateDTO;
-}
-
-export type CloudintegrationtypesSyncStateDTORegions = {
-	[key: string]: CloudintegrationtypesRegionSyncStateDTO;
-};
-
-/**
- * @nullable
- */
-export type CloudintegrationtypesSyncStateDTO = {
-	/**
-	 * @type boolean
-	 */
-	inSync: boolean;
-	/**
-	 * @type object
-	 */
-	regions: CloudintegrationtypesSyncStateDTORegions;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	version: number;
-} | null;
-
 export type CloudintegrationtypesAgentReportDTODataAnyOf = {
 	[key: string]: unknown;
 };
@@ -3445,7 +3384,6 @@ export type CloudintegrationtypesAgentReportDTO = {
 	 * @type object,null
 	 */
 	data: CloudintegrationtypesAgentReportDTOData;
-	syncState: CloudintegrationtypesSyncStateDTO | null;
 	/**
 	 * @type integer
 	 * @format int64
@@ -3874,7 +3812,6 @@ export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	 * @format date-time
 	 */
 	removedAt: string | null;
-	syncState: CloudintegrationtypesSyncStateDTO | null;
 }
 
 export interface CloudintegrationtypesServiceMetadataDTO {
@@ -3945,10 +3882,6 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type string
 	 */
 	providerAccountId?: string;
-	/**
-	 * @type integer,null
-	 */
-	syncedVersion?: number | null;
 }
 
 export interface CloudintegrationtypesStorableIntegrationDashboardDTO {

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

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

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

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

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

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

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

frontend/src/constants/generated/semconvFamilies.gen.ts

@@ -1,82 +1,32 @@
 // Code generated by scripts/semconv. DO NOT EDIT.
 
-// An empty contexts/signals/applyToMetrics array places no constraint on
-// that axis.
-export type SemconvMember = {
-	readonly name: string;
-	readonly contexts: readonly string[];
-	readonly signals: readonly string[];
-	readonly applyToMetrics: readonly string[];
-};
-
 export type SemconvFamily = {
 	readonly current: string;
+	readonly old: readonly string[];
 	readonly kind: 'attribute' | 'metric';
-	readonly members: readonly SemconvMember[];
 	readonly contexts: readonly string[];
 	readonly signals: readonly string[];
+	readonly applyToMetrics: readonly string[];
 	readonly valueMap: Readonly<Record<string, string>>;
 };
 
 export const SEMCONV_FAMILIES: readonly SemconvFamily[] = [
 	{
-		current: 'container.cpu.usage',
-		kind: 'metric',
-		members: [
-			{
-				name: 'container.cpu.utilization',
-				contexts: [],
-				signals: [],
-				applyToMetrics: [],
-			},
-		],
+		current: 'db.system.name',
+		old: ['db.system'],
+		kind: 'attribute',
 		contexts: [],
 		signals: [],
+		applyToMetrics: [],
 		valueMap: {},
 	},
 	{
 		current: 'deployment.environment.name',
+		old: ['deployment.environment'],
 		kind: 'attribute',
-		members: [
-			{
-				name: 'deployment.environment',
-				contexts: [],
-				signals: [],
-				applyToMetrics: [],
-			},
-		],
-		contexts: ['attribute', 'resource'],
-		signals: ['logs', 'metrics', 'traces'],
-		valueMap: {},
-	},
-	{
-		current: 'k8s.node.cpu.usage',
-		kind: 'metric',
-		members: [
-			{
-				name: 'k8s.node.cpu.utilization',
-				contexts: [],
-				signals: [],
-				applyToMetrics: [],
-			},
-		],
-		contexts: [],
-		signals: [],
-		valueMap: {},
-	},
-	{
-		current: 'k8s.pod.cpu.usage',
-		kind: 'metric',
-		members: [
-			{
-				name: 'k8s.pod.cpu.utilization',
-				contexts: [],
-				signals: [],
-				applyToMetrics: [],
-			},
-		],
 		contexts: [],
 		signals: [],
+		applyToMetrics: [],
 		valueMap: {},
 	},
 ] as const;

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

@@ -75,38 +75,6 @@
 	word-break: break-word;
 }
 
-// Error bubble: a subtle error-tinted callout replacing the default
-// assistant background, rendered when a turn fails.
-.bubble.error {
-	.assistant & {
-		background: var(--callout-error-background);
-		border: 1px solid var(--callout-error-border);
-	}
-}
-
-.errorContent {
-	display: flex;
-	align-items: flex-start;
-	gap: 8px;
-}
-
-.errorIcon {
-	flex-shrink: 0;
-	margin-top: 2px;
-	color: var(--destructive);
-}
-
-.errorText {
-	color: var(--callout-error-title);
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-.retryButton {
-	margin-top: 6px;
-	align-self: flex-start;
-}
-
 // User-bubble row: pencil button sits to the LEFT of the bubble within
 // the right-aligned message line, so it visually "ends" at the bubble's
 // right edge while keeping the bubble in its original position.

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

@@ -2,10 +2,6 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Button } from '@signozhq/ui/button';
-import { RotateCw, TriangleAlert } from '@signozhq/icons';
-
-import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 // Side-effect: registers all built-in block types into the BlockRegistry
 import '../blocks';
@@ -108,23 +104,18 @@ function renderGroup(group: RenderGroup): JSX.Element {
 interface MessageBubbleProps {
 	message: Message;
 	onRegenerate?: () => void;
-	onRetry?: () => void;
 	isLastAssistant?: boolean;
 }
 
 export default function MessageBubble({
 	message,
 	onRegenerate,
-	onRetry,
 	isLastAssistant = false,
 }: MessageBubbleProps): JSX.Element {
 	const variant = useVariant();
 	const isCompact = variant === 'panel';
 	const isUser = message.role === 'user';
-	const isError = !isUser && Boolean(message.isError);
 	const hasBlocks = !isUser && message.blocks && message.blocks.length > 0;
-	const showRetry =
-		isError && message.retryAction === RetryActionDTO.manual && Boolean(onRetry);
 
 	// Recompute groups only when the blocks array identity changes — store
 	// updates that don't touch this message's blocks should not re-render the
@@ -147,7 +138,7 @@ export default function MessageBubble({
 		<div className={messageClass} data-testid={`ai-message-${message.id}`}>
 			<div className={bodyClass}>
 				<div className={styles.bubbleRow}>
-					<div className={cx(styles.bubble, { [styles.error]: isError })}>
+					<div className={styles.bubble}>
 						{message.attachments && message.attachments.length > 0 && (
 							<div className={styles.attachments}>
 								{message.attachments.map((att) => {
@@ -170,11 +161,6 @@ export default function MessageBubble({
 
 						{isUser ? (
 							<p className={styles.text}>{message.content}</p>
-						) : isError ? (
-							<div className={styles.errorContent}>
-								<TriangleAlert size={14} className={styles.errorIcon} />
-								<span className={styles.errorText}>{message.content}</span>
-							</div>
 						) : hasBlocks ? (
 							<MessageContext.Provider value={{ messageId: message.id }}>
 								{groups.map((g) => renderGroup(g))}
@@ -197,21 +183,7 @@ export default function MessageBubble({
 					</div>
 				</div>
 
-				{showRetry && (
-					<Button
-						className={styles.retryButton}
-						size="sm"
-						variant="ghost"
-						color="secondary"
-						onClick={onRetry}
-						testId={`ai-message-retry-${message.id}`}
-					>
-						<RotateCw size={12} />
-						Retry
-					</Button>
-				)}
-
-				{!isUser && !isError && !message.isRateLimitError && (
+				{!isUser && !message.isRateLimitError && (
 					<MessageFeedback
 						message={message}
 						onRegenerate={onRegenerate}

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent } from 'tests/test-utils';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { Message } from '../../../types';
-
-// react-markdown + remark-gfm are ESM-only and pull a large untransformed
-// dependency chain into jest. The error-rendering path under test renders
-// plain text (no markdown), so stub them to keep the import graph loadable.
-jest.mock('react-markdown', () => ({
-	__esModule: true,
-	default: ({ children }: { children?: React.ReactNode }): React.ReactNode =>
-		children,
-}));
-jest.mock('remark-gfm', () => ({
-	__esModule: true,
-	default: (): void => undefined,
-}));
-
-// eslint-disable-next-line import/first
-import MessageBubble from '../MessageBubble';
-
-function errorMessage(overrides: Partial<Message> = {}): Message {
-	return {
-		id: 'err-1',
-		role: 'assistant',
-		content: 'This conversation is still finishing a previous response.',
-		isError: true,
-		errorCode: ErrorCodeDTO.thread_busy,
-		retryAction: RetryActionDTO.manual,
-		createdAt: 0,
-		...overrides,
-	};
-}
-
-const retryButton = (): HTMLElement | null =>
-	screen.queryByRole('button', { name: /retry/i });
-
-describe('MessageBubble — error rendering', () => {
-	it('shows a Retry button for a manual error and invokes onRetry on click', async () => {
-		const onRetry = jest.fn();
-		render(<MessageBubble message={errorMessage()} onRetry={onRetry} />);
-
-		// Error copy is rendered, and the feedback bar is suppressed on errors.
-		expect(
-			screen.getByText(/still finishing a previous response/i),
-		).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /copy message/i }),
-		).not.toBeInTheDocument();
-
-		const button = retryButton();
-		expect(button).toBeInTheDocument();
-		await userEvent.click(button as HTMLElement);
-		expect(onRetry).toHaveBeenCalledTimes(1);
-	});
-
-	it('hides the Retry button when retryAction is none', () => {
-		render(
-			<MessageBubble
-				message={errorMessage({ retryAction: RetryActionDTO.none })}
-				onRetry={jest.fn()}
-			/>,
-		);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-
-	it('hides the Retry button when retryAction is auto', () => {
-		render(
-			<MessageBubble
-				message={errorMessage({ retryAction: RetryActionDTO.auto })}
-				onRetry={jest.fn()}
-			/>,
-		);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-
-	it('hides the Retry button when no onRetry handler is provided', () => {
-		render(<MessageBubble message={errorMessage()} />);
-		expect(retryButton()).not.toBeInTheDocument();
-	});
-});

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

@@ -37,9 +37,6 @@ export default function VirtualizedMessages({
 	const regenerateAssistantMessage = useAIAssistantStore(
 		(s) => s.regenerateAssistantMessage,
 	);
-	const retryAssistantMessage = useAIAssistantStore(
-		(s) => s.retryAssistantMessage,
-	);
 	const { threadId } = useAIAssistantAnalyticsContext(conversationId);
 	const streamingStatus = useAIAssistantStore(
 		(s) => s.streams[conversationId]?.streamingStatus ?? '',
@@ -88,14 +85,6 @@ export default function VirtualizedMessages({
 		[conversationId, isStreaming, regenerateAssistantMessage, threadId],
 	);
 
-	const handleRetry = useCallback((): void => {
-		if (isStreaming) {
-			return;
-		}
-		void logEvent(AIAssistantEvents.RetryClicked, { threadId });
-		void retryAssistantMessage(conversationId);
-	}, [conversationId, isStreaming, retryAssistantMessage, threadId]);
-
 	// Scroll all the way to the actual bottom — including the 64px of bottom
 	// padding on the scroller — so the last bubble has visible breathing room
 	// above the disclaimer / input bar. Virtuoso's `scrollToIndex(LAST,
@@ -217,11 +206,6 @@ export default function VirtualizedMessages({
 									? (): void => handleRegenerate(msg.id)
 									: undefined
 							}
-							onRetry={
-								msg.isError && isLastAssistant && !showStreamingSlot
-									? handleRetry
-									: undefined
-							}
 							isLastAssistant={isLastAssistant}
 						/>
 					);

frontend/src/container/AIAssistant/events.ts

@@ -90,7 +90,6 @@ export enum AIAssistantEvents {
 	SuggestedPromptClicked = 'AI Assistant: Suggested prompt clicked',
 	CancelClicked = 'AI Assistant: Cancel clicked',
 	RegenerateClicked = 'AI Assistant: Regenerate clicked',
-	RetryClicked = 'AI Assistant: Retry clicked',
 	MessageCopied = 'AI Assistant: Message copied',
 	FeedbackSubmitted = 'AI Assistant: Feedback submitted',
 	ResourceOpened = 'AI Assistant: Resource opened',

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

@@ -1,263 +0,0 @@
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import type { SSEEvent } from 'api/ai-assistant/chat';
-
-import { useAIAssistantStore } from '../useAIAssistantStore';
-import type { Message } from '../../types';
-
-// The store talks to the chat API only through these named exports. Mock the
-// whole module so we can drive the SSE stream + REST calls deterministically.
-jest.mock('api/ai-assistant/chat', () => ({
-	__esModule: true,
-	createThread: jest.fn(),
-	sendMessage: jest.fn(),
-	streamEvents: jest.fn(),
-	approveExecution: jest.fn(),
-	clarifyExecution: jest.fn(),
-	regenerateMessage: jest.fn(),
-	rejectExecution: jest.fn(),
-	cancelExecution: jest.fn(),
-	listThreads: jest.fn(),
-	getThreadDetail: jest.fn(),
-	updateThread: jest.fn(),
-	submitFeedback: jest.fn(),
-}));
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
-const chat = jest.requireMock('api/ai-assistant/chat') as Record<
-	string,
-	jest.Mock
->;
-
-// Builds a single-use async stream from a fixed list of SSE events.
-async function* eventStream(events: SSEEvent[]): AsyncGenerator<SSEEvent> {
-	for (const event of events) {
-		yield event;
-	}
-}
-
-function errorEvent(
-	executionId: string,
-	code: ErrorCodeDTO,
-	retryAction: RetryActionDTO,
-): SSEEvent {
-	return {
-		type: 'error',
-		executionId,
-		error: { code, message: 'backend message' },
-		retryAction,
-	};
-}
-
-function lastMessage(conversationId: string): Message {
-	const conv = useAIAssistantStore.getState().conversations[conversationId];
-	return conv.messages[conv.messages.length - 1];
-}
-
-describe('useAIAssistantStore — streaming error handling', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useAIAssistantStore.setState((s) => {
-			s.conversations = {};
-			s.streams = {};
-			s.activeConversationId = null;
-		});
-	});
-
-	it('commits a manually-retryable error bubble with friendly copy and metadata', async () => {
-		chat.createThread.mockResolvedValue('thread-1');
-		chat.sendMessage.mockResolvedValue('exec-1');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hello');
-
-		const conv = useAIAssistantStore.getState().conversations['thread-1'];
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			isError: true,
-			errorCode: ErrorCodeDTO.thread_busy,
-			retryAction: RetryActionDTO.manual,
-		});
-		// Code-specific FE copy, not the raw backend message.
-		expect(conv.messages[1].content).toContain(
-			'still finishing a previous response',
-		);
-	});
-
-	it('replays the send on retry without re-pushing the user message', async () => {
-		chat.createThread.mockResolvedValue('thread-1');
-		chat.sendMessage.mockResolvedValue('exec-1');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-1', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hello');
-
-		// The retry succeeds this time.
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				{
-					type: 'message',
-					executionId: 'exec-1',
-					messageId: 'm1',
-					delta: 'Hi there',
-					done: true,
-				},
-			]),
-		);
-
-		await useAIAssistantStore.getState().retryAssistantMessage('thread-1');
-
-		const conv = useAIAssistantStore.getState().conversations['thread-1'];
-		// Error bubble replaced by the assistant reply; the user message stays.
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hello' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			content: 'Hi there',
-		});
-		expect(conv.messages[1].isError).toBeUndefined();
-		// Thread already existed on retry; the user message was never re-sent as new.
-		expect(chat.createThread).toHaveBeenCalledTimes(1);
-		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
-	});
-
-	it('silently retries auto-flagged errors, then downgrades to manual once spent', async () => {
-		chat.createThread.mockResolvedValue('thread-2');
-		chat.sendMessage.mockResolvedValue('exec');
-		// Always auto-retryable: 1 initial attempt + MAX_AUTO_RETRIES (2) = 3 sends.
-		chat.streamEvents.mockImplementation(() =>
-			eventStream([
-				errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		expect(chat.sendMessage).toHaveBeenCalledTimes(3);
-		expect(lastMessage('thread-2')).toMatchObject({
-			isError: true,
-			errorCode: ErrorCodeDTO.internal_error,
-			// Auto budget exhausted → presented as manual so a Retry button shows.
-			retryAction: RetryActionDTO.manual,
-		});
-	}, 10000);
-
-	it('marks rate-limit errors and offers no retry', async () => {
-		chat.createThread.mockResolvedValue('thread-3');
-		chat.sendMessage.mockResolvedValue('exec');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec', ErrorCodeDTO.hourly_message_limit, RetryActionDTO.none),
-			]),
-		);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		expect(lastMessage('thread-3')).toMatchObject({
-			isError: true,
-			isRateLimitError: true,
-			retryAction: RetryActionDTO.none,
-		});
-
-		// No retry thunk registered for a non-retryable error — retry is a no-op.
-		const before =
-			useAIAssistantStore.getState().conversations['thread-3'].messages.length;
-		await useAIAssistantStore.getState().retryAssistantMessage('thread-3');
-		expect(
-			useAIAssistantStore.getState().conversations['thread-3'].messages,
-		).toHaveLength(before);
-	});
-
-	it('recovers silently when an auto-flagged error succeeds on retry', async () => {
-		chat.createThread.mockResolvedValue('thread-4');
-		chat.sendMessage.mockResolvedValue('exec');
-		chat.streamEvents
-			.mockReturnValueOnce(
-				eventStream([
-					errorEvent('exec', ErrorCodeDTO.internal_error, RetryActionDTO.auto),
-				]),
-			)
-			.mockReturnValueOnce(
-				eventStream([
-					{
-						type: 'message',
-						executionId: 'exec',
-						messageId: 'm1',
-						delta: 'Recovered',
-						done: true,
-					},
-				]),
-			);
-
-		useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().sendMessage('hi');
-
-		// 1 initial attempt + 1 silent auto retry, then success — no error bubble.
-		expect(chat.sendMessage).toHaveBeenCalledTimes(2);
-		const conv = useAIAssistantStore.getState().conversations['thread-4'];
-		expect(conv.messages).toHaveLength(2);
-		expect(conv.messages[0]).toMatchObject({ role: 'user', content: 'hi' });
-		expect(conv.messages[1]).toMatchObject({
-			role: 'assistant',
-			content: 'Recovered',
-		});
-		expect(conv.messages.some((m) => m.isError)).toBe(false);
-	}, 10000);
-
-	it('replays the originating action on retry for a non-send error (approve)', async () => {
-		chat.approveExecution.mockResolvedValue('exec-a');
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				errorEvent('exec-a', ErrorCodeDTO.thread_busy, RetryActionDTO.manual),
-			]),
-		);
-
-		const convId = useAIAssistantStore.getState().startNewConversation();
-		await useAIAssistantStore.getState().approveAction(convId, 'approval-1');
-
-		expect(lastMessage(convId)).toMatchObject({
-			isError: true,
-			retryAction: RetryActionDTO.manual,
-		});
-		expect(chat.approveExecution).toHaveBeenCalledTimes(1);
-
-		// Retry replays the approval (not a send) and succeeds this time.
-		chat.streamEvents.mockReturnValueOnce(
-			eventStream([
-				{
-					type: 'message',
-					executionId: 'exec-a',
-					messageId: 'm1',
-					delta: 'Approved',
-					done: true,
-				},
-			]),
-		);
-		await useAIAssistantStore.getState().retryAssistantMessage(convId);
-
-		const conv = useAIAssistantStore.getState().conversations[convId];
-		expect(conv.messages).toHaveLength(1);
-		expect(conv.messages[0]).toMatchObject({
-			role: 'assistant',
-			content: 'Approved',
-		});
-		expect(conv.messages[0].isError).toBeUndefined();
-		expect(chat.approveExecution).toHaveBeenCalledTimes(2);
-		expect(chat.sendMessage).not.toHaveBeenCalled();
-	});
-});

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

@@ -8,7 +8,6 @@ import type {
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { RetryActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 import {
 	approveExecution,
@@ -36,10 +35,7 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
-import {
-	resolveAssistantError,
-	type AssistantErrorResolution,
-} from '../utils/resolveAssistantError';
+import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';
 
 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -60,15 +56,6 @@ interface SSEStreamCtx {
 
 const streamControllers = new Map<string, AbortController>();
 
-/**
- * Per-conversation retry thunks for the most recent failed turn. Populated by
- * `finalizeStreamingError` when the error is manually retryable; consumed by
- * the `retryAssistantMessage` action when the user clicks Retry. Transient
- * (not persisted) — it shares the in-memory lifetime of the error bubble it
- * backs, so a page reload drops both together.
- */
-const retryRegistry = new Map<string, () => Promise<void>>();
-
 function abortStream(conversationId: string): void {
 	const ctrl = streamControllers.get(conversationId);
 	if (ctrl) {
@@ -210,7 +197,7 @@ 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
- * `streamWithRetry`; the retry's first REST call will 401, at which point
+ * `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 {
@@ -220,50 +207,27 @@ class AuthExpiredError extends Error {
 	}
 }
 
-/** Capped silent re-attempts for backend-flagged transient (`auto`) errors. */
-const MAX_AUTO_RETRIES = 2;
-/** Backoff before each auto re-attempt, indexed by prior auto-retry count. */
-const AUTO_RETRY_BACKOFF_MS = [500, 1500];
-
-function delay(ms: number): Promise<void> {
-	return new Promise((resolve) => {
-		setTimeout(resolve, ms);
-	});
-}
-
-/** True when the SSE error carries the backend's `retryAction: 'auto'` flag. */
-function isAutoRetryableError(err: unknown): boolean {
-	return (
-		(err as { retryAction?: unknown } | undefined)?.retryAction ===
-		RetryActionDTO.auto
-	);
-}
-
 /**
  * Runs the originating action (e.g. sendMessage POST) and streams the
- * resulting execution, with two independent retry budgets:
- *
- *   • Auth — on `AuthExpiredError` (SSE `invalid_token`), re-issues `start`
- *     once. The retry's REST call 401s, the shared axios interceptor rotates
- *     the access token + replays, and the new SSE picks up the rotated token.
- *     Backend flags `invalid_token` as `manual`, so only a fresh execution helps.
- *   • Auto — on an SSE error the backend flagged `retryAction: 'auto'`
- *     (transient), silently re-issues `start` up to `MAX_AUTO_RETRIES` times
- *     with backoff. Once exhausted the error propagates so the caller can
- *     surface a manual Retry affordance.
- *
- * Both reset the stream state before re-attempting so a dead execution's
- * partial output isn't concatenated onto the retry.
+ * 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 streamWithRetry(
+async function streamWithAuthRetry(
 	conversationId: string,
 	start: () => Promise<string>,
 	set: StoreSetter,
 ): Promise<void> {
-	let authRetried = false;
-	let autoRetries = 0;
-
-	for (;;) {
+	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);
@@ -278,28 +242,10 @@ async function streamWithRetry(
 			return;
 		} catch (err) {
 			streamControllers.delete(conversationId);
-
-			if (err instanceof AuthExpiredError && !authRetried) {
-				authRetried = true;
-			} else if (isAutoRetryableError(err) && autoRetries < MAX_AUTO_RETRIES) {
-				// eslint-disable-next-line no-await-in-loop
-				await delay(AUTO_RETRY_BACKOFF_MS[autoRetries] ?? 1500);
-				autoRetries += 1;
-			} else {
-				if (isAutoRetryableError(err)) {
-					// Auto-retry budget spent — present the failure as manually
-					// retryable so the caller surfaces a Retry button rather than
-					// silently giving up.
-					(err as { retryAction?: RetryActionDTO }).retryAction =
-						RetryActionDTO.manual;
-				}
-				throw err;
+			if (err instanceof AuthExpiredError && attempt < 1) {
+				continue;
 			}
-
-			// Drop partial content/events from the failed attempt before retrying.
-			set((s) => {
-				resetStreamingState(s, conversationId);
-			});
+			throw err;
 		}
 	}
 }
@@ -312,7 +258,7 @@ async function streamWithRetry(
  *
  * 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 `streamWithRetry`. We don't refresh here ourselves — the
+ * 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.
@@ -538,37 +484,20 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }
 
-/**
- * Commits a failed turn as an error message and removes the stream entry.
- * When the failure is manually retryable and a `retry` thunk is supplied, the
- * thunk is stashed in `retryRegistry` so the bubble's Retry button can replay
- * the originating action.
- */
 function finalizeStreamingError(
 	conversationId: string,
-	resolution: AssistantErrorResolution,
+	errorContent: string,
 	set: StoreSetter,
-	retry?: () => Promise<void>,
+	isRateLimit = false,
 ): void {
-	const { message, code, retryAction, isRateLimit } = resolution;
-
-	if (retryAction === RetryActionDTO.manual && retry) {
-		retryRegistry.set(conversationId, retry);
-	} else {
-		retryRegistry.delete(conversationId);
-	}
-
 	set((s) => {
 		const conv = s.conversations[conversationId];
 		if (conv) {
 			conv.messages.push({
 				id: uuidv4(),
 				role: 'assistant',
-				content: message,
+				content: errorContent,
 				createdAt: Date.now(),
-				isError: true,
-				retryAction,
-				...(code ? { errorCode: code } : {}),
 				...(isRateLimit ? { isRateLimitError: true } : {}),
 			});
 			conv.updatedAt = Date.now();
@@ -577,40 +506,6 @@ function finalizeStreamingError(
 	});
 }
 
-/**
- * Shared streaming wrapper for actions that have no pre-stream setup beyond
- * resetting state (approve / clarify / regenerate). Streams the execution,
- * finalizes the message on success, and on failure resolves the error +
- * registers `retry` (the caller's own re-invocation) so the bubble can replay
- * it. `sendMessage` does not use this — it owns thread-creation/re-keying and
- * runs its own equivalent loop.
- */
-async function streamAndFinalize(
-	conversationId: string,
-	start: () => Promise<string>,
-	fallback: string,
-	logLabel: string,
-	set: StoreSetter,
-	get: StoreGetter,
-	retry: () => Promise<void>,
-): Promise<void> {
-	try {
-		await streamWithRetry(conversationId, start, set);
-		if (!hasPendingInput(conversationId, get)) {
-			finalizeStreamingMessage(conversationId, set, get);
-		}
-	} catch (err) {
-		// Abort errors are expected when the user cancels — not a failure.
-		if (err instanceof DOMException && err.name === 'AbortError') {
-			return;
-		}
-		// eslint-disable-next-line no-console
-		console.error(logLabel, err);
-		const resolution = resolveAssistantError(err, fallback);
-		finalizeStreamingError(conversationId, resolution, set, retry);
-	}
-}
-
 // ---------------------------------------------------------------------------
 // Store interface
 // ---------------------------------------------------------------------------
@@ -669,8 +564,6 @@ export interface AIAssistantStore {
 		conversationId: string,
 		messageId: string,
 	) => Promise<void>;
-	/** Replays the originating action for a manually-retryable error bubble. */
-	retryAssistantMessage: (conversationId: string) => Promise<void>;
 	submitMessageFeedback: (
 		messageId: string,
 		rating: FeedbackRating,
@@ -984,7 +877,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					// 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 `streamWithRetry`.
+					// which will go through `streamWithAuthRetry`.
 					if (
 						detail.activeExecutionId &&
 						!streamControllers.has(threadId) &&
@@ -1167,7 +1060,7 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				attachments?: MessageAttachment[],
 				contexts?: MessageContext[],
 			): Promise<void> => {
-				const convId = get().activeConversationId;
+				let convId = get().activeConversationId;
 				if (!convId || !get().conversations[convId]) {
 					return;
 				}
@@ -1200,75 +1093,63 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 				};
 
 				set((state) => {
-					const conv = state.conversations[convId];
+					const conv = state.conversations[convId!];
 					conv.messages.push(userMessage);
 					conv.updatedAt = Date.now();
 					if (!conv.title && text.trim()) {
 						conv.title = deriveTitle(text);
 					}
-					resetStreamingState(state, convId);
+					resetStreamingState(state, convId!);
 				});
 
-				// The full send — ensure a backend thread exists (re-keying the
-				// optimistic client UUID on first send), POST the message, and
-				// stream the reply. Defined as a closure so the error bubble's
-				// Retry button can replay it without re-pushing the user message.
-				const runSend = async (cid: string): Promise<void> => {
-					let targetConvId = cid;
-					try {
-						let { threadId } = get().conversations[targetConvId];
-						if (!threadId) {
-							threadId = await createThread();
-							// Re-key the conversation from client UUID to backend threadId
-							// so fetchThreads won't create a duplicate entry later.
-							const oldId = targetConvId;
-							const newId = threadId;
-							set((s) => {
-								const conv = s.conversations[oldId];
-								if (conv) {
-									conv.id = newId;
-									conv.threadId = newId;
-									s.conversations[newId] = conv;
-									delete s.conversations[oldId];
-									if (s.activeConversationId === oldId) {
-										s.activeConversationId = newId;
-									}
-									const stream = s.streams[oldId];
-									if (stream) {
-										s.streams[newId] = stream;
-										delete s.streams[oldId];
-									}
+				try {
+					let { threadId } = get().conversations[convId];
+					if (!threadId) {
+						threadId = await createThread();
+						// Re-key the conversation from client UUID to backend threadId
+						// so fetchThreads won't create a duplicate entry later.
+						const oldId = convId;
+						convId = threadId;
+						set((s) => {
+							const conv = s.conversations[oldId];
+							if (conv) {
+								conv.id = convId!;
+								conv.threadId = convId!;
+								s.conversations[convId!] = conv;
+								delete s.conversations[oldId];
+								if (s.activeConversationId === oldId) {
+									s.activeConversationId = convId!;
 								}
-							});
-							targetConvId = newId;
-						}
-						const tid = threadId;
-						await streamWithRetry(
-							targetConvId,
-							() => sendMessageToThread(tid, text, contexts),
-							set,
-						);
-
-						if (!hasPendingInput(targetConvId, get)) {
-							finalizeStreamingMessage(targetConvId, set, get);
-						}
-					} catch (err) {
-						// Abort errors are expected when the user cancels — not a failure.
-						if (err instanceof DOMException && err.name === 'AbortError') {
-							return;
-						}
-						console.error('[AIAssistant] sendMessage failed:', err);
-						const resolution = resolveAssistantError(
-							err,
-							'Something went wrong while fetching the response. Please try again.',
-						);
-						finalizeStreamingError(targetConvId, resolution, set, () =>
-							runSend(targetConvId),
-						);
+								const stream = s.streams[oldId];
+								if (stream) {
+									s.streams[convId!] = stream;
+									delete s.streams[oldId];
+								}
+							}
+						});
 					}
-				};
+					const tid = threadId;
+					await streamWithAuthRetry(
+						convId,
+						() => sendMessageToThread(tid, text, contexts),
+						set,
+					);
 
-				await runSend(convId);
+					if (!hasPendingInput(convId, get)) {
+						finalizeStreamingMessage(convId, set, get);
+					}
+				} catch (err) {
+					// Abort errors are expected when the user cancels — not a failure
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] sendMessage failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while fetching the response. Please try again.',
+					);
+					finalizeStreamingError(convId, message, set, isRateLimit);
+				}
 			},
 
 			approveAction: async (
@@ -1286,17 +1167,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => approveExecution(approvalId),
-						'Something went wrong while processing the approval. Please try again.',
-						'[AIAssistant] approveAction failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
+					}
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] approveAction failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing the approval. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},
 
 			rejectAction: async (
@@ -1356,17 +1246,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					resetStreamingState(s, conversationId);
 				});
 
-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => regenerateMessage(messageId),
-						'Something went wrong while regenerating the response. Please try again.',
-						'[AIAssistant] regenerateAssistantMessage failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
+					}
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while regenerating the response. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},
 
 			submitMessageFeedback: async (
@@ -1413,42 +1312,26 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 					}
 				});
 
-				const run = (): Promise<void> =>
-					streamAndFinalize(
+				try {
+					await streamWithAuthRetry(
 						conversationId,
 						() => clarifyExecution(clarificationId, answers),
-						'Something went wrong while processing your answers. Please try again.',
-						'[AIAssistant] submitClarification failed:',
 						set,
-						get,
-						run,
 					);
-				await run();
-			},
-
-			retryAssistantMessage: async (conversationId: string): Promise<void> => {
-				const retry = retryRegistry.get(conversationId);
-				if (!retry) {
-					return;
-				}
-				retryRegistry.delete(conversationId);
-
-				// Drop the trailing error bubble we're retrying from and reset the
-				// stream so the in-progress retry renders immediately. The retry
-				// thunk replays the originating action without re-pushing the
-				// user's message.
-				set((s) => {
-					const conv = s.conversations[conversationId];
-					if (conv) {
-						const last = conv.messages[conv.messages.length - 1];
-						if (last?.isError) {
-							conv.messages.pop();
-						}
+					if (!hasPendingInput(conversationId, get)) {
+						finalizeStreamingMessage(conversationId, set, get);
 					}
-					resetStreamingState(s, conversationId);
-				});
-
-				await retry();
+				} catch (err) {
+					if (err instanceof DOMException && err.name === 'AbortError') {
+						return;
+					}
+					console.error('[AIAssistant] submitClarification failed:', err);
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing your answers. Please try again.',
+					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
+				}
 			},
 		})),
 		{

frontend/src/container/AIAssistant/types.ts

@@ -15,11 +15,9 @@
 import type {
 	ApprovalEventDTO,
 	ClarificationEventDTO,
-	ErrorCodeDTO,
 	FeedbackRatingDTO,
 	MessageActionDTO,
 	MessageActionKindDTO,
-	RetryActionDTO,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 
 /** Client-only file attachment — no API equivalent (uploads happen via data URLs). */
@@ -93,18 +91,6 @@ export interface Message {
 	 * bar (copy/vote/regenerate) is hidden — retrying would just 429 again.
 	 */
 	isRateLimitError?: boolean;
-	/**
-	 * Marks an assistant message that represents a failed turn. Drives the
-	 * error styling and replaces the feedback bar with a retry affordance.
-	 */
-	isError?: boolean;
-	/** Known backend error code for the failure, when recognised. */
-	errorCode?: ErrorCodeDTO;
-	/**
-	 * Retry semantics for a failed turn — `manual` renders an inline Retry
-	 * button on the error bubble; `none`/`auto` render no button.
-	 */
-	retryAction?: RetryActionDTO;
 	createdAt: number;
 }
 

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantError.test.ts

@@ -1,154 +0,0 @@
-import { AxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { resolveAssistantError } from '../resolveAssistantError';
-
-const FALLBACK = 'Something went wrong. Please try again.';
-
-function restError(status: number, code: string, message: string): AxiosError {
-	const err = new AxiosError('Request failed');
-	err.response = {
-		status,
-		data: { error: { code, message } },
-	} as AxiosError['response'];
-	return err;
-}
-
-describe('resolveAssistantError', () => {
-	describe('message resolution', () => {
-		it('prefers code-specific FE copy over the backend message', () => {
-			const err = restError(409, ErrorCodeDTO.thread_busy, 'raw backend phrasing');
-
-			const { message } = resolveAssistantError(err, FALLBACK);
-			expect(message).toBe(
-				'This conversation is still finishing a previous response. Give it a moment and try again.',
-			);
-		});
-
-		it('falls through to the backend message for a known code without FE copy', () => {
-			const err = restError(
-				400,
-				ErrorCodeDTO.message_not_found,
-				'No such message exists.',
-			);
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: 'No such message exists.',
-				code: ErrorCodeDTO.message_not_found,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: false,
-			});
-		});
-
-		it('falls back when the error code is not in ErrorCodeDTO', () => {
-			const err = restError(400, 'future_unknown_code', 'Backend-only message');
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: FALLBACK,
-				code: undefined,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: false,
-			});
-		});
-	});
-
-	describe('rate limiting', () => {
-		it('marks HTTP 429 responses as rate limited and non-retryable', () => {
-			const err = restError(
-				429,
-				ErrorCodeDTO.hourly_message_limit,
-				'Hourly limit reached.',
-			);
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: "You've reached the hourly message limit. Please try again later.",
-				code: ErrorCodeDTO.hourly_message_limit,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: true,
-			});
-		});
-
-		it('treats known SSE rate-limit codes as rate limited', () => {
-			const err = Object.assign(new Error('Daily token limit exceeded.'), {
-				code: ErrorCodeDTO.daily_token_limit,
-			});
-
-			const res = resolveAssistantError(err, FALLBACK);
-			expect(res.isRateLimit).toBe(true);
-			expect(res.retryAction).toBe(RetryActionDTO.none);
-		});
-
-		it('marks 429 as rate limited even when the code is unknown', () => {
-			const err = restError(429, 'future_unknown_code', 'Too many requests');
-
-			expect(resolveAssistantError(err, FALLBACK)).toStrictEqual({
-				message: FALLBACK,
-				code: undefined,
-				retryAction: RetryActionDTO.none,
-				isRateLimit: true,
-			});
-		});
-	});
-
-	describe('retryAction resolution', () => {
-		it('honours an explicit retryAction from an SSE error event', () => {
-			const err = Object.assign(new Error('Transient hiccup'), {
-				code: ErrorCodeDTO.internal_error,
-				retryAction: RetryActionDTO.auto,
-			});
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.auto,
-			);
-		});
-
-		it('forces none for non-retryable permission errors', () => {
-			const err = restError(403, ErrorCodeDTO.permission_denied, 'forbidden');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.none,
-			);
-		});
-
-		it('derives manual for 409 conflicts', () => {
-			const err = restError(409, ErrorCodeDTO.thread_has_active_execution, 'busy');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives manual for 5xx responses', () => {
-			const err = restError(503, 'future_unknown_code', 'unavailable');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives manual for network failures with no response', () => {
-			const err = new AxiosError('Network Error');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-
-		it('derives none for other 4xx responses', () => {
-			const err = restError(400, 'future_unknown_code', 'bad request');
-
-			expect(resolveAssistantError(err, FALLBACK).retryAction).toBe(
-				RetryActionDTO.none,
-			);
-		});
-
-		it('defaults to manual for non-Axios errors with no code', () => {
-			expect(resolveAssistantError(new Error('boom'), FALLBACK).retryAction).toBe(
-				RetryActionDTO.manual,
-			);
-		});
-	});
-});

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantErrorMessage.test.ts

@@ -0,0 +1,91 @@
+import { AxiosError } from 'axios';
+import { ErrorCodeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+import { resolveAssistantErrorMessage } from '../resolveAssistantErrorMessage';
+
+const FALLBACK = 'Something went wrong. Please try again.';
+
+describe('resolveAssistantErrorMessage', () => {
+	it('returns backend message for a known error code', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: ErrorCodeDTO.thread_busy,
+					message: 'This thread is busy. Try again shortly.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'This thread is busy. Try again shortly.',
+			isRateLimit: false,
+		});
+	});
+
+	it('falls back when error code is not in ErrorCodeDTO', () => {
+		const err = new AxiosError('Request failed');
+		err.response = {
+			status: 400,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Backend-only message',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: false,
+		});
+	});
+
+	it('marks HTTP 429 responses as rate limited', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: ErrorCodeDTO.hourly_message_limit,
+					message: 'Hourly limit reached.',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Hourly limit reached.',
+			isRateLimit: true,
+		});
+	});
+
+	it('uses backend message for known SSE rate-limit error codes', () => {
+		const err = Object.assign(new Error('Daily token limit exceeded.'), {
+			code: ErrorCodeDTO.daily_token_limit,
+		});
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: 'Daily token limit exceeded.',
+			isRateLimit: true,
+		});
+	});
+
+	it('marks 429 as rate limited even when error code is unknown', () => {
+		const err = new AxiosError('Too many requests');
+		err.response = {
+			status: 429,
+			data: {
+				error: {
+					code: 'future_unknown_code',
+					message: 'Too many requests',
+				},
+			},
+		} as AxiosError['response'];
+
+		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
+			message: FALLBACK,
+			isRateLimit: true,
+		});
+	});
+});

frontend/src/container/AIAssistant/utils/resolveAssistantError.ts

@@ -1,209 +0,0 @@
-import { isAxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	RetryActionDTO,
-	type ErrorBodyDTO,
-	type ErrorResponseDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-export interface AssistantErrorResolution {
-	/** User-facing copy: code-specific FE copy → backend message → caller fallback. */
-	message: string;
-	/** Known backend error code, when one we recognise was supplied. */
-	code?: ErrorCodeDTO;
-	/**
-	 * Whether/how the failed action may be retried:
-	 *   • `auto`   — transient; the caller may silently re-attempt (capped).
-	 *   • `manual` — surface a Retry affordance to the user.
-	 *   • `none`   — retrying would re-fail deterministically; offer nothing.
-	 */
-	retryAction: RetryActionDTO;
-	/** Quota/limit error — callers hide the retry + feedback bar (retrying just re-limits). */
-	isRateLimit: boolean;
-}
-
-/** Quota/limit codes — surfaced as rate-limit errors (no retry, feedback bar hidden). */
-const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
-	ErrorCodeDTO.thread_message_limit,
-	ErrorCodeDTO.connection_limit_exceeded,
-	ErrorCodeDTO.hourly_message_limit,
-	ErrorCodeDTO.daily_message_limit,
-	ErrorCodeDTO.daily_token_limit,
-	ErrorCodeDTO.daily_cost_limit,
-	ErrorCodeDTO.budget_exceeded,
-]);
-
-/**
- * Codes whose retry would re-fail deterministically — permission/config/validation
- * failures. These force `retryAction: none` regardless of HTTP status.
- */
-const NON_RETRYABLE_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.permission_denied,
-	ErrorCodeDTO.user_disabled,
-	ErrorCodeDTO.org_disabled,
-	ErrorCodeDTO.validation_error,
-	ErrorCodeDTO.invalid_content_length,
-	ErrorCodeDTO.invalid_fork_target,
-	ErrorCodeDTO.missing_signoz_url,
-	ErrorCodeDTO.invalid_signoz_url,
-	ErrorCodeDTO.region_not_configured,
-]);
-
-/**
- * Code-specific, user-friendly copy. Takes precedence over the backend's raw
- * `error.message` so the user sees an actionable, consistent sentence rather
- * than internal phrasing. Codes absent here fall through to the backend message.
- */
-const ERROR_CODE_COPY: Partial<Record<ErrorCodeDTO, string>> = {
-	[ErrorCodeDTO.permission_denied]:
-		"You don't have permission to do that. Contact your workspace admin if you think this is a mistake.",
-	[ErrorCodeDTO.user_disabled]:
-		'Your access to the AI assistant has been disabled. Contact your workspace admin to re-enable it.',
-	[ErrorCodeDTO.org_disabled]:
-		'The AI assistant is disabled for your organisation. An admin can enable it in settings.',
-	[ErrorCodeDTO.thread_busy]:
-		'This conversation is still finishing a previous response. Give it a moment and try again.',
-	[ErrorCodeDTO.thread_has_active_execution]:
-		'This conversation is still finishing a previous response. Give it a moment and try again.',
-	[ErrorCodeDTO.hourly_message_limit]:
-		"You've reached the hourly message limit. Please try again later.",
-	[ErrorCodeDTO.daily_message_limit]:
-		"You've reached the daily message limit. Please try again tomorrow.",
-	[ErrorCodeDTO.daily_token_limit]:
-		"You've reached today's usage limit. Please try again tomorrow.",
-	[ErrorCodeDTO.daily_cost_limit]:
-		"You've reached today's usage limit. Please try again tomorrow.",
-	[ErrorCodeDTO.budget_exceeded]:
-		"You've reached your usage budget. Contact your workspace admin to raise it.",
-	[ErrorCodeDTO.thread_message_limit]:
-		'This conversation has reached its length limit. Start a new conversation to continue.',
-	[ErrorCodeDTO.connection_limit_exceeded]:
-		'Too many active conversations right now. Close one and try again.',
-	[ErrorCodeDTO.max_turns_exceeded]:
-		'The assistant reached the maximum number of steps for this request. Try rephrasing or breaking it into smaller asks.',
-	[ErrorCodeDTO.region_unreachable]:
-		"Couldn't reach your region's services. Please try again in a moment.",
-	[ErrorCodeDTO.region_not_configured]:
-		'No region is configured for the AI assistant yet. An admin can set this up in settings.',
-	[ErrorCodeDTO.mcp_unavailable]:
-		'A required service is temporarily unavailable. Please try again shortly.',
-	[ErrorCodeDTO.sandbox_unavailable]:
-		'The execution environment is temporarily unavailable. Please try again shortly.',
-	[ErrorCodeDTO.internal_error]:
-		'Something went wrong on our end. Please try again.',
-};
-
-function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
-	return (
-		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
-	);
-}
-
-function isRetryActionDTO(value: unknown): value is RetryActionDTO {
-	return (
-		typeof value === 'string' &&
-		(Object.values(RetryActionDTO) as string[]).includes(value)
-	);
-}
-
-/**
- * Pulls the structured error body out of either an Axios REST error or the
- * SSE error the streaming loop throws (a plain `Error` augmented with `code`).
- */
-function getErrorBody(err: unknown): ErrorBodyDTO | null {
-	if (isAxiosError(err)) {
-		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
-	}
-
-	const code = (err as { code?: string } | undefined)?.code;
-	const message = err instanceof Error ? err.message : undefined;
-	if (!code || !message) {
-		return null;
-	}
-
-	return { code: code as ErrorCodeDTO, message };
-}
-
-function isRateLimit(code: ErrorCodeDTO | undefined, err: unknown): boolean {
-	if (isAxiosError(err) && err.response?.status === 429) {
-		return true;
-	}
-	return code !== undefined && RATE_LIMIT_ERROR_CODES.has(code);
-}
-
-/**
- * Resolves how the failed action may be retried. The backend's explicit signal
- * (SSE `ErrorEventDTO.retryAction`) is authoritative; otherwise we derive it
- * from the rate-limit/non-retryable code sets and the HTTP status.
- */
-function resolveRetryAction(
-	err: unknown,
-	code: ErrorCodeDTO | undefined,
-	rateLimited: boolean,
-): RetryActionDTO {
-	const explicit = (err as { retryAction?: unknown } | undefined)?.retryAction;
-	if (isRetryActionDTO(explicit)) {
-		return explicit;
-	}
-
-	if (rateLimited || (code !== undefined && NON_RETRYABLE_CODES.has(code))) {
-		return RetryActionDTO.none;
-	}
-
-	if (isAxiosError(err)) {
-		const status = err.response?.status;
-		// No response → network/timeout failure; retrying may well succeed.
-		if (status === undefined || status === 408) {
-			return RetryActionDTO.manual;
-		}
-		if (status === 401 || status === 403) {
-			return RetryActionDTO.none;
-		}
-		if (status === 409 || status >= 500) {
-			return RetryActionDTO.manual;
-		}
-		// Other 4xx (validation, bad request) re-fail deterministically.
-		return RetryActionDTO.none;
-	}
-
-	// Non-Axios transport/parse error with no code — let the user retry.
-	return RetryActionDTO.manual;
-}
-
-function resolveMessage(
-	code: ErrorCodeDTO | undefined,
-	body: ErrorBodyDTO | null,
-	fallback: string,
-): string {
-	if (code !== undefined && ERROR_CODE_COPY[code]) {
-		return ERROR_CODE_COPY[code] as string;
-	}
-	// Trust the backend's message only for codes we recognise — never surface
-	// raw text for unknown codes (could be an internal stack trace).
-	if (code !== undefined && body?.message.trim()) {
-		return body.message.trim();
-	}
-	return fallback;
-}
-
-/**
- * Single resolution point for both SSE and REST assistant errors. Maps the
- * error onto user-facing copy plus retry semantics, degrading gracefully for
- * unknown codes (falls back to `fallback` + a `manual` retry where sensible).
- */
-export function resolveAssistantError(
-	err: unknown,
-	fallback: string,
-): AssistantErrorResolution {
-	const body = getErrorBody(err);
-	const code = isErrorCodeDTO(body?.code) ? body?.code : undefined;
-	const rateLimited = isRateLimit(code, err);
-
-	return {
-		message: resolveMessage(code, body, fallback),
-		code,
-		retryAction: resolveRetryAction(err, code, rateLimited),
-		isRateLimit: rateLimited,
-	};
-}

frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts

@@ -0,0 +1,71 @@
+import { isAxiosError } from 'axios';
+import {
+	ErrorCodeDTO,
+	type ErrorBodyDTO,
+	type ErrorResponseDTO,
+} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+
+export interface AssistantErrorResolution {
+	message: string;
+	isRateLimit: boolean;
+}
+
+function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
+	return (
+		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
+	);
+}
+
+const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
+	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
+	ErrorCodeDTO.thread_message_limit,
+	ErrorCodeDTO.connection_limit_exceeded,
+	ErrorCodeDTO.hourly_message_limit,
+	ErrorCodeDTO.daily_message_limit,
+	ErrorCodeDTO.daily_token_limit,
+	ErrorCodeDTO.daily_cost_limit,
+	ErrorCodeDTO.budget_exceeded,
+]);
+
+function isRateLimitError(code: string | undefined, err: unknown): boolean {
+	if (isAxiosError(err) && err.response?.status === 429) {
+		return true;
+	}
+
+	return isErrorCodeDTO(code) && RATE_LIMIT_ERROR_CODES.has(code);
+}
+
+function getErrorBody(err: unknown): ErrorBodyDTO | null {
+	if (isAxiosError(err)) {
+		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
+	}
+
+	const code = (err as { code?: string } | undefined)?.code;
+	const message = err instanceof Error ? err.message : undefined;
+	if (!code || !message) {
+		return null;
+	}
+
+	return { code: code as ErrorCodeDTO, message };
+}
+
+/**
+ * Uses `error.message` when `error.code` is a known `ErrorCodeDTO`;
+ * otherwise returns `fallback`.
+ */
+export function resolveAssistantErrorMessage(
+	err: unknown,
+	fallback: string,
+): AssistantErrorResolution {
+	const body = getErrorBody(err);
+	const isRateLimit = isRateLimitError(body?.code, err);
+
+	if (body && isErrorCodeDTO(body.code) && body.message.trim()) {
+		return {
+			message: body.message.trim(),
+			isRateLimit,
+		};
+	}
+
+	return { message: fallback, isRateLimit: Boolean(isRateLimit) };
+}

frontend/src/container/AllError/__tests__/useExceptionsStripInfo.test.tsx

@@ -1,53 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
-import { StripItemKind } from 'container/BottomStrip/types';
-
-import { useExceptionsStripInfo } from '../useExceptionsStripInfo';
-
-describe('useExceptionsStripInfo', () => {
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	it('shows the rows on the page against the total', () => {
-		renderHook(() => useExceptionsStripInfo({ shownCount: 25, totalCount: 500 }));
-
-		expect(useBottomStripStore.getState().left).toMatchObject([
-			{ kind: StripItemKind.Text, text: '25 of 500 exceptions' },
-		]);
-	});
-
-	it('still says n of m when the whole list fits on one page', () => {
-		renderHook(() => useExceptionsStripInfo({ shownCount: 42, totalCount: 42 }));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '42 of 42 exceptions',
-		});
-	});
-
-	it('says exception, not exceptions, when there is one', () => {
-		renderHook(() => useExceptionsStripInfo({ shownCount: 1, totalCount: 1 }));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '1 of 1 exception',
-		});
-	});
-
-	it('shows zero before the counts land', () => {
-		renderHook(() => useExceptionsStripInfo({ shownCount: 0, totalCount: 0 }));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '0 of 0 exceptions',
-		});
-	});
-
-	it('clears the strip when the page unmounts', () => {
-		const { unmount } = renderHook(() =>
-			useExceptionsStripInfo({ shownCount: 25, totalCount: 500 }),
-		);
-
-		unmount();
-
-		expect(useBottomStripStore.getState().left).toBeNull();
-	});
-});

frontend/src/container/AllError/index.tsx

@@ -38,7 +38,6 @@ import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { FilterDropdownExtendsProps } from './types';
-import { useExceptionsStripInfo } from './useExceptionsStripInfo';
 import {
 	extractFilterValues,
 	getDefaultFilterValue,
@@ -161,11 +160,6 @@ function AllErrors(): JSX.Element {
 			},
 		]);
 
-	useExceptionsStripInfo({
-		shownCount: data?.payload?.length ?? 0,
-		totalCount: errorCountResponse.data?.payload ?? 0,
-	});
-
 	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
 	useEffect(() => {
 		setIsFetching(isFetching);

frontend/src/container/AllError/useExceptionsStripInfo.ts

@@ -1,26 +0,0 @@
-import { useMemo } from 'react';
-import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
-import { type StripItem, StripItemKind } from 'container/BottomStrip/types';
-import { pluralize } from 'utils/pluralize';
-
-interface UseExceptionsStripInfoArgs {
-	shownCount: number;
-	totalCount: number;
-}
-
-export function useExceptionsStripInfo({
-	shownCount,
-	totalCount,
-}: UseExceptionsStripInfoArgs): void {
-	const items = useMemo<StripItem[]>(
-		() => [
-			{
-				kind: StripItemKind.Text,
-				text: `${shownCount} of ${pluralize(totalCount, 'exception')}`,
-			},
-		],
-		[shownCount, totalCount],
-	);
-
-	useBottomStrip(items);
-}

frontend/src/container/AppLayout/index.tsx

@@ -35,6 +35,7 @@ import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { SubscriptionManagePermissions } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { MIN_ACCOUNT_AGE_FOR_CHANGELOG } from 'constants/changelog';
 import { Events } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
@@ -51,7 +52,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
@@ -103,6 +103,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		trialInfo,
 		activeLicense,
 		isFetchingActiveLicense,
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
 		userPreferences,
 		isFetchingUserPreferences,
 		updateChangelog,
@@ -489,7 +492,42 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, [isDarkMode]);
 
-	const chatSupport = useChatSupport();
+	const showAddCreditCardModal = useMemo(() => {
+		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;
+			}
+			return (
+				isLoggedIn &&
+				!isPremiumSupportEnabled &&
+				isChatSupportEnabled &&
+				!trialInfo?.trialConvertedToSubscription &&
+				isCloudUserVal
+			);
+		}
+		return false;
+	}, [
+		featureFlags,
+		featureFlagsFetchError,
+		isCloudUserVal,
+		isFetchingFeatureFlags,
+		isLoggedIn,
+		activeLicense,
+		trialInfo,
+	]);
 
 	// Listen for API warnings
 	const handleWarning = (
@@ -847,16 +885,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{chatSupport === ChatSupportState.NeedsCard && !isSavedViewEnabled && (
-					<ChatSupportGateway />
-				)}
+				{showAddCreditCardModal && <ChatSupportGateway />}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}
 
-				<Toaster
-					offset={{ bottom: 'calc(var(--bottom-strip-height, 0px) + 24px)' }}
-				/>
+				<Toaster />
 			</Layout>
 		</TooltipProvider>
 	);

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

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

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

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

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

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

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

@@ -11,8 +11,6 @@
 	background: var(--l2-background);
 	border-top: 1px solid var(--l2-border);
 
-	--button-font-size: 12px;
-
 	font-family: var(--font-family-sf-mono, monospace);
 
 	// Above page content, below the body-portalled overlays that are meant to
@@ -25,21 +23,14 @@
 .right {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-4);
+	gap: var(--spacing-6);
 	min-width: 0;
 }
 
-.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);
+// Temporary placeholder for the left slot. Replaced later.
+.version {
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }

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

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

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

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

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

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

@@ -1,65 +1,12 @@
-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 />);
 
@@ -81,96 +28,22 @@ describe('BottomStrip', () => {
 	it.each([['v0.134.67'], ['main-64f1c2a']])(
 		'renders the build version %p exactly as given',
 		(version) => {
-			const { getByText } = render(<BottomStrip />, undefined, {
+			const { getByTestId } = render(<BottomStrip />, undefined, {
 				appContextOverrides: {
 					versionData: { version, ee: 'Y', setupCompleted: true },
 				},
 			});
 
-			expect(getByText(version)).toBeInTheDocument();
+			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
 		},
 	);
 
 	it('renders the strip without a version when none is available', () => {
-		const { getByTestId } = render(<BottomStrip />, undefined, {
+		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
 			appContextOverrides: { versionData: null },
 		});
 
-		const strip = getByTestId('bottom-strip');
-
-		expect(strip).toBeInTheDocument();
-		expect(strip).toHaveTextContent('');
-	});
-
-	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
-	// re-renders the original tree. These drive change through state and through
-	// separate trees instead, which the module-level store lets them share.
-	describe('left slot', () => {
-		it('shows what the page put there instead of the version', () => {
-			render(<Page 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();
-		});
+		expect(getByTestId('bottom-strip')).toBeInTheDocument();
+		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
 	});
 });

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

@@ -1,24 +0,0 @@
-// `:` 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

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

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-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/container/Home/Home.tsx

@@ -26,7 +26,6 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import { useHomeStripInfo } from 'container/Home/useHomeStripInfo';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -65,8 +64,6 @@ const homeInterval = 30 * 60 * 1000;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function Home(): JSX.Element {
-	useHomeStripInfo();
-
 	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
 	const isDarkMode = useIsDarkMode();

frontend/src/container/Home/__tests__/useHomeStripInfo.test.tsx

@@ -1,58 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useGetAlerts } from 'api/generated/services/alerts';
-import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
-import { StripItemKind } from 'container/BottomStrip/types';
-
-import { useHomeStripInfo } from '../useHomeStripInfo';
-
-jest.mock('api/generated/services/alerts', () => ({
-	useGetAlerts: jest.fn(),
-}));
-
-const mockUseGetAlerts = useGetAlerts as jest.Mock;
-
-describe('useHomeStripInfo', () => {
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	it('counts the firing alert instances', () => {
-		mockUseGetAlerts.mockReturnValue({ data: { data: [{}, {}, {}] } });
-
-		renderHook(() => useHomeStripInfo());
-
-		expect(useBottomStripStore.getState().left).toMatchObject([
-			{ kind: StripItemKind.Text, text: '3 alerts firing' },
-		]);
-	});
-
-	it('says alert, not alerts, when only one is firing', () => {
-		mockUseGetAlerts.mockReturnValue({ data: { data: [{}] } });
-
-		renderHook(() => useHomeStripInfo());
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '1 alert firing',
-		});
-	});
-
-	it('shows zero before the response lands', () => {
-		mockUseGetAlerts.mockReturnValue({ data: undefined });
-
-		renderHook(() => useHomeStripInfo());
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '0 alerts firing',
-		});
-	});
-
-	it('clears the strip when the page unmounts', () => {
-		mockUseGetAlerts.mockReturnValue({ data: { data: [{}, {}, {}] } });
-
-		const { unmount } = renderHook(() => useHomeStripInfo());
-
-		unmount();
-
-		expect(useBottomStripStore.getState().left).toBeNull();
-	});
-});

frontend/src/container/Home/useHomeStripInfo.ts

@@ -1,21 +0,0 @@
-import { useMemo } from 'react';
-import { useGetAlerts } from 'api/generated/services/alerts';
-import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
-import { type StripItem, StripItemKind } from 'container/BottomStrip/types';
-import { pluralize } from 'utils/pluralize';
-
-export function useHomeStripInfo(): void {
-	// Firing instances, not rules, matching the triggered alerts page.
-	const { data } = useGetAlerts();
-
-	const count = data?.data?.length ?? 0;
-
-	const items = useMemo<StripItem[]>(
-		() => [
-			{ kind: StripItemKind.Text, text: `${pluralize(count, 'alert')} firing` },
-		],
-		[count],
-	);
-
-	useBottomStrip(items);
-}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -24,7 +24,6 @@ const accountsResponse: ListAccounts200 = {
 				agentReport: {
 					timestampMillis: 1747114366214,
 					data: null,
-					syncState: null,
 				},
 				providerAccountId: PROVIDER_ACCOUNT_ID,
 				removedAt: null,

frontend/src/container/ListAlertRules/__tests__/useAlertRulesStripInfo.test.tsx

@@ -1,53 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
-import { StripItemKind } from 'container/BottomStrip/types';
-
-import { useAlertRulesStripInfo } from '../useAlertRulesStripInfo';
-
-describe('useAlertRulesStripInfo', () => {
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	it('shows the rows on the page against the total', () => {
-		renderHook(() => useAlertRulesStripInfo({ shownCount: 15, totalCount: 17 }));
-
-		expect(useBottomStripStore.getState().left).toMatchObject([
-			{ kind: StripItemKind.Text, text: '15 of 17 rules' },
-		]);
-	});
-
-	it('still says n of m when the whole list fits on one page', () => {
-		renderHook(() => useAlertRulesStripInfo({ shownCount: 17, totalCount: 17 }));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '17 of 17 rules',
-		});
-	});
-
-	it('says rule, not rules, when there is only one', () => {
-		renderHook(() => useAlertRulesStripInfo({ shownCount: 1, totalCount: 1 }));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '1 of 1 rule',
-		});
-	});
-
-	it('shows zero when nothing matched', () => {
-		renderHook(() => useAlertRulesStripInfo({ shownCount: 0, totalCount: 12 }));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '0 of 12 rules',
-		});
-	});
-
-	it('clears the strip when the page unmounts', () => {
-		const { unmount } = renderHook(() =>
-			useAlertRulesStripInfo({ shownCount: 15, totalCount: 17 }),
-		);
-
-		unmount();
-
-		expect(useBottomStripStore.getState().left).toBeNull();
-	});
-});

frontend/src/container/ListAlertRules/index.tsx

@@ -20,7 +20,6 @@ import { ALERT_RULES_PARAMS, useAlertRulesFilters } from './hooks';
 import styles from './ListAlertRules.module.scss';
 import { getAlertRuleColumns } from './table.config';
 import type { AlertRule } from './types';
-import { useAlertRulesStripInfo } from './useAlertRulesStripInfo';
 import { useAlertRulesData } from './useAlertRulesData';
 import { useAlertRulesHandlers } from './useAlertRulesHandlers';
 
@@ -88,11 +87,6 @@ function ListAlertRules(): JSX.Element {
 		return filteredRules.slice(start, start + limit);
 	}, [filteredRules, page, limit]);
 
-	useAlertRulesStripInfo({
-		shownCount: paginatedRules.length,
-		totalCount: filteredRules.length,
-	});
-
 	const columnsWithActions = useMemo(() => {
 		if (!action) {
 			return columns;

frontend/src/container/ListAlertRules/useAlertRulesStripInfo.ts

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
-import { type StripItem, StripItemKind } from 'container/BottomStrip/types';
-import { pluralize } from 'utils/pluralize';
-
-interface UseAlertRulesStripInfoArgs {
-	/** Rows on the current page, matching the table's own footer. */
-	shownCount: number;
-	totalCount: number;
-}
-
-export function useAlertRulesStripInfo({
-	shownCount,
-	totalCount,
-}: UseAlertRulesStripInfoArgs): void {
-	const items = useMemo<StripItem[]>(
-		() => [
-			{
-				kind: StripItemKind.Text,
-				text: `${shownCount} of ${pluralize(totalCount, 'rule')}`,
-			},
-		],
-		[shownCount, totalCount],
-	);
-
-	useBottomStrip(items);
-}

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

@@ -155,39 +155,6 @@ describe('ResetPassword Component', () => {
 				{ timeout: 200 },
 			);
 		});
-
-		it('clears password mismatch error when confirm password is emptied', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /reset password/i,
-			});
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password456');
-			await user.tab();
-
-			await waitFor(() => {
-				expect(screen.getByText(/passwords don't match/i)).toBeInTheDocument();
-			});
-
-			await user.clear(confirmPasswordInput);
-
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/passwords don't match/i),
-				).not.toBeInTheDocument();
-				expect(submitButton).toBeDisabled();
-			});
-		});
 	});
 
 	describe('Successful Password Reset', () => {
@@ -321,65 +288,6 @@ describe('ResetPassword Component', () => {
 				expect(screen.queryByText(/invalid token/i)).not.toBeInTheDocument();
 			});
 		});
-
-		it('clears API error when the user edits the password', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(RESET_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(400),
-						ctx.json({
-							error: {
-								code: 'invalid_password',
-								message: 'password must be at least 8 characters long',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /reset password/i,
-			});
-
-			await user.type(passwordInput, 'weak');
-			await user.type(confirmPasswordInput, 'weak');
-
-			await waitFor(() => {
-				expect(submitButton).not.toBeDisabled();
-			});
-
-			await user.click(submitButton);
-
-			await waitFor(() => {
-				expect(
-					screen.getByText(/password must be at least 8 characters long/i),
-				).toBeInTheDocument();
-			});
-
-			await user.type(passwordInput, 'Er1!');
-
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/password must be at least 8 characters long/i),
-				).not.toBeInTheDocument();
-			});
-
-			await user.type(confirmPasswordInput, 'Er1!');
-
-			await waitFor(() => {
-				expect(submitButton).not.toBeDisabled();
-			});
-		});
 	});
 
 	describe('Loading States', () => {

frontend/src/container/ResetPassword/index.tsx

@@ -10,6 +10,7 @@ import { useResetPassword } from 'api/generated/services/users';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
 import ROUTES from 'constants/routes';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { ArrowRight, CircleAlert, KeyRound } from '@signozhq/icons';
@@ -22,7 +23,10 @@ import './ResetPassword.styles.scss';
 type FormValues = { password: string; confirmPassword: string };
 
 function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
-	const [confirmPasswordTouched, setConfirmPasswordTouched] = useState(false);
+	const [confirmPasswordError, setConfirmPasswordError] =
+		useState<boolean>(false);
+
+	const [isValidPassword, setIsValidPassword] = useState(false);
 	const { t } = useTranslation(['common']);
 	const { search } = useLocation();
 	const params = new URLSearchParams(search);
@@ -33,7 +37,6 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 		mutate: resetPassword,
 		isLoading,
 		error: mutationError,
-		reset: resetMutation,
 	} = useResetPassword();
 
 	const errorMessage = useMemo(
@@ -42,30 +45,11 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	);
 
 	const [form] = Form.useForm<FormValues>();
-	const password = Form.useWatch('password', form);
-	const confirmPassword = Form.useWatch('confirmPassword', form);
-
-	const isPasswordMismatch =
-		Boolean(confirmPassword) && password !== confirmPassword;
-	const showPasswordMismatchError = confirmPasswordTouched && isPasswordMismatch;
-	const isValidPassword =
-		Boolean(password?.trim()) &&
-		Boolean(confirmPassword?.trim()) &&
-		password === confirmPassword;
-
-	const handleValuesChange = (): void => {
-		if (mutationError) {
-			resetMutation();
-		}
-	};
-
-	const handleSubmit = (): void => {
-		if (!token) {
-			return;
-		}
+	const handleFormSubmit = (): void => {
+		const { password } = form.getFieldsValue();
 
 		resetPassword(
-			{ data: { password: form.getFieldValue('password'), token } },
+			{ data: { password, token: token || '' } },
 			{
 				onSuccess: (): void => {
 					notifications.success({
@@ -79,6 +63,80 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 		);
 	};
 
+	const validatePassword = (): boolean => {
+		const { password, confirmPassword } = form.getFieldsValue();
+
+		if (
+			password &&
+			confirmPassword &&
+			password.trim() &&
+			confirmPassword.trim() &&
+			password.length > 0 &&
+			confirmPassword.length > 0
+		) {
+			return password === confirmPassword;
+		}
+
+		return false;
+	};
+
+	const handleValuesChange = useDebouncedFn((): void => {
+		const { password, confirmPassword } = form.getFieldsValue();
+
+		if (!password || !confirmPassword) {
+			setIsValidPassword(false);
+		}
+
+		// Only clear error if passwords match while typing (but don't set error until blur)
+		if (
+			password &&
+			confirmPassword &&
+			password.trim() &&
+			confirmPassword.trim()
+		) {
+			const isValid = validatePassword();
+			setIsValidPassword(isValid);
+
+			// Only clear error if passwords match, don't set error on mismatch
+			if (isValid) {
+				setConfirmPasswordError(false);
+			}
+		}
+	}, 100);
+
+	const handlePasswordBlur = (): void => {
+		const { confirmPassword } = form.getFieldsValue();
+		// Only validate if confirm password has a value
+		if (confirmPassword && confirmPassword.trim()) {
+			const isValid = validatePassword();
+			setIsValidPassword(isValid);
+			setConfirmPasswordError(!isValid);
+		}
+	};
+
+	const handleConfirmPasswordBlur = (): void => {
+		const { password, confirmPassword } = form.getFieldsValue();
+		if (
+			password &&
+			password.trim() &&
+			confirmPassword &&
+			confirmPassword.trim()
+		) {
+			const isValid = validatePassword();
+			setIsValidPassword(isValid);
+			setConfirmPasswordError(!isValid);
+		}
+	};
+
+	const handleSubmit = (): void => {
+		const isValid = validatePassword();
+		setIsValidPassword(isValid);
+
+		if (token) {
+			handleFormSubmit();
+		}
+	};
+
 	return (
 		<AuthPageContainer>
 			<div className="reset-password-card">
@@ -100,7 +158,6 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 				<FormContainer
 					form={form}
 					onFinish={handleSubmit}
-					onValuesChange={handleValuesChange}
 					className="reset-password-form"
 				>
 					<div className="reset-password-form-container">
@@ -114,6 +171,8 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 								>
 									<AntdInput.Password
 										tabIndex={0}
+										onChange={handleValuesChange}
+										onBlur={handlePasswordBlur}
 										id="password"
 										data-testid="password"
 										placeholder="Enter new password"
@@ -130,7 +189,8 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 									rules={[{ required: true, message: 'Please enter confirm password!' }]}
 								>
 									<AntdInput.Password
-										onBlur={(): void => setConfirmPasswordTouched(true)}
+										onChange={handleValuesChange}
+										onBlur={handleConfirmPasswordBlur}
 										id="confirmPassword"
 										data-testid="confirmPassword"
 										placeholder="Confirm your new password"
@@ -141,7 +201,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 						</div>
 					</div>
 
-					{showPasswordMismatchError && (
+					{confirmPasswordError && (
 						<Callout
 							type="error"
 							size="small"
@@ -153,7 +213,7 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 						</Callout>
 					)}
 
-					{errorMessage && !showPasswordMismatchError && (
+					{errorMessage && !confirmPasswordError && (
 						<AuthError error={errorMessage} />
 					)}
 

frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx

@@ -21,7 +21,6 @@ import { getTotalRPS } from 'utils/services';
 
 import { getColumns } from '../Columns/ServiceColumn';
 import { ServiceMetricsTableProps } from '../types';
-import { useServicesStripInfo } from '../useServicesStripInfo';
 import { getServiceListFromQuery } from '../utils';
 
 function ServiceMetricTable({
@@ -68,8 +67,6 @@ function ServiceMetricTable({
 		[isLoading, queries, topLevelOperations],
 	);
 
-	useServicesStripInfo(services.length);
-
 	const { search } = useLocation();
 	const tableColumns = useMemo(() => getColumns(search, true), [search]);
 	const [RPS, setRPS] = useState(0);

frontend/src/container/ServiceApplication/ServiceTraces/index.tsx

@@ -18,7 +18,6 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'hooks/useResourceAttribute/types';
 
 import SkipOnBoardingModal from '../SkipOnBoardModal';
-import { useServicesStripInfo } from '../useServicesStripInfo';
 import ServiceTraceTable from './ServiceTracesTable';
 
 function ServiceTraces(): JSX.Element {
@@ -43,8 +42,6 @@ function ServiceTraces(): JSX.Element {
 
 	const services = data || [];
 
-	useServicesStripInfo(services.length);
-
 	const [skipOnboarding, setSkipOnboarding] = useState(
 		localStorageGet(SKIP_ONBOARDING) === 'true',
 	);

frontend/src/container/ServiceApplication/__tests__/useServicesStripInfo.test.tsx

@@ -1,43 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
-import { StripItemKind } from 'container/BottomStrip/types';
-
-import { useServicesStripInfo } from '../useServicesStripInfo';
-
-describe('useServicesStripInfo', () => {
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	it('shows how many services are listed', () => {
-		renderHook(() => useServicesStripInfo(18));
-
-		expect(useBottomStripStore.getState().left).toMatchObject([
-			{ kind: StripItemKind.Text, text: '18 services' },
-		]);
-	});
-
-	it('says service, not services, when there is one', () => {
-		renderHook(() => useServicesStripInfo(1));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '1 service',
-		});
-	});
-
-	it('shows zero when there are none', () => {
-		renderHook(() => useServicesStripInfo(0));
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '0 services',
-		});
-	});
-
-	it('clears the strip when the page unmounts', () => {
-		const { unmount } = renderHook(() => useServicesStripInfo(18));
-
-		unmount();
-
-		expect(useBottomStripStore.getState().left).toBeNull();
-	});
-});

frontend/src/container/ServiceApplication/useServicesStripInfo.ts

@@ -1,13 +0,0 @@
-import { useMemo } from 'react';
-import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
-import { type StripItem, StripItemKind } from 'container/BottomStrip/types';
-import { pluralize } from 'utils/pluralize';
-
-export function useServicesStripInfo(count: number): void {
-	const items = useMemo<StripItem[]>(
-		() => [{ kind: StripItemKind.Text, text: pluralize(count, 'service') }],
-		[count],
-	);
-
-	useBottomStrip(items);
-}

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

@@ -1,189 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { useAppContext } from 'providers/App/App';
-
-jest.mock('providers/App/App');
-jest.mock('hooks/useGetTenantLicense');
-
-const mockAppContext = useAppContext as jest.MockedFunction<
-	typeof useAppContext
->;
-const mockLicense = useGetTenantLicense as jest.MockedFunction<
-	typeof useGetTenantLicense
->;
-
-const flag = (name: FeatureKeys, active: boolean): Record<string, unknown> => ({
-	name,
-	active,
-	usage: 0,
-	usage_limit: -1,
-	route: '',
-});
-
-function setup({
-	chatSupport = true,
-	premiumSupport = false,
-	trialConverted = false,
-	isCloudUser = true,
-	isEnterpriseSelfHostedUser = false,
-	isLoggedIn = true,
-	pylonEnabled = true,
-	isFetchingFeatureFlags = false,
-	featureFlags = undefined as unknown,
-	featureFlagsFetchError = null as unknown,
-	activeLicense = {} as unknown,
-	trialInfo = {} as unknown,
-} = {}): void {
-	window.signozBootData = {
-		settings: { pylon: { enabled: pylonEnabled } },
-	} as never;
-
-	mockAppContext.mockReturnValue({
-		featureFlags:
-			featureFlags === undefined
-				? [
-						flag(FeatureKeys.CHAT_SUPPORT, chatSupport),
-						flag(FeatureKeys.PREMIUM_SUPPORT, premiumSupport),
-					]
-				: featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		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);
-		});
-
-		it('offers nothing before trial info has loaded', () => {
-			setup({ trialInfo: null });
-
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-	});
-
-	describe('once the flags answer', () => {
-		it('reads a fetch error as an answer, not as still loading', () => {
-			setup({
-				featureFlags: null,
-				featureFlagsFetchError: new Error('flags unavailable'),
-			});
-
-			// Nothing is granted without flags, so the chat support flag is absent.
-			expect(state()).toBe(ChatSupportState.Unavailable);
-		});
-
-		it('settles once the flags finish loading', () => {
-			setup({ isFetchingFeatureFlags: true });
-			const { result, rerender } = renderHook(() => useChatSupport());
-
-			expect(result.current).toBe(ChatSupportState.Unavailable);
-
-			setup({ isFetchingFeatureFlags: false });
-			rerender();
-
-			expect(result.current).toBe(ChatSupportState.NeedsCard);
-		});
-
-		it('offers the card flow even when Pylon is not configured', () => {
-			setup({ trialConverted: false, pylonEnabled: false });
-
-			expect(state()).toBe(ChatSupportState.NeedsCard);
-		});
-	});
-});

frontend/src/hooks/useChatSupport.ts

@@ -1,71 +0,0 @@
-import { FeatureKeys } from 'constants/features';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useAppContext } from 'providers/App/App';
-import { useMemo } from 'react';
-
-export enum ChatSupportState {
-	/** Pylon is configured for this user — hand off to the widget. */
-	Pylon = 'pylon',
-	/** Trial without a card — offer the Add Credit Card flow instead. */
-	NeedsCard = 'needsCard',
-	/** No support entry at all. */
-	Unavailable = 'unavailable',
-}
-
-export function useChatSupport(): ChatSupportState {
-	const {
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		trialInfo,
-		isLoggedIn,
-		activeLicense,
-	} = useAppContext();
-	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
-
-	return useMemo(() => {
-		const isReady =
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo;
-		if (!isReady || !isLoggedIn) {
-			return ChatSupportState.Unavailable;
-		}
-
-		const flag = (name: FeatureKeys): boolean =>
-			featureFlags?.find((f) => f.name === name)?.active || false;
-
-		if (!flag(FeatureKeys.CHAT_SUPPORT)) {
-			return ChatSupportState.Unavailable;
-		}
-
-		const needsCard =
-			!flag(FeatureKeys.PREMIUM_SUPPORT) &&
-			!trialInfo?.trialConvertedToSubscription;
-
-		if (needsCard) {
-			// The credit card flow is cloud-only.
-			// TODO: offered even where Pylon is not configured, which is probably wrong.
-			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/AIAssistantPage/AIAssistantPage.tsx

@@ -11,8 +11,6 @@ import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantS
 import { VariantContext } from 'container/AIAssistant/VariantContext';
 import Noz from 'components/Noz/Noz';
 
-import { useAIAssistantStripInfo } from './useAIAssistantStripInfo';
-
 import styles from './AIAssistantPage.module.scss';
 import ConversationsList from 'container/AIAssistant/components/ConversationsList';
 
@@ -43,8 +41,6 @@ export default function AIAssistantPage(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	useAIAssistantStripInfo();
-
 	const conversations = useAIAssistantStore((s) => s.conversations);
 	const activeConversationId = useAIAssistantStore(
 		(s) => s.activeConversationId,

frontend/src/pages/AIAssistantPage/__tests__/useAIAssistantStripInfo.test.tsx

@@ -1,60 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
-import { useBottomStripStore } from 'container/BottomStrip/store/useBottomStripStore';
-import { StripItemKind } from 'container/BottomStrip/types';
-
-import { useAIAssistantStripInfo } from '../useAIAssistantStripInfo';
-
-function seed(conversations: Record<string, unknown>): void {
-	useAIAssistantStore.setState({ conversations } as never);
-}
-
-describe('useAIAssistantStripInfo', () => {
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	it('counts only the conversations that are not archived', () => {
-		seed({
-			a: { id: 'a' },
-			b: { id: 'b' },
-			c: { id: 'c', archived: true },
-		});
-
-		renderHook(() => useAIAssistantStripInfo());
-
-		expect(useBottomStripStore.getState().left).toMatchObject([
-			{ kind: StripItemKind.Text, text: '2 conversations' },
-		]);
-	});
-
-	it('says one conversation, not 1 conversations', () => {
-		seed({ a: { id: 'a' } });
-
-		renderHook(() => useAIAssistantStripInfo());
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '1 conversation',
-		});
-	});
-
-	it('shows zero when there are none', () => {
-		seed({});
-
-		renderHook(() => useAIAssistantStripInfo());
-
-		expect(useBottomStripStore.getState().left?.[0]).toMatchObject({
-			text: '0 conversations',
-		});
-	});
-
-	it('clears the strip when the page unmounts', () => {
-		seed({ a: { id: 'a' } });
-
-		const { unmount } = renderHook(() => useAIAssistantStripInfo());
-
-		unmount();
-
-		expect(useBottomStripStore.getState().left).toBeNull();
-	});
-});

frontend/src/pages/AIAssistantPage/stories/AIAssistantPage.stories.tsx

@@ -243,11 +243,3 @@ export const TooltipsInApprovalDiff: Story = {
 	args: { tooltipsOpen: true, agent: 'awaiting-approval', contents: BRIEF },
 	play: openApprovalDiff,
 };
-
-/**
- * The conversation count in the bottom strip, in place of the build version.
- * Archived threads are left out of it.
- */
-export const BottomStrip: Story = {
-	args: { bottomStrip: true },
-};

frontend/src/pages/AIAssistantPage/useAIAssistantStripInfo.ts

@@ -1,20 +0,0 @@
-import { useMemo } from 'react';
-import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
-import { useBottomStrip } from 'container/BottomStrip/useBottomStrip';
-import { type StripItem, StripItemKind } from 'container/BottomStrip/types';
-import { pluralize } from 'utils/pluralize';
-
-export function useAIAssistantStripInfo(): void {
-	const conversations = useAIAssistantStore((state) => state.conversations);
-
-	const count = Object.values(conversations).filter(
-		(conversation) => !conversation.archived,
-	).length;
-
-	const items = useMemo<StripItem[]>(
-		() => [{ kind: StripItemKind.Text, text: pluralize(count, 'conversation') }],
-		[count],
-	);
-
-	useBottomStrip(items);
-}

frontend/src/pages/AlertList/AlertRules/stories/AlertRules.stories.tsx

@@ -133,19 +133,3 @@ export const ColumnPicker: Story = {
 export const Tooltips: Story = {
 	args: { tooltipsOpen: true },
 };
-
-/**
- * The rule count in the bottom strip, in place of the build version: the rows on
- * the page against the total, the same pair the table's own footer prints.
- */
-export const BottomStrip: Story = {
-	args: { bottomStrip: true },
-};
-
-/** The same count on a second page, where the two numbers come apart. */
-export const BottomStripPaginated: Story = {
-	args: { bottomStrip: true, rules: RULE_MAX },
-	parameters: {
-		signoz: { route: '/alerts?tab=AlertRules&page=2&limit=10' },
-	},
-};

frontend/src/pages/AllErrors/stories/AllErrors.stories.tsx

@@ -125,11 +125,3 @@ export const QuickFiltersSettingsWithBanner: Story = {
 	args: { banner: 'trial-expiry' },
 	play: dirtyQuickFiltersSettings,
 };
-
-/**
- * The exception count in the bottom strip, in place of the build version: the
- * rows on the page against the total the count query returns.
- */
-export const BottomStrip: Story = {
-	args: { bottomStrip: true },
-};

frontend/src/pages/DashboardPage/stories/DashboardPage.stories.mocks.tsx

@@ -225,21 +225,17 @@ export const dashboardMocks = defineStoryMocks({
 				}),
 			),
 
-			// The variable bar resolves before the panels and stays laid out while
-			// they load or fail, so its two endpoints answer on their own rather
-			// than through the Data control.
-			rest.post('http://localhost/api/v2/variables/query', (_req, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: { variableValues: serviceVariableValues(values.variableValues) },
-					}),
-				),
+			rest.post(
+				'http://localhost/api/v2/variables/query',
+				response.json(() => ({
+					status: 'success',
+					data: { variableValues: serviceVariableValues(values.variableValues) },
+				})),
 			),
 
-			rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(fieldValuesResponse(NAMESPACE_VALUES))),
+			rest.get(
+				'http://localhost/api/v1/fields/values',
+				response.json(() => fieldValuesResponse(NAMESPACE_VALUES)),
 			),
 
 			// The header reads the public link on every load, so it answers even while

frontend/src/pages/HomePage/stories/HomePage.stories.tsx

@@ -97,11 +97,3 @@ export const NavSettingsMenu: Story = {
 		await screen.findByRole('menu');
 	},
 };
-
-/**
- * The firing alert count in the bottom strip, in place of the build version. It
- * counts firing instances, so it does not match the alert rules widget above.
- */
-export const BottomStrip: Story = {
-	args: { bottomStrip: true },
-};

frontend/src/pages/IntegrationsDetailsPage/CloudIntegration/stories/__story_mockdata__/cloudIntegration.ts

@@ -295,11 +295,7 @@ const account = (
 	provider,
 	providerAccountId: ACCOUNTS[provider][index],
 	config: accountConfig(provider),
-	agentReport: {
-		timestampMillis: Date.now() - 45 * 1000,
-		data: null,
-		syncState: null,
-	},
+	agentReport: { timestampMillis: Date.now() - 45 * 1000, data: null },
 	createdAt: new Date(Date.now() - 21 * 24 * 60 * 60 * 1000).toISOString(),
 	updatedAt: new Date(Date.now() - 60 * 60 * 1000).toISOString(),
 	removedAt: null,

frontend/src/pages/Services/stories/Services.stories.tsx

@@ -61,13 +61,3 @@ export const Pagination: Story = {
 export const OverTrialLimit: Story = {
 	args: { traffic: 'over-trial-limit', banner: 'trial-expiry' },
 };
-
-/** The service count in the bottom strip, in place of the build version. */
-export const BottomStrip: Story = {
-	args: { bottomStrip: true },
-};
-
-/** The same count on the span metrics table, which is the page's other path. */
-export const BottomStripSpanMetrics: Story = {
-	args: { bottomStrip: true, mode: 'span-metrics' },
-};

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataItem.tsx

@@ -5,23 +5,18 @@ import { Typography } from '@signozhq/ui/typography';
 import styles from './EntityMetadataItem.module.scss';
 
 interface EntityMetadataItemProps {
-	tooltip: ReactNode;
-	tooltipClassName?: string;
+	tooltip: string;
 	icon?: ReactNode;
 	children: ReactNode;
 }
 
 function EntityMetadataItem({
 	tooltip,
-	tooltipClassName,
 	icon,
 	children,
 }: EntityMetadataItemProps): JSX.Element {
 	return (
-		<TooltipSimple
-			title={tooltip}
-			tooltipContentProps={{ className: tooltipClassName }}
-		>
+		<TooltipSimple title={tooltip}>
 			<span className={styles.item}>
 				{icon}
 				<Typography.Text as="span">{children}</Typography.Text>
@@ -32,7 +27,6 @@ function EntityMetadataItem({
 
 EntityMetadataItem.defaultProps = {
 	icon: null,
-	tooltipClassName: undefined,
 };
 
 export default EntityMetadataItem;

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

@@ -8,7 +8,3 @@
 	// Keep Typography.Text at the row's size (it reads this var, not inherited font-size).
 	--typography-font-size: var(--periscope-font-size-base);
 }
-
-.tokenTooltip {
-	min-width: 160px;
-}

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataRow.tsx

@@ -1,21 +1,11 @@
-import {
-	CalendarClock,
-	CircleDollarSign,
-	Coins,
-	Server,
-	Timer,
-} from '@signozhq/icons';
+import { CalendarClock, Server, Timer } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import cx from 'classnames';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 
-import { formatCost, formatTokens } from '../SpanHoverCard/aiUsage';
-import { TraceTokenUsage } from '../TraceDetailsHeader/types';
 import EntityMetadataItem from './EntityMetadataItem';
-import TokenUsageTooltip from './TokenUsageTooltip';
 
-import tooltipStyles from '../TraceTooltip/TraceTooltip.module.scss';
 import styles from './EntityMetadataRow.module.scss';
 
 interface EntityMetadataRowProps {
@@ -26,8 +16,6 @@ interface EntityMetadataRowProps {
 	execTimePercent?: number;
 	timestamp?: string;
 	statusCode?: string | number;
-	tokens?: TraceTokenUsage;
-	cost?: number | null;
 }
 
 const ICON_SIZE = 14;
@@ -44,8 +32,6 @@ function EntityMetadataRow({
 	execTimePercent,
 	timestamp,
 	statusCode,
-	tokens,
-	cost,
 }: EntityMetadataRowProps): JSX.Element {
 	const entityLabel = entity === 'trace' ? 'Trace' : 'Span';
 	const durationTooltip =
@@ -105,25 +91,6 @@ function EntityMetadataRow({
 					<HttpStatusBadge statusCode={statusCode} />
 				</EntityMetadataItem>
 			)}
-
-			{tokens && (
-				<EntityMetadataItem
-					tooltip={<TokenUsageTooltip tokens={tokens} />}
-					tooltipClassName={tooltipStyles.tooltipContent}
-					icon={<Coins size={ICON_SIZE} />}
-				>
-					Tokens: {formatTokens(tokens.input)} → {formatTokens(tokens.output)}
-				</EntityMetadataItem>
-			)}
-
-			{cost != null && (
-				<EntityMetadataItem
-					tooltip="Total cost"
-					icon={<CircleDollarSign size={ICON_SIZE} />}
-				>
-					{formatCost(cost)}
-				</EntityMetadataItem>
-			)}
 		</div>
 	);
 }
@@ -135,8 +102,6 @@ EntityMetadataRow.defaultProps = {
 	execTimePercent: undefined,
 	timestamp: undefined,
 	statusCode: undefined,
-	tokens: undefined,
-	cost: undefined,
 };
 
 export default EntityMetadataRow;

frontend/src/pages/TraceDetailsV3/EntityMetadata/TokenUsageTooltip.tsx

@@ -1,38 +0,0 @@
-import { formatTokens } from '../SpanHoverCard/aiUsage';
-import TooltipRow from '../TraceTooltip/TooltipRow';
-import TooltipSection from '../TraceTooltip/TooltipSection';
-import { TraceTokenUsage } from '../TraceDetailsHeader/types';
-
-import tooltipStyles from '../TraceTooltip/TraceTooltip.module.scss';
-import styles from './EntityMetadataRow.module.scss';
-
-interface TokenUsageTooltipProps {
-	tokens: TraceTokenUsage;
-}
-
-function TokenUsageTooltip({ tokens }: TokenUsageTooltipProps): JSX.Element {
-	const { input, output, cacheRead, cacheWrite, reasoning } = tokens;
-
-	return (
-		<div className={`${tooltipStyles.body} ${styles.tokenTooltip}`}>
-			<TooltipSection>
-				<TooltipRow label="Tokens" value={formatTokens(input + output)} isTotal />
-			</TooltipSection>
-			<TooltipSection>
-				<TooltipRow label="Input" value={formatTokens(input)} />
-				<TooltipRow label="Output" value={formatTokens(output)} />
-				{cacheRead !== undefined && (
-					<TooltipRow label="Cache read" value={formatTokens(cacheRead)} />
-				)}
-				{cacheWrite !== undefined && (
-					<TooltipRow label="Cache write" value={formatTokens(cacheWrite)} />
-				)}
-				{reasoning !== undefined && (
-					<TooltipRow label="Reasoning" value={formatTokens(reasoning)} />
-				)}
-			</TooltipSection>
-		</div>
-	);
-}
-
-export default TokenUsageTooltip;

frontend/src/pages/TraceDetailsV3/SpanHintBadge/SpanHintBadge.tsx

@@ -1,37 +0,0 @@
-import { CSSProperties } from 'react';
-import { Badge } from '@signozhq/ui/badge';
-import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-import { getAiSpanKind } from '../utils/genAi';
-import { AI_SPAN_BADGES } from './constants';
-
-interface SpanHintBadgeProps {
-	span: SpanV3;
-}
-
-function SpanHintBadge({ span }: SpanHintBadgeProps): JSX.Element | null {
-	const aiSpanKind = getAiSpanKind(span);
-
-	if (aiSpanKind) {
-		const { label, color } = AI_SPAN_BADGES[aiSpanKind];
-		return (
-			<Badge
-				variant="outline"
-				// The outline variant derives text, fill and border from this color.
-				style={{ '--badge-background': color } as CSSProperties}
-				data-testid={`span-hint-badge-${aiSpanKind}`}
-			>
-				{label}
-			</Badge>
-		);
-	}
-
-	if (!span.response_status_code) {
-		return null;
-	}
-
-	return <HttpStatusBadge statusCode={span.response_status_code} />;
-}
-
-export default SpanHintBadge;

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

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-import SpanHintBadge from '../SpanHintBadge';
-
-const spanWith = (
-	attributes: Record<string, string | number>,
-	responseStatusCode = '',
-): SpanV3 =>
-	({
-		attributes,
-		resource: {},
-		response_status_code: responseStatusCode,
-	}) as unknown as SpanV3;
-
-describe('SpanHintBadge', () => {
-	it.each([
-		[{ 'gen_ai.request.model': 'gpt-4o' }, 'LLM'],
-		[{ 'gen_ai.tool.name': 'search' }, 'TOOL'],
-		[{ 'gen_ai.agent.name': 'planner' }, 'AGENT'],
-	])('shows only the AI badge for %p', (attributes, label) => {
-		render(<SpanHintBadge span={spanWith(attributes, '200')} />);
-
-		expect(screen.getByText(label)).toBeInTheDocument();
-		expect(screen.queryByText('200')).not.toBeInTheDocument();
-	});
-
-	it('falls back to the HTTP status code for non-AI spans', () => {
-		render(<SpanHintBadge span={spanWith({}, '503')} />);
-
-		expect(screen.getByText('503')).toBeInTheDocument();
-	});
-
-	it('renders nothing for a non-AI span without a status code', () => {
-		const { container } = render(<SpanHintBadge span={spanWith({})} />);
-
-		expect(container).toBeEmptyDOMElement();
-	});
-});

frontend/src/pages/TraceDetailsV3/SpanHintBadge/constants.ts

@@ -1,10 +0,0 @@
-import { AiSpanKind } from '../utils/genAi';
-
-export const AI_SPAN_BADGES: Record<
-	AiSpanKind,
-	{ label: string; color: string }
-> = {
-	[AiSpanKind.Llm]: { label: 'LLM', color: 'rgba(155, 255, 0, 1)' },
-	[AiSpanKind.Tool]: { label: 'TOOL', color: 'rgba(255, 209, 0, 1)' },
-	[AiSpanKind.Agent]: { label: 'AGENT', color: 'rgba(255, 10, 138, 1)' },
-};

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

@@ -12,16 +12,37 @@
 	// Hover card may be rendered while the SpanDetailsPanel is docked as
 	// a FloatingPanel (z-index 999); bump above the default tooltip z-index.
 	--tooltip-z-index: 1000;
+	background-color: var(--l1-background);
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	border: 1px solid var(--l2-border);
+	color: var(--l1-foreground);
 }
 
 .content {
-	min-width: 220px;
-	max-width: 320px;
+	font-size: 12px;
+	color: var(--l1-foreground);
 }
 
-.header {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	padding-bottom: 8px;
+.name {
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
+.row {
+	line-height: 1.5;
+	color: var(--l2-foreground);
+}
+
+.preview {
+	// container for additional preview rows
+}
+
+.previewKey {
+	color: var(--l2-foreground);
+}
+
+.previewValue {
+	color: var(--l1-foreground);
 }

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -4,8 +4,6 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
 import { convertTimeToRelevantUnit } from 'utils/traceUtils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
@@ -14,12 +12,6 @@ import { useMemo } from 'react';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { toFixed } from 'utils/toFixed';
 
-import { getSpanAiDetails, SpanAiDetails } from './aiUsage';
-import SpanUsageBreakdown from './SpanUsageBreakdown';
-import TooltipRow from '../TraceTooltip/TooltipRow';
-import TooltipSection from '../TraceTooltip/TooltipSection';
-
-import tooltipStyles from '../TraceTooltip/TraceTooltip.module.scss';
 import styles from './SpanHoverCard.module.scss';
 
 /**
@@ -46,7 +38,6 @@ export interface SpanTooltipContentProps {
 	relativeStartMs: number;
 	durationMs: number;
 	previewRows?: SpanPreviewRow[];
-	ai?: SpanAiDetails;
 }
 
 export function SpanTooltipContent({
@@ -56,46 +47,33 @@ export function SpanTooltipContent({
 	relativeStartMs,
 	durationMs,
 	previewRows,
-	ai,
 }: SpanTooltipContentProps): JSX.Element {
 	const { time: formattedDuration, timeUnitName } =
 		convertTimeToRelevantUnit(durationMs);
 
 	return (
-		<div className={cx(tooltipStyles.body, styles.content)}>
-			<div className={styles.header}>
-				<Typography.Text className={tooltipStyles.title} style={{ color }}>
-					{spanName}
-				</Typography.Text>
-				{ai?.usage && (
-					<Typography.Text size="small" weight="medium">
-						Usage Breakdown
-					</Typography.Text>
-				)}
+		<div className={styles.content}>
+			<div className={styles.name} style={{ color }}>
+				{spanName}
+			</div>
+			<div className={styles.row}>status: {hasError ? 'error' : 'ok'}</div>
+			<div className={styles.row}>start: {toFixed(relativeStartMs, 2)} ms</div>
+			<div className={styles.row}>
+				duration: {toFixed(formattedDuration, 2)} {timeUnitName}
 			</div>
-			{ai?.usage && <SpanUsageBreakdown usage={ai.usage} />}
-			<TooltipSection>
-				{ai?.model && <TooltipRow label="model" value={ai.model} />}
-				{ai?.toolName && <TooltipRow label="tool" value={ai.toolName} />}
-				{ai?.agentName && <TooltipRow label="agent" value={ai.agentName} />}
-				<TooltipRow label="status" value={hasError ? 'error' : 'ok'} />
-				<TooltipRow label="start" value={`${toFixed(relativeStartMs, 2)} ms`} />
-				<TooltipRow
-					label="duration"
-					value={`${toFixed(formattedDuration, 2)} ${timeUnitName}`}
-				/>
-			</TooltipSection>
 			{previewRows && previewRows.length > 0 && (
-				<TooltipSection>
+				<div className={styles.preview}>
 					{previewRows.map((row) => (
-						<TooltipRow
+						<div
 							key={row.key}
-							label={row.key}
-							value={row.value}
-							testId={`span-hover-card-preview-${row.key}`}
-						/>
+							className={styles.row}
+							data-testid={`span-hover-card-preview-${row.key}`}
+						>
+							<span className={styles.previewKey}>{row.key}:</span>{' '}
+							<span className={styles.previewValue}>{row.value}</span>
+						</div>
 					))}
-				</TooltipSection>
+				</div>
 			)}
 		</div>
 	);
@@ -159,7 +137,6 @@ export function SpanHoverCard({
 				relativeStartMs: span.timestamp - traceStartTime,
 				durationMs: span.duration_nano / 1e6,
 				previewRows,
-				ai: getSpanAiDetails(span),
 			},
 		};
 	}, [
@@ -189,7 +166,7 @@ export function SpanHoverCard({
 					side="right"
 					align="start"
 					sideOffset={8}
-					className={cx(tooltipStyles.tooltipContent, styles.popover)}
+					className={styles.popover}
 				>
 					{hoverCardData && <SpanTooltipContent {...hoverCardData.tooltip} />}
 				</TooltipContent>

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanUsageBreakdown.tsx

@@ -1,47 +0,0 @@
-import {
-	formatCost,
-	formatTokens,
-	getUsageTotals,
-	SpanAiUsage,
-} from './aiUsage';
-import TooltipRow from '../TraceTooltip/TooltipRow';
-import TooltipSection from '../TraceTooltip/TooltipSection';
-
-interface SpanUsageBreakdownProps {
-	usage: SpanAiUsage;
-}
-
-function SpanUsageBreakdown({ usage }: SpanUsageBreakdownProps): JSX.Element {
-	const { outputTokens = 0, cacheReadTokens, cacheCreationTokens, cost } = usage;
-	const { inputUsage, totalUsage } = getUsageTotals(usage);
-
-	return (
-		<>
-			<TooltipSection>
-				<TooltipRow label="Input usage" value={formatTokens(inputUsage)} isTotal />
-				{cacheReadTokens !== undefined && (
-					<TooltipRow label="cache read" value={formatTokens(cacheReadTokens)} />
-				)}
-				{cacheCreationTokens !== undefined && (
-					<TooltipRow
-						label="cache creation"
-						value={formatTokens(cacheCreationTokens)}
-					/>
-				)}
-			</TooltipSection>
-			<TooltipSection>
-				<TooltipRow
-					label="Output usage"
-					value={formatTokens(outputTokens)}
-					isTotal
-				/>
-			</TooltipSection>
-			<TooltipSection>
-				<TooltipRow label="Total usage" value={formatTokens(totalUsage)} isTotal />
-				{cost !== undefined && <TooltipRow label="cost" value={formatCost(cost)} />}
-			</TooltipSection>
-		</>
-	);
-}
-
-export default SpanUsageBreakdown;

frontend/src/pages/TraceDetailsV3/SpanHoverCard/__tests__/SpanTooltipContent.test.tsx

@@ -1,144 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-import { getSpanAiDetails, getUsageTotals } from '../aiUsage';
-import { SpanTooltipContent } from '../SpanHoverCard';
-
-const baseProps = {
-	spanName: 'chat gpt-4o',
-	color: '#fff',
-	hasError: false,
-	relativeStartMs: 268,
-	durationMs: 1110,
-};
-
-const spanWith = (attributes: Record<string, string | number>): SpanV3 =>
-	({ attributes, resource: {} }) as unknown as SpanV3;
-
-const usageAttributes = {
-	'gen_ai.usage.input_tokens': 1000,
-	'gen_ai.usage.output_tokens': 200,
-	'gen_ai.usage.cache_read.input_tokens': 600,
-	'gen_ai.usage.cache_creation.input_tokens': 100,
-};
-
-describe('getSpanAiDetails', () => {
-	it('returns undefined for a span without gen_ai attributes', () => {
-		expect(getSpanAiDetails(spanWith({ 'http.method': 'GET' }))).toBeUndefined();
-	});
-
-	it('reads model, tool, agent, token usage and cost', () => {
-		expect(
-			getSpanAiDetails(
-				spanWith({
-					'gen_ai.request.model': 'gpt-4o',
-					'gen_ai.tool.name': 'search',
-					'gen_ai.agent.name': 'planner',
-					'gen_ai.usage.input_tokens': '120',
-					'gen_ai.usage.output_tokens': 30,
-					'signoz.gen_ai.usage.tokens.cost': '0.00000056',
-				}),
-			),
-		).toStrictEqual({
-			model: 'gpt-4o',
-			toolName: 'search',
-			agentName: 'planner',
-			usage: {
-				inputTokens: 120,
-				outputTokens: 30,
-				cacheReadTokens: undefined,
-				cacheCreationTokens: undefined,
-				cost: 0.00000056,
-				isAnthropic: false,
-			},
-		});
-	});
-
-	it.each<Record<string, string>>([
-		{ 'gen_ai.provider.name': 'Anthropic' },
-		{ 'gen_ai.system': 'anthropic' },
-		{ 'gen_ai.response.model': 'claude-sonnet-4' },
-		{ 'gen_ai.request.model': 'anthropic.claude-v2' },
-	])('detects Anthropic from %p', (attributes) => {
-		expect(
-			getSpanAiDetails(spanWith({ ...usageAttributes, ...attributes }))?.usage
-				?.isAnthropic,
-		).toBe(true);
-	});
-});
-
-describe('getUsageTotals', () => {
-	it('adds cache tokens to input for Anthropic', () => {
-		const usage = getSpanAiDetails(
-			spanWith({ ...usageAttributes, 'gen_ai.provider.name': 'anthropic' }),
-		)?.usage;
-
-		expect(usage && getUsageTotals(usage)).toStrictEqual({
-			inputUsage: 1700,
-			totalUsage: 1900,
-		});
-	});
-
-	it('treats input as already including cache tokens for other providers', () => {
-		const usage = getSpanAiDetails(
-			spanWith({ ...usageAttributes, 'gen_ai.provider.name': 'openai' }),
-		)?.usage;
-
-		expect(usage && getUsageTotals(usage)).toStrictEqual({
-			inputUsage: 1000,
-			totalUsage: 1200,
-		});
-	});
-});
-
-describe('SpanTooltipContent', () => {
-	it('renders status, start and duration for a non-AI span', () => {
-		render(<SpanTooltipContent {...baseProps} />);
-
-		expect(screen.getByText('chat gpt-4o')).toBeInTheDocument();
-		expect(screen.getByText('ok')).toBeInTheDocument();
-		expect(screen.getByText('268 ms')).toBeInTheDocument();
-		expect(screen.getByText('1.11 s')).toBeInTheDocument();
-		expect(screen.queryByText('Usage Breakdown')).not.toBeInTheDocument();
-	});
-
-	it('renders the usage breakdown with cache rows and cost', () => {
-		render(
-			<SpanTooltipContent
-				{...baseProps}
-				ai={{
-					model: 'gpt-4o',
-					usage: {
-						inputTokens: 1000,
-						outputTokens: 200,
-						cacheReadTokens: 600,
-						cacheCreationTokens: 100,
-						cost: 0.00000056,
-						isAnthropic: false,
-					},
-				}}
-			/>,
-		);
-
-		expect(screen.getByText('Usage Breakdown')).toBeInTheDocument();
-		expect(screen.getByText('1,000')).toBeInTheDocument();
-		expect(screen.getByText('cache read')).toBeInTheDocument();
-		expect(screen.getByText('600')).toBeInTheDocument();
-		expect(screen.getByText('cache creation')).toBeInTheDocument();
-		expect(screen.getByText('1,200')).toBeInTheDocument();
-		expect(screen.getByText('$ 0.00000056')).toBeInTheDocument();
-	});
-
-	it('hides cache rows and cost when the attributes are absent', () => {
-		render(
-			<SpanTooltipContent
-				{...baseProps}
-				ai={{ usage: { inputTokens: 10, outputTokens: 5, isAnthropic: false } }}
-			/>,
-		);
-
-		expect(screen.queryByText('cache read')).not.toBeInTheDocument();
-		expect(screen.queryByText('cache creation')).not.toBeInTheDocument();
-		expect(screen.queryByText('cost')).not.toBeInTheDocument();
-	});
-});

frontend/src/pages/TraceDetailsV3/SpanHoverCard/aiUsage.ts

@@ -1,97 +0,0 @@
-import { getSpanAttribute } from 'pages/TraceDetailsV3/utils';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-import { GEN_AI_KEYS } from '../utils/genAi';
-
-export interface SpanAiUsage {
-	inputTokens?: number;
-	outputTokens?: number;
-	cacheReadTokens?: number;
-	cacheCreationTokens?: number;
-	cost?: number;
-	isAnthropic: boolean;
-}
-
-export interface SpanAiDetails {
-	model?: string;
-	toolName?: string;
-	agentName?: string;
-	usage?: SpanAiUsage;
-}
-
-function getNumber(span: SpanV3, key: string): number | undefined {
-	const value = getSpanAttribute(span, key);
-	if (value === undefined || value === '') {
-		return undefined;
-	}
-	const parsed = Number(value);
-	return Number.isFinite(parsed) ? parsed : undefined;
-}
-
-function isAnthropicSpan(span: SpanV3): boolean {
-	const provider = (
-		getSpanAttribute(span, GEN_AI_KEYS.providerName) ??
-		getSpanAttribute(span, GEN_AI_KEYS.system) ??
-		''
-	).toLowerCase();
-	const model = (
-		getSpanAttribute(span, GEN_AI_KEYS.responseModel) ??
-		getSpanAttribute(span, GEN_AI_KEYS.requestModel) ??
-		''
-	).toLowerCase();
-
-	return (
-		provider === 'anthropic' ||
-		model.includes('claude') ||
-		model.includes('anthropic')
-	);
-}
-
-export function getSpanAiDetails(span: SpanV3): SpanAiDetails | undefined {
-	const usage: SpanAiUsage = {
-		inputTokens: getNumber(span, GEN_AI_KEYS.inputTokens),
-		outputTokens: getNumber(span, GEN_AI_KEYS.outputTokens),
-		cacheReadTokens: getNumber(span, GEN_AI_KEYS.cacheReadTokens),
-		cacheCreationTokens: getNumber(span, GEN_AI_KEYS.cacheCreationTokens),
-		cost: getNumber(span, GEN_AI_KEYS.cost),
-		isAnthropic: isAnthropicSpan(span),
-	};
-	const hasUsage =
-		usage.inputTokens !== undefined || usage.outputTokens !== undefined;
-
-	const details: SpanAiDetails = {
-		model: getSpanAttribute(span, GEN_AI_KEYS.requestModel) || undefined,
-		toolName: getSpanAttribute(span, GEN_AI_KEYS.toolName) || undefined,
-		agentName: getSpanAttribute(span, GEN_AI_KEYS.agentName) || undefined,
-		usage: hasUsage ? usage : undefined,
-	};
-
-	return details.model || details.toolName || details.agentName || hasUsage
-		? details
-		: undefined;
-}
-
-/**
- * Anthropic reports input_tokens without cached tokens; every other provider
- * (OpenAI, Azure OpenAI, Gemini, Mistral, DeepSeek, Groq, xAI) counts cached
- * tokens inside input_tokens.
- */
-export function getUsageTotals(usage: SpanAiUsage): {
-	inputUsage: number;
-	totalUsage: number;
-} {
-	const input = usage.inputTokens ?? 0;
-	const inputUsage = usage.isAnthropic
-		? input + (usage.cacheReadTokens ?? 0) + (usage.cacheCreationTokens ?? 0)
-		: input;
-
-	return { inputUsage, totalUsage: inputUsage + (usage.outputTokens ?? 0) };
-}
-
-export function formatTokens(value: number): string {
-	return value.toLocaleString('en-US');
-}
-
-export function formatCost(value: number): string {
-	return `$ ${value.toLocaleString('en-US', { maximumFractionDigits: 10 })}`;
-}

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

@@ -34,15 +34,6 @@
 	}
 }
 
-.tabs {
-	flex-shrink: 0;
-}
-
-.tab {
-	flex: unset;
-	padding: 0 24px;
-}
-
 .filterSection {
 	display: flex;
 	align-items: center;

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -18,26 +18,40 @@ import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { TraceDetailV3URLProps } from 'types/api/trace/getTraceV3';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { TraceDetailsTab } from '../constants';
 import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
 import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
-import { useTraceDetailsTab } from '../hooks/useTraceDetailsTab';
 import { useTraceStore } from '../stores/traceStore';
 import TraceDownloadPanel from './TraceDownloadPanel';
 import EntityMetadataRow from '../EntityMetadata/EntityMetadataRow';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
-import { useTraceDetailsStripInfo } from '../useTraceDetailsStripInfo';
 import MissingSpansBanner from './MissingSpansBanner';
-import { useTraceSummary } from './useTraceSummary';
-import TraceDetailsTabs from './TraceDetailsTabs';
 import TraceOptionsMenu from './TraceOptionsMenu';
 
 import styles from './TraceDetailsHeader.module.scss';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 
+interface FilterMetadata {
+	startTime: number;
+	endTime: number;
+	traceId: string;
+}
+
+export interface TraceMetadataForHeader {
+	startTimestampMillis: number;
+	endTimestampMillis: number;
+	rootServiceName: string;
+	rootServiceEntryPoint: string;
+	rootSpanStatusCode: string;
+	hasMissingSpans: boolean;
+	totalSpansCount: number;
+}
+
 interface TraceDetailsHeaderProps {
-	onFilteredSpansChange?: (spanIds: string[], isFilterActive: boolean) => void;
+	filterMetadata: FilterMetadata;
+	onFilteredSpansChange: (spanIds: string[], isFilterActive: boolean) => void;
+	isDataLoaded?: boolean;
+	traceMetadata?: TraceMetadataForHeader;
 }
 
 const SKELETON_COUNT = 3;
@@ -59,22 +73,16 @@ function DetailsLoader(): JSX.Element {
 }
 
 function TraceDetailsHeader({
+	filterMetadata,
 	onFilteredSpansChange,
+	isDataLoaded,
+	traceMetadata,
 }: TraceDetailsHeaderProps): JSX.Element {
 	const { id: traceID } = useParams<TraceDetailV3URLProps>();
-	const { data: summary, isLoading } = useTraceSummary();
 	const [showTraceDetails, setShowTraceDetails] = useState(true);
 	const [isFilterExpanded, setIsFilterExpanded] = useState(false);
 	const [isPreviewFieldsOpen, setIsPreviewFieldsOpen] = useState(false);
 	const [isAnalyticsOpen, setIsAnalyticsOpen] = useState(false);
-	const [tab] = useTraceDetailsTab();
-	const isOverview = tab === TraceDetailsTab.Overview;
-
-	// Overview-only panels must not linger over another tab.
-	useEffect(() => {
-		setIsPreviewFieldsOpen(false);
-		setIsAnalyticsOpen(false);
-	}, [tab]);
 	const previewFields = useTraceStore((s) => s.previewFields);
 	const setPreviewFields = useTraceStore((s) => s.setPreviewFields);
 
@@ -108,13 +116,9 @@ function TraceDetailsHeader({
 		setShowTraceDetails((prev) => !prev);
 	}, []);
 
-	useTraceDetailsStripInfo({
-		totalSpansCount: summary?.totalSpansCount ?? 0,
-		totalErrorSpansCount: summary?.totalErrorSpansCount ?? 0,
-	});
-
-	const startTime = (summary?.startTimestampMillis ?? 0) / 1e3;
-	const endTime = (summary?.endTimestampMillis ?? 0) / 1e3;
+	const durationMs = traceMetadata
+		? traceMetadata.endTimestampMillis - traceMetadata.startTimestampMillis
+		: 0;
 
 	return (
 		<div className={styles.wrapper}>
@@ -136,10 +140,9 @@ function TraceDetailsHeader({
 							badgeValue={traceID || ''}
 							maxCharacters={100}
 						/>
-						<TraceDetailsTabs />
 					</div>
 				)}
-				{isOverview && onFilteredSpansChange && summary && (
+				{isDataLoaded && (
 					<div
 						className={cx(
 							styles.filterSection,
@@ -168,9 +171,9 @@ function TraceDetailsHeader({
 										onToggleTraceDetails={handleToggleTraceDetails}
 										onOpenPreviewFields={(): void => setIsPreviewFieldsOpen(true)}
 										traceId={traceID || ''}
-										startTime={startTime}
-										endTime={endTime}
-										totalSpansCount={summary.totalSpansCount}
+										startTime={filterMetadata.startTime}
+										endTime={filterMetadata.endTime}
+										totalSpansCount={traceMetadata?.totalSpansCount || 0}
 									/>
 								</div>
 							</TooltipProvider>
@@ -180,9 +183,9 @@ function TraceDetailsHeader({
 							className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}
 						>
 							<Filters
-								startTime={startTime}
-								endTime={endTime}
-								traceID={traceID || ''}
+								startTime={filterMetadata.startTime}
+								endTime={filterMetadata.endTime}
+								traceID={filterMetadata.traceId}
 								onFilteredSpansChange={onFilteredSpansChange}
 								isExpanded={isFilterExpanded}
 								onExpand={(): void => setIsFilterExpanded(true)}
@@ -193,29 +196,28 @@ function TraceDetailsHeader({
 				)}
 			</div>
 
-			{(showTraceDetails || !isOverview) && (
+			{showTraceDetails && (
 				<div className={styles.subHeader}>
-					{isLoading || !summary ? (
-						<DetailsLoader />
-					) : (
+					{traceMetadata ? (
 						<EntityMetadataRow
 							entity="trace"
 							service={{
-								name: summary.rootServiceName,
-								entryPoint: summary.rootServiceEntryPoint,
+								name: traceMetadata.rootServiceName,
+								entryPoint: traceMetadata.rootServiceEntryPoint,
 							}}
-							durationMs={summary.endTimestampMillis - summary.startTimestampMillis}
-							timestamp={dayjs(summary.startTimestampMillis).format(
+							durationMs={durationMs}
+							timestamp={dayjs(traceMetadata.startTimestampMillis).format(
 								DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS,
 							)}
-							tokens={summary.ai?.tokens}
-							cost={summary.ai?.totalCost}
+							statusCode={traceMetadata.rootSpanStatusCode}
 						/>
+					) : (
+						<DetailsLoader />
 					)}
 				</div>
 			)}
 
-			{isOverview && summary?.hasMissingSpans && <MissingSpansBanner />}
+			{traceMetadata?.hasMissingSpans && <MissingSpansBanner />}
 
 			<FieldsSelector
 				isOpen={isPreviewFieldsOpen}

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

@@ -1,44 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
-
-import { TraceDetailsTab } from '../constants';
-import { useTraceDetailsTab } from '../hooks/useTraceDetailsTab';
-
-import styles from './TraceDetailsHeader.module.scss';
-
-function TraceDetailsTabs(): JSX.Element {
-	const [tab, setTab] = useTraceDetailsTab();
-
-	const handleChange = (value: string): void => {
-		// Clicking the active item deselects it and reports ''.
-		if (value) {
-			void setTab(value as TraceDetailsTab);
-		}
-	};
-
-	return (
-		<ToggleGroup
-			type="single"
-			value={tab}
-			onChange={handleChange}
-			className={styles.tabs}
-			size="sm"
-		>
-			<ToggleGroupItem
-				value={TraceDetailsTab.Overview}
-				className={styles.tab}
-				data-testid="trace-details-tab-overview"
-			>
-				Overview
-			</ToggleGroupItem>
-			<ToggleGroupItem
-				value={TraceDetailsTab.Thread}
-				className={styles.tab}
-				data-testid="trace-details-tab-thread"
-			>
-				Thread
-			</ToggleGroupItem>
-		</ToggleGroup>
-	);
-}
-
-export default TraceDetailsTabs;

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

@@ -1,12 +1,9 @@
 import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import ROUTES from 'constants/routes';
 import { render } from 'tests/test-utils';
 
-import { MOCK_TRACE_SUMMARY } from '../mockTraceSummary';
-import * as traceSummaryModule from '../useTraceSummary';
 import TraceDetailsHeader from '../TraceDetailsHeader';
 
 const mockGoBack = jest.fn();
@@ -53,9 +50,15 @@ jest.mock('components/FieldsSelector', () => ({
 	),
 }));
 
-const baseProps = { onFilteredSpansChange: jest.fn() };
-
-const metadataText = /Missing Span/;
+const baseProps = {
+	filterMetadata: {
+		startTime: 0,
+		endTime: 1,
+		traceId: 'trace-123',
+	},
+	onFilteredSpansChange: jest.fn(),
+	isDataLoaded: false,
+};
 
 describe('TraceDetailsHeader – back button', () => {
 	beforeEach(() => {
@@ -91,8 +94,8 @@ describe('TraceDetailsHeader – action cluster', () => {
 		mockReplace.mockClear();
 	});
 
-	it('does not render the action buttons without a filter handler', () => {
-		render(<TraceDetailsHeader />);
+	it('does not render the action buttons while data is still loading', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded={false} />);
 
 		expect(
 			screen.queryByRole('button', { name: /^analytics$/i }),
@@ -102,8 +105,8 @@ describe('TraceDetailsHeader – action cluster', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('renders Analytics and Settings action buttons', () => {
-		render(<TraceDetailsHeader {...baseProps} />);
+	it('renders Analytics and Settings action buttons once data is loaded', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
 
 		expect(
 			screen.getByRole('button', { name: /^analytics$/i }),
@@ -114,7 +117,7 @@ describe('TraceDetailsHeader – action cluster', () => {
 	});
 
 	it('toggles the AnalyticsPanel open state when the Analytics button is clicked', () => {
-		render(<TraceDetailsHeader {...baseProps} />);
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
 
 		const panel = screen.getByTestId('analytics-panel');
 		expect(panel).toHaveAttribute('data-open', 'false');
@@ -130,125 +133,68 @@ describe('TraceDetailsHeader – action cluster', () => {
 });
 
 describe('TraceDetailsHeader – trace metadata row', () => {
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
+	// Plain prop, no API mock needed: traceMetadata is passed straight in.
+	const traceMetadata = {
+		startTimestampMillis: 1_700_000_000_000,
+		endTimestampMillis: 1_700_000_120_000, // +120000ms = 2 min
+		rootServiceName: 'inventory-frontend',
+		rootServiceEntryPoint: 'large-trace-root',
+		rootSpanStatusCode: '404',
+		hasMissingSpans: false,
+		totalSpansCount: 42,
+	};
 
-	it('shows skeletons instead of the metadata while the summary loads', () => {
-		jest
-			.spyOn(traceSummaryModule, 'useTraceSummary')
-			.mockReturnValue({ data: undefined, isLoading: true });
-		const { container } = render(<TraceDetailsHeader {...baseProps} />);
-
-		expect(screen.queryByText(metadataText)).not.toBeInTheDocument();
-		expect(container.querySelectorAll('.ant-skeleton-input')).toHaveLength(3);
-	});
-
-	it('renders the summary metadata with tokens and cost', () => {
-		render(<TraceDetailsHeader {...baseProps} />);
-
-		const { startTimestampMillis, endTimestampMillis } = MOCK_TRACE_SUMMARY;
-		const duration = getYAxisFormattedValue(
-			`${endTimestampMillis - startTimestampMillis}`,
-			'ms',
+	it('renders the metadata (service, entry point, duration, status) when provided', () => {
+		render(
+			<TraceDetailsHeader
+				{...baseProps}
+				isDataLoaded
+				traceMetadata={traceMetadata}
+			/>,
 		);
 
-		expect(screen.getByText(metadataText)).toBeInTheDocument();
+		expect(screen.getByText(/inventory-frontend/)).toBeInTheDocument();
+		expect(screen.getByText('large-trace-root')).toBeInTheDocument();
+		expect(screen.getByText('404')).toBeInTheDocument();
+		// Duration goes through the shared formatter (e.g. "2 min").
+		const duration = getYAxisFormattedValue(
+			`${traceMetadata.endTimestampMillis - traceMetadata.startTimestampMillis}`,
+			'ms',
+		);
 		expect(screen.getByText(duration)).toBeInTheDocument();
-		expect(screen.getByText('Tokens: 12,040 → 3,110')).toBeInTheDocument();
-		expect(screen.getByText('$ 0.0421')).toBeInTheDocument();
 	});
 
 	it('is shown by default and can be hidden / shown again via the Trace options menu', async () => {
 		const user = userEvent.setup({ delay: null });
-		render(<TraceDetailsHeader {...baseProps} />);
+		render(
+			<TraceDetailsHeader
+				{...baseProps}
+				isDataLoaded
+				traceMetadata={traceMetadata}
+			/>,
+		);
 
-		expect(screen.getByText(metadataText)).toBeInTheDocument();
+		// Visible by default (showTraceDetails defaults to true).
+		expect(screen.getByText(/inventory-frontend/)).toBeInTheDocument();
 
+		// Hide it.
 		await user.click(screen.getByRole('button', { name: /trace options/i }));
 		await user.click(
 			await screen.findByRole('menuitem', { name: /hide trace details/i }),
 		);
-		expect(screen.queryByText(metadataText)).not.toBeInTheDocument();
+		expect(screen.queryByText(/inventory-frontend/)).not.toBeInTheDocument();
 
+		// Show it again.
 		await user.click(screen.getByRole('button', { name: /trace options/i }));
 		await user.click(
 			await screen.findByRole('menuitem', { name: /show trace details/i }),
 		);
-		expect(screen.getByText(metadataText)).toBeInTheDocument();
-	});
-});
-
-describe('TraceDetailsHeader – tabs', () => {
-	// In-memory URL state, so a tab switch can't leak into the next test.
-	const renderHeader = (): void => {
-		render(
-			<NuqsTestingAdapter hasMemory>
-				<TraceDetailsHeader {...baseProps} />
-			</NuqsTestingAdapter>,
-		);
-	};
-
-	it('shows the Overview-only sections on the Overview tab', () => {
-		renderHeader();
-
-		expect(screen.getByTestId('filters-stub')).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /^analytics$/i }),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /trace options/i }),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('missing-spans-banner')).toBeInTheDocument();
-	});
-
-	it('keeps only the metadata row on the Thread tab', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderHeader();
-
-		await user.click(screen.getByTestId('trace-details-tab-thread'));
-
-		expect(screen.queryByTestId('filters-stub')).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /^analytics$/i }),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /trace options/i }),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('missing-spans-banner')).not.toBeInTheDocument();
-		expect(screen.getByText(metadataText)).toBeInTheDocument();
-	});
-
-	it('shows the metadata row on the Thread tab even when hidden on Overview', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderHeader();
-
-		await user.click(screen.getByRole('button', { name: /trace options/i }));
-		await user.click(
-			await screen.findByRole('menuitem', { name: /hide trace details/i }),
-		);
-		expect(screen.queryByText(metadataText)).not.toBeInTheDocument();
-
-		await user.click(screen.getByTestId('trace-details-tab-thread'));
-
-		expect(screen.getByText(metadataText)).toBeInTheDocument();
-	});
-
-	it('closes the Analytics panel when switching to the Thread tab', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderHeader();
-
-		await user.click(screen.getByRole('button', { name: /^analytics$/i }));
-		expect(screen.getByTestId('analytics-panel')).toHaveAttribute(
-			'data-open',
-			'true',
-		);
-
-		await user.click(screen.getByTestId('trace-details-tab-thread'));
-
-		expect(screen.getByTestId('analytics-panel')).toHaveAttribute(
-			'data-open',
-			'false',
-		);
+		expect(screen.getByText(/inventory-frontend/)).toBeInTheDocument();
+	});
+
+	it('does not render the metadata row when traceMetadata is absent', () => {
+		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
+
+		expect(screen.queryByText(/inventory-frontend/)).not.toBeInTheDocument();
 	});
 });

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/mockTraceSummary.ts

@@ -1,22 +0,0 @@
-import { TraceSummary } from './types';
-
-// Placeholder until GET /api/v1/traces/{id}/summary feeds the header.
-export const MOCK_TRACE_SUMMARY: TraceSummary = {
-	startTimestampMillis: 1789627365929,
-	endTimestampMillis: 1789627367867,
-	rootServiceName: '',
-	rootServiceEntryPoint: 'Missing Span',
-	totalSpansCount: 3,
-	totalErrorSpansCount: 0,
-	hasMissingSpans: true,
-	ai: {
-		tokens: {
-			input: 12040,
-			output: 3110,
-			cacheRead: 8000,
-			cacheWrite: 1200,
-			reasoning: 900,
-		},
-		totalCost: 0.0421,
-	},
-};

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/types.ts

@@ -1,23 +0,0 @@
-export interface TraceTokenUsage {
-	input: number;
-	output: number;
-	cacheRead?: number;
-	cacheWrite?: number;
-	reasoning?: number;
-}
-
-/** Response of GET /api/v1/traces/{id}/summary. */
-export interface TraceSummary {
-	startTimestampMillis: number;
-	endTimestampMillis: number;
-	rootServiceName: string;
-	rootServiceEntryPoint: string;
-	totalSpansCount: number;
-	totalErrorSpansCount: number;
-	hasMissingSpans: boolean;
-	ai?: {
-		tokens?: TraceTokenUsage;
-		// null when no span has a cost attribute
-		totalCost: number | null;
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/useTraceSummary.ts

@@ -1,12 +0,0 @@
-import { MOCK_TRACE_SUMMARY } from './mockTraceSummary';
-import { TraceSummary } from './types';
-
-interface UseTraceSummaryResult {
-	data: TraceSummary | undefined;
-	isLoading: boolean;
-}
-
-// Placeholder until GET /api/v1/traces/{id}/summary is available.
-export function useTraceSummary(): UseTraceSummaryResult {
-	return { data: MOCK_TRACE_SUMMARY, isLoading: false };
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsOverview/TraceDetailsOverview.tsx

@@ -1,500 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import {
-	ChartNoAxesGantt,
-	ChevronDown,
-	ChevronRight,
-	Info,
-	TriangleAlert,
-} from '@signozhq/icons';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { Collapse } from 'antd';
-import { useDetailsPanel } from 'components/DetailsPanel';
-import WarningPopover from 'components/WarningPopover/WarningPopover';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import useGetTraceV4 from 'hooks/trace/useGetTraceV4';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { ResizableBox } from 'periscope/components/ResizableBox';
-import { SpanV3, TraceDetailV3URLProps } from 'types/api/trace/getTraceV3';
-
-import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
-import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
-import NoData from '../NoData/NoData';
-import {
-	setTraceStoreAvailableColorByFields,
-	useTraceStore,
-} from '../stores/traceStore';
-import { SpanDetailVariant } from '../SpanDetailsPanel/constants';
-import SpanDetailsPanel from '../SpanDetailsPanel/SpanDetailsPanel';
-import { FLAMEGRAPH_SPAN_LIMIT } from '../TraceFlamegraph/constants';
-import TraceFlamegraph from '../TraceFlamegraph/TraceFlamegraph';
-import TraceWaterfall from '../TraceWaterfall/TraceWaterfall';
-import { IInterestedSpan } from '../TraceWaterfall/types';
-import { getAncestorSpanIds } from '../TraceWaterfall/utils';
-import { getAvailableColorByFieldNames } from '../utils';
-
-import cx from 'classnames';
-
-import styles from './TraceDetailsOverview.module.scss';
-
-// Lucide chevrons for the flame/waterfall accordion headers, matching the
-// span-tree chevrons in the waterfall.
-function renderPanelExpandIcon({
-	isActive,
-}: {
-	isActive?: boolean;
-}): JSX.Element {
-	return isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />;
-}
-
-interface TraceDetailsOverviewProps {
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}
-
-function TraceDetailsOverview({
-	filteredSpanIds,
-	isFilterActive,
-}: TraceDetailsOverviewProps): JSX.Element {
-	const { id: traceId } = useParams<TraceDetailV3URLProps>();
-	const urlQuery = useUrlQuery();
-	const [interestedSpanId, setInterestedSpanId] = useState<IInterestedSpan>(
-		() => ({
-			spanId: urlQuery.get('spanId') || '',
-			isUncollapsed: urlQuery.get('spanId') !== '',
-		}),
-	);
-	const [uncollapsedNodes, setUncollapsedNodes] = useState<string[]>([]);
-	const [localUncollapsedNodes, setLocalUncollapsedNodes] = useState<
-		Set<string>
-	>(new Set());
-	const [selectedSpan, setSelectedSpan] = useState<SpanV3>();
-
-	const selectedSpanId = urlQuery.get('spanId') || undefined;
-	const { safeNavigate } = useSafeNavigate();
-
-	const logTraceEvent = useTraceDetailLogEvent('v3', traceId || '');
-	// Tracks which traceId the load event already fired for, so navigating
-	// between traces (the route component stays mounted) re-fires it once each.
-	const dataLoadedFiredForRef = useRef('');
-	const colorByField = useTraceStore((s) => s.colorByField);
-	const previewFieldsCount = useTraceStore((s) => s.previewFields.length);
-	const userPrefsReady = useTraceStore((s) => s.userPreferences !== null);
-
-	const handleSpanDetailsClose = useCallback((): void => {
-		urlQuery.delete('spanId');
-		safeNavigate({ search: urlQuery.toString() }, { replace: true });
-	}, [urlQuery, safeNavigate]);
-
-	const panelState = useDetailsPanel({
-		entityId: selectedSpanId,
-		onClose: handleSpanDetailsClose,
-	});
-
-	const allSpansRef = useRef<SpanV3[]>([]);
-	const deepLinkResolvedRef = useRef(false);
-
-	// Refetch only when the URL target isn't already loaded. Keeps row clicks
-	// and other in-window URL navigation from triggering a backend window slide.
-	useEffect(() => {
-		const spanId = urlQuery.get('spanId') || '';
-		if (!spanId) {
-			return;
-		}
-		const idx = allSpansRef.current.findIndex((s) => s.span_id === spanId);
-		if (idx !== -1) {
-			setSelectedSpan(allSpansRef.current[idx]);
-			return;
-		}
-		setInterestedSpanId({ spanId, isUncollapsed: true });
-	}, [urlQuery]);
-
-	// Once all spans are loaded (frontend mode), freeze query params so
-	// subsequent interestedSpanId changes don't trigger unnecessary refetches.
-	const fullDataLoadedRef = useRef(false);
-	const frozenParamsRef = useRef({
-		selectedSpanId: interestedSpanId.spanId,
-		isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
-		uncollapsedSpans: uncollapsedNodes,
-	});
-
-	const queryParams = fullDataLoadedRef.current
-		? frozenParamsRef.current
-		: {
-				selectedSpanId: interestedSpanId.spanId,
-				isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
-				uncollapsedSpans: uncollapsedNodes,
-			};
-
-	const {
-		data: traceData,
-		isFetching: isFetchingTraceData,
-		error: errorFetchingTraceData,
-	} = useGetTraceV4({
-		traceId,
-		uncollapsedSpans: queryParams.uncollapsedSpans,
-		selectedSpanId: queryParams.selectedSpanId,
-		isSelectedSpanIDUnCollapsed: queryParams.isSelectedSpanIDUnCollapsed,
-	});
-
-	const allSpans = traceData?.payload?.spans || [];
-	const totalSpansCount = traceData?.payload?.totalSpansCount || 0;
-
-	const isFullDataLoaded =
-		totalSpansCount > 0 && totalSpansCount <= allSpans.length;
-
-	// Color-by options, gated on fields in loaded spans. Resource attrs are
-	// trace-wide, so any window has the full set — no need to accumulate.
-	const availableColorByFields = useMemo(() => {
-		const spans = traceData?.payload?.spans;
-		return spans?.length ? getAvailableColorByFieldNames(spans) : undefined;
-	}, [traceData?.payload?.spans]);
-
-	useEffect(() => {
-		setTraceStoreAvailableColorByFields(availableColorByFields);
-	}, [availableColorByFields]);
-
-	// Lock the ref once we confirm all data is loaded
-	if (isFullDataLoaded && !fullDataLoadedRef.current) {
-		fullDataLoadedRef.current = true;
-		frozenParamsRef.current = {
-			selectedSpanId: interestedSpanId.spanId,
-			isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
-			uncollapsedSpans: uncollapsedNodes,
-		};
-	}
-
-	useEffect(() => {
-		allSpansRef.current = allSpans;
-	}, [allSpans]);
-
-	useEffect(() => {
-		if (
-			!traceId ||
-			dataLoadedFiredForRef.current === traceId ||
-			!userPrefsReady
-		) {
-			return;
-		}
-		const payload = traceData?.payload;
-		if (!payload?.spans?.length) {
-			return;
-		}
-		dataLoadedFiredForRef.current = traceId;
-		const numServices = new Set(payload.spans.map((s) => s['service.name'])).size;
-		logTraceEvent(TraceDetailEvents.DataLoaded, {
-			[TraceDetailEventKeys.TotalSpansCount]: totalSpansCount,
-			[TraceDetailEventKeys.NumServices]: numServices,
-			[TraceDetailEventKeys.TraceDurationMs]:
-				payload.endTimestampMillis - payload.startTimestampMillis,
-			[TraceDetailEventKeys.HadErrors]: (payload.totalErrorSpansCount || 0) > 0,
-			[TraceDetailEventKeys.FlamegraphSampled]:
-				totalSpansCount > FLAMEGRAPH_SPAN_LIMIT,
-			[TraceDetailEventKeys.SpanPanelVariant]:
-				getLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION) ||
-				SpanDetailVariant.DOCKED_RIGHT,
-			[TraceDetailEventKeys.ColorByField]: colorByField.name,
-			[TraceDetailEventKeys.PreviewFieldsCount]: previewFieldsCount,
-		});
-	}, [
-		traceId,
-		userPrefsReady,
-		traceData,
-		totalSpansCount,
-		colorByField,
-		previewFieldsCount,
-		logTraceEvent,
-	]);
-
-	// Frontend mode: expand all parents by default when full data arrives
-	useEffect(() => {
-		if (isFullDataLoaded && allSpans.length > 0) {
-			const parentIds = new Set(
-				allSpans.filter((s) => s.has_children).map((s) => s.span_id),
-			);
-			setLocalUncollapsedNodes(parentIds);
-		}
-	}, [isFullDataLoaded, allSpans]);
-
-	// Backend mode: sync uncollapsed state from API response
-	useEffect(() => {
-		if (
-			!isFullDataLoaded &&
-			traceData &&
-			traceData.payload &&
-			traceData.payload.uncollapsedSpans
-		) {
-			setUncollapsedNodes(traceData.payload.uncollapsedSpans);
-		}
-	}, [traceData, isFullDataLoaded]);
-
-	// Tracks whether we've already done the initial URL→selectedSpan handoff
-	//Lets `interestedSpanId` stay purely as the refetch trigger in frontend mode.
-	useEffect(() => {
-		if (deepLinkResolvedRef.current) {
-			return;
-		}
-		if (allSpans.length === 0) {
-			return;
-		}
-		if (selectedSpanId) {
-			const span = allSpans.find((s) => s.span_id === selectedSpanId);
-			if (!span) {
-				// Span not in the current window — wait for more data (backend
-				// pagination) before marking resolved.
-				return;
-			}
-			setSelectedSpan(span);
-		} else {
-			setSelectedSpan((prev) => prev ?? allSpans[0]);
-		}
-		deepLinkResolvedRef.current = true;
-	}, [selectedSpanId, allSpans]);
-
-	// Frontend mode: auto-expand ancestors of the URL-targeted span so it's
-	// visible. Keyed on URL `spanId`(selectedSpanId).
-	useEffect(() => {
-		if (!isFullDataLoaded || !selectedSpanId || allSpans.length === 0) {
-			return;
-		}
-		const ancestors = getAncestorSpanIds(allSpans, selectedSpanId);
-		if (ancestors.size === 0) {
-			return;
-		}
-		setLocalUncollapsedNodes((prev) => {
-			// Check if all ancestors are already expanded — avoid unnecessary state update
-			let allPresent = true;
-			for (const id of ancestors) {
-				if (!prev.has(id)) {
-					allPresent = false;
-					break;
-				}
-			}
-			if (allPresent) {
-				return prev;
-			}
-
-			const next = new Set(prev);
-			for (const id of ancestors) {
-				next.add(id);
-			}
-			return next;
-		});
-	}, [isFullDataLoaded, selectedSpanId, allSpans]);
-
-	const [activeKeys, setActiveKeys] = useState<string[]>(['flame', 'waterfall']);
-
-	const handleCollapseChange = (key: string): void => {
-		logTraceEvent(
-			key === 'flame'
-				? TraceDetailEvents.FlameGraphToggled
-				: TraceDetailEvents.WaterfallToggled,
-			{ [TraceDetailEventKeys.Expanded]: !activeKeys.includes(key) },
-		);
-		setActiveKeys((prev) =>
-			prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key],
-		);
-	};
-
-	const [spanDetailVariant, setSpanDetailVariant] = useState<SpanDetailVariant>(
-		() =>
-			(getLocalStorageKey(
-				LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION,
-			) as SpanDetailVariant) || SpanDetailVariant.DOCKED_RIGHT,
-	);
-
-	const RIGHT_DOCK_MIN = 480;
-	const RIGHT_DOCK_MAX = 720;
-	const [rightDockWidth, setRightDockWidth] = useState(RIGHT_DOCK_MIN);
-
-	const handleVariantChange = useCallback(
-		(newVariant: SpanDetailVariant): void => {
-			setLocalStorageKey(
-				LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION,
-				newVariant,
-			);
-			setSpanDetailVariant(newVariant);
-		},
-		[],
-	);
-
-	const showNoData =
-		!isFetchingTraceData &&
-		(!!errorFetchingTraceData || !traceData?.payload?.spans?.length);
-
-	const isDocked = spanDetailVariant === SpanDetailVariant.DOCKED;
-	const isRightDocked = spanDetailVariant === SpanDetailVariant.DOCKED_RIGHT;
-	const isWaterfallDocked = panelState.isOpen && isDocked;
-	const showRightDock = panelState.isOpen && isRightDocked;
-
-	const waterfallChildren = (
-		<ResizableBox
-			defaultHeight={300}
-			minHeight={150}
-			disabled={!isWaterfallDocked}
-		>
-			<TraceWaterfall
-				traceData={traceData}
-				isFetchingTraceData={isFetchingTraceData}
-				errorFetchingTraceData={errorFetchingTraceData}
-				traceId={traceId || ''}
-				interestedSpanId={interestedSpanId}
-				setInterestedSpanId={setInterestedSpanId}
-				uncollapsedNodes={uncollapsedNodes}
-				isFullDataLoaded={isFullDataLoaded}
-				localUncollapsedNodes={localUncollapsedNodes}
-				setLocalUncollapsedNodes={setLocalUncollapsedNodes}
-				selectedSpan={selectedSpan}
-				setSelectedSpan={setSelectedSpan}
-				filteredSpanIds={filteredSpanIds}
-				isFilterActive={isFilterActive}
-			/>
-		</ResizableBox>
-	);
-
-	return (
-		<>
-			{showNoData ? (
-				<NoData />
-			) : (
-				<>
-					<div className={styles.layoutRow}>
-						<div className={styles.content}>
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'flame')}
-								onChange={(): void => handleCollapseChange('flame')}
-								size="small"
-								expandIcon={renderPanelExpandIcon}
-								className={styles.flameCollapse}
-								items={[
-									{
-										key: 'flame',
-										label: (
-											<div className={styles.collapseLabel}>
-												<span className={styles.collapseTitle}>
-													Flame Graph
-													{traceData?.payload?.totalSpansCount &&
-														traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
-															<WarningPopover
-																message="The total span count exceeds the visualization limit. Displaying a sampled subset of spans in flamegraph."
-																placement="bottomLeft"
-															>
-																<Info
-																	size={16}
-																	color="var(--l2-foreground)"
-																	style={{ cursor: 'pointer' }}
-																/>
-															</WarningPopover>
-														)}
-												</span>
-												{traceData?.payload?.totalSpansCount ? (
-													<span className={styles.collapseCount}>
-														<span className={styles.collapseCountItem}>
-															<ChartNoAxesGantt size={13} />
-															Spans: {traceData.payload.totalSpansCount}
-														</span>
-														<span
-															className={cx(styles.collapseCountItem, {
-																[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
-															})}
-														>
-															<TriangleAlert size={13} />
-															Errors:{' '}
-															{traceData.payload.totalErrorSpansCount ?? (
-																<span className="translate-safe">{0}</span>
-															)}
-														</span>
-													</span>
-												) : null}
-											</div>
-										),
-										children: (
-											<ResizableBox defaultHeight={300} minHeight={100} maxHeight={400}>
-												<TraceFlamegraph
-													filteredSpanIds={filteredSpanIds}
-													isFilterActive={isFilterActive}
-													selectedSpan={selectedSpan}
-													totalSpansCount={totalSpansCount}
-												/>
-											</ResizableBox>
-										),
-									},
-								]}
-							/>
-
-							<Collapse
-								// @ts-expect-error motion is passed through to rc-collapse to disable animation
-								motion={false}
-								activeKey={activeKeys.filter((k) => k === 'waterfall')}
-								onChange={(): void => handleCollapseChange('waterfall')}
-								size="small"
-								expandIcon={renderPanelExpandIcon}
-								className={cx(styles.waterfallCollapse, {
-									[styles.isDocked]: isWaterfallDocked,
-								})}
-								items={[
-									{
-										key: 'waterfall',
-										label: 'Waterfall',
-										children: activeKeys.includes('waterfall') ? waterfallChildren : null,
-									},
-								]}
-							/>
-
-							{panelState.isOpen && isDocked && (
-								<div className={styles.dockedSpanDetails}>
-									<SpanDetailsPanel
-										panelState={panelState}
-										selectedSpan={selectedSpan}
-										variant={SpanDetailVariant.DOCKED}
-										onVariantChange={handleVariantChange}
-										traceStartTime={traceData?.payload?.startTimestampMillis}
-										traceEndTime={traceData?.payload?.endTimestampMillis}
-									/>
-								</div>
-							)}
-						</div>
-
-						{showRightDock && (
-							<ResizableBox
-								handle="left"
-								defaultWidth={rightDockWidth}
-								minWidth={RIGHT_DOCK_MIN}
-								maxWidth={RIGHT_DOCK_MAX}
-								onResize={setRightDockWidth}
-								className={styles.rightDock}
-							>
-								<SpanDetailsPanel
-									panelState={panelState}
-									selectedSpan={selectedSpan}
-									variant={SpanDetailVariant.DOCKED_RIGHT}
-									onVariantChange={handleVariantChange}
-									traceStartTime={traceData?.payload?.startTimestampMillis}
-									traceEndTime={traceData?.payload?.endTimestampMillis}
-								/>
-							</ResizableBox>
-						)}
-					</div>
-
-					{panelState.isOpen && spanDetailVariant === SpanDetailVariant.DIALOG && (
-						<SpanDetailsPanel
-							panelState={panelState}
-							selectedSpan={selectedSpan}
-							variant={SpanDetailVariant.DIALOG}
-							onVariantChange={handleVariantChange}
-							traceStartTime={traceData?.payload?.startTimestampMillis}
-							traceEndTime={traceData?.payload?.endTimestampMillis}
-						/>
-					)}
-				</>
-			)}
-		</>
-	);
-}
-
-export default TraceDetailsOverview;

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/TraceDetailsThread.tsx

@@ -1,5 +0,0 @@
-function TraceDetailsThread(): JSX.Element {
-	return <div data-testid="trace-details-thread" />;
-}
-
-export default TraceDetailsThread;

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

@@ -1,3 +1,10 @@
+.root {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
 .layoutRow {
 	display: flex;
 	flex: 1;

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

@@ -1,6 +0,0 @@
-.root {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsWrapper/TraceDetailsWrapper.tsx

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-
-import TraceStoreSync from '../stores/TraceStoreSync';
-
-import styles from './TraceDetailsWrapper.module.scss';
-
-interface TraceDetailsWrapperProps {
-	children: ReactNode;
-}
-
-function TraceDetailsWrapper({
-	children,
-}: TraceDetailsWrapperProps): JSX.Element {
-	return (
-		<TraceStoreSync>
-			<div className={styles.root}>{children}</div>
-		</TraceStoreSync>
-	);
-}
-
-export default TraceDetailsWrapper;

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

@@ -33,5 +33,10 @@
 	position: fixed;
 	z-index: 1000;
 	pointer-events: none;
+	background-color: var(--l1-background);
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	border: 1px solid var(--l2-border);
 	color: var(--l1-foreground);
 }

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import cx from 'classnames';
 import TimelineV3 from 'components/TimelineV3/TimelineV3';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
@@ -18,7 +17,6 @@ import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
 import { useScrollToSpan } from './hooks/useScrollToSpan';
 import { EventRect, FlamegraphCanvasProps, SpanRect } from './types';
 
-import tooltipStyles from '../TraceTooltip/TraceTooltip.module.scss';
 import styles from './FlamegraphCanvas.module.scss';
 
 function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
@@ -205,7 +203,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 	const tooltipElement = tooltipContent
 		? createPortal(
 				<div
-					className={cx(tooltipStyles.surface, styles.tooltip)}
+					className={styles.tooltip}
 					style={{
 						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
 						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),

frontend/src/pages/TraceDetailsV3/TraceTooltip/TooltipRow.tsx

@@ -1,34 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './TraceTooltip.module.scss';
-
-interface TooltipRowProps {
-	label: string;
-	value: string;
-	isTotal?: boolean;
-	testId?: string;
-}
-
-function TooltipRow({
-	label,
-	value,
-	isTotal,
-	testId,
-}: TooltipRowProps): JSX.Element {
-	return (
-		<div className={styles.row} data-testid={testId}>
-			<Typography.Text
-				size="small"
-				color={isTotal ? undefined : 'muted'}
-				truncate={1}
-			>
-				{label}
-			</Typography.Text>
-			<Typography.Text size="small" truncate={1} className={styles.rowValue}>
-				{value}
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default TooltipRow;

frontend/src/pages/TraceDetailsV3/TraceTooltip/TooltipSection.tsx

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-
-import styles from './TraceTooltip.module.scss';
-
-interface TooltipSectionProps {
-	children: ReactNode;
-}
-
-function TooltipSection({ children }: TooltipSectionProps): JSX.Element {
-	return <div className={styles.section}>{children}</div>;
-}
-
-export default TooltipSection;