test(span-login): split huge file tests in smaller ones

Feat: Trace Details Revamp (#10973 )
* feat: flamegraph canvas init * feat: add text to spans * feat: added timeline v3 * feat: zoom and drag added * feat: update span colors * feat: handle click and hover with tooltip * feat: temp change * feat: fix timerange unit selection when zoomed * feat: scroll to selected span * feat: fix style * feat: fix style * feat: reduce timeline intervals * fix: style fix * fix: update color * feat: bg color for selected and hover spans * feat: remove unnecessary props * feat: minor comment added * feat: add test cases for flamegraph * feat: add test utils * feat: waterfall init * feat: decouple waterfall left (span tree) and right (timeline bars) panels Split the waterfall into two independent panels with a shared virtualizer so deeply nested span names are visible via horizontal scroll in the left panel. Left panel uses useReactTable + <table> for future column extensibility; right panel uses plain divs for timeline bars. A draggable resize handle separates the two panels. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add TimelineV3 ruler to waterfall header with padding fix Add the TimelineV3 component to the sticky header of the waterfall's right panel so timeline tick marks are visible. Add horizontal padding to both the timeline header and span duration bars to prevent label overflow/clipping at the edges. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: match span style * feat: fix hover option overflow * feat: span hover popover sync * feat: row based flamegraph * feat: subtree segregated tree * feat: subtree segregated tree * feat: subtree segregated tree * feat: move to service worker * feat: connector line ux * feat: event dots in trace details * feat: waterfall resizable * feat: span details init * feat: span details header * feat: details field component * feat: added span percentile * feat: key attr section added * feat: added pretty view * feat: update yarn lock * feat: minor change * feat: search in pretty view * feat: refactor * feat: style fix * feat: json viewer with select dropdown added * feat: span details floating drawer added * feat: span details folder rename * feat: replace draggable package * feat: fix pinning. fix drag on top * feat: add bound to drags while floating * feat: add collapsible sections in trace details * feat: use resizable for waterfall table as well * feat: copy link change and url clear on span close * feat: fix span details headr * feat: key value label style fixes * feat: linked spans * feat: style fixes * feat: setup types and interface for waterfall v3 v3 is required for udpating the response json of the waterfall api. There wont' be any logical change. Using this requirement as an opportunity to move waterfall api to provider codebase architecture from older query-service * refactor: move type conversion logic to types pkg * chore: add reason for using snake case in response * fix: update span.attributes to map of string to any To support otel format of diffrent types of attributes * fix: remove unused fields and rename span type To avoid confusing with otel span * refactor: convert waterfall api to modules format * chore: add same test cases as for old waterfall api * chore: avoid sorting on every traversal * fix: remove unused fields and rename span type To avoid confusing with otel span * fix: rename timestamp to milli for readability * fix: add timeout to module context * fix: use typed paramter field in logs * feat: api integration * feat: add limit * feat: minor change * feat: supress click * chore: generate openapi spec for v3 waterfall * feat: fix test * feat: fix test * feat: lint fix * feat: span details ux * feat: analytics * feat: add icons * feat: added loading to flamegraph and timeout to webworker * feat: sync error and loading state for flamegraph for n/w and computation logic * feat: auto scroll horizontally to span * feat: show total span count * feat: disable anaytics span tab for now * feat: add span details loader * feat: prevent api call on closing span detail * fix: remove timeout since waterfall take longer * fix: use int16 for status code as per db schema * fix: update openapi specs * feat: make filter and search work with flamegraph * feat: filter ui fix * feat: remove trace header * feat: new filter ui * feat: setup types and interface for waterfall v3 v3 is required for udpating the response json of the waterfall api. There wont' be any logical change. Using this requirement as an opportunity to move waterfall api to provider codebase architecture from older query-service * refactor: move type conversion logic to types pkg * chore: add reason for using snake case in response * fix: update span.attributes to map of string to any To support otel format of diffrent types of attributes * fix: remove unused fields and rename span type To avoid confusing with otel span * refactor: convert waterfall api to modules format * chore: add same test cases as for old waterfall api * chore: avoid sorting on every traversal * fix: remove unused fields and rename span type To avoid confusing with otel span * fix: rename timestamp to milli for readability * fix: add timeout to module context * fix: use typed paramter field in logs * chore: generate openapi spec for v3 waterfall * fix: remove timeout since waterfall take longer * fix: use int16 for status code as per db schema * fix: update openapi specs * feat: api integration * feat: automatically scroll left on vertical scroll * feat: reduce time * feat: set limit to 100k for flamegraph * feat: show child count in waterfall * fix: align timeline and span length in flamegraph and waterfall * feat: fix flamegraph and waterfall bg color * feat: show caution on sampled flamegraph * feat: api integration v3 * feat: disable scroll to view for collapse and uncollapse * feat: setup types and interface for waterfall v3 v3 is required for udpating the response json of the waterfall api. There wont' be any logical change. Using this requirement as an opportunity to move waterfall api to provider codebase architecture from older query-service * refactor: move type conversion logic to types pkg * chore: add reason for using snake case in response * fix: update span.attributes to map of string to any To support otel format of diffrent types of attributes * fix: remove unused fields and rename span type To avoid confusing with otel span * refactor: convert waterfall api to modules format * chore: add same test cases as for old waterfall api * chore: avoid sorting on every traversal * fix: remove unused fields and rename span type To avoid confusing with otel span * fix: rename timestamp to milli for readability * fix: add timeout to module context * fix: use typed paramter field in logs * chore: generate openapi spec for v3 waterfall * fix: remove timeout since waterfall take longer * fix: use int16 for status code as per db schema * fix: update openapi specs * refactor: break down GetWaterfall method for readability * chore: avoid returning nil, nil * refactor: move type creation and constants to types package - Move DB/table/cache/windowing constants to tracedetailtypes package - Add NewWaterfallTrace and NewWaterfallResponse constructors in types - Use constructors in module.go instead of inline struct literals - Reorder waterfall.go so public functions precede private ones * refactor: extract ClickHouse queries into a store abstraction Move GetTraceSummary and GetTraceSpans out of module.go into a traceStore interface backed by clickhouseTraceStore in store.go. The module struct now holds a traceStore instead of a raw telemetrystore.TelemetryStore, keeping DB access separate from business logic. * refactor: move error to types as well * refactor: separate out store calls and computations * refactor: breakdown GetSelectedSpans for readability * refactor: return 404 on missing trace and other cleanup * refactor: use same method for cache key creation * chore: remove unused duration nano field * chore: use sqlbuilder in clickhouse store where possible * feat: dropdown added to span details * feat: fix color duplications * feat: no data screen * feat: old trace btn added * feat: minor fix * feat: rename copy to copy value * feat: delete unused file * feat: use semantic tokens * feat: use semantic tokens * feat: add crosshair * feat: fix test * feat: disable crosshair in waterfall * feat: fix colors * feat: minor fix * feat: add status codes * feat: load all spans in waterfall under limit * feat: uncollapse spans on select from flamegraph * feat: style fix * feat: add service name * feat: open in new tab * feat: delete waterfall go * feat: minor change * feat: minor change * feat: minor refactors * feat: minor refactors * feat: v3 behind feature flag * feat: minor refactors * feat: packages remove * feat: packages remove * feat: remove common component * feat: remove antd component usage --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Nikhil Soni <nikhil.soni@signoz.io>
2026-05-07 19:10:30 +01:00 · 2026-05-07 14:24:13 -03:00 · 2026-05-07 13:10:49 +00:00 · 2026-05-07 12:06:04 +00:00 · 2026-05-07 11:02:21 +00:00 · 2026-05-07 10:46:02 +00:00
310 changed files with 22916 additions and 5817 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -107,6 +107,7 @@ go.mod @therealpandey
 /pkg/modules/organization/ @therealpandey
 /pkg/modules/authdomain/ @therealpandey
 /pkg/modules/role/ @therealpandey
+/pkg/types/coretypes/ @therealpandey @vikrantgupta25

 # IdentN Owners

--- a/.github/workflows/goci.yaml
+++ b/.github/workflows/goci.yaml
@@ -102,3 +102,20 @@ jobs:
        run: |
          go run cmd/enterprise/*.go generate openapi
          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)
+  authz:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: go-install
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.24"
+      - name: generate-authz
+        run: |
+          go run cmd/enterprise/*.go generate authz
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in authz permissions. Run go run cmd/enterprise/*.go generate authz locally and commit."; exit 1)
--- a/.github/workflows/jsci.yaml
+++ b/.github/workflows/jsci.yaml
@@ -63,46 +63,6 @@ jobs:
        uses: actions/checkout@v4
      - name: run
        run: bash frontend/scripts/validate-md-languages.sh
-  authz:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v5
-      - name: node-install
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: deps-install
-        working-directory: ./frontend
-        run: |
-          yarn install
-      - name: uv-install
-        uses: astral-sh/setup-uv@v5
-      - name: uv-deps
-        working-directory: ./tests/integration
-        run: |
-          uv sync
-      - name: setup-test
-        run: |
-          make py-test-setup
-      - name: generate
-        working-directory: ./frontend
-        run: |
-          yarn generate:permissions-type
-      - name: teardown-test
-        if: always()
-        run: |
-          make py-test-teardown
-      - name: validate
-        run: |
-          if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
-            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
-            exit 1
-          fi
  openapi:
    if: |
      github.event_name == 'merge_group' ||
--- a/cmd/authz.go
+++ b/cmd/authz.go
@@ -0,0 +1,117 @@
+package cmd
+
+import (
+	"bytes"
+	"context"
+	"os"
+	"sort"
+	"text/template"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/spf13/cobra"
+)
+
+const permissionsTypePath = "frontend/src/hooks/useAuthZ/permissions.type.ts"
+
+var permissionsTypeTemplate = template.Must(template.New("permissions").Parse(
+	`// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz
+export default {
+	status: 'success',
+	data: {
+		resources: [
+{{- range .Resources }}
+			{
+				kind: '{{ .Kind }}',
+				type: '{{ .Type }}',
+			},
+{{- end }}
+		],
+		relations: {
+{{- range .Relations }}
+			{{ .Verb }}: [{{ range $i, $t := .Types }}{{ if $i }}, {{ end }}'{{ $t }}'{{ end }}],
+{{- end }}
+		},
+	},
+} as const;
+`))
+
+type permissionsTypeRelation struct {
+	Verb  string
+	Types []string
+}
+
+type permissionsTypeResource struct {
+	Kind string
+	Type string
+}
+
+type permissionsTypeData struct {
+	Resources []permissionsTypeResource
+	Relations []permissionsTypeRelation
+}
+
+func registerGenerateAuthz(parentCmd *cobra.Command) {
+	authzCmd := &cobra.Command{
+		Use:   "authz",
+		Short: "Generate authz permissions for the frontend",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return runGenerateAuthz(currCmd.Context())
+		},
+	}
+
+	parentCmd.AddCommand(authzCmd)
+}
+
+func runGenerateAuthz(_ context.Context) error {
+	registry := coretypes.NewRegistry()
+
+	allowedResources := map[string]bool{
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():    true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():              true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesRole).String(): true,
+	}
+
+	allowedTypes := map[string]bool{}
+
+	refs := registry.ResourceRefs()
+	resources := make([]permissionsTypeResource, 0, len(refs))
+	for _, ref := range refs {
+		if !allowedResources[ref.String()] {
+			continue
+		}
+		allowedTypes[ref.Type.StringValue()] = true
+		resources = append(resources, permissionsTypeResource{
+			Kind: ref.Kind.String(),
+			Type: ref.Type.StringValue(),
+		})
+	}
+
+	typesByVerb := registry.TypesByVerb()
+	verbs := make([]coretypes.Verb, 0, len(typesByVerb))
+	for verb := range typesByVerb {
+		verbs = append(verbs, verb)
+	}
+	sort.Slice(verbs, func(i, j int) bool { return verbs[i].StringValue() < verbs[j].StringValue() })
+
+	relations := make([]permissionsTypeRelation, 0, len(verbs))
+	for _, verb := range verbs {
+		types := make([]string, 0, len(typesByVerb[verb]))
+		for _, t := range typesByVerb[verb] {
+			if !allowedTypes[t.StringValue()] {
+				continue
+			}
+			types = append(types, t.StringValue())
+		}
+		relations = append(relations, permissionsTypeRelation{
+			Verb:  verb.StringValue(),
+			Types: types,
+		})
+	}
+
+	var buf bytes.Buffer
+	if err := permissionsTypeTemplate.Execute(&buf, permissionsTypeData{Resources: resources, Relations: relations}); err != nil {
+		return err
+	}
+
+	return os.WriteFile(permissionsTypePath, buf.Bytes(), 0o600)
+}
--- a/cmd/community/server.go
+++ b/cmd/community/server.go
@@ -92,13 +92,13 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete, _ dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
 			if err != nil {
 				return nil, err
 			}

-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)
--- a/cmd/enterprise/server.go
+++ b/cmd/enterprise/server.go
@@ -137,12 +137,12 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e

 			return authNs, nil
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, dashboardModule dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
 			if err != nil {
 				return nil, err
 			}
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, dashboardModule), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)
--- a/cmd/generate.go
+++ b/cmd/generate.go
@@ -16,6 +16,7 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
 	}

 	registerGenerateOpenAPI(generateCmd)
+	registerGenerateAuthz(generateCmd)

 	parentCmd.AddCommand(generateCmd)
 }
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -428,4 +428,4 @@ authz:
  provider: openfga
  openfga:
    # maximum tuples allowed per openfga write operation.
-    max_tuples_per_write: 100
+    max_tuples_per_write: 300
--- a/deploy/docker-swarm/docker-compose.ha.yaml
+++ b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -190,7 +190,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.1
+    image: signoz/signoz:v0.122.0
    ports:
      - "8080:8080" # signoz port
    #   - "6060:6060"     # pprof port
--- a/deploy/docker-swarm/docker-compose.yaml
+++ b/deploy/docker-swarm/docker-compose.yaml
@@ -117,7 +117,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.1
+    image: signoz/signoz:v0.122.0
    ports:
      - "8080:8080" # signoz port
    volumes:
--- a/deploy/docker/docker-compose.ha.yaml
+++ b/deploy/docker/docker-compose.ha.yaml
@@ -181,7 +181,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.1}
+    image: signoz/signoz:${VERSION:-v0.122.0}
    container_name: signoz
    ports:
      - "8080:8080" # signoz port
--- a/deploy/docker/docker-compose.yaml
+++ b/deploy/docker/docker-compose.yaml
@@ -109,7 +109,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.1}
+    image: signoz/signoz:${VERSION:-v0.122.0}
    container_name: signoz
    ports:
      - "8080:8080" # signoz port
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -321,35 +321,6 @@ components:
      required:
      - id
      type: object
-    AuthtypesGettableObjects:
-      properties:
-        resource:
-          $ref: '#/components/schemas/AuthtypesResource'
-        selectors:
-          items:
-            type: string
-          type: array
-      required:
-      - resource
-      - selectors
-      type: object
-    AuthtypesGettableResources:
-      properties:
-        relations:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          nullable: true
-          type: object
-        resources:
-          items:
-            $ref: '#/components/schemas/AuthtypesResource'
-          type: array
-      required:
-      - resources
-      - relations
-      type: object
    AuthtypesGettableToken:
      properties:
        accessToken:
@@ -366,9 +337,9 @@ components:
        authorized:
          type: boolean
        object:
-          $ref: '#/components/schemas/AuthtypesObject'
+          $ref: '#/components/schemas/CoretypesObject'
        relation:
-          type: string
+          $ref: '#/components/schemas/AuthtypesRelation'
      required:
      - relation
      - object
@@ -416,16 +387,6 @@ components:
        issuerAlias:
          type: string
      type: object
-    AuthtypesObject:
-      properties:
-        resource:
-          $ref: '#/components/schemas/AuthtypesResource'
-        selector:
-          type: string
-      required:
-      - resource
-      - selector
-      type: object
    AuthtypesOrgSessionContext:
      properties:
        authNSupport:
@@ -442,22 +403,6 @@ components:
        provider:
          $ref: '#/components/schemas/AuthtypesAuthNProvider'
      type: object
-    AuthtypesPatchableObjects:
-      properties:
-        additions:
-          items:
-            $ref: '#/components/schemas/AuthtypesGettableObjects'
-          nullable: true
-          type: array
-        deletions:
-          items:
-            $ref: '#/components/schemas/AuthtypesGettableObjects'
-          nullable: true
-          type: array
-      required:
-      - additions
-      - deletions
-      type: object
    AuthtypesPatchableRole:
      properties:
        description:
@@ -495,16 +440,15 @@ components:
        refreshToken:
          type: string
      type: object
-    AuthtypesResource:
-      properties:
-        name:
-          type: string
-        type:
-          type: string
-      required:
-      - name
-      - type
-      type: object
+    AuthtypesRelation:
+      enum:
+      - create
+      - read
+      - update
+      - delete
+      - list
+      - assignee
+      type: string
    AuthtypesRole:
      properties:
        createdAt:
@@ -568,9 +512,9 @@ components:
    AuthtypesTransaction:
      properties:
        object:
-          $ref: '#/components/schemas/AuthtypesObject'
+          $ref: '#/components/schemas/CoretypesObject'
        relation:
-          type: string
+          $ref: '#/components/schemas/AuthtypesRelation'
      required:
      - relation
      - object
@@ -2205,6 +2149,64 @@ components:
        to_user:
          type: string
      type: object
+    CoretypesObject:
+      properties:
+        resource:
+          $ref: '#/components/schemas/CoretypesResourceRef'
+        selector:
+          type: string
+      required:
+      - resource
+      - selector
+      type: object
+    CoretypesObjectGroup:
+      properties:
+        resource:
+          $ref: '#/components/schemas/CoretypesResourceRef'
+        selectors:
+          items:
+            type: string
+          type: array
+      required:
+      - resource
+      - selectors
+      type: object
+    CoretypesPatchableObjects:
+      properties:
+        additions:
+          items:
+            $ref: '#/components/schemas/CoretypesObjectGroup'
+          nullable: true
+          type: array
+        deletions:
+          items:
+            $ref: '#/components/schemas/CoretypesObjectGroup'
+          nullable: true
+          type: array
+      required:
+      - additions
+      - deletions
+      type: object
+    CoretypesResourceRef:
+      properties:
+        kind:
+          type: string
+        type:
+          $ref: '#/components/schemas/CoretypesType'
+      required:
+      - type
+      - kind
+      type: object
+    CoretypesType:
+      enum:
+      - user
+      - serviceaccount
+      - anonymous
+      - role
+      - organization
+      - metaresource
+      - metaresources
+      type: string
    DashboardtypesDashboard:
      properties:
        createdAt:
@@ -2545,7 +2547,8 @@ components:
          format: double
          type: number
        meta:
-          additionalProperties: {}
+          additionalProperties:
+            type: string
          nullable: true
          type: object
        status:
@@ -2595,6 +2598,103 @@ components:
      - requiredMetricsCheck
      - endTimeBeforeRetention
      type: object
+    InframonitoringtypesNodeCondition:
+      enum:
+      - ready
+      - not_ready
+      - no_data
+      type: string
+    InframonitoringtypesNodeCountsByReadiness:
+      properties:
+        notReady:
+          type: integer
+        ready:
+          type: integer
+      required:
+      - ready
+      - notReady
+      type: object
+    InframonitoringtypesNodeRecord:
+      properties:
+        condition:
+          $ref: '#/components/schemas/InframonitoringtypesNodeCondition'
+        meta:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        nodeCPU:
+          format: double
+          type: number
+        nodeCPUAllocatable:
+          format: double
+          type: number
+        nodeCountsByReadiness:
+          $ref: '#/components/schemas/InframonitoringtypesNodeCountsByReadiness'
+        nodeMemory:
+          format: double
+          type: number
+        nodeMemoryAllocatable:
+          format: double
+          type: number
+        nodeName:
+          type: string
+        podCountsByPhase:
+          $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
+      required:
+      - nodeName
+      - condition
+      - nodeCountsByReadiness
+      - podCountsByPhase
+      - nodeCPU
+      - nodeCPUAllocatable
+      - nodeMemory
+      - nodeMemoryAllocatable
+      - meta
+      type: object
+    InframonitoringtypesNodes:
+      properties:
+        endTimeBeforeRetention:
+          type: boolean
+        records:
+          items:
+            $ref: '#/components/schemas/InframonitoringtypesNodeRecord'
+          nullable: true
+          type: array
+        requiredMetricsCheck:
+          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
+        total:
+          type: integer
+        type:
+          $ref: '#/components/schemas/InframonitoringtypesResponseType'
+        warning:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryWarnData'
+      required:
+      - type
+      - records
+      - total
+      - requiredMetricsCheck
+      - endTimeBeforeRetention
+      type: object
+    InframonitoringtypesPodCountsByPhase:
+      properties:
+        failed:
+          type: integer
+        pending:
+          type: integer
+        running:
+          type: integer
+        succeeded:
+          type: integer
+        unknown:
+          type: integer
+      required:
+      - pending
+      - running
+      - succeeded
+      - failed
+      - unknown
+      type: object
    InframonitoringtypesPodPhase:
      enum:
      - pending
@@ -2602,18 +2702,15 @@ components:
      - succeeded
      - failed
      - unknown
-      - ""
+      - no_data
      type: string
    InframonitoringtypesPodRecord:
      properties:
-        failedPodCount:
-          type: integer
        meta:
-          additionalProperties: {}
+          additionalProperties:
+            type: string
          nullable: true
          type: object
-        pendingPodCount:
-          type: integer
        podAge:
          format: int64
          type: integer
@@ -2626,6 +2723,8 @@ components:
        podCPURequest:
          format: double
          type: number
+        podCountsByPhase:
+          $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
        podMemory:
          format: double
          type: number
@@ -2639,12 +2738,6 @@ components:
          $ref: '#/components/schemas/InframonitoringtypesPodPhase'
        podUID:
          type: string
-        runningPodCount:
-          type: integer
-        succeededPodCount:
-          type: integer
-        unknownPodCount:
-          type: integer
      required:
      - podUID
      - podCPU
@@ -2654,11 +2747,7 @@ components:
      - podMemoryRequest
      - podMemoryLimit
      - podPhase
-      - pendingPodCount
-      - runningPodCount
-      - succeededPodCount
-      - failedPodCount
-      - unknownPodCount
+      - podCountsByPhase
      - podAge
      - meta
      type: object
@@ -2712,6 +2801,32 @@ components:
      - end
      - limit
      type: object
+    InframonitoringtypesPostableNodes:
+      properties:
+        end:
+          format: int64
+          type: integer
+        filter:
+          $ref: '#/components/schemas/Querybuildertypesv5Filter'
+        groupBy:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
+          type: array
+        limit:
+          type: integer
+        offset:
+          type: integer
+        orderBy:
+          $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+        start:
+          format: int64
+          type: integer
+      required:
+      - start
+      - end
+      - limit
+      type: object
    InframonitoringtypesPostablePods:
      properties:
        end:
@@ -5321,6 +5436,9 @@ components:
        sub_tree_node_count:
          minimum: 0
          type: integer
+        time_unix:
+          minimum: 0
+          type: integer
        trace_id:
          type: string
        trace_state:
@@ -5701,35 +5819,6 @@ paths:
      summary: Check permissions
      tags:
      - authz
-  /api/v1/authz/resources:
-    get:
-      deprecated: false
-      description: Gets all the available resources
-      operationId: AuthzResources
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AuthtypesGettableResources'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      summary: Get resources
-      tags:
-      - authz
  /api/v1/channels:
    get:
      deprecated: false
@@ -8953,7 +9042,7 @@ paths:
                properties:
                  data:
                    items:
-                      $ref: '#/components/schemas/AuthtypesGettableObjects'
+                      $ref: '#/components/schemas/CoretypesObjectGroup'
                    type: array
                  status:
                    type: string
@@ -9026,7 +9115,7 @@ paths:
        content:
          application/json:
            schema:
-              $ref: '#/components/schemas/AuthtypesPatchableObjects'
+              $ref: '#/components/schemas/CoretypesPatchableObjects'
      responses:
        "204":
          content:
@@ -11642,12 +11731,83 @@ paths:
      summary: List Hosts for Infra Monitoring
      tags:
      - inframonitoring
+  /api/v2/infra_monitoring/nodes:
+    post:
+      deprecated: false
+      description: 'Returns a paginated list of Kubernetes nodes with key metrics:
+        CPU usage, CPU allocatable, memory working set, memory allocatable, per-group
+        nodeCountsByReadiness ({ ready, notReady } from each node''s latest k8s.node.condition_ready
+        in the window) and per-group podCountsByPhase ({ pending, running, succeeded,
+        failed, unknown } for pods scheduled on the listed nodes). Each node includes
+        metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is
+        ''list'' for the default k8s.node.name grouping (each row is one node with
+        its current condition string: ready / not_ready / no_data) or ''grouped_list''
+        for custom groupBy keys (each row aggregates nodes in the group; condition
+        stays no_data). Supports filtering via a filter expression, custom groupBy,
+        ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination
+        via offset/limit. Also reports missing required metrics and whether the requested
+        time range falls before the data retention boundary. Numeric metric fields
+        (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1
+        as a sentinel when no data is available for that field.'
+      operationId: ListNodes
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/InframonitoringtypesPostableNodes'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/InframonitoringtypesNodes'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List Nodes for Infra Monitoring
+      tags:
+      - inframonitoring
  /api/v2/infra_monitoring/pods:
    post:
      deprecated: false
      description: 'Returns a paginated list of Kubernetes pods with key metrics:
        CPU usage, CPU request/limit utilization, memory working set, memory request/limit
-        utilization, current pod phase (pending/running/succeeded/failed/unknown),
+        utilization, current pod phase (pending/running/succeeded/failed/unknown/no_data),
        and pod age (ms since start time). Each pod includes metadata attributes (namespace,
        node, workload owner such as deployment/statefulset/daemonset/job/cronjob,
        cluster). Supports filtering via a filter expression, custom groupBy to aggregate
@@ -11655,13 +11815,13 @@ paths:
        cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit.
        The response type is ''list'' for the default k8s.pod.uid grouping (each row
        is one pod with its current phase) or ''grouped_list'' for custom groupBy
-        keys (each row aggregates pods in the group with per-phase counts: pendingPodCount,
-        runningPodCount, succeededPodCount, failedPodCount, unknownPodCount derived
-        from each pod''s latest phase in the window). Also reports missing required
-        metrics and whether the requested time range falls before the data retention
-        boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory,
-        podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no
-        data is available for that field.'
+        keys (each row aggregates pods in the group with per-phase counts under podCountsByPhase:
+        { pending, running, succeeded, failed, unknown } derived from each pod''s
+        latest phase in the window). Also reports missing required metrics and whether
+        the requested time range falls before the data retention boundary. Numeric
+        metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest,
+        podMemoryLimit, podAge) return -1 as a sentinel when no data is available
+        for that field.'
      operationId: ListPods
      requestBody:
        content:
--- a/ee/authz/openfgaauthz/provider.go
+++ b/ee/authz/openfgaauthz/provider.go
@@ -2,7 +2,6 @@ package openfgaauthz

 import (
 	"context"
-	"slices"

 	"github.com/SigNoz/signoz/ee/authz/openfgaserver"
 	"github.com/SigNoz/signoz/pkg/authz"
@@ -13,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
@@ -25,19 +25,19 @@ type provider struct {
 	openfgaServer      *openfgaserver.Server
 	licensing          licensing.Licensing
 	store              authtypes.RoleStore
-	registry           []authz.RegisterTypeable
+	registry           *authtypes.Registry
 	settings           factory.ScopedProviderSettings
 	onBeforeRoleDelete []authz.OnBeforeRoleDelete
 }

-func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("openfga"), func(ctx context.Context, ps factory.ProviderSettings, config authz.Config) (authz.AuthZ, error) {
 		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, openfgaDataStore, licensing, onBeforeRoleDelete, registry)
 	})
 }

-func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
-	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore)
+func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) (authz.AuthZ, error) {
+	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore, registry)
 	pkgAuthzService, err := pkgOpenfgaAuthzProvider.New(ctx, settings, config)
 	if err != nil {
 		return nil, err
@@ -74,11 +74,11 @@ func (provider *provider) Stop(ctx context.Context) error {
 	return provider.openfgaServer.Stop(ctx)
 }

-func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreation(ctx, claims, orgID, relation, typeable, selectors, roleSelectors)
 }

-func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreationWithoutClaims(ctx, orgID, relation, typeable, selectors, roleSelectors)
 }

@@ -108,7 +108,7 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }

-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
+func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
 	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
 }

@@ -159,16 +159,10 @@ func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.U
 func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
 	tuples := make([]*openfgav1.TupleKey, 0)

-	grantTuples, err := provider.getManagedRoleGrantTuples(orgID, userID)
-	if err != nil {
-		return err
-	}
+	grantTuples := provider.getManagedRoleGrantTuples(orgID, userID)
 	tuples = append(tuples, grantTuples...)

-	managedRoleTuples, err := provider.getManagedRoleTransactionTuples(orgID)
-	if err != nil {
-		return err
-	}
+	managedRoleTuples := provider.getManagedRoleTransactionTuples(orgID)
 	tuples = append(tuples, managedRoleTuples...)

 	return provider.Write(ctx, tuples, nil)
@@ -208,21 +202,7 @@ func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, ro
 	return role, nil
 }

-func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource {
-	resources := make([]*authtypes.Resource, 0)
-	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-		}
-	}
-	for _, typeable := range provider.MustGetTypeables() {
-		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-	}
-
-	return resources
-}
-
-func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
+func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*coretypes.Object, error) {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -233,16 +213,16 @@ func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id
 		return nil, err
 	}

-	objects := make([]*authtypes.Object, 0)
-	for _, objectType := range provider.getUniqueTypes() {
-		if !slices.Contains(authtypes.TypeableRelations[objectType], relation) {
+	objects := make([]*coretypes.Object, 0)
+	for _, objectType := range provider.registry.Types() {
+		if coretypes.ErrIfVerbNotValidForType(relation.Verb, objectType) != nil {
 			continue
 		}

 		resourceObjects, err := provider.
 			ListObjects(
 				ctx,
-				authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.Name, orgID, &authtypes.RelationAssignee),
+				authtypes.MustNewSubject(coretypes.NewResourceRole(), storableRole.Name, orgID, &coretypes.VerbAssignee),
 				relation,
 				objectType,
 			)
@@ -265,7 +245,7 @@ func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *au
 	return provider.store.Update(ctx, orgID, role)
 }

-func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
+func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*coretypes.Object) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -318,84 +298,63 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }

-func (provider *provider) MustGetTypeables() []authtypes.Typeable {
-	return []authtypes.Typeable{authtypes.TypeableRole, authtypes.TypeableResourcesRoles}
-}
-
-func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := []*openfgav1.TupleKey{}

 	// Grant the admin role to the user
-	adminSubject := authtypes.MustNewSubject(authtypes.TypeableUser, userID.String(), orgID, nil)
-	adminTuple, err := authtypes.TypeableRole.Tuples(
+	adminSubject := authtypes.MustNewSubject(coretypes.NewResourceUser(), userID.String(), orgID, nil)
+	adminTuple := authtypes.NewTuples(
+		coretypes.NewResourceRole(),
 		adminSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAdminRoleName),
-		},
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName)},
 		orgID,
 	)
-	if err != nil {
-		return nil, err
-	}
 	tuples = append(tuples, adminTuple...)

 	// Grant the admin role to the anonymous user
-	anonymousSubject := authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
-	anonymousTuple, err := authtypes.TypeableRole.Tuples(
+	anonymousSubject := authtypes.MustNewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
+	anonymousTuple := authtypes.NewTuples(
+		coretypes.NewResourceRole(),
 		anonymousSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAnonymousRoleName),
-		},
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAnonymousRoleName)},
 		orgID,
 	)
-	if err != nil {
-		return nil, err
-	}
 	tuples = append(tuples, anonymousTuple...)

-	return tuples, nil
+	return tuples
 }

-func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	transactionsByRole := make(map[string][]*authtypes.Transaction)
-	for _, register := range provider.registry {
-		for roleName, txns := range register.MustGetManagedRoleTransactions() {
-			transactionsByRole[roleName] = append(transactionsByRole[roleName], txns...)
-		}
-	}
-
+func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := make([]*openfgav1.TupleKey, 0)
-	for roleName, transactions := range transactionsByRole {
+	for roleName, transactions := range provider.registry.ManagedRoleTransactions() {
 		for _, txn := range transactions {
-			typeable := authtypes.MustNewTypeableFromType(txn.Object.Resource.Type, txn.Object.Resource.Name)
-			txnTuples, err := typeable.Tuples(
+			resource := coretypes.MustNewResourceFromTypeAndKind(txn.Object.Resource.Type, txn.Object.Resource.Kind)
+			txnTuples := authtypes.NewTuples(
+				resource,
 				authtypes.MustNewSubject(
-					authtypes.TypeableRole,
+					coretypes.NewResourceRole(),
 					roleName,
 					orgID,
-					&authtypes.RelationAssignee,
+					&coretypes.VerbAssignee,
 				),
 				txn.Relation,
-				[]authtypes.Selector{txn.Object.Selector},
+				[]coretypes.Selector{txn.Object.Selector},
 				orgID,
 			)
-			if err != nil {
-				return nil, err
-			}
 			tuples = append(tuples, txnTuples...)
 		}
 	}

-	return tuples, nil
+	return tuples
 }

 func (provider *provider) deleteTuples(ctx context.Context, roleName string, orgID valuer.UUID) error {
-	subject := authtypes.MustNewSubject(authtypes.TypeableRole, roleName, orgID, &authtypes.RelationAssignee)
+	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)

 	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.getUniqueTypes() {
+	for _, objectType := range provider.registry.Types() {
 		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
 			User:   subject,
 			Object: objectType.StringValue() + ":",
@@ -424,28 +383,3 @@ func (provider *provider) deleteTuples(ctx context.Context, roleName string, org

 	return nil
 }
-
-func (provider *provider) getUniqueTypes() []authtypes.Type {
-	seen := make(map[string]struct{})
-	uniqueTypes := make([]authtypes.Type, 0)
-	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			typeKey := typeable.Type().StringValue()
-			if _, ok := seen[typeKey]; ok {
-				continue
-			}
-			seen[typeKey] = struct{}{}
-			uniqueTypes = append(uniqueTypes, typeable.Type())
-		}
-	}
-	for _, typeable := range provider.MustGetTypeables() {
-		typeKey := typeable.Type().StringValue()
-		if _, ok := seen[typeKey]; ok {
-			continue
-		}
-		seen[typeKey] = struct{}{}
-		uniqueTypes = append(uniqueTypes, typeable.Type())
-	}
-
-	return uniqueTypes
-}
--- a/ee/authz/openfgaschema/base.fga
+++ b/ee/authz/openfgaschema/base.fga
@@ -1,6 +1,6 @@
 module base

-type organisation 
+type organization 
  relations
    define read: [user, serviceaccount, role#assignee]
    define update: [user, serviceaccount, role#assignee]
@@ -10,12 +10,14 @@ type user
    define read: [user, serviceaccount, role#assignee]
    define update: [user, serviceaccount, role#assignee]
    define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]

-type serviceaccount 
+type serviceaccount
  relations
    define read: [user, serviceaccount, role#assignee]
    define update: [user, serviceaccount, role#assignee]
-    define delete: [user, serviceaccount, role#assignee]  
+    define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]

 type anonymous

@@ -26,6 +28,7 @@ type role
    define read: [user, serviceaccount, role#assignee]
    define update: [user, serviceaccount, role#assignee]
    define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]

 type metaresources
  relations
--- a/ee/authz/openfgaserver/server.go
+++ b/ee/authz/openfgaserver/server.go
@@ -7,6 +7,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 )
@@ -33,18 +34,18 @@ func (server *Server) Stop(ctx context.Context) error {
 	return server.pkgAuthzService.Stop(ctx)
 }

-func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
 	subject := ""
 	switch claims.Principal {
 	case authtypes.PrincipalUser:
-		user, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
+		user, err := authtypes.NewSubject(coretypes.NewResourceUser(), claims.UserID, orgID, nil)
 		if err != nil {
 			return err
 		}

 		subject = user
 	case authtypes.PrincipalServiceAccount:
-		serviceAccount, err := authtypes.NewSubject(authtypes.TypeableServiceAccount, claims.ServiceAccountID, orgID, nil)
+		serviceAccount, err := authtypes.NewSubject(coretypes.NewResourceServiceAccount(), claims.ServiceAccountID, orgID, nil)
 		if err != nil {
 			return err
 		}
@@ -52,10 +53,7 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 		subject = serviceAccount
 	}

-	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
+	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)

 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -76,16 +74,13 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 	return errors.Newf(errors.TypeForbidden, authtypes.ErrCodeAuthZForbidden, "subjects are not authorized for requested access")
 }

-func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
+func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
+	subject, err := authtypes.NewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
 	if err != nil {
 		return err
 	}

-	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
+	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)

 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -110,7 +105,7 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }

-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
+func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
 	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
 }

--- a/ee/authz/openfgaserver/sqlstore.go
+++ b/ee/authz/openfgaserver/sqlstore.go
@@ -2,6 +2,7 @@ package openfgaserver

 import (
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
+	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/openfga/openfga/pkg/storage"
@@ -10,11 +11,11 @@ import (
 	"github.com/openfga/openfga/pkg/storage/sqlite"
 )

-func NewSQLStore(store sqlstore.SQLStore) (storage.OpenFGADatastore, error) {
+func NewSQLStore(store sqlstore.SQLStore, config authz.Config) (storage.OpenFGADatastore, error) {
 	switch store.BunDB().Dialect().Name().String() {
 	case "sqlite":
 		return sqlite.NewWithDB(store.SQLDB(), &sqlcommon.Config{
-			MaxTuplesPerWriteField: 100,
+			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
 			MaxTypesPerModelField:  100,
 		})
 	case "pg":
@@ -24,7 +25,7 @@ func NewSQLStore(store sqlstore.SQLStore) (storage.OpenFGADatastore, error) {
 		}

 		return postgres.NewWithDB(pgStore.Pool(), nil, &sqlcommon.Config{
-			MaxTuplesPerWriteField: 100,
+			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
 			MaxTypesPerModelField:  100,
 		})
 	}
--- a/ee/modules/dashboard/impldashboard/module.go
+++ b/ee/modules/dashboard/impldashboard/module.go
@@ -14,7 +14,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
@@ -88,7 +88,7 @@ func (module *module) GetDashboardByPublicID(ctx context.Context, id valuer.UUID
 	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
 }

-func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]authtypes.Selector, valuer.UUID, error) {
+func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
 	orgIDs := make([]string, len(orgs))
 	for idx, org := range orgs {
 		orgIDs[idx] = org.ID.StringValue()
@@ -99,9 +99,9 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 		return nil, valuer.UUID{}, err
 	}

-	return []authtypes.Selector{
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, id.StringValue()),
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, authtypes.WildCardSelectorString),
+	return []coretypes.Selector{
+		coretypes.TypeMetaResource.MustSelector(id.StringValue()),
+		coretypes.TypeMetaResource.MustSelector(coretypes.WildCardSelectorString),
 	}, storableDashboard.OrgID, nil
 }

@@ -217,28 +217,6 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }

-func (module *module) MustGetTypeables() []authtypes.Typeable {
-	return module.pkgDashboardModule.MustGetTypeables()
-}
-
-func (module *module) MustGetManagedRoleTransactions() map[string][]*authtypes.Transaction {
-	return map[string][]*authtypes.Transaction{
-		authtypes.SigNozAnonymousRoleName: {
-			{
-				ID:       valuer.GenerateUUID(),
-				Relation: authtypes.RelationRead,
-				Object: *authtypes.MustNewObject(
-					authtypes.Resource{
-						Type: authtypes.TypeMetaResource,
-						Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-					},
-					authtypes.MustNewSelector(authtypes.TypeMetaResource, "*"),
-				),
-			},
-		},
-	}
-}
-
 func (module *module) deletePublic(ctx context.Context, _ valuer.UUID, dashboardID valuer.UUID) error {
 	return module.store.DeletePublic(ctx, dashboardID.StringValue())
 }
--- a/ee/query-service/app/api/queryrange.go
+++ b/ee/query-service/app/api/queryrange.go
@@ -6,6 +6,8 @@ import (
 	"io"
 	"net/http"

+	"log/slog"
+
 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
@@ -15,7 +17,6 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"log/slog"
 )

 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
@@ -137,4 +138,3 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 		aH.QueryRangeV4(w, r)
 	}
 }
-
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -42,8 +42,8 @@ import (

 // Server runs HTTP, Mux and a grpc server
 type Server struct {
-	config      signoz.Config
-	signoz      *signoz.SigNoz
+	config signoz.Config
+	signoz *signoz.SigNoz

 	// public http router
 	httpConn     net.Listener
@@ -148,7 +148,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {

 	s := &Server{
 		config:             config,
-		signoz:       signoz,
+		signoz:             signoz,
 		httpHostPort:       baseconst.HTTPHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
@@ -317,4 +317,3 @@ func (s *Server) Stop(ctx context.Context) error {

 	return nil
 }
-
--- a/frontend/.oxfmtrc.json
+++ b/frontend/.oxfmtrc.json
@@ -23,6 +23,11 @@
    "**/*.md",
    "**/*.json",
    "src/parser/**",
-    "src/TraceOperator/parser/**"
+    "src/TraceOperator/parser/**",
+    ".claude",
+    ".opencode",
+    "dist",
+    "playwright-report",
+    ".temp_cache"
  ]
 }
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -3,6 +3,7 @@ import type { Config } from '@jest/types';
 const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';

 const config: Config.InitialOptions = {
+	maxWorkers: '50%',
 	silent: true,
 	clearMocks: true,
 	coverageDirectory: 'coverage',
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,8 +23,7 @@
    "commitlint": "commitlint --edit $1",
    "test": "jest",
    "test:changedsince": "jest --changedSince=main --coverage --silent",
-    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-    "generate:permissions-type": "node scripts/generate-permissions-type.cjs"
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
  },
  "engines": {
    "node": ">=22.0.0"
@@ -121,10 +120,12 @@
    "react-helmet-async": "1.3.0",
    "react-hook-form": "7.71.2",
    "react-i18next": "^11.16.1",
+    "react-json-tree": "^0.20.0",
    "react-lottie": "1.2.10",
    "react-markdown": "8.0.7",
    "react-query": "3.39.3",
    "react-redux": "^7.2.2",
+    "react-rnd": "^10.5.3",
    "react-router-dom": "^5.2.0",
    "react-router-dom-v5-compat": "6.27.0",
    "react-syntax-highlighter": "15.5.0",
@@ -240,10 +241,12 @@
  },
  "lint-staged": {
    "*.(js|jsx|ts|tsx)": [
-      "oxlint --fix",
-      "oxfmt --write",
      "sh -c tsgo --noEmit"
    ],
+    "*.(js|jsx|ts|tsx|scss|css)": [
+      "oxlint --fix --quiet --no-error-on-unmatched-pattern",
+      "oxfmt --write"
+    ],
    "*.(scss|css)": [
      "stylelint"
    ]
--- a/frontend/scripts/generate-permissions-type.cjs
+++ b/frontend/scripts/generate-permissions-type.cjs
@@ -1,199 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const axios = require('axios');
-
-const PERMISSIONS_TYPE_FILE = path.join(
-	__dirname,
-	'../src/hooks/useAuthZ/permissions.type.ts',
-);
-
-const SIGNOZ_INTEGRATION_IMAGE = 'signoz:integration';
-const LOCAL_BACKEND_URL = 'http://localhost:8080';
-
-function log(message) {
-	console.log(`[generate-permissions-type] ${message}`);
-}
-
-function getBackendUrlFromDocker() {
-	try {
-		const output = execSync(
-			`docker ps --filter "ancestor=${SIGNOZ_INTEGRATION_IMAGE}" --format "{{.Ports}}"`,
-			{ encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] },
-		).trim();
-
-		if (!output) {
-			return null;
-		}
-
-		const portMatch = output.match(/0\.0\.0\.0:(\d+)->8080\/tcp/);
-		if (portMatch) {
-			return `http://localhost:${portMatch[1]}`;
-		}
-
-		const ipv6Match = output.match(/:::(\d+)->8080\/tcp/);
-		if (ipv6Match) {
-			return `http://localhost:${ipv6Match[1]}`;
-		}
-	} catch (err) {
-		log(`Warning: Could not get port from docker: ${err.message}`);
-	}
-	return null;
-}
-
-async function checkBackendHealth(url, maxAttempts = 3, delayMs = 1000) {
-	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-		try {
-			await axios.get(`${url}/api/v1/health`, {
-				timeout: 5000,
-				validateStatus: (status) => status === 200,
-			});
-			return true;
-		} catch (err) {
-			if (attempt < maxAttempts) {
-				await new Promise((r) => setTimeout(r, delayMs));
-			}
-		}
-	}
-	return false;
-}
-
-async function discoverBackendUrl() {
-	const dockerUrl = getBackendUrlFromDocker();
-	if (dockerUrl) {
-		log(`Found ${SIGNOZ_INTEGRATION_IMAGE} container, trying ${dockerUrl}...`);
-		if (await checkBackendHealth(dockerUrl)) {
-			log(`Backend found at ${dockerUrl} (from py-test-setup)`);
-			return dockerUrl;
-		}
-		log(`Backend at ${dockerUrl} is not responding`);
-	}
-
-	log(`Trying local backend at ${LOCAL_BACKEND_URL}...`);
-	if (await checkBackendHealth(LOCAL_BACKEND_URL)) {
-		log(`Backend found at ${LOCAL_BACKEND_URL}`);
-		return LOCAL_BACKEND_URL;
-	}
-
-	return null;
-}
-
-async function fetchResources(backendUrl) {
-	log('Fetching resources from API...');
-	const resourcesUrl = `${backendUrl}/api/v1/authz/resources`;
-
-	const { data: response } = await axios.get(resourcesUrl);
-
-	return response;
-}
-
-function transformResponse(apiResponse) {
-	if (!apiResponse.data) {
-		throw new Error('Invalid API response: missing data field');
-	}
-
-	const { resources, relations } = apiResponse.data;
-
-	return {
-		status: apiResponse.status || 'success',
-		data: {
-			resources: resources,
-			relations: relations,
-		},
-	};
-}
-
-function generateTypeScriptFile(data) {
-	const resourcesStr = data.data.resources
-		.map(
-			(r) =>
-				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t},`,
-		)
-		.join('\n');
-
-	const relationsStr = Object.entries(data.data.relations)
-		.map(
-			([type, relations]) =>
-				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}],`,
-		)
-		.join('\n');
-
-	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
-export default {
-\tstatus: '${data.status}',
-\tdata: {
-\t\tresources: [
-${resourcesStr}
-\t\t],
-\t\trelations: {
-${relationsStr}
-\t\t},
-\t},
-} as const;
-`;
-}
-
-async function main() {
-	try {
-		log('Starting permissions type generation...');
-
-		const backendUrl = await discoverBackendUrl();
-
-		if (!backendUrl) {
-			console.error('\n' + '='.repeat(80));
-			console.error('ERROR: No running SigNoz backend found!');
-			console.error('='.repeat(80));
-			console.error(
-				'\nThe permissions type generator requires a running SigNoz backend.',
-			);
-			console.error('\nFor local development, start the backend with:');
-			console.error('  make go-run-enterprise');
-			console.error(
-				'\nFor CI or integration testing, start the test environment with:',
-			);
-			console.error('  make py-test-setup');
-			console.error(
-				'\nIf running in CI and seeing this error, check that the py-test-setup',
-			);
-			console.error('step completed successfully before this step runs.');
-			console.error('='.repeat(80) + '\n');
-			process.exit(1);
-		}
-
-		log('Fetching resources...');
-		const apiResponse = await fetchResources(backendUrl);
-
-		log('Transforming response...');
-		const transformed = transformResponse(apiResponse);
-
-		log('Generating TypeScript file...');
-		const content = generateTypeScriptFile(transformed);
-
-		log(`Writing to ${PERMISSIONS_TYPE_FILE}...`);
-		fs.writeFileSync(PERMISSIONS_TYPE_FILE, content, 'utf8');
-
-		const rootDir = path.join(__dirname, '../..');
-		const relativePath = path.relative(
-			path.join(rootDir, 'frontend'),
-			PERMISSIONS_TYPE_FILE,
-		);
-		log('Linting generated file...');
-		execSync(`cd frontend && yarn oxlint ${relativePath}`, {
-			cwd: rootDir,
-			stdio: 'inherit',
-		});
-
-		log('Successfully generated permissions.type.ts');
-	} catch (error) {
-		log(`Error: ${error.message}`);
-		process.exit(1);
-	}
-}
-
-if (require.main === module) {
-	main();
-}
-
-module.exports = { main };
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -65,6 +65,13 @@ export const TraceDetail = Loadable(
 		),
 );

+export const TraceDetailV3 = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
+		),
+);
+
 export const UsageExplorerPage = Loadable(
 	() => import(/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage'),
 );
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -48,6 +48,7 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
+	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -138,6 +139,9 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
+	// V3 trace details is gated until release: /trace serves V2 (public),
+	// /trace-old serves V3 (URL-only access). Flip the two `component`
+	// values back to release V3.
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -145,6 +149,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
+	{
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+		component: TraceDetailV3,
+		isPrivate: true,
+		key: 'TRACE_DETAIL_OLD',
+	},
 	{
 		path: ROUTES.SETTINGS,
 		exact: false,
--- a/frontend/src/api/generated/services/authz/index.ts
+++ b/frontend/src/api/generated/services/authz/index.ts
@@ -4,23 +4,16 @@
 * * regenerate with 'yarn generate:api'
 * SigNoz
 */
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import type {
-	InvalidateOptions,
 	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
 } from 'react-query';

 import type {
 	AuthtypesTransactionDTO,
 	AuthzCheck200,
-	AuthzResources200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';

@@ -110,88 +103,3 @@ export const useAuthzCheck = <

 	return useMutation(mutationOptions);
 };
-/**
- * Gets all the available resources
- * @summary Get resources
- */
-export const authzResources = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<AuthzResources200>({
-		url: `/api/v1/authz/resources`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getAuthzResourcesQueryKey = () => {
-	return [`/api/v1/authz/resources`] as const;
-};
-
-export const getAuthzResourcesQueryOptions = <
-	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getAuthzResourcesQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof authzResources>>> = ({
-		signal,
-	}) => authzResources(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type AuthzResourcesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof authzResources>>
->;
-export type AuthzResourcesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get resources
- */
-
-export function useAuthzResources<
-	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getAuthzResourcesQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get resources
- */
-export const invalidateAuthzResources = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getAuthzResourcesQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
--- a/frontend/src/api/generated/services/inframonitoring/index.ts
+++ b/frontend/src/api/generated/services/inframonitoring/index.ts
@@ -13,8 +13,10 @@ import type {

 import type {
 	InframonitoringtypesPostableHostsDTO,
+	InframonitoringtypesPostableNodesDTO,
 	InframonitoringtypesPostablePodsDTO,
 	ListHosts200,
+	ListNodes200,
 	ListPods200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -107,7 +109,91 @@ export const useListHosts = <
 	return useMutation(mutationOptions);
 };
 /**
- * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts: pendingPodCount, runningPodCount, succeededPodCount, failedPodCount, unknownPodCount derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes nodes with key metrics: CPU usage, CPU allocatable, memory working set, memory allocatable, per-group nodeCountsByReadiness ({ ready, notReady } from each node's latest k8s.node.condition_ready in the window) and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } for pods scheduled on the listed nodes). Each node includes metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is 'list' for the default k8s.node.name grouping (each row is one node with its current condition string: ready / not_ready / no_data) or 'grouped_list' for custom groupBy keys (each row aggregates nodes in the group; condition stays no_data). Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1 as a sentinel when no data is available for that field.
+ * @summary List Nodes for Infra Monitoring
+ */
+export const listNodes = (
+	inframonitoringtypesPostableNodesDTO: BodyType<InframonitoringtypesPostableNodesDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListNodes200>({
+		url: `/api/v2/infra_monitoring/nodes`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: inframonitoringtypesPostableNodesDTO,
+		signal,
+	});
+};
+
+export const getListNodesMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof listNodes>>,
+		TError,
+		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof listNodes>>,
+	TError,
+	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+	TContext
+> => {
+	const mutationKey = ['listNodes'];
+	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 listNodes>>,
+		{ data: BodyType<InframonitoringtypesPostableNodesDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return listNodes(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ListNodesMutationResult = NonNullable<
+	Awaited<ReturnType<typeof listNodes>>
+>;
+export type ListNodesMutationBody =
+	BodyType<InframonitoringtypesPostableNodesDTO>;
+export type ListNodesMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List Nodes for Infra Monitoring
+ */
+export const useListNodes = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof listNodes>>,
+		TError,
+		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof listNodes>>,
+	TError,
+	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+	TContext
+> => {
+	const mutationOptions = getListNodesMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown/no_data), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts under podCountsByPhase: { pending, running, succeeded, failed, unknown } derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
 * @summary List Pods for Infra Monitoring
 */
 export const listPods = (
--- a/frontend/src/api/generated/services/role/index.ts
+++ b/frontend/src/api/generated/services/role/index.ts
@@ -18,9 +18,9 @@ import type {
 } from 'react-query';

 import type {
-	AuthtypesPatchableObjectsDTO,
 	AuthtypesPatchableRoleDTO,
 	AuthtypesPostableRoleDTO,
+	CoretypesPatchableObjectsDTO,
 	CreateRole201,
 	DeleteRolePathParameters,
 	GetObjects200,
@@ -571,13 +571,13 @@ export const invalidateGetObjects = async (
 */
 export const patchObjects = (
 	{ id, relation }: PatchObjectsPathParameters,
-	authtypesPatchableObjectsDTO: BodyType<AuthtypesPatchableObjectsDTO>,
+	coretypesPatchableObjectsDTO: BodyType<CoretypesPatchableObjectsDTO>,
 ) => {
 	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
-		data: authtypesPatchableObjectsDTO,
+		data: coretypesPatchableObjectsDTO,
 	});
 };

@@ -590,7 +590,7 @@ export const getPatchObjectsMutationOptions = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -599,7 +599,7 @@ export const getPatchObjectsMutationOptions = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<AuthtypesPatchableObjectsDTO>;
+		data: BodyType<CoretypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {
@@ -616,7 +616,7 @@ export const getPatchObjectsMutationOptions = <
 		Awaited<ReturnType<typeof patchObjects>>,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -630,7 +630,7 @@ export const getPatchObjectsMutationOptions = <
 export type PatchObjectsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof patchObjects>>
 >;
-export type PatchObjectsMutationBody = BodyType<AuthtypesPatchableObjectsDTO>;
+export type PatchObjectsMutationBody = BodyType<CoretypesPatchableObjectsDTO>;
 export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -645,7 +645,7 @@ export const usePatchObjects = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -654,7 +654,7 @@ export const usePatchObjects = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<AuthtypesPatchableObjectsDTO>;
+		data: BodyType<CoretypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -1668,33 +1668,6 @@ export interface AuthtypesGettableAuthDomainDTO {
 	updatedAt?: Date;
 }

-export interface AuthtypesGettableObjectsDTO {
-	resource: AuthtypesResourceDTO;
-	/**
-	 * @type array
-	 */
-	selectors: string[];
-}
-
-/**
- * @nullable
- */
-export type AuthtypesGettableResourcesDTORelations = {
-	[key: string]: string[];
-} | null;
-
-export interface AuthtypesGettableResourcesDTO {
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	relations: AuthtypesGettableResourcesDTORelations;
-	/**
-	 * @type array
-	 */
-	resources: AuthtypesResourceDTO[];
-}
-
 export interface AuthtypesGettableTokenDTO {
 	/**
 	 * @type string
@@ -1719,11 +1692,8 @@ export interface AuthtypesGettableTransactionDTO {
 	 * @type boolean
 	 */
 	authorized: boolean;
-	object: AuthtypesObjectDTO;
-	/**
-	 * @type string
-	 */
-	relation: string;
+	object: CoretypesObjectDTO;
+	relation: AuthtypesRelationDTO;
 }

 export type AuthtypesGoogleConfigDTODomainToAdminEmail = {
@@ -1797,14 +1767,6 @@ export interface AuthtypesOIDCConfigDTO {
 	issuerAlias?: string;
 }

-export interface AuthtypesObjectDTO {
-	resource: AuthtypesResourceDTO;
-	/**
-	 * @type string
-	 */
-	selector: string;
-}
-
 export interface AuthtypesOrgSessionContextDTO {
 	authNSupport?: AuthtypesAuthNSupportDTO;
 	/**
@@ -1822,19 +1784,6 @@ export interface AuthtypesPasswordAuthNSupportDTO {
 	provider?: AuthtypesAuthNProviderDTO;
 }

-export interface AuthtypesPatchableObjectsDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	additions: AuthtypesGettableObjectsDTO[] | null;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	deletions: AuthtypesGettableObjectsDTO[] | null;
-}
-
 export interface AuthtypesPatchableRoleDTO {
 	/**
 	 * @type string
@@ -1883,17 +1832,14 @@ export interface AuthtypesPostableRotateTokenDTO {
 	refreshToken?: string;
 }

-export interface AuthtypesResourceDTO {
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	type: string;
+export enum AuthtypesRelationDTO {
+	create = 'create',
+	read = 'read',
+	update = 'update',
+	delete = 'delete',
+	list = 'list',
+	assignee = 'assignee',
 }
-
 export interface AuthtypesRoleDTO {
 	/**
 	 * @type string
@@ -1983,11 +1929,8 @@ export interface AuthtypesSessionContextDTO {
 }

 export interface AuthtypesTransactionDTO {
-	object: AuthtypesObjectDTO;
-	/**
-	 * @type string
-	 */
-	relation: string;
+	object: CoretypesObjectDTO;
+	relation: AuthtypesRelationDTO;
 }

 export interface AuthtypesUpdatableAuthDomainDTO {
@@ -4173,6 +4116,52 @@ export interface ConfigWechatConfigDTO {
 	to_user?: string;
 }

+export interface CoretypesObjectDTO {
+	resource: CoretypesResourceRefDTO;
+	/**
+	 * @type string
+	 */
+	selector: string;
+}
+
+export interface CoretypesObjectGroupDTO {
+	resource: CoretypesResourceRefDTO;
+	/**
+	 * @type array
+	 */
+	selectors: string[];
+}
+
+export interface CoretypesPatchableObjectsDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	additions: CoretypesObjectGroupDTO[] | null;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	deletions: CoretypesObjectGroupDTO[] | null;
+}
+
+export interface CoretypesResourceRefDTO {
+	/**
+	 * @type string
+	 */
+	kind: string;
+	type: CoretypesTypeDTO;
+}
+
+export enum CoretypesTypeDTO {
+	user = 'user',
+	serviceaccount = 'serviceaccount',
+	anonymous = 'anonymous',
+	role = 'role',
+	organization = 'organization',
+	metaresource = 'metaresource',
+	metaresources = 'metaresources',
+}
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -4590,7 +4579,7 @@ export interface InframonitoringtypesHostFilterDTO {
 * @nullable
 */
 export type InframonitoringtypesHostRecordDTOMeta = {
-	[key: string]: unknown;
+	[key: string]: string;
 } | null;

 export interface InframonitoringtypesHostRecordDTO {
@@ -4663,35 +4652,127 @@ export interface InframonitoringtypesHostsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }

+export enum InframonitoringtypesNodeConditionDTO {
+	ready = 'ready',
+	not_ready = 'not_ready',
+	no_data = 'no_data',
+}
+export interface InframonitoringtypesNodeCountsByReadinessDTO {
+	/**
+	 * @type integer
+	 */
+	notReady: number;
+	/**
+	 * @type integer
+	 */
+	ready: number;
+}
+
+/**
+ * @nullable
+ */
+export type InframonitoringtypesNodeRecordDTOMeta = {
+	[key: string]: string;
+} | null;
+
+export interface InframonitoringtypesNodeRecordDTO {
+	condition: InframonitoringtypesNodeConditionDTO;
+	/**
+	 * @type object
+	 * @nullable true
+	 */
+	meta: InframonitoringtypesNodeRecordDTOMeta;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	nodeCPU: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	nodeCPUAllocatable: number;
+	nodeCountsByReadiness: InframonitoringtypesNodeCountsByReadinessDTO;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	nodeMemory: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	nodeMemoryAllocatable: number;
+	/**
+	 * @type string
+	 */
+	nodeName: string;
+	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
+}
+
+export interface InframonitoringtypesNodesDTO {
+	/**
+	 * @type boolean
+	 */
+	endTimeBeforeRetention: boolean;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	records: InframonitoringtypesNodeRecordDTO[] | null;
+	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
+	/**
+	 * @type integer
+	 */
+	total: number;
+	type: InframonitoringtypesResponseTypeDTO;
+	warning?: Querybuildertypesv5QueryWarnDataDTO;
+}
+
+export interface InframonitoringtypesPodCountsByPhaseDTO {
+	/**
+	 * @type integer
+	 */
+	failed: number;
+	/**
+	 * @type integer
+	 */
+	pending: number;
+	/**
+	 * @type integer
+	 */
+	running: number;
+	/**
+	 * @type integer
+	 */
+	succeeded: number;
+	/**
+	 * @type integer
+	 */
+	unknown: number;
+}
+
 export enum InframonitoringtypesPodPhaseDTO {
 	pending = 'pending',
 	running = 'running',
 	succeeded = 'succeeded',
 	failed = 'failed',
 	unknown = 'unknown',
-	'' = '',
+	no_data = 'no_data',
 }
 /**
 * @nullable
 */
 export type InframonitoringtypesPodRecordDTOMeta = {
-	[key: string]: unknown;
+	[key: string]: string;
 } | null;

 export interface InframonitoringtypesPodRecordDTO {
-	/**
-	 * @type integer
-	 */
-	failedPodCount: number;
 	/**
 	 * @type object
 	 * @nullable true
 	 */
 	meta: InframonitoringtypesPodRecordDTOMeta;
-	/**
-	 * @type integer
-	 */
-	pendingPodCount: number;
 	/**
 	 * @type integer
 	 * @format int64
@@ -4712,6 +4793,7 @@ export interface InframonitoringtypesPodRecordDTO {
 	 * @format double
 	 */
 	podCPURequest: number;
+	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
 	/**
 	 * @type number
 	 * @format double
@@ -4732,18 +4814,6 @@ export interface InframonitoringtypesPodRecordDTO {
 	 * @type string
 	 */
 	podUID: string;
-	/**
-	 * @type integer
-	 */
-	runningPodCount: number;
-	/**
-	 * @type integer
-	 */
-	succeededPodCount: number;
-	/**
-	 * @type integer
-	 */
-	unknownPodCount: number;
 }

 export interface InframonitoringtypesPodsDTO {
@@ -4793,6 +4863,34 @@ export interface InframonitoringtypesPostableHostsDTO {
 	start: number;
 }

+export interface InframonitoringtypesPostableNodesDTO {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	end: number;
+	filter?: Querybuildertypesv5FilterDTO;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	/**
+	 * @type integer
+	 */
+	limit: number;
+	/**
+	 * @type integer
+	 */
+	offset?: number;
+	orderBy?: Querybuildertypesv5OrderByDTO;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	start: number;
+}
+
 export interface InframonitoringtypesPostablePodsDTO {
 	/**
 	 * @type integer
@@ -7714,6 +7812,11 @@ export interface TracedetailtypesWaterfallSpanDTO {
 	 * @minimum 0
 	 */
 	sub_tree_node_count?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	time_unix?: number;
 	/**
 	 * @type string
 	 */
@@ -8105,14 +8208,6 @@ export type AuthzCheck200 = {
 	status: string;
 };

-export type AuthzResources200 = {
-	data: AuthtypesGettableResourcesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListChannels200 = {
 	/**
 	 * @type array
@@ -8738,7 +8833,7 @@ export type GetObjects200 = {
 	/**
 	 * @type array
 	 */
-	data: AuthtypesGettableObjectsDTO[];
+	data: CoretypesObjectGroupDTO[];
 	/**
 	 * @type string
 	 */
@@ -9147,6 +9242,14 @@ export type ListHosts200 = {
 	status: string;
 };

+export type ListNodes200 = {
+	data: InframonitoringtypesNodesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListPods200 = {
 	data: InframonitoringtypesPodsDTO;
 	/**
--- a/frontend/src/api/trace/getTraceV3.tsx
+++ b/frontend/src/api/trace/getTraceV3.tsx
@@ -0,0 +1,72 @@
+import { ApiV3Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
+	SpanV3,
+} from 'types/api/trace/getTraceV3';
+
+const getTraceV3 = async (
+	props: GetTraceV3PayloadProps,
+): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+	let uncollapsedSpans = [...props.uncollapsedSpans];
+	if (!props.isSelectedSpanIDUnCollapsed) {
+		uncollapsedSpans = uncollapsedSpans.filter(
+			(node) => node !== props.selectedSpanId,
+		);
+	} else if (
+		props.selectedSpanId &&
+		!uncollapsedSpans.includes(props.selectedSpanId)
+	) {
+		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
+		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
+		uncollapsedSpans.push(props.selectedSpanId);
+	}
+	const postData: GetTraceV3PayloadProps = {
+		...props,
+		uncollapsedSpans,
+		limit: 10000,
+	};
+	const response = await axios.post<GetTraceV3SuccessResponse>(
+		`/traces/${props.traceId}/waterfall`,
+		omit(postData, 'traceId'),
+	);
+
+	// V3 API wraps response in { status, data }
+	const rawPayload = (response.data as any).data || response.data;
+
+	// Derive 'service.name' from resource for convenience — only derived field
+	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
+		...span,
+		'service.name': span.resource?.['service.name'] || '',
+	}));
+
+	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
+	// Convert by using the first span's timestamp as the base if there's a mismatch.
+	let { startTimestampMillis, endTimestampMillis } = rawPayload;
+	if (
+		spans.length > 0 &&
+		spans[0].timestamp > 0 &&
+		startTimestampMillis < spans[0].timestamp / 10
+	) {
+		const durationMillis = endTimestampMillis - startTimestampMillis;
+		startTimestampMillis = spans[0].timestamp;
+		endTimestampMillis = startTimestampMillis + durationMillis;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: {
+			...rawPayload,
+			spans,
+			startTimestampMillis,
+			endTimestampMillis,
+		},
+	};
+};
+
+export default getTraceV3;
--- a/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss
+++ b/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss
@@ -0,0 +1,37 @@
+.details-header {
+	// ghost + secondary missing hover bg token in @signozhq/button
+	--button-ghost-hover-background: var(--l3-background);
+
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 0 12px;
+	border-bottom: 1px solid var(--l1-border);
+	height: 36px;
+	background: var(--l2-background);
+
+	&__title {
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--l1-foreground);
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex-shrink: 0;
+	}
+
+	&__nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+}
--- a/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
+++ b/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/ui';
+import { X } from '@signozhq/icons';
+
+import './DetailsHeader.styles.scss';
+
+export interface HeaderAction {
+	key: string;
+	component: ReactNode; // check later if we can use direct btn itself or not.
+}
+
+export interface DetailsHeaderProps {
+	title: string;
+	onClose: () => void;
+	actions?: HeaderAction[];
+	closePosition?: 'left' | 'right';
+	className?: string;
+}
+
+function DetailsHeader({
+	title,
+	onClose,
+	actions,
+	closePosition = 'right',
+	className,
+}: DetailsHeaderProps): JSX.Element {
+	const closeButton = (
+		<Button
+			variant="ghost"
+			size="icon"
+			color="secondary"
+			onClick={onClose}
+			aria-label="Close"
+			prefix={<X size={14} />}
+		></Button>
+	);
+
+	return (
+		<div className={`details-header ${className || ''}`}>
+			{closePosition === 'left' && closeButton}
+
+			<span className="details-header__title">{title}</span>
+
+			{actions && (
+				<div className="details-header__actions">
+					{actions.map((action) => (
+						<div key={action.key}>{action.component}</div>
+					))}
+				</div>
+			)}
+
+			{closePosition === 'right' && closeButton}
+		</div>
+	);
+}
+
+export default DetailsHeader;
--- a/frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss
+++ b/frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss
@@ -0,0 +1,7 @@
+.details-panel-drawer {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+}
--- a/frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx
+++ b/frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx
@@ -0,0 +1,35 @@
+import { DrawerWrapper } from '@signozhq/ui';
+
+import './DetailsPanelDrawer.styles.scss';
+
+interface DetailsPanelDrawerProps {
+	isOpen: boolean;
+	onClose: () => void;
+	children: React.ReactNode;
+	className?: string;
+}
+
+function DetailsPanelDrawer({
+	isOpen,
+	onClose,
+	children,
+	className,
+}: DetailsPanelDrawerProps): JSX.Element {
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			showOverlay={false}
+			className={`details-panel-drawer ${className || ''}`}
+		>
+			<div className="details-panel-drawer__body">{children}</div>
+		</DrawerWrapper>
+	);
+}
+
+export default DetailsPanelDrawer;
--- a/frontend/src/components/DetailsPanel/index.ts
+++ b/frontend/src/components/DetailsPanel/index.ts
@@ -0,0 +1,8 @@
+export type {
+	DetailsHeaderProps,
+	HeaderAction,
+} from './DetailsHeader/DetailsHeader';
+export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
+export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
+export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
+export { default as useDetailsPanel } from './useDetailsPanel';
--- a/frontend/src/components/DetailsPanel/types.ts
+++ b/frontend/src/components/DetailsPanel/types.ts
@@ -0,0 +1,10 @@
+export interface DetailsPanelState {
+	isOpen: boolean;
+	open: () => void;
+	close: () => void;
+}
+
+export interface UseDetailsPanelOptions {
+	entityId: string | undefined;
+	onClose?: () => void;
+}
--- a/frontend/src/components/DetailsPanel/useDetailsPanel.ts
+++ b/frontend/src/components/DetailsPanel/useDetailsPanel.ts
@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DetailsPanelState, UseDetailsPanelOptions } from './types';
+
+function useDetailsPanel({
+	entityId,
+	onClose,
+}: UseDetailsPanelOptions): DetailsPanelState {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const prevEntityIdRef = useRef<string>('');
+
+	useEffect(() => {
+		const currentId = entityId || '';
+		if (currentId && currentId !== prevEntityIdRef.current) {
+			setIsOpen(true);
+		}
+		prevEntityIdRef.current = currentId;
+	}, [entityId]);
+
+	const open = useCallback(() => setIsOpen(true), []);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		onClose?.();
+	}, [onClose]);
+
+	return { isOpen, open, close };
+}
+
+export default useDetailsPanel;
--- a/frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx
+++ b/frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx
@@ -55,7 +55,7 @@ describe('GuardAuthZ', () => {
 		);

 		render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -79,7 +79,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="read"
-				object="dashboard:*"
+				object="role:*"
 				fallbackOnLoading={<LoadingFallback />}
 			>
 				<TestChild />
@@ -102,7 +102,7 @@ describe('GuardAuthZ', () => {
 		);

 		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -121,11 +121,7 @@ describe('GuardAuthZ', () => {
 		);

 		render(
-			<GuardAuthZ
-				relation="read"
-				object="dashboard:*"
-				fallbackOnError={ErrorFallback}
-			>
+			<GuardAuthZ relation="read" object="role:*" fallbackOnError={ErrorFallback}>
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -155,7 +151,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="read"
-				object="dashboard:*"
+				object="role:*"
 				fallbackOnError={errorFallbackWithCapture}
 			>
 				<TestChild />
@@ -178,7 +174,7 @@ describe('GuardAuthZ', () => {
 		);

 		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -201,7 +197,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="update"
-				object="dashboard:123"
+				object="role:123"
 				fallbackOnNoPermissions={NoPermissionFallback}
 			>
 				<TestChild />
@@ -224,7 +220,7 @@ describe('GuardAuthZ', () => {
 		);

 		const { container } = render(
-			<GuardAuthZ relation="update" object="dashboard:123">
+			<GuardAuthZ relation="update" object="role:123">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -244,7 +240,7 @@ describe('GuardAuthZ', () => {
 		);

 		const { container } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -257,7 +253,7 @@ describe('GuardAuthZ', () => {
 	});

 	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
-		const permission = buildPermission('update', 'dashboard:123');
+		const permission = buildPermission('update', 'role:123');

 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
@@ -269,7 +265,7 @@ describe('GuardAuthZ', () => {
 		render(
 			<GuardAuthZ
 				relation="update"
-				object="dashboard:123"
+				object="role:123"
 				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
 			>
 				<TestChild />
@@ -299,7 +295,7 @@ describe('GuardAuthZ', () => {
 		);

 		const { rerender } = render(
-			<GuardAuthZ relation="read" object="dashboard:*">
+			<GuardAuthZ relation="read" object="role:*">
 				<TestChild />
 			</GuardAuthZ>,
 		);
@@ -309,7 +305,7 @@ describe('GuardAuthZ', () => {
 		});

 		rerender(
-			<GuardAuthZ relation="delete" object="dashboard:456">
+			<GuardAuthZ relation="delete" object="role:456">
 				<TestChild />
 			</GuardAuthZ>,
 		);
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -17,7 +17,6 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
-import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
@@ -47,6 +46,7 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
+import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -562,7 +562,9 @@ function LogDetailInner({
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				)}
-				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+				{selectedView === VIEW_TYPES.JSON && (
+					<JsonView data={LogJsonData} height="68vh" />
+				)}

 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView
--- a/frontend/src/components/TanStackTableView/TanStackTable.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackTable.tsx
@@ -589,6 +589,16 @@ function TanStackTableInner<TData>(
 					{showPagination && pagination && (
 						<div className={cx(viewStyles.paginationContainer, paginationClassname)}>
 							{prefixPaginationContent}
+							{pagination.showTotalCount && effectiveTotalCount > 0 && (
+								<span
+									className={viewStyles.paginationTotalCount}
+									data-testid="pagination-total-count"
+								>
+									Showing {(page - 1) * limit + 1} -{' '}
+									{Math.min(page * limit, effectiveTotalCount)} of {effectiveTotalCount}
+									{pagination.totalCountLabel ? ` ${pagination.totalCountLabel}` : ''}
+								</span>
+							)}
 							<Pagination
 								current={page}
 								pageSize={limit}
--- a/frontend/src/components/TanStackTableView/TanStackTableView.module.scss
+++ b/frontend/src/components/TanStackTableView/TanStackTableView.module.scss
@@ -117,6 +117,10 @@
 	justify-content: flex-end;
 	gap: 12px;
 	margin-top: 12px;
+
+	ul {
+		padding: 0;
+	}
 }

 .paginationPageSize {
@@ -124,6 +128,11 @@
 	--combobox-trigger-height: 2rem;
 }

+.paginationTotalCount {
+	font-size: var(--periscope-font-size-base);
+	color: var(--l1-foreground);
+}
+
 .tanstackLoadingOverlay {
 	position: absolute;
 	left: 50%;
--- a/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
@@ -188,6 +188,87 @@ describe('TanStackTableView Integration', () => {
 				expect(screen.getByTestId('suffix-content')).toBeInTheDocument();
 			});
 		});
+
+		it('renders total count when showTotalCount is true', async () => {
+			renderTanStackTable({
+				props: {
+					pagination: {
+						total: 100,
+						defaultPage: 1,
+						defaultLimit: 10,
+						showTotalCount: true,
+					},
+				},
+			});
+
+			await waitFor(() => {
+				const totalCount = screen.getByTestId('pagination-total-count');
+				expect(totalCount).toBeInTheDocument();
+				expect(totalCount).toHaveTextContent('Showing 1 - 10 of 100');
+			});
+		});
+
+		it('renders total count with label when totalCountLabel is provided', async () => {
+			renderTanStackTable({
+				props: {
+					pagination: {
+						total: 50,
+						defaultPage: 1,
+						defaultLimit: 10,
+						showTotalCount: true,
+						totalCountLabel: 'Pods',
+					},
+				},
+			});
+
+			await waitFor(() => {
+				const totalCount = screen.getByTestId('pagination-total-count');
+				expect(totalCount).toBeInTheDocument();
+				expect(totalCount).toHaveTextContent('Showing 1 - 10 of 50 Pods');
+			});
+		});
+
+		it('does not render total count when showTotalCount is false', async () => {
+			renderTanStackTable({
+				props: {
+					pagination: {
+						total: 100,
+						defaultPage: 1,
+						defaultLimit: 10,
+						showTotalCount: false,
+					},
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByRole('navigation')).toBeInTheDocument();
+			});
+
+			expect(
+				screen.queryByTestId('pagination-total-count'),
+			).not.toBeInTheDocument();
+		});
+
+		it('does not render total count when total is 0', async () => {
+			renderTanStackTable({
+				props: {
+					pagination: {
+						total: 0,
+						defaultPage: 1,
+						defaultLimit: 10,
+						showTotalCount: true,
+					},
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByRole('table')).toBeInTheDocument();
+			});
+
+			expect(
+				screen.queryByTestId('pagination-total-count'),
+			).not.toBeInTheDocument();
+		});
 	});

 	describe('sorting', () => {
--- a/frontend/src/components/TanStackTableView/types.ts
+++ b/frontend/src/components/TanStackTableView/types.ts
@@ -115,6 +115,8 @@ export type PaginationProps = {
 	total: number;
 	defaultPage?: number;
 	defaultLimit?: number;
+	showTotalCount?: boolean;
+	totalCountLabel?: string;
 };

 export type TanstackTableQueryParamsConfig = {
--- a/frontend/src/components/TimelineV3/TimelineV3.styles.scss
+++ b/frontend/src/components/TimelineV3/TimelineV3.styles.scss
@@ -0,0 +1,20 @@
+.timeline-v3-container {
+	overflow: visible;
+	position: relative;
+}
+
+.timeline-v3-cursor-badge {
+	position: absolute;
+	top: 0;
+	transform: translateX(-50%);
+	background: var(--l3-background);
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	padding: 2px 8px;
+	font-size: 11px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+	white-space: nowrap;
+	pointer-events: none;
+	z-index: 1;
+}
--- a/frontend/src/components/TimelineV3/TimelineV3.tsx
+++ b/frontend/src/components/TimelineV3/TimelineV3.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { resolveTimeFromInterval } from 'components/TimelineV2/utils';
+import { toFixed } from 'utils/toFixed';
+
+import {
+	getIntervals,
+	getIntervalUnit,
+	getMinimumIntervalsBasedOnWidth,
+	Interval,
+} from './utils';
+
+import './TimelineV3.styles.scss';
+
+interface ITimelineV3Props {
+	startTimestamp: number;
+	endTimestamp: number;
+	timelineHeight: number;
+	offsetTimestamp: number;
+	/** Cursor X as a fraction of the timeline width (0–1). null = no cursor. */
+	cursorXPercent?: number | null;
+}
+
+function TimelineV3(props: ITimelineV3Props): JSX.Element {
+	const {
+		startTimestamp,
+		endTimestamp,
+		timelineHeight,
+		offsetTimestamp,
+		cursorXPercent,
+	} = props;
+	const [intervals, setIntervals] = useState<Interval[]>([]);
+	const [ref, { width }] = useMeasure<HTMLDivElement>();
+
+	const spread = endTimestamp - startTimestamp;
+
+	useEffect(() => {
+		if (spread < 0) {
+			return;
+		}
+
+		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
+		const intervalisedSpread = (spread / minIntervals) * 1.0;
+		const newIntervals = getIntervals(
+			intervalisedSpread,
+			spread,
+			offsetTimestamp,
+		);
+
+		setIntervals(newIntervals);
+	}, [startTimestamp, endTimestamp, width, offsetTimestamp, spread]);
+
+	// Compute cursor time label using the same unit as timeline ticks
+	const cursorLabel = useMemo(() => {
+		if (cursorXPercent == null || spread <= 0) {
+			return null;
+		}
+
+		const timeAtCursor = offsetTimestamp + cursorXPercent * spread;
+		const unit = getIntervalUnit(spread, offsetTimestamp);
+		const formatted = toFixed(resolveTimeFromInterval(timeAtCursor, unit), 2);
+		return `${formatted}${unit.name}`;
+	}, [cursorXPercent, spread, offsetTimestamp]);
+
+	if (endTimestamp < startTimestamp) {
+		console.error(
+			'endTimestamp cannot be less than startTimestamp',
+			startTimestamp,
+			endTimestamp,
+		);
+		return <></>;
+	}
+
+	const strokeColor = 'var(--l3-foreground)';
+	const svgHeight = timelineHeight * 2.5;
+	const cursorX = cursorXPercent != null ? cursorXPercent * width : null;
+
+	return (
+		<div ref={ref as never} className="timeline-v3-container">
+			<svg
+				width={width}
+				height={svgHeight}
+				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>
+
+			{/* Cursor time badge — DOM element for easy CSS styling */}
+			{cursorX !== null && cursorLabel && (
+				<div className="timeline-v3-cursor-badge" style={{ left: cursorX }}>
+					{cursorLabel}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default TimelineV3;
--- a/frontend/src/components/TimelineV3/utils.ts
+++ b/frontend/src/components/TimelineV3/utils.ts
@@ -0,0 +1,109 @@
+import {
+	IIntervalUnit,
+	Interval,
+	INTERVAL_UNITS,
+	resolveTimeFromInterval,
+} from 'components/TimelineV2/utils';
+import { toFixed } from 'utils/toFixed';
+
+export type { Interval };
+
+/**
+ * Select the interval unit matching the timeline's logic.
+ * Exported so crosshair labels use the same unit as timeline ticks.
+ */
+export function getIntervalUnit(
+	spread: number,
+	offsetTimestamp: number,
+): IIntervalUnit {
+	const minIntervals = 6;
+	const intervalSpread = spread / minIntervals;
+	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
+	let unit: IIntervalUnit = INTERVAL_UNITS[0];
+	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
+		if (valueForUnitSelection * INTERVAL_UNITS[idx].multiplier >= 1) {
+			unit = INTERVAL_UNITS[idx];
+			break;
+		}
+	}
+	return unit;
+}
+
+/** 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,
+		},
+	];
+
+	// Only show even-interval ticks — skip the trailing partial tick at the edge.
+	// The last even tick sits before the full width, so it doesn't conflict with
+	// span duration labels that may have sub-millisecond precision.
+	let elapsedIntervals = 0;
+
+	while (
+		elapsedIntervals + intervalSpreadNormalized <= baseSpread &&
+		intervals.length < 20
+	) {
+		elapsedIntervals += intervalSpreadNormalized;
+		const labelTime = offsetTimestamp + elapsedIntervals;
+
+		intervals.push({
+			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
+			percentage: (elapsedIntervals / baseSpread) * 100,
+		});
+	}
+
+	return intervals;
+}
--- a/frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx
+++ b/frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx
@@ -41,11 +41,7 @@ describe('createGuardedRoute', () => {
 			}),
 		);

-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');

 		const mockMatch = {
 			params: {},
@@ -79,7 +75,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'dashboard:{id}',
+			'role:{id}',
 		);

 		const mockMatch = {
@@ -113,7 +109,7 @@ describe('createGuardedRoute', () => {
 						relation: txn.relation,
 						object: {
 							resource: {
-								name: txn.object.resource.name,
+								kind: txn.object.resource.kind,
 								type: txn.object.resource.type,
 							},
 							selector: '123:456',
@@ -131,7 +127,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'update',
-			'dashboard:{id}:{version}',
+			'role:{id}:{version}',
 		);

 		const mockMatch = {
@@ -166,7 +162,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'dashboard:{id}',
+			'role:{id}',
 		);

 		const mockMatch = {
@@ -201,11 +197,7 @@ describe('createGuardedRoute', () => {
 			}),
 		);

-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');

 		const mockMatch = {
 			params: {},
@@ -236,11 +228,7 @@ describe('createGuardedRoute', () => {
 			}),
 		);

-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'dashboard:*',
-		);
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');

 		const mockMatch = {
 			params: {},
@@ -278,7 +266,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'update',
-			'dashboard:{id}',
+			'role:{id}',
 		);

 		const mockMatch = {
@@ -304,7 +292,7 @@ describe('createGuardedRoute', () => {
 		});

 		expect(screen.getByText('update')).toBeInTheDocument();
-		expect(screen.getByText('dashboard:123')).toBeInTheDocument();
+		expect(screen.getByText('role:123')).toBeInTheDocument();
 		expect(
 			screen.queryByText('Test Component: test-value'),
 		).not.toBeInTheDocument();
@@ -335,7 +323,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			ComponentWithMultipleProps,
 			'read',
-			'dashboard:*',
+			'role:*',
 		);

 		const mockMatch = {
@@ -370,10 +358,10 @@ describe('createGuardedRoute', () => {
 				requestCount++;
 				const payload = (await req.json()) as AuthtypesTransactionDTO[];
 				const obj = payload[0]?.object;
-				const name = obj?.resource?.name;
+				const kind = obj?.resource?.kind;
 				const selector = obj?.selector ?? '*';
 				const objectStr =
-					obj?.resource?.type === 'metaresources' ? name : `${name}:${selector}`;
+					obj?.resource?.type === 'metaresources' ? kind : `${kind}:${selector}`;
 				requestedObjects.push(objectStr ?? '');

 				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
@@ -383,7 +371,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'read',
-			'dashboard:{id}',
+			'role:{id}',
 		);

 		const mockMatch1 = {
@@ -407,7 +395,7 @@ describe('createGuardedRoute', () => {
 		});

 		expect(requestCount).toBe(1);
-		expect(requestedObjects).toContain('dashboard:123');
+		expect(requestedObjects).toContain('role:123');

 		unmount();

@@ -432,7 +420,7 @@ describe('createGuardedRoute', () => {
 		});

 		expect(requestCount).toBe(2);
-		expect(requestedObjects).toContain('dashboard:456');
+		expect(requestedObjects).toContain('role:456');
 	});

 	it('should handle different relation types', async () => {
@@ -446,7 +434,7 @@ describe('createGuardedRoute', () => {
 		const GuardedComponent = createGuardedRoute(
 			TestComponent,
 			'delete',
-			'dashboard:{id}',
+			'role:{id}',
 		);

 		const mockMatch = {
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -37,6 +37,7 @@ export enum LOCALSTORAGE {
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
+	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 }
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -33,6 +33,7 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
+	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -8,6 +8,7 @@ const ROUTES = {
 	SERVICE_MAP: '/service-map',
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
+	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED: '/get-started',
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -33,6 +33,102 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
+	traceDetailColorsV3: {
+		// Blues
+		blue1: '#2F80ED',
+		blue2: '#3366E6',
+		blue3: '#4682B4',
+		blue4: '#1F63E0',
+		blue5: '#3A7AED',
+		blue6: '#5A9DF5',
+		blue7: '#2874A6',
+		blue8: '#2E86C1',
+		blue9: '#3498DB',
+		blue10: '#1E90FF',
+		blue11: '#4169E1',
+
+		// Cyans / Teals
+		cyan1: '#00CEC9',
+		cyan2: '#22A6F2',
+		cyan3: '#00B0AA',
+		cyan4: '#33D6C2',
+		cyan5: '#66E9DA',
+		cyan6: '#48DBFB',
+		cyan7: '#00BFFF',
+		cyan8: '#63B8FF',
+		teal1: '#009688',
+		teal2: '#1ABC9C',
+		teal3: '#48C9B0',
+		teal4: '#76D7C4',
+		teal5: '#20B2AA',
+
+		// Greens
+		green1: '#27AE60',
+		green2: '#3CB371',
+		green3: '#1E8449',
+		green4: '#2ECC71',
+		green5: '#58D68D',
+		green6: '#229954',
+		green7: '#52BE80',
+		green8: '#82E0AA',
+		green9: '#73C6B6',
+
+		// Limes
+		lime1: '#A3E635',
+		lime2: '#B9F18D',
+		lime3: '#84CC16',
+		lime4: '#65A30D',
+
+		// Yellows
+		yellow1: '#F1C40F',
+		yellow2: '#F7DC6F',
+		yellow3: '#F9E79F',
+		yellow4: '#F4D03F',
+		yellow5: '#D4AC0D',
+
+		// Golds / Ambers
+		gold1: '#F2C94C',
+		gold2: '#FFD93D',
+		gold3: '#FFCA28',
+		gold4: '#B7950B',
+		gold5: '#D4A017',
+
+		// Oranges (non-red)
+		orange1: '#F39C12',
+		orange2: '#E67E22',
+		orange3: '#F5B041',
+		orange4: '#D35400',
+		orange5: '#EB984E',
+		orange6: '#FAD7A0',
+
+		// Purples / Violets
+		purple1: '#BB6BD9',
+		purple2: '#9B51E0',
+		purple3: '#DA77F2',
+		purple4: '#C77DFF',
+		purple5: '#6C5CE7',
+		purple6: '#8E44AD',
+		purple7: '#9B59B6',
+		purple8: '#BB8FCE',
+		purple9: '#7D3C98',
+		purple10: '#A569BD',
+
+		// Lavenders
+		lavender1: '#AF7AC5',
+		lavender2: '#C39BD3',
+		lavender3: '#D2B4DE',
+
+		// Pinks / Magentas
+		pink1: '#E91E8C',
+		pink2: '#FF6FD8',
+		pink3: '#F06292',
+		pink4: '#CE93D8',
+
+		// Salmons / Corals (distinct from error red)
+		salmon1: '#FF8A65',
+		salmon2: '#FFAB91',
+		salmon3: '#E0876A',
+	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss
@@ -24,6 +24,43 @@
 	line-height: 20px;
 }

+.crossPanelSyncSectionHeader {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	align-self: flex-start;
+}
+
+.crossPanelSyncInfoIcon {
+	cursor: help;
+	color: var(--l3-foreground);
+}
+
+.crossPanelSyncTooltipContent {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	max-width: 300px;
+}
+
+.crossPanelSyncTooltipTitle {
+	font-size: 14px;
+}
+
+.crossPanelSyncTooltipDescription {
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.crossPanelSyncTooltipDocLink {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--primary-background);
+	font-size: 12px;
+	margin-top: 4px;
+}
+
 .crossPanelSyncRow {
 	display: flex;
 	flex-direction: row;
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input, Radio, Select, Space, Typography } from 'antd';
+import { Col, Input, Radio, Select, Space, Tooltip, Typography } from 'antd';
 import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
 import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
@@ -10,7 +10,7 @@ import {
 	SyncTooltipFilterMode,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { isEqual } from 'lodash-es';
-import { Check, X } from 'lucide-react';
+import { Check, ExternalLink, Info, X } from '@signozhq/icons';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';

 import styles from './GeneralSettings.module.scss';
@@ -173,9 +173,36 @@ function GeneralDashboardSettings(): JSX.Element {
 				</Space>
 			</Col>
 			<Col className={`${styles.overviewSettings} ${styles.crossPanelSyncGroup}`}>
-				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-					Cross-Panel Sync
-				</Typography.Text>
+				<div className={styles.crossPanelSyncSectionHeader}>
+					<Typography.Text className={styles.crossPanelSyncSectionTitle}>
+						Cross-Panel Sync
+					</Typography.Text>
+					<Tooltip
+						title={
+							<div className={styles.crossPanelSyncTooltipContent}>
+								<strong className={styles.crossPanelSyncTooltipTitle}>
+									Cross-Panel Sync
+								</strong>
+								<span className={styles.crossPanelSyncTooltipDescription}>
+									Sync crosshair and tooltip across all the dashboard panels
+								</span>
+								<a
+									href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
+									target="_blank"
+									rel="noopener noreferrer"
+									className={styles.crossPanelSyncTooltipDocLink}
+								>
+									Learn more
+									<ExternalLink size={12} />
+								</a>
+							</div>
+						}
+						placement="top"
+						mouseEnterDelay={0.5}
+					>
+						<Info size={14} className={styles.crossPanelSyncInfoIcon} />
+					</Tooltip>
+				</div>
 				<div className={styles.crossPanelSyncRow}>
 					<div className={styles.crossPanelSyncInfo}>
 						<Typography.Text className={styles.crossPanelSyncTitle}>
--- a/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss
+++ b/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss
@@ -123,6 +123,7 @@
 				&__row {
 					display: flex;
 					flex-direction: row;
+					flex-wrap: wrap;
 					align-items: flex-end;
 					max-width: 825px;
 					gap: 25px;
--- a/frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.tsx
@@ -286,6 +286,8 @@ export function K8sBaseList<T extends K8sEntityData>({
 						total: totalCount,
 						defaultLimit: 10,
 						defaultPage: 1,
+						showTotalCount: true,
+						totalCountLabel: entity.charAt(0).toUpperCase() + entity.slice(1),
 					}}
 					paginationClassname={styles.paginationContainer}
 				/>
--- a/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss
@@ -11,6 +11,12 @@
 	}
 }

+.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, Col, Row, Skeleton, Typography } from 'antd';
+import { Card, 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 (
-		<Row gutter={24}>
+		<div className="infra-metrics-grid">
 			{queries.map((query, idx) => (
-				<Col span={12} key={widgetInfo[idx].title}>
+				<div key={widgetInfo[idx].title}>
 					<Typography.Text>{widgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</Col>
+				</div>
 			))}
-		</Row>
+		</div>
 	);
 }

--- 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, Col, Row, Skeleton, Typography } from 'antd';
+import { Card, 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 (
-		<Row gutter={24}>
+		<div className="infra-metrics-grid">
 			{queries.map((query, idx) => (
-				<Col span={12} key={podWidgetInfo[idx].title}>
+				<div key={podWidgetInfo[idx].title}>
 					<Typography.Text>{podWidgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</Col>
+				</div>
 			))}
-		</Row>
+		</div>
 	);
 }

--- a/frontend/src/container/Login/tests/Login.auth.test.tsx
+++ b/frontend/src/container/Login/tests/Login.auth.test.tsx
@@ -1,20 +1,31 @@
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
+/**
+ * Login - Authentication & Form Tests
+ *
+ * Split from Login.test.tsx for better parallelization.
+ * Tests password auth, callback auth, URL params, warnings, form state, and edge cases.
+ */
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { ErrorV2 } from 'types/api';
-import { Info } from 'types/api/v1/version/get';
 import { SessionsContext } from 'types/api/v2/sessions/context/get';
-import { Token } from 'types/api/v2/sessions/email_password/post';

 import Login from '../index';
+import {
+	CALLBACK_AUTHN_URL,
+	EMAIL_PASSWORD_ENDPOINT,
+	mockEmailPasswordResponse,
+	mockMultiOrgWithWarning,
+	mockOrgWithWarning,
+	mockSingleOrgCallbackAuth,
+	mockSingleOrgPasswordAuth,
+	mockVersionSetupCompleted,
+	PASSWORD_AUTHN_EMAIL,
+	SESSIONS_CONTEXT_ENDPOINT,
+	VERSION_ENDPOINT,
+} from './Login.test-utils';

-const VERSION_ENDPOINT = '*/api/v1/version';
-const SESSIONS_CONTEXT_ENDPOINT = '*/api/v2/sessions/context';
-const CALLBACK_AUTHN_ORG = 'callback_authn_org';
-const CALLBACK_AUTHN_URL = 'https://sso.example.com/auth';
-const PASSWORD_AUTHN_ORG = 'password_authn_org';
-const PASSWORD_AUTHN_EMAIL = 'jest.test@signoz.io';
+// =============================================================================
+// MOCKS
+// =============================================================================

 jest.mock('lib/history', () => ({
 	__esModule: true,
@@ -26,102 +37,13 @@ jest.mock('lib/history', () => ({
 	},
 }));

-const mockHistoryPush = history.push as jest.MockedFunction<
-	typeof history.push
->;
+// =============================================================================
+// TESTS
+// =============================================================================

-// Mock data
-const mockVersionSetupCompleted: Info = {
-	setupCompleted: true,
-	ee: 'Y',
-	version: '0.25.0',
-};
-
-const mockVersionSetupIncomplete: Info = {
-	setupCompleted: false,
-	ee: 'Y',
-	version: '0.25.0',
-};
-
-const mockSingleOrgPasswordAuth: SessionsContext = {
-	exists: true,
-	orgs: [
-		{
-			id: 'org-1',
-			name: 'Test Organization',
-			authNSupport: {
-				password: [{ provider: 'email_password' }],
-				callback: [],
-			},
-		},
-	],
-};
-
-const mockSingleOrgCallbackAuth: SessionsContext = {
-	exists: true,
-	orgs: [
-		{
-			id: 'org-1',
-			name: 'Test Organization',
-			authNSupport: {
-				password: [],
-				callback: [{ provider: 'google', url: CALLBACK_AUTHN_URL }],
-			},
-		},
-	],
-};
-
-const mockMultiOrgMixedAuth: SessionsContext = {
-	exists: true,
-	orgs: [
-		{
-			id: 'org-1',
-			name: PASSWORD_AUTHN_ORG,
-			authNSupport: {
-				password: [{ provider: 'email_password' }],
-				callback: [],
-			},
-		},
-		{
-			id: 'org-2',
-			name: CALLBACK_AUTHN_ORG,
-			authNSupport: {
-				password: [],
-				callback: [{ provider: 'google', url: CALLBACK_AUTHN_URL }],
-			},
-		},
-	],
-};
-
-const mockOrgWithWarning: SessionsContext = {
-	exists: true,
-	orgs: [
-		{
-			id: 'org-1',
-			name: 'Warning Organization',
-			authNSupport: {
-				password: [{ provider: 'email_password' }],
-				callback: [],
-			},
-			warning: {
-				code: 'ORG_WARNING',
-				message: 'Organization has limited access',
-				url: 'https://example.com/warning',
-				errors: [{ message: 'Contact admin for full access' }],
-			} as ErrorV2,
-		},
-	],
-};
-
-const mockEmailPasswordResponse: Token = {
-	accessToken: 'mock-access-token',
-	refreshToken: 'mock-refresh-token',
-};
-
-describe('Login Component', () => {
+describe('Login - Authentication & Form', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-
 		server.use(
 			rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
 				res(
@@ -136,269 +58,6 @@ describe('Login Component', () => {
 		server.resetHandlers();
 	});

-	describe('Initial Render', () => {
-		it('renders login form with email input and next button', () => {
-			const { getByTestId, getByPlaceholderText } = render(<Login />);
-
-			expect(
-				screen.getByText(/sign in to monitor, trace, and troubleshoot/i),
-			).toBeInTheDocument();
-			expect(getByTestId('email')).toBeInTheDocument();
-			expect(getByTestId('initiate_login')).toBeInTheDocument();
-			expect(getByPlaceholderText('e.g. john@signoz.io')).toBeInTheDocument();
-		});
-
-		it('shows loading state when version data is being fetched', () => {
-			server.use(
-				rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.delay(100),
-						ctx.status(200),
-						ctx.json({ data: mockVersionSetupCompleted, status: 'success' }),
-					),
-				),
-			);
-
-			const { getByTestId } = render(<Login />);
-
-			expect(getByTestId('initiate_login')).toBeDisabled();
-		});
-	});
-
-	describe('Setup Check', () => {
-		it('redirects to signup when setup is not completed', async () => {
-			server.use(
-				rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({ data: mockVersionSetupIncomplete, status: 'success' }),
-					),
-				),
-			);
-
-			render(<Login />);
-
-			await waitFor(() => {
-				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.SIGN_UP);
-			});
-		});
-
-		it('stays on login page when setup is completed', async () => {
-			render(<Login />);
-
-			await waitFor(() => {
-				expect(mockHistoryPush).not.toHaveBeenCalled();
-			});
-		});
-
-		it('handles version API error gracefully', async () => {
-			server.use(
-				rest.get(VERSION_ENDPOINT, (req, res, ctx) =>
-					res(ctx.status(500), ctx.json({ error: 'Server error' })),
-				),
-			);
-
-			render(<Login />);
-
-			await waitFor(() => {
-				expect(mockHistoryPush).not.toHaveBeenCalled();
-			});
-		});
-	});
-
-	describe('Session Context Fetching', () => {
-		it('fetches session context on next button click and enables password', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
-				),
-			);
-
-			const { getByTestId } = render(<Login />);
-
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
-
-			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
-			await user.click(nextButton);
-
-			await waitFor(() => {
-				expect(getByTestId('password')).toBeInTheDocument();
-			});
-		});
-
-		it('handles session context API errors', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(500),
-						ctx.json({
-							error: {
-								code: 'internal_server',
-								message: 'couldnt fetch the sessions context',
-								url: '',
-							},
-						}),
-					),
-				),
-			);
-
-			const { getByTestId, getByText } = render(<Login />);
-
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
-
-			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
-			await user.click(nextButton);
-
-			await waitFor(() => {
-				expect(getByText('couldnt fetch the sessions context')).toBeInTheDocument();
-			});
-		});
-
-		it('auto-selects organization when only one exists', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
-				),
-			);
-
-			const { getByTestId } = render(<Login />);
-
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
-
-			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
-			await user.click(nextButton);
-
-			await waitFor(() => {
-				// Should show password field directly (no org selection needed)
-				expect(getByTestId('password')).toBeInTheDocument();
-				expect(screen.queryByText(/organization name/i)).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('Organization Selection', () => {
-		it('shows organization dropdown when multiple orgs exist', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockMultiOrgMixedAuth })),
-				),
-			);
-
-			const { getByTestId, getByText } = render(<Login />);
-
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
-
-			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
-			await user.click(nextButton);
-
-			await waitFor(() => {
-				expect(getByText('Organization Name')).toBeInTheDocument();
-			});
-			await screen.findByRole('combobox');
-
-			// Click on the dropdown to reveal the options
-			await user.click(screen.getByRole('combobox'));
-
-			await waitFor(() => {
-				expect(screen.getByText(PASSWORD_AUTHN_ORG)).toBeInTheDocument();
-				expect(screen.getByText(CALLBACK_AUTHN_ORG)).toBeInTheDocument();
-			});
-		});
-
-		it('updates selected organization on dropdown change', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockMultiOrgMixedAuth })),
-				),
-			);
-
-			render(<Login />);
-
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
-
-			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
-			await user.click(nextButton);
-
-			await screen.findByRole('combobox');
-
-			// Select CALLBACK_AUTHN_ORG
-			await user.click(screen.getByRole('combobox'));
-			await user.click(screen.getByText(CALLBACK_AUTHN_ORG));
-
-			await screen.findByRole('button', { name: /sign in with sso/i });
-		});
-	});
-
 	describe('Password Authentication', () => {
 		it('shows password field when password auth is supported', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
@@ -411,7 +70,6 @@ describe('Login Component', () => {

 			const { getByTestId, getByText } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -448,7 +106,6 @@ describe('Login Component', () => {
 				initialRoute: '/login?password=Y',
 			});

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -466,7 +123,6 @@ describe('Login Component', () => {
 			await user.click(nextButton);

 			await waitFor(() => {
-				// Should show password field even for SSO org due to password=Y override
 				expect(getByTestId('password')).toBeInTheDocument();
 			});
 		});
@@ -484,7 +140,6 @@ describe('Login Component', () => {

 			const { getByTestId, queryByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -510,10 +165,7 @@ describe('Login Component', () => {
 		it('redirects to callback URL on button click', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

-			// Mock window.location.href
-			const mockLocation = {
-				href: 'http://localhost/',
-			};
+			const mockLocation = { href: 'http://localhost/' };
 			Object.defineProperty(window, 'location', {
 				value: mockLocation,
 				writable: true,
@@ -527,7 +179,6 @@ describe('Login Component', () => {

 			const { getByTestId, queryByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -552,7 +203,6 @@ describe('Login Component', () => {
 			const callbackButton = getByTestId('callback_authn_submit');
 			await user.click(callbackButton);

-			// Check that window.location.href was set to the callback URL
 			await waitFor(() => {
 				expect(window.location.href).toBe(CALLBACK_AUTHN_URL);
 			});
@@ -567,7 +217,7 @@ describe('Login Component', () => {
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
 				),
-				rest.post('*/api/v2/sessions/email_password', async (_, res, ctx) =>
+				rest.post(EMAIL_PASSWORD_ENDPOINT, async (_, res, ctx) =>
 					res(
 						ctx.status(200),
 						ctx.json({ status: 'success', data: mockEmailPasswordResponse }),
@@ -577,7 +227,6 @@ describe('Login Component', () => {

 			const { getByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -604,8 +253,6 @@ describe('Login Component', () => {
 			await user.type(passwordInput, 'testpassword');
 			await user.click(loginButton);

-			// do not test for the request paramters here. Reference: https://mswjs.io/docs/best-practices/avoid-request-assertions
-			// rather test for the effects of the request
 			await waitFor(() => {
 				expect(localStorage.getItem('AUTH_TOKEN')).toBe('mock-access-token');
 			});
@@ -618,7 +265,7 @@ describe('Login Component', () => {
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
 				),
-				rest.post('*/api/v2/sessions/email_password', (_, res, ctx) =>
+				rest.post(EMAIL_PASSWORD_ENDPOINT, (_, res, ctx) =>
 					res(
 						ctx.status(401),
 						ctx.json({
@@ -634,7 +281,6 @@ describe('Login Component', () => {

 			const { getByTestId, getByText } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -708,14 +354,13 @@ describe('Login Component', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

 			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(ctx.status(200), ctx.json({ data: mockOrgWithWarning })),
 				),
 			);

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = screen.getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -742,23 +387,6 @@ describe('Login Component', () => {
 		it('shows warning modal when a warning org is selected among multiple orgs', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

-			// Mock multiple orgs including one with a warning
-			const mockMultiOrgWithWarning = {
-				orgs: [
-					{ id: 'org1', name: 'Org 1' },
-					{
-						id: 'org2',
-						name: 'Org 2',
-						warning: {
-							code: 'ORG_WARNING',
-							message: 'Organization has limited access',
-							url: 'https://example.com/warning',
-							errors: [{ message: 'Contact admin for full access' }],
-						} as ErrorV2,
-					},
-				],
-			};
-
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(ctx.status(200), ctx.json({ data: mockMultiOrgWithWarning })),
@@ -767,7 +395,6 @@ describe('Login Component', () => {

 			const { getByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -786,9 +413,8 @@ describe('Login Component', () => {

 			await screen.findByRole('combobox');

-			// Select the organization with a warning
 			await user.click(screen.getByRole('combobox'));
-			await user.click(screen.getByText('Org 2'));
+			await user.click(screen.getByText('Warning Organization'));

 			await waitFor(() => {
 				expect(
@@ -803,7 +429,7 @@ describe('Login Component', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

 			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(
 						ctx.delay(100),
 						ctx.status(200),
@@ -814,7 +440,6 @@ describe('Login Component', () => {

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = screen.getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -831,7 +456,6 @@ describe('Login Component', () => {

 			await user.click(nextButton);

-			// Button should be disabled during API call
 			expect(nextButton).toBeDisabled();
 		});

@@ -839,17 +463,15 @@ describe('Login Component', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });

 			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
 				),
 			);

 			render(<Login />);

-			// Initially shows "Next" button
 			expect(screen.getByTestId('initiate_login')).toBeInTheDocument();

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = screen.getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -867,7 +489,6 @@ describe('Login Component', () => {
 			await user.click(nextButton);

 			await waitFor(() => {
-				// Should show "Sign in with Password" button for password auth
 				expect(screen.getByTestId('password_authn_submit')).toBeInTheDocument();
 				expect(screen.queryByTestId('initiate_login')).not.toBeInTheDocument();
 			});
@@ -884,14 +505,13 @@ describe('Login Component', () => {
 			};

 			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(ctx.status(200), ctx.json({ data: mockNoOrgs })),
 				),
 			);

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = screen.getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -909,7 +529,6 @@ describe('Login Component', () => {
 			await user.click(nextButton);

 			await waitFor(() => {
-				// Should not show any auth method buttons
 				expect(
 					screen.queryByTestId('password_authn_submit'),
 				).not.toBeInTheDocument();
@@ -937,14 +556,13 @@ describe('Login Component', () => {
 			};

 			server.use(
-				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
 					res(ctx.status(200), ctx.json({ data: mockNoAuthSupport })),
 				),
 			);

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
 			const emailInput = await waitFor(() => {
 				const input = screen.getByTestId('email');
 				expect(input).not.toBeDisabled();
@@ -962,7 +580,6 @@ describe('Login Component', () => {
 			await user.click(nextButton);

 			await waitFor(() => {
-				// Should not show any auth method buttons
 				expect(
 					screen.queryByTestId('password_authn_submit'),
 				).not.toBeInTheDocument();
--- a/frontend/src/container/Login/tests/Login.session.test.tsx
+++ b/frontend/src/container/Login/tests/Login.session.test.tsx
@@ -0,0 +1,241 @@
+/**
+ * Login - Session Context & Organization Tests
+ *
+ * Split from Login.test.tsx for better parallelization.
+ * Tests session context fetching and organization selection.
+ */
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import Login from '../index';
+import {
+	CALLBACK_AUTHN_ORG,
+	mockMultiOrgMixedAuth,
+	mockSingleOrgPasswordAuth,
+	mockVersionSetupCompleted,
+	PASSWORD_AUTHN_EMAIL,
+	PASSWORD_AUTHN_ORG,
+	SESSIONS_CONTEXT_ENDPOINT,
+	VERSION_ENDPOINT,
+} from './Login.test-utils';
+
+// =============================================================================
+// MOCKS
+// =============================================================================
+
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: {
+			search: '',
+		},
+	},
+}));
+
+// =============================================================================
+// TESTS
+// =============================================================================
+
+describe('Login - Session Context & Organization', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ data: mockVersionSetupCompleted, status: 'success' }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	describe('Session Context Fetching', () => {
+		it('fetches session context on next button click and enables password', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+				),
+			);
+
+			const { getByTestId } = render(<Login />);
+
+			const emailInput = await waitFor(() => {
+				const input = getByTestId('email');
+				expect(input).not.toBeDisabled();
+				return input;
+			});
+
+			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
+
+			const nextButton = await waitFor(() => {
+				const button = getByTestId('initiate_login');
+				expect(button).not.toBeDisabled();
+				return button;
+			});
+
+			await user.click(nextButton);
+
+			await waitFor(() => {
+				expect(getByTestId('password')).toBeInTheDocument();
+			});
+		});
+
+		it('handles session context API errors', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
+					res(
+						ctx.status(500),
+						ctx.json({
+							error: {
+								code: 'internal_server',
+								message: 'couldnt fetch the sessions context',
+								url: '',
+							},
+						}),
+					),
+				),
+			);
+
+			const { getByTestId, getByText } = render(<Login />);
+
+			const emailInput = await waitFor(() => {
+				const input = getByTestId('email');
+				expect(input).not.toBeDisabled();
+				return input;
+			});
+
+			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
+
+			const nextButton = await waitFor(() => {
+				const button = getByTestId('initiate_login');
+				expect(button).not.toBeDisabled();
+				return button;
+			});
+
+			await user.click(nextButton);
+
+			await waitFor(() => {
+				expect(getByText('couldnt fetch the sessions context')).toBeInTheDocument();
+			});
+		});
+
+		it('auto-selects organization when only one exists', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+				),
+			);
+
+			const { getByTestId } = render(<Login />);
+
+			const emailInput = await waitFor(() => {
+				const input = getByTestId('email');
+				expect(input).not.toBeDisabled();
+				return input;
+			});
+
+			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
+
+			const nextButton = await waitFor(() => {
+				const button = getByTestId('initiate_login');
+				expect(button).not.toBeDisabled();
+				return button;
+			});
+
+			await user.click(nextButton);
+
+			await waitFor(() => {
+				expect(getByTestId('password')).toBeInTheDocument();
+				expect(screen.queryByText(/organization name/i)).not.toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Organization Selection', () => {
+		it('shows organization dropdown when multiple orgs exist', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json({ data: mockMultiOrgMixedAuth })),
+				),
+			);
+
+			const { getByTestId, getByText } = render(<Login />);
+
+			const emailInput = await waitFor(() => {
+				const input = getByTestId('email');
+				expect(input).not.toBeDisabled();
+				return input;
+			});
+
+			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
+
+			const nextButton = await waitFor(() => {
+				const button = getByTestId('initiate_login');
+				expect(button).not.toBeDisabled();
+				return button;
+			});
+
+			await user.click(nextButton);
+
+			await waitFor(() => {
+				expect(getByText('Organization Name')).toBeInTheDocument();
+			});
+			await screen.findByRole('combobox');
+
+			await user.click(screen.getByRole('combobox'));
+
+			await waitFor(() => {
+				expect(screen.getByText(PASSWORD_AUTHN_ORG)).toBeInTheDocument();
+				expect(screen.getByText(CALLBACK_AUTHN_ORG)).toBeInTheDocument();
+			});
+		});
+
+		it('updates selected organization on dropdown change', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json({ data: mockMultiOrgMixedAuth })),
+				),
+			);
+
+			render(<Login />);
+
+			const emailInput = await waitFor(() => {
+				const input = screen.getByTestId('email');
+				expect(input).not.toBeDisabled();
+				return input;
+			});
+
+			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
+
+			const nextButton = await waitFor(() => {
+				const button = screen.getByTestId('initiate_login');
+				expect(button).not.toBeDisabled();
+				return button;
+			});
+
+			await user.click(nextButton);
+
+			await screen.findByRole('combobox');
+
+			await user.click(screen.getByRole('combobox'));
+			await user.click(screen.getByText(CALLBACK_AUTHN_ORG));
+
+			await screen.findByRole('button', { name: /sign in with sso/i });
+		});
+	});
+});
--- a/frontend/src/container/Login/tests/Login.setup.test.tsx
+++ b/frontend/src/container/Login/tests/Login.setup.test.tsx
@@ -0,0 +1,127 @@
+/**
+ * Login - Initial Render & Setup Tests
+ *
+ * Split from Login.test.tsx for better parallelization.
+ * Tests initial render, loading states, and setup validation.
+ */
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+import Login from '../index';
+import {
+	mockVersionSetupCompleted,
+	mockVersionSetupIncomplete,
+	VERSION_ENDPOINT,
+} from './Login.test-utils';
+
+// =============================================================================
+// MOCKS
+// =============================================================================
+
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: {
+			search: '',
+		},
+	},
+}));
+
+const mockHistoryPush = history.push as jest.MockedFunction<
+	typeof history.push
+>;
+
+// =============================================================================
+// TESTS
+// =============================================================================
+
+describe('Login - Initial Render & Setup', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		server.use(
+			rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ data: mockVersionSetupCompleted, status: 'success' }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	describe('Initial Render', () => {
+		it('renders login form with email input and next button', () => {
+			const { getByTestId, getByPlaceholderText } = render(<Login />);
+
+			expect(
+				screen.getByText(/sign in to monitor, trace, and troubleshoot/i),
+			).toBeInTheDocument();
+			expect(getByTestId('email')).toBeInTheDocument();
+			expect(getByTestId('initiate_login')).toBeInTheDocument();
+			expect(getByPlaceholderText('e.g. john@signoz.io')).toBeInTheDocument();
+		});
+
+		it('shows loading state when version data is being fetched', () => {
+			server.use(
+				rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
+					res(
+						ctx.delay(100),
+						ctx.status(200),
+						ctx.json({ data: mockVersionSetupCompleted, status: 'success' }),
+					),
+				),
+			);
+
+			const { getByTestId } = render(<Login />);
+
+			expect(getByTestId('initiate_login')).toBeDisabled();
+		});
+	});
+
+	describe('Setup Check', () => {
+		it('redirects to signup when setup is not completed', async () => {
+			server.use(
+				rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
+					res(
+						ctx.status(200),
+						ctx.json({ data: mockVersionSetupIncomplete, status: 'success' }),
+					),
+				),
+			);
+
+			render(<Login />);
+
+			await waitFor(() => {
+				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.SIGN_UP);
+			});
+		});
+
+		it('stays on login page when setup is completed', async () => {
+			render(<Login />);
+
+			await waitFor(() => {
+				expect(mockHistoryPush).not.toHaveBeenCalled();
+			});
+		});
+
+		it('handles version API error gracefully', async () => {
+			server.use(
+				rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(500), ctx.json({ error: 'Server error' })),
+				),
+			);
+
+			render(<Login />);
+
+			await waitFor(() => {
+				expect(mockHistoryPush).not.toHaveBeenCalled();
+			});
+		});
+	});
+});
--- a/frontend/src/container/Login/tests/Login.test-utils.ts
+++ b/frontend/src/container/Login/tests/Login.test-utils.ts
@@ -0,0 +1,172 @@
+/**
+ * Shared test utilities for Login tests.
+ * Extract common mocks, data, and setup to avoid duplication across split test files.
+ */
+import { rest, server } from 'mocks-server/server';
+import { Info } from 'types/api/v1/version/get';
+import { SessionsContext } from 'types/api/v2/sessions/context/get';
+import { Token } from 'types/api/v2/sessions/email_password/post';
+import { ErrorV2 } from 'types/api';
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+export const VERSION_ENDPOINT = '*/api/v1/version';
+export const SESSIONS_CONTEXT_ENDPOINT = '*/api/v2/sessions/context';
+export const EMAIL_PASSWORD_ENDPOINT = '*/api/v2/sessions/email_password';
+export const CALLBACK_AUTHN_ORG = 'callback_authn_org';
+export const CALLBACK_AUTHN_URL = 'https://sso.example.com/auth';
+export const PASSWORD_AUTHN_ORG = 'password_authn_org';
+export const PASSWORD_AUTHN_EMAIL = 'jest.test@signoz.io';
+
+// =============================================================================
+// MOCK DATA
+// =============================================================================
+
+export const mockVersionSetupCompleted: Info = {
+	setupCompleted: true,
+	ee: 'Y',
+	version: '0.25.0',
+};
+
+export const mockVersionSetupIncomplete: Info = {
+	setupCompleted: false,
+	ee: 'Y',
+	version: '0.25.0',
+};
+
+export const mockSingleOrgPasswordAuth: SessionsContext = {
+	exists: true,
+	orgs: [
+		{
+			id: 'org-1',
+			name: 'Test Organization',
+			authNSupport: {
+				password: [{ provider: 'email_password' }],
+				callback: [],
+			},
+		},
+	],
+};
+
+export const mockSingleOrgCallbackAuth: SessionsContext = {
+	exists: true,
+	orgs: [
+		{
+			id: 'org-1',
+			name: 'Test Organization',
+			authNSupport: {
+				password: [],
+				callback: [{ provider: 'google', url: CALLBACK_AUTHN_URL }],
+			},
+		},
+	],
+};
+
+export const mockMultiOrgMixedAuth: SessionsContext = {
+	exists: true,
+	orgs: [
+		{
+			id: 'org-1',
+			name: PASSWORD_AUTHN_ORG,
+			authNSupport: {
+				password: [{ provider: 'email_password' }],
+				callback: [],
+			},
+		},
+		{
+			id: 'org-2',
+			name: CALLBACK_AUTHN_ORG,
+			authNSupport: {
+				password: [],
+				callback: [{ provider: 'google', url: CALLBACK_AUTHN_URL }],
+			},
+		},
+	],
+};
+
+export const mockOrgWithWarning: SessionsContext = {
+	exists: true,
+	orgs: [
+		{
+			id: 'org-1',
+			name: 'Warning Organization',
+			authNSupport: {
+				password: [{ provider: 'email_password' }],
+				callback: [],
+			},
+			warning: {
+				code: 'ORG_WARNING',
+				message: 'Organization has limited access',
+				url: 'https://example.com/warning',
+				errors: [{ message: 'Contact admin for full access' }],
+			} as ErrorV2,
+		},
+	],
+};
+
+export const mockMultiOrgWithWarning: SessionsContext = {
+	exists: true,
+	orgs: [
+		{
+			id: 'org-1',
+			name: 'Normal Organization',
+			authNSupport: {
+				password: [{ provider: 'email_password' }],
+				callback: [],
+			},
+		},
+		{
+			id: 'org-2',
+			name: 'Warning Organization',
+			authNSupport: {
+				password: [{ provider: 'email_password' }],
+				callback: [],
+			},
+			warning: {
+				code: 'ORG_WARNING',
+				message: 'Organization has limited access',
+				url: 'https://example.com/warning',
+				errors: [{ message: 'Contact admin for full access' }],
+			} as ErrorV2,
+		},
+	],
+};
+
+export const mockEmailPasswordResponse: Token = {
+	accessToken: 'mock-access-token',
+	refreshToken: 'mock-refresh-token',
+};
+
+// =============================================================================
+// MOCK SETUP HELPERS
+// =============================================================================
+
+export function setupVersionEndpoint(
+	data: Info = mockVersionSetupCompleted,
+): void {
+	server.use(
+		rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ data, status: 'success' })),
+		),
+	);
+}
+
+export function setupSessionContextEndpoint(data: SessionsContext): void {
+	server.use(
+		rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ data })),
+		),
+	);
+}
+
+export function setupEmailPasswordEndpoint(
+	data: Token = mockEmailPasswordResponse,
+): void {
+	server.use(
+		rest.post(EMAIL_PASSWORD_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ data })),
+		),
+	);
+}
--- a/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx
@@ -4,7 +4,6 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Table2, Trash2, Users } from '@signozhq/icons';
 import { Button, toast, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
 import { Skeleton } from 'antd';
-import { useAuthzResources } from 'api/generated/services/authz';
 import {
 	getGetObjectsQueryKey,
 	useDeleteRole,
@@ -12,6 +11,9 @@ import {
 	useGetRole,
 	usePatchObjects,
 } from 'api/generated/services/role';
+import permissionsType from 'hooks/useAuthZ/permissions.type';
+
+import type { AuthzResources } from '../utils';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ROUTES from 'constants/routes';
 import { capitalize } from 'lodash-es';
@@ -52,10 +54,7 @@ function RoleDetailsPage(): JSX.Element {
 	const queryClient = useQueryClient();
 	const { showErrorModal } = useErrorModal();

-	const { data: authzResourcesResponse } = useAuthzResources({
-		query: { enabled: true },
-	});
-	const authzResources = authzResourcesResponse?.data ?? null;
+	const authzResources = permissionsType.data as unknown as AuthzResources;

 	// Extract channelId from URL pathname since useParams doesn't work in nested routing
 	const roleIdMatch = pathname.match(ROLE_ID_REGEX);
@@ -94,7 +93,7 @@ function RoleDetailsPage(): JSX.Element {

 	const initialConfig = useMemo(() => {
 		if (!objectsData?.data || !activePermission) {
-			return undefined;
+			return;
 		}
 		return objectsToPermissionConfig(
 			objectsData.data,
--- a/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.test.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.test.tsx
@@ -15,15 +15,6 @@ const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
 const MANAGED_ROLE_ID = '019c24aa-2248-756f-9833-984f1ab63819';

 const rolesApiBase = 'http://localhost/api/v1/roles';
-const authzResourcesUrl = 'http://localhost/api/v1/authz/resources';
-
-const authzResourcesResponse = {
-	status: 'success',
-	data: {
-		relations: { create: ['dashboard'], read: ['dashboard'] },
-		resources: [{ name: 'dashboard', type: 'dashboard' }],
-	},
-};

 const emptyObjectsResponse = { status: 'success', data: [] };

@@ -45,9 +36,6 @@ function setupDefaultHandlers(roleId = CUSTOM_ROLE_ID): void {
 		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(roleResponse)),
 		),
-		rest.get(authzResourcesUrl, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(authzResourcesResponse)),
-		),
 	);
 }

--- a/frontend/src/container/RolesSettings/tests/utils.test.ts
+++ b/frontend/src/container/RolesSettings/tests/utils.test.ts
@@ -1,12 +1,18 @@
 import type {
-	AuthtypesGettableObjectsDTO,
-	AuthtypesGettableResourcesDTO,
+	CoretypesResourceRefDTO,
+	CoretypesObjectGroupDTO,
+	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';

 import type {
 	PermissionConfig,
 	ResourceDefinition,
 } from '../PermissionSidePanel/PermissionSidePanel.types';
+
+type AuthzResources = {
+	resources: CoretypesResourceRefDTO[];
+	relations: Record<string, string[]>;
+};
 import { PermissionScope } from '../PermissionSidePanel/PermissionSidePanel.types';
 import {
 	buildConfig,
@@ -33,17 +39,17 @@ jest.mock('../RoleDetails/constants', () => {
 	};
 });

-const dashboardResource: AuthtypesGettableResourcesDTO['resources'][number] = {
-	name: 'dashboard',
-	type: 'metaresource',
+const dashboardResource: AuthzResources['resources'][number] = {
+	kind: 'dashboard',
+	type: 'metaresource' as CoretypesTypeDTO,
 };

-const alertResource: AuthtypesGettableResourcesDTO['resources'][number] = {
-	name: 'alert',
-	type: 'metaresource',
+const alertResource: AuthzResources['resources'][number] = {
+	kind: 'alert',
+	type: 'metaresource' as CoretypesTypeDTO,
 };

-const baseAuthzResources: AuthtypesGettableResourcesDTO = {
+const baseAuthzResources: AuthzResources = {
 	resources: [dashboardResource, alertResource],
 	relations: {
 		create: ['metaresource'],
@@ -220,7 +226,7 @@ describe('buildPatchPayload', () => {

 describe('objectsToPermissionConfig', () => {
 	it('maps a wildcard selector to ALL scope', () => {
-		const objects: AuthtypesGettableObjectsDTO[] = [
+		const objects: CoretypesObjectGroupDTO[] = [
 			{ resource: dashboardResource, selectors: ['*'] },
 		];

@@ -233,7 +239,7 @@ describe('objectsToPermissionConfig', () => {
 	});

 	it('maps specific selectors to ONLY_SELECTED scope with the IDs', () => {
-		const objects: AuthtypesGettableObjectsDTO[] = [
+		const objects: CoretypesObjectGroupDTO[] = [
 			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
 		];

@@ -338,7 +344,7 @@ describe('buildConfig', () => {

 describe('derivePermissionTypes', () => {
 	it('derives one PermissionType per relation key with correct key and capitalised label', () => {
-		const relations: AuthtypesGettableResourcesDTO['relations'] = {
+		const relations: AuthzResources['relations'] = {
 			create: ['metaresource'],
 			read: ['metaresource'],
 			delete: ['metaresource'],
--- a/frontend/src/container/RolesSettings/utils.tsx
+++ b/frontend/src/container/RolesSettings/utils.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Badge } from '@signozhq/ui';
 import type {
-	AuthtypesGettableObjectsDTO,
-	AuthtypesGettableResourcesDTO,
+	CoretypesResourceRefDTO,
+	CoretypesObjectGroupDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { capitalize } from 'lodash-es';
@@ -19,6 +19,11 @@ import {
 	PERMISSION_ICON_MAP,
 } from './RoleDetails/constants';

+export type AuthzResources = {
+	resources: ReadonlyArray<CoretypesResourceRefDTO>;
+	relations: Readonly<Record<string, ReadonlyArray<string>>>;
+};
+
 export interface PermissionType {
 	key: string;
 	label: string;
@@ -29,11 +34,11 @@ export interface PatchPayloadOptions {
 	newConfig: PermissionConfig;
 	initialConfig: PermissionConfig;
 	resources: ResourceDefinition[];
-	authzRes: AuthtypesGettableResourcesDTO;
+	authzRes: AuthzResources;
 }

 export function derivePermissionTypes(
-	relations: AuthtypesGettableResourcesDTO['relations'] | null,
+	relations: AuthzResources['relations'] | null,
 ): PermissionType[] {
 	const iconSize = { size: 14 };

@@ -55,7 +60,7 @@ export function derivePermissionTypes(
 }

 export function deriveResourcesForRelation(
-	authzResources: AuthtypesGettableResourcesDTO | null,
+	authzResources: AuthzResources | null,
 	relation: string,
 ): ResourceDefinition[] {
 	if (!authzResources?.relations) {
@@ -65,19 +70,19 @@ export function deriveResourcesForRelation(
 	return authzResources.resources
 		.filter((r) => supportedTypes.includes(r.type))
 		.map((r) => ({
-			id: r.name,
-			label: capitalize(r.name).replace(/_/g, ' '),
+			id: r.kind,
+			label: capitalize(r.kind).replaceAll('_', ' '),
 			options: [],
 		}));
 }

 export function objectsToPermissionConfig(
-	objects: AuthtypesGettableObjectsDTO[],
+	objects: CoretypesObjectGroupDTO[],
 	resources: ResourceDefinition[],
 ): PermissionConfig {
 	const config: PermissionConfig = {};
 	for (const res of resources) {
-		const obj = objects.find((o) => o.resource.name === res.id);
+		const obj = objects.find((o) => o.resource.kind === res.id);
 		if (!obj) {
 			config[res.id] = {
 				scope: PermissionScope.ONLY_SELECTED,
@@ -101,19 +106,19 @@ export function buildPatchPayload({
 	resources,
 	authzRes,
 }: PatchPayloadOptions): {
-	additions: AuthtypesGettableObjectsDTO[] | null;
-	deletions: AuthtypesGettableObjectsDTO[] | null;
+	additions: CoretypesObjectGroupDTO[] | null;
+	deletions: CoretypesObjectGroupDTO[] | null;
 } {
 	if (!authzRes) {
 		return { additions: null, deletions: null };
 	}
-	const additions: AuthtypesGettableObjectsDTO[] = [];
-	const deletions: AuthtypesGettableObjectsDTO[] = [];
+	const additions: CoretypesObjectGroupDTO[] = [];
+	const deletions: CoretypesObjectGroupDTO[] = [];

 	for (const res of resources) {
 		const initial = initialConfig[res.id];
 		const current = newConfig[res.id];
-		const resourceDef = authzRes.resources.find((r) => r.name === res.id);
+		const resourceDef = authzRes.resources.find((r) => r.kind === res.id);
 		if (!resourceDef) {
 			continue;
 		}
--- a/frontend/src/container/RoutingPolicies/tests/testUtils.ts
+++ b/frontend/src/container/RoutingPolicies/tests/testUtils.ts
@@ -1,5 +1,6 @@
 import { ApiRoutingPolicy } from 'api/routingPolicies/getRoutingPolicies';
-import { IAppContext, IUser } from 'providers/App/types';
+import { IAppContext } from 'providers/App/types';
+import { getAppContextMockMinimal } from 'tests/test-utils';
 import { Channels } from 'types/api/channels/getAll';

 import { RoutingPolicy, UseRoutingPoliciesReturn } from '../types';
@@ -78,49 +79,14 @@ export function getUseRoutingPoliciesMockData(
 	};
 }

+/**
+ * @deprecated Use getAppContextMockMinimal from 'tests/test-utils' directly.
+ * This is a backwards-compatible wrapper that will be removed in a future version.
+ */
 export function getAppContextMockState(
-	overrides?: Partial<IUser>,
+	overrides?: Partial<IAppContext['user']>,
 ): IAppContext {
-	return {
-		user: {
-			accessJwt: 'some-token',
-			refreshJwt: 'some-refresh-token',
-			id: 'some-user-id',
-			email: 'user@signoz.io',
-			displayName: 'John Doe',
-			createdAt: 1732544623,
-			organization: 'Nightswatch',
-			orgId: 'does-not-matter-id',
-			role: 'ADMIN',
-			...overrides,
-		},
-		activeLicense: null,
-		trialInfo: null,
-		featureFlags: null,
-		orgPreferences: null,
-		userPreferences: null,
-		isLoggedIn: false,
-		org: null,
-		isFetchingUser: false,
-		isFetchingActiveLicense: false,
-		isFetchingFeatureFlags: false,
-		isFetchingOrgPreferences: false,
-		userFetchError: undefined,
-		activeLicenseFetchError: null,
-		featureFlagsFetchError: undefined,
-		orgPreferencesFetchError: undefined,
-		changelog: null,
-		showChangelogModal: false,
-		activeLicenseRefetch: jest.fn(),
-		updateUser: jest.fn(),
-		updateOrgPreferences: jest.fn(),
-		updateUserPreferenceInContext: jest.fn(),
-		updateOrg: jest.fn(),
-		updateChangelog: jest.fn(),
-		toggleChangelogModal: jest.fn(),
-		versionData: null,
-		hasEditPermission: false,
-	};
+	return getAppContextMockMinimal(overrides);
 }

 export function mockLocation(pathname: string): jest.Mock {
--- a/frontend/src/container/SideNav/config.ts
+++ b/frontend/src/container/SideNav/config.ts
@@ -46,6 +46,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.TRACES_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE_DETAIL]: [QueryParams.resourceAttributes],
+	[ROUTES.TRACE_DETAIL_OLD]: [QueryParams.resourceAttributes],
 	[ROUTES.UN_AUTHORIZED]: [QueryParams.resourceAttributes],
 	[ROUTES.USAGE_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.VERSION]: [QueryParams.resourceAttributes],
--- a/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx
@@ -51,7 +51,10 @@ import { Span } from 'types/api/trace/getTraceV2';
 import { formatEpochTimestamp } from 'utils/timeUtils';

 import Attributes from './Attributes/Attributes';
-import { RelatedSignalsViews } from './constants';
+import {
+	RelatedSignalsViews,
+	SPAN_PERCENTILE_INITIAL_DELAY_MS,
+} from './constants';
 import EventAttribute from './Events/components/EventAttribute';
 import Events from './Events/Events';
 import LinkedSpans from './LinkedSpans/LinkedSpans';
@@ -410,7 +413,7 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {

 		const timer = setTimeout(() => {
 			setInitialWaitCompleted(true);
-		}, 2000); // 2-second delay
+		}, SPAN_PERCENTILE_INITIAL_DELAY_MS);

 		return (): void => {
 			// clean the old state around span percentile data
--- a/frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss
+++ b/frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss
@@ -23,7 +23,6 @@

 	&-empty-content {
 		height: 100%;
-		border: 1px solid var(--l1-border);
 		border-top: none;
 		display: flex;
 		flex-direction: column;
--- a/frontend/src/container/SpanDetailsDrawer/tests/AttributeActions.userflow.test.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/AttributeActions.userflow.test.tsx
@@ -9,6 +9,12 @@ import { Span } from 'types/api/trace/getTraceV2';

 import SpanDetailsDrawer from '../SpanDetailsDrawer';

+// Mock delay constant for faster tests
+jest.mock('container/SpanDetailsDrawer/constants', () => ({
+	...jest.requireActual('container/SpanDetailsDrawer/constants'),
+	SPAN_PERCENTILE_INITIAL_DELAY_MS: 0,
+}));
+
 // Mock external dependencies
 const mockRedirectWithQueryBuilderData = jest.fn();
 const mockNotifications = {
--- a/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.infraMetrics.test.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.infraMetrics.test.tsx
@@ -1,3 +1,5 @@
+import getSpanPercentiles from 'api/trace/getSpanPercentiles';
+import getUserPreference from 'api/v1/user/preferences/name/get';
 import ROUTES from 'constants/routes';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { server } from 'mocks-server/server';
@@ -6,6 +8,13 @@ import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';

 import SpanDetailsDrawer from '../SpanDetailsDrawer';
+import {
+	mockSpanPercentileResponse,
+	mockUserPreferenceResponse,
+} from './SpanDetailsDrawer.test-utils';
+
+const mockGetSpanPercentiles = jest.mocked(getSpanPercentiles);
+const mockGetUserPreference = jest.mocked(getUserPreference);
 import {
 	expectedHostOnlyMetadata,
 	expectedInfraMetadata,
@@ -22,6 +31,21 @@ import {
 } from './infraMetricsTestData';

 // Mock external dependencies
+jest.mock('container/SpanDetailsDrawer/constants', () => ({
+	...jest.requireActual('container/SpanDetailsDrawer/constants'),
+	SPAN_PERCENTILE_INITIAL_DELAY_MS: 0,
+}));
+
+jest.mock('api/trace/getSpanPercentiles', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('api/v1/user/preferences/name/get', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
@@ -172,6 +196,10 @@ describe('SpanDetailsDrawer - Infra Metrics', () => {
 		mockWindowOpen.mockClear();
 		mockUpdateAllQueriesOperators.mockClear();

+		// Setup default mocks for percentile APIs to avoid delays
+		mockGetUserPreference.mockResolvedValue(mockUserPreferenceResponse);
+		mockGetSpanPercentiles.mockResolvedValue(mockSpanPercentileResponse);
+
 		// Setup API call tracking for infra metrics
 		(GetMetricQueryRange as jest.Mock).mockImplementation((query) => {
 			apiCallHistory.push(query);
--- a/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.logs.test.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.logs.test.tsx
@@ -0,0 +1,414 @@
+/**
+ * SpanDetailsDrawer - Logs Tests
+ *
+ * Split from SpanDetailsDrawer.test.tsx for better parallelization.
+ * Tests logs tab display, API queries, navigation, and highlighting.
+ */
+import getSpanPercentiles from 'api/trace/getSpanPercentiles';
+import getUserPreference from 'api/v1/user/preferences/name/get';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { server } from 'mocks-server/server';
+import { screen, userEvent, waitFor } from 'tests/test-utils';
+
+import {
+	expectedAfterFilterExpression,
+	expectedBeforeFilterExpression,
+	expectedSpanFilterExpression,
+	expectedTraceOnlyFilterExpression,
+	mockAfterLogsResponse,
+	mockBeforeLogsResponse,
+	mockSpanLogsResponse,
+} from './mockData';
+import {
+	ApiCallHistory,
+	CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	clearAllMocks,
+	createApiCallHistory,
+	mockSafeNavigate,
+	mockSpanPercentileResponse,
+	mockUpdateAllQueriesOperators,
+	mockUserPreferenceResponse,
+	mockWindowOpen,
+	renderSpanDetailsDrawer,
+	setupLogsApiMock,
+	setupSpanDetailsDrawerMocks,
+} from './SpanDetailsDrawer.test-utils';
+
+const mockGetSpanPercentiles = jest.mocked(getSpanPercentiles);
+const mockGetUserPreference = jest.mocked(getUserPreference);
+
+// =============================================================================
+// MOCK SETUP
+// =============================================================================
+
+jest.mock('container/SpanDetailsDrawer/constants', () => ({
+	...jest.requireActual('container/SpanDetailsDrawer/constants'),
+	SPAN_PERCENTILE_INITIAL_DELAY_MS: 0,
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string; search: string } => ({
+		pathname: ROUTES.TRACE_DETAIL,
+		search: 'trace_id=test-trace-id',
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.MockedFunction<() => void> } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						dataSource: 'logs',
+						queryName: 'A',
+						filter: { expression: "trace_id = 'test-trace-id'" },
+					},
+				],
+			},
+		},
+	}),
+}));
+
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+jest.mock('api/trace/getSpanPercentiles', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('api/v1/user/preferences/name/get', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock(
+	'components/Logs/RawLogView',
+	() =>
+		function MockRawLogView({
+			data,
+			onLogClick,
+			isHighlighted,
+			helpTooltip,
+		}: {
+			data: any;
+			onLogClick: (data: any, event: React.MouseEvent) => void;
+			isHighlighted: boolean;
+			helpTooltip: string;
+		}): JSX.Element {
+			return (
+				<div
+					data-testid={`raw-log-${data.id}`}
+					className={isHighlighted ? 'log-highlighted' : 'log-context'}
+					title={helpTooltip}
+					onClick={(e): void => onLogClick?.(data, e)}
+				>
+					<div>{data.body}</div>
+					<div>{data.timestamp}</div>
+				</div>
+			);
+		},
+);
+
+jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
+	PreferenceContextProvider: ({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element => <div>{children}</div>,
+}));
+
+// =============================================================================
+// TESTS
+// =============================================================================
+
+describe('SpanDetailsDrawer - Logs', () => {
+	let apiCallHistory: ApiCallHistory;
+
+	beforeEach(() => {
+		jest.useRealTimers();
+		clearAllMocks();
+		setupSpanDetailsDrawerMocks();
+
+		// Setup percentile API mocks to avoid delays
+		mockGetUserPreference.mockResolvedValue(mockUserPreferenceResponse);
+		mockGetSpanPercentiles.mockResolvedValue(mockSpanPercentileResponse);
+
+		apiCallHistory = createApiCallHistory();
+		setupLogsApiMock(
+			apiCallHistory,
+			mockSpanLogsResponse,
+			mockBeforeLogsResponse,
+			mockAfterLogsResponse,
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('should display logs tab in right sidebar when span is selected', async () => {
+		renderSpanDetailsDrawer();
+
+		const logsButton = screen.getByRole('button', { name: /logs/i });
+		expect(logsButton).toBeInTheDocument();
+		expect(logsButton).toBeVisible();
+	});
+
+	it(
+		'should open related logs view when logs tab is clicked',
+		async () => {
+			renderSpanDetailsDrawer();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			const logsButton = screen.getByRole('button', { name: /logs/i });
+			await user.click(logsButton);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('overlay-scrollbar')).toBeInTheDocument();
+				expect(screen.getByTestId('raw-log-span-log-1')).toBeInTheDocument();
+				expect(screen.getByTestId('raw-log-span-log-2')).toBeInTheDocument();
+				expect(
+					screen.getByTestId('raw-log-context-log-before'),
+				).toBeInTheDocument();
+				expect(screen.getByTestId('raw-log-context-log-after')).toBeInTheDocument();
+			});
+		},
+		CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	);
+
+	it(
+		'should make 3 API queries when logs tab is opened',
+		async () => {
+			renderSpanDetailsDrawer();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			const logsButton = screen.getByRole('button', { name: /logs/i });
+			await user.click(logsButton);
+
+			await waitFor(() => {
+				expect(GetMetricQueryRange).toHaveBeenCalledTimes(3);
+			});
+
+			const {
+				span_logs: spanQuery,
+				before_logs: beforeQuery,
+				after_logs: afterQuery,
+				trace_only_logs: traceOnlyQuery,
+			} = apiCallHistory;
+
+			expect((spanQuery as any).query.builder.queryData[0].filter.expression).toBe(
+				expectedSpanFilterExpression,
+			);
+			expect(
+				(beforeQuery as any).query.builder.queryData[0].filter.expression,
+			).toBe(expectedBeforeFilterExpression);
+			expect(
+				(afterQuery as any).query.builder.queryData[0].filter.expression,
+			).toBe(expectedAfterFilterExpression);
+
+			if (traceOnlyQuery) {
+				expect(traceOnlyQuery.query.builder.queryData[0].filter.expression).toBe(
+					expectedTraceOnlyFilterExpression,
+				);
+			}
+		},
+		CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	);
+
+	it(
+		'should use correct timestamp ordering for different query types',
+		async () => {
+			renderSpanDetailsDrawer();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			const logsButton = screen.getByRole('button', { name: /logs/i });
+			await user.click(logsButton);
+
+			await waitFor(() => {
+				expect(GetMetricQueryRange).toHaveBeenCalledTimes(3);
+			});
+
+			const {
+				span_logs: spanQuery,
+				before_logs: beforeQuery,
+				after_logs: afterQuery,
+			} = apiCallHistory;
+
+			expect((spanQuery as any).query.builder.queryData[0].orderBy[0].order).toBe(
+				'desc',
+			);
+			expect(
+				(beforeQuery as any).query.builder.queryData[0].orderBy[0].order,
+			).toBe('desc');
+			expect((afterQuery as any).query.builder.queryData[0].orderBy[0].order).toBe(
+				'asc',
+			);
+		},
+		CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	);
+
+	it(
+		'should navigate to logs explorer with span filters when span log is clicked',
+		async () => {
+			renderSpanDetailsDrawer();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			const logsButton = screen.getByRole('button', { name: /logs/i });
+			await user.click(logsButton);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('raw-log-span-log-1')).toBeInTheDocument();
+			});
+
+			const spanLog = screen.getByTestId('raw-log-span-log-1');
+			await user.click(spanLog);
+
+			await waitFor(() => {
+				expect(mockWindowOpen).toHaveBeenCalledWith(
+					expect.stringContaining(ROUTES.LOGS_EXPLORER),
+					'_blank',
+				);
+			});
+
+			const navigationCall = mockWindowOpen.mock.calls[0][0];
+			const urlParams = new URLSearchParams(navigationCall.split('?')[1]);
+
+			expect(urlParams.get(QueryParams.activeLogId)).toBe('"span-log-1"');
+			expect(urlParams.get(QueryParams.startTime)).toBe('1640994900000');
+			expect(urlParams.get(QueryParams.endTime)).toBe('1640995560000');
+
+			const compositeQuery = JSON.parse(
+				urlParams.get(QueryParams.compositeQuery) || '{}',
+			);
+			expect(compositeQuery.builder.queryData[0].filter.expression).toContain(
+				"trace_id = 'test-trace-id'",
+			);
+			expect(mockSafeNavigate).not.toHaveBeenCalled();
+		},
+		CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	);
+
+	it(
+		'should navigate to logs explorer with trace filter when context log is clicked',
+		async () => {
+			renderSpanDetailsDrawer();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			const logsButton = screen.getByRole('button', { name: /logs/i });
+			await user.click(logsButton);
+
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('raw-log-context-log-before'),
+				).toBeInTheDocument();
+			});
+
+			const contextLog = screen.getByTestId('raw-log-context-log-before');
+			await user.click(contextLog);
+
+			await waitFor(() => {
+				expect(mockWindowOpen).toHaveBeenCalledWith(
+					expect.stringContaining(ROUTES.LOGS_EXPLORER),
+					'_blank',
+				);
+			});
+
+			const navigationCall = mockWindowOpen.mock.calls[0][0];
+			const urlParams = new URLSearchParams(navigationCall.split('?')[1]);
+
+			expect(urlParams.get(QueryParams.activeLogId)).toBe('"context-log-before"');
+
+			const compositeQuery = JSON.parse(
+				urlParams.get(QueryParams.compositeQuery) || '{}',
+			);
+			expect(compositeQuery.builder.queryData[0].filter.expression).toContain(
+				"trace_id = 'test-trace-id'",
+			);
+			expect(compositeQuery.builder.queryData[0].filter.expression).not.toContain(
+				'span_id',
+			);
+			expect(mockSafeNavigate).not.toHaveBeenCalled();
+		},
+		CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	);
+
+	it(
+		'should always open logs explorer in new tab regardless of click type',
+		async () => {
+			renderSpanDetailsDrawer();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			const logsButton = screen.getByRole('button', { name: /logs/i });
+			await user.click(logsButton);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('raw-log-span-log-1')).toBeInTheDocument();
+			});
+
+			const spanLog = screen.getByTestId('raw-log-span-log-1');
+			await user.click(spanLog);
+
+			await waitFor(() => {
+				expect(mockWindowOpen).toHaveBeenCalledWith(
+					expect.stringContaining(ROUTES.LOGS_EXPLORER),
+					'_blank',
+				);
+			});
+
+			expect(mockSafeNavigate).not.toHaveBeenCalled();
+		},
+		CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	);
+
+	it(
+		'should display span logs as highlighted and context logs as regular',
+		async () => {
+			renderSpanDetailsDrawer();
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			const logsButton = screen.getByRole('button', { name: /logs/i });
+			await user.click(logsButton);
+
+			await waitFor(() => {
+				expect(GetMetricQueryRange).toHaveBeenCalledTimes(3);
+			});
+
+			await waitFor(() => {
+				expect(screen.getByTestId('raw-log-span-log-1')).toBeInTheDocument();
+				expect(screen.getByTestId('raw-log-span-log-2')).toBeInTheDocument();
+				expect(
+					screen.getByTestId('raw-log-context-log-before'),
+				).toBeInTheDocument();
+				expect(screen.getByTestId('raw-log-context-log-after')).toBeInTheDocument();
+			});
+
+			const spanLog1 = screen.getByTestId('raw-log-span-log-1');
+			const spanLog2 = screen.getByTestId('raw-log-span-log-2');
+			expect(spanLog1).toHaveClass('log-highlighted');
+			expect(spanLog2).toHaveClass('log-highlighted');
+			expect(spanLog1).toHaveAttribute(
+				'title',
+				'This log belongs to the current span',
+			);
+
+			const contextLogBefore = screen.getByTestId('raw-log-context-log-before');
+			const contextLogAfter = screen.getByTestId('raw-log-context-log-after');
+			expect(contextLogBefore).toHaveClass('log-context');
+			expect(contextLogAfter).toHaveClass('log-context');
+			expect(contextLogBefore).not.toHaveAttribute('title');
+		},
+		CI_SENSITIVE_LOGS_TEST_TIMEOUT,
+	);
+});
--- a/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.percentiles.test.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.percentiles.test.tsx
@@ -0,0 +1,565 @@
+/**
+ * SpanDetailsDrawer - Span Percentile Tests
+ *
+ * Split from SpanDetailsDrawer.test.tsx for better parallelization.
+ * Tests percentile display, expansion, time range selection, and resource attributes.
+ */
+import getSpanPercentiles from 'api/trace/getSpanPercentiles';
+import getUserPreference from 'api/v1/user/preferences/name/get';
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { server } from 'mocks-server/server';
+import { QueryBuilderContext } from 'providers/QueryBuilder';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
+import { SuccessResponseV2 } from 'types/api';
+import { GetSpanPercentilesResponseDataProps } from 'types/api/trace/getSpanPercentiles';
+
+import SpanDetailsDrawer from '../SpanDetailsDrawer';
+import { mockEmptyLogsResponse, mockSpan } from './mockData';
+
+// =============================================================================
+// TYPED MOCKS (defined before jest.mock for proper hoisting)
+// =============================================================================
+
+const mockGetSpanPercentiles = jest.mocked(getSpanPercentiles);
+const mockGetUserPreference = jest.mocked(getUserPreference);
+const mockSafeNavigate = jest.fn();
+
+// =============================================================================
+// JEST MOCKS
+// =============================================================================
+
+jest.mock('container/SpanDetailsDrawer/constants', () => ({
+	...jest.requireActual('container/SpanDetailsDrawer/constants'),
+	SPAN_PERCENTILE_INITIAL_DELAY_MS: 0,
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string; search: string } => ({
+		pathname: '/trace',
+		search: 'trace_id=test-trace-id',
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.MockedFunction<() => void> } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+const mockUpdateAllQueriesOperators = jest.fn().mockReturnValue({
+	builder: {
+		queryData: [
+			{
+				dataSource: 'logs',
+				queryName: 'A',
+				aggregateOperator: 'noop',
+				filter: { expression: "trace_id = 'test-trace-id'" },
+				expression: 'A',
+				disabled: false,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				groupBy: [],
+				limit: null,
+				having: [],
+			},
+		],
+		queryFormulas: [],
+	},
+	queryType: 'builder',
+});
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						dataSource: 'logs',
+						queryName: 'A',
+						filter: { expression: "trace_id = 'test-trace-id'" },
+					},
+				],
+			},
+		},
+	}),
+}));
+
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+jest.mock('api/trace/getSpanPercentiles', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('api/v1/user/preferences/name/get', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
+	PreferenceContextProvider: ({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element => <div>{children}</div>,
+}));
+
+// =============================================================================
+// MOCK DATA
+// =============================================================================
+
+const mockSpanPercentileResponse = {
+	httpStatusCode: 200 as const,
+	data: {
+		percentiles: {
+			p50: 500000000,
+			p90: 1000000000,
+			p95: 1500000000,
+			p99: 2000000000,
+		},
+		position: {
+			percentile: 75.5,
+			description: 'This span is in the 75th percentile',
+		},
+	},
+};
+
+const mockUserPreferenceResponse = {
+	statusCode: 200,
+	httpStatusCode: 200,
+	error: null,
+	message: 'Success',
+	data: {
+		name: 'span_percentile_resource_attributes',
+		description: 'Resource attributes for span percentile calculation',
+		valueType: 'array',
+		defaultValue: [],
+		value: ['service.name', 'name', 'http.method'],
+		allowedValues: [],
+		allowedScopes: [],
+		createdAt: '2023-01-01T00:00:00Z',
+		updatedAt: '2023-01-01T00:00:00Z',
+	},
+};
+
+const mockSpanPercentileErrorResponse = {
+	httpStatusCode: 500,
+	data: null,
+} as unknown as SuccessResponseV2<GetSpanPercentilesResponseDataProps>;
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const P75_TEXT = 'p75';
+const SPAN_PERCENTILE_TEXT = 'Span Percentile';
+const SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER = 'Search resource attributes';
+
+// =============================================================================
+// RENDER HELPER
+// =============================================================================
+
+const mockQueryBuilderContextValue = {
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					dataSource: 'logs',
+					queryName: 'A',
+					filter: { expression: "trace_id = 'test-trace-id'" },
+				},
+			],
+		},
+	},
+	stagedQuery: {
+		builder: {
+			queryData: [
+				{
+					dataSource: 'logs',
+					queryName: 'A',
+					filter: { expression: "trace_id = 'test-trace-id'" },
+				},
+			],
+		},
+	},
+	updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+	panelType: 'list',
+	redirectWithQuery: jest.fn(),
+	handleRunQuery: jest.fn(),
+	handleStageQuery: jest.fn(),
+	resetQuery: jest.fn(),
+};
+
+function renderSpanDetailsDrawer(): void {
+	render(
+		<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+			<SpanDetailsDrawer
+				isSpanDetailsDocked={false}
+				setIsSpanDetailsDocked={jest.fn()}
+				selectedSpan={mockSpan}
+				traceStartTime={1640995200000}
+				traceEndTime={1640995260000}
+			/>
+		</QueryBuilderContext.Provider>,
+	);
+}
+
+// =============================================================================
+// TESTS
+// =============================================================================
+
+describe('SpanDetailsDrawer - Span Percentile Functionality', () => {
+	beforeEach(() => {
+		jest.useRealTimers();
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		mockUpdateAllQueriesOperators.mockClear();
+
+		// Setup default mocks
+		mockGetUserPreference.mockResolvedValue(mockUserPreferenceResponse);
+		mockGetSpanPercentiles.mockResolvedValue(mockSpanPercentileResponse);
+
+		(GetMetricQueryRange as jest.Mock).mockImplementation(() =>
+			Promise.resolve(mockEmptyLogsResponse),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('should display span percentile value after successful API call', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+	});
+
+	it('should call API with correct parameters', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(mockGetSpanPercentiles).toHaveBeenCalled();
+		});
+
+		expect(mockGetSpanPercentiles).toHaveBeenCalledWith({
+			start: expect.any(Number),
+			end: expect.any(Number),
+			spanDuration: mockSpan.durationNano,
+			serviceName: mockSpan.serviceName,
+			name: mockSpan.name,
+			resourceAttributes: expect.any(Object),
+		});
+	});
+
+	it('should handle user preference loading', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(mockGetUserPreference).toHaveBeenCalledWith({
+				name: 'span_percentile_resource_attributes',
+			});
+		});
+	});
+
+	it('should show loading spinner while fetching percentile data', async () => {
+		mockGetSpanPercentiles.mockImplementation(
+			() =>
+				new Promise((resolve) => {
+					setTimeout(() => resolve(mockSpanPercentileResponse), 1000);
+				}),
+		);
+
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			const spinnerContainer = document.querySelector(
+				'.loading-spinner-container',
+			);
+			expect(spinnerContainer).toBeInTheDocument();
+		});
+	});
+
+	it('should handle API error gracefully', async () => {
+		mockGetSpanPercentiles.mockResolvedValue(mockSpanPercentileErrorResponse);
+
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.queryByText(/p\d+/)).not.toBeInTheDocument();
+		});
+	});
+
+	it('should not display percentile value when API returns non-200 status', async () => {
+		mockGetSpanPercentiles.mockResolvedValue({
+			httpStatusCode: 500 as const,
+			data: null,
+		} as unknown as Awaited<ReturnType<typeof getSpanPercentiles>>);
+
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.queryByText(/p\d+/)).not.toBeInTheDocument();
+		});
+	});
+
+	it('should handle empty percentile data gracefully', async () => {
+		mockGetSpanPercentiles.mockResolvedValue({
+			httpStatusCode: 200,
+			data: {
+				percentiles: {},
+				position: {
+					percentile: 0,
+					description: '',
+				},
+			},
+		});
+
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText('p0')).toBeInTheDocument();
+		});
+	});
+
+	it('should display tooltip with correct content', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		fireEvent.mouseEnter(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(/This span duration is/)).toBeInTheDocument();
+			expect(screen.getByText(/out of the distribution/)).toBeInTheDocument();
+			expect(
+				screen.getByText(/evaluated for 1 hour\(s\) since the span start time/),
+			).toBeInTheDocument();
+			expect(screen.getByText('Click to learn more')).toBeInTheDocument();
+		});
+	});
+
+	it('should expand percentile details when percentile value is clicked', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		fireEvent.click(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(SPAN_PERCENTILE_TEXT)).toBeInTheDocument();
+			expect(screen.getByText(/This span duration is/)).toBeInTheDocument();
+			expect(
+				screen.getByText(/out of the distribution for this resource/),
+			).toBeInTheDocument();
+		});
+	});
+
+	it('should display percentile table with correct values', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		fireEvent.click(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(SPAN_PERCENTILE_TEXT)).toBeInTheDocument();
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('Percentile')).toBeInTheDocument();
+			expect(screen.getByText('Duration')).toBeInTheDocument();
+		});
+
+		expect(screen.getByText('p50')).toBeInTheDocument();
+		expect(screen.getByText('p90')).toBeInTheDocument();
+		expect(screen.getByText('p95')).toBeInTheDocument();
+		expect(screen.getByText('p99')).toBeInTheDocument();
+		expect(screen.getAllByText(P75_TEXT)).toHaveLength(3);
+		expect(screen.getAllByText(/this span/i).length).toBeGreaterThan(0);
+	});
+
+	it('should allow time range selection and trigger API call', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		fireEvent.click(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(SPAN_PERCENTILE_TEXT)).toBeInTheDocument();
+		});
+
+		const timeRangeSelector = screen.getByRole('combobox');
+		expect(timeRangeSelector).toBeInTheDocument();
+		expect(screen.getByText(/1.*hour/i)).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(mockGetSpanPercentiles).toHaveBeenCalledWith(
+				expect.objectContaining({
+					start: expect.any(Number),
+					end: expect.any(Number),
+					spanDuration: mockSpan.durationNano,
+					serviceName: mockSpan.serviceName,
+					name: mockSpan.name,
+					resourceAttributes: expect.any(Object),
+				}),
+			);
+		});
+	});
+
+	it('should show resource attributes selector when plus icon is clicked', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		fireEvent.click(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(SPAN_PERCENTILE_TEXT)).toBeInTheDocument();
+		});
+
+		const plusIcon = screen.getByTestId('plus-icon');
+		fireEvent.click(plusIcon);
+
+		await waitFor(() => {
+			expect(
+				screen.getByPlaceholderText(SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER),
+			).toBeInTheDocument();
+		});
+	});
+
+	it('should filter resource attributes based on search query', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		fireEvent.click(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(SPAN_PERCENTILE_TEXT)).toBeInTheDocument();
+		});
+
+		const plusIcon = screen.getByTestId('plus-icon');
+		fireEvent.click(plusIcon);
+
+		await waitFor(() => {
+			expect(
+				screen.getByPlaceholderText(SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER),
+			).toBeInTheDocument();
+		});
+
+		const searchInput = screen.getByPlaceholderText(
+			SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER,
+		);
+		fireEvent.change(searchInput, { target: { value: 'http' } });
+
+		expect(screen.getAllByText('http.method').length).toBeGreaterThan(0);
+		expect(screen.getAllByText(SPAN_ATTRIBUTES.HTTP_URL).length).toBeGreaterThan(
+			0,
+		);
+		expect(screen.getAllByText('http.status_code').length).toBeGreaterThan(0);
+	});
+
+	it('should handle resource attribute selection and trigger API call', async () => {
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		fireEvent.click(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(SPAN_PERCENTILE_TEXT)).toBeInTheDocument();
+		});
+
+		const plusIcon = screen.getByTestId('plus-icon');
+		fireEvent.click(plusIcon);
+
+		await waitFor(() => {
+			expect(
+				screen.getByPlaceholderText(SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER),
+			).toBeInTheDocument();
+		});
+
+		const httpMethodCheckbox = screen.getByRole('checkbox', {
+			name: /http\.method/i,
+		});
+		fireEvent.click(httpMethodCheckbox);
+
+		await waitFor(() => {
+			expect(mockGetSpanPercentiles).toHaveBeenCalledWith(
+				expect.objectContaining({
+					resourceAttributes: expect.objectContaining({
+						'http.method': 'GET',
+					}),
+				}),
+			);
+		});
+	});
+
+	it('should close resource attributes selector when check icon is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderSpanDetailsDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(P75_TEXT)).toBeInTheDocument();
+		});
+
+		const percentileValue = screen.getByText(P75_TEXT);
+		await user.click(percentileValue);
+
+		await waitFor(() => {
+			expect(screen.getByText(SPAN_PERCENTILE_TEXT)).toBeInTheDocument();
+		});
+
+		const plusIcon = screen.getByTestId('plus-icon');
+		await user.click(plusIcon);
+
+		await waitFor(() => {
+			expect(
+				screen.getByPlaceholderText(SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER),
+			).toBeInTheDocument();
+		});
+
+		const checkIcon = screen.getByTestId('check-icon');
+		await user.click(checkIcon);
+
+		await waitFor(() => {
+			expect(
+				screen.queryByPlaceholderText(SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER),
+			).not.toBeInTheDocument();
+		});
+	});
+});
--- a/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.search.test.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.search.test.tsx
@@ -0,0 +1,188 @@
+/**
+ * SpanDetailsDrawer - Search Visibility Tests
+ *
+ * Split from SpanDetailsDrawer.test.tsx for better parallelization.
+ * Tests search functionality in the attributes tab.
+ */
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { server } from 'mocks-server/server';
+import { fireEvent, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import { mockEmptyLogsResponse } from './mockData';
+import {
+	clearAllMocks,
+	mockSafeNavigate,
+	mockUpdateAllQueriesOperators,
+	renderSpanDetailsDrawer,
+	SEARCH_PLACEHOLDER,
+	setupSpanDetailsDrawerMocks,
+} from './SpanDetailsDrawer.test-utils';
+
+// =============================================================================
+// MOCK SETUP
+// =============================================================================
+
+jest.mock('container/SpanDetailsDrawer/constants', () => ({
+	...jest.requireActual('container/SpanDetailsDrawer/constants'),
+	SPAN_PERCENTILE_INITIAL_DELAY_MS: 0,
+}));
+
+// Mock external dependencies
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string; search: string } => ({
+		pathname: '/trace',
+		search: 'trace_id=test-trace-id',
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.MockedFunction<() => void> } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						dataSource: 'logs',
+						queryName: 'A',
+						filter: { expression: "trace_id = 'test-trace-id'" },
+					},
+				],
+			},
+		},
+	}),
+}));
+
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+// Mock getSpanPercentiles API
+jest.mock('api/trace/getSpanPercentiles', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+// Mock getUserPreference API
+jest.mock('api/v1/user/preferences/name/get', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+// Mock PreferenceContextProvider
+jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
+	PreferenceContextProvider: ({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element => <div>{children}</div>,
+}));
+
+// =============================================================================
+// TESTS
+// =============================================================================
+
+describe('SpanDetailsDrawer - Search Visibility User Flows', () => {
+	beforeEach(() => {
+		jest.useRealTimers();
+		clearAllMocks();
+		setupSpanDetailsDrawerMocks();
+
+		(GetMetricQueryRange as jest.Mock).mockImplementation(() =>
+			Promise.resolve(mockEmptyLogsResponse),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	// Journey 1: Default Search Visibility
+
+	it('should display search visible by default when user opens span details', () => {
+		renderSpanDetailsDrawer();
+
+		// User sees search input in the Attributes tab by default
+		const searchInput = screen.getByPlaceholderText(SEARCH_PLACEHOLDER);
+		expect(searchInput).toBeInTheDocument();
+		expect(searchInput).toBeVisible();
+	});
+
+	it('should filter attributes when user types in search', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		renderSpanDetailsDrawer();
+
+		// User sees all attributes initially
+		expect(screen.getByText('http.method')).toBeInTheDocument();
+		expect(screen.getByText(SPAN_ATTRIBUTES.HTTP_URL)).toBeInTheDocument();
+		expect(screen.getByText('http.status_code')).toBeInTheDocument();
+
+		// User types "method" in search
+		const searchInput = screen.getByPlaceholderText(SEARCH_PLACEHOLDER);
+		await user.type(searchInput, 'method');
+
+		// User sees only matching attributes
+		await waitFor(() => {
+			expect(screen.getByText('http.method')).toBeInTheDocument();
+			expect(screen.queryByText(SPAN_ATTRIBUTES.HTTP_URL)).not.toBeInTheDocument();
+			expect(screen.queryByText('http.status_code')).not.toBeInTheDocument();
+		});
+	});
+
+	// Journey 2: Search Toggle & Focus Management
+
+	it('should hide search when user clicks search icon', () => {
+		renderSpanDetailsDrawer();
+
+		// User sees search initially
+		expect(screen.getByPlaceholderText(SEARCH_PLACEHOLDER)).toBeInTheDocument();
+
+		// User clicks search icon to hide search
+		const tabBar = screen.getByRole('tablist');
+		const searchIcon = tabBar.querySelector('.search-icon');
+		if (searchIcon) {
+			fireEvent.click(searchIcon);
+		}
+
+		// Search is now hidden
+		expect(
+			screen.queryByPlaceholderText(SEARCH_PLACEHOLDER),
+		).not.toBeInTheDocument();
+	});
+
+	it('should show and focus search when user clicks search icon again', () => {
+		renderSpanDetailsDrawer();
+
+		// User clicks search icon to hide
+		const tabBar = screen.getByRole('tablist');
+		const searchIcon = tabBar.querySelector('.search-icon');
+		if (searchIcon) {
+			fireEvent.click(searchIcon);
+		}
+
+		// Search is hidden
+		expect(
+			screen.queryByPlaceholderText(SEARCH_PLACEHOLDER),
+		).not.toBeInTheDocument();
+
+		// User clicks search icon again to show
+		if (searchIcon) {
+			fireEvent.click(searchIcon);
+		}
+
+		// Search appears and receives focus
+		const searchInput = screen.getByPlaceholderText(
+			SEARCH_PLACEHOLDER,
+		) as HTMLInputElement;
+		expect(searchInput).toBeInTheDocument();
+		expect(searchInput).toHaveFocus();
+	});
+});
--- a/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.status-message.test.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.status-message.test.tsx
@@ -0,0 +1,228 @@
+/**
+ * SpanDetailsDrawer - Status Message Truncation Tests
+ *
+ * Split from SpanDetailsDrawer.test.tsx for better parallelization.
+ * Tests status message display and expandable popover functionality.
+ */
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { server } from 'mocks-server/server';
+import { QueryBuilderContext } from 'providers/QueryBuilder';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+
+import SpanDetailsDrawer from '../SpanDetailsDrawer';
+import {
+	mockEmptyLogsResponse,
+	mockSpanWithLongStatusMessage,
+	mockSpanWithShortStatusMessage,
+} from './mockData';
+import {
+	clearAllMocks,
+	mockQueryBuilderContextValue,
+	mockSafeNavigate,
+	mockUpdateAllQueriesOperators,
+	setupSpanDetailsDrawerMocks,
+} from './SpanDetailsDrawer.test-utils';
+
+// =============================================================================
+// MOCK SETUP
+// =============================================================================
+
+jest.mock('container/SpanDetailsDrawer/constants', () => ({
+	...jest.requireActual('container/SpanDetailsDrawer/constants'),
+	SPAN_PERCENTILE_INITIAL_DELAY_MS: 0,
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string; search: string } => ({
+		pathname: '/trace',
+		search: 'trace_id=test-trace-id',
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.MockedFunction<() => void> } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): any => ({
+		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						dataSource: 'logs',
+						queryName: 'A',
+						filter: { expression: "trace_id = 'test-trace-id'" },
+					},
+				],
+			},
+		},
+	}),
+}));
+
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+jest.mock('api/trace/getSpanPercentiles', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('api/v1/user/preferences/name/get', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock(
+	'container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover',
+	() =>
+		function AttributeWithExpandablePopover({
+			attributeKey,
+			attributeValue,
+			onExpand,
+		}: {
+			attributeKey: string;
+			attributeValue: string;
+			onExpand: (title: string, content: string) => void;
+		}): JSX.Element {
+			return (
+				<div className="attribute-container" key={attributeKey}>
+					<div className="attribute-key">{attributeKey}</div>
+					<div className="wrapper">
+						<div className="attribute-value">{attributeValue}</div>
+						<div data-testid="popover-content">
+							<pre>{attributeValue}</pre>
+							<button
+								type="button"
+								onClick={(): void => onExpand(attributeKey, attributeValue)}
+							>
+								Expand
+							</button>
+						</div>
+					</div>
+				</div>
+			);
+		},
+);
+
+jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
+	PreferenceContextProvider: ({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element => <div>{children}</div>,
+}));
+
+// =============================================================================
+// TESTS
+// =============================================================================
+
+describe('SpanDetailsDrawer - Status Message Truncation User Flows', () => {
+	beforeEach(() => {
+		jest.useRealTimers();
+		clearAllMocks();
+		setupSpanDetailsDrawerMocks();
+
+		(GetMetricQueryRange as jest.Mock).mockImplementation(() =>
+			Promise.resolve(mockEmptyLogsResponse),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('should display expandable popover with Expand button for long status message', () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithLongStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User sees status message label
+		expect(screen.getByText('status message')).toBeInTheDocument();
+
+		// User sees the status message value
+		const statusMessageElements = screen.getAllByText(
+			mockSpanWithLongStatusMessage.statusMessage,
+		);
+		expect(statusMessageElements.length).toBeGreaterThan(0);
+
+		// User sees Expand button in popover
+		const expandButton = screen.getByRole('button', { name: /expand/i });
+		expect(expandButton).toBeInTheDocument();
+	});
+
+	it('should open modal with full status message when user clicks Expand button', async () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithLongStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User clicks the Expand button
+		const expandButton = screen.getByRole('button', { name: /expand/i });
+		await fireEvent.click(expandButton);
+
+		// User sees modal with the full status message content
+		await waitFor(() => {
+			const modalTitle = document.querySelector('.ant-modal-title');
+			expect(modalTitle).toBeInTheDocument();
+			expect(modalTitle?.textContent).toBe('status message');
+			const preElement = document.querySelector(
+				'.attribute-with-expandable-popover__full-view',
+			);
+			expect(preElement).toBeInTheDocument();
+			expect(preElement?.textContent).toBe(
+				mockSpanWithLongStatusMessage.statusMessage,
+			);
+		});
+	});
+
+	it('should display short status message as simple text without popover', () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithShortStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User sees status message label and value
+		expect(screen.getByText('status message')).toBeInTheDocument();
+		expect(
+			screen.getByText(mockSpanWithShortStatusMessage.statusMessage),
+		).toBeInTheDocument();
+
+		// User hovers over the status message value
+		const statusMessageValue = screen.getByText(
+			mockSpanWithShortStatusMessage.statusMessage,
+		);
+		fireEvent.mouseEnter(statusMessageValue);
+
+		// No Expand button should appear
+		expect(
+			screen.queryByRole('button', { name: /expand/i }),
+		).not.toBeInTheDocument();
+	});
+});
--- a/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.test-utils.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.test-utils.tsx
@@ -0,0 +1,249 @@
+/**
+ * Shared test utilities for SpanDetailsDrawer tests.
+ * Extract common mocks, setup, and render helpers to avoid duplication across split test files.
+ */
+import getSpanPercentiles from 'api/trace/getSpanPercentiles';
+import getUserPreference from 'api/v1/user/preferences/name/get';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { QueryBuilderContext } from 'providers/QueryBuilder';
+import { render } from 'tests/test-utils';
+import { SuccessResponseV2 } from 'types/api';
+import { GetSpanPercentilesResponseDataProps } from 'types/api/trace/getSpanPercentiles';
+
+import SpanDetailsDrawer from '../SpanDetailsDrawer';
+import { mockEmptyLogsResponse, mockSpan } from './mockData';
+
+// =============================================================================
+// TYPED MOCKS
+// =============================================================================
+
+export const mockGetSpanPercentiles = jest.mocked(getSpanPercentiles);
+export const mockGetUserPreference = jest.mocked(getUserPreference);
+export const mockSafeNavigate = jest.fn();
+export const mockWindowOpen = jest.fn();
+
+// =============================================================================
+// MOCK SETUP (call in beforeAll or at module level)
+// =============================================================================
+
+export function setupSpanDetailsDrawerMocks(): void {
+	// Mock window.open
+	Object.defineProperty(window, 'open', {
+		writable: true,
+		value: mockWindowOpen,
+	});
+}
+
+// =============================================================================
+// MOCK UPDATE OPERATORS
+// =============================================================================
+
+export const mockUpdateAllQueriesOperators = jest.fn().mockReturnValue({
+	builder: {
+		queryData: [
+			{
+				dataSource: 'logs',
+				queryName: 'A',
+				aggregateOperator: 'noop',
+				filter: { expression: "trace_id = 'test-trace-id'" },
+				expression: 'A',
+				disabled: false,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				groupBy: [],
+				limit: null,
+				having: [],
+			},
+		],
+		queryFormulas: [],
+	},
+	queryType: 'builder',
+});
+
+// =============================================================================
+// QUERY BUILDER CONTEXT MOCK
+// =============================================================================
+
+export const mockQueryBuilderContextValue = {
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					dataSource: 'logs',
+					queryName: 'A',
+					filter: { expression: "trace_id = 'test-trace-id'" },
+				},
+			],
+		},
+	},
+	stagedQuery: {
+		builder: {
+			queryData: [
+				{
+					dataSource: 'logs',
+					queryName: 'A',
+					filter: { expression: "trace_id = 'test-trace-id'" },
+				},
+			],
+		},
+	},
+	updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+	panelType: 'list',
+	redirectWithQuery: jest.fn(),
+	handleRunQuery: jest.fn(),
+	handleStageQuery: jest.fn(),
+	resetQuery: jest.fn(),
+};
+
+// =============================================================================
+// RENDER HELPER
+// =============================================================================
+
+interface RenderSpanDetailsDrawerProps {
+	selectedSpan?: typeof mockSpan;
+	traceStartTime?: number;
+	traceEndTime?: number;
+	isSpanDetailsDocked?: boolean;
+	setIsSpanDetailsDocked?: jest.Mock;
+}
+
+export const renderSpanDetailsDrawer = (
+	props: RenderSpanDetailsDrawerProps = {},
+): void => {
+	const {
+		selectedSpan = mockSpan,
+		traceStartTime = 1640995200000,
+		traceEndTime = 1640995260000,
+		isSpanDetailsDocked = false,
+		setIsSpanDetailsDocked = jest.fn(),
+	} = props;
+
+	render(
+		<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+			<SpanDetailsDrawer
+				isSpanDetailsDocked={isSpanDetailsDocked}
+				setIsSpanDetailsDocked={setIsSpanDetailsDocked}
+				selectedSpan={selectedSpan}
+				traceStartTime={traceStartTime}
+				traceEndTime={traceEndTime}
+			/>
+		</QueryBuilderContext.Provider>,
+	);
+};
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+export const CI_SENSITIVE_LOGS_TEST_TIMEOUT = 15000;
+export const P75_TEXT = 'p75';
+export const SPAN_PERCENTILE_TEXT = 'Span Percentile';
+export const SEARCH_PLACEHOLDER = 'Search for attribute...';
+export const SEARCH_RESOURCE_ATTRIBUTES_PLACEHOLDER =
+	'Search resource attributes';
+
+// =============================================================================
+// MOCK DATA FOR PERCENTILES
+// =============================================================================
+
+export const mockSpanPercentileResponse = {
+	httpStatusCode: 200 as const,
+	data: {
+		percentiles: {
+			p50: 500000000,
+			p90: 1000000000,
+			p95: 1500000000,
+			p99: 2000000000,
+		},
+		position: {
+			percentile: 75.5,
+			description: 'This span is in the 75th percentile',
+		},
+	},
+};
+
+export const mockUserPreferenceResponse = {
+	statusCode: 200,
+	httpStatusCode: 200,
+	error: null,
+	message: 'Success',
+	data: {
+		name: 'span_percentile_resource_attributes',
+		description: 'Resource attributes for span percentile calculation',
+		valueType: 'array',
+		defaultValue: [],
+		value: ['service.name', 'name', 'http.method'],
+		allowedValues: [],
+		allowedScopes: [],
+		createdAt: '2023-01-01T00:00:00Z',
+		updatedAt: '2023-01-01T00:00:00Z',
+	},
+};
+
+export const mockSpanPercentileErrorResponse = {
+	httpStatusCode: 500,
+	data: null,
+} as unknown as SuccessResponseV2<GetSpanPercentilesResponseDataProps>;
+
+// =============================================================================
+// COMMON BEFOREEACH SETUP
+// =============================================================================
+
+export interface ApiCallHistory {
+	span_logs: any;
+	before_logs: any;
+	after_logs: any;
+	trace_only_logs: any;
+}
+
+export function createApiCallHistory(): ApiCallHistory {
+	return {
+		span_logs: null,
+		before_logs: null,
+		after_logs: null,
+		trace_only_logs: null,
+	};
+}
+
+export function setupLogsApiMock(
+	apiCallHistory: ApiCallHistory,
+	mockSpanLogsResponse: any,
+	mockBeforeLogsResponse: any,
+	mockAfterLogsResponse: any,
+): void {
+	(GetMetricQueryRange as jest.Mock).mockImplementation((query) => {
+		const filterExpression = (query as any)?.query?.builder?.queryData?.[0]
+			?.filter?.expression;
+
+		if (!filterExpression) {
+			return Promise.resolve(mockEmptyLogsResponse);
+		}
+
+		if (filterExpression.includes('span_id')) {
+			apiCallHistory.span_logs = query;
+			return Promise.resolve(mockSpanLogsResponse);
+		}
+		if (filterExpression.includes('id <')) {
+			apiCallHistory.before_logs = query;
+			return Promise.resolve(mockBeforeLogsResponse);
+		}
+		if (filterExpression.includes('id >')) {
+			apiCallHistory.after_logs = query;
+			return Promise.resolve(mockAfterLogsResponse);
+		}
+		if (filterExpression.includes('trace_id =')) {
+			apiCallHistory.trace_only_logs = query;
+			return Promise.resolve(mockAfterLogsResponse);
+		}
+
+		return Promise.resolve(mockEmptyLogsResponse);
+	});
+}
+
+export function clearAllMocks(): void {
+	jest.clearAllMocks();
+	mockSafeNavigate.mockClear();
+	mockWindowOpen.mockClear();
+	mockUpdateAllQueriesOperators.mockClear();
+	mockGetSpanPercentiles.mockClear();
+	mockGetUserPreference.mockClear();
+}
--- a/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.test.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/tests/SpanDetailsDrawer.test.tsx
--- a/frontend/src/container/SpanDetailsDrawer/constants.ts
+++ b/frontend/src/container/SpanDetailsDrawer/constants.ts
@@ -9,3 +9,9 @@ export const RELATED_SIGNALS_VIEW_TYPES = {
 	// METRICS: RelatedSignalsViews.METRICS,
 	INFRA: RelatedSignalsViews.INFRA,
 };
+
+/**
+ * Delay in milliseconds before fetching span percentile data on initial load.
+ * Product requirement to avoid overwhelming API on rapid span selections.
+ */
+export const SPAN_PERCENTILE_INITIAL_DELAY_MS = 2000;
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts
@@ -143,6 +143,7 @@ export const routesToSkip = [
 	ROUTES.SETTINGS,
 	ROUTES.LIST_ALL_ALERT,
 	ROUTES.TRACE_DETAIL,
+	ROUTES.TRACE_DETAIL_OLD,
 	ROUTES.ALL_CHANNELS,
 	ROUTES.USAGE_EXPLORER,
 	ROUTES.GET_STARTED,
--- a/frontend/src/hooks/dashboard/useDashboardBootstrap.test.tsx
+++ b/frontend/src/hooks/dashboard/useDashboardBootstrap.test.tsx
@@ -0,0 +1,158 @@
+import { act, render } from '@testing-library/react';
+import { Modal } from 'antd';
+import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
+import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
+import useTabVisibility from 'hooks/useTabFocus';
+import { getMinMaxForSelectedTime } from 'lib/getMinMax';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { useDashboardQuery } from './useDashboardQuery';
+
+const mockDispatch = jest.fn();
+const mockSetDashboardData = jest.fn();
+const mockSetLayouts = jest.fn();
+const mockSetPanelMap = jest.fn();
+const mockResetDashboardStore = jest.fn();
+const mockGetUrlVariables = jest.fn();
+const mockUpdateUrlVariable = jest.fn();
+const mockRefetch = jest.fn();
+
+let mockGlobalTime = {
+	selectedTime: 'custom',
+	minTime: 1710000000000000000,
+	maxTime: 1710000300000000000,
+	isAutoRefreshDisabled: true,
+};
+
+let currentQueryData: unknown;
+
+jest.mock('react-i18next', () => ({
+	useTranslation: (): { t: (key: string) => string } => ({
+		t: (key: string): string => key,
+	}),
+}));
+
+jest.mock('react-redux', () => ({
+	useDispatch: jest.fn(() => mockDispatch),
+	useSelector: jest.fn(
+		(
+			selectorFn: (state: { globalTime: typeof mockGlobalTime }) => unknown,
+		): unknown => selectorFn({ globalTime: mockGlobalTime }),
+	),
+}));
+
+jest.mock('hooks/useTabFocus', () => jest.fn(() => true));
+jest.mock('hooks/dashboard/useDashboardVariablesSync', () => ({
+	useDashboardVariablesSync: jest.fn(),
+}));
+jest.mock('./useDashboardQuery', () => ({
+	useDashboardQuery: jest.fn(),
+}));
+jest.mock('hooks/dashboard/useTransformDashboardVariables', () => ({
+	useTransformDashboardVariables: jest.fn(),
+}));
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: jest.fn(),
+}));
+jest.mock('providers/Dashboard/initializeDefaultVariables', () => ({
+	initializeDefaultVariables: jest.fn(),
+}));
+jest.mock('lib/dashboard/getUpdatedLayout', () => ({
+	getUpdatedLayout: jest.fn(() => []),
+}));
+jest.mock('providers/Dashboard/util', () => ({
+	sortLayout: jest.fn((layout) => layout),
+}));
+jest.mock('lib/getMinMax', () => ({
+	getMinMaxForSelectedTime: jest.fn(),
+}));
+
+function TestComponent({ confirm }: { confirm: typeof Modal.confirm }): null {
+	useDashboardBootstrap('dashboard-1', { confirm });
+	return null;
+}
+
+describe('useDashboardBootstrap', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		mockGlobalTime = {
+			selectedTime: 'custom',
+			minTime: 1710000000000000000,
+			maxTime: 1710000300000000000,
+			isAutoRefreshDisabled: true,
+		};
+
+		jest.mocked(useDashboardStore as unknown as jest.Mock).mockReturnValue({
+			setDashboardData: mockSetDashboardData,
+			setLayouts: mockSetLayouts,
+			setPanelMap: mockSetPanelMap,
+			resetDashboardStore: mockResetDashboardStore,
+		});
+
+		jest
+			.mocked(useTransformDashboardVariables as unknown as jest.Mock)
+			.mockReturnValue({
+				getUrlVariables: mockGetUrlVariables,
+				updateUrlVariable: mockUpdateUrlVariable,
+				transformDashboardVariables: <T,>(data: T): T => data,
+			});
+
+		jest.mocked(useTabVisibility as unknown as jest.Mock).mockReturnValue(true);
+		jest
+			.mocked(useDashboardQuery as unknown as jest.Mock)
+			.mockImplementation(() => ({
+				data: currentQueryData,
+				isLoading: false,
+				isError: false,
+				isFetching: false,
+				error: null,
+				refetch: mockRefetch,
+			}));
+	});
+
+	it('keeps minTime and maxTime unchanged for custom range on refresh confirm', () => {
+		const initialDashboard = {
+			id: 'dashboard-1',
+			updatedAt: '2024-01-01T00:00:00.000Z',
+			data: { layout: [], panelMap: {}, variables: {} },
+		};
+
+		const updatedDashboard = {
+			id: 'dashboard-1',
+			updatedAt: '2024-01-01T01:00:00.000Z',
+			data: { layout: [], panelMap: {}, variables: {} },
+		};
+
+		const mockConfirm = jest.fn<
+			ReturnType<typeof Modal.confirm>,
+			Parameters<typeof Modal.confirm>
+		>(() => ({ destroy: jest.fn(), update: jest.fn() }));
+
+		currentQueryData = { data: initialDashboard };
+		const { rerender } = render(<TestComponent confirm={mockConfirm} />);
+
+		expect(mockConfirm).not.toHaveBeenCalled();
+
+		currentQueryData = { data: updatedDashboard };
+		rerender(<TestComponent confirm={mockConfirm} />);
+
+		expect(mockConfirm).toHaveBeenCalledTimes(1);
+		const firstCall = mockConfirm.mock.calls[0];
+		expect(firstCall).toBeDefined();
+		const [confirmProps] = firstCall as Parameters<typeof Modal.confirm>;
+
+		act(() => {
+			confirmProps.onOk?.();
+		});
+
+		expect(getMinMaxForSelectedTime).not.toHaveBeenCalled();
+		expect(mockDispatch).toHaveBeenCalledWith({
+			type: 'UPDATE_TIME_INTERVAL',
+			payload: {
+				selectedTime: 'custom',
+				minTime: mockGlobalTime.minTime,
+				maxTime: mockGlobalTime.maxTime,
+			},
+		});
+	});
+});
--- a/frontend/src/hooks/dashboard/useDashboardBootstrap.ts
+++ b/frontend/src/hooks/dashboard/useDashboardBootstrap.ts
@@ -102,11 +102,19 @@ export function useDashboardBootstrap(
 				onOk() {
 					setDashboardData(updatedDashboardData);

-					const { maxTime, minTime } = getMinMaxForSelectedTime(
-						globalTime.selectedTime,
-						globalTime.minTime,
-						globalTime.maxTime,
-					);
+					const { maxTime, minTime } =
+						globalTime.selectedTime === 'custom'
+							? {
+									// For custom ranges, min/max are already stored in nanoseconds.
+									// Recomputing via getMinMaxForSelectedTime would multiply them again.
+									maxTime: globalTime.maxTime,
+									minTime: globalTime.minTime,
+								}
+							: getMinMaxForSelectedTime(
+									globalTime.selectedTime,
+									globalTime.minTime,
+									globalTime.maxTime,
+								);
 					dispatch({
 						type: UPDATE_TIME_INTERVAL,
 						payload: { maxTime, minTime, selectedTime: globalTime.selectedTime },
--- a/frontend/src/hooks/trace/useCopySpanLink.ts
+++ b/frontend/src/hooks/trace/useCopySpanLink.ts
@@ -1,18 +1,23 @@
 import { MouseEventHandler, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import { useNotifications } from 'hooks/useNotifications';
+import { toast } from '@signozhq/ui';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { Span } from 'types/api/trace/getTraceV2';
 import { getAbsoluteUrl } from 'utils/basePath';

+// Accepts both V2 (spanId) and V3 (span_id) span shapes
+// TODO: Remove V2 (spanId) support when phasing out V2
+interface SpanLike {
+	spanId?: string;
+	span_id?: string;
+}
+
 export const useCopySpanLink = (
-	span?: Span,
+	span?: SpanLike,
 ): { onSpanCopy: MouseEventHandler<HTMLElement> } => {
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
 	const [, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();

 	const onSpanCopy: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
@@ -25,18 +30,19 @@ export const useCopySpanLink = (

 			urlQuery.delete('spanId');

-			if (span.spanId) {
-				urlQuery.set('spanId', span?.spanId);
+			const id = span.span_id || span.spanId;
+			if (id) {
+				urlQuery.set('spanId', id);
 			}

 			const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);

 			setCopy(link);
-			notifications.success({
-				message: 'Copied to clipboard',
+			toast.success('Copied to clipboard', {
+				position: 'top-right',
 			});
 		},
-		[span, urlQuery, pathname, setCopy, notifications],
+		[span, urlQuery, pathname, setCopy],
 	);

 	return {
--- a/frontend/src/hooks/trace/useGetTraceFlamegraph.tsx
+++ b/frontend/src/hooks/trace/useGetTraceFlamegraph.tsx
@@ -13,11 +13,7 @@ const useGetTraceFlamegraph = (
 	useQuery({
 		queryFn: () => getTraceFlamegraph(props),
 		// if any of the props changes then we need to trigger an API call as the older data will be obsolete
-		queryKey: [
-			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
-			props.traceId,
-			props.selectedSpanId,
-		],
+		queryKey: [REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH, props.traceId],
 		enabled: !!props.traceId,
 		keepPreviousData: true,
 		refetchOnWindowFocus: false,
--- a/frontend/src/hooks/trace/useGetTraceV3.tsx
+++ b/frontend/src/hooks/trace/useGetTraceV3.tsx
@@ -0,0 +1,29 @@
+import { useQuery, UseQueryResult } from 'react-query';
+import getTraceV3 from 'api/trace/getTraceV3';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
+} from 'types/api/trace/getTraceV3';
+
+const useGetTraceV3 = (props: GetTraceV3PayloadProps): UseTraceV3 =>
+	useQuery({
+		queryFn: () => getTraceV3(props),
+		queryKey: [
+			REACT_QUERY_KEY.GET_TRACE_V3_WATERFALL,
+			props.traceId,
+			props.selectedSpanId,
+			props.isSelectedSpanIDUnCollapsed,
+		],
+		enabled: !!props.traceId,
+		keepPreviousData: true,
+		refetchOnWindowFocus: false,
+	});
+
+type UseTraceV3 = UseQueryResult<
+	SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse,
+	unknown
+>;
+
+export default useGetTraceV3;
--- a/frontend/src/hooks/useAuthZ/permissions.type.ts
+++ b/frontend/src/hooks/useAuthZ/permissions.type.ts
@@ -1,32 +1,29 @@
-// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
+// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz
 export default {
 	status: 'success',
 	data: {
 		resources: [
 			{
-				name: 'dashboard',
-				type: 'metaresource',
-			},
-			{
-				name: 'dashboards',
+				kind: 'role',
 				type: 'metaresources',
 			},
 			{
-				name: 'role',
+				kind: 'role',
 				type: 'role',
 			},
 			{
-				name: 'roles',
-				type: 'metaresources',
+				kind: 'serviceaccount',
+				type: 'serviceaccount',
 			},
 		],
 		relations: {
 			assignee: ['role'],
+			attach: ['role', 'serviceaccount'],
 			create: ['metaresources'],
-			delete: ['user', 'serviceaccount', 'role', 'organization', 'metaresource'],
+			delete: ['role', 'serviceaccount'],
 			list: ['metaresources'],
-			read: ['user', 'serviceaccount', 'role', 'organization', 'metaresource'],
-			update: ['user', 'serviceaccount', 'role', 'organization', 'metaresource'],
+			read: ['role', 'serviceaccount'],
+			update: ['role', 'serviceaccount'],
 		},
 	},
 } as const;
--- a/frontend/src/hooks/useAuthZ/types.ts
+++ b/frontend/src/hooks/useAuthZ/types.ts
@@ -1,15 +1,16 @@
 import permissionsType from './permissions.type';
-import { ObjectSeparator } from './utils';
+
+const ObjectSeparator = ':';

 type PermissionsData = typeof permissionsType.data;
 export type Resource = PermissionsData['resources'][number];
-export type ResourceName = Resource['name'];
+export type ResourceName = Resource['kind'];
 export type ResourceType = Resource['type'];

 type RelationsByType = PermissionsData['relations'];

 type ResourceTypeMap = {
-	[K in ResourceName]: Extract<Resource, { name: K }>['type'];
+	[K in ResourceName]: Extract<Resource, { kind: K }>['type'];
 };

 type RelationName = keyof RelationsByType;
@@ -17,7 +18,7 @@ type RelationName = keyof RelationsByType;
 export type ResourcesForRelation<R extends RelationName> = Extract<
 	Resource,
 	{ type: RelationsByType[R][number] }
->['name'];
+>['kind'];

 type IsPluralResource<R extends ResourceName> =
 	ResourceTypeMap[R] extends 'metaresources' ? true : false;
--- a/frontend/src/hooks/useAuthZ/useAuthZ.test.tsx
+++ b/frontend/src/hooks/useAuthZ/useAuthZ.test.tsx
@@ -36,8 +36,8 @@ const wrapper = ({ children }: { children: ReactElement }): ReactElement => (

 describe('useAuthZ', () => {
 	it('should fetch and return permissions successfully', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');

 		const expectedResponse = {
 			[permission1]: {
@@ -74,7 +74,7 @@ describe('useAuthZ', () => {
 	});

 	it('should handle API errors', async () => {
-		const permission = buildPermission('read', 'dashboard:*');
+		const permission = buildPermission('read', 'role:*');

 		server.use(
 			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
@@ -95,9 +95,9 @@ describe('useAuthZ', () => {
 	});

 	it('should refetch when permissions array changes', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');
+		const permission3 = buildPermission('delete', 'role:456');

 		let requestCount = 0;

@@ -161,8 +161,8 @@ describe('useAuthZ', () => {
 	});

 	it('should not refetch when permissions array order changes but content is the same', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');

 		let requestCount = 0;

@@ -217,8 +217,8 @@ describe('useAuthZ', () => {
 	});

 	it('should send correct payload format to API', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');

 		let receivedPayload: any = null;

@@ -244,23 +244,23 @@ describe('useAuthZ', () => {
 		expect(receivedPayload[0]).toMatchObject({
 			relation: 'read',
 			object: {
-				resource: { name: 'dashboard', type: 'metaresource' },
+				resource: { kind: 'role', type: 'role' },
 				selector: '*',
 			},
 		});
 		expect(receivedPayload[1]).toMatchObject({
 			relation: 'update',
 			object: {
-				resource: { name: 'dashboard', type: 'metaresource' },
+				resource: { kind: 'role', type: 'role' },
 				selector: '123',
 			},
 		});
 	});

 	it('should batch multiple hooks into single flight request', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');
+		const permission3 = buildPermission('delete', 'role:456');

 		let requestCount = 0;
 		const receivedPayloads: any[] = [];
@@ -304,17 +304,17 @@ describe('useAuthZ', () => {
 		expect(receivedPayloads[0][0]).toMatchObject({
 			relation: 'read',
 			object: {
-				resource: { name: 'dashboard', type: 'metaresource' },
+				resource: { kind: 'role', type: 'role' },
 				selector: '*',
 			},
 		});
 		expect(receivedPayloads[0][1]).toMatchObject({
 			relation: 'update',
-			object: { resource: { name: 'dashboard' }, selector: '123' },
+			object: { resource: { kind: 'role' }, selector: '123' },
 		});
 		expect(receivedPayloads[0][2]).toMatchObject({
 			relation: 'delete',
-			object: { resource: { name: 'dashboard' }, selector: '456' },
+			object: { resource: { kind: 'role' }, selector: '456' },
 		});

 		expect(result1.current.permissions).toStrictEqual({
@@ -329,9 +329,9 @@ describe('useAuthZ', () => {
 	});

 	it('should create separate batches for calls after single flight window', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');
+		const permission3 = buildPermission('delete', 'role:456');

 		let requestCount = 0;
 		const receivedPayloads: any[] = [];
@@ -386,18 +386,18 @@ describe('useAuthZ', () => {
 		expect(receivedPayloads[1]).toHaveLength(2);
 		expect(receivedPayloads[1][0]).toMatchObject({
 			relation: 'update',
-			object: { resource: { name: 'dashboard' }, selector: '123' },
+			object: { resource: { kind: 'role' }, selector: '123' },
 		});
 		expect(receivedPayloads[1][1]).toMatchObject({
 			relation: 'delete',
-			object: { resource: { name: 'dashboard' }, selector: '456' },
+			object: { resource: { kind: 'role' }, selector: '456' },
 		});
 	});

 	it('should map permissions correctly when API returns response out of order', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
-		const permission3 = buildPermission('delete', 'dashboard:456');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');
+		const permission3 = buildPermission('delete', 'role:456');

 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
@@ -435,8 +435,8 @@ describe('useAuthZ', () => {
 	});

 	it('should not leak state between separate batches', async () => {
-		const permission1 = buildPermission('read', 'dashboard:*');
-		const permission2 = buildPermission('update', 'dashboard:123');
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');

 		let requestCount = 0;

--- a/frontend/src/hooks/useAuthZ/useAuthZ.tsx
+++ b/frontend/src/hooks/useAuthZ/useAuthZ.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { authzCheck } from 'api/generated/services/authz';
 import type {
-	AuthtypesObjectDTO,
+	CoretypesObjectDTO,
 	AuthtypesTransactionDTO,
 } from 'api/generated/services/sigNoz.schemas';

@@ -34,7 +34,7 @@ function dispatchPermission(
 		});

 		setTimeout(() => {
-			const copiedPermissions = pendingPermissions.slice();
+			const copiedPermissions = [...pendingPermissions];
 			pendingPermissions = [];
 			ctx = null;

@@ -50,9 +50,9 @@ async function fetchManyPermissions(
 ): Promise<AuthZCheckResponse> {
 	const payload: AuthtypesTransactionDTO[] = permissions.map((permission) => {
 		const dto = permissionToTransactionDto(permission);
-		const object: AuthtypesObjectDTO = {
+		const object: CoretypesObjectDTO = {
 			resource: {
-				name: dto.object.resource.name,
+				kind: dto.object.resource.kind,
 				type: dto.object.resource.type,
 			},
 			selector: dto.object.selector,
--- a/frontend/src/hooks/useAuthZ/utils.ts
+++ b/frontend/src/hooks/useAuthZ/utils.ts
@@ -1,4 +1,8 @@
-import { AuthtypesTransactionDTO } from '../../api/generated/services/sigNoz.schemas';
+import {
+	AuthtypesTransactionDTO,
+	CoretypesTypeDTO,
+	AuthtypesRelationDTO,
+} from '../../api/generated/services/sigNoz.schemas';
 import permissionsType from './permissions.type';
 import {
 	AuthZObject,
@@ -33,36 +37,72 @@ export function parsePermission(permission: BrandedPermission): {
 	return { relation: relation as AuthZRelation, object };
 }

-const resourceNameToType = permissionsType.data.resources.reduce(
+const kindsByType = permissionsType.data.resources.reduce(
 	(acc, r) => {
-		acc[r.name] = r.type;
+		if (!acc[r.type]) {
+			acc[r.type] = new Set();
+		}
+		acc[r.type].add(r.kind);
 		return acc;
 	},
-	{} as Record<ResourceName, ResourceType>,
+	{} as Record<string, Set<string>>,
 );

+function resolveType(
+	relation: AuthZRelation,
+	kind: string,
+): ResourceType | undefined {
+	const candidates: readonly string[] =
+		permissionsType.data.relations[relation] ?? [];
+	for (const t of candidates) {
+		if (kindsByType[t]?.has(kind)) {
+			return t as ResourceType;
+		}
+	}
+	return undefined;
+}
+
+function splitObjectString(objectStr: string): {
+	resourceName: string;
+	selector: string;
+} {
+	const idx = objectStr.indexOf(ObjectSeparator);
+	if (idx === -1) {
+		return { resourceName: objectStr, selector: '' };
+	}
+	return {
+		resourceName: objectStr.slice(0, idx),
+		selector: objectStr.slice(idx + 1),
+	};
+}
+
 export function permissionToTransactionDto(
 	permission: BrandedPermission,
 ): AuthtypesTransactionDTO {
 	const { relation, object: objectStr } = parsePermission(permission);
-	const directType = resourceNameToType[objectStr as ResourceName];
+	const directType = resolveType(relation, objectStr);
 	if (directType === 'metaresources') {
 		return {
-			relation,
+			relation: relation as AuthtypesRelationDTO,
 			object: {
-				resource: { name: objectStr, type: directType },
+				resource: {
+					kind: objectStr as ResourceName,
+					type: directType as CoretypesTypeDTO,
+				},
 				selector: '*',
 			},
 		};
 	}
-	const [resourceName, selector] = objectStr.split(ObjectSeparator);
-	const type =
-		resourceNameToType[resourceName as ResourceName] ?? 'metaresource';
+	const { resourceName, selector } = splitObjectString(objectStr);
+	const type = resolveType(relation, resourceName) ?? 'metaresource';

 	return {
-		relation,
+		relation: relation as AuthtypesRelationDTO,
 		object: {
-			resource: { name: resourceName, type },
+			resource: {
+				kind: resourceName as ResourceName,
+				type: type as CoretypesTypeDTO,
+			},
 			selector: selector || '*',
 		},
 	};
@@ -75,7 +115,7 @@ export function gettableTransactionToPermission(
 		relation,
 		object: { resource, selector },
 	} = item;
-	const resourceName = String(resource.name);
+	const resourceName = String(resource.kind);
 	const selectorStr = typeof selector === 'string' ? selector : '*';
 	const objectStr =
 		resource.type === 'metaresources'
--- a/frontend/src/lib/uPlotLib/utils/generateColor.ts
+++ b/frontend/src/lib/uPlotLib/utils/generateColor.ts
@@ -7,6 +7,23 @@ 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/lib/uPlotV2/components/Tooltip/Tooltip.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx
@@ -24,10 +24,15 @@ export default function Tooltip({
 	);

 	const showHeader = showTooltipHeader || activeItem != null;
-	// With a single series the active item is fully represented in the header —
-	// hide the divider and list to avoid showing a duplicate row.
-	const showList = tooltipContent.length > 1;
-	const showDivider = showList && showHeader;
+	// A single row collapses into the header when it's the active item, but
+	// must stay in the list when there's no active item (e.g. sync-driven
+	// tooltips with no focused series) — otherwise the row would vanish.
+	const showList =
+		tooltipContent.length > 1 ||
+		(tooltipContent.length === 1 && activeItem == null);
+	// The divider separates the active row in the header from the list; with
+	// no active item it has nothing to separate.
+	const showDivider = showList && showHeader && activeItem != null;

 	return (
 		<div
--- a/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/syncDisplayHook.ts
+++ b/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/syncDisplayHook.ts
@@ -137,7 +137,7 @@ function applyReceiverSync({

 	if (commonKeys.length === 0) {
 		uPlotInstance.setSeries(null, { focus: false });
-		return [];
+		return noMatchResult;
 	}

 	if ((uPlotInstance.cursor.left ?? -1) < 0) {
--- a/frontend/src/lib/uPlotV2/plugins/tests/TooltipPlugin.test.ts
+++ b/frontend/src/lib/uPlotV2/plugins/tests/TooltipPlugin.test.ts
@@ -867,8 +867,12 @@ describe('TooltipPlugin', () => {
 				}),
 			);

-			const resizeCall = addSpy.mock.calls.find(([type]) => type === 'resize');
-			const scrollCall = addSpy.mock.calls.find(([type]) => type === 'scroll');
+			const resizeCall = addSpy.mock.calls.find(
+				([type]) => type === ('resize' as keyof WindowEventMap),
+			);
+			const scrollCall = addSpy.mock.calls.find(
+				([type]) => type === ('scroll' as keyof WindowEventMap),
+			);

 			expect(resizeCall).toBeDefined();
 			expect(scrollCall).toBeDefined();
--- a/frontend/src/pages/SignUp/SignUp.tsx
+++ b/frontend/src/pages/SignUp/SignUp.tsx
@@ -8,7 +8,7 @@ import afterLogin from 'AppRoutes/utils';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
 import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, CircleAlert } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 import APIError from 'types/api/error';

 import tvUrl from '@/assets/svgs/tv.svg';
@@ -28,9 +28,8 @@ type FormValues = {

 function SignUp(): JSX.Element {
 	const [loading, setLoading] = useState(false);
+	const [confirmPasswordTouched, setConfirmPasswordTouched] = useState(false);

-	const [confirmPasswordError, setConfirmPasswordError] =
-		useState<boolean>(false);
 	const [formError, setFormError] = useState<APIError | null>();

 	const { notifications } = useNotifications();
@@ -84,35 +83,10 @@ function SignUp(): JSX.Element {
 		})();
 	};

-	const handleValuesChange: (changedValues: Partial<FormValues>) => void = (
-		changedValues,
-	) => {
-		// Clear error if passwords match while typing (but don't set error until blur)
-		if ('password' in changedValues || 'confirmPassword' in changedValues) {
-			const { password, confirmPassword } = form.getFieldsValue();
+	const isPasswordMismatch =
+		Boolean(confirmPassword) && password !== confirmPassword;

-			if (password && confirmPassword && password === confirmPassword) {
-				setConfirmPasswordError(false);
-			}
-		}
-	};
-
-	const handlePasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		// Only validate if confirm password has a value
-		if (confirmPassword) {
-			const isSamePassword = password === confirmPassword;
-			setConfirmPasswordError(!isSamePassword);
-		}
-	};
-
-	const handleConfirmPasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		if (password && confirmPassword) {
-			const isSamePassword = password === confirmPassword;
-			setConfirmPasswordError(!isSamePassword);
-		}
-	};
+	const showPasswordMismatchError = confirmPasswordTouched && isPasswordMismatch;

 	const isValidForm = useMemo(
 		(): boolean =>
@@ -120,8 +94,8 @@ function SignUp(): JSX.Element {
 			Boolean(email?.trim()) &&
 			Boolean(password?.trim()) &&
 			Boolean(confirmPassword?.trim()) &&
-			!confirmPasswordError,
-		[loading, email, password, confirmPassword, confirmPasswordError],
+			password === confirmPassword,
+		[loading, email, password, confirmPassword],
 	);

 	return (
@@ -140,12 +114,7 @@ function SignUp(): JSX.Element {
 					</Typography.Paragraph>
 				</div>

-				<FormContainer
-					onFinish={handleSubmit}
-					onValuesChange={handleValuesChange}
-					form={form}
-					className="signup-form"
-				>
+				<FormContainer onFinish={handleSubmit} form={form} className="signup-form">
 					<div className="signup-form-container">
 						<div className="signup-form-fields">
 							<div className="signup-field-container">
@@ -175,7 +144,6 @@ function SignUp(): JSX.Element {
 										placeholder="Enter new password"
 										disabled={loading}
 										className="signup-antd-input"
-										onBlur={handlePasswordBlur}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -185,6 +153,12 @@ function SignUp(): JSX.Element {
 								<FormContainer.Item
 									name="confirmPassword"
 									validateTrigger="onBlur"
+									validateStatus={showPasswordMismatchError ? 'error' : undefined}
+									help={
+										showPasswordMismatchError
+											? "Passwords don't match. Please try again."
+											: undefined
+									}
 									rules={[{ required: true, message: 'Please enter confirm password!' }]}
 								>
 									<AntdInput.Password
@@ -193,7 +167,7 @@ function SignUp(): JSX.Element {
 										placeholder="Confirm your new password"
 										disabled={loading}
 										className="signup-antd-input"
-										onBlur={handleConfirmPasswordBlur}
+										onBlur={() => setConfirmPasswordTouched(true)}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -205,19 +179,7 @@ function SignUp(): JSX.Element {
 						your admin for an invite link
 					</Callout>

-					{confirmPasswordError && (
-						<Callout
-							type="error"
-							size="small"
-							showIcon
-							icon={<CircleAlert size={12} />}
-							className="signup-error-callout"
-						>
-							Passwords don&apos;t match. Please try again.
-						</Callout>
-					)}
-
-					{formError && !confirmPasswordError && <AuthError error={formError} />}
+					{formError && <AuthError error={formError} />}

 					<div className="signup-form-actions">
 						<Button
--- a/frontend/src/pages/TraceDetailV3Page/index.tsx
+++ b/frontend/src/pages/TraceDetailV3Page/index.tsx
@@ -0,0 +1,5 @@
+import TraceDetailsV3 from '../TraceDetailsV3';
+
+export default function TraceDetailV3Page(): JSX.Element {
+	return <TraceDetailsV3 />;
+}
--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.styles.scss
@@ -0,0 +1,96 @@
+.analytics-panel {
+	&__body {
+		padding: 12px 6px;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+		background: var(--l1-background);
+
+		// TabsRoot — last direct child div
+		> div:last-child {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			overflow: hidden;
+		}
+
+		[role='tablist'] {
+			flex-shrink: 0;
+		}
+	}
+
+	&__tabs-scroll {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+	}
+
+	&__list {
+		display: grid;
+		grid-template-columns: auto auto 1fr;
+		gap: 4px 8px;
+		padding: 8px 0;
+		align-items: center;
+	}
+
+	&__dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+	}
+
+	&__service-name {
+		font-size: 13px;
+		color: var(--l1-foreground);
+		word-break: break-word;
+	}
+
+	&__bar-cell {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__bar {
+		flex: 1;
+		height: 6px;
+		background: var(--l3-background);
+		border-radius: 3px;
+		min-width: 40px;
+
+		&--small {
+			max-width: 80px;
+			flex: 0 0 80px;
+		}
+	}
+
+	&__bar-fill {
+		height: 100%;
+		border-radius: 3px;
+	}
+
+	&__value {
+		flex-shrink: 0;
+		text-align: right;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--l1-foreground);
+
+		&--wide {
+			min-width: 55px;
+		}
+
+		&--narrow {
+			min-width: 25px;
+		}
+	}
+
+	// Tabs root
+	[class*='tabs__list-wrapper'] {
+		padding-left: 0 !important;
+	}
+}
--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx
@@ -0,0 +1,185 @@
+import { useMemo } from 'react';
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@signozhq/ui';
+import { DetailsHeader } from 'components/DetailsPanel';
+import { themeColors } from 'constants/theme';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FloatingPanel } from 'periscope/components/FloatingPanel';
+
+import './AnalyticsPanel.styles.scss';
+
+interface AnalyticsPanelProps {
+	isOpen: boolean;
+	onClose: () => void;
+	serviceExecTime?: Record<string, number>;
+	traceStartTime?: number;
+	traceEndTime?: number;
+	// TODO: Re-enable when backend provides per-service span counts
+	// spans?: Span[];
+}
+
+const PANEL_WIDTH = 350;
+const PANEL_MARGIN_RIGHT = 100;
+const PANEL_MARGIN_TOP = 50;
+const PANEL_MARGIN_BOTTOM = 50;
+
+function AnalyticsPanel({
+	isOpen,
+	onClose,
+	serviceExecTime = {},
+	traceStartTime = 0,
+	traceEndTime = 0,
+}: AnalyticsPanelProps): JSX.Element | null {
+	const spread = traceEndTime - traceStartTime;
+
+	const execTimeRows = useMemo(() => {
+		if (spread <= 0) {
+			return [];
+		}
+		return Object.entries(serviceExecTime)
+			.map(([service, duration]) => ({
+				service,
+				percentage: (duration * 100) / spread,
+				color: generateColor(service, themeColors.traceDetailColorsV3),
+			}))
+			.sort((a, b) => b.percentage - a.percentage);
+	}, [serviceExecTime, spread]);
+
+	// const spanCountRows = useMemo(() => {
+	// 	const counts: Record<string, number> = {};
+	// 	for (const span of spans) {
+	// 		const name = span.serviceName || 'unknown';
+	// 		counts[name] = (counts[name] || 0) + 1;
+	// 	}
+	// 	return Object.entries(counts)
+	// 		.map(([service, count]) => ({
+	// 			service,
+	// 			count,
+	// 			color: generateColor(service, themeColors.traceDetailColorsV3),
+	// 		}))
+	// 		.sort((a, b) => b.count - a.count);
+	// }, [spans]);
+
+	// const maxSpanCount = spanCountRows[0]?.count || 1;
+
+	if (!isOpen) {
+		return null;
+	}
+
+	return (
+		<FloatingPanel
+			isOpen
+			className="analytics-panel"
+			width={PANEL_WIDTH}
+			height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}
+			defaultPosition={{
+				x: window.innerWidth - PANEL_WIDTH - PANEL_MARGIN_RIGHT,
+				y: PANEL_MARGIN_TOP,
+			}}
+			enableResizing={{
+				top: true,
+				bottom: true,
+				left: false,
+				right: false,
+				topLeft: false,
+				topRight: false,
+				bottomLeft: false,
+				bottomRight: false,
+			}}
+		>
+			<DetailsHeader
+				title="Analytics"
+				onClose={onClose}
+				className="floating-panel__drag-handle"
+			/>
+
+			<div className="analytics-panel__body">
+				<TabsRoot defaultValue="exec-time">
+					<TabsList variant="secondary">
+						<TabsTrigger value="exec-time" variant="secondary">
+							% exec time
+						</TabsTrigger>
+						{/* TODO: Enable when backend provides per-service span counts
+						<TabsTrigger value="spans" variant="secondary">
+							Spans
+						</TabsTrigger>
+						*/}
+					</TabsList>
+
+					<div className="analytics-panel__tabs-scroll">
+						<TabsContent value="exec-time">
+							<div className="analytics-panel__list">
+								{execTimeRows.map((row) => (
+									<>
+										<div
+											key={`${row.service}-dot`}
+											className="analytics-panel__dot"
+											style={{ backgroundColor: row.color }}
+										/>
+										<span
+											key={`${row.service}-name`}
+											className="analytics-panel__service-name"
+										>
+											{row.service}
+										</span>
+										<div key={`${row.service}-bar`} className="analytics-panel__bar-cell">
+											<div className="analytics-panel__bar">
+												<div
+													className="analytics-panel__bar-fill"
+													style={{
+														width: `${Math.min(row.percentage, 100)}%`,
+														backgroundColor: row.color,
+													}}
+												/>
+											</div>
+											<span className="analytics-panel__value analytics-panel__value--wide">
+												{row.percentage.toFixed(2)}%
+											</span>
+										</div>
+									</>
+								))}
+							</div>
+						</TabsContent>
+
+						{/* TODO: Enable when backend provides per-service span counts
+						<TabsContent value="spans">
+							<div className="analytics-panel__list">
+								{spanCountRows.map((row) => (
+									<>
+										<div
+											key={`${row.service}-dot`}
+											className="analytics-panel__dot"
+											style={{ backgroundColor: row.color }}
+										/>
+										<span
+											key={`${row.service}-name`}
+											className="analytics-panel__service-name"
+										>
+											{row.service}
+										</span>
+										<div key={`${row.service}-bar`} className="analytics-panel__bar-cell">
+											<div className="analytics-panel__bar">
+												<div
+													className="analytics-panel__bar-fill"
+													style={{
+														width: `${(row.count / maxSpanCount) * 100}%`,
+														backgroundColor: row.color,
+													}}
+												/>
+											</div>
+											<span className="analytics-panel__value analytics-panel__value--narrow">
+												{row.count}
+											</span>
+										</div>
+									</>
+								))}
+							</div>
+						</TabsContent>
+						*/}
+					</div>
+				</TabsRoot>
+			</div>
+		</FloatingPanel>
+	);
+}
+
+export default AnalyticsPanel;
--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.styles.scss
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.styles.scss
@@ -0,0 +1,34 @@
+.linked-spans {
+	position: relative;
+
+	&__toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		color: inherit;
+		font: inherit;
+	}
+
+	&__label {
+		white-space: nowrap;
+	}
+
+	&__chevron {
+		transition: transform 0.15s ease;
+
+		&--open {
+			transform: rotate(90deg);
+		}
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px 0;
+	}
+}
--- a/Show More
+++ b/Show More