fix(fmt): lint issue

perf(with-web-dockerfile): skip build with race
fix(timeline-pagination): improve flaky test
2026-07-31 02:01:12 +01:00 · 2026-07-30 17:59:02 -03:00 · 2026-07-30 17:03:05 -03:00 · 2026-07-30 17:01:08 -03:00 · 2026-07-30 16:09:05 -03:00 · 2026-07-30 16:09:04 -03:00
356 changed files with 148955 additions and 2827 deletions
--- a/.github/workflows/integrationci.yaml
+++ b/.github/workflows/integrationci.yaml
@@ -54,6 +54,7 @@ jobs:
          - querierscalar
          - queriercommon
          - rawexportdata
+          - promqlconformance
          - querierauthz
          - role
          - rootuser
--- a/cmd/authz.go
+++ b/cmd/authz.go
@@ -93,9 +93,13 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()

 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                     true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
 	}

 	allowedTypes := map[string]bool{}
--- a/cmd/enterprise/Dockerfile.with-web.integration
+++ b/cmd/enterprise/Dockerfile.with-web.integration
@@ -38,7 +38,8 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates

 COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+
+RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz

 COPY --from=build /opt/build ./web/
--- a/cmd/enterprise/meter.go
+++ b/cmd/enterprise/meter.go
@@ -2,9 +2,9 @@ package main

 import (
 	"github.com/SigNoz/signoz/pkg/metercollector"
-	"github.com/SigNoz/signoz/pkg/telemetrylogs"
-	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
-	"github.com/SigNoz/signoz/pkg/telemetrytraces"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/logstelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/tracestelemetryschema"
 	"github.com/SigNoz/signoz/pkg/types/retentiontypes"
 	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 )
@@ -25,8 +25,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterLogSize,
 			Unit:                 zeustypes.MeterUnitBytes,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               telemetrylogs.DBName,
-			TableName:            telemetrylogs.LogsV2LocalTableName,
+			DBName:               logstelemetryschema.DBName,
+			TableName:            logstelemetryschema.LogsV2LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultLogsRetentionDays,
 		},
 	},
@@ -36,8 +36,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterSpanSize,
 			Unit:                 zeustypes.MeterUnitBytes,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               telemetrytraces.DBName,
-			TableName:            telemetrytraces.SpanIndexV3LocalTableName,
+			DBName:               tracestelemetryschema.DBName,
+			TableName:            tracestelemetryschema.SpanIndexV3LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultTracesRetentionDays,
 		},
 	},
@@ -47,8 +47,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterDatapointCount,
 			Unit:                 zeustypes.MeterUnitCount,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               telemetrymetrics.DBName,
-			TableName:            telemetrymetrics.SamplesV4LocalTableName,
+			DBName:               metricstelemetryschema.DBName,
+			TableName:            metricstelemetryschema.SamplesV4LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultMetricsRetentionDays,
 		},
 	},
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -1496,6 +1496,9 @@ components:
      - redis
      - cloudsql_postgres
      - memorystore_redis
+      - computeengine
+      - gke
+      - cloudstorage
      type: string
    CloudintegrationtypesServiceMetadata:
      properties:
@@ -9934,14 +9937,9 @@ paths:
    get:
      deprecated: false
      description: This endpoint lists the services metadata for the specified cloud
-        provider
+        provider, without any account context.
      operationId: ListServicesMetadata
      parameters:
-      - in: query
-        name: cloud_integration_id
-        required: false
-        schema:
-          type: string
      - in: path
        name: cloud_provider
        required: true
@@ -9991,14 +9989,10 @@ paths:
  /api/v1/cloud_integrations/{cloud_provider}/services/{service_id}:
    get:
      deprecated: false
-      description: This endpoint gets a service for the specified cloud provider
+      description: This endpoint gets a service definition for the specified cloud
+        provider, without any account context.
      operationId: GetService
      parameters:
-      - in: query
-        name: cloud_integration_id
-        required: false
-        schema:
-          type: string
      - in: path
        name: cloud_provider
        required: true
--- a/docs/contributing/tests/e2e.md
+++ b/docs/contributing/tests/e2e.md
@@ -227,11 +227,14 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium

+# Single sub-area
+npx playwright test tests/alerts/history/ --project=chromium
+
 # Single file
-npx playwright test tests/alerts/alerts.spec.ts --project=chromium
+npx playwright test tests/alerts/page.spec.ts --project=chromium

 # Single test by title grep
-npx playwright test --project=chromium -g "TC-01"
+npx playwright test --project=chromium -g "AL-01"
 ```

 ### Iterative modes
@@ -265,7 +268,14 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |

-Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
+Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
+
+```bash
+# runs against a locally served frontend, not whatever .env.local points at
+SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
+```
+
+This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.

 ### Playwright options

--- a/ee/metercollector/telemetrymetercollector/provider.go
+++ b/ee/metercollector/telemetrymetercollector/provider.go
@@ -16,7 +16,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/metercollector"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
-	"github.com/SigNoz/signoz/pkg/telemetrymeter"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/metertelemetryschema"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/licensetypes"
 	"github.com/SigNoz/signoz/pkg/types/retentiontypes"
@@ -153,7 +153,7 @@ func (provider *Provider) Collect(
 func buildOriginQuery(meterName string) (string, []any) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("toInt64(ifNull(min(unix_milli), 0))")
-	sb.From(telemetrymeter.DBName + "." + telemetrymeter.SamplesTableName)
+	sb.From(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
 	sb.Where(sb.Equal("metric_name", meterName))
 	return sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 }
@@ -171,7 +171,7 @@ func buildQuery(meterName string, segment *retentiontypes.RetentionPolicySegment

 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(selects...)
-	sb.From(telemetrymeter.DBName + "." + telemetrymeter.SamplesTableName)
+	sb.From(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
 	sb.Where(
 		sb.Equal("metric_name", meterName),
 		sb.GTE("unix_milli", segment.StartMs),
--- a/ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go
+++ b/ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go
@@ -8,16 +8,16 @@ import (
 	sqlbuilder "github.com/huandu/go-sqlbuilder"

 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
 )

 var (
-	reductionRulesTable = telemetrymetrics.DBName + "." + telemetrymetrics.ReductionRulesTableName
-	metadataTable       = telemetrymetrics.DBName + "." + telemetrymetrics.AttributesMetadataTableName
-	bufferSeriesTable   = telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4BufferTableName
+	reductionRulesTable = metricstelemetryschema.DBName + "." + metricstelemetryschema.ReductionRulesTableName
+	metadataTable       = metricstelemetryschema.DBName + "." + metricstelemetryschema.AttributesMetadataTableName
+	bufferSeriesTable   = metricstelemetryschema.DBName + "." + metricstelemetryschema.TimeseriesV4BufferTableName
 )

 const timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
@@ -192,7 +192,7 @@ func (c *clickhouse) ingestedSeriesCount(ctx context.Context, metricNames []stri

 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("metric_name", "uniq(fingerprint)")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	conds := []string{
 		sb.In("metric_name", names...),
 		sb.GE("unix_milli", startMs),
@@ -229,8 +229,8 @@ func (c *clickhouse) ingestedSeriesCount(ctx context.Context, metricNames []stri
 // reduced sample tables.
 func (c *clickhouse) reducedSeriesCount(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
 	out := make(map[string]uint64, len(metricNames))
-	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
-		counts, err := c.reducedSeriesCountForTable(ctx, telemetrymetrics.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
+	for _, table := range []string{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
+		counts, err := c.reducedSeriesCountForTable(ctx, metricstelemetryschema.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
 		if err != nil {
 			return nil, err
 		}
@@ -300,9 +300,9 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 		direction = "DESC"
 	}

-	ingestedTable := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName
-	reducedLast := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedLastTableName
-	reducedSum := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedSumTableName
+	ingestedTable := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName
+	reducedLast := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedLastTableName
+	reducedSum := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedSumTableName

 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("base.metric_name AS metric_name", "ifNull(i.cnt, 0) AS ingested", "ifNull(d.cnt, 0) AS reduced")
@@ -352,16 +352,16 @@ func (c *clickhouse) SampleVolumeByMetric(ctx context.Context, metricNames []str
 	}
 	ctx = c.withThreads(ctx)

-	ingested, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
+	ingested, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}

-	last, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	last, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
-	sum, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	sum, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
@@ -419,7 +419,7 @@ func (c *clickhouse) TotalVolume(ctx context.Context, startMs, endMs int64) (uin

 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("uniq(fingerprint)", "count()")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))

 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
@@ -470,7 +470,7 @@ func (c *clickhouse) SampleTimeseries(ctx context.Context, ruledMetrics []string
 func (c *clickhouse) totalSamplesByBucket(ctx context.Context, startMs, endMs int64) (map[int64]uint64, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(sampleBucketExpr, "count()")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
 	sb.GroupBy("bucket")

@@ -485,7 +485,7 @@ func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNam

 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(sampleBucketExpr, "count()")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
 	if len(effectiveFrom) > 0 {
 		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
@@ -499,7 +499,7 @@ func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNam
 // reduced 60s rows are versioned by computed_at, so count distinct buckets.
 func (c *clickhouse) ruledRetainedSamplesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
 	out := make(map[int64]uint64)
-	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
+	for _, table := range []string{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
 		names := make([]any, len(metricNames))
 		for i, name := range metricNames {
 			names[i] = name
@@ -507,7 +507,7 @@ func (c *clickhouse) ruledRetainedSamplesByBucket(ctx context.Context, metricNam

 		sb := sqlbuilder.NewSelectBuilder()
 		sb.Select(sampleBucketExpr, "uniq(reduced_fingerprint, unix_milli)")
-		sb.From(telemetrymetrics.DBName + "." + table)
+		sb.From(metricstelemetryschema.DBName + "." + table)
 		conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
 		if len(effectiveFrom) > 0 {
 			conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
--- a/frontend/docs/assets/drawer-example.svg
+++ b/frontend/docs/assets/drawer-example.svg
--- a/frontend/docs/assets/edit-example.svg
+++ b/frontend/docs/assets/edit-example.svg
--- a/frontend/docs/assets/list-example.svg
+++ b/frontend/docs/assets/list-example.svg
--- a/frontend/docs/assets/quick-filters-example.svg
+++ b/frontend/docs/assets/quick-filters-example.svg
--- a/frontend/docs/authz-guide.md
+++ b/frontend/docs/authz-guide.md
@@ -0,0 +1,136 @@
+# AuthZ Guide
+
+How to structure a page so it works with the permission system.
+
+We are migrating from the `ADMIN | EDITOR | VIEWER` roles to per-action checks. Instead of granting `VIEWER` and
+exposing everything, a user can now be granted access to a single resource, eg: `Logs` only.
+
+- [Prerequisites](#prerequisites)
+- [Core rules](#core-rules)
+- [Page patterns](#page-patterns)
+- [What "blocked" means](#what-blocked-means)
+- [Migration checklist](#migration-checklist)
+- [Testing](#testing)
+
+## Prerequisites
+
+Check whether the resource your page represents is supported: see
+[permissions.type.ts](../src/lib/authz/hooks/useAuthZ/permissions.type.ts) for the current resources and their allowed
+verbs.
+
+**If the resource is not listed there, skip authz for now**. The backend does not enforce it yet, so any frontend
+check would be decorative. Revisit once the resource is generated into that file (it is auto-generated from the
+backend).
+
+## Core rules
+
+These hold for every page. The per-pattern sections below only add to them.
+
+1. **A page is always reachable, regardless of permission.** The intended action must be known before permission can
+   be checked, so the route renders first and individual pieces are gated.
+2. **`update` requires both `read` and `update`.** A user who can write but cannot read the current value must not get
+   an edit affordance.
+3. **`delete` is independent of `read`.** Delete controls stay visible for a user who holds `delete` but not `read`.
+4. **Never gate per row.** If a user can `list`, render every row. Check `read` only when the row is opened (drawer or
+   detail route).
+5. **Gate the narrowest thing that works**, a button over a section, a section over a page.
+6. **A resource may be gated while a sub-resource is not.** A user without `read` on Service Accounts can still hold
+   `create` on API Keys, so blocking the outer container would hide work they are allowed to do.
+7. **Verbs not covered here** (`attach`, `detach`, `assignee`) behave like `delete`: gate the control that triggers
+   them, not the surrounding content.
+
+## Page patterns
+
+### List page
+
+![Visual rules for structuring a list page](./assets/list-example.svg)
+
+Without `list`, but with any of `read` / `create` / `update`, only the table is blocked:
+
+- Title, description, search filters and action buttons stay visible.
+- Filters and any control that drives the table are non-interactive.
+- The create button stays enabled if the user holds `create`.
+
+### Edit page
+
+![Visual rules for structuring an edit page](./assets/edit-example.svg)
+
+Without `read`:
+
+- Block the content with `withAuthZContent`, not the whole route.
+- Keep delete visible (rule 3).
+- Keep update blocked (rule 2).
+
+### Drawer
+
+![Visual rules for structuring a drawer](./assets/drawer-example.svg)
+
+Without `read`:
+
+- Block the drawer body, not the drawer itself.
+- Prefer routing that carries the resource ID in the URL, so delete stays reachable without `read`.
+- Keep update blocked (rule 2).
+- Watch for sub-resources the user may still be allowed to act on (rule 6).
+
+### Create
+
+Without `create`:
+
+| Entry point           | Gate with                                                     |
+| --------------------- | ------------------------------------------------------------- |
+| Button                | `AuthZButton`                                                 |
+| Dedicated create page | `withAuthZPage`                                               |
+| Create drawer opened directly (deep link) | `withAuthZContent` on the body + `AuthZButton` on footer actions |
+
+### Delete
+
+Gate the control with `AuthZButton`, or `AuthZTooltip` for a non-button trigger such as an icon or menu item.
+
+### Quick filters
+
+![Visual rules for structuring a page with quick filters](./assets/quick-filters-example.svg)
+
+## What "blocked" means
+
+Blocking is always a visible denial, never a silent removal. Use the components in
+[`lib/authz/components`](../src/lib/authz/components/README.md) rather than hand-rolling a check, they carry the
+denial message and the loading state.
+
+| Scope           | Component                                 | Denied state                                |
+| --------------- | ----------------------------------------- | ------------------------------------------- |
+| Button          | `AuthZButton`                             | Disabled + tooltip                          |
+| Any element      | `AuthZTooltip`                            | Disabled child + tooltip                    |
+| Section         | `withAuthZContent` / `AuthZGuardContent`  | Inline `PermissionDeniedCallout`            |
+| Page / route    | `withAuthZPage` / `AuthZGuardPage`        | `PermissionDeniedFullPage`                  |
+| Custom fallback | `withAuthZ` / `AuthZGuard`                | Whatever you pass as `fallback`             |
+
+Prefer the HOC (`withAuthZ*`); reach for the JSX guard (`AuthZGuard*`) when the gate depends on conditional rendering
+and an HOC cannot express it. The components README has the full decision tree and how to build the `checks` array.
+
+## Migration checklist
+
+Use the existing components. Create a new one only if none fit.
+
+- [ ] Can I apply a `withAuthZ*` variant directly, or must I extract the content into a component first?
+  - If extraction is needed, declare the new content component in the same file to keep the diff small, then move it
+    to its own file in a follow-up commit or PR.
+- [ ] Is the layout structured to respect the [core rules](#core-rules)?
+  - If not, raise it in the frontend Slack channel before reshaping the page.
+- [ ] Am I gating a shared component rather than a page or section?
+  - If so, it must stay functional with no permission. Example: the Query Builder works without field suggestions when
+    the user cannot read them.
+
+## Testing
+
+### Devtool
+
+Press `Cmd + K` (`Ctrl + K` on Windows/Linux) to open the shortcuts, search for `AuthZ`, and pick the first
+result. The devtool simulates granted and denied permissions across the UI.
+
+Available only in local development, it is stripped from production builds.
+
+### Unit tests
+
+[`lib/authz/utils/README.md`](../src/lib/authz/utils/README.md) covers the `*.authz.test.tsx` naming convention, the
+MSW handlers (`setupAuthzAdmin`, `setupAuthzDenyAll`, `setupAuthzDeny`, `setupAuthzAllow`,
+`setupAuthzGrantByPrefix`), and how to test the loading state.
--- a/frontend/src/AppRoutes/Private.tsx
+++ b/frontend/src/AppRoutes/Private.tsx
@@ -14,7 +14,10 @@ import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
 import { USER_ROLES } from 'types/roles';
-import { routePermission } from 'utils/permission';
+import {
+	routePermission,
+	routeWithInitialAuthZSupport,
+} from 'utils/permission';

 import routes, {
 	LIST_LICENSES,
@@ -42,7 +45,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
-
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -226,7 +228,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		if (isPrivate) {
 			if (isLoggedInState) {
 				const route = routePermission[key];
-				if (route && route.find((e) => e === user.role) === undefined) {
+				const hasInitialAuthZSupport = Object.hasOwn(
+					routeWithInitialAuthZSupport,
+					key,
+				);
+
+				if (
+					route &&
+					route.find((e) => e === user.role) === undefined &&
+					hasInitialAuthZSupport === false
+				) {
 					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
 				}
 			} else {
--- a/frontend/src/AppRoutes/tests/Private.test.tsx
+++ b/frontend/src/AppRoutes/tests/Private.test.tsx
@@ -17,6 +17,7 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
 import { ROLES, USER_ROLES } from 'types/roles';
+import { routeWithInitialAuthZSupport } from 'utils/permission';

 import PrivateRoute from '../Private';

@@ -178,6 +179,7 @@ function createMockAppContext(
 		isFetchingHosts: false,
 		isFetchingFeatureFlags: false,
 		isFetchingOrgPreferences: false,
+		isFetchingUserPreferences: false,
 		userFetchError: null,
 		activeLicenseFetchError: null,
 		hostsFetchError: null,
@@ -198,24 +200,39 @@ function createMockAppContext(
 	};
 }

+// Roles that no authz-aware route grants through the legacy routePermission table
+const DENIED_ROLES: ROLES[] = [
+	USER_ROLES.ANONYMOUS as ROLES,
+	USER_ROLES.AUTHOR as ROLES,
+];
+
+const PERMITTED_ROLES: ROLES[] = [
+	USER_ROLES.ADMIN as ROLES,
+	USER_ROLES.EDITOR as ROLES,
+	USER_ROLES.VIEWER as ROLES,
+];
+
+interface AuthzRouteCase {
+	path: string;
+	deniedRoles: ROLES[];
+}
+
 interface RenderPrivateRouteOptions {
 	initialRoute?: string;
 	appContext?: Partial<IAppContext>;
 	isCloudUser?: boolean;
 }

-function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
-	const {
-		initialRoute = ROUTES.HOME,
-		appContext = {},
-		isCloudUser = true,
-	} = options;
+function buildPrivateRouteTree(
+	options: RenderPrivateRouteOptions,
+): ReactElement {
+	const { initialRoute = ROUTES.HOME, appContext = {} } = options;

-	mockIsCloudUser = isCloudUser;
+	const contextValue = createMockAppContext({
+		...appContext,
+	});

-	const contextValue = createMockAppContext(appContext);
-
-	render(
+	return (
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
 				<AppContext.Provider value={contextValue}>
@@ -229,10 +246,15 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 					</PrivateRoute>
 				</AppContext.Provider>
 			</MemoryRouter>
-		</QueryClientProvider>,
+		</QueryClientProvider>
 	);
 }

+function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
+	mockIsCloudUser = options.isCloudUser ?? true;
+	render(buildPrivateRouteTree(options));
+}
+
 // Generic assertion helpers for navigation behavior
 // Using location-based assertions since Private.tsx now uses Redirect component

@@ -1432,6 +1454,25 @@ describe('PrivateRoute', () => {

 			assertStaysOnRoute(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
+
+		it.each([...PERMITTED_ROLES, ...DENIED_ROLES])(
+			'should render the unauthorized page for a %s instead of bouncing off it',
+			(role) => {
+				// routePermission.UN_AUTHORIZED must grant every role: a role denied here
+				// is redirected to /un-authorized and then redirected away from it again,
+				// which loops until React bails out with a blank screen.
+				renderPrivateRoute({
+					initialRoute: ROUTES.UN_AUTHORIZED,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				assertStaysOnRoute(ROUTES.UN_AUTHORIZED);
+				assertRendersChildren();
+			},
+		);
 	});

 	describe('Edge Cases', () => {
@@ -1477,6 +1518,174 @@ describe('PrivateRoute', () => {
 		});
 	});

+	describe('AuthZ Support (routeWithInitialAuthZSupport)', () => {
+		// Routes in routeWithInitialAuthZSupport always bypass legacy role check
+		const AUTHZ_ROUTE_CASES: Record<
+			keyof typeof routeWithInitialAuthZSupport,
+			AuthzRouteCase
+		> = {
+			// Everything under /settings resolves to the non-exact SETTINGS route
+			SETTINGS: { path: ROUTES.SETTINGS, deniedRoles: DENIED_ROLES },
+			MY_SETTINGS: { path: ROUTES.MY_SETTINGS, deniedRoles: DENIED_ROLES },
+			ROLES_SETTINGS: { path: ROUTES.ROLES_SETTINGS, deniedRoles: DENIED_ROLES },
+			ROLE_CREATE: { path: ROUTES.ROLE_CREATE, deniedRoles: DENIED_ROLES },
+			ROLE_DETAILS: {
+				path: ROUTES.ROLE_DETAILS.replace(':roleId', 'role-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			ROLE_EDIT: {
+				path: ROUTES.ROLE_EDIT.replace(':roleId', 'role-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			SERVICE_ACCOUNTS_SETTINGS: {
+				path: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+				deniedRoles: DENIED_ROLES,
+			},
+			TRACES_EXPLORER: { path: ROUTES.TRACES_EXPLORER, deniedRoles: DENIED_ROLES },
+			TRACE: { path: ROUTES.TRACE, deniedRoles: DENIED_ROLES },
+			TRACE_DETAIL: {
+				path: ROUTES.TRACE_DETAIL.replace(':id', 'trace-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			TRACE_DETAIL_OLD: {
+				path: ROUTES.TRACE_DETAIL_OLD.replace(':id', 'trace-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			// LOGS and LOGS_EXPLORER share a path - matchPath resolves it to whichever
+			// route definition comes last, and both keys are authz-aware either way.
+			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
+			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
+			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
+			OLD_LOGS_EXPLORER: {
+				path: ROUTES.OLD_LOGS_EXPLORER,
+				deniedRoles: DENIED_ROLES,
+			},
+			METRICS_EXPLORER: {
+				path: ROUTES.METRICS_EXPLORER,
+				deniedRoles: DENIED_ROLES,
+			},
+			METRICS_EXPLORER_EXPLORER: {
+				path: ROUTES.METRICS_EXPLORER_EXPLORER,
+				deniedRoles: DENIED_ROLES,
+			},
+			METRICS_EXPLORER_VOLUME_CONTROL: {
+				path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
+				deniedRoles: DENIED_ROLES,
+			},
+			METER: { path: ROUTES.METER, deniedRoles: DENIED_ROLES },
+			METER_EXPLORER: { path: ROUTES.METER_EXPLORER, deniedRoles: DENIED_ROLES },
+			// SUPPORT already grants ANONYMOUS in routePermission, so only AUTHOR
+			// exercises the redirect branch here.
+			SUPPORT: {
+				path: ROUTES.SUPPORT,
+				deniedRoles: [USER_ROLES.AUTHOR as ROLES],
+			},
+		};
+
+		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(
+			AUTHZ_ROUTE_CASES,
+		).flatMap(([name, { path, deniedRoles }]) =>
+			deniedRoles.map((role): [string, string, ROLES] => [name, path, role]),
+		);
+
+		// Routes with no authz check - legacy role check still applies
+		const NON_AUTHZ_ROUTE_CASES: [string, string, ROLES][] = [
+			['ALERTS_NEW', ROUTES.ALERTS_NEW, USER_ROLES.VIEWER as ROLES],
+			['LIST_LICENSES', ROUTES.LIST_LICENSES, USER_ROLES.EDITOR as ROLES],
+			['ONBOARDING', ROUTES.ONBOARDING, USER_ROLES.VIEWER as ROLES],
+			['APPLICATION', ROUTES.APPLICATION, USER_ROLES.ANONYMOUS as ROLES],
+			[
+				'METRICS_EXPLORER_VIEWS',
+				ROUTES.METRICS_EXPLORER_VIEWS,
+				USER_ROLES.ANONYMOUS as ROLES,
+			],
+		];
+
+		it.each(authzRouteRolePairs)(
+			'should not redirect %s (%s) for role %s - authz routes bypass legacy role check',
+			(_name, path, role) => {
+				// Routes in routeWithInitialAuthZSupport always bypass the legacy role check.
+				// Authorization is handled by downstream components via fine-grained authz.
+				renderPrivateRoute({
+					initialRoute: path,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				assertStaysOnRoute(path);
+				assertRendersChildren();
+			},
+		);
+
+		it.each([...PERMITTED_ROLES, ...DENIED_ROLES])(
+			'should not redirect a %s from an authz-aware route',
+			(role) => {
+				// All roles pass through - authorization handled downstream
+				renderPrivateRoute({
+					initialRoute: ROUTES.LOGS_EXPLORER,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				assertStaysOnRoute(ROUTES.LOGS_EXPLORER);
+				assertRendersChildren();
+			},
+		);
+
+		it.each(NON_AUTHZ_ROUTE_CASES)(
+			'should redirect %s (%s) for role %s - non-authz routes use legacy role check',
+			async (_name, path, role) => {
+				// Routes NOT in routeWithInitialAuthZSupport still use legacy role check
+				renderPrivateRoute({
+					initialRoute: path,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
+			},
+		);
+
+		it.each(authzRouteRolePairs)(
+			'should still redirect unauthenticated users away from %s (%s) with role %s',
+			async (_name, path, role) => {
+				// The authz bypass only relaxes the role check, never the login check.
+				renderPrivateRoute({
+					initialRoute: path,
+					appContext: {
+						isLoggedIn: false,
+						user: createMockUser({ role }),
+					},
+				});
+
+				await assertRedirectsTo(ROUTES.LOGIN);
+			},
+		);
+
+		it('should still redirect to workspace locked from an authz-aware route', async () => {
+			// Workspace guards run before the role check and must not be bypassed.
+			renderPrivateRoute({
+				initialRoute: ROUTES.LOGS_EXPLORER,
+				appContext: {
+					isLoggedIn: true,
+					isFetchingActiveLicense: false,
+					activeLicense: createMockLicense({ platform: LicensePlatform.CLOUD }),
+					trialInfo: createMockTrialInfo({ workSpaceBlock: true }),
+					user: createMockUser({ role: USER_ROLES.VIEWER as ROLES }),
+				},
+				isCloudUser: true,
+			});
+
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
+		});
+	});
+
 	describe('Old channel route redirects', () => {
 		it.each([
 			['/settings/channels', '/alerts', 'tab=Channels'],
--- a/frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts
+++ b/frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts
@@ -2,6 +2,29 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';

+// The wire shape these handlers can actually rely on. The generated
+// RenderErrorResponseDTO marks code/message/url/errors as required, but the
+// server omits any of them even on valid errors (e.g. a 400 with just a
+// message), so a present `error` object is all the guard can guarantee.
+type ErrorEnvelope = {
+	error: {
+		code?: string;
+		message?: string;
+		url?: string;
+		errors?: { message?: string }[];
+	};
+};
+
+function isErrorEnvelope(data: unknown): data is ErrorEnvelope {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorEnvelope).error === 'object' &&
+		(data as ErrorEnvelope).error !== null
+	);
+}
+
 // @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
@@ -10,15 +33,29 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// The body isn't guaranteed to be an error envelope — e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy. Verify the shape before reading
+		// it; otherwise synthesize a consistent error from the status.
+		const data: unknown = response.data;
+		if (isErrorEnvelope(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: {
+					code: code ?? '',
+					message: message ?? '',
+					url: url ?? '',
+					errors: (errors ?? []).map((e) => ({ message: e.message ?? '' })),
+				},
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url ?? '',
-				errors: (response.data.error.errors ?? []).map((e) => ({
-					message: e.message ?? '',
-				})),
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}
@@ -62,9 +99,7 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code:
-				errorData?.code ||
-				String(response?.status || error.code || 'unknown_error'),
+			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
 			message:
 				errorData?.message ||
 				response?.statusText ||
--- a/frontend/src/api/ErrorResponseHandlerV2.ts
+++ b/frontend/src/api/ErrorResponseHandlerV2.ts
@@ -2,19 +2,38 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';

+function isErrorV2Resp(data: unknown): data is ErrorV2Resp {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorV2Resp).error?.code === 'string'
+	);
+}
+
 // reference - https://axios-http.com/docs/handling_errors
 export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	const { response, request } = error;
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// response.data isn't guaranteed to be a V2 envelope (e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy), so verify the shape first.
+		const data: unknown = response.data;
+		if (isErrorV2Resp(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: { code, message, url, errors },
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url,
-				errors: response.data.error.errors,
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}
--- a/frontend/src/api/tests/ErrorResponseHandlerV2.test.ts
+++ b/frontend/src/api/tests/ErrorResponseHandlerV2.test.ts
@@ -0,0 +1,126 @@
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+function asAxiosError(partial: Partial<AxiosError>): AxiosError<ErrorV2Resp> {
+	return partial as AxiosError<ErrorV2Resp>;
+}
+
+// ErrorResponseHandlerV2 always throws — capture the APIError so assertions stay
+// unconditional.
+function runHandler(error: AxiosError<ErrorV2Resp>): APIError {
+	try {
+		ErrorResponseHandlerV2(error);
+	} catch (thrown) {
+		return thrown as APIError;
+	}
+	throw new Error('expected ErrorResponseHandlerV2 to throw');
+}
+
+type ExpectedError = {
+	httpStatusCode: number;
+	code: string;
+	message: string;
+	errors: { message: string }[];
+};
+
+// One row per response shape the handler must normalize. New shapes (with
+// different bodies) can be added here without a new test block.
+const cases: {
+	name: string;
+	error: AxiosError<ErrorV2Resp>;
+	expected: ExpectedError;
+}[] = [
+	{
+		name: 'well-formed V2 error envelope',
+		error: asAxiosError({
+			message: 'Request failed with status code 400',
+			response: {
+				status: 400,
+				data: {
+					error: {
+						code: 'bad_request',
+						message: 'Invalid dashboard payload',
+						url: 'https://signoz.io/docs',
+						errors: [{ message: 'name is required' }, { message: 'name too long' }],
+					},
+				},
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 400,
+			code: 'bad_request',
+			message: 'Invalid dashboard payload',
+			errors: [{ message: 'name is required' }, { message: 'name too long' }],
+		},
+	},
+	{
+		// Regression: during a deployment the gateway returns a 5xx with a
+		// non-envelope body. Reading response.data.error.code used to throw a
+		// TypeError from inside the handler itself. See engineering-pod#5760.
+		name: '5xx with a non-envelope HTML body',
+		error: asAxiosError({
+			message: 'Request failed with status code 503',
+			response: {
+				status: 503,
+				data: '<html><body>503 Service Temporarily Unavailable</body></html>',
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 503,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 503',
+			errors: [],
+		},
+	},
+	{
+		name: '5xx with an empty body',
+		error: asAxiosError({
+			message: 'Request failed with status code 502',
+			response: {
+				status: 502,
+				data: undefined,
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 502,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 502',
+			errors: [],
+		},
+	},
+	{
+		name: 'no response received (network error)',
+		error: asAxiosError({
+			message: 'Network Error',
+			code: 'ERR_NETWORK',
+			name: 'AxiosError',
+			request: {},
+		}),
+		expected: {
+			httpStatusCode: 500,
+			code: 'ERR_NETWORK',
+			message: 'Network Error',
+			errors: [],
+		},
+	},
+];
+
+describe('ErrorResponseHandlerV2', () => {
+	it.each(cases)(
+		'normalizes $name into a consistent APIError',
+		({ error, expected }) => {
+			const apiError = runHandler(error);
+
+			expect(apiError).toBeInstanceOf(APIError);
+			expect(apiError.getHttpStatusCode()).toBe(expected.httpStatusCode);
+			expect(apiError.getErrorCode()).toBe(expected.code);
+			expect(apiError.getErrorMessage()).toBe(expected.message);
+			// The sub-error messages feed several parts of the UI, so assert them.
+			expect(apiError.getErrorDetails().error.errors).toStrictEqual(
+				expected.errors,
+			);
+		},
+	);
+});
--- a/frontend/src/api/alerts/ruleStats.ts
+++ b/frontend/src/api/alerts/ruleStats.ts
@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleStatsPayload } from 'types/api/alerts/def';
-import { RuleStatsProps } from 'types/api/alerts/ruleStats';
-
-const ruleStats = async (
-	props: RuleStatsProps,
-): Promise<SuccessResponse<AlertRuleStatsPayload> | ErrorResponse> => {
-	try {
-		const response = await axios.post(`/rules/${props.id}/history/stats`, {
-			start: props.start,
-			end: props.end,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default ruleStats;
--- a/frontend/src/api/alerts/timelineGraph.ts
+++ b/frontend/src/api/alerts/timelineGraph.ts
@@ -1,33 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleTimelineGraphResponsePayload } from 'types/api/alerts/def';
-import { GetTimelineGraphRequestProps } from 'types/api/alerts/timelineGraph';
-
-const timelineGraph = async (
-	props: GetTimelineGraphRequestProps,
-): Promise<
-	SuccessResponse<AlertRuleTimelineGraphResponsePayload> | ErrorResponse
-> => {
-	try {
-		const response = await axios.post(
-			`/rules/${props.id}/history/overall_status`,
-			{
-				start: props.start,
-				end: props.end,
-			},
-		);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default timelineGraph;
--- a/frontend/src/api/alerts/timelineTable.ts
+++ b/frontend/src/api/alerts/timelineTable.ts
@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleTimelineTableResponsePayload } from 'types/api/alerts/def';
-import { GetTimelineTableRequestProps } from 'types/api/alerts/timelineTable';
-
-const timelineTable = async (
-	props: GetTimelineTableRequestProps,
-): Promise<
-	SuccessResponse<AlertRuleTimelineTableResponsePayload> | ErrorResponse
-> => {
-	try {
-		const response = await axios.post(`/rules/${props.id}/history/timeline`, {
-			start: props.start,
-			end: props.end,
-			offset: props.offset,
-			limit: props.limit,
-			order: props.order,
-			state: props.state,
-			// TODO(shaheer): implement filters
-			filters: props.filters,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default timelineTable;
--- a/frontend/src/api/alerts/topContributors.ts
+++ b/frontend/src/api/alerts/topContributors.ts
@@ -1,33 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleTopContributorsPayload } from 'types/api/alerts/def';
-import { TopContributorsProps } from 'types/api/alerts/topContributors';
-
-const topContributors = async (
-	props: TopContributorsProps,
-): Promise<
-	SuccessResponse<AlertRuleTopContributorsPayload> | ErrorResponse
-> => {
-	try {
-		const response = await axios.post(
-			`/rules/${props.id}/history/top_contributors`,
-			{
-				start: props.start,
-				end: props.end,
-			},
-		);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default topContributors;
--- a/frontend/src/api/generated/services/cloudintegration/index.ts
+++ b/frontend/src/api/generated/services/cloudintegration/index.ts
@@ -36,14 +36,12 @@ import type {
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
-	GetServiceParams,
 	GetServicePathParameters,
 	ListAccountServicesMetadata200,
 	ListAccountServicesMetadataPathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
-	ListServicesMetadataParams,
 	ListServicesMetadataPathParameters,
 	RenderErrorResponseDTO,
 	UpdateAccountPathParameters,
@@ -1162,30 +1160,24 @@ export const invalidateGetConnectionCredentials = async (
 };

 /**
- * This endpoint lists the services metadata for the specified cloud provider
+ * This endpoint lists the services metadata for the specified cloud provider, without any account context.
 * @summary List services metadata
 */
 export const listServicesMetadata = (
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<ListServicesMetadata200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/services`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };

-export const getListServicesMetadataQueryKey = (
-	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
-) => {
-	return [
-		`/api/v1/cloud_integrations/${cloudProvider}/services`,
-		...(params ? [params] : []),
-	] as const;
+export const getListServicesMetadataQueryKey = ({
+	cloudProvider,
+}: ListServicesMetadataPathParameters) => {
+	return [`/api/v1/cloud_integrations/${cloudProvider}/services`] as const;
 };

 export const getListServicesMetadataQueryOptions = <
@@ -1193,7 +1185,6 @@ export const getListServicesMetadataQueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof listServicesMetadata>>,
@@ -1205,12 +1196,11 @@ export const getListServicesMetadataQueryOptions = <
 	const { query: queryOptions } = options ?? {};

 	const queryKey =
-		queryOptions?.queryKey ??
-		getListServicesMetadataQueryKey({ cloudProvider }, params);
+		queryOptions?.queryKey ?? getListServicesMetadataQueryKey({ cloudProvider });

 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof listServicesMetadata>>
-	> = ({ signal }) => listServicesMetadata({ cloudProvider }, params, signal);
+	> = ({ signal }) => listServicesMetadata({ cloudProvider }, signal);

 	return {
 		queryKey,
@@ -1238,7 +1228,6 @@ export function useListServicesMetadata<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof listServicesMetadata>>,
@@ -1249,7 +1238,6 @@ export function useListServicesMetadata<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getListServicesMetadataQueryOptions(
 		{ cloudProvider },
-		params,
 		options,
 	);

@@ -1266,11 +1254,10 @@ export function useListServicesMetadata<
 export const invalidateListServicesMetadata = async (
 	queryClient: QueryClient,
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }, params) },
+		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }) },
 		options,
 	);

@@ -1278,29 +1265,26 @@ export const invalidateListServicesMetadata = async (
 };

 /**
- * This endpoint gets a service for the specified cloud provider
+ * This endpoint gets a service definition for the specified cloud provider, without any account context.
 * @summary Get service
 */
 export const getService = (
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetService200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };

-export const getGetServiceQueryKey = (
-	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
-) => {
+export const getGetServiceQueryKey = ({
+	cloudProvider,
+	serviceId,
+}: GetServicePathParameters) => {
 	return [
 		`/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		...(params ? [params] : []),
 	] as const;
 };

@@ -1309,7 +1293,6 @@ export const getGetServiceQueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getService>>,
@@ -1321,12 +1304,11 @@ export const getGetServiceQueryOptions = <
 	const { query: queryOptions } = options ?? {};

 	const queryKey =
-		queryOptions?.queryKey ??
-		getGetServiceQueryKey({ cloudProvider, serviceId }, params);
+		queryOptions?.queryKey ?? getGetServiceQueryKey({ cloudProvider, serviceId });

 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getService>>> = ({
 		signal,
-	}) => getService({ cloudProvider, serviceId }, params, signal);
+	}) => getService({ cloudProvider, serviceId }, signal);

 	return {
 		queryKey,
@@ -1352,7 +1334,6 @@ export function useGetService<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getService>>,
@@ -1363,7 +1344,6 @@ export function useGetService<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getGetServiceQueryOptions(
 		{ cloudProvider, serviceId },
-		params,
 		options,
 	);

@@ -1380,11 +1360,10 @@ export function useGetService<
 export const invalidateGetService = async (
 	queryClient: QueryClient,
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }, params) },
+		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }) },
 		options,
 	);

--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -2815,6 +2815,9 @@ export enum CloudintegrationtypesServiceIDDTO {
 	redis = 'redis',
 	cloudsql_postgres = 'cloudsql_postgres',
 	memorystore_redis = 'memorystore_redis',
+	computeengine = 'computeengine',
+	gke = 'gke',
+	cloudstorage = 'cloudstorage',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -10204,14 +10207,6 @@ export type GetConnectionCredentials200 = {
 export type ListServicesMetadataPathParameters = {
 	cloudProvider: string;
 };
-export type ListServicesMetadataParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	cloud_integration_id?: string;
-};
-
 export type ListServicesMetadata200 = {
 	data: CloudintegrationtypesGettableServicesMetadataDTO;
 	/**
@@ -10224,14 +10219,6 @@ export type GetServicePathParameters = {
 	cloudProvider: string;
 	serviceId: string;
 };
-export type GetServiceParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	cloud_integration_id?: string;
-};
-
 export type GetService200 = {
 	data: CloudintegrationtypesServiceDTO;
 	/**
--- a/frontend/src/api/v5/queryRange/convertV5Response.test.ts
+++ b/frontend/src/api/v5/queryRange/convertV5Response.test.ts
@@ -380,4 +380,88 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		});
 	});
+
+	describe('raw logs body: extract lone `message` field', () => {
+		function makeRawResult(
+			rows: Array<{ timestamp: string; data: Record<string, any> }>,
+			type: 'raw' | 'trace' = 'raw',
+		): ReturnType<typeof convertV5ResponseToLegacy> {
+			const v5Data = {
+				type,
+				data: { results: [{ queryName: 'A', rows }] },
+				meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			} as unknown as QueryRangeResponseV5;
+
+			const params = makeBaseParams(type as RequestType, [
+				{
+					type: 'builder_query',
+					spec: {
+						name: 'A',
+						signal: type === 'trace' ? 'traces' : 'logs',
+						stepInterval: 60,
+						disabled: false,
+						aggregations: [],
+					},
+				},
+			]);
+
+			const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+				makeBaseSuccess({ data: v5Data }, params);
+
+			return convertV5ResponseToLegacy(input, { A: 'A' }, false);
+		}
+
+		it('unwraps body when it is an object with only a message field', () => {
+			const result = makeRawResult([
+				{ timestamp: '2026-07-21T00:00:00Z', data: { body: { message: 'hello' } } },
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toBe('hello');
+		});
+
+		it('leaves body unchanged when the object has keys besides message', () => {
+			const body = { message: 'hello', level: 'INFO' };
+			const result = makeRawResult([
+				{ timestamp: '2026-07-21T00:00:00Z', data: { body } },
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toStrictEqual(
+				body,
+			);
+		});
+
+		it('leaves a string body unchanged (use_json_body off)', () => {
+			const result = makeRawResult([
+				{
+					timestamp: '2026-07-21T00:00:00Z',
+					data: { body: '{"message":"hello"}' },
+				},
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toBe(
+				'{"message":"hello"}',
+			);
+		});
+
+		it('stringifies the nested object when message is an object', () => {
+			const nested = { a: 1, b: 2 };
+			const result = makeRawResult([
+				{ timestamp: '2026-07-21T00:00:00Z', data: { body: { message: nested } } },
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toBe(
+				JSON.stringify(nested),
+			);
+		});
+
+		it('does not add a body key to rows without a body (traces)', () => {
+			const result = makeRawResult(
+				[{ timestamp: '2026-07-21T00:00:00Z', data: { name: 'span-1' } }],
+				'trace',
+			);
+
+			const data = (result.payload.data.result[0].list?.[0] as any)?.data ?? {};
+			expect('body' in data).toBe(false);
+		});
+	});
 });
--- a/frontend/src/api/v5/queryRange/convertV5Response.ts
+++ b/frontend/src/api/v5/queryRange/convertV5Response.ts
@@ -273,6 +273,19 @@ function convertScalarWithFormatForWeb(
 	});
 }

+function extractOnlyMessageBody(body: unknown): unknown {
+	const isJsonBody = body && typeof body === 'object' && !Array.isArray(body);
+	if (isJsonBody) {
+		const keys = Object.keys(body);
+		const hasOnlyMessageKey = keys.length === 1 && keys[0] === 'message';
+		if (hasOnlyMessageKey) {
+			const { message } = body as { message: unknown };
+			return typeof message === 'string' ? message : JSON.stringify(message);
+		}
+	}
+	return body;
+}
+
 /**
 * Converts V5 RawData to legacy format
 */
@@ -285,14 +298,22 @@ function convertRawData(
 		queryName: rawData.queryName,
 		legend: legendMap[rawData.queryName] || rawData.queryName,
 		series: null,
-		list: rawData.rows?.map((row) => ({
-			timestamp: row.timestamp,
-			data: {
+		list: rawData.rows?.map((row) => {
+			const data = {
 				// Map raw data to ILog structure - spread row.data first to include all properties
 				...row.data,
 				date: row.timestamp,
-			} as any,
-		})),
+			} as any;
+
+			if ('body' in row.data) {
+				data.body = extractOnlyMessageBody(row.data.body);
+			}
+
+			return {
+				timestamp: row.timestamp,
+				data,
+			};
+		}),
 		nextCursor: rawData.nextCursor,
 	};
 }
--- a/frontend/src/assets/Logos/gcp-cloud-storage.svg
+++ b/frontend/src/assets/Logos/gcp-cloud-storage.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200" height="800" viewBox="-19.2 -28.483 166.401 170.898"><g transform="translate(0 -7.034)"><linearGradient id="a" x1="64" x2="64" y1="7.034" y2="120.789" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4387fd"/><stop offset="1" stop-color="#4683ea"/></linearGradient><path fill="url(#a)" d="M27.79 115.217 1.54 69.749a11.5 11.5 0 0 1 0-11.499l26.25-45.467a11.5 11.5 0 0 1 9.96-5.75h52.5a11.5 11.5 0 0 1 9.959 5.75l26.25 45.467a11.5 11.5 0 0 1 0 11.5l-26.25 45.466a11.5 11.5 0 0 1-9.959 5.75h-52.5a11.5 11.5 0 0 1-9.96-5.75z"/></g><g transform="translate(0 -7.034)"><defs><path id="b" d="M27.791 115.217 1.541 69.749a11.5 11.5 0 0 1 0-11.499l26.25-45.467a11.5 11.5 0 0 1 9.959-5.75h52.5a11.5 11.5 0 0 1 9.96 5.75l26.25 45.467a11.5 11.5 0 0 1 0 11.5l-26.25 45.466a11.5 11.5 0 0 1-9.96 5.75h-52.5a11.5 11.5 0 0 1-9.959-5.75z"/></defs><clipPath id="c"><use xlink:href="#b" width="100%" height="100%" overflow="visible"/></clipPath><path d="m49.313 53.875-7.01 6.99 5.957 5.958-5.898 10.476 44.635 44.636 10.816.002L118.936 84 85.489 50.55z" clip-path="url(#c)" opacity=".07"/></g><path fill="#fff" d="M84.7 43.236H43.264c-.667 0-1.212.546-1.212 1.214v8.566c0 .666.546 1.212 1.212 1.212H84.7c.667 0 1.213-.546 1.213-1.212v-8.568c0-.666-.545-1.213-1.212-1.213m-6.416 7.976a2.484 2.484 0 0 1-2.477-2.48 2.475 2.475 0 0 1 2.477-2.477c1.37 0 2.48 1.103 2.48 2.477a2.48 2.48 0 0 1-2.48 2.48m6.415 8.491-41.436.002c-.667 0-1.212.546-1.212 1.214v8.565c0 .666.546 1.213 1.212 1.213H84.7c.667 0 1.213-.547 1.213-1.213v-8.567c0-.666-.545-1.214-1.212-1.214m-6.416 7.976a2.483 2.483 0 0 1-2.477-2.48 2.475 2.475 0 0 1 2.477-2.477 2.48 2.48 0 1 1 0 4.956"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#aecbfa;}.cls-2{fill:#669df6;}.cls-3{fill:#4285f4;}.cls-4{fill:#fff;}</style></defs><title>Icon_24px_CloudStorage_Color</title><g data-name="Product Icons"><rect class="cls-1" x="2" y="4" width="20" height="7"/><rect class="cls-2" x="20" y="4" width="2" height="7"/><polygon class="cls-3" points="22 4 20 4 20 11 22 4"/><rect class="cls-2" x="2" y="4" width="2" height="7"/><rect class="cls-4" x="6" y="7" width="6" height="1"/><rect class="cls-4" x="15" y="6" width="3" height="3" rx="1.5"/><rect class="cls-1" x="2" y="13" width="20" height="7"/><rect class="cls-2" x="20" y="13" width="2" height="7"/><polygon class="cls-3" points="22 13 20 13 20 20 22 13"/><rect class="cls-2" x="2" y="13" width="2" height="7"/><rect class="cls-4" x="6" y="16" width="6" height="1"/><rect class="cls-4" x="15" y="15" width="3" height="3" rx="1.5"/></g></svg>
--- a/frontend/src/assets/Logos/gcp-gke.svg
+++ b/frontend/src/assets/Logos/gcp-gke.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19.73 6.56a1.73 1.73 0 0 0-1.68 1.68 1.83 1.83 0 0 0 .89 1.48v6.9l-5.16 3.06.8 1.28 5.55-3.25a.84.84 0 0 0 .4-.69v-7.3a1.64 1.64 0 0 0 .89-1.48 1.61 1.61 0 0 0-1.69-1.68" style="fill:#aecbfa"/><path d="m18 5.48-5.61-3.16a1.18 1.18 0 0 0-.79 0L5.25 6a1.72 1.72 0 0 0-2.68 1.35A1.73 1.73 0 0 0 4.26 9a1.73 1.73 0 0 0 1.68-1.65L12 3.9l5.15 3ZM11.2 18.5a1.57 1.57 0 0 0-.89.29l-5.16-3V9.92H3.56v6.31a.84.84 0 0 0 .4.69L9.52 20v.09a1.69 1.69 0 0 0 3.37 0 1.65 1.65 0 0 0-1.69-1.59" data-name="Path" style="fill:#aecbfa"/><path d="M16.96 8.63 12.1 5.78 7.13 8.63l4.97 2.77z" data-name="Path" style="fill:#669df6"/><path d="M12.1 12.38 6.84 9.32v2.47l5.26 2.96zM12.1 15.73l-5.26-3.05v2.07l5.26 3.06z" style="fill:#669df6"/><path d="M12.09 12.38v2.37l5.26-3.06V9.33Zm4.32-.94a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76M12.09 15.73v2.07l5.26-3.05v-2.07Zm4.32-1.07a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76" style="fill:#4285f4"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#4285f4;}.cls-1,.cls-2,.cls-4{fill-rule:evenodd;}.cls-2{fill:#669df6;}.cls-3,.cls-4{fill:#aecbfa;}</style></defs><title>Icon_24px_K8Engine_Color</title><g data-name="Product Icons"><g ><polygon class="cls-1" points="14.68 13.06 19.23 15.69 19.23 16.68 14.29 13.83 14.68 13.06"/><polygon class="cls-2" points="9.98 13.65 4.77 16.66 4.45 15.86 9.53 12.92 9.98 13.65"/><rect class="cls-3" x="11.55" y="3.29" width="0.86" height="5.78"/><path class="cls-4" d="M3.25,7V17L12,22l8.74-5V7L12,2Zm15.63,8.89L12,19.78,5.12,15.89V8.11L12,4.22l6.87,3.89v7.78Z"/><polygon class="cls-4" points="11.98 11.5 15.96 9.21 11.98 6.91 8.01 9.21 11.98 11.5"/><polygon class="cls-2" points="11.52 12.3 7.66 10.01 7.66 14.6 11.52 16.89 11.52 12.3"/><polygon class="cls-1" points="12.48 12.3 12.48 16.89 16.34 14.6 16.34 10.01 12.48 12.3"/></g></g></svg>
--- a/frontend/src/pages/DashboardsListPageV2/components/DeleteConfirmModal/DeleteConfirmModal.module.scss
+++ b/frontend/src/pages/DashboardsListPageV2/components/DeleteConfirmModal/DeleteConfirmModal.module.scss
--- a/frontend/src/pages/DashboardsListPageV2/components/DeleteConfirmModal/useDeleteConfirm.tsx
+++ b/frontend/src/pages/DashboardsListPageV2/components/DeleteConfirmModal/useDeleteConfirm.tsx
--- a/frontend/src/components/FieldsSelector/OtherFields.tsx
+++ b/frontend/src/components/FieldsSelector/OtherFields.tsx
@@ -8,7 +8,6 @@ import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
-	FieldDataType,
 	SignalType,
 	TelemetryFieldKey,
 } from 'types/api/v5/queryRange';
@@ -55,7 +54,7 @@ function OtherFields({
 				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
-				fieldDataType: attr.fieldDataType as FieldDataType,
+				fieldDataType: attr.fieldDataType,
 			}),
 		);
 		const addedIds = new Set(
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -438,7 +438,11 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
+			<div
+				className="log-detail-drawer__content"
+				data-log-detail-ignore="true"
+				data-testid="log-detail-drawer"
+			>
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
 					<Tooltip
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
@@ -25,12 +25,12 @@ import CodeMirror, {
 } from '@uiw/react-codemirror';
 import { Button, Popover, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Info, TriangleAlert } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { FieldDataType } from 'types/api/v5/queryRange';
 import { TracesAggregatorOperator } from 'types/common/queryBuilder';

 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
@@ -323,16 +323,16 @@ function QueryAggregationSelect({
 				TracesAggregatorOperator.RATE,
 			];

-			const fieldDataType =
+			const fieldDataType: FieldDataType | undefined =
 				functionContextForFetch &&
 				operatorsWithoutDataType.includes(functionContextForFetch)
 					? undefined
-					: QUERY_BUILDER_KEY_TYPES.NUMBER;
+					: 'number';

 			return getKeySuggestions({
 				signal: queryData.dataSource,
 				searchText: '',
-				fieldDataType: fieldDataType as QUERY_BUILDER_KEY_TYPES,
+				fieldDataType,
 			});
 		},
 		{
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -49,7 +49,11 @@ import { unquote } from 'utils/stringUtils';
 import { getRecentQueries } from 'lib/recentQueries/getRecentQueries';
 import type { SignalType } from 'types/api/v5/queryRange';

-import { queryExamples, SUGGESTIONS_SECTION } from './constants';
+import {
+	queryExamples,
+	SUGGESTION_FETCH_DEBOUNCE_MS,
+	SUGGESTIONS_SECTION,
+} from './constants';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -98,6 +102,15 @@ interface QuerySearchProps {
 	showFilterSuggestionsWithoutMetric?: boolean;
 	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
 	initialExpression?: string;
+	/** When set, replaces the generic value-suggestion API with a custom fetcher. */
+	valueSuggestionsOverride?: (
+		key: string,
+		searchText: string,
+	) => Promise<{
+		stringValues: string[];
+		numberValues: number[];
+		complete: boolean;
+	}>;
 }

 function QuerySearch({
@@ -111,6 +124,7 @@ function QuerySearch({
 	showFilterSuggestionsWithoutMetric,
 	initialExpression,
 	metricNamespace,
+	valueSuggestionsOverride,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -353,7 +367,7 @@ function QuerySearch({
 	);

 	const debouncedFetchKeySuggestions = useMemo(
-		() => debounce(fetchKeySuggestions, 300),
+		() => debounce(fetchKeySuggestions, SUGGESTION_FETCH_DEBOUNCE_MS),
 		[fetchKeySuggestions],
 	);

@@ -480,13 +494,24 @@ function QuerySearch({
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';

 			try {
-				const response = await getValueSuggestions({
-					key,
-					searchText: sanitizedSearchText,
-					signal: dataSource,
-					signalSource: signalSource as 'meter' | '',
-					metricName: debouncedMetricName ?? undefined,
-				});
+				const values = valueSuggestionsOverride
+					? await valueSuggestionsOverride(key, sanitizedSearchText)
+					: await getValueSuggestions({
+							key,
+							searchText: sanitizedSearchText,
+							signal: dataSource,
+							signalSource: signalSource as 'meter' | '',
+							metricName: debouncedMetricName ?? undefined,
+						}).then((response) => {
+							const responseData = response.data as any;
+							const data = responseData.data || {};
+							const values = data.values || {};
+							return {
+								stringValues: values.stringValues || [],
+								numberValues: values.numberValues || [],
+								complete: data.complete ?? false,
+							};
+						});

 				// Skip updates if component unmounted or key changed
 				if (
@@ -498,8 +523,6 @@ function QuerySearch({
 				}

 				// Process the response data
-				const responseData = response.data as any;
-				const values = responseData.data?.values || {};
 				const stringValues = values.stringValues || [];
 				const numberValues = values.numberValues || [];

@@ -580,11 +603,12 @@ function QuerySearch({
 			debouncedMetricName,
 			signalSource,
 			toggleSuggestions,
+			valueSuggestionsOverride,
 		],
 	);

 	const debouncedFetchValueSuggestions = useMemo(
-		() => debounce(fetchValueSuggestions, 300),
+		() => debounce(fetchValueSuggestions, SUGGESTION_FETCH_DEBOUNCE_MS),
 		[fetchValueSuggestions],
 	);

--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/constants.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/constants.ts
@@ -1,6 +1,8 @@
 export const RECENTS_SECTION = { name: 'Recent searches', rank: 1 } as const;
 export const SUGGESTIONS_SECTION = { name: 'Suggestions', rank: 2 } as const;

+export const SUGGESTION_FETCH_DEBOUNCE_MS = 300;
+
 // TODO: move to using TelemetrytypesFieldContextDTO when we migrate getKeySuggestions API (Part of https://github.com/SigNoz/engineering-pod/issues/5289)
 export const FIELD_CONTEXTS = [
 	'attribute',
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.contextSuggestions.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.contextSuggestions.test.tsx
@@ -23,6 +23,13 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}),
 }));

+// Shrink the suggestion-fetch debounce (300ms in prod) so these integration
+// tests aren't paced by it; coalescing semantics stay intact.
+jest.mock('../QuerySearch/constants', () => ({
+	...jest.requireActual('../QuerySearch/constants'),
+	SUGGESTION_FETCH_DEBOUNCE_MS: 30,
+}));
+
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -92,52 +92,76 @@
 						color: var(--l3-foreground);
 					}

-					.only-btn {
-						cursor: not-allowed;
-						color: var(--l3-foreground);
-					}
-
+					.only-btn,
 					.toggle-btn {
 						cursor: not-allowed;
 						color: var(--l3-foreground);
 					}
 				}

-				.only-btn {
-					display: none;
+				// Stack "Only"/"All" and "Toggle" in a single cell so revealing
+				// one swaps in place instead of shifting the row layout.
+				.value-actions {
+					display: grid;
+					align-items: center;
+					justify-items: end;
+
+					> * {
+						grid-area: 1 / 1;
+					}
 				}
+
+				.only-btn,
 				.toggle-btn {
 					display: none;
-				}
-
-				.toggle-btn:hover {
-					background-color: unset;
-				}
-
-				.only-btn:hover {
-					background-color: unset;
-				}
-			}
-
-			.checkbox-value-section:hover {
-				.toggle-btn {
-					display: none;
-				}
-				.only-btn {
-					display: flex;
 					align-items: center;
 					justify-content: center;
 					height: 21px;
+					opacity: 0;
+					transform: translateX(4px);
+					// `display` is animated as a discrete property so the button
+					// stays mounted through its fade-out on exit.
+					transition:
+						opacity 0.16s ease,
+						transform 0.16s ease,
+						display 0.16s allow-discrete;
+
+					&:hover {
+						background-color: unset;
+					}
+				}
+			}
+
+			// Hovering the label/value area reveals the "Only"/"All" action.
+			.checkbox-value-section:hover .only-btn {
+				display: flex;
+				opacity: 1;
+				transform: translateX(0);
+
+				// Entry animation start state (fires on the display switch).
+				@starting-style {
+					opacity: 0;
+					transform: translateX(4px);
+				}
+			}
+
+			// Hovering the checkbox reveals the "Toggle" action.
+			.check-box:hover ~ .checkbox-value-section .toggle-btn {
+				display: flex;
+				opacity: 1;
+				transform: translateX(0);
+
+				@starting-style {
+					opacity: 0;
+					transform: translateX(4px);
 				}
 			}
 		}

-		.value:hover {
+		@media (prefers-reduced-motion: reduce) {
+			.only-btn,
 			.toggle-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 21px;
+				transition: none;
 			}
 		}
 	}
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx
@@ -53,12 +53,14 @@ function CheckboxValueRow({
 						</Typography.Text>
 					</TooltipSimple>
 				)}
-				<Button type="text" className="only-btn">
-					{onlyButtonLabel}
-				</Button>
-				<Button type="text" className="toggle-btn">
-					Toggle
-				</Button>
+				<div className="value-actions">
+					<Button type="text" className="only-btn">
+						{onlyButtonLabel}
+					</Button>
+					<Button type="text" className="toggle-btn">
+						Toggle
+					</Button>
+				</div>
 			</div>
 		</div>
 	);
--- a/frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx
@@ -88,6 +88,7 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 			{...props}
 			className={rowClassName}
 			style={rowStyle}
+			data-testid={context?.getRowTestId?.(rowData)}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={clearHovered}
 		>
@@ -154,6 +155,12 @@ function areTableRowPropsEqual<TData, TItemKey = string>(
 			return false;
 		}

+		const prevTestId = prev.context?.getRowTestId?.(prevData) ?? '';
+		const nextTestId = next.context?.getRowTestId?.(nextData) ?? '';
+		if (prevTestId !== nextTestId) {
+			return false;
+		}
+
 		const prevStyle = prev.context?.getRowStyle?.(prevData);
 		const nextStyle = next.context?.getRowStyle?.(nextData);
 		if (prevStyle !== nextStyle) {
--- a/frontend/src/components/TanStackTableView/TanStackRow.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackRow.tsx
@@ -33,7 +33,6 @@ function TanStackRowCellsInner<TData, TItemKey = string>({
 	// Stable references via destructuring, keep them as is
 	const onRowClick = context?.onRowClick;
 	const onRowClickNewTab = context?.onRowClickNewTab;
-	const onRowDeactivate = context?.onRowDeactivate;
 	const isRowActive = context?.isRowActive;
 	const getRowKeyData = context?.getRowKeyData;
 	const rowIndex = row.index;
@@ -52,21 +51,9 @@ function TanStackRowCellsInner<TData, TItemKey = string>({
 			}

 			const isActive = isRowActive?.(rowData) ?? false;
-			if (isActive && onRowDeactivate) {
-				onRowDeactivate();
-			} else {
-				onRowClick?.(rowData, itemKey);
-			}
+			onRowClick?.(rowData, itemKey, { isActive });
 		},
-		[
-			isRowActive,
-			onRowDeactivate,
-			onRowClick,
-			onRowClickNewTab,
-			rowData,
-			getRowKeyData,
-			rowIndex,
-		],
+		[isRowActive, onRowClick, onRowClickNewTab, rowData, getRowKeyData, rowIndex],
 	);

 	if (itemKind === 'expansion') {
@@ -120,7 +107,6 @@ function areRowCellsPropsEqual<TData>(
 		prev.columnVisibilityKey === next.columnVisibilityKey &&
 		prev.context?.onRowClick === next.context?.onRowClick &&
 		prev.context?.onRowClickNewTab === next.context?.onRowClickNewTab &&
-		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
 		prev.context?.isRowActive === next.context?.isRowActive &&
 		prev.context?.getRowKeyData === next.context?.getRowKeyData &&
 		prev.context?.renderRowActions === next.context?.renderRowActions &&
--- a/frontend/src/components/TanStackTableView/TanStackTable.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackTable.tsx
@@ -92,11 +92,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		getGroupKey,
 		getRowStyle,
 		getRowClassName,
+		getRowTestId,
 		isRowActive,
 		renderRowActions,
 		onRowClick,
 		onRowClickNewTab,
-		onRowDeactivate,
 		onSort,
 		activeRowIndex,
 		renderExpandedRow,
@@ -378,11 +378,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		() => ({
 			getRowStyle,
 			getRowClassName,
+			getRowTestId,
 			isRowActive,
 			renderRowActions,
 			onRowClick,
 			onRowClickNewTab,
-			onRowDeactivate,
 			renderExpandedRow,
 			getRowKeyData,
 			colCount: visibleColumnsCount,
@@ -396,11 +396,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		[
 			getRowStyle,
 			getRowClassName,
+			getRowTestId,
 			isRowActive,
 			renderRowActions,
 			onRowClick,
 			onRowClickNewTab,
-			onRowDeactivate,
 			renderExpandedRow,
 			getRowKeyData,
 			visibleColumnsCount,
--- a/frontend/src/components/TanStackTableView/tests/TanStackRow.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackRow.test.tsx
@@ -85,7 +85,9 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
+			isActive: false,
+		});
 	});

 	it('fires onRowClick with empty itemKey when getRowKeyData is not provided', async () => {
@@ -117,17 +119,19 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '', {
+			isActive: false,
+		});
 	});

-	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
+	it('calls onRowClick with isActive: true when the row is active', async () => {
+		// The table no longer owns open/close — it reports the active state and the
+		// consumer routes the click. An active row must still fire onRowClick.
 		const user = userEvent.setup();
 		const onRowClick = jest.fn();
-		const onRowDeactivate = jest.fn();
 		const ctx: TableRowContext<Row> = {
 			colCount: 1,
 			onRowClick,
-			onRowDeactivate,
 			isRowActive: () => true,
 			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 			hasSingleColumn: false,
@@ -152,8 +156,44 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowDeactivate).toHaveBeenCalled();
-		expect(onRowClick).not.toHaveBeenCalled();
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
+			isActive: true,
+		});
+	});
+
+	it('calls onRowClick with isActive: false when the row is not active', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			isRowActive: () => false,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
+			hasSingleColumn: false,
+			columnOrderKey: '',
+			columnVisibilityKey: '',
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+							columnOrderKey=""
+							columnVisibilityKey=""
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
+			isActive: false,
+		});
 	});

 	it('does not render renderRowActions before hover', () => {
--- a/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
@@ -611,6 +611,7 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				'1',
+				{ isActive: false },
 			);
 		});

@@ -639,6 +640,7 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				{ id: '1', name: 'Item 1' },
+				{ isActive: false },
 			);
 		});

@@ -659,15 +661,15 @@ describe('TanStackTableView Integration', () => {
 			expect(row).toHaveClass('tableRowActive');
 		});

-		it('calls onRowDeactivate when clicking active row', async () => {
+		it('calls onRowClick with isActive: true when clicking the active row', async () => {
+			// The consumer owns open/close routing — the table just reports the
+			// active state via the click context.
 			const user = userEvent.setup();
 			const onRowClick = jest.fn();
-			const onRowDeactivate = jest.fn();

 			renderTanStackTable({
 				props: {
 					onRowClick,
-					onRowDeactivate,
 					isRowActive: (row) => row.id === '1',
 				},
 			});
@@ -678,8 +680,11 @@ describe('TanStackTableView Integration', () => {

 			await user.click(screen.getByText('Item 1'));

-			expect(onRowDeactivate).toHaveBeenCalled();
-			expect(onRowClick).not.toHaveBeenCalled();
+			expect(onRowClick).toHaveBeenCalledWith(
+				expect.objectContaining({ id: '1' }),
+				expect.anything(),
+				{ isActive: true },
+			);
 		});

 		it('opens in new tab on ctrl+click', async () => {
--- a/frontend/src/components/TanStackTableView/index.tsx
+++ b/frontend/src/components/TanStackTableView/index.tsx
@@ -116,9 +116,11 @@ export * from './useTableParams';
 *   getItemKey={(row) => row.id}
 *   isRowActive={(row) => row.id === selectedId}
 *   activeRowIndex={selectedIndex}
- *   onRowClick={(row, itemKey) => setSelectedId(itemKey)}
+ *   // The table reports the click + the row's active state; the consumer owns open/close.
+ *   onRowClick={(row, itemKey, { isActive }) =>
+ *     setSelectedId(isActive ? undefined : itemKey)
+ *   }
 *   onRowClickNewTab={(row, itemKey) => openInNewTab(itemKey)}
- *   onRowDeactivate={() => setSelectedId(undefined)}
 *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
 *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
 *   renderRowActions={(row) => <Button size="small">Open</Button>}
--- a/frontend/src/components/TanStackTableView/types.ts
+++ b/frontend/src/components/TanStackTableView/types.ts
@@ -81,15 +81,19 @@ export type FlatItem<TData> =
 	| { kind: 'row'; row: TanStackRowType<TData> }
 	| { kind: 'expansion'; row: TanStackRowType<TData> };

+export type RowClickContext = {
+	isActive: boolean;
+};
+
 export type TableRowContext<TData, TItemKey = string> = {
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
+	getRowTestId?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: TItemKey) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey, context: RowClickContext) => void;
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
-	onRowDeactivate?: () => void;
 	renderExpandedRow?: (
 		row: TData,
 		rowKey: string,
@@ -178,12 +182,12 @@ export type TanStackTableProps<TData, TItemKey = string> = {
 	getGroupKey?: (row: TData) => Record<string, string>;
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
+	getRowTestId?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: TItemKey) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey, context: RowClickContext) => void;
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
-	onRowDeactivate?: () => void;
 	activeRowIndex?: number;
 	renderExpandedRow?: (
 		row: TData,
--- a/frontend/src/components/WarningPopover/WarningPopover.styles.scss
+++ b/frontend/src/components/WarningPopover/WarningPopover.styles.scss
@@ -1,6 +1,11 @@
+.warning-popover-overlay {
+	--antd-arrow-background-color: var(--l2-background);
+}
+
 .warning-content {
 	display: flex;
 	flex-direction: column;
+	background-color: var(--l2-background);

 	// === SECTION: Summary (Top)
 	&__summary-section {
@@ -10,16 +15,25 @@

 	&__summary {
 		display: flex;
+		align-items: flex-start;
 		justify-content: space-between;
+		gap: var(--spacing-8);
 		padding: 16px;
 	}

 	&__summary-left {
 		display: flex;
-		align-items: baseline;
+		align-items: flex-start;
 		gap: 8px;
 	}

+	&__icon-wrapper {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: var(--spacing-12);
+	}
+
 	&__summary-text {
 		display: flex;
 		flex-direction: column;
--- a/frontend/src/components/WarningPopover/WarningPopover.tsx
+++ b/frontend/src/components/WarningPopover/WarningPopover.tsx
@@ -2,6 +2,7 @@ import { ReactNode, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover, PopoverProps } from 'antd';
 import ErrorIcon from 'assets/Error';
+import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown, TriangleAlert } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
@@ -30,16 +31,18 @@ export function WarningContent({ warning }: WarningContentProps): JSX.Element {
 			{/* Summary Header */}
 			<section className="warning-content__summary-section">
 				<header className="warning-content__summary">
-					<div className="warning-content__summary-left">
-						<div className="warning-content__icon-wrapper">
-							<ErrorIcon />
-						</div>
+					{(warningCode || warningMessage) && (
+						<div className="warning-content__summary-left">
+							<div className="warning-content__icon-wrapper">
+								<ErrorIcon />
+							</div>

-						<div className="warning-content__summary-text">
-							<h2 className="warning-content__warning-code">{warningCode}</h2>
-							<p className="warning-content__warning-message">{warningMessage}</p>
+							<div className="warning-content__summary-text">
+								<h2 className="warning-content__warning-code">{warningCode}</h2>
+								<p className="warning-content__warning-message">{warningMessage}</p>
+							</div>
 						</div>
-					</div>
+					)}

 					{warningUrl && (
 						<div className="warning-content__summary-right">
@@ -154,6 +157,10 @@ function WarningPopover({
 			overlayInnerStyle={{ padding: 0 }}
 			autoAdjustOverflow
 			{...popoverProps}
+			overlayClassName={cx(
+				'warning-popover-overlay',
+				popoverProps.overlayClassName,
+			)}
 		>
 			{children || (
 				<TriangleAlert
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -45,4 +45,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
+	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
 }
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -20,10 +20,6 @@ export const REACT_QUERY_KEY = {
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',
 	ALERT_RULE_DETAILS: 'ALERT_RULE_DETAILS',
-	ALERT_RULE_STATS: 'ALERT_RULE_STATS',
-	ALERT_RULE_TOP_CONTRIBUTORS: 'ALERT_RULE_TOP_CONTRIBUTORS',
-	ALERT_RULE_TIMELINE_TABLE: 'ALERT_RULE_TIMELINE_TABLE',
-	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
 	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
--- a/frontend/src/container/AIAssistant/tests/getAutoContexts.test.ts
+++ b/frontend/src/container/AIAssistant/tests/getAutoContexts.test.ts
@@ -167,6 +167,56 @@ describe('getAutoContexts', () => {
 		]);
 	});

+	it('returns panel edit context on the V2 panel editor', () => {
+		const dashboardId = 'dash-123';
+		const panelId = 'panel-abc';
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			dashboardId,
+		).replace(':panelId', panelId);
+
+		const contexts = getAutoContexts(pathname, '');
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'dashboard',
+				resourceId: dashboardId,
+				metadata: {
+					page: 'panel_edit',
+					widgetId: panelId,
+				},
+			},
+		]);
+	});
+
+	it('returns new panel context on the unsaved new-panel editor', () => {
+		const dashboardId = 'dash-123';
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			dashboardId,
+		).replace(':panelId', 'new');
+		const startTime = '1700000000000';
+		const endTime = '1700003600000';
+
+		const contexts = getAutoContexts(
+			pathname,
+			`?panelKind=TimeSeries&${QueryParams.startTime}=${startTime}&${QueryParams.endTime}=${endTime}`,
+		);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'dashboard',
+				resourceId: dashboardId,
+				metadata: {
+					page: 'panel_create',
+					timeRange: { start: Number(startTime), end: Number(endTime) },
+				},
+			},
+		]);
+	});
+
 	it('returns empty array on alert overview without ruleId', () => {
 		const contexts = getAutoContexts(ROUTES.ALERT_OVERVIEW, '');

--- a/frontend/src/container/AIAssistant/tests/resolvePageType.test.ts
+++ b/frontend/src/container/AIAssistant/tests/resolvePageType.test.ts
@@ -17,6 +17,28 @@ describe('resolvePageType', () => {
 		expect(resolvePageType(pathname, '')).toBe(PageTypeDTO.dashboard_detail);
 	});

+	it('returns panel_edit on the V2 panel editor', () => {
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			'dash-123',
+		).replace(':panelId', 'panel-abc');
+
+		expect(resolvePageType(pathname, '')).toBe(PageTypeDTO.panel_edit);
+	});
+
+	// `panel_create` has no PageTypeDTO counterpart yet, so it reports
+	// `panel_edit` rather than degrading to `other`.
+	it('returns panel_edit on the unsaved new-panel editor', () => {
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			'dash-123',
+		).replace(':panelId', 'new');
+
+		expect(resolvePageType(pathname, '?panelKind=TimeSeries')).toBe(
+			PageTypeDTO.panel_edit,
+		);
+	});
+
 	it('returns alerts_triggered on alert history without ruleId', () => {
 		expect(resolvePageType(ROUTES.ALERT_HISTORY, '')).toBe(
 			PageTypeDTO.alerts_triggered,
--- a/frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx
+++ b/frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx
@@ -16,17 +16,22 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { UploadFile } from 'antd';
 import getSessionStorage from 'api/browser/sessionstorage/get';
 import setSessionStorage from 'api/browser/sessionstorage/set';
+import {
+	getListDashboardsForUserV2QueryKey,
+	useListDashboardsForUserV2,
+} from 'api/generated/services/dashboard';
 import {
 	getListRulesQueryKey,
 	useListRules,
 } from 'api/generated/services/rules';
-import type { ListRules200 } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesListedDashboardForUserV2DTO,
+	ListDashboardsForUserV2200,
+	ListDashboardsForUserV2Params,
+	ListRules200,
+} from 'api/generated/services/sigNoz.schemas';
 import logEvent from 'api/common/logEvent';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import { useQueryService } from 'hooks/useQueryService';
-import type { SuccessResponseV2 } from 'types/api';
-import type { Dashboard } from 'types/api/dashboard/getAll';
 // eslint-disable-next-line
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -100,6 +105,8 @@ function autoContextLabel(ctx: MessageContext): string {
 			return 'Current dashboard';
 		case 'panel_edit':
 			return 'Editing panel';
+		case 'panel_create':
+			return 'New panel';
 		case 'panel_fullscreen':
 			return 'Panel (fullscreen)';
 		case 'dashboard_list':
@@ -164,6 +171,18 @@ const TEXTAREA_MAX_HEIGHT_PX = 200;
 const HOME_SERVICES_INTERVAL = 30 * 60 * 1000;
 /** sessionStorage key for the "voice input failed this tab" flag. */
 const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
+/**
+ * The picker filters client-side, so it pulls one large page instead of
+ * paginating. Shared with `getQueryData` below — the params are part of the
+ * generated query key, so both sides must use the same object.
+ */
+const DASHBOARD_LIST_PARAMS: ListDashboardsForUserV2Params = { limit: 1000 };
+
+function dashboardTitle(
+	dashboard: DashboardtypesListedDashboardForUserV2DTO,
+): string {
+	return dashboard.spec.display?.name || dashboard.name || 'Untitled';
+}

 interface SelectedContextItem {
 	category: ContextCategory;
@@ -716,9 +735,11 @@ export default function ChatInput({
 		data: dashboardsResponse,
 		isLoading: isDashboardsLoading,
 		isError: isDashboardsError,
-	} = useGetAllDashboard({
-		enabled: isContextPickerOpen && activeContextCategory === 'Dashboards',
-		staleTime: Infinity,
+	} = useListDashboardsForUserV2(DASHBOARD_LIST_PARAMS, {
+		query: {
+			enabled: isContextPickerOpen && activeContextCategory === 'Dashboards',
+			staleTime: Infinity,
+		},
 	});

 	const {
@@ -765,12 +786,12 @@ export default function ChatInput({
 				return ctx.resourceId;
 			}
 			if (ctx.type === 'dashboard' && ctx.resourceId) {
-				const cached = queryClient.getQueryData<SuccessResponseV2<Dashboard[]>>(
-					REACT_QUERY_KEY.GET_ALL_DASHBOARDS,
+				const cached = queryClient.getQueryData<ListDashboardsForUserV2200>(
+					getListDashboardsForUserV2QueryKey(DASHBOARD_LIST_PARAMS),
 				);
-				const dash = cached?.data?.find((d) => d.id === ctx.resourceId);
-				if (dash?.data.title) {
-					return dash.data.title;
+				const dash = cached?.data?.dashboards?.find((d) => d.id === ctx.resourceId);
+				if (dash) {
+					return dashboardTitle(dash);
 				}
 			}
 			if (ctx.type === 'alert' && ctx.resourceId) {
@@ -800,9 +821,9 @@ export default function ChatInput({
 	const contextEntitiesByCategory: Record<ContextCategory, ContextEntityItem[]> =
 		{
 			Dashboards:
-				dashboardsResponse?.data?.map((dashboard) => ({
+				dashboardsResponse?.data?.dashboards?.map((dashboard) => ({
 					id: dashboard.id,
-					value: dashboard.data.title ?? 'Untitled',
+					value: dashboardTitle(dashboard),
 				})) ?? [],
 			Alerts:
 				alertsResponse?.data
--- a/frontend/src/container/AIAssistant/components/ChatInput/tests/ChatInput.prefill.test.tsx
+++ b/frontend/src/container/AIAssistant/components/ChatInput/tests/ChatInput.prefill.test.tsx
@@ -2,12 +2,13 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';

 // The prefill flow only depends on the context-picker data hooks resolving to
 // empty lists (so the empty state renders) — mock them to skip real fetches.
-jest.mock('hooks/dashboard/useGetAllDashboard', () => ({
-	useGetAllDashboard: (): unknown => ({
-		data: [],
+jest.mock('api/generated/services/dashboard', () => ({
+	useListDashboardsForUserV2: (): unknown => ({
+		data: undefined,
 		isLoading: false,
 		isError: false,
 	}),
+	getListDashboardsForUserV2QueryKey: (): string[] => ['dashboards'],
 }));

 jest.mock('api/generated/services/rules', () => ({
--- a/frontend/src/container/AIAssistant/getAutoContexts.ts
+++ b/frontend/src/container/AIAssistant/getAutoContexts.ts
@@ -2,6 +2,7 @@ import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { AlertListTabs } from 'pages/AlertList/types';
+import { NEW_PANEL_ID } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute';
 import { matchPath } from 'react-router-dom';

 /**
@@ -30,22 +31,23 @@ export function getAutoContexts(

 	// ── Dashboards ────────────────────────────────────────────────────────────

-	// Widget edit (panel_edit) — `/dashboard/:dashboardId/:widgetId`.
-	const widgetMatch = matchPath<{ dashboardId: string; widgetId: string }>(
+	// Panel editor (V2). `panel/new` has no widget id yet and the schema requires
+	// a non-empty `panel_edit.widgetId`, so it reports `panel_create` instead.
+	const panelEditorMatch = matchPath<{ dashboardId: string; panelId: string }>(
 		pathname,
-		{ path: ROUTES.DASHBOARD_WIDGET, exact: true },
+		{ path: ROUTES.DASHBOARD_PANEL_EDITOR, exact: true },
 	);
-	if (widgetMatch) {
+	if (panelEditorMatch) {
+		const { dashboardId, panelId } = panelEditorMatch.params;
+		const isNewPanel = panelId === NEW_PANEL_ID;
 		return [
 			{
 				source: 'auto',
 				type: 'dashboard',
-				resourceId: widgetMatch.params.dashboardId,
-				metadata: {
-					page: 'panel_edit',
-					widgetId: widgetMatch.params.widgetId,
-					...sharedMetadata,
-				},
+				resourceId: dashboardId,
+				metadata: isNewPanel
+					? { page: 'panel_create', ...sharedMetadata }
+					: { page: 'panel_edit', widgetId: panelId, ...sharedMetadata },
 			},
 		];
 	}
--- a/frontend/src/container/AIAssistant/resolvePageType.ts
+++ b/frontend/src/container/AIAssistant/resolvePageType.ts
@@ -9,6 +9,8 @@ const PAGE_METADATA_TO_DTO: Record<string, PageTypeDTO> = {
 	dashboard_detail: PageTypeDTO.dashboard_detail,
 	dashboard_list: PageTypeDTO.dashboard_list,
 	panel_edit: PageTypeDTO.panel_edit,
+	// There is no panel_create, so sending panel_edit temporarily
+	panel_create: PageTypeDTO.panel_edit,
 	panel_fullscreen: PageTypeDTO.panel_fullscreen,
 	logs_explorer: PageTypeDTO.logs_explorer,
 	trace_detail: PageTypeDTO.trace_detail,
--- a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
+++ b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
@@ -29,6 +29,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -40,6 +41,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass
--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
@@ -26,7 +26,10 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div className="change-percentage change-percentage--success">
+			<div
+				className="change-percentage change-percentage--success"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -38,7 +41,10 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div className="change-percentage change-percentage--error">
+			<div
+				className="change-percentage change-percentage--error"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -50,7 +56,10 @@ function ChangePercentage({
 	}

 	return (
-		<div className="change-percentage change-percentage--no-previous-data">
+		<div
+			className="change-percentage change-percentage--no-previous-data"
+			data-testid="stats-card-change"
+		>
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -103,7 +112,12 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);

 	return (
-		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
+		<div
+			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
+			data-testid="stats-card"
+			data-stats-title={title}
+			data-empty={isEmpty ? 'true' : 'false'}
+		>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -123,7 +137,7 @@ function StatsCard({
 			</div>

 			<div className="stats-card__stats">
-				<div className="count-label">
+				<div className="count-label" data-testid="stats-card-value">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>

--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx
@@ -81,7 +81,11 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);

 	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+		<div
+			style={{ height: '100%', width: '100%' }}
+			ref={graphRef}
+			data-testid="stats-card-sparkline"
+		>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);
--- a/frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx
@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useGetAlertRuleDetailsStats } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
+import { StatsTimeSeriesItem } from 'types/api/alerts/def';

 import AverageResolutionCard from '../AverageResolutionCard/AverageResolutionCard';
 import StatsCard from '../StatsCard/StatsCard';
@@ -25,24 +26,59 @@ type StatsCardsRendererProps = {
 };

 // TODO(shaheer): render the DataStateRenderer inside the TotalTriggeredCard/AverageResolutionCard, it should display the title
+type AdaptedStatsData = {
+	totalCurrentTriggers: number;
+	totalPastTriggers: number;
+	currentAvgResolutionTime: string;
+	pastAvgResolutionTime: string;
+	currentTriggersSeries: StatsTimeSeriesItem[];
+	currentAvgResolutionTimeSeries: StatsTimeSeriesItem[];
+};
+
 function StatsCardsRenderer({
 	setTotalCurrentTriggers,
 }: StatsCardsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsStats();

-	useEffect(() => {
-		if (data?.payload?.data?.totalCurrentTriggers !== undefined) {
-			setTotalCurrentTriggers(data.payload.data.totalCurrentTriggers);
+	const adaptedData = useMemo((): AdaptedStatsData | null => {
+		if (!data?.data) {
+			return null;
 		}
-	}, [data, setTotalCurrentTriggers]);
+		const statsData = data.data;
+
+		const adaptTimeSeries = (
+			series: typeof statsData.currentTriggersSeries,
+		): StatsTimeSeriesItem[] =>
+			series?.values?.map((item) => ({
+				timestamp: item.timestamp ?? 0,
+				value: String(item.value ?? 0),
+			})) ?? [];
+
+		return {
+			totalCurrentTriggers: statsData.totalCurrentTriggers,
+			totalPastTriggers: statsData.totalPastTriggers,
+			currentAvgResolutionTime: String(statsData.currentAvgResolutionTime),
+			pastAvgResolutionTime: String(statsData.pastAvgResolutionTime),
+			currentTriggersSeries: adaptTimeSeries(statsData.currentTriggersSeries),
+			currentAvgResolutionTimeSeries: adaptTimeSeries(
+				statsData.currentAvgResolutionTimeSeries,
+			),
+		};
+	}, [data?.data]);
+
+	useEffect(() => {
+		if (adaptedData?.totalCurrentTriggers !== undefined) {
+			setTotalCurrentTriggers(adaptedData.totalCurrentTriggers);
+		}
+	}, [adaptedData, setTotalCurrentTriggers]);

 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={data?.payload?.data || null}
+			data={adaptedData}
 		>
 			{(data): JSX.Element => {
 				const {
@@ -60,7 +96,7 @@ function StatsCardsRenderer({
 							<TotalTriggeredCard
 								totalCurrentTriggers={totalCurrentTriggers}
 								totalPastTriggers={totalPastTriggers}
-								timeSeries={currentTriggersSeries?.values}
+								timeSeries={currentTriggersSeries}
 							/>
 						) : (
 							<StatsCard
@@ -77,7 +113,7 @@ function StatsCardsRenderer({
 							<AverageResolutionCard
 								currentAvgResolutionTime={currentAvgResolutionTime}
 								pastAvgResolutionTime={pastAvgResolutionTime}
-								timeSeries={currentAvgResolutionTimeSeries?.values}
+								timeSeries={currentAvgResolutionTimeSeries}
 							/>
 						) : (
 							<StatsCard
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx
@@ -48,11 +48,16 @@ function TopContributorsCard({

 	return (
 		<>
-			<div className="top-contributors-card">
+			<div className="top-contributors-card" data-testid="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
+						<Button
+							type="text"
+							className="view-all"
+							onClick={toggleViewAllDrawer}
+							data-testid="top-contributors-view-all"
+						>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
@@ -68,7 +68,10 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div className="total-contribution">
+					<div
+						className="total-contribution"
+						data-testid="top-contributors-row-count"
+					>
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -78,7 +81,10 @@ function TopContributorsRows({

 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'top-contributors-row',
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx
@@ -31,7 +31,10 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div className="top-contributors-card--view-all">
+			<div
+				className="top-contributors-card--view-all"
+				data-testid="top-contributors-drawer"
+			>
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx
@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
 import { useGetAlertRuleDetailsTopContributors } from 'pages/AlertDetails/hooks';
+import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { AlertRuleStats } from 'types/api/alerts/def';
+import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';

 import TopContributorsCard from '../TopContributorsCard/TopContributorsCard';

@@ -13,15 +15,27 @@ function TopContributorsRenderer({
 }: TopContributorsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTopContributors();
-	const response = data?.payload?.data;

 	// TODO(shaheer): render the DataStateRenderer inside the TopContributorsCard, it should display the title and view all
+	const adaptedData = useMemo((): AlertRuleTopContributors[] | null => {
+		if (!data?.data) {
+			return null;
+		}
+		return data.data.map((contributor) => ({
+			fingerprint: contributor.fingerprint,
+			count: contributor.count,
+			labels: labelsArrayToObject(contributor.labels),
+			relatedLogsLink: contributor.relatedLogsLink ?? '',
+			relatedTracesLink: contributor.relatedTracesLink ?? '',
+		}));
+	}, [data?.data]);
+
 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={response || null}
+			data={adaptedData}
 		>
 			{(topContributorsData): JSX.Element => (
 				<TopContributorsCard
--- a/frontend/src/container/AlertHistory/Timeline/Graph/constants.ts
+++ b/frontend/src/container/AlertHistory/Timeline/Graph/constants.ts
@@ -1,12 +1,18 @@
 import { Color } from '@signozhq/design-tokens';
+import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';

-export const ALERT_STATUS: { [key: string]: number } = {
-	firing: 0,
-	inactive: 1,
+export const ALERT_STATUS: Record<RuletypesAlertStateDTO, number> & {
+	[key: string]: number;
+} = {
+	[RuletypesAlertStateDTO.firing]: 0,
+	[RuletypesAlertStateDTO.inactive]: 1,
 	normal: 1,
-	'no-data': 2,
-	disabled: 3,
-	muted: 4,
+	[RuletypesAlertStateDTO.pending]: 2,
+	[RuletypesAlertStateDTO.recovering]: 2,
+	'no-data': 3,
+	[RuletypesAlertStateDTO.nodata]: 3,
+	[RuletypesAlertStateDTO.disabled]: 4,
+	muted: 5,
 };

 export const STATE_VS_COLOR: {
@@ -16,9 +22,10 @@ export const STATE_VS_COLOR: {
 	{
 		0: { stroke: Color.BG_CHERRY_500, fill: Color.BG_CHERRY_500 },
 		1: { stroke: Color.BG_FOREST_500, fill: Color.BG_FOREST_500 },
-		2: { stroke: Color.BG_SIENNA_400, fill: Color.BG_SIENNA_400 },
-		3: { stroke: Color.BG_VANILLA_400, fill: Color.BG_VANILLA_400 },
-		4: { stroke: Color.BG_INK_100, fill: Color.BG_INK_100 },
+		2: { stroke: Color.BG_AMBER_500, fill: Color.BG_AMBER_500 },
+		3: { stroke: Color.BG_SIENNA_400, fill: Color.BG_SIENNA_400 },
+		4: { stroke: Color.BG_VANILLA_400, fill: Color.BG_VANILLA_400 },
+		5: { stroke: Color.BG_INK_100, fill: Color.BG_INK_100 },
 	},
 ];

--- a/frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx
@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useGetAlertRuleDetailsTimelineGraphData } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
+import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';

 import Graph from '../Graph/Graph';

@@ -18,30 +20,20 @@ function GraphWrapper({
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTimelineGraphData();

-	// TODO(shaheer): uncomment when the API is ready for
-	// const { startTime } = useAlertHistoryQueryParams();
-
-	// const [isVerticalGraph, setIsVerticalGraph] = useState(false);
-
-	// useEffect(() => {
-	// 	const checkVerticalGraph = (): void => {
-	// 		if (startTime) {
-	// 			const startTimeDate = dayjs(Number(startTime));
-	// 			const twentyFourHoursAgo = dayjs().subtract(
-	// 				HORIZONTAL_GRAPH_HOURS_THRESHOLD,
-	// 				DAYJS_MANIPULATE_TYPES.HOUR,
-	// 			);
-
-	// 			setIsVerticalGraph(startTimeDate.isBefore(twentyFourHoursAgo));
-	// 		}
-	// 	};
-
-	// 	checkVerticalGraph();
-	// }, [startTime]);
+	const adaptedData = useMemo((): AlertRuleTimelineGraphResponse[] | null => {
+		if (!data?.data) {
+			return null;
+		}
+		return data.data.map((item) => ({
+			start: item.start,
+			end: item.end,
+			state: item.state as AlertRuleTimelineGraphResponse['state'],
+		}));
+	}, [data?.data]);

 	return (
-		<div className="timeline-graph">
-			<div className="timeline-graph__title">
+		<div className="timeline-graph" data-testid="timeline-graph">
+			<div className="timeline-graph__title" data-testid="timeline-graph-title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">
@@ -49,7 +41,7 @@ function GraphWrapper({
 					isLoading={isLoading}
 					isError={isError || !isValidRuleId || !ruleId}
 					isRefetching={isRefetching}
-					data={data?.payload?.data || null}
+					data={adaptedData}
 				>
 					{(data): JSX.Element => <Graph type="horizontal" data={data} />}
 				</DataStateRenderer>
--- a/frontend/src/container/AlertHistory/Timeline/Table/Table.styles.scss
+++ b/frontend/src/container/AlertHistory/Timeline/Table/Table.styles.scss
@@ -1,11 +1,35 @@
 .timeline-table {
 	border-top: 1px solid var(--l1-border);
 	border-radius: 6px;
-	overflow: hidden;
 	margin-top: 4px;
 	min-height: 600px;
+
+	&__filter {
+		padding: 12px 16px;
+		background: var(--l1-background);
+		border-bottom: 1px solid var(--l1-border);
+	}
+
+	&__filter-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__filter-search {
+		flex: 1;
+	}
+
+	&__filter--loading,
+	&__filter--loading-skeleton {
+		width: 100% !important;
+	}
+
 	.ant-table {
 		background: var(--l1-background);
+		&-placeholder {
+			background: var(--l1-background) !important;
+		}
 		&-cell {
 			padding: 12px 16px !important;
 			vertical-align: baseline;
@@ -23,6 +47,9 @@
 		&-tbody > tr > td {
 			border: none;
 		}
+		&-footer {
+			background-color: var(--l1-background);
+		}
 	}

 	.label-filter {
@@ -86,4 +113,38 @@
 			background: var(--l2-background);
 		}
 	}
+
+	&__error {
+		display: flex;
+		align-self: flex-start;
+		justify-content: flex-start;
+		text-align: left;
+	}
+
+	&__pagination {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: var(--spacing-4);
+		padding: var(--spacing-6) var(--spacing-8);
+		background: var(--l1-background);
+
+		.pagination-controls {
+			display: flex;
+			gap: 4px;
+
+			.ant-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 4px;
+				min-width: 24px;
+				height: 24px;
+
+				&:disabled {
+					opacity: 0.4;
+				}
+			}
+		}
+	}
 }
--- a/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx
@@ -1,52 +1,129 @@
-import { HTMLAttributes, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Table } from 'antd';
+import { HTMLAttributes, useCallback, useMemo } from 'react';
+import { Button, Skeleton, Table } from 'antd';
+import { ChevronLeft, ChevronRight } from '@signozhq/icons';
 import logEvent from 'api/common/logEvent';
-import { initialFilters } from 'constants/queryBuilder';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import {
+	QuerySearchV2Provider,
+	useExpression,
+	useInputExpression,
+	useQuerySearchOnChange,
+	useQuerySearchOnRun,
+} from 'components/QueryBuilderV2';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import {
 	useGetAlertRuleDetailsTimelineTable,
 	useTimelineTable,
 } from 'pages/AlertDetails/hooks';
+import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import { useTimezone } from 'providers/Timezone';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';

+import { useAlertHistoryFilterSuggestions } from './useAlertHistoryFilterSuggestions';
 import { timelineTableColumns } from './useTimelineTable';

 import './Table.styles.scss';

-function TimelineTable(): JSX.Element {
-	const [filters, setFilters] = useState<TagFilter>(initialFilters);
+export const ALERT_HISTORY_EXPRESSION_KEY = 'alertHistoryExpression';

-	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
-		useGetAlertRuleDetailsTimelineTable({ filters });
+function TimelineTableContent(): JSX.Element {
+	const expression = useExpression();
+	const inputExpression = useInputExpression();
+	const querySearchOnChange = useQuerySearchOnChange();
+	const querySearchOnRun = useQuerySearchOnRun();
+
+	const {
+		isLoading,
+		isRefetching,
+		isError,
+		data,
+		error,
+		ruleId,
+		refetch,
+		cancel,
+	} = useGetAlertRuleDetailsTimelineTable({ filterExpression: expression });
+
+	const apiError = useMemo(() => convertToApiError(error), [error]);
+
+	const { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys } =
+		useAlertHistoryFilterSuggestions(ruleId ?? null);
+
+	const { timelineData, totalItems, nextCursor } = useMemo(() => {
+		const response = data?.data;
+		const items: AlertRuleTimelineTableResponse[] | undefined =
+			response?.items?.map((item) => {
+				return {
+					ruleID: item.ruleId,
+					ruleName: item.ruleName,
+					overallState: item.overallState as string,
+					overallStateChanged: item.overallStateChanged,
+					state: item.state as string,
+					stateChanged: item.stateChanged,
+					unixMilli: item.unixMilli,
+					fingerprint: item.fingerprint,
+					value: item.value,
+					labels: labelsArrayToObject(item.labels),
+					relatedLogsLink: item.relatedLogsLink,
+					relatedTracesLink: item.relatedTracesLink,
+				};
+			});

-	const { timelineData, totalItems, labels } = useMemo(() => {
-		const response = data?.payload?.data;
 		return {
-			timelineData: response?.items,
-			totalItems: response?.total,
-			labels: response?.labels,
+			timelineData: items,
+			totalItems: response?.total ?? 0,
+			nextCursor: response?.nextCursor,
 		};
-	}, [data?.payload?.data]);
+	}, [data?.data]);

-	const { paginationConfig, onChangeHandler } = useTimelineTable({
+	const {
+		paginationConfig,
+		onChangeHandler,
+		handleNextPage,
+		handlePrevPage,
+		hasNextPage,
+		hasPrevPage,
+	} = useTimelineTable({
 		totalItems: totalItems ?? 0,
+		nextCursor,
 	});

-	const { t } = useTranslation('common');
-
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();

-	if (isError || !isValidRuleId || !ruleId) {
-		return <div>{t('something_went_wrong')}</div>;
-	}
+	const handleRunQuery = useCallback(
+		(updatedExpression?: string): void => {
+			const nextExpression = updatedExpression ?? inputExpression;
+			querySearchOnRun(nextExpression);
+
+			if (nextExpression === expression) {
+				refetch();
+			}
+		},
+		[querySearchOnRun, refetch, inputExpression, expression],
+	);
+
+	const queryData = useMemo(
+		() => ({
+			...initialQueryBuilderFormValuesMap.logs,
+			queryName: 'A',
+			dataSource: DataSource.LOGS,
+			filter: { expression },
+			expression,
+		}),
+		[expression],
+	);

 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'timeline-row',
 		onClick: (): void => {
-			logEvent('Alert history: Timeline table row: Clicked', {
+			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
 				labels: record.labels,
 			});
@@ -54,24 +131,114 @@ function TimelineTable(): JSX.Element {
 	});

 	return (
-		<div className="timeline-table">
+		<div className="timeline-table" data-testid="timeline-table">
+			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
+			{!isLoadingKeys && hardcodedAttributeKeys ? (
+				<div className="timeline-table__filter">
+					<div className="timeline-table__filter-row">
+						<div
+							className="timeline-table__filter-search"
+							data-testid="timeline-filter-search"
+						>
+							<QuerySearch
+								onChange={querySearchOnChange}
+								queryData={queryData}
+								dataSource={DataSource.LOGS}
+								onRun={handleRunQuery}
+								hardcodedAttributeKeys={hardcodedAttributeKeys}
+								valueSuggestionsOverride={valueSuggestionsOverride}
+							/>
+						</div>
+						<RunQueryBtn
+							isLoadingQueries={isLoading || isRefetching}
+							onStageRunQuery={(): void => handleRunQuery()}
+							handleCancelQuery={cancel}
+						/>
+					</div>
+				</div>
+			) : (
+				<div className="timeline-table__filter timeline-table__filter--loading">
+					<Skeleton.Input
+						className="timeline-table__filter--loading-skeleton"
+						active
+						data-testid="timeline-filter-skeleton"
+					/>
+				</div>
+			)}
 			<Table
 				rowKey={(row): string => `${row.fingerprint}-${row.value}-${row.unixMilli}`}
 				columns={timelineTableColumns({
-					filters,
-					labels: labels ?? {},
-					setFilters,
 					formatTimezoneAdjustedTimestamp,
 				})}
 				onRow={handleRowClick}
 				dataSource={timelineData}
-				pagination={paginationConfig}
+				pagination={false}
 				size="middle"
 				onChange={onChangeHandler}
 				loading={isLoading || isRefetching}
+				locale={{
+					emptyText:
+						isError && apiError ? (
+							<div className="timeline-table__error" data-testid="timeline-error">
+								<ErrorContent error={apiError} />
+							</div>
+						) : undefined,
+				}}
+				footer={(): JSX.Element => (
+					<div className="timeline-table__pagination">
+						<div
+							className="timeline-table__pagination-info"
+							data-testid="timeline-footer-range"
+						>
+							{paginationConfig.showTotal?.(totalItems, [
+								totalItems === 0
+									? 0
+									: ((paginationConfig.current ?? 1) - 1) *
+											(paginationConfig.pageSize ?? 10) +
+										1,
+								Math.min(
+									(paginationConfig.current ?? 1) * (paginationConfig.pageSize ?? 10),
+									totalItems,
+								),
+							])}
+						</div>
+						<div className="pagination-controls">
+							<Button
+								type="text"
+								size="small"
+								disabled={!hasPrevPage}
+								onClick={handlePrevPage}
+								data-testid="timeline-prev-page"
+							>
+								<ChevronLeft size={14} />
+							</Button>
+							<Button
+								type="text"
+								size="small"
+								disabled={!hasNextPage}
+								onClick={handleNextPage}
+								data-testid="timeline-next-page"
+							>
+								<ChevronRight size={14} />
+							</Button>
+						</div>
+					</div>
+				)}
 			/>
 		</div>
 	);
 }

+function TimelineTable(): JSX.Element {
+	return (
+		<QuerySearchV2Provider
+			queryParamKey={ALERT_HISTORY_EXPRESSION_KEY}
+			initialExpression=""
+			persistOnUnmount
+		>
+			<TimelineTableContent />
+		</QuerySearchV2Provider>
+	);
+}
+
 export default TimelineTable;
--- a/frontend/src/container/AlertHistory/Timeline/Table/useAlertHistoryFilterSuggestions.ts
+++ b/frontend/src/container/AlertHistory/Timeline/Table/useAlertHistoryFilterSuggestions.ts
@@ -0,0 +1,100 @@
+import { useCallback, useMemo } from 'react';
+import {
+	getRuleHistoryFilterValues,
+	useGetRuleHistoryFilterKeys,
+} from 'api/generated/services/rules';
+import { useAlertHistoryQueryParams } from 'pages/AlertDetails/hooks';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { fieldContextToSuggestionContext } from 'container/AlertHistory/Timeline/Table/utils';
+
+export interface AlertHistoryFilterSuggestions {
+	hardcodedAttributeKeys: QueryKeyDataSuggestionsProps[];
+	valueSuggestionsOverride: (
+		key: string,
+		searchText: string,
+	) => Promise<{
+		stringValues: string[];
+		numberValues: number[];
+		complete: boolean;
+	}>;
+	isLoadingKeys: boolean;
+}
+
+export function useAlertHistoryFilterSuggestions(
+	ruleId: string | null,
+): AlertHistoryFilterSuggestions {
+	const { startTime, endTime } = useAlertHistoryQueryParams();
+
+	const { data: filterKeysData, isLoading: isLoadingKeys } =
+		useGetRuleHistoryFilterKeys(
+			{ id: ruleId ?? '' },
+			{ startUnixMilli: startTime, endUnixMilli: endTime },
+			{
+				query: {
+					enabled: !!ruleId,
+					refetchOnMount: false,
+					refetchOnWindowFocus: false,
+				},
+			},
+		);
+
+	const hardcodedAttributeKeys = useMemo((): QueryKeyDataSuggestionsProps[] => {
+		const keys = filterKeysData?.data?.keys;
+		if (!keys) {
+			// by default, when QuerySearch keys fails, we don't render fallback keys
+			// we just return empty to let user write whatever they want with no
+			// key suggestion
+			return [];
+		}
+		return Object.values(keys).flatMap((items) =>
+			items.map(
+				(item) =>
+					({
+						label: item.name,
+						name: item.name,
+						type: item.fieldDataType || 'string',
+						signal: 'logs' as const,
+						fieldDataType: item.fieldDataType,
+						fieldContext: fieldContextToSuggestionContext(item.fieldContext),
+					}) satisfies QueryKeyDataSuggestionsProps,
+			),
+		);
+	}, [filterKeysData]);
+
+	const valueSuggestionsOverride = useCallback(
+		async (
+			key: string,
+			searchText: string,
+		): Promise<{
+			stringValues: string[];
+			numberValues: number[];
+			complete: boolean;
+		}> => {
+			if (!ruleId) {
+				return {
+					stringValues: [],
+					numberValues: [],
+					complete: true,
+				};
+			}
+			const response = await getRuleHistoryFilterValues(
+				{ id: ruleId },
+				{
+					name: key,
+					searchText,
+					startUnixMilli: startTime,
+					endUnixMilli: endTime,
+				},
+			);
+			const values = response.data?.values;
+			return {
+				stringValues: values?.stringValues ?? [],
+				numberValues: values?.numberValues ?? [],
+				complete: response.data?.complete ?? false,
+			};
+		},
+		[ruleId, startTime, endTime],
+	);
+
+	return { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys };
+}
--- a/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
@@ -1,83 +1,15 @@
-import { useMemo } from 'react';
-import { Ellipsis, Search } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
-import { Button, TableColumnsType as ColumnsType } from 'antd';
-import ClientSideQBSearch, {
-	AttributeKey,
-} from 'components/ClientSideQBSearch/ClientSideQBSearch';
+import { Ellipsis } from '@signozhq/icons';
+import { Button, TableColumnsType as ColumnsType, Tooltip } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
-import { transformKeyValuesToAttributeValuesMap } from 'container/QueryBuilder/filters/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import AlertLabels, {
-	AlertLabelsProps,
-} from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
+import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import AlertState from 'pages/AlertDetails/AlertHeader/AlertState/AlertState';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-const transformLabelsToQbKeys = (
-	labels: AlertRuleTimelineTableResponse['labels'],
-): AttributeKey[] => Object.keys(labels).flatMap((key) => [{ key }]);
-
-function LabelFilter({
-	filters,
-	setFilters,
-	labels,
-}: {
-	setFilters: (filters: TagFilter) => void;
-	filters: TagFilter;
-	labels: AlertLabelsProps['labels'];
-}): JSX.Element | null {
-	const isDarkMode = useIsDarkMode();
-
-	const { transformedKeys, attributesMap } = useMemo(
-		() => ({
-			transformedKeys: transformLabelsToQbKeys(labels || {}),
-			attributesMap: transformKeyValuesToAttributeValuesMap(labels),
-		}),
-		[labels],
-	);
-
-	const handleSearch = (tagFilters: TagFilter): void => {
-		const tagFiltersLength = tagFilters.items.length;
-
-		if (
-			(!tagFiltersLength && (!filters || !filters.items.length)) ||
-			tagFiltersLength === filters?.items.length
-		) {
-			return;
-		}
-		setFilters(tagFilters);
-	};
-
-	return (
-		<ClientSideQBSearch
-			onChange={handleSearch}
-			filters={filters}
-			className="alert-history-label-search"
-			attributeKeys={transformedKeys}
-			attributeValuesMap={attributesMap}
-			suffixIcon={
-				<Search
-					size={14}
-					color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-				/>
-			}
-		/>
-	);
-}

 export const timelineTableColumns = ({
-	filters,
-	labels,
-	setFilters,
 	formatTimezoneAdjustedTimestamp,
 }: {
-	filters: TagFilter;
-	labels: AlertLabelsProps['labels'];
-	setFilters: (filters: TagFilter) => void;
 	formatTimezoneAdjustedTimestamp: (
 		input: TimestampInput,
 		format?: string,
@@ -89,18 +21,16 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<div className="alert-rule-state">
+			<div className="alert-rule-state" data-testid="timeline-row-state">
 				<AlertState state={value} showLabel />
 			</div>
 		),
 	},
 	{
-		title: (
-			<LabelFilter setFilters={setFilters} filters={filters} labels={labels} />
-		),
+		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels">
+			<div className="alert-rule-labels" data-testid="timeline-row-labels">
 				<AlertLabels labels={labels} />
 			</div>
 		),
@@ -110,7 +40,10 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div className="alert-rule__created-at">
+			<div
+				className="alert-rule__created-at"
+				data-testid="timeline-row-created-at"
+			>
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -119,15 +52,27 @@ export const timelineTableColumns = ({
 		title: 'ACTIONS',
 		width: 140,
 		align: 'right',
-		render: (record): JSX.Element => (
-			<ConditionalAlertPopover
-				relatedTracesLink={record.relatedTracesLink}
-				relatedLogsLink={record.relatedLogsLink}
-			>
-				<Button type="text" ghost>
-					<Ellipsis className="dropdown-icon" size="md" />
-				</Button>
-			</ConditionalAlertPopover>
-		),
+		render: (_, record): JSX.Element => {
+			if (!record.relatedTracesLink && !record.relatedLogsLink) {
+				return (
+					<Tooltip title="No links available for this item">
+						<Button type="text" ghost disabled data-testid="timeline-row-actions">
+							<Ellipsis className="dropdown-icon" size="md" />
+						</Button>
+					</Tooltip>
+				);
+			}
+
+			return (
+				<ConditionalAlertPopover
+					relatedTracesLink={record.relatedTracesLink ?? ''}
+					relatedLogsLink={record.relatedLogsLink ?? ''}
+				>
+					<Button type="text" ghost data-testid="timeline-row-actions">
+						<Ellipsis className="dropdown-icon" size="md" />
+					</Button>
+				</ConditionalAlertPopover>
+			);
+		},
 	},
 ];
--- a/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTableCursor.ts
+++ b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTableCursor.ts
@@ -0,0 +1,53 @@
+import {
+	Options,
+	parseAsInteger,
+	parseAsStringLiteral,
+	useQueryState,
+	UseQueryStateReturn,
+} from 'nuqs';
+import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants';
+
+const defaultNuqsOptions: Options = {
+	history: 'push',
+};
+
+export const TIMELINE_TABLE_PARAMS = {
+	PAGE: 'page',
+	ORDER: 'order',
+} as const;
+
+const ORDER_VALUES = ['asc', 'desc'] as const;
+export type OrderDirection = (typeof ORDER_VALUES)[number];
+
+export const useTimelineTablePage = (): UseQueryStateReturn<number, number> =>
+	useQueryState(
+		TIMELINE_TABLE_PARAMS.PAGE,
+		parseAsInteger.withDefault(1).withOptions(defaultNuqsOptions),
+	);
+
+export const useTimelineTableOrder = (): UseQueryStateReturn<
+	OrderDirection,
+	OrderDirection
+> =>
+	useQueryState(
+		TIMELINE_TABLE_PARAMS.ORDER,
+		parseAsStringLiteral(ORDER_VALUES)
+			.withDefault('asc')
+			.withOptions(defaultNuqsOptions),
+	);
+
+export function encodeCursor(page: number, limit: number): string | undefined {
+	if (page <= 1) {
+		return undefined;
+	}
+	const offset = (page - 1) * limit;
+	// Backend uses base64.RawURLEncoding (URL-safe, no padding)
+	return btoa(JSON.stringify({ offset, limit }))
+		.replace(/\+/g, '-')
+		.replace(/\//g, '_')
+		.replace(/=+$/, '');
+}
+
+export function computeCursorForPage(page: number): string | undefined {
+	return encodeCursor(page, TIMELINE_TABLE_PAGE_SIZE);
+}
--- a/frontend/src/container/AlertHistory/Timeline/Table/utils.ts
+++ b/frontend/src/container/AlertHistory/Timeline/Table/utils.ts
@@ -0,0 +1,26 @@
+import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+
+const fieldContextToSuggestionMap: Record<
+	TelemetrytypesFieldContextDTO,
+	QueryKeyDataSuggestionsProps['fieldContext']
+> = {
+	[TelemetrytypesFieldContextDTO.resource]: 'resource',
+	[TelemetrytypesFieldContextDTO.span]: 'span',
+	[TelemetrytypesFieldContextDTO.attribute]: 'attribute',
+	// no maps for the following values on suggestion context
+	[TelemetrytypesFieldContextDTO.body]: undefined,
+	[TelemetrytypesFieldContextDTO.metric]: undefined,
+	[TelemetrytypesFieldContextDTO.log]: undefined,
+	[TelemetrytypesFieldContextDTO['']]: undefined,
+};
+
+export function fieldContextToSuggestionContext(
+	fc: TelemetrytypesFieldContextDTO | undefined,
+): QueryKeyDataSuggestionsProps['fieldContext'] {
+	if (fc === undefined) {
+		return undefined;
+	}
+
+	return fieldContextToSuggestionMap[fc];
+}
--- a/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx
@@ -23,6 +23,7 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
+			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -33,6 +34,7 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
+			testId: 'timeline-tab-top-contributors',
 		},
 	];

@@ -57,14 +59,17 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
+			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
+			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
+			testId: 'timeline-filter-resolved',
 		},
 	];

--- a/frontend/src/container/AlertHistory/utils/labelAdapters.ts
+++ b/frontend/src/container/AlertHistory/utils/labelAdapters.ts
@@ -0,0 +1,19 @@
+import type { Querybuildertypesv5LabelDTO } from 'api/generated/services/sigNoz.schemas';
+import type { Labels } from 'types/api/alerts/def';
+
+export function labelsArrayToObject(
+	labels: Querybuildertypesv5LabelDTO[] | null | undefined,
+): Labels {
+	if (!labels) {
+		return {};
+	}
+
+	return labels.reduce<Labels>((acc, label) => {
+		const key = label.key?.name ?? '';
+		const value = String(label.value ?? '');
+		if (key) {
+			acc[key] = value;
+		}
+		return acc;
+	}, {});
+}
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -104,6 +104,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		isFetchingFeatureFlags,
 		featureFlagsFetchError,
 		userPreferences,
+		isFetchingUserPreferences,
 		updateChangelog,
 		toggleChangelogModal,
 		showChangelogModal,
@@ -724,12 +725,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, []);

-	// Set sidebar as loaded after user preferences are fetched
+	// Set sidebar as loaded after user preferences fetch completes (success or error)
 	useEffect(() => {
-		if (userPreferences !== null) {
+		if (!isFetchingUserPreferences) {
 			setIsSidebarLoaded(true);
 		}
-	}, [userPreferences]);
+	}, [isFetchingUserPreferences]);

 	// Use localStorage value as fallback until preferences are loaded
 	const isSideNavPinned = isSidebarLoaded
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx
@@ -147,7 +147,6 @@ function ServiceDetails({
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		undefined,
 		{
 			query: {
 				enabled: !!serviceId && !cloudAccountId,
--- a/frontend/src/container/Integrations/CloudIntegration/ServicesList.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/ServicesList.tsx
@@ -39,9 +39,12 @@ function ServicesList({
 	const {
 		data: providerServicesMetadata,
 		isLoading: isProviderServicesLoading,
-	} = useListServicesMetadata({ cloudProvider: type }, undefined, {
-		query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
-	});
+	} = useListServicesMetadata(
+		{ cloudProvider: type },
+		{
+			query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
+		},
+	);

 	const servicesMetadata = hasConnectedAccounts
 		? accountServicesMetadata
--- a/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/tests/AttributeMappingsTab.test.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/tests/AttributeMappingsTab.test.tsx
@@ -15,6 +15,18 @@ jest.mock('@signozhq/ui/sonner', () => ({
 	},
 }));

+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';
+
+// Admin gating on the write controls flows through useAuthZ. Mock it directly
+// (synchronous) so the functional tests stay synchronous; the read-only block
+// below flips it to deny-all.
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockedUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 import {
 	GROUPS_ENDPOINT,
 	makeGroupsResponse,
@@ -102,6 +114,8 @@ describe('AttributeMappingsTab (integration)', () => {
 	beforeEach(() => {
 		// Reset URL state between tests — jsdom shares window.location across a file.
 		window.history.pushState(null, '', '/');
+		// Default to an admin; the read-only block overrides this.
+		mockedUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
@@ -507,4 +521,55 @@ describe('AttributeMappingsTab (integration)', () => {
 			).resolves.toBeInTheDocument();
 		});
 	});
+
+	// The write APIs (create/update/delete group & mapper) are Admin-only on the
+	// backend, so a non-admin gets a read-only view: the data renders, but every
+	// write control is hidden.
+	describe('read-only (non-admin)', () => {
+		beforeEach(() => {
+			mockedUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+		});
+
+		it('hides the "Add a new group" button', async () => {
+			setupGroups();
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			expect(screen.queryByTestId('add-group-row')).not.toBeInTheDocument();
+		});
+
+		it('hides the group enable toggle and actions menu', async () => {
+			setupGroups();
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			expect(
+				screen.queryByTestId('group-enabled-group-1'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('group-actions-group-1'),
+			).not.toBeInTheDocument();
+		});
+
+		it('renders mappers read-only: no "Add mapping" button or row actions', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			setupGroups();
+			setupMappers([makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model' })]);
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			await expandGroup(user);
+
+			// The mapper still renders...
+			await screen.findByTestId('mapper-target-mapper-1');
+			// ...but every write control is gone.
+			expect(screen.queryByTestId('add-mapper-group-1')).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('mapper-enabled-mapper-1'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', { name: 'Mapping actions' }),
+			).not.toBeInTheDocument();
+		});
+	});
 });
--- a/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx
@@ -1,6 +1,7 @@
 import { Switch } from '@signozhq/ui/switch';

 import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupActionsMenu from '../GroupActionsMenu/GroupActionsMenu';
 import styles from './GroupHeaderActions.module.scss';

@@ -16,7 +17,11 @@ function GroupHeaderActions({
 	onToggle,
 	onEdit,
 	onRemove,
-}: GroupHeaderActionsProps): JSX.Element {
+}: GroupHeaderActionsProps): JSX.Element | null {
+	const canManage = useCanManageAttributeMapping();
+	if (!canManage) {
+		return null;
+	}
 	return (
 		<div
 			className={styles.actions}
--- a/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx
@@ -11,6 +11,7 @@ import {
 	Mapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import { COLUMN_COUNT } from '../constants';
 import MapperRow from '../MapperRow/MapperRow';
 import MapperRowSkeleton from '../MapperRow/MapperRowSkeleton';
@@ -39,6 +40,7 @@ function GroupMappers({
 	onEditMapper,
 }: GroupMappersProps): JSX.Element {
 	const { hydrateGroupMappers, removeMapper, toggleMapper } = editor;
+	const canManage = useCanManageAttributeMapping();

 	const hasServerId = group.serverId !== null;
 	const { data, isLoading, isError } = useListSpanMappers(
@@ -144,16 +146,20 @@ function GroupMappers({
 		/>
 	));

-	// The add-mapping row trails every non-error state (including loading/empty).
+	// The add-mapping row trails every non-error state (including loading/empty),
+	// but only for users who can manage mappings — non-admins get a read-only view.
 	let rows: JSX.Element[];
 	if (isErrorMappers) {
 		rows = [errorRow];
 	} else if (isLoadingMappers && mapperCount === 0) {
-		rows = [...skeletonRows, addMapperRow];
+		rows = [...skeletonRows];
 	} else if (mapperCount === 0) {
-		rows = [emptyRow, addMapperRow];
+		rows = [emptyRow];
 	} else {
-		rows = [...mapperRows, addMapperRow];
+		rows = [...mapperRows];
+	}
+	if (canManage && !isErrorMappers) {
+		rows.push(addMapperRow);
 	}

 	return (
--- a/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx
@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { motion } from 'motion/react';

 import { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import MapperActionsMenu from '../MapperActionsMenu/MapperActionsMenu';
 import styles from './MapperRow.module.scss';

@@ -30,6 +31,7 @@ function MapperRow({
 	onRemove,
 	onToggle,
 }: MapperRowProps): JSX.Element {
+	const canManage = useCanManageAttributeMapping();
 	const sources = mapper.sources ?? [];
 	const visibleSources = sources.slice(0, MAX_VISIBLE_SOURCES);
 	const remainingSources = sources.length - visibleSources.length;
@@ -101,14 +103,16 @@ function MapperRow({
 				)}
 			</td>
 			<td className={cx(styles.cell, styles.actionsCell)}>
-				<div className={styles.rowActions}>
-					<Switch
-						value={mapper.enabled}
-						onChange={(checked): void => onToggle(mapper.localId, checked)}
-						testId={`mapper-enabled-${mapper.localId}`}
-					/>
-					<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
-				</div>
+				{canManage && (
+					<div className={styles.rowActions}>
+						<Switch
+							value={mapper.enabled}
+							onChange={(checked): void => onToggle(mapper.localId, checked)}
+							testId={`mapper-enabled-${mapper.localId}`}
+						/>
+						<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
+					</div>
+				)}
 			</td>
 		</motion.tr>
 	);
--- a/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx
@@ -11,6 +11,7 @@ import {
 	DraftMapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupHeader from './GroupHeader/GroupHeader';
 import GroupHeaderActions from './GroupHeaderActions/GroupHeaderActions';
 import GroupMappers from './GroupMappers/GroupMappers';
@@ -33,6 +34,7 @@ function MappingsTable({
 	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
 	const [targetGroupId, setTargetGroupId] = useState<string | null>(null);
 	const drawer = useMapperFormDrawer();
+	const canManage = useCanManageAttributeMapping();

 	const { upsertMapper, removeMapper } = editor;

@@ -120,18 +122,20 @@ function MappingsTable({

 	return (
 		<div className={styles.tableWrapper}>
-			<div className={styles.toolbar}>
-				<Button
-					variant="link"
-					color="primary"
-					prefix={<Plus size={14} />}
-					onClick={onAddGroup}
-					testId="add-group-row"
-					disabled={editor.isLoading}
-				>
-					Add a new group
-				</Button>
-			</div>
+			{canManage && (
+				<div className={styles.toolbar}>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={onAddGroup}
+						testId="add-group-row"
+						disabled={editor.isLoading}
+					>
+						Add a new group
+					</Button>
+				</div>
+			)}

 			{isEmpty ? (
 				<div className={styles.tableState} data-testid="mapper-groups-empty">
--- a/frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx
@@ -8,12 +8,18 @@ import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
 import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
+import TestTab from './TestTab/TestTab';
 import { useAttributeMappingEditor } from './hooks/useAttributeMappingEditor';
 import { useGroupFormDrawer } from './components/GroupFormDrawer/hooks/useGroupFormDrawer';
+import { useTestSpanMapper } from './TestTab/useTestSpanMapper';
+
+const MAPPINGS_TAB_KEY = 'attribute-mappings';
+const TEST_TAB_KEY = 'test';

 function LLMObservabilityAttributeMapping(): JSX.Element {
 	const editor = useAttributeMappingEditor();
 	const groupDrawer = useGroupFormDrawer();
+	const spanTest = useTestSpanMapper(editor.snapshot, editor.groups);

 	const { discard } = editor;
 	// Discarding wipes the whole working copy, so gate it behind a confirm
@@ -31,7 +37,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {

 	const tabItems = [
 		{
-			key: 'attribute-mappings',
+			key: MAPPINGS_TAB_KEY,
 			label: 'Attribute Mappings',
 			children: (
 				<AttributeMappingsTab
@@ -42,11 +48,9 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			),
 		},
 		{
-			key: 'test',
+			key: TEST_TAB_KEY,
 			label: 'Test',
-			disabled: true,
-			disabledReason: 'Coming soon',
-			children: null,
+			children: <TestTab spanTest={spanTest} />,
 		},
 	];

@@ -71,7 +75,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {

 			<Tabs
 				testId="attribute-mapping-tabs"
-				defaultValue="attribute-mappings"
+				defaultValue={MAPPINGS_TAB_KEY}
 				items={tabItems}
 			/>
 			{groupDrawer.isOpen && (
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.module.scss
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.module.scss
@@ -0,0 +1,54 @@
+.skeleton {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: var(--l1-background);
+}
+
+.line {
+	display: flex;
+	align-items: center;
+	height: 18px;
+}
+
+.lineNumber {
+	flex: 0 0 40px;
+	padding-right: var(--padding-3);
+	text-align: right;
+	font-family: 'Geist Mono', monospace;
+	font-size: var(--font-size-xs);
+	color: var(--l3-foreground);
+	opacity: 0.6;
+	user-select: none;
+}
+
+.lineContent {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.bar {
+	height: 8px;
+	border-radius: var(--radius-1);
+	background: var(--l2-border);
+	animation: jsonSkeletonPulse 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.bar {
+		animation: none;
+	}
+}
+
+@keyframes jsonSkeletonPulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.45;
+	}
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.tsx
@@ -0,0 +1,56 @@
+import styles from './JsonEditorSkeleton.module.scss';
+
+interface SkeletonLine {
+	indent: number;
+	barWidths: number[];
+}
+
+const SKELETON_LINES: SkeletonLine[] = [
+	{ indent: 0, barWidths: [10] },
+	{ indent: 1, barWidths: [90, 10] },
+	{ indent: 2, barWidths: [155, 190] },
+	{ indent: 2, barWidths: [135, 190] },
+	{ indent: 2, barWidths: [150, 50] },
+	{ indent: 2, barWidths: [180, 35] },
+	{ indent: 2, barWidths: [185, 200] },
+	{ indent: 1, barWidths: [14] },
+	{ indent: 1, barWidths: [75, 10] },
+	{ indent: 2, barWidths: [95, 90] },
+	{ indent: 2, barWidths: [170, 85] },
+	{ indent: 1, barWidths: [10] },
+	{ indent: 0, barWidths: [10] },
+];
+
+const INDENT_WIDTH_PX = 14;
+
+function JsonEditorSkeleton(): JSX.Element {
+	return (
+		<div
+			className={styles.skeleton}
+			data-testid="json-editor-skeleton"
+			aria-hidden="true"
+		>
+			{SKELETON_LINES.map((line, lineIndex) => (
+				// eslint-disable-next-line react/no-array-index-key
+				<div key={lineIndex} className={styles.line}>
+					<span className={styles.lineNumber}>{lineIndex + 1}</span>
+					<span
+						className={styles.lineContent}
+						style={{ paddingLeft: line.indent * INDENT_WIDTH_PX }}
+					>
+						{line.barWidths.map((width, barIndex) => (
+							<span
+								// eslint-disable-next-line react/no-array-index-key
+								key={barIndex}
+								className={styles.bar}
+								style={{ width }}
+							/>
+						))}
+					</span>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default JsonEditorSkeleton;
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestResult.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestResult.tsx
@@ -0,0 +1,121 @@
+import { Badge } from '@signozhq/ui/badge';
+import { SpantypesSpanMapperTestSpanDTO } from 'api/generated/services/sigNoz.schemas';
+import { useMemo } from 'react';
+
+import {
+	AttrChangeStatus,
+	AttrDiffEntry,
+	diffAttributeMaps,
+	formatAttributeValue,
+} from './testPayload';
+import styles from './TestTab.module.scss';
+import { TestTabAttributes, TestTabResource } from './useTestSpanMapper';
+
+interface TestResultProps {
+	index: number;
+	span: SpantypesSpanMapperTestSpanDTO;
+	inputAttributes: TestTabAttributes;
+	inputResource: TestTabResource;
+}
+
+const STATUS_BADGE: Partial<
+	Record<
+		AttrChangeStatus,
+		{ color: 'success' | 'robin' | 'sienna'; label: string }
+	>
+> = {
+	added: { color: 'success', label: 'populated' },
+	changed: { color: 'robin', label: 'remapped' },
+	removed: { color: 'sienna', label: 'moved out' },
+};
+
+const ROW_CLASS: Partial<Record<AttrChangeStatus, string>> = {
+	added: styles.added,
+	removed: styles.removed,
+};
+
+interface ResultSection {
+	key: string;
+	title: string;
+	entries: AttrDiffEntry[];
+}
+
+function TestResult({
+	index,
+	span,
+	inputAttributes,
+	inputResource,
+}: TestResultProps): JSX.Element {
+	const attributeEntries = useMemo(
+		() => diffAttributeMaps(inputAttributes, span.attributes ?? {}),
+		[inputAttributes, span.attributes],
+	);
+	const resourceEntries = useMemo(
+		() => diffAttributeMaps(inputResource, span.resource ?? {}),
+		[inputResource, span.resource],
+	);
+
+	const sections: ResultSection[] = [
+		{
+			key: 'attributes',
+			title: 'Resulting attributes',
+			entries: attributeEntries,
+		},
+	];
+	if (resourceEntries.length > 0) {
+		sections.push({
+			key: 'resource',
+			title: 'Resulting resource',
+			entries: resourceEntries,
+		});
+	}
+
+	return (
+		<div className={styles.resultCard} data-testid={`test-result-${index}`}>
+			{sections.map((section) => (
+				<div
+					key={section.key}
+					className={styles.resultSection}
+					data-testid={`test-result-${index}-${section.key}`}
+				>
+					<div className={styles.resultTitle}>{section.title}</div>
+
+					{section.entries.length === 0 ? (
+						<div className={styles.resultEmpty}>No keys in this map.</div>
+					) : (
+						<div className={styles.attrRows}>
+							{section.entries.map((entry) => {
+								const badge = STATUS_BADGE[entry.status];
+								return (
+									<div
+										key={entry.key}
+										className={`${styles.attrRow} ${ROW_CLASS[entry.status] ?? ''}`}
+									>
+										<span className={styles.attrKey} title={entry.key}>
+											{entry.key}
+										</span>
+										<span
+											className={styles.attrValue}
+											title={formatAttributeValue(entry.value)}
+										>
+											{formatAttributeValue(entry.value)}
+										</span>
+										{badge ? (
+											<Badge color={badge.color} variant="outline">
+												{badge.label}
+											</Badge>
+										) : (
+											<span />
+										)}
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default TestResult;
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.module.scss
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.module.scss
@@ -0,0 +1,177 @@
+.testTab {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	margin-top: var(--spacing-6);
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-6);
+}
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	flex-shrink: 0;
+}
+
+.headerText {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.heading {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	margin: 0;
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-semibold);
+}
+
+.description {
+	margin: 0;
+	font-size: var(--periscope-font-size-base);
+	color: var(--l3-foreground);
+}
+
+.body {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--spacing-6);
+	height: calc(100vh - 320px);
+	min-height: 320px;
+}
+
+.editor {
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	overflow: hidden;
+}
+.validationCallout {
+	width: 100%;
+}
+
+// No top padding so results align with the editor's first line, which sits
+// flush against the top of its own panel.
+.resultsPanel {
+	height: 100%;
+	overflow-y: auto;
+	padding: var(--padding-4);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	background: var(--l1-background);
+}
+
+// Pre-run empty state that fills the blank right half.
+.placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-2);
+	height: 100%;
+	text-align: center;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.placeholderTitle {
+	font-weight: var(--font-weight-semibold);
+	color: var(--l2-foreground);
+}
+
+.error {
+	padding: var(--padding-3) var(--padding-4);
+	border-radius: var(--radius-2);
+	background: var(--callout-error-background);
+	color: var(--callout-error-title);
+	font-size: var(--periscope-font-size-base);
+}
+
+.results {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.resultCard {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	border-radius: var(--radius-2);
+	background: var(--l1-background);
+}
+
+.resultSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.resultTitle {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-semibold);
+}
+
+.resultEmpty {
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.attrRows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.attrRow {
+	display: grid;
+	grid-template-columns: clamp(200px, 40%, 340px) minmax(0, 1fr) auto;
+	align-items: center;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--padding-3);
+	border-radius: var(--radius-2);
+	font-family: 'Geist Mono', monospace;
+	font-size: var(--font-size-xs);
+
+	&.added {
+		background: var(--callout-success-background);
+	}
+
+	&.removed {
+		opacity: 0.65;
+
+		.attrKey,
+		.attrValue {
+			text-decoration: line-through;
+		}
+	}
+}
+
+.attrKey,
+.attrValue {
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.attrKey {
+	font-weight: var(--font-weight-medium);
+}
+
+.attrValue {
+	color: var(--l3-foreground);
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.tsx
@@ -0,0 +1,162 @@
+import MEditor from '@monaco-editor/react';
+import { Play, RotateCcw } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Callout } from '@signozhq/ui/callout';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import styles from './TestTab.module.scss';
+import JsonEditorSkeleton from './JsonEditorSkeleton';
+import TestResult from './TestResult';
+import {
+	defineSignozJsonTheme,
+	SIGNOZ_JSON_THEME_DARK,
+	SIGNOZ_JSON_THEME_LIGHT,
+} from './jsonEditorTheme';
+import { UseTestSpanMapper } from './useTestSpanMapper';
+
+interface TestTabProps {
+	spanTest: UseTestSpanMapper;
+}
+
+function TestTab({ spanTest }: TestTabProps): JSX.Element {
+	const {
+		input,
+		setInput,
+		run,
+		resetToTemplate,
+		isTemplateInput,
+		isRunning,
+		result,
+		testedAttributes,
+		testedResource,
+		error,
+		validationError,
+	} = spanTest;
+	const isDarkMode = useIsDarkMode();
+
+	function renderResults(): JSX.Element {
+		if (error) {
+			return (
+				<div className={styles.error} role="alert" data-testid="test-error">
+					{error}
+				</div>
+			);
+		}
+		if (result) {
+			if (result.length === 0) {
+				return (
+					<div className={styles.resultEmpty} data-testid="test-results-empty">
+						No spans returned. The mappers produced no output for this input.
+					</div>
+				);
+			}
+			return (
+				<div className={styles.results} data-testid="test-results">
+					{result.map((span, index) => (
+						<TestResult
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+							index={index}
+							span={span}
+							inputAttributes={testedAttributes ?? {}}
+							inputResource={testedResource ?? {}}
+						/>
+					))}
+				</div>
+			);
+		}
+		return (
+			<div className={styles.placeholder} data-testid="test-results-placeholder">
+				<span className={styles.placeholderTitle}>No results yet</span>
+				<span>
+					Run the test to see which target attributes your mappers populate.
+				</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.testTab} data-testid="test-tab">
+			<div className={styles.header}>
+				<div className={styles.headerText}>
+					<h3 className={styles.heading}>Test with sample span</h3>
+					<p className={styles.description}>
+						Paste a JSON span object to see which target attributes get populated and
+						which source key matched.
+					</p>
+				</div>
+
+				<div className={styles.headerActions}>
+					<Button
+						testId="reset-template-button"
+						variant="outlined"
+						color="secondary"
+						prefix={<RotateCcw size={14} />}
+						onClick={resetToTemplate}
+						disabled={isTemplateInput}
+					>
+						Reset to Default Span
+					</Button>
+
+					<Button
+						testId="run-test-button"
+						variant="solid"
+						color="primary"
+						prefix={<Play size={14} />}
+						onClick={run}
+						loading={isRunning}
+						disabled={isRunning || validationError !== null}
+					>
+						Run Test
+					</Button>
+				</div>
+			</div>
+
+			<div className={styles.body}>
+				<div
+					className={styles.editor}
+					data-testid="test-span-input"
+					aria-label="Sample span JSON"
+				>
+					<MEditor
+						language="json"
+						value={input}
+						onChange={(value): void => setInput(value ?? '')}
+						height="100%"
+						loading={<JsonEditorSkeleton />}
+						theme={isDarkMode ? SIGNOZ_JSON_THEME_DARK : SIGNOZ_JSON_THEME_LIGHT}
+						beforeMount={defineSignozJsonTheme}
+						options={{
+							minimap: { enabled: false },
+							fontSize: 12,
+							lineNumbers: 'on',
+							wordWrap: 'on',
+							scrollBeyondLastLine: false,
+							formatOnPaste: true,
+							tabSize: 2,
+							automaticLayout: true,
+							scrollbar: { alwaysConsumeMouseWheel: false },
+						}}
+					/>
+				</div>
+
+				<div className={styles.resultsPanel} data-testid="test-results-panel">
+					{renderResults()}
+				</div>
+			</div>
+
+			{validationError && (
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					title={validationError}
+					testId="test-input-error"
+					className={styles.validationCallout}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default TestTab;
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/jsonEditorTheme.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/jsonEditorTheme.ts
@@ -0,0 +1,38 @@
+//TODO: This is a local theme for now, but ideally for the editor as well. Just like prettyViewer, we have a theme. We should have a theme for the editor as well.
+import { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+
+export const SIGNOZ_JSON_THEME_DARK = 'signoz-attr-mapping-json-dark';
+export const SIGNOZ_JSON_THEME_LIGHT = 'signoz-attr-mapping-json-light';
+
+const SHARED_THEME = {
+	inherit: true,
+	colors: {
+		'editor.background': '#00000000', // transparent — inherit the panel bg
+	},
+	fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
+	fontSize: 12,
+	fontWeight: 'normal',
+	lineHeight: 18,
+	letterSpacing: -0.06,
+};
+
+export function defineSignozJsonTheme(monaco: Monaco): void {
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_DARK, {
+		...SHARED_THEME,
+		base: 'vs-dark',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_400 },
+			{ token: 'string.value.json', foreground: Color.BG_VANILLA_400 },
+		],
+	});
+
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_LIGHT, {
+		...SHARED_THEME,
+		base: 'vs',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_500 },
+			{ token: 'string.value.json', foreground: Color.BG_INK_400 },
+		],
+	});
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/spanInputStorage.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/spanInputStorage.ts
@@ -0,0 +1,53 @@
+import get from 'api/browser/localstorage/get';
+import remove from 'api/browser/localstorage/remove';
+import set from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+import { parseSpanInput } from './testPayload';
+
+export const SAMPLE_SPAN_JSON = `{
+  "attributes": {
+    "my_company.llm.input": "What is quantum computing?",
+    "llm.input_messages": "What is quantum computing?",
+    "gen_ai.request.model": "gpt-4",
+    "gen_ai.usage.total_tokens": 1250,
+    "gen_ai.content.completion": "Quantum computing leverages..."
+  },
+  "resource": {
+    "service.name": "llm-gateway",
+    "deployment.environment": "production"
+  }
+}`;
+
+function hasNoSpanData(input: string): boolean {
+	let span;
+	try {
+		span = parseSpanInput(input);
+	} catch {
+		return false;
+	}
+	return (
+		Object.keys(span.attributes ?? {}).length === 0 &&
+		Object.keys(span.resource ?? {}).length === 0
+	);
+}
+
+export function getStoredSpanInput(): string {
+	const stored = get(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN);
+	if (!stored?.trim() || hasNoSpanData(stored)) {
+		return SAMPLE_SPAN_JSON;
+	}
+	return stored;
+}
+
+export function setStoredSpanInput(value: string): void {
+	if (!value.trim() || hasNoSpanData(value)) {
+		remove(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN);
+		return;
+	}
+	set(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN, value);
+}
+
+export function clearStoredSpanInput(): void {
+	remove(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN);
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/testPayload.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/testPayload.ts
@@ -0,0 +1,145 @@
+import {
+	SpantypesPostableSpanMapperTestDTO,
+	SpantypesPostableSpanMapperTestGroupDTO,
+	SpantypesSpanMapperTestSpanDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { isEqual } from 'lodash-es';
+
+import { DraftGroup } from '../types';
+import {
+	buildPostableGroup,
+	buildPostableMapper,
+	groupDraftFromNode,
+	mapperDraftFromNode,
+} from '../utils';
+
+function shouldSendMappers(
+	snap: DraftGroup | undefined,
+	group: DraftGroup,
+): boolean {
+	if (!snap) {
+		return true;
+	}
+	return !isEqual(snap.mappers, group.mappers);
+}
+
+export function buildTestGroups(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+): SpantypesPostableSpanMapperTestGroupDTO[] {
+	const snapById = new Map(
+		snapshot
+			.filter((group) => group.serverId)
+			.map((group) => [group.serverId as string, group]),
+	);
+
+	return draft.map((group) => {
+		const base = buildPostableGroup(groupDraftFromNode(group));
+		const snap = group.serverId ? snapById.get(group.serverId) : undefined;
+		return {
+			...base,
+			mappers: shouldSendMappers(snap, group)
+				? group.mappers.map((mapper) =>
+						buildPostableMapper(mapperDraftFromNode(mapper)),
+					)
+				: null,
+		};
+	});
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+	return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isSpanEnvelope(parsed: Record<string, unknown>): boolean {
+	const keys = Object.keys(parsed);
+	return (
+		keys.length > 0 &&
+		keys.every((key) => key === 'attributes' || key === 'resource') &&
+		(isPlainObject(parsed.attributes) || isPlainObject(parsed.resource))
+	);
+}
+
+export function parseSpanInput(input: string): SpantypesSpanMapperTestSpanDTO {
+	const trimmed = input.trim();
+	if (!trimmed) {
+		throw new Error('Paste a JSON span object to run the test.');
+	}
+
+	let parsed: unknown;
+	try {
+		parsed = JSON.parse(trimmed);
+	} catch {
+		throw new Error(
+			'Invalid JSON — check for trailing commas or missing quotes.',
+		);
+	}
+
+	if (!isPlainObject(parsed)) {
+		throw new Error('Span must be a JSON object of attribute key-value pairs.');
+	}
+
+	if (isSpanEnvelope(parsed)) {
+		return {
+			attributes: isPlainObject(parsed.attributes) ? parsed.attributes : {},
+			resource: isPlainObject(parsed.resource) ? parsed.resource : {},
+		};
+	}
+
+	return { attributes: parsed, resource: {} };
+}
+
+export function buildTestRequest(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+	input: string,
+): SpantypesPostableSpanMapperTestDTO {
+	return {
+		groups: buildTestGroups(snapshot, draft),
+		spans: [parseSpanInput(input)],
+	};
+}
+
+export type AttrChangeStatus = 'added' | 'changed' | 'unchanged' | 'removed';
+
+export interface AttrDiffEntry {
+	key: string;
+	value: unknown;
+	status: AttrChangeStatus;
+}
+
+// Renders a diff value for display: strings as-is, everything else JSON-encoded.
+export function formatAttributeValue(value: unknown): string {
+	if (typeof value === 'string') {
+		return value;
+	}
+	return JSON.stringify(value);
+}
+
+export function diffAttributeMaps(
+	inputAttributes: Record<string, unknown>,
+	resultAttributes: Record<string, unknown>,
+): AttrDiffEntry[] {
+	const added: AttrDiffEntry[] = [];
+	const changed: AttrDiffEntry[] = [];
+	const unchanged: AttrDiffEntry[] = [];
+	const removed: AttrDiffEntry[] = [];
+
+	Object.entries(resultAttributes).forEach(([key, value]) => {
+		if (!(key in inputAttributes)) {
+			added.push({ key, value, status: 'added' });
+		} else if (!isEqual(inputAttributes[key], value)) {
+			changed.push({ key, value, status: 'changed' });
+		} else {
+			unchanged.push({ key, value, status: 'unchanged' });
+		}
+	});
+
+	Object.entries(inputAttributes).forEach(([key, value]) => {
+		if (!(key in resultAttributes)) {
+			removed.push({ key, value, status: 'removed' });
+		}
+	});
+
+	return [...added, ...changed, ...unchanged, ...removed];
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/TestTab/useTestSpanMapper.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/TestTab/useTestSpanMapper.ts
@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	RenderErrorResponseDTO,
+	SpantypesSpanMapperTestSpanDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useTestSpanMappers } from 'api/generated/services/spanmapper';
+import { AxiosError } from 'axios';
+import { debounce } from 'lodash-es';
+
+import { buildTestRequest, parseSpanInput } from './testPayload';
+import {
+	clearStoredSpanInput,
+	getStoredSpanInput,
+	SAMPLE_SPAN_JSON,
+	setStoredSpanInput,
+} from './spanInputStorage';
+import { DraftGroup } from '../types';
+
+export type TestTabAttributes = Record<string, unknown>;
+export type TestTabResource = Record<string, unknown>;
+
+const PERSIST_DEBOUNCE_MS = 500;
+
+function apiErrorMessage(error: unknown): string {
+	const axiosError = error as AxiosError<RenderErrorResponseDTO>;
+	return (
+		axiosError?.response?.data?.error?.message ??
+		(error instanceof Error ? error.message : 'Test failed. Please try again.')
+	);
+}
+
+export interface UseTestSpanMapper {
+	input: string;
+	setInput: (value: string) => void;
+	run: () => void;
+	reset: () => void;
+	resetToTemplate: () => void;
+	isTemplateInput: boolean;
+	isRunning: boolean;
+	validationError: string | null;
+	result: SpantypesSpanMapperTestSpanDTO[] | null;
+	testedAttributes: TestTabAttributes | null;
+	testedResource: TestTabResource | null;
+	error: string | null;
+}
+
+export function useTestSpanMapper(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+): UseTestSpanMapper {
+	const [input, setInputValue] = useState<string>(getStoredSpanInput);
+	const [error, setError] = useState<string | null>(null);
+	const [result, setResult] = useState<SpantypesSpanMapperTestSpanDTO[] | null>(
+		null,
+	);
+	const [testedAttributes, setTestedAttributes] =
+		useState<TestTabAttributes | null>(null);
+	const [testedResource, setTestedResource] = useState<TestTabResource | null>(
+		null,
+	);
+
+	const { mutate, isLoading } = useTestSpanMappers();
+
+	const persistInput = useMemo(
+		() => debounce(setStoredSpanInput, PERSIST_DEBOUNCE_MS),
+		[],
+	);
+
+	useEffect(
+		() => (): void => {
+			persistInput.flush();
+		},
+		[persistInput],
+	);
+
+	const setInput = useCallback(
+		(value: string): void => {
+			setInputValue(value);
+			persistInput(value);
+		},
+		[persistInput],
+	);
+
+	const validationError = useMemo((): string | null => {
+		try {
+			parseSpanInput(input);
+			return null;
+		} catch (err) {
+			return err instanceof Error ? err.message : 'Invalid span JSON.';
+		}
+	}, [input]);
+
+	const reset = useCallback((): void => {
+		setError(null);
+		setResult(null);
+		setTestedAttributes(null);
+		setTestedResource(null);
+	}, []);
+
+	const resetToTemplate = useCallback((): void => {
+		persistInput.cancel();
+		clearStoredSpanInput();
+		setInputValue(SAMPLE_SPAN_JSON);
+		reset();
+	}, [persistInput, reset]);
+
+	const isTemplateInput = input.trim() === SAMPLE_SPAN_JSON;
+
+	const run = useCallback((): void => {
+		reset();
+
+		let body;
+		try {
+			body = buildTestRequest(snapshot, draft, input);
+		} catch (parseError) {
+			setError(apiErrorMessage(parseError));
+			return;
+		}
+
+		const submittedSpan = body.spans?.[0];
+		const submittedAttributes = (submittedSpan?.attributes ??
+			{}) as TestTabAttributes;
+		const submittedResource = (submittedSpan?.resource ?? {}) as TestTabResource;
+
+		mutate(
+			{ data: body },
+			{
+				onSuccess: (response) => {
+					setTestedAttributes(submittedAttributes);
+					setTestedResource(submittedResource);
+					setResult(response.data?.spans ?? []);
+				},
+				onError: (mutationError) => {
+					setResult(null);
+					setError(apiErrorMessage(mutationError));
+				},
+			},
+		);
+	}, [snapshot, draft, input, mutate, reset]);
+
+	return {
+		input,
+		setInput,
+		run,
+		reset,
+		resetToTemplate,
+		isTemplateInput,
+		isRunning: isLoading,
+		validationError,
+		result,
+		testedAttributes,
+		testedResource,
+		error,
+	};
+}
--- a/frontend/src/container/LLMObservability/AttributeMapping/tests/LLMObservabilityAttributeMapping.test.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/tests/LLMObservabilityAttributeMapping.test.tsx
@@ -1,6 +1,32 @@
 import { rest, server } from 'mocks-server/server';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';

+// The header's Save/Discard and the group toggle are Admin-gated via useAuthZ;
+// render as an admin so those controls are present.
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockedUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+// Monaco can't run in jsdom — stand in a textarea so the span input is editable.
+jest.mock('@monaco-editor/react', () => ({
+	__esModule: true,
+	default: ({
+		value,
+		onChange,
+	}: {
+		value: string;
+		onChange: (next?: string) => void;
+	}): JSX.Element => (
+		<textarea
+			aria-label="span-json-editor"
+			data-testid="span-json-editor"
+			value={value}
+			onChange={(event): void => onChange(event.target.value)}
+		/>
+	),
+}));
+
 import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
 import { GROUPS_ENDPOINT, makeGroupsResponse, mockGroups } from './fixtures';

@@ -16,6 +42,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 	beforeEach(() => {
 		window.history.pushState(null, '', '/');
 		setupGroups();
+		mockedUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
@@ -86,6 +113,26 @@ describe('LLMObservabilityAttributeMapping', () => {
 		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
 	});

+	it('keeps the sample span input when switching away from the test tab and back', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<LLMObservabilityAttributeMapping />);
+
+		await user.click(screen.getByRole('tab', { name: 'Test' }));
+		const editor = await screen.findByTestId('span-json-editor');
+		await user.clear(editor);
+		await user.type(editor, '{{ "my.attr": 1 }');
+
+		await user.click(screen.getByRole('tab', { name: 'Attribute Mappings' }));
+		await screen.findByTestId('attribute-mappings-tab');
+		expect(screen.queryByTestId('span-json-editor')).not.toBeInTheDocument();
+
+		await user.click(screen.getByRole('tab', { name: 'Test' }));
+
+		await expect(screen.findByTestId('span-json-editor')).resolves.toHaveValue(
+			'{ "my.attr": 1 }',
+		);
+	});
+
 	it('keeps staged changes when the discard prompt is dismissed', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<LLMObservabilityAttributeMapping />);
--- a/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';

+import { useCanManageAttributeMapping } from '../../hooks/useCanManageAttributeMapping';
 import styles from './AttributeMappingHeader.module.scss';

 interface AttributeMappingHeaderProps {
@@ -16,12 +17,13 @@ function AttributeMappingHeader({
 	onDiscard,
 	onSave,
 }: AttributeMappingHeaderProps): JSX.Element {
+	const canManage = useCanManageAttributeMapping();
 	return (
 		<header className={styles.pageHeader}>
 			<Typography.Text as="p" size="base" color="muted">
 				Configure source-to-target attribute remapping for LLM traces
 			</Typography.Text>
-			{isDirty && (
+			{canManage && isDirty && (
 				<div className={styles.pageHeaderActions}>
 					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
 						Unsaved changes
--- a/frontend/src/container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor.ts
@@ -35,6 +35,7 @@ function clone(groups: DraftGroup[]): DraftGroup[] {

 export interface AttributeMappingEditor {
 	groups: DraftGroup[];
+	snapshot: DraftGroup[];
 	isLoading: boolean;
 	isError: boolean;
 	isDirty: boolean;
@@ -304,6 +305,7 @@ export function useAttributeMappingEditor(): AttributeMappingEditor {

 	return {
 		groups: draft ?? [],
+		snapshot,
 		isLoading: !ready || draft === null,
 		isError: groupsQuery.isError,
 		isDirty,
--- a/frontend/src/container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping.ts
@@ -0,0 +1,9 @@
+import { IsAdminPermission } from 'lib/authz/hooks/useAuthZ/legacy';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+const ADMIN_PERMISSION = [IsAdminPermission];
+
+export function useCanManageAttributeMapping(): boolean {
+	const { allowed } = useAuthZ(ADMIN_PERMISSION);
+	return allowed;
+}
--- a/frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss
+++ b/frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss
@@ -60,3 +60,7 @@
 		}
 	}
 }
+
+.logs-linked-row td {
+	background-color: var(--row-active-bg) !important;
+}
--- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
@@ -204,6 +204,9 @@ function LiveLogsList({
 							data={formattedLogs}
 							isLoading={false}
 							isRowActive={(log): boolean => log.id === activeLog?.id}
+							getRowClassName={(log): string =>
+								log.id === activeLogId ? 'logs-linked-row' : ''
+							}
 							getRowStyle={(log): CSSProperties =>
 								({
 									'--row-active-bg': getRowBackgroundColor(
@@ -216,10 +219,13 @@ function LiveLogsList({
 									),
 								}) as CSSProperties
 							}
-							onRowClick={(log): void => {
-								handleSetActiveLog(log);
+							onRowClick={(log, _itemKey, { isActive }): void => {
+								if (isActive) {
+									handleCloseLogDetail();
+								} else {
+									handleSetActiveLog(log);
+								}
 							}}
-							onRowDeactivate={handleCloseLogDetail}
 							activeRowIndex={activeLogIndex}
 							renderRowActions={(log): ReactNode => (
 								<LogLinesActionButtons
--- a/frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss
+++ b/frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss
@@ -323,3 +323,7 @@
 		}
 	}
 }
+
+.logs-linked-row td {
+	background-color: var(--row-active-bg) !important;
+}
--- a/frontend/src/container/LogsExplorerList/index.tsx
+++ b/frontend/src/container/LogsExplorerList/index.tsx
@@ -211,9 +211,11 @@ function LogsExplorerList({
 					data={logs}
 					isLoading={isLoading || isFetching}
 					onEndReached={onEndReached}
-					isRowActive={(log): boolean =>
-						log.id === activeLog?.id || log.id === activeLogId
+					isRowActive={(log): boolean => log.id === activeLog?.id}
+					getRowClassName={(log): string =>
+						log.id === activeLogId ? 'logs-linked-row' : ''
 					}
+					getRowTestId={(log): string => `logs-table-row-${log.id}`}
 					getRowStyle={(log): CSSProperties =>
 						({
 							'--row-active-bg': getRowBackgroundColor(
@@ -226,10 +228,13 @@ function LogsExplorerList({
 							),
 						}) as CSSProperties
 					}
-					onRowClick={(log): void => {
-						handleSetActiveLog(log);
+					onRowClick={(log, _itemKey, { isActive }): void => {
+						if (isActive) {
+							handleCloseLogDetail();
+						} else {
+							handleSetActiveLog(log);
+						}
 					}}
-					onRowDeactivate={handleCloseLogDetail}
 					activeRowIndex={activeLogIndex}
 					renderRowActions={(log): ReactNode => (
 						<LogLinesActionButtons
@@ -282,6 +287,7 @@ function LogsExplorerList({
 		options.maxLines,
 		options.fontSize,
 		activeLogIndex,
+		activeLogId,
 		logs,
 		onEndReached,
 		getItemContent,
--- a/frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx
@@ -6,7 +6,7 @@ import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
-	useGetMetricDashboards,
+	useGetMetricDashboardsV2,
 } from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -38,7 +38,7 @@ function DashboardsAndAlertsPopover({
 		data: dashboardsData,
 		isLoading: isLoadingDashboards,
 		isError: isErrorDashboards,
-	} = useGetMetricDashboards(
+	} = useGetMetricDashboardsV2(
 		{
 			metricName,
 		},
@@ -55,7 +55,8 @@ function DashboardsAndAlertsPopover({

 	const dashboards = useMemo(() => {
 		const currentDashboards = dashboardsData?.data.dashboards ?? [];
-		// Remove duplicate dashboards
+		// The API returns one entry per referencing panel, so a dashboard repeats
+		// once per panel that uses the metric.
 		return currentDashboards.filter(
 			(dashboard, index, self) =>
 				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
--- a/Show More
+++ b/Show More