feat: minor fix

* feat: improve perf for queries with empty resource filter

* fix: update comment

* fix: add nolint:nilnil

* fix: address comments

* fix: update comment

---------

Co-authored-by: Ankit Nayan <ankit@signoz.io>

docs/api/openapi.yml

@@ -4360,6 +4360,146 @@ components:
     TimeDuration:
       format: int64
       type: integer
+    TracedetailtypesEvent:
+      properties:
+        attributeMap:
+          additionalProperties: {}
+          type: object
+        isError:
+          type: boolean
+        name:
+          type: string
+        timeUnixNano:
+          minimum: 0
+          type: integer
+      type: object
+    TracedetailtypesWaterfallRequest:
+      properties:
+        limit:
+          minimum: 0
+          type: integer
+        selectedSpanId:
+          type: string
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
+    TracedetailtypesWaterfallResponse:
+      properties:
+        endTimestampMillis:
+          minimum: 0
+          type: integer
+        hasMissingSpans:
+          type: boolean
+        hasMore:
+          type: boolean
+        rootServiceEntryPoint:
+          type: string
+        rootServiceName:
+          type: string
+        serviceNameToTotalDurationMap:
+          additionalProperties:
+            minimum: 0
+            type: integer
+          nullable: true
+          type: object
+        spans:
+          items:
+            $ref: '#/components/schemas/TracedetailtypesWaterfallSpan'
+          nullable: true
+          type: array
+        startTimestampMillis:
+          minimum: 0
+          type: integer
+        totalErrorSpansCount:
+          minimum: 0
+          type: integer
+        totalSpansCount:
+          minimum: 0
+          type: integer
+        uncollapsedSpans:
+          items:
+            type: string
+          nullable: true
+          type: array
+      type: object
+    TracedetailtypesWaterfallSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          nullable: true
+          type: object
+        db_name:
+          type: string
+        db_operation:
+          type: string
+        duration_nano:
+          minimum: 0
+          type: integer
+        events:
+          items:
+            $ref: '#/components/schemas/TracedetailtypesEvent'
+          nullable: true
+          type: array
+        external_http_method:
+          type: string
+        external_http_url:
+          type: string
+        flags:
+          minimum: 0
+          type: integer
+        has_children:
+          type: boolean
+        has_error:
+          type: boolean
+        http_host:
+          type: string
+        http_method:
+          type: string
+        http_url:
+          type: string
+        is_remote:
+          type: string
+        kind:
+          format: int32
+          type: integer
+        kind_string:
+          type: string
+        level:
+          minimum: 0
+          type: integer
+        name:
+          type: string
+        parent_span_id:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        response_status_code:
+          type: string
+        span_id:
+          type: string
+        status_code:
+          type: integer
+        status_code_string:
+          type: string
+        status_message:
+          type: string
+        sub_tree_node_count:
+          minimum: 0
+          type: integer
+        timestamp:
+          minimum: 0
+          type: integer
+        trace_id:
+          type: string
+        trace_state:
+          type: string
+      type: object
     TypesAlertStatus:
       properties:
         inhibitedBy:
@@ -12572,6 +12712,76 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
+  /api/v3/traces/{traceID}/waterfall:
+    post:
+      deprecated: false
+      description: Returns the waterfall view of spans for a given trace ID with tree
+        structure, metadata, and windowed pagination
+      operationId: GetWaterfall
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TracedetailtypesWaterfallRequest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TracedetailtypesWaterfallResponse'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get waterfall view for a trace
+      tags:
+      - tracedetail
   /api/v5/query_range:
     post:
       deprecated: false

docs/contributing/go/readme.md

@@ -20,3 +20,4 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
+- [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/go/types.md

@@ -0,0 +1,152 @@
+# Types
+
+Domain types in `pkg/types/<domain>/` live on three serialization boundaries — inbound HTTP, outbound HTTP, and SQL — on top of an in-memory domain representation. SigNoz's convention is **core-type-first**: every domain defines a single canonical type `X`, and specialized flavors (`PostableX`, `GettableX`, `UpdatableX`, `StorableX`) are introduced **only when they actually differ from `X`**. This guide spells out when each flavor is warranted and how they relate to each other.
+
+Before reading, make sure you have read [abstractions.md](abstractions.md) — the rules here build on its guidance that every new type must earn its place.
+
+## The core type is required
+
+Every domain package in `pkg/types/<domain>/` defines exactly one core type `X`: `AuthDomain`, `Channel`, `Rule`, `Dashboard`, `Role`, `PlannedMaintenance`. This is the canonical in-memory representation of the domain object. Domain methods, validation invariants, and business logic hang off `X` — not off the flavor types.
+
+Two rules shape how the core type behaves:
+
+- **Conversions can be either `New<Output>From<Input>` or a receiver-style `(x *X) ToY()` method.** Either form is fine; pick whichever reads best at the call site:
+
+    ```go
+    // Constructor form
+    func NewGettableAuthDomainFromAuthDomain(d *AuthDomain, info *AuthNProviderInfo) *GettableAuthDomain
+
+    // Receiver form
+    func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance
+    ```
+- **`X` can double as the storage row** when the DB shape would be identical. `Channel` embeds `bun.BaseModel` directly, and there is no `StorableChannel`. This is the preferred shape when it works.
+
+Domain packages under `pkg/types/` must not import from other `pkg/` packages. Keep the core type's methods lightweight and push orchestration out to the module layer.
+
+## Add a flavor only when it differs
+
+For each of the four flavors, create it only if its shape diverges from `X`. If a flavor would have the same fields and tags as `X`, reuse `X` directly, or declare a type alias. Every flavor must earn its place per [abstractions.md](abstractions.md) rule 6 ("Wrappers must add semantics, not just rename").
+
+| Flavor       | Create it when it differs in…                                                                                                                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `PostableX`  | JSON shape differs from `X` — typically no `Id`, no audit fields, no server-computed fields. Often owns input validation via `Validate()` or a custom `UnmarshalJSON`.                                                            |
+| `GettableX`  | Response shape adds server-computed fields that are not persisted — e.g., `GettableAuthDomain` adds `AuthNProviderInfo`, which is resolved at read time.                                                                          |
+| `UpdatableX` | Only a strict subset of `PostableX` is replaceable on PUT. If the updatable shape equals `PostableX`, reuse `PostableX`.                                                                                                          |
+| `StorableX`  | DB row shape differs from `X` — usually `X` carries nested typed config while `StorableX` carries a flat `Data string` JSON column, plus bun tags, audit mixins, and an `OrgID`. If `X` already has those, skip the flavor.       |
+
+The failure mode this rule exists to prevent: minting all four flavors on reflex for every new resource, even when two or three are structurally identical. Each unnecessary flavor is another type contributors must understand and another conversion that can drift.
+
+## Worked examples
+
+### Channel — core type only
+
+```go
+type Channels         = []*Channel
+type GettableChannels = []*Channel
+
+type Channel struct {
+    bun.BaseModel `bun:"table:notification_channel"`
+    types.Identifiable
+    types.TimeAuditable
+    Name  string `json:"name"  required:"true" bun:"name"`
+    Type  string `json:"type"  required:"true" bun:"type"`
+    Data  string `json:"data"  required:"true" bun:"data"`
+    OrgID string `json:"orgId" required:"true" bun:"org_id"`
+}
+```
+
+`Channel` is both the domain type and the bun row. `GettableChannels` is a **type alias** because `*Channel` already serializes correctly as a response. There is no `StorableChannel`, `PostableChannel`, or `UpdatableChannel` — those would be identical to `Channel` and so do not exist. Prefer this shape when it works.
+
+### AuthDomain — all four flavors
+
+```go
+type AuthDomain struct {
+    storableAuthDomain *StorableAuthDomain
+    authDomainConfig   *AuthDomainConfig
+}
+
+type StorableAuthDomain struct {
+    bun.BaseModel `bun:"table:auth_domain"`
+    types.Identifiable
+    Name  string      `bun:"name"`
+    Data  string      `bun:"data"`  // AuthDomainConfig serialized as JSON
+    OrgID valuer.UUID `bun:"org_id"`
+    types.TimeAuditable
+}
+
+type PostableAuthDomain struct {
+    Config AuthDomainConfig `json:"config"`
+    Name   string           `json:"name"`
+}
+
+type UpdateableAuthDomain struct {
+    Config AuthDomainConfig `json:"config"` // Name intentionally absent
+}
+
+type GettableAuthDomain struct {
+    *StorableAuthDomain
+    *AuthDomainConfig
+    AuthNProviderInfo *AuthNProviderInfo `json:"authNProviderInfo"`
+}
+```
+
+Each flavor exists for a concrete reason:
+
+- `StorableAuthDomain` stores the typed config as an opaque `Data string` column, so the schema does not need to migrate every time a config field is added.
+- `PostableAuthDomain` carries the config as a structured object (not a string) for the request.
+- `UpdateableAuthDomain` excludes `Name` because a domain's name cannot change after creation.
+- `GettableAuthDomain` adds `AuthNProviderInfo`, which is derived at read time and never persisted.
+
+The core `AuthDomain` holds the two live halves — `storableAuthDomain` and `authDomainConfig` — and owns business methods such as `Update(config)`. Conversions use the `New<Output>From<Input>` form: `NewAuthDomainFromConfig`, `NewAuthDomainFromStorableAuthDomain`, `NewGettableAuthDomainFromAuthDomain`.
+
+## Conventions that tie the flavors together
+
+- **Conversions** use either a `New<Output>From<Input>` constructor — e.g. `NewChannelFromReceiver`, `NewGettableAuthDomainFromAuthDomain` — or a receiver-style `ToY()` method. Both forms coexist in the codebase; use whichever fits the call site.
+- **Validation belongs on the core type `X`.** Putting it on `X` means every write path — HTTP create, HTTP update, in-process migration, replay — runs the same checks. `Validate()` on `PostableX` is reserved for checks that are specific to the request shape and do not apply to `X`. `UnmarshalJSON` on `PostableX` is a separate tool that lives there because decoding only happens at the HTTP boundary — `PostableAuthDomain.UnmarshalJSON` rejecting a malformed domain name at decode time is the canonical example.
+
+    ```go
+    // Domain invariants: every write path re-runs these.
+    func (x *X) Validate() error { ... }
+
+    // Request-shape-only: checks that do not apply once the value is persisted.
+    func (p *PostableX) Validate() error { ... }
+    ```
+- **Type aliases, not wrappers**, when two shapes are identical. `type GettableChannels = []*Channel` is correct because it adds no semantics beyond the underlying type.
+- **Serialization tags** follow [handler.md](handler.md): `required:"true"` means the JSON key must be present, `nullable:"true"` is required on any slice or map that may serialize as `null`, and types with a fixed value set must implement `Enum() []any`.
+
+## A note on `UpdatableX` and `PatchableX`
+
+- `UpdatableX` — the body for PUT (full replace) when the shape is a strict subset of `PostableX`. If the updatable shape equals `PostableX`, reuse `PostableX`.
+- `PatchableX` — the body for PATCH (partial update); only the fields a client is allowed to patch. For example, `PatchableRole` carries a single `Description` field even though `Role` has many — clients may patch the description but not anything else.
+
+    ```go
+    type PatchableRole struct {
+        Description string `json:"description"`
+    }
+    ```
+
+Both are optional. Do not introduce them if `PostableX` already covers the case.
+
+## What to avoid
+
+- **Do not mint a flavor that mirrors the core type.** If `StorableX` would have the same fields as `X`, use `X` directly with `bun.BaseModel` embedded. `Channel` is the canonical example.
+- **Do not bolt domain methods onto `StorableX`.** Storage types are data carriers. Domain methods live on `X`.
+- **Do not invent new suffixes** (`Creatable`, `Fetchable`, `Savable`). The core type plus `Postable` / `Gettable` / `Updatable` / `Patchable` / `Storable` covers every case that exists today.
+- **Spelling — `Updatable`, not `Updateable`.** `Updateable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
+- **Spelling — `Storable`, not `Storeable`.** `Storeable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
+
+## What should I remember?
+
+- Every domain package defines the core type `X`. Only `X` is mandatory.
+- Add `PostableX` / `GettableX` / `UpdatableX` / `StorableX` one at a time, only when the shape actually diverges from `X`.
+- Domain logic lives on `X`, not on the flavor types.
+- Conversions can be a `New<Output>From<Input>` constructor or a receiver-style `ToY()` method — pick whichever reads best at the call site.
+- Use a type alias when two shapes are truly identical.
+- `pkg/types/<domain>/` must not import from other `pkg/` packages.
+
+## Further reading
+
+- [abstractions.md](abstractions.md) — when to introduce a new type at all.
+- [handler.md](handler.md) — struct tag rules at the HTTP boundary.
+- [packages.md](packages.md) — where types live under `pkg/types/`.
+- [sql.md](sql.md) — star-schema requirements for `StorableX`.

ee/query-service/app/server.go

@@ -120,7 +120,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	}
 
 	// start the usagemanager
-	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter)
+	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter, signoz.Flagger)
 	if err != nil {
 		return nil, err
 	}

ee/query-service/usage/manager.go

@@ -16,9 +16,11 @@ import (
 
 	"github.com/SigNoz/signoz/ee/query-service/model"
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/encryption"
+	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
@@ -43,15 +45,18 @@ type Manager struct {
 	zeus zeus.Zeus
 
 	orgGetter organization.Getter
+
+	flagger flagger.Flagger
 }
 
-func New(licenseService licensing.Licensing, clickhouseConn clickhouse.Conn, zeus zeus.Zeus, orgGetter organization.Getter) (*Manager, error) {
+func New(licenseService licensing.Licensing, clickhouseConn clickhouse.Conn, zeus zeus.Zeus, orgGetter organization.Getter, flagger flagger.Flagger) (*Manager, error) {
 	m := &Manager{
 		clickhouseConn: clickhouseConn,
 		licenseService: licenseService,
 		scheduler:      gocron.NewScheduler(time.UTC).Every(1).Day().At("00:00"), // send usage every at 00:00 UTC
 		zeus:           zeus,
 		orgGetter:      orgGetter,
+		flagger:        flagger,
 	}
 	return m, nil
 }
@@ -168,7 +173,14 @@ func (lm *Manager) UploadUsage(ctx context.Context) {
 			return
 		}
 
-		errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
+		evalCtx := featuretypes.NewFlaggerEvaluationContext(organization.ID)
+		useZeus := lm.flagger.BooleanOrEmpty(ctx, flagger.FeaturePutMetersInZeus, evalCtx)
+
+		if useZeus {
+			errv2 = lm.zeus.PutMetersV2(ctx, payload.LicenseKey.String(), body)
+		} else {
+			errv2 = lm.zeus.PutMeters(ctx, payload.LicenseKey.String(), body)
+		}
 		if errv2 != nil {
 			slog.ErrorContext(ctx, "failed to upload usage", errors.Attr(errv2))
 			// not returning error here since it is captured in the failed count

ee/zeus/httpzeus/provider.go

@@ -136,6 +136,18 @@ func (provider *Provider) PutMeters(ctx context.Context, key string, data []byte
 	return err
 }
 
+func (provider *Provider) PutMetersV2(ctx context.Context, key string, data []byte) error {
+	_, err := provider.do(
+		ctx,
+		provider.config.URL.JoinPath("/v1/meters"),
+		http.MethodPost,
+		key,
+		data,
+	)
+
+	return err
+}
+
 func (provider *Provider) PutProfile(ctx context.Context, key string, profile *zeustypes.PostableProfile) error {
 	body, err := json.Marshal(profile)
 	if err != nil {

frontend/package.json

@@ -63,8 +63,9 @@
     "@signozhq/radio-group": "0.0.4",
     "@signozhq/resizable": "0.0.2",
     "@signozhq/table": "0.3.7",
+    "@signozhq/tooltip": "0.0.2",
+    "@signozhq/ui": "0.0.6",
     "@signozhq/toggle-group": "0.0.3",
-    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -136,10 +137,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",

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'),
 );

frontend/src/AppRoutes/routes.ts

@@ -47,6 +47,7 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
+	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -140,10 +141,17 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
-		component: TraceDetail,
+		component: TraceDetailV3,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
+	{
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+		component: TraceDetail,
+		isPrivate: true,
+		key: 'TRACE_DETAIL_OLD',
+	},
 	{
 		path: ROUTES.SETTINGS,
 		exact: false,

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

@@ -5332,6 +5332,248 @@ export interface TelemetrytypesTelemetryFieldValuesDTO {
 
 export type TimeDurationDTO = number;
 
+export type TracedetailtypesEventDTOAttributeMap = { [key: string]: unknown };
+
+export interface TracedetailtypesEventDTO {
+	/**
+	 * @type object
+	 */
+	attributeMap?: TracedetailtypesEventDTOAttributeMap;
+	/**
+	 * @type boolean
+	 */
+	isError?: boolean;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timeUnixNano?: number;
+}
+
+export interface TracedetailtypesWaterfallRequestDTO {
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	limit?: number;
+	/**
+	 * @type string
+	 */
+	selectedSpanId?: string;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	uncollapsedSpans?: string[] | null;
+}
+
+/**
+ * @nullable
+ */
+export type TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap = {
+	[key: string]: number;
+} | null;
+
+export interface TracedetailtypesWaterfallResponseDTO {
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	endTimestampMillis?: number;
+	/**
+	 * @type boolean
+	 */
+	hasMissingSpans?: boolean;
+	/**
+	 * @type boolean
+	 */
+	hasMore?: boolean;
+	/**
+	 * @type string
+	 */
+	rootServiceEntryPoint?: string;
+	/**
+	 * @type string
+	 */
+	rootServiceName?: string;
+	/**
+	 * @type object
+	 * @nullable true
+	 */
+	serviceNameToTotalDurationMap?: TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	spans?: TracedetailtypesWaterfallSpanDTO[] | null;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	startTimestampMillis?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalErrorSpansCount?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	totalSpansCount?: number;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	uncollapsedSpans?: string[] | null;
+}
+
+/**
+ * @nullable
+ */
+export type TracedetailtypesWaterfallSpanDTOAttributes = {
+	[key: string]: unknown;
+} | null;
+
+/**
+ * @nullable
+ */
+export type TracedetailtypesWaterfallSpanDTOResource = {
+	[key: string]: string;
+} | null;
+
+export interface TracedetailtypesWaterfallSpanDTO {
+	/**
+	 * @type object
+	 * @nullable true
+	 */
+	attributes?: TracedetailtypesWaterfallSpanDTOAttributes;
+	/**
+	 * @type string
+	 */
+	db_name?: string;
+	/**
+	 * @type string
+	 */
+	db_operation?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	duration_nano?: number;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	events?: TracedetailtypesEventDTO[] | null;
+	/**
+	 * @type string
+	 */
+	external_http_method?: string;
+	/**
+	 * @type string
+	 */
+	external_http_url?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	flags?: number;
+	/**
+	 * @type boolean
+	 */
+	has_children?: boolean;
+	/**
+	 * @type boolean
+	 */
+	has_error?: boolean;
+	/**
+	 * @type string
+	 */
+	http_host?: string;
+	/**
+	 * @type string
+	 */
+	http_method?: string;
+	/**
+	 * @type string
+	 */
+	http_url?: string;
+	/**
+	 * @type string
+	 */
+	is_remote?: string;
+	/**
+	 * @type integer
+	 * @format int32
+	 */
+	kind?: number;
+	/**
+	 * @type string
+	 */
+	kind_string?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	level?: number;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	parent_span_id?: string;
+	/**
+	 * @type object
+	 * @nullable true
+	 */
+	resource?: TracedetailtypesWaterfallSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	response_status_code?: string;
+	/**
+	 * @type string
+	 */
+	span_id?: string;
+	/**
+	 * @type integer
+	 */
+	status_code?: number;
+	/**
+	 * @type string
+	 */
+	status_code_string?: string;
+	/**
+	 * @type string
+	 */
+	status_message?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	sub_tree_node_count?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timestamp?: number;
+	/**
+	 * @type string
+	 */
+	trace_id?: string;
+	/**
+	 * @type string
+	 */
+	trace_state?: string;
+}
+
 export interface TypesAlertStatusDTO {
 	/**
 	 * @type array
@@ -7258,6 +7500,17 @@ export type GetHosts200 = {
 	status: string;
 };
 
+export type GetWaterfallPathParameters = {
+	traceID: string;
+};
+export type GetWaterfall200 = {
+	data: TracedetailtypesWaterfallResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type QueryRangeV5200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**

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

@@ -0,0 +1,121 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	MutationFunction,
+	UseMutationOptions,
+	UseMutationResult,
+} from 'react-query';
+import { useMutation } from 'react-query';
+
+import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type {
+	GetWaterfall200,
+	GetWaterfallPathParameters,
+	RenderErrorResponseDTO,
+	TracedetailtypesWaterfallRequestDTO,
+} from '../sigNoz.schemas';
+
+/**
+ * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
+ * @summary Get waterfall view for a trace
+ */
+export const getWaterfall = (
+	{ traceID }: GetWaterfallPathParameters,
+	tracedetailtypesWaterfallRequestDTO: BodyType<TracedetailtypesWaterfallRequestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetWaterfall200>({
+		url: `/api/v3/traces/${traceID}/waterfall`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: tracedetailtypesWaterfallRequestDTO,
+		signal,
+	});
+};
+
+export const getGetWaterfallMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getWaterfall>>,
+		TError,
+		{
+			pathParams: GetWaterfallPathParameters;
+			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getWaterfall>>,
+	TError,
+	{
+		pathParams: GetWaterfallPathParameters;
+		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getWaterfall'];
+	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 getWaterfall>>,
+		{
+			pathParams: GetWaterfallPathParameters;
+			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getWaterfall(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetWaterfallMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getWaterfall>>
+>;
+export type GetWaterfallMutationBody = BodyType<TracedetailtypesWaterfallRequestDTO>;
+export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get waterfall view for a trace
+ */
+export const useGetWaterfall = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getWaterfall>>,
+		TError,
+		{
+			pathParams: GetWaterfallPathParameters;
+			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getWaterfall>>,
+	TError,
+	{
+		pathParams: GetWaterfallPathParameters;
+		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getGetWaterfallMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

frontend/src/api/trace/getTraceV3.tsx

@@ -0,0 +1,66 @@
+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,
+	};
+	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;

frontend/src/auto-import-registry.d.ts

@@ -25,5 +25,6 @@ import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/table';
-import '@signozhq/toggle-group';
+import '@signozhq/tooltip';
 import '@signozhq/ui';
+import '@signozhq/toggle-group';

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -0,0 +1,40 @@
+.details-header {
+	// ghost + secondary missing hover bg token in @signozhq/button
+	--button-ghost-hover-background: var(--l3-background);
+
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	border-bottom: 1px solid var(--l1-border);
+	height: 36px;
+	background: var(--l2-background);
+
+	&__icon-btn {
+		flex-shrink: 0;
+	}
+
+	&__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;
+	}
+}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/button';
+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"
+			className="details-header__icon-btn"
+		>
+			<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;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -0,0 +1,7 @@
+.details-panel-drawer {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -0,0 +1,36 @@
+import { DrawerWrapper } from '@signozhq/drawer';
+
+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"
+			type="panel"
+			showOverlay={false}
+			allowOutsideClick
+			className={`details-panel-drawer ${className || ''}`}
+			content={<div className="details-panel-drawer__body">{children}</div>}
+		/>
+	);
+}
+
+export default DetailsPanelDrawer;

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';

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;
+}

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;

frontend/src/components/LogDetail/index.tsx

@@ -15,7 +15,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,
@@ -45,6 +44,7 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
+import { JsonView } from 'periscope/components/JsonView';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -527,7 +527,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

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;
+}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { resolveTimeFromInterval } from 'components/TimelineV2/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+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 isDarkMode = useIsDarkMode();
+
+	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 <div />;
+	}
+
+	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
+	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;

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;
+}

frontend/src/constants/localStorage.ts

@@ -37,5 +37,6 @@ 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',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -32,6 +32,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',

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',

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',

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;

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;

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>
 	);
 }
 

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>
 	);
 }
 

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],

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;

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,

frontend/src/hooks/trace/useCopySpanLink.ts

@@ -1,17 +1,22 @@
 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';
+
+// 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) => {
@@ -24,18 +29,20 @@ 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 = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
 
 			setCopy(link);
-			notifications.success({
-				message: 'Copied to clipboard',
+			toast.success('Copied to clipboard', {
+				richColors: true,
+				position: 'top-right',
 			});
 		},
-		[span, urlQuery, pathname, setCopy, notifications],
+		[span, urlQuery, pathname, setCopy],
 	);
 
 	return {

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -16,7 +16,7 @@ const useGetTraceFlamegraph = (
 		queryKey: [
 			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
 			props.traceId,
-			props.selectedSpanId,
+			// props.selectedSpanId,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,

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;

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>,

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -569,8 +569,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();

frontend/src/pages/TraceDetailV3Page/index.tsx

@@ -0,0 +1,5 @@
+import TraceDetailsV3 from '../TraceDetailsV3';
+
+export default function TraceDetailV3Page(): JSX.Element {
+	return <TraceDetailsV3 />;
+}

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;
+	}
+}

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;

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;
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui';
+import ROUTES from 'constants/routes';
+import KeyValueLabel from 'periscope/components/KeyValueLabel';
+
+import './LinkedSpans.styles.scss';
+
+interface SpanReference {
+	traceId: string;
+	spanId: string;
+	refType: string;
+}
+
+interface LinkedSpansProps {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	references: any;
+}
+
+interface LinkedSpansState {
+	linkedSpans: SpanReference[];
+	count: number;
+	isOpen: boolean;
+	toggleOpen: () => void;
+}
+
+export function useLinkedSpans(references: any): LinkedSpansState {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const linkedSpans: SpanReference[] = useMemo(
+		() =>
+			(references || []).filter(
+				(ref: SpanReference) => ref.refType !== 'CHILD_OF',
+			),
+		[references],
+	);
+
+	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
+
+	return {
+		linkedSpans,
+		count: linkedSpans.length,
+		isOpen,
+		toggleOpen,
+	};
+}
+
+export function LinkedSpansToggle({
+	count,
+	isOpen,
+	toggleOpen,
+}: {
+	count: number;
+	isOpen: boolean;
+	toggleOpen: () => void;
+}): JSX.Element {
+	if (count === 0) {
+		return <span className="linked-spans__label">0 linked spans</span>;
+	}
+
+	return (
+		<button type="button" className="linked-spans__toggle" onClick={toggleOpen}>
+			<span className="linked-spans__label">
+				{count} linked span{count !== 1 ? 's' : ''}
+			</span>
+			{isOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+		</button>
+	);
+}
+
+export function LinkedSpansPanel({
+	linkedSpans,
+	isOpen,
+}: {
+	linkedSpans: SpanReference[];
+	isOpen: boolean;
+}): JSX.Element | null {
+	const getLink = useCallback(
+		(item: SpanReference): string =>
+			`${ROUTES.TRACE}/${item.traceId}?spanId=${item.spanId}`,
+		[],
+	);
+
+	if (!isOpen || linkedSpans.length === 0) {
+		return null;
+	}
+
+	return (
+		<div className="linked-spans__list">
+			{linkedSpans.map((item) => (
+				<KeyValueLabel
+					key={item.spanId}
+					badgeKey="Linked Span ID"
+					badgeValue={
+						<Link to={getLink(item)}>
+							<Badge color="vanilla">{item.spanId}</Badge>
+						</Link>
+					}
+					direction="column"
+				/>
+			))}
+		</div>
+	);
+}
+
+function LinkedSpans({ references }: LinkedSpansProps): JSX.Element {
+	const { linkedSpans, count, isOpen, toggleOpen } = useLinkedSpans(references);
+
+	return (
+		<div className="linked-spans">
+			<LinkedSpansToggle count={count} isOpen={isOpen} toggleOpen={toggleOpen} />
+			<LinkedSpansPanel linkedSpans={linkedSpans} isOpen={isOpen} />
+		</div>
+	);
+}
+
+export default LinkedSpans;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.styles.scss

@@ -0,0 +1,154 @@
+.span-details-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	&__header-nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	&__body {
+		padding: 12px;
+		display: flex;
+		flex-wrap: wrap;
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+		background: var(--l1-background);
+		font-size: 14px;
+		gap: 16px;
+
+		.data-viewer {
+			min-height: 500px;
+		}
+	}
+
+	&__details-section {
+		flex: 1 1 375px;
+		min-width: 0;
+		max-height: 100%;
+		overflow-y: auto;
+		scrollbar-width: none;
+	}
+
+	&__tabs-section {
+		flex: 1 1 375px;
+		min-width: 0;
+		max-height: 100%;
+		min-height: 400px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		// TabsRoot — direct child of tabs-section
+		> div {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			overflow: hidden;
+		}
+
+		[role='tablist'] {
+			flex-shrink: 0;
+		}
+
+		[role='tab'] {
+			color: var(--foreground) !important;
+		}
+
+		[class*='tabs__list-wrapper'] {
+			padding-left: 0 !important;
+		}
+	}
+
+	&__tabs-scroll {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+
+		[role='tabpanel'] {
+			padding: 0;
+		}
+	}
+
+	&__span-row {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 8px;
+		justify-content: space-between;
+	}
+
+	&__span-info {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 16px;
+		padding: 8px 0;
+	}
+
+	&__span-info-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: var(--l2-foreground);
+		white-space: nowrap;
+	}
+
+	&__highlighted-options {
+		padding: 8px 0;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0;
+
+		.key-value-label {
+			flex: 1 1 50%;
+			min-width: 120px;
+			overflow: hidden;
+		}
+	}
+
+	&__service-dot {
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--bg-forest-500);
+	}
+
+	&__trace-id {
+		color: var(--accent-primary);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		display: block;
+	}
+
+	&__key-attributes {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px 0;
+
+		&-label {
+			font-size: var(--font-size-xs);
+			font-weight: var(--font-weight-medium);
+			color: var(--l2-foreground);
+			text-transform: uppercase;
+			letter-spacing: 0.48px;
+			line-height: var(--line-height-20);
+		}
+
+		&-chips {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 6px;
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -0,0 +1,616 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Button } from '@signozhq/button';
+import {
+	Bookmark,
+	CalendarClock,
+	ChartBar,
+	ChartColumnBig,
+	Copy,
+	Dock,
+	Link2,
+	Logs,
+	PanelBottom,
+	ScrollText,
+	Timer,
+} from '@signozhq/icons';
+import {
+	TabsContent,
+	TabsList,
+	TabsRoot,
+	TabsTrigger,
+	toast,
+} from '@signozhq/ui';
+import { Skeleton, Tooltip } from 'antd';
+import { DetailsHeader, DetailsPanelDrawer } from 'components/DetailsPanel';
+import { HeaderAction } from 'components/DetailsPanel/DetailsHeader/DetailsHeader';
+import { DetailsPanelState } from 'components/DetailsPanel/types';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { QueryParams } from 'constants/query';
+import {
+	initialQueryBuilderFormValuesMap,
+	initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
+import { getEmptyLogsListConfig } from 'container/LogsExplorerList/utils';
+import Events from 'container/SpanDetailsDrawer/Events/Events';
+import SpanLogs from 'container/SpanDetailsDrawer/SpanLogs/SpanLogs';
+import { useSpanContextLogs } from 'container/SpanDetailsDrawer/SpanLogs/useSpanContextLogs';
+import dayjs from 'dayjs';
+import { getSpanAttribute, hasInfraMetadata } from 'pages/TraceDetailsV3/utils';
+import { ActionMenu, ActionMenuItem } from 'periscope/components/ActionMenu';
+import { DataViewer } from 'periscope/components/DataViewer';
+import { FloatingPanel } from 'periscope/components/FloatingPanel';
+import KeyValueLabel from 'periscope/components/KeyValueLabel';
+import { getLeafKeyFromPath } from 'periscope/components/PrettyView/utils';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
+
+import AnalyticsPanel from './AnalyticsPanel/AnalyticsPanel';
+import { HIGHLIGHTED_OPTIONS } from './config';
+import {
+	KEY_ATTRIBUTE_KEYS,
+	SpanDetailVariant,
+	VISIBLE_ACTIONS,
+} from './constants';
+import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
+import {
+	LinkedSpansPanel,
+	LinkedSpansToggle,
+	useLinkedSpans,
+} from './LinkedSpans/LinkedSpans';
+import SpanPercentileBadge from './SpanPercentile/SpanPercentileBadge';
+import SpanPercentilePanel from './SpanPercentile/SpanPercentilePanel';
+import useSpanPercentile from './SpanPercentile/useSpanPercentile';
+
+import './SpanDetailsPanel.styles.scss';
+
+interface SpanDetailsPanelProps {
+	panelState: DetailsPanelState;
+	selectedSpan: SpanV3 | undefined;
+	variant?: SpanDetailVariant;
+	onVariantChange?: (variant: SpanDetailVariant) => void;
+	traceStartTime?: number;
+	traceEndTime?: number;
+	serviceExecTime?: Record<string, number>;
+}
+
+function SpanDetailsContent({
+	selectedSpan,
+	traceStartTime,
+	traceEndTime,
+}: {
+	selectedSpan: SpanV3;
+	traceStartTime?: number;
+	traceEndTime?: number;
+}): JSX.Element {
+	const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
+	const spanAttributeActions = useSpanAttributeActions();
+	const percentile = useSpanPercentile(selectedSpan);
+	const linkedSpans = useLinkedSpans((selectedSpan as any).references);
+
+	// Map span attribute actions to PrettyView actions format.
+	// Use the last key in fieldKeyPath (the actual attribute key), not the full display path.
+	const prettyViewCustomActions = useMemo(
+		() =>
+			spanAttributeActions.map((action) => ({
+				key: action.value,
+				label: action.label,
+				icon: action.icon,
+				shouldHide: action.shouldHide,
+				onClick: (context: {
+					fieldKey: string;
+					fieldKeyPath: (string | number)[];
+					fieldValue: unknown;
+				}): void => {
+					const leafKey = getLeafKeyFromPath(context.fieldKeyPath, context.fieldKey);
+					action.callback({
+						key: leafKey,
+						value: String(context.fieldValue),
+					});
+				},
+			})),
+		[spanAttributeActions],
+	);
+
+	const [, setCopy] = useCopyToClipboard();
+
+	// Build dropdown menu for key attributes (copy + span actions, no pin)
+	const buildKeyAttrMenu = useCallback(
+		(key: string, value: string): ActionMenuItem[] => {
+			const items: ActionMenuItem[] = [
+				{
+					key: 'copy-value',
+					label: 'Copy Value',
+					icon: <Copy size={12} />,
+					onClick: (): void => {
+						setCopy(value);
+						toast.success('Copied to clipboard', {
+							richColors: true,
+							position: 'top-right',
+						});
+					},
+				},
+			];
+			spanAttributeActions.forEach((action) => {
+				if (action.shouldHide && action.shouldHide(key)) {
+					return;
+				}
+				items.push({
+					key: action.value,
+					label: action.label,
+					icon: action.icon,
+					onClick: (): void => {
+						action.callback({ key, value });
+					},
+				});
+			});
+			return items;
+		},
+		[spanAttributeActions, setCopy],
+	);
+
+	const {
+		logs,
+		isLoading: isLogsLoading,
+		isError: isLogsError,
+		isFetching: isLogsFetching,
+		isLogSpanRelated,
+		hasTraceIdLogs,
+	} = useSpanContextLogs({
+		traceId: selectedSpan.trace_id,
+		spanId: selectedSpan.span_id,
+		timeRange: {
+			startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
+			endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
+		},
+		isDrawerOpen: true,
+	});
+
+	const infraMetadata = useMemo(() => {
+		if (!hasInfraMetadata(selectedSpan)) {
+			return null;
+		}
+		return {
+			clusterName: getSpanAttribute(selectedSpan, 'k8s.cluster.name') || '',
+			podName: getSpanAttribute(selectedSpan, 'k8s.pod.name') || '',
+			nodeName: getSpanAttribute(selectedSpan, 'k8s.node.name') || '',
+			hostName: getSpanAttribute(selectedSpan, 'host.name') || '',
+			spanTimestamp: dayjs(selectedSpan.timestamp).format(),
+		};
+	}, [selectedSpan]);
+
+	const handleExplorerPageRedirect = useCallback((): void => {
+		const startTimeMs = (traceStartTime || 0) - FIVE_MINUTES_IN_MS;
+		const endTimeMs = (traceEndTime || 0) + FIVE_MINUTES_IN_MS;
+
+		const traceIdFilter = {
+			op: 'AND',
+			items: [
+				{
+					id: 'trace-id-filter',
+					key: {
+						key: 'trace_id',
+						id: 'trace-id-key',
+						dataType: 'string' as const,
+						isColumn: true,
+						type: '',
+						isJSON: false,
+					} as BaseAutocompleteData,
+					op: '=',
+					value: selectedSpan.trace_id,
+				},
+			],
+		};
+
+		const compositeQuery = {
+			...initialQueryState,
+			queryType: 'builder',
+			builder: {
+				...initialQueryState.builder,
+				queryData: [
+					{
+						...initialQueryBuilderFormValuesMap.logs,
+						aggregateOperator: LogsAggregatorOperator.NOOP,
+						filters: traceIdFilter,
+					},
+				],
+			},
+		};
+
+		const searchParams = new URLSearchParams();
+		searchParams.set(QueryParams.compositeQuery, JSON.stringify(compositeQuery));
+		searchParams.set(QueryParams.startTime, startTimeMs.toString());
+		searchParams.set(QueryParams.endTime, endTimeMs.toString());
+
+		window.open(
+			`${window.location.origin}${
+				ROUTES.LOGS_EXPLORER
+			}?${searchParams.toString()}`,
+			'_blank',
+			'noopener,noreferrer',
+		);
+	}, [selectedSpan.trace_id, traceStartTime, traceEndTime]);
+
+	const emptyLogsStateConfig = useMemo(
+		() => ({
+			...getEmptyLogsListConfig(() => {}),
+			showClearFiltersButton: false,
+		}),
+		[],
+	);
+
+	const keyAttributes = useMemo(() => {
+		const keys = KEY_ATTRIBUTE_KEYS.traces || [];
+
+		const allAttrs: Record<string, string> = {};
+		Object.entries(selectedSpan.resource || {}).forEach(([k, v]) => {
+			allAttrs[k] = String(v);
+		});
+		Object.entries(selectedSpan.attributes || {}).forEach(([k, v]) => {
+			allAttrs[k] = String(v);
+		});
+		const span = (selectedSpan as unknown) as Record<string, unknown>;
+		keys.forEach((key) => {
+			if (!(key in allAttrs) && span[key] != null && span[key] !== '') {
+				allAttrs[key] = String(span[key]);
+			}
+		});
+
+		return keys
+			.filter((key) => allAttrs[key])
+			.map((key) => ({ key, value: allAttrs[key] }));
+	}, [selectedSpan]);
+
+	return (
+		<div className="span-details-panel__body">
+			<div className="span-details-panel__details-section">
+				<div className="span-details-panel__span-row">
+					<KeyValueLabel
+						badgeKey="Span name"
+						badgeValue={selectedSpan.name}
+						maxCharacters={50}
+					/>
+					<SpanPercentileBadge
+						loading={percentile.loading}
+						percentileValue={percentile.percentileValue}
+						duration={percentile.duration}
+						spanPercentileData={percentile.spanPercentileData}
+						isOpen={percentile.isOpen}
+						toggleOpen={percentile.toggleOpen}
+					/>
+				</div>
+
+				<SpanPercentilePanel selectedSpan={selectedSpan} percentile={percentile} />
+
+				{/* Span info: exec time + start time */}
+				<div className="span-details-panel__span-info">
+					<div className="span-details-panel__span-info-item">
+						<Timer size={14} />
+						<span>
+							{getYAxisFormattedValue(`${selectedSpan.duration_nano / 1000000}`, 'ms')}
+							{traceStartTime && traceEndTime && traceEndTime > traceStartTime && (
+								<>
+									{' — '}
+									<strong>
+										{(
+											(selectedSpan.duration_nano * 100) /
+											((traceEndTime - traceStartTime) * 1e6)
+										).toFixed(2)}
+										%
+									</strong>
+									{' of total exec time'}
+								</>
+							)}
+						</span>
+					</div>
+					<div className="span-details-panel__span-info-item">
+						<CalendarClock size={14} />
+						<span>
+							{dayjs(selectedSpan.timestamp).format('HH:mm:ss — MMM D, YYYY')}
+						</span>
+					</div>
+					<div className="span-details-panel__span-info-item">
+						<Link2 size={14} />
+						<LinkedSpansToggle
+							count={linkedSpans.count}
+							isOpen={linkedSpans.isOpen}
+							toggleOpen={linkedSpans.toggleOpen}
+						/>
+					</div>
+				</div>
+
+				<LinkedSpansPanel
+					linkedSpans={linkedSpans.linkedSpans}
+					isOpen={linkedSpans.isOpen}
+				/>
+
+				{/* Step 6: HighlightedOptions */}
+				<div className="span-details-panel__highlighted-options">
+					{HIGHLIGHTED_OPTIONS.map((option) => {
+						const rendered = option.render(selectedSpan);
+						if (!rendered) {
+							return null;
+						}
+						return (
+							<KeyValueLabel
+								key={option.key}
+								badgeKey={option.label}
+								badgeValue={rendered}
+								direction="column"
+							/>
+						);
+					})}
+				</div>
+
+				{/* Step 7: KeyAttributes */}
+				{keyAttributes.length > 0 && (
+					<div className="span-details-panel__key-attributes">
+						<div className="span-details-panel__key-attributes-label">
+							KEY ATTRIBUTES
+						</div>
+						<div className="span-details-panel__key-attributes-chips">
+							{keyAttributes.map(({ key, value }) => (
+								<ActionMenu
+									key={key}
+									items={buildKeyAttrMenu(key, value)}
+									trigger={['click']}
+									placement="bottomRight"
+								>
+									<div>
+										<KeyValueLabel badgeKey={key} badgeValue={value} />
+									</div>
+								</ActionMenu>
+							))}
+						</div>
+					</div>
+				)}
+
+				{/* Step 8: MiniTraceContext */}
+			</div>
+
+			<div className="span-details-panel__tabs-section">
+				{/* Step 9: ContentTabs */}
+				<TabsRoot defaultValue="overview">
+					<TabsList variant="secondary">
+						<TabsTrigger value="overview" variant="secondary">
+							<Bookmark size={14} /> Overview
+						</TabsTrigger>
+						<TabsTrigger value="events" variant="secondary">
+							<ScrollText size={14} /> Events ({selectedSpan.events?.length || 0})
+						</TabsTrigger>
+						<TabsTrigger value="logs" variant="secondary">
+							<Logs size={14} /> Logs
+						</TabsTrigger>
+						{infraMetadata && (
+							<TabsTrigger value="metrics" variant="secondary">
+								<ChartColumnBig size={14} /> Metrics
+							</TabsTrigger>
+						)}
+					</TabsList>
+
+					<div className="span-details-panel__tabs-scroll">
+						<TabsContent value="overview">
+							<DataViewer
+								data={selectedSpan}
+								drawerKey="trace-details"
+								prettyViewProps={{
+									showPinned: true,
+									actions: prettyViewCustomActions,
+									visibleActions: VISIBLE_ACTIONS,
+								}}
+							/>
+						</TabsContent>
+						<TabsContent value="events">
+							{/* V2 Events component expects span.event (singular), V3 has span.events (plural) */}
+							<Events
+								span={{ ...selectedSpan, event: selectedSpan.events } as any}
+								startTime={traceStartTime || 0}
+								isSearchVisible
+							/>
+						</TabsContent>
+						<TabsContent value="logs">
+							<SpanLogs
+								traceId={selectedSpan.trace_id}
+								spanId={selectedSpan.span_id}
+								timeRange={{
+									startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
+									endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
+								}}
+								logs={logs}
+								isLoading={isLogsLoading}
+								isError={isLogsError}
+								isFetching={isLogsFetching}
+								isLogSpanRelated={isLogSpanRelated}
+								handleExplorerPageRedirect={handleExplorerPageRedirect}
+								emptyStateConfig={!hasTraceIdLogs ? emptyLogsStateConfig : undefined}
+							/>
+						</TabsContent>
+						{infraMetadata && (
+							<TabsContent value="metrics">
+								<InfraMetrics
+									clusterName={infraMetadata.clusterName}
+									podName={infraMetadata.podName}
+									nodeName={infraMetadata.nodeName}
+									hostName={infraMetadata.hostName}
+									timestamp={infraMetadata.spanTimestamp}
+									dataSource={DataSource.TRACES}
+								/>
+							</TabsContent>
+						)}
+					</div>
+				</TabsRoot>
+			</div>
+		</div>
+	);
+}
+
+function SpanDetailsPanel({
+	panelState,
+	selectedSpan,
+	variant = SpanDetailVariant.DIALOG,
+	onVariantChange,
+	traceStartTime,
+	traceEndTime,
+	serviceExecTime,
+}: SpanDetailsPanelProps): JSX.Element {
+	const [isAnalyticsOpen, setIsAnalyticsOpen] = useState(false);
+
+	const headerActions = useMemo((): HeaderAction[] => {
+		const actions: HeaderAction[] = [
+			{
+				key: 'analytics',
+				component: (
+					<Button
+						variant="ghost"
+						size="sm"
+						color="secondary"
+						prefixIcon={<ChartBar size={14} />}
+						onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
+					>
+						Analytics
+					</Button>
+				),
+			},
+			// TODO: Add back when driven through separate config for different pages
+			// {
+			// 	key: 'view-full-trace',
+			// 	component: (
+			// 		<Button variant="ghost" size="sm" color="secondary" prefixIcon={<ExternalLink size={14} />} onClick={noop}>
+			// 			View full trace
+			// 		</Button>
+			// 	),
+			// },
+			// TODO: Add back when used in trace explorer page
+			// {
+			// 	key: 'nav',
+			// 	component: (
+			// 		<div className="span-details-panel__header-nav">
+			// 			<Button variant="ghost" size="icon" color="secondary" onClick={noop}><ChevronUp size={14} /></Button>
+			// 			<Button variant="ghost" size="icon" color="secondary" onClick={noop}><ChevronDown size={14} /></Button>
+			// 		</div>
+			// 	),
+			// },
+		];
+
+		if (onVariantChange) {
+			const isDocked = variant === SpanDetailVariant.DOCKED;
+			actions.push({
+				key: 'dock-toggle',
+				component: (
+					<Tooltip title={isDocked ? 'Open as floating panel' : 'Dock on the side'}>
+						<Button
+							variant="ghost"
+							size="icon"
+							color="secondary"
+							onClick={(): void =>
+								onVariantChange(
+									isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
+								)
+							}
+						>
+							{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
+						</Button>
+					</Tooltip>
+				),
+			});
+		}
+
+		return actions;
+	}, [variant, onVariantChange]);
+
+	const PANEL_WIDTH = 500;
+	const PANEL_MARGIN_RIGHT = 20;
+	const PANEL_MARGIN_TOP = 25;
+	const PANEL_MARGIN_BOTTOM = 25;
+
+	const content = (
+		<>
+			<DetailsHeader
+				title="Span details"
+				onClose={panelState.close}
+				actions={headerActions}
+				className={
+					variant === SpanDetailVariant.DIALOG ? 'floating-panel__drag-handle' : ''
+				}
+			/>
+			{selectedSpan ? (
+				<SpanDetailsContent
+					selectedSpan={selectedSpan}
+					traceStartTime={traceStartTime}
+					traceEndTime={traceEndTime}
+				/>
+			) : (
+				<div className="span-details-panel__body">
+					<Skeleton active paragraph={{ rows: 6 }} title={{ width: '60%' }} />
+				</div>
+			)}
+		</>
+	);
+
+	const analyticsPanel = (
+		<AnalyticsPanel
+			isOpen={isAnalyticsOpen}
+			onClose={(): void => setIsAnalyticsOpen(false)}
+			serviceExecTime={serviceExecTime}
+			traceStartTime={traceStartTime}
+			traceEndTime={traceEndTime}
+		/>
+	);
+
+	if (variant === SpanDetailVariant.DOCKED) {
+		return (
+			<>
+				<div className="span-details-panel">{content}</div>
+				{analyticsPanel}
+			</>
+		);
+	}
+
+	if (variant === SpanDetailVariant.DRAWER) {
+		return (
+			<>
+				<DetailsPanelDrawer
+					isOpen={panelState.isOpen}
+					onClose={panelState.close}
+					className="span-details-panel"
+				>
+					{content}
+				</DetailsPanelDrawer>
+				{analyticsPanel}
+			</>
+		);
+	}
+
+	return (
+		<>
+			<FloatingPanel
+				isOpen={panelState.isOpen}
+				className="span-details-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,
+					right: true,
+					bottom: true,
+					left: true,
+					topRight: false,
+					bottomRight: false,
+					bottomLeft: false,
+					topLeft: false,
+				}}
+			>
+				{content}
+			</FloatingPanel>
+			{analyticsPanel}
+		</>
+	);
+}
+
+export default SpanDetailsPanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentile.styles.scss

@@ -0,0 +1,258 @@
+// Badge — wraps a KeyValueLabel, clickable to toggle panel
+.span-percentile-badge {
+	cursor: pointer;
+
+	// Override key color for the percentile value (p99)
+	.key-value-label__key {
+		color: var(--text-sakura-400, #f56c87);
+	}
+
+	&__loader {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 4px;
+		color: var(--foreground);
+	}
+
+	&__value {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+	}
+}
+
+// Panel — collapsible, renders below the row
+.span-percentile-panel {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
+	backdrop-filter: blur(20px);
+	margin: 8px 16px;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 8px 12px;
+		border-bottom: 1px solid var(--l1-border);
+
+		&-text {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			cursor: pointer;
+		}
+
+		&-icon {
+			color: var(--l2-foreground);
+		}
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+
+		&-title {
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-20);
+		}
+
+		&-highlight {
+			color: var(--text-sakura-400, #f56c87);
+		}
+
+		&-loader {
+			display: inline-flex;
+			align-items: flex-end;
+			margin: 0 4px;
+			line-height: 18px;
+		}
+	}
+
+	&__timerange {
+		width: 100%;
+
+		&-select {
+			width: 100%;
+			margin-top: 8px;
+			margin-bottom: 16px;
+
+			.ant-select-selector {
+				border-radius: 50px;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+				color: var(--l1-foreground);
+				font-size: 12px;
+				height: 32px;
+			}
+		}
+	}
+
+	&__table {
+		&-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+
+			&-text {
+				color: var(--l1-foreground);
+				font-size: 11px;
+				font-weight: 500;
+				line-height: 20px;
+				text-transform: uppercase;
+			}
+		}
+
+		&-rows {
+			margin-top: 8px;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+
+		&-skeleton {
+			.ant-skeleton-title {
+				width: 100% !important;
+				margin-top: 0 !important;
+			}
+
+			.ant-skeleton-paragraph {
+				margin-top: 8px;
+
+				& > li + li {
+					margin-top: 10px;
+					width: 100% !important;
+				}
+			}
+		}
+
+		&-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 12px;
+			padding: 0 4px;
+
+			&-key {
+				flex: 0 0 auto;
+				color: var(--l1-foreground);
+				font-size: 12px;
+				font-weight: 500;
+				line-height: 20px;
+			}
+
+			&-value {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 20px;
+			}
+
+			&-dash {
+				flex: 1;
+				height: 0;
+				margin: 0 8px;
+				border-top: 1px solid transparent;
+				border-image: repeating-linear-gradient(
+						to right,
+						var(--l1-border) 0,
+						var(--l1-border) 10px,
+						transparent 10px,
+						transparent 20px
+					)
+					1 stretch;
+			}
+
+			&--current {
+				border-radius: 2px;
+				background: rgba(78, 116, 248, 0.2);
+
+				.span-percentile-panel__table-row-key {
+					color: var(--text-robin-300);
+				}
+
+				.span-percentile-panel__table-row-dash {
+					border-image: repeating-linear-gradient(
+							to right,
+							#abbdff 0,
+							#abbdff 10px,
+							transparent 10px,
+							transparent 20px
+						)
+						1 stretch;
+				}
+
+				.span-percentile-panel__table-row-value {
+					color: var(--text-robin-400);
+				}
+			}
+		}
+	}
+
+	&__resource-selector {
+		overflow: hidden;
+		width: calc(100% + 16px);
+		position: absolute;
+		top: 32px;
+		left: -8px;
+		z-index: 1000;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+
+		&-header {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		&-input {
+			border-radius: 0;
+			border: none !important;
+			box-shadow: none !important;
+			height: 36px;
+		}
+
+		&-items {
+			height: 200px;
+			overflow-y: auto;
+
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+				height: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--l3-background);
+			}
+		}
+
+		&-item {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			padding: 8px 12px;
+
+			&-value {
+				color: var(--l1-foreground);
+				font-size: 13px;
+				line-height: 20px;
+			}
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentileBadge.tsx

@@ -0,0 +1,67 @@
+import { ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
+import KeyValueLabel from 'periscope/components/KeyValueLabel';
+
+import { UseSpanPercentileReturn } from './useSpanPercentile';
+
+import './SpanPercentile.styles.scss';
+
+type SpanPercentileBadgeProps = Pick<
+	UseSpanPercentileReturn,
+	| 'loading'
+	| 'percentileValue'
+	| 'duration'
+	| 'spanPercentileData'
+	| 'isOpen'
+	| 'toggleOpen'
+>;
+
+function SpanPercentileBadge({
+	loading,
+	percentileValue,
+	duration,
+	spanPercentileData,
+	isOpen,
+	toggleOpen,
+}: SpanPercentileBadgeProps): JSX.Element | null {
+	if (loading) {
+		return (
+			<div className="span-percentile-badge__loader">
+				<Loader2 size={14} className="animate-spin" />
+			</div>
+		);
+	}
+
+	if (!spanPercentileData) {
+		return null;
+	}
+
+	return (
+		<div
+			className="span-percentile-badge"
+			onClick={toggleOpen}
+			role="button"
+			tabIndex={0}
+			onKeyDown={(e): void => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					toggleOpen();
+				}
+			}}
+		>
+			<KeyValueLabel
+				badgeKey={`p${percentileValue}`}
+				badgeValue={
+					<span className="span-percentile-badge__value">
+						{duration}
+						{isOpen ? (
+							<ChevronUp size={14} className="span-percentile-badge__icon" />
+						) : (
+							<ChevronDown size={14} className="span-percentile-badge__icon" />
+						)}
+					</span>
+				}
+			/>
+		</div>
+	);
+}
+
+export default SpanPercentileBadge;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -0,0 +1,224 @@
+import { Checkbox, Input, Select, Skeleton, Typography } from 'antd';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { Check, ChevronDown, Loader2, PlusIcon } from 'lucide-react';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import { UseSpanPercentileReturn } from './useSpanPercentile';
+
+import './SpanPercentile.styles.scss';
+
+const DEFAULT_RESOURCE_ATTRIBUTES = {
+	serviceName: 'service.name',
+	name: 'name',
+};
+
+const timerangeOptions = [1, 2, 4, 6, 12, 24].map((hours) => ({
+	label: `${hours}h`,
+	value: hours,
+}));
+
+interface SpanPercentilePanelProps {
+	selectedSpan: SpanV3;
+	percentile: UseSpanPercentileReturn;
+}
+
+function SpanPercentilePanel({
+	selectedSpan,
+	percentile,
+}: SpanPercentilePanelProps): JSX.Element | null {
+	const {
+		isOpen,
+		toggleOpen,
+		isError,
+		loading,
+		spanPercentileData,
+		selectedTimeRange,
+		setSelectedTimeRange,
+		showResourceAttributesSelector,
+		setShowResourceAttributesSelector,
+		resourceAttributesSearchQuery,
+		setResourceAttributesSearchQuery,
+		spanResourceAttributes,
+		handleResourceAttributeChange,
+		resourceAttributesSelectorRef,
+		isLoadingData,
+		isFetchingData,
+	} = percentile;
+
+	if (!isOpen || isError) {
+		return null;
+	}
+
+	return (
+		<div className="span-percentile-panel">
+			<div className="span-percentile-panel__header">
+				<Typography.Text
+					className="span-percentile-panel__header-text"
+					onClick={toggleOpen}
+				>
+					<ChevronDown size={16} /> Span Percentile
+				</Typography.Text>
+
+				{showResourceAttributesSelector ? (
+					<Check
+						size={16}
+						className="cursor-pointer span-percentile-panel__header-icon"
+						onClick={(): void => setShowResourceAttributesSelector(false)}
+					/>
+				) : (
+					<PlusIcon
+						size={16}
+						className="cursor-pointer span-percentile-panel__header-icon"
+						onClick={(): void => setShowResourceAttributesSelector(true)}
+					/>
+				)}
+			</div>
+
+			{showResourceAttributesSelector && (
+				<div
+					className="span-percentile-panel__resource-selector"
+					ref={resourceAttributesSelectorRef}
+				>
+					<div className="span-percentile-panel__resource-selector-header">
+						<Input
+							placeholder="Search resource attributes"
+							className="span-percentile-panel__resource-selector-input"
+							value={resourceAttributesSearchQuery}
+							onChange={(e): void =>
+								setResourceAttributesSearchQuery(e.target.value as string)
+							}
+						/>
+					</div>
+					<div className="span-percentile-panel__resource-selector-items">
+						{spanResourceAttributes
+							.filter((attr) =>
+								attr.key
+									.toLowerCase()
+									.includes(resourceAttributesSearchQuery.toLowerCase()),
+							)
+							.map((attr) => (
+								<div
+									className="span-percentile-panel__resource-selector-item"
+									key={attr.key}
+								>
+									<Checkbox
+										checked={attr.isSelected}
+										onChange={(e): void => {
+											handleResourceAttributeChange(
+												attr.key,
+												attr.value,
+												e.target.checked,
+											);
+										}}
+										disabled={
+											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
+											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.name
+										}
+									>
+										<div className="span-percentile-panel__resource-selector-item-value">
+											{attr.key}
+										</div>
+									</Checkbox>
+								</div>
+							))}
+					</div>
+				</div>
+			)}
+
+			<div className="span-percentile-panel__content">
+				<Typography.Text className="span-percentile-panel__content-title">
+					This span duration is{' '}
+					{!loading && spanPercentileData ? (
+						<span className="span-percentile-panel__content-highlight">
+							p{Math.floor(spanPercentileData.percentile || 0)}
+						</span>
+					) : (
+						<span className="span-percentile-panel__content-loader">
+							<Loader2 size={12} className="animate-spin" />
+						</span>
+					)}{' '}
+					out of the distribution for this resource evaluated for {selectedTimeRange}{' '}
+					hour(s) since the span start time.
+				</Typography.Text>
+
+				<div className="span-percentile-panel__timerange">
+					<Select
+						labelInValue
+						placeholder="Select timerange"
+						className="span-percentile-panel__timerange-select"
+						getPopupContainer={(trigger): HTMLElement =>
+							trigger.parentElement || document.body
+						}
+						value={{
+							label: `${selectedTimeRange}h : ${dayjs(selectedSpan.timestamp)
+								.subtract(selectedTimeRange, 'hour')
+								.format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)} - ${dayjs(
+								selectedSpan.timestamp,
+							).format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)}`,
+							value: selectedTimeRange,
+						}}
+						onChange={(value): void => {
+							setSelectedTimeRange(Number(value.value));
+						}}
+						options={timerangeOptions}
+					/>
+				</div>
+
+				<div className="span-percentile-panel__table">
+					<div className="span-percentile-panel__table-header">
+						<Typography.Text className="span-percentile-panel__table-header-text">
+							Percentile
+						</Typography.Text>
+						<Typography.Text className="span-percentile-panel__table-header-text">
+							Duration
+						</Typography.Text>
+					</div>
+
+					<div className="span-percentile-panel__table-rows">
+						{isLoadingData || isFetchingData ? (
+							<Skeleton
+								active
+								paragraph={{ rows: 3 }}
+								className="span-percentile-panel__table-skeleton"
+							/>
+						) : (
+							<>
+								{Object.entries(spanPercentileData?.percentiles || {}).map(
+									([pKey, pDuration]) => (
+										<div className="span-percentile-panel__table-row" key={pKey}>
+											<Typography.Text className="span-percentile-panel__table-row-key">
+												{pKey}
+											</Typography.Text>
+											<div className="span-percentile-panel__table-row-dash" />
+											<Typography.Text className="span-percentile-panel__table-row-value">
+												{getYAxisFormattedValue(`${pDuration / 1000000}`, 'ms')}
+											</Typography.Text>
+										</div>
+									),
+								)}
+
+								<div className="span-percentile-panel__table-row span-percentile-panel__table-row--current">
+									<Typography.Text className="span-percentile-panel__table-row-key">
+										p{Math.floor(spanPercentileData?.percentile || 0)}
+									</Typography.Text>
+									<div className="span-percentile-panel__table-row-dash" />
+									<Typography.Text className="span-percentile-panel__table-row-value">
+										(this span){' '}
+										{getYAxisFormattedValue(
+											`${selectedSpan.duration_nano / 1000000}`,
+											'ms',
+										)}
+									</Typography.Text>
+								</div>
+							</>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default SpanPercentilePanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/useSpanPercentile.ts

@@ -0,0 +1,331 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMutation, useQuery } from 'react-query';
+import getSpanPercentiles from 'api/trace/getSpanPercentiles';
+import getUserPreference from 'api/v1/user/preferences/name/get';
+import updateUserPreference from 'api/v1/user/preferences/name/update';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { USER_PREFERENCES } from 'constants/userPreferences';
+import dayjs from 'dayjs';
+import useClickOutside from 'hooks/useClickOutside';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+export interface IResourceAttribute {
+	key: string;
+	value: string;
+	isSelected: boolean;
+}
+
+const DEFAULT_RESOURCE_ATTRIBUTES = {
+	serviceName: 'service.name',
+	name: 'name',
+};
+
+export interface UseSpanPercentileReturn {
+	isOpen: boolean;
+	setIsOpen: (open: boolean) => void;
+	toggleOpen: () => void;
+	loading: boolean;
+	percentileValue: number;
+	duration: string;
+	spanPercentileData: {
+		percentile: number;
+		description: string;
+		percentiles: Record<string, number>;
+	} | null;
+	isError: boolean;
+	selectedTimeRange: number;
+	setSelectedTimeRange: (range: number) => void;
+	showResourceAttributesSelector: boolean;
+	setShowResourceAttributesSelector: (show: boolean) => void;
+	resourceAttributesSearchQuery: string;
+	setResourceAttributesSearchQuery: (query: string) => void;
+	spanResourceAttributes: IResourceAttribute[];
+	handleResourceAttributeChange: (
+		key: string,
+		value: string,
+		isSelected: boolean,
+	) => void;
+	resourceAttributesSelectorRef: React.MutableRefObject<HTMLDivElement | null>;
+	isLoadingData: boolean;
+	isFetchingData: boolean;
+}
+
+function useSpanPercentile(selectedSpan: SpanV3): UseSpanPercentileReturn {
+	const [isOpen, setIsOpen] = useState(false);
+	const [selectedTimeRange, setSelectedTimeRange] = useState(1);
+	const [
+		resourceAttributesSearchQuery,
+		setResourceAttributesSearchQuery,
+	] = useState('');
+	const [spanPercentileData, setSpanPercentileData] = useState<{
+		percentile: number;
+		description: string;
+		percentiles: Record<string, number>;
+	} | null>(null);
+	const [
+		showResourceAttributesSelector,
+		setShowResourceAttributesSelector,
+	] = useState(false);
+	const [selectedResourceAttributes, setSelectedResourceAttributes] = useState<
+		Record<string, string>
+	>({});
+	const [spanResourceAttributes, updateSpanResourceAttributes] = useState<
+		IResourceAttribute[]
+	>([]);
+	const [initialWaitCompleted, setInitialWaitCompleted] = useState(false);
+	const [shouldFetchData, setShouldFetchData] = useState(false);
+	const [shouldUpdateUserPreference, setShouldUpdateUserPreference] = useState(
+		false,
+	);
+
+	const resourceAttributesSelectorRef = useRef<HTMLDivElement | null>(null);
+
+	useClickOutside({
+		ref: resourceAttributesSelectorRef,
+		onClickOutside: () => {
+			if (resourceAttributesSelectorRef.current) {
+				setShowResourceAttributesSelector(false);
+			}
+		},
+		eventType: 'mousedown',
+	});
+
+	const endTime = useMemo(
+		() => Math.floor(Number(selectedSpan.timestamp) / 1000) * 1000,
+		[selectedSpan.timestamp],
+	);
+
+	const startTime = useMemo(
+		() =>
+			dayjs(selectedSpan.timestamp)
+				.subtract(Number(selectedTimeRange), 'hour')
+				.unix() * 1000,
+		[selectedSpan.timestamp, selectedTimeRange],
+	);
+
+	const { mutate: updateUserPreferenceMutation } = useMutation(
+		updateUserPreference,
+	);
+
+	const {
+		data: userSelectedResourceAttributes,
+		isError: isErrorUserSelectedResourceAttributes,
+	} = useQuery({
+		queryFn: () =>
+			getUserPreference({
+				name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
+			}),
+		queryKey: [
+			'getUserPreferenceByPreferenceName',
+			USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
+			selectedSpan.span_id,
+		],
+		enabled: selectedSpan.attributes !== undefined,
+	});
+
+	const {
+		isLoading: isLoadingData,
+		isFetching: isFetchingData,
+		data,
+		refetch: refetchData,
+		isError: isErrorData,
+	} = useQuery({
+		queryFn: () =>
+			getSpanPercentiles({
+				start: startTime || 0,
+				end: endTime || 0,
+				spanDuration: selectedSpan.duration_nano || 0,
+				serviceName: selectedSpan['service.name'] || '',
+				name: selectedSpan.name || '',
+				resourceAttributes: selectedResourceAttributes,
+			}),
+		queryKey: [
+			REACT_QUERY_KEY.GET_SPAN_PERCENTILES,
+			selectedSpan.span_id,
+			startTime,
+			endTime,
+		],
+		enabled:
+			shouldFetchData && !showResourceAttributesSelector && initialWaitCompleted,
+		onSuccess: (response) => {
+			if (response.httpStatusCode !== 200) {
+				return;
+			}
+			if (shouldUpdateUserPreference) {
+				updateUserPreferenceMutation({
+					name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
+					value: [...Object.keys(selectedResourceAttributes)],
+				});
+				setShouldUpdateUserPreference(false);
+			}
+		},
+		keepPreviousData: false,
+		cacheTime: 0,
+	});
+
+	// 2-second delay before initial fetch
+	useEffect(() => {
+		setSpanPercentileData(null);
+		setIsOpen(false);
+		setInitialWaitCompleted(false);
+
+		const timer = setTimeout(() => {
+			setInitialWaitCompleted(true);
+		}, 2000);
+
+		return (): void => {
+			clearTimeout(timer);
+		};
+	}, [selectedSpan.span_id]);
+
+	useEffect(() => {
+		if (data?.httpStatusCode !== 200) {
+			setSpanPercentileData(null);
+			return;
+		}
+		if (data) {
+			setSpanPercentileData({
+				percentile: data.data?.position?.percentile || 0,
+				description: data.data?.position?.description || '',
+				percentiles: data.data?.percentiles || {},
+			});
+		}
+	}, [data]);
+
+	// Merge resource + attributes to get all span attributes (equivalent to V2 tagMap).
+	// Stringify all values since the backend expects map[string]string.
+	const allSpanAttributes = useMemo(() => {
+		const merged: Record<string, string> = {};
+		for (const [k, v] of Object.entries(selectedSpan.resource || {})) {
+			merged[k] = String(v);
+		}
+		for (const [k, v] of Object.entries(selectedSpan.attributes || {})) {
+			merged[k] = String(v);
+		}
+		return merged;
+	}, [selectedSpan.resource, selectedSpan.attributes]);
+
+	useEffect(() => {
+		if (userSelectedResourceAttributes) {
+			const userList = (userSelectedResourceAttributes?.data
+				?.value as string[]).map((attr: string) => attr);
+			let selectedMap: Record<string, string> = {};
+			userList.forEach((attr: string) => {
+				selectedMap[attr] = allSpanAttributes[attr] || '';
+			});
+			selectedMap = Object.fromEntries(
+				Object.entries(selectedMap).filter(
+					([key]) => allSpanAttributes[key] !== undefined,
+				),
+			);
+
+			const resourceAttrs = Object.entries(allSpanAttributes).map(
+				([key, value]) => ({
+					key,
+					value,
+					isSelected:
+						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
+						key === DEFAULT_RESOURCE_ATTRIBUTES.name ||
+						(key in selectedMap &&
+							selectedMap[key] !== '' &&
+							selectedMap[key] !== undefined),
+				}),
+			);
+
+			const selected = resourceAttrs.filter((a) => a.isSelected);
+			const unselected = resourceAttrs.filter((a) => !a.isSelected);
+			updateSpanResourceAttributes([...selected, ...unselected]);
+			setSelectedResourceAttributes(selectedMap);
+			setShouldFetchData(true);
+		}
+
+		if (isErrorUserSelectedResourceAttributes) {
+			const resourceAttrs = Object.entries(allSpanAttributes).map(
+				([key, value]) => ({
+					key,
+					value,
+					isSelected:
+						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
+						key === DEFAULT_RESOURCE_ATTRIBUTES.name,
+				}),
+			);
+			updateSpanResourceAttributes(resourceAttrs);
+			setShouldFetchData(true);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		userSelectedResourceAttributes,
+		isErrorUserSelectedResourceAttributes,
+		allSpanAttributes,
+	]);
+
+	const handleResourceAttributeChange = useCallback(
+		(key: string, value: string, isSelected: boolean): void => {
+			updateSpanResourceAttributes((prev) =>
+				prev.map((attr) => (attr.key === key ? { ...attr, isSelected } : attr)),
+			);
+
+			const newSelected = { ...selectedResourceAttributes };
+			if (isSelected) {
+				newSelected[key] = value;
+			} else {
+				delete newSelected[key];
+			}
+			setSelectedResourceAttributes(newSelected);
+			setShouldFetchData(true);
+			setShouldUpdateUserPreference(true);
+		},
+		[selectedResourceAttributes],
+	);
+
+	useEffect(() => {
+		if (
+			shouldFetchData &&
+			!showResourceAttributesSelector &&
+			initialWaitCompleted
+		) {
+			refetchData();
+			setShouldFetchData(false);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [shouldFetchData, showResourceAttributesSelector, initialWaitCompleted]);
+
+	const loading = isLoadingData || isFetchingData;
+	const percentileValue = Math.floor(spanPercentileData?.percentile || 0);
+	const duration = getYAxisFormattedValue(
+		`${selectedSpan.duration_nano / 1000000}`,
+		'ms',
+	);
+
+	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
+
+	const handleTimeRangeChange = useCallback((range: number): void => {
+		setShouldFetchData(true);
+		setSelectedTimeRange(range);
+	}, []);
+
+	return {
+		isOpen,
+		setIsOpen,
+		toggleOpen,
+		loading,
+		percentileValue,
+		duration,
+		spanPercentileData,
+		isError: isErrorData,
+		selectedTimeRange,
+		setSelectedTimeRange: handleTimeRangeChange,
+		showResourceAttributesSelector,
+		setShowResourceAttributesSelector,
+		resourceAttributesSearchQuery,
+		setResourceAttributesSearchQuery,
+		spanResourceAttributes,
+		handleResourceAttributeChange,
+		resourceAttributesSelectorRef,
+		isLoadingData,
+		isFetchingData,
+	};
+}
+
+export default useSpanPercentile;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/config.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { Badge } from '@signozhq/ui';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+interface HighlightedOption {
+	key: string;
+	label: string;
+	render: (span: SpanV3) => ReactNode | null;
+}
+
+export const HIGHLIGHTED_OPTIONS: HighlightedOption[] = [
+	{
+		key: 'service',
+		label: 'SERVICE',
+		render: (span): ReactNode | null =>
+			span['service.name'] ? (
+				<Badge color="vanilla">
+					<span className="span-details-panel__service-dot" />
+					{span['service.name']}
+				</Badge>
+			) : null,
+	},
+	{
+		key: 'statusCodeString',
+		label: 'STATUS CODE STRING',
+		render: (span): ReactNode | null =>
+			span.status_code_string ? (
+				<Badge color="vanilla">{span.status_code_string}</Badge>
+			) : null,
+	},
+	{
+		key: 'traceId',
+		label: 'TRACE ID',
+		render: (span): ReactNode | null =>
+			span.trace_id ? (
+				<Link
+					to={{
+						pathname: `/trace/${span.trace_id}`,
+						search: window.location.search,
+					}}
+					className="span-details-panel__trace-id"
+				>
+					{span.trace_id}
+				</Link>
+			) : null,
+	},
+	{
+		key: 'spanKind',
+		label: 'SPAN KIND',
+		render: (span): ReactNode | null =>
+			span.kind_string ? <Badge color="vanilla">{span.kind_string}</Badge> : null,
+	},
+];

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

@@ -0,0 +1,45 @@
+import { SPAN_ACTION } from './hooks/useSpanAttributeActions';
+
+// Action identifiers for built-in PrettyView actions (copy, pin)
+export const PRETTY_VIEW_ACTION = {
+	COPY: 'copy',
+	PIN: 'pin',
+} as const;
+
+// Which actions are visible per node type — drives the entire menu
+export const VISIBLE_ACTIONS = {
+	leaf: [
+		PRETTY_VIEW_ACTION.COPY,
+		PRETTY_VIEW_ACTION.PIN,
+		SPAN_ACTION.FILTER_IN,
+		SPAN_ACTION.FILTER_OUT,
+		SPAN_ACTION.GROUP_BY,
+	],
+	nested: [PRETTY_VIEW_ACTION.COPY],
+} as const;
+
+export enum SpanDetailVariant {
+	DRAWER = 'drawer',
+	DIALOG = 'dialog',
+	DOCKED = 'docked',
+}
+
+export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {
+	traces: [
+		'service.name',
+		'service.namespace',
+		'deployment.environment',
+		'timestamp',
+		'duration_nano',
+		'kind_string',
+		'status_code_string',
+		'http_method',
+		'http_url',
+		'http_host',
+		'db_name',
+		'db_operation',
+		'external_http_method',
+		'external_http_url',
+		'response_status_code',
+	],
+};

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/hooks/useSpanAttributeActions.ts

@@ -0,0 +1,223 @@
+import React, { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
+import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
+import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { PANEL_TYPES, QueryBuilderKeys } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useNotifications } from 'hooks/useNotifications';
+import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
+import { ArrowDownToDot, ArrowUpFromDot } from 'lucide-react';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+export interface SpanAttributeAction {
+	label: string;
+	value: string;
+	icon?: React.ReactNode;
+	disabled?: boolean;
+	hidden?: boolean;
+	callback: (args: { key: string; value: string; dataType?: string }) => void;
+	/** Returns true if this action should be hidden for the given field key */
+	shouldHide: (key: string) => boolean;
+}
+
+// Keys that should NOT support filter/group-by actions.
+// These are system/internal/computed fields, not actual queryable attributes.
+export const NON_FILTERABLE_KEYS = new Set([
+	'datetime',
+	'duration',
+	'parent_span_id',
+	'has_children',
+	'has_sibling',
+	'sub_tree_node_count',
+	'flags',
+	'trace_state',
+	'timestamp',
+]);
+
+const shouldHideForKey = (key: string): boolean => NON_FILTERABLE_KEYS.has(key);
+
+// Action identifiers
+export const SPAN_ACTION = {
+	FILTER_IN: 'filter-in',
+	FILTER_OUT: 'filter-out',
+	GROUP_BY: 'group-by',
+} as const;
+
+export function useSpanAttributeActions(): SpanAttributeAction[] {
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+	const queryClient = useQueryClient();
+	const { notifications } = useNotifications();
+
+	const getAutocompleteKey = useCallback(
+		async (fieldKey: string): Promise<BaseAutocompleteData> => {
+			const response = await queryClient.fetchQuery(
+				[QueryBuilderKeys.GET_AGGREGATE_KEYS, fieldKey],
+				async () =>
+					getAggregateKeys({
+						searchText: fieldKey,
+						aggregateOperator:
+							currentQuery.builder.queryData[0].aggregateOperator || '',
+						dataSource: DataSource.TRACES,
+						aggregateAttribute:
+							currentQuery.builder.queryData[0].aggregateAttribute?.key || '',
+					}),
+			);
+
+			return chooseAutocompleteFromCustomValue(
+				response.payload?.attributeKeys || [],
+				fieldKey,
+				DataTypes.String,
+			);
+		},
+		[queryClient, currentQuery.builder.queryData],
+	);
+
+	const handleFilter = useCallback(
+		async (
+			{ key, value }: { key: string; value: string },
+			operator: string,
+		): Promise<void> => {
+			try {
+				const autocompleteKey = await getAutocompleteKey(key);
+				const resolvedOperator = getOperatorValue(operator);
+
+				const nextQuery: Query = {
+					...currentQuery,
+					builder: {
+						...currentQuery.builder,
+						queryData: currentQuery.builder.queryData.map((item) => {
+							const cleanedFilters = (item.filters?.items || []).filter(
+								(f) => f.key?.key !== autocompleteKey.key,
+							);
+							const newFilters = [
+								...cleanedFilters,
+								{
+									id: uuid(),
+									key: autocompleteKey,
+									op: resolvedOperator,
+									value,
+								},
+							];
+							const converted = convertFiltersToExpressionWithExistingQuery(
+								{ items: newFilters, op: item.filters?.op || 'AND' },
+								item.filter?.expression || '',
+							);
+							return {
+								...item,
+								dataSource: DataSource.TRACES,
+								filters: converted.filters,
+								filter: converted.filter,
+							};
+						}),
+					},
+				};
+
+				redirectWithQueryBuilderData(
+					nextQuery,
+					{ panelTypes: PANEL_TYPES.LIST },
+					ROUTES.TRACES_EXPLORER,
+					undefined,
+					true,
+				);
+			} catch {
+				notifications.error({ message: SOMETHING_WENT_WRONG });
+			}
+		},
+		[
+			currentQuery,
+			getAutocompleteKey,
+			redirectWithQueryBuilderData,
+			notifications,
+		],
+	);
+
+	const handleFilterIn = useCallback(
+		(args: { key: string; value: string }): void => {
+			handleFilter(args, '=');
+		},
+		[handleFilter],
+	);
+
+	const handleFilterOut = useCallback(
+		(args: { key: string; value: string }): void => {
+			handleFilter(args, '!=');
+		},
+		[handleFilter],
+	);
+
+	const handleGroupBy = useCallback(
+		async ({ key }: { key: string }): Promise<void> => {
+			try {
+				const autocompleteKey = await getAutocompleteKey(key);
+
+				const nextQuery: Query = {
+					...currentQuery,
+					builder: {
+						...currentQuery.builder,
+						queryData: currentQuery.builder.queryData.map((item) => ({
+							...item,
+							dataSource: DataSource.TRACES,
+							groupBy: [...item.groupBy, autocompleteKey],
+						})),
+					},
+				};
+
+				redirectWithQueryBuilderData(
+					nextQuery,
+					{ panelTypes: PANEL_TYPES.TIME_SERIES },
+					ROUTES.TRACES_EXPLORER,
+					undefined,
+					true,
+				);
+			} catch {
+				notifications.error({ message: SOMETHING_WENT_WRONG });
+			}
+		},
+		[
+			currentQuery,
+			getAutocompleteKey,
+			redirectWithQueryBuilderData,
+			notifications,
+		],
+	);
+
+	return [
+		{
+			label: 'Filter for value',
+			value: SPAN_ACTION.FILTER_IN,
+			icon: React.createElement(ArrowDownToDot, {
+				size: 14,
+				style: { transform: 'rotate(90deg)' },
+			}),
+			callback: handleFilterIn,
+			shouldHide: shouldHideForKey,
+		},
+		{
+			label: 'Filter out value',
+			value: SPAN_ACTION.FILTER_OUT,
+			icon: React.createElement(ArrowUpFromDot, {
+				size: 14,
+				style: { transform: 'rotate(90deg)' },
+			}),
+			callback: handleFilterOut,
+			shouldHide: shouldHideForKey,
+		},
+		{
+			label: 'Group by attribute',
+			value: SPAN_ACTION.GROUP_BY,
+			icon: React.createElement(GroupByIcon),
+			callback: handleGroupBy,
+			shouldHide: shouldHideForKey,
+		},
+	];
+}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss

@@ -0,0 +1,60 @@
+.event-tooltip-content {
+	font-size: 12px;
+	color: var(--l1-foreground);
+	max-width: 300px;
+
+	&__header {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		background: var(--l2-background);
+		border: 1px solid var(--l2-border);
+		border-radius: 3px;
+		padding: 2px 6px;
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: var(--l2-foreground);
+		margin-bottom: 6px;
+	}
+
+	&__name {
+		font-weight: 600;
+		margin-bottom: 2px;
+		color: var(--text-robin-400);
+
+		&.error {
+			color: var(--bg-cherry-500);
+		}
+	}
+
+	&__time {
+		font-size: 11px;
+		color: var(--l2-foreground);
+		margin-bottom: 4px;
+	}
+
+	&__divider {
+		border-top: 1px solid var(--l2-border);
+		margin: 6px 0;
+	}
+
+	&__attributes {
+		font-size: 11px;
+	}
+
+	&__kv {
+		margin-bottom: 2px;
+		line-height: 1.4;
+		word-break: break-all;
+	}
+
+	&__key {
+		color: var(--l2-foreground);
+	}
+
+	&__value {
+		color: var(--l1-foreground);
+	}
+}

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

@@ -0,0 +1,49 @@
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { Diamond } from 'lucide-react';
+import { toFixed } from 'utils/toFixed';
+
+import './EventTooltipContent.styles.scss';
+
+export interface EventTooltipContentProps {
+	eventName: string;
+	timeOffsetMs: number;
+	isError: boolean;
+	attributeMap: Record<string, string>;
+}
+
+export function EventTooltipContent({
+	eventName,
+	timeOffsetMs,
+	isError,
+	attributeMap,
+}: EventTooltipContentProps): JSX.Element {
+	const { time, timeUnitName } = convertTimeToRelevantUnit(timeOffsetMs);
+
+	return (
+		<div className="event-tooltip-content">
+			<div className="event-tooltip-content__header">
+				<Diamond size={10} />
+				<span>EVENT DETAILS</span>
+			</div>
+			<div className={`event-tooltip-content__name ${isError ? 'error' : ''}`}>
+				{eventName}
+			</div>
+			<div className="event-tooltip-content__time">
+				{toFixed(time, 2)} {timeUnitName} from start
+			</div>
+			{Object.keys(attributeMap).length > 0 && (
+				<>
+					<div className="event-tooltip-content__divider" />
+					<div className="event-tooltip-content__attributes">
+						{Object.entries(attributeMap).map(([key, value]) => (
+							<div key={key} className="event-tooltip-content__kv">
+								<span className="event-tooltip-content__key">{key}:</span>{' '}
+								<span className="event-tooltip-content__value">{value}</span>
+							</div>
+						))}
+					</div>
+				</>
+			)}
+		</div>
+	);
+}

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

@@ -0,0 +1,37 @@
+.span-hover-card-popover {
+	.ant-popover-inner {
+		background-color: var(--l1-background);
+		padding: 8px 12px;
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		border: 1px solid var(--l2-border);
+	}
+
+	.ant-popover-inner-content {
+		padding: 0;
+	}
+}
+
+// Flamegraph tooltip — rendered as a portal, uses same semantic tokens
+.flamegraph-tooltip {
+	background-color: var(--l1-background);
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	border: 1px solid var(--l2-border);
+}
+
+.span-hover-card-content {
+	font-size: 12px;
+	color: var(--l1-foreground);
+
+	&__name {
+		font-weight: 600;
+		margin-bottom: 4px;
+	}
+
+	&__row {
+		line-height: 1.5;
+		color: var(--l2-foreground);
+	}
+}

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

@@ -0,0 +1,97 @@
+import { ReactNode } from 'react';
+import { Popover } from 'antd';
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+import { toFixed } from 'utils/toFixed';
+
+import './SpanHoverCard.styles.scss';
+
+interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+export interface SpanTooltipContentProps {
+	spanName: string;
+	color: string;
+	hasError: boolean;
+	relativeStartMs: number;
+	durationMs: number;
+}
+
+export function SpanTooltipContent({
+	spanName,
+	color,
+	hasError,
+	relativeStartMs,
+	durationMs,
+}: SpanTooltipContentProps): JSX.Element {
+	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
+		durationMs,
+	);
+
+	return (
+		<div className="span-hover-card-content">
+			<div className="span-hover-card-content__name" style={{ color }}>
+				{spanName}
+			</div>
+			<div className="span-hover-card-content__row">
+				Status: {hasError ? 'error' : 'ok'}
+			</div>
+			<div className="span-hover-card-content__row">
+				Start: {toFixed(relativeStartMs, 2)} ms
+			</div>
+			<div className="span-hover-card-content__row">
+				Duration: {toFixed(formattedDuration, 2)} {timeUnitName}
+			</div>
+		</div>
+	);
+}
+
+interface SpanHoverCardProps {
+	span: SpanV3;
+	traceMetadata: ITraceMetadata;
+	children: ReactNode;
+}
+
+function SpanHoverCard({
+	span,
+	traceMetadata,
+	children,
+}: SpanHoverCardProps): JSX.Element {
+	const durationMs = span.duration_nano / 1e6;
+	const relativeStartMs = span.timestamp - traceMetadata.startTime;
+
+	let color = generateColor(
+		span['service.name'],
+		themeColors.traceDetailColorsV3,
+	);
+	if (span.has_error) {
+		color = 'var(--bg-cherry-500)';
+	}
+
+	return (
+		<Popover
+			mouseEnterDelay={0.2}
+			content={
+				<SpanTooltipContent
+					spanName={span.name}
+					color={color}
+					hasError={span.has_error}
+					relativeStartMs={relativeStartMs}
+					durationMs={durationMs}
+				/>
+			}
+			trigger="hover"
+			rootClassName="span-hover-card-popover"
+			autoAdjustOverflow
+			arrow={false}
+		>
+			{children}
+		</Popover>
+	);
+}
+
+export default SpanHoverCard;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsFilter.styles.scss

@@ -0,0 +1,39 @@
+.trace-details-filter {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+
+	&__search {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__scope {
+		flex-shrink: 0;
+	}
+
+	&__nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		flex-shrink: 0;
+		white-space: nowrap;
+
+		.ant-typography {
+			font-size: 12px;
+			color: var(--l2-foreground);
+		}
+
+		.ant-btn {
+			padding: 2px 4px;
+			height: auto;
+		}
+	}
+
+	&__no-results {
+		font-size: 12px;
+		color: var(--l2-foreground);
+		white-space: nowrap;
+	}
+}

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

@@ -0,0 +1,262 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Button, Spin, Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { uniqBy } from 'lodash-es';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	Query,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	DataSource,
+	TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+
+import './TraceDetailsFilter.styles.scss';
+
+interface TraceDetailsFilterProps {
+	startTime: number;
+	endTime: number;
+	traceId: string;
+	onFilteredSpansChange: (spanIds: string[], isFilterActive: boolean) => void;
+}
+
+const TRACE_ID_FILTER_ITEM = {
+	id: 'trace-details-trace-id',
+	key: {
+		key: 'trace_id',
+		dataType: DataTypes.String,
+		type: '',
+		id: 'trace_id--string----true',
+	},
+	op: '=',
+	value: '',
+};
+
+function buildInitialQuery(): IBuilderQuery {
+	return {
+		...initialQueriesMap.traces.builder.queryData[0],
+		aggregateOperator: TracesAggregatorOperator.NOOP,
+		orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+		dataSource: DataSource.TRACES,
+		filters: { items: [], op: 'AND' },
+		filter: { expression: '' },
+	};
+}
+
+function prepareApiQuery(builderQuery: IBuilderQuery, traceId: string): Query {
+	return {
+		...initialQueriesMap.traces,
+		builder: {
+			...initialQueriesMap.traces.builder,
+			queryData: [
+				{
+					...builderQuery,
+					// Inject trace_id filter for scoping results to this trace
+					filters: {
+						op: builderQuery.filters?.op || 'AND',
+						items: [
+							...(builderQuery.filters?.items || []),
+							{ ...TRACE_ID_FILTER_ITEM, value: traceId },
+						],
+					},
+				},
+			],
+		},
+	};
+}
+
+function TraceDetailsFilter({
+	startTime,
+	endTime,
+	traceId,
+	onFilteredSpansChange,
+}: TraceDetailsFilterProps): JSX.Element {
+	const [builderQuery, setBuilderQuery] = useState<IBuilderQuery>(
+		buildInitialQuery,
+	);
+	const [noData, setNoData] = useState(false);
+	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
+	const [currentSearchedIndex, setCurrentSearchedIndex] = useState(0);
+
+	const { search } = useLocation();
+	const history = useHistory();
+
+	const expression = builderQuery.filter?.expression || '';
+	const hasActiveFilter =
+		(builderQuery.filters?.items || []).length > 0 ||
+		expression.trim().length > 0;
+
+	// Called by QuerySearch when user types in the CodeMirror editor
+	const handleExpressionChange = useCallback(
+		(value: string): void => {
+			setBuilderQuery((prev) => {
+				if (!value.trim() && (prev.filters?.items || []).length === 0) {
+					onFilteredSpansChange([], false);
+					setFilteredSpanIds([]);
+					setCurrentSearchedIndex(0);
+					setNoData(false);
+				}
+				return {
+					...prev,
+					filter: { expression: value },
+				};
+			});
+		},
+		[onFilteredSpansChange],
+	);
+
+	// Called by SpanScopeSelector when scope changes (All Spans / Root Spans etc.)
+	// Merges the scope filter items into filter.expression using the shared util
+	const handleScopeChange = useCallback((value: TagFilter): void => {
+		setBuilderQuery((prev) => {
+			const currentExpression = prev.filter?.expression || '';
+			const {
+				filters: mergedFilters,
+				filter: mergedFilter,
+			} = convertFiltersToExpressionWithExistingQuery(value, currentExpression);
+			return {
+				...prev,
+				filters: mergedFilters,
+				filter: mergedFilter,
+			};
+		});
+	}, []);
+
+	const handlePrevNext = useCallback(
+		(index: number, spanId?: string): void => {
+			const searchParams = new URLSearchParams(search);
+			if (spanId) {
+				searchParams.set('spanId', spanId);
+			} else {
+				searchParams.set('spanId', filteredSpanIds[index]);
+			}
+			history.replace({ search: searchParams.toString() });
+		},
+		[filteredSpanIds, history, search],
+	);
+
+	const query = useMemo(() => prepareApiQuery(builderQuery, traceId), [
+		builderQuery,
+		traceId,
+	]);
+
+	const { isFetching, error } = useGetQueryRange(
+		{
+			query,
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start: startTime,
+			end: endTime,
+			params: {
+				dataSource: 'traces',
+			},
+			tableParams: {
+				pagination: {
+					offset: 0,
+					limit: 200,
+				},
+				selectColumns: [
+					{
+						key: 'name',
+						dataType: 'string',
+						type: 'tag',
+						id: 'name--string--tag--true',
+						isIndexed: false,
+					},
+				],
+			},
+		},
+		DEFAULT_ENTITY_VERSION,
+		{
+			queryKey: [builderQuery.filter, builderQuery.filters],
+			enabled: hasActiveFilter,
+			onSuccess: (data) => {
+				if (data?.payload.data.newResult.data.result[0].list) {
+					const uniqueSpans = uniqBy(
+						data?.payload.data.newResult.data.result[0].list,
+						'data.spanID',
+					);
+					const spanIds = uniqueSpans.map((val) => val.data.spanID);
+					setFilteredSpanIds(spanIds);
+					onFilteredSpansChange(spanIds, true);
+					handlePrevNext(0, spanIds[0]);
+					setNoData(false);
+				} else {
+					setNoData(true);
+					setFilteredSpanIds([]);
+					onFilteredSpansChange([], true);
+					setCurrentSearchedIndex(0);
+				}
+			},
+		},
+	);
+
+	return (
+		<div className="trace-details-filter">
+			<div className="trace-details-filter__search">
+				<QuerySearch
+					queryData={builderQuery}
+					onChange={handleExpressionChange}
+					dataSource={DataSource.TRACES}
+					placeholder="Search Filter : select options from suggested values, for IN/NOT IN operators - press 'Enter' after selecting options"
+				/>
+			</div>
+			<div className="trace-details-filter__scope">
+				<SpanScopeSelector
+					query={builderQuery}
+					onChange={handleScopeChange}
+					skipQueryBuilderRedirect
+				/>
+			</div>
+			{filteredSpanIds.length > 0 && (
+				<div className="trace-details-filter__nav">
+					<Typography.Text>
+						{currentSearchedIndex + 1} / {filteredSpanIds.length}
+					</Typography.Text>
+					<Button
+						icon={<ChevronUp size={14} />}
+						disabled={currentSearchedIndex === 0}
+						type="text"
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex - 1);
+							setCurrentSearchedIndex((prev) => prev - 1);
+						}}
+					/>
+					<Button
+						icon={<ChevronDown size={14} />}
+						type="text"
+						disabled={currentSearchedIndex === filteredSpanIds.length - 1}
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex + 1);
+							setCurrentSearchedIndex((prev) => prev + 1);
+						}}
+					/>
+				</div>
+			)}
+			{isFetching && <Spin indicator={<LoadingOutlined spin />} size="small" />}
+			{error && (
+				<Tooltip title={(error as AxiosError)?.message || 'Something went wrong'}>
+					<InfoCircleOutlined />
+				</Tooltip>
+			)}
+			{noData && (
+				<Typography.Text className="trace-details-filter__no-results">
+					No results found
+				</Typography.Text>
+			)}
+		</div>
+	);
+}
+
+export default TraceDetailsFilter;

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

@@ -0,0 +1,28 @@
+.trace-details-header {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	gap: 8px;
+
+	&__back-btn {
+		flex-shrink: 0;
+	}
+
+	.key-value-label {
+		flex-shrink: 0;
+	}
+
+	&__filter {
+		&.trace-v3-filter-row {
+			padding: 0;
+		}
+		max-width: 850px;
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__old-view-btn {
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+}

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

@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button } from '@signozhq/ui';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { ArrowLeft } from 'lucide-react';
+import KeyValueLabel from 'periscope/components/KeyValueLabel';
+import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
+
+import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
+
+import './TraceDetailsHeader.styles.scss';
+
+interface FilterMetadata {
+	startTime: number;
+	endTime: number;
+	traceId: string;
+}
+
+interface TraceDetailsHeaderProps {
+	filterMetadata: FilterMetadata;
+	onFilteredSpansChange: (spanIds: string[], isFilterActive: boolean) => void;
+	noData?: boolean;
+}
+
+function TraceDetailsHeader({
+	filterMetadata,
+	onFilteredSpansChange,
+	noData,
+}: TraceDetailsHeaderProps): JSX.Element {
+	const { id: traceID } = useParams<TraceDetailV2URLProps>();
+
+	const handleSwitchToOldView = useCallback((): void => {
+		const oldUrl = `/trace-old/${traceID}${window.location.search}`;
+		history.replace(oldUrl);
+	}, [traceID]);
+
+	const handlePreviousBtnClick = useCallback((): void => {
+		const isSpaNavigate =
+			document.referrer &&
+			new URL(document.referrer).origin === window.location.origin;
+		const hasBackHistory = window.history.length > 1;
+
+		if (isSpaNavigate && hasBackHistory) {
+			history.goBack();
+		} else {
+			history.push(ROUTES.TRACES_EXPLORER);
+		}
+	}, []);
+
+	return (
+		<div className="trace-details-header">
+			<Button
+				variant="solid"
+				color="secondary"
+				size="sm"
+				className="trace-details-header__back-btn"
+				onClick={handlePreviousBtnClick}
+			>
+				<ArrowLeft size={14} />
+			</Button>
+			<KeyValueLabel
+				badgeKey="Trace ID"
+				badgeValue={traceID || ''}
+				maxCharacters={100}
+			/>
+			{!noData && (
+				<>
+					<div className="trace-details-header__filter">
+						<Filters
+							startTime={filterMetadata.startTime}
+							endTime={filterMetadata.endTime}
+							traceID={filterMetadata.traceId}
+							onFilteredSpansChange={onFilteredSpansChange}
+						/>
+					</div>
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						className="trace-details-header__old-view-btn"
+						onClick={handleSwitchToOldView}
+					>
+						Old View
+					</Button>
+				</>
+			)}
+		</div>
+	);
+}
+
+export default TraceDetailsHeader;

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.styles.scss

@@ -0,0 +1,107 @@
+.trace-details-v3 {
+	height: calc(100vh);
+	display: flex;
+	flex-direction: column;
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: hidden;
+	}
+
+	&__flame-collapse,
+	&__waterfall-collapse {
+		border: none;
+		border-radius: 0;
+		background: transparent;
+
+		.ant-collapse-item {
+			border: none;
+		}
+
+		.ant-collapse-header {
+			border: 1px solid var(--l2-border);
+		}
+
+		.ant-collapse-content {
+			background: transparent;
+			border-top: none;
+			// Disable collapse animation — virtualizer and canvas flicker during height transitions
+			transition: none !important;
+		}
+	}
+
+	&__collapse-label {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+	}
+
+	&__collapse-count {
+		display: flex;
+		gap: 6px;
+		align-items: center;
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--l2-foreground);
+	}
+
+	&__flame-collapse {
+		flex-shrink: 0;
+
+		.ant-collapse-content-box {
+			padding: 0 !important;
+		}
+	}
+
+	&__waterfall-collapse {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		.ant-collapse-item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		.ant-collapse-content.ant-collapse-content-active {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		.ant-collapse-content-box {
+			padding: 0 !important;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		&--docked {
+			flex: none;
+
+			.ant-collapse-item {
+				flex: none;
+				display: block;
+			}
+
+			.ant-collapse-content-box {
+				flex: none;
+				display: block;
+			}
+		}
+	}
+
+	&__docked-span-details {
+		flex: 1;
+		overflow: auto;
+		min-height: 0;
+	}
+}

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

@@ -0,0 +1,284 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import TimelineV3 from 'components/TimelineV3/TimelineV3';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { useCrosshair } from '../hooks/useCrosshair';
+import { EventTooltipContent } from '../SpanHoverCard/EventTooltipContent';
+import { SpanTooltipContent } from '../SpanHoverCard/SpanHoverCard';
+import { DEFAULT_ROW_HEIGHT } from './constants';
+import { useCanvasSetup } from './hooks/useCanvasSetup';
+import { useFlamegraphCrosshair } from './hooks/useFlamegraphCrosshair';
+import { useFlamegraphDrag } from './hooks/useFlamegraphDrag';
+import { useFlamegraphDraw } from './hooks/useFlamegraphDraw';
+import { useFlamegraphHover } from './hooks/useFlamegraphHover';
+import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
+import { useScrollToSpan } from './hooks/useScrollToSpan';
+import { EventRect, FlamegraphCanvasProps, SpanRect } from './types';
+
+function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
+	const {
+		layout,
+		traceMetadata,
+		firstSpanAtFetchLevel,
+		onSpanClick,
+		filteredSpanIds,
+		isFilterActive,
+	} = props;
+
+	const isDarkMode = useIsDarkMode();
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const spanRectsRef = useRef<SpanRect[]>([]);
+	const eventRectsRef = useRef<EventRect[]>([]);
+
+	const [viewStartTs, setViewStartTs] = useState<number>(
+		traceMetadata.startTime,
+	);
+	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
+	const [scrollTop, setScrollTop] = useState<number>(0);
+	const [rowHeight, setRowHeight] = useState<number>(DEFAULT_ROW_HEIGHT);
+
+	// Mutable refs for zoom and drag hooks to read during rAF / mouse callbacks
+	const viewStartRef = useRef(viewStartTs);
+	const viewEndRef = useRef(viewEndTs);
+	const rowHeightRef = useRef(rowHeight);
+	const scrollTopRef = useRef(scrollTop);
+
+	useEffect(() => {
+		viewStartRef.current = viewStartTs;
+	}, [viewStartTs]);
+
+	useEffect(() => {
+		viewEndRef.current = viewEndTs;
+	}, [viewEndTs]);
+
+	useEffect(() => {
+		rowHeightRef.current = rowHeight;
+	}, [rowHeight]);
+
+	useEffect(() => {
+		scrollTopRef.current = scrollTop;
+	}, [scrollTop]);
+
+	useEffect(() => {
+		//TODO: see if this can be removed as once loaded the view start and end ts will not change
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+		viewStartRef.current = traceMetadata.startTime;
+		viewEndRef.current = traceMetadata.endTime;
+	}, [traceMetadata.startTime, traceMetadata.endTime]);
+
+	const totalHeight = layout.totalVisualRows * rowHeight;
+
+	const { isOverFlamegraphRef } = useFlamegraphZoom({
+		canvasRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	});
+
+	const {
+		handleMouseDown,
+		handleMouseMove: handleDragMouseMove,
+		handleMouseUp,
+		handleDragMouseLeave,
+		isDraggingRef,
+	} = useFlamegraphDrag({
+		canvasRef,
+		containerRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		setViewStartTs,
+		setViewEndTs,
+		scrollTopRef,
+		setScrollTop,
+		totalHeight,
+	});
+
+	const {
+		hoveredSpanId,
+		hoveredEventKey,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleMouseDownForClick,
+		handleClick,
+		tooltipContent,
+	} = useFlamegraphHover({
+		canvasRef,
+		spanRectsRef,
+		eventRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		onSpanClick,
+		isDarkMode,
+	});
+
+	const { drawFlamegraph } = useFlamegraphDraw({
+		canvasRef,
+		containerRef,
+		spans: layout.visualRows,
+		connectors: layout.connectors,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId: firstSpanAtFetchLevel || undefined,
+		hoveredSpanId: hoveredSpanId ?? '',
+		isDarkMode,
+		spanRectsRef,
+		eventRectsRef,
+		hoveredEventKey,
+		filteredSpanIds,
+		isFilterActive,
+	});
+
+	useScrollToSpan({
+		firstSpanAtFetchLevel,
+		spans: layout.visualRows,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	});
+
+	useCanvasSetup(canvasRef, containerRef, drawFlamegraph, overlayCanvasRef);
+
+	const {
+		cursorXPercent,
+		cursorX,
+		onMouseMove: onCrosshairMove,
+		onMouseLeave: onCrosshairLeave,
+	} = useCrosshair({ containerRef });
+
+	useFlamegraphCrosshair({ overlayCanvasRef, cursorX });
+
+	const handleMouseMove = useCallback(
+		(e: React.MouseEvent): void => {
+			handleDragMouseMove(e);
+			handleHoverMouseMove(e);
+			if (!isDraggingRef.current) {
+				onCrosshairMove(e);
+			}
+		},
+		[handleDragMouseMove, handleHoverMouseMove, onCrosshairMove, isDraggingRef],
+	);
+
+	const handleMouseLeave = useCallback((): void => {
+		isOverFlamegraphRef.current = false;
+		onCrosshairLeave();
+		handleDragMouseLeave();
+		handleHoverMouseLeave();
+	}, [
+		isOverFlamegraphRef,
+		onCrosshairLeave,
+		handleDragMouseLeave,
+		handleHoverMouseLeave,
+	]);
+
+	const tooltipElement = tooltipContent
+		? createPortal(
+				<div
+					className="span-hover-card-popover flamegraph-tooltip"
+					style={{
+						position: 'fixed',
+						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
+						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
+						zIndex: 1000,
+						pointerEvents: 'none',
+					}}
+				>
+					{tooltipContent.event ? (
+						<EventTooltipContent
+							eventName={tooltipContent.event.name}
+							timeOffsetMs={tooltipContent.event.timeOffsetMs}
+							isError={tooltipContent.event.isError}
+							attributeMap={tooltipContent.event.attributeMap}
+						/>
+					) : (
+						<SpanTooltipContent
+							spanName={tooltipContent.spanName}
+							color={tooltipContent.spanColor}
+							hasError={tooltipContent.status === 'error'}
+							relativeStartMs={tooltipContent.startMs}
+							durationMs={tooltipContent.durationMs}
+						/>
+					)}
+				</div>,
+				document.body,
+		  )
+		: null;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				padding: '0 15px',
+			}}
+		>
+			{tooltipElement}
+			<TimelineV3
+				startTimestamp={viewStartTs}
+				endTimestamp={viewEndTs}
+				offsetTimestamp={viewStartTs - traceMetadata.startTime}
+				timelineHeight={10}
+				cursorXPercent={cursorXPercent}
+			/>
+			<div
+				ref={containerRef}
+				style={{
+					flex: 1,
+					overflow: 'hidden',
+					position: 'relative',
+				}}
+				onMouseEnter={(): void => {
+					isOverFlamegraphRef.current = true;
+				}}
+				onMouseLeave={handleMouseLeave}
+			>
+				<canvas
+					ref={canvasRef}
+					style={{
+						display: 'block',
+						width: '100%',
+						cursor: 'grab',
+					}}
+					onMouseDown={(e): void => {
+						handleMouseDown(e);
+						handleMouseDownForClick(e);
+					}}
+					onMouseMove={handleMouseMove}
+					onMouseUp={handleMouseUp}
+					onClick={handleClick}
+				/>
+				<canvas
+					ref={overlayCanvasRef}
+					style={{
+						position: 'absolute',
+						top: 0,
+						left: 0,
+						width: '100%',
+						pointerEvents: 'none',
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default FlamegraphCanvas;

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

@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
+import { Skeleton } from 'antd';
+import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
+
+import Error from '../TraceWaterfall/TraceWaterfallStates/Error/Error';
+import { FLAMEGRAPH_SPAN_LIMIT } from './constants';
+import FlamegraphCanvas from './FlamegraphCanvas';
+import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
+
+interface TraceFlamegraphProps {
+	filteredSpanIds: string[];
+	isFilterActive: boolean;
+}
+
+function TraceFlamegraph({
+	filteredSpanIds,
+	isFilterActive,
+}: TraceFlamegraphProps): JSX.Element {
+	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
+	const urlQuery = useUrlQuery();
+	const history = useHistory();
+	const { search } = useLocation();
+	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
+		urlQuery.get('spanId') || '',
+	);
+
+	useEffect(() => {
+		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
+	}, [urlQuery]);
+
+	const handleSpanClick = useCallback(
+		(spanId: string): void => {
+			setFirstSpanAtFetchLevel(spanId);
+			const searchParams = new URLSearchParams(search);
+			//tood: use from query params constants
+			if (searchParams.get('spanId') !== spanId) {
+				searchParams.set('spanId', spanId);
+				history.replace({ search: searchParams.toString() });
+			}
+		},
+		[history, search],
+	);
+
+	const { data, isFetching, error: fetchError } = useGetTraceFlamegraph({
+		traceId,
+		// selectedSpanId: firstSpanAtFetchLevel,
+		limit: FLAMEGRAPH_SPAN_LIMIT,
+	});
+
+	const spans = useMemo(() => data?.payload?.spans || [], [
+		data?.payload?.spans,
+	]);
+
+	const { layout, isComputing, error: workerError } = useVisualLayoutWorker(
+		spans,
+	);
+
+	const content = useMemo(() => {
+		// Loading: fetching data or worker computing layout
+		if (isFetching || isComputing) {
+			if (layout.totalVisualRows > 0) {
+				return (
+					<FlamegraphCanvas
+						layout={layout}
+						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
+						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
+						onSpanClick={handleSpanClick}
+						traceMetadata={{
+							startTime: data?.payload?.startTimestampMillis || 0,
+							endTime: data?.payload?.endTimestampMillis || 0,
+						}}
+						filteredSpanIds={filteredSpanIds}
+						isFilterActive={isFilterActive}
+					/>
+				);
+			}
+			return (
+				<div style={{ width: '100%', height: '100%', padding: '8px 12px' }}>
+					<Skeleton
+						active
+						paragraph={{
+							rows: 8,
+							width: ['100%', '95%', '85%', '70%', '50%', '35%', '20%', '10%'],
+						}}
+						title={false}
+					/>
+				</div>
+			);
+		}
+		// Error: network or worker failure
+		if (fetchError || workerError) {
+			return <Error error={(fetchError || workerError) as any} />;
+		}
+		if (data?.payload?.spans && data.payload.spans.length === 0) {
+			return <div>No data found for trace {traceId}</div>;
+		}
+		return (
+			<FlamegraphCanvas
+				layout={layout}
+				firstSpanAtFetchLevel={firstSpanAtFetchLevel}
+				setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
+				onSpanClick={handleSpanClick}
+				traceMetadata={{
+					startTime: data?.payload?.startTimestampMillis || 0,
+					endTime: data?.payload?.endTimestampMillis || 0,
+				}}
+				filteredSpanIds={filteredSpanIds}
+				isFilterActive={isFilterActive}
+			/>
+		);
+	}, [
+		data?.payload?.endTimestampMillis,
+		data?.payload?.startTimestampMillis,
+		data?.payload?.spans,
+		fetchError,
+		filteredSpanIds,
+		firstSpanAtFetchLevel,
+		handleSpanClick,
+		isComputing,
+		isFilterActive,
+		isFetching,
+		layout,
+		traceId,
+		workerError,
+	]);
+
+	return <>{content}</>;
+}
+
+export default TraceFlamegraph;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -0,0 +1,475 @@
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { computeVisualLayout } from '../computeVisualLayout';
+
+function makeSpan(
+	overrides: Partial<FlamegraphSpan> & {
+		spanId: string;
+		timestamp: number;
+		durationNano: number;
+	},
+): FlamegraphSpan {
+	return {
+		parentSpanId: '',
+		traceId: 'trace-1',
+		hasError: false,
+		serviceName: 'svc',
+		name: 'op',
+		level: 0,
+		event: [],
+		...overrides,
+	};
+}
+
+describe('computeVisualLayout', () => {
+	it('should handle empty input', () => {
+		const layout = computeVisualLayout([]);
+		expect(layout.totalVisualRows).toBe(0);
+		expect(layout.visualRows).toEqual([]);
+	});
+
+	it('should handle single root, no children — 1 visual row', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 100e6,
+		});
+		const layout = computeVisualLayout([[root]]);
+		expect(layout.totalVisualRows).toBe(1);
+		expect(layout.visualRows[0]).toEqual([root]);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+	});
+
+	it('should keep non-overlapping siblings on the same row (compact)', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 100e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 200,
+			durationNano: 100e6,
+		});
+		const c = makeSpan({
+			spanId: 'c',
+			parentSpanId: 'root',
+			timestamp: 400,
+			durationNano: 100e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b, c]]);
+
+		// root on row 0, all children on row 1
+		expect(layout.totalVisualRows).toBe(2);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['a']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['c']).toBe(1);
+	});
+
+	it('should pack non-overlapping siblings into shared lanes (greedy packing)', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 300e6,
+		});
+		// A and B overlap; C does not overlap with either
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 100e6, // ends at 100ms
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 50,
+			durationNano: 100e6, // starts at 50ms < 100ms end of A → overlap → lane 1
+		});
+		const c = makeSpan({
+			spanId: 'c',
+			parentSpanId: 'root',
+			timestamp: 200,
+			durationNano: 100e6, // 200 >= 100, fits lane 0 with A
+		});
+
+		const layout = computeVisualLayout([[root], [a, b, c]]);
+
+		// root on row 0, C placed first (latest) → row 1, B doesn't overlap C → row 1, A overlaps B → row 2
+		expect(layout.totalVisualRows).toBe(3);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['c']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['a']).toBe(2);
+	});
+
+	it('should handle full overlap — all siblings get own row', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b]]);
+
+		expect(layout.totalVisualRows).toBe(3);
+		expect(layout.spanToVisualRow['a']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(2);
+	});
+
+	it('should stack children correctly below overlapping parents', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 300e6,
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 50,
+			durationNano: 200e6,
+		});
+		// Child of A
+		const childA = makeSpan({
+			spanId: 'childA',
+			parentSpanId: 'a',
+			timestamp: 10,
+			durationNano: 50e6,
+		});
+		// Child of B
+		const childB = makeSpan({
+			spanId: 'childB',
+			parentSpanId: 'b',
+			timestamp: 60,
+			durationNano: 50e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b], [childA, childB]]);
+
+		// DFS processes b's subtree first (latest):
+		// root → row 0
+		// b → row 1 (parentRow 0 + 1)
+		// childB → row 2 (parentRow 1 + 1)
+		// a → try row 1 (parentRow 0 + 1), overlaps b → try row 2, overlaps childB → row 3
+		// childA → row 4 (parentRow 3 + 1)
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['childB']).toBe(2);
+		expect(layout.spanToVisualRow['a']).toBe(3);
+		expect(layout.spanToVisualRow['childA']).toBe(4);
+		expect(layout.totalVisualRows).toBe(5);
+	});
+
+	it('should handle multiple roots as a sibling group', () => {
+		// Two overlapping roots
+		const r1 = makeSpan({
+			spanId: 'r1',
+			timestamp: 0,
+			durationNano: 100e6,
+		});
+		const r2 = makeSpan({
+			spanId: 'r2',
+			timestamp: 50,
+			durationNano: 100e6,
+		});
+
+		const layout = computeVisualLayout([[r1, r2]]);
+
+		expect(layout.spanToVisualRow['r1']).toBe(0);
+		expect(layout.spanToVisualRow['r2']).toBe(1);
+		expect(layout.totalVisualRows).toBe(2);
+	});
+
+	it('should produce compact layout for deep nesting without overlap', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 1000e6,
+		});
+		const child = makeSpan({
+			spanId: 'child',
+			parentSpanId: 'root',
+			timestamp: 10,
+			durationNano: 500e6,
+		});
+		const grandchild = makeSpan({
+			spanId: 'grandchild',
+			parentSpanId: 'child',
+			timestamp: 20,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[root], [child], [grandchild]]);
+
+		// No overlap at any level → visual rows == tree depth
+		expect(layout.totalVisualRows).toBe(3);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['child']).toBe(1);
+		expect(layout.spanToVisualRow['grandchild']).toBe(2);
+	});
+
+	it('should pack many sequential siblings into 1 row (no diagonal staircase)', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		// 6 sequential children — like checkoutservice/PlaceOrder scenario
+		const spans = [
+			makeSpan({
+				spanId: 's1',
+				parentSpanId: 'root',
+				timestamp: 3,
+				durationNano: 30e6,
+			}),
+			makeSpan({
+				spanId: 's2',
+				parentSpanId: 'root',
+				timestamp: 35,
+				durationNano: 4e6,
+			}),
+			makeSpan({
+				spanId: 's3',
+				parentSpanId: 'root',
+				timestamp: 39,
+				durationNano: 1e6,
+			}),
+			makeSpan({
+				spanId: 's4',
+				parentSpanId: 'root',
+				timestamp: 40,
+				durationNano: 4e6,
+			}),
+			makeSpan({
+				spanId: 's5',
+				parentSpanId: 'root',
+				timestamp: 44,
+				durationNano: 5e6,
+			}),
+			makeSpan({
+				spanId: 's6',
+				parentSpanId: 'root',
+				timestamp: 49,
+				durationNano: 1e6,
+			}),
+		];
+
+		const layout = computeVisualLayout([[root], spans]);
+
+		// All 6 sequential siblings should share 1 row
+		expect(layout.totalVisualRows).toBe(2);
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		for (const span of spans) {
+			expect(layout.spanToVisualRow[span.spanId]).toBe(1);
+		}
+	});
+
+	it('should keep children below parents even with misparented spans', () => {
+		// Simulates the dd_sig2 bug: /route spans have parentSpanId pointing
+		// to the wrong ancestor, but they are at level 2 in the spans[][] input.
+		// Level-based packing must place them below level 1 regardless.
+		const httpGet = makeSpan({
+			spanId: 'http-get',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		const route = makeSpan({
+			spanId: 'route',
+			parentSpanId: 'some-wrong-ancestor', // misparented!
+			timestamp: 10,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[httpGet], [route]]);
+
+		// httpGet at level 0 → row 0, route at level 1 → row 1
+		expect(layout.spanToVisualRow['http-get']).toBe(0);
+		expect(layout.spanToVisualRow['route']).toBe(1);
+		expect(layout.totalVisualRows).toBe(2);
+	});
+
+	it('should keep parent-child pairs adjacent when sibling subtrees overlap', () => {
+		// Multiple overlapping parents each with a child — the subtree-unit
+		// guarantee means every parent→child gap should be exactly 1.
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		// Three overlapping HTTP GET children of root, each with its own /route child
+		const get1 = makeSpan({
+			spanId: 'get1',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const route1 = makeSpan({
+			spanId: 'route1',
+			parentSpanId: 'get1',
+			timestamp: 10,
+			durationNano: 180e6,
+		});
+		const get2 = makeSpan({
+			spanId: 'get2',
+			parentSpanId: 'root',
+			timestamp: 50,
+			durationNano: 200e6,
+		});
+		const route2 = makeSpan({
+			spanId: 'route2',
+			parentSpanId: 'get2',
+			timestamp: 60,
+			durationNano: 180e6,
+		});
+		const get3 = makeSpan({
+			spanId: 'get3',
+			parentSpanId: 'root',
+			timestamp: 100,
+			durationNano: 200e6,
+		});
+		const route3 = makeSpan({
+			spanId: 'route3',
+			parentSpanId: 'get3',
+			timestamp: 110,
+			durationNano: 180e6,
+		});
+
+		const layout = computeVisualLayout([
+			[root],
+			[get1, get2, get3],
+			[route1, route2, route3],
+		]);
+
+		// Each parent-child pair should have a gap of exactly 1
+		const get1Row = layout.spanToVisualRow['get1'];
+		const route1Row = layout.spanToVisualRow['route1'];
+		const get2Row = layout.spanToVisualRow['get2'];
+		const route2Row = layout.spanToVisualRow['route2'];
+		const get3Row = layout.spanToVisualRow['get3'];
+		const route3Row = layout.spanToVisualRow['route3'];
+
+		expect(route1Row - get1Row).toBe(1);
+		expect(route2Row - get2Row).toBe(1);
+		expect(route3Row - get3Row).toBe(1);
+	});
+
+	it('should handle mixed levels — overlap at level 2 but not level 1', () => {
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 1000e6,
+		});
+		// Non-overlapping children
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 0,
+			durationNano: 400e6,
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 500,
+			durationNano: 400e6,
+		});
+		// Overlapping grandchildren under A
+		const ga1 = makeSpan({
+			spanId: 'ga1',
+			parentSpanId: 'a',
+			timestamp: 0,
+			durationNano: 200e6,
+		});
+		const ga2 = makeSpan({
+			spanId: 'ga2',
+			parentSpanId: 'a',
+			timestamp: 100,
+			durationNano: 200e6,
+		});
+
+		const layout = computeVisualLayout([[root], [a, b], [ga1, ga2]]);
+
+		// root → row 0
+		// a, b → row 1 (no overlap, share row)
+		// ga1 → row 2, ga2 → row 3 (overlap, expanded)
+		// b has no children, so nothing after ga2
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['a']).toBe(1);
+		expect(layout.spanToVisualRow['b']).toBe(1);
+		expect(layout.spanToVisualRow['ga2']).toBe(2);
+		expect(layout.spanToVisualRow['ga1']).toBe(3);
+		expect(layout.totalVisualRows).toBe(4);
+	});
+
+	it('should not place a span where it covers an existing connector point (Check 2)', () => {
+		// Scenario: root has 3 leaf children. Sorted latest-first: C(200), B(100), A(80).
+		//
+		// C placed at row 1 [200, 400].
+		// B overlaps C → placed at row 2 [100, 300]. Connector from row 0→2 at x=100
+		//   passes through row 1, recording connector point at (row 1, x=100).
+		// A [80, 110] does NOT overlap C's span [200, 400] at row 1 (110 < 200),
+		//   so without connector reservation A would fit at row 1.
+		//   But A's span [80, 110) contains the connector point x=100 at row 1.
+		//   Check 2 prevents this placement, pushing A further down.
+		const root = makeSpan({
+			spanId: 'root',
+			timestamp: 0,
+			durationNano: 500e6,
+		});
+		const c = makeSpan({
+			spanId: 'c',
+			parentSpanId: 'root',
+			timestamp: 200,
+			durationNano: 200e6, // [200, 400]
+		});
+		const b = makeSpan({
+			spanId: 'b',
+			parentSpanId: 'root',
+			timestamp: 100,
+			durationNano: 200e6, // [100, 300]
+		});
+		const a = makeSpan({
+			spanId: 'a',
+			parentSpanId: 'root',
+			timestamp: 80,
+			durationNano: 30e6, // [80, 110]
+		});
+
+		const layout = computeVisualLayout([[root], [a, b, c]]);
+
+		expect(layout.spanToVisualRow['root']).toBe(0);
+		expect(layout.spanToVisualRow['c']).toBe(1); // latest, placed first
+		expect(layout.spanToVisualRow['b']).toBe(2); // overlaps C → row 2
+
+		// A would fit at row 1 by span overlap alone, but connector point at
+		// (row 1, x=100) falls within A's span [80, 110). Check 2 pushes A down.
+		const aRow = layout.spanToVisualRow['a']!;
+		expect(aRow).toBeGreaterThan(1); // must NOT be at row 1
+		expect(aRow).toBe(3); // next free row after B at row 2 (A overlaps B)
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/drawUtils.test.ts

@@ -0,0 +1,536 @@
+import { DASHED_BORDER_LINE_DASH, MIN_WIDTH_FOR_NAME } from '../constants';
+import type { FlamegraphRowMetrics } from '../utils';
+import { getFlamegraphRowMetrics } from '../utils';
+import { drawEventDot, drawSpanBar, getEventDotColor } from '../utils';
+import { MOCK_SPAN } from './testUtils';
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (): { time: number; timeUnitName: string } => ({
+		time: 50,
+		timeUnitName: 'ms',
+	}),
+}));
+
+/** Minimal 2D context for createStripePattern's internal canvas (jsdom getContext often returns null) */
+const mockPatternCanvasCtx = {
+	beginPath: jest.fn(),
+	moveTo: jest.fn(),
+	lineTo: jest.fn(),
+	stroke: jest.fn(),
+	globalAlpha: 1,
+};
+
+const originalCreateElement = document.createElement.bind(document);
+document.createElement = function (
+	tagName: string,
+): ReturnType<typeof originalCreateElement> {
+	const el = originalCreateElement(tagName);
+	if (tagName.toLowerCase() === 'canvas') {
+		(el as HTMLCanvasElement).getContext = (() =>
+			mockPatternCanvasCtx as unknown) as HTMLCanvasElement['getContext'];
+	}
+	return el;
+};
+
+function createMockCtx(): jest.Mocked<CanvasRenderingContext2D> {
+	return ({
+		beginPath: jest.fn(),
+		roundRect: jest.fn(),
+		fill: jest.fn(),
+		stroke: jest.fn(),
+		save: jest.fn(),
+		restore: jest.fn(),
+		translate: jest.fn(),
+		rotate: jest.fn(),
+		fillRect: jest.fn(),
+		strokeRect: jest.fn(),
+		setLineDash: jest.fn(),
+		measureText: jest.fn(
+			(text: string) => ({ width: text.length * 6 } as TextMetrics),
+		),
+		createPattern: jest.fn(() => ({} as CanvasPattern)),
+		clip: jest.fn(),
+		rect: jest.fn(),
+		fillText: jest.fn(),
+		font: '',
+		fillStyle: '',
+		strokeStyle: '',
+		textAlign: '',
+		textBaseline: '',
+		lineWidth: 0,
+		globalAlpha: 1,
+	} as unknown) as jest.Mocked<CanvasRenderingContext2D>;
+}
+
+const METRICS: FlamegraphRowMetrics = getFlamegraphRowMetrics(24);
+
+describe('Canvas Draw Utils', () => {
+	describe('drawSpanBar', () => {
+		it('draws rect + fill for normal span (no selected/hovered)', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, event: [] },
+				x: 10,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray,
+				eventRectsArray: [],
+				color: '#1890ff',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.beginPath).toHaveBeenCalled();
+			expect(ctx.roundRect).toHaveBeenCalledWith(10, 1, 100, 22, 2);
+			expect(ctx.fill).toHaveBeenCalled();
+			expect(ctx.stroke).not.toHaveBeenCalled();
+			expect(spanRectsArray).toHaveLength(1);
+			expect(spanRectsArray[0]).toMatchObject({
+				x: 10,
+				y: 1,
+				width: 100,
+				height: 22,
+				level: 0,
+			});
+		});
+
+		it('uses stripe pattern + dashed stroke + 2px when selected', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'sel', event: [] },
+				x: 20,
+				y: 0,
+				width: 80,
+				levelIndex: 1,
+				spanRectsArray,
+				eventRectsArray: [],
+				color: '#2F80ED',
+				isDarkMode: false,
+				metrics: METRICS,
+				selectedSpanId: 'sel',
+			});
+
+			// Selected spans get solid l2-background fill + dashed border
+			expect(ctx.fill).toHaveBeenCalled();
+			expect(ctx.setLineDash).toHaveBeenCalledWith(DASHED_BORDER_LINE_DASH);
+			expect(ctx.strokeStyle).toBe('#2F80ED');
+			expect(ctx.lineWidth).toBe(2);
+			expect(ctx.stroke).toHaveBeenCalled();
+			expect(ctx.setLineDash).toHaveBeenLastCalledWith([]);
+		});
+
+		it('uses solid l2-background fill + solid stroke + 1px when hovered (not selected)', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'hov', event: [] },
+				x: 30,
+				y: 0,
+				width: 60,
+				levelIndex: 0,
+				spanRectsArray,
+				eventRectsArray: [],
+				color: '#2F80ED',
+				isDarkMode: false,
+				metrics: METRICS,
+				hoveredSpanId: 'hov',
+			});
+
+			expect(ctx.fill).toHaveBeenCalled();
+			expect(ctx.setLineDash).not.toHaveBeenCalled();
+			expect(ctx.lineWidth).toBe(1);
+			expect(ctx.stroke).toHaveBeenCalled();
+		});
+
+		it('pushes spanRectsArray with correct dimensions', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'rect-test', event: [] },
+				x: 5,
+				y: 24,
+				width: 200,
+				levelIndex: 2,
+				spanRectsArray,
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(spanRectsArray[0]).toMatchObject({
+				x: 5,
+				y: 25,
+				width: 200,
+				height: 22,
+				level: 2,
+			});
+			expect(spanRectsArray[0].span.spanId).toBe('rect-test');
+		});
+	});
+
+	describe('drawSpanLabel (via drawSpanBar)', () => {
+		it('skips label when width < MIN_WIDTH_FOR_NAME', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'long-span-name', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray,
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.clip).not.toHaveBeenCalled();
+			expect(ctx.fillText).not.toHaveBeenCalled();
+		});
+
+		it('draws name only when width >= MIN_WIDTH_FOR_NAME but < MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 6 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'foo', event: [] },
+				x: 0,
+				y: 0,
+				width: 50,
+				levelIndex: 0,
+				spanRectsArray: [],
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.clip).toHaveBeenCalled();
+			expect(ctx.fillText).toHaveBeenCalled();
+			expect(ctx.textAlign).toBe('left');
+		});
+
+		it('draws name + duration when width >= MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 6 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'my-span', event: [] },
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.fillText).toHaveBeenCalledTimes(2);
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'50ms',
+				expect.any(Number),
+				expect.any(Number),
+			);
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'my-span',
+				expect.any(Number),
+				expect.any(Number),
+			);
+		});
+	});
+
+	describe('truncateText (via drawSpanBar)', () => {
+		it('uses full text when it fits', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 4 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'short', event: [] },
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'short',
+				expect.any(Number),
+				expect.any(Number),
+			);
+		});
+
+		it('truncates text when it exceeds available width', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) =>
+					({
+						width: t.includes('...') ? 24 : t.length * 10,
+					} as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'very-long-span-name', event: [] },
+				x: 0,
+				y: 0,
+				width: 50,
+				levelIndex: 0,
+				spanRectsArray: [],
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			const fillTextCalls = (ctx.fillText as jest.Mock).mock.calls;
+			const nameArg = fillTextCalls.find((c) => c[0] !== '50ms')?.[0];
+			expect(nameArg).toBeDefined();
+			expect(nameArg).toMatch(/\.\.\.$/);
+		});
+	});
+
+	describe('drawEventDot', () => {
+		it('uses error styling when isError is true', () => {
+			const ctx = createMockCtx();
+			const color = getEventDotColor('#000', true, false);
+
+			drawEventDot({
+				ctx,
+				x: 50,
+				y: 11,
+				color,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.save).toHaveBeenCalled();
+			expect(ctx.translate).toHaveBeenCalledWith(50, 11);
+			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
+			expect(ctx.fillStyle).toBe('rgb(220, 38, 38)');
+			expect(ctx.strokeStyle).toBe('rgb(153, 27, 27)');
+			expect(ctx.fillRect).toHaveBeenCalledWith(-3, -3, 6, 6);
+			expect(ctx.strokeRect).toHaveBeenCalledWith(-3, -3, 6, 6);
+			expect(ctx.restore).toHaveBeenCalled();
+		});
+
+		it('derives color from span color when isError is false', () => {
+			const ctx = createMockCtx();
+			const color = getEventDotColor('rgb(100, 200, 150)', false, false);
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				color,
+				eventDotSize: 6,
+			});
+
+			// Darkened by 20% for fill
+			expect(ctx.fillStyle).toBe('rgb(80, 160, 120)');
+			// Darkened by 40% for stroke
+			expect(ctx.strokeStyle).toBe('rgb(60, 120, 90)');
+		});
+
+		it('uses dark mode colors for error', () => {
+			const ctx = createMockCtx();
+			const color = getEventDotColor('#000', true, true);
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				color,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
+			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
+		});
+
+		it('falls back to cyan/blue for unparseable span colors', () => {
+			const ctx = createMockCtx();
+			const color = getEventDotColor('hsl(200, 50%, 50%)', false, false);
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				color,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(6, 182, 212)');
+			expect(ctx.strokeStyle).toBe('rgb(8, 145, 178)');
+		});
+
+		it('calls save, translate, rotate, restore', () => {
+			const ctx = createMockCtx();
+			const color = getEventDotColor('#000', false, false);
+
+			drawEventDot({
+				ctx,
+				x: 10,
+				y: 20,
+				color,
+				eventDotSize: 4,
+			});
+
+			expect(ctx.save).toHaveBeenCalled();
+			expect(ctx.translate).toHaveBeenCalledWith(10, 20);
+			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
+			expect(ctx.restore).toHaveBeenCalled();
+		});
+	});
+
+	describe('solid l2-background fill for selected/hovered spans', () => {
+		it('uses solid fill for hovered span', () => {
+			const ctx = createMockCtx();
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray: [],
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+				hoveredSpanId: 'p',
+			});
+
+			expect(ctx.fill).toHaveBeenCalled();
+			expect(ctx.stroke).toHaveBeenCalled();
+		});
+
+		it('uses solid fill + dashed border for selected span', () => {
+			const ctx = createMockCtx();
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray: [],
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+				selectedSpanId: 'p',
+			});
+
+			expect(ctx.fill).toHaveBeenCalled();
+			expect(ctx.stroke).toHaveBeenCalled();
+		});
+	});
+
+	describe('drawSpanBar with events', () => {
+		it('draws event dots for each span event', () => {
+			const ctx = createMockCtx();
+			const spanWithEvents = {
+				...MOCK_SPAN,
+				event: [
+					{
+						name: 'e1',
+						timeUnixNano: 1_010_000_000,
+						attributeMap: {},
+						isError: false,
+					},
+					{
+						name: 'e2',
+						timeUnixNano: 1_025_000_000,
+						attributeMap: {},
+						isError: true,
+					},
+				],
+			};
+
+			drawSpanBar({
+				ctx,
+				span: spanWithEvents,
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				eventRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.save).toHaveBeenCalledTimes(3);
+			expect(ctx.translate).toHaveBeenCalledTimes(2);
+			expect(ctx.fillRect).toHaveBeenCalledTimes(2);
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -0,0 +1,54 @@
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+/** Minimal FlamegraphSpan for unit tests */
+export const MOCK_SPAN: FlamegraphSpan = {
+	timestamp: 1000,
+	durationNano: 50_000_000, // 50ms
+	spanId: 'span-1',
+	parentSpanId: '',
+	traceId: 'trace-1',
+	hasError: false,
+	serviceName: 'test-service',
+	name: 'test-span',
+	level: 0,
+	event: [],
+};
+
+/** Nested spans structure for findSpanById tests */
+export const MOCK_SPANS: FlamegraphSpan[][] = [
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'root',
+			parentSpanId: '',
+			level: 0,
+		},
+	],
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'child-a',
+			parentSpanId: 'root',
+			level: 1,
+		},
+		{
+			...MOCK_SPAN,
+			spanId: 'child-b',
+			parentSpanId: 'root',
+			level: 1,
+		},
+	],
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'grandchild',
+			parentSpanId: 'child-a',
+			level: 2,
+		},
+	],
+];
+
+export const MOCK_TRACE_METADATA = {
+	startTime: 0,
+	endTime: 1000,
+};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphDrag.test.ts

@@ -0,0 +1,144 @@
+import React from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useFlamegraphDrag } from '../hooks/useFlamegraphDrag';
+import { MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+function createMockContainer(): HTMLDivElement {
+	const div = document.createElement('div');
+	Object.defineProperty(div, 'clientHeight', { value: 400 });
+	return div;
+}
+
+const defaultArgs = {
+	canvasRef: { current: createMockCanvas() },
+	containerRef: { current: createMockContainer() },
+	traceMetadata: MOCK_TRACE_METADATA,
+	viewStartRef: { current: 0 },
+	viewEndRef: { current: 1000 },
+	setViewStartTs: jest.fn(),
+	setViewEndTs: jest.fn(),
+	scrollTopRef: { current: 0 },
+	setScrollTop: jest.fn(),
+	totalHeight: 1000,
+};
+
+describe('useFlamegraphDrag', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		defaultArgs.viewStartRef.current = 0;
+		defaultArgs.viewEndRef.current = 1000;
+		defaultArgs.scrollTopRef.current = 0;
+	});
+
+	it('starts drag state on mousedown', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(true);
+	});
+
+	it('ignores non-left button mousedown', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 1,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+
+	it('updates pan/scroll on mousemove', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseMove(({
+				clientX: 150,
+				clientY: 100,
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(defaultArgs.setViewStartTs).toHaveBeenCalled();
+		expect(defaultArgs.setViewEndTs).toHaveBeenCalled();
+		expect(defaultArgs.setScrollTop).toHaveBeenCalled();
+	});
+
+	it('resets drag state on mouseup', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+
+	it('cancels drag on mouseleave', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleDragMouseLeave();
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphHover.test.ts

@@ -0,0 +1,179 @@
+import type React from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useFlamegraphHover } from '../hooks/useFlamegraphHover';
+import type { SpanRect } from '../types';
+import { MOCK_SPAN, MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.width = 800;
+	canvas.height = 400;
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+const spanRect: SpanRect = {
+	span: { ...MOCK_SPAN, spanId: 'hover-span', name: 'test-span' },
+	x: 100,
+	y: 50,
+	width: 200,
+	height: 22,
+	level: 0,
+};
+
+const defaultArgs = {
+	canvasRef: { current: createMockCanvas() },
+	spanRectsRef: { current: [spanRect] },
+	eventRectsRef: { current: [] as any[] },
+	traceMetadata: MOCK_TRACE_METADATA,
+	viewStartTs: MOCK_TRACE_METADATA.startTime,
+	viewEndTs: MOCK_TRACE_METADATA.endTime,
+	isDraggingRef: { current: false },
+	onSpanClick: jest.fn(),
+	isDarkMode: false,
+};
+
+describe('useFlamegraphHover', () => {
+	beforeEach(() => {
+		Object.defineProperty(window, 'devicePixelRatio', {
+			configurable: true,
+			value: 1,
+		});
+		jest.clearAllMocks();
+		defaultArgs.spanRectsRef.current = [spanRect];
+		defaultArgs.isDraggingRef.current = false;
+	});
+
+	it('sets hoveredSpanId and tooltipContent when hovering on span', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBe('hover-span');
+		expect(result.current.tooltipContent).not.toBeNull();
+		expect(result.current.tooltipContent?.spanName).toBe('test-span');
+		expect(result.current.tooltipContent?.clientX).toBe(150);
+		expect(result.current.tooltipContent?.clientY).toBe(61);
+	});
+
+	it('clears hover when moving to empty area', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBe('hover-span');
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 10,
+				clientY: 10,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+		expect(result.current.tooltipContent).toBeNull();
+	});
+
+	it('clears hover on mouse leave', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleHoverMouseLeave();
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+		expect(result.current.tooltipContent).toBeNull();
+	});
+
+	it('suppresses click when drag distance exceeds threshold', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDownForClick({
+				clientX: 100,
+				clientY: 50,
+			} as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleClick({
+				clientX: 150,
+				clientY: 100,
+			} as React.MouseEvent);
+		});
+
+		expect(defaultArgs.onSpanClick).not.toHaveBeenCalled();
+	});
+
+	it('calls onSpanClick when clicking on span', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleClick({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(defaultArgs.onSpanClick).toHaveBeenCalledWith('hover-span');
+	});
+
+	it('uses clientX/clientY for tooltip positioning', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 200,
+				clientY: 60,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.tooltipContent?.clientX).toBe(200);
+		expect(result.current.tooltipContent?.clientY).toBe(60);
+	});
+
+	it('does not update hover during drag', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+		defaultArgs.isDraggingRef.current = true;
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphZoom.test.ts

@@ -0,0 +1,279 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { DEFAULT_ROW_HEIGHT, MIN_VISIBLE_SPAN_MS } from '../constants';
+import { useFlamegraphZoom } from '../hooks/useFlamegraphZoom';
+import { MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.width = 800;
+	canvas.height = 400;
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+describe('useFlamegraphZoom', () => {
+	const traceMetadata = { ...MOCK_TRACE_METADATA };
+
+	beforeEach(() => {
+		Object.defineProperty(window, 'devicePixelRatio', {
+			configurable: true,
+			value: 1,
+		});
+	});
+
+	it('handleResetZoom restores traceMetadata.startTime/endTime', () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: 100 };
+		const viewEndRef = { current: 500 };
+		const rowHeightRef = { current: 30 };
+		const canvasRef = { current: createMockCanvas() };
+
+		const { result } = renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		act(() => {
+			result.current.handleResetZoom();
+		});
+
+		expect(setViewStartTs).toHaveBeenCalledWith(traceMetadata.startTime);
+		expect(setViewEndTs).toHaveBeenCalledWith(traceMetadata.endTime);
+		expect(setRowHeight).toHaveBeenCalledWith(DEFAULT_ROW_HEIGHT);
+		expect(viewStartRef.current).toBe(traceMetadata.startTime);
+		expect(viewEndRef.current).toBe(traceMetadata.endTime);
+		expect(rowHeightRef.current).toBe(DEFAULT_ROW_HEIGHT);
+	});
+
+	it('wheel zoom in decreases visible time range', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.endTime };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		const initialSpan = viewEndRef.current - viewStartRef.current;
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: -100,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		expect(setViewStartTs).toHaveBeenCalled();
+		expect(setViewEndTs).toHaveBeenCalled();
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeLessThan(initialSpan);
+		}
+	});
+
+	it('wheel zoom out increases visible time range', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const halfSpan = (traceMetadata.endTime - traceMetadata.startTime) / 2;
+		const viewStartRef = { current: traceMetadata.startTime + halfSpan * 0.25 };
+		const viewEndRef = { current: traceMetadata.startTime + halfSpan * 0.75 };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		const initialSpan = viewEndRef.current - viewStartRef.current;
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: 100,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		expect(setViewStartTs).toHaveBeenCalled();
+		expect(setViewEndTs).toHaveBeenCalled();
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeGreaterThanOrEqual(initialSpan);
+		}
+	});
+
+	it('clamps zoom to MIN_VISIBLE_SPAN_MS', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.startTime + 100 };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: 10000,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeGreaterThanOrEqual(MIN_VISIBLE_SPAN_MS);
+		}
+	});
+
+	it('clamps viewStart/viewEnd to trace bounds', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.endTime };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: -5000,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			expect(newStart).toBeGreaterThanOrEqual(traceMetadata.startTime);
+			expect(newEnd).toBeLessThanOrEqual(traceMetadata.endTime);
+		}
+	});
+
+	it('returns isOverFlamegraphRef', () => {
+		const canvasRef = { current: createMockCanvas() };
+		const { result } = renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef: { current: 0 },
+				viewEndRef: { current: 1000 },
+				rowHeightRef: { current: 24 },
+				setViewStartTs: jest.fn(),
+				setViewEndTs: jest.fn(),
+				setRowHeight: jest.fn(),
+			}),
+		);
+
+		expect(result.current.isOverFlamegraphRef).toBeDefined();
+		expect(result.current.isOverFlamegraphRef.current).toBe(false);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useScrollToSpan.test.tsx

@@ -0,0 +1,212 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useRef } from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+
+import { useScrollToSpan } from '../hooks/useScrollToSpan';
+import { MOCK_SPANS, MOCK_TRACE_METADATA } from './testUtils';
+
+function TestWrapper({
+	firstSpanAtFetchLevel,
+	spans,
+	traceMetadata,
+	setViewStartTs,
+	setViewEndTs,
+	setScrollTop,
+}: {
+	firstSpanAtFetchLevel: string;
+	spans: typeof MOCK_SPANS;
+	traceMetadata: typeof MOCK_TRACE_METADATA;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+}): JSX.Element {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const viewStartRef = useRef(traceMetadata.startTime);
+	const viewEndRef = useRef(traceMetadata.endTime);
+	const scrollTopRef = useRef(0);
+
+	useScrollToSpan({
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight: 24,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	});
+
+	return <div ref={containerRef} data-testid="container" />;
+}
+
+describe('useScrollToSpan', () => {
+	beforeEach(() => {
+		Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+			configurable: true,
+			value: 400,
+		});
+	});
+
+	it('does not update when firstSpanAtFetchLevel is empty', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel=""
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('does not update when spans are empty', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel="root"
+				spans={[]}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('does not update when target span not found', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel="nonexistent"
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('calls setters when target span found', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		const { getByTestId } = render(
+			<TestWrapper
+				firstSpanAtFetchLevel="grandchild"
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		expect(getByTestId('container')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(setViewStartTs).toHaveBeenCalled();
+			expect(setViewEndTs).toHaveBeenCalled();
+			expect(setScrollTop).toHaveBeenCalled();
+		});
+
+		const [viewStart] = setViewStartTs.mock.calls[0];
+		const [viewEnd] = setViewEndTs.mock.calls[0];
+		const [scrollTop] = setScrollTop.mock.calls[0];
+
+		expect(viewEnd - viewStart).toBeGreaterThan(0);
+		expect(viewStart).toBeGreaterThanOrEqual(MOCK_TRACE_METADATA.startTime);
+		expect(viewEnd).toBeLessThanOrEqual(MOCK_TRACE_METADATA.endTime);
+		expect(scrollTop).toBeGreaterThanOrEqual(0);
+	});
+
+	it('centers span vertically (scrollTop centers span row)', async () => {
+		const setScrollTop = jest.fn();
+
+		await act(async () => {
+			render(
+				<TestWrapper
+					firstSpanAtFetchLevel="grandchild"
+					spans={MOCK_SPANS}
+					traceMetadata={MOCK_TRACE_METADATA}
+					setViewStartTs={jest.fn()}
+					setViewEndTs={jest.fn()}
+					setScrollTop={setScrollTop}
+				/>,
+			);
+		});
+
+		await waitFor(() => expect(setScrollTop).toHaveBeenCalled());
+
+		const [scrollTop] = setScrollTop.mock.calls[0];
+		const levelIndex = 2;
+		const rowHeight = 24;
+		const viewportHeight = 400;
+		const expectedCenter =
+			levelIndex * rowHeight - viewportHeight / 2 + rowHeight / 2;
+		expect(scrollTop).toBeCloseTo(Math.max(0, expectedCenter), -1);
+	});
+
+	it('zooms horizontally to span with 2x duration padding', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+
+		await act(async () => {
+			render(
+				<TestWrapper
+					firstSpanAtFetchLevel="root"
+					spans={MOCK_SPANS}
+					traceMetadata={MOCK_TRACE_METADATA}
+					setViewStartTs={setViewStartTs}
+					setViewEndTs={setViewEndTs}
+					setScrollTop={jest.fn()}
+				/>,
+			);
+		});
+
+		await waitFor(() => {
+			expect(setViewStartTs).toHaveBeenCalled();
+			expect(setViewEndTs).toHaveBeenCalled();
+		});
+
+		const [viewStart] = setViewStartTs.mock.calls[0];
+		const [viewEnd] = setViewEndTs.mock.calls[0];
+		const visibleWindow = viewEnd - viewStart;
+		const rootSpan = MOCK_SPANS[0][0];
+		const spanDurationMs = rootSpan.durationNano / 1e6;
+		expect(visibleWindow).toBeGreaterThanOrEqual(Math.max(spanDurationMs * 2, 5));
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.math.test.ts

@@ -0,0 +1,135 @@
+import {
+	clamp,
+	findSpanById,
+	formatDuration,
+	getFlamegraphRowMetrics,
+} from '../utils';
+import { MOCK_SPANS } from './testUtils';
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (
+		valueMs: number,
+	): { time: number; timeUnitName: string } => {
+		if (valueMs === 0) {
+			return { time: 0, timeUnitName: 'ms' };
+		}
+		if (valueMs < 1) {
+			return { time: valueMs, timeUnitName: 'ms' };
+		}
+		if (valueMs < 1000) {
+			return { time: valueMs, timeUnitName: 'ms' };
+		}
+		if (valueMs < 60_000) {
+			return { time: valueMs / 1000, timeUnitName: 's' };
+		}
+		if (valueMs < 3_600_000) {
+			return { time: valueMs / 60_000, timeUnitName: 'm' };
+		}
+		return { time: valueMs / 3_600_000, timeUnitName: 'hr' };
+	},
+}));
+
+describe('Pure Math and Data Utils', () => {
+	describe('clamp', () => {
+		it('returns value when within range', () => {
+			expect(clamp(5, 0, 10)).toBe(5);
+			expect(clamp(-3, -5, 5)).toBe(-3);
+		});
+
+		it('returns min when value is below min', () => {
+			expect(clamp(-1, 0, 10)).toBe(0);
+			expect(clamp(2, 5, 10)).toBe(5);
+		});
+
+		it('returns max when value is above max', () => {
+			expect(clamp(11, 0, 10)).toBe(10);
+			expect(clamp(100, 0, 50)).toBe(50);
+		});
+
+		it('handles min === max', () => {
+			expect(clamp(5, 7, 7)).toBe(7);
+			expect(clamp(7, 7, 7)).toBe(7);
+		});
+	});
+
+	describe('findSpanById', () => {
+		it('finds span in first level', () => {
+			const result = findSpanById(MOCK_SPANS, 'root');
+			expect(result).not.toBeNull();
+			expect(result?.span.spanId).toBe('root');
+			expect(result?.levelIndex).toBe(0);
+		});
+
+		it('finds span in nested level', () => {
+			const result = findSpanById(MOCK_SPANS, 'grandchild');
+			expect(result).not.toBeNull();
+			expect(result?.span.spanId).toBe('grandchild');
+			expect(result?.levelIndex).toBe(2);
+		});
+
+		it('returns null when span not found', () => {
+			expect(findSpanById(MOCK_SPANS, 'nonexistent')).toBeNull();
+		});
+
+		it('handles empty spans', () => {
+			expect(findSpanById([], 'root')).toBeNull();
+			expect(findSpanById([[], []], 'root')).toBeNull();
+		});
+	});
+
+	describe('getFlamegraphRowMetrics', () => {
+		it('computes normal row height metrics (24px)', () => {
+			const m = getFlamegraphRowMetrics(24);
+			expect(m.ROW_HEIGHT).toBe(24);
+			expect(m.SPAN_BAR_HEIGHT).toBe(22);
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(1);
+			expect(m.EVENT_DOT_SIZE).toBe(6);
+		});
+
+		it('clamps span bar height to max for large row heights', () => {
+			const m = getFlamegraphRowMetrics(100);
+			expect(m.SPAN_BAR_HEIGHT).toBe(22);
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(39);
+		});
+
+		it('clamps span bar height to min for small row heights', () => {
+			const m = getFlamegraphRowMetrics(6);
+			expect(m.SPAN_BAR_HEIGHT).toBe(8);
+			// spanBarYOffset = floor((6-8)/2) = -1 when bar exceeds row height
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(-1);
+		});
+
+		it('clamps event dot size within min/max', () => {
+			const mSmall = getFlamegraphRowMetrics(6);
+			expect(mSmall.EVENT_DOT_SIZE).toBe(4);
+
+			const mLarge = getFlamegraphRowMetrics(24);
+			expect(mLarge.EVENT_DOT_SIZE).toBe(6);
+		});
+	});
+
+	describe('formatDuration', () => {
+		it('formats nanos as ms', () => {
+			// 1e6 nanos = 1ms
+			expect(formatDuration(1_000_000)).toBe('1ms');
+		});
+
+		it('formats larger durations as s/m/hr', () => {
+			// 2e9 nanos = 2000ms = 2s
+			expect(formatDuration(2_000_000_000)).toBe('2s');
+		});
+
+		it('formats zero duration', () => {
+			expect(formatDuration(0)).toBe('0ms');
+		});
+
+		it('formats very small values', () => {
+			// 1000 nanos = 0.001ms → mock returns { time: 0.001, timeUnitName: 'ms' }
+			expect(formatDuration(1000)).toBe('0ms');
+		});
+
+		it('formats decimal seconds correctly', () => {
+			expect(formatDuration(1_500_000_000)).toBe('1.5s');
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -0,0 +1,67 @@
+import { getSpanColor } from '../utils';
+import { MOCK_SPAN } from './testUtils';
+
+const mockGenerateColor = jest.fn();
+
+jest.mock('lib/uPlotLib/utils/generateColor', () => ({
+	generateColor: (key: string, colorMap: Record<string, string>): string =>
+		mockGenerateColor(key, colorMap),
+}));
+
+describe('Presentation / Styling Utils', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGenerateColor.mockReturnValue('#2F80ED');
+	});
+
+	describe('getSpanColor', () => {
+		it('uses generated service color for normal span', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: false },
+				isDarkMode: false,
+			});
+
+			expect(mockGenerateColor).toHaveBeenCalledWith(
+				MOCK_SPAN.serviceName,
+				expect.any(Object),
+			);
+			expect(color).toBe('#1890ff');
+		});
+
+		it('overrides with error color in light mode when span has error', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: true },
+				isDarkMode: false,
+			});
+
+			expect(color).toBe('rgb(220, 38, 38)');
+		});
+
+		it('overrides with error color in dark mode when span has error', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: true },
+				isDarkMode: true,
+			});
+
+			expect(color).toBe('rgb(239, 68, 68)');
+		});
+
+		it('passes serviceName to generateColor', () => {
+			getSpanColor({
+				span: { ...MOCK_SPAN, serviceName: 'my-service' },
+				isDarkMode: false,
+			});
+
+			expect(mockGenerateColor).toHaveBeenCalledWith(
+				'my-service',
+				expect.any(Object),
+			);
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -0,0 +1,370 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+export interface ConnectorLine {
+	parentRow: number;
+	childRow: number;
+	timestampMs: number;
+	serviceName: string;
+}
+
+export interface VisualLayout {
+	visualRows: FlamegraphSpan[][];
+	spanToVisualRow: Record<string, number>;
+	connectors: ConnectorLine[];
+	totalVisualRows: number;
+}
+
+/**
+ * Computes an overlap-safe visual layout for flamegraph spans using DFS ordering.
+ *
+ * Builds a parent→children tree from parentSpanId, then traverses in DFS pre-order.
+ * Each span is placed at parentRow+1 if free, otherwise scans upward row-by-row
+ * until finding a non-overlapping row. This keeps children visually close to their
+ * parents and avoids the BFS problem where distant siblings push children far down.
+ */
+export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
+	const spanToVisualRow = new Map<string, number>();
+	const visualRowsMap = new Map<number, FlamegraphSpan[]>();
+	let maxRow = -1;
+
+	// Per-row interval list for overlap detection
+	// Each entry: [startTime, endTime]
+	const rowIntervals = new Map<number, Array<[number, number]>>();
+
+	// function hasOverlap(row: number, startTime: number, endTime: number): boolean {
+	// 	const intervals = rowIntervals.get(row);
+	// 	if (!intervals) {
+	// 		return false;
+	// 	}
+	// 	for (const [s, e] of intervals) {
+	// 		if (startTime < e && endTime > s) {
+	// 			return true;
+	// 		}
+	// 	}
+	// 	return false;
+	// }
+
+	function addToRow(row: number, span: FlamegraphSpan): void {
+		spanToVisualRow.set(span.spanId, row);
+		let arr = visualRowsMap.get(row);
+		if (!arr) {
+			arr = [];
+			visualRowsMap.set(row, arr);
+		}
+		arr.push(span);
+
+		const startTime = span.timestamp;
+		const endTime = span.timestamp + span.durationNano / 1e6;
+		let intervals = rowIntervals.get(row);
+		if (!intervals) {
+			intervals = [];
+			rowIntervals.set(row, intervals);
+		}
+		intervals.push([startTime, endTime]);
+
+		if (row > maxRow) {
+			maxRow = row;
+		}
+	}
+
+	// Flatten all spans and build lookup + children map
+	const spanMap = new Map<string, FlamegraphSpan>();
+	const childrenMap = new Map<string, FlamegraphSpan[]>();
+	const allSpans: FlamegraphSpan[] = [];
+
+	for (const level of spans) {
+		for (const span of level) {
+			allSpans.push(span);
+			spanMap.set(span.spanId, span);
+		}
+	}
+
+	// Extract parentSpanId — the field may be missing at runtime when the API
+	// returns `references` instead.  Fall back to the first CHILD_OF reference.
+	function getParentId(span: FlamegraphSpan): string {
+		if (span.parentSpanId) {
+			return span.parentSpanId;
+		}
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const refs = (span as any).references as
+			| Array<{ spanId?: string; refType?: string }>
+			| undefined;
+		if (refs) {
+			for (const ref of refs) {
+				if (ref.refType === 'CHILD_OF' && ref.spanId) {
+					return ref.spanId;
+				}
+			}
+		}
+		return '';
+	}
+
+	// Build children map and identify roots
+	const roots: FlamegraphSpan[] = [];
+
+	for (const span of allSpans) {
+		const parentId = getParentId(span);
+		if (!parentId || !spanMap.has(parentId)) {
+			roots.push(span);
+		} else {
+			let children = childrenMap.get(parentId);
+			if (!children) {
+				children = [];
+				childrenMap.set(parentId, children);
+			}
+			children.push(span);
+		}
+	}
+
+	// Sort children by timestamp for deterministic ordering
+	for (const [, children] of childrenMap) {
+		children.sort((a, b) => b.timestamp - a.timestamp);
+	}
+
+	// --- Subtree-unit placement ---
+	// Compute each subtree's layout in isolation, then place as a unit
+	// to guarantee parent-child adjacency within subtrees.
+
+	interface ShapeEntry {
+		span: FlamegraphSpan;
+		relativeRow: number;
+	}
+
+	function hasOverlapIn(
+		intervals: Map<number, Array<[number, number]>>,
+		row: number,
+		startTime: number,
+		endTime: number,
+	): boolean {
+		const rowIntervals = intervals.get(row);
+		if (!rowIntervals) {
+			return false;
+		}
+		for (const [s, e] of rowIntervals) {
+			if (startTime < e && endTime > s) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	function addIntervalTo(
+		intervals: Map<number, Array<[number, number]>>,
+		row: number,
+		startTime: number,
+		endTime: number,
+	): void {
+		let arr = intervals.get(row);
+		if (!arr) {
+			arr = [];
+			intervals.set(row, arr);
+		}
+		arr.push([startTime, endTime]);
+	}
+
+	function hasConnectorConflict(
+		intervals: Map<number, Array<[number, number]>>,
+		row: number,
+		point: number,
+	): boolean {
+		const rowIntervals = intervals.get(row);
+		if (!rowIntervals) {
+			return false;
+		}
+		for (const [s, e] of rowIntervals) {
+			if (point >= s && point < e) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	function hasPointInSpan(
+		connectorPoints: Map<number, number[]>,
+		row: number,
+		startTime: number,
+		endTime: number,
+	): boolean {
+		const points = connectorPoints.get(row);
+		if (!points) {
+			return false;
+		}
+		for (const p of points) {
+			if (p >= startTime && p < endTime) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	function addConnectorPoint(
+		connectorPoints: Map<number, number[]>,
+		row: number,
+		point: number,
+	): void {
+		let arr = connectorPoints.get(row);
+		if (!arr) {
+			arr = [];
+			connectorPoints.set(row, arr);
+		}
+		arr.push(point);
+	}
+
+	function computeSubtreeShape(rootSpan: FlamegraphSpan): ShapeEntry[] {
+		const localIntervals = new Map<number, Array<[number, number]>>();
+		const localConnectorPoints = new Map<number, number[]>();
+		const shape: ShapeEntry[] = [];
+
+		// Place root span at relative row 0
+		const rootStart = rootSpan.timestamp;
+		const rootEnd = rootSpan.timestamp + rootSpan.durationNano / 1e6;
+		shape.push({ span: rootSpan, relativeRow: 0 });
+		addIntervalTo(localIntervals, 0, rootStart, rootEnd);
+
+		const children = childrenMap.get(rootSpan.spanId);
+		if (children) {
+			for (const child of children) {
+				const childShape = computeSubtreeShape(child);
+				const connectorX = child.timestamp;
+				const offset = findPlacement(
+					childShape,
+					1,
+					localIntervals,
+					localConnectorPoints,
+					connectorX,
+				);
+
+				// Record connector points for intermediate rows (1 to offset-1)
+				for (let r = 1; r < offset; r++) {
+					addConnectorPoint(localConnectorPoints, r, connectorX);
+				}
+
+				// Place child shape into local state at offset
+				for (const entry of childShape) {
+					const actualRow = entry.relativeRow + offset;
+					shape.push({ span: entry.span, relativeRow: actualRow });
+					const s = entry.span.timestamp;
+					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
+					addIntervalTo(localIntervals, actualRow, s, e);
+				}
+			}
+		}
+
+		return shape;
+	}
+
+	function findPlacement(
+		shape: ShapeEntry[],
+		minOffset: number,
+		intervals: Map<number, Array<[number, number]>>,
+		connectorPoints?: Map<number, number[]>,
+		connectorX?: number,
+	): number {
+		// Track the first offset that passes Checks 1 & 2 as a fallback.
+		// Check 3 (connector vs span) is monotonically failing: once it fails
+		// at offset K, all offsets > K also fail (more intermediate rows).
+		// If we can't satisfy Check 3, fall back to the best offset without it.
+		let fallbackOffset = -1;
+
+		for (let offset = minOffset; ; offset++) {
+			let passesSpanChecks = true;
+
+			// Check 1: span vs span (existing)
+			for (const entry of shape) {
+				const targetRow = entry.relativeRow + offset;
+				const s = entry.span.timestamp;
+				const e = entry.span.timestamp + entry.span.durationNano / 1e6;
+				if (hasOverlapIn(intervals, targetRow, s, e)) {
+					passesSpanChecks = false;
+					break;
+				}
+			}
+
+			// Check 2: span vs existing connector points
+			if (passesSpanChecks && connectorPoints) {
+				for (const entry of shape) {
+					const targetRow = entry.relativeRow + offset;
+					const s = entry.span.timestamp;
+					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
+					if (hasPointInSpan(connectorPoints, targetRow, s, e)) {
+						passesSpanChecks = false;
+						break;
+					}
+				}
+			}
+
+			if (!passesSpanChecks) {
+				continue;
+			}
+
+			// This offset passes Checks 1 & 2 — record as fallback
+			if (fallbackOffset === -1) {
+				fallbackOffset = offset;
+			}
+
+			// Check 3: new connector vs existing spans
+			if (connectorX !== undefined) {
+				let connectorClear = true;
+				for (let r = 1; r < offset; r++) {
+					if (hasConnectorConflict(intervals, r, connectorX)) {
+						connectorClear = false;
+						break;
+					}
+				}
+				if (!connectorClear) {
+					// Check 3 will fail for all larger offsets too.
+					// Fall back to the first offset that passed Checks 1 & 2.
+					return fallbackOffset;
+				}
+			}
+
+			return offset;
+		}
+	}
+
+	// Process roots sorted by timestamp
+	roots.sort((a, b) => a.timestamp - b.timestamp);
+	for (const root of roots) {
+		const shape = computeSubtreeShape(root);
+		const offset = findPlacement(shape, 0, rowIntervals);
+		for (const entry of shape) {
+			addToRow(entry.relativeRow + offset, entry.span);
+		}
+	}
+
+	// Build the visualRows array
+	const totalVisualRows = maxRow + 1;
+	const visualRows: FlamegraphSpan[][] = [];
+	for (let i = 0; i < totalVisualRows; i++) {
+		visualRows.push(visualRowsMap.get(i) || []);
+	}
+
+	// Build connector lines for parent-child pairs with row gap > 1
+	const connectors: ConnectorLine[] = [];
+	for (const [parentId, children] of childrenMap) {
+		const parentRow = spanToVisualRow.get(parentId);
+		if (parentRow === undefined) {
+			continue;
+		}
+		for (const child of children) {
+			const childRow = spanToVisualRow.get(child.spanId);
+			if (childRow === undefined || childRow - parentRow <= 1) {
+				continue;
+			}
+			connectors.push({
+				parentRow,
+				childRow,
+				timestampMs: child.timestamp,
+				serviceName: child.serviceName,
+			});
+		}
+	}
+
+	return {
+		visualRows,
+		spanToVisualRow: Object.fromEntries(spanToVisualRow),
+		connectors,
+		totalVisualRows,
+	};
+}

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

@@ -0,0 +1,39 @@
+export const ROW_HEIGHT = 24;
+export const SPAN_BAR_HEIGHT = 22;
+export const SPAN_BAR_Y_OFFSET = Math.floor((ROW_HEIGHT - SPAN_BAR_HEIGHT) / 2);
+export const EVENT_DOT_SIZE = 6;
+
+// Span bar sizing relative to row height (used by getFlamegraphRowMetrics)
+export const SPAN_BAR_HEIGHT_RATIO = SPAN_BAR_HEIGHT / ROW_HEIGHT;
+export const MIN_SPAN_BAR_HEIGHT = 8;
+export const MAX_SPAN_BAR_HEIGHT = SPAN_BAR_HEIGHT;
+
+// Event dot sizing relative to span bar height
+export const EVENT_DOT_SIZE_RATIO = EVENT_DOT_SIZE / SPAN_BAR_HEIGHT;
+export const MIN_EVENT_DOT_SIZE = 4;
+export const MAX_EVENT_DOT_SIZE = EVENT_DOT_SIZE;
+
+export const LABEL_FONT = '11px Inter, sans-serif';
+export const LABEL_PADDING_X = 8;
+export const MIN_WIDTH_FOR_NAME = 30;
+export const MIN_WIDTH_FOR_NAME_AND_DURATION = 80;
+
+// Dynamic row height (vertical zoom) -- disabled for now (MIN === MAX)
+export const MIN_ROW_HEIGHT = 24;
+export const MAX_ROW_HEIGHT = 24;
+export const DEFAULT_ROW_HEIGHT = MIN_ROW_HEIGHT;
+
+// Zoom intensity -- how fast zoom reacts to wheel/pinch delta
+export const PINCH_ZOOM_INTENSITY_H = 0.01;
+export const SCROLL_ZOOM_INTENSITY_H = 0.0015;
+export const PINCH_ZOOM_INTENSITY_V = 0.008;
+export const SCROLL_ZOOM_INTENSITY_V = 0.001;
+
+// Minimum visible time span in ms (prevents zooming to sub-pixel)
+export const MIN_VISIBLE_SPAN_MS = 5;
+
+// Selected span style (dashed border)
+export const DASHED_BORDER_LINE_DASH = [4, 2];
+
+// Max spans fetched for flamegraph visualization
+export const FLAMEGRAPH_SPAN_LIMIT = 100002;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useCanvasSetup.ts

@@ -0,0 +1,66 @@
+import { RefObject, useCallback, useEffect } from 'react';
+
+export function useCanvasSetup(
+	canvasRef: RefObject<HTMLCanvasElement>,
+	containerRef: RefObject<HTMLDivElement>,
+	onDraw: () => void,
+	overlayCanvasRef?: RefObject<HTMLCanvasElement>,
+): void {
+	const updateCanvasSize = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		const rect = container.getBoundingClientRect();
+		const viewportHeight = container.clientHeight;
+
+		canvas.style.width = `${rect.width}px`;
+		canvas.style.height = `${viewportHeight}px`;
+
+		const newWidth = Math.floor(rect.width * dpr);
+		const newHeight = Math.floor(viewportHeight * dpr);
+
+		if (canvas.width !== newWidth || canvas.height !== newHeight) {
+			canvas.width = newWidth;
+			canvas.height = newHeight;
+
+			// Sync overlay canvas size with main canvas
+			const overlay = overlayCanvasRef?.current;
+			if (overlay) {
+				overlay.width = newWidth;
+				overlay.height = newHeight;
+				overlay.style.width = `${rect.width}px`;
+				overlay.style.height = `${viewportHeight}px`;
+			}
+
+			onDraw();
+		}
+	}, [canvasRef, containerRef, onDraw, overlayCanvasRef]);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return (): void => {};
+		}
+
+		const resizeObserver = new ResizeObserver(updateCanvasSize);
+		resizeObserver.observe(container);
+		updateCanvasSize();
+
+		// when dpr changes, update the canvas size
+		const dprQuery = window.matchMedia('(resolution: 1dppx)');
+		dprQuery.addEventListener('change', updateCanvasSize);
+
+		return (): void => {
+			resizeObserver.disconnect();
+			dprQuery.removeEventListener('change', updateCanvasSize);
+		};
+	}, [containerRef, updateCanvasSize]);
+
+	useEffect(() => {
+		onDraw();
+	}, [onDraw]);
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphCrosshair.ts

@@ -0,0 +1,55 @@
+import { RefObject, useCallback, useEffect } from 'react';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+interface UseFlamegraphCrosshairArgs {
+	overlayCanvasRef: RefObject<HTMLCanvasElement>;
+	cursorX: number | null;
+}
+
+/**
+ * Draws the crosshair vertical line on the flamegraph overlay canvas.
+ * Separated from useFlamegraphDraw (which handles the main canvas)
+ * to keep span rendering and crosshair rendering independent.
+ */
+export function useFlamegraphCrosshair({
+	overlayCanvasRef,
+	cursorX,
+}: UseFlamegraphCrosshairArgs): void {
+	const isDarkMode = useIsDarkMode();
+
+	const drawCrosshair = useCallback((): void => {
+		const overlay = overlayCanvasRef.current;
+		if (!overlay) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		const ctx = overlay.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const cssWidth = overlay.width / dpr;
+		const cssHeight = overlay.height / dpr;
+
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, cssWidth, cssHeight);
+
+		if (cursorX === null) {
+			return;
+		}
+
+		// Vertical solid line — matches --l3-background token used by the time badge
+		ctx.strokeStyle = isDarkMode ? '#2d313a' : '#e8e8ec';
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(cursorX, 0);
+		ctx.lineTo(cursorX, cssHeight);
+		ctx.stroke();
+	}, [overlayCanvasRef, cursorX, isDarkMode]);
+
+	// Redraw whenever cursorX or dependencies change
+	useEffect(() => {
+		drawCrosshair();
+	}, [drawCrosshair]);
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDrag.ts

@@ -0,0 +1,170 @@
+import {
+	Dispatch,
+	MouseEvent as ReactMouseEvent,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useRef,
+} from 'react';
+
+import { ITraceMetadata } from '../types';
+import { clamp } from '../utils';
+
+interface UseFlamegraphDragArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	containerRef: RefObject<HTMLDivElement>;
+	traceMetadata: ITraceMetadata;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	scrollTopRef: MutableRefObject<number>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+	totalHeight: number;
+}
+
+interface UseFlamegraphDragResult {
+	handleMouseDown: (e: ReactMouseEvent) => void;
+	handleMouseMove: (e: ReactMouseEvent) => void;
+	handleMouseUp: () => void;
+	handleDragMouseLeave: () => void;
+	isDraggingRef: MutableRefObject<boolean>;
+}
+
+export function useFlamegraphDrag(
+	args: UseFlamegraphDragArgs,
+): UseFlamegraphDragResult {
+	const {
+		canvasRef,
+		containerRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		setViewStartTs,
+		setViewEndTs,
+		scrollTopRef,
+		setScrollTop,
+		totalHeight,
+	} = args;
+
+	const isDraggingRef = useRef(false);
+	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
+	const dragDistanceRef = useRef(0);
+
+	const clampScrollTop = useCallback(
+		(next: number): number => {
+			const container = containerRef.current;
+			if (!container) {
+				return 0;
+			}
+			const viewportHeight = container.clientHeight;
+			const maxScroll = Math.max(0, totalHeight - viewportHeight);
+			return clamp(next, 0, maxScroll);
+		},
+		[containerRef, totalHeight],
+	);
+
+	const handleMouseDown = useCallback(
+		(event: ReactMouseEvent): void => {
+			if (event.button !== 0) {
+				return;
+			}
+			event.preventDefault();
+
+			isDraggingRef.current = true;
+			dragStartRef.current = { x: event.clientX, y: event.clientY };
+			dragDistanceRef.current = 0;
+
+			const canvas = canvasRef.current;
+			if (canvas) {
+				canvas.style.cursor = 'grabbing';
+			}
+		},
+		[canvasRef],
+	);
+
+	const handleMouseMove = useCallback(
+		(event: ReactMouseEvent): void => {
+			if (!isDraggingRef.current || !dragStartRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const rect = canvas.getBoundingClientRect();
+			const deltaX = event.clientX - dragStartRef.current.x;
+			const deltaY = event.clientY - dragStartRef.current.y;
+
+			dragDistanceRef.current = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+			// --- Horizontal pan ---
+			const timeSpan = viewEndRef.current - viewStartRef.current;
+			const deltaTime = (deltaX / rect.width) * timeSpan;
+
+			const newStart = viewStartRef.current - deltaTime;
+			const clampedStart = clamp(
+				newStart,
+				traceMetadata.startTime,
+				traceMetadata.endTime - timeSpan,
+			);
+			const clampedEnd = clampedStart + timeSpan;
+
+			viewStartRef.current = clampedStart;
+			viewEndRef.current = clampedEnd;
+			setViewStartTs(clampedStart);
+			setViewEndTs(clampedEnd);
+
+			// --- Vertical scroll pan ---
+			const nextScrollTop = clampScrollTop(scrollTopRef.current - deltaY);
+			scrollTopRef.current = nextScrollTop;
+			setScrollTop(nextScrollTop);
+
+			dragStartRef.current = { x: event.clientX, y: event.clientY };
+		},
+		[
+			canvasRef,
+			traceMetadata,
+			viewStartRef,
+			viewEndRef,
+			setViewStartTs,
+			setViewEndTs,
+			scrollTopRef,
+			setScrollTop,
+			clampScrollTop,
+		],
+	);
+
+	const handleMouseUp = useCallback((): void => {
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+	}, [canvasRef]);
+
+	// const handleDragMouseLeave = useCallback((): void => {
+	// 	isDraggingRef.current = false;
+	// 	dragStartRef.current = null;
+	// 	dragDistanceRef.current = 0;
+
+	// 	const canvas = canvasRef.current;
+	// 	if (canvas) {
+	// 		canvas.style.cursor = 'grab';
+	// 	}
+	// }, [canvasRef]);
+
+	return {
+		handleMouseDown,
+		handleMouseMove,
+		handleMouseUp,
+		handleDragMouseLeave: handleMouseUp, // Same logic for mouse up and leaving the canvas
+		isDraggingRef,
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -0,0 +1,343 @@
+import React, { RefObject, useCallback, useMemo, useRef } from 'react';
+import { themeColors } from 'constants/theme';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { ConnectorLine } from '../computeVisualLayout';
+import { EventRect, SpanRect } from '../types';
+import {
+	clamp,
+	drawSpanBar,
+	FlamegraphRowMetrics,
+	getFlamegraphRowMetrics,
+	getSpanColor,
+} from '../utils';
+
+interface UseFlamegraphDrawArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	containerRef: RefObject<HTMLDivElement>;
+	spans: FlamegraphSpan[][];
+	connectors: ConnectorLine[];
+	viewStartTs: number;
+	viewEndTs: number;
+	scrollTop: number;
+	rowHeight: number;
+	selectedSpanId: string | undefined;
+	hoveredSpanId: string;
+	isDarkMode: boolean;
+	spanRectsRef?: React.MutableRefObject<SpanRect[]>;
+	eventRectsRef?: React.MutableRefObject<EventRect[]>;
+	hoveredEventKey?: string | null;
+	filteredSpanIds?: string[];
+	isFilterActive?: boolean;
+}
+
+interface UseFlamegraphDrawResult {
+	drawFlamegraph: () => void;
+	spanRectsRef: RefObject<SpanRect[]>;
+	eventRectsRef: RefObject<EventRect[]>;
+}
+
+const OVERSCAN_ROWS = 4;
+
+interface DrawLevelArgs {
+	ctx: CanvasRenderingContext2D;
+	levelSpans: FlamegraphSpan[];
+	levelIndex: number;
+	y: number;
+	viewStartTs: number;
+	timeSpan: number;
+	cssWidth: number;
+	selectedSpanId: string | undefined;
+	hoveredSpanId: string;
+	isDarkMode: boolean;
+	spanRectsArray: SpanRect[];
+	eventRectsArray: EventRect[];
+	metrics: FlamegraphRowMetrics;
+	hoveredEventKey?: string | null;
+	filteredSpanIdsSet?: Set<string> | null;
+	isFilterActive?: boolean;
+}
+
+function drawLevel(args: DrawLevelArgs): void {
+	const {
+		ctx,
+		levelSpans,
+		levelIndex,
+		y,
+		viewStartTs,
+		timeSpan,
+		cssWidth,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsArray,
+		eventRectsArray,
+		metrics,
+		hoveredEventKey,
+		filteredSpanIdsSet,
+		isFilterActive: isFilterActiveInLevel,
+	} = args;
+
+	const viewEndTs = viewStartTs + timeSpan;
+
+	for (let i = 0; i < levelSpans.length; i++) {
+		const span = levelSpans[i];
+		const spanStartMs = span.timestamp;
+		const spanEndMs = span.timestamp + span.durationNano / 1e6;
+
+		// Time culling -- skip spans entirely outside the visible time window
+		if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
+			continue;
+		}
+
+		const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
+		const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
+		let width = rightEdge - leftOffset;
+
+		// Clamp to visible x-range
+		if (leftOffset < 0) {
+			width += leftOffset;
+			if (width <= 0) {
+				continue;
+			}
+		}
+		if (rightEdge > cssWidth) {
+			width = cssWidth - Math.max(0, leftOffset);
+			if (width <= 0) {
+				continue;
+			}
+		}
+
+		// Minimum 1px width so tiny spans remain visible
+		width = clamp(width, 1, Infinity);
+
+		const color = getSpanColor({ span, isDarkMode });
+
+		const isDimmedByFilter =
+			!!isFilterActiveInLevel &&
+			!!filteredSpanIdsSet &&
+			!filteredSpanIdsSet.has(span.spanId);
+
+		drawSpanBar({
+			ctx,
+			span,
+			x: Math.max(0, leftOffset),
+			y,
+			width,
+			levelIndex,
+			spanRectsArray,
+			eventRectsArray,
+			color,
+			isDarkMode,
+			metrics,
+			selectedSpanId,
+			hoveredSpanId,
+			hoveredEventKey,
+			isDimmedByFilter,
+		});
+	}
+}
+
+interface DrawConnectorLinesArgs {
+	ctx: CanvasRenderingContext2D;
+	connectors: ConnectorLine[];
+	scrollTop: number;
+	viewStartTs: number;
+	timeSpan: number;
+	cssWidth: number;
+	viewportHeight: number;
+	metrics: FlamegraphRowMetrics;
+}
+
+function drawConnectorLines(args: DrawConnectorLinesArgs): void {
+	const {
+		ctx,
+		connectors,
+		scrollTop,
+		viewStartTs,
+		timeSpan,
+		cssWidth,
+		viewportHeight,
+		metrics,
+	} = args;
+
+	ctx.save();
+	ctx.lineWidth = 1;
+	ctx.globalAlpha = 0.6;
+
+	for (const conn of connectors) {
+		const xFrac = (conn.timestampMs - viewStartTs) / timeSpan;
+		if (xFrac < -0.01 || xFrac > 1.01) {
+			continue;
+		}
+
+		const parentY =
+			conn.parentRow * metrics.ROW_HEIGHT -
+			scrollTop +
+			metrics.SPAN_BAR_Y_OFFSET +
+			metrics.SPAN_BAR_HEIGHT;
+		const childY =
+			conn.childRow * metrics.ROW_HEIGHT - scrollTop + metrics.SPAN_BAR_Y_OFFSET;
+
+		// Skip if entirely outside viewport
+		if (parentY > viewportHeight || childY < 0) {
+			continue;
+		}
+
+		const color = generateColor(
+			conn.serviceName,
+			themeColors.traceDetailColorsV3,
+		);
+		ctx.strokeStyle = color;
+
+		const x = clamp(xFrac * cssWidth, 0, cssWidth);
+		ctx.beginPath();
+		ctx.moveTo(x, parentY);
+		ctx.lineTo(x, childY);
+		ctx.stroke();
+	}
+
+	ctx.restore();
+}
+
+export function useFlamegraphDraw(
+	args: UseFlamegraphDrawArgs,
+): UseFlamegraphDrawResult {
+	const {
+		canvasRef,
+		containerRef,
+		spans,
+		connectors,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsRef: spanRectsRefProp,
+		eventRectsRef: eventRectsRefProp,
+		hoveredEventKey,
+		filteredSpanIds,
+		isFilterActive,
+	} = args;
+
+	const spanRectsRefInternal = useRef<SpanRect[]>([]);
+	const spanRectsRef = spanRectsRefProp ?? spanRectsRefInternal;
+	const eventRectsRefInternal = useRef<EventRect[]>([]);
+	const eventRectsRef = eventRectsRefProp ?? eventRectsRefInternal;
+
+	const filteredSpanIdsSet = useMemo(
+		() =>
+			isFilterActive && filteredSpanIds && filteredSpanIds.length > 0
+				? new Set(filteredSpanIds)
+				: null,
+		[filteredSpanIds, isFilterActive],
+	);
+
+	const drawFlamegraph = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+		const timeSpan = viewEndTs - viewStartTs;
+		if (timeSpan <= 0) {
+			return;
+		}
+
+		const cssWidth = canvas.width / dpr;
+		const metrics = getFlamegraphRowMetrics(rowHeight);
+
+		// ---- Vertical clipping window ----
+		const viewportHeight = container.clientHeight;
+
+		//starts drawing OVERSCAN_ROWS(4) rows above the visible area.
+		const firstLevel = Math.max(
+			0,
+			Math.floor(scrollTop / metrics.ROW_HEIGHT) - OVERSCAN_ROWS,
+		);
+		// adds 2*OVERSCAN_ROWS extra rows above and below the visible area.
+		const visibleLevelCount =
+			Math.ceil(viewportHeight / metrics.ROW_HEIGHT) + 2 * OVERSCAN_ROWS;
+
+		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
+
+		ctx.clearRect(0, 0, cssWidth, viewportHeight);
+
+		// ---- Draw connector lines (behind span bars) ----
+		drawConnectorLines({
+			ctx,
+			connectors,
+			scrollTop,
+			viewStartTs,
+			timeSpan,
+			cssWidth,
+			viewportHeight,
+			metrics,
+		});
+
+		const spanRectsArray: SpanRect[] = [];
+		const eventRectsArray: EventRect[] = [];
+		const currentHoveredEventKey = hoveredEventKey ?? null;
+
+		// ---- Draw only visible levels ----
+		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
+			const levelSpans = spans[levelIndex];
+			if (!levelSpans) {
+				continue;
+			}
+
+			drawLevel({
+				ctx,
+				levelSpans,
+				levelIndex,
+				y: levelIndex * metrics.ROW_HEIGHT - scrollTop,
+				viewStartTs,
+				timeSpan,
+				cssWidth,
+				selectedSpanId,
+				hoveredSpanId,
+				isDarkMode,
+				spanRectsArray,
+				eventRectsArray,
+				metrics,
+				hoveredEventKey: currentHoveredEventKey,
+				filteredSpanIdsSet,
+				isFilterActive,
+			});
+		}
+
+		spanRectsRef.current = spanRectsArray;
+		eventRectsRef.current = eventRectsArray;
+	}, [
+		canvasRef,
+		containerRef,
+		spanRectsRef,
+		eventRectsRef,
+		spans,
+		connectors,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		hoveredEventKey,
+		isDarkMode,
+		filteredSpanIdsSet,
+		isFilterActive,
+	]);
+
+	return { drawFlamegraph, spanRectsRef, eventRectsRef };
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -0,0 +1,295 @@
+import {
+	Dispatch,
+	MouseEvent as ReactMouseEvent,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useRef,
+	useState,
+} from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { EventRect, SpanRect } from '../types';
+import { ITraceMetadata } from '../types';
+import { getSpanColor } from '../utils';
+
+function getCanvasPointer(
+	canvas: HTMLCanvasElement,
+	clientX: number,
+	clientY: number,
+): { cssX: number; cssY: number } | null {
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	const cssWidth = canvas.width / dpr;
+	const cssHeight = canvas.height / dpr;
+	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+	const cssY = (clientY - rect.top) * (cssHeight / rect.height);
+	return { cssX, cssY };
+}
+
+function findSpanAtPosition(
+	cssX: number,
+	cssY: number,
+	spanRects: SpanRect[],
+): FlamegraphSpan | null {
+	for (let i = spanRects.length - 1; i >= 0; i--) {
+		const r = spanRects[i];
+		if (
+			cssX >= r.x &&
+			cssX <= r.x + r.width &&
+			cssY >= r.y &&
+			cssY <= r.y + r.height
+		) {
+			return r.span;
+		}
+	}
+	return null;
+}
+
+function findEventAtPosition(
+	cssX: number,
+	cssY: number,
+	eventRects: EventRect[],
+): EventRect | null {
+	for (let i = eventRects.length - 1; i >= 0; i--) {
+		const r = eventRects[i];
+		// Manhattan distance check for diamond shape with padding
+		if (Math.abs(r.cx - cssX) + Math.abs(r.cy - cssY) <= r.halfSize * 1.5) {
+			return r;
+		}
+	}
+	return null;
+}
+
+export interface EventTooltipData {
+	name: string;
+	timeOffsetMs: number;
+	isError: boolean;
+	attributeMap: Record<string, string>;
+}
+
+export interface TooltipContent {
+	serviceName: string;
+	spanName: string;
+	status: 'ok' | 'warning' | 'error';
+	startMs: number;
+	durationMs: number;
+	clientX: number;
+	clientY: number;
+	spanColor: string;
+	event?: EventTooltipData;
+}
+
+interface UseFlamegraphHoverArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	spanRectsRef: MutableRefObject<SpanRect[]>;
+	eventRectsRef: MutableRefObject<EventRect[]>;
+	traceMetadata: ITraceMetadata;
+	viewStartTs: number;
+	viewEndTs: number;
+	isDraggingRef: MutableRefObject<boolean>;
+	onSpanClick: (spanId: string) => void;
+	isDarkMode: boolean;
+}
+
+interface UseFlamegraphHoverResult {
+	hoveredSpanId: string | null;
+	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
+	hoveredEventKey: string | null;
+	handleHoverMouseMove: (e: ReactMouseEvent) => void;
+	handleHoverMouseLeave: () => void;
+	handleMouseDownForClick: (e: ReactMouseEvent) => void;
+	handleClick: (e: ReactMouseEvent) => void;
+	tooltipContent: TooltipContent | null;
+}
+
+export function useFlamegraphHover(
+	args: UseFlamegraphHoverArgs,
+): UseFlamegraphHoverResult {
+	const {
+		canvasRef,
+		spanRectsRef,
+		eventRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		onSpanClick,
+		isDarkMode,
+	} = args;
+
+	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
+	const [hoveredEventKey, setHoveredEventKey] = useState<string | null>(null);
+	const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(
+		null,
+	);
+
+	const isZoomed =
+		viewStartTs !== traceMetadata.startTime ||
+		viewEndTs !== traceMetadata.endTime;
+
+	const updateCursor = useCallback(
+		(canvas: HTMLCanvasElement, span: FlamegraphSpan | null): void => {
+			if (span) {
+				canvas.style.cursor = 'pointer';
+			} else if (isZoomed) {
+				canvas.style.cursor = 'grab';
+			} else {
+				canvas.style.cursor = 'default';
+			}
+		},
+		[isZoomed],
+	);
+
+	const handleHoverMouseMove = useCallback(
+		(e: ReactMouseEvent): void => {
+			if (isDraggingRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			// Check event dots first — they're drawn on top of spans
+			const eventRect = findEventAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				eventRectsRef.current,
+			);
+
+			if (eventRect) {
+				const { event, span } = eventRect;
+				const eventTimeMs = event.timeUnixNano / 1e6;
+				setHoveredEventKey(`${span.spanId}-${event.name}-${event.timeUnixNano}`);
+				setHoveredSpanId(span.spanId);
+				setTooltipContent({
+					serviceName: span.serviceName || '',
+					spanName: span.name || 'unknown',
+					status: span.hasError ? 'error' : 'ok',
+					startMs: span.timestamp - traceMetadata.startTime,
+					durationMs: span.durationNano / 1e6,
+					clientX: e.clientX,
+					clientY: e.clientY,
+					spanColor: getSpanColor({ span, isDarkMode }),
+					event: {
+						name: event.name,
+						timeOffsetMs: eventTimeMs - span.timestamp,
+						isError: event.isError,
+						attributeMap: event.attributeMap || {},
+					},
+				});
+				updateCursor(canvas, eventRect.span);
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				setHoveredEventKey(null);
+				setHoveredSpanId(span.spanId);
+				setTooltipContent({
+					serviceName: span.serviceName || '',
+					spanName: span.name || 'unknown',
+					status: span.hasError ? 'error' : 'ok',
+					startMs: span.timestamp - traceMetadata.startTime,
+					durationMs: span.durationNano / 1e6,
+					clientX: e.clientX,
+					clientY: e.clientY,
+					spanColor: getSpanColor({ span, isDarkMode }),
+				});
+				updateCursor(canvas, span);
+			} else {
+				setHoveredEventKey(null);
+				setHoveredSpanId(null);
+				setTooltipContent(null);
+				updateCursor(canvas, null);
+			}
+		},
+		[
+			canvasRef,
+			spanRectsRef,
+			eventRectsRef,
+			traceMetadata.startTime,
+			isDraggingRef,
+			updateCursor,
+			isDarkMode,
+		],
+	);
+
+	const handleHoverMouseLeave = useCallback((): void => {
+		setHoveredEventKey(null);
+		setHoveredSpanId(null);
+		setTooltipContent(null);
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			updateCursor(canvas, null);
+		}
+	}, [canvasRef, updateCursor]);
+
+	const mouseDownPosRef = useRef<{ x: number; y: number } | null>(null);
+	const CLICK_THRESHOLD = 5;
+
+	const handleMouseDownForClick = useCallback((e: ReactMouseEvent): void => {
+		mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+	}, []);
+
+	const handleClick = useCallback(
+		(e: ReactMouseEvent): void => {
+			// Detect drag: if mouse moved more than threshold, skip click
+			if (mouseDownPosRef.current) {
+				const dx = e.clientX - mouseDownPosRef.current.x;
+				const dy = e.clientY - mouseDownPosRef.current.y;
+				if (Math.sqrt(dx * dx + dy * dy) > CLICK_THRESHOLD) {
+					mouseDownPosRef.current = null;
+					return;
+				}
+			}
+			mouseDownPosRef.current = null;
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				onSpanClick(span.spanId);
+			}
+		},
+		[canvasRef, spanRectsRef, onSpanClick],
+	);
+
+	return {
+		hoveredSpanId,
+		setHoveredSpanId,
+		hoveredEventKey,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleMouseDownForClick,
+		handleClick,
+		tooltipContent,
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphZoom.ts

@@ -0,0 +1,224 @@
+import {
+	Dispatch,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
+
+import {
+	DEFAULT_ROW_HEIGHT,
+	MAX_ROW_HEIGHT,
+	MIN_ROW_HEIGHT,
+	MIN_VISIBLE_SPAN_MS,
+	PINCH_ZOOM_INTENSITY_H,
+	PINCH_ZOOM_INTENSITY_V,
+	SCROLL_ZOOM_INTENSITY_H,
+	SCROLL_ZOOM_INTENSITY_V,
+} from '../constants';
+import { ITraceMetadata } from '../types';
+import { clamp } from '../utils';
+
+interface UseFlamegraphZoomArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	traceMetadata: ITraceMetadata;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	rowHeightRef: MutableRefObject<number>;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setRowHeight: Dispatch<SetStateAction<number>>;
+}
+
+interface UseFlamegraphZoomResult {
+	handleResetZoom: () => void;
+	isOverFlamegraphRef: MutableRefObject<boolean>;
+}
+
+function getCanvasPointer(
+	canvasRef: RefObject<HTMLCanvasElement>,
+	clientX: number,
+): { cssX: number; cssWidth: number } | null {
+	const canvas = canvasRef.current;
+	if (!canvas) {
+		return null;
+	}
+
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	const cssWidth = canvas.width / dpr;
+	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+
+	return { cssX, cssWidth };
+}
+
+export function useFlamegraphZoom(
+	args: UseFlamegraphZoomArgs,
+): UseFlamegraphZoomResult {
+	const {
+		canvasRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	} = args;
+
+	const isOverFlamegraphRef = useRef(false);
+	const wheelDeltaRef = useRef(0);
+	const rafRef = useRef<number | null>(null);
+	const lastCursorXRef = useRef(0);
+	const lastCssWidthRef = useRef(1);
+	const lastIsPinchRef = useRef(false);
+	const lastWheelClientXRef = useRef<number | null>(null);
+
+	// Prevent browser zoom when pinching over the flamegraph
+	useEffect(() => {
+		const onWheel = (e: WheelEvent): void => {
+			if (isOverFlamegraphRef.current && e.ctrlKey) {
+				e.preventDefault();
+			}
+		};
+
+		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
+
+		return (): void => {
+			window.removeEventListener('wheel', onWheel, {
+				capture: true,
+			} as EventListenerOptions);
+		};
+	}, []);
+
+	const applyWheelZoom = useCallback(() => {
+		rafRef.current = null;
+
+		const cssWidth = lastCssWidthRef.current || 1;
+		const cursorX = lastCursorXRef.current;
+		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
+
+		const oldStart = viewStartRef.current;
+		const oldEnd = viewEndRef.current;
+		const oldSpan = oldEnd - oldStart;
+
+		const deltaY = wheelDeltaRef.current;
+		wheelDeltaRef.current = 0;
+		if (deltaY === 0) {
+			return;
+		}
+
+		const zoomH = lastIsPinchRef.current
+			? PINCH_ZOOM_INTENSITY_H
+			: SCROLL_ZOOM_INTENSITY_H;
+		const zoomV = lastIsPinchRef.current
+			? PINCH_ZOOM_INTENSITY_V
+			: SCROLL_ZOOM_INTENSITY_V;
+
+		const factorH = Math.exp(deltaY * zoomH);
+		const factorV = Math.exp(deltaY * zoomV);
+
+		// --- Horizontal zoom ---
+		const desiredSpan = oldSpan * factorH;
+		const minSpanMs = Math.max(
+			MIN_VISIBLE_SPAN_MS,
+			oldSpan / Math.max(cssWidth, 1),
+		);
+		const clampedSpan = clamp(desiredSpan, minSpanMs, fullSpanMs);
+
+		const cursorRatio = clamp(cursorX / cssWidth, 0, 1);
+		const anchorTs = oldStart + cursorRatio * oldSpan;
+
+		let nextStart = anchorTs - cursorRatio * clampedSpan;
+		nextStart = clamp(
+			nextStart,
+			traceMetadata.startTime,
+			traceMetadata.endTime - clampedSpan,
+		);
+		const nextEnd = nextStart + clampedSpan;
+
+		// --- Vertical zoom (row height) ---
+		const desiredRow = rowHeightRef.current * (1 / factorV);
+		const nextRow = clamp(desiredRow, MIN_ROW_HEIGHT, MAX_ROW_HEIGHT);
+
+		// Write refs immediately so rapid wheel events read fresh values
+		viewStartRef.current = nextStart;
+		viewEndRef.current = nextEnd;
+		rowHeightRef.current = nextRow;
+
+		setViewStartTs(nextStart);
+		setViewEndTs(nextEnd);
+		setRowHeight(nextRow);
+	}, [
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	]);
+
+	// Native wheel listener on the canvas (passive: false for reliable preventDefault)
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) {
+			return (): void => {};
+		}
+
+		const onWheel = (e: WheelEvent): void => {
+			e.preventDefault();
+
+			const pointer = getCanvasPointer(canvasRef, e.clientX);
+			if (!pointer) {
+				return;
+			}
+
+			// Flush accumulated delta if cursor moved significantly
+			if (lastWheelClientXRef.current !== null) {
+				const moved = Math.abs(e.clientX - lastWheelClientXRef.current);
+				if (moved > 6) {
+					wheelDeltaRef.current = 0;
+				}
+			}
+			lastWheelClientXRef.current = e.clientX;
+
+			lastIsPinchRef.current = e.ctrlKey;
+			lastCssWidthRef.current = pointer.cssWidth;
+			lastCursorXRef.current = pointer.cssX;
+			wheelDeltaRef.current += e.deltaY;
+
+			if (rafRef.current == null) {
+				rafRef.current = requestAnimationFrame(applyWheelZoom);
+			}
+		};
+
+		canvas.addEventListener('wheel', onWheel, { passive: false });
+
+		return (): void => {
+			canvas.removeEventListener('wheel', onWheel);
+		};
+	}, [canvasRef, applyWheelZoom]);
+
+	const handleResetZoom = useCallback(() => {
+		viewStartRef.current = traceMetadata.startTime;
+		viewEndRef.current = traceMetadata.endTime;
+		rowHeightRef.current = DEFAULT_ROW_HEIGHT;
+
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+		setRowHeight(DEFAULT_ROW_HEIGHT);
+	}, [
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	]);
+
+	return { handleResetZoom, isOverFlamegraphRef };
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -0,0 +1,118 @@
+import {
+	Dispatch,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useEffect,
+} from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { MIN_VISIBLE_SPAN_MS } from '../constants';
+import { ITraceMetadata } from '../types';
+import { clamp, findSpanById, getFlamegraphRowMetrics } from '../utils';
+
+interface UseScrollToSpanArgs {
+	firstSpanAtFetchLevel: string;
+	spans: FlamegraphSpan[][];
+	traceMetadata: ITraceMetadata;
+	containerRef: RefObject<HTMLDivElement>;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	scrollTopRef: MutableRefObject<number>;
+	rowHeight: number;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+}
+
+/**
+ * When firstSpanAtFetchLevel (from URL spanId) changes, scroll and zoom the
+ * flamegraph so the selected span is centered in view.
+ */
+export function useScrollToSpan(args: UseScrollToSpanArgs): void {
+	const {
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	} = args;
+
+	useEffect(() => {
+		if (!firstSpanAtFetchLevel || spans.length === 0) {
+			return;
+		}
+
+		const result = findSpanById(spans, firstSpanAtFetchLevel);
+		if (!result) {
+			return;
+		}
+
+		const { span, levelIndex } = result;
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+
+		const metrics = getFlamegraphRowMetrics(rowHeight);
+		const viewportHeight = container.clientHeight;
+		const totalHeight = spans.length * metrics.ROW_HEIGHT;
+		const maxScroll = Math.max(0, totalHeight - viewportHeight);
+
+		// Vertical: center the span's row in the viewport
+		const targetScrollTop = clamp(
+			levelIndex * metrics.ROW_HEIGHT -
+				viewportHeight / 2 +
+				metrics.ROW_HEIGHT / 2,
+			0,
+			maxScroll,
+		);
+
+		// Horizontal: zoom to span with padding (2x span duration), center it
+		const spanStartMs = span.timestamp;
+		const spanEndMs = span.timestamp + span.durationNano / 1e6;
+		const spanDurationMs = spanEndMs - spanStartMs;
+		const spanCenterMs = (spanStartMs + spanEndMs) / 2;
+
+		const visibleWindowMs = Math.max(spanDurationMs * 2, MIN_VISIBLE_SPAN_MS);
+		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
+		const clampedWindow = clamp(visibleWindowMs, MIN_VISIBLE_SPAN_MS, fullSpanMs);
+
+		let targetViewStart = spanCenterMs - clampedWindow / 2;
+		let targetViewEnd = spanCenterMs + clampedWindow / 2;
+
+		targetViewStart = clamp(
+			targetViewStart,
+			traceMetadata.startTime,
+			traceMetadata.endTime - clampedWindow,
+		);
+		targetViewEnd = targetViewStart + clampedWindow;
+
+		// Apply immediately (instant jump)
+		viewStartRef.current = targetViewStart;
+		viewEndRef.current = targetViewEnd;
+		scrollTopRef.current = targetScrollTop;
+
+		setViewStartTs(targetViewStart);
+		setViewEndTs(targetViewEnd);
+		setScrollTop(targetScrollTop);
+	}, [
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	]);
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { computeVisualLayout, VisualLayout } from '../computeVisualLayout';
+import { LayoutWorkerResponse } from '../visualLayoutWorkerTypes';
+
+const EMPTY_LAYOUT: VisualLayout = {
+	visualRows: [],
+	spanToVisualRow: {},
+	connectors: [],
+	totalVisualRows: 0,
+};
+
+function computeLayoutOrEmpty(spans: FlamegraphSpan[][]): VisualLayout {
+	return spans.length ? computeVisualLayout(spans) : EMPTY_LAYOUT;
+}
+
+function createLayoutWorker(): Worker {
+	return new Worker(new URL('../visualLayout.worker.ts', import.meta.url), {
+		type: 'module',
+	});
+}
+
+export function useVisualLayoutWorker(
+	spans: FlamegraphSpan[][],
+): { layout: VisualLayout; isComputing: boolean; error: Error | null } {
+	const [layout, setLayout] = useState<VisualLayout>(EMPTY_LAYOUT);
+	const [isComputing, setIsComputing] = useState(false);
+	const [error, setError] = useState<Error | null>(null);
+	const isComputingRef = useRef(false);
+	const workerRef = useRef<Worker | null>(null);
+	const requestIdRef = useRef(0);
+	const fallbackRef = useRef(typeof Worker === 'undefined');
+
+	// Effect: post message to worker when spans change
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	useEffect(() => {
+		if (fallbackRef.current) {
+			setLayout(computeLayoutOrEmpty(spans));
+			return;
+		}
+
+		if (!workerRef.current) {
+			try {
+				workerRef.current = createLayoutWorker();
+			} catch {
+				fallbackRef.current = true;
+				setLayout(computeLayoutOrEmpty(spans));
+				return;
+			}
+		}
+
+		if (!spans.length) {
+			setLayout(EMPTY_LAYOUT);
+			return;
+		}
+
+		const currentId = ++requestIdRef.current;
+		setIsComputing(true);
+		isComputingRef.current = true;
+
+		const worker = workerRef.current;
+
+		const cleanup = (): void => {
+			worker.removeEventListener('message', onMessage);
+			worker.removeEventListener('error', onError);
+			clearTimeout(timeoutId);
+		};
+
+		const onMessage = (e: MessageEvent<LayoutWorkerResponse>): void => {
+			if (e.data.requestId !== requestIdRef.current) {
+				return;
+			}
+			if (e.data.type === 'result') {
+				setLayout(e.data.layout);
+			} else {
+				setError(
+					new Error(e.data.message || 'Flamegraph layout computation failed'),
+				);
+			}
+			setIsComputing(false);
+			isComputingRef.current = false;
+			cleanup();
+		};
+
+		const onError = (e: ErrorEvent): void => {
+			if (requestIdRef.current === currentId) {
+				setIsComputing(false);
+				isComputingRef.current = false;
+				setError(new Error(e.message || 'Flamegraph layout worker failed'));
+			}
+			cleanup();
+		};
+
+		// Timeout: if worker doesn't respond in 30s, terminate and error
+		const WORKER_TIMEOUT_MS = 15000;
+		const timeoutId = setTimeout(() => {
+			if (requestIdRef.current === currentId && isComputingRef.current) {
+				workerRef.current?.terminate();
+				workerRef.current = null;
+				setIsComputing(false);
+				isComputingRef.current = false;
+				setError(new Error('Flamegraph layout computation timed out'));
+			}
+		}, WORKER_TIMEOUT_MS);
+
+		worker.addEventListener('message', onMessage);
+		worker.addEventListener('error', onError);
+		worker.postMessage({ type: 'compute', requestId: currentId, spans });
+
+		return cleanup;
+	}, [spans]);
+
+	// Cleanup worker on unmount
+	useEffect(
+		() => (): void => {
+			workerRef.current?.terminate();
+		},
+		[],
+	);
+
+	return { layout, isComputing, error };
+}

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

@@ -0,0 +1,36 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Event, FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { VisualLayout } from './computeVisualLayout';
+
+export interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+export interface FlamegraphCanvasProps {
+	layout: VisualLayout;
+	firstSpanAtFetchLevel: string;
+	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
+	onSpanClick: (spanId: string) => void;
+	traceMetadata: ITraceMetadata;
+	filteredSpanIds: string[];
+	isFilterActive: boolean;
+}
+
+export interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}
+
+export interface EventRect {
+	event: Event;
+	span: FlamegraphSpan;
+	cx: number;
+	cy: number;
+	halfSize: number;
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -0,0 +1,407 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import {
+	DASHED_BORDER_LINE_DASH,
+	EVENT_DOT_SIZE_RATIO,
+	LABEL_FONT,
+	LABEL_PADDING_X,
+	MAX_EVENT_DOT_SIZE,
+	MAX_SPAN_BAR_HEIGHT,
+	MIN_EVENT_DOT_SIZE,
+	MIN_SPAN_BAR_HEIGHT,
+	MIN_WIDTH_FOR_NAME,
+	MIN_WIDTH_FOR_NAME_AND_DURATION,
+	SPAN_BAR_HEIGHT_RATIO,
+} from './constants';
+import { EventRect, SpanRect } from './types';
+
+export function clamp(v: number, min: number, max: number): number {
+	return Math.max(min, Math.min(max, v));
+}
+
+export function findSpanById(
+	spans: FlamegraphSpan[][],
+	spanId: string,
+): { span: FlamegraphSpan; levelIndex: number } | null {
+	for (let levelIndex = 0; levelIndex < spans.length; levelIndex++) {
+		const span = spans[levelIndex]?.find((s) => s.spanId === spanId);
+		if (span) {
+			return { span, levelIndex };
+		}
+	}
+	return null;
+}
+
+export interface FlamegraphRowMetrics {
+	ROW_HEIGHT: number;
+	SPAN_BAR_HEIGHT: number;
+	SPAN_BAR_Y_OFFSET: number;
+	EVENT_DOT_SIZE: number;
+}
+
+export function getFlamegraphRowMetrics(
+	rowHeight: number,
+): FlamegraphRowMetrics {
+	const spanBarHeight = clamp(
+		Math.round(rowHeight * SPAN_BAR_HEIGHT_RATIO),
+		MIN_SPAN_BAR_HEIGHT,
+		MAX_SPAN_BAR_HEIGHT,
+	);
+	const spanBarYOffset = Math.floor((rowHeight - spanBarHeight) / 2);
+	const eventDotSize = clamp(
+		Math.round(spanBarHeight * EVENT_DOT_SIZE_RATIO),
+		MIN_EVENT_DOT_SIZE,
+		MAX_EVENT_DOT_SIZE,
+	);
+
+	return {
+		ROW_HEIGHT: rowHeight,
+		SPAN_BAR_HEIGHT: spanBarHeight,
+		SPAN_BAR_Y_OFFSET: spanBarYOffset,
+		EVENT_DOT_SIZE: eventDotSize,
+	};
+}
+
+interface GetSpanColorArgs {
+	span: FlamegraphSpan;
+	isDarkMode: boolean;
+}
+
+export function getSpanColor(args: GetSpanColorArgs): string {
+	const { span, isDarkMode } = args;
+	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
+
+	if (span.hasError) {
+		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+	}
+
+	return color;
+}
+
+export interface EventDotColor {
+	fill: string;
+	stroke: string;
+}
+
+/** Derive event dot colors from parent span color. Error events always use red. */
+export function getEventDotColor(
+	spanColor: string,
+	isError: boolean,
+	isDarkMode: boolean,
+): EventDotColor {
+	if (isError) {
+		return {
+			fill: isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)',
+			stroke: isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)',
+		};
+	}
+
+	// Parse the span color (hex or rgb) to darken it for the event dot
+	let r: number | undefined;
+	let g: number | undefined;
+	let b: number | undefined;
+
+	const rgbMatch = spanColor.match(
+		/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+)?\s*\)/,
+	);
+	const hexMatch = spanColor.match(
+		/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i,
+	);
+
+	if (rgbMatch) {
+		r = parseInt(rgbMatch[1], 10);
+		g = parseInt(rgbMatch[2], 10);
+		b = parseInt(rgbMatch[3], 10);
+	} else if (hexMatch) {
+		r = parseInt(hexMatch[1], 16);
+		g = parseInt(hexMatch[2], 16);
+		b = parseInt(hexMatch[3], 16);
+	}
+
+	if (r !== undefined && g !== undefined && b !== undefined) {
+		// Darken by 20% for fill, 40% for stroke
+		const darken = (v: number, factor: number): number =>
+			Math.round(v * (1 - factor));
+		return {
+			fill: `rgb(${darken(r, 0.2)}, ${darken(g, 0.2)}, ${darken(b, 0.2)})`,
+			stroke: `rgb(${darken(r, 0.4)}, ${darken(g, 0.4)}, ${darken(b, 0.4)})`,
+		};
+	}
+
+	// Fallback to original cyan/blue
+	return {
+		fill: isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)',
+		stroke: isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)',
+	};
+}
+
+interface DrawEventDotArgs {
+	ctx: CanvasRenderingContext2D;
+	x: number;
+	y: number;
+	color: EventDotColor;
+	eventDotSize: number;
+}
+
+export function drawEventDot(args: DrawEventDotArgs): void {
+	const { ctx, x, y, color, eventDotSize } = args;
+
+	ctx.save();
+	ctx.translate(x, y);
+	ctx.rotate(Math.PI / 4);
+
+	ctx.fillStyle = color.fill;
+	ctx.strokeStyle = color.stroke;
+
+	ctx.lineWidth = 1;
+	const half = eventDotSize / 2;
+	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.restore();
+}
+
+interface DrawSpanBarArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	levelIndex: number;
+	spanRectsArray: SpanRect[];
+	eventRectsArray: EventRect[];
+	color: string;
+	isDarkMode: boolean;
+	metrics: FlamegraphRowMetrics;
+	selectedSpanId?: string | null;
+	hoveredSpanId?: string | null;
+	hoveredEventKey?: string | null;
+	isDimmedByFilter?: boolean;
+}
+
+export function drawSpanBar(args: DrawSpanBarArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		levelIndex,
+		spanRectsArray,
+		eventRectsArray,
+		color,
+		isDarkMode,
+		metrics,
+		selectedSpanId,
+		hoveredSpanId,
+		hoveredEventKey,
+		isDimmedByFilter,
+	} = args;
+
+	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
+	const isSelected = selectedSpanId === span.spanId;
+	const isHovered = hoveredSpanId === span.spanId;
+	const isSelectedOrHovered = isSelected || isHovered;
+	const shouldDim = isDimmedByFilter && !isSelectedOrHovered;
+
+	// Dim non-matching spans when filter is active (matches waterfall's .dimmed-span { opacity: 0.4 }).
+	// Alpha is applied to bar + events only; label is drawn after restoring alpha to 1
+	// so text stays readable against the faded bar.
+	if (shouldDim) {
+		ctx.globalAlpha = 0.4;
+	}
+
+	ctx.beginPath();
+	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
+
+	if (isSelectedOrHovered) {
+		// Solid fill matching --l2-background token (dark: #16181d, light: #f9f9fb)
+		ctx.fillStyle = isDarkMode ? '#16181d' : '#f9f9fb';
+		ctx.fill();
+		if (isSelected) {
+			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
+		}
+		ctx.strokeStyle = color;
+		ctx.lineWidth = isSelected ? 2 : 1;
+		ctx.stroke();
+		if (isSelected) {
+			ctx.setLineDash([]);
+		}
+	} else {
+		ctx.fillStyle = color;
+		ctx.fill();
+	}
+
+	spanRectsArray.push({
+		span,
+		x,
+		y: spanY,
+		width,
+		height: metrics.SPAN_BAR_HEIGHT,
+		level: levelIndex,
+	});
+
+	span.event?.forEach((event) => {
+		const spanDurationMs = span.durationNano / 1e6;
+		if (spanDurationMs <= 0) {
+			return;
+		}
+
+		const eventTimeMs = event.timeUnixNano / 1e6;
+		const eventOffsetPercent =
+			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
+		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
+		const eventX = x + (clampedOffset / 100) * width;
+		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
+
+		const dotColor = getEventDotColor(color, event.isError, isDarkMode);
+		const eventKey = `${span.spanId}-${event.name}-${event.timeUnixNano}`;
+		const isEventHovered = hoveredEventKey === eventKey;
+		const dotSize = isEventHovered
+			? Math.round(metrics.EVENT_DOT_SIZE * 1.5)
+			: metrics.EVENT_DOT_SIZE;
+
+		drawEventDot({
+			ctx,
+			x: eventX,
+			y: eventY,
+			color: dotColor,
+			eventDotSize: dotSize,
+		});
+
+		eventRectsArray.push({
+			event,
+			span,
+			cx: eventX,
+			cy: eventY,
+			halfSize: metrics.EVENT_DOT_SIZE / 2,
+		});
+	});
+
+	// Restore alpha before drawing label so text is legible on dimmed bars
+	if (shouldDim) {
+		ctx.globalAlpha = 1;
+	}
+
+	drawSpanLabel({
+		ctx,
+		span,
+		x,
+		y: spanY,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
+	});
+}
+
+export function formatDuration(durationNano: number): string {
+	const durationMs = durationNano / 1e6;
+	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
+	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
+}
+
+interface DrawSpanLabelArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	color: string;
+	isSelectedOrHovered: boolean;
+	isDarkMode: boolean;
+	spanBarHeight: number;
+}
+
+function drawSpanLabel(args: DrawSpanLabelArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight,
+	} = args;
+
+	if (width < MIN_WIDTH_FOR_NAME) {
+		return;
+	}
+
+	const name = span.name;
+
+	ctx.save();
+
+	// Clip text to span bar bounds
+	ctx.beginPath();
+	ctx.rect(x, y, width, spanBarHeight);
+	ctx.clip();
+
+	ctx.font = LABEL_FONT;
+	ctx.fillStyle = isSelectedOrHovered
+		? color
+		: isDarkMode
+		? 'rgba(0, 0, 0, 0.9)'
+		: 'rgba(255, 255, 255, 0.9)';
+	ctx.textBaseline = 'middle';
+
+	const textY = y + spanBarHeight / 2;
+	const leftX = x + LABEL_PADDING_X;
+	const rightX = x + width - LABEL_PADDING_X;
+	const availableWidth = width - LABEL_PADDING_X * 2;
+
+	if (width >= MIN_WIDTH_FOR_NAME_AND_DURATION) {
+		const duration = formatDuration(span.durationNano);
+		const durationWidth = ctx.measureText(duration).width;
+		const minGap = 6;
+		const nameSpace = availableWidth - durationWidth - minGap;
+
+		// Duration right-aligned
+		ctx.textAlign = 'right';
+		ctx.fillText(duration, rightX, textY);
+
+		// Name left-aligned, truncated to fit remaining space
+		if (nameSpace > 20) {
+			ctx.textAlign = 'left';
+			ctx.fillText(truncateText(ctx, name, nameSpace), leftX, textY);
+		}
+	} else {
+		// Name only, truncated to fit
+		ctx.textAlign = 'left';
+		ctx.fillText(truncateText(ctx, name, availableWidth), leftX, textY);
+	}
+
+	ctx.restore();
+}
+
+function truncateText(
+	ctx: CanvasRenderingContext2D,
+	text: string,
+	maxWidth: number,
+): string {
+	const ellipsis = '...';
+	const ellipsisWidth = ctx.measureText(ellipsis).width;
+
+	if (ctx.measureText(text).width <= maxWidth) {
+		return text;
+	}
+
+	let lo = 0;
+	let hi = text.length;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) {
+			lo = mid;
+		} else {
+			hi = mid - 1;
+		}
+	}
+
+	return lo > 0 ? `${text.slice(0, lo)}${ellipsis}` : ellipsis;
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayout.worker.ts

@@ -0,0 +1,26 @@
+/// <reference lib="webworker" />
+import { computeVisualLayout } from './computeVisualLayout';
+import {
+	LayoutWorkerRequest,
+	LayoutWorkerResponse,
+} from './visualLayoutWorkerTypes';
+
+self.onmessage = (event: MessageEvent<LayoutWorkerRequest>): void => {
+	const { requestId, spans } = event.data;
+	try {
+		const layout = computeVisualLayout(spans);
+		const response: LayoutWorkerResponse = {
+			type: 'result',
+			requestId,
+			layout,
+		};
+		self.postMessage(response);
+	} catch (err) {
+		const response: LayoutWorkerResponse = {
+			type: 'error',
+			requestId,
+			message: String(err),
+		};
+		self.postMessage(response);
+	}
+};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayoutWorkerTypes.ts

@@ -0,0 +1,13 @@
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { VisualLayout } from './computeVisualLayout';
+
+export interface LayoutWorkerRequest {
+	type: 'compute';
+	requestId: number;
+	spans: FlamegraphSpan[][];
+}
+
+export type LayoutWorkerResponse =
+	| { type: 'result'; requestId: number; layout: VisualLayout }
+	| { type: 'error'; requestId: number; message: string };

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss

@@ -0,0 +1,11 @@
+.trace-waterfall {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	.loading-skeleton {
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx

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

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/NoData/NoData.tsx

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

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

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

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

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