fix(row): missing active styles

fix(tests): use find by text
fix(styles): minor fixes on styles
2026-04-14 07:50:28 +01:00 · 2026-04-13 19:37:13 -03:00 · 2026-04-13 19:17:34 -03:00 · 2026-04-13 19:15:43 -03:00 · 2026-04-13 18:57:30 -03:00 · 2026-04-13 18:36:45 -03:00
146 changed files with 3591 additions and 10665 deletions
--- a/cmd/community/server.go
+++ b/cmd/community/server.go
@@ -8,7 +8,6 @@ import (

 	"github.com/SigNoz/signoz/cmd"
 	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/authz/openfgaauthz"
@@ -94,9 +93,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()
 		},
-		func(_ licensing.Licensing) factory.NamedMap[factory.ProviderFactory[auditor.Auditor, auditor.Config]] {
-			return signoz.NewAuditorProviderFactories()
-		},
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			return querier.NewHandler(ps, q, a)
 		},
--- a/cmd/enterprise/server.go
+++ b/cmd/enterprise/server.go
@@ -8,7 +8,6 @@ import (
 	"github.com/spf13/cobra"

 	"github.com/SigNoz/signoz/cmd"
-	"github.com/SigNoz/signoz/ee/auditor/otlphttpauditor"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/samlcallbackauthn"
 	"github.com/SigNoz/signoz/ee/authz/openfgaauthz"
@@ -25,7 +24,6 @@ import (
 	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
 	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -135,13 +133,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)
 		},
-		func(licensing licensing.Licensing) factory.NamedMap[factory.ProviderFactory[auditor.Auditor, auditor.Config]] {
-			factories := signoz.NewAuditorProviderFactories()
-			if err := factories.Add(otlphttpauditor.NewFactory(licensing, version.Info)); err != nil {
-				panic(err)
-			}
-			return factories
-		},
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			communityHandler := querier.NewHandler(ps, q, a)
 			return eequerier.NewHandler(ps, q, communityHandler)
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -364,34 +364,3 @@ serviceaccount:
  analytics:
    # toggle service account analytics
    enabled: true
-
-##################### Auditor #####################
-auditor:
-  # Specifies the auditor provider to use.
-  # noop: discards all audit events (community default).
-  # otlphttp: exports audit events via OTLP HTTP (enterprise).
-  provider: noop
-  # The async channel capacity for audit events. Events are dropped when full (fail-open).
-  buffer_size: 1000
-  # The maximum number of events per export batch.
-  batch_size: 100
-  # The maximum time between export flushes.
-  flush_interval: 1s
-  otlphttp:
-    # The target scheme://host:port/path of the OTLP HTTP endpoint.
-    endpoint: http://localhost:4318/v1/logs
-    # Whether to use HTTP instead of HTTPS.
-    insecure: false
-    # The maximum duration for an export attempt.
-    timeout: 10s
-    # Additional HTTP headers sent with every export request.
-    headers: {}
-    retry:
-      # Whether to retry on transient failures.
-      enabled: true
-      # The initial wait time before the first retry.
-      initial_interval: 5s
-      # The upper bound on backoff interval.
-      max_interval: 30s
-      # The total maximum time spent retrying.
-      max_elapsed_time: 60s
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -403,65 +403,27 @@ components:
      required:
      - regions
      type: object
-    CloudintegrationtypesAWSCloudWatchLogsSubscription:
+    CloudintegrationtypesAWSCollectionStrategy:
      properties:
-        filterPattern:
-          type: string
-        logGroupNamePrefix:
-          type: string
-      required:
-      - logGroupNamePrefix
-      - filterPattern
-      type: object
-    CloudintegrationtypesAWSCloudWatchMetricStreamFilter:
-      properties:
-        metricNames:
-          items:
-            type: string
-          type: array
-        namespace:
-          type: string
-      required:
-      - namespace
+        aws_logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsStrategy'
+        aws_metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsStrategy'
+        s3_buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
      type: object
    CloudintegrationtypesAWSConnectionArtifact:
      properties:
-        connectionUrl:
+        connectionURL:
          type: string
      required:
-      - connectionUrl
+      - connectionURL
      type: object
-    CloudintegrationtypesAWSIntegrationConfig:
-      properties:
-        enabledRegions:
-          items:
-            type: string
-          type: array
-        telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-      required:
-      - enabledRegions
-      - telemetryCollectionStrategy
-      type: object
-    CloudintegrationtypesAWSLogsCollectionStrategy:
-      properties:
-        subscriptions:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchLogsSubscription'
-          type: array
-      required:
-      - subscriptions
-      type: object
-    CloudintegrationtypesAWSMetricsCollectionStrategy:
-      properties:
-        streamFilters:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchMetricStreamFilter'
-          type: array
-      required:
-      - streamFilters
-      type: object
-    CloudintegrationtypesAWSPostableAccountConfig:
+    CloudintegrationtypesAWSConnectionArtifactRequest:
      properties:
        deploymentRegion:
          type: string
@@ -473,6 +435,46 @@ components:
      - deploymentRegion
      - regions
      type: object
+    CloudintegrationtypesAWSIntegrationConfig:
+      properties:
+        enabledRegions:
+          items:
+            type: string
+          type: array
+        telemetry:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+      required:
+      - enabledRegions
+      - telemetry
+      type: object
+    CloudintegrationtypesAWSLogsStrategy:
+      properties:
+        cloudwatch_logs_subscriptions:
+          items:
+            properties:
+              filter_pattern:
+                type: string
+              log_group_name_prefix:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesAWSMetricsStrategy:
+      properties:
+        cloudwatch_metric_stream_filters:
+          items:
+            properties:
+              MetricNames:
+                items:
+                  type: string
+                type: array
+              Namespace:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
    CloudintegrationtypesAWSServiceConfig:
      properties:
        logs:
@@ -484,7 +486,7 @@ components:
      properties:
        enabled:
          type: boolean
-        s3Buckets:
+        s3_buckets:
          additionalProperties:
            items:
              type: string
@@ -496,19 +498,6 @@ components:
        enabled:
          type: boolean
      type: object
-    CloudintegrationtypesAWSTelemetryCollectionStrategy:
-      properties:
-        logs:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsCollectionStrategy'
-        metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsCollectionStrategy'
-        s3Buckets:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          type: object
-      type: object
    CloudintegrationtypesAccount:
      properties:
        agentReport:
@@ -572,26 +561,6 @@ components:
          nullable: true
          type: array
      type: object
-    CloudintegrationtypesCloudIntegrationService:
-      nullable: true
-      properties:
-        cloudIntegrationId:
-          type: string
-        config:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
-        createdAt:
-          format: date-time
-          type: string
-        id:
-          type: string
-        type:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceID'
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      type: object
    CloudintegrationtypesCollectedLogAttribute:
      properties:
        name:
@@ -612,6 +581,13 @@ components:
        unit:
          type: string
      type: object
+    CloudintegrationtypesCollectionStrategy:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+      required:
+      - aws
+      type: object
    CloudintegrationtypesConnectionArtifact:
      properties:
        aws:
@@ -619,21 +595,12 @@ components:
      required:
      - aws
      type: object
-    CloudintegrationtypesCredentials:
+    CloudintegrationtypesConnectionArtifactRequest:
      properties:
-        ingestionKey:
-          type: string
-        ingestionUrl:
-          type: string
-        sigNozApiKey:
-          type: string
-        sigNozApiUrl:
-          type: string
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifactRequest'
      required:
-      - sigNozApiUrl
-      - sigNozApiKey
-      - ingestionUrl
-      - ingestionKey
+      - aws
      type: object
    CloudintegrationtypesDashboard:
      properties:
@@ -659,7 +626,7 @@ components:
          nullable: true
          type: array
      type: object
-    CloudintegrationtypesGettableAccountWithConnectionArtifact:
+    CloudintegrationtypesGettableAccountWithArtifact:
      properties:
        connectionArtifact:
          $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifact'
@@ -678,7 +645,7 @@ components:
      required:
      - accounts
      type: object
-    CloudintegrationtypesGettableAgentCheckIn:
+    CloudintegrationtypesGettableAgentCheckInResponse:
      properties:
        account_id:
          type: string
@@ -727,72 +694,12 @@ components:
            type: string
          type: array
        telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesOldAWSCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
      required:
      - enabled_regions
      - telemetry
      type: object
-    CloudintegrationtypesOldAWSCollectionStrategy:
-      properties:
-        aws_logs:
-          $ref: '#/components/schemas/CloudintegrationtypesOldAWSLogsStrategy'
-        aws_metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesOldAWSMetricsStrategy'
-        provider:
-          type: string
-        s3_buckets:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          type: object
-      type: object
-    CloudintegrationtypesOldAWSLogsStrategy:
-      properties:
-        cloudwatch_logs_subscriptions:
-          items:
-            properties:
-              filter_pattern:
-                type: string
-              log_group_name_prefix:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
-    CloudintegrationtypesOldAWSMetricsStrategy:
-      properties:
-        cloudwatch_metric_stream_filters:
-          items:
-            properties:
-              MetricNames:
-                items:
-                  type: string
-                type: array
-              Namespace:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
-    CloudintegrationtypesPostableAccount:
-      properties:
-        config:
-          $ref: '#/components/schemas/CloudintegrationtypesPostableAccountConfig'
-        credentials:
-          $ref: '#/components/schemas/CloudintegrationtypesCredentials'
-      required:
-      - config
-      - credentials
-      type: object
-    CloudintegrationtypesPostableAccountConfig:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
-      required:
-      - aws
-      type: object
-    CloudintegrationtypesPostableAgentCheckIn:
+    CloudintegrationtypesPostableAgentCheckInRequest:
      properties:
        account_id:
          type: string
@@ -820,8 +727,6 @@ components:
      properties:
        assets:
          $ref: '#/components/schemas/CloudintegrationtypesAssets'
-        cloudIntegrationService:
-          $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
        dataCollected:
          $ref: '#/components/schemas/CloudintegrationtypesDataCollected'
        icon:
@@ -830,10 +735,12 @@ components:
          type: string
        overview:
          type: string
-        supportedSignals:
+        serviceConfig:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
+        supported_signals:
          $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
        telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesCollectionStrategy'
        title:
          type: string
      required:
@@ -842,10 +749,9 @@ components:
      - icon
      - overview
      - assets
-      - supportedSignals
+      - supported_signals
      - dataCollected
      - telemetryCollectionStrategy
-      - cloudIntegrationService
      type: object
    CloudintegrationtypesServiceConfig:
      properties:
@@ -854,22 +760,6 @@ components:
      required:
      - aws
      type: object
-    CloudintegrationtypesServiceID:
-      enum:
-      - alb
-      - api-gateway
-      - dynamodb
-      - ec2
-      - ecs
-      - eks
-      - elasticache
-      - lambda
-      - msk
-      - rds
-      - s3sync
-      - sns
-      - sqs
-      type: string
    CloudintegrationtypesServiceMetadata:
      properties:
        enabled:
@@ -893,13 +783,6 @@ components:
        metrics:
          type: boolean
      type: object
-    CloudintegrationtypesTelemetryCollectionStrategy:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-      required:
-      - aws
-      type: object
    CloudintegrationtypesUpdatableAccount:
      properties:
        config:
@@ -3198,7 +3081,7 @@ paths:
        content:
          application/json:
            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
      responses:
        "200":
          content:
@@ -3206,7 +3089,7 @@ paths:
              schema:
                properties:
                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
                  status:
                    type: string
                required:
@@ -3307,7 +3190,7 @@ paths:
        content:
          application/json:
            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAccount'
+              $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifactRequest'
      responses:
        "200":
          content:
@@ -3315,7 +3198,7 @@ paths:
              schema:
                properties:
                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithConnectionArtifact'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithArtifact'
                  status:
                    type: string
                required:
@@ -3511,61 +3394,6 @@ paths:
      summary: Update account
      tags:
      - cloudintegration
-  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
-    put:
-      deprecated: false
-      description: This endpoint updates a service for the specified cloud provider
-      operationId: UpdateService
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: service_id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Update service
-      tags:
-      - cloudintegration
  /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in:
    post:
      deprecated: false
@@ -3581,7 +3409,7 @@ paths:
        content:
          application/json:
            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
      responses:
        "200":
          content:
@@ -3589,7 +3417,7 @@ paths:
              schema:
                properties:
                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
                  status:
                    type: string
                required:
@@ -3623,59 +3451,6 @@ paths:
      summary: Agent check-in
      tags:
      - cloudintegration
-  /api/v1/cloud_integrations/{cloud_provider}/credentials:
-    get:
-      deprecated: false
-      description: This endpoint retrieves the connection credentials required for
-        integration
-      operationId: GetConnectionCredentials
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesCredentials'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Get connection credentials
-      tags:
-      - cloudintegration
  /api/v1/cloud_integrations/{cloud_provider}/services:
    get:
      deprecated: false
@@ -3786,6 +3561,55 @@ paths:
      summary: Get service
      tags:
      - cloudintegration
+    put:
+      deprecated: false
+      description: This endpoint updates a service for the specified cloud provider
+      operationId: UpdateService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
+      responses:
+        "204":
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Update service
+      tags:
+      - cloudintegration
  /api/v1/complete/google:
    get:
      deprecated: false
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -227,7 +227,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Default,
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
-	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
+	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, nil).Wrap)
 	r.Use(middleware.NewComment().Wrap)

 	apiHandler.RegisterRoutes(r, am)
--- a/frontend/src/api/generated/services/cloudintegration/index.ts
+++ b/frontend/src/api/generated/services/cloudintegration/index.ts
@@ -24,8 +24,8 @@ import type {
 	AgentCheckInDeprecated200,
 	AgentCheckInDeprecatedPathParameters,
 	AgentCheckInPathParameters,
-	CloudintegrationtypesPostableAccountDTO,
-	CloudintegrationtypesPostableAgentCheckInDTO,
+	CloudintegrationtypesConnectionArtifactRequestDTO,
+	CloudintegrationtypesPostableAgentCheckInRequestDTO,
 	CloudintegrationtypesUpdatableAccountDTO,
 	CloudintegrationtypesUpdatableServiceDTO,
 	CreateAccount200,
@@ -33,8 +33,6 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
-	GetConnectionCredentials200,
-	GetConnectionCredentialsPathParameters,
 	GetService200,
 	GetServicePathParameters,
 	ListAccounts200,
@@ -53,14 +51,14 @@ import type {
 */
 export const agentCheckInDeprecated = (
 	{ cloudProvider }: AgentCheckInDeprecatedPathParameters,
-	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
+	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<AgentCheckInDeprecated200>({
 		url: `/api/v1/cloud-integrations/${cloudProvider}/agent-check-in`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInDTO,
+		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
 		signal,
 	});
 };
@@ -74,7 +72,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		},
 		TContext
 	>;
@@ -83,7 +81,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 	},
 	TContext
 > => {
@@ -100,7 +98,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -114,7 +112,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 export type AgentCheckInDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckInDeprecated>>
 >;
-export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -130,7 +128,7 @@ export const useAgentCheckInDeprecated = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		},
 		TContext
 	>;
@@ -139,7 +137,7 @@ export const useAgentCheckInDeprecated = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 	},
 	TContext
 > => {
@@ -257,14 +255,14 @@ export const invalidateListAccounts = async (
 */
 export const createAccount = (
 	{ cloudProvider }: CreateAccountPathParameters,
-	cloudintegrationtypesPostableAccountDTO: BodyType<CloudintegrationtypesPostableAccountDTO>,
+	cloudintegrationtypesConnectionArtifactRequestDTO: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateAccount200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAccountDTO,
+		data: cloudintegrationtypesConnectionArtifactRequestDTO,
 		signal,
 	});
 };
@@ -278,7 +276,7 @@ export const getCreateAccountMutationOptions = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 		},
 		TContext
 	>;
@@ -287,7 +285,7 @@ export const getCreateAccountMutationOptions = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 	},
 	TContext
 > => {
@@ -304,7 +302,7 @@ export const getCreateAccountMutationOptions = <
 		Awaited<ReturnType<typeof createAccount>>,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -318,7 +316,7 @@ export const getCreateAccountMutationOptions = <
 export type CreateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAccount>>
 >;
-export type CreateAccountMutationBody = BodyType<CloudintegrationtypesPostableAccountDTO>;
+export type CreateAccountMutationBody = BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -333,7 +331,7 @@ export const useCreateAccount = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 		},
 		TContext
 	>;
@@ -342,7 +340,7 @@ export const useCreateAccount = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 	},
 	TContext
 > => {
@@ -630,117 +628,20 @@ export const useUpdateAccount = <

 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint updates a service for the specified cloud provider
- * @summary Update service
- */
-export const updateService = (
-	{ cloudProvider, id, serviceId }: UpdateServicePathParameters,
-	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesUpdatableServiceDTO,
-	});
-};
-
-export const getUpdateServiceMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateService'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateService>>,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateService(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateService>>
->;
-export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update service
- */
-export const useUpdateService = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
 * This endpoint is called by the deployed agent to check in
 * @summary Agent check-in
 */
 export const agentCheckIn = (
 	{ cloudProvider }: AgentCheckInPathParameters,
-	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
+	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<AgentCheckIn200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/check_in`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInDTO,
+		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
 		signal,
 	});
 };
@@ -754,7 +655,7 @@ export const getAgentCheckInMutationOptions = <
 		TError,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		},
 		TContext
 	>;
@@ -763,7 +664,7 @@ export const getAgentCheckInMutationOptions = <
 	TError,
 	{
 		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 	},
 	TContext
 > => {
@@ -780,7 +681,7 @@ export const getAgentCheckInMutationOptions = <
 		Awaited<ReturnType<typeof agentCheckIn>>,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -794,7 +695,7 @@ export const getAgentCheckInMutationOptions = <
 export type AgentCheckInMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckIn>>
 >;
-export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -809,7 +710,7 @@ export const useAgentCheckIn = <
 		TError,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		},
 		TContext
 	>;
@@ -818,7 +719,7 @@ export const useAgentCheckIn = <
 	TError,
 	{
 		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 	},
 	TContext
 > => {
@@ -826,114 +727,6 @@ export const useAgentCheckIn = <

 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint retrieves the connection credentials required for integration
- * @summary Get connection credentials
- */
-export const getConnectionCredentials = (
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetConnectionCredentials200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/credentials`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetConnectionCredentialsQueryKey = ({
-	cloudProvider,
-}: GetConnectionCredentialsPathParameters) => {
-	return [`/api/v1/cloud_integrations/${cloudProvider}/credentials`] as const;
-};
-
-export const getGetConnectionCredentialsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getConnectionCredentials>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetConnectionCredentialsQueryKey({ cloudProvider });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getConnectionCredentials>>
-	> = ({ signal }) => getConnectionCredentials({ cloudProvider }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!cloudProvider,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getConnectionCredentials>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetConnectionCredentialsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getConnectionCredentials>>
->;
-export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get connection credentials
- */
-
-export function useGetConnectionCredentials<
-	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getConnectionCredentials>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetConnectionCredentialsQueryOptions(
-		{ cloudProvider },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get connection credentials
- */
-export const invalidateGetConnectionCredentials = async (
-	queryClient: QueryClient,
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetConnectionCredentialsQueryKey({ cloudProvider }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
 * This endpoint lists the services metadata for the specified cloud provider
 * @summary List services metadata
@@ -1148,3 +941,101 @@ export const invalidateGetService = async (

 	return queryClient;
 };
+
+/**
+ * This endpoint updates a service for the specified cloud provider
+ * @summary Update service
+ */
+export const updateService = (
+	{ cloudProvider, serviceId }: UpdateServicePathParameters,
+	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: cloudintegrationtypesUpdatableServiceDTO,
+	});
+};
+
+export const getUpdateServiceMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateService'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateService>>,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateService(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateServiceMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateService>>
+>;
+export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update service
+ */
+export const useUpdateService = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateServiceMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -512,58 +512,27 @@ export interface CloudintegrationtypesAWSAccountConfigDTO {
 	regions: string[];
 }

-export interface CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO {
-	/**
-	 * @type string
-	 */
-	filterPattern: string;
-	/**
-	 * @type string
-	 */
-	logGroupNamePrefix: string;
-}
+export type CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};

-export interface CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO {
+export interface CloudintegrationtypesAWSCollectionStrategyDTO {
+	aws_logs?: CloudintegrationtypesAWSLogsStrategyDTO;
+	aws_metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
 	/**
-	 * @type array
+	 * @type object
 	 */
-	metricNames?: string[];
-	/**
-	 * @type string
-	 */
-	namespace: string;
+	s3_buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
 }

 export interface CloudintegrationtypesAWSConnectionArtifactDTO {
 	/**
 	 * @type string
 	 */
-	connectionUrl: string;
+	connectionURL: string;
 }

-export interface CloudintegrationtypesAWSIntegrationConfigDTO {
-	/**
-	 * @type array
-	 */
-	enabledRegions: string[];
-	telemetryCollectionStrategy: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-}
-
-export interface CloudintegrationtypesAWSLogsCollectionStrategyDTO {
-	/**
-	 * @type array
-	 */
-	subscriptions: CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO[];
-}
-
-export interface CloudintegrationtypesAWSMetricsCollectionStrategyDTO {
-	/**
-	 * @type array
-	 */
-	streamFilters: CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO[];
-}
-
-export interface CloudintegrationtypesAWSPostableAccountConfigDTO {
+export interface CloudintegrationtypesAWSConnectionArtifactRequestDTO {
 	/**
 	 * @type string
 	 */
@@ -574,6 +543,56 @@ export interface CloudintegrationtypesAWSPostableAccountConfigDTO {
 	regions: string[];
 }

+export interface CloudintegrationtypesAWSIntegrationConfigDTO {
+	/**
+	 * @type array
+	 */
+	enabledRegions: string[];
+	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
+}
+
+export type CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
+	/**
+	 * @type string
+	 */
+	filter_pattern?: string;
+	/**
+	 * @type string
+	 */
+	log_group_name_prefix?: string;
+};
+
+export interface CloudintegrationtypesAWSLogsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_logs_subscriptions?:
+		| CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
+		| null;
+}
+
+export type CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
+	/**
+	 * @type array
+	 */
+	MetricNames?: string[];
+	/**
+	 * @type string
+	 */
+	Namespace?: string;
+};
+
+export interface CloudintegrationtypesAWSMetricsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_metric_stream_filters?:
+		| CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
+		| null;
+}
+
 export interface CloudintegrationtypesAWSServiceConfigDTO {
 	logs?: CloudintegrationtypesAWSServiceLogsConfigDTO;
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
@@ -591,7 +610,7 @@ export interface CloudintegrationtypesAWSServiceLogsConfigDTO {
 	/**
 	 * @type object
 	 */
-	s3Buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
+	s3_buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
 }

 export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
@@ -601,19 +620,6 @@ export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
 	enabled?: boolean;
 }

-export type CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesAWSTelemetryCollectionStrategyDTO {
-	logs?: CloudintegrationtypesAWSLogsCollectionStrategyDTO;
-	metrics?: CloudintegrationtypesAWSMetricsCollectionStrategyDTO;
-	/**
-	 * @type object
-	 */
-	s3Buckets?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets;
-}
-
 export interface CloudintegrationtypesAccountDTO {
 	agentReport: CloudintegrationtypesAgentReportDTO;
 	config: CloudintegrationtypesAccountConfigDTO;
@@ -687,32 +693,6 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }

-/**
- * @nullable
- */
-export type CloudintegrationtypesCloudIntegrationServiceDTO = {
-	/**
-	 * @type string
-	 */
-	cloudIntegrationId?: string;
-	config?: CloudintegrationtypesServiceConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	id: string;
-	type?: CloudintegrationtypesServiceIDDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-} | null;
-
 export interface CloudintegrationtypesCollectedLogAttributeDTO {
 	/**
 	 * @type string
@@ -747,27 +727,16 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 	unit?: string;
 }

+export interface CloudintegrationtypesCollectionStrategyDTO {
+	aws: CloudintegrationtypesAWSCollectionStrategyDTO;
+}
+
 export interface CloudintegrationtypesConnectionArtifactDTO {
 	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
 }

-export interface CloudintegrationtypesCredentialsDTO {
-	/**
-	 * @type string
-	 */
-	ingestionKey: string;
-	/**
-	 * @type string
-	 */
-	ingestionUrl: string;
-	/**
-	 * @type string
-	 */
-	sigNozApiKey: string;
-	/**
-	 * @type string
-	 */
-	sigNozApiUrl: string;
+export interface CloudintegrationtypesConnectionArtifactRequestDTO {
+	aws: CloudintegrationtypesAWSConnectionArtifactRequestDTO;
 }

 export interface CloudintegrationtypesDashboardDTO {
@@ -799,7 +768,7 @@ export interface CloudintegrationtypesDataCollectedDTO {
 	metrics?: CloudintegrationtypesCollectedMetricDTO[] | null;
 }

-export interface CloudintegrationtypesGettableAccountWithConnectionArtifactDTO {
+export interface CloudintegrationtypesGettableAccountWithArtifactDTO {
 	connectionArtifact: CloudintegrationtypesConnectionArtifactDTO;
 	/**
 	 * @type string
@@ -814,7 +783,7 @@ export interface CloudintegrationtypesGettableAccountsDTO {
 	accounts: CloudintegrationtypesAccountDTO[];
 }

-export interface CloudintegrationtypesGettableAgentCheckInDTO {
+export interface CloudintegrationtypesGettableAgentCheckInResponseDTO {
 	/**
 	 * @type string
 	 */
@@ -862,85 +831,17 @@ export type CloudintegrationtypesIntegrationConfigDTO = {
 	 * @type array
 	 */
 	enabled_regions: string[];
-	telemetry: CloudintegrationtypesOldAWSCollectionStrategyDTO;
+	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
 } | null;

-export type CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
-	aws_logs?: CloudintegrationtypesOldAWSLogsStrategyDTO;
-	aws_metrics?: CloudintegrationtypesOldAWSMetricsStrategyDTO;
-	/**
-	 * @type string
-	 */
-	provider?: string;
-	/**
-	 * @type object
-	 */
-	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
-}
-
-export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
-	/**
-	 * @type string
-	 */
-	filter_pattern?: string;
-	/**
-	 * @type string
-	 */
-	log_group_name_prefix?: string;
-};
-
-export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_logs_subscriptions?:
-		| CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
-		| null;
-}
-
-export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
-	/**
-	 * @type array
-	 */
-	MetricNames?: string[];
-	/**
-	 * @type string
-	 */
-	Namespace?: string;
-};
-
-export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_metric_stream_filters?:
-		| CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
-		| null;
-}
-
-export interface CloudintegrationtypesPostableAccountDTO {
-	config: CloudintegrationtypesPostableAccountConfigDTO;
-	credentials: CloudintegrationtypesCredentialsDTO;
-}
-
-export interface CloudintegrationtypesPostableAccountConfigDTO {
-	aws: CloudintegrationtypesAWSPostableAccountConfigDTO;
-}
-
 /**
 * @nullable
 */
-export type CloudintegrationtypesPostableAgentCheckInDTOData = {
+export type CloudintegrationtypesPostableAgentCheckInRequestDTOData = {
 	[key: string]: unknown;
 } | null;

-export interface CloudintegrationtypesPostableAgentCheckInDTO {
+export interface CloudintegrationtypesPostableAgentCheckInRequestDTO {
 	/**
 	 * @type string
 	 */
@@ -957,7 +858,7 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type object
 	 * @nullable true
 	 */
-	data: CloudintegrationtypesPostableAgentCheckInDTOData;
+	data: CloudintegrationtypesPostableAgentCheckInRequestDTOData;
 	/**
 	 * @type string
 	 */
@@ -970,7 +871,6 @@ export interface CloudintegrationtypesProviderIntegrationConfigDTO {

 export interface CloudintegrationtypesServiceDTO {
 	assets: CloudintegrationtypesAssetsDTO;
-	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
 	 * @type string
@@ -984,8 +884,9 @@ export interface CloudintegrationtypesServiceDTO {
 	 * @type string
 	 */
 	overview: string;
-	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
+	serviceConfig?: CloudintegrationtypesServiceConfigDTO;
+	supported_signals: CloudintegrationtypesSupportedSignalsDTO;
+	telemetryCollectionStrategy: CloudintegrationtypesCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -996,21 +897,6 @@ export interface CloudintegrationtypesServiceConfigDTO {
 	aws: CloudintegrationtypesAWSServiceConfigDTO;
 }

-export enum CloudintegrationtypesServiceIDDTO {
-	alb = 'alb',
-	'api-gateway' = 'api-gateway',
-	dynamodb = 'dynamodb',
-	ec2 = 'ec2',
-	ecs = 'ecs',
-	eks = 'eks',
-	elasticache = 'elasticache',
-	lambda = 'lambda',
-	msk = 'msk',
-	rds = 'rds',
-	s3sync = 's3sync',
-	sns = 'sns',
-	sqs = 'sqs',
-}
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
 	 * @type boolean
@@ -1041,10 +927,6 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }

-export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-}
-
 export interface CloudintegrationtypesUpdatableAccountDTO {
 	config: CloudintegrationtypesAccountConfigDTO;
 }
@@ -3568,7 +3450,7 @@ export type AgentCheckInDeprecatedPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckInDeprecated200 = {
-	data: CloudintegrationtypesGettableAgentCheckInDTO;
+	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
 	/**
 	 * @type string
 	 */
@@ -3590,7 +3472,7 @@ export type CreateAccountPathParameters = {
 	cloudProvider: string;
 };
 export type CreateAccount200 = {
-	data: CloudintegrationtypesGettableAccountWithConnectionArtifactDTO;
+	data: CloudintegrationtypesGettableAccountWithArtifactDTO;
 	/**
 	 * @type string
 	 */
@@ -3617,27 +3499,11 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
-export type UpdateServicePathParameters = {
-	cloudProvider: string;
-	id: string;
-	serviceId: string;
-};
 export type AgentCheckInPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckIn200 = {
-	data: CloudintegrationtypesGettableAgentCheckInDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetConnectionCredentialsPathParameters = {
-	cloudProvider: string;
-};
-export type GetConnectionCredentials200 = {
-	data: CloudintegrationtypesCredentialsDTO;
+	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
 	/**
 	 * @type string
 	 */
@@ -3667,6 +3533,10 @@ export type GetService200 = {
 	status: string;
 };

+export type UpdateServicePathParameters = {
+	cloudProvider: string;
+	serviceId: string;
+};
 export type CreateSessionByGoogleCallback303 = {
 	data: AuthtypesGettableTokenDTO;
 	/**
--- a/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
+++ b/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
@@ -28,17 +28,6 @@
 	}
 }

-// In table/column view, keep action buttons visible at the viewport's right edge
-.log-line-action-buttons.table-view-log-actions {
-	position: absolute;
-	top: 50%;
-	right: 8px;
-	left: auto;
-	transform: translateY(-50%);
-	margin: 0;
-	z-index: 5;
-}
-
 .lightMode {
 	.log-line-action-buttons {
 		border: 1px solid var(--bg-vanilla-400);
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -1,6 +1,4 @@
 .log-state-indicator {
-	padding-left: 8px;
-
 	.line {
 		margin: 0 8px;
 		min-height: 24px;
--- a/frontend/src/components/Logs/LogStateIndicator/getRowBackgroundColor.ts
+++ b/frontend/src/components/Logs/LogStateIndicator/getRowBackgroundColor.ts
@@ -0,0 +1,43 @@
+import { Color } from '@signozhq/design-tokens';
+
+import { LogType } from './LogStateIndicator';
+
+export function getRowBackgroundColor(
+	isDarkMode: boolean,
+	logType?: string,
+): string {
+	if (isDarkMode) {
+		switch (logType) {
+			case LogType.INFO:
+				return `${Color.BG_ROBIN_500}40`;
+			case LogType.WARN:
+				return `${Color.BG_AMBER_500}40`;
+			case LogType.ERROR:
+				return `${Color.BG_CHERRY_500}40`;
+			case LogType.TRACE:
+				return `${Color.BG_FOREST_400}40`;
+			case LogType.DEBUG:
+				return `${Color.BG_AQUA_500}40`;
+			case LogType.FATAL:
+				return `${Color.BG_SAKURA_500}40`;
+			default:
+				return `${Color.BG_ROBIN_500}40`;
+		}
+	}
+	switch (logType) {
+		case LogType.INFO:
+			return Color.BG_ROBIN_100;
+		case LogType.WARN:
+			return Color.BG_AMBER_100;
+		case LogType.ERROR:
+			return Color.BG_CHERRY_100;
+		case LogType.TRACE:
+			return Color.BG_FOREST_200;
+		case LogType.DEBUG:
+			return Color.BG_AQUA_100;
+		case LogType.FATAL:
+			return Color.BG_SAKURA_100;
+		default:
+			return Color.BG_VANILLA_300;
+	}
+}
--- a/frontend/src/components/Logs/TableView/useLogsTableColumns.module.scss
+++ b/frontend/src/components/Logs/TableView/useLogsTableColumns.module.scss
@@ -0,0 +1,12 @@
+.logBodyCell {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	color: var(--l2-foreground);
+}
--- a/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
+++ b/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
@@ -0,0 +1,117 @@
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { FontSize } from 'container/OptionsMenu/types';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { useTimezone } from 'providers/Timezone';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+
+import type { TableColumnDef } from '../../TanStackTableView/types';
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+
+import styles from './useLogsTableColumns.module.scss';
+
+type UseLogsTableColumnsProps = {
+	fields: IField[];
+	linesPerRow: number;
+	fontSize: FontSize;
+	appendTo?: 'center' | 'end';
+};
+
+export function useLogsTableColumns({
+	fields,
+	fontSize,
+	appendTo = 'center',
+}: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	return useMemo<TableColumnDef<ILog>[]>(() => {
+		const stateIndicatorCol: TableColumnDef<ILog> = {
+			id: 'state-indicator',
+			header: '',
+			pin: 'left',
+			enableMove: false,
+			enableResize: false,
+			enableRemove: false,
+			width: { fixed: 32 },
+			cell: ({ row }): ReactElement => (
+				<LogStateIndicator
+					fontSize={fontSize}
+					severityText={row.severity_text as string}
+					severityNumber={row.severity_number as number}
+				/>
+			),
+		};
+
+		const fieldColumns: TableColumnDef<ILog>[] = fields
+			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
+			.map(
+				(f): TableColumnDef<ILog> => ({
+					id: f.name,
+					header: f.name,
+					accessorFn: (log): unknown => FlatLogData(log)[f.name],
+					enableRemove: true,
+					width: { min: 192 },
+					cell: ({ value }): ReactElement => (
+						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+					),
+				}),
+			);
+
+		const timestampCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'timestamp',
+		)
+			? {
+					id: 'timestamp',
+					header: 'Timestamp',
+					accessorFn: (log): unknown => log.timestamp,
+					width: { min: 200 },
+					cell: ({ value }): ReactElement => {
+						const ts = value as string | number;
+						const formatted =
+							typeof ts === 'string'
+								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+								: formatTimezoneAdjustedTimestamp(
+										ts / 1e6,
+										DATE_TIME_FORMATS.ISO_DATETIME_MS,
+								  );
+						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+					},
+			  }
+			: null;
+
+		const bodyCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'body',
+		)
+			? {
+					id: 'body',
+					header: 'Body',
+					accessorFn: (log): string => log.body,
+					width: { min: 640 },
+					cell: ({ value, isActive }): ReactElement => (
+						<div
+							// eslint-disable-next-line react/no-danger
+							dangerouslySetInnerHTML={{
+								__html: getSanitizedLogBody(value as string, {
+									shouldEscapeHtml: true,
+								}),
+							}}
+							data-active={isActive}
+							className={styles.logBodyCell}
+						/>
+					),
+			  }
+			: null;
+
+		return [
+			stateIndicatorCol,
+			...(timestampCol ? [timestampCol] : []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(bodyCol ? [bodyCol] : []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+}
--- a/frontend/src/components/TanStackTableView/RowHoverContext.tsx
+++ b/frontend/src/components/TanStackTableView/RowHoverContext.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable no-restricted-imports */
+import {
+	createContext,
+	ReactNode,
+	useCallback,
+	useContext,
+	useRef,
+} from 'react';
+/* eslint-enable no-restricted-imports */
+import { createStore, StoreApi, useStore } from 'zustand';
+
+const CLEAR_HOVER_DELAY_MS = 100;
+
+type RowHoverState = {
+	hoveredRowId: string | null;
+	clearTimeoutId: ReturnType<typeof setTimeout> | null;
+	setHoveredRowId: (id: string | null) => void;
+	scheduleClearHover: (rowId: string) => void;
+};
+
+const createRowHoverStore = (): StoreApi<RowHoverState> =>
+	createStore<RowHoverState>((set, get) => ({
+		hoveredRowId: null,
+		clearTimeoutId: null,
+		setHoveredRowId: (id: string | null): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+				set({ clearTimeoutId: null });
+			}
+			set({ hoveredRowId: id });
+		},
+		scheduleClearHover: (rowId: string): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+			}
+			const timeoutId = setTimeout(() => {
+				const current = get().hoveredRowId;
+				if (current === rowId) {
+					set({ hoveredRowId: null, clearTimeoutId: null });
+				}
+			}, CLEAR_HOVER_DELAY_MS);
+			set({ clearTimeoutId: timeoutId });
+		},
+	}));
+
+type RowHoverStore = StoreApi<RowHoverState>;
+
+const RowHoverContext = createContext<RowHoverStore | null>(null);
+
+export function RowHoverProvider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const storeRef = useRef<RowHoverStore | null>(null);
+	if (!storeRef.current) {
+		storeRef.current = createRowHoverStore();
+	}
+	return (
+		<RowHoverContext.Provider value={storeRef.current}>
+			{children}
+		</RowHoverContext.Provider>
+	);
+}
+
+const defaultStore = createRowHoverStore();
+
+export const useIsRowHovered = (rowId: string): boolean => {
+	const store = useContext(RowHoverContext);
+	// Selector returns true only if this specific row is hovered
+	const isHovered = useStore(
+		store ?? defaultStore,
+		(s) => s.hoveredRowId === rowId,
+	);
+	return store ? isHovered : false;
+};
+
+export const useSetRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			const current = store.getState().hoveredRowId;
+			if (current !== rowId) {
+				store.getState().setHoveredRowId(rowId);
+			}
+		}
+	}, [store, rowId]);
+};
+
+export const useClearRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			store.getState().scheduleClearHover(rowId);
+		}
+	}, [store, rowId]);
+};
+
+export default RowHoverContext;
--- a/frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx
@@ -0,0 +1,111 @@
+import { ComponentProps, memo } from 'react';
+import { TableComponents } from 'react-virtuoso';
+import cx from 'classnames';
+
+import { useClearRowHovered, useSetRowHovered } from './RowHoverContext';
+import { FlatItem, TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type VirtuosoTableRowProps<TData> = ComponentProps<
+	NonNullable<
+		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
+	>
+>;
+
+function TanStackCustomTableRow<TData>({
+	children,
+	item,
+	context,
+	...props
+}: VirtuosoTableRowProps<TData>): JSX.Element {
+	const rowId = item.row.id;
+	const rowData = item.row.original;
+
+	// Stable callbacks for hover state management
+	const setHovered = useSetRowHovered(rowId);
+	const clearHovered = useClearRowHovered(rowId);
+
+	if (item.kind === 'expansion') {
+		return (
+			<tr {...props} className={tableStyles.tableRowExpansion}>
+				{children}
+			</tr>
+		);
+	}
+
+	const isActive = context?.isRowActive?.(rowData) ?? false;
+	const extraClass = context?.getRowClassName?.(rowData) ?? '';
+	const rowStyle = context?.getRowStyle?.(rowData);
+
+	const rowClassName = cx(
+		tableStyles.tableRow,
+		isActive && tableStyles.tableRowActive,
+		extraClass,
+	);
+
+	return (
+		<tr
+			{...props}
+			className={rowClassName}
+			style={rowStyle}
+			onMouseEnter={setHovered}
+			onMouseLeave={clearHovered}
+		>
+			{children}
+		</tr>
+	);
+}
+
+// Custom comparison - only re-render when row identity or computed values change
+function areTableRowPropsEqual<TData>(
+	prev: Readonly<VirtuosoTableRowProps<TData>>,
+	next: Readonly<VirtuosoTableRowProps<TData>>,
+): boolean {
+	// Different row = must re-render
+	if (prev.item.row.id !== next.item.row.id) {
+		return false;
+	}
+	// Different kind (row vs expansion) = must re-render
+	if (prev.item.kind !== next.item.kind) {
+		return false;
+	}
+	// Same row, same kind - check if computed values would differ
+	// We compare the context callbacks and row data to determine this
+	const prevData = prev.item.row.original;
+	const nextData = next.item.row.original;
+
+	// Row data reference changed = potential re-render needed
+	if (prevData !== nextData) {
+		return false;
+	}
+
+	// Context callbacks changed = computed values may differ
+	if (prev.context !== next.context) {
+		// If context changed, check if the actual computed values differ
+		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;
+		const nextActive = next.context?.isRowActive?.(nextData) ?? false;
+		if (prevActive !== nextActive) {
+			return false;
+		}
+
+		const prevClass = prev.context?.getRowClassName?.(prevData) ?? '';
+		const nextClass = next.context?.getRowClassName?.(nextData) ?? '';
+		if (prevClass !== nextClass) {
+			return false;
+		}
+
+		const prevStyle = prev.context?.getRowStyle?.(prevData);
+		const nextStyle = next.context?.getRowStyle?.(nextData);
+		if (prevStyle !== nextStyle) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default memo(
+	TanStackCustomTableRow,
+	areTableRowPropsEqual,
+) as typeof TanStackCustomTableRow;
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackHeaderRow.styles.scss
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackHeaderRow.styles.scss
@@ -1,4 +1,4 @@
-.tanstack-header-cell {
+.tanstackHeaderCell {
 	position: sticky;
 	top: 0;
 	z-index: 2;
@@ -10,16 +10,21 @@
 	);
 	transition: var(--tanstack-header-transition, none);

-	&.is-dragging {
+	&.isDragging {
 		opacity: 0.85;
 	}

-	&.is-resizing {
+	&.isResizing {
 		background: var(--l2-background-hover);
 	}
+
+	&:last-child .cursorColResize {
+		display: none;
+		border-right: 1px solid var(--l2-border);
+	}
 }

-.tanstack-header-content {
+.tanstackHeaderContent {
 	display: flex;
 	align-items: center;
 	height: 100%;
@@ -28,20 +33,20 @@
 	cursor: default;
 	max-width: 100%;

-	&.has-resize-control {
+	&.hasResizeControl {
 		max-width: calc(100% - 5px);
 	}

-	&.has-action-control {
+	&.hasActionControl {
 		max-width: calc(100% - 5px);
 	}

-	&.has-resize-control.has-action-control {
+	&.hasResizeControl.hasActionControl {
 		max-width: calc(100% - 10px);
 	}
 }

-.tanstack-grip-slot {
+.tanstackGripSlot {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -51,7 +56,7 @@
 	flex-shrink: 0;
 }

-.tanstack-grip-activator {
+.tanstackGripActivator {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -63,7 +68,7 @@
 	touch-action: none;
 }

-.tanstack-header-action-trigger {
+.tanstackHeaderActionTrigger {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -72,9 +77,11 @@
 	cursor: pointer;
 	flex-shrink: 0;
 	color: var(--l2-foreground);
+
+	margin-left: auto;
 }

-.tanstack-column-actions-content {
+.tanstackColumnActionsContent {
 	width: 140px;
 	padding: 0;
 	background: var(--l2-background);
@@ -83,7 +90,7 @@
 	box-shadow: none;
 }

-.tanstack-remove-column-action {
+.tanstackRemoveColumnAction {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -105,19 +112,19 @@
 		background: var(--l2-background-hover);
 		color: var(--l2-foreground);

-		.tanstack-remove-column-action-icon {
+		.tanstackRemoveColumnActionIcon {
 			color: var(--l2-foreground);
 		}
 	}
 }

-.tanstack-remove-column-action-icon {
+.tanstackRemoveColumnActionIcon {
 	font-size: 11px;
 	color: var(--l2-foreground);
 	opacity: 0.95;
 }

-.tanstack-header-cell .cursor-col-resize {
+.tanstackHeaderCell .cursorColResize {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -129,11 +136,11 @@
 	background: transparent;
 }

-.tanstack-header-cell.is-resizing .cursor-col-resize {
+.tanstackHeaderCell.isResizing .cursorColResize {
 	background: var(--bg-robin-300);
 }

-.tanstack-resize-handle-line {
+.tanstackResizeHandleLine {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -146,7 +153,7 @@
 	transition: background 120ms ease, width 120ms ease;
 }

-.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
+.tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
 	width: 2px;
 	background: var(--bg-robin-500);
 	transition: none;
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx
@@ -8,51 +8,46 @@ import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/popover';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
+import cx from 'classnames';
 import { GripVertical } from 'lucide-react';

-import { TableHeaderCellStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import { OrderedColumn, TanStackTableRowData } from './types';
-import { getColumnId } from './utils';
+import { TableColumnDef } from './types';

-import './styles/TanStackHeaderRow.styles.scss';
+import headerStyles from './TanStackHeaderRow.module.scss';
+import tableStyles from './TanStackTable.module.scss';

-type TanStackHeaderRowProps = {
-	column: OrderedColumn;
-	header?: TanStackHeader<TanStackTableRowData, unknown>;
+type TanStackHeaderRowProps<TData = unknown> = {
+	column: TableColumnDef<TData>;
+	header?: TanStackHeader<TData, unknown>;
 	isDarkMode: boolean;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
 	hasSingleColumn: boolean;
 	canRemoveColumn?: boolean;
-	onRemoveColumn?: (columnKey: string) => void;
+	onRemoveColumn?: (columnId: string) => void;
 };

 const GRIP_ICON_SIZE = 12;
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackHeaderRow({
+function TanStackHeaderRow<TData>({
 	column,
 	header,
 	isDarkMode,
-	fontSize,
 	hasSingleColumn,
 	canRemoveColumn = false,
 	onRemoveColumn,
-}: TanStackHeaderRowProps): JSX.Element {
-	const columnId = getColumnId(column);
-	const isDragColumn =
-		column.key !== 'expand' && column.key !== 'state-indicator';
-	const isResizableColumn = Boolean(header?.column.getCanResize());
+}: TanStackHeaderRowProps<TData>): JSX.Element {
+	const columnId = column.id;
+	const isDragColumn = column.enableMove !== false && column.pin == null;
+	const isResizableColumn =
+		column.enableResize !== false && Boolean(header?.column.getCanResize());
 	const isColumnRemovable = Boolean(
-		canRemoveColumn &&
-			onRemoveColumn &&
-			column.key !== 'expand' &&
-			column.key !== 'state-indicator',
+		canRemoveColumn && onRemoveColumn && column.enableRemove,
 	);
 	const isResizing = Boolean(header?.column.getIsResizing());
 	const resizeHandler = header?.getResizeHandler();
 	const headerText =
-		typeof column.title === 'string' && column.title
-			? column.title
+		typeof column.header === 'string' && column.header
+			? column.header
 			: String(header?.id ?? columnId);
 	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
 	const handleResizeStart = (
@@ -83,54 +78,57 @@ function TanStackHeaderRow({
 			} as CSSProperties),
 		[isResizing, transform?.x, transform?.y, transition],
 	);
-	const headerCellClassName = [
-		'tanstack-header-cell',
-		isDragging ? 'is-dragging' : '',
-		isResizing ? 'is-resizing' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
-	const headerContentClassName = [
-		'tanstack-header-content',
-		isResizableColumn ? 'has-resize-control' : '',
-		isColumnRemovable ? 'has-action-control' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
+	const headerCellClassName = cx(
+		headerStyles.tanstackHeaderCell,
+		isDragging && headerStyles.isDragging,
+		isResizing && headerStyles.isResizing,
+	);
+	const headerContentClassName = cx(
+		headerStyles.tanstackHeaderContent,
+		isResizableColumn && headerStyles.hasResizeControl,
+		isColumnRemovable && headerStyles.hasActionControl,
+	);
+
+	const thClassName = cx(
+		tableStyles.tableHeaderCell,
+		headerCellClassName,
+		column.id,
+	);

 	return (
-		<TableHeaderCellStyled
+		<th
 			ref={setNodeRef}
-			$isLogIndicator={column.key === 'state-indicator'}
-			$isDarkMode={isDarkMode}
-			$isDragColumn={false}
-			className={headerCellClassName}
+			className={thClassName}
 			key={columnId}
-			fontSize={fontSize}
-			$hasSingleColumn={hasSingleColumn}
 			style={headerCellStyle}
+			data-dark-mode={isDarkMode}
+			data-single-column={hasSingleColumn || undefined}
 		>
 			<span className={headerContentClassName}>
 				{isDragColumn ? (
-					<span className="tanstack-grip-slot">
+					<span className={headerStyles.tanstackGripSlot}>
 						<span
 							ref={setActivatorNodeRef}
 							{...attributes}
 							{...listeners}
 							role="button"
 							aria-label={`Drag ${String(
-								column.title || header?.id || columnId,
+								(typeof column.header === 'string' && column.header) ||
+									header?.id ||
+									columnId,
 							)} column`}
-							className="tanstack-grip-activator"
+							className={headerStyles.tanstackGripActivator}
 						>
 							<GripVertical size={GRIP_ICON_SIZE} />
 						</span>
 					</span>
 				) : null}
 				<span className="tanstack-header-title" title={headerTitleAttr}>
-					{header
+					{header?.column?.columnDef
 						? flexRender(header.column.columnDef.header, header.getContext())
-						: String(column.title || '').replace(/^\w/, (c) => c.toUpperCase())}
+						: typeof column.header === 'function'
+						? column.header()
+						: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
 				</span>
 				{isColumnRemovable && (
 					<Popover>
@@ -138,7 +136,7 @@ function TanStackHeaderRow({
 							<span
 								role="button"
 								aria-label={`Column actions for ${headerTitleAttr}`}
-								className="tanstack-header-action-trigger"
+								className={headerStyles.tanstackHeaderActionTrigger}
 								onMouseDown={(event): void => {
 									event.stopPropagation();
 								}}
@@ -149,18 +147,20 @@ function TanStackHeaderRow({
 						<PopoverContent
 							align="end"
 							sideOffset={6}
-							className="tanstack-column-actions-content"
+							className={headerStyles.tanstackColumnActionsContent}
 						>
 							<button
 								type="button"
-								className="tanstack-remove-column-action"
+								className={headerStyles.tanstackRemoveColumnAction}
 								onClick={(event): void => {
 									event.preventDefault();
 									event.stopPropagation();
-									onRemoveColumn?.(String(column.key));
+									onRemoveColumn?.(column.id);
 								}}
 							>
-								<CloseOutlined className="tanstack-remove-column-action-icon" />
+								<CloseOutlined
+									className={headerStyles.tanstackRemoveColumnActionIcon}
+								/>
 								Remove column
 							</button>
 						</PopoverContent>
@@ -170,7 +170,7 @@ function TanStackHeaderRow({
 			{isResizableColumn && (
 				<span
 					role="presentation"
-					className="cursor-col-resize"
+					className={headerStyles.cursorColResize}
 					title="Drag to resize column"
 					onClick={(event): void => {
 						event.preventDefault();
@@ -183,10 +183,10 @@ function TanStackHeaderRow({
 						handleResizeStart(event);
 					}}
 				>
-					<span className="tanstack-resize-handle-line" />
+					<span className={headerStyles.tanstackResizeHandleLine} />
 				</span>
 			)}
-		</TableHeaderCellStyled>
+		</th>
 	);
 }

--- a/frontend/src/components/TanStackTableView/TanStackRow.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackRow.tsx
@@ -0,0 +1,105 @@
+import { memo, useCallback } from 'react';
+import { Row as TanStackRowModel } from '@tanstack/react-table';
+
+import { useIsRowHovered } from './RowHoverContext';
+import { TanStackRowCell } from './TanStackRowCell';
+import { TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type TanStackRowCellsProps<TData> = {
+	row: TanStackRowModel<TData>;
+	context: TableRowContext<TData> | undefined;
+	itemKind: 'row' | 'expansion';
+	hasSingleColumn: boolean;
+};
+
+function TanStackRowCellsInner<TData>({
+	row,
+	context,
+	itemKind,
+	hasSingleColumn,
+}: TanStackRowCellsProps<TData>): JSX.Element {
+	// Only re-render this row when ITS hover state changes
+	const hasHovered = useIsRowHovered(row.id);
+	const rowData = row.original;
+	const visibleCells = row.getVisibleCells();
+	const lastCellIndex = visibleCells.length - 1;
+
+	// Stable references via destructuring
+	const onRowClick = context?.onRowClick;
+	const onRowDeactivate = context?.onRowDeactivate;
+	const isRowActive = context?.isRowActive;
+
+	const handleClick = useCallback(() => {
+		const isActive = isRowActive?.(rowData) ?? false;
+		if (isActive && onRowDeactivate) {
+			onRowDeactivate();
+		} else {
+			onRowClick?.(rowData);
+		}
+	}, [isRowActive, onRowDeactivate, onRowClick, rowData]);
+
+	if (itemKind === 'expansion') {
+		return (
+			<td
+				colSpan={context?.colCount ?? 1}
+				className={tableStyles.tableCellExpansion}
+			>
+				{context?.renderExpandedRow?.(rowData)}
+			</td>
+		);
+	}
+
+	return (
+		<>
+			{visibleCells.map((cell, index) => {
+				const isLastCell = index === lastCellIndex;
+				return (
+					<TanStackRowCell
+						key={cell.id}
+						cell={cell}
+						hasSingleColumn={hasSingleColumn}
+						isLastCell={isLastCell}
+						hasHovered={hasHovered}
+						rowData={rowData}
+						onClick={handleClick}
+						renderRowActions={context?.renderRowActions}
+					/>
+				);
+			})}
+		</>
+	);
+}
+
+// Custom comparison - only re-render when row data changes
+function areRowCellsPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellsProps<TData>>,
+	next: Readonly<TanStackRowCellsProps<TData>>,
+): boolean {
+	return (
+		// Row identity
+		prev.row.id === next.row.id &&
+		// Row kind (row vs expansion)
+		prev.itemKind === next.itemKind &&
+		// Row data reference
+		prev.row.original === next.row.original &&
+		// Layout
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		// Context callbacks for click handlers and row actions
+		prev.context?.onRowClick === next.context?.onRowClick &&
+		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
+		prev.context?.isRowActive === next.context?.isRowActive &&
+		prev.context?.renderRowActions === next.context?.renderRowActions &&
+		prev.context?.renderExpandedRow === next.context?.renderExpandedRow &&
+		prev.context?.colCount === next.context?.colCount
+	);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TanStackRowCells = memo(
+	TanStackRowCellsInner,
+	areRowCellsPropsEqual as any,
+) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
+
+export default TanStackRowCells;
--- a/frontend/src/components/TanStackTableView/TanStackRowCell.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackRowCell.tsx
@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+import type { Cell } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackRowCellProps<TData> = {
+	cell: Cell<TData, unknown>;
+	hasSingleColumn: boolean;
+	isLastCell: boolean;
+	hasHovered: boolean;
+	rowData: TData;
+	onClick: () => void;
+	renderRowActions?: (row: TData) => ReactNode;
+};
+
+function TanStackRowCellInner<TData>({
+	cell,
+	hasSingleColumn,
+	isLastCell,
+	hasHovered,
+	rowData,
+	onClick,
+	renderRowActions,
+}: TanStackRowCellProps<TData>): JSX.Element {
+	return (
+		<td
+			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
+			data-single-column={hasSingleColumn || undefined}
+			onClick={onClick}
+		>
+			{flexRender(cell.column.columnDef.cell, cell.getContext())}
+			{isLastCell && hasHovered && renderRowActions && (
+				<span className={tableStyles.tableViewRowActions}>
+					{renderRowActions(rowData)}
+				</span>
+			)}
+		</td>
+	);
+}
+
+function areTanStackRowCellPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellProps<TData>>,
+	next: Readonly<TanStackRowCellProps<TData>>,
+): boolean {
+	return (
+		prev.cell.id === next.cell.id &&
+		prev.cell.column.id === next.cell.column.id &&
+		Object.is(prev.cell.getValue(), next.cell.getValue()) &&
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		prev.isLastCell === next.isLastCell &&
+		prev.hasHovered === next.hasHovered &&
+		prev.onClick === next.onClick &&
+		prev.renderRowActions === next.renderRowActions &&
+		prev.rowData === next.rowData
+	);
+}
+
+const TanStackRowCellMemo = memo(
+	TanStackRowCellInner,
+	areTanStackRowCellPropsEqual,
+);
+
+TanStackRowCellMemo.displayName = 'TanStackRowCell';
+
+export const TanStackRowCell = TanStackRowCellMemo as typeof TanStackRowCellInner;
--- a/frontend/src/components/TanStackTableView/TanStackTable.module.scss
+++ b/frontend/src/components/TanStackTableView/TanStackTable.module.scss
@@ -0,0 +1,105 @@
+.tanStackTable {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+	table-layout: fixed;
+	min-width: 100%;
+	max-width: 100%;
+
+	& td,
+	& th {
+		overflow: hidden;
+		min-width: 0;
+		box-sizing: border-box;
+		vertical-align: middle;
+	}
+}
+
+.tableCellText {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	width: auto;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+	max-width: 100%;
+	word-break: break-all;
+}
+
+.tableViewRowActions {
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	left: auto;
+	transform: translateY(-50%);
+	margin: 0;
+	z-index: 5;
+}
+
+.tableCell {
+	padding: 0.3rem;
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+}
+
+.tableRow {
+	cursor: pointer;
+	position: relative;
+
+	&:hover {
+		.tableCell {
+			background-color: var(--row-hover-bg) !important;
+		}
+	}
+
+	&.tableRowActive {
+		.tableCell {
+			background-color: var(--row-active-bg) !important;
+		}
+	}
+}
+
+.tableHeaderCell {
+	padding: 0.3rem;
+	height: 36px;
+	text-align: left;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+	border-top: 1px solid var(--l2-border);
+	border-bottom: 1px solid var(--l2-border);
+	border-left: 1px solid var(--l2-border);
+	box-shadow: inset 0 -1px 0 var(--l2-border);
+	color: var(--l1-foreground);
+
+	// TODO: Remove this once background color (l1) is matching the actual background color of the page
+	&[data-dark-mode='true'] {
+		background: #0b0c0d;
+	}
+
+	&[data-dark-mode='false'] {
+		background: #fdfdfd;
+	}
+}
+
+.tableRowExpansion {
+	display: table-row;
+}
+
+.tableCellExpansion {
+	padding: 0.5rem;
+	vertical-align: top;
+}
--- a/frontend/src/components/TanStackTableView/TanStackTableText.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackTableText.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackTableTextProps = {
+	children?: ReactNode;
+	className?: string;
+};
+
+function TanStackTableText({
+	children,
+	className,
+}: TanStackTableTextProps): JSX.Element {
+	return (
+		<span className={cx(tableStyles.tableCellText, className)}>{children}</span>
+	);
+}
+
+export default TanStackTableText;
--- a/frontend/src/components/TanStackTableView/TanStackTableView.module.scss
+++ b/frontend/src/components/TanStackTableView/TanStackTableView.module.scss
@@ -0,0 +1,135 @@
+.tanstackTableViewWrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	position: relative;
+	min-height: 0;
+}
+
+.tanstackFixedCol {
+	width: 32px;
+	min-width: 32px;
+	max-width: 32px;
+}
+
+.tanstackFillerCol {
+	width: 100%;
+	min-width: 0;
+}
+
+.tanstackActionsCol {
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+}
+
+.tanstackLoadMoreContainer {
+	width: 100%;
+	min-height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 0 12px;
+	flex-shrink: 0;
+}
+
+.tanstackTableVirtuoso {
+	width: 100%;
+	overflow-x: scroll;
+}
+
+.tanstackTableFootLoaderCell {
+	text-align: center;
+	padding: 8px 0;
+}
+
+.tanstackTableVirtuosoScroll {
+	width: 100%;
+	overflow-x: scroll;
+	scrollbar-width: thin;
+	scrollbar-color: var(--bg-slate-300) transparent;
+
+	&::-webkit-scrollbar {
+		width: 4px;
+		height: 4px;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-slate-300);
+		border-radius: 9999px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--bg-slate-200);
+	}
+
+	&.cellTypographySmall {
+		--tanstack-plain-cell-font-size: 11px;
+		--tanstack-plain-cell-line-height: 16px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 11px;
+			line-height: 16px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyMedium {
+		--tanstack-plain-cell-font-size: 13px;
+		--tanstack-plain-cell-line-height: 20px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 13px;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyLarge {
+		--tanstack-plain-cell-font-size: 14px;
+		--tanstack-plain-cell-line-height: 24px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 14px;
+			line-height: 24px;
+			letter-spacing: -0.07px;
+		}
+	}
+}
+
+.tanstackLoadingOverlay {
+	position: absolute;
+	left: 50%;
+	bottom: 2rem;
+	transform: translateX(-50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	z-index: 3;
+	border-radius: 8px;
+	padding: 8px 16px;
+}
+
+:global(.lightMode) .tanstackTableVirtuosoScroll {
+	scrollbar-color: var(--bg-vanilla-300) transparent;
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-vanilla-300);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--bg-vanilla-100);
+	}
+}
--- a/frontend/src/components/TanStackTableView/VirtuosoTableColGroup.tsx
+++ b/frontend/src/components/TanStackTableView/VirtuosoTableColGroup.tsx
@@ -0,0 +1,52 @@
+import type { Table } from '@tanstack/react-table';
+
+import type { TableColumnDef, TanStackTableProps } from './types';
+import { getColumnMinWidthPx } from './utils';
+
+import viewStyles from './TanStackTableView.module.scss';
+
+export function VirtuosoTableColGroup<TData>({
+	columns,
+	columnSizingProp,
+	table,
+}: {
+	columns: TableColumnDef<TData>[];
+	columnSizingProp: TanStackTableProps<TData>['columnSizing'];
+	table: Table<TData>;
+}): JSX.Element {
+	return (
+		<colgroup>
+			{columns.map((column, colIndex) => {
+				const columnId = column.id;
+				const isFixedColumn = column.width?.fixed != null;
+				const minWidthPx = getColumnMinWidthPx(column);
+				const persistedWidth = columnSizingProp?.[columnId];
+				const computedWidth = table.getColumn(columnId)?.getSize();
+				const effectiveWidth = persistedWidth ?? computedWidth;
+				if (isFixedColumn) {
+					return <col key={columnId} className={viewStyles.tanstackFixedCol} />;
+				}
+				const isLastColumn = colIndex === columns.length - 1;
+				if (isLastColumn) {
+					return (
+						<col
+							key={columnId}
+							style={{ width: '100%', minWidth: `${minWidthPx}px` }}
+						/>
+					);
+				}
+				const widthPx =
+					effectiveWidth != null ? Math.max(effectiveWidth, minWidthPx) : minWidthPx;
+				return (
+					<col
+						key={columnId}
+						style={{
+							width: `${widthPx}px`,
+							minWidth: `${minWidthPx}px`,
+						}}
+					/>
+				);
+			})}
+		</colgroup>
+	);
+}
--- a/frontend/src/components/TanStackTableView/tests/TanStackCustomTableRow.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackCustomTableRow.test.tsx
@@ -0,0 +1,102 @@
+jest.mock('../TanStackTable.module.scss', () => ({
+	__esModule: true,
+	default: {
+		tableRow: 'tableRow',
+		tableRowActive: 'tableRowActive',
+		tableRowExpansion: 'tableRowExpansion',
+	},
+}));
+
+import { render, screen } from '@testing-library/react';
+
+import TanStackCustomTableRow from '../TanStackCustomTableRow';
+import type { FlatItem, TableRowContext } from '../types';
+
+const makeItem = (id: string): FlatItem<{ id: string }> => ({
+	kind: 'row',
+	row: { original: { id } } as never,
+});
+
+const virtuosoAttrs = {
+	'data-index': 0,
+	'data-item-index': 0,
+	'data-known-size': 40,
+} as const;
+
+describe('TanStackCustomTableRow', () => {
+	it('renders children', async () => {
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={undefined}
+					>
+						<td>cell</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('cell')).toBeInTheDocument();
+	});
+
+	it('applies active class when isRowActive returns true', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === '1',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowActive');
+	});
+
+	it('does not apply active class when isRowActive returns false', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === 'other',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).not.toHaveClass('tableRowActive');
+	});
+
+	it('renders expansion row without RowHoverContext when kind is expansion', () => {
+		const item: FlatItem<{ id: string }> = {
+			kind: 'expansion',
+			row: { original: { id: '1' } } as never,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow {...virtuosoAttrs} item={item} context={undefined}>
+						<td>expanded content</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowExpansion');
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/TanStackHeaderRow.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackHeaderRow.test.tsx
@@ -0,0 +1,144 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackHeaderRow from '../TanStackHeaderRow';
+import type { TableColumnDef } from '../types';
+
+jest.mock('@dnd-kit/sortable', () => ({
+	useSortable: (): any => ({
+		attributes: {},
+		listeners: {},
+		setNodeRef: jest.fn(),
+		setActivatorNodeRef: jest.fn(),
+		transform: null,
+		transition: null,
+		isDragging: false,
+	}),
+}));
+
+const col = (
+	id: string,
+	overrides?: Partial<TableColumnDef<unknown>>,
+): TableColumnDef<unknown> => ({
+	id,
+	header: id,
+	cell: (): null => null,
+	...overrides,
+});
+
+const header = {
+	id: 'col',
+	column: {
+		getCanResize: () => true,
+		getIsResizing: () => false,
+		columnDef: { header: 'col' },
+	},
+	getResizeHandler: () => jest.fn(),
+	getContext: () => ({}),
+} as never;
+
+describe('TanStackHeaderRow', () => {
+	it('renders column title', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('timestamp', { header: 'timestamp' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(screen.getByTitle('Timestamp')).toBeInTheDocument();
+	});
+
+	it('shows grip icon when enableMove is not false and pin is not set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('body')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.getByRole('button', { name: /drag body/i }),
+		).toBeInTheDocument();
+	});
+
+	it('does NOT show grip icon when pin is set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('indicator', { pin: 'left' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /drag/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('shows remove button when enableRemove and canRemoveColumn are true', async () => {
+		const user = userEvent.setup();
+		const onRemoveColumn = jest.fn();
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name', { enableRemove: true })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={onRemoveColumn}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		await user.click(screen.getByRole('button', { name: /column actions/i }));
+		await user.click(await screen.findByText(/remove column/i));
+		expect(onRemoveColumn).toHaveBeenCalledWith('name');
+	});
+
+	it('does NOT show remove button when enableRemove is absent', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={jest.fn()}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /column actions/i }),
+		).not.toBeInTheDocument();
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/TanStackRow.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackRow.test.tsx
@@ -0,0 +1,162 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackRowCells from '../TanStackRow';
+import type { TableRowContext } from '../types';
+
+const flexRenderMock = jest.fn((def: unknown) =>
+	typeof def === 'function' ? def({}) : def,
+);
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, _ctx?: unknown): unknown => flexRenderMock(def),
+}));
+
+type Row = { id: string };
+
+function buildMockRow(
+	cells: { id: string }[],
+	rowData: Row = { id: 'r1' },
+): Parameters<typeof TanStackRowCells>[0]['row'] {
+	return {
+		original: rowData,
+		getVisibleCells: () =>
+			cells.map((c, i) => ({
+				id: `cell-${i}`,
+				column: {
+					id: c.id,
+					columnDef: { cell: (): string => `content-${c.id}` },
+				},
+				getContext: (): Record<string, unknown> => ({}),
+				getValue: (): string => `content-${c.id}`,
+			})),
+	} as never;
+}
+
+describe('TanStackRowCells', () => {
+	beforeEach(() => flexRenderMock.mockClear());
+
+	it('renders a cell per visible column', () => {
+		const row = buildMockRow([{ id: 'col-a' }, { id: 'col-b' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={undefined}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(screen.getAllByRole('cell')).toHaveLength(2);
+	});
+
+	it('calls onRowClick when a cell is clicked', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = { colCount: 1, onRowClick };
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' });
+	});
+
+	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const onRowDeactivate = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			onRowDeactivate,
+			isRowActive: () => true,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowDeactivate).toHaveBeenCalled();
+		expect(onRowClick).not.toHaveBeenCalled();
+	});
+
+	it('does not render renderRowActions before hover', () => {
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			renderRowActions: () => <button type="button">action</button>,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		// Row actions are not rendered until hover (useIsRowHovered returns false by default)
+		expect(
+			screen.queryByRole('button', { name: 'action' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders expansion cell with renderExpandedRow content', async () => {
+		const row = {
+			original: { id: 'r1' },
+			getVisibleCells: () => [],
+		} as never;
+		const ctx: TableRowContext<Row> = {
+			colCount: 3,
+			renderExpandedRow: (r) => <div>expanded-{r.id}</div>,
+		};
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="expansion"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('expanded-r1')).toBeInTheDocument();
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { render, screen } from '@testing-library/react';
+
+import TanStackTable from '../index';
+import type { TableColumnDef, TanStackTableProps } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	TableVirtuoso: forwardRef<unknown, { fixedHeaderContent?: () => JSX.Element }>(
+		function MockVirtuoso({ fixedHeaderContent }, _ref) {
+			return <div data-testid="virtuoso">{fixedHeaderContent?.()}</div>;
+		},
+	),
+}));
+
+jest.mock('../useTableParams', () => ({
+	useTableParams: (): Record<string, unknown> => ({
+		page: 1,
+		limit: 50,
+		orderBy: null,
+		setPage: jest.fn(),
+		setLimit: jest.fn(),
+		setOrderBy: jest.fn(),
+	}),
+}));
+
+jest.mock('../../Spinner', () => ({
+	__esModule: true,
+	default: ({ tip }: { tip: string }): JSX.Element => (
+		<div data-testid="spinner">{tip}</div>
+	),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+type Row = { id: string };
+
+const col = (): TableColumnDef<Row> => ({
+	id: 'id',
+	header: 'ID',
+	cell: ({ row }): string => row.id,
+	accessorKey: 'id',
+});
+
+const baseProps: TanStackTableProps<Row> = {
+	data: [{ id: '1' }],
+	columns: [col()],
+};
+
+describe('TanStackTable', () => {
+	it('renders virtuoso when not loading', () => {
+		render(<TanStackTable {...baseProps} />);
+		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
+	});
+
+	it('shows loading spinner overlay when isLoading is true', () => {
+		render(<TanStackTable {...baseProps} isLoading />);
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+	});
+
+	it('passes loadingTip to spinner', () => {
+		render(
+			<TanStackTable {...baseProps} isLoading loadingTip="Fetching hosts" />,
+		);
+		expect(screen.getByTestId('spinner')).toHaveTextContent('Fetching hosts');
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/useTableColumns.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/useTableColumns.test.tsx
@@ -0,0 +1,194 @@
+import { act, renderHook } from '@testing-library/react';
+
+import type { TableColumnDef } from '../types';
+import { useTableColumns } from '../useTableColumns';
+
+const mockGet = jest.fn();
+const mockSet = jest.fn();
+
+jest.mock('api/browser/localstorage/get', () => ({
+	__esModule: true,
+	default: (key: string): string | null => mockGet(key),
+}));
+
+jest.mock('api/browser/localstorage/set', () => ({
+	__esModule: true,
+	default: (key: string, value: string): void => mockSet(key, value),
+}));
+
+type Row = { id: string; name: string };
+
+const col = (id: string, pin?: 'left' | 'right'): TableColumnDef<Row> => ({
+	id,
+	header: id,
+	cell: ({ value }): string => String(value),
+	...(pin ? { pin } : {}),
+});
+
+describe('useTableColumns', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGet.mockReturnValue(null);
+		jest.useFakeTimers();
+	});
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('returns definitions in original order when no persisted state', () => {
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'timestamp',
+			'body',
+			'name',
+		]);
+	});
+
+	it('restores column order from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['name', 'body', 'timestamp'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'name',
+			'body',
+			'timestamp',
+		]);
+	});
+
+	it('pinned columns always stay first regardless of persisted order', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['body', 'indicator'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('indicator', 'left'), col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns[0].id).toBe('indicator');
+	});
+
+	it('excludes removed columns from tableProps.columns', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: {},
+				removedColumnIds: ['name'],
+			}),
+		);
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['body']);
+		expect(result.current.activeColumnIds).toEqual(['body']);
+	});
+
+	it('activeColumnIds reflects only currently visible columns', () => {
+		const defs = [col('body'), col('timestamp'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.activeColumnIds).toEqual(['body', 'timestamp', 'name']);
+	});
+
+	it('onRemoveColumn removes column and persists after debounce', () => {
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onRemoveColumn('body');
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['name']);
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"removedColumnIds":["body"]'),
+		);
+	});
+
+	it('onColumnOrderChange updates column order', () => {
+		const defs = [col('a'), col('b'), col('c')];
+		const { result } = renderHook(() => useTableColumns(defs));
+
+		act(() => {
+			result.current.tableProps.onColumnOrderChange([
+				col('c'),
+				col('b'),
+				col('a'),
+			]);
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'c',
+			'b',
+			'a',
+		]);
+	});
+
+	it('restores column sizing from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: { body: 400 },
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columnSizing).toEqual({ body: 400 });
+	});
+
+	it('debounces sizing writes to localStorage', () => {
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onColumnSizingChange({ body: 500 });
+		});
+		expect(mockSet).not.toHaveBeenCalled();
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"body":500'),
+		);
+	});
+
+	it('falls back to definitions order when localStorage is corrupt', () => {
+		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+		mockGet.mockReturnValue('not-json');
+		const defs = [col('a'), col('b')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'a',
+			'b',
+		]);
+		spy.mockRestore();
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/useTableParams.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/useTableParams.test.tsx
@@ -0,0 +1,105 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useTableParams } from '../useTableParams';
+
+jest.mock('utils/nuqsParsers', () => ({
+	parseAsJsonNoValidate: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+}));
+
+jest.mock('nuqs', () => ({
+	parseAsInteger: {
+		withDefault: (d: number): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	},
+	parseAsJson: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+	useQueryState: jest
+		.fn()
+		.mockImplementation((_key: string, parser: { _default: unknown }) => {
+			const [val, setVal] = (jest.requireActual(
+				'react',
+			) as typeof import('react')).useState(parser?._default);
+			return [val, setVal];
+		}),
+}));
+
+describe('useTableParams (local mode — enableQueryParams not set)', () => {
+	it('returns default page=1 and limit=50', () => {
+		const { result } = renderHook(() => useTableParams());
+		expect(result.current.page).toBe(1);
+		expect(result.current.limit).toBe(50);
+		expect(result.current.orderBy).toBeNull();
+	});
+
+	it('respects custom defaults', () => {
+		const { result } = renderHook(() =>
+			useTableParams(undefined, { page: 2, limit: 25 }),
+		);
+		expect(result.current.page).toBe(2);
+		expect(result.current.limit).toBe(25);
+	});
+
+	it('setPage updates page', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setPage(3);
+		});
+		expect(result.current.page).toBe(3);
+	});
+
+	it('setLimit updates limit', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setLimit(100);
+		});
+		expect(result.current.limit).toBe(100);
+	});
+
+	it('setOrderBy updates orderBy', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setOrderBy({ columnId: 'cpu', desc: true });
+		});
+		expect(result.current.orderBy).toEqual({ columnId: 'cpu', desc: true });
+	});
+});
+
+describe('useTableParams (URL mode — enableQueryParams set)', () => {
+	it('uses nuqs state when enableQueryParams=true', () => {
+		const { result } = renderHook(() => useTableParams(true));
+		expect(result.current.page).toBe(1);
+		act(() => {
+			result.current.setPage(5);
+		});
+		expect(result.current.page).toBe(5);
+	});
+
+	it('uses prefixed keys when enableQueryParams is a string', () => {
+		const { result } = renderHook(() => useTableParams('pods', { page: 2 }));
+		expect(result.current.page).toBe(2);
+		act(() => {
+			result.current.setPage(4);
+		});
+		expect(result.current.page).toBe(4);
+	});
+
+	it('local state is ignored when enableQueryParams is set', () => {
+		const { result: local } = renderHook(() => useTableParams());
+		const { result: url } = renderHook(() => useTableParams(true));
+		act(() => {
+			local.current.setPage(99);
+		});
+		expect(url.current.page).toBe(1);
+	});
+});
--- a/frontend/src/components/TanStackTableView/index.tsx
+++ b/frontend/src/components/TanStackTableView/index.tsx
@@ -0,0 +1,618 @@
+import type { ComponentProps, CSSProperties, Ref } from 'react';
+import {
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import type { TableComponents } from 'react-virtuoso';
+import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
+import {
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	pointerWithin,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	horizontalListSortingStrategy,
+	SortableContext,
+} from '@dnd-kit/sortable';
+import { TooltipProvider } from '@signozhq/ui';
+import type { Row } from '@tanstack/react-table';
+import {
+	ColumnDef,
+	ColumnPinningState,
+	ExpandedState,
+	getCoreRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+import { Pagination } from 'antd';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import Spinner from '../Spinner';
+import { RowHoverProvider } from './RowHoverContext';
+import TanStackCustomTableRow from './TanStackCustomTableRow';
+import TanStackHeaderRow from './TanStackHeaderRow';
+import TanStackRowCells from './TanStackRow';
+import TanStackTableText from './TanStackTableText';
+import {
+	FlatItem,
+	TableRowContext,
+	TanStackTableHandle,
+	TanStackTableProps,
+} from './types';
+import { useTableParams } from './useTableParams';
+import { buildTanstackColumnDef } from './utils';
+import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
+
+import tableStyles from './TanStackTable.module.scss';
+import viewStyles from './TanStackTableView.module.scss';
+
+const COLUMN_DND_AUTO_SCROLL = {
+	layoutShiftCompensation: false as const,
+	threshold: { x: 0.2, y: 0 },
+};
+
+const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
+
+const PAGINATION_STYLE: CSSProperties = { marginTop: 12, textAlign: 'right' };
+
+const noopColumnSizing = (): void => {};
+
+function TanStackTableInner<TData>(
+	{
+		data,
+		columns,
+		columnSizing: columnSizingProp,
+		onColumnSizingChange,
+		onColumnOrderChange,
+		onRemoveColumn,
+		isLoading = false,
+		loadingTip = 'Loading',
+		enableQueryParams,
+		pagination,
+		onEndReached,
+		getRowStyle,
+		getRowClassName,
+		isRowActive,
+		renderRowActions,
+		onRowClick,
+		onRowDeactivate,
+		activeRowIndex,
+		renderExpandedRow,
+		getRowCanExpand,
+		tableScrollerProps,
+		plainTextCellLineClamp,
+		cellTypographySize,
+	}: TanStackTableProps<TData>,
+	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
+): JSX.Element {
+	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
+	const isDarkMode = useIsDarkMode();
+
+	const { page, limit, setPage, setLimit } = useTableParams(enableQueryParams, {
+		page: pagination?.defaultPage,
+		limit: pagination?.defaultLimit,
+	});
+
+	const [expanded, setExpanded] = useState<ExpandedState>({});
+
+	const columnPinning = useMemo<ColumnPinningState>(
+		() => ({
+			left: columns.filter((c) => c.pin === 'left').map((c) => c.id),
+			right: columns.filter((c) => c.pin === 'right').map((c) => c.id),
+		}),
+		[columns],
+	);
+
+	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
+		() => columns.map((colDef) => buildTanstackColumnDef(colDef, isRowActive)),
+		[columns, isRowActive],
+	);
+
+	const getRowId = useCallback((row: TData, index: number): string => {
+		const r = row as Record<string, unknown>;
+		if (r != null && typeof r.id !== 'undefined') {
+			return String(r.id);
+		}
+		return String(index);
+	}, []);
+
+	const tableGetRowCanExpand = useCallback(
+		(row: Row<TData>): boolean =>
+			getRowCanExpand ? getRowCanExpand(row.original) : true,
+		[getRowCanExpand],
+	);
+
+	const table = useReactTable({
+		data,
+		columns: tanstackColumns,
+		enableColumnResizing: true,
+		enableColumnPinning: true,
+		columnResizeMode: 'onChange',
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableExpanding: Boolean(renderExpandedRow),
+		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
+		onColumnSizingChange: onColumnSizingChange ?? noopColumnSizing,
+		onExpandedChange: setExpanded,
+		state: {
+			columnSizing: columnSizingProp ?? {},
+			columnPinning,
+			expanded,
+		},
+	});
+
+	const tableRows = table.getRowModel().rows;
+
+	const flatItems = useMemo<FlatItem<TData>[]>(() => {
+		const result: FlatItem<TData>[] = [];
+		for (const row of tableRows) {
+			result.push({ kind: 'row', row });
+			if (renderExpandedRow && row.getIsExpanded()) {
+				result.push({ kind: 'expansion', row });
+			}
+		}
+		return result;
+	}, [tableRows, renderExpandedRow]);
+
+	const flatIndexForActiveRow = useMemo(() => {
+		if (activeRowIndex == null || activeRowIndex < 0) {
+			return -1;
+		}
+		for (let i = 0; i < flatItems.length; i++) {
+			const item = flatItems[i];
+			if (item.kind === 'row' && item.row.index === activeRowIndex) {
+				return i;
+			}
+		}
+		return -1;
+	}, [activeRowIndex, flatItems]);
+
+	useEffect(() => {
+		if (flatIndexForActiveRow < 0) {
+			return;
+		}
+		virtuosoRef.current?.scrollToIndex({
+			index: flatIndexForActiveRow,
+			align: 'center',
+			behavior: 'auto',
+		});
+	}, [flatIndexForActiveRow]);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+	);
+
+	const columnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	const handleDragEnd = useCallback(
+		(event: DragEndEvent): void => {
+			const { active, over } = event;
+			if (!over || active.id === over.id || !onColumnOrderChange) {
+				return;
+			}
+			const activeCol = columns.find((c) => c.id === String(active.id));
+			const overCol = columns.find((c) => c.id === String(over.id));
+			if (
+				!activeCol ||
+				!overCol ||
+				activeCol.pin != null ||
+				overCol.pin != null ||
+				activeCol.enableMove === false
+			) {
+				return;
+			}
+			const oldIndex = columns.findIndex((c) => c.id === String(active.id));
+			const newIndex = columns.findIndex((c) => c.id === String(over.id));
+			if (oldIndex === -1 || newIndex === -1) {
+				return;
+			}
+			onColumnOrderChange(arrayMove(columns, oldIndex, newIndex));
+		},
+		[columns, onColumnOrderChange],
+	);
+
+	const hasSingleColumn = useMemo(
+		() => columns.filter((c) => !c.pin && c.enableRemove !== false).length <= 1,
+		[columns],
+	);
+
+	const canRemoveColumn = !hasSingleColumn;
+
+	const flatHeaders = useMemo(
+		() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[tanstackColumns, columnPinning],
+	);
+
+	const columnsById = useMemo(
+		() => new Map(columns.map((c) => [c.id, c] as const)),
+		[columns],
+	);
+
+	const virtuosoContext = useMemo<TableRowContext<TData>>(
+		() => ({
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			colCount: columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		}),
+		[
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		],
+	);
+
+	const itemContent = useCallback(
+		(_index: number, item: FlatItem<TData>): JSX.Element => (
+			<TanStackRowCells
+				row={item.row}
+				itemKind={item.kind}
+				context={virtuosoContext}
+				hasSingleColumn={hasSingleColumn}
+			/>
+		),
+		[virtuosoContext, hasSingleColumn],
+	);
+
+	const tableHeader = useCallback(() => {
+		return (
+			<DndContext
+				sensors={sensors}
+				collisionDetection={pointerWithin}
+				onDragEnd={handleDragEnd}
+				autoScroll={COLUMN_DND_AUTO_SCROLL}
+			>
+				<SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>
+					<tr>
+						{flatHeaders.map((header) => {
+							const column = columnsById.get(header.id);
+							if (!column) {
+								return null;
+							}
+							return (
+								<TanStackHeaderRow
+									key={header.id}
+									column={column}
+									header={header}
+									isDarkMode={isDarkMode}
+									hasSingleColumn={hasSingleColumn}
+									onRemoveColumn={onRemoveColumn}
+									canRemoveColumn={canRemoveColumn}
+								/>
+							);
+						})}
+					</tr>
+				</SortableContext>
+			</DndContext>
+		);
+	}, [
+		sensors,
+		handleDragEnd,
+		columnIds,
+		flatHeaders,
+		columnsById,
+		isDarkMode,
+		hasSingleColumn,
+		onRemoveColumn,
+		canRemoveColumn,
+	]);
+
+	const handleEndReached = useCallback(
+		(index: number): void => {
+			onEndReached?.(index);
+		},
+		[onEndReached],
+	);
+
+	useImperativeHandle(
+		forwardedRef,
+		(): TanStackTableHandle =>
+			new Proxy(
+				{
+					goToPage: (p: number): void => {
+						setPage(p);
+						virtuosoRef.current?.scrollToIndex({
+							index: 0,
+							align: 'start',
+						});
+					},
+				} as TanStackTableHandle,
+				{
+					get(target, prop): unknown {
+						if (prop in target) {
+							return Reflect.get(target, prop);
+						}
+						const v = (virtuosoRef.current as unknown) as Record<string, unknown>;
+						const value = v?.[prop as string];
+						if (typeof value === 'function') {
+							return (value as (...a: unknown[]) => unknown).bind(virtuosoRef.current);
+						}
+						return value;
+					},
+				},
+			),
+		[setPage],
+	);
+
+	const showPagination = Boolean(pagination && !onEndReached);
+
+	const { className: tableScrollerClassName, ...restTableScrollerProps } =
+		tableScrollerProps ?? {};
+
+	const cellTypographyClass = useMemo((): string | undefined => {
+		if (cellTypographySize === 'small') {
+			return viewStyles.cellTypographySmall;
+		}
+		if (cellTypographySize === 'medium') {
+			return viewStyles.cellTypographyMedium;
+		}
+		if (cellTypographySize === 'large') {
+			return viewStyles.cellTypographyLarge;
+		}
+		return undefined;
+	}, [cellTypographySize]);
+
+	const virtuosoClassName = useMemo(
+		() =>
+			cx(
+				viewStyles.tanstackTableVirtuosoScroll,
+				cellTypographyClass,
+				tableScrollerClassName,
+			),
+		[cellTypographyClass, tableScrollerClassName],
+	);
+
+	const virtuosoTableStyle = useMemo(
+		() =>
+			({
+				'--tanstack-plain-body-line-clamp': plainTextCellLineClamp,
+			} as CSSProperties),
+		[plainTextCellLineClamp],
+	);
+
+	type VirtuosoTableComponentProps = ComponentProps<
+		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
+	>;
+
+	const virtuosoComponents = useMemo(
+		() => ({
+			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
+				<table className={tableStyles.tanStackTable} style={style}>
+					<VirtuosoTableColGroup
+						columns={columns}
+						columnSizingProp={columnSizingProp}
+						table={table}
+					/>
+					{children}
+				</table>
+			),
+			TableRow: TanStackCustomTableRow,
+		}),
+		[columns, columnSizingProp, table],
+	);
+
+	return (
+		<div className={viewStyles.tanstackTableViewWrapper}>
+			<RowHoverProvider>
+				<TooltipProvider>
+					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						className={virtuosoClassName}
+						ref={virtuosoRef}
+						{...restTableScrollerProps}
+						data={flatItems}
+						totalCount={flatItems.length}
+						context={virtuosoContext}
+						increaseViewportBy={INCREASE_VIEWPORT_BY}
+						initialTopMostItemIndex={
+							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
+						}
+						fixedHeaderContent={tableHeader}
+						itemContent={itemContent}
+						style={virtuosoTableStyle}
+						components={virtuosoComponents}
+						endReached={onEndReached ? handleEndReached : undefined}
+					/>
+					{isLoading && (
+						<div className={viewStyles.tanstackLoadingOverlay}>
+							<Spinner height="35px" tip={loadingTip} />
+						</div>
+					)}
+					{showPagination && pagination && (
+						<Pagination
+							style={PAGINATION_STYLE}
+							current={page}
+							pageSize={limit}
+							total={pagination.total}
+							showSizeChanger
+							onChange={(p, ps): void => {
+								setPage(p);
+								if (ps != null && ps !== limit) {
+									setLimit(ps);
+								}
+							}}
+						/>
+					)}
+				</TooltipProvider>
+			</RowHoverProvider>
+		</div>
+	);
+}
+
+const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
+	props: TanStackTableProps<TData> & {
+		ref?: React.Ref<TanStackTableHandle>;
+	},
+) => JSX.Element;
+
+const TanStackTableBase = memo(
+	TanStackTableForward,
+) as typeof TanStackTableForward;
+
+/**
+ * Virtualized data table built on TanStack Table and `react-virtuoso`: resizable and pinnable columns,
+ * optional drag-to-reorder headers, expandable rows, and Ant Design pagination or infinite scroll.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import TanStackTable from 'components/TanStackTableView';
+ * import type { TableColumnDef } from 'components/TanStackTableView/types';
+ *
+ * type Row = { id: string; name: string };
+ *
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'name',
+ *     header: 'Name',
+ *     accessorKey: 'name',
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>,
+ *   },
+ * ];
+ *
+ * function Example(): JSX.Element {
+ *   return <TanStackTable<Row> data={rows} columns={columns} />;
+ * }
+ * ```
+ *
+ * @example Column definitions — `accessorFn`, custom header, pinned column
+ * ```tsx
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'id',
+ *     header: 'ID',
+ *     accessorKey: 'id',
+ *     pin: 'left',
+ *     width: { min: 80, default: 120 },
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ *   {
+ *     id: 'computed',
+ *     header: () => <span>Computed</span>,
+ *     accessorFn: (row) => row.first + row.last,
+ *     enableMove: false,
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ * ];
+ * ```
+ *
+ * @example Controlled column sizing and reorder (persist in parent state)
+ * ```tsx
+ * import type { ColumnSizingState } from '@tanstack/react-table';
+ *
+ * const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+ *
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   columnSizing={columnSizing}
+ *   onColumnSizingChange={setColumnSizing}
+ *   onColumnOrderChange={setColumns}
+ *   onRemoveColumn={(id) => setColumns((cols) => cols.filter((c) => c.id !== id))}
+ * />
+ * ```
+ *
+ * @example Pagination (Ant Design). Omit `onEndReached` so the footer pager is shown.
+ * ```tsx
+ * <TanStackTable
+ *   data={pageRows}
+ *   columns={columns}
+ *   pagination={{ total: totalCount, defaultPage: 1, defaultLimit: 20 }}
+ *   enableQueryParams
+ * />
+ * ```
+ *
+ * @example Infinite scroll — use `onEndReached` instead of `pagination` (pagination UI is hidden when `onEndReached` is set).
+ * ```tsx
+ * <TanStackTable
+ *   data={accumulatedRows}
+ *   columns={columns}
+ *   onEndReached={(lastIndex) => fetchMore(lastIndex)}
+ * />
+ * ```
+ *
+ * @example Loading overlay and typography for plain string/number cells
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isLoading={isFetching}
+ *   loadingTip="Loading logs…"
+ *   cellTypographySize="small"
+ *   plainTextCellLineClamp={2}
+ * />
+ * ```
+ *
+ * @example Row styling, selection, and actions
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isRowActive={(row) => row.id === selectedId}
+ *   activeRowIndex={selectedIndex}
+ *   onRowClick={(row) => setSelectedId(row.id)}
+ *   onRowDeactivate={() => setSelectedId(undefined)}
+ *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
+ *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
+ *   renderRowActions={(row) => <Button size="small">Open</Button>}
+ * />
+ * ```
+ *
+ * @example Expandable rows
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   renderExpandedRow={(row) => <pre>{JSON.stringify(row.raw, null, 2)}</pre>}
+ *   getRowCanExpand={(row) => Boolean(row.raw)}
+ * />
+ * ```
+ *
+ * @example Imperative handle — `goToPage` plus Virtuoso methods (e.g. `scrollToIndex`)
+ * ```tsx
+ * import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+ *
+ * const ref = useRef<TanStackTableHandle>(null);
+ *
+ * <TanStackTable ref={ref} data={data} columns={columns} pagination={{ total, defaultLimit: 20 }} />;
+ *
+ * ref.current?.goToPage(2);
+ * ref.current?.scrollToIndex({ index: 0, align: 'start' });
+ * ```
+ *
+ * @example Scroll container props (className, `data-testid`, etc.). `data` is reserved by Virtuoso and cannot be passed here.
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-table' }}
+ * />
+ * ```
+ */
+const TanStackTable = Object.assign(TanStackTableBase, {
+	Text: TanStackTableText,
+});
+
+export default TanStackTable;
--- a/frontend/src/components/TanStackTableView/types.ts
+++ b/frontend/src/components/TanStackTableView/types.ts
@@ -0,0 +1,112 @@
+import {
+	CSSProperties,
+	Dispatch,
+	HTMLAttributes,
+	ReactNode,
+	SetStateAction,
+} from 'react';
+import type { TableVirtuosoHandle } from 'react-virtuoso';
+import type {
+	ColumnSizingState,
+	Row as TanStackRowType,
+} from '@tanstack/react-table';
+
+export type SortState = { columnId: string; desc: boolean };
+
+/** Sets `--tanstack-plain-cell-*` on the scroll root via CSS module classes (no data attributes). */
+export type CellTypographySize = 'small' | 'medium' | 'large';
+
+export type TableCellContext<TData> = {
+	row: TData;
+	value: unknown;
+	isActive: boolean;
+	rowIndex: number;
+	isExpanded: boolean;
+	canExpand: boolean;
+	toggleExpanded: () => void;
+};
+
+export type TableColumnDef<TData> = {
+	id: string;
+	header: string | (() => ReactNode);
+	cell: (context: TableCellContext<TData>) => ReactNode;
+	accessorKey?: keyof TData & string;
+	accessorFn?: (row: TData) => unknown;
+	pin?: 'left' | 'right';
+	enableMove?: boolean;
+	enableResize?: boolean;
+	enableRemove?: boolean;
+	enableSort?: boolean;
+	width?: {
+		fixed?: number;
+		min?: number;
+		default?: number;
+	};
+};
+
+export type FlatItem<TData> =
+	| { kind: 'row'; row: TanStackRowType<TData> }
+	| { kind: 'expansion'; row: TanStackRowType<TData> };
+
+export type TableRowContext<TData> = {
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	colCount: number;
+	isDarkMode?: boolean;
+	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
+	plainTextCellLineClamp?: number;
+};
+
+export type PaginationProps = {
+	total: number;
+	defaultPage?: number;
+	defaultLimit?: number;
+};
+
+export type TanStackTableProps<TData> = {
+	data: TData[];
+	columns: TableColumnDef<TData>[];
+	columnSizing?: ColumnSizingState;
+	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn?: (id: string) => void;
+	isLoading?: boolean;
+	loadingTip?: string;
+	enableQueryParams?: boolean | string;
+	pagination?: PaginationProps;
+	onEndReached?: (index: number) => void;
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	activeRowIndex?: number;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	getRowCanExpand?: (row: TData) => boolean;
+	/**
+	 * Primitive cell values use `--tanstack-plain-cell-*` from the scroll container when `cellTypographySize` is set.
+	 */
+	plainTextCellLineClamp?: number;
+	/** Optional CSS-module typography tier for the scroll root (`--tanstack-plain-cell-font-size` / line-height + header `th`). */
+	cellTypographySize?: CellTypographySize;
+	/** Spread onto the Virtuoso scroll container. `data` is omitted — reserved by Virtuoso. */
+	tableScrollerProps?: Omit<HTMLAttributes<HTMLDivElement>, 'data'>;
+};
+
+export type TanStackTableHandle = TableVirtuosoHandle & {
+	goToPage: (page: number) => void;
+};
+
+export type TableColumnsState<TData> = {
+	columns: TableColumnDef<TData>[];
+	columnSizing: ColumnSizingState;
+	onColumnSizingChange: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn: (id: string) => void;
+};
--- a/frontend/src/components/TanStackTableView/useTableColumns.ts
+++ b/frontend/src/components/TanStackTableView/useTableColumns.ts
@@ -0,0 +1,200 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { ColumnSizingState } from '@tanstack/react-table';
+import getFromLocalstorage from 'api/browser/localstorage/get';
+import setToLocalstorage from 'api/browser/localstorage/set';
+
+import { TableColumnDef, TableColumnsState } from './types';
+
+const DEBOUNCE_MS = 250;
+
+type PersistedState = {
+	columnOrder: string[];
+	columnSizing: ColumnSizingState;
+	removedColumnIds: string[];
+};
+
+const EMPTY: PersistedState = {
+	columnOrder: [],
+	columnSizing: {},
+	removedColumnIds: [],
+};
+
+function readStorage(storageKey: string): PersistedState {
+	const raw = getFromLocalstorage(storageKey);
+	if (!raw) {
+		return EMPTY;
+	}
+	try {
+		const parsed = JSON.parse(raw) as PersistedState;
+		return {
+			columnOrder: Array.isArray(parsed.columnOrder) ? parsed.columnOrder : [],
+			columnSizing:
+				parsed.columnSizing && typeof parsed.columnSizing === 'object'
+					? Object.fromEntries(
+							Object.entries(parsed.columnSizing).filter(
+								([, v]) => typeof v === 'number' && Number.isFinite(v) && v > 0,
+							),
+					  )
+					: {},
+			removedColumnIds: Array.isArray(parsed.removedColumnIds)
+				? parsed.removedColumnIds
+				: [],
+		};
+	} catch (e) {
+		console.error('useTableColumns: failed to parse storage', e);
+		return EMPTY;
+	}
+}
+
+type UseTableColumnsOptions = { storageKey?: string };
+
+type UseTableColumnsResult<TData> = {
+	tableProps: TableColumnsState<TData>;
+	activeColumnIds: string[];
+};
+
+export function useTableColumns<TData>(
+	definitions: TableColumnDef<TData>[],
+	options?: UseTableColumnsOptions,
+): UseTableColumnsResult<TData> {
+	const { storageKey } = options ?? {};
+
+	const [persisted, setPersisted] = useState<PersistedState>(() =>
+		storageKey ? readStorage(storageKey) : EMPTY,
+	);
+
+	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(
+		() => persisted.columnSizing,
+	);
+
+	const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const persistedRef = useRef(persisted);
+	persistedRef.current = persisted;
+	const columnSizingRef = useRef(columnSizing);
+	columnSizingRef.current = columnSizing;
+
+	const scheduleWrite = useCallback(() => {
+		if (!storageKey) {
+			return;
+		}
+		if (pendingRef.current !== null) {
+			clearTimeout(pendingRef.current);
+		}
+		pendingRef.current = setTimeout(() => {
+			setToLocalstorage(
+				storageKey,
+				JSON.stringify({
+					...persistedRef.current,
+					columnSizing: columnSizingRef.current,
+				}),
+			);
+		}, DEBOUNCE_MS);
+	}, [storageKey]);
+
+	useEffect(() => {
+		scheduleWrite();
+		return (): void => {
+			if (pendingRef.current !== null) {
+				clearTimeout(pendingRef.current);
+			}
+		};
+	}, [columnSizing, scheduleWrite]);
+
+	const handleColumnSizingChange: Dispatch<
+		SetStateAction<ColumnSizingState>
+	> = useCallback((updater) => {
+		setColumnSizing((prev) =>
+			typeof updater === 'function' ? updater(prev) : updater,
+		);
+	}, []);
+
+	const handleColumnOrderChange = useCallback(
+		(updated: TableColumnDef<TData>[]) => {
+			const newOrder = updated.map((c) => c.id);
+			setPersisted((prev) => {
+				const next = { ...prev, columnOrder: newOrder };
+				if (storageKey) {
+					setToLocalstorage(
+						storageKey,
+						JSON.stringify({
+							...next,
+							columnSizing: columnSizingRef.current,
+						}),
+					);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const handleRemoveColumn = useCallback(
+		(id: string) => {
+			setPersisted((prev) => {
+				if (prev.removedColumnIds.includes(id)) {
+					return prev;
+				}
+				const next = {
+					...prev,
+					removedColumnIds: [...prev.removedColumnIds, id],
+				};
+				if (storageKey) {
+					if (pendingRef.current !== null) {
+						clearTimeout(pendingRef.current);
+					}
+					pendingRef.current = setTimeout(() => {
+						setToLocalstorage(
+							storageKey,
+							JSON.stringify({
+								...next,
+								columnSizing: columnSizingRef.current,
+							}),
+						);
+					}, DEBOUNCE_MS);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const columns = useMemo<TableColumnDef<TData>[]>(() => {
+		const removedSet = new Set(persisted.removedColumnIds);
+		const active = definitions.filter((d) => !removedSet.has(d.id));
+
+		if (persisted.columnOrder.length === 0) {
+			return active;
+		}
+
+		const orderMap = new Map(persisted.columnOrder.map((id, i) => [id, i]));
+		const pinned = active.filter((c) => c.pin != null);
+		const rest = active.filter((c) => c.pin == null);
+		const sortedRest = [...rest].sort((a, b) => {
+			const ai = orderMap.get(a.id) ?? Infinity;
+			const bi = orderMap.get(b.id) ?? Infinity;
+			return ai - bi;
+		});
+		return [...pinned, ...sortedRest];
+	}, [definitions, persisted]);
+
+	const activeColumnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	return {
+		tableProps: {
+			columns,
+			columnSizing,
+			onColumnSizingChange: handleColumnSizingChange,
+			onColumnOrderChange: handleColumnOrderChange,
+			onRemoveColumn: handleRemoveColumn,
+		},
+		activeColumnIds,
+	};
+}
--- a/frontend/src/components/TanStackTableView/useTableParams.ts
+++ b/frontend/src/components/TanStackTableView/useTableParams.ts
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+
+import { SortState } from './types';
+
+const NUQS_OPTIONS = { history: 'push' as const };
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 50;
+
+type Defaults = { page?: number; limit?: number; orderBy?: SortState | null };
+
+type TableParamsResult = {
+	page: number;
+	limit: number;
+	orderBy: SortState | null;
+	setPage: (p: number) => void;
+	setLimit: (l: number) => void;
+	setOrderBy: (s: SortState | null) => void;
+};
+
+export function useTableParams(
+	enableQueryParams?: boolean | string,
+	defaults?: Defaults,
+): TableParamsResult {
+	const prefix = typeof enableQueryParams === 'string' ? enableQueryParams : '';
+	const sep = prefix ? '_' : '';
+	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
+	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
+	const orderByDefault = defaults?.orderBy ?? null;
+
+	const [localPage, setLocalPage] = useState(pageDefault);
+	const [localLimit, setLocalLimit] = useState(limitDefault);
+	const [localOrderBy, setLocalOrderBy] = useState<SortState | null>(
+		orderByDefault,
+	);
+
+	const [urlPage, setUrlPage] = useQueryState(
+		`${prefix}${sep}page`,
+		parseAsInteger.withDefault(pageDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlLimit, setUrlLimit] = useQueryState(
+		`${prefix}${sep}limit`,
+		parseAsInteger.withDefault(limitDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlOrderBy, setUrlOrderBy] = useQueryState(
+		`${prefix}${sep}order_by`,
+		parseAsJsonNoValidate<SortState | null>()
+			.withDefault(orderByDefault as never)
+			.withOptions(NUQS_OPTIONS),
+	);
+
+	if (enableQueryParams) {
+		return {
+			page: urlPage,
+			limit: urlLimit,
+			orderBy: urlOrderBy as SortState | null,
+			setPage: setUrlPage,
+			setLimit: setUrlLimit,
+			setOrderBy: setUrlOrderBy,
+		};
+	}
+
+	return {
+		page: localPage,
+		limit: localLimit,
+		orderBy: localOrderBy,
+		setPage: setLocalPage,
+		setLimit: setLocalLimit,
+		setOrderBy: setLocalOrderBy,
+	};
+}
--- a/frontend/src/components/TanStackTableView/utils.ts
+++ b/frontend/src/components/TanStackTableView/utils.ts
@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { TableColumnDef } from './types';
+
+export const getColumnId = <TData>(column: TableColumnDef<TData>): string =>
+	column.id;
+
+const REM_PX = 16;
+const MIN_WIDTH_DEFAULT_REM = 12;
+
+export const getColumnMinWidthPx = <TData>(
+	column: TableColumnDef<TData>,
+): number => {
+	if (column.width?.fixed != null) {
+		return column.width.fixed;
+	}
+	if (column.width?.min != null) {
+		return column.width.min;
+	}
+	return MIN_WIDTH_DEFAULT_REM * REM_PX;
+};
+
+export function buildTanstackColumnDef<TData>(
+	colDef: TableColumnDef<TData>,
+	isRowActive?: (row: TData) => boolean,
+): ColumnDef<TData> {
+	const isFixed = colDef.width?.fixed != null;
+	const fixedWidth = colDef.width?.fixed;
+	const minWidthPx = getColumnMinWidthPx(colDef);
+	return {
+		id: colDef.id,
+		header:
+			typeof colDef.header === 'string'
+				? colDef.header
+				: (): ReactNode =>
+						typeof colDef.header === 'function' ? colDef.header() : null,
+		accessorFn: (row: TData): unknown => {
+			if (colDef.accessorFn) {
+				return colDef.accessorFn(row);
+			}
+			if (colDef.accessorKey) {
+				return (row as Record<string, unknown>)[colDef.accessorKey];
+			}
+			return undefined;
+		},
+		enableResizing: colDef.enableResize !== false && !isFixed,
+		enableSorting: colDef.enableSort === true,
+		minSize: fixedWidth ?? minWidthPx,
+		size: colDef.width?.default ?? fixedWidth,
+		maxSize: fixedWidth,
+		cell: ({ row, getValue }): ReactNode => {
+			const rowData = row.original;
+			return colDef.cell({
+				row: rowData,
+				value: getValue(),
+				isActive: isRowActive?.(rowData) ?? false,
+				rowIndex: row.index,
+				isExpanded: row.getIsExpanded(),
+				canExpand: row.getCanExpand(),
+				toggleExpanded: (): void => {
+					row.toggleExpanded();
+				},
+			});
+		},
+	};
+}
--- a/frontend/src/components/TimelineV3/TimelineV3.styles.scss
+++ b/frontend/src/components/TimelineV3/TimelineV3.styles.scss
@@ -1,4 +0,0 @@
-.timeline-v3-container {
-	// flex: 1;
-	overflow: visible;
-}
--- a/frontend/src/components/TimelineV3/TimelineV3.tsx
+++ b/frontend/src/components/TimelineV3/TimelineV3.tsx
@@ -1,87 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import {
-	getIntervals,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-	const isDarkMode = useIsDarkMode();
-
-	useEffect(() => {
-		const spread = endTimestamp - startTimestamp;
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
-
-		setIntervals(intervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
-
-	if (endTimestamp < startTimestamp) {
-		console.error(
-			'endTimestamp cannot be less than startTimestamp',
-			startTimestamp,
-			endTimestamp,
-		);
-		return <div />;
-	}
-
-	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={timelineHeight * 2.5}
-				xmlns="http://www.w3.org/2000/svg"
-				overflow="visible"
-			>
-				{intervals &&
-					intervals.length > 0 &&
-					intervals.map((interval, index) => (
-						<g
-							transform={`translate(${(interval.percentage * width) / 100},0)`}
-							key={`${interval.percentage + interval.label + index}`}
-							textAnchor="middle"
-							fontSize="0.6rem"
-						>
-							<text
-								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
-								fill={strokeColor}
-							>
-								{interval.label}
-							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
-						</g>
-					))}
-			</svg>
-		</div>
-	);
-}
-
-export default TimelineV3;
--- a/frontend/src/components/TimelineV3/utils.ts
+++ b/frontend/src/components/TimelineV3/utils.ts
@@ -1,93 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
-export function getMinimumIntervalsBasedOnWidth(width: number): number {
-	if (width < 640) {
-		return 3;
-	}
-	if (width < 768) {
-		return 4;
-	}
-	if (width < 1024) {
-		return 5;
-	}
-	return 6;
-}
-
-/**
- * Computes timeline intervals with offset-aware labels.
- * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
- * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
- */
-export function getIntervals(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
-): Interval[] {
-	const integerPartString = intervalSpread.toString().split('.')[0];
-	const integerPartLength = integerPartString.length;
-
-	const intervalSpreadNormalized =
-		intervalSpread < 1.0
-			? intervalSpread
-			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-			  10 ** (integerPartLength - 1);
-
-	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
-	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
-	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			label: `${toFixed(
-				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
-			percentage: 0,
-		},
-	];
-
-	let tempBaseSpread = baseSpread;
-	let elapsedIntervals = 0;
-
-	while (tempBaseSpread && intervals.length < 20) {
-		let intervalTime: number;
-
-		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
-			intervalTime = elapsedIntervals + tempBaseSpread;
-			tempBaseSpread = 0;
-		} else {
-			intervalTime = elapsedIntervals + intervalSpreadNormalized;
-			tempBaseSpread -= intervalSpreadNormalized;
-		}
-
-		elapsedIntervals = intervalTime;
-		const labelTime = offsetTimestamp + intervalTime;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (intervalTime / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -33,125 +33,6 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
-	traceDetailColorsV3: {
-		// Blues
-		dodgerBlue: '#2F80ED',
-		royalBlue: '#3366E6',
-		steelBlue: '#4682B4',
-
-		// Teals / Cyans
-		turquoise: '#00CEC9',
-		lagoon: '#1ABC9C',
-		cyanBright: '#22A6F2',
-
-		// Greens
-		emeraldGreen: '#27AE60',
-		mediumSeaGreen: '#3CB371',
-		limeGreen: '#A3E635',
-
-		// Yellows / Golds
-		festivalYellow: '#F2C94C',
-		sunflower: '#FFD93D',
-		warmAmber: '#FFCA28',
-
-		// Purples / Violets
-		mediumPurple: '#BB6BD9',
-		royalPurple: '#9B51E0',
-		orchid: '#DA77F2',
-
-		// Accent
-		neonViolet: '#C77DFF',
-		electricPurple: '#6C5CE7',
-		arcticBlue: '#48DBFB',
-
-		// Blues extended
-		blue1: '#1F63E0',
-		blue2: '#3A7AED',
-		blue3: '#5A9DF5',
-		blue4: '#2874A6',
-		blue5: '#2E86C1',
-		blue6: '#3498DB',
-
-		// Cyans
-		cyan1: '#00B0AA',
-		cyan2: '#33D6C2',
-		cyan3: '#66E9DA',
-
-		// Greens extended
-		green1: '#1E8449',
-		green2: '#2ECC71',
-		green3: '#58D68D',
-		green4: '#229954',
-		green5: '#27AE60',
-		green6: '#52BE80',
-
-		// Forest
-		forest1: '#27AE60',
-		forest2: '#2ECC71',
-		forest3: '#58D68D',
-
-		// Lime
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#D4FFB0',
-
-		// Teals
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		teal4: '#1ABC9C',
-		teal5: '#48C9B0',
-		teal6: '#76D7C4',
-
-		// Yellows
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-
-		// Gold
-		gold1: '#F39C12',
-		gold2: '#F1C40F',
-		gold3: '#F7DC6F',
-		gold4: '#B7950B',
-		gold5: '#F1C40F',
-		gold6: '#F4D03F',
-
-		// Mustard
-		mustard1: '#F1C40F',
-		mustard2: '#F7DC6F',
-		mustard3: '#F9E79F',
-
-		// Aqua
-		aqua1: '#00BFFF',
-		aqua2: '#1E90FF',
-		aqua3: '#63B8FF',
-
-		// Purple extended
-		purple1: '#8E44AD',
-		purple2: '#9B59B6',
-		purple3: '#BB8FCE',
-
-		violet1: '#8E44AD',
-		violet2: '#9B59B6',
-		violet3: '#BB8FCE',
-		violet4: '#7D3C98',
-		violet5: '#8E44AD',
-		violet6: '#9B59B6',
-
-		// Lavender
-		lavender1: '#9B59B6',
-		lavender2: '#AF7AC5',
-		lavender3: '#C39BD3',
-
-		// Oranges (safe ones, not red-ish)
-		orange4: '#D35400',
-		orange5: '#E67E22',
-		orange6: '#EB984E',
-
-		coral1: '#E67E22',
-		coral2: '#F39C12',
-		coral3: '#F5B041',
-	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
--- a/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss
+++ b/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss
@@ -123,7 +123,6 @@
 				&__row {
 					display: flex;
 					flex-direction: row;
-					flex-wrap: wrap;
 					align-items: flex-end;
 					max-width: 825px;
 					gap: 25px;
--- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
@@ -1,21 +1,34 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { toast } from '@signozhq/sonner';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+import { getRowBackgroundColor } from 'components/Logs/LogStateIndicator/getRowBackgroundColor';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import RawLogView from 'components/Logs/RawLogView';
+import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColumns';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import TanStackTable from 'components/TanStackTableView';
+import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+import { useTableColumns } from 'components/TanStackTableView/useTableColumns';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
+import { QueryParams } from 'constants/query';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
-import TanStackTableView from 'container/LogsExplorerList/TanStackTableView';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -30,7 +43,10 @@ function LiveLogsList({
 	isLoading,
 	handleChangeSelectedView,
 }: LiveLogsListProps): JSX.Element {
-	const ref = useRef<VirtuosoHandle>(null);
+	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
+	const { pathname } = useLocation();
+	const [, setCopy] = useCopyToClipboard();
+	const isDarkMode = useIsDarkMode();

 	const { isConnectionLoading } = useEventSource();

@@ -66,9 +82,46 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);

+	const logsColumns = useLogsTableColumns({
+		fields: selectedFields,
+		linesPerRow: options.maxLines,
+		fontSize: options.fontSize,
+		appendTo: 'end',
+	});
+
+	const { tableProps } = useTableColumns(logsColumns, {
+		storageKey: LOCALSTORAGE.LOGS_LIST_COLUMNS,
+	});
+
+	const handleRemoveColumn = useCallback(
+		(columnId: string): void => {
+			tableProps.onRemoveColumn(columnId);
+			config.addColumn?.onRemove?.(columnId);
+		},
+		[tableProps, config.addColumn],
+	);
+
+	const makeOnLogCopy = useCallback(
+		(log: ILog) => (event: MouseEvent<HTMLElement>): void => {
+			event.preventDefault();
+			event.stopPropagation();
+			const urlQuery = new URLSearchParams(window.location.search);
+			urlQuery.delete(QueryParams.activeLogId);
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.activeLogId, `"${log.id}"`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			setCopy(link);
+			toast.success('Copied to clipboard', { position: 'top-right' });
+		},
+		[pathname, setCopy],
+	);
+
 	const handleScrollToLog = useScrollToLog({
 		logs: formattedLogs,
-		virtuosoRef: ref,
+		virtuosoRef: ref as React.RefObject<Pick<
+			VirtuosoHandle,
+			'scrollToIndex'
+		> | null>,
 	});

 	const getItemContent = useCallback(
@@ -158,29 +211,48 @@ function LiveLogsList({
 			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
-						<TanStackTableView
-							ref={ref}
+						<TanStackTable
+							ref={ref as React.Ref<TanStackTableHandle>}
+							{...tableProps}
+							plainTextCellLineClamp={options.maxLines}
+							cellTypographySize={options.fontSize}
+							onRemoveColumn={handleRemoveColumn}
+							data={formattedLogs}
 							isLoading={false}
-							tableViewProps={{
-								logs: formattedLogs,
-								fields: selectedFields,
-								linesPerRow: options.maxLines,
-								fontSize: options.fontSize,
-								appendTo: 'end',
-								activeLogIndex,
+							isRowActive={(log): boolean => log.id === activeLog?.id}
+							getRowStyle={(log): CSSProperties =>
+								({
+									'--row-active-bg': getRowBackgroundColor(
+										isDarkMode,
+										getLogIndicatorType(log),
+									),
+									'--row-hover-bg': getRowBackgroundColor(
+										isDarkMode,
+										getLogIndicatorType(log),
+									),
+								} as CSSProperties)
+							}
+							onRowClick={(log): void => {
+								handleSetActiveLog(log);
 							}}
-							handleChangeSelectedView={handleChangeSelectedView}
-							logs={formattedLogs}
-							onSetActiveLog={handleSetActiveLog}
-							onClearActiveLog={handleCloseLogDetail}
-							activeLog={activeLog}
-							onRemoveColumn={config.addColumn?.onRemove}
+							onRowDeactivate={handleCloseLogDetail}
+							activeRowIndex={activeLogIndex}
+							renderRowActions={(log): ReactNode => (
+								<LogLinesActionButtons
+									handleShowContext={(e): void => {
+										e.preventDefault();
+										e.stopPropagation();
+										handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
+									}}
+									onLogCopy={makeOnLogCopy(log)}
+								/>
+							)}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<OverlayScrollbar isVirtuoso>
 								<Virtuoso
-									ref={ref}
+									ref={ref as React.Ref<VirtuosoHandle>}
 									initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 									data={formattedLogs}
 									totalCount={formattedLogs.length}
--- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss
@@ -11,12 +11,6 @@
 	}
 }

-.infra-metrics-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 24px;
-}
-
 .infra-metrics-card {
 	margin: 1rem 0;
 	height: 300px;
--- a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -163,16 +163,16 @@ function NodeMetrics({
 		);
 	};
 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={widgetInfo[idx].title}>
+				<Col span={12} key={widgetInfo[idx].title}>
 					<Typography.Text>{widgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }

--- a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -146,16 +146,16 @@ function PodMetrics({
 	};

 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={podWidgetInfo[idx].title}>
+				<Col span={12} key={podWidgetInfo[idx].title}>
 					<Typography.Text>{podWidgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }

--- a/frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx
+++ b/frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx
@@ -221,7 +221,7 @@ function ColumnView({
 		onColumnOrderChange(formattedColumns);
 	};

-	const handleRowClick = (row: Row<Record<string, unknown>>): void => {
+	const handleRowClick = (row: Row<Record<string, string>>): void => {
 		const currentLog = logs.find(({ id }) => id === row.original.id);

 		setShowActiveLog(true);
--- a/frontend/src/container/LogsExplorerList/RowHoverContext.tsx
+++ b/frontend/src/container/LogsExplorerList/RowHoverContext.tsx
@@ -1,8 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { createContext, useContext } from 'react';
-
-const RowHoverContext = createContext(false);
-
-export const useRowHover = (): boolean => useContext(RowHoverContext);
-
-export default RowHoverContext;
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackCustomTableRow.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackCustomTableRow.tsx
@@ -1,84 +0,0 @@
-import { ComponentProps, memo, useCallback, useState } from 'react';
-import { TableComponents } from 'react-virtuoso';
-import {
-	getLogIndicatorType,
-	getLogIndicatorTypeForTable,
-} from 'components/Logs/LogStateIndicator/utils';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ILog } from 'types/api/logs/log';
-
-import { TableRowStyled } from '../InfinityTableView/styles';
-import RowHoverContext from '../RowHoverContext';
-import { TanStackTableRowData } from './types';
-
-export type TableRowContext = {
-	activeLog?: ILog | null;
-	activeContextLog?: ILog | null;
-	logsById: Map<string, ILog>;
-};
-
-type VirtuosoTableRowProps = ComponentProps<
-	NonNullable<TableComponents<TanStackTableRowData, TableRowContext>['TableRow']>
->;
-
-type TanStackCustomTableRowProps = VirtuosoTableRowProps;
-
-function TanStackCustomTableRow({
-	children,
-	item,
-	context,
-	...props
-}: TanStackCustomTableRowProps): JSX.Element {
-	const { isHighlighted } = useCopyLogLink(item.currentLog.id);
-	const isDarkMode = useIsDarkMode();
-	const [hasHovered, setHasHovered] = useState(false);
-	const rowId = String(item.currentLog.id ?? '');
-	const activeLog = context?.activeLog;
-	const activeContextLog = context?.activeContextLog;
-	const logsById = context?.logsById;
-	const rowLog = logsById?.get(rowId) || item.currentLog;
-	const logType = rowLog
-		? getLogIndicatorType(rowLog)
-		: getLogIndicatorTypeForTable(item.log);
-
-	const handleMouseEnter = useCallback(() => {
-		if (!hasHovered) {
-			setHasHovered(true);
-		}
-	}, [hasHovered]);
-
-	return (
-		<RowHoverContext.Provider value={hasHovered}>
-			<TableRowStyled
-				{...props}
-				$isDarkMode={isDarkMode}
-				$isActiveLog={
-					isHighlighted ||
-					rowId === String(activeLog?.id ?? '') ||
-					rowId === String(activeContextLog?.id ?? '')
-				}
-				$logType={logType}
-				onMouseEnter={handleMouseEnter}
-			>
-				{children}
-			</TableRowStyled>
-		</RowHoverContext.Provider>
-	);
-}
-
-export default memo(TanStackCustomTableRow, (prev, next) => {
-	const prevId = String(prev.item.currentLog.id ?? '');
-	const nextId = String(next.item.currentLog.id ?? '');
-	if (prevId !== nextId) {
-		return false;
-	}
-
-	const prevIsActive =
-		prevId === String(prev.context?.activeLog?.id ?? '') ||
-		prevId === String(prev.context?.activeContextLog?.id ?? '');
-	const nextIsActive =
-		nextId === String(next.context?.activeLog?.id ?? '') ||
-		nextId === String(next.context?.activeContextLog?.id ?? '');
-	return prevIsActive === nextIsActive;
-});
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackRow.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackRow.tsx
@@ -1,95 +0,0 @@
-import {
-	MouseEvent as ReactMouseEvent,
-	MouseEventHandler,
-	useCallback,
-} from 'react';
-import { flexRender, Row as TanStackRowModel } from '@tanstack/react-table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
-
-import { TableCellStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import { useRowHover } from '../RowHoverContext';
-import { TanStackTableRowData } from './types';
-
-type TanStackRowCellsProps = {
-	row: TanStackRowModel<TanStackTableRowData>;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
-	onSetActiveLog?: InfinityTableProps['onSetActiveLog'];
-	onClearActiveLog?: InfinityTableProps['onClearActiveLog'];
-	isActiveLog?: boolean;
-	isDarkMode: boolean;
-	onLogCopy: (logId: string, event: ReactMouseEvent<HTMLElement>) => void;
-	isLogsExplorerPage: boolean;
-};
-
-function TanStackRowCells({
-	row,
-	fontSize,
-	onSetActiveLog,
-	onClearActiveLog,
-	isActiveLog = false,
-	isDarkMode,
-	onLogCopy,
-	isLogsExplorerPage,
-}: TanStackRowCellsProps): JSX.Element {
-	const { currentLog } = row.original;
-	const hasHovered = useRowHover();
-
-	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
-		(event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onSetActiveLog?.(currentLog, VIEW_TYPES.CONTEXT);
-		},
-		[currentLog, onSetActiveLog],
-	);
-
-	const handleShowLogDetails = useCallback(() => {
-		if (!currentLog) {
-			return;
-		}
-
-		if (isActiveLog && onClearActiveLog) {
-			onClearActiveLog();
-			return;
-		}
-
-		onSetActiveLog?.(currentLog);
-	}, [currentLog, isActiveLog, onClearActiveLog, onSetActiveLog]);
-
-	const visibleCells = row.getVisibleCells();
-	const lastCellIndex = visibleCells.length - 1;
-
-	return (
-		<>
-			{visibleCells.map((cell, index) => {
-				const columnKey = cell.column.id;
-				const isLastCell = index === lastCellIndex;
-				return (
-					<TableCellStyled
-						$isDragColumn={false}
-						$isLogIndicator={columnKey === 'state-indicator'}
-						$hasSingleColumn={visibleCells.length <= 2}
-						$isDarkMode={isDarkMode}
-						key={cell.id}
-						fontSize={fontSize}
-						className={columnKey}
-						onClick={handleShowLogDetails}
-					>
-						{flexRender(cell.column.columnDef.cell, cell.getContext())}
-						{isLastCell && isLogsExplorerPage && hasHovered && (
-							<LogLinesActionButtons
-								handleShowContext={handleShowContext}
-								onLogCopy={(event): void => onLogCopy(currentLog.id, event)}
-								customClassName="table-view-log-actions"
-							/>
-						)}
-					</TableCellStyled>
-				);
-			})}
-		</>
-	);
-}
-
-export default TanStackRowCells;
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackCustomTableRow.test.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackCustomTableRow.test.tsx
@@ -1,105 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import TanStackCustomTableRow, {
-	TableRowContext,
-} from '../TanStackCustomTableRow';
-import type { TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableRowStyled: 'tr',
-}));
-
-jest.mock('hooks/logs/useCopyLogLink', () => ({
-	useCopyLogLink: (): { isHighlighted: boolean } => ({ isHighlighted: false }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('components/Logs/LogStateIndicator/utils', () => ({
-	getLogIndicatorType: (): string => 'info',
-	getLogIndicatorTypeForTable: (): string => 'info',
-}));
-
-const item: TanStackTableRowData = {
-	log: {},
-	currentLog: { id: 'row-1' } as TanStackTableRowData['currentLog'],
-	rowIndex: 0,
-};
-
-const virtuosoTableRowAttrs = {
-	'data-index': 0,
-	'data-item-index': 0,
-	'data-known-size': 40,
-} as const;
-
-const defaultContext: TableRowContext = {
-	activeLog: null,
-	activeContextLog: null,
-	logsById: new Map(),
-};
-
-describe('TanStackCustomTableRow', () => {
-	it('renders children inside TableRowStyled', () => {
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						context={defaultContext}
-					>
-						<td>cell</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByText('cell')).toBeInTheDocument();
-	});
-
-	it('marks row active when activeLog matches item id', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						context={{
-							...defaultContext,
-							activeLog: { id: 'row-1' } as never,
-						}}
-					>
-						<td>x</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		const row = container.querySelector('tr');
-		expect(row).toBeTruthy();
-	});
-
-	it('uses logsById entry when present for indicator type', () => {
-		const logFromMap = { id: 'row-1', severity_text: 'error' } as never;
-		render(
-			<table>
-				<tbody>
-					<TanStackCustomTableRow
-						{...virtuosoTableRowAttrs}
-						item={item}
-						context={{
-							...defaultContext,
-							logsById: new Map([['row-1', logFromMap]]),
-						}}
-					>
-						<td>x</td>
-					</TanStackCustomTableRow>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getByText('x')).toBeInTheDocument();
-	});
-});
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackHeaderRow.test.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackHeaderRow.test.tsx
@@ -1,152 +0,0 @@
-import type { Header } from '@tanstack/react-table';
-import { render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import TanStackHeaderRow from '../TanStackHeaderRow';
-import type { OrderedColumn, TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableHeaderCellStyled: 'th',
-}));
-
-const mockUseSortable = jest.fn((_args?: unknown) => ({
-	attributes: {},
-	listeners: {},
-	setNodeRef: jest.fn(),
-	setActivatorNodeRef: jest.fn(),
-	transform: null,
-	transition: undefined,
-	isDragging: false,
-}));
-
-jest.mock('@dnd-kit/sortable', () => ({
-	useSortable: (args: unknown): ReturnType<typeof mockUseSortable> =>
-		mockUseSortable(args),
-}));
-
-jest.mock('@tanstack/react-table', () => ({
-	flexRender: (def: unknown, ctx: unknown): unknown => {
-		if (typeof def === 'string') {
-			return def;
-		}
-		if (typeof def === 'function') {
-			return (def as (c: unknown) => unknown)(ctx);
-		}
-		return def;
-	},
-}));
-
-const column = (key: string): OrderedColumn =>
-	({ key, title: key } as OrderedColumn);
-
-const mockHeader = (
-	id: string,
-	canResize = true,
-): Header<TanStackTableRowData, unknown> =>
-	(({
-		id,
-		column: {
-			getCanResize: (): boolean => canResize,
-			getIsResizing: (): boolean => false,
-			columnDef: { header: id },
-		},
-		getContext: (): unknown => ({}),
-		getResizeHandler: (): (() => void) => jest.fn(),
-		flexRender: undefined,
-	} as unknown) as Header<TanStackTableRowData, unknown>);
-
-describe('TanStackHeaderRow', () => {
-	beforeEach(() => {
-		mockUseSortable.mockClear();
-	});
-
-	it('renders column title when header is undefined', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('timestamp')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(screen.getByText('Timestamp')).toBeInTheDocument();
-	});
-
-	it('enables useSortable for draggable columns', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('body')}
-							header={mockHeader('body')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(mockUseSortable).toHaveBeenCalledWith(
-			expect.objectContaining({
-				id: 'body',
-				disabled: false,
-			}),
-		);
-	});
-
-	it('disables sortable for expand column', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('expand')}
-							header={mockHeader('expand', false)}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(mockUseSortable).toHaveBeenCalledWith(
-			expect.objectContaining({
-				disabled: true,
-			}),
-		);
-	});
-
-	it('shows drag grip for draggable columns', () => {
-		render(
-			<table>
-				<thead>
-					<tr>
-						<TanStackHeaderRow
-							column={column('body')}
-							header={mockHeader('body')}
-							isDarkMode={false}
-							fontSize={FontSize.SMALL}
-							hasSingleColumn={false}
-						/>
-					</tr>
-				</thead>
-			</table>,
-		);
-
-		expect(
-			screen.getByRole('button', { name: /Drag body column/i }),
-		).toBeInTheDocument();
-	});
-});
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackRow.test.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackRow.test.tsx
@@ -1,193 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import RowHoverContext from 'container/LogsExplorerList/RowHoverContext';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import TanStackRowCells from '../TanStackRow';
-import type { TanStackTableRowData } from '../types';
-
-jest.mock('../../InfinityTableView/styles', () => ({
-	TableCellStyled: 'td',
-}));
-
-jest.mock(
-	'components/Logs/LogLinesActionButtons/LogLinesActionButtons',
-	() => ({
-		__esModule: true,
-		default: ({
-			onLogCopy,
-		}: {
-			onLogCopy: (e: React.MouseEvent) => void;
-		}): JSX.Element => (
-			<button type="button" data-testid="copy-btn" onClick={onLogCopy}>
-				copy
-			</button>
-		),
-	}),
-);
-
-const flexRenderMock = jest.fn((def: unknown, _ctx?: unknown) =>
-	typeof def === 'function' ? def({}) : def,
-);
-
-jest.mock('@tanstack/react-table', () => ({
-	flexRender: (def: unknown, ctx: unknown): unknown => flexRenderMock(def, ctx),
-}));
-
-function buildMockRow(
-	visibleCells: Array<{ columnId: string }>,
-): Parameters<typeof TanStackRowCells>[0]['row'] {
-	return {
-		original: {
-			currentLog: { id: 'log-1' } as TanStackTableRowData['currentLog'],
-			log: {},
-			rowIndex: 0,
-		},
-		getVisibleCells: () =>
-			visibleCells.map((cell, index) => ({
-				id: `cell-${index}`,
-				column: {
-					id: cell.columnId,
-					columnDef: {
-						cell: (): string => `content-${cell.columnId}`,
-					},
-				},
-				getContext: (): Record<string, unknown> => ({}),
-			})),
-	} as never;
-}
-
-describe('TanStackRowCells', () => {
-	beforeEach(() => {
-		flexRenderMock.mockClear();
-	});
-
-	it('renders a cell per visible column and calls flexRender', () => {
-		const row = buildMockRow([
-			{ columnId: 'state-indicator' },
-			{ columnId: 'body' },
-		]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(screen.getAllByRole('cell')).toHaveLength(2);
-		expect(flexRenderMock).toHaveBeenCalled();
-	});
-
-	it('applies state-indicator styling class on the indicator cell', () => {
-		const row = buildMockRow([{ columnId: 'state-indicator' }]);
-
-		const { container } = render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		expect(container.querySelector('td.state-indicator')).toBeInTheDocument();
-	});
-
-	it('renders row actions on logs explorer page after hover', () => {
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<RowHoverContext.Provider value>
-				<table>
-					<tbody>
-						<tr>
-							<TanStackRowCells
-								row={row}
-								fontSize={FontSize.SMALL}
-								isDarkMode={false}
-								onLogCopy={jest.fn()}
-								isLogsExplorerPage
-							/>
-						</tr>
-					</tbody>
-				</table>
-			</RowHoverContext.Provider>,
-		);
-
-		expect(screen.getByTestId('copy-btn')).toBeInTheDocument();
-	});
-
-	it('click on a data cell calls onSetActiveLog with current log', () => {
-		const onSetActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							onSetActiveLog={onSetActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		fireEvent.click(screen.getAllByRole('cell')[0]);
-
-		expect(onSetActiveLog).toHaveBeenCalledWith(
-			expect.objectContaining({ id: 'log-1' }),
-		);
-	});
-
-	it('when row is active log, click on cell clears active log', () => {
-		const onSetActiveLog = jest.fn();
-		const onClearActiveLog = jest.fn();
-		const row = buildMockRow([{ columnId: 'body' }]);
-
-		render(
-			<table>
-				<tbody>
-					<tr>
-						<TanStackRowCells
-							row={row}
-							fontSize={FontSize.SMALL}
-							isDarkMode={false}
-							isActiveLog
-							onSetActiveLog={onSetActiveLog}
-							onClearActiveLog={onClearActiveLog}
-							onLogCopy={jest.fn()}
-							isLogsExplorerPage={false}
-						/>
-					</tr>
-				</tbody>
-			</table>,
-		);
-
-		fireEvent.click(screen.getAllByRole('cell')[0]);
-
-		expect(onClearActiveLog).toHaveBeenCalled();
-		expect(onSetActiveLog).not.toHaveBeenCalled();
-	});
-});
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackTableView.test.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/tests/TanStackTableView.test.tsx
@@ -1,104 +0,0 @@
-import { forwardRef } from 'react';
-import { render, screen } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-
-import type { InfinityTableProps } from '../../InfinityTableView/types';
-import TanStackTableView from '../index';
-
-jest.mock('react-virtuoso', () => ({
-	TableVirtuoso: forwardRef<
-		unknown,
-		{
-			fixedHeaderContent?: () => JSX.Element;
-			itemContent: (i: number) => JSX.Element;
-		}
-	>(function MockVirtuoso({ fixedHeaderContent, itemContent }, _ref) {
-		return (
-			<div data-testid="virtuoso">
-				{fixedHeaderContent?.()}
-				{itemContent(0)}
-			</div>
-		);
-	}),
-}));
-
-jest.mock('components/Logs/TableView/useTableView', () => ({
-	useTableView: (): {
-		dataSource: Record<string, string>[];
-		columns: unknown[];
-	} => ({
-		dataSource: [{ id: '1' }],
-		columns: [
-			{ key: 'body', title: 'body', render: (): string => 'x' },
-			{ key: 'state-indicator', title: 's', render: (): string => 'y' },
-		],
-	}),
-}));
-
-jest.mock('hooks/useDragColumns', () => ({
-	__esModule: true,
-	default: (): {
-		draggedColumns: unknown[];
-		onColumnOrderChange: () => void;
-	} => ({
-		draggedColumns: [],
-		onColumnOrderChange: jest.fn(),
-	}),
-}));
-
-jest.mock('hooks/logs/useActiveLog', () => ({
-	useActiveLog: (): { activeLog: null } => ({ activeLog: null }),
-}));
-
-jest.mock('hooks/logs/useCopyLogLink', () => ({
-	useCopyLogLink: (): { activeLogId: null } => ({ activeLogId: null }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs' }),
-}));
-
-jest.mock('react-use', () => ({
-	useCopyToClipboard: (): [unknown, () => void] => [null, jest.fn()],
-}));
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: { success: jest.fn() },
-}));
-
-jest.mock('components/Spinner', () => ({
-	__esModule: true,
-	default: ({ tip }: { tip: string }): JSX.Element => (
-		<div data-testid="spinner">{tip}</div>
-	),
-}));
-
-const baseProps: InfinityTableProps = {
-	isLoading: false,
-	tableViewProps: {
-		logs: [{ id: '1' } as never],
-		fields: [],
-		linesPerRow: 3,
-		fontSize: FontSize.SMALL,
-		appendTo: 'end',
-		activeLogIndex: 0,
-	},
-};
-
-describe('TanStackTableView', () => {
-	it('shows spinner while loading', () => {
-		render(<TanStackTableView {...baseProps} isLoading />);
-
-		expect(screen.getByTestId('spinner')).toHaveTextContent('Getting Logs');
-	});
-
-	it('renders virtuoso when not loading', () => {
-		render(<TanStackTableView {...baseProps} />);
-
-		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
-	});
-});
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/tests/useColumnSizingPersistence.test.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/tests/useColumnSizingPersistence.test.tsx
@@ -1,173 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import type { OrderedColumn } from '../types';
-import { useColumnSizingPersistence } from '../useColumnSizingPersistence';
-
-const mockGet = jest.fn();
-const mockSet = jest.fn();
-
-jest.mock('api/browser/localstorage/get', () => ({
-	__esModule: true,
-	default: (key: string): string | null => mockGet(key),
-}));
-
-jest.mock('api/browser/localstorage/set', () => ({
-	__esModule: true,
-	default: (key: string, value: string): void => {
-		mockSet(key, value);
-	},
-}));
-
-const col = (key: string): OrderedColumn =>
-	({ key, title: key } as OrderedColumn);
-
-describe('useColumnSizingPersistence', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockGet.mockReturnValue(null);
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	});
-
-	it('initializes with empty sizing when localStorage is empty', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({});
-	});
-
-	it('parses flat ColumnSizingState from localStorage', () => {
-		mockGet.mockReturnValue(JSON.stringify({ body: 400, timestamp: 180 }));
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 400, timestamp: 180 });
-	});
-
-	it('parses PersistedColumnSizing wrapper with sizing + columnIdsSignature', () => {
-		mockGet.mockReturnValue(
-			JSON.stringify({
-				version: 1,
-				columnIdsSignature: 'body|timestamp',
-				sizing: { body: 300 },
-			}),
-		);
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('timestamp')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 300 });
-	});
-
-	it('drops invalid numeric entries when reading from localStorage', () => {
-		mockGet.mockReturnValue(
-			JSON.stringify({
-				body: 200,
-				bad: NaN,
-				zero: 0,
-				neg: -1,
-				str: 'wide',
-			}),
-		);
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body'), col('bad'), col('zero')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 200 });
-	});
-
-	it('returns empty sizing when JSON is invalid', () => {
-		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-		mockGet.mockReturnValue('not-json');
-
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		expect(result.current.columnSizing).toEqual({});
-		spy.mockRestore();
-	});
-
-	it('prunes sizing for columns not in orderedColumns and strips fixed columns', () => {
-		mockGet.mockReturnValue(JSON.stringify({ body: 400, expand: 32, gone: 100 }));
-
-		const { result, rerender } = renderHook(
-			({ columns }: { columns: OrderedColumn[] }) =>
-				useColumnSizingPersistence(columns),
-			{
-				initialProps: {
-					columns: [
-						col('body'),
-						col('expand'),
-						col('state-indicator'),
-					] as OrderedColumn[],
-				},
-			},
-		);
-
-		expect(result.current.columnSizing).toEqual({ body: 400 });
-
-		act(() => {
-			rerender({
-				columns: [col('body'), col('expand'), col('state-indicator')],
-			});
-		});
-
-		expect(result.current.columnSizing).toEqual({ body: 400 });
-	});
-
-	it('updates setColumnSizing manually', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		act(() => {
-			result.current.setColumnSizing({ body: 500 });
-		});
-
-		expect(result.current.columnSizing).toEqual({ body: 500 });
-	});
-
-	it('debounces writes to localStorage', () => {
-		const { result } = renderHook(() =>
-			useColumnSizingPersistence([col('body')]),
-		);
-
-		act(() => {
-			result.current.setColumnSizing({ body: 600 });
-		});
-
-		expect(mockSet).not.toHaveBeenCalled();
-
-		act(() => {
-			jest.advanceTimersByTime(250);
-		});
-
-		expect(mockSet).toHaveBeenCalledWith(
-			LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
-			expect.stringContaining('"body":600'),
-		);
-	});
-
-	it('does not persist when ordered columns signature effect runs with empty ids early — still debounces empty sizing', () => {
-		const { result } = renderHook(() => useColumnSizingPersistence([]));
-
-		expect(result.current.columnSizing).toEqual({});
-
-		act(() => {
-			jest.advanceTimersByTime(250);
-		});
-
-		expect(mockSet).toHaveBeenCalled();
-	});
-});
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/tests/useOrderedColumns.test.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/tests/useOrderedColumns.test.tsx
@@ -1,222 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import type { OrderedColumn } from '../types';
-import { useOrderedColumns } from '../useOrderedColumns';
-
-const mockGetDraggedColumns = jest.fn();
-
-jest.mock('hooks/useDragColumns/utils', () => ({
-	getDraggedColumns: <T,>(current: unknown[], dragged: unknown[]): T[] =>
-		mockGetDraggedColumns(current, dragged) as T[],
-}));
-
-const col = (key: string, title?: string): OrderedColumn =>
-	({ key, title: title ?? key } as OrderedColumn);
-
-describe('useOrderedColumns', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('returns columns from getDraggedColumns filtered to keys with string or number', () => {
-		mockGetDraggedColumns.mockReturnValue([
-			col('body'),
-			col('timestamp'),
-			{ title: 'no-key' },
-		]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.orderedColumns).toEqual([
-			col('body'),
-			col('timestamp'),
-		]);
-		expect(result.current.orderedColumnIds).toEqual(['body', 'timestamp']);
-	});
-
-	it('hasSingleColumn is true when exactly one column is not state-indicator', () => {
-		mockGetDraggedColumns.mockReturnValue([col('state-indicator'), col('body')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.hasSingleColumn).toBe(true);
-	});
-
-	it('hasSingleColumn is false when more than one non-state-indicator column exists', () => {
-		mockGetDraggedColumns.mockReturnValue([
-			col('state-indicator'),
-			col('body'),
-			col('timestamp'),
-		]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.hasSingleColumn).toBe(false);
-	});
-
-	it('handleDragEnd reorders columns and calls onColumnOrderChange', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b'), col('c')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: { id: 'c' },
-			} as never);
-		});
-
-		expect(onColumnOrderChange).toHaveBeenCalledWith([
-			expect.objectContaining({ key: 'b' }),
-			expect.objectContaining({ key: 'c' }),
-			expect.objectContaining({ key: 'a' }),
-		]);
-
-		// Derived-only: orderedColumns should remain until draggedColumns (URL/localStorage) updates.
-		expect(result.current.orderedColumns.map((c) => c.key)).toEqual([
-			'a',
-			'b',
-			'c',
-		]);
-	});
-
-	it('handleDragEnd no-ops when over is null', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		const before = result.current.orderedColumns;
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: null,
-			} as never);
-		});
-
-		expect(result.current.orderedColumns).toBe(before);
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('handleDragEnd no-ops when active.id equals over.id', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'a' },
-				over: { id: 'a' },
-			} as never);
-		});
-
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('handleDragEnd no-ops when indices cannot be resolved', () => {
-		const onColumnOrderChange = jest.fn();
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange,
-			}),
-		);
-
-		act(() => {
-			result.current.handleDragEnd({
-				active: { id: 'missing' },
-				over: { id: 'a' },
-			} as never);
-		});
-
-		expect(onColumnOrderChange).not.toHaveBeenCalled();
-	});
-
-	it('exposes sensors from useSensors', () => {
-		mockGetDraggedColumns.mockReturnValue([col('a')]);
-
-		const { result } = renderHook(() =>
-			useOrderedColumns({
-				columns: [],
-				draggedColumns: [],
-				onColumnOrderChange: jest.fn(),
-			}),
-		);
-
-		expect(result.current.sensors).toBeDefined();
-	});
-
-	it('syncs ordered columns when base order changes externally (e.g. URL / localStorage)', () => {
-		mockGetDraggedColumns.mockReturnValue([col('a'), col('b'), col('c')]);
-
-		const { result, rerender } = renderHook(
-			({ draggedColumns }: { draggedColumns: unknown[] }) =>
-				useOrderedColumns({
-					columns: [],
-					draggedColumns,
-					onColumnOrderChange: jest.fn(),
-				}),
-			{ initialProps: { draggedColumns: [] as unknown[] } },
-		);
-
-		expect(result.current.orderedColumns.map((column) => column.key)).toEqual([
-			'a',
-			'b',
-			'c',
-		]);
-
-		mockGetDraggedColumns.mockReturnValue([col('c'), col('b'), col('a')]);
-
-		act(() => {
-			rerender({ draggedColumns: [{ title: 'from-url' }] as unknown[] });
-		});
-
-		expect(result.current.orderedColumns.map((column) => column.key)).toEqual([
-			'c',
-			'b',
-			'a',
-		]);
-	});
-});
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx
@@ -1,433 +0,0 @@
-import {
-	forwardRef,
-	memo,
-	MouseEvent as ReactMouseEvent,
-	ReactElement,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
-import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
-import { DndContext, pointerWithin } from '@dnd-kit/core';
-import {
-	horizontalListSortingStrategy,
-	SortableContext,
-} from '@dnd-kit/sortable';
-import { toast } from '@signozhq/sonner';
-import {
-	ColumnDef,
-	getCoreRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { useTableView } from 'components/Logs/TableView/useTableView';
-import Spinner from 'components/Spinner';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import useDragColumns from 'hooks/useDragColumns';
-
-import { infinityDefaultStyles } from '../InfinityTableView/config';
-import { TanStackTableStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import TanStackCustomTableRow from './TanStackCustomTableRow';
-import TanStackHeaderRow from './TanStackHeaderRow';
-import TanStackRowCells from './TanStackRow';
-import { TableRecord, TanStackTableRowData } from './types';
-import { useColumnSizingPersistence } from './useColumnSizingPersistence';
-import { useOrderedColumns } from './useOrderedColumns';
-import {
-	getColumnId,
-	getColumnMinWidthPx,
-	resolveColumnTypeRender,
-} from './utils';
-
-import '../logsTableVirtuosoScrollbar.scss';
-import './styles/TanStackTableView.styles.scss';
-
-const COLUMN_DND_AUTO_SCROLL = {
-	layoutShiftCompensation: false as const,
-	threshold: { x: 0.2, y: 0 },
-};
-
-const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
-	function TanStackTableView(
-		{
-			isLoading,
-			isFetching,
-			onRemoveColumn,
-			tableViewProps,
-			infitiyTableProps,
-			onSetActiveLog,
-			onClearActiveLog,
-			activeLog,
-		}: InfinityTableProps,
-		forwardedRef,
-	): JSX.Element {
-		const { pathname } = useLocation();
-		const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
-		// could avoid this if directly use forwardedRef in TableVirtuoso, but need to verify if it causes any issue with react-virtuoso internal ref handling
-		useImperativeHandle(
-			forwardedRef,
-			() => virtuosoRef.current as TableVirtuosoHandle,
-			[],
-		);
-		const [, setCopy] = useCopyToClipboard();
-		const isDarkMode = useIsDarkMode();
-		const isLogsExplorerPage = pathname === ROUTES.LOGS_EXPLORER;
-		const { activeLog: activeContextLog } = useActiveLog();
-
-		// Column definitions (shared with existing logs table)
-		const { dataSource, columns } = useTableView({
-			...tableViewProps,
-			onClickExpand: onSetActiveLog,
-			onOpenLogsContext: (log): void => onSetActiveLog?.(log, VIEW_TYPES.CONTEXT),
-		});
-
-		// Column order (drag + persisted order)
-		const { draggedColumns, onColumnOrderChange } = useDragColumns<TableRecord>(
-			LOCALSTORAGE.LOGS_LIST_COLUMNS,
-		);
-		const {
-			orderedColumns,
-			orderedColumnIds,
-			hasSingleColumn,
-			handleDragEnd,
-			sensors,
-		} = useOrderedColumns({
-			columns,
-			draggedColumns,
-			onColumnOrderChange: onColumnOrderChange as (columns: unknown[]) => void,
-		});
-
-		// Column sizing (persisted). stored to localStorage.
-		const { columnSizing, setColumnSizing } = useColumnSizingPersistence(
-			orderedColumns,
-		);
-
-		// don't allow "remove column" when only state-indicator + one data col remain
-		const isAtMinimumRemovableColumns = useMemo(
-			() =>
-				orderedColumns.filter(
-					(column) => column.key !== 'state-indicator' && column.key !== 'expand',
-				).length <= 1,
-			[orderedColumns],
-		);
-
-		// Table data (TanStack row data shape)
-		// useTableView sends flattened log data. this would not be needed once we move to new log details view
-		const tableData = useMemo<TanStackTableRowData[]>(
-			() =>
-				dataSource
-					.map((log, rowIndex) => {
-						const currentLog = tableViewProps.logs[rowIndex];
-						if (!currentLog) {
-							return null;
-						}
-						return { log, currentLog, rowIndex };
-					})
-					.filter(Boolean) as TanStackTableRowData[],
-			[dataSource, tableViewProps.logs],
-		);
-
-		// TanStack columns + table instance
-		const tanstackColumns = useMemo<ColumnDef<TanStackTableRowData>[]>(
-			() =>
-				orderedColumns.map((column, index) => {
-					const isStateIndicator = column.key === 'state-indicator';
-					const isExpand = column.key === 'expand';
-					const isFixedColumn = isStateIndicator || isExpand;
-					const fixedWidth = isFixedColumn ? 32 : undefined;
-					const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-					const headerTitle = String(column.title || '');
-
-					return {
-						id: getColumnId(column),
-						header: headerTitle.replace(/^\w/, (character) =>
-							character.toUpperCase(),
-						),
-						accessorFn: (row): unknown => row.log[column.key as keyof TableRecord],
-						enableResizing: !isFixedColumn && index !== orderedColumns.length - 1,
-						minSize: fixedWidth ?? minWidthPx,
-						size: fixedWidth, // last column gets remaining space, so don't set initial size to avoid conflict with resizing
-						maxSize: fixedWidth,
-						cell: ({ row, getValue }): ReactElement | string | number | null => {
-							if (!column.render) {
-								return null;
-							}
-
-							return resolveColumnTypeRender(
-								column.render(
-									getValue(),
-									row.original.log,
-									row.original.rowIndex,
-								) as ColumnTypeRender<Record<string, unknown>>,
-							);
-						},
-					};
-				}),
-			[orderedColumns],
-		);
-		const table = useReactTable({
-			data: tableData,
-			columns: tanstackColumns,
-			enableColumnResizing: true,
-			getCoreRowModel: getCoreRowModel(),
-			columnResizeMode: 'onChange',
-			onColumnSizingChange: setColumnSizing,
-			state: {
-				columnSizing,
-			},
-		});
-		const tableRows = table.getRowModel().rows;
-
-		// Infinite-scroll footer UI state
-		const [loadMoreState, setLoadMoreState] = useState<{
-			active: boolean;
-			startCount: number;
-		}>({
-			active: false,
-			startCount: 0,
-		});
-
-		// Map to resolve full log object by id (row highlighting + indicator)
-		const logsById = useMemo(
-			() => new Map(tableViewProps.logs.map((log) => [String(log.id), log])),
-			[tableViewProps.logs],
-		);
-
-		// this is already written in parent. Check if this is needed.
-		useEffect(() => {
-			const activeLogIndex = tableViewProps.activeLogIndex ?? -1;
-			if (activeLogIndex < 0 || activeLogIndex >= tableRows.length) {
-				return;
-			}
-
-			virtuosoRef.current?.scrollToIndex({
-				index: activeLogIndex,
-				align: 'center',
-				behavior: 'auto',
-			});
-		}, [tableRows.length, tableViewProps.activeLogIndex]);
-
-		useEffect(() => {
-			if (!loadMoreState.active) {
-				return;
-			}
-
-			if (!isFetching || tableRows.length > loadMoreState.startCount) {
-				setLoadMoreState((prev) =>
-					prev.active ? { active: false, startCount: prev.startCount } : prev,
-				);
-			}
-		}, [isFetching, loadMoreState, tableRows.length]);
-
-		const handleLogCopy = useCallback(
-			(logId: string, event: ReactMouseEvent<HTMLElement>): void => {
-				event.preventDefault();
-				event.stopPropagation();
-
-				const urlQuery = new URLSearchParams(window.location.search);
-				urlQuery.delete(QueryParams.activeLogId);
-				urlQuery.delete(QueryParams.relativeTime);
-				urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
-				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
-
-				setCopy(link);
-				toast.success('Copied to clipboard', { position: 'top-right' });
-			},
-			[pathname, setCopy],
-		);
-
-		const itemContent = useCallback(
-			(index: number): JSX.Element | null => {
-				const row = tableRows[index];
-				if (!row) {
-					return null;
-				}
-
-				return (
-					<TanStackRowCells
-						row={row}
-						fontSize={tableViewProps.fontSize}
-						onSetActiveLog={onSetActiveLog}
-						onClearActiveLog={onClearActiveLog}
-						isActiveLog={
-							String(activeLog?.id ?? '') === String(row.original.currentLog.id ?? '')
-						}
-						isDarkMode={isDarkMode}
-						onLogCopy={handleLogCopy}
-						isLogsExplorerPage={isLogsExplorerPage}
-					/>
-				);
-			},
-			[
-				activeLog?.id,
-				handleLogCopy,
-				isDarkMode,
-				isLogsExplorerPage,
-				onClearActiveLog,
-				onSetActiveLog,
-				tableRows,
-				tableViewProps.fontSize,
-			],
-		);
-
-		const flatHeaders = useMemo(
-			() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-			[tanstackColumns],
-		);
-
-		const tableHeader = useCallback(() => {
-			const orderedColumnsById = new Map(
-				orderedColumns.map((column) => [getColumnId(column), column] as const),
-			);
-
-			return (
-				<DndContext
-					sensors={sensors}
-					collisionDetection={pointerWithin}
-					onDragEnd={handleDragEnd}
-					autoScroll={COLUMN_DND_AUTO_SCROLL}
-				>
-					<SortableContext
-						items={orderedColumnIds}
-						strategy={horizontalListSortingStrategy}
-					>
-						<tr>
-							{flatHeaders.map((header) => {
-								const column = orderedColumnsById.get(header.id);
-								if (!column) {
-									return null;
-								}
-
-								return (
-									<TanStackHeaderRow
-										key={header.id}
-										column={column}
-										header={header}
-										isDarkMode={isDarkMode}
-										fontSize={tableViewProps.fontSize}
-										hasSingleColumn={hasSingleColumn}
-										onRemoveColumn={onRemoveColumn}
-										canRemoveColumn={!isAtMinimumRemovableColumns}
-									/>
-								);
-							})}
-						</tr>
-					</SortableContext>
-				</DndContext>
-			);
-		}, [
-			flatHeaders,
-			handleDragEnd,
-			hasSingleColumn,
-			isDarkMode,
-			orderedColumnIds,
-			orderedColumns,
-			onRemoveColumn,
-			isAtMinimumRemovableColumns,
-			sensors,
-			tableViewProps.fontSize,
-		]);
-
-		const handleEndReached = useCallback(
-			(index: number): void => {
-				if (!infitiyTableProps?.onEndReached) {
-					return;
-				}
-
-				setLoadMoreState({
-					active: true,
-					startCount: tableRows.length,
-				});
-				infitiyTableProps.onEndReached(index);
-			},
-			[infitiyTableProps, tableRows.length],
-		);
-
-		if (isLoading) {
-			return <Spinner height="35px" tip="Getting Logs" />;
-		}
-
-		return (
-			<div className="tanstack-table-view-wrapper">
-				<TableVirtuoso
-					className="logs-table-virtuoso-scroll"
-					ref={virtuosoRef}
-					style={infinityDefaultStyles}
-					data={tableData}
-					totalCount={tableRows.length}
-					increaseViewportBy={{ top: 500, bottom: 500 }}
-					initialTopMostItemIndex={
-						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
-					}
-					context={{ activeLog, activeContextLog, logsById }}
-					fixedHeaderContent={tableHeader}
-					itemContent={itemContent}
-					components={{
-						Table: ({ style, children }): JSX.Element => (
-							<TanStackTableStyled style={style}>
-								<colgroup>
-									{orderedColumns.map((column, colIndex) => {
-										const columnId = getColumnId(column);
-										const isFixedColumn =
-											column.key === 'expand' || column.key === 'state-indicator';
-										const minWidthPx = getColumnMinWidthPx(column, orderedColumns);
-										const persistedWidth = columnSizing[columnId];
-										const computedWidth = table.getColumn(columnId)?.getSize();
-										const effectiveWidth = persistedWidth ?? computedWidth;
-										if (isFixedColumn) {
-											return <col key={columnId} className="tanstack-fixed-col" />;
-										}
-										// Last data column should stretch to fill remaining space
-										const isLastColumn = colIndex === orderedColumns.length - 1;
-										if (isLastColumn) {
-											return (
-												<col
-													key={columnId}
-													style={{ width: '100%', minWidth: `${minWidthPx}px` }}
-												/>
-											);
-										}
-										const widthPx =
-											effectiveWidth != null
-												? Math.max(effectiveWidth, minWidthPx)
-												: minWidthPx;
-										return (
-											<col
-												key={columnId}
-												style={{ width: `${widthPx}px`, minWidth: `${minWidthPx}px` }}
-											/>
-										);
-									})}
-								</colgroup>
-								{children}
-							</TanStackTableStyled>
-						),
-						TableRow: TanStackCustomTableRow,
-					}}
-					{...(infitiyTableProps?.onEndReached
-						? { endReached: handleEndReached }
-						: {})}
-				/>
-				{loadMoreState.active && (
-					<div className="tanstack-load-more-container">
-						<Spinner height="20px" tip="Getting Logs" />
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-
-export default memo(TanStackTableView);
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackTableView.styles.scss
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackTableView.styles.scss
@@ -1,55 +0,0 @@
-.tanstack-table-view-wrapper {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	min-height: 0;
-}
-
-.tanstack-fixed-col {
-	width: 32px;
-	min-width: 32px;
-	max-width: 32px;
-}
-
-.tanstack-filler-col {
-	width: 100%;
-	min-width: 0;
-}
-
-.tanstack-actions-col {
-	width: 0;
-	min-width: 0;
-	max-width: 0;
-}
-
-.tanstack-load-more-container {
-	width: 100%;
-	min-height: 56px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 8px 0 12px;
-	flex-shrink: 0;
-}
-
-.tanstack-table-virtuoso {
-	width: 100%;
-	overflow-x: scroll;
-}
-
-.tanstack-fontSize-small {
-	font-size: 11px;
-}
-
-.tanstack-fontSize-medium {
-	font-size: 13px;
-}
-
-.tanstack-fontSize-large {
-	font-size: 14px;
-}
-
-.tanstack-table-foot-loader-cell {
-	text-align: center;
-	padding: 8px 0;
-}
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/types.ts
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/types.ts
@@ -1,29 +0,0 @@
-import { ColumnSizingState } from '@tanstack/react-table';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-import { ILog } from 'types/api/logs/log';
-
-export type TableRecord = Record<string, unknown>;
-
-export type LogsTableColumnDef = {
-	key?: string | number;
-	title?: string;
-	render?: (
-		value: unknown,
-		record: TableRecord,
-		index: number,
-	) => ColumnTypeRender<Record<string, unknown>>;
-};
-
-export type OrderedColumn = LogsTableColumnDef & {
-	key: string | number;
-};
-
-export type TanStackTableRowData = {
-	log: TableRecord;
-	currentLog: ILog;
-	rowIndex: number;
-};
-
-export type PersistedColumnSizing = {
-	sizing: ColumnSizingState;
-};
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/useColumnSizingPersistence.ts
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/useColumnSizingPersistence.ts
@@ -1,111 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
-import { ColumnSizingState } from '@tanstack/react-table';
-import getFromLocalstorage from 'api/browser/localstorage/get';
-import setToLocalstorage from 'api/browser/localstorage/set';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import { OrderedColumn, PersistedColumnSizing } from './types';
-import { getColumnId } from './utils';
-
-const COLUMN_SIZING_PERSIST_DEBOUNCE_MS = 250;
-
-const sanitizeSizing = (input: unknown): ColumnSizingState => {
-	if (!input || typeof input !== 'object') {
-		return {};
-	}
-	return Object.entries(
-		input as Record<string, unknown>,
-	).reduce<ColumnSizingState>((acc, [key, value]) => {
-		if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
-			return acc;
-		}
-		acc[key] = value;
-		return acc;
-	}, {});
-};
-
-const readPersistedColumnSizing = (): ColumnSizingState => {
-	const rawSizing = getFromLocalstorage(LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING);
-	if (!rawSizing) {
-		return {};
-	}
-
-	try {
-		const parsed = JSON.parse(rawSizing) as
-			| PersistedColumnSizing
-			| ColumnSizingState;
-		const sizing = ('sizing' in parsed
-			? parsed.sizing
-			: parsed) as ColumnSizingState;
-		return sanitizeSizing(sizing);
-	} catch (error) {
-		console.error('Failed to parse persisted log column sizing', error);
-		return {};
-	}
-};
-
-type UseColumnSizingPersistenceResult = {
-	columnSizing: ColumnSizingState;
-	setColumnSizing: Dispatch<SetStateAction<ColumnSizingState>>;
-};
-
-export const useColumnSizingPersistence = (
-	orderedColumns: OrderedColumn[],
-): UseColumnSizingPersistenceResult => {
-	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(() =>
-		readPersistedColumnSizing(),
-	);
-	const orderedColumnIds = useMemo(
-		() => orderedColumns.map((column) => getColumnId(column)),
-		[orderedColumns],
-	);
-
-	useEffect(() => {
-		if (orderedColumnIds.length === 0) {
-			return;
-		}
-
-		const validColumnIds = new Set(orderedColumnIds);
-		const nonResizableColumnIds = new Set(
-			orderedColumns
-				.filter(
-					(column) => column.key === 'expand' || column.key === 'state-indicator',
-				)
-				.map((column) => getColumnId(column)),
-		);
-
-		setColumnSizing((previousSizing) => {
-			const nextSizing = Object.entries(previousSizing).reduce<ColumnSizingState>(
-				(acc, [columnId, size]) => {
-					if (!validColumnIds.has(columnId) || nonResizableColumnIds.has(columnId)) {
-						return acc;
-					}
-					acc[columnId] = size;
-					return acc;
-				},
-				{},
-			);
-			const hasChanged =
-				Object.keys(nextSizing).length !== Object.keys(previousSizing).length ||
-				Object.entries(nextSizing).some(
-					([columnId, size]) => previousSizing[columnId] !== size,
-				);
-
-			return hasChanged ? nextSizing : previousSizing;
-		});
-	}, [orderedColumnIds, orderedColumns]);
-
-	useEffect(() => {
-		const timeoutId = window.setTimeout(() => {
-			const persistedSizing = { sizing: columnSizing };
-			setToLocalstorage(
-				LOCALSTORAGE.LOGS_LIST_COLUMN_SIZING,
-				JSON.stringify(persistedSizing),
-			);
-		}, COLUMN_SIZING_PERSIST_DEBOUNCE_MS);
-
-		return (): void => window.clearTimeout(timeoutId);
-	}, [columnSizing]);
-
-	return { columnSizing, setColumnSizing };
-};
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/useOrderedColumns.ts
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/useOrderedColumns.ts
@@ -1,108 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-	DragEndEvent,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-import { getDraggedColumns } from 'hooks/useDragColumns/utils';
-
-import { OrderedColumn, TableRecord } from './types';
-import { getColumnId } from './utils';
-
-type UseOrderedColumnsProps = {
-	columns: unknown[];
-	draggedColumns: unknown[];
-	onColumnOrderChange: (columns: unknown[]) => void;
-};
-
-type UseOrderedColumnsResult = {
-	orderedColumns: OrderedColumn[];
-	orderedColumnIds: string[];
-	hasSingleColumn: boolean;
-	handleDragEnd: (event: DragEndEvent) => void;
-	sensors: ReturnType<typeof useSensors>;
-};
-
-export const useOrderedColumns = ({
-	columns,
-	draggedColumns,
-	onColumnOrderChange,
-}: UseOrderedColumnsProps): UseOrderedColumnsResult => {
-	const baseColumns = useMemo<OrderedColumn[]>(
-		() =>
-			getDraggedColumns<TableRecord>(
-				columns as never[],
-				draggedColumns as never[],
-			).filter(
-				(column): column is OrderedColumn =>
-					typeof column.key === 'string' || typeof column.key === 'number',
-			),
-		[columns, draggedColumns],
-	);
-
-	const orderedColumns = useMemo(() => {
-		const stateIndicatorIndex = baseColumns.findIndex(
-			(column) => column.key === 'state-indicator',
-		);
-		if (stateIndicatorIndex <= 0) {
-			return baseColumns;
-		}
-		const pinned = baseColumns[stateIndicatorIndex];
-		const rest = baseColumns.filter((_, i) => i !== stateIndicatorIndex);
-		return [pinned, ...rest];
-	}, [baseColumns]);
-
-	const handleDragEnd = useCallback(
-		(event: DragEndEvent): void => {
-			const { active, over } = event;
-			if (!over || active.id === over.id) {
-				return;
-			}
-
-			// Don't allow moving the state-indicator column
-			if (String(active.id) === 'state-indicator') {
-				return;
-			}
-
-			const oldIndex = orderedColumns.findIndex(
-				(column) => getColumnId(column) === String(active.id),
-			);
-			const newIndex = orderedColumns.findIndex(
-				(column) => getColumnId(column) === String(over.id),
-			);
-			if (oldIndex === -1 || newIndex === -1) {
-				return;
-			}
-
-			const nextColumns = arrayMove(orderedColumns, oldIndex, newIndex);
-			onColumnOrderChange(nextColumns as unknown[]);
-		},
-		[onColumnOrderChange, orderedColumns],
-	);
-
-	const orderedColumnIds = useMemo(
-		() => orderedColumns.map((column) => getColumnId(column)),
-		[orderedColumns],
-	);
-	const hasSingleColumn = useMemo(
-		() =>
-			orderedColumns.filter((column) => column.key !== 'state-indicator')
-				.length === 1,
-		[orderedColumns],
-	);
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 4 },
-		}),
-	);
-
-	return {
-		orderedColumns,
-		orderedColumnIds,
-		hasSingleColumn,
-		handleDragEnd,
-		sensors,
-	};
-};
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/utils.ts
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/utils.ts
@@ -1,61 +0,0 @@
-import { cloneElement, isValidElement, ReactElement } from 'react';
-import { ColumnTypeRender } from 'components/Logs/TableView/types';
-
-import { OrderedColumn } from './types';
-
-export const getColumnId = (column: OrderedColumn): string =>
-	String(column.key);
-
-/** Browser default root font size; TanStack column sizing uses px. */
-const REM_PX = 16;
-const MIN_WIDTH_OTHER_REM = 12;
-const MIN_WIDTH_BODY_REM = 40;
-
-/** When total column count is below this, body column min width is doubled (more horizontal space for few columns). */
-export const FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD = 4;
-
-/**
- * Minimum width (px) for TanStack column defs + colgroup.
- * Design: state/expand 32px; body min 40rem (doubled when fewer than
- * {@link FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD} total columns); other columns use rem→px (16px root).
- */
-export const getColumnMinWidthPx = (
-	column: OrderedColumn,
-	orderedColumns?: OrderedColumn[],
-): number => {
-	const key = String(column.key);
-	if (key === 'state-indicator' || key === 'expand') {
-		return 32;
-	}
-	if (key === 'body') {
-		const base = MIN_WIDTH_BODY_REM * REM_PX;
-		const fewColumns =
-			orderedColumns != null &&
-			orderedColumns.length < FEW_COLUMNS_BODY_MIN_WIDTH_THRESHOLD;
-		return fewColumns ? base * 1.5 : base;
-	}
-	return MIN_WIDTH_OTHER_REM * REM_PX;
-};
-
-export const resolveColumnTypeRender = (
-	rendered: ColumnTypeRender<Record<string, unknown>>,
-): ReactElement | string | number | null => {
-	if (
-		rendered &&
-		typeof rendered === 'object' &&
-		'children' in rendered &&
-		isValidElement(rendered.children)
-	) {
-		const { children, props } = rendered as {
-			children: ReactElement;
-			props?: Record<string, unknown>;
-		};
-		return cloneElement(children, props || {});
-	}
-	if (rendered && typeof rendered === 'object' && isValidElement(rendered)) {
-		return rendered;
-	}
-	return typeof rendered === 'string' || typeof rendered === 'number'
-		? rendered
-		: null;
-};
--- a/frontend/src/container/LogsExplorerList/index.tsx
+++ b/frontend/src/container/LogsExplorerList/index.tsx
@@ -1,16 +1,28 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { toast } from '@signozhq/sonner';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
-// components
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
+import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
+import { getRowBackgroundColor } from 'components/Logs/LogStateIndicator/getRowBackgroundColor';
+import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import RawLogView from 'components/Logs/RawLogView';
+import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColumns';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import Spinner from 'components/Spinner';
+import TanStackTable from 'components/TanStackTableView';
+import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+import { useTableColumns } from 'components/TanStackTableView/useTableColumns';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
@@ -19,6 +31,7 @@ import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import APIError from 'types/api/error';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -27,7 +40,6 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import NoLogs from '../NoLogs/NoLogs';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
-import TanStackTableView from './TanStackTableView';
 import {
 	convertKeysToColumnFields,
 	getEmptyLogsListConfig,
@@ -50,7 +62,10 @@ function LogsExplorerList({
 	isFilterApplied,
 	handleChangeSelectedView,
 }: LogsExplorerListProps): JSX.Element {
-	const ref = useRef<VirtuosoHandle>(null);
+	const ref = useRef<TanStackTableHandle | VirtuosoHandle | null>(null);
+	const { pathname } = useLocation();
+	const [, setCopy] = useCopyToClipboard();
+	const isDarkMode = useIsDarkMode();
 	const { activeLogId } = useCopyLogLink();

 	const {
@@ -84,9 +99,46 @@ function LogsExplorerList({
 		[options],
 	);

+	const logsColumns = useLogsTableColumns({
+		fields: selectedFields,
+		linesPerRow: options.maxLines,
+		fontSize: options.fontSize,
+		appendTo: 'end',
+	});
+
+	const { tableProps } = useTableColumns(logsColumns, {
+		storageKey: LOCALSTORAGE.LOGS_LIST_COLUMNS,
+	});
+
+	const handleRemoveColumn = useCallback(
+		(columnId: string): void => {
+			tableProps.onRemoveColumn(columnId);
+			config.addColumn?.onRemove?.(columnId);
+		},
+		[tableProps, config.addColumn],
+	);
+
+	const makeOnLogCopy = useCallback(
+		(log: ILog) => (event: MouseEvent<HTMLElement>): void => {
+			event.preventDefault();
+			event.stopPropagation();
+			const urlQuery = new URLSearchParams(window.location.search);
+			urlQuery.delete(QueryParams.activeLogId);
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.activeLogId, `"${log.id}"`);
+			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			setCopy(link);
+			toast.success('Copied to clipboard', { position: 'top-right' });
+		},
+		[pathname, setCopy],
+	);
+
 	const handleScrollToLog = useScrollToLog({
 		logs,
-		virtuosoRef: ref,
+		virtuosoRef: ref as React.RefObject<Pick<
+			VirtuosoHandle,
+			'scrollToIndex'
+		> | null>,
 	});

 	useEffect(() => {
@@ -155,25 +207,46 @@ function LogsExplorerList({

 		if (options.format === 'table') {
 			return (
-				<TanStackTableView
-					ref={ref}
-					isLoading={isLoading}
-					isFetching={isFetching}
-					tableViewProps={{
-						logs,
-						fields: selectedFields,
-						linesPerRow: options.maxLines,
-						fontSize: options.fontSize,
-						appendTo: 'end',
-						activeLogIndex,
+				<TanStackTable
+					ref={ref as React.Ref<TanStackTableHandle>}
+					{...tableProps}
+					plainTextCellLineClamp={options.maxLines}
+					cellTypographySize={options.fontSize}
+					onRemoveColumn={handleRemoveColumn}
+					data={logs}
+					isLoading={isLoading || isFetching}
+					loadingTip="Getting Logs"
+					onEndReached={onEndReached}
+					isRowActive={(log): boolean =>
+						log.id === activeLog?.id || log.id === activeLogId
+					}
+					getRowStyle={(log): CSSProperties =>
+						({
+							'--row-active-bg': getRowBackgroundColor(
+								isDarkMode,
+								getLogIndicatorType(log),
+							),
+							'--row-hover-bg': getRowBackgroundColor(
+								isDarkMode,
+								getLogIndicatorType(log),
+							),
+						} as CSSProperties)
+					}
+					onRowClick={(log): void => {
+						handleSetActiveLog(log);
 					}}
-					infitiyTableProps={{ onEndReached }}
-					handleChangeSelectedView={handleChangeSelectedView}
-					logs={logs}
-					onSetActiveLog={handleSetActiveLog}
-					onClearActiveLog={handleCloseLogDetail}
-					activeLog={activeLog}
-					onRemoveColumn={config.addColumn?.onRemove}
+					onRowDeactivate={handleCloseLogDetail}
+					activeRowIndex={activeLogIndex}
+					renderRowActions={(log): ReactNode => (
+						<LogLinesActionButtons
+							handleShowContext={(e): void => {
+								e.preventDefault();
+								e.stopPropagation();
+								handleSetActiveLog(log, VIEW_TYPES.CONTEXT);
+							}}
+							onLogCopy={makeOnLogCopy(log)}
+						/>
+					)}
 				/>
 			);
 		}
@@ -198,7 +271,7 @@ function LogsExplorerList({
 				<OverlayScrollbar isVirtuoso>
 					<Virtuoso
 						key={activeLogIndex || 'logs-virtuoso'}
-						ref={ref}
+						ref={ref as React.Ref<VirtuosoHandle>}
 						initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 						data={logs}
 						endReached={onEndReached}
@@ -219,12 +292,13 @@ function LogsExplorerList({
 		onEndReached,
 		getItemContent,
 		isFetching,
-		selectedFields,
-		handleChangeSelectedView,
 		handleSetActiveLog,
 		handleCloseLogDetail,
 		activeLog,
-		config.addColumn?.onRemove,
+		tableProps,
+		handleRemoveColumn,
+		isDarkMode,
+		makeOnLogCopy,
 	]);

 	const isTraceToLogsNavigation = useMemo(() => {
--- a/frontend/src/container/LogsExplorerList/logsTableVirtuosoScrollbar.scss
+++ b/frontend/src/container/LogsExplorerList/logsTableVirtuosoScrollbar.scss
@@ -1,38 +0,0 @@
-.logs-table-virtuoso-scroll {
-	scrollbar-width: thin;
-	scrollbar-color: var(--bg-slate-300) transparent;
-
-	&::-webkit-scrollbar {
-		width: 4px;
-		height: 4px;
-	}
-
-	&::-webkit-scrollbar-corner {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-300);
-		border-radius: 9999px;
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-slate-200);
-	}
-}
-
-.lightMode .logs-table-virtuoso-scroll {
-	scrollbar-color: var(--bg-vanilla-300) transparent;
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--bg-vanilla-300);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-vanilla-100);
-	}
-}
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -677,18 +677,6 @@ function NewWidget({
 			queryType: currentQuery.queryType,
 			isNewPanel,
 			dataSource: currentQuery?.builder?.queryData?.[0]?.dataSource,
-			...(currentQuery.queryType === EQueryType.CLICKHOUSE && {
-				clickhouseQueryCount: currentQuery.clickhouse_sql.length,
-				clickhouseQueries: currentQuery.clickhouse_sql.map((q) => ({
-					name: q.name,
-					query: (q.query ?? '')
-						.replace(/--[^\n]*/g, '') // strip line comments
-						.replace(/\/\*[\s\S]*?\*\//g, '') // strip block comments
-						.replace(/'(?:[^'\\]|\\.|'')*'/g, "'?'") // replace single-quoted strings (handles \' and '' escapes)
-						.replace(/\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/g, '?'), // replace numeric literals (int, float, scientific)
-					disabled: q.disabled,
-				})),
-			}),
 		});
 		setSaveModal(true);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
--- a/frontend/src/hooks/logs/useScrollToLog.ts
+++ b/frontend/src/hooks/logs/useScrollToLog.ts
@@ -1,9 +1,11 @@
 import { useCallback } from 'react';
 import type { VirtuosoHandle } from 'react-virtuoso';

+type ScrollToIndexHandle = Pick<VirtuosoHandle, 'scrollToIndex'>;
+
 type UseScrollToLogParams = {
 	logs: Array<{ id: string }>;
-	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
+	virtuosoRef: React.RefObject<ScrollToIndexHandle | null>;
 };

 function useScrollToLog({
--- a/frontend/src/lib/uPlotLib/utils/generateColor.ts
+++ b/frontend/src/lib/uPlotLib/utils/generateColor.ts
@@ -7,23 +7,6 @@ export function hashFn(str: string): number {
 	return hash >>> 0;
 }

-export function colorToRgb(color: string): string {
-	// Handle hex colors
-	const hexMatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-	if (hexMatch) {
-		return `${parseInt(hexMatch[1], 16)}, ${parseInt(
-			hexMatch[2],
-			16,
-		)}, ${parseInt(hexMatch[3], 16)}`;
-	}
-	// Handle rgb() colors
-	const rgbMatch = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(color);
-	if (rgbMatch) {
-		return `${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}`;
-	}
-	return '136, 136, 136';
-}
-
 export function generateColor(
 	key: string,
 	colorMap: Record<string, string>,
--- a/frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss
@@ -1,60 +0,0 @@
-.event-tooltip-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-	max-width: 300px;
-
-	&__header {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		background: rgba(255, 255, 255, 0.1);
-		border-radius: 3px;
-		padding: 2px 6px;
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.7);
-		margin-bottom: 6px;
-	}
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 2px;
-		color: rgb(14, 165, 233);
-
-		&.error {
-			color: rgb(239, 68, 68);
-		}
-	}
-
-	&__time {
-		font-size: 11px;
-		opacity: 0.8;
-		margin-bottom: 4px;
-	}
-
-	&__divider {
-		border-top: 1px solid rgba(255, 255, 255, 0.1);
-		margin: 6px 0;
-	}
-
-	&__attributes {
-		font-size: 11px;
-	}
-
-	&__kv {
-		margin-bottom: 2px;
-		line-height: 1.4;
-		word-break: break-all;
-	}
-
-	&__key {
-		opacity: 0.6;
-	}
-
-	&__value {
-		opacity: 0.9;
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.tsx
@@ -1,49 +0,0 @@
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { Diamond } from 'lucide-react';
-import { toFixed } from 'utils/toFixed';
-
-import './EventTooltipContent.styles.scss';
-
-export interface EventTooltipContentProps {
-	eventName: string;
-	timeOffsetMs: number;
-	isError: boolean;
-	attributeMap: Record<string, string>;
-}
-
-export function EventTooltipContent({
-	eventName,
-	timeOffsetMs,
-	isError,
-	attributeMap,
-}: EventTooltipContentProps): JSX.Element {
-	const { time, timeUnitName } = convertTimeToRelevantUnit(timeOffsetMs);
-
-	return (
-		<div className="event-tooltip-content">
-			<div className="event-tooltip-content__header">
-				<Diamond size={10} />
-				<span>EVENT DETAILS</span>
-			</div>
-			<div className={`event-tooltip-content__name ${isError ? 'error' : ''}`}>
-				{eventName}
-			</div>
-			<div className="event-tooltip-content__time">
-				{toFixed(time, 2)} {timeUnitName} from start
-			</div>
-			{Object.keys(attributeMap).length > 0 && (
-				<>
-					<div className="event-tooltip-content__divider" />
-					<div className="event-tooltip-content__attributes">
-						{Object.entries(attributeMap).map(([key, value]) => (
-							<div key={key} className="event-tooltip-content__kv">
-								<span className="event-tooltip-content__key">{key}:</span>{' '}
-								<span className="event-tooltip-content__value">{value}</span>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-		</div>
-	);
-}
--- a/frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.styles.scss
@@ -1,28 +0,0 @@
-.span-hover-card-popover {
-	.ant-popover-inner {
-		background-color: rgba(30, 30, 30, 0.95);
-		padding: 8px 12px;
-		border-radius: 4px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-		border: none;
-	}
-
-	.ant-popover-inner-content {
-		padding: 0;
-	}
-}
-
-.span-hover-card-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 4px;
-	}
-
-	&__row {
-		line-height: 1.5;
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx
@@ -1,94 +0,0 @@
-import { ReactNode } from 'react';
-import { Popover } from 'antd';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import './SpanHoverCard.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-export interface SpanTooltipContentProps {
-	spanName: string;
-	color: string;
-	hasError: boolean;
-	relativeStartMs: number;
-	durationMs: number;
-}
-
-export function SpanTooltipContent({
-	spanName,
-	color,
-	hasError,
-	relativeStartMs,
-	durationMs,
-}: SpanTooltipContentProps): JSX.Element {
-	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
-		durationMs,
-	);
-
-	return (
-		<div className="span-hover-card-content">
-			<div className="span-hover-card-content__name" style={{ color }}>
-				{spanName}
-			</div>
-			<div className="span-hover-card-content__row">
-				Status: {hasError ? 'error' : 'ok'}
-			</div>
-			<div className="span-hover-card-content__row">
-				Start: {toFixed(relativeStartMs, 2)} ms
-			</div>
-			<div className="span-hover-card-content__row">
-				Duration: {toFixed(formattedDuration, 2)} {timeUnitName}
-			</div>
-		</div>
-	);
-}
-
-interface SpanHoverCardProps {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const durationMs = span.durationNano / 1e6;
-	const relativeStartMs = span.timestamp - traceMetadata.startTime;
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-	if (span.hasError) {
-		color = 'var(--bg-cherry-500)';
-	}
-
-	return (
-		<Popover
-			mouseEnterDelay={0.2}
-			content={
-				<SpanTooltipContent
-					spanName={span.name}
-					color={color}
-					hasError={span.hasError}
-					relativeStartMs={relativeStartMs}
-					durationMs={durationMs}
-				/>
-			}
-			trigger="hover"
-			rootClassName="span-hover-card-popover"
-			autoAdjustOverflow
-			arrow={false}
-		>
-			{children}
-		</Popover>
-	);
-}
-
-export default SpanHoverCard;
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss
@@ -1,297 +0,0 @@
-// 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(--bg-ink-500);
-			}
-
-			&-header {
-				border-bottom: none;
-
-				.ant-modal-title {
-					color: var(--bg-vanilla-100);
-				}
-			}
-
-			&-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(--bg-ink-400);
-				border-top: 1px solid var(--bg-slate-500);
-				padding: 16px !important;
-				.add-span-to-funnel-modal {
-					&__save-button {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						gap: 4px;
-						color: var(--bg-vanilla-100);
-						font-size: 12px;
-						font-weight: 500;
-						line-height: 24px;
-						width: 135px;
-
-						.ant-btn-icon {
-							display: flex;
-						}
-						&:disabled {
-							color: var(--bg-vanilla-400);
-							.ant-btn-icon {
-								svg {
-									stroke: var(--bg-vanilla-400);
-								}
-							}
-						}
-					}
-					&__discard-button {
-						background: var(--bg-slate-500);
-					}
-				}
-				.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 {
-				max-height: 500px;
-			}
-		}
-	}
-
-	// Search section
-	&__search {
-		display: flex;
-		gap: 12px;
-		margin-bottom: 14px;
-		align-items: center;
-
-		&-input {
-			flex: 1;
-			padding: 6px 8px;
-			background: var(--bg-ink-300);
-
-			.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(--bg-ink-300);
-			}
-
-			input::placeholder {
-				color: var(--bg-vanilla-400);
-				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(--bg-slate-500);
-		border: none;
-		box-shadow: none;
-		color: var(--bg-vanilla-400);
-		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(--bg-vanilla-400);
-		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;
-		}
-	}
-}
-
-// Light mode styles
-.lightMode {
-	.add-span-to-funnel-modal-container {
-		.ant-modal {
-			&-content,
-			&-header {
-				background: var(--bg-vanilla-100);
-			}
-
-			&-title {
-				color: var(--bg-ink-500);
-			}
-
-			&-footer {
-				border-top-color: var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-				.add-span-to-funnel-modal__discard-button {
-					background: var(--bg-vanilla-200);
-					color: var(--bg-ink-500);
-				}
-			}
-		}
-	}
-
-	.add-span-to-funnel-modal {
-		&__search-input {
-			background: var(--bg-vanilla-100);
-			border: 1px solid var(--bg-vanilla-300);
-			color: var(--bg-ink-500);
-
-			input {
-				color: var(--bg-ink-500);
-				background: var(--bg-vanilla-100);
-
-				&::placeholder {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
-		&__create-button {
-			background: var(--bg-vanilla-300);
-			color: var(--bg-ink-400);
-		}
-
-		&__back-button {
-			color: var(--bg-ink-500);
-
-			&:hover {
-				color: var(--bg-ink-400);
-			}
-		}
-
-		&__details h3 {
-			color: var(--bg-ink-500);
-		}
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx
@@ -1,294 +0,0 @@
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
-import { LoadingOutlined } from '@ant-design/icons';
-import { Button, Input, 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 { ArrowLeft, Check, Plus, Search } from 'lucide-react';
-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={<LoadingOutlined spin />}
-					>
-						{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;
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss
@@ -1,39 +0,0 @@
-.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(--bg-slate-400);
-	background: var(--bg-ink-400);
-
-	.ant-btn-default {
-		border: none;
-		box-shadow: none;
-		padding: 9px;
-		justify-content: center;
-		align-items: center;
-		display: flex;
-
-		&.active-tab {
-			background-color: var(--bg-slate-400);
-		}
-	}
-
-	.copy-span-btn {
-		border-color: var(--bg-slate-400) !important;
-	}
-}
-
-.lightMode {
-	.span-line-action-buttons {
-		border: 1px solid var(--bg-vanilla-400);
-		background: var(--bg-vanilla-400);
-
-		.copy-span-btn {
-			border-color: var(--bg-vanilla-400) !important;
-		}
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/tests/SpanLineActionButtons.test.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/tests/SpanLineActionButtons.test.tsx
@@ -1,134 +0,0 @@
-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
-		const copyButton = screen.getByRole('button');
-		expect(copyButton).toBeInTheDocument();
-
-		// Check if the link icon is rendered
-		const linkIcon = screen.getByRole('img', { hidden: true });
-		expect(linkIcon).toHaveClass('anticon anticon-link');
-	});
-
-	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',
-		);
-	});
-});
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx
@@ -1,28 +0,0 @@
-import { LinkOutlined } from '@ant-design/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={<LinkOutlined size={14} />}
-					onClick={onSpanCopy}
-					className="copy-span-btn"
-				/>
-			</Tooltip>
-		</div>
-	);
-}
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss
@@ -1,11 +0,0 @@
-.trace-waterfall {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	.loading-skeleton {
-		justify-content: center;
-		align-items: center;
-		padding: 20px;
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx
@@ -1,136 +0,0 @@
-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>>;
-	selectedSpan: Span | undefined;
-	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-}
-
-function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
-	const {
-		traceData,
-		isFetchingTraceData,
-		errorFetchingTraceData,
-		interestedSpanId,
-		traceId,
-		uncollapsedNodes,
-		setInterestedSpanId,
-		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}
-						selectedSpan={selectedSpan}
-						setSelectedSpan={setSelectedSpan}
-						isFetching={
-							traceWaterfallState ===
-							TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT
-						}
-					/>
-				);
-			default:
-				return <Spinner tip="Fetching the trace!" />;
-		}
-	}, [
-		errorFetchingTraceData,
-		interestedSpanId,
-		selectedSpan,
-		setInterestedSpanId,
-		setSelectedSpan,
-		spans,
-		traceData?.payload?.endTimestampMillis,
-		traceData?.payload?.hasMissingSpans,
-		traceData?.payload?.startTimestampMillis,
-		traceId,
-		traceWaterfallState,
-		uncollapsedNodes,
-	]);
-
-	return <div className="trace-waterfall">{getContent}</div>;
-}
-
-export default TraceWaterfall;
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss
@@ -1,30 +0,0 @@
-.error-waterfall {
-	display: flex;
-	padding: 12px;
-	margin: 20px;
-	gap: 12px;
-	align-items: flex-start;
-	border-radius: 4px;
-	background: var(--bg-cherry-500);
-
-	.text {
-		color: var(--bg-vanilla-100);
-		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(--bg-vanilla-100);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx
@@ -1,25 +0,0 @@
-import { Tooltip, Typography } from 'antd';
-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" ellipsis>
-					{error?.message}
-				</Typography.Text>
-			</Tooltip>
-		</div>
-	);
-}
-
-export default Error;
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx
@@ -1,12 +0,0 @@
-import { Typography } from 'antd';
-
-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;
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss
@@ -1,60 +0,0 @@
-.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(--bg-vanilla-400);
-			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(--bg-vanilla-400);
-		font-family: 'Geist Mono';
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 150% */
-	}
-}
-
-.lightMode {
-	.filter-row {
-		.pre-next-toggle {
-			.ant-typography {
-				color: var(--bg-ink-400);
-			}
-		}
-
-		.no-results {
-			color: var(--bg-ink-400);
-		}
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx
@@ -1,207 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons';
-import { Button, Spin, Tooltip, Typography } from 'antd';
-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 { ChevronDown, ChevronUp } from 'lucide-react';
-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={<LoadingOutlined spin />} size="small" />}
-			{error && (
-				<Tooltip title={(error as AxiosError)?.message || 'Something went wrong'}>
-					<InfoCircleOutlined size={14} />
-				</Tooltip>
-			)}
-			{noData && (
-				<Typography.Text className="no-results">No results found</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-Filters.defaultProps = {
-	onFilteredSpansChange: undefined,
-};
-
-export default Filters;
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/constants.ts
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/constants.ts
@@ -1,38 +0,0 @@
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-
-export const BASE_FILTER_QUERY: IBuilderQuery = {
-	queryName: 'A',
-	dataSource: DataSource.TRACES,
-	aggregateOperator: 'noop',
-	aggregateAttribute: {
-		id: '------false',
-		dataType: DataTypes.EMPTY,
-		key: '',
-		type: '',
-	},
-	timeAggregation: 'rate',
-	spaceAggregation: 'sum',
-	functions: [],
-	filters: {
-		items: [],
-		op: 'AND',
-	},
-	expression: 'A',
-	disabled: false,
-	stepInterval: 60,
-	having: [],
-	limit: 200,
-	orderBy: [
-		{
-			columnName: 'timestamp',
-			order: 'desc',
-		},
-	],
-	groupBy: [],
-	legend: '',
-	reduceTo: ReduceOperators.AVG,
-	offset: 0,
-	selectColumns: [],
-};
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss
@@ -1,553 +0,0 @@
-.waterfall-loading-bar {
-	height: 2px;
-	background: var(--primary);
-	animation: waterfall-loading 1.5s ease-in-out infinite;
-	flex-shrink: 0;
-}
-
-@keyframes waterfall-loading {
-	0% {
-		opacity: 0.3;
-		transform: scaleX(0.3);
-		transform-origin: left;
-	}
-	50% {
-		opacity: 1;
-		transform: scaleX(1);
-		transform-origin: left;
-	}
-	100% {
-		opacity: 0.3;
-		transform: scaleX(0.3);
-		transform-origin: right;
-	}
-}
-
-.success-content {
-	overflow-y: hidden;
-	overflow-x: hidden;
-	max-width: 100%;
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-
-	.missing-spans {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 44px;
-		margin: 16px;
-		padding: 12px;
-		border-radius: 4px;
-		background: rgba(69, 104, 220, 0.1);
-
-		.left-info {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			color: var(--bg-robin-400);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-
-			.text {
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-
-		.right-info {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: row-reverse;
-			gap: 8px;
-			color: var(--bg-robin-400);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.right-info:hover {
-			background-color: unset;
-			color: var(--bg-robin-200);
-		}
-	}
-
-	.waterfall-split-panel {
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		overflow-x: hidden;
-		padding: 0px 20px 0px 20px;
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-		}
-	}
-
-	.waterfall-split-header {
-		position: sticky;
-		top: 0;
-		z-index: 2;
-		display: flex;
-		height: 25px;
-		background-color: var(--bg-ink-500);
-
-		.sidebar-header {
-			flex-shrink: 0;
-		}
-
-		.resize-handle-header {
-			width: 4px;
-			flex-shrink: 0;
-		}
-
-		.timeline-header {
-			flex: 1;
-			overflow: hidden;
-			padding: 0 15px;
-		}
-	}
-
-	.waterfall-split-body {
-		display: flex;
-		position: relative;
-	}
-
-	.waterfall-sidebar {
-		overflow-x: auto;
-		overflow-y: hidden;
-		flex-shrink: 0;
-		border-right: 1px solid var(--bg-slate-400);
-
-		.resizable-box__content {
-			overflow-x: auto;
-			overflow-y: hidden;
-
-			&::-webkit-scrollbar {
-				height: 0;
-			}
-
-			scrollbar-width: none;
-		}
-
-		&::-webkit-scrollbar {
-			height: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-400);
-			border-radius: 4px;
-		}
-	}
-
-	.span-tree-table {
-		position: relative;
-		border-collapse: collapse;
-
-		.span-tree-row {
-			display: flex;
-			align-items: center;
-		}
-
-		.span-tree-cell {
-			display: flex;
-			width: 100%;
-			height: 28px;
-			align-items: center;
-			overflow: visible;
-			padding: 0;
-		}
-
-		.span-tree-row:hover,
-		.span-tree-row.hovered-span {
-			border-radius: 4px;
-			background: rgba(171, 189, 255, 0.06) !important;
-
-			.span-overview {
-				background: unset !important;
-			}
-		}
-	}
-
-	.sidebar-resize-handle {
-		width: 4px;
-		flex-shrink: 0;
-		cursor: col-resize;
-		user-select: none;
-		touch-action: none;
-		background: transparent;
-		transition: background 0.15s ease;
-		z-index: 1;
-
-		&:hover,
-		&:active {
-			background: rgba(35, 196, 248, 0.2);
-		}
-	}
-
-	.waterfall-timeline {
-		flex: 1;
-		position: relative;
-		overflow: hidden;
-
-		.timeline-row {
-			display: flex;
-			align-items: center;
-		}
-
-		.timeline-row:hover,
-		.timeline-row.hovered-span {
-			border-radius: 4px;
-			background: rgba(171, 189, 255, 0.06) !important;
-		}
-	}
-
-	// Shared span component styles (used in both panels)
-	.span-overview {
-		display: flex;
-		align-items: center;
-		flex-shrink: 0;
-		height: 100%;
-		width: 100%;
-		cursor: pointer;
-		position: relative;
-		white-space: nowrap;
-
-		.tree-indent {
-			display: inline-block;
-			flex-shrink: 0;
-		}
-
-		.tree-line {
-			position: absolute;
-			background-color: var(--bg-slate-400);
-			pointer-events: none;
-		}
-
-		.tree-connector {
-			position: absolute;
-			width: 11px;
-			height: 50%;
-			border-left: 1px solid var(--bg-slate-400);
-			border-bottom: 1px solid var(--bg-slate-400);
-			border-bottom-left-radius: 6px;
-			pointer-events: none;
-		}
-
-		.tree-arrow {
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			width: 18px;
-			height: 18px;
-			flex-shrink: 0;
-			cursor: pointer;
-			color: var(--bg-vanilla-400);
-
-			&.no-children {
-				cursor: default;
-				width: 18px;
-				height: 18px;
-			}
-		}
-
-		.tree-icon {
-			display: inline-block;
-			width: 7px;
-			height: 7px;
-			border-radius: 50%;
-			flex-shrink: 0;
-			margin: 0 6px;
-
-			&.is-error {
-				box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.3);
-			}
-		}
-
-		.tree-label {
-			color: #fff;
-			font-family: 'Inter';
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 28px;
-			letter-spacing: 0.01em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			flex: 1;
-			min-width: 0;
-		}
-
-		.span-row-actions {
-			position: sticky;
-			right: 0;
-			display: flex;
-			align-items: center;
-			gap: 2px;
-			margin-left: auto;
-			padding-right: 4px;
-			padding-left: 8px;
-			flex-shrink: 0;
-			height: 100%;
-			background: linear-gradient(to left, var(--bg-ink-500) 60%, transparent);
-			z-index: 2;
-			opacity: 0;
-			pointer-events: none;
-
-			.span-action-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 22px;
-				height: 22px;
-				border-radius: 2px;
-				cursor: pointer;
-				color: var(--bg-vanilla-400);
-				background: transparent;
-				border: none;
-				padding: 0;
-
-				&:hover {
-					background: var(--bg-slate-400);
-				}
-			}
-		}
-
-		&:hover .span-row-actions {
-			opacity: 1;
-			pointer-events: auto;
-		}
-	}
-
-	// Also show action buttons when hovering the tree row (parent of span-overview)
-	.span-tree-row:hover .span-row-actions,
-	.span-tree-row.hovered-span .span-row-actions {
-		opacity: 1;
-		pointer-events: auto;
-	}
-
-	.span-duration {
-		display: flex;
-		align-items: center;
-		height: 28px;
-		position: relative;
-		width: 100%;
-		padding: 0 15px;
-		cursor: pointer;
-
-		.span-bar {
-			position: absolute;
-			height: 18px;
-			top: 5px;
-			border-radius: 2px;
-			display: flex;
-			align-items: center;
-			padding: 0 8px;
-			overflow: hidden;
-			cursor: pointer;
-			white-space: nowrap;
-			color: rgba(0, 0, 0, 0.9);
-			background-color: var(--span-color);
-			border: 1px solid transparent;
-
-			.span-info {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				width: 100%;
-				overflow: hidden;
-				z-index: 1;
-
-				.span-name {
-					font-weight: 500;
-					font-size: 11px;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					flex-grow: 1;
-					min-width: 0;
-				}
-
-				.span-duration-text {
-					color: inherit;
-					opacity: 0.8;
-					font-size: 10px;
-					margin-left: 8px;
-					flex-shrink: 0;
-				}
-			}
-		}
-
-		.event-dot {
-			position: absolute;
-			top: 50%;
-			transform: translate(-50%, -50%) rotate(45deg);
-			width: 5px;
-			height: 5px;
-			background-color: var(--event-dot-bg, var(--bg-robin-500));
-			border: 1px solid var(--event-dot-border, var(--bg-robin-600));
-			cursor: pointer;
-			z-index: 1;
-
-			&.error {
-				background-color: var(--bg-cherry-500);
-				border-color: var(--bg-cherry-600);
-			}
-
-			&:hover {
-				transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
-			}
-		}
-	}
-
-	// Hover state: static stripe pattern + border
-	.timeline-row:hover .span-bar,
-	.timeline-row.hovered-span .span-bar {
-		color: var(--span-color);
-		background-color: rgba(var(--span-color-rgb), 0.1);
-		border: 1px solid rgba(var(--span-color-rgb), 0.2);
-		background-image: repeating-linear-gradient(
-			-45deg,
-			transparent,
-			transparent 10px,
-			rgba(var(--span-color-rgb), 0.04) 10px,
-			rgba(var(--span-color-rgb), 0.04) 20px
-		);
-	}
-
-	// Selected state: stripe pattern + dashed border
-	.interested-span .span-bar,
-	.selected-non-matching-span .span-bar {
-		color: var(--span-color);
-		background-color: rgba(var(--span-color-rgb), 0.1);
-		border: 1px dashed var(--span-color);
-		background-image: repeating-linear-gradient(
-			-45deg,
-			transparent,
-			transparent 10px,
-			rgba(var(--span-color-rgb), 0.04) 10px,
-			rgba(var(--span-color-rgb), 0.04) 20px
-		);
-	}
-
-	// Shared state classes for both panels
-	.interested-span,
-	.selected-non-matching-span {
-		border-radius: 4px;
-		background: rgba(171, 189, 255, 0.06) !important;
-	}
-
-	.dimmed-span {
-		opacity: 0.4;
-	}
-	.highlighted-span {
-		opacity: 1;
-	}
-
-	.selected-non-matching-span {
-		.tree-label {
-			opacity: 0.5;
-		}
-	}
-}
-
-.span-dets {
-	.related-logs {
-		display: flex;
-		width: 160px;
-		padding: 4px 8px;
-		justify-content: center;
-		align-items: center;
-		gap: 8px;
-		border-radius: 2px;
-		border: 1px solid var(--Slate-400, #1d212d);
-		background: var(--Slate-500, #161922);
-		box-shadow: none;
-	}
-}
-
-.lightMode {
-	.success-content {
-		.span-overview {
-			.tree-arrow {
-				color: var(--bg-ink-400);
-			}
-
-			.tree-label {
-				color: var(--bg-ink-400);
-			}
-
-			.tree-line {
-				background-color: var(--bg-vanilla-400);
-			}
-
-			.tree-connector {
-				border-color: var(--bg-vanilla-400);
-			}
-
-			.span-row-actions {
-				background: linear-gradient(
-					to left,
-					var(--bg-vanilla-100) 60%,
-					transparent
-				);
-
-				.span-action-btn {
-					color: var(--bg-ink-400);
-
-					&:hover {
-						background: var(--bg-vanilla-300);
-					}
-				}
-			}
-		}
-
-		.interested-span {
-			border-radius: 4px;
-			background: var(--bg-vanilla-300);
-		}
-
-		.span-duration .span-bar {
-			color: rgba(255, 255, 255, 0.9);
-		}
-
-		// Light mode hover/selected: span color must override the white default above
-		.timeline-row:hover .span-bar,
-		.timeline-row.hovered-span .span-bar {
-			color: var(--span-color);
-		}
-
-		.interested-span .span-bar,
-		.selected-non-matching-span .span-bar {
-			color: var(--span-color);
-		}
-
-		.waterfall-sidebar {
-			border-right: 1px solid var(--bg-vanilla-300);
-		}
-
-		.waterfall-split-header {
-			background-color: var(--bg-vanilla-200) !important;
-		}
-	}
-	.span-dets {
-		.related-logs {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-300);
-		}
-	}
-}
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
@@ -1,693 +0,0 @@
-import {
-	Dispatch,
-	memo,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import {
-	createColumnHelper,
-	flexRender,
-	getCoreRowModel,
-	useReactTable,
-} from '@tanstack/react-table';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { Button, Popover, Tooltip, Typography } from 'antd';
-import cx from 'classnames';
-import TimelineV3 from 'components/TimelineV3/TimelineV3';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { colorToRgb, generateColor } from 'lib/uPlotLib/utils/generateColor';
-import {
-	AlertCircle,
-	ArrowUpRight,
-	ChevronDown,
-	ChevronRight,
-	Link,
-	ListPlus,
-} from 'lucide-react';
-import { ResizableBox } from 'periscope/components/ResizableBox';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import { EventTooltipContent } from '../../../SpanHoverCard/EventTooltipContent';
-import SpanHoverCard from '../../../SpanHoverCard/SpanHoverCard';
-import AddSpanToFunnelModal from '../../AddSpanToFunnelModal/AddSpanToFunnelModal';
-import { IInterestedSpan } from '../../TraceWaterfall';
-import Filters from './Filters/Filters';
-
-import './Success.styles.scss';
-
-// css config
-const CONNECTOR_WIDTH = 20;
-const VERTICAL_CONNECTOR_WIDTH = 1;
-
-interface ITraceMetadata {
-	traceId: string;
-	startTime: number;
-	endTime: number;
-	hasMissingSpans: boolean;
-}
-interface ISuccessProps {
-	spans: Span[];
-	traceMetadata: ITraceMetadata;
-	interestedSpanId: IInterestedSpan;
-	uncollapsedNodes: string[];
-	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
-	selectedSpan: Span | undefined;
-	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-	isFetching?: boolean;
-}
-
-const SpanOverview = memo(function SpanOverview({
-	span,
-	isSpanCollapsed,
-	handleCollapseUncollapse,
-	handleSpanClick,
-	selectedSpan,
-	filteredSpanIds,
-	isFilterActive,
-	traceMetadata,
-	onAddSpanToFunnel,
-}: {
-	span: Span;
-	isSpanCollapsed: boolean;
-	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-	traceMetadata: ITraceMetadata;
-	onAddSpanToFunnel: (span: Span) => void;
-}): JSX.Element {
-	const isRootSpan = span.level === 0;
-	const { onSpanCopy } = useCopySpanLink(span);
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-	if (span.hasError) {
-		color = `var(--bg-cherry-500)`;
-	}
-
-	// Smart highlighting logic
-	const isMatching =
-		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
-	const isSelected = selectedSpan?.spanId === span.spanId;
-	const isDimmed = isFilterActive && !isMatching && !isSelected;
-	const isHighlighted = isFilterActive && isMatching && !isSelected;
-	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
-
-	const indentWidth = isRootSpan ? 0 : span.level * CONNECTOR_WIDTH;
-
-	const handleFunnelClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
-		e.stopPropagation();
-		onAddSpanToFunnel(span);
-	};
-
-	return (
-		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
-			<div
-				className={cx('span-overview', {
-					'interested-span': isSelected && (!isFilterActive || isMatching),
-					'highlighted-span': isHighlighted,
-					'selected-non-matching-span': isSelectedNonMatching,
-					'dimmed-span': isDimmed,
-				})}
-				onClick={(): void => handleSpanClick(span)}
-			>
-				{/* Tree connector lines — always draw vertical lines at all ancestor levels + L-connector */}
-				{!isRootSpan &&
-					Array.from({ length: span.level }, (_, i) => {
-						const lvl = i + 1;
-						const xPos = (lvl - 1) * CONNECTOR_WIDTH + 9;
-						if (lvl < span.level) {
-							// Stop the line at 50% for the last child's parent level
-							const isLastChildParentLine = !span.hasSibling && lvl === span.level - 1;
-							return (
-								<div
-									key={lvl}
-									className="tree-line"
-									style={{
-										left: xPos,
-										top: 0,
-										width: 1,
-										height: isLastChildParentLine ? '50%' : '100%',
-									}}
-								/>
-							);
-						}
-						return (
-							<div key={lvl}>
-								<div
-									className="tree-line"
-									style={{ left: xPos, top: 0, width: 1, height: '50%' }}
-								/>
-								<div className="tree-connector" style={{ left: xPos, top: 0 }} />
-							</div>
-						);
-					})}
-
-				{/* Indent spacer */}
-				<span className="tree-indent" style={{ width: `${indentWidth}px` }} />
-
-				{/* Expand/collapse arrow or leaf bullet */}
-				{span.hasChildren ? (
-					<span
-						className={cx('tree-arrow', { expanded: !isSpanCollapsed })}
-						onClick={(event): void => {
-							event.stopPropagation();
-							event.preventDefault();
-							handleCollapseUncollapse(span.spanId, !isSpanCollapsed);
-						}}
-					>
-						{isSpanCollapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
-					</span>
-				) : (
-					<span className="tree-arrow no-children" />
-				)}
-
-				{/* Colored service dot */}
-				<span
-					className={cx('tree-icon', { 'is-error': span.hasError })}
-					style={{ backgroundColor: color }}
-				/>
-
-				{/* Span name */}
-				<span className="tree-label">{span.name}</span>
-
-				{/* Action buttons — shown on hover via CSS, right-aligned */}
-				<span className="span-row-actions">
-					<Tooltip title="Copy Span Link">
-						<button type="button" className="span-action-btn" onClick={onSpanCopy}>
-							<Link size={12} />
-						</button>
-					</Tooltip>
-					<Tooltip title="Add to Trace Funnel">
-						<button
-							type="button"
-							className="span-action-btn"
-							onClick={handleFunnelClick}
-						>
-							<ListPlus size={12} />
-						</button>
-					</Tooltip>
-				</span>
-			</div>
-		</SpanHoverCard>
-	);
-});
-
-export const SpanDuration = memo(function SpanDuration({
-	span,
-	traceMetadata,
-	handleSpanClick,
-	selectedSpan,
-	filteredSpanIds,
-	isFilterActive,
-}: {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-	handleSpanClick: (span: Span) => void;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}): JSX.Element {
-	const { time, timeUnitName } = convertTimeToRelevantUnit(
-		span.durationNano / 1e6,
-	);
-
-	const spread = traceMetadata.endTime - traceMetadata.startTime;
-	const leftOffset = ((span.timestamp - traceMetadata.startTime) * 1e2) / spread;
-	const width = (span.durationNano * 1e2) / (spread * 1e6);
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-	let rgbColor = colorToRgb(color);
-
-	if (span.hasError) {
-		color = `var(--bg-cherry-500)`;
-		rgbColor = '239, 68, 68';
-	}
-
-	const isMatching =
-		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
-	const isSelected = selectedSpan?.spanId === span.spanId;
-	const isDimmed = isFilterActive && !isMatching && !isSelected;
-	const isHighlighted = isFilterActive && isMatching && !isSelected;
-	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
-
-	return (
-		<div
-			className={cx('span-duration', {
-				'interested-span': isSelected && (!isFilterActive || isMatching),
-				'highlighted-span': isHighlighted,
-				'selected-non-matching-span': isSelectedNonMatching,
-				'dimmed-span': isDimmed,
-			})}
-			onClick={(): void => handleSpanClick(span)}
-		>
-			<SpanHoverCard span={span} traceMetadata={traceMetadata}>
-				<div
-					className="span-bar"
-					style={
-						{
-							left: `${leftOffset}%`,
-							width: `${width}%`,
-							'--span-color': color,
-							'--span-color-rgb': rgbColor,
-						} as React.CSSProperties
-					}
-				>
-					<span className="span-info">
-						<span className="span-name">{span.name}</span>
-						<span className="span-duration-text">{`${toFixed(
-							time,
-							2,
-						)} ${timeUnitName}`}</span>
-					</span>
-				</div>
-			</SpanHoverCard>
-			{span.event?.map((event) => {
-				const eventTimeMs = event.timeUnixNano / 1e6;
-				const spanDurationMs = span.durationNano / 1e6;
-				const eventOffsetPercent =
-					((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
-				const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
-				const { isError } = event;
-				// Position relative to the span bar: leftOffset% + clampedOffset% of width%
-				const dotLeft = leftOffset + (clampedOffset / 100) * width;
-				const parts = rgbColor.split(', ');
-				const dotBg = `rgb(${parts
-					.map((c) => Math.round(Number(c) * 0.7))
-					.join(', ')})`;
-				const dotBorder = `rgb(${parts
-					.map((c) => Math.round(Number(c) * 0.5))
-					.join(', ')})`;
-				return (
-					<Popover
-						key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
-						content={
-							<EventTooltipContent
-								eventName={event.name}
-								timeOffsetMs={eventTimeMs - span.timestamp}
-								isError={isError}
-								attributeMap={event.attributeMap || {}}
-							/>
-						}
-						trigger="hover"
-						rootClassName="span-hover-card-popover"
-						autoAdjustOverflow
-						arrow={false}
-					>
-						<div
-							className={`event-dot ${isError ? 'error' : ''}`}
-							style={
-								{
-									left: `${dotLeft}%`,
-									'--event-dot-bg': isError ? undefined : dotBg,
-									'--event-dot-border': isError ? undefined : dotBorder,
-								} as React.CSSProperties
-							}
-						/>
-					</Popover>
-				);
-			})}
-		</div>
-	);
-});
-
-// table config
-const columnDefHelper = createColumnHelper<Span>();
-
-const ROW_HEIGHT = 28;
-const DEFAULT_SIDEBAR_WIDTH = 450;
-const MIN_SIDEBAR_WIDTH = 240;
-const MAX_SIDEBAR_WIDTH = 900;
-const BASE_CONTENT_WIDTH = 300;
-
-function Success(props: ISuccessProps): JSX.Element {
-	const {
-		spans,
-		traceMetadata,
-		interestedSpanId,
-		uncollapsedNodes,
-		setInterestedSpanId,
-		setSelectedSpan,
-		selectedSpan,
-		isFetching,
-	} = props;
-
-	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
-	const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
-	const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
-	const scrollContainerRef = useRef<HTMLDivElement>(null);
-	const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element>>();
-	const prevHoveredSpanIdRef = useRef<string | null>(null);
-
-	// Imperative DOM class toggling for hover highlights (avoids React re-renders)
-	const applyHoverClass = useCallback((spanId: string | null): void => {
-		const prev = prevHoveredSpanIdRef.current;
-		if (prev === spanId) {
-			return;
-		}
-
-		if (prev) {
-			const prevElements = document.querySelectorAll(`[data-span-id="${prev}"]`);
-			prevElements.forEach((el) => el.classList.remove('hovered-span'));
-		}
-		if (spanId) {
-			const nextElements = document.querySelectorAll(`[data-span-id="${spanId}"]`);
-			nextElements.forEach((el) => el.classList.add('hovered-span'));
-		}
-		prevHoveredSpanIdRef.current = spanId;
-	}, []);
-
-	const handleRowMouseEnter = useCallback(
-		(spanId: string): void => {
-			applyHoverClass(spanId);
-		},
-		[applyHoverClass],
-	);
-
-	const handleRowMouseLeave = useCallback((): void => {
-		applyHoverClass(null);
-	}, [applyHoverClass]);
-
-	const handleFilteredSpansChange = useCallback(
-		(spanIds: string[], isActive: boolean) => {
-			setFilteredSpanIds(spanIds);
-			setIsFilterActive(isActive);
-		},
-		[],
-	);
-
-	const handleCollapseUncollapse = useCallback(
-		(spanId: string, collapse: boolean) => {
-			setInterestedSpanId({ spanId, isUncollapsed: !collapse });
-		},
-		[setInterestedSpanId],
-	);
-
-	const handleVirtualizerInstanceChanged = useCallback(
-		(instance: Virtualizer<HTMLDivElement, Element>): void => {
-			const { range } = instance;
-			// when there are less than 500 elements in the API call that means there is nothing to fetch on top and bottom so
-			// do not trigger the API call
-			if (spans.length < 500) {
-				return;
-			}
-
-			if (range?.startIndex === 0 && instance.isScrolling) {
-				// do not trigger for trace root as nothing to fetch above
-				if (spans[0].level !== 0) {
-					setInterestedSpanId({
-						spanId: spans[0].spanId,
-						isUncollapsed: false,
-					});
-				}
-				return;
-			}
-
-			if (range?.endIndex === spans.length - 1 && instance.isScrolling) {
-				setInterestedSpanId({
-					spanId: spans[spans.length - 1].spanId,
-					isUncollapsed: false,
-				});
-			}
-		},
-		[spans, setInterestedSpanId],
-	);
-
-	const [isAddSpanToFunnelModalOpen, setIsAddSpanToFunnelModalOpen] = useState(
-		false,
-	);
-	const [selectedSpanToAddToFunnel, setSelectedSpanToAddToFunnel] = useState<
-		Span | undefined
-	>(undefined);
-	const handleAddSpanToFunnel = useCallback((span: Span): void => {
-		setIsAddSpanToFunnelModalOpen(true);
-		setSelectedSpanToAddToFunnel(span);
-	}, []);
-
-	const urlQuery = useUrlQuery();
-	const { safeNavigate } = useSafeNavigate();
-
-	const handleSpanClick = useCallback(
-		(span: Span): void => {
-			setSelectedSpan(span);
-			if (span?.spanId) {
-				urlQuery.set('spanId', span?.spanId);
-			}
-
-			safeNavigate({ search: urlQuery.toString() });
-		},
-		[setSelectedSpan, urlQuery, safeNavigate],
-	);
-
-	// Left side columns using TanStack React Table (extensible for future columns)
-	const leftColumns = useMemo(
-		() => [
-			columnDefHelper.display({
-				id: 'span-name',
-				header: '',
-				cell: (cellProps): JSX.Element => (
-					<SpanOverview
-						span={cellProps.row.original}
-						handleCollapseUncollapse={handleCollapseUncollapse}
-						isSpanCollapsed={
-							!uncollapsedNodes.includes(cellProps.row.original.spanId)
-						}
-						selectedSpan={selectedSpan}
-						handleSpanClick={handleSpanClick}
-						traceMetadata={traceMetadata}
-						filteredSpanIds={filteredSpanIds}
-						isFilterActive={isFilterActive}
-						onAddSpanToFunnel={handleAddSpanToFunnel}
-					/>
-				),
-			}),
-		],
-		[
-			handleCollapseUncollapse,
-			uncollapsedNodes,
-			traceMetadata,
-			selectedSpan,
-			handleSpanClick,
-			filteredSpanIds,
-			isFilterActive,
-			handleAddSpanToFunnel,
-		],
-	);
-
-	const leftTable = useReactTable({
-		data: spans,
-		columns: leftColumns,
-		getCoreRowModel: getCoreRowModel(),
-	});
-
-	// Shared virtualizer - one instance drives both panels
-	const virtualizer = useVirtualizer({
-		count: spans.length,
-		getScrollElement: (): HTMLDivElement | null => scrollContainerRef.current,
-		estimateSize: (): number => ROW_HEIGHT,
-		overscan: 20,
-		onChange: handleVirtualizerInstanceChanged,
-	});
-
-	useEffect(() => {
-		virtualizerRef.current = virtualizer;
-	}, [virtualizer]);
-
-	// Compute max content width for sidebar horizontal scroll
-	const maxContentWidth = useMemo(() => {
-		if (spans.length === 0) {
-			return sidebarWidth;
-		}
-		const maxLevel = spans.reduce((max, span) => Math.max(max, span.level), 0);
-		return Math.max(
-			sidebarWidth,
-			maxLevel * (CONNECTOR_WIDTH + VERTICAL_CONNECTOR_WIDTH) + BASE_CONTENT_WIDTH,
-		);
-	}, [spans, sidebarWidth]);
-
-	// Scroll to interested span
-	useEffect(() => {
-		if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
-			const idx = spans.findIndex(
-				(span) => span.spanId === interestedSpanId.spanId,
-			);
-			if (idx !== -1) {
-				setTimeout(() => {
-					virtualizerRef.current?.scrollToIndex(idx, {
-						align: 'center',
-						behavior: 'auto',
-					});
-				}, 400);
-
-				setSelectedSpan(spans[idx]);
-			}
-		} else {
-			setSelectedSpan((prev) => {
-				if (!prev) {
-					return spans[0];
-				}
-				return prev;
-			});
-		}
-	}, [interestedSpanId, setSelectedSpan, spans]);
-
-	const virtualItems = virtualizer.getVirtualItems();
-	const leftRows = leftTable.getRowModel().rows;
-
-	return (
-		<div className="success-content">
-			{traceMetadata.hasMissingSpans && (
-				<div className="missing-spans">
-					<section className="left-info">
-						<AlertCircle size={14} />
-						<Typography.Text className="text">
-							This trace has missing spans
-						</Typography.Text>
-					</section>
-					<Button
-						icon={<ArrowUpRight size={14} />}
-						className="right-info"
-						type="text"
-						onClick={(): WindowProxy | null =>
-							window.open(
-								'https://signoz.io/docs/userguide/traces/#missing-spans',
-								'_blank',
-							)
-						}
-					>
-						Learn More
-					</Button>
-				</div>
-			)}
-			<Filters
-				startTime={traceMetadata.startTime / 1e3}
-				endTime={traceMetadata.endTime / 1e3}
-				traceID={traceMetadata.traceId}
-				onFilteredSpansChange={handleFilteredSpansChange}
-			/>
-			{isFetching && <div className="waterfall-loading-bar" />}
-			<div className="waterfall-split-panel" ref={scrollContainerRef}>
-				{/* Sticky header row */}
-				<div className="waterfall-split-header">
-					<div
-						className="sidebar-header"
-						style={{ width: sidebarWidth, flexShrink: 0 }}
-					/>
-					<div className="resize-handle-header" />
-					<div className="timeline-header">
-						<TimelineV3
-							startTimestamp={traceMetadata.startTime}
-							endTimestamp={traceMetadata.endTime}
-							timelineHeight={10}
-							offsetTimestamp={0}
-						/>
-					</div>
-				</div>
-
-				{/* Split body */}
-				<div
-					className="waterfall-split-body"
-					style={{
-						minHeight: virtualizer.getTotalSize(),
-						height: '100%',
-					}}
-				>
-					{/* Left panel - table with horizontal scroll */}
-					<ResizableBox
-						direction="horizontal"
-						defaultWidth={DEFAULT_SIDEBAR_WIDTH}
-						minWidth={MIN_SIDEBAR_WIDTH}
-						maxWidth={MAX_SIDEBAR_WIDTH}
-						onResize={setSidebarWidth}
-						className="waterfall-sidebar"
-					>
-						<table className="span-tree-table" style={{ width: maxContentWidth }}>
-							<tbody>
-								{virtualItems.map((virtualRow) => {
-									const row = leftRows[virtualRow.index];
-									const span = spans[virtualRow.index];
-									return (
-										<tr
-											key={String(virtualRow.key)}
-											data-testid={`cell-0-${span.spanId}`}
-											data-span-id={span.spanId}
-											className="span-tree-row"
-											style={{
-												position: 'absolute',
-												top: 0,
-												left: 0,
-												width: '100%',
-												height: ROW_HEIGHT,
-												transform: `translateY(${virtualRow.start}px)`,
-											}}
-											onMouseEnter={(): void => handleRowMouseEnter(span.spanId)}
-											onMouseLeave={handleRowMouseLeave}
-										>
-											{row.getVisibleCells().map((cell) => (
-												<td key={cell.id} className="span-tree-cell">
-													{flexRender(cell.column.columnDef.cell, cell.getContext())}
-												</td>
-											))}
-										</tr>
-									);
-								})}
-							</tbody>
-						</table>
-					</ResizableBox>
-
-					{/* Right panel - timeline bars */}
-					<div className="waterfall-timeline">
-						{virtualItems.map((virtualRow) => {
-							const span = spans[virtualRow.index];
-							return (
-								<div
-									key={String(virtualRow.key)}
-									data-testid={`cell-1-${span.spanId}`}
-									data-span-id={span.spanId}
-									className="timeline-row"
-									style={{
-										position: 'absolute',
-										top: 0,
-										left: 0,
-										width: '100%',
-										height: ROW_HEIGHT,
-										transform: `translateY(${virtualRow.start}px)`,
-									}}
-									onMouseEnter={(): void => handleRowMouseEnter(span.spanId)}
-									onMouseLeave={handleRowMouseLeave}
-								>
-									<SpanDuration
-										span={span}
-										traceMetadata={traceMetadata}
-										selectedSpan={selectedSpan}
-										handleSpanClick={handleSpanClick}
-										filteredSpanIds={filteredSpanIds}
-										isFilterActive={isFilterActive}
-									/>
-								</div>
-							);
-						})}
-					</div>
-				</div>
-			</div>
-			{selectedSpanToAddToFunnel && (
-				<AddSpanToFunnelModal
-					span={selectedSpanToAddToFunnel}
-					isOpen={isAddSpanToFunnelModalOpen}
-					onClose={(): void => setIsAddSpanToFunnelModalOpen(false)}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default Success;
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/tests/SpanDuration.test.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/tests/SpanDuration.test.tsx
@@ -1,268 +0,0 @@
-import useUrlQuery from 'hooks/useUrlQuery';
-import { fireEvent, render, screen } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import { SpanDuration } from '../Success';
-
-// Constants to avoid string duplication
-const SPAN_DURATION_TEXT = '1.16 ms';
-const SPAN_DURATION_CLASS = '.span-duration';
-const INTERESTED_SPAN_CLASS = 'interested-span';
-const HIGHLIGHTED_SPAN_CLASS = 'highlighted-span';
-const DIMMED_SPAN_CLASS = 'dimmed-span';
-const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
-
-jest.mock('components/TimelineV3/TimelineV3', () => ({
-	__esModule: true,
-	default: (): null => null,
-}));
-
-// Mock the hooks
-jest.mock('hooks/useUrlQuery');
-jest.mock('@signozhq/badge', () => ({
-	Badge: jest.fn(),
-}));
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	name: 'test-span',
-	serviceName: 'test-service',
-	durationNano: 1160000, // 1ms in nano
-	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,
-};
-
-const mockTraceMetadata = {
-	traceId: 'test-trace-id',
-	startTime: 1234567000,
-	endTime: 1234569000,
-	hasMissingSpans: false,
-};
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-describe('SpanDuration', () => {
-	const mockSetSelectedSpan = jest.fn();
-	const mockUrlQuerySet = jest.fn();
-	const mockUrlQueryGet = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Mock URL query hook
-		(useUrlQuery as jest.Mock).mockReturnValue({
-			set: mockUrlQuerySet,
-			get: mockUrlQueryGet,
-			toString: () => 'spanId=test-span-id',
-		});
-	});
-
-	it('calls handleSpanClick when clicked', () => {
-		const mockHandleSpanClick = jest.fn();
-
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockHandleSpanClick}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		// Find and click the span duration element
-		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
-		fireEvent.click(spanElement);
-
-		// Verify handleSpanClick was called with the correct span
-		expect(mockHandleSpanClick).toHaveBeenCalledWith(mockSpan);
-	});
-
-	it('shows action buttons on hover', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
-
-		// Initially, action buttons should not be visible
-		expect(screen.queryByRole('button')).not.toBeInTheDocument();
-
-		// Hover over the span
-		fireEvent.mouseEnter(spanElement);
-
-		// Action buttons should now be visible
-		expect(screen.getByRole('button')).toBeInTheDocument();
-
-		// Mouse leave should hide the buttons
-		fireEvent.mouseLeave(spanElement);
-		expect(screen.queryByRole('button')).not.toBeInTheDocument();
-	});
-
-	it('applies interested-span class when span is selected', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-
-	it('applies highlighted-span class when span matches filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[mockSpan.spanId]}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-
-	it('applies dimmed-span class when span does not match filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={['other-span-id']}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-	});
-
-	it('prioritizes interested-span over highlighted-span when span is selected and matches filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[mockSpan.spanId]}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('applies selected-non-matching-span class when span is selected but does not match filter', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={['different-span-id']}
-				isFilterActive
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('applies interested-span class when span is selected and no filter is active', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={mockSpan}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive={false}
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
-	});
-
-	it('dims span when filter is active but no matches found', () => {
-		render(
-			<SpanDuration
-				span={mockSpan}
-				traceMetadata={mockTraceMetadata}
-				selectedSpan={undefined}
-				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]} // Empty array but filter is active
-				isFilterActive // This is the key difference
-			/>,
-		);
-
-		const spanElement = screen
-			.getByText(SPAN_DURATION_TEXT)
-			.closest(SPAN_DURATION_CLASS);
-		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
-		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-	});
-});
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/tests/UnifiedSpanClick.test.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/tests/UnifiedSpanClick.test.tsx
@@ -1,419 +0,0 @@
-import React from 'react';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import Success from '../Success';
-
-// Mock the required hooks with proper typing
-const mockSafeNavigate = jest.fn() as jest.MockedFunction<
-	(params: { search: string }) => void
->;
-const mockUrlQuery = new URLSearchParams();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('hooks/useUrlQuery', () => (): URLSearchParams => mockUrlQuery);
-
-// App provider is already handled by test-utils
-
-// React Router is already globally mocked
-
-// Mock complex external dependencies that cause provider issues
-jest.mock('components/SpanHoverCard/SpanHoverCard', () => {
-	function SpanHoverCard({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element {
-		return <div>{children}</div>;
-	}
-	SpanHoverCard.displayName = 'SpanHoverCard';
-	return SpanHoverCard;
-});
-
-// Mock the Filters component that's causing React Query issues
-jest.mock('../Filters/Filters', () => {
-	function Filters(): null {
-		return null;
-	}
-	Filters.displayName = 'Filters';
-	return Filters;
-});
-
-// Mock other potential dependencies
-jest.mock(
-	'pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal',
-	() => {
-		function AddSpanToFunnelModal(): null {
-			return null;
-		}
-		AddSpanToFunnelModal.displayName = 'AddSpanToFunnelModal';
-		return AddSpanToFunnelModal;
-	},
-);
-
-jest.mock('pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons', () => {
-	function SpanLineActionButtons(): null {
-		return null;
-	}
-	SpanLineActionButtons.displayName = 'SpanLineActionButtons';
-	return SpanLineActionButtons;
-});
-
-jest.mock('components/HttpStatusBadge/HttpStatusBadge', () => {
-	function HttpStatusBadge(): null {
-		return null;
-	}
-	HttpStatusBadge.displayName = 'HttpStatusBadge';
-	return HttpStatusBadge;
-});
-
-jest.mock('components/TimelineV3/TimelineV3', () => {
-	function TimelineV3(): null {
-		return null;
-	}
-	TimelineV3.displayName = 'TimelineV3';
-	return { __esModule: true, default: TimelineV3 };
-});
-
-// Mock other utilities that might cause issues
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: (): string => '#1890ff',
-}));
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (
-		value: number,
-	): { time: number; timeUnitName: string } => ({
-		time: value < 1000 ? value : value / 1000,
-		timeUnitName: value < 1000 ? 'ms' : 's',
-	}),
-}));
-
-jest.mock('utils/toFixed', () => ({
-	toFixed: (value: number, decimals: number): string => value.toFixed(decimals),
-}));
-
-// Mock useVirtualizer to render all items without actual virtualization
-jest.mock('@tanstack/react-virtual', () => ({
-	useVirtualizer: ({
-		count,
-	}: {
-		count: number;
-	}): {
-		getVirtualItems: () => Array<{
-			index: number;
-			key: number;
-			start: number;
-			size: number;
-		}>;
-		getTotalSize: () => number;
-		scrollToIndex: jest.Mock;
-	} => ({
-		getVirtualItems: (): Array<{
-			index: number;
-			key: number;
-			start: number;
-			size: number;
-		}> =>
-			Array.from({ length: count }, (_, i) => ({
-				index: i,
-				key: i,
-				start: i * 54,
-				size: 54,
-			})),
-		getTotalSize: (): number => count * 54,
-		scrollToIndex: jest.fn(),
-	}),
-	Virtualizer: jest.fn(),
-}));
-
-const mockTraceMetadata = {
-	traceId: 'test-trace-id',
-	startTime: 1679748225000000,
-	endTime: 1679748226000000,
-	hasMissingSpans: false,
-};
-
-const createMockSpan = (spanId: string, level = 1): Span => ({
-	spanId,
-	traceId: 'test-trace-id',
-	rootSpanId: 'span-1',
-	parentSpanId: level === 0 ? '' : 'span-1',
-	name: `Test Span ${spanId}`,
-	serviceName: 'test-service',
-	timestamp: mockTraceMetadata.startTime + level * 100000,
-	durationNano: 50000000,
-	level,
-	hasError: false,
-	kind: 1,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'Test Root Span',
-	statusMessage: '',
-	statusCodeString: 'OK',
-	spanKind: 'server',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 1,
-});
-
-const mockSpans = [
-	createMockSpan('span-1', 0),
-	createMockSpan('span-2', 1),
-	createMockSpan('span-3', 1),
-];
-
-// Shared TestComponent for all tests
-function TestComponent(): JSX.Element {
-	const [selectedSpan, setSelectedSpan] = React.useState<Span | undefined>(
-		undefined,
-	);
-
-	return (
-		<Success
-			spans={mockSpans}
-			traceMetadata={mockTraceMetadata}
-			interestedSpanId={{ spanId: '', isUncollapsed: false }}
-			uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-			setInterestedSpanId={jest.fn()}
-			selectedSpan={selectedSpan}
-			setSelectedSpan={setSelectedSpan}
-		/>
-	);
-}
-
-describe('Span Click User Flows', () => {
-	const FIRST_SPAN_TEST_ID = 'cell-0-span-1';
-	const FIRST_SPAN_DURATION_TEST_ID = 'cell-1-span-1';
-	const SECOND_SPAN_TEST_ID = 'cell-0-span-2';
-	const SPAN_OVERVIEW_CLASS = '.span-overview';
-	const SPAN_DURATION_CLASS = '.span-duration';
-	const INTERESTED_SPAN_CLASS = 'interested-span';
-	const SECOND_SPAN_DURATION_TEST_ID = 'cell-1-span-2';
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		// Clear all URL parameters
-		Array.from(mockUrlQuery.keys()).forEach((key) => mockUrlQuery.delete(key));
-	});
-
-	it('clicking span updates URL with spanId parameter', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(
-			<Success
-				spans={mockSpans}
-				traceMetadata={mockTraceMetadata}
-				interestedSpanId={{ spanId: '', isUncollapsed: false }}
-				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-				setInterestedSpanId={jest.fn()}
-				selectedSpan={undefined}
-				setSelectedSpan={jest.fn()}
-			/>,
-			undefined,
-			{ initialRoute: '/trace' },
-		);
-
-		// Initially URL should not have spanId
-		expect(mockUrlQuery.get('spanId')).toBeNull();
-
-		// Click on the actual span element (not the wrapper)
-		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-		const spanElement = spanOverview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(spanElement);
-
-		// Verify URL was updated with spanId
-		expect(mockUrlQuery.get('spanId')).toBe('span-1');
-		expect(mockSafeNavigate).toHaveBeenCalledWith({
-			search: expect.stringContaining('spanId=span-1'),
-		});
-	});
-
-	it('clicking span duration visually selects the span', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click on span-2 to test selection change
-		const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-		const span2DurationElement = span2Duration.querySelector(
-			SPAN_DURATION_CLASS,
-		) as HTMLElement;
-		await user.click(span2DurationElement);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2DurationElement = span2Duration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('both click areas produce the same visual result', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanOverviewElement = spanOverview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			// Initially both areas should show the same visual selection (first span is auto-selected)
-			expect(spanOverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click span-2 to test selection change
-		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-		const span2Element = span2Overview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(span2Element);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
-			const spanOverviewElement = spanOverview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const spanDurationElement = spanDuration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			// Now span-2 should be selected, span-1 should not
-			expect(spanOverviewElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
-
-			// Check that span-2 is selected
-			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2OverviewElement = span2Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const span2DurationElement = span2Duration.querySelector(
-				SPAN_DURATION_CLASS,
-			) as HTMLElement;
-
-			expect(span2OverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('clicking different spans updates selection correctly', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestComponent />, undefined, {
-			initialRoute: '/trace',
-		});
-
-		// Wait for initial render and selection
-		await waitFor(() => {
-			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const span1Element = span1Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			expect(span1Element).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-
-		// Click second span
-		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-		const span2Element = span2Overview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(span2Element);
-
-		// Wait for the state update and re-render
-		await waitFor(() => {
-			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-			const span1Element = span1Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2Element = span2Overview.querySelector(
-				SPAN_OVERVIEW_CLASS,
-			) as HTMLElement;
-
-			// Second span should be selected, first should not
-			expect(span1Element).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2Element).toHaveClass(INTERESTED_SPAN_CLASS);
-		});
-	});
-
-	it('preserves existing URL parameters when selecting spans', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		// Pre-populate URL with existing parameters
-		mockUrlQuery.set('existingParam', 'existingValue');
-		mockUrlQuery.set('anotherParam', 'anotherValue');
-
-		render(
-			<Success
-				spans={mockSpans}
-				traceMetadata={mockTraceMetadata}
-				interestedSpanId={{ spanId: '', isUncollapsed: false }}
-				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
-				setInterestedSpanId={jest.fn()}
-				selectedSpan={undefined}
-				setSelectedSpan={jest.fn()}
-			/>,
-			undefined,
-			{ initialRoute: '/trace' },
-		);
-
-		// Click on the actual span element (not the wrapper)
-		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
-		const spanElement = spanOverview.querySelector(
-			SPAN_OVERVIEW_CLASS,
-		) as HTMLElement;
-		await user.click(spanElement);
-
-		// Verify existing parameters are preserved and spanId is added
-		expect(mockUrlQuery.get('existingParam')).toBe('existingValue');
-		expect(mockUrlQuery.get('anotherParam')).toBe('anotherValue');
-		expect(mockUrlQuery.get('spanId')).toBe('span-1');
-
-		// Verify navigation was called with all parameters
-		expect(mockSafeNavigate).toHaveBeenCalledWith({
-			search: expect.stringMatching(
-				/existingParam=existingValue.*anotherParam=anotherValue.*spanId=span-1/,
-			),
-		});
-	});
-});
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/constants.ts
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/constants.ts
@@ -1,7 +0,0 @@
-export enum TraceWaterfallStates {
-	LOADING = 'LOADING',
-	SUCCESS = 'SUCCESS',
-	NO_DATA = 'NO_DATA',
-	ERROR = 'ERROR',
-	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
-}
--- a/frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss
+++ b/frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss
@@ -1,42 +0,0 @@
-.resizable-box {
-	position: relative;
-	overflow: hidden;
-
-	&--disabled {
-		flex: 1;
-		min-height: 0;
-	}
-
-	&__content {
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
-
-	&__handle {
-		position: absolute;
-		z-index: 10;
-		background: var(--l2-border);
-
-		&:hover,
-		&:active {
-			background: var(--primary);
-		}
-
-		&--vertical {
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: 4px;
-			cursor: row-resize;
-		}
-
-		&--horizontal {
-			right: 0;
-			top: 0;
-			bottom: 0;
-			width: 4px;
-			cursor: col-resize;
-		}
-	}
-}
--- a/frontend/src/periscope/components/ResizableBox/ResizableBox.tsx
+++ b/frontend/src/periscope/components/ResizableBox/ResizableBox.tsx
@@ -1,88 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-import './ResizableBox.styles.scss';
-
-export interface ResizableBoxProps {
-	children: React.ReactNode;
-	direction?: 'vertical' | 'horizontal';
-	defaultHeight?: number;
-	minHeight?: number;
-	maxHeight?: number;
-	defaultWidth?: number;
-	minWidth?: number;
-	maxWidth?: number;
-	onResize?: (size: number) => void;
-	disabled?: boolean;
-	className?: string;
-}
-
-function ResizableBox({
-	children,
-	direction = 'vertical',
-	defaultHeight = 200,
-	minHeight = 50,
-	maxHeight = Infinity,
-	defaultWidth = 200,
-	minWidth = 50,
-	maxWidth = Infinity,
-	onResize,
-	disabled = false,
-	className,
-}: ResizableBoxProps): JSX.Element {
-	const isHorizontal = direction === 'horizontal';
-	const [size, setSize] = useState(isHorizontal ? defaultWidth : defaultHeight);
-	const containerRef = useRef<HTMLDivElement>(null);
-
-	const handleMouseDown = useCallback(
-		(e: React.MouseEvent): void => {
-			e.preventDefault();
-			const startPos = isHorizontal ? e.clientX : e.clientY;
-			const startSize = size;
-			const min = isHorizontal ? minWidth : minHeight;
-			const max = isHorizontal ? maxWidth : maxHeight;
-
-			const onMouseMove = (moveEvent: MouseEvent): void => {
-				const currentPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-				const delta = currentPos - startPos;
-				const newSize = Math.min(max, Math.max(min, startSize + delta));
-				setSize(newSize);
-				onResize?.(newSize);
-			};
-
-			const onMouseUp = (): void => {
-				document.removeEventListener('mousemove', onMouseMove);
-				document.removeEventListener('mouseup', onMouseUp);
-				document.body.style.cursor = '';
-				document.body.style.userSelect = '';
-			};
-
-			document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
-			document.body.style.userSelect = 'none';
-			document.addEventListener('mousemove', onMouseMove);
-			document.addEventListener('mouseup', onMouseUp);
-		},
-		[size, isHorizontal, minWidth, maxWidth, minHeight, maxHeight, onResize],
-	);
-
-	const containerStyle = disabled
-		? undefined
-		: isHorizontal
-		? { width: size }
-		: { height: size };
-	const handleClass = `resizable-box__handle resizable-box__handle--${direction}`;
-
-	return (
-		<div
-			ref={containerRef}
-			className={`resizable-box ${disabled ? 'resizable-box--disabled' : ''} ${
-				className || ''
-			}`}
-			style={containerStyle}
-		>
-			<div className="resizable-box__content">{children}</div>
-			{!disabled && <div className={handleClass} onMouseDown={handleMouseDown} />}
-		</div>
-	);
-}
-
-export default ResizableBox;
--- a/frontend/src/periscope/components/ResizableBox/index.ts
+++ b/frontend/src/periscope/components/ResizableBox/index.ts
@@ -1,2 +0,0 @@
-export type { ResizableBoxProps } from './ResizableBox';
-export { default as ResizableBox } from './ResizableBox';
--- a/pkg/apiserver/signozapiserver/cloudintegration.go
+++ b/pkg/apiserver/signozapiserver/cloudintegration.go
@@ -10,26 +10,6 @@ import (
 )

 func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
-	if err := router.Handle("/api/v1/cloud_integrations/{cloud_provider}/credentials", handler.New(
-		provider.authZ.AdminAccess(provider.cloudIntegrationHandler.GetConnectionCredentials),
-		handler.OpenAPIDef{
-			ID:                  "GetConnectionCredentials",
-			Tags:                []string{"cloudintegration"},
-			Summary:             "Get connection credentials",
-			Description:         "This endpoint retrieves the connection credentials required for integration",
-			Request:             nil,
-			RequestContentType:  "application/json",
-			Response:            new(citypes.Credentials),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
-		},
-	)).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
 	if err := router.Handle("/api/v1/cloud_integrations/{cloud_provider}/accounts", handler.New(
 		provider.authZ.AdminAccess(provider.cloudIntegrationHandler.CreateAccount),
 		handler.OpenAPIDef{
@@ -37,9 +17,9 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 			Tags:                []string{"cloudintegration"},
 			Summary:             "Create account",
 			Description:         "This endpoint creates a new cloud integration account for the specified cloud provider",
-			Request:             new(citypes.PostableAccount),
+			Request:             new(citypes.PostableConnectionArtifact),
 			RequestContentType:  "application/json",
-			Response:            new(citypes.GettableAccountWithConnectionArtifact),
+			Response:            new(citypes.GettableAccountWithArtifact),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},
@@ -79,7 +59,7 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 			Description:         "This endpoint gets an account for the specified cloud provider",
 			Request:             nil,
 			RequestContentType:  "",
-			Response:            new(citypes.Account),
+			Response:            new(citypes.GettableAccount),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
@@ -159,7 +139,7 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 			Description:         "This endpoint gets a service for the specified cloud provider",
 			Request:             nil,
 			RequestContentType:  "",
-			Response:            new(citypes.Service),
+			Response:            new(citypes.GettableService),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},
@@ -170,7 +150,7 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 		return err
 	}

-	if err := router.Handle("/api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}", handler.New(
+	if err := router.Handle("/api/v1/cloud_integrations/{cloud_provider}/services/{service_id}", handler.New(
 		provider.authZ.AdminAccess(provider.cloudIntegrationHandler.UpdateService),
 		handler.OpenAPIDef{
 			ID:                  "UpdateService",
@@ -199,9 +179,9 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 			Tags:                []string{"cloudintegration"},
 			Summary:             "Agent check-in",
 			Description:         "[Deprecated] This endpoint is called by the deployed agent to check in",
-			Request:             new(citypes.PostableAgentCheckIn),
+			Request:             new(citypes.PostableAgentCheckInRequest),
 			RequestContentType:  "application/json",
-			Response:            new(citypes.GettableAgentCheckIn),
+			Response:            new(citypes.GettableAgentCheckInResponse),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},
@@ -219,9 +199,9 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 			Tags:                []string{"cloudintegration"},
 			Summary:             "Agent check-in",
 			Description:         "This endpoint is called by the deployed agent to check in",
-			Request:             new(citypes.PostableAgentCheckIn),
+			Request:             new(citypes.PostableAgentCheckInRequest),
 			RequestContentType:  "application/json",
-			Response:            new(citypes.GettableAgentCheckIn),
+			Response:            new(citypes.GettableAgentCheckInResponse),
 			ResponseContentType: "application/json",
 			SuccessStatusCode:   http.StatusOK,
 			ErrorStatusCodes:    []int{},
--- a/pkg/auditor/config.go
+++ b/pkg/auditor/config.go
@@ -63,7 +63,6 @@ type RetryConfig struct {

 func newConfig() factory.Config {
 	return Config{
-		Provider:      "noop",
 		BufferSize:    1000,
 		BatchSize:     100,
 		FlushInterval: time.Second,
--- a/pkg/modules/cloudintegration/cloudintegration.go
+++ b/pkg/modules/cloudintegration/cloudintegration.go
@@ -10,42 +10,37 @@ import (
 )

 type Module interface {
-	GetConnectionCredentials(ctx context.Context, orgID valuer.UUID, provider citypes.CloudProviderType) (*citypes.Credentials, error)
-
 	CreateAccount(ctx context.Context, account *citypes.Account) error

 	// GetAccount returns cloud integration account
-	GetAccount(ctx context.Context, orgID, accountID valuer.UUID, provider citypes.CloudProviderType) (*citypes.Account, error)
+	GetAccount(ctx context.Context, orgID, accountID valuer.UUID) (*citypes.Account, error)

 	// ListAccounts lists accounts where agent is connected
-	ListAccounts(ctx context.Context, orgID valuer.UUID, provider citypes.CloudProviderType) ([]*citypes.Account, error)
+	ListAccounts(ctx context.Context, orgID valuer.UUID) ([]*citypes.Account, error)

 	// UpdateAccount updates the cloud integration account for a specific organization.
 	UpdateAccount(ctx context.Context, account *citypes.Account) error

 	// DisconnectAccount soft deletes/removes a cloud integration account.
-	DisconnectAccount(ctx context.Context, orgID, accountID valuer.UUID, provider citypes.CloudProviderType) error
+	DisconnectAccount(ctx context.Context, orgID, accountID valuer.UUID) error

 	// GetConnectionArtifact returns cloud provider specific connection information,
 	// client side handles how this information is shown
-	GetConnectionArtifact(ctx context.Context, account *citypes.Account, req *citypes.GetConnectionArtifactRequest) (*citypes.ConnectionArtifact, error)
+	GetConnectionArtifact(ctx context.Context, account *citypes.Account, req *citypes.ConnectionArtifactRequest) (*citypes.ConnectionArtifact, error)

-	// ListServicesMetadata returns the list of supported services' metadata for a cloud provider with optional filtering for a specific integration
-	// This just returns a summary of the service and not the whole service definition.
-	ListServicesMetadata(ctx context.Context, orgID valuer.UUID, provider citypes.CloudProviderType, integrationID *valuer.UUID) ([]*citypes.ServiceMetadata, error)
+	// ListServicesMetadata returns the list of services metadata for a cloud provider attached with the integrationID.
+	// This just returns a summary of the service and not the whole service definition
+	ListServicesMetadata(ctx context.Context, orgID valuer.UUID, integrationID *valuer.UUID) ([]*citypes.ServiceMetadata, error)

-	// GetService returns service definition details for a serviceID. This optionally returns the service config
-	// for integrationID if provided.
-	GetService(ctx context.Context, orgID valuer.UUID, integrationID *valuer.UUID, serviceID citypes.ServiceID, provider citypes.CloudProviderType) (*citypes.Service, error)
-
-	// CreateService creates a new service for a cloud integration account.
-	CreateService(ctx context.Context, orgID valuer.UUID, service *citypes.CloudIntegrationService, provider citypes.CloudProviderType) error
+	// GetService returns service definition details for a serviceID. This returns config and
+	// other details required to show in service details page on web client.
+	GetService(ctx context.Context, orgID valuer.UUID, integrationID *valuer.UUID, serviceID string) (*citypes.Service, error)

 	// UpdateService updates cloud integration service
-	UpdateService(ctx context.Context, orgID valuer.UUID, service *citypes.CloudIntegrationService, provider citypes.CloudProviderType) error
+	UpdateService(ctx context.Context, orgID valuer.UUID, service *citypes.CloudIntegrationService) error

-	// AgentCheckIn is called by agent to send heartbeat and get latest config in response.
-	AgentCheckIn(ctx context.Context, orgID valuer.UUID, provider citypes.CloudProviderType, req *citypes.AgentCheckInRequest) (*citypes.AgentCheckInResponse, error)
+	// AgentCheckIn is called by agent to heartbeat and get latest config in response.
+	AgentCheckIn(ctx context.Context, orgID valuer.UUID, req *citypes.AgentCheckInRequest) (*citypes.AgentCheckInResponse, error)

 	// GetDashboardByID returns dashboard JSON for a given dashboard id.
 	// this only returns the dashboard when the service (embedded in dashboard id) is enabled
@@ -57,22 +52,7 @@ type Module interface {
 	ListDashboards(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error)
 }

-type CloudProviderModule interface {
-	GetConnectionArtifact(ctx context.Context, account *citypes.Account, req *citypes.GetConnectionArtifactRequest) (*citypes.ConnectionArtifact, error)
-
-	// ListServiceDefinitions returns all service definitions for this cloud provider.
-	ListServiceDefinitions(ctx context.Context) ([]*citypes.ServiceDefinition, error)
-
-	// GetServiceDefinition returns the service definition for the given service ID.
-	GetServiceDefinition(ctx context.Context, serviceID citypes.ServiceID) (*citypes.ServiceDefinition, error)
-
-	// BuildIntegrationConfig compiles the provider-specific integration config from the account
-	// and list of configured services. This is the config returned to the agent on check-in.
-	BuildIntegrationConfig(ctx context.Context, account *citypes.Account, services []*citypes.StorableCloudIntegrationService) (*citypes.ProviderIntegrationConfig, error)
-}
-
 type Handler interface {
-	GetConnectionCredentials(http.ResponseWriter, *http.Request)
 	CreateAccount(http.ResponseWriter, *http.Request)
 	ListAccounts(http.ResponseWriter, *http.Request)
 	GetAccount(http.ResponseWriter, *http.Request)
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/alb/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/alb/integration.json
@@ -447,9 +447,9 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/ApplicationELB"
+            "Namespace": "AWS/ApplicationELB"
          }
        ]
      }
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/api-gateway/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/api-gateway/integration.json
@@ -171,14 +171,14 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/ApiGateway"
+            "Namespace": "AWS/ApiGateway"
          }
        ]
      },
      "logs": {
-        "subscriptions": [
+        "cloudwatchLogsSubscriptions": [
          {
            "logGroupNamePrefix": "API-Gateway",
            "filterPattern": ""
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/dynamodb/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/dynamodb/integration.json
@@ -374,9 +374,9 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/DynamoDB"
+            "Namespace": "AWS/DynamoDB"
          }
        ]
      }
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/ec2/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/ec2/integration.json
@@ -495,12 +495,12 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/EC2"
+            "Namespace": "AWS/EC2"
          },
          {
-            "namespace": "CWAgent"
+            "Namespace": "CWAgent"
          }
        ]
      }
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/ecs/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/ecs/integration.json
@@ -823,17 +823,17 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/ECS"
+            "Namespace": "AWS/ECS"
          },
          {
-            "namespace": "ECS/ContainerInsights"
+            "Namespace": "ECS/ContainerInsights"
          }
        ]
      },
      "logs": {
-        "subscriptions": [
+        "cloudwatchLogsSubscriptions": [
          {
            "logGroupNamePrefix": "/ecs",
            "filterPattern": ""
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/eks/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/eks/integration.json
@@ -2702,17 +2702,17 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/EKS"
+            "Namespace": "AWS/EKS"
          },
          {
-            "namespace": "ContainerInsights"
+            "Namespace": "ContainerInsights"
          }
        ]
      },
      "logs": {
-        "subscriptions": [
+        "cloudwatchLogsSubscriptions": [
          {
            "logGroupNamePrefix": "/aws/containerinsights",
            "filterPattern": ""
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/elasticache/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/elasticache/integration.json
@@ -1934,9 +1934,9 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/ElastiCache"
+            "Namespace": "AWS/ElastiCache"
          }
        ]
      }
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/lambda/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/lambda/integration.json
@@ -271,14 +271,14 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/Lambda"
+            "Namespace": "AWS/Lambda"
          }
        ]
      },
      "logs": {
-        "subscriptions": [
+        "cloudwatchLogsSubscriptions": [
          {
            "logGroupNamePrefix": "/aws/lambda",
            "filterPattern": ""
--- a/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/msk/integration.json
+++ b/pkg/modules/cloudintegration/implcloudintegration/fs/definitions/aws/msk/integration.json
@@ -1070,9 +1070,9 @@
  "telemetryCollectionStrategy": {
    "aws": {
      "metrics": {
-        "streamFilters": [
+        "cloudwatchMetricStreamFilters": [
          {
-            "namespace": "AWS/Kafka"
+            "Namespace": "AWS/Kafka"
          }
        ]
      }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Vinícius Lourenço	7d8c8e3d7d	fix(row): missing active styles	2026-04-13 19:37:13 -03:00
Vinícius Lourenço	5eae936ab4	fix(tests): use find by text	2026-04-13 19:17:34 -03:00
Vinícius Lourenço	091d61045a	fix(styles): minor fixes on styles	2026-04-13 19:15:43 -03:00
Vinícius Lourenço	ed1217e5d0	chore(tests): cleanup tests and components	2026-04-13 18:57:30 -03:00
Vinícius Lourenço	0389b46836	refactor(table): optimize	2026-04-13 18:36:45 -03:00
Vinícius Lourenço	284d6f72d4	refactor(table): extract table to own component	2026-04-13 15:49:33 -03:00
Vinícius Lourenço	66abfa3be4	refactor(tanstack): move table to components & convert to css modules	2026-04-08 15:27:59 -03:00