Merge branch 'main' into new-onboarding-datasources-29jun

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

conf/example.yaml

@@ -141,10 +141,6 @@ querier:
   flux_interval: 5m
   # The maximum number of concurrent queries for missing ranges.
   max_concurrent_queries: 4
-  # When filtering logs by trace_id, clamp the query window to the trace time
-  # range with padding to include slightly delayed log exports. Logs only; set
-  # to 0 to disable.
-  log_trace_id_window_padding: 5m
 
 ##################### TelemetryStore #####################
 telemetrystore:

docs/api/openapi.yml

@@ -2553,6 +2553,17 @@ components:
         url:
           type: string
       type: object
+    DashboardTextVariableSpec:
+      properties:
+        constant:
+          type: boolean
+        display:
+          $ref: '#/components/schemas/VariableDisplay'
+        name:
+          type: string
+        value:
+          type: string
+      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2662,22 +2673,6 @@ components:
         updatedBy:
           type: string
       type: object
-    DashboardtypesDashboardPanelRef:
-      properties:
-        dashboardId:
-          type: string
-        dashboardName:
-          type: string
-        panelId:
-          type: string
-        panelName:
-          type: string
-      required:
-      - dashboardId
-      - dashboardName
-      - panelId
-      - panelName
-      type: object
     DashboardtypesDashboardSpec:
       properties:
         datasources:
@@ -2750,23 +2745,24 @@ components:
     DashboardtypesDatasourcePlugin:
       discriminator:
         mapping:
-          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
+          signoz/Datasource: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
         propertyName: kind
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec'
+      - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
       type: object
     DashboardtypesDatasourcePluginKind:
       enum:
       - signoz/Datasource
       type: string
-    DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpec:
+    DashboardtypesDatasourcePluginVariantStruct:
       properties:
         kind:
           enum:
           - signoz/Datasource
           type: string
         spec:
-          $ref: '#/components/schemas/DashboardtypesSigNozDatasourceSpec'
+          nullable: true
+          type: object
       required:
       - kind
       - spec
@@ -2932,15 +2928,9 @@ components:
             type: string
           nullable: true
           type: object
-        mode:
-          $ref: '#/components/schemas/DashboardtypesLegendMode'
         position:
           $ref: '#/components/schemas/DashboardtypesLegendPosition'
       type: object
-    DashboardtypesLegendMode:
-      enum:
-      - list
-      type: string
     DashboardtypesLegendPosition:
       enum:
       - bottom
@@ -2987,30 +2977,19 @@ components:
         customAllValue:
           type: string
         defaultValue:
-          $ref: '#/components/schemas/DashboardtypesVariableDefaultValue'
+          $ref: '#/components/schemas/VariableDefaultValue'
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
-          minLength: 1
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesVariablePlugin'
         sort:
-          $ref: '#/components/schemas/DashboardtypesListVariableSpecSort'
+          nullable: true
+          type: string
       required:
       - display
-      - name
       type: object
-    DashboardtypesListVariableSpecSort:
-      enum:
-      - none
-      - alphabetical-asc
-      - alphabetical-desc
-      - numerical-asc
-      - numerical-desc
-      - alphabetical-ci-asc
-      - alphabetical-ci-desc
-      type: string
     DashboardtypesListableDashboardForUserV2:
       properties:
         dashboards:
@@ -3308,6 +3287,7 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
+          nullable: true
           type: array
       required:
       - display
@@ -3510,8 +3490,6 @@ components:
       required:
       - queryValue
       type: object
-    DashboardtypesSigNozDatasourceSpec:
-      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -3521,13 +3499,8 @@ components:
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
-          description: The maximum gap size to connect when fillOnlyBelow is true.
-            Gaps larger than this duration are left disconnected.
           type: string
         fillOnlyBelow:
-          description: Controls whether lines connect across null values. When false
-            (default), all gaps are connected. When true, only gaps smaller than fillLessThan
-            are connected.
           type: boolean
       type: object
     DashboardtypesStorableDashboardData:
@@ -3575,22 +3548,6 @@ components:
       - color
       - columnName
       type: object
-    DashboardtypesTextVariableSpec:
-      properties:
-        constant:
-          type: boolean
-        display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
-        name:
-          minLength: 1
-          type: string
-        value:
-          type: string
-      required:
-      - display
-      - value
-      - name
-      type: object
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -3610,6 +3567,7 @@ components:
       required:
       - value
       - color
+      - label
       type: object
     DashboardtypesTimePreference:
       enum:
@@ -3694,18 +3652,24 @@ components:
       discriminator:
         mapping:
           ListVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
+          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
       type: object
-    DashboardtypesVariableDefaultValue:
-      oneOf:
-      - type: string
-      - items:
+    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
+      properties:
+        kind:
+          enum:
+          - TextVariable
           type: string
-        type: array
+        spec:
+          $ref: '#/components/schemas/DashboardTextVariableSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec:
       properties:
         kind:
@@ -3718,18 +3682,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec:
-      properties:
-        kind:
-          enum:
-          - TextVariable
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesTextVariableSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesVariablePlugin:
       discriminator:
         mapping:
@@ -3803,12 +3755,15 @@ components:
         type:
           type: string
         url:
+          nullable: true
           type: string
       required:
       - type
       - code
       - message
+      - url
       - errors
+      - retry
       - suggestions
       type: object
     ErrorsResponseerroradditional:
@@ -3824,6 +3779,7 @@ components:
       - suggestions
       type: object
     ErrorsResponseretryjson:
+      nullable: true
       properties:
         delay:
           $ref: '#/components/schemas/TimeDuration'
@@ -5634,16 +5590,6 @@ components:
       - widgetId
       - widgetName
       type: object
-    MetricsexplorertypesMetricDashboardPanelsResponse:
-      properties:
-        dashboards:
-          items:
-            $ref: '#/components/schemas/DashboardtypesDashboardPanelRef'
-          nullable: true
-          type: array
-      required:
-      - dashboards
-      type: object
     MetricsexplorertypesMetricDashboardsResponse:
       properties:
         dashboards:
@@ -8172,6 +8118,17 @@ components:
       required:
       - id
       type: object
+    VariableDefaultValue:
+      type: object
+    VariableDisplay:
+      properties:
+        description:
+          type: string
+        hidden:
+          type: boolean
+        name:
+          type: string
+      type: object
     ZeustypesGettableHost:
       properties:
         hosts:
@@ -22806,75 +22763,6 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
-  /api/v3/metrics/dashboards:
-    get:
-      deprecated: false
-      description: This endpoint returns associated v2 dashboards for a specified
-        metric
-      operationId: GetMetricDashboardsV2
-      parameters:
-      - description: The name of the metric. May contain slashes (e.g. cloud-provider
-          metrics like run.googleapis.com/request_latencies).
-        in: query
-        name: metricName
-        required: true
-        schema:
-          description: The name of the metric. May contain slashes (e.g. cloud-provider
-            metrics like run.googleapis.com/request_latencies).
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricsexplorertypesMetricDashboardPanelsResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get metric dashboards (v2)
-      tags:
-      - metrics
   /api/v3/traces/{traceID}/flamegraph:
     post:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -290,10 +290,6 @@ func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, m
 	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
 }
 
-func (module *module) GetByMetricNamesV2(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
-	return module.pkgDashboardModule.GetByMetricNamesV2(ctx, orgID, metricNames)
-}
-
 func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.List(ctx, orgID)
 }

ee/sqlstore/postgressqlstore/formatter.go

@@ -152,7 +152,3 @@ func (f *formatter) LowerExpression(expression string) []byte {
 	sql = append(sql, ')')
 	return sql
 }
-
-func (f *formatter) EscapeLikePattern(value string) string {
-	return strings.NewReplacer(`\`, `\\`, `%`, `\%`, `_`, `\_`).Replace(value)
-}

frontend/src/AppRoutes/Private.tsx

@@ -8,7 +8,6 @@ import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useIsAIObservabilityEnabled } from 'hooks/useIsAIObservabilityEnabled';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
@@ -41,7 +40,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
 
 	const mapRoutes = useMemo(
 		() =>
@@ -133,14 +131,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <Redirect to={ROUTES.HOME} />;
 	}
 
-	if (
-		(pathname.startsWith(`${ROUTES.LLM_OBSERVABILITY_BASE}/`) ||
-			pathname === ROUTES.LLM_OBSERVABILITY_BASE) &&
-		!isAIObservabilityEnabled
-	) {
-		return <Redirect to={ROUTES.HOME} />;
-	}
-
 	// Check for workspace access restriction (cloud only)
 	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
 

frontend/src/AppRoutes/pageComponents.ts

@@ -57,6 +57,13 @@ export const TraceFilter = Loadable(
 	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
 );
 
+export const TraceDetail = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetailV2/index'
+		),
+);
+
 export const TraceDetailOldRedirect = Loadable(
 	() =>
 		import(
@@ -322,17 +329,3 @@ export const AIAssistantPage = Loadable(
 			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
 		),
 );
-
-export const LLMObservabilityPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "LLM Observability Page" */ 'pages/LLMObservability'
-		),
-);
-
-export const LLMObservabilityModelPricingPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
-		),
-);

frontend/src/AppRoutes/routes.ts

@@ -23,8 +23,6 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
-	LLMObservabilityPage,
-	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -514,20 +512,6 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.LLM_OBSERVABILITY_BASE,
-		exact: true,
-		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_BASE',
-		isPrivate: true,
-	},
-	{
-		path: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
-		exact: true,
-		component: LLMObservabilityModelPricingPage,
-		key: 'LLM_OBSERVABILITY_MODEL_PRICING',
-		isPrivate: true,
-	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/generated/services/metrics/index.ts

@@ -26,8 +26,6 @@ import type {
 	GetMetricAttributesParams,
 	GetMetricDashboards200,
 	GetMetricDashboardsParams,
-	GetMetricDashboardsV2200,
-	GetMetricDashboardsV2Params,
 	GetMetricHighlights200,
 	GetMetricHighlightsParams,
 	GetMetricMetadata200,
@@ -1789,100 +1787,3 @@ export const useGetMetricsTreemap = <
 > => {
 	return useMutation(getGetMetricsTreemapMutationOptions(options));
 };
-/**
- * This endpoint returns associated v2 dashboards for a specified metric
- * @summary Get metric dashboards (v2)
- */
-export const getMetricDashboardsV2 = (
-	params: GetMetricDashboardsV2Params,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricDashboardsV2200>({
-		url: `/api/v3/metrics/dashboards`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetMetricDashboardsV2QueryKey = (
-	params?: GetMetricDashboardsV2Params,
-) => {
-	return [`/api/v3/metrics/dashboards`, ...(params ? [params] : [])] as const;
-};
-
-export const getGetMetricDashboardsV2QueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricDashboardsV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params: GetMetricDashboardsV2Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricDashboardsV2>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricDashboardsV2QueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricDashboardsV2>>
-	> = ({ signal }) => getMetricDashboardsV2(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricDashboardsV2>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricDashboardsV2QueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricDashboardsV2>>
->;
-export type GetMetricDashboardsV2QueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get metric dashboards (v2)
- */
-
-export function useGetMetricDashboardsV2<
-	TData = Awaited<ReturnType<typeof getMetricDashboardsV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params: GetMetricDashboardsV2Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricDashboardsV2>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricDashboardsV2QueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get metric dashboards (v2)
- */
-export const invalidateGetMetricDashboardsV2 = async (
-	queryClient: QueryClient,
-	params: GetMetricDashboardsV2Params,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricDashboardsV2QueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -2185,9 +2185,14 @@ export interface ErrorsResponseerroradditionalDTO {
 	suggestions: string[];
 }
 
-export interface ErrorsResponseretryjsonDTO {
+export type ErrorsResponseretryjsonDTOAnyOf = {
 	delay: TimeDurationDTO;
-}
+};
+
+/**
+ * @nullable
+ */
+export type ErrorsResponseretryjsonDTO = ErrorsResponseretryjsonDTOAnyOf | null;
 
 export interface ErrorsJSONDTO {
 	/**
@@ -2202,7 +2207,7 @@ export interface ErrorsJSONDTO {
 	 * @type string
 	 */
 	message: string;
-	retry?: ErrorsResponseretryjsonDTO;
+	retry: ErrorsResponseretryjsonDTO | null;
 	/**
 	 * @type array
 	 */
@@ -2212,9 +2217,9 @@ export interface ErrorsJSONDTO {
 	 */
 	type: string;
 	/**
-	 * @type string
+	 * @type string,null
 	 */
-	url?: string;
+	url: string | null;
 }
 
 export interface AuthtypesOrgSessionContextDTO {
@@ -3266,6 +3271,37 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
+export interface VariableDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	hidden?: boolean;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
+export interface DashboardTextVariableSpecDTO {
+	/**
+	 * @type boolean
+	 */
+	constant?: boolean;
+	display?: VariableDisplayDTO;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	value?: string;
+}
+
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3297,9 +3333,6 @@ export interface DashboardtypesPanelFormattingDTO {
 	unit?: string;
 }
 
-export enum DashboardtypesLegendModeDTO {
-	list = 'list',
-}
 export enum DashboardtypesLegendPositionDTO {
 	bottom = 'bottom',
 	right = 'right',
@@ -3319,7 +3352,6 @@ export interface DashboardtypesLegendDTO {
 	 * @type object,null
 	 */
 	customColors?: DashboardtypesLegendDTOCustomColors;
-	mode?: DashboardtypesLegendModeDTO;
 	position?: DashboardtypesLegendPositionDTO;
 }
 
@@ -3331,7 +3363,7 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	/**
 	 * @type string
 	 */
-	label?: string;
+	label: string;
 	/**
 	 * @type string
 	 */
@@ -3922,43 +3954,33 @@ export interface DashboardtypesDashboardDTO {
 	updatedBy?: string;
 }
 
-export interface DashboardtypesDashboardPanelRefDTO {
-	/**
-	 * @type string
-	 */
-	dashboardId: string;
-	/**
-	 * @type string
-	 */
-	dashboardName: string;
-	/**
-	 * @type string
-	 */
-	panelId: string;
-	/**
-	 * @type string
-	 */
-	panelName: string;
-}
-
-export enum DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind {
+export enum DashboardtypesDatasourcePluginVariantStructDTOKind {
 	'signoz/Datasource' = 'signoz/Datasource',
 }
-export interface DashboardtypesSigNozDatasourceSpecDTO {
+export type DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf = {
 	[key: string]: unknown;
-}
+};
 
-export interface DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO {
+/**
+ * @nullable
+ */
+export type DashboardtypesDatasourcePluginVariantStructDTOSpec =
+	DashboardtypesDatasourcePluginVariantStructDTOSpecAnyOf | null;
+
+export interface DashboardtypesDatasourcePluginVariantStructDTO {
 	/**
 	 * @enum signoz/Datasource
 	 * @type string
 	 */
-	kind: DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTOKind;
-	spec: DashboardtypesSigNozDatasourceSpecDTO;
+	kind: DashboardtypesDatasourcePluginVariantStructDTOKind;
+	/**
+	 * @type object,null
+	 */
+	spec: DashboardtypesDatasourcePluginVariantStructDTOSpec;
 }
 
 export type DashboardtypesDatasourcePluginDTO =
-	DashboardtypesDatasourcePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesSigNozDatasourceSpecDTO;
+	DashboardtypesDatasourcePluginVariantStructDTO;
 
 export interface DashboardtypesDatasourceSpecDTO {
 	/**
@@ -4008,12 +4030,10 @@ export enum DashboardtypesLineStyleDTO {
 export interface DashboardtypesSpanGapsDTO {
 	/**
 	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
 	 */
 	fillLessThan?: string;
 	/**
 	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
 	 */
 	fillOnlyBelow?: boolean;
 }
@@ -4553,9 +4573,9 @@ export interface DashboardtypesPanelSpecDTO {
 	links?: DashboardLinkDTO[];
 	plugin: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	queries: DashboardtypesQueryDTO[];
+	queries: DashboardtypesQueryDTO[] | null;
 }
 
 export interface DashboardtypesPanelDTO {
@@ -4585,7 +4605,9 @@ export type DashboardtypesLayoutDTO =
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
 }
-export type DashboardtypesVariableDefaultValueDTO = string | string[];
+export interface VariableDefaultValueDTO {
+	[key: string]: unknown;
+}
 
 export enum DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind {
 	'signoz/DynamicVariable' = 'signoz/DynamicVariable',
@@ -4643,15 +4665,6 @@ export type DashboardtypesVariablePluginDTO =
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTO
 	| DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTO;
 
-export enum DashboardtypesListVariableSpecSortDTO {
-	none = 'none',
-	'alphabetical-asc' = 'alphabetical-asc',
-	'alphabetical-desc' = 'alphabetical-desc',
-	'numerical-asc' = 'numerical-asc',
-	'numerical-desc' = 'numerical-desc',
-	'alphabetical-ci-asc' = 'alphabetical-ci-asc',
-	'alphabetical-ci-desc' = 'alphabetical-ci-desc',
-}
 export interface DashboardtypesListVariableSpecDTO {
 	/**
 	 * @type boolean
@@ -4669,15 +4682,17 @@ export interface DashboardtypesListVariableSpecDTO {
 	 * @type string
 	 */
 	customAllValue?: string;
-	defaultValue?: DashboardtypesVariableDefaultValueDTO;
+	defaultValue?: VariableDefaultValueDTO;
 	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
-	 * @minLength 1
 	 */
-	name: string;
+	name?: string;
 	plugin?: DashboardtypesVariablePluginDTO;
-	sort?: DashboardtypesListVariableSpecSortDTO;
+	/**
+	 * @type string,null
+	 */
+	sort?: string | null;
 }
 
 export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO {
@@ -4689,38 +4704,21 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesTextVariableSpecDTO {
-	/**
-	 * @type boolean
-	 */
-	constant?: boolean;
-	display: DashboardtypesDisplayDTO;
-	/**
-	 * @type string
-	 * @minLength 1
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	value: string;
-}
-
-export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO {
+export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind;
-	spec: DashboardtypesTextVariableSpecDTO;
+	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
+	spec: DashboardTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
@@ -7176,13 +7174,6 @@ export interface MetricsexplorertypesMetricDashboardDTO {
 	widgetName: string;
 }
 
-export interface MetricsexplorertypesMetricDashboardPanelsResponseDTO {
-	/**
-	 * @type array,null
-	 */
-	dashboards: DashboardtypesDashboardPanelRefDTO[] | null;
-}
-
 export interface MetricsexplorertypesMetricDashboardsResponseDTO {
 	/**
 	 * @type array,null
@@ -11464,22 +11455,6 @@ export type GetHosts200 = {
 	status: string;
 };
 
-export type GetMetricDashboardsV2Params = {
-	/**
-	 * @type string
-	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
-	 */
-	metricName: string;
-};
-
-export type GetMetricDashboardsV2200 = {
-	data: MetricsexplorertypesMetricDashboardPanelsResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

frontend/src/api/trace/getTraceV2.tsx

@@ -0,0 +1,35 @@
+import { ApiV2Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV2PayloadProps,
+	GetTraceV2SuccessResponse,
+} from 'types/api/trace/getTraceV2';
+
+const getTraceV2 = async (
+	props: GetTraceV2PayloadProps,
+): Promise<SuccessResponse<GetTraceV2SuccessResponse> | ErrorResponse> => {
+	let uncollapsedSpans = [...props.uncollapsedSpans];
+	if (!props.isSelectedSpanIDUnCollapsed) {
+		uncollapsedSpans = uncollapsedSpans.filter(
+			(node) => node !== props.selectedSpanId,
+		);
+	}
+	const postData: GetTraceV2PayloadProps = {
+		...props,
+		uncollapsedSpans,
+	};
+	const response = await axios.post<GetTraceV2SuccessResponse>(
+		`/traces/waterfall/${props.traceId}`,
+		omit(postData, 'traceId'),
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: response.data,
+	};
+};
+
+export default getTraceV2;

frontend/src/api/trace/getTraceV4.tsx

@@ -41,7 +41,6 @@ const getTraceV4 = async (
 	> & { spans: WireSpan[] | null };
 
 	// Derive 'service.name' from resource for convenience — only derived field
-	// todo(tech-debt): to remove use of this and to directly use service.name from resources.
 	const spans: SpanV3[] = (rawPayload.spans || []).map((span) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',

frontend/src/assets/Logos/cassandra.svg

@@ -0,0 +1 @@
+<svg fill="#1287B1" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apache Cassandra</title><path d="M10.374 10.53a3.102 3.102 0 0 1-.428-.222l.555.143c0 .02-.01.036-.01.055l-.117.025zm-.283 1.506-.315.253.852-1.079-1.078.391c.002.017.009.033.009.05a.57.57 0 0 1-.184.42c.102.217.228.424.375.616a3.2 3.2 0 0 1 .34-.651zm.717-2.347-.652-.82a.427.427 0 0 1-.506.162c-.054.073-.083.162-.13.24l1.258.463c.011-.015.019-.031.03-.045zm-1.666.444c-.07.314-.087.637-.05.956a.566.566 0 0 1 .451.475l.946-.606c-.067-.022-.126-.06-.191-.088l-1.119-.08.64-.14a3.186 3.186 0 0 1-.668-.554l-.01.037zM20.1 11.648c-.164.202.833 1.022.833 1.022s-1.654-1.022-2.234-.72c-.278.144.574.811 1.175 1.242-.428-.274-.982-.571-1.175-.408-.328.277 1.565 2.549 1.565 2.549s-2.145-2.322-2.36-2.209c-.214.114.593 1.224.593 1.224s-1.06-1.16-1.35-.959c-.29.202 1.514 3.218 1.514 3.218s-1.956-3.091-2.763-2.574c1.268 2.782.795 3.18.795 3.18s-.162-2.839-1.742-2.764c-.795.038.379 2.12.379 2.12s-1.08-1.902-1.8-1.864c1.326 2.51.854 3.53.854 3.53s.219-2.143-1.58-3.336c.682.606-.427 3.336-.427 3.336s.976-4.023-.719-3.256c-.268.121-.019 2.007-.019 2.007s-.34-2.158-.851-2.045c-.298.066-1.893 2.99-1.893 2.99s1.306-3.16.908-3.027c-.29.096-.833 1.4-.833 1.4s.265-1.287 0-1.363c-.264-.075-1.74 1.363-1.74 1.363s1.097-1.287.908-1.552c-.287-.402-.623-.42-1.022-.265-.581.226-1.363 1.287-1.363 1.287s.78-1.074.643-1.476c-.219-.647-2.46 1.249-2.46 1.249s1.325-1.25 1.022-1.514c-.303-.265-1.947-.183-2.46-.185-1.515-.004-2.039-.36-2.498-.724 1.987.997 3.803-.151 6.094.494l.21.06c-1.3-.558-2.144-1.378-2.226-2.354-.036-.416.074-.827.297-1.222.619-.4 1.29-.773 2.06-1.095a4 4 0 0 0-.064.698c0 2.44 2.203 4.417 4.92 4.417s4.92-1.977 4.92-4.417c0-.45-.083-.881-.223-1.29 1.431.404 2.45.968 3.132 1.335.022.092.045.184.053.279.024.274-.018.547-.11.814.095-.147.198-.288.28-.445.367-.997 1.855.227 1.855.227s-1.085-.454-1.06-.24c.026.215 1.628.96 1.628.96s-1.45-.455-1.362-.114c.088.34 1.817 1.703 1.817 1.703s-1.956-1.489-2.12-1.287zm-7.268 2.65.042-.008-.06.01zM9.256 9.753c.12.13.26.234.396.343l.927-.029-1.064-.788c-.093.154-.195.303-.26.474Zm10.62 3.44c.3.215.54.373.54.373s-.24-.181-.54-.374zM7.507 8.617c-.14.229-.214.492-.215.76a3.99 3.99 0 0 0 2.358 3.64c0-.005.002-.01.003-.014a3.19 3.19 0 0 1-.58-.788c-.648.099-.926-.794-.336-1.08a3.174 3.174 0 0 1 .138-1.388 3.162 3.162 0 0 1-.52-1.36c-.296.07-.579.147-.848.23Zm1.488.82c.108-.24.243-.46.402-.661a.435.435 0 0 1 .568-.557c.077-.059.166-.099.248-.15a16.17 16.17 0 0 0-1.727.284c.114.388.272.76.509 1.084Zm2.285 3.928c1.4 0 2.633-.723 3.344-1.816a3.399 3.399 0 0 0-1.265-.539l-.297-.023.916.9-1.197-.467.704 1.078-1.074-.832-.012.006.347 1.278-.596-1.134-.098 1.33-.401-1.326-.472 1.261.114-1.359c-.006-.002-.01-.006-.015-.008l-.814 1.154.286-1.067c-.34.322-.605.713-.781 1.146.095.102.197.198.303.29.322.083.66.128 1.008.128zm10.145-4.434c.971-.567 1.716-1.955 1.716-1.955s-1.893 1.955-3.205 1.665c1.186-.934 1.766-2.549 1.766-2.549s-1.506 2.325-2.448 2.423c1.086-.959 1.54-2.322 1.54-2.322s-1.237 1.817-2.196 1.944c1.287-1.161 1.338-1.893 1.338-1.893s-1.781 2.302-2.499 1.943c.858-.934 1.439-2.12 1.439-2.12s-1.489 2.019-1.893 1.69c-.277-.05.454-.958.454-.958s-.908.807-1.16.606c.454-.278 1.236-1.64 1.236-1.64S16 7.505 15.621 7.304l.731-1.483s-.73 1.483-1.715 1.23c.454-.58.63-1.112.63-1.112s-.756 1.213-1.69.885c-.22-.077.273-.635.273-.635s-.626.61-1.055.534c-.43-.076.025-.858.025-.858s-.757 1.186-.908 1.136c-.152-.05.075-.833.075-.833s-.555.908-.858.858c-.302-.05 0-.934 0-.934s-.328.984-.58.909c-.252-.076-.303-.656-.303-.656s-.068.788-.429.858c-2.725.53-5.728 1.69-9.489 5.45C3.887 10.738 5.3 7.91 11.962 7.659c5.044-.191 7.399 2.137 8.177 2.17C22.51 9.93 24 7.633 24 7.633s-1.489 1.716-2.574 1.3zm-7.74.872-.608.464v.001l.054.003a3.35 3.35 0 0 0 .554-.468zm1.583-.426c0-.536-.237-.929-.594-1.217a3.178 3.178 0 0 1-.165.825.393.393 0 0 1-.328.681c-.154.233-.34.445-.549.63l.661.034-.995.237c-.025.018-.045.041-.07.058a3.194 3.194 0 0 1 1.536.691c.32-.574.504-1.235.504-1.94zM10.99 7.996a3.5 3.5 0 0 0-.785.46.427.427 0 0 1-.013.357l.885.643.023-.016-.36-1.262.627 1.12c.018-.006.04-.006.058-.011l-.02-1.251.398 1.163.477-1.15.016 1.268c.004.001.007.005.012.007l.713-1.005-.363 1.218.009.01 1.04-.69-.759 1.05.002.005.95-.34c.012-.016.028-.029.041-.045a.395.395 0 0 1 .394-.632 3.43 3.43 0 0 0 .27-.784 13.99 13.99 0 0 0-2.798-.168c-.286.011-.55.033-.817.053Z"/></svg>

frontend/src/assets/Logos/planetscale.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a11.981 11.981 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.962 11.962 0 0 1 0 12Zm12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24Z"/></svg>

frontend/src/assets/TraceDetail/Flamegraph.tsx

@@ -0,0 +1,25 @@
+import { Color } from '@signozhq/design-tokens';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+function FlamegraphImg(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M8 3c1 3 2.5 3.5 3.5 4.5A5 5 0 0113 11a5 5 0 11-10 0c0-.3 0-.6.1-.9a2 2 0 103.3-2C4 5.5 7 3 8 3zM21 4h-8M20 14.5h-3M20 9.5h-3M21 20H4"
+				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+export default FlamegraphImg;

frontend/src/components/SpanHoverCard/SpanHoverCard.styles.scss

@@ -0,0 +1,106 @@
+.span-hover-card {
+	.ant-popover-inner {
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 32%, transparent) 0%,
+			color-mix(in srgb, var(--card) 36%, transparent) 98.68%
+		);
+		padding: 12px 16px;
+		border: 1px solid var(--l1-border);
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: linear-gradient(
+				139deg,
+				color-mix(in srgb, var(--card) 32%, transparent) 0%,
+				color-mix(in srgb, var(--card) 36%, transparent) 98.68%
+			);
+			backdrop-filter: blur(20px);
+			border-radius: 4px;
+			z-index: -1;
+			will-change: background-color, backdrop-filter;
+		}
+	}
+
+	&__title {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		margin-bottom: 0.5rem;
+	}
+
+	&__operation {
+		color: var(--l1-foreground);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 20px;
+		letter-spacing: 0.48px;
+	}
+
+	&__service {
+		font-size: 0.875rem;
+		color: var(--muted-foreground);
+		font-weight: 400;
+	}
+
+	&__error {
+		font-size: 0.75rem;
+		color: var(--danger-background);
+		font-weight: 500;
+	}
+
+	&__row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 8px;
+		gap: 16px;
+	}
+
+	&__label {
+		color: var(--muted-foreground);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 20px;
+	}
+
+	&__value {
+		color: var(--l1-foreground);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 20px;
+		text-align: right;
+	}
+
+	&__relative-time {
+		display: flex;
+		align-items: center;
+		margin-top: 4px;
+		gap: 8px;
+		border-radius: 1px 0 0 1px;
+		background: linear-gradient(
+			90deg,
+			hsla(358, 75%, 59%, 0.2) 0%,
+			transparent 100%
+		);
+
+		&-icon {
+			width: 2px;
+			height: 20px;
+			flex-shrink: 0;
+			border-radius: 2px;
+			background: var(--danger-background);
+		}
+	}
+
+	&__relative-text {
+		color: var(--bg-cherry-300);
+		font-size: 12px;
+		line-height: 20px;
+	}
+}

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -0,0 +1,103 @@
+import { ReactNode } from 'react';
+import { Popover } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import dayjs from 'dayjs';
+import { useTimezone } from 'providers/Timezone';
+import { Span } from 'types/api/trace/getTraceV2';
+import { toFixed } from 'utils/toFixed';
+
+import './SpanHoverCard.styles.scss';
+
+interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+interface SpanHoverCardProps {
+	span: Span;
+	traceMetadata: ITraceMetadata;
+	children: ReactNode;
+}
+
+function SpanHoverCard({
+	span,
+	traceMetadata,
+	children,
+}: SpanHoverCardProps): JSX.Element {
+	const duration = span.durationNano / 1e6; // Convert nanoseconds to milliseconds
+	const { time: formattedDuration, timeUnitName } =
+		convertTimeToRelevantUnit(duration);
+
+	const { timezone } = useTimezone();
+
+	// Calculate relative start time from trace start
+	const relativeStartTime = span.timestamp - traceMetadata.startTime;
+	const { time: relativeTime, timeUnitName: relativeTimeUnit } =
+		convertTimeToRelevantUnit(relativeStartTime);
+
+	// Format absolute start time
+	const startTimeFormatted = dayjs(span.timestamp)
+		.tz(timezone.value)
+		.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS);
+
+	const getContent = (): JSX.Element => (
+		<div className="span-hover-card">
+			<div className="span-hover-card__row">
+				<Typography.Text className="span-hover-card__label">
+					Duration:
+				</Typography.Text>
+				<Typography.Text className="span-hover-card__value">
+					{toFixed(formattedDuration, 2)}
+					{timeUnitName}
+				</Typography.Text>
+			</div>
+			<div className="span-hover-card__row">
+				<Typography.Text className="span-hover-card__label">
+					Events:
+				</Typography.Text>
+				<Typography.Text className="span-hover-card__value">
+					{span.event?.length || 0}
+				</Typography.Text>
+			</div>
+			<div className="span-hover-card__row">
+				<Typography.Text className="span-hover-card__label">
+					Start time:
+				</Typography.Text>
+				<Typography.Text className="span-hover-card__value">
+					{startTimeFormatted}
+				</Typography.Text>
+			</div>
+			<div className="span-hover-card__relative-time">
+				<div className="span-hover-card__relative-time-icon" />
+				<Typography.Text className="span-hover-card__relative-text">
+					{toFixed(relativeTime, 2)}
+					{relativeTimeUnit} after trace start
+				</Typography.Text>
+			</div>
+		</div>
+	);
+
+	return (
+		<Popover
+			title={
+				<div className="span-hover-card__title">
+					<Typography.Text className="span-hover-card__operation">
+						{span.name}
+					</Typography.Text>
+				</div>
+			}
+			mouseEnterDelay={0.2}
+			content={getContent()}
+			trigger="hover"
+			rootClassName="span-hover-card"
+			autoAdjustOverflow
+			arrow={false}
+		>
+			{children}
+		</Popover>
+	);
+}
+
+export default SpanHoverCard;

frontend/src/components/SpanHoverCard/__tests__/SpanHoverCard.test.tsx

@@ -0,0 +1,292 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { TimezoneContextType } from 'providers/Timezone';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import SpanHoverCard from '../SpanHoverCard';
+
+// Mock timezone provider so SpanHoverCard can use useTimezone without a real context
+jest.mock('providers/Timezone', () => ({
+	__esModule: true,
+	useTimezone: (): TimezoneContextType => ({
+		timezone: {
+			name: 'Coordinated Universal Time — UTC, GMT',
+			value: 'UTC',
+			offset: 'UTC',
+			searchIndex: 'UTC',
+		},
+		browserTimezone: {
+			name: 'Coordinated Universal Time — UTC, GMT',
+			value: 'UTC',
+			offset: 'UTC',
+			searchIndex: 'UTC',
+		},
+		updateTimezone: jest.fn(),
+		formatTimezoneAdjustedTimestamp: jest.fn(() => 'mock-date'),
+		formatTimezoneAdjustedTimestampOptional: jest.fn(() => 'mock-date'),
+		isAdaptationEnabled: true,
+		setIsAdaptationEnabled: jest.fn(),
+	}),
+}));
+
+// Mock dayjs for testing, including timezone helpers used in timezoneUtils
+jest.mock('dayjs', () => {
+	const mockDayjsInstance: any = {};
+
+	mockDayjsInstance.format = jest.fn((formatString: string) =>
+		// Match the DD_MMM_YYYY_HH_MM_SS format: 'DD MMM YYYY, HH:mm:ss'
+		formatString === 'DD MMM YYYY, HH:mm:ss'
+			? '15 Mar 2024, 14:23:45'
+			: 'mock-date',
+	);
+
+	// Support chaining: dayjs().tz(timezone).format(...) and dayjs().tz(timezone).utcOffset()
+	mockDayjsInstance.tz = jest.fn(() => mockDayjsInstance);
+	mockDayjsInstance.utcOffset = jest.fn(() => 0);
+
+	const mockDayjs = jest.fn(() => mockDayjsInstance);
+
+	Object.assign(mockDayjs, {
+		extend: jest.fn(),
+		// Support dayjs.tz.guess()
+		tz: { guess: jest.fn(() => 'UTC') },
+	});
+
+	return mockDayjs;
+});
+
+const HOVER_ELEMENT_ID = 'hover-element';
+
+const mockSpan: Span = {
+	spanId: 'test-span-id',
+	traceId: 'test-trace-id',
+	rootSpanId: 'root-span-id',
+	parentSpanId: 'parent-span-id',
+	name: 'GET /api/users',
+	timestamp: 1679748225000000,
+	durationNano: 150000000,
+	serviceName: 'user-service',
+	kind: 1,
+	hasError: false,
+	level: 1,
+	references: [],
+	tagMap: {},
+	event: [
+		{
+			name: 'event1',
+			timeUnixNano: 1679748225100000,
+			attributeMap: {},
+			isError: false,
+		},
+		{
+			name: 'event2',
+			timeUnixNano: 1679748225200000,
+			attributeMap: {},
+			isError: false,
+		},
+	],
+	rootName: 'root-span',
+	statusMessage: '',
+	statusCodeString: 'OK',
+	spanKind: 'server',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 1,
+};
+
+const mockTraceMetadata = {
+	startTime: 1679748225000000,
+	endTime: 1679748226000000,
+};
+
+describe('SpanHoverCard', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('renders child element correctly', () => {
+		render(
+			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
+				<div data-testid="child-element">Hover me</div>
+			</SpanHoverCard>,
+		);
+
+		expect(screen.getByTestId('child-element')).toBeInTheDocument();
+		expect(screen.getByText('Hover me')).toBeInTheDocument();
+	});
+
+	it('shows popover after 0.2 second delay on hover', async () => {
+		render(
+			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
+				<div data-testid={HOVER_ELEMENT_ID}>Hover for details</div>
+			</SpanHoverCard>,
+		);
+
+		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
+
+		// Hover over the element
+		fireEvent.mouseEnter(hoverElement);
+
+		// Popover should NOT appear immediately
+		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
+
+		// Advance time by 0.5 seconds
+		act(() => {
+			jest.advanceTimersByTime(200);
+		});
+
+		// Now popover should appear
+		expect(screen.getByText('Duration:')).toBeInTheDocument();
+	});
+
+	it('does not show popover if hover is too brief', async () => {
+		render(
+			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
+				<div data-testid={HOVER_ELEMENT_ID}>Quick hover test</div>
+			</SpanHoverCard>,
+		);
+
+		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
+
+		// Quick hover and unhover (less than the 0.2s delay)
+		fireEvent.mouseEnter(hoverElement);
+		act(() => {
+			jest.advanceTimersByTime(100); // Only 0.1 seconds
+		});
+		fireEvent.mouseLeave(hoverElement);
+
+		// Advance past the full delay
+		act(() => {
+			jest.advanceTimersByTime(400);
+		});
+
+		// Popover should not appear
+		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
+	});
+
+	it('displays span information in popover content after delay', async () => {
+		render(
+			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
+				<div data-testid={HOVER_ELEMENT_ID}>Test span</div>
+			</SpanHoverCard>,
+		);
+
+		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
+
+		// Hover and wait for popover
+		fireEvent.mouseEnter(hoverElement);
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+
+		// Check that popover shows span operation name in title
+		expect(screen.getByText('GET /api/users')).toBeInTheDocument();
+
+		// Check duration information
+		expect(screen.getByText('Duration:')).toBeInTheDocument();
+		expect(screen.getByText('150ms')).toBeInTheDocument();
+
+		// Check events count
+		expect(screen.getByText('Events:')).toBeInTheDocument();
+		expect(screen.getByText('2')).toBeInTheDocument();
+
+		// Check start time label
+		expect(screen.getByText('Start time:')).toBeInTheDocument();
+	});
+
+	it('displays date in DD MMM YYYY, HH:mm:ss format with seconds', async () => {
+		render(
+			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
+				<div data-testid={HOVER_ELEMENT_ID}>Date format test</div>
+			</SpanHoverCard>,
+		);
+
+		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
+
+		// Hover and wait for popover
+		fireEvent.mouseEnter(hoverElement);
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+
+		// Verify the DD MMM YYYY, HH:mm:ss format is displayed
+		expect(screen.getByText('15 Mar 2024, 14:23:45')).toBeInTheDocument();
+	});
+
+	it('displays relative time information', async () => {
+		const spanWithRelativeTime: Span = {
+			...mockSpan,
+			timestamp: mockTraceMetadata.startTime + 1000000, // 1 second later
+		};
+
+		render(
+			<SpanHoverCard span={spanWithRelativeTime} traceMetadata={mockTraceMetadata}>
+				<div data-testid={HOVER_ELEMENT_ID}>Relative time test</div>
+			</SpanHoverCard>,
+		);
+
+		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
+
+		// Hover and wait for popover
+		fireEvent.mouseEnter(hoverElement);
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+
+		// Check relative time display
+		expect(screen.getByText(/after trace start/)).toBeInTheDocument();
+	});
+
+	it('handles spans with no events correctly', async () => {
+		const spanWithoutEvents: Span = {
+			...mockSpan,
+			event: [],
+		};
+
+		render(
+			<SpanHoverCard span={spanWithoutEvents} traceMetadata={mockTraceMetadata}>
+				<div data-testid={HOVER_ELEMENT_ID}>No events test</div>
+			</SpanHoverCard>,
+		);
+
+		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
+
+		// Hover and wait for popover
+		fireEvent.mouseEnter(hoverElement);
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+
+		expect(screen.getByText('Events:')).toBeInTheDocument();
+		expect(screen.getByText('0')).toBeInTheDocument();
+	});
+
+	it('verifies mouseEnterDelay prop is set to 0.5', () => {
+		const { container } = render(
+			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
+				<div data-testid={HOVER_ELEMENT_ID}>Delay test</div>
+			</SpanHoverCard>,
+		);
+
+		// The mouseEnterDelay prop should be set on the Popover component
+		// This test verifies the implementation includes the delay
+		const popover = container.querySelector('.ant-popover');
+		expect(popover).not.toBeInTheDocument(); // Initially not visible
+
+		// Hover to trigger delay mechanism
+		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
+		fireEvent.mouseEnter(hoverElement);
+
+		// Should not appear before delay
+		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
+
+		// Should appear after delay
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+		expect(screen.getByText('Duration:')).toBeInTheDocument();
+	});
+});

frontend/src/constants/features.ts

@@ -11,6 +11,6 @@ export enum FeatureKeys {
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
 	USE_DASHBOARD_V2 = 'use_dashboard_v2',
-	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
+	EMABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',
 }

frontend/src/constants/routes.ts

@@ -89,8 +89,6 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
-	LLM_OBSERVABILITY_BASE: '/llm-observability',
-	LLM_OBSERVABILITY_MODEL_PRICING: '/llm-observability/settings/model-pricing',
 } as const;
 
 export default ROUTES;

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -48,48 +48,6 @@ describe('getAutoContexts', () => {
 		]);
 	});
 
-	it('includes the query in alert edit context', () => {
-		const ruleId = 'rule-edit';
-		const query = { queryType: 'builder', builder: { queryData: [] } };
-		const compositeQuery = encodeURIComponent(JSON.stringify(query));
-		const search = `?${QueryParams.ruleId}=${ruleId}&${QueryParams.compositeQuery}=${compositeQuery}`;
-
-		const contexts = getAutoContexts(ROUTES.EDIT_ALERTS, search);
-
-		expect(contexts).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: ruleId,
-				metadata: {
-					page: 'alert_edit',
-					ruleId,
-					query,
-				},
-			},
-		]);
-	});
-
-	it('includes the query in alert new context (no ruleId)', () => {
-		const query = { queryType: 'builder', builder: { queryData: [] } };
-		const compositeQuery = encodeURIComponent(JSON.stringify(query));
-		const search = `?${QueryParams.compositeQuery}=${compositeQuery}`;
-
-		const contexts = getAutoContexts(ROUTES.ALERTS_NEW, search);
-
-		expect(contexts).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: null,
-				metadata: {
-					page: 'alert_new',
-					query,
-				},
-			},
-		]);
-	});
-
 	it('returns triggered alerts context on alert history without ruleId', () => {
 		const contexts = getAutoContexts(ROUTES.ALERT_HISTORY, '');
 

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

@@ -377,63 +377,9 @@
 }
 
 .contextPopoverEmpty {
-	// Fill the entity panel so the state sits centred in the dead space rather
-	// than clinging to the top-left corner.
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 10px;
-	padding: 24px 20px;
-	text-align: center;
 	font-size: 12px;
 	color: var(--l3-foreground);
-}
-
-.contextPopoverEmptyIcon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 28px;
-	height: 28px;
-	// `--empty-accent` is set per category on the root (robin/cherry/forest).
-	color: var(--empty-accent);
-	background: color-mix(in srgb, var(--empty-accent), transparent 88%);
-	border-radius: var(--radius-2);
-}
-
-.contextPopoverEmptyTitle {
-	margin: 0;
-	max-width: 280px;
-	color: var(--l2-foreground);
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1.4;
-	// Clamp to 2 lines with an ellipsis so a long query can't blow out the
-	// popover height. The CTA below is a stock DS link button, so the query is
-	// kept readable here rather than forcing the button to wrap.
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 2;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	overflow-wrap: anywhere;
-}
-
-.contextPopoverEmptyCta {
-	max-width: 100%;
-}
-
-.contextPopoverEmptyCtaLabel {
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	overflow-wrap: anywhere;
-	text-align: center;
+	padding: 10px 8px;
 }
 
 .micBtn {

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

@@ -42,22 +42,19 @@ import { useSpeechRecognition } from '../../hooks/useSpeechRecognition';
 import { MessageAttachment } from '../../types';
 import { MessageContext } from '../../../../api/ai-assistant/chat';
 import {
+	Bell,
+	LayoutDashboard,
 	Mic,
 	Plus,
 	Search,
 	Send,
+	ShieldCheck,
 	Square,
 	TriangleAlert,
 	X,
 } from '@signozhq/icons';
 
 import styles from './ChatInput.module.scss';
-import ContextPickerEmptyState from './ContextPickerEmptyState';
-import {
-	CONTEXT_CATEGORIES,
-	CONTEXT_CATEGORY_ICONS,
-	ContextCategory,
-} from './contextPicker';
 
 interface ChatInputProps {
 	onSend: (
@@ -165,6 +162,10 @@ const HOME_SERVICES_INTERVAL = 30 * 60 * 1000;
 /** sessionStorage key for the "voice input failed this tab" flag. */
 const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
 
+const CONTEXT_CATEGORIES = ['Dashboards', 'Alerts', 'Services'] as const;
+
+type ContextCategory = (typeof CONTEXT_CATEGORIES)[number];
+
 interface SelectedContextItem {
 	category: ContextCategory;
 	entityId: string;
@@ -204,6 +205,12 @@ interface ContextEntityItem {
 	value: string;
 }
 
+const CONTEXT_CATEGORY_ICONS = {
+	Dashboards: LayoutDashboard,
+	Alerts: Bell,
+	Services: ShieldCheck,
+} satisfies Record<ContextCategory, unknown>;
+
 function fileToDataUrl(file: File): Promise<string> {
 	return new Promise((resolve, reject) => {
 		const reader = new FileReader();
@@ -324,30 +331,6 @@ export default function ChatInput({
 		[mentionRange, selectedContexts, text],
 	);
 
-	// Empty-state CTA: drop a starter prompt into the composer (never auto-sent)
-	// and hand the user the caret at the end so they can finish the sentence.
-	const handleContextPrefill = useCallback(
-		(prompt: string) => {
-			const next = capText(prompt);
-			setText(next);
-			committedTextRef.current = next;
-			setMentionRange(null);
-			setPickerSearchQuery('');
-			setIsContextPickerOpen(false);
-			// Defer so React commits the new value before we place the caret.
-			requestAnimationFrame(() => {
-				const el = textareaRef.current;
-				if (!el) {
-					return;
-				}
-				el.focus();
-				const end = el.value.length;
-				el.setSelectionRange(end, end);
-			});
-		},
-		[capText],
-	);
-
 	const focusCategory = useCallback((category: ContextCategory) => {
 		setActiveContextCategory(category);
 		setPickerSearchQuery('');
@@ -841,14 +824,10 @@ export default function ChatInput({
 	// Type-ahead filter against the `@<query>` typed in the textarea. When
 	// the picker was opened from the "Add Context" button there's no
 	// mention query, so fall back to the in-popover search input.
-	const rawMentionQuery = mentionRange
-		? text.slice(mentionRange.start + 1, mentionRange.end)
+	const mentionQuery = mentionRange
+		? text.slice(mentionRange.start + 1, mentionRange.end).toLowerCase()
 		: '';
-	const mentionQuery = rawMentionQuery.toLowerCase();
 	const activeQuery = mentionQuery || pickerSearchQuery.trim().toLowerCase();
-	// Original-case query for empty-state copy + prefill ("checkout", not the
-	// lowercased filter key). Mirrors `activeQuery`'s mention-then-search order.
-	const displayQuery = rawMentionQuery || pickerSearchQuery.trim();
 	const filteredContextOptions = activeQuery
 		? contextEntitiesByCategory[activeContextCategory].filter((entity) =>
 				entity.value.toLowerCase().includes(activeQuery),
@@ -1092,11 +1071,9 @@ export default function ChatInput({
 												Failed to load {activeContextCategory.toLowerCase()}.
 											</div>
 										) : filteredContextOptions.length === 0 ? (
-											<ContextPickerEmptyState
-												category={activeContextCategory}
-												query={displayQuery}
-												onPrefill={handleContextPrefill}
-											/>
+											<div className={styles.contextPopoverEmpty}>
+												No matching entities
+											</div>
 										) : (
 											filteredContextOptions.map((option, index) => {
 												const isSelected = selectedContexts.some(

frontend/src/container/AIAssistant/components/ChatInput/ContextPickerEmptyState.tsx

@@ -1,68 +0,0 @@
-import { Sparkles } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import type { CSSProperties } from 'react';
-
-import styles from './ChatInput.module.scss';
-import {
-	CONTEXT_CATEGORY_ICONS,
-	ContextCategory,
-	getContextPickerEmptyContent,
-} from './contextPicker';
-
-// Per-category accent, mapped to semantic accent tokens (robin is the brand
-// primary). Exposed to the SCSS as the `--empty-accent` custom property so the
-// icon and CTA share one colour per category.
-const CATEGORY_ACCENT: Record<ContextCategory, string> = {
-	Dashboards: 'var(--accent-primary)',
-	Alerts: 'var(--accent-cherry)',
-	Services: 'var(--accent-forest)',
-};
-
-interface ContextPickerEmptyStateProps {
-	category: ContextCategory;
-	/** The active search query (mention or in-popover search), original case. */
-	query: string;
-	/** Drops the starter prompt into the composer (never auto-sends). */
-	onPrefill: (prompt: string) => void;
-}
-
-/**
- * Empty state for the @-mention context picker. Distinguishes a brand-new user
- * with nothing to pick (onboarding) from a search that matched nothing, and in
- * both cases offers a clickable CTA that seeds the composer.
- */
-export default function ContextPickerEmptyState({
-	category,
-	query,
-	onPrefill,
-}: ContextPickerEmptyStateProps): JSX.Element {
-	const { title, ctaLabel, prefill } = getContextPickerEmptyContent(
-		category,
-		query,
-	);
-	const CategoryIcon = CONTEXT_CATEGORY_ICONS[category];
-
-	return (
-		<div
-			className={styles.contextPopoverEmpty}
-			style={{ '--empty-accent': CATEGORY_ACCENT[category] } as CSSProperties}
-		>
-			<span className={styles.contextPopoverEmptyIcon} aria-hidden="true">
-				<CategoryIcon size={16} />
-			</span>
-			<p className={styles.contextPopoverEmptyTitle}>{title}</p>
-			<Button
-				type="button"
-				variant="link"
-				size="sm"
-				color="primary"
-				className={styles.contextPopoverEmptyCta}
-				onClick={(): void => onPrefill(prefill)}
-				data-testid={`ai-context-empty-cta-${category}`}
-				prefix={<Sparkles size={14} />}
-			>
-				<span className={styles.contextPopoverEmptyCtaLabel}>{ctaLabel}</span>
-			</Button>
-		</div>
-	);
-}

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.prefill.test.tsx

@@ -1,113 +0,0 @@
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-// The prefill flow only depends on the context-picker data hooks resolving to
-// empty lists (so the empty state renders) — mock them to skip real fetches.
-jest.mock('hooks/dashboard/useGetAllDashboard', () => ({
-	useGetAllDashboard: (): unknown => ({
-		data: [],
-		isLoading: false,
-		isError: false,
-	}),
-}));
-
-jest.mock('api/generated/services/rules', () => ({
-	useListRules: (): unknown => ({ data: [], isLoading: false, isError: false }),
-	getListRulesQueryKey: (): string[] => ['rules'],
-}));
-
-jest.mock('hooks/useQueryService', () => ({
-	useQueryService: (): unknown => ({
-		data: [],
-		isLoading: false,
-		isFetching: false,
-		isError: false,
-	}),
-}));
-
-// Irrelevant to the prefill flow and otherwise require browser APIs / extra
-// context providers, so stub them out.
-jest.mock('../../../hooks/useSpeechRecognition', () => ({
-	useSpeechRecognition: (): unknown => ({
-		isListening: false,
-		isSupported: false,
-		permission: 'prompt',
-		start: jest.fn(),
-		discard: jest.fn(),
-	}),
-}));
-
-jest.mock('../../../hooks/useAIAssistantAnalyticsContext', () => ({
-	useAIAssistantAnalyticsContext: (): unknown => ({
-		threadId: undefined,
-		page: '/',
-		mode: 'sidepane',
-	}),
-}));
-
-// eslint-disable-next-line import/first
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-// eslint-disable-next-line import/first
-import ChatInput from '../ChatInput';
-
-function renderChatInput(): void {
-	render(
-		<TooltipProvider>
-			<ChatInput onSend={jest.fn()} />
-		</TooltipProvider>,
-	);
-}
-
-function getComposer(): HTMLTextAreaElement {
-	return screen.getByPlaceholderText(/Ask anything/i) as HTMLTextAreaElement;
-}
-
-describe('ChatInput — empty-state CTA prefill flow', () => {
-	it('full-replaces existing prose with the query-seeded prompt and closes the picker', async () => {
-		renderChatInput();
-
-		// Pre-existing prose in the composer.
-		await userEvent.type(getComposer(), 'show me something');
-
-		// Open the picker and search for an entity that does not exist.
-		await userEvent.click(screen.getByRole('button', { name: /add context/i }));
-		await userEvent.type(
-			await screen.findByPlaceholderText(/search dashboards/i),
-			'chk',
-		);
-
-		const cta = await screen.findByTestId('ai-context-empty-cta-Dashboards');
-		expect(cta).toHaveTextContent('Create a dashboard for "chk"');
-
-		await userEvent.click(cta);
-
-		// Full-replace is intentional: the prefill is a complete sentence, so the
-		// prior "show me something" prose is discarded rather than producing
-		// broken grammar (see handleContextPrefill). The query is seeded in.
-		expect(getComposer().value).toBe('Create a dashboard for chk');
-
-		// Picker closed → the empty-state CTA is gone.
-		await waitFor(() =>
-			expect(
-				screen.queryByTestId('ai-context-empty-cta-Dashboards'),
-			).not.toBeInTheDocument(),
-		);
-	});
-
-	it('seeds only the prefix (with trailing space) in the onboarding case', async () => {
-		renderChatInput();
-
-		await userEvent.click(screen.getByRole('button', { name: /add context/i }));
-
-		const cta = await screen.findByTestId('ai-context-empty-cta-Dashboards');
-		expect(cta).toHaveTextContent('Ask me to create one');
-
-		await userEvent.click(cta);
-
-		expect(getComposer().value).toBe('Create a dashboard for ');
-		await waitFor(() =>
-			expect(
-				screen.queryByTestId('ai-context-empty-cta-Dashboards'),
-			).not.toBeInTheDocument(),
-		);
-	});
-});

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ContextPickerEmptyState.test.tsx

@@ -1,135 +0,0 @@
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import { ContextCategory } from '../contextPicker';
-import ContextPickerEmptyState from '../ContextPickerEmptyState';
-
-function renderEmptyState(
-	category: ContextCategory,
-	query: string,
-	onPrefill = jest.fn(),
-): { onPrefill: jest.Mock; container: HTMLElement } {
-	const { container } = render(
-		<ContextPickerEmptyState
-			category={category}
-			query={query}
-			onPrefill={onPrefill}
-		/>,
-	);
-	return { onPrefill, container };
-}
-
-function ctaFor(category: ContextCategory): HTMLElement {
-	return screen.getByTestId(`ai-context-empty-cta-${category}`);
-}
-
-describe('ContextPickerEmptyState', () => {
-	describe('onboarding (no query)', () => {
-		it('renders dashboards copy and prefills the prefix only', async () => {
-			const { onPrefill } = renderEmptyState('Dashboards', '');
-
-			expect(screen.getByText('No dashboards yet.')).toBeInTheDocument();
-			const cta = ctaFor('Dashboards');
-			expect(cta).toHaveTextContent('Ask me to create one');
-
-			await userEvent.click(cta);
-			expect(onPrefill).toHaveBeenCalledTimes(1);
-			expect(onPrefill).toHaveBeenCalledWith('Create a dashboard for ');
-		});
-
-		it('renders alerts copy and prefills the prefix only', async () => {
-			const { onPrefill } = renderEmptyState('Alerts', '');
-
-			expect(screen.getByText('No alerts yet.')).toBeInTheDocument();
-			expect(ctaFor('Alerts')).toHaveTextContent('Ask me to create one');
-
-			await userEvent.click(ctaFor('Alerts'));
-			expect(onPrefill).toHaveBeenCalledWith('Create an alert for ');
-		});
-
-		it('renders instrumentation-flavoured services copy and prefill', async () => {
-			const { onPrefill } = renderEmptyState('Services', '');
-
-			expect(
-				screen.getByText('No services reporting data yet.'),
-			).toBeInTheDocument();
-			expect(ctaFor('Services')).toHaveTextContent(
-				'Ask me to help set up instrumentation',
-			);
-
-			await userEvent.click(ctaFor('Services'));
-			expect(onPrefill).toHaveBeenCalledWith(
-				'Help me set up instrumentation for ',
-			);
-		});
-
-		it('treats a whitespace-only query as onboarding', () => {
-			renderEmptyState('Dashboards', '   ');
-			expect(screen.getByText('No dashboards yet.')).toBeInTheDocument();
-		});
-	});
-
-	describe('search miss (query, no match)', () => {
-		it('seeds the query into dashboards copy and prefill', async () => {
-			const { onPrefill } = renderEmptyState('Dashboards', 'checkout');
-
-			expect(
-				screen.getByText('No dashboards match "checkout".'),
-			).toBeInTheDocument();
-			expect(ctaFor('Dashboards')).toHaveTextContent(
-				'Create a dashboard for "checkout"',
-			);
-
-			await userEvent.click(ctaFor('Dashboards'));
-			expect(onPrefill).toHaveBeenCalledWith('Create a dashboard for checkout');
-		});
-
-		it('seeds the query into alerts copy and prefill', async () => {
-			const { onPrefill } = renderEmptyState('Alerts', 'checkout');
-
-			expect(screen.getByText('No alerts match "checkout".')).toBeInTheDocument();
-			await userEvent.click(ctaFor('Alerts'));
-			expect(onPrefill).toHaveBeenCalledWith('Create an alert for checkout');
-		});
-
-		it('uses instrumentation wording for services search misses', async () => {
-			const { onPrefill } = renderEmptyState('Services', 'checkout');
-
-			expect(
-				screen.getByText('No services match "checkout".'),
-			).toBeInTheDocument();
-			await userEvent.click(ctaFor('Services'));
-			expect(onPrefill).toHaveBeenCalledWith(
-				'Help me set up instrumentation for checkout',
-			);
-		});
-
-		it('preserves the original casing of the query in copy and prefill', async () => {
-			const { onPrefill } = renderEmptyState('Dashboards', 'Checkout API');
-
-			expect(
-				screen.getByText('No dashboards match "Checkout API".'),
-			).toBeInTheDocument();
-			await userEvent.click(ctaFor('Dashboards'));
-			expect(onPrefill).toHaveBeenCalledWith(
-				'Create a dashboard for Checkout API',
-			);
-		});
-	});
-
-	describe('per-category accent token', () => {
-		it.each<[ContextCategory, string]>([
-			['Dashboards', 'var(--accent-primary)'],
-			['Alerts', 'var(--accent-cherry)'],
-			['Services', 'var(--accent-forest)'],
-		])('maps %s to the semantic accent %s', (category, accent) => {
-			const { container } = renderEmptyState(category, '');
-			const root = container.firstChild as HTMLElement;
-			expect(root.style.getPropertyValue('--empty-accent')).toBe(accent);
-		});
-	});
-
-	it('does not auto-send: nothing fires until the CTA is clicked', () => {
-		const { onPrefill } = renderEmptyState('Dashboards', 'checkout');
-		expect(onPrefill).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/AIAssistant/components/ChatInput/__tests__/contextPicker.test.ts

@@ -1,100 +0,0 @@
-import {
-	CONTEXT_CATEGORIES,
-	getContextPickerEmptyContent,
-} from '../contextPicker';
-
-describe('getContextPickerEmptyContent', () => {
-	describe('onboarding (no query)', () => {
-		it('returns per-category copy and prefix-only prefill for dashboards', () => {
-			expect(getContextPickerEmptyContent('Dashboards', '')).toStrictEqual({
-				title: 'No dashboards yet.',
-				ctaLabel: 'Ask me to create one',
-				prefill: 'Create a dashboard for ',
-			});
-		});
-
-		it('returns per-category copy and prefix-only prefill for alerts', () => {
-			expect(getContextPickerEmptyContent('Alerts', '')).toStrictEqual({
-				title: 'No alerts yet.',
-				ctaLabel: 'Ask me to create one',
-				prefill: 'Create an alert for ',
-			});
-		});
-
-		it('returns instrumentation-flavoured copy for services', () => {
-			expect(getContextPickerEmptyContent('Services', '')).toStrictEqual({
-				title: 'No services reporting data yet.',
-				ctaLabel: 'Ask me to help set up instrumentation',
-				prefill: 'Help me set up instrumentation for ',
-			});
-		});
-
-		it('treats a whitespace-only query as no query', () => {
-			expect(getContextPickerEmptyContent('Dashboards', '   ')).toStrictEqual({
-				title: 'No dashboards yet.',
-				ctaLabel: 'Ask me to create one',
-				prefill: 'Create a dashboard for ',
-			});
-		});
-
-		it('leaves the prefill ending in a space so the caret sits after it', () => {
-			CONTEXT_CATEGORIES.forEach((category) => {
-				expect(getContextPickerEmptyContent(category, '').prefill).toMatch(/ $/);
-			});
-		});
-	});
-
-	describe('search miss (query, no match)', () => {
-		it('seeds the query into dashboards copy and prefill', () => {
-			expect(getContextPickerEmptyContent('Dashboards', 'checkout')).toStrictEqual(
-				{
-					title: 'No dashboards match "checkout".',
-					ctaLabel: 'Create a dashboard for "checkout"',
-					prefill: 'Create a dashboard for checkout',
-				},
-			);
-		});
-
-		it('seeds the query into alerts copy and prefill', () => {
-			expect(getContextPickerEmptyContent('Alerts', 'checkout')).toStrictEqual({
-				title: 'No alerts match "checkout".',
-				ctaLabel: 'Create an alert for "checkout"',
-				prefill: 'Create an alert for checkout',
-			});
-		});
-
-		it('uses instrumentation wording for services search misses', () => {
-			expect(getContextPickerEmptyContent('Services', 'checkout')).toStrictEqual({
-				title: 'No services match "checkout".',
-				ctaLabel: 'Set up instrumentation for "checkout"',
-				prefill: 'Help me set up instrumentation for checkout',
-			});
-		});
-
-		it('preserves the original casing of the query', () => {
-			const { title, ctaLabel, prefill } = getContextPickerEmptyContent(
-				'Dashboards',
-				'Checkout API',
-			);
-			expect(title).toBe('No dashboards match "Checkout API".');
-			expect(ctaLabel).toBe('Create a dashboard for "Checkout API"');
-			expect(prefill).toBe('Create a dashboard for Checkout API');
-		});
-
-		it('trims surrounding whitespace from the query', () => {
-			expect(
-				getContextPickerEmptyContent('Dashboards', '  checkout  ').prefill,
-			).toBe('Create a dashboard for checkout');
-		});
-	});
-
-	it('never emits an em-dash (house style)', () => {
-		CONTEXT_CATEGORIES.forEach((category) => {
-			const empty = getContextPickerEmptyContent(category, '');
-			const miss = getContextPickerEmptyContent(category, 'q');
-			[empty, miss].forEach(({ title, ctaLabel, prefill }) => {
-				expect(`${title}${ctaLabel}${prefill}`).not.toContain('—');
-			});
-		});
-	});
-});

frontend/src/container/AIAssistant/components/ChatInput/contextPicker.ts

@@ -1,103 +0,0 @@
-import { Bell, LayoutDashboard, ShieldCheck } from '@signozhq/icons';
-
-/** Ordered category tabs shown in the @-mention context picker. */
-export const CONTEXT_CATEGORIES = ['Dashboards', 'Alerts', 'Services'] as const;
-
-export type ContextCategory = (typeof CONTEXT_CATEGORIES)[number];
-
-/**
- * Icon per category, shared by the picker tablist and the empty state. `satisfies`
- * keeps the concrete component types so callers can render `<Icon size={n} />`.
- */
-export const CONTEXT_CATEGORY_ICONS = {
-	Dashboards: LayoutDashboard,
-	Alerts: Bell,
-	Services: ShieldCheck,
-} satisfies Record<ContextCategory, unknown>;
-
-/**
- * Resolved copy + composer prefill for one render of the context picker's empty
- * state. The picker is tabbed, so a user only ever views one category at a
- * time — each category gets its own onboarding and search-miss copy rather than
- * a single combined "nothing to show" line.
- */
-export interface ContextPickerEmptyContent {
-	/** Primary line explaining why the list is empty. */
-	title: string;
-	/** Clickable call to action that prefills (never auto-sends) the composer. */
-	ctaLabel: string;
-	/**
-	 * Text dropped into the composer when the CTA is clicked. When there's no
-	 * search query this is just the prefix with a trailing space, leaving the
-	 * caret at the end for the user to type the entity name.
-	 */
-	prefill: string;
-}
-
-interface CategoryCopy {
-	/** Onboarding line, e.g. "No dashboards yet." */
-	emptyTitle: string;
-	/** Onboarding CTA label, e.g. "Ask me to create one". */
-	emptyCtaLabel: string;
-	/** Search-miss line, e.g. `No dashboards match "checkout".` */
-	matchTitle: (query: string) => string;
-	/** Search-miss CTA label, e.g. `Create a dashboard for "checkout"`. */
-	matchCtaLabel: (query: string) => string;
-	/**
-	 * Composer prefill prefix (with trailing space). The prefill is always
-	 * `${prefillPrefix}${query}`, so the search-miss case seeds the query and
-	 * the onboarding case leaves only the prefix.
-	 */
-	prefillPrefix: string;
-}
-
-// Services get instrumentation-flavoured copy: the assistant can't "create" a
-// service, they come from telemetry, so the CTA points at setup instead.
-const CONTEXT_PICKER_COPY: Record<ContextCategory, CategoryCopy> = {
-	Dashboards: {
-		emptyTitle: 'No dashboards yet.',
-		emptyCtaLabel: 'Ask me to create one',
-		matchTitle: (query) => `No dashboards match "${query}".`,
-		matchCtaLabel: (query) => `Create a dashboard for "${query}"`,
-		prefillPrefix: 'Create a dashboard for ',
-	},
-	Alerts: {
-		emptyTitle: 'No alerts yet.',
-		emptyCtaLabel: 'Ask me to create one',
-		matchTitle: (query) => `No alerts match "${query}".`,
-		matchCtaLabel: (query) => `Create an alert for "${query}"`,
-		prefillPrefix: 'Create an alert for ',
-	},
-	Services: {
-		emptyTitle: 'No services reporting data yet.',
-		emptyCtaLabel: 'Ask me to help set up instrumentation',
-		matchTitle: (query) => `No services match "${query}".`,
-		matchCtaLabel: (query) => `Set up instrumentation for "${query}"`,
-		prefillPrefix: 'Help me set up instrumentation for ',
-	},
-};
-
-/**
- * Build the empty-state copy for a category. The two states are driven solely
- * by whether a search query is active: a non-empty query yields the search-miss
- * variant, an empty query the onboarding variant.
- */
-export function getContextPickerEmptyContent(
-	category: ContextCategory,
-	query: string,
-): ContextPickerEmptyContent {
-	const copy = CONTEXT_PICKER_COPY[category];
-	const trimmed = query.trim();
-	if (trimmed) {
-		return {
-			title: copy.matchTitle(trimmed),
-			ctaLabel: copy.matchCtaLabel(trimmed),
-			prefill: `${copy.prefillPrefix}${trimmed}`,
-		};
-	}
-	return {
-		title: copy.emptyTitle,
-		ctaLabel: copy.emptyCtaLabel,
-		prefill: copy.prefillPrefix,
-	};
-}

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -124,9 +124,7 @@ export function getAutoContexts(
 		}
 	}
 
-	// Alert edit — `/alerts/edit?ruleId=…`. The form syncs its query-builder
-	// state to the URL (`useShareBuilderUrl`), so shared metadata carries the
-	// alert's query + time range, mirroring the dashboard panel editor.
+	// Alert edit — `/alerts/edit?ruleId=…`.
 	if (matchPath(pathname, { path: ROUTES.EDIT_ALERTS, exact: true })) {
 		const ruleId = params.get(QueryParams.ruleId);
 		if (ruleId) {
@@ -135,21 +133,19 @@ export function getAutoContexts(
 					source: 'auto',
 					type: 'alert',
 					resourceId: ruleId,
-					metadata: { page: 'alert_edit', ruleId, ...sharedMetadata },
+					metadata: { page: 'alert_edit', ruleId },
 				},
 			];
 		}
 	}
 
-	// Alert new — `/alerts/new`. No rule id yet (draft), but the query-builder
-	// state is on the URL, so shared metadata carries the in-progress query.
 	if (matchPath(pathname, { path: ROUTES.ALERTS_NEW, exact: true })) {
 		return [
 			{
 				source: 'auto',
 				type: 'alert',
 				resourceId: null,
-				metadata: { page: 'alert_new', ...sharedMetadata },
+				metadata: { page: 'alert_new' },
 			},
 		];
 	}

frontend/src/container/LLMObservability/LLMObservability.module.scss

@@ -1,27 +0,0 @@
-.llmObservability {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-12) var(--spacing-16);
-}
-
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.pageHeaderTitle {
-	.title {
-		margin: 0;
-		font-size: var(--font-size-xl);
-		font-weight: var(--font-weight-semibold);
-	}
-
-	.subtitle {
-		margin: var(--spacing-2) 0 0;
-		color: var(--text-vanilla-400);
-		font-size: var(--periscope-font-size-base);
-	}
-}

frontend/src/container/LLMObservability/LLMObservability.tsx

@@ -1,18 +0,0 @@
-import styles from './LLMObservability.module.scss';
-
-function LLMObservability(): JSX.Element {
-	return (
-		<div className={styles.llmObservability} data-testid="llm-observability-page">
-			<header className={styles.pageHeader}>
-				<div className={styles.pageHeaderTitle}>
-					<h1 className={styles.title}>LLM Observability</h1>
-					<p className={styles.subtitle}>
-						Monitor and analyze your LLM usage, costs, and performance
-					</p>
-				</div>
-			</header>
-		</div>
-	);
-}
-
-export default LLMObservability;

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -1,30 +0,0 @@
-.llmObservabilityModelPricing {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-12) var(--spacing-16);
-}
-
-.pageHeader {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.pageHeaderTitle {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	.title {
-		margin: 0;
-		font-size: var(--font-size-xl);
-		font-weight: var(--font-weight-semibold);
-	}
-
-	.subtitle {
-		margin: var(--spacing-2) 0 0;
-		color: var(--text-vanilla-400);
-		font-size: var(--periscope-font-size-base);
-	}
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx

@@ -1,47 +0,0 @@
-import { Tabs } from '@signozhq/ui/tabs';
-import { Typography } from '@signozhq/ui/typography';
-
-import ModelCostTabPanel from './ModelCostTabPanel';
-import styles from './LLMObservabilityModelPricing.module.scss';
-
-function LLMObservabilityModelPricing(): JSX.Element {
-	return (
-		<div
-			className={styles.llmObservabilityModelPricing}
-			data-testid="llm-observability-model-pricing-page"
-		>
-			<header className={styles.pageHeader}>
-				<div className={styles.pageHeaderTitle}>
-					<Typography.Text as="h1" size="large" weight="semibold">
-						Configuration
-					</Typography.Text>
-					<Typography.Text color="muted">
-						Model pricing and cost estimation settings
-					</Typography.Text>
-				</div>
-			</header>
-
-			<Tabs
-				// Model costs is the only enabled tab for now, so default to it. When
-				// the unpriced-models tab lands, this can become a URL-backed param.
-				defaultValue="model-costs"
-				items={[
-					{
-						key: 'model-costs',
-						label: 'Model costs',
-						children: <ModelCostTabPanel />,
-					},
-					{
-						// Unpriced-models tab lands in a later PR.
-						key: 'unpriced-models',
-						label: 'Unpriced models',
-						disabled: true,
-						children: null,
-					},
-				]}
-			/>
-		</div>
-	);
-}
-
-export default LLMObservabilityModelPricing;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.module.scss

@@ -1,7 +0,0 @@
-.pageError {
-	padding: var(--spacing-6) var(--spacing-8);
-	border-radius: var(--radius-2);
-	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
-	color: var(--text-cherry-400);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
-import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
-import { useTableParams } from 'components/TanStackTableView';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LIMIT_KEY, PAGE_KEY, PAGE_SIZE } from '../constants';
-import styles from './ModelCostTabPanel.module.scss';
-import ModelCostsTable from './components/ModelCostsTable';
-import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-function ModelCostTabPanel(): JSX.Element {
-	const { page, limit } = useTableParams(
-		{ page: PAGE_KEY, limit: LIMIT_KEY },
-		{ page: 1, limit: PAGE_SIZE },
-	);
-
-	// Search + source filters are intentionally omitted for now — the list API
-	// doesn't honour them yet. They'll be reintroduced here once it does.
-	const listParams: ListLLMPricingRulesParams = {
-		offset: (page - 1) * limit,
-		limit,
-	};
-
-	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
-
-	const rules: LlmpricingruletypesLLMPricingRuleDTO[] = useMemo(
-		() => data?.data?.items || [],
-		[data],
-	);
-	const total = data?.data?.total ?? 0;
-
-	return (
-		<>
-			{isError && (
-				<div className={styles.pageError} role="alert">
-					Failed to load pricing rules. Please try again.
-				</div>
-			)}
-
-			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
-			<ModelCostsTable
-				rules={rules}
-				isLoading={isLoading}
-				total={total}
-				selectedRuleId={null}
-				canManage={false}
-				onEdit={(): void => undefined}
-				onDelete={(): void => undefined}
-			/>
-
-			<footer>
-				<Typography.Text color="muted" size="small">
-					All prices per 1M tokens (USD)
-				</Typography.Text>
-			</footer>
-		</>
-	);
-}
-
-export default ModelCostTabPanel;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostActionsMenu.module.scss

@@ -1,8 +0,0 @@
-.actionButton {
-	opacity: 0.7;
-	transition: opacity 0.15s ease;
-
-	&:hover {
-		opacity: 1;
-	}
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostActionsMenu.tsx

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-import { Ellipsis } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-import styles from './ModelCostActionsMenu.module.scss';
-
-interface ModelCostActionsMenuProps {
-	rule: LlmpricingruletypesLLMPricingRuleDTO;
-	canManage: boolean;
-	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
-	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
-}
-
-// Per-row kebab menu for the model-costs table. Only manage users get actions
-// (Edit + Delete); view-only users have nothing to act on, so the cell stays
-// empty rather than showing a single-item menu.
-function ModelCostActionsMenu({
-	rule,
-	canManage,
-	onEdit,
-	onDelete,
-}: ModelCostActionsMenuProps): JSX.Element | null {
-	const menuItems = useMemo<MenuItem[]>(
-		() => [
-			{
-				key: 'edit',
-				label: 'Edit',
-				onClick: (): void => onEdit(rule),
-			},
-			{
-				key: 'delete',
-				label: 'Delete',
-				danger: true,
-				onClick: (): void => onDelete(rule),
-			},
-		],
-		[onEdit, onDelete, rule],
-	);
-
-	if (!canManage) {
-		return null;
-	}
-
-	return (
-		<DropdownMenuSimple menu={{ items: menuItems }} align="end">
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="icon"
-				className={styles.actionButton}
-				testId={`model-cost-actions-${rule.id}`}
-			>
-				<Ellipsis size={16} />
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default ModelCostActionsMenu;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss

@@ -1,20 +0,0 @@
-.modelCostsTable {
-	margin-top: var(--spacing-8);
-	--tanstack-table-row-height: 48px;
-	height: calc(100vh - 250px);
-	overflow-y: auto;
-
-	:global(table) tbody tr {
-		cursor: default;
-	}
-}
-
-.modelCostsEmpty {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-top: var(--spacing-8);
-	min-height: 400px;
-	color: var(--text-vanilla-400);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.tsx

@@ -1,73 +0,0 @@
-import { useMemo } from 'react';
-import TanStackTable from 'components/TanStackTableView';
-
-import {
-	LIMIT_KEY,
-	PAGE_KEY,
-	PAGE_SIZE,
-	SKELETON_ROW_COUNT,
-} from '../../../constants';
-import styles from './ModelCostsTable.module.scss';
-import { getModelCostsColumns } from './TableConfig';
-import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-interface ModelCostsTableProps {
-	rules: LlmpricingruletypesLLMPricingRuleDTO[];
-	isLoading: boolean;
-	total: number;
-	selectedRuleId: string | null;
-	canManage: boolean;
-	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
-	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
-}
-
-// The table owns its own pagination URL state (page/limit) via enableQueryParams;
-// ModelCostsTab reads the same keys to build the list request. Virtual scroll is
-// disabled: a plain table renders fine at our page sizes (up to 100 rows) and the
-// fixed-height scroll viewport (.modelCostsTable) keeps large pages scrolling
-// inside the table.
-function ModelCostsTable({
-	rules,
-	isLoading,
-	total,
-	selectedRuleId,
-	canManage,
-	onEdit,
-	onDelete,
-}: ModelCostsTableProps): JSX.Element {
-	const columns = useMemo(
-		() => getModelCostsColumns({ canManage, onEdit, onDelete }),
-		[canManage, onEdit, onDelete],
-	);
-
-	if (!isLoading && rules.length === 0) {
-		return (
-			<div className={styles.modelCostsEmpty} data-testid="model-costs-empty">
-				No model costs yet.
-			</div>
-		);
-	}
-
-	return (
-		<TanStackTable<LlmpricingruletypesLLMPricingRuleDTO>
-			className={styles.modelCostsTable}
-			data={rules}
-			columns={columns}
-			isLoading={isLoading}
-			skeletonRowCount={SKELETON_ROW_COUNT}
-			getRowKey={(row): string => row.id}
-			isRowActive={(row): boolean => row.id === selectedRuleId}
-			disableVirtualScroll
-			testId="model-costs-table"
-			enableQueryParams={{ page: PAGE_KEY, limit: LIMIT_KEY }}
-			pagination={{
-				total,
-				defaultLimit: PAGE_SIZE,
-				showTotalCount: true,
-				totalCountLabel: 'models',
-			}}
-		/>
-	);
-}
-
-export default ModelCostsTable;

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/index.ts

@@ -1 +0,0 @@
-export { getModelCostsColumns } from './table.config';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/table.config.tsx

@@ -1,161 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import type { TableColumnDef } from 'components/TanStackTableView';
-import { startCase } from 'lodash-es';
-
-import styles from './tableConfig.module.scss';
-import ModelCostActionsMenu from '../ModelCostActionsMenu';
-import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	formatPricePerMillion,
-	getCanonicalId,
-	getExtraBuckets,
-	getRelativeLastSeen,
-	getSourceLabel,
-} from '../../../../utils';
-
-interface ColumnsConfig {
-	canManage: boolean;
-	onEdit: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
-	onDelete: (rule: LlmpricingruletypesLLMPricingRuleDTO) => void;
-}
-
-// Column definitions for the model-costs TanStackTable. Sorting is intentionally
-// off across the board — the list API only accepts offset/limit, so there's no
-// server-side ordering to back a sortable header yet.
-export function getModelCostsColumns({
-	canManage,
-	onEdit,
-	onDelete,
-}: ColumnsConfig): TableColumnDef<LlmpricingruletypesLLMPricingRuleDTO>[] {
-	return [
-		{
-			id: 'model',
-			header: 'Model',
-			accessorFn: (row): string => row.modelName ?? '',
-			// Flexes to absorb spare width alongside Extra buckets so the row fills
-			// the container instead of leaving a gap on the right.
-			width: { min: 240, default: '100%' },
-			enableMove: false,
-			enableRemove: false,
-			cell: ({ row }): JSX.Element => (
-				<div className={styles.modelCell}>
-					<Typography.Text
-						weight="semibold"
-						truncate={1}
-						testId={`model-cell-name-${row.id}`}
-					>
-						{row.modelName}
-					</Typography.Text>
-
-					<Typography.Text truncate={1}>{getCanonicalId(row)}</Typography.Text>
-				</div>
-			),
-		},
-		{
-			id: 'provider',
-			header: 'Provider',
-			accessorKey: 'provider',
-			width: { min: 140 },
-			enableMove: false,
-			cell: ({ row }): string => row.provider ?? '',
-		},
-		{
-			id: 'input',
-			header: 'Input / 1M',
-			width: { min: 120 },
-			enableMove: false,
-			cell: ({ row }): JSX.Element => (
-				<Typography.Text>
-					{formatPricePerMillion(row.pricing?.input)}
-				</Typography.Text>
-			),
-		},
-		{
-			id: 'output',
-			header: 'Output / 1M',
-			width: { min: 120 },
-			enableMove: false,
-			cell: ({ row }): JSX.Element => (
-				<Typography.Text>
-					{formatPricePerMillion(row.pricing?.output)}
-				</Typography.Text>
-			),
-		},
-		{
-			id: 'extraBuckets',
-			header: 'Extra buckets',
-			width: { min: 200, default: '100%' },
-			enableMove: false,
-			cell: ({ row }): JSX.Element => {
-				const buckets = getExtraBuckets(row);
-				if (buckets.length === 0) {
-					return (
-						<Typography.Text color="muted" as="span">
-							—
-						</Typography.Text>
-					);
-				}
-				return (
-					<div className={styles.extraBuckets}>
-						{buckets.map((bucket) => (
-							<Badge
-								key={bucket.key}
-								color="vanilla"
-								variant="outline"
-								className={styles.extraBucketsChip}
-							>
-								<Typography.Text as="span" size="small">
-									{startCase(bucket.key)}
-								</Typography.Text>
-								<Typography.Text as="span" size="small" weight="semibold">
-									{formatPricePerMillion(bucket.pricePerMillion)}
-								</Typography.Text>
-							</Badge>
-						))}
-					</div>
-				);
-			},
-		},
-		{
-			id: 'source',
-			header: 'Source',
-			width: { min: 130 },
-			enableMove: false,
-			cell: ({ row }): JSX.Element => (
-				<Badge
-					color={row.isOverride ? 'amber' : 'robin'}
-					variant="outline"
-					className={styles.sourceBadge}
-					data-testid={`source-badge-${row.id}`}
-				>
-					{getSourceLabel(row)}
-				</Badge>
-			),
-		},
-		{
-			id: 'lastSeen',
-			header: 'Last seen',
-			width: { min: 120 },
-			enableMove: false,
-			cell: ({ row }): string => getRelativeLastSeen(row),
-		},
-		{
-			id: 'actions',
-			header: '',
-			width: { fixed: '56px', ignoreLastColumnFill: true },
-			pin: 'right',
-			enableMove: false,
-			enableRemove: false,
-			cell: ({ row }): JSX.Element | null => (
-				<ModelCostActionsMenu
-					rule={row}
-					canManage={canManage}
-					onEdit={onEdit}
-					onDelete={onDelete}
-				/>
-			),
-		},
-	];
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/TableConfig/tableConfig.module.scss

@@ -1,26 +0,0 @@
-.modelCell {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	min-width: 0;
-}
-
-.extraBuckets {
-	display: flex;
-	// Keep chips on a single line so the row stays at the table's fixed row
-	// height; the column flexes to 100% so there's room for both.
-	flex-wrap: nowrap;
-	gap: var(--spacing-3);
-	overflow: hidden;
-}
-
-.extraBucketsChip {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	margin: 0;
-}
-
-.sourceBadge {
-	margin: 0;
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/index.ts

@@ -1 +0,0 @@
-export { default } from './ModelCostsTable';

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/index.ts

@@ -1 +0,0 @@
-export { default } from './ModelCostTabPanel';

frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts

@@ -1,6 +0,0 @@
-export const PAGE_SIZE = 20;
-
-export const PAGE_KEY = 'page';
-export const LIMIT_KEY = 'limit';
-
-export const SKELETON_ROW_COUNT = PAGE_SIZE;

frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts

@@ -1,4 +0,0 @@
-export interface ExtraBucket {
-	key: string;
-	pricePerMillion: number;
-}

frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts

@@ -1,60 +0,0 @@
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-
-import type { ExtraBucket } from './types';
-import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-dayjs.extend(relativeTime);
-
-const getRelativeTime = (
-	timestamp: string | number | Date | null | undefined,
-): string => {
-	const parsed = timestamp != null ? dayjs(timestamp) : null;
-	return parsed?.isValid() ? parsed.fromNow() : '—';
-};
-
-// ─── Display helpers ─────────────────────────────────────────────────────────
-
-export const formatPricePerMillion = (value: number | undefined): string => {
-	if (value === undefined || value === null) {
-		return '—';
-	}
-	// 2dp is enough for per-1M pricing. we can update this later we models have sub-cent pricing.
-	return `$${value.toFixed(2)}`;
-};
-
-export const getExtraBuckets = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): ExtraBucket[] => {
-	const cache = rule.pricing?.cache;
-	if (!cache) {
-		return [];
-	}
-	const buckets: ExtraBucket[] = [];
-	if (typeof cache.read === 'number' && cache.read > 0) {
-		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
-	}
-	if (typeof cache.write === 'number' && cache.write > 0) {
-		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
-	}
-	return buckets;
-};
-
-export const getSourceLabel = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): 'Auto' | 'User override' => (rule.isOverride ? 'User override' : 'Auto');
-
-export const getRelativeLastSeen = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
-
-// Canonical id shown under the model name, e.g. "openai:gpt-4o". Both segments
-// are lower-cased so the id is consistently normalised (providers/models can
-// arrive with mixed casing).
-export const getCanonicalId = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => {
-	const provider = rule.provider?.trim().toLowerCase() || 'unknown';
-	const model = rule.modelName?.trim().toLowerCase() || 'unknown';
-	return `${provider}:${model}`;
-};

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts

@@ -20,6 +20,7 @@ import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
 import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
 import basetenUrl from '@/assets/Logos/baseten.svg';
+import cassandraUrl from '@/assets/Logos/cassandra.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
 import certManagerUrl from '@/assets/Logos/cert-manager.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
@@ -51,6 +52,7 @@ import externalApiMonitoringUrl from '@/assets/Logos/external-api-monitoring.svg
 import fluentbitUrl from '@/assets/Logos/fluentbit.svg';
 import fluentdUrl from '@/assets/Logos/fluentd.svg';
 import flutterMonitoringUrl from '@/assets/Logos/flutter-monitoring.svg';
+import fluxcdUrl from '@/assets/Logos/fluxcd.svg';
 import flyIoUrl from '@/assets/Logos/fly-io.svg';
 import fromLogFileUrl from '@/assets/Logos/from-log-file.svg';
 import gcpAppEngineUrl from '@/assets/Logos/gcp-app-engine.svg';
@@ -94,6 +96,7 @@ import langtraceUrl from '@/assets/Logos/langtrace.svg';
 import litellmUrl from '@/assets/Logos/litellm.svg';
 import livekitUrl from '@/assets/Logos/livekit.svg';
 import llamaindexUrl from '@/assets/Logos/llamaindex.svg';
+import llmMonitoringUrl from '@/assets/Logos/llm-monitoring.svg';
 import logrusUrl from '@/assets/Logos/logrus.svg';
 import logsUrl from '@/assets/Logos/logs.svg';
 import logstashUrl from '@/assets/Logos/logstash.svg';
@@ -120,6 +123,7 @@ import opentelemetryUrl from '@/assets/Logos/opentelemetry.svg';
 import phpUrl from '@/assets/Logos/php.svg';
 import pinoUrl from '@/assets/Logos/pino.svg';
 import pipecatUrl from '@/assets/Logos/pipecat.svg';
+import planetscaleUrl from '@/assets/Logos/planetscale.svg';
 import postgresqlUrl from '@/assets/Logos/postgresql.svg';
 import prometheusUrl from '@/assets/Logos/prometheus.svg';
 import pydanticAiUrl from '@/assets/Logos/pydantic-ai.svg';
@@ -1526,6 +1530,28 @@ const onboardingConfigWithLinks = [
 		id: 'nginx-tracing',
 		link: '/docs/instrumentation/opentelemetry-nginx/',
 	},
+	{
+		dataSource: 'nginx-ingress-controller',
+		label: 'NGINX Ingress Controller',
+		imgUrl: nginxUrl,
+		tags: ['infrastructure monitoring'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'ingress',
+			'ingress controller',
+			'kubernetes ingress',
+			'monitoring',
+			'nginx ingress',
+			'nginx ingress controller',
+			'nginx ingress metrics',
+			'nginx ingress monitoring',
+			'nginx ingress observability',
+			'observability',
+			'opentelemetry nginx ingress',
+		],
+		id: 'nginx-ingress-controller',
+		link: '/docs/metrics-management/nginx-ingress-controller/',
+	},
 	{
 		dataSource: 'opentelemetry-cloudflare',
 		label: 'Cloudflare Tracing',
@@ -1586,6 +1612,119 @@ const onboardingConfigWithLinks = [
 		id: 'opentelemetry-cloudflare-logs',
 		link: '/docs/logs-management/send-logs/cloudflare-logs/',
 	},
+	{
+		dataSource: 'cloudflare-workers',
+		label: 'Cloudflare Workers',
+		imgUrl: cloudflareUrl,
+		tags: ['apm/traces'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'cloudflare',
+			'cloudflare workers',
+			'cloudflare workers monitoring',
+			'cloudflare workers observability',
+			'cloudflare workers otlp',
+			'edge computing monitoring',
+			'monitor cloudflare workers',
+			'monitoring',
+			'observability',
+			'opentelemetry cloudflare workers',
+			'otlp',
+			'serverless monitoring',
+		],
+		id: 'cloudflare-workers',
+		link: '/docs/integrations/outposts/cloudflare-workers/',
+	},
+	{
+		dataSource: 'opentelemetry-cassandra',
+		label: 'Cassandra',
+		imgUrl: cassandraUrl,
+		tags: ['database'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'apache cassandra',
+			'cassandra',
+			'cassandra database',
+			'cassandra logs',
+			'cassandra metrics',
+			'cassandra monitoring',
+			'cassandra observability',
+			'database',
+			'monitoring',
+			'nosql',
+			'observability',
+			'opentelemetry cassandra',
+		],
+		id: 'opentelemetry-cassandra',
+		link: '/docs/integrations/opentelemetry-cassandra/',
+	},
+	{
+		dataSource: 'fluxcd',
+		label: 'FluxCD',
+		imgUrl: fluxcdUrl,
+		tags: ['infrastructure monitoring'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'continuous delivery',
+			'flux',
+			'fluxcd',
+			'fluxcd dashboard',
+			'fluxcd metrics',
+			'fluxcd monitoring',
+			'fluxcd observability',
+			'gitops',
+			'kubernetes',
+			'monitoring',
+			'observability',
+			'opentelemetry fluxcd',
+		],
+		id: 'fluxcd',
+		link: '/docs/metrics-management/fluxcd-metrics/',
+	},
+	{
+		dataSource: 'planetscale',
+		label: 'PlanetScale',
+		imgUrl: planetscaleUrl,
+		tags: ['database'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'database',
+			'monitoring',
+			'mysql',
+			'observability',
+			'opentelemetry planetscale',
+			'planetscale',
+			'planetscale database',
+			'planetscale metrics',
+			'planetscale monitoring',
+			'planetscale observability',
+			'serverless database',
+		],
+		id: 'planetscale',
+		link: '/docs/metrics-management/opentelemetry-planetscale/',
+	},
+	{
+		dataSource: 'hermes-agent',
+		label: 'Hermes Agent',
+		imgUrl: llmMonitoringUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'ai agent monitoring',
+			'hermes',
+			'hermes agent',
+			'hermes agent monitoring',
+			'hermes agent observability',
+			'hermes monitoring',
+			'llm monitoring',
+			'monitoring',
+			'nous research',
+			'observability',
+			'opentelemetry hermes',
+		],
+		id: 'hermes-agent',
+		link: '/docs/hermes-monitoring/',
+	},
 	{
 		dataSource: 'convex-logs',
 		label: 'Convex Logs',

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss

@@ -0,0 +1,108 @@
+.flamegraph {
+	display: flex;
+	height: 30vh;
+	border-bottom: 1px solid var(--l1-border);
+
+	.flamegraph-chart {
+		padding: 15px;
+
+		.loading-skeleton {
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.flamegraph-stats {
+		display: flex;
+		flex-direction: column;
+		border-right: 1px solid var(--l1-border);
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 16px 20px;
+
+		.exec-time-service {
+			display: flex;
+			height: 30px;
+			flex-shrink: 0;
+			justify-content: center;
+			align-items: center;
+			border-radius: 2px 0px 0px 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l1-border);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+			margin-bottom: 16px;
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+			letter-spacing: -0.06px;
+		}
+
+		.stats {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+			overflow-y: auto;
+			overflow-x: hidden;
+
+			&::-webkit-scrollbar {
+				width: 0rem;
+			}
+
+			.value-row {
+				display: flex;
+				justify-content: space-between;
+
+				.service-name {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					width: 80%;
+
+					.service-text {
+						color: var(--l2-foreground);
+						font-family: 'Inter';
+						font-size: 14px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: normal;
+						width: 80%;
+					}
+
+					.square-box {
+						height: 8px;
+						width: 8px;
+					}
+				}
+
+				.progress-service {
+					display: flex;
+					align-items: center;
+					width: 100px;
+					gap: 8px;
+					justify-content: flex-start;
+					flex-shrink: 0;
+
+					.service-progress-indicator {
+						width: fit-content;
+						--progress-width: 30px;
+					}
+
+					.percent-value {
+						color: var(--l1-foreground);
+						text-align: right;
+						font-family: 'Inter';
+						font-size: 12px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: normal;
+						letter-spacing: 0.48px;
+						font-variant-numeric: lining-nums tabular-nums slashed-zero;
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import Spinner from 'components/Spinner';
+import { themeColors } from 'constants/theme';
+import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import { TraceFlamegraphStates } from './constants';
+import Error from './TraceFlamegraphStates/Error/Error';
+import NoData from './TraceFlamegraphStates/NoData/NoData';
+import Success from './TraceFlamegraphStates/Success/Success';
+
+import './PaginatedTraceFlamegraph.styles.scss';
+
+interface ITraceFlamegraphProps {
+	serviceExecTime: Record<string, number>;
+	startTime: number;
+	endTime: number;
+	traceFlamegraphStatsWidth: number;
+	selectedSpan: Span | undefined;
+}
+
+function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
+	const {
+		serviceExecTime,
+		startTime,
+		endTime,
+		traceFlamegraphStatsWidth,
+		selectedSpan,
+	} = props;
+	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
+	const urlQuery = useUrlQuery();
+	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
+		urlQuery.get('spanId') || '',
+	);
+
+	useEffect(() => {
+		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
+	}, [urlQuery]);
+
+	const { data, isFetching, error } = useGetTraceFlamegraph({
+		traceId,
+		selectedSpanId: firstSpanAtFetchLevel,
+	});
+
+	// get the current state of trace flamegraph based on the API lifecycle
+	const traceFlamegraphState = useMemo(() => {
+		if (isFetching) {
+			if (
+				data &&
+				data.payload &&
+				data.payload.spans &&
+				data.payload.spans.length > 0
+			) {
+				return TraceFlamegraphStates.FETCHING_WITH_OLD_DATA_PRESENT;
+			}
+			return TraceFlamegraphStates.LOADING;
+		}
+		if (error) {
+			return TraceFlamegraphStates.ERROR;
+		}
+		if (
+			data &&
+			data.payload &&
+			data.payload.spans &&
+			data.payload.spans.length === 0
+		) {
+			return TraceFlamegraphStates.NO_DATA;
+		}
+
+		return TraceFlamegraphStates.SUCCESS;
+	}, [error, isFetching, data]);
+
+	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
+	const spans = useMemo(
+		() => data?.payload?.spans || [],
+		[data?.payload?.spans],
+	);
+
+	// get the content based on the current state of the trace waterfall
+	const getContent = useMemo(() => {
+		switch (traceFlamegraphState) {
+			case TraceFlamegraphStates.LOADING:
+				return (
+					<div className="loading-skeleton">
+						<Skeleton active paragraph={{ rows: 3 }} />
+					</div>
+				);
+			case TraceFlamegraphStates.ERROR:
+				return <Error error={error as AxiosError} />;
+			case TraceFlamegraphStates.NO_DATA:
+				return <NoData id={traceId} />;
+			case TraceFlamegraphStates.SUCCESS:
+			case TraceFlamegraphStates.FETCHING_WITH_OLD_DATA_PRESENT:
+				return (
+					<Success
+						spans={spans}
+						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
+						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
+						traceMetadata={{
+							startTime: data?.payload?.startTimestampMillis || 0,
+							endTime: data?.payload?.endTimestampMillis || 0,
+						}}
+						selectedSpan={selectedSpan}
+					/>
+				);
+			default:
+				return <Spinner tip="Fetching the trace!" />;
+		}
+	}, [
+		data?.payload?.endTimestampMillis,
+		data?.payload?.startTimestampMillis,
+		error,
+		firstSpanAtFetchLevel,
+		selectedSpan,
+		spans,
+		traceFlamegraphState,
+		traceId,
+	]);
+
+	const spread = useMemo(() => endTime - startTime, [endTime, startTime]);
+
+	return (
+		<div className="flamegraph">
+			<div
+				className="flamegraph-stats"
+				style={{ width: `${traceFlamegraphStatsWidth + 22}px` }}
+			>
+				<div className="exec-time-service">% exec time</div>
+				<div className="stats">
+					{Object.keys(serviceExecTime)
+						.sort((a, b) => {
+							if (spread <= 0) {
+								return 0;
+							}
+							const aValue = (serviceExecTime[a] * 100) / spread;
+							const bValue = (serviceExecTime[b] * 100) / spread;
+							return bValue - aValue;
+						})
+						.map((service) => {
+							const value =
+								spread <= 0 ? 0 : (serviceExecTime[service] * 100) / spread;
+							const color = generateColor(service, themeColors.traceDetailColors);
+							return (
+								<div key={service} className="value-row">
+									<section className="service-name">
+										<div className="square-box" style={{ backgroundColor: color }} />
+										<Tooltip title={service}>
+											<Typography.Text className="service-text" truncate={1}>
+												{service}
+											</Typography.Text>
+										</Tooltip>
+									</section>
+									<section className="progress-service">
+										<Progress
+											percent={parseFloat(value.toFixed(2))}
+											className="service-progress-indicator"
+											showInfo={false}
+										/>
+										<Typography.Text className="percent-value">
+											{parseFloat(value.toFixed(2))}%
+										</Typography.Text>
+									</section>
+								</div>
+							);
+						})}
+				</div>
+			</div>
+			<div
+				className="flamegraph-chart"
+				style={{ width: `calc(100% - ${traceFlamegraphStatsWidth + 22}px)` }}
+			>
+				{getContent}
+			</div>
+		</div>
+	);
+}
+
+export default TraceFlamegraph;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Error/Error.styles.scss

@@ -0,0 +1,23 @@
+.error-flamegraph {
+	display: flex;
+	gap: 4px;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 15vh;
+
+	.error-flamegraph-img {
+		height: 32px;
+		width: 32px;
+	}
+
+	.no-data-text {
+		color: var(--muted-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px; /* 128.571% */
+		letter-spacing: -0.07px;
+	}
+}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Error/Error.tsx

@@ -0,0 +1,32 @@
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+
+import noDataUrl from '@/assets/Icons/no-data.svg';
+
+import './Error.styles.scss';
+
+interface IErrorProps {
+	error: AxiosError;
+}
+
+function Error(props: IErrorProps): JSX.Element {
+	const { error } = props;
+
+	return (
+		<div className="error-flamegraph">
+			<img
+				src={noDataUrl}
+				alt="error-flamegraph"
+				className="error-flamegraph-img"
+			/>
+			<Tooltip title={error?.message}>
+				<Typography.Text className="no-data-text">
+					{error?.message || 'Something went wrong!'}
+				</Typography.Text>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default Error;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/NoData/NoData.tsx

@@ -0,0 +1,12 @@
+import { Typography } from '@signozhq/ui/typography';
+
+interface INoDataProps {
+	id: string;
+}
+
+function NoData(props: INoDataProps): JSX.Element {
+	const { id } = props;
+	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
+}
+
+export default NoData;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss

@@ -0,0 +1,49 @@
+.trace-flamegraph {
+	height: 90%;
+	overflow-x: hidden;
+	overflow-y: auto;
+
+	.trace-flamegraph-virtuoso {
+		overflow-x: hidden;
+
+		.flamegraph-row {
+			display: flex;
+			align-items: center;
+			height: 18px;
+			padding-bottom: 6px;
+
+			.span-item {
+				position: absolute;
+				height: 12px;
+				background-color: yellow;
+				border-radius: 6px;
+				cursor: pointer;
+
+				.event-dot {
+					position: absolute;
+					top: 50%;
+					transform: translate(-50%, -50%) rotate(45deg);
+					width: 6px;
+					height: 6px;
+					background-color: var(--primary-background);
+					border: 1px solid var(--bg-robin-600);
+					cursor: pointer;
+					z-index: 1;
+
+					&.error {
+						background-color: var(--danger-background);
+						border-color: var(--bg-cherry-600);
+					}
+
+					&:hover {
+						transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
+					}
+				}
+			}
+		}
+
+		&::-webkit-scrollbar {
+			width: 0rem;
+		}
+	}
+}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx

@@ -0,0 +1,178 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { ListRange, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Tooltip } from 'antd';
+import Color from 'color';
+import TimelineV2 from 'components/TimelineV2/TimelineV2';
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { Span } from 'types/api/trace/getTraceV2';
+import { toFixed } from 'utils/toFixed';
+
+import './Success.styles.scss';
+
+interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+interface ISuccessProps {
+	spans: FlamegraphSpan[][];
+	firstSpanAtFetchLevel: string;
+	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
+	traceMetadata: ITraceMetadata;
+	selectedSpan: Span | undefined;
+}
+
+function Success(props: ISuccessProps): JSX.Element {
+	const {
+		spans,
+		setFirstSpanAtFetchLevel,
+		traceMetadata,
+		firstSpanAtFetchLevel,
+		selectedSpan,
+	} = props;
+	const { search } = useLocation();
+	const history = useHistory();
+	const isDarkMode = useIsDarkMode();
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
+	const renderSpanLevel = useCallback(
+		(_: number, spans: FlamegraphSpan[]): JSX.Element => (
+			<div className="flamegraph-row">
+				{spans.map((span) => {
+					const spread = traceMetadata.endTime - traceMetadata.startTime;
+					const leftOffset =
+						((span.timestamp - traceMetadata.startTime) * 100) / spread;
+					let width = ((span.durationNano / 1e6) * 100) / spread;
+					if (width > 100) {
+						width = 100;
+					}
+					const toolTipText = `${span.name}`;
+					const searchParams = new URLSearchParams(search);
+
+					let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+					const selectedSpanColor = isDarkMode
+						? Color(color).lighten(0.7)
+						: Color(color).darken(0.7);
+
+					if (span.hasError) {
+						color = `var(--danger-background)`;
+					}
+
+					return (
+						<Tooltip title={toolTipText} key={span.spanId}>
+							<div
+								className="span-item"
+								style={{
+									left: `${leftOffset}%`,
+									width: `${width}%`,
+									backgroundColor:
+										selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId
+											? `${selectedSpanColor}`
+											: color,
+								}}
+								onMouseEnter={(): void => setHoveredSpanId(span.spanId)}
+								onMouseLeave={(): void => setHoveredSpanId('')}
+								onClick={(event): void => {
+									event.stopPropagation();
+									event.preventDefault();
+									searchParams.set('spanId', span.spanId);
+									history.replace({ search: searchParams.toString() });
+								}}
+							>
+								{span.event?.map((event) => {
+									const eventTimeMs = event.timeUnixNano / 1e6;
+									const eventOffsetPercent =
+										((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
+									const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
+									const { isError } = event;
+									const { time, timeUnitName } = convertTimeToRelevantUnit(
+										eventTimeMs - span.timestamp,
+									);
+									return (
+										<Tooltip
+											key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
+											title={`${event.name} @ ${toFixed(time, 2)} ${timeUnitName}`}
+										>
+											<div
+												className={`event-dot ${isError ? 'error' : ''}`}
+												style={{
+													left: `${clampedOffset}%`,
+												}}
+											/>
+										</Tooltip>
+									);
+								})}
+							</div>
+						</Tooltip>
+					);
+				})}
+			</div>
+		),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[traceMetadata.endTime, traceMetadata.startTime, selectedSpan, hoveredSpanId],
+	);
+
+	const handleRangeChanged = useCallback(
+		(range: ListRange) => {
+			// if there are less than 50 levels on any load that means a single API call is sufficient
+			if (spans.length < 50) {
+				return;
+			}
+
+			const { startIndex, endIndex } = range;
+			if (startIndex === 0 && spans[0][0].level !== 0) {
+				setFirstSpanAtFetchLevel(spans[0][0].spanId);
+			}
+
+			if (endIndex === spans.length - 1) {
+				setFirstSpanAtFetchLevel(spans[spans.length - 1][0].spanId);
+			}
+		},
+		[setFirstSpanAtFetchLevel, spans],
+	);
+
+	useEffect(() => {
+		const index = spans.findIndex(
+			(span) => span[0].spanId === firstSpanAtFetchLevel,
+		);
+
+		virtuosoRef.current?.scrollToIndex({
+			index,
+			behavior: 'auto',
+		});
+	}, [firstSpanAtFetchLevel, spans]);
+
+	return (
+		<>
+			<div className="trace-flamegraph">
+				<Virtuoso
+					ref={virtuosoRef}
+					className="trace-flamegraph-virtuoso"
+					data={spans}
+					itemContent={renderSpanLevel}
+					rangeChanged={handleRangeChanged}
+				/>
+			</div>
+			<TimelineV2
+				startTimestamp={traceMetadata.startTime}
+				endTimestamp={traceMetadata.endTime}
+				timelineHeight={22}
+			/>
+		</>
+	);
+}
+
+export default Success;

frontend/src/container/PaginatedTraceFlamegraph/constants.ts

@@ -0,0 +1,7 @@
+export enum TraceFlamegraphStates {
+	LOADING = 'LOADING',
+	SUCCESS = 'SUCCESS',
+	NO_DATA = 'NO_DATA',
+	ERROR = 'ERROR',
+	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
+}

frontend/src/container/SpanDetailsDrawer/Attributes/AttributeActions.tsx

@@ -0,0 +1,202 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Button, Popover, Spin, Tooltip } from 'antd';
+import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
+import cx from 'classnames';
+import { OPERATORS } from 'constants/antlrQueryConstants';
+import { useTraceActions } from 'hooks/trace/useTraceActions';
+import {
+	ArrowDownToDot,
+	ArrowUpFromDot,
+	Copy,
+	Ellipsis,
+	Pin,
+} from '@signozhq/icons';
+
+interface AttributeRecord {
+	field: string;
+	value: string;
+}
+
+interface AttributeActionsProps {
+	record: AttributeRecord;
+	isPinned?: boolean;
+	onTogglePin?: (fieldKey: string) => void;
+	showPinned?: boolean;
+	showCopyOptions?: boolean;
+}
+
+export default function AttributeActions({
+	record,
+	isPinned,
+	onTogglePin,
+	showPinned = true,
+	showCopyOptions = true,
+}: AttributeActionsProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [isFilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
+	const [isFilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
+
+	const { onAddToQuery, onGroupByAttribute, onCopyFieldName, onCopyFieldValue } =
+		useTraceActions();
+
+	const textToCopy = useMemo(() => {
+		const str = record.value == null ? '' : String(record.value);
+		// Remove surrounding double-quotes only (e.g., JSON-encoded string values)
+		return str.replace(/^"|"$/g, '');
+	}, [record.value]);
+
+	const handleFilterIn = useCallback(async (): Promise<void> => {
+		if (!onAddToQuery || isFilterInLoading) {
+			return;
+		}
+		setIsFilterInLoading(true);
+		try {
+			await Promise.resolve(
+				onAddToQuery(record.field, record.value, OPERATORS['=']),
+			);
+		} finally {
+			setIsFilterInLoading(false);
+		}
+	}, [onAddToQuery, record.field, record.value, isFilterInLoading]);
+
+	const handleFilterOut = useCallback(async (): Promise<void> => {
+		if (!onAddToQuery || isFilterOutLoading) {
+			return;
+		}
+		setIsFilterOutLoading(true);
+		try {
+			await Promise.resolve(
+				onAddToQuery(record.field, record.value, OPERATORS['!=']),
+			);
+		} finally {
+			setIsFilterOutLoading(false);
+		}
+	}, [onAddToQuery, record.field, record.value, isFilterOutLoading]);
+
+	const handleGroupBy = useCallback((): void => {
+		if (onGroupByAttribute) {
+			onGroupByAttribute(record.field);
+		}
+		setIsOpen(false);
+	}, [onGroupByAttribute, record.field]);
+
+	const handleCopyFieldName = useCallback((): void => {
+		if (onCopyFieldName) {
+			onCopyFieldName(record.field);
+		}
+		setIsOpen(false);
+	}, [onCopyFieldName, record.field]);
+
+	const handleCopyFieldValue = useCallback((): void => {
+		if (onCopyFieldValue) {
+			onCopyFieldValue(textToCopy);
+		}
+		setIsOpen(false);
+	}, [onCopyFieldValue, textToCopy]);
+
+	const handleTogglePin = useCallback((): void => {
+		onTogglePin?.(record.field);
+	}, [onTogglePin, record.field]);
+
+	const moreActionsContent = (
+		<div className="attribute-actions-menu">
+			<Button
+				className="group-by-clause"
+				type="text"
+				icon={<GroupByIcon />}
+				onClick={handleGroupBy}
+				block
+			>
+				Group By Attribute
+			</Button>
+			{showCopyOptions && (
+				<>
+					<Button
+						type="text"
+						icon={<Copy size={14} />}
+						onClick={handleCopyFieldName}
+						block
+					>
+						Copy Field Name
+					</Button>
+					<Button
+						type="text"
+						icon={<Copy size={14} />}
+						onClick={handleCopyFieldValue}
+						block
+					>
+						Copy Field Value
+					</Button>
+				</>
+			)}
+		</div>
+	);
+
+	return (
+		<div className={cx('action-btn', { 'action-btn--is-open': isOpen })}>
+			{showPinned && (
+				<Tooltip title={isPinned ? 'Unpin attribute' : 'Pin attribute'}>
+					<Button
+						className={`filter-btn periscope-btn ${isPinned ? 'pinned' : ''}`}
+						aria-label={isPinned ? 'Unpin attribute' : 'Pin attribute'}
+						icon={<Pin size={14} fill={isPinned ? 'currentColor' : 'none'} />}
+						onClick={handleTogglePin}
+					/>
+				</Tooltip>
+			)}
+			<Tooltip title="Filter for value">
+				<Button
+					className="filter-btn periscope-btn"
+					aria-label="Filter for value"
+					disabled={isFilterInLoading}
+					icon={
+						isFilterInLoading ? (
+							<Spin size="small" />
+						) : (
+							<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
+						)
+					}
+					onClick={handleFilterIn}
+				/>
+			</Tooltip>
+			<Tooltip title="Filter out value">
+				<Button
+					className="filter-btn periscope-btn"
+					aria-label="Filter out value"
+					disabled={isFilterOutLoading}
+					icon={
+						isFilterOutLoading ? (
+							<Spin size="small" />
+						) : (
+							<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
+						)
+					}
+					onClick={handleFilterOut}
+				/>
+			</Tooltip>
+			<Popover
+				open={isOpen}
+				onOpenChange={setIsOpen}
+				arrow={false}
+				content={moreActionsContent}
+				rootClassName="attribute-actions-content"
+				trigger="hover"
+				placement="bottomLeft"
+			>
+				<Button
+					data-testid="attribute-actions-more"
+					aria-label="More attribute actions"
+					icon={<Ellipsis size={14} />}
+					className="filter-btn periscope-btn"
+				/>
+			</Popover>
+		</div>
+	);
+}
+
+AttributeActions.defaultProps = {
+	isPinned: false,
+	showPinned: true,
+	showCopyOptions: true,
+	onTogglePin: undefined,
+};

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss

@@ -0,0 +1,151 @@
+.attributes-corner {
+	display: flex;
+	flex-direction: column;
+
+	.no-data {
+		height: 400px;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.search-input {
+		margin: 12px;
+		width: auto;
+	}
+
+	.attributes-container {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding-block: 12px;
+
+		.item {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			justify-content: flex-start;
+			position: relative;
+			padding: 2px 12px;
+
+			&:hover {
+				background-color: var(--l1-border);
+				.action-btn {
+					display: flex;
+				}
+			}
+
+			.item-key-wrapper {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+
+				.pin-icon {
+					color: var(--bg-robin-400);
+					flex-shrink: 0;
+				}
+			}
+
+			.item-key {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.value-wrapper {
+				display: flex;
+				padding: 2px 8px;
+				align-items: center;
+				width: fit-content;
+				max-width: 100%;
+				gap: 8px;
+				border-radius: 50px;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-border);
+
+				.copy-wrapper {
+					overflow: hidden;
+				}
+
+				.item-value {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: 0.56px;
+				}
+			}
+
+			.action-btn {
+				display: none;
+
+				&--is-open {
+					display: flex;
+				}
+				position: absolute;
+				right: 8px;
+				top: 50%;
+				transform: translateY(-50%);
+				gap: 4px;
+				border-radius: 4px;
+				padding: 2px;
+
+				.filter-btn {
+					display: flex;
+					align-items: center;
+					border: none;
+					box-shadow: none;
+					border-radius: 2px;
+					background: var(--l1-border);
+					padding: 4px;
+					gap: 3px;
+					height: 24px;
+					width: 24px;
+
+					&:hover {
+						background: var(--l3-background);
+					}
+				}
+			}
+		}
+	}
+
+	.border-top {
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.attribute-actions-menu {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+
+	.ant-btn {
+		text-align: left;
+		height: auto;
+		padding: 6px 12px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		&:hover {
+			background-color: var(--l1-border);
+		}
+	}
+
+	.group-by-clause {
+		color: var(--text-primary);
+	}
+}
+
+.attribute-actions-content {
+	.ant-popover-inner {
+		padding: 8px;
+		min-width: 160px;
+	}
+}

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
+import { flattenObject } from 'container/LogDetailedView/utils';
+import { usePinnedAttributes } from 'hooks/spanDetails/usePinnedAttributes';
+import { Pin } from '@signozhq/icons';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import NoData from '../NoData/NoData';
+import AttributeActions from './AttributeActions';
+
+import './Attributes.styles.scss';
+
+interface AttributeRecord {
+	field: string;
+	value: string;
+}
+
+interface IAttributesProps {
+	span: Span;
+	isSearchVisible: boolean;
+	shouldFocusOnToggle?: boolean;
+}
+
+function Attributes(props: IAttributesProps): JSX.Element {
+	const { span, isSearchVisible, shouldFocusOnToggle } = props;
+	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
+
+	const flattenSpanData: Record<string, string> = useMemo(
+		() => (span.tagMap ? flattenObject(span.tagMap) : {}),
+		[span],
+	);
+
+	const availableAttributes = useMemo(
+		() => Object.keys(flattenSpanData),
+		[flattenSpanData],
+	);
+
+	const { pinnedAttributes, togglePin } =
+		usePinnedAttributes(availableAttributes);
+
+	const sortPinnedAttributes = useCallback(
+		(data: AttributeRecord[]): AttributeRecord[] =>
+			data.sort((a, b) => {
+				const aIsPinned = pinnedAttributes[a.field];
+				const bIsPinned = pinnedAttributes[b.field];
+
+				if (aIsPinned && !bIsPinned) {
+					return -1;
+				}
+				if (!aIsPinned && bIsPinned) {
+					return 1;
+				}
+
+				// Within same pinning status, maintain alphabetical order
+				return a.field.localeCompare(b.field);
+			}),
+		[pinnedAttributes],
+	);
+
+	const datasource = useMemo(() => {
+		const filtered = Object.keys(flattenSpanData)
+			.filter((attribute) =>
+				attribute.toLowerCase().includes(fieldSearchInput.toLowerCase()),
+			)
+			.map((key) => ({ field: key, value: flattenSpanData[key] }));
+
+		return sortPinnedAttributes(filtered);
+	}, [flattenSpanData, fieldSearchInput, sortPinnedAttributes]);
+
+	return (
+		<div className="attributes-corner">
+			{isSearchVisible &&
+				(datasource.length > 0 || fieldSearchInput.length > 0) && (
+					<Input
+						autoFocus={shouldFocusOnToggle}
+						placeholder="Search for attribute..."
+						className="search-input"
+						value={fieldSearchInput}
+						onChange={(e): void => setFieldSearchInput(e.target.value)}
+					/>
+				)}
+			{datasource.length === 0 && fieldSearchInput.length === 0 && (
+				<NoData name="attributes" />
+			)}
+			<section
+				className={cx('attributes-container', isSearchVisible ? 'border-top' : '')}
+			>
+				{datasource
+					.filter((item) => !!item.value && item.value !== '-')
+					.map((item) => (
+						<div
+							className={cx('item', { pinned: pinnedAttributes[item.field] })}
+							key={`${item.field} + ${item.value}`}
+						>
+							<div className="item-key-wrapper">
+								<Typography.Text className="item-key" truncate={1}>
+									{item.field}
+								</Typography.Text>
+								{pinnedAttributes[item.field] && (
+									<Pin size={14} className="pin-icon" fill="currentColor" />
+								)}
+							</div>
+							<div className="value-wrapper">
+								<div className="copy-wrapper">
+									<CopyClipboardHOC
+										entityKey={item.value}
+										textToCopy={item.value}
+										tooltipText={item.value}
+									>
+										<Typography.Text className="item-value" truncate={1}>
+											{item.value}
+										</Typography.Text>
+									</CopyClipboardHOC>
+								</div>
+								<AttributeActions
+									record={item}
+									isPinned={pinnedAttributes[item.field]}
+									onTogglePin={togglePin}
+								/>
+							</div>
+						</div>
+					))}
+			</section>
+		</div>
+	);
+}
+
+Attributes.defaultProps = {
+	shouldFocusOnToggle: false,
+};
+
+export default Attributes;

frontend/src/container/SpanDetailsDrawer/Events/Events.styles.scss

@@ -0,0 +1,142 @@
+.events-table {
+	.no-events {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 400px;
+	}
+	.events-container {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px;
+
+		.event {
+			.ant-collapse {
+				border: none;
+			}
+			.ant-collapse-content {
+				border-top: none;
+			}
+
+			.ant-collapse-item {
+				border-bottom: 0px;
+			}
+
+			.ant-collapse-content-box {
+				border: 1px solid var(--l1-border);
+				border-top: none;
+			}
+			.ant-collapse-header {
+				display: flex;
+				padding: 8px 6px;
+				align-items: center;
+				justify-content: space-between;
+				gap: 16px;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l2-background);
+
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				letter-spacing: -0.07px;
+
+				.ant-collapse-expand-icon {
+					padding-inline-start: 0px;
+					padding-inline-end: 0px;
+				}
+
+				.collapse-title {
+					display: flex;
+					align-items: center;
+					gap: 6px;
+
+					.diamond {
+						fill: var(--accent-primary);
+					}
+				}
+			}
+			.event-details {
+				display: flex;
+				flex-direction: column;
+				gap: 16px;
+
+				.attribute-container {
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
+
+					.attribute-key {
+						color: var(--l2-foreground);
+						font-family: Inter;
+						font-size: 14px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: 20px; /* 142.857% */
+						letter-spacing: -0.07px;
+					}
+
+					.timestamp-container {
+						display: flex;
+						gap: 4px;
+						align-items: center;
+
+						.timestamp-text {
+							color: var(--l2-foreground);
+							font-family: Inter;
+							font-size: 14px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 20px; /* 142.857% */
+							letter-spacing: -0.07px;
+						}
+
+						.attribute-value {
+							display: flex;
+							padding: 2px 8px;
+							width: fit-content;
+							align-items: center;
+							gap: 8px;
+							border-radius: 50px;
+							border: 1px solid var(--l1-border);
+							background: var(--l1-border);
+
+							color: var(--l1-foreground);
+							font-family: Inter;
+							font-size: 14px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 20px; /* 142.857% */
+							letter-spacing: -0.07px;
+						}
+					}
+
+					.wrapper {
+						display: flex;
+						padding: 2px 8px;
+						width: fit-content;
+						max-width: 100%;
+						align-items: center;
+						gap: 8px;
+						border-radius: 50px;
+						border: 1px solid var(--l1-border);
+						background: var(--l1-border);
+						.attribute-value {
+							color: var(--l1-foreground);
+							font-family: Inter;
+							font-size: 14px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 20px; /* 142.857% */
+							letter-spacing: -0.07px;
+						}
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Collapse, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { Diamond } from '@signozhq/icons';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import NoData from '../NoData/NoData';
+import EventAttribute from './components/EventAttribute';
+
+import './Events.styles.scss';
+
+interface IEventsTableProps {
+	span: Span;
+	startTime: number;
+	isSearchVisible: boolean;
+}
+
+function EventsTable(props: IEventsTableProps): JSX.Element {
+	const { span, startTime, isSearchVisible } = props;
+	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
+	const [modalContent, setModalContent] = useState<{
+		title: string;
+		content: string;
+	} | null>(null);
+
+	const showAttributeModal = (title: string, content: string): void => {
+		setModalContent({ title, content });
+	};
+
+	const handleCancel = (): void => {
+		setModalContent(null);
+	};
+
+	const events = span.event;
+
+	return (
+		<div className="events-table">
+			{events.length === 0 && (
+				<div className="no-events">
+					<NoData name="events" />
+				</div>
+			)}
+			<div className="events-container">
+				{isSearchVisible && events.length > 0 && (
+					<Input
+						autoFocus
+						placeholder="Search for events..."
+						className="search-input"
+						value={fieldSearchInput}
+						onChange={(e): void => setFieldSearchInput(e.target.value)}
+					/>
+				)}
+				{events
+					.filter((eve) =>
+						eve.name?.toLowerCase().includes(fieldSearchInput.toLowerCase()),
+					)
+					.map((event) => (
+						<div
+							className="event"
+							key={`${event.name} ${JSON.stringify(event.attributeMap)}`}
+						>
+							<Collapse
+								size="small"
+								defaultActiveKey="1"
+								expandIconPosition="right"
+								items={[
+									{
+										key: '1',
+										label: (
+											<div className="collapse-title">
+												<Diamond size={14} className="diamond" />
+												<Typography.Text className="collapse-title-name">
+													{event.name}
+												</Typography.Text>
+											</div>
+										),
+										children: (
+											<div className="event-details">
+												<div className="attribute-container" key="timeUnixNano">
+													<Typography.Text className="attribute-key">
+														Start Time
+													</Typography.Text>
+													<div className="timestamp-container">
+														<Typography.Text className="attribute-value">
+															{getYAxisFormattedValue(
+																`${(event.timeUnixNano || 0) / 1e6 - startTime}`,
+																'ms',
+															)}
+														</Typography.Text>
+														<Typography.Text className="timestamp-text">
+															since trace start
+														</Typography.Text>
+													</div>
+													<div className="timestamp-container">
+														<Typography.Text className="attribute-value">
+															{getYAxisFormattedValue(
+																`${(event.timeUnixNano || 0) / 1e6 - span.timestamp}`,
+																'ms',
+															)}
+														</Typography.Text>
+														<Typography.Text className="timestamp-text">
+															since span start
+														</Typography.Text>
+													</div>
+												</div>
+												{event.attributeMap &&
+													Object.keys(event.attributeMap).map((attributeKey) => (
+														<EventAttribute
+															key={attributeKey}
+															attributeKey={attributeKey}
+															attributeValue={event.attributeMap[attributeKey]}
+															onExpand={showAttributeModal}
+														/>
+													))}
+											</div>
+										),
+									},
+								]}
+							/>
+						</div>
+					))}
+			</div>
+			<Modal
+				title={modalContent?.title}
+				open={!!modalContent}
+				onCancel={handleCancel}
+				footer={null}
+				width="80vw"
+				centered
+			>
+				<pre className="attribute-with-expandable-popover__full-view">
+					{modalContent?.content}
+				</pre>
+			</Modal>
+		</div>
+	);
+}
+
+export default EventsTable;

frontend/src/container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover.styles.scss

@@ -0,0 +1,31 @@
+.attribute-with-expandable-popover {
+	&__popover {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		max-width: 50vw;
+	}
+
+	&__preview {
+		max-height: 40vh;
+		overflow-y: auto;
+		white-space: pre-wrap;
+		word-break: break-all;
+		padding: 8px;
+		border-radius: 4px;
+	}
+
+	&__expand-button {
+		align-self: flex-end;
+		display: flex;
+		align-items: center;
+		flex-grow: 0;
+	}
+
+	&__full-view {
+		max-height: 70vh;
+		overflow-y: auto;
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+}

frontend/src/container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover.tsx

@@ -1,11 +1,8 @@
-import { Button } from '@signozhq/ui/button';
-import { Popover, Tooltip } from 'antd';
+import { Button, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { Fullscreen } from '@signozhq/icons';
 
-import styles from '../Events.module.scss';
-
-import popoverStyles from './AttributeWithExpandablePopover.module.scss';
+import './AttributeWithExpandablePopover.styles.scss';
 
 interface AttributeWithExpandablePopoverProps {
 	attributeKey: string;
@@ -19,13 +16,15 @@ function AttributeWithExpandablePopover({
 	onExpand,
 }: AttributeWithExpandablePopoverProps): JSX.Element {
 	const popoverContent = (
-		<div className={popoverStyles.popover}>
-			<pre className={popoverStyles.preview}>{attributeValue}</pre>
+		<div className="attribute-with-expandable-popover__popover">
+			<pre className="attribute-with-expandable-popover__preview">
+				{attributeValue}
+			</pre>
 			<Button
 				onClick={(): void => onExpand(attributeKey, attributeValue)}
-				size="sm"
-				className={popoverStyles.expandButton}
-				prefix={<Fullscreen size={14} />}
+				size="small"
+				className="attribute-with-expandable-popover__expand-button"
+				icon={<Fullscreen size={14} />}
 			>
 				Expand
 			</Button>
@@ -33,16 +32,16 @@ function AttributeWithExpandablePopover({
 	);
 
 	return (
-		<div className={styles.attributeContainer} key={attributeKey}>
+		<div className="attribute-container" key={attributeKey}>
 			<Tooltip title={attributeKey}>
-				<Typography.Text className={styles.attributeKey} truncate={1}>
+				<Typography.Text className="attribute-key" truncate={1}>
 					{attributeKey}
 				</Typography.Text>
 			</Tooltip>
 
-			<div className={styles.wrapper}>
+			<div className="wrapper">
 				<Popover content={popoverContent} trigger="hover" placement="topRight">
-					<Typography.Text className={styles.attributeValue} truncate={1}>
+					<Typography.Text className="attribute-value" truncate={1}>
 						{attributeValue}
 					</Typography.Text>
 				</Popover>

frontend/src/container/SpanDetailsDrawer/Events/components/EventAttribute.tsx

@@ -1,8 +1,6 @@
 import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
-import styles from '../Events.module.scss';
-
 import AttributeWithExpandablePopover from './AttributeWithExpandablePopover';
 
 const EXPANDABLE_ATTRIBUTE_KEYS = ['exception.stacktrace', 'exception.message'];
@@ -34,15 +32,15 @@ function EventAttribute({
 	}
 
 	return (
-		<div className={styles.attributeContainer} key={attributeKey}>
+		<div className="attribute-container" key={attributeKey}>
 			<Tooltip title={attributeKey}>
-				<Typography.Text className={styles.attributeKey} truncate={1}>
+				<Typography.Text className="attribute-key" truncate={1}>
 					{attributeKey}
 				</Typography.Text>
 			</Tooltip>
-			<div className={styles.wrapper}>
+			<div className="wrapper">
 				<Tooltip title={attributeValue}>
-					<Typography.Text className={styles.attributeValue} truncate={1}>
+					<Typography.Text className="attribute-value" truncate={1}>
 						{attributeValue}
 					</Typography.Text>
 				</Tooltip>

frontend/src/container/SpanDetailsDrawer/LinkedSpans/LinkedSpans.styles.scss

@@ -0,0 +1,52 @@
+.no-linked-spans {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 400px;
+}
+
+.linked-spans-container {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 12px;
+
+	.item {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		justify-content: flex-start;
+
+		.item-key {
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.value-wrapper {
+			display: flex;
+			padding: 2px 8px;
+			align-items: center;
+			width: fit-content;
+			max-width: 100%;
+			gap: 8px;
+			border-radius: 50px;
+			border: 1px solid var(--l1-border);
+			background: var(--l1-border);
+
+			.item-value {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: 0.56px;
+			}
+		}
+	}
+}

frontend/src/container/SpanDetailsDrawer/LinkedSpans/LinkedSpans.tsx

@@ -0,0 +1,81 @@
+import { useCallback } from 'react';
+import { Button, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ROUTES from 'constants/routes';
+import { formUrlParams } from 'container/TraceDetail/utils';
+import { Span } from 'types/api/trace/getTraceV2';
+import { withBasePath } from 'utils/basePath';
+
+import NoData from '../NoData/NoData';
+
+import './LinkedSpans.styles.scss';
+
+interface LinkedSpansProps {
+	span: Span;
+}
+
+interface SpanReference {
+	traceId: string;
+	spanId: string;
+	refType: string;
+}
+
+function LinkedSpans(props: LinkedSpansProps): JSX.Element {
+	const { span } = props;
+
+	const getLink = useCallback((item: SpanReference): string | null => {
+		if (!item.traceId || !item.spanId) {
+			return null;
+		}
+		return withBasePath(
+			`${ROUTES.TRACE}/${item.traceId}${formUrlParams({
+				spanId: item.spanId,
+				levelUp: 0,
+				levelDown: 0,
+			})}`,
+		);
+	}, []);
+
+	// Filter out CHILD_OF references as they are parent-child relationships
+	const linkedSpans =
+		span.references?.filter((ref: SpanReference) => ref.refType !== 'CHILD_OF') ||
+		[];
+
+	if (linkedSpans.length === 0) {
+		return (
+			<div className="no-linked-spans">
+				<NoData name="linked spans" />
+			</div>
+		);
+	}
+
+	return (
+		<div className="linked-spans-container">
+			{linkedSpans.map((item: SpanReference) => {
+				const link = getLink(item);
+				return (
+					<div className="item" key={item.spanId}>
+						<Typography.Text className="item-key" truncate={1}>
+							Linked Span ID
+						</Typography.Text>
+						<div className="value-wrapper">
+							<Tooltip title={item.spanId}>
+								{link ? (
+									<Typography.Link href={link} className="item-value" truncate={1}>
+										{item.spanId}
+									</Typography.Link>
+								) : (
+									<Button type="link" className="item-value" disabled>
+										{item.spanId}
+									</Button>
+								)}
+							</Tooltip>
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+export default LinkedSpans;

frontend/src/container/SpanDetailsDrawer/NoData/NoData.styles.scss

@@ -0,0 +1,20 @@
+.no-data {
+	display: flex;
+	gap: 4px;
+	flex-direction: column;
+
+	.no-data-img {
+		height: 32px;
+		width: 32px;
+	}
+
+	.no-data-text {
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px; /* 128.571% */
+		letter-spacing: -0.07px;
+	}
+}

frontend/src/container/SpanDetailsDrawer/NoData/NoData.tsx

@@ -2,7 +2,7 @@ import { Typography } from '@signozhq/ui/typography';
 
 import noDataUrl from '@/assets/Icons/no-data.svg';
 
-import styles from './NoData.module.scss';
+import './NoData.styles.scss';
 
 interface INoDataProps {
 	name: string;
@@ -12,9 +12,9 @@ function NoData(props: INoDataProps): JSX.Element {
 	const { name } = props;
 
 	return (
-		<div className={styles.noData}>
-			<img src={noDataUrl} alt="no-data" className={styles.noDataImg} />
-			<Typography.Text className={styles.noDataText}>
+		<div className="no-data">
+			<img src={noDataUrl} alt="no-data" className="no-data-img" />
+			<Typography.Text className="no-data-text">
 				No {name} found for selected span
 			</Typography.Text>
 		</div>

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -0,0 +1,687 @@
+.span-details-drawer {
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 44px); //44px -> trace details top bar
+	border-left: 1px solid var(--l1-border);
+	overflow-y: auto !important;
+	&:not(&-docked) {
+		min-width: 450px;
+	}
+
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 48px;
+		padding: 12px;
+		border-bottom: 1px solid var(--l1-border);
+
+		.heading {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.dot {
+				height: 8px;
+				width: 8px;
+				border-radius: 2px;
+				background: var(--danger-background);
+			}
+
+			.text {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+
+	.description {
+		display: flex;
+		flex-direction: column;
+		padding: 10px 0px;
+
+		.item {
+			padding: 8px 12px;
+			&,
+			.attribute-container {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+				position: relative; // ensure absolutely-positioned children anchor to the row
+			}
+
+			// Show attribute actions on hover for hardcoded rows
+			.attribute-actions-wrapper {
+				display: none;
+				gap: 8px;
+				position: absolute;
+				right: 8px;
+				top: 50%;
+				transform: translateY(-50%);
+				border-radius: 4px;
+				padding: 2px;
+
+				// style the action button group
+				.action-btn {
+					display: flex;
+					gap: 4px;
+				}
+				.filter-btn {
+					display: flex;
+					align-items: center;
+					border: none;
+					box-shadow: none;
+					border-radius: 2px;
+					background: var(--l1-border);
+					padding: 4px;
+					gap: 3px;
+					height: 24px;
+					width: 24px;
+
+					&:hover {
+						background: var(--l3-background);
+					}
+				}
+			}
+			&:hover {
+				background-color: var(--l1-border);
+				.attribute-actions-wrapper {
+					display: flex;
+				}
+			}
+
+			.span-name-wrapper {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.loading-spinner-container {
+					padding: 4px 8px;
+					line-height: 18px; /* 128.571% */
+					letter-spacing: -0.07px;
+
+					display: inline-flex;
+				}
+
+				.span-percentile-value-container {
+					.span-percentile-value {
+						color: var(--bg-sakura-400);
+						font-variant-numeric: lining-nums tabular-nums stacked-fractions
+							slashed-zero;
+						font-feature-settings:
+							'dlig' on,
+							'salt' on;
+
+						border-radius: 0 50px 50px 0;
+
+						font-family: Inter;
+						font-size: 14px;
+						font-style: normal;
+						font-weight: 400;
+						min-width: 48px;
+						padding-left: 8px;
+						padding-right: 8px;
+
+						border-left: 1px solid var(--l1-border);
+
+						cursor: pointer;
+
+						display: inline-flex;
+						align-items: center;
+						word-break: normal;
+						gap: 6px;
+					}
+
+					&.span-percentile-value-container-open {
+						.span-percentile-value {
+							border: 1px solid var(--l1-border);
+							background: var(--l1-border);
+						}
+					}
+				}
+			}
+
+			.span-percentiles-container {
+				display: flex;
+				flex-direction: column;
+				position: relative;
+
+				fill: linear-gradient(
+					139deg,
+					color-mix(in srgb, var(--card) 32%, transparent) 0%,
+					color-mix(in srgb, var(--card) 36%, transparent) 98.68%
+				);
+
+				stroke-width: 1px;
+				stroke: var(--l1-border);
+				filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
+				backdrop-filter: blur(20px);
+				border: 1px solid var(--l1-border);
+				border-radius: 4px;
+
+				.span-percentiles-header {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					gap: 8px;
+					padding: 8px 12px 8px 12px;
+					border-bottom: 1px solid var(--l1-border);
+
+					.span-percentiles-header-text {
+						display: flex;
+						align-items: center;
+						gap: 8px;
+						cursor: pointer;
+					}
+				}
+
+				.span-percentile-content {
+					display: flex;
+					flex-direction: column;
+					gap: 8px;
+					padding: 8px;
+
+					.span-percentile-content-title {
+						.span-percentile-value {
+							color: var(--bg-sakura-400);
+							font-variant-numeric: lining-nums tabular-nums stacked-fractions
+								slashed-zero;
+							font-feature-settings:
+								'dlig' on,
+								'salt' on;
+						}
+
+						.span-percentile-value-loader {
+							display: inline-flex;
+							align-items: flex-end;
+							justify-content: flex-end;
+							margin-right: 4px;
+							margin-left: 4px;
+							line-height: 18px;
+						}
+					}
+
+					.span-percentile-timerange {
+						width: 100%;
+
+						.span-percentile-timerange-select {
+							width: 100%;
+							margin-top: 8px;
+							margin-bottom: 16px;
+
+							.ant-select-selector {
+								border-radius: 50px;
+								border: 1px solid var(--l1-border);
+								background: var(--l1-background);
+								color: var(--l2-foreground);
+								font-family: Inter;
+								font-size: 12px;
+								font-style: normal;
+								font-weight: 400;
+								line-height: 20px; /* 142.857% */
+								letter-spacing: 0.28px;
+
+								height: 32px;
+							}
+						}
+					}
+
+					.span-percentile-values-table {
+						.span-percentile-values-table-header-row {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							gap: 8px;
+
+							.span-percentile-values-table-header {
+								color: var(--l2-foreground);
+								text-align: right;
+								font-family: Inter;
+								font-size: 11px;
+								font-style: normal;
+								font-weight: 500;
+								line-height: 20px; /* 181.818% */
+								text-transform: uppercase;
+							}
+						}
+
+						.span-percentile-values-table-data-rows {
+							margin-top: 8px;
+							display: flex;
+							flex-direction: column;
+							gap: 4px;
+
+							.span-percentile-values-table-data-rows-skeleton {
+								display: flex;
+								flex-direction: column;
+								gap: 4px;
+
+								.ant-skeleton-title {
+									width: 100% !important;
+									margin-top: 0px !important;
+								}
+
+								.ant-skeleton-paragraph {
+									margin-top: 8px;
+
+									& > li + li {
+										margin-top: 10px;
+										width: 100% !important;
+									}
+								}
+							}
+						}
+
+						.span-percentile-values-table-data-row {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							gap: 12px;
+							padding: 0px 4px;
+
+							.span-percentile-values-table-data-row-key {
+								flex: 0 0 auto;
+								color: var(--l1-foreground);
+								text-align: right;
+								font-variant-numeric: lining-nums tabular-nums slashed-zero;
+								font-feature-settings:
+									'dlig' on,
+									'salt' on;
+								font-family: Inter;
+								font-size: 12px;
+								font-style: normal;
+								font-weight: 500;
+								line-height: 20px; /* 166.667% */
+							}
+
+							.span-percentile-values-table-data-row-value {
+								color: var(--l2-foreground);
+								font-variant-numeric: lining-nums tabular-nums stacked-fractions
+									slashed-zero;
+								font-feature-settings:
+									'dlig' on,
+									'salt' on,
+									'ss02' on;
+								font-family: Inter;
+								font-size: 12px;
+								font-style: normal;
+								font-weight: 400;
+								line-height: 20px; /* 166.667% */
+							}
+
+							.dashed-line {
+								flex: 1;
+								height: 0; /* line only */
+								margin: 0 8px;
+								border-top: 1px dashed var(--l1-border);
+
+								/* Use border image to control dash length & spacing */
+								border-top-width: 1px;
+								border-top-style: solid; /* temporary solid for image */
+								border-image: repeating-linear-gradient(
+										to right,
+										#1d212d 0,
+										#1d212d 10px,
+										transparent 10px,
+										transparent 20px
+									)
+									1 stretch;
+							}
+						}
+
+						.current-span-percentile-row {
+							border-radius: 2px;
+							background: color-mix(
+								in srgb,
+								var(--primary-background) 20%,
+								transparent
+							);
+
+							.span-percentile-values-table-data-row-key {
+								color: var(--text-robin-300);
+							}
+
+							.dashed-line {
+								flex: 1;
+								height: 0; /* line only */
+								margin: 0 8px;
+								border-top: 1px dashed #abbdff;
+
+								/* Use border image to control dash length & spacing */
+								border-top-width: 1px;
+								border-top-style: solid; /* temporary solid for image */
+								border-image: repeating-linear-gradient(
+										to right,
+										#abbdff 0,
+										#abbdff 10px,
+										transparent 10px,
+										transparent 20px
+									)
+									1 stretch;
+							}
+
+							.span-percentile-values-table-data-row-value {
+								color: var(--text-robin-400);
+							}
+						}
+					}
+				}
+
+				.resource-attributes-select-container {
+					overflow: hidden;
+					width: calc(100% + 16px);
+
+					position: absolute;
+					top: 32px;
+					left: -8px;
+					z-index: 1000;
+
+					.resource-attributes-select-container-header {
+						.resource-attributes-select-container-input {
+							border-radius: 0px;
+							border: none !important;
+							box-shadow: none !important;
+							height: 36px;
+
+							border-bottom: 1px solid var(--l1-border) !important;
+						}
+					}
+
+					border-radius: 4px;
+					border: 1px solid var(--l1-border);
+					background: linear-gradient(139deg, var(--card) 0%, var(--card) 98.68%);
+					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+					backdrop-filter: blur(20px);
+
+					.ant-select {
+						width: 100%;
+					}
+
+					.resource-attributes-items {
+						height: 200px;
+						overflow-y: auto;
+
+						&::-webkit-scrollbar {
+							width: 0.3rem;
+							height: 0.3rem;
+						}
+
+						&::-webkit-scrollbar-track {
+							background: transparent;
+						}
+
+						&::-webkit-scrollbar-thumb {
+							background: var(--l3-background);
+						}
+
+						&::-webkit-scrollbar-thumb:hover {
+							background: var(--l3-background);
+						}
+					}
+
+					.resource-attributes-select-item {
+						display: flex;
+						align-items: center;
+						gap: 8px;
+						padding: 8px 12px 8px 12px;
+
+						.resource-attributes-select-item-checkbox {
+							.ant-checkbox-disabled {
+								background-color: var(--primary-background);
+								color: var(--l1-foreground);
+							}
+
+							.resource-attributes-select-item-value {
+								color: var(--l1-foreground);
+
+								font-family: Inter;
+								font-size: 13px;
+								font-style: normal;
+								font-weight: 400;
+								line-height: 20px; /* 142.857% */
+								letter-spacing: -0.07px;
+							}
+						}
+					}
+				}
+			}
+
+			.attribute-key {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.44px;
+				text-transform: uppercase;
+			}
+
+			.attribute-container .wrapper,
+			.value-wrapper {
+				display: flex;
+				align-items: center;
+				width: fit-content;
+				max-width: 100%;
+				border-radius: 50px;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-border);
+
+				.attribute-value {
+					padding: 2px 8px;
+					color: var(--l2-foreground);
+					font-family: 'Inter';
+					font-size: 14px;
+					font-style: normal;
+					width: 100%;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: 0.28px;
+				}
+			}
+
+			.service {
+				display: flex;
+				padding: 2px 8px;
+				align-items: center;
+				gap: 8px;
+				border-radius: 50px;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-border);
+				width: fit-content;
+
+				.dot {
+					height: 4px;
+					width: 4px;
+				}
+
+				.value-wrapper {
+					display: flex;
+					padding: 0px;
+					align-items: center;
+					width: fit-content;
+					max-width: 100%;
+					border-radius: 0px;
+					border: none;
+					background: var(--l1-border);
+
+					.service-value {
+						color: var(--l2-foreground);
+						font-family: 'Inter';
+						font-size: 14px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: 20px; /* 142.857% */
+						letter-spacing: 0.28px;
+					}
+				}
+			}
+
+			.related-signals-section {
+				.view-title {
+					display: flex;
+					gap: 8px;
+					align-items: center;
+					font-size: 12px;
+					line-height: 30px;
+				}
+				.ant-btn.ant-btn-default {
+					padding: 0 15px;
+					&:not(:hover) {
+						border: 1px solid var(--l1-border);
+					}
+				}
+			}
+		}
+	}
+
+	.attributes-events {
+		.details-drawer-tabs {
+			.ant-tabs-extra-content {
+				display: flex;
+				align-items: center;
+
+				.search-icon {
+					width: 33px;
+					padding-right: 12px;
+				}
+			}
+
+			.ant-tabs-nav::before {
+				border-bottom: 1px solid var(--l1-border) !important;
+			}
+
+			.ant-tabs-tab {
+				margin: 0 !important;
+				padding: 0 2px !important;
+				min-width: 36px;
+				height: 36px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.attributes-tab-btn,
+			.events-tab-btn,
+			.linked-spans-tab-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				padding: 4px 8px;
+				margin-right: 8px;
+				gap: 4px;
+
+				.tab-label {
+					display: flex;
+					align-items: center;
+				}
+
+				.count-badge {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					min-width: 20px;
+					height: 20px;
+					padding: 0 6px;
+					border-radius: 10px;
+					background: color-mix(in srgb, var(--bg-robin-200) 10%, transparent);
+					color: var(--l2-foreground);
+					font-variant-numeric: lining-nums tabular-nums slashed-zero;
+					font-feature-settings:
+						'dlig' on,
+						'salt' on;
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px;
+					letter-spacing: -0.065px;
+					text-transform: uppercase;
+				}
+			}
+
+			.attributes-tab-btn:hover,
+			.events-tab-btn:hover,
+			.linked-spans-tab-btn:hover {
+				background: unset;
+			}
+		}
+	}
+}
+
+.span-percentile-tooltip {
+	.ant-tooltip-content {
+		width: 300px;
+		max-width: 300px;
+	}
+
+	.span-percentile-tooltip-text {
+		color: var(--l2-foreground);
+		font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
+			slashed-zero;
+		font-feature-settings:
+			'dlig' on,
+			'salt' on;
+		font-family: Inter;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 166.667% */
+		letter-spacing: -0.06px;
+
+		.span-percentile-tooltip-text-percentile {
+			color: var(--text-sakura-500);
+			font-variant-numeric: lining-nums tabular-nums stacked-fractions slashed-zero;
+			font-feature-settings:
+				'dlig' on,
+				'salt' on;
+			font-family: Inter;
+			font-size: 12px;
+		}
+
+		.span-percentile-tooltip-text-link {
+			color: var(--l2-foreground);
+			text-align: right;
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 166.667% */
+		}
+	}
+}
+
+.span-details-drawer-docked {
+	width: 48px;
+	flex: 0 48px !important;
+
+	.header {
+		justify-content: center;
+	}
+}
+
+.resizable-handle {
+	box-sizing: border-box;
+	border: 2px solid transparent;
+	&:hover,
+	&[data-resize-handle-state='drag'],
+	&[data-resize-handle-state='hover'] {
+		border-color: color-mix(in srgb, var(--bg-aqua-500) 20%, transparent);
+	}
+}
+
+.linked-spans-tab-btn {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}

frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QueryParams } from 'constants/query';
@@ -32,7 +33,7 @@ import { v4 as uuid } from 'uuid';
 
 import noDataUrl from '@/assets/Icons/no-data.svg';
 
-import styles from './SpanLogs.module.scss';
+import './spanLogs.styles.scss';
 
 interface SpanLogsProps {
 	traceId: string;
@@ -200,13 +201,11 @@ function SpanLogs({
 
 	const renderFooter = useCallback((): JSX.Element | null => {
 		if (isFetching) {
-			return (
-				<div className={styles.logsLoadingSkeleton}> Loading more logs ... </div>
-			);
+			return <div className="logs-loading-skeleton"> Loading more logs ... </div>;
 		}
 
 		if (hasReachedEndOfLogs) {
-			return <div className={styles.logsLoadingSkeleton}> *** End *** </div>;
+			return <div className="logs-loading-skeleton"> *** End *** </div>;
 		}
 
 		return null;
@@ -214,10 +213,10 @@ function SpanLogs({
 
 	const renderContent = useMemo(
 		() => (
-			<div className={styles.spanLogsListContainer}>
+			<div className="span-logs-list-container">
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
-						className={styles.spanLogsVirtuoso}
+						className="span-logs-virtuoso"
 						key="span-logs-virtuoso"
 						style={{ height: '100%' }}
 						data={logs}
@@ -235,16 +234,17 @@ function SpanLogs({
 	);
 
 	const renderNoLogsFound = (): JSX.Element => (
-		<div className={styles.spanLogsEmptyContent}>
-			<section className={styles.description}>
-				<img src={noDataUrl} alt="no-data" className={styles.noDataImg} />
-				<Typography.Text className={styles.noDataDescription}>
-					No logs found for selected span. View logs for the current trace.
+		<div className="span-logs-empty-content">
+			<section className="description">
+				<img src={noDataUrl} alt="no-data" className="no-data-img" />
+				<Typography.Text className="no-data-text-1">
+					No logs found for selected span.
+					<span className="no-data-text-2">View logs for the current trace.</span>
 				</Typography.Text>
 			</section>
-			<section className={styles.actionSection}>
+			<section className="action-section">
 				<Button
-					className={styles.actionBtn}
+					className="action-btn"
 					variant="action"
 					prefix={<Compass size={14} />}
 					onClick={handleExplorerPageRedirect}
@@ -281,7 +281,11 @@ function SpanLogs({
 		return renderContent;
 	};
 
-	return <div className={styles.spanLogs}>{renderSpanLogsContent()}</div>;
+	return (
+		<div className={cx('span-logs', { 'span-logs-empty': logs.length === 0 })}>
+			{renderSpanLogsContent()}
+		</div>
+	);
 }
 SpanLogs.defaultProps = {
 	emptyStateConfig: undefined,

frontend/src/container/SpanDetailsDrawer/SpanLogs/__tests__/SpanLogs.test.tsx

@@ -140,9 +140,10 @@ describe('SpanLogs', () => {
 
 		// Should show simple empty state (no emptyStateConfig provided)
 		expect(
-			screen.getByText(
-				'No logs found for selected span. View logs for the current trace.',
-			),
+			screen.getByText('No logs found for selected span.'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText('View logs for the current trace.'),
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole('button', {

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -0,0 +1,76 @@
+.span-logs {
+	margin-inline: 16px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	&-virtuoso {
+		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+	}
+	&-list-container {
+		flex: 1;
+		min-height: 0;
+
+		.logs-loading-skeleton {
+			height: 100%;
+			border: 1px solid var(--l1-border);
+			border-top: none;
+			color: var(--l2-foreground);
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 8px 0;
+		}
+	}
+
+	&-empty-content {
+		height: 100%;
+		border-top: none;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-top: 96px;
+		gap: 12px;
+
+		.description {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.75rem;
+			width: 320px;
+
+			.no-data-img {
+				height: 2rem;
+				width: 2rem;
+			}
+
+			.no-data-text-1 {
+				color: var(--l2-foreground);
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+			}
+			.no-data-text-2 {
+				font-weight: 500;
+			}
+		}
+
+		.action-section {
+			width: 320px;
+
+			.action-btn {
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-border);
+				color: var(--l2-foreground);
+				padding: 4px 8px;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+}

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.styles.scss

@@ -0,0 +1,99 @@
+.span-related-signals-drawer {
+	.ant-drawer-body {
+		padding: 0;
+	}
+
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--l1-border);
+		padding: 16px 15px;
+		.title {
+			color: var(--l2-foreground);
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&__divider {
+		--divider-vertical-margin: 10px;
+	}
+	.ant-drawer-close {
+		margin: 0 !important;
+	}
+
+	.span-related-signals-drawer__content {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.view-title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.views-tabs-container {
+		padding: 16px 15px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.open-in-explorer {
+			display: flex;
+			align-items: center;
+			height: 30px;
+			border-radius: 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+
+		.ant-radio-button-wrapper {
+			width: 114px;
+			height: 32px;
+
+			.view-title {
+				gap: 6px;
+				color: var(--l1-foreground);
+				font-size: 12px;
+				font-weight: 400;
+				letter-spacing: -0.06px;
+			}
+		}
+	}
+
+	.span-related-signals-drawer__applied-filters {
+		padding: 11px;
+		margin-inline: 16px;
+		border: 1px solid var(--l1-border);
+		border-radius: 3px;
+	}
+
+	.span-related-signals-drawer__filters-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.span-related-signals-drawer__filter-tag {
+		padding: 2px 6px;
+		border-radius: 2px;
+		background: var(--l3-background);
+		cursor: default;
+
+		.ant-typography {
+			color: var(--l2-foreground);
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.infra-metrics-container {
+		padding-inline: 16px;
+		.infra-metrics-card {
+			border: 1px solid var(--l1-border);
+		}
+	}
+}

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx

@@ -0,0 +1,257 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Drawer } from 'antd';
+import { Divider } from '@signozhq/ui/divider';
+import { Typography } from '@signozhq/ui/typography';
+import LogsIcon from 'assets/AlertHistory/LogsIcon';
+import SignozRadioGroup from 'components/SignozRadioGroup/SignozRadioGroup';
+import { QueryParams } from 'constants/query';
+import {
+	initialQueryBuilderFormValuesMap,
+	initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
+import { getEmptyLogsListConfig } from 'container/LogsExplorerList/utils';
+import dayjs from 'dayjs';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { BarChart, Compass, X } from '@signozhq/icons';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Span } from 'types/api/trace/getTraceV2';
+import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
+import { getAbsoluteUrl } from 'utils/basePath';
+
+import { RelatedSignalsViews } from '../constants';
+import SpanLogs from '../SpanLogs/SpanLogs';
+import { useSpanContextLogs } from '../SpanLogs/useSpanContextLogs';
+import { hasInfraMetadata } from '../utils';
+
+import './SpanRelatedSignals.styles.scss';
+
+const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
+
+interface SpanRelatedSignalsProps {
+	selectedSpan: Span;
+	traceStartTime: number;
+	traceEndTime: number;
+	isOpen: boolean;
+	onClose: () => void;
+	initialView: RelatedSignalsViews;
+}
+
+function SpanRelatedSignals({
+	selectedSpan,
+	traceStartTime,
+	traceEndTime,
+	isOpen,
+	onClose,
+	initialView,
+}: SpanRelatedSignalsProps): JSX.Element {
+	const [selectedView, setSelectedView] =
+		useState<RelatedSignalsViews>(initialView);
+	const isDarkMode = useIsDarkMode();
+
+	// Extract infrastructure metadata from span attributes
+	const infraMetadata = useMemo(() => {
+		// Only return metadata if span has infrastructure metadata
+		if (!hasInfraMetadata(selectedSpan)) {
+			return null;
+		}
+
+		return {
+			clusterName: selectedSpan.tagMap['k8s.cluster.name'] || '',
+			podName: selectedSpan.tagMap['k8s.pod.name'] || '',
+			nodeName: selectedSpan.tagMap['k8s.node.name'] || '',
+			hostName: selectedSpan.tagMap['host.name'] || '',
+			spanTimestamp: dayjs(selectedSpan.timestamp).format(),
+		};
+	}, [selectedSpan]);
+	const {
+		logs,
+		isLoading,
+		isError,
+		isFetching,
+		isLogSpanRelated,
+		hasTraceIdLogs,
+	} = useSpanContextLogs({
+		traceId: selectedSpan.traceId,
+		spanId: selectedSpan.spanId,
+		timeRange: {
+			startTime: traceStartTime - FIVE_MINUTES_IN_MS,
+			endTime: traceEndTime + FIVE_MINUTES_IN_MS,
+		},
+		isDrawerOpen: isOpen,
+	});
+
+	const handleTabChange = useCallback((value: string): void => {
+		setSelectedView(value as RelatedSignalsViews);
+	}, []);
+
+	const tabOptions = useMemo(() => {
+		const baseOptions = [
+			{
+				label: (
+					<div className="view-title">
+						<LogsIcon width={14} height={14} />
+						Logs
+					</div>
+				),
+				value: RelatedSignalsViews.LOGS,
+			},
+		];
+
+		// Add Infra option if infrastructure metadata is available
+		if (infraMetadata) {
+			baseOptions.push({
+				label: (
+					<div className="view-title">
+						<BarChart size={14} />
+						Metrics
+					</div>
+				),
+				value: RelatedSignalsViews.INFRA,
+			});
+		}
+
+		return baseOptions;
+	}, [infraMetadata]);
+
+	const handleExplorerPageRedirect = useCallback((): void => {
+		const startTimeMs = traceStartTime - FIVE_MINUTES_IN_MS;
+		const endTimeMs = traceEndTime + FIVE_MINUTES_IN_MS;
+
+		const traceIdFilter = {
+			op: 'AND',
+			items: [
+				{
+					id: 'trace-id-filter',
+					key: {
+						key: 'trace_id',
+						id: 'trace-id-key',
+						dataType: 'string' as const,
+						isColumn: true,
+						type: '',
+						isJSON: false,
+					} as BaseAutocompleteData,
+					op: '=',
+					value: selectedSpan.traceId,
+				},
+			],
+		};
+
+		const compositeQuery = {
+			...initialQueryState,
+			queryType: 'builder',
+			builder: {
+				...initialQueryState.builder,
+				queryData: [
+					{
+						...initialQueryBuilderFormValuesMap.logs,
+						aggregateOperator: LogsAggregatorOperator.NOOP,
+						filters: traceIdFilter,
+					},
+				],
+			},
+		};
+
+		const searchParams = new URLSearchParams();
+		searchParams.set(QueryParams.compositeQuery, JSON.stringify(compositeQuery));
+		searchParams.set(QueryParams.startTime, startTimeMs.toString());
+		searchParams.set(QueryParams.endTime, endTimeMs.toString());
+
+		window.open(
+			getAbsoluteUrl(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`),
+			'_blank',
+			'noopener,noreferrer',
+		);
+	}, [selectedSpan.traceId, traceStartTime, traceEndTime]);
+
+	const emptyStateConfig = useMemo(
+		() => ({
+			...getEmptyLogsListConfig(() => {}),
+			showClearFiltersButton: false,
+		}),
+		[],
+	);
+
+	return (
+		<Drawer
+			width="50%"
+			title={
+				<>
+					<Divider
+						type="vertical"
+						className="span-related-signals-drawer__divider"
+					/>
+					<Typography.Text className="title">
+						Related Signals - {selectedSpan.name}
+					</Typography.Text>
+				</>
+			}
+			placement="right"
+			onClose={onClose}
+			open={isOpen}
+			style={{
+				overscrollBehavior: 'contain',
+				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+			}}
+			className="span-related-signals-drawer"
+			destroyOnClose
+			closeIcon={<X size={16} />}
+		>
+			{selectedSpan && (
+				<div className="span-related-signals-drawer__content">
+					<div className="views-tabs-container">
+						<SignozRadioGroup
+							value={selectedView}
+							options={tabOptions}
+							onChange={handleTabChange}
+							className="related-signals-radio"
+						/>
+						{selectedView === RelatedSignalsViews.LOGS && (
+							<Button
+								icon={<Compass size={18} />}
+								className="open-in-explorer"
+								onClick={handleExplorerPageRedirect}
+								data-testid="open-in-explorer-button"
+							>
+								Open in Logs Explorer
+							</Button>
+						)}
+					</div>
+
+					{selectedView === RelatedSignalsViews.LOGS && (
+						<SpanLogs
+							traceId={selectedSpan.traceId}
+							spanId={selectedSpan.spanId}
+							timeRange={{
+								startTime: traceStartTime - FIVE_MINUTES_IN_MS,
+								endTime: traceEndTime + FIVE_MINUTES_IN_MS,
+							}}
+							logs={logs}
+							isLoading={isLoading}
+							isError={isError}
+							isFetching={isFetching}
+							isLogSpanRelated={isLogSpanRelated}
+							handleExplorerPageRedirect={handleExplorerPageRedirect}
+							emptyStateConfig={!hasTraceIdLogs ? emptyStateConfig : undefined}
+						/>
+					)}
+
+					{selectedView === RelatedSignalsViews.INFRA && infraMetadata && (
+						<InfraMetrics
+							clusterName={infraMetadata.clusterName}
+							podName={infraMetadata.podName}
+							nodeName={infraMetadata.nodeName}
+							hostName={infraMetadata.hostName}
+							timestamp={infraMetadata.spanTimestamp}
+							dataSource={DataSource.TRACES}
+						/>
+					)}
+				</div>
+			)}
+		</Drawer>
+	);
+}
+
+export default SpanRelatedSignals;

frontend/src/container/SpanDetailsDrawer/__tests__/AttributeActions.unit.test.tsx

@@ -0,0 +1,240 @@
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+
+import AttributeActions from '../Attributes/AttributeActions';
+
+// Mock only Popover from antd to simplify hover/open behavior while keeping other components real
+jest.mock('antd', () => {
+	const actual = jest.requireActual('antd');
+	const MockPopover = ({
+		content,
+		children,
+		open,
+		onOpenChange,
+		...rest
+	}: any): JSX.Element => (
+		<div
+			data-testid="mock-popover-wrapper"
+			onMouseEnter={(): void => onOpenChange?.(true)}
+			{...rest}
+		>
+			{children}
+			{open ? <div data-testid="mock-popover-content">{content}</div> : null}
+		</div>
+	);
+	return { ...actual, Popover: MockPopover };
+});
+
+// Mock getAggregateKeys API used inside useTraceActions to resolve autocomplete keys
+jest.mock('api/queryBuilder/getAttributeKeys', () => ({
+	getAggregateKeys: jest.fn().mockResolvedValue({
+		payload: {
+			attributeKeys: [
+				{
+					key: 'http.method',
+					dataType: 'string',
+					type: 'tag',
+					isColumn: true,
+				},
+			],
+		},
+	}),
+}));
+
+const record = { field: 'http.method', value: 'GET' };
+
+describe('AttributeActions (unit)', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders core action buttons (pin, filter in/out, more)', async () => {
+		render(<AttributeActions record={record} isPinned={false} />);
+
+		expect(
+			screen.getByRole('button', { name: 'Pin attribute' }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: 'Filter for value' }),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: 'Filter out value' }),
+		).toBeInTheDocument();
+		// more actions (ellipsis) button
+		expect(screen.getByTestId('attribute-actions-more')).toBeInTheDocument();
+	});
+
+	it('applies "Filter for" and calls redirectWithQueryBuilderData with correct query', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+		const currentQuery = {
+			builder: {
+				queryData: [
+					{
+						aggregateOperator: 'count',
+						aggregateAttribute: { key: 'signoz_span_duration' },
+						filters: { items: [], op: 'AND' },
+						filter: { expression: '' },
+						groupBy: [],
+					},
+				],
+			},
+		} as any;
+
+		render(<AttributeActions record={record} />, undefined, {
+			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
+		});
+
+		const filterForBtn = screen.getByRole('button', { name: 'Filter for value' });
+
+		await userEvent.click(filterForBtn);
+		await waitFor(() => {
+			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
+				expect.objectContaining({
+					builder: expect.objectContaining({
+						queryData: expect.arrayContaining([
+							expect.objectContaining({
+								filters: expect.objectContaining({
+									items: expect.arrayContaining([
+										expect.objectContaining({
+											key: expect.objectContaining({ key: 'http.method' }),
+											op: '=',
+											value: 'GET',
+										}),
+									]),
+								}),
+							}),
+						]),
+					}),
+				}),
+				{},
+				expect.any(String),
+			);
+		});
+	});
+
+	it('applies "Filter out" and calls redirectWithQueryBuilderData with correct query', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+		const currentQuery = {
+			builder: {
+				queryData: [
+					{
+						aggregateOperator: 'count',
+						aggregateAttribute: { key: 'signoz_span_duration' },
+						filters: { items: [], op: 'AND' },
+						filter: { expression: '' },
+						groupBy: [],
+					},
+				],
+			},
+		} as any;
+
+		render(<AttributeActions record={record} />, undefined, {
+			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
+		});
+
+		const filterOutBtn = screen.getByRole('button', { name: 'Filter out value' });
+
+		await userEvent.click(filterOutBtn);
+		await waitFor(() => {
+			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
+				expect.objectContaining({
+					builder: expect.objectContaining({
+						queryData: expect.arrayContaining([
+							expect.objectContaining({
+								filters: expect.objectContaining({
+									items: expect.arrayContaining([
+										expect.objectContaining({
+											key: expect.objectContaining({ key: 'http.method' }),
+											op: '!=',
+											value: 'GET',
+										}),
+									]),
+								}),
+							}),
+						]),
+					}),
+				}),
+				{},
+				expect.any(String),
+			);
+		});
+	});
+
+	it('opens more actions on hover and calls Group By handler; closes after click', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+		const currentQuery = {
+			builder: {
+				queryData: [
+					{
+						aggregateOperator: 'count',
+						aggregateAttribute: { key: 'signoz_span_duration' },
+						filters: { items: [], op: 'AND' },
+						filter: { expression: '' },
+						groupBy: [],
+					},
+				],
+			},
+		} as any;
+		render(<AttributeActions record={record} />, undefined, {
+			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
+		});
+
+		const ellipsisBtn = screen.getByTestId('attribute-actions-more');
+		expect(ellipsisBtn).toBeInTheDocument();
+
+		// hover to trigger Popover open via mock
+		fireEvent.mouseEnter(ellipsisBtn.parentElement as Element);
+
+		// content appears
+		await waitFor(() =>
+			expect(screen.getByText('Group By Attribute')).toBeInTheDocument(),
+		);
+
+		await userEvent.click(screen.getByText('Group By Attribute'));
+		await waitFor(() => {
+			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
+				expect.objectContaining({
+					builder: expect.objectContaining({
+						queryData: expect.arrayContaining([
+							expect.objectContaining({
+								groupBy: expect.arrayContaining([
+									expect.objectContaining({ key: 'http.method' }),
+								]),
+							}),
+						]),
+					}),
+				}),
+				{},
+				expect.any(String),
+			);
+		});
+
+		// After clicking group by, popover should close
+		await waitFor(() =>
+			expect(screen.queryByTestId('mock-popover-content')).not.toBeInTheDocument(),
+		);
+	});
+
+	it('hides pin button when showPinned=false', async () => {
+		render(<AttributeActions record={record} showPinned={false} />);
+		expect(
+			screen.queryByRole('button', { name: /pin attribute/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('hides copy options when showCopyOptions=false', async () => {
+		render(<AttributeActions record={record} showCopyOptions={false} />);
+		const ellipsisBtn = screen.getByTestId('attribute-actions-more');
+		fireEvent.mouseEnter(ellipsisBtn.parentElement as Element);
+
+		await waitFor(() =>
+			expect(screen.queryByText('Copy Field Name')).not.toBeInTheDocument(),
+		);
+		expect(screen.queryByText('Copy Field Value')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/SpanDetailsDrawer/__tests__/AttributeActions.userflow.test.tsx

@@ -0,0 +1,383 @@
+import { MemoryRouter, Route } from 'react-router-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ROUTES from 'constants/routes';
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
+import { AppProvider } from 'providers/App/App';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import SpanDetailsDrawer from '../SpanDetailsDrawer';
+
+// Mock external dependencies
+const mockRedirectWithQueryBuilderData = jest.fn();
+const mockNotifications = {
+	success: jest.fn(),
+	error: jest.fn(),
+};
+const mockSetCopy = jest.fn();
+const mockQueryClient = {
+	fetchQuery: jest.fn(),
+};
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
+// Mock the hooks
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						aggregateOperator: 'count',
+						aggregateAttribute: { key: 'signoz_span_duration' },
+						filters: { items: [], op: 'AND' },
+						filter: { expression: '' },
+						groupBy: [],
+					},
+				],
+			},
+		},
+		redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
+	}),
+}));
+
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): any => ({ notifications: mockNotifications }),
+}));
+
+jest.mock('react-use', () => ({
+	...jest.requireActual('react-use'),
+	useCopyToClipboard: (): any => [{ value: '' }, mockSetCopy],
+}));
+
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
+	useQueryClient: (): any => mockQueryClient,
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: jest.fn(),
+}));
+
+// Mock the API response for getAggregateKeys
+const mockAggregateKeysResponse = {
+	payload: {
+		attributeKeys: [
+			{
+				key: 'http.method',
+				dataType: 'string',
+				type: 'tag',
+				isColumn: true,
+			},
+			{
+				key: 'service.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: true,
+			},
+		],
+	},
+};
+
+beforeEach(() => {
+	jest.clearAllMocks();
+	mockQueryClient.fetchQuery.mockResolvedValue(mockAggregateKeysResponse);
+});
+
+// Mock trace data with realistic span attributes
+const createMockSpan = (): Span => ({
+	spanId: '28a8a67365d0bd8b',
+	traceId: '000000000000000071dc9b0a338729b4',
+	name: 'HTTP GET /api/users',
+	timestamp: 1699872000000000,
+	durationNano: 150000000,
+	serviceName: 'frontend-service',
+	spanKind: 'server',
+	statusCodeString: 'OK',
+	statusMessage: '',
+	tagMap: {
+		'http.method': 'GET',
+		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/users?page=1',
+		'http.status_code': '200',
+		'service.name': 'frontend-service',
+		'span.kind': 'server',
+		'user.id': '12345',
+		'request.id': 'req-abc-123',
+	},
+	event: [],
+	references: [],
+	hasError: false,
+	rootSpanId: '',
+	parentSpanId: '',
+	kind: 0,
+	rootName: '',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+});
+const renderSpanDetailsDrawer = (span: Span = createMockSpan()): any => {
+	const user = userEvent.setup();
+
+	const component = render(
+		<MockQueryClientProvider>
+			<AppProvider>
+				<MemoryRouter>
+					<Route>
+						<SpanDetailsDrawer
+							isSpanDetailsDocked={false}
+							setIsSpanDetailsDocked={jest.fn()}
+							selectedSpan={span}
+							traceStartTime={span.timestamp}
+							traceEndTime={span.timestamp + span.durationNano}
+						/>
+					</Route>
+				</MemoryRouter>
+			</AppProvider>
+		</MockQueryClientProvider>,
+	);
+
+	return { ...component, user };
+};
+
+describe('AttributeActions User Flow Tests', () => {
+	// Todo: to fixed properly - failing with - due to timeout > 5000ms
+	describe.skip('Complete Attribute Actions User Flow', () => {
+		it('should allow user to interact with span attribute actions from trace detail page', async () => {
+			renderSpanDetailsDrawer();
+
+			// Verify Attributes tab is displayed with table view
+			expect(screen.getByText('Attributes')).toBeInTheDocument();
+
+			// Verify attributes are displayed
+			expect(screen.getByText('http.method')).toBeInTheDocument();
+			expect(screen.getByText('GET')).toBeInTheDocument();
+			expect(screen.getByText('service.name')).toBeInTheDocument();
+			expect(screen.getAllByText('frontend-service')[0]).toBeInTheDocument();
+
+			// Find an attribute row to test actions on
+			const httpMethodRow = screen.getByText('http.method').closest('.item');
+			expect(httpMethodRow).toBeInTheDocument();
+
+			// Action buttons are always mounted in the DOM (only CSS-hidden until :hover),
+			// so we can query them directly without simulating a pointer hover.
+			const actionButtons = httpMethodRow!.querySelector('.action-btn');
+			expect(actionButtons).toBeInTheDocument();
+
+			const filterForButton = httpMethodRow!.querySelector(
+				'[aria-label="Filter for value"]',
+			) as HTMLElement;
+			const filterOutButton = httpMethodRow!.querySelector(
+				'[aria-label="Filter out value"]',
+			) as HTMLElement;
+			expect(filterForButton).toBeInTheDocument();
+			expect(filterOutButton).toBeInTheDocument();
+
+			// Test "Filter for" action — use fireEvent to skip userEvent's pointer
+			// simulation and the Antd Tooltip mouseEnterDelay timers it triggers.
+			fireEvent.click(filterForButton);
+
+			// Verify navigation to traces explorer with inclusive filter
+			await waitFor(() => {
+				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
+					expect.objectContaining({
+						builder: expect.objectContaining({
+							queryData: expect.arrayContaining([
+								expect.objectContaining({
+									dataSource: 'traces',
+									filters: expect.objectContaining({
+										items: expect.arrayContaining([
+											expect.objectContaining({
+												key: expect.objectContaining({ key: 'http.method' }),
+												op: '=',
+												value: 'GET',
+											}),
+										]),
+									}),
+								}),
+							]),
+						}),
+					}),
+					{},
+					ROUTES.TRACES_EXPLORER,
+				);
+			});
+
+			// Reset mock for next test
+			mockRedirectWithQueryBuilderData.mockClear();
+
+			// Test "Filter out" action
+			fireEvent.click(filterOutButton);
+
+			// Verify navigation to traces explorer with exclusive filter
+			await waitFor(() => {
+				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
+					expect.objectContaining({
+						builder: expect.objectContaining({
+							queryData: expect.arrayContaining([
+								expect.objectContaining({
+									dataSource: 'traces',
+									filters: expect.objectContaining({
+										items: expect.arrayContaining([
+											expect.objectContaining({
+												key: expect.objectContaining({ key: 'http.method' }),
+												op: '!=',
+												value: 'GET',
+											}),
+										]),
+									}),
+								}),
+							]),
+						}),
+					}),
+					{},
+					ROUTES.TRACES_EXPLORER,
+				);
+			});
+
+			// Verify more actions button exists (popover functionality is tested in unit tests)
+			const moreActionsButton = httpMethodRow!
+				.querySelector('.lucide-ellipsis')
+				?.closest('button');
+			expect(moreActionsButton).toBeInTheDocument();
+		});
+	});
+
+	// Todo: to fixed properly - failing with - due to timeout > 5000ms
+	describe.skip('Filter Replacement Flow', () => {
+		it('should replace previous filter when applying multiple filters on same field', async () => {
+			renderSpanDetailsDrawer();
+
+			// Find the http.method attribute row
+			const httpMethodRow = screen.getByText('http.method').closest('.item');
+			expect(httpMethodRow).toBeInTheDocument();
+
+			// Action buttons are always mounted (CSS-hidden until :hover, which jsdom
+			// doesn't evaluate), so we can click them directly via fireEvent and skip
+			// userEvent's pointer simulation + Antd Tooltip mouseEnterDelay timers.
+			const filterForButton = httpMethodRow!.querySelector(
+				'[aria-label="Filter for value"]',
+			) as HTMLElement;
+			expect(filterForButton).toBeInTheDocument();
+			fireEvent.click(filterForButton);
+
+			// Verify first filter was applied
+			await waitFor(() => {
+				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
+					expect.objectContaining({
+						builder: expect.objectContaining({
+							queryData: expect.arrayContaining([
+								expect.objectContaining({
+									filters: expect.objectContaining({
+										items: expect.arrayContaining([
+											expect.objectContaining({
+												key: expect.objectContaining({ key: 'http.method' }),
+												op: '=',
+												value: 'GET',
+											}),
+										]),
+									}),
+								}),
+							]),
+						}),
+					}),
+					{},
+					ROUTES.TRACES_EXPLORER,
+				);
+			});
+
+			// Reset and simulate existing filter in current query
+			mockRedirectWithQueryBuilderData.mockClear();
+
+			// Apply second filter on same field (should replace, not accumulate)
+			const filterOutButton = httpMethodRow!.querySelector(
+				'[aria-label="Filter out value"]',
+			) as HTMLElement;
+			expect(filterOutButton).toBeInTheDocument();
+			fireEvent.click(filterOutButton);
+
+			// Verify the new call contains only the new filter (replacement behavior)
+			await waitFor(() => {
+				const lastCall =
+					mockRedirectWithQueryBuilderData.mock.calls[
+						mockRedirectWithQueryBuilderData.mock.calls.length - 1
+					];
+				const queryData = lastCall[0].builder.queryData[0];
+				const httpMethodFilters = queryData.filters.items.filter(
+					(item: any) => item.key.key === 'http.method',
+				);
+
+				// Should have only one filter for http.method (the new one)
+				expect(httpMethodFilters).toHaveLength(1);
+				expect(httpMethodFilters[0].op).toBe('!=');
+				expect(httpMethodFilters[0].value).toBe('GET');
+			});
+		});
+	});
+
+	describe('Edge Cases', () => {
+		it('should handle attributes with special characters and JSON values', async () => {
+			const spanWithSpecialAttrs = createMockSpan();
+			spanWithSpecialAttrs.tagMap = {
+				'request.headers.content-type': 'application/json',
+				'response.body': '{"status":"success","data":[]}',
+				'trace.annotation': '"quoted_string_value"',
+			};
+
+			const { user } = renderSpanDetailsDrawer(spanWithSpecialAttrs);
+
+			// Test attribute with dashes
+			expect(screen.getByText('request.headers.content-type')).toBeInTheDocument();
+			expect(screen.getByText('application/json')).toBeInTheDocument();
+
+			// Test JSON value
+			expect(screen.getByText('response.body')).toBeInTheDocument();
+
+			// Test quoted string value - should remove surrounding quotes when copying
+			const quotedAttrRow = screen.getByText('trace.annotation').closest('.item');
+			await user.hover(quotedAttrRow!);
+
+			const actionButtons = quotedAttrRow!.querySelectorAll('.action-btn button');
+			const moreActionsButton = actionButtons[actionButtons.length - 1];
+			await user.hover(moreActionsButton);
+
+			await waitFor(() => {
+				expect(screen.getByText('Copy Field Value')).toBeInTheDocument();
+			});
+
+			const copyFieldValueButton = screen.getByText('Copy Field Value');
+			fireEvent.click(copyFieldValueButton);
+
+			// Verify quotes are stripped from copied value
+			await waitFor(() => {
+				expect(mockSetCopy).toHaveBeenCalledWith('quoted_string_value');
+			});
+		});
+
+		it('should handle empty attributes gracefully', async () => {
+			const spanWithNoAttrs = createMockSpan();
+			spanWithNoAttrs.tagMap = {};
+
+			renderSpanDetailsDrawer(spanWithNoAttrs);
+
+			// Verify no attributes message is displayed
+			expect(
+				screen.getByText('No attributes found for selected span'),
+			).toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/SpanDetailsDrawer/__tests__/SpanDetailsDrawer.infraMetrics.test.tsx

@@ -0,0 +1,495 @@
+import ROUTES from 'constants/routes';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { server } from 'mocks-server/server';
+import { QueryBuilderContext } from 'providers/QueryBuilder';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
+
+import SpanDetailsDrawer from '../SpanDetailsDrawer';
+import {
+	expectedHostOnlyMetadata,
+	expectedInfraMetadata,
+	expectedNodeOnlyMetadata,
+	expectedPodOnlyMetadata,
+	mockEmptyMetricsResponse,
+	mockNodeMetricsResponse,
+	mockPodMetricsResponse,
+	mockSpanWithHostOnly,
+	mockSpanWithInfraMetadata,
+	mockSpanWithNodeOnly,
+	mockSpanWithoutInfraMetadata,
+	mockSpanWithPodOnly,
+} from './infraMetricsTestData';
+
+// Mock external dependencies
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${ROUTES.TRACE_DETAIL}`,
+	}),
+}));
+
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+const mockUpdateAllQueriesOperators = jest.fn().mockReturnValue({
+	builder: {
+		queryData: [
+			{
+				dataSource: 'logs',
+				queryName: 'A',
+				aggregateOperator: 'noop',
+				filters: { items: [], op: 'AND' },
+				expression: 'A',
+				disabled: false,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				groupBy: [],
+				limit: null,
+				having: [],
+			},
+		],
+		queryFormulas: [],
+	},
+	queryType: 'builder',
+});
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						dataSource: 'logs',
+						queryName: 'A',
+						filters: { items: [], op: 'AND' },
+					},
+				],
+			},
+		},
+	}),
+}));
+
+const mockWindowOpen = jest.fn();
+Object.defineProperty(window, 'open', {
+	writable: true,
+	value: mockWindowOpen,
+});
+
+// Mock uplot to avoid rendering issues
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
+// Mock GetMetricQueryRange to track API calls
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+// Mock generateColor
+jest.mock('lib/uPlotLib/utils/generateColor', () => ({
+	generateColor: jest.fn().mockReturnValue('#1f77b4'),
+}));
+
+// Mock OverlayScrollbar
+jest.mock(
+	'components/OverlayScrollbar/OverlayScrollbar',
+	() =>
+		// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+		function OverlayScrollbar({ children }: any) {
+			return <div data-testid="overlay-scrollbar">{children}</div>;
+		},
+);
+
+// Mock Virtuoso
+jest.mock('react-virtuoso', () => ({
+	Virtuoso: jest.fn(({ data, itemContent }) => (
+		<div data-testid="virtuoso">
+			{data?.map((item: any, index: number) => (
+				<div key={item.id || index} data-testid={`log-item-${item.id}`}>
+					{itemContent(index, item)}
+				</div>
+			))}
+		</div>
+	)),
+}));
+
+// Mock InfraMetrics component for focused testing
+jest.mock(
+	'container/LogDetailedView/InfraMetrics/InfraMetrics',
+	() =>
+		// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+		function MockInfraMetrics({
+			podName,
+			nodeName,
+			hostName,
+			clusterName,
+			timestamp,
+			dataSource,
+		}: any) {
+			return (
+				<div data-testid="infra-metrics">
+					<div data-testid="infra-pod-name">{podName}</div>
+					<div data-testid="infra-node-name">{nodeName}</div>
+					<div data-testid="infra-host-name">{hostName}</div>
+					<div data-testid="infra-cluster-name">{clusterName}</div>
+					<div data-testid="infra-timestamp">{timestamp}</div>
+					<div data-testid="infra-data-source">{dataSource}</div>
+				</div>
+			);
+		},
+);
+
+// Mock PreferenceContextProvider
+jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
+	PreferenceContextProvider: ({ children }: any): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
+describe('SpanDetailsDrawer - Infra Metrics', () => {
+	// eslint-disable-next-line sonarjs/no-unused-collection
+	let apiCallHistory: any[] = [];
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		apiCallHistory = [];
+		mockSafeNavigate.mockClear();
+		mockWindowOpen.mockClear();
+		mockUpdateAllQueriesOperators.mockClear();
+
+		// Setup API call tracking for infra metrics
+		(GetMetricQueryRange as jest.Mock).mockImplementation((query) => {
+			apiCallHistory.push(query);
+
+			// Return mock responses for different query types
+			if (
+				query?.query?.builder?.queryData?.[0]?.filters?.items?.some(
+					(item: any) => item.key?.key === 'k8s_pod_name',
+				)
+			) {
+				return Promise.resolve(mockPodMetricsResponse);
+			}
+
+			if (
+				query?.query?.builder?.queryData?.[0]?.filters?.items?.some(
+					(item: any) => item.key?.key === 'k8s_node_name',
+				)
+			) {
+				return Promise.resolve(mockNodeMetricsResponse);
+			}
+
+			return Promise.resolve(mockEmptyMetricsResponse);
+		});
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	// Mock QueryBuilder context value
+	const mockQueryBuilderContextValue = {
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						dataSource: 'logs',
+						queryName: 'A',
+						filters: { items: [], op: 'AND' },
+					},
+				],
+			},
+		},
+		stagedQuery: {
+			builder: {
+				queryData: [
+					{
+						dataSource: 'logs',
+						queryName: 'A',
+						filters: { items: [], op: 'AND' },
+					},
+				],
+			},
+		},
+		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+		panelType: 'list',
+		redirectWithQuery: jest.fn(),
+		handleRunQuery: jest.fn(),
+		handleStageQuery: jest.fn(),
+		resetQuery: jest.fn(),
+	};
+
+	const renderSpanDetailsDrawer = (props = {}): void => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithInfraMetadata}
+					traceStartTime={1640995200000} // 2022-01-01 00:00:00
+					traceEndTime={1640995260000} // 2022-01-01 00:01:00
+					{...props}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+	};
+
+	it('should detect infra metadata from span attributes', async () => {
+		renderSpanDetailsDrawer();
+
+		// Click on metrics tab
+		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
+		expect(infraMetricsButton).toBeInTheDocument();
+
+		fireEvent.click(infraMetricsButton);
+
+		// Wait for infra metrics to load
+		await waitFor(() => {
+			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
+		});
+
+		// Verify metadata extraction
+		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
+			expectedInfraMetadata.podName,
+		);
+		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
+			expectedInfraMetadata.nodeName,
+		);
+		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
+			expectedInfraMetadata.hostName,
+		);
+		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
+			expectedInfraMetadata.clusterName,
+		);
+		expect(screen.getByTestId('infra-data-source')).toHaveTextContent(
+			DataSource.TRACES,
+		);
+	});
+
+	it('should not show infra tab when span lacks infra metadata', async () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithoutInfraMetadata}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// Should NOT show infra tab, only logs tab
+		expect(
+			screen.queryByRole('button', { name: /metrics/i }),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
+	});
+
+	it('should show infra tab when span has infra metadata', async () => {
+		renderSpanDetailsDrawer();
+
+		// Should show both logs and infra tabs
+		expect(screen.getByRole('button', { name: /metrics/i })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
+	});
+
+	it('should handle pod-only metadata correctly', async () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithPodOnly}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// Click on infra tab
+		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
+		fireEvent.click(infraMetricsButton);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
+		});
+
+		// Verify pod-only metadata
+		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
+			expectedPodOnlyMetadata.podName,
+		);
+		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
+			expectedPodOnlyMetadata.clusterName,
+		);
+		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
+			expectedPodOnlyMetadata.nodeName,
+		);
+		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
+			expectedPodOnlyMetadata.hostName,
+		);
+	});
+
+	it('should handle node-only metadata correctly', async () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithNodeOnly}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// Click on infra tab
+		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
+		fireEvent.click(infraMetricsButton);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
+		});
+
+		// Verify node-only metadata
+		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
+			expectedNodeOnlyMetadata.nodeName,
+		);
+		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
+			expectedNodeOnlyMetadata.podName,
+		);
+		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
+			expectedNodeOnlyMetadata.clusterName,
+		);
+		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
+			expectedNodeOnlyMetadata.hostName,
+		);
+	});
+
+	it('should handle host-only metadata correctly', async () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithHostOnly}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// Click on infra tab
+		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
+		fireEvent.click(infraMetricsButton);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
+		});
+
+		// Verify host-only metadata
+		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
+			expectedHostOnlyMetadata.hostName,
+		);
+		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
+			expectedHostOnlyMetadata.podName,
+		);
+		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
+			expectedHostOnlyMetadata.nodeName,
+		);
+		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
+			expectedHostOnlyMetadata.clusterName,
+		);
+	});
+
+	it('should switch between logs and infra tabs correctly', async () => {
+		renderSpanDetailsDrawer();
+
+		// Initially should show logs tab content
+		const logsButton = screen.getByRole('button', { name: /logs/i });
+		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
+
+		expect(logsButton).toBeInTheDocument();
+		expect(infraMetricsButton).toBeInTheDocument();
+
+		// Ensure logs tab is active and wait for content to load
+		fireEvent.click(logsButton);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
+		});
+
+		// Click on infra tab
+		fireEvent.click(infraMetricsButton);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
+		});
+
+		// Should not show logs content anymore
+		expect(
+			screen.queryByTestId('open-in-explorer-button'),
+		).not.toBeInTheDocument();
+
+		// Switch back to logs tab
+		fireEvent.click(logsButton);
+
+		// Should not show infra metrics anymore
+		await waitFor(() => {
+			expect(screen.queryByTestId('infra-metrics')).not.toBeInTheDocument();
+		});
+
+		// Verify logs content is shown again
+		await waitFor(() => {
+			expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
+		});
+	});
+
+	it('should pass correct data source and handle multiple infra identifiers', async () => {
+		renderSpanDetailsDrawer();
+
+		// Should show infra tab when span has any of: clusterName, podName, nodeName, hostName
+		expect(screen.getByRole('button', { name: /metrics/i })).toBeInTheDocument();
+
+		// Click on infra tab
+		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
+		fireEvent.click(infraMetricsButton);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
+		});
+
+		// Verify TRACES data source is passed
+		expect(screen.getByTestId('infra-data-source')).toHaveTextContent(
+			DataSource.TRACES,
+		);
+
+		// All infra identifiers should be passed through
+		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
+			'test-pod-abc123',
+		);
+		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
+			'test-node-456',
+		);
+		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
+			'test-host.example.com',
+		);
+		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
+			'test-cluster',
+		);
+	});
+});

frontend/src/container/SpanDetailsDrawer/__tests__/infraMetricsTestData.ts

@@ -0,0 +1,167 @@
+import { Span } from 'types/api/trace/getTraceV2';
+
+// Constants
+const TEST_TRACE_ID = 'test-trace-id';
+const TEST_CLUSTER_NAME = 'test-cluster';
+const TEST_POD_NAME = 'test-pod-abc123';
+const TEST_NODE_NAME = 'test-node-456';
+const TEST_HOST_NAME = 'test-host.example.com';
+
+// Mock span with infrastructure metadata (pod + node + host)
+export const mockSpanWithInfraMetadata: Span = {
+	spanId: 'infra-span-id',
+	traceId: TEST_TRACE_ID,
+	name: 'api-service',
+	serviceName: 'api-service',
+	timestamp: 1640995200000000, // 2022-01-01 00:00:00 in microseconds
+	durationNano: 2000000000, // 2 seconds in nanoseconds
+	spanKind: 'server',
+	statusCodeString: 'STATUS_CODE_OK',
+	statusMessage: '',
+	parentSpanId: '',
+	references: [],
+	event: [],
+	tagMap: {
+		'k8s.cluster.name': TEST_CLUSTER_NAME,
+		'k8s.pod.name': TEST_POD_NAME,
+		'k8s.node.name': TEST_NODE_NAME,
+		'host.name': TEST_HOST_NAME,
+		'service.name': 'api-service',
+		'http.method': 'GET',
+	},
+	hasError: false,
+	rootSpanId: '',
+	kind: 0,
+	rootName: '',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+};
+
+// Mock span with only pod metadata
+export const mockSpanWithPodOnly: Span = {
+	...mockSpanWithInfraMetadata,
+	spanId: 'pod-only-span-id',
+	tagMap: {
+		'k8s.cluster.name': TEST_CLUSTER_NAME,
+		'k8s.pod.name': TEST_POD_NAME,
+		'service.name': 'api-service',
+	},
+};
+
+// Mock span with only node metadata
+export const mockSpanWithNodeOnly: Span = {
+	...mockSpanWithInfraMetadata,
+	spanId: 'node-only-span-id',
+	tagMap: {
+		'k8s.node.name': TEST_NODE_NAME,
+		'service.name': 'api-service',
+	},
+};
+
+// Mock span with only host metadata
+export const mockSpanWithHostOnly: Span = {
+	...mockSpanWithInfraMetadata,
+	spanId: 'host-only-span-id',
+	tagMap: {
+		'host.name': TEST_HOST_NAME,
+		'service.name': 'api-service',
+	},
+};
+
+// Mock span without any infrastructure metadata
+export const mockSpanWithoutInfraMetadata: Span = {
+	...mockSpanWithInfraMetadata,
+	spanId: 'no-infra-span-id',
+	tagMap: {
+		'service.name': 'api-service',
+		'http.method': 'GET',
+		'http.status_code': '200',
+	},
+};
+
+// Mock infrastructure metrics API responses
+export const mockPodMetricsResponse = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							metric: { pod_name: TEST_POD_NAME },
+							values: [
+								[1640995200, '0.5'], // CPU usage
+								[1640995260, '0.6'],
+							],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+export const mockNodeMetricsResponse = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							metric: { node_name: TEST_NODE_NAME },
+							values: [
+								[1640995200, '2.1'], // Memory usage
+								[1640995260, '2.3'],
+							],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+export const mockEmptyMetricsResponse = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [],
+				},
+			},
+		},
+	},
+};
+
+// Expected infrastructure metadata extractions
+export const expectedInfraMetadata = {
+	clusterName: TEST_CLUSTER_NAME,
+	podName: TEST_POD_NAME,
+	nodeName: TEST_NODE_NAME,
+	hostName: TEST_HOST_NAME,
+};
+
+export const expectedPodOnlyMetadata = {
+	clusterName: TEST_CLUSTER_NAME,
+	podName: TEST_POD_NAME,
+	nodeName: '',
+	hostName: '',
+	spanTimestamp: '2022-01-01T00:00:00.000Z',
+};
+
+export const expectedNodeOnlyMetadata = {
+	clusterName: '',
+	podName: '',
+	nodeName: TEST_NODE_NAME,
+	hostName: '',
+	spanTimestamp: '2022-01-01T00:00:00.000Z',
+};
+
+export const expectedHostOnlyMetadata = {
+	clusterName: '',
+	podName: '',
+	nodeName: '',
+	hostName: TEST_HOST_NAME,
+	spanTimestamp: '2022-01-01T00:00:00.000Z',
+};

frontend/src/container/SpanDetailsDrawer/__tests__/mockData.ts

@@ -0,0 +1,224 @@
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
+import { ILog } from 'types/api/logs/log';
+import { Span } from 'types/api/trace/getTraceV2';
+
+// Constants
+const TEST_SPAN_ID = 'test-span-id';
+const TEST_TRACE_ID = 'test-trace-id';
+const TEST_SERVICE = 'test-service';
+
+// Mock span data
+export const mockSpan: Span = {
+	spanId: TEST_SPAN_ID,
+	traceId: TEST_TRACE_ID,
+	name: TEST_SERVICE,
+	serviceName: TEST_SERVICE,
+	timestamp: 1640995200000, // 2022-01-01 00:00:00 in milliseconds
+	durationNano: 1000000000, // 1 second in nanoseconds
+	spanKind: 'server',
+	statusCodeString: 'STATUS_CODE_OK',
+	statusMessage: '',
+	parentSpanId: '',
+	references: [],
+	event: [],
+	tagMap: {
+		'http.method': 'GET',
+		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/test',
+		'http.status_code': '200',
+	},
+	hasError: false,
+	rootSpanId: '',
+	kind: 0,
+	rootName: '',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+};
+
+// Mock span with long status message (> 100 characters) for testing truncation
+export const mockSpanWithLongStatusMessage: Span = {
+	...mockSpan,
+	statusMessage:
+		'Error: Connection timeout occurred while trying to reach the database server. The connection pool was exhausted and all retry attempts failed after 30 seconds.',
+};
+
+// Mock span with short status message (<= 100 characters)
+export const mockSpanWithShortStatusMessage: Span = {
+	...mockSpan,
+	statusMessage: 'Connection successful',
+};
+
+// Mock logs with proper relationships
+export const mockSpanLogs: ILog[] = [
+	{
+		id: 'span-log-1',
+		timestamp: '2022-01-01T00:00:01.000Z',
+		body: 'Processing request in span',
+		severity_text: 'INFO',
+		severity_number: 9,
+		spanID: TEST_SPAN_ID,
+		span_id: TEST_SPAN_ID,
+		date: '',
+		traceId: TEST_TRACE_ID,
+		traceFlags: 0,
+		severityText: '',
+		severityNumber: 0,
+		resources_string: {},
+		scope_string: {},
+		attributesString: {},
+		attributes_string: {},
+		attributesInt: {},
+		attributesFloat: {},
+	},
+	{
+		id: 'span-log-2',
+		timestamp: '2022-01-01T00:00:02.000Z',
+		body: 'Span operation completed',
+		severity_text: 'INFO',
+		severity_number: 9,
+		spanID: TEST_SPAN_ID,
+		span_id: TEST_SPAN_ID,
+		date: '',
+		traceId: TEST_TRACE_ID,
+		traceFlags: 0,
+		severityText: '',
+		severityNumber: 0,
+		resources_string: {},
+		scope_string: {},
+		attributesString: {},
+		attributes_string: {},
+		attributesInt: {},
+		attributesFloat: {},
+	},
+];
+
+export const mockContextLogs: ILog[] = [
+	{
+		id: 'context-log-before',
+		timestamp: '2021-12-31T23:59:59.000Z',
+		body: 'Context log before span',
+		severity_text: 'INFO',
+		severity_number: 9,
+		spanID: 'different-span-id',
+		span_id: 'different-span-id',
+		date: '',
+		traceId: TEST_TRACE_ID,
+		traceFlags: 0,
+		severityText: '',
+		severityNumber: 0,
+		resources_string: {},
+		scope_string: {},
+		attributesString: {},
+		attributes_string: {},
+		attributesInt: {},
+		attributesFloat: {},
+	},
+	{
+		id: 'context-log-after',
+		timestamp: '2022-01-01T00:00:03.000Z',
+		body: 'Context log after span',
+		severity_text: 'INFO',
+		severity_number: 9,
+		spanID: 'another-different-span-id',
+		span_id: 'another-different-span-id',
+		date: '',
+		traceId: TEST_TRACE_ID,
+		traceFlags: 0,
+		severityText: '',
+		severityNumber: 0,
+		resources_string: {},
+		scope_string: {},
+		attributesString: {},
+		attributes_string: {},
+		attributesInt: {},
+		attributesFloat: {},
+	},
+];
+
+// Combined logs in chronological order
+export const mockAllLogs: ILog[] = [
+	mockContextLogs[0], // before
+	...mockSpanLogs, // span logs
+	mockContextLogs[1], // after
+];
+
+// Mock API responses
+export const mockSpanLogsResponse = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: mockSpanLogs.map((log) => ({
+								data: log,
+								timestamp: log.timestamp,
+							})),
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+export const mockBeforeLogsResponse = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: [mockContextLogs[0]].map((log) => ({
+								data: log,
+								timestamp: log.timestamp,
+							})),
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+export const mockAfterLogsResponse = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: [mockContextLogs[1]].map((log) => ({
+								data: log,
+								timestamp: log.timestamp,
+							})),
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+export const mockEmptyLogsResponse = {
+	payload: {
+		data: {
+			newResult: {
+				data: {
+					result: [
+						{
+							list: [],
+						},
+					],
+				},
+			},
+		},
+	},
+};
+
+// Expected v5 filter expressions
+export const expectedSpanFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND span_id = '${TEST_SPAN_ID}'`;
+export const expectedBeforeFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND id < 'span-log-1'`;
+export const expectedAfterFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND id > 'span-log-2'`;
+export const expectedTraceOnlyFilterExpression = `trace_id = '${TEST_TRACE_ID}'`;

frontend/src/container/SpanDetailsDrawer/constants.ts

@@ -0,0 +1,11 @@
+export enum RelatedSignalsViews {
+	LOGS = 'logs',
+	// METRICS = 'metrics',
+	INFRA = 'infra',
+}
+
+export const RELATED_SIGNALS_VIEW_TYPES = {
+	LOGS: RelatedSignalsViews.LOGS,
+	// METRICS: RelatedSignalsViews.METRICS,
+	INFRA: RelatedSignalsViews.INFRA,
+};

frontend/src/container/SpanDetailsDrawer/utils.ts

@@ -0,0 +1,24 @@
+import { Span } from 'types/api/trace/getTraceV2';
+
+/**
+ * Infrastructure metadata keys that indicate infra signals are available
+ */
+export const INFRA_METADATA_KEYS = [
+	'k8s.cluster.name',
+	'k8s.pod.name',
+	'k8s.node.name',
+	'host.name',
+] as const;
+
+/**
+ * Checks if a span has any infrastructure metadata attributes
+ * @param span - The span to check for infrastructure metadata
+ * @returns true if the span has at least one infrastructure metadata key, false otherwise
+ */
+export function hasInfraMetadata(span: Span | undefined): boolean {
+	if (!span?.tagMap) {
+		return false;
+	}
+
+	return INFRA_METADATA_KEYS.some((key) => span.tagMap?.[key]);
+}

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -203,8 +203,6 @@ export const routesToSkip = [
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 	ROUTES.SOMETHING_WENT_WRONG,
-	ROUTES.LLM_OBSERVABILITY_BASE,
-	ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/container/TraceMetadata/TraceMetadata.styles.scss

@@ -0,0 +1,186 @@
+.trace-metadata {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 16px 0px 16px;
+
+	.metadata-info {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+
+		.first-row {
+			display: flex;
+			align-items: center;
+
+			.previous-btn {
+				display: flex;
+				height: 30px;
+				padding: 6px 8px;
+				align-items: center;
+				gap: 4px;
+				border: 1px solid var(--l1-border);
+				background: var(--l2-background);
+				border-radius: 4px;
+				box-shadow: none;
+			}
+
+			.trace-name {
+				display: flex;
+				padding: 6px 8px;
+				margin-left: 6px;
+				align-items: center;
+				gap: 4px;
+				border: 1px solid var(--l1-border);
+				border-radius: 4px 0px 0px 4px;
+				background: var(--l2-background);
+
+				.drafting {
+					color: var(--l1-foreground);
+				}
+
+				.trace-id {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 128.571% */
+					letter-spacing: -0.07px;
+				}
+			}
+
+			.trace-id-value {
+				display: flex;
+				padding: 6px 8px;
+				justify-content: center;
+				align-items: center;
+				gap: 10px;
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				letter-spacing: -0.07px;
+				border: 1px solid var(--l1-border);
+				border-left: unset;
+				border-radius: 0px 4px 4px 0px;
+			}
+		}
+
+		.second-row {
+			display: flex;
+			gap: 24px;
+
+			.service-entry-info {
+				display: flex;
+				gap: 6px;
+				color: var(--l2-foreground);
+				align-items: center;
+
+				.text {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+				}
+
+				.root-span-name {
+					display: flex;
+					padding: 2px 8px;
+					align-items: center;
+					gap: 8px;
+					border-radius: 50px;
+					border: 1px solid var(--l1-border);
+					background: var(--l1-border);
+				}
+			}
+
+			.trace-duration {
+				display: flex;
+				gap: 6px;
+				color: var(--l2-foreground);
+				align-items: center;
+
+				.text {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+				}
+			}
+
+			.start-time-info {
+				display: flex;
+				gap: 6px;
+				color: var(--l2-foreground);
+				align-items: center;
+
+				.text {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+				}
+			}
+		}
+	}
+
+	.datapoints-info {
+		display: flex;
+		gap: 16px;
+
+		.separator {
+			width: 1px;
+			background: var(--l3-background);
+		}
+
+		.data-point {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			gap: 4px;
+
+			.text {
+				color: var(--l2-foreground);
+				text-align: center;
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				letter-spacing: -0.07px;
+			}
+
+			.value {
+				color: var(--l1-foreground);
+				font-variant-numeric: lining-nums tabular-nums stacked-fractions
+					slashed-zero;
+				font-feature-settings:
+					'case' on,
+					'cpsp' on,
+					'dlig' on,
+					'salt' on;
+				font-family: Inter;
+				font-size: 20px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 28px; /* 140% */
+				letter-spacing: -0.1px;
+				text-transform: uppercase;
+				text-align: right;
+			}
+		}
+	}
+}

frontend/src/container/TraceMetadata/TraceMetadata.tsx

@@ -0,0 +1,171 @@
+import { useMemo } from 'react';
+import { useLocation, useRouteMatch } from 'react-router-dom';
+import { Skeleton, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import removeLocalStorageKey from 'api/browser/localstorage/remove';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import ROUTES from 'constants/routes';
+import dayjs from 'dayjs';
+import history from 'lib/history';
+import {
+	ArrowLeft,
+	BetweenHorizontalStart,
+	CalendarClock,
+	DraftingCompass,
+	Timer,
+} from '@signozhq/icons';
+import { useTimezone } from 'providers/Timezone';
+
+import './TraceMetadata.styles.scss';
+
+export interface ITraceMetadataProps {
+	traceID: string;
+	rootServiceName: string;
+	rootSpanName: string;
+	startTime: number;
+	duration: number;
+	totalSpans: number;
+	totalErrorSpans: number;
+	notFound: boolean;
+	isDataLoading: boolean;
+}
+
+function TraceMetadata(props: ITraceMetadataProps): JSX.Element {
+	const {
+		traceID,
+		rootServiceName,
+		rootSpanName,
+		startTime,
+		duration,
+		totalErrorSpans,
+		totalSpans,
+		notFound,
+		isDataLoading,
+	} = props;
+
+	const { timezone } = useTimezone();
+
+	const startTimeInMs = useMemo(
+		() =>
+			dayjs(startTime * 1e3)
+				.tz(timezone.value)
+				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS),
+		[startTime, timezone.value],
+	);
+
+	const handlePreviousBtnClick = (): void => {
+		if (window.history.length > 1) {
+			history.goBack();
+		} else {
+			history.push(ROUTES.TRACES_EXPLORER);
+		}
+	};
+
+	const isOnOldRoute = !!useRouteMatch({
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+	});
+
+	const location = useLocation();
+
+	const handleSwitchToNewView = (): void => {
+		removeLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW);
+		history.replace({
+			pathname: `/trace/${traceID}`,
+			search: location.search,
+			hash: location.hash,
+			state: location.state,
+		});
+	};
+
+	return (
+		<div className="trace-metadata">
+			<section className="metadata-info">
+				<div className="first-row">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="icon"
+						className="previous-btn"
+						prefix={<ArrowLeft size={14} />}
+						onClick={handlePreviousBtnClick}
+					/>
+					<div className="trace-name">
+						<DraftingCompass size={14} className="drafting" />
+						<Typography.Text className="trace-id">Trace ID</Typography.Text>
+					</div>
+					<Typography.Text className="trace-id-value">{traceID}</Typography.Text>
+					{isOnOldRoute && (
+						<Button
+							variant="solid"
+							color="primary"
+							size="md"
+							className="new-view-btn"
+							onClick={handleSwitchToNewView}
+						>
+							Try new experience
+						</Button>
+					)}
+				</div>
+
+				{isDataLoading && (
+					<div className="second-row">
+						<div className="service-entry-info">
+							<BetweenHorizontalStart size={14} />
+							<Skeleton.Input active className="skeleton-input" size="small" />
+							<Skeleton.Input active className="skeleton-input" size="small" />
+							<Skeleton.Input active className="skeleton-input" size="small" />
+						</div>
+					</div>
+				)}
+				{!isDataLoading && !notFound && (
+					<div className="second-row">
+						<div className="service-entry-info">
+							<BetweenHorizontalStart size={14} />
+							<Typography.Text className="text">{rootServiceName}</Typography.Text>
+							&#8212;
+							<Typography.Text className="text root-span-name">
+								{rootSpanName}
+							</Typography.Text>
+						</div>
+						<div className="trace-duration">
+							<Tooltip title="Duration of trace">
+								<Timer size={14} />
+							</Tooltip>
+							<Typography.Text className="text">
+								{getYAxisFormattedValue(`${duration}`, 'ms')}
+							</Typography.Text>
+						</div>
+						<div className="start-time-info">
+							<Tooltip title="Start timestamp">
+								<CalendarClock size={14} />
+							</Tooltip>
+
+							<Typography.Text className="text">
+								{startTimeInMs || 'N/A'}
+							</Typography.Text>
+						</div>
+					</div>
+				)}
+			</section>
+			{!notFound && (
+				<section className="datapoints-info">
+					<div className="data-point">
+						<Typography.Text className="text">Total Spans</Typography.Text>
+						<Typography.Text className="value">{totalSpans}</Typography.Text>
+					</div>
+					<div className="separator" />
+					<div className="data-point">
+						<Typography.Text className="text">Error Spans</Typography.Text>
+						<Typography.Text className="value">{totalErrorSpans}</Typography.Text>
+					</div>
+				</section>
+			)}
+		</div>
+	);
+}
+
+export default TraceMetadata;

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -0,0 +1,239 @@
+// Modal base styles
+.add-span-to-funnel-modal {
+	&__loading-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 400px;
+	}
+	&-container {
+		.ant-modal {
+			&-content,
+			&-header {
+				background: var(--l1-background);
+			}
+
+			&-header {
+				border-bottom: none;
+
+				.ant-modal-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			&-body {
+				padding: 14px 16px !important;
+				padding-bottom: 0 !important;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			&-footer {
+				margin-top: 0;
+				background: var(--l2-background);
+				border-top: 1px solid var(--l1-border);
+				padding: 16px !important;
+				.add-span-to-funnel-modal {
+					&__save-button {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 4px;
+						color: var(--l1-foreground);
+						font-size: 12px;
+						font-weight: 500;
+						line-height: 24px;
+						width: 135px;
+
+						.ant-btn-icon {
+							display: flex;
+						}
+						&:disabled {
+							color: var(--l2-foreground);
+							.ant-btn-icon {
+								svg {
+									stroke: var(--l2-foreground);
+								}
+							}
+						}
+					}
+					&__discard-button {
+						background: var(--l1-border);
+					}
+				}
+				.ant-btn {
+					border-radius: 2px;
+					padding: 4px 8px;
+					margin: 0 !important;
+					border: none;
+					box-shadow: none;
+				}
+			}
+		}
+	}
+}
+
+// Main modal styles
+.add-span-to-funnel-modal {
+	// Common button styles
+	%button-base {
+		display: flex;
+		align-items: center;
+		font-family: Inter;
+	}
+
+	// Details view styles
+	&--details {
+		.traces-funnel-details {
+			height: unset;
+
+			&__steps-config {
+				width: unset;
+				border: none;
+			}
+
+			.funnel-step-wrapper {
+				gap: 15px;
+			}
+
+			.steps-content {
+				padding: 0 16px;
+				max-height: 500px;
+			}
+		}
+	}
+
+	// Search section
+	&__search {
+		display: flex;
+		gap: 12px;
+		margin-bottom: 14px;
+		align-items: center;
+
+		&-input {
+			flex: 1;
+			padding: 6px 8px;
+			background: var(--l3-background);
+
+			.ant-input-prefix {
+				height: 18px;
+				margin-inline-end: 6px;
+				svg {
+					opacity: 0.4;
+				}
+			}
+
+			&,
+			input {
+				font-family: Inter;
+				font-size: 14px;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+				font-weight: 400;
+				background: var(--l3-background);
+			}
+
+			input::placeholder {
+				color: var(--l2-foreground);
+				opacity: 0.4;
+			}
+		}
+	}
+
+	// Create button
+	&__create-button {
+		@extend %button-base;
+		width: 153px;
+		padding: 4px 8px;
+		justify-content: center;
+		gap: 4px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		background: var(--l1-border);
+		border: none;
+		box-shadow: none;
+		color: var(--l2-foreground);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 24px;
+	}
+	.funnel-item {
+		padding: 8px 8px 12px 16px;
+		&,
+		&:first-child {
+			border-radius: 6px;
+		}
+
+		&__header {
+			line-height: 20px;
+		}
+		&__details {
+			line-height: 18px;
+		}
+	}
+
+	// List section
+	&__list {
+		max-height: 400px;
+		overflow-y: scroll;
+		.funnels-empty {
+			&__content {
+				padding: 0;
+			}
+		}
+
+		.funnels-list {
+			gap: 8px;
+
+			.funnel-item {
+				padding: 8px 16px 12px;
+
+				&__details {
+					margin-top: 8px;
+				}
+			}
+		}
+	}
+
+	&__spinner {
+		height: 400px;
+	}
+
+	// Back button
+	&__back-button {
+		@extend %button-base;
+		gap: 6px;
+		color: var(--l2-foreground);
+		font-size: 14px;
+		line-height: 20px;
+		margin-bottom: 14px;
+	}
+
+	// Details section
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.funnel-configuration__steps {
+			padding: 0;
+
+			.funnel-step {
+				&__content .filters__service-and-span .ant-select {
+					width: 170px;
+				}
+
+				&__footer .error {
+					width: 25%;
+				}
+			}
+
+			.inter-step-config {
+				width: calc(100% - 104px);
+			}
+		}
+		.funnel-item__actions-popover {
+			display: none;
+		}
+	}
+}

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -0,0 +1,294 @@
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
+import { Button, Spin } from 'antd';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SignozModal from 'components/SignozModal/SignozModal';
+import {
+	useFunnelDetails,
+	useFunnelsList,
+} from 'hooks/TracesFunnels/useFunnels';
+import { isEqual } from 'lodash-es';
+import FunnelConfiguration from 'pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration';
+import { TracesFunnelsContentRenderer } from 'pages/TracesFunnels';
+import CreateFunnel from 'pages/TracesFunnels/components/CreateFunnel/CreateFunnel';
+import { FunnelListItem } from 'pages/TracesFunnels/components/FunnelsList/FunnelsList';
+import {
+	FunnelProvider,
+	useFunnelContext,
+} from 'pages/TracesFunnels/FunnelContext';
+import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
+import { Span } from 'types/api/trace/getTraceV2';
+import { FunnelData } from 'types/api/traceFunnels';
+
+import './AddSpanToFunnelModal.styles.scss';
+
+enum ModalView {
+	LIST = 'list',
+	DETAILS = 'details',
+}
+
+function FunnelDetailsView({
+	funnel,
+	span,
+	triggerAutoSave,
+	showNotifications,
+	onChangesDetected,
+	triggerDiscard,
+}: {
+	funnel: FunnelData;
+	span: Span;
+	triggerAutoSave: boolean;
+	showNotifications: boolean;
+	onChangesDetected: (hasChanges: boolean) => void;
+	triggerDiscard: boolean;
+}): JSX.Element {
+	const { handleRestoreSteps, steps } = useFunnelContext();
+
+	// Track changes between current steps and original steps
+	useEffect(() => {
+		const hasChanges = !isEqual(steps, funnel.steps);
+		if (onChangesDetected) {
+			onChangesDetected(hasChanges);
+		}
+	}, [steps, funnel.steps, onChangesDetected]);
+
+	// Handle discard when triggered from parent
+	useEffect(() => {
+		if (triggerDiscard && funnel.steps) {
+			handleRestoreSteps(funnel.steps);
+		}
+	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
+
+	return (
+		<div className="add-span-to-funnel-modal__details">
+			<FunnelListItem
+				funnel={funnel}
+				shouldRedirectToTracesListOnDeleteSuccess={false}
+				isSpanDetailsPage
+			/>
+			<FunnelConfiguration
+				funnel={funnel}
+				isTraceDetailsPage
+				span={span}
+				triggerAutoSave={triggerAutoSave}
+				showNotifications={showNotifications}
+			/>
+		</div>
+	);
+}
+
+interface AddSpanToFunnelModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	span: Span;
+}
+
+function AddSpanToFunnelModal({
+	isOpen,
+	onClose,
+	span,
+}: AddSpanToFunnelModalProps): JSX.Element {
+	const [activeView, setActiveView] = useState<ModalView>(ModalView.LIST);
+	const [searchQuery, setSearchQuery] = useState<string>('');
+	const [selectedFunnelId, setSelectedFunnelId] = useState<string | undefined>(
+		undefined,
+	);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
+	const [triggerSave, setTriggerSave] = useState<boolean>(false);
+	const [isUnsavedChanges, setIsUnsavedChanges] = useState<boolean>(false);
+	const [triggerDiscard, setTriggerDiscard] = useState<boolean>(false);
+	const [isCreatedFromSpan, setIsCreatedFromSpan] = useState<boolean>(false);
+
+	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
+		setSearchQuery(e.target.value);
+	};
+
+	const { data, isLoading, isError, isFetching } = useFunnelsList();
+
+	const filteredData = useMemo(
+		() =>
+			filterFunnelsByQuery(data?.payload || [], searchQuery).sort(
+				(a, b) =>
+					new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+			),
+		[data?.payload, searchQuery],
+	);
+
+	const {
+		data: funnelDetails,
+		isLoading: isFunnelDetailsLoading,
+		isFetching: isFunnelDetailsFetching,
+	} = useFunnelDetails({
+		funnelId: selectedFunnelId,
+	});
+
+	const handleFunnelClick = (funnel: FunnelData): void => {
+		setSelectedFunnelId(funnel.funnel_id);
+		setActiveView(ModalView.DETAILS);
+		setIsCreatedFromSpan(false);
+	};
+
+	const handleBack = (): void => {
+		setActiveView(ModalView.LIST);
+		setSelectedFunnelId(undefined);
+		setIsUnsavedChanges(false);
+		setTriggerSave(false);
+		setIsCreatedFromSpan(false);
+	};
+
+	const handleCreateNewClick = (): void => {
+		setIsCreateModalOpen(true);
+	};
+
+	const handleSaveFunnel = (): void => {
+		setTriggerSave(true);
+		// Reset trigger after a brief moment to allow the save to be processed
+		setTimeout(() => {
+			setTriggerSave(false);
+			onClose();
+		}, 100);
+	};
+
+	const handleDiscard = (): void => {
+		setTriggerDiscard(true);
+		// Reset trigger after a brief moment
+		setTimeout(() => {
+			setTriggerDiscard(false);
+			onClose();
+		}, 100);
+	};
+
+	const renderListView = (): JSX.Element => (
+		<div className="add-span-to-funnel-modal">
+			{!!filteredData?.length && (
+				<div className="add-span-to-funnel-modal__search">
+					<Input
+						className="add-span-to-funnel-modal__search-input"
+						placeholder="Search by name, description, or tags..."
+						prefix={<Search size={12} />}
+						value={searchQuery}
+						onChange={handleSearch}
+					/>
+				</div>
+			)}
+			<div className="add-span-to-funnel-modal__list">
+				<OverlayScrollbar>
+					<TracesFunnelsContentRenderer
+						isError={isError}
+						isLoading={isLoading || isFetching}
+						data={filteredData || []}
+						onCreateFunnel={handleCreateNewClick}
+						onFunnelClick={(funnel: FunnelData): void => handleFunnelClick(funnel)}
+						shouldRedirectToTracesListOnDeleteSuccess={false}
+					/>
+				</OverlayScrollbar>
+			</div>
+			<CreateFunnel
+				isOpen={isCreateModalOpen}
+				onClose={(funnelId): void => {
+					if (funnelId) {
+						setSelectedFunnelId(funnelId);
+						setActiveView(ModalView.DETAILS);
+						setIsCreatedFromSpan(true);
+					}
+					setIsCreateModalOpen(false);
+				}}
+				redirectToDetails={false}
+			/>
+		</div>
+	);
+
+	const renderDetailsView = ({ span }: { span: Span }): JSX.Element => (
+		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
+			<Button
+				type="text"
+				className="add-span-to-funnel-modal__back-button"
+				onClick={handleBack}
+			>
+				<ArrowLeft size={14} />
+				All funnels
+			</Button>
+			<div className="traces-funnel-details">
+				<div className="traces-funnel-details__steps-config">
+					<Spin
+						className="add-span-to-funnel-modal__loading-spinner"
+						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
+						indicator={<Loader className="animate-spin" size="md" />}
+					>
+						{selectedFunnelId && funnelDetails?.payload && (
+							<FunnelProvider
+								funnelId={selectedFunnelId}
+								hasSingleStep={isCreatedFromSpan}
+							>
+								<FunnelDetailsView
+									funnel={funnelDetails.payload}
+									span={span}
+									triggerAutoSave={triggerSave}
+									showNotifications
+									onChangesDetected={setIsUnsavedChanges}
+									triggerDiscard={triggerDiscard}
+								/>
+							</FunnelProvider>
+						)}
+					</Spin>
+				</div>
+			</div>
+		</div>
+	);
+
+	return (
+		<SignozModal
+			open={isOpen}
+			onCancel={onClose}
+			width={570}
+			title="Add span to funnel"
+			className={cx('add-span-to-funnel-modal-container', {
+				'add-span-to-funnel-modal-container--details':
+					activeView === ModalView.DETAILS,
+			})}
+			footer={
+				activeView === ModalView.DETAILS
+					? [
+							<Button
+								type="default"
+								key="discard"
+								onClick={handleDiscard}
+								className="add-span-to-funnel-modal__discard-button"
+								disabled={!isUnsavedChanges}
+							>
+								Discard
+							</Button>,
+							<Button
+								key="save"
+								type="primary"
+								className="add-span-to-funnel-modal__save-button"
+								onClick={handleSaveFunnel}
+								disabled={!isUnsavedChanges}
+								icon={<Check size={14} color="var(--bg-vanilla-100)" />}
+							>
+								Save Funnel
+							</Button>,
+						]
+					: [
+							<Button
+								key="create"
+								type="default"
+								className="add-span-to-funnel-modal__create-button"
+								onClick={handleCreateNewClick}
+								icon={<Plus size={14} />}
+							>
+								Create new funnel
+							</Button>,
+						]
+			}
+		>
+			{activeView === ModalView.LIST
+				? renderListView()
+				: renderDetailsView({ span })}
+		</SignozModal>
+	);
+}
+
+export default AddSpanToFunnelModal;

frontend/src/container/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

@@ -0,0 +1,28 @@
+.span-line-action-buttons {
+	display: flex;
+	position: absolute;
+	transform: translate(-50%, -50%);
+	top: 50%;
+	right: 0;
+	cursor: pointer;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+
+	.ant-btn-default {
+		border: none;
+		box-shadow: none;
+		padding: 9px;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+
+		&.active-tab {
+			background-color: var(--l1-border);
+		}
+	}
+
+	.copy-span-btn {
+		border-color: var(--l1-border) !important;
+	}
+}

frontend/src/container/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -0,0 +1,131 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { render } from 'tests/test-utils';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import SpanLineActionButtons from '../index';
+
+// Mock the useCopySpanLink hook
+jest.mock('hooks/trace/useCopySpanLink');
+
+const mockSpan: Span = {
+	spanId: 'test-span-id',
+	name: 'test-span',
+	serviceName: 'test-service',
+	durationNano: 1000,
+	timestamp: 1234567890,
+	rootSpanId: 'test-root-span-id',
+	parentSpanId: 'test-parent-span-id',
+	traceId: 'test-trace-id',
+	hasError: false,
+	kind: 0,
+	references: [],
+	tagMap: {},
+	event: [],
+	rootName: 'test-root-name',
+	statusMessage: 'test-status-message',
+	statusCodeString: 'test-status-code-string',
+	spanKind: 'test-span-kind',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+};
+
+describe('SpanLineActionButtons', () => {
+	beforeEach(() => {
+		// Clear mock before each test
+		jest.clearAllMocks();
+	});
+
+	it('renders copy link button with correct icon', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the button is rendered with an icon
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toBeInTheDocument();
+		expect(copyButton.querySelector('svg')).toBeInTheDocument();
+	});
+
+	it('calls onSpanCopy when copy button is clicked', () => {
+		const mockOnSpanCopy = jest.fn();
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: mockOnSpanCopy,
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Click the copy button
+		const copyButton = screen.getByRole('button');
+		fireEvent.click(copyButton);
+
+		// Verify the copy function was called
+		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
+	});
+
+	it('applies correct styling classes', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the main container has the correct class
+		const container = screen
+			.getByRole('button')
+			.closest('.span-line-action-buttons');
+		expect(container).toHaveClass('span-line-action-buttons');
+
+		// Check if the button has the correct class
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toHaveClass('copy-span-btn');
+	});
+
+	it('copies span link to clipboard when copy button is clicked', () => {
+		const mockSetCopy = jest.fn();
+		const mockUrlQuery = {
+			delete: jest.fn(),
+			set: jest.fn(),
+			toString: jest.fn().mockReturnValue('spanId=test-span-id'),
+		};
+		const mockPathname = '/test-path';
+		const mockLocation = {
+			origin: 'http://localhost:3000',
+		};
+
+		// Mock window.location
+		Object.defineProperty(window, 'location', {
+			value: mockLocation,
+			writable: true,
+		});
+
+		// Mock useCopySpanLink hook
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: (event: React.MouseEvent) => {
+				event.preventDefault();
+				event.stopPropagation();
+				mockUrlQuery.delete('spanId');
+				mockUrlQuery.set('spanId', mockSpan.spanId);
+				const link = `${
+					window.location.origin
+				}${mockPathname}?${mockUrlQuery.toString()}`;
+				mockSetCopy(link);
+			},
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Click the copy button
+		const copyButton = screen.getByRole('button');
+		fireEvent.click(copyButton);
+
+		// Verify the copy function was called with correct link
+		expect(mockSetCopy).toHaveBeenCalledWith(
+			'http://localhost:3000/test-path?spanId=test-span-id',
+		);
+	});
+});

frontend/src/container/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -0,0 +1,28 @@
+import { Link } from '@signozhq/icons';
+import { Button, Tooltip } from 'antd';
+import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import './SpanLineActionButtons.styles.scss';
+
+export interface SpanLineActionButtonsProps {
+	span: Span;
+}
+export default function SpanLineActionButtons({
+	span,
+}: SpanLineActionButtonsProps): JSX.Element {
+	const { onSpanCopy } = useCopySpanLink(span);
+
+	return (
+		<div className="span-line-action-buttons">
+			<Tooltip title="Copy Span Link">
+				<Button
+					size="small"
+					icon={<Link size={14} />}
+					onClick={onSpanCopy}
+					className="copy-span-btn"
+				/>
+			</Tooltip>
+		</div>
+	);
+}

frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss

@@ -0,0 +1,9 @@
+.trace-waterfall {
+	height: calc(70vh - 236px);
+
+	.loading-skeleton {
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+}

frontend/src/container/TraceWaterfall/TraceWaterfall.tsx

@@ -0,0 +1,137 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { Skeleton } from 'antd';
+import { AxiosError } from 'axios';
+import Spinner from 'components/Spinner';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { GetTraceV2SuccessResponse, Span } from 'types/api/trace/getTraceV2';
+
+import { TraceWaterfallStates } from './constants';
+import Error from './TraceWaterfallStates/Error/Error';
+import NoData from './TraceWaterfallStates/NoData/NoData';
+import Success from './TraceWaterfallStates/Success/Success';
+
+import './TraceWaterfall.styles.scss';
+
+export interface IInterestedSpan {
+	spanId: string;
+	isUncollapsed: boolean;
+}
+
+interface ITraceWaterfallProps {
+	traceId: string;
+	uncollapsedNodes: string[];
+	traceData:
+		| SuccessResponse<GetTraceV2SuccessResponse, unknown>
+		| ErrorResponse
+		| undefined;
+	isFetchingTraceData: boolean;
+	errorFetchingTraceData: unknown;
+	interestedSpanId: IInterestedSpan;
+	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
+	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
+	selectedSpan: Span | undefined;
+	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
+}
+
+function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
+	const {
+		traceData,
+		isFetchingTraceData,
+		errorFetchingTraceData,
+		interestedSpanId,
+		traceId,
+		uncollapsedNodes,
+		setInterestedSpanId,
+		setTraceFlamegraphStatsWidth,
+		setSelectedSpan,
+		selectedSpan,
+	} = props;
+	// get the current state of trace waterfall based on the API lifecycle
+	const traceWaterfallState = useMemo(() => {
+		if (isFetchingTraceData) {
+			if (
+				traceData &&
+				traceData.payload &&
+				traceData.payload.spans &&
+				traceData.payload.spans.length > 0
+			) {
+				return TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT;
+			}
+			return TraceWaterfallStates.LOADING;
+		}
+		if (errorFetchingTraceData) {
+			return TraceWaterfallStates.ERROR;
+		}
+		if (
+			traceData &&
+			traceData.payload &&
+			traceData.payload.spans &&
+			traceData.payload.spans.length === 0
+		) {
+			return TraceWaterfallStates.NO_DATA;
+		}
+
+		return TraceWaterfallStates.SUCCESS;
+	}, [errorFetchingTraceData, isFetchingTraceData, traceData]);
+
+	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
+	const spans = useMemo(
+		() => traceData?.payload?.spans || [],
+		[traceData?.payload?.spans],
+	);
+
+	// get the content based on the current state of the trace waterfall
+	const getContent = useMemo(() => {
+		switch (traceWaterfallState) {
+			case TraceWaterfallStates.LOADING:
+				return (
+					<div className="loading-skeleton">
+						<Skeleton active paragraph={{ rows: 6 }} />
+					</div>
+				);
+			case TraceWaterfallStates.ERROR:
+				return <Error error={errorFetchingTraceData as AxiosError} />;
+			case TraceWaterfallStates.NO_DATA:
+				return <NoData id={traceId} />;
+			case TraceWaterfallStates.SUCCESS:
+			case TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT:
+				return (
+					<Success
+						spans={spans}
+						traceMetadata={{
+							traceId,
+							startTime: traceData?.payload?.startTimestampMillis || 0,
+							endTime: traceData?.payload?.endTimestampMillis || 0,
+							hasMissingSpans: traceData?.payload?.hasMissingSpans || false,
+						}}
+						interestedSpanId={interestedSpanId || ''}
+						uncollapsedNodes={uncollapsedNodes}
+						setInterestedSpanId={setInterestedSpanId}
+						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
+						selectedSpan={selectedSpan}
+						setSelectedSpan={setSelectedSpan}
+					/>
+				);
+			default:
+				return <Spinner tip="Fetching the trace!" />;
+		}
+	}, [
+		errorFetchingTraceData,
+		interestedSpanId,
+		selectedSpan,
+		setInterestedSpanId,
+		setSelectedSpan,
+		setTraceFlamegraphStatsWidth,
+		spans,
+		traceData?.payload?.endTimestampMillis,
+		traceData?.payload?.hasMissingSpans,
+		traceData?.payload?.startTimestampMillis,
+		traceId,
+		traceWaterfallState,
+		uncollapsedNodes,
+	]);
+
+	return <div className="trace-waterfall">{getContent}</div>;
+}
+
+export default TraceWaterfall;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -0,0 +1,30 @@
+.error-waterfall {
+	display: flex;
+	padding: 12px;
+	margin: 20px;
+	gap: 12px;
+	align-items: flex-start;
+	border-radius: 4px;
+	background: var(--danger-background);
+
+	.text {
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		flex-shrink: 0;
+	}
+
+	.value {
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+}

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx

@@ -0,0 +1,26 @@
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+
+import './Error.styles.scss';
+
+interface IErrorProps {
+	error: AxiosError;
+}
+
+function Error(props: IErrorProps): JSX.Element {
+	const { error } = props;
+
+	return (
+		<div className="error-waterfall">
+			<Typography.Text className="text">Something went wrong!</Typography.Text>
+			<Tooltip title={error?.message}>
+				<Typography.Text className="value" truncate={1}>
+					{error?.message}
+				</Typography.Text>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default Error;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx

@@ -0,0 +1,12 @@
+import { Typography } from '@signozhq/ui/typography';
+
+interface INoDataProps {
+	id: string;
+}
+
+function NoData(props: INoDataProps): JSX.Element {
+	const { id } = props;
+	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
+}
+
+export default NoData;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss

@@ -0,0 +1,46 @@
+.filter-row {
+	display: flex;
+	align-items: center;
+	padding: 16px 20px 0px 20px;
+	gap: 12px;
+
+	.query-builder-search-v2 {
+		width: 100%;
+	}
+
+	.pre-next-toggle {
+		display: flex;
+		flex-shrink: 0;
+		gap: 12px;
+
+		.ant-typography {
+			display: flex;
+			align-items: center;
+			color: var(--l2-foreground);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+		}
+
+		.ant-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: none;
+		}
+	}
+
+	.no-results {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+		font-family: 'Geist Mono';
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 150% */
+	}
+}

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -0,0 +1,214 @@
+import { useCallback, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import {
+	ChevronDown,
+	ChevronUp,
+	Loader,
+	SolidInfoCircle,
+} from '@signozhq/icons';
+import { Button, Spin, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { uniqBy } from 'lodash-es';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { TracesAggregatorOperator } from 'types/common/queryBuilder';
+
+import { BASE_FILTER_QUERY } from './constants';
+
+import './Filters.styles.scss';
+
+function prepareQuery(filters: TagFilter, traceID: string): Query {
+	return {
+		...initialQueriesMap.traces,
+		builder: {
+			...initialQueriesMap.traces.builder,
+			queryData: [
+				{
+					...initialQueriesMap.traces.builder.queryData[0],
+					aggregateOperator: TracesAggregatorOperator.NOOP,
+					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+					filters: {
+						...filters,
+						items: [
+							...filters.items,
+							{
+								id: '5ab8e1cf',
+								key: {
+									key: 'trace_id',
+									dataType: DataTypes.String,
+									type: '',
+									id: 'trace_id--string----true',
+								},
+								op: '=',
+								value: traceID,
+							},
+						],
+					},
+				},
+			],
+		},
+	};
+}
+
+function Filters({
+	startTime,
+	endTime,
+	traceID,
+	onFilteredSpansChange = (): void => {},
+}: {
+	startTime: number;
+	endTime: number;
+	traceID: string;
+	onFilteredSpansChange?: (spanIds: string[], isFilterActive: boolean) => void;
+}): JSX.Element {
+	const [filters, setFilters] = useState<TagFilter>(
+		BASE_FILTER_QUERY.filters || { items: [], op: 'AND' },
+	);
+	const [noData, setNoData] = useState<boolean>(false);
+	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
+	const [currentSearchedIndex, setCurrentSearchedIndex] = useState<number>(0);
+
+	const handleFilterChange = useCallback(
+		(value: TagFilter): void => {
+			if (value.items.length === 0) {
+				setFilteredSpanIds([]);
+				onFilteredSpansChange?.([], false);
+				setCurrentSearchedIndex(0);
+				setNoData(false);
+			}
+			setFilters(value);
+		},
+		[onFilteredSpansChange],
+	);
+	const { search } = useLocation();
+	const history = useHistory();
+
+	const handlePrevNext = useCallback(
+		(index: number, spanId?: string): void => {
+			const searchParams = new URLSearchParams(search);
+			if (spanId) {
+				searchParams.set('spanId', spanId);
+			} else {
+				searchParams.set('spanId', filteredSpanIds[index]);
+			}
+
+			history.replace({ search: searchParams.toString() });
+		},
+		[filteredSpanIds, history, search],
+	);
+
+	const { isFetching, error } = useGetQueryRange(
+		{
+			query: prepareQuery(filters, traceID),
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start: startTime,
+			end: endTime,
+			params: {
+				dataSource: 'traces',
+			},
+			tableParams: {
+				pagination: {
+					offset: 0,
+					limit: 200,
+				},
+				selectColumns: [
+					{
+						key: 'name',
+						dataType: 'string',
+						type: 'tag',
+						id: 'name--string--tag--true',
+						isIndexed: false,
+					},
+				],
+			},
+		},
+		DEFAULT_ENTITY_VERSION,
+		{
+			queryKey: [filters],
+			enabled: filters.items.length > 0,
+			onSuccess: (data) => {
+				const isFilterActive = filters.items.length > 0;
+				if (data?.payload.data.newResult.data.result[0].list) {
+					const uniqueSpans = uniqBy(
+						data?.payload.data.newResult.data.result[0].list,
+						'data.spanID',
+					);
+
+					const spanIds = uniqueSpans.map((val) => val.data.spanID);
+					setFilteredSpanIds(spanIds);
+					onFilteredSpansChange?.(spanIds, isFilterActive);
+					handlePrevNext(0, spanIds[0]);
+					setNoData(false);
+				} else {
+					setNoData(true);
+					setFilteredSpanIds([]);
+					onFilteredSpansChange?.([], isFilterActive);
+					setCurrentSearchedIndex(0);
+				}
+			},
+		},
+	);
+
+	return (
+		<div className="filter-row">
+			<QueryBuilderSearchV2
+				query={{
+					...BASE_FILTER_QUERY,
+					filters,
+				}}
+				onChange={handleFilterChange}
+				hideSpanScopeSelector={false}
+				skipQueryBuilderRedirect
+				selectProps={{ listHeight: 125 }}
+			/>
+			{filteredSpanIds.length > 0 && (
+				<div className="pre-next-toggle">
+					<Typography.Text>
+						{currentSearchedIndex + 1} / {filteredSpanIds.length}
+					</Typography.Text>
+					<Button
+						icon={<ChevronUp size={14} />}
+						disabled={currentSearchedIndex === 0}
+						type="text"
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex - 1);
+							setCurrentSearchedIndex((prev) => prev - 1);
+						}}
+					/>
+					<Button
+						icon={<ChevronDown size={14} />}
+						type="text"
+						disabled={currentSearchedIndex === filteredSpanIds.length - 1}
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex + 1);
+							setCurrentSearchedIndex((prev) => prev + 1);
+						}}
+					/>
+				</div>
+			)}
+			{isFetching && (
+				<Spin indicator={<Loader className="animate-spin" />} size="small" />
+			)}
+			{error && (
+				<Tooltip title={(error as AxiosError)?.message || 'Something went wrong'}>
+					<SolidInfoCircle size={14} />
+				</Tooltip>
+			)}
+			{noData && (
+				<Typography.Text className="no-results">No results found</Typography.Text>
+			)}
+		</div>
+	);
+}
+
+Filters.defaultProps = {
+	onFilteredSpansChange: undefined,
+};
+
+export default Filters;