chore(dashboard-v2): ban direct patchDashboardV2 via oxlint

Add a no-restricted-imports rule forbidding patchDashboardV2 / usePatchDashboardV2
from api/generated/services/dashboard, directing callers to useOptimisticPatch().
patchAsync so every spec edit goes through the optimistic cache path. The hook
itself (the one sanctioned caller) and its test carry a scoped inline exception.

docs/api/openapi.yml

@@ -618,13 +618,6 @@ components:
         provider:
           $ref: '#/components/schemas/AuthtypesAuthNProvider'
       type: object
-    AuthtypesPatchableRole:
-      properties:
-        description:
-          type: string
-      required:
-      - description
-      type: object
     AuthtypesPostableAuthDomain:
       properties:
         config:
@@ -2536,22 +2529,6 @@ components:
       - resource
       - selectors
       type: object
-    CoretypesPatchableObjects:
-      properties:
-        additions:
-          items:
-            $ref: '#/components/schemas/CoretypesObjectGroup'
-          nullable: true
-          type: array
-        deletions:
-          items:
-            $ref: '#/components/schemas/CoretypesObjectGroup'
-          nullable: true
-          type: array
-      required:
-      - additions
-      - deletions
-      type: object
     CoretypesResourceRef:
       properties:
         kind:
@@ -2737,6 +2714,14 @@ components:
           type: string
         dashboardName:
           type: string
+        filterBy:
+          items:
+            type: string
+          type: array
+        groupBy:
+          items:
+            type: string
+          type: array
         panelId:
           type: string
         panelName:
@@ -3586,7 +3571,7 @@ components:
       - user
       - system
       - integration
-      type: object
+      type: string
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
@@ -5412,6 +5397,9 @@ components:
           type: string
         id:
           type: string
+        ingestedSamples:
+          minimum: 0
+          type: integer
         ingestedSeries:
           minimum: 0
           type: integer
@@ -5424,9 +5412,9 @@ components:
           $ref: '#/components/schemas/MetricreductionruletypesMatchType'
         metricName:
           type: string
-        reductionPercent:
-          format: double
-          type: number
+        retainedSamples:
+          minimum: 0
+          type: integer
         retainedSeries:
           minimum: 0
           type: integer
@@ -5444,7 +5432,8 @@ components:
       - active
       - ingestedSeries
       - retainedSeries
-      - reductionPercent
+      - ingestedSamples
+      - retainedSamples
       type: object
     MetricreductionruletypesGettableReductionRulePreview:
       properties:
@@ -5487,15 +5476,23 @@ components:
         estimatedMonthlySavingsUsd:
           format: double
           type: number
+        ingestedSamples:
+          minimum: 0
+          type: integer
         ingestedSeries:
           minimum: 0
           type: integer
+        retainedSamples:
+          minimum: 0
+          type: integer
         retainedSeries:
           minimum: 0
           type: integer
       required:
       - ingestedSeries
       - retainedSeries
+      - ingestedSamples
+      - retainedSamples
       - estimatedMonthlySavingsUsd
       type: object
     MetricreductionruletypesGettableReductionRules:
@@ -5561,7 +5558,6 @@ components:
       - metric
       - ingested_volume
       - reduced_volume
-      - reduction
       - last_updated
       type: string
     MetricreductionruletypesUpdatableReductionRule:
@@ -11825,68 +11821,6 @@ paths:
       summary: Get role
       tags:
       - role
-    patch:
-      deprecated: true
-      description: This endpoint patches a role
-      operationId: PatchRole
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AuthtypesPatchableRole'
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "451":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unavailable For Legal Reasons
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-        "501":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Implemented
-      security:
-      - api_key:
-        - role:update
-      - tokenizer:
-        - role:update
-      summary: Patch role
-      tags:
-      - role
     put:
       deprecated: false
       description: This endpoint updates a role
@@ -11949,158 +11883,6 @@ paths:
       summary: Update role
       tags:
       - role
-  /api/v1/roles/{id}/relations/{relation}/objects:
-    get:
-      deprecated: false
-      description: Gets all objects connected to the specified role via a given relation
-        type
-      operationId: GetObjects
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: relation
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/CoretypesObjectGroup'
-                    type: array
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "451":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unavailable For Legal Reasons
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-        "501":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Implemented
-      security:
-      - api_key:
-        - role:read
-      - tokenizer:
-        - role:read
-      summary: Get objects for a role by relation
-      tags:
-      - role
-    patch:
-      deprecated: true
-      description: Patches the objects connected to the specified role via a given
-        relation type
-      operationId: PatchObjects
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: relation
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CoretypesPatchableObjects'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "451":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unavailable For Legal Reasons
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-        "501":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Implemented
-      security:
-      - api_key:
-        - role:update
-      - tokenizer:
-        - role:update
-      summary: Patch objects for a role by relation
-      tags:
-      - role
   /api/v1/route_policies:
     get:
       deprecated: false

ee/authz/openfgaauthz/provider.go

@@ -260,40 +260,6 @@ func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID va
 	return authtypes.MakeRoleWithTransactionGroups(role, transactionGroups), nil
 }
 
-func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*coretypes.Object, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	storableRole, err := provider.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	objects := make([]*coretypes.Object, 0)
-	for _, objectType := range provider.registry.Types() {
-		if coretypes.ErrIfVerbNotValidForType(relation.Verb, objectType) != nil {
-			continue
-		}
-
-		resourceObjects, err := provider.
-			ListObjects(
-				ctx,
-				authtypes.MustNewSubject(coretypes.NewResourceRole(), storableRole.Name, orgID, &coretypes.VerbAssignee),
-				relation,
-				objectType,
-			)
-		if err != nil {
-			return nil, err
-		}
-
-		objects = append(objects, resourceObjects...)
-	}
-
-	return objects, nil
-}
-
 func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.RoleWithTransactionGroups) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
@@ -324,39 +290,6 @@ func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updated
 	return provider.store.Update(ctx, orgID, updatedRole.Role)
 }
 
-func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) error {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	return provider.store.Update(ctx, orgID, role)
-}
-
-func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*coretypes.Object) error {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	additionTuples, err := authtypes.GetAdditionTuples(name, orgID, relation, additions)
-	if err != nil {
-		return err
-	}
-
-	deletionTuples, err := authtypes.GetDeletionTuples(name, orgID, relation, deletions)
-	if err != nil {
-		return err
-	}
-
-	err = provider.Write(ctx, additionTuples, deletionTuples)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
 func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {

ee/modules/dashboard/impldashboard/module.go

@@ -286,7 +286,7 @@ func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }
 
-func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]map[string]string, error) {
+func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
 	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
 }
 

ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go

@@ -22,6 +22,8 @@ var (
 
 const timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
 
+const sampleBucketExpr = "toInt64(toUnixTimestamp(toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalMinute(10)))) * 1000 AS bucket"
+
 type volumeRow struct {
 	MetricName string
 	Ingested   uint64
@@ -289,12 +291,9 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 	}
 	ctx = c.withThreads(ctx)
 
-	orderExpr := "ingested"
-	switch orderBy {
-	case metricreductionruletypes.OrderByReducedVolume:
-		orderExpr = "reduced"
-	case metricreductionruletypes.OrderByReduction:
-		orderExpr = "if(ingested = 0, 0, (toFloat64(ingested) - toFloat64(reduced)) / toFloat64(ingested))"
+	orderExpr := "ifNull(i.samples, 0)"
+	if orderBy == metricreductionruletypes.OrderByReducedVolume {
+		orderExpr = "if(ifNull(d.samples, 0) = 0 OR ifNull(d.samples, 0) > ifNull(i.samples, 0), ifNull(i.samples, 0), ifNull(d.samples, 0))"
 	}
 	direction := "ASC"
 	if order == metricreductionruletypes.OrderDesc {
@@ -310,17 +309,17 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 	sb.From("(SELECT arrayJoin(" + sb.Var(metricNames) + ") AS metric_name) AS base")
 	sb.JoinWithOption(
 		sqlbuilder.LeftJoin,
-		"(SELECT metric_name, uniq(fingerprint) AS cnt FROM "+ingestedTable+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name) AS i",
+		"(SELECT metric_name, uniq(fingerprint) AS cnt, count() AS samples FROM "+ingestedTable+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name) AS i",
 		"base.metric_name = i.metric_name",
 	)
 	// Reduced series are spread across two type-specific tables; union the per-table distinct
 	// reduced_fingerprints and sum per metric (a metric only lands in the table matching its type).
 	sb.JoinWithOption(
 		sqlbuilder.LeftJoin,
-		"(SELECT metric_name, sum(cnt) AS cnt FROM ("+
-			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt FROM "+reducedLast+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
+		"(SELECT metric_name, sum(cnt) AS cnt, sum(samples) AS samples FROM ("+
+			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt, uniq(reduced_fingerprint, unix_milli) AS samples FROM "+reducedLast+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
 			" UNION ALL "+
-			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt FROM "+reducedSum+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
+			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt, uniq(reduced_fingerprint, unix_milli) AS samples FROM "+reducedSum+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
 			") GROUP BY metric_name) AS d",
 		"base.metric_name = d.metric_name",
 	)
@@ -347,122 +346,186 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 	return out, rows.Err()
 }
 
-func (c *clickhouse) SampleVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, uint64, error) {
+func (c *clickhouse) SampleVolumeByMetric(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]volumeRow, error) {
 	if len(metricNames) == 0 {
-		return 0, 0, nil
+		return map[string]volumeRow{}, nil
 	}
 	ctx = c.withThreads(ctx)
 
-	ingested, err := c.countRawSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-
-	last, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-	sum, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-
-	return ingested, min(last+sum, ingested), nil
-}
-
-func (c *clickhouse) countRawSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("count()")
-	sb.From(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))
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var count uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
-		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count ingested samples")
-	}
-	return count, nil
-}
-
-func (c *clickhouse) countReducedSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	// Reduced tables key the series on reduced_fingerprint (not fingerprint); dedupe ReplacingMergeTree recomputes.
-	sb.Select("uniq(reduced_fingerprint, unix_milli)")
-	sb.From(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))
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var count uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
-		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count reduced samples")
-	}
-	return count, nil
-}
-
-// SeriesTimeseries returns ingested vs reduced series per 60s bucket from the samples tables, gated
-// to each metric's strict effective_from (see strictEffectiveFrom).
-func (c *clickhouse) SeriesTimeseries(ctx context.Context, allMetrics, reducedMetrics []string, effectiveFrom map[string]int64, startMs, endMs int64) ([]volumePoint, error) {
-	if len(allMetrics) == 0 {
-		return []volumePoint{}, nil
-	}
-	ctx = c.withThreads(ctx)
-
-	ingested, err := c.ingestedSeriesByBucket(ctx, allMetrics, effectiveFrom, startMs, endMs)
+	ingested, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
 
-	retained := make(map[int64]uint64)
-	if len(reducedMetrics) > 0 {
-		reduced, err := c.reducedSeriesByBucket(ctx, reducedMetrics, effectiveFrom, startMs, endMs)
+	last, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.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)
+	if err != nil {
+		return nil, err
+	}
+
+	out := make(map[string]volumeRow, len(metricNames))
+	for _, name := range metricNames {
+		out[name] = volumeRow{MetricName: name, Ingested: ingested[name], Reduced: last[name] + sum[name]}
+	}
+	return out, nil
+}
+
+func (c *clickhouse) countSamplesByMetric(ctx context.Context, table, countExpr string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("metric_name", countExpr)
+	sb.From(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))
+	}
+	sb.Where(conds...)
+	sb.GroupBy("metric_name")
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to count samples")
+	}
+	defer rows.Close()
+
+	out := make(map[string]uint64, len(metricNames))
+	for rows.Next() {
+		var (
+			metricName string
+			count      uint64
+		)
+		if err := rows.Scan(&metricName, &count); err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series count")
+		}
+		out[metricName] = count
+	}
+	return out, rows.Err()
+}
+
+func (c *clickhouse) TotalVolume(ctx context.Context, startMs, endMs int64) (uint64, uint64, error) {
+	ctx = c.withThreads(ctx)
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("uniq(fingerprint)", "count()")
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	var series, samples uint64
+	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&series, &samples); err != nil {
+		return 0, 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count total ingested volume")
+	}
+	return series, samples, nil
+}
+
+func (c *clickhouse) SampleTimeseries(ctx context.Context, ruledMetrics []string, effectiveFrom map[string]int64, startMs, endMs int64) ([]volumePoint, error) {
+	ctx = c.withThreads(ctx)
+
+	ingested, err := c.totalSamplesByBucket(ctx, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	ruledIngested := make(map[int64]uint64)
+	ruledRetained := make(map[int64]uint64)
+	if len(ruledMetrics) > 0 {
+		ruledIngested, err = c.ruledIngestedSamplesByBucket(ctx, ruledMetrics, effectiveFrom, startMs, endMs)
 		if err != nil {
 			return nil, err
 		}
-		for ts, count := range reduced {
-			retained[ts] += count
-		}
-	}
-	reducedSet := make(map[string]struct{}, len(reducedMetrics))
-	for _, name := range reducedMetrics {
-		reducedSet[name] = struct{}{}
-	}
-	nonReduced := make([]string, 0, len(allMetrics))
-	for _, name := range allMetrics {
-		if _, ok := reducedSet[name]; !ok {
-			nonReduced = append(nonReduced, name)
-		}
-	}
-	if len(nonReduced) > 0 {
-		nonReducedIngested, err := c.ingestedSeriesByBucket(ctx, nonReduced, effectiveFrom, startMs, endMs)
+		ruledRetained, err = c.ruledRetainedSamplesByBucket(ctx, ruledMetrics, effectiveFrom, startMs, endMs)
 		if err != nil {
 			return nil, err
 		}
-		for ts, count := range nonReducedIngested {
-			retained[ts] += count
+	}
+
+	retained := make(map[int64]uint64, len(ingested))
+	for ts, total := range ingested {
+		shed := uint64(0)
+		if ri := ruledIngested[ts]; ri > ruledRetained[ts] {
+			shed = ri - ruledRetained[ts]
+		}
+		if total > shed {
+			retained[ts] = total - shed
+		} else {
+			retained[ts] = 0
 		}
 	}
 
 	return mergeVolumePoints(ingested, retained), nil
 }
 
+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.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
+	sb.GroupBy("bucket")
+
+	return c.scanBuckets(ctx, sb)
+}
+
+func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(sampleBucketExpr, "count()")
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.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))
+	}
+	sb.Where(conds...)
+	sb.GroupBy("bucket")
+
+	return c.scanBuckets(ctx, sb)
+}
+
+// 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} {
+		names := make([]any, len(metricNames))
+		for i, name := range metricNames {
+			names[i] = name
+		}
+
+		sb := sqlbuilder.NewSelectBuilder()
+		sb.Select(sampleBucketExpr, "uniq(reduced_fingerprint, unix_milli)")
+		sb.From(telemetrymetrics.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))
+		}
+		sb.Where(conds...)
+		sb.GroupBy("bucket")
+
+		counts, err := c.scanBuckets(ctx, sb)
+		if err != nil {
+			return nil, err
+		}
+		for ts, count := range counts {
+			out[ts] += count
+		}
+	}
+	return out, nil
+}
+
 func mergeVolumePoints(ingested, reduced map[int64]uint64) []volumePoint {
 	buckets := make(map[int64]struct{}, len(ingested))
 	for ts := range ingested {
@@ -488,60 +551,6 @@ func mergeVolumePoints(ingested, reduced map[int64]uint64) []volumePoint {
 	return points
 }
 
-// ingestedSeriesByBucket counts distinct raw fingerprints per hourly bucket from the samples buffer.
-func (c *clickhouse) ingestedSeriesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	bucketExpr := "toInt64(toUnixTimestamp(toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalHour(1)))) * 1000 AS bucket"
-	sb.Select(bucketExpr, "uniq(fingerprint)")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.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))
-	}
-	sb.Where(conds...)
-	sb.GroupBy("bucket")
-
-	return c.scanBuckets(ctx, sb)
-}
-
-// reducedSeriesByBucket counts distinct reduced_fingerprints per hourly bucket, summed across the two
-// reduced sample tables (a metric only lands in the table matching its type, so per-bucket sums are
-// exact).
-func (c *clickhouse) reducedSeriesByBucket(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} {
-		names := make([]any, len(metricNames))
-		for i, name := range metricNames {
-			names[i] = name
-		}
-
-		sb := sqlbuilder.NewSelectBuilder()
-		bucketExpr := "toInt64(toUnixTimestamp(toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalHour(1)))) * 1000 AS bucket"
-		sb.Select(bucketExpr, "uniq(reduced_fingerprint)")
-		sb.From(telemetrymetrics.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))
-		}
-		sb.Where(conds...)
-		sb.GroupBy("bucket")
-
-		counts, err := c.scanBuckets(ctx, sb)
-		if err != nil {
-			return nil, err
-		}
-		for ts, count := range counts {
-			out[ts] += count
-		}
-	}
-	return out, nil
-}
-
 func (c *clickhouse) scanBuckets(ctx context.Context, sb *sqlbuilder.SelectBuilder) (map[int64]uint64, error) {
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)

ee/modules/metricreductionrule/implmetricreductionrule/module.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"log/slog"
 	"sort"
-	"strings"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -28,9 +27,16 @@ import (
 
 const (
 	// effectiveFromMargin delays effective_from so the collector picks up the synced rule before it
-	// goes live; it must be >= the collector's rule-refresh interval (see signoz-otel-collector#839).
-	effectiveFromMargin    = 5 * time.Minute
-	defaultPreviewLookback = 24 * time.Hour
+	// goes live; it must be >= the collector's rule-refresh interval (~2m worst case,
+	// see signoz-otel-collector#839).
+	effectiveFromMargin = 2 * time.Minute
+	// uiActivationDelay keeps a rule shown as "pending" in the UI for a while after it goes live to
+	// the collector, so the user doesn't see "active" before reduced data is actually flowing. The
+	// user-facing pending window is effectiveFromMargin + uiActivationDelay (~5m).
+	uiActivationDelay      = 3 * time.Minute
+	defaultPreviewLookback = 1 * time.Hour
+	statsLookback          = 1 * time.Hour
+	timeseriesLookback     = 6 * time.Hour
 
 	pricePerMillionSamplesUSD = 0.1
 	monthDuration             = 30 * 24 * time.Hour
@@ -80,7 +86,7 @@ func (m *module) List(ctx context.Context, orgID valuer.UUID, params *metricredu
 	}
 
 	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	startMs := now.Add(-statsLookback).UnixMilli()
 	endMs := now.UnixMilli()
 
 	switch params.OrderBy {
@@ -107,10 +113,14 @@ func (m *module) listSortedByColumn(ctx context.Context, orgID valuer.UUID, para
 	if err != nil {
 		return nil, err
 	}
+	sampleVolumes, err := m.ch.SampleVolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
 
 	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(domainRules))
 	for _, rule := range domainRules {
-		rules = append(rules, withVolume(toGettableReductionRule(rule), volumes[rule.MetricName]))
+		rules = append(rules, withVolume(toGettableReductionRule(rule), volumes[rule.MetricName], sampleVolumes[rule.MetricName]))
 	}
 
 	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
@@ -139,13 +149,24 @@ func (m *module) listSortedByVolume(ctx context.Context, orgID valuer.UUID, para
 		return nil, err
 	}
 
+	pageMetricNames := make([]string, 0, len(ranked))
+	for _, row := range ranked {
+		pageMetricNames = append(pageMetricNames, row.MetricName)
+	}
+
+	// TODO(srikanthccv): do we need to run this query? can we just get the same from RankByVolume?
+	sampleVolumes, err := m.ch.SampleVolumeByMetric(ctx, pageMetricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
 	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(ranked))
 	for _, row := range ranked {
 		rule, ok := ruleByMetric[row.MetricName]
 		if !ok {
 			continue
 		}
-		rules = append(rules, withVolume(toGettableReductionRule(rule), row))
+		rules = append(rules, withVolume(toGettableReductionRule(rule), row, sampleVolumes[row.MetricName]))
 	}
 
 	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
@@ -288,20 +309,17 @@ func (m *module) Stats(ctx context.Context, orgID valuer.UUID) (*metricreduction
 	}
 
 	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	startMs := now.Add(-statsLookback).UnixMilli()
 	endMs := now.UnixMilli()
 
-	allRules, total, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
+	rules, _, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
 	if err != nil {
 		return nil, err
 	}
-	if total == 0 {
-		return &metricreductionruletypes.GettableReductionRuleStats{}, nil
-	}
 
-	metricNames := make([]string, len(allRules))
-	effectiveFrom := make(map[string]int64, len(allRules))
-	for i, rule := range allRules {
+	metricNames := make([]string, len(rules))
+	effectiveFrom := make(map[string]int64, len(rules))
+	for i, rule := range rules {
 		metricNames[i] = rule.MetricName
 		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
 	}
@@ -310,31 +328,43 @@ func (m *module) Stats(ctx context.Context, orgID valuer.UUID) (*metricreduction
 	if err != nil {
 		return nil, err
 	}
-	var ingestedSeries, retainedSeries uint64
-	reducedMetricNames := make([]string, 0, len(volumes))
-	reducedEffectiveFrom := make(map[string]int64, len(volumes))
-	for name, volume := range volumes {
-		ingestedSeries += volume.Ingested
-		retained := effectiveRetained(volume.Ingested, volume.Reduced)
-		retainedSeries += retained
-		if retained < volume.Ingested {
-			reducedMetricNames = append(reducedMetricNames, name)
-			reducedEffectiveFrom[name] = effectiveFrom[name]
-		}
+	var ruledIngestedSeries, ruledRetainedSeries uint64
+	for _, volume := range volumes {
+		ruledIngestedSeries += volume.Ingested
+		ruledRetainedSeries += effectiveRetained(volume.Ingested, volume.Reduced)
 	}
 
-	ingestedSamples, reducedSamples, err := m.ch.SampleVolume(ctx, reducedMetricNames, reducedEffectiveFrom, startMs, endMs)
+	sampleVolumes, err := m.ch.SampleVolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+	var ruledIngestedSamples, ruledRetainedSamples uint64
+	for _, sv := range sampleVolumes {
+		ruledIngestedSamples += sv.Ingested
+		ruledRetainedSamples += effectiveRetained(sv.Ingested, sv.Reduced)
+	}
+
+	totalSeries, totalSamples, err := m.ch.TotalVolume(ctx, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
 
 	return &metricreductionruletypes.GettableReductionRuleStats{
-		IngestedSeries:             ingestedSeries,
-		RetainedSeries:             retainedSeries,
-		EstimatedMonthlySavingsUsd: monthlySavingsUSD(ingestedSamples, reducedSamples, startMs, endMs),
+		IngestedSeries:             totalSeries,
+		RetainedSeries:             clampSub(totalSeries, ruledIngestedSeries-ruledRetainedSeries),
+		IngestedSamples:            totalSamples,
+		RetainedSamples:            clampSub(totalSamples, ruledIngestedSamples-ruledRetainedSamples),
+		EstimatedMonthlySavingsUsd: monthlySavingsUSD(ruledIngestedSamples, ruledRetainedSamples, startMs, endMs),
 	}, nil
 }
 
+func clampSub(a, b uint64) uint64 {
+	if a < b {
+		return 0
+	}
+	return a - b
+}
+
 // monthlySavingsUSD extrapolates the windowed sample reduction to a monthly figure at the per-sample
 // list price. Ingested is gated to effective_from upstream, so pre-activation hours don't inflate it.
 func monthlySavingsUSD(ingestedSamples, reducedSamples uint64, startMs, endMs int64) float64 {
@@ -352,7 +382,7 @@ func (m *module) Timeseries(ctx context.Context, orgID valuer.UUID) (*querybuild
 	}
 
 	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	startMs := now.Add(-timeseriesLookback).UnixMilli()
 	endMs := now.UnixMilli()
 
 	allRules, _, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
@@ -366,18 +396,7 @@ func (m *module) Timeseries(ctx context.Context, orgID valuer.UUID) (*querybuild
 		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
 	}
 
-	volumes, err := m.ch.VolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-	reducedNames := make([]string, 0, len(volumes))
-	for name, volume := range volumes {
-		if effectiveRetained(volume.Ingested, volume.Reduced) < volume.Ingested {
-			reducedNames = append(reducedNames, name)
-		}
-	}
-
-	points, err := m.ch.SeriesTimeseries(ctx, metricNames, reducedNames, effectiveFrom, startMs, endMs)
+	points, err := m.ch.SampleTimeseries(ctx, metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
@@ -414,7 +433,7 @@ func buildVolumeTimeseries(points []volumePoint) *querybuildertypesv5.QueryRange
 }
 
 func (m *module) validateMetricForReduction(ctx context.Context, orgID valuer.UUID, metricName string) error {
-	lastSeen, err := m.metadataStore.FetchLastSeenInfoMulti(ctx, metricName)
+	lastSeen, err := m.metadataStore.FetchLastSeenInfoMulti(ctx, orgID, metricName)
 	if err != nil {
 		return err
 	}
@@ -447,12 +466,12 @@ func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metr
 		m.logger.WarnContext(ctx, "failed to fetch related dashboards for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
 	} else {
 		for _, item := range dashboards[metricName] {
-			usedLabels := append(splitCSV(item["group_by"]), splitCSV(item["filter_by"])...)
+			usedLabels := append(append([]string{}, item.GroupBy...), item.FilterBy...)
 			affected = append(affected, metricreductionruletypes.AffectedAsset{
 				Type:           metricreductionruletypes.AssetTypeDashboard,
-				ID:             item["dashboard_id"],
-				Name:           item["dashboard_name"],
-				Widget:         &metricreductionruletypes.AffectedWidget{ID: item["widget_id"], Name: item["widget_name"]},
+				ID:             item.DashboardID,
+				Name:           item.DashboardName,
+				Widget:         &metricreductionruletypes.AffectedWidget{ID: item.PanelID, Name: item.PanelName},
 				ImpactedLabels: intersectLabels(usedLabels, droppedSet),
 			})
 		}
@@ -482,7 +501,7 @@ func toGettableReductionRule(rule *metricreductionruletypes.ReductionRule) metri
 		MatchType:     rule.MatchType,
 		Labels:        rule.Labels,
 		EffectiveFrom: rule.EffectiveFrom,
-		Active:        !rule.EffectiveFrom.After(time.Now()),
+		Active:        !rule.EffectiveFrom.Add(uiActivationDelay).After(time.Now()),
 	}
 }
 
@@ -493,12 +512,11 @@ func effectiveRetained(ingested, reduced uint64) uint64 {
 	return reduced
 }
 
-func withVolume(rule metricreductionruletypes.GettableReductionRule, volume volumeRow) metricreductionruletypes.GettableReductionRule {
-	rule.IngestedSeries = volume.Ingested
-	rule.RetainedSeries = effectiveRetained(volume.Ingested, volume.Reduced)
-	if volume.Ingested > 0 {
-		rule.ReductionPercent = (1 - float64(rule.RetainedSeries)/float64(volume.Ingested)) * 100
-	}
+func withVolume(rule metricreductionruletypes.GettableReductionRule, series volumeRow, samples volumeRow) metricreductionruletypes.GettableReductionRule {
+	rule.IngestedSeries = series.Ingested
+	rule.RetainedSeries = effectiveRetained(series.Ingested, series.Reduced)
+	rule.IngestedSamples = samples.Ingested
+	rule.RetainedSamples = effectiveRetained(samples.Ingested, samples.Reduced)
 	return rule
 }
 
@@ -518,13 +536,6 @@ func intersectLabels(keys []string, droppedSet map[string]struct{}) []string {
 	return out
 }
 
-func splitCSV(s string) []string {
-	if s == "" {
-		return nil
-	}
-	return strings.Split(s, ",")
-}
-
 func resolveDroppedKept(matchType metricreductionruletypes.MatchType, ruleLabels, keys []string) (dropped, kept []string) {
 	ruleSet := make(map[string]struct{}, len(ruleLabels))
 	for _, l := range ruleLabels {

ee/modules/metricreductionrule/implmetricreductionrule/store.go

@@ -35,7 +35,7 @@ func (s *store) List(ctx context.Context, orgID valuer.UUID, params *metricreduc
 		Where("org_id = ?", orgID).
 		Order(column + " " + direction)
 	if params.Search != "" {
-		query = query.Where("metric_name LIKE ?", "%"+params.Search+"%")
+		query = query.Where("metric_name LIKE ? ESCAPE '\\'", "%"+s.sqlstore.Formatter().EscapeLikePattern(params.Search)+"%")
 	}
 	if params.MetricName != "" {
 		query = query.Where("metric_name = ?", params.MetricName)

ee/query-service/app/server.go

@@ -64,6 +64,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		signoz.Prometheus,
 		signoz.TelemetryStore.Cluster(),
 		signoz.Cache,
+		signoz.Flagger,
 		nil,
 	)
 

frontend/.oxlintrc.json

@@ -328,6 +328,11 @@
           {
             "name": "immer",
             "message": "[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead."
+          },
+          {
+            "name": "api/generated/services/dashboard",
+            "importNames": ["patchDashboardV2", "usePatchDashboardV2"],
+            "message": "[dashboard-v2] Don't call patchDashboardV2/usePatchDashboardV2 directly — use useOptimisticPatch().patchAsync so spec edits update the react-query cache optimistically and reconcile on settle."
           }
         ]
       }

frontend/public/locales/en-GB/titles.json

@@ -61,5 +61,7 @@
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
 }

frontend/public/locales/en/titles.json

@@ -86,5 +86,7 @@
 	"ROLE_EDIT": "SigNoz | Edit Role",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
 }

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

@@ -18,19 +18,13 @@ import type {
 } from 'react-query';
 
 import type {
-	AuthtypesPatchableRoleDTO,
 	AuthtypesPostableRoleDTO,
 	AuthtypesUpdatableRoleDTO,
-	CoretypesPatchableObjectsDTO,
 	CreateRole201,
 	DeleteRolePathParameters,
-	GetObjects200,
-	GetObjectsPathParameters,
 	GetRole200,
 	GetRolePathParameters,
 	ListRoles200,
-	PatchObjectsPathParameters,
-	PatchRolePathParameters,
 	RenderErrorResponseDTO,
 	UpdateRolePathParameters,
 } from '../sigNoz.schemas';
@@ -365,107 +359,6 @@ export const invalidateGetRole = async (
 	return queryClient;
 };
 
-/**
- * This endpoint patches a role
- * @deprecated
- * @summary Patch role
- */
-export const patchRole = (
-	{ id }: PatchRolePathParameters,
-	authtypesPatchableRoleDTO?: BodyType<AuthtypesPatchableRoleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/roles/${id}`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: authtypesPatchableRoleDTO,
-		signal,
-	});
-};
-
-export const getPatchRoleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchRole>>,
-		TError,
-		{
-			pathParams: PatchRolePathParameters;
-			data?: BodyType<AuthtypesPatchableRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchRole>>,
-	TError,
-	{
-		pathParams: PatchRolePathParameters;
-		data?: BodyType<AuthtypesPatchableRoleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchRole'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof patchRole>>,
-		{
-			pathParams: PatchRolePathParameters;
-			data?: BodyType<AuthtypesPatchableRoleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchRole(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchRole>>
->;
-export type PatchRoleMutationBody =
-	| BodyType<AuthtypesPatchableRoleDTO>
-	| undefined;
-export type PatchRoleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Patch role
- */
-export const usePatchRole = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchRole>>,
-		TError,
-		{
-			pathParams: PatchRolePathParameters;
-			data?: BodyType<AuthtypesPatchableRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchRole>>,
-	TError,
-	{
-		pathParams: PatchRolePathParameters;
-		data?: BodyType<AuthtypesPatchableRoleDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getPatchRoleMutationOptions(options));
-};
 /**
  * This endpoint updates a role
  * @summary Update role
@@ -565,205 +458,3 @@ export const useUpdateRole = <
 > => {
 	return useMutation(getUpdateRoleMutationOptions(options));
 };
-/**
- * Gets all objects connected to the specified role via a given relation type
- * @summary Get objects for a role by relation
- */
-export const getObjects = (
-	{ id, relation }: GetObjectsPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetObjects200>({
-		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetObjectsQueryKey = ({
-	id,
-	relation,
-}: GetObjectsPathParameters) => {
-	return [`/api/v1/roles/${id}/relations/${relation}/objects`] as const;
-};
-
-export const getGetObjectsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, relation }: GetObjectsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getObjects>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetObjectsQueryKey({ id, relation });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getObjects>>> = ({
-		signal,
-	}) => getObjects({ id, relation }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(id && relation),
-		...queryOptions,
-	} as UseQueryOptions<Awaited<ReturnType<typeof getObjects>>, TError, TData> & {
-		queryKey: QueryKey;
-	};
-};
-
-export type GetObjectsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getObjects>>
->;
-export type GetObjectsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get objects for a role by relation
- */
-
-export function useGetObjects<
-	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, relation }: GetObjectsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getObjects>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetObjectsQueryOptions({ id, relation }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get objects for a role by relation
- */
-export const invalidateGetObjects = async (
-	queryClient: QueryClient,
-	{ id, relation }: GetObjectsPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetObjectsQueryKey({ id, relation }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Patches the objects connected to the specified role via a given relation type
- * @deprecated
- * @summary Patch objects for a role by relation
- */
-export const patchObjects = (
-	{ id, relation }: PatchObjectsPathParameters,
-	coretypesPatchableObjectsDTO?: BodyType<CoretypesPatchableObjectsDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: coretypesPatchableObjectsDTO,
-		signal,
-	});
-};
-
-export const getPatchObjectsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchObjects>>,
-		TError,
-		{
-			pathParams: PatchObjectsPathParameters;
-			data?: BodyType<CoretypesPatchableObjectsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchObjects>>,
-	TError,
-	{
-		pathParams: PatchObjectsPathParameters;
-		data?: BodyType<CoretypesPatchableObjectsDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchObjects'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof patchObjects>>,
-		{
-			pathParams: PatchObjectsPathParameters;
-			data?: BodyType<CoretypesPatchableObjectsDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchObjects(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchObjectsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchObjects>>
->;
-export type PatchObjectsMutationBody =
-	| BodyType<CoretypesPatchableObjectsDTO>
-	| undefined;
-export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Patch objects for a role by relation
- */
-export const usePatchObjects = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchObjects>>,
-		TError,
-		{
-			pathParams: PatchObjectsPathParameters;
-			data?: BodyType<CoretypesPatchableObjectsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchObjects>>,
-	TError,
-	{
-		pathParams: PatchObjectsPathParameters;
-		data?: BodyType<CoretypesPatchableObjectsDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getPatchObjectsMutationOptions(options));
-};

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

@@ -2230,13 +2230,6 @@ export interface AuthtypesOrgSessionContextDTO {
 	warning?: ErrorsJSONDTO;
 }
 
-export interface AuthtypesPatchableRoleDTO {
-	/**
-	 * @type string
-	 */
-	description: string;
-}
-
 export interface AuthtypesPostableAuthDomainDTO {
 	config?: AuthtypesAuthDomainConfigDTO;
 	/**
@@ -3249,17 +3242,6 @@ export interface CommonJSONRefDTO {
 	$ref?: string;
 }
 
-export interface CoretypesPatchableObjectsDTO {
-	/**
-	 * @type array,null
-	 */
-	additions: CoretypesObjectGroupDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	deletions: CoretypesObjectGroupDTO[] | null;
-}
-
 export interface DashboardGridItemDTO {
 	content?: CommonJSONRefDTO;
 	/**
@@ -3995,6 +3977,14 @@ export interface DashboardtypesDashboardPanelRefDTO {
 	 * @type string
 	 */
 	dashboardName: string;
+	/**
+	 * @type array
+	 */
+	filterBy?: string[];
+	/**
+	 * @type array
+	 */
+	groupBy?: string[];
 	/**
 	 * @type string
 	 */
@@ -6919,6 +6909,11 @@ export interface MetricreductionruletypesGettableReductionRuleDTO {
 	 * @type string
 	 */
 	id: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	ingestedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -6934,10 +6929,10 @@ export interface MetricreductionruletypesGettableReductionRuleDTO {
 	 */
 	metricName: string;
 	/**
-	 * @type number
-	 * @format double
+	 * @type integer
+	 * @minimum 0
 	 */
-	reductionPercent: number;
+	retainedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -6996,11 +6991,21 @@ export interface MetricreductionruletypesGettableReductionRuleStatsDTO {
 	 * @format double
 	 */
 	estimatedMonthlySavingsUsd: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	ingestedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
 	ingestedSeries: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	retainedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -7056,7 +7061,6 @@ export enum MetricreductionruletypesReductionRuleOrderByDTO {
 	metric = 'metric',
 	ingested_volume = 'ingested_volume',
 	reduced_volume = 'reduced_volume',
-	reduction = 'reduction',
 	last_updated = 'last_updated',
 }
 export interface MetricreductionruletypesUpdatableReductionRuleDTO {
@@ -10248,31 +10252,9 @@ export type GetRole200 = {
 	status: string;
 };
 
-export type PatchRolePathParameters = {
-	id: string;
-};
 export type UpdateRolePathParameters = {
 	id: string;
 };
-export type GetObjectsPathParameters = {
-	id: string;
-	relation: string;
-};
-export type GetObjects200 = {
-	/**
-	 * @type array
-	 */
-	data: CoretypesObjectGroupDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type PatchObjectsPathParameters = {
-	id: string;
-	relation: string;
-};
 export type GetAllRoutePolicies200 = {
 	/**
 	 * @type array

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
 import { Select, Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import classNames from 'classnames';
+import cx from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
@@ -72,9 +72,7 @@ function YAxisUnitSelector({
 	}, [categoriesOverride, source]);
 
 	return (
-		<div
-			className={classNames('y-axis-unit-selector-component', containerClassName)}
-		>
+		<div className={cx('y-axis-unit-selector-component', containerClassName)}>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -84,12 +82,17 @@ function YAxisUnitSelector({
 				loading={loading}
 				suffixIcon={
 					incompatibleUnitMessage ? (
-						<Tooltip title={incompatibleUnitMessage}>
-							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
+						<Tooltip
+							title={incompatibleUnitMessage}
+							overlayClassName="y-axis-unit-warning-tooltip"
+						>
+							<span className="y-axis-unit-warning" role="img" aria-label="warning">
+								<SolidAlertTriangle size="md" />
+							</span>
 						</Tooltip>
 					) : undefined
 				}
-				className={classNames({
+				className={cx({
 					'warning-state': incompatibleUnitMessage,
 				})}
 				data-testid={dataTestId}

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

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { YAxisCategoryNames } from '../constants';
 import { UniversalYAxisUnit, YAxisSource } from '../types';
@@ -6,9 +7,13 @@ import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
 	const mockOnChange = jest.fn();
+	// antd injects its `pointer-events` styles via cssinjs in jsdom, but the SCSS
+	// overrides aren't loaded — skip the pointer-events check so hovers/clicks register.
+	let user: ReturnType<typeof userEvent.setup>;
 
 	beforeEach(() => {
 		mockOnChange.mockClear();
+		user = userEvent.setup({ pointerEventsCheck: 0 });
 	});
 
 	it('renders with default placeholder', () => {
@@ -34,7 +39,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
 	});
 
-	it('calls onChange when a value is selected', () => {
+	it('calls onChange when a value is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -44,9 +49,8 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
-		const option = screen.getByText('Bytes (B)');
-		fireEvent.click(option);
+		await user.click(select);
+		await user.click(screen.getByText('Bytes (B)'));
 
 		expect(mockOnChange).toHaveBeenCalledWith('By', {
 			children: 'Bytes (B)',
@@ -55,7 +59,7 @@ describe('YAxisUnitSelector', () => {
 		});
 	});
 
-	it('filters options based on search input', () => {
+	it('filters options based on search input', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -65,14 +69,13 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
-		const input = screen.getByRole('combobox');
-		fireEvent.change(input, { target: { value: 'bytes/sec' } });
+		await user.click(select);
+		await user.type(select, 'bytes/sec');
 
 		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
 	});
 
-	it('shows all categories and their units', () => {
+	it('shows all categories and their units', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -80,9 +83,8 @@ describe('YAxisUnitSelector', () => {
 				source={YAxisSource.ALERTS}
 			/>,
 		);
-		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));
 
 		// Check for category headers
 		expect(screen.getByText('Data')).toBeInTheDocument();
@@ -93,7 +95,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
 	});
 
-	it('shows warning message when incompatible unit is selected', () => {
+	it('shows warning message when incompatible unit is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				source={YAxisSource.ALERTS}
@@ -104,12 +106,12 @@ describe('YAxisUnitSelector', () => {
 		);
 		const warningIcon = screen.getByLabelText('warning');
 		expect(warningIcon).toBeInTheDocument();
-		fireEvent.mouseOver(warningIcon);
-		return screen
-			.findByText(
+		await user.hover(warningIcon);
+		await expect(
+			screen.findByText(
 				'Unit mismatch. The metric was sent with unit Seconds (s), but Bytes (B) is selected.',
-			)
-			.then((el) => expect(el).toBeInTheDocument());
+			),
+		).resolves.toBeInTheDocument();
 	});
 
 	it('does not show warning message when compatible unit is selected', () => {
@@ -125,7 +127,7 @@ describe('YAxisUnitSelector', () => {
 		expect(warningIcon).not.toBeInTheDocument();
 	});
 
-	it('uses categories override to render custom units', () => {
+	it('uses categories override to render custom units', async () => {
 		const customCategories = [
 			{
 				name: YAxisCategoryNames.Data,
@@ -147,9 +149,7 @@ describe('YAxisUnitSelector', () => {
 			/>,
 		);
 
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));
 
 		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
 		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -4,6 +4,13 @@
 	}
 }
 
+// Re-enable hover on the warning icon: its `.ant-select-arrow` parent sets
+// `pointer-events: none`, which would otherwise suppress the tooltip.
+.y-axis-unit-warning {
+	display: inline-flex;
+	pointer-events: auto;
+}
+
 .warning-state {
 	.ant-select-selector {
 		border-color: var(--bg-amber-400) !important;
@@ -17,3 +24,7 @@
 		right: 28px;
 	}
 }
+
+.y-axis-unit-warning-tooltip {
+	max-width: 240px;
+}

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

@@ -1,7 +1,28 @@
+.filtersBar {
+	display: flex;
+	gap: var(--spacing-6);
+	align-items: center;
+	justify-content: space-between;
+}
+
+.filtersBarLeft {
+	display: flex;
+	gap: var(--spacing-6);
+	align-items: center;
+}
+
+.filtersBarSearch {
+	width: 280px;
+}
+
+.filtersBarSource {
+	width: 160px;
+}
+
 .pageError {
 	padding: var(--spacing-6) var(--spacing-8);
 	border-radius: var(--radius-2);
-	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
-	color: var(--text-cherry-400);
+	background: color-mix(in srgb, var(--accent-cherry) 8%, transparent);
+	color: var(--accent-cherry);
 	font-size: var(--periscope-font-size-base);
 }

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

@@ -1,52 +1,164 @@
 import { useMemo } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Plus, Search, X } from '@signozhq/icons';
 import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
 import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
 import { useTableParams } from 'components/TanStackTableView';
-import { Typography } from '@signozhq/ui/typography';
+import useComponentPermission from 'hooks/useComponentPermission';
+import useDebounce from 'hooks/useDebounce';
+import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs';
+import { useAppContext } from 'providers/App/App';
 
-import { LIMIT_KEY, PAGE_KEY, PAGE_SIZE } from '../constants';
-import styles from './ModelCostTabPanel.module.scss';
+import {
+	LIMIT_KEY,
+	PAGE_KEY,
+	PAGE_SIZE,
+	SEARCH_DEBOUNCE_MS,
+	SEARCH_KEY,
+	SOURCE_FILTER_OPTIONS,
+	SOURCE_FILTER_TO_IS_OVERRIDE,
+	SOURCE_KEY,
+	type SourceFilter,
+} from '../constants';
+import type { PricingRule } from '../types';
+import DeleteConfirmDialog from './components/DeleteConfirmDialog';
+import ModelCostDrawer, {
+	useModelCostDrawer,
+} from './components/ModelCostDrawer';
 import ModelCostsTable from './components/ModelCostsTable';
-import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import { useModelCostDelete } from './hooks/useModelCostDelete';
+import styles from './ModelCostTabPanel.module.scss';
 
+// "Model costs" tab: the priced-model listing, search + source filter, the add/
+// edit drawer, and pagination. Page and page size live in the URL (shareable/
+// reload-safe) and are owned by TanStackTable via enableQueryParams — this tab
+// reads them back through the same useTableParams hook so the two stay in lockstep.
 function ModelCostTabPanel(): JSX.Element {
-	const { page, limit } = useTableParams(
+	const { page, limit, setPage } = useTableParams(
 		{ page: PAGE_KEY, limit: LIMIT_KEY },
 		{ page: 1, limit: PAGE_SIZE },
 	);
 
-	// Search + source filters are intentionally omitted for now — the list API
-	// doesn't honour them yet. They'll be reintroduced here once it does.
+	const [search, setSearch] = useQueryState(
+		SEARCH_KEY,
+		parseAsString.withDefault(''),
+	);
+	const debouncedSearch = useDebounce(search, SEARCH_DEBOUNCE_MS);
+
+	const [source, setSource] = useQueryState(
+		SOURCE_KEY,
+		parseAsStringEnum<SourceFilter>(
+			SOURCE_FILTER_OPTIONS.map((option) => option.value),
+		).withDefault('all'),
+	);
+
+	const handleSearchChange = (
+		event: React.ChangeEvent<HTMLInputElement>,
+	): void => {
+		void setSearch(event.target.value || null);
+		setPage(1);
+	};
+
+	const clearSearch = (): void => {
+		void setSearch(null);
+		setPage(1);
+	};
+
+	const handleSourceChange = (value: string | string[]): void => {
+		void setSource(value as SourceFilter);
+		setPage(1);
+	};
+
+	const isOverride = SOURCE_FILTER_TO_IS_OVERRIDE[source];
+
 	const listParams: ListLLMPricingRulesParams = {
 		offset: (page - 1) * limit,
 		limit,
+		...(debouncedSearch ? { q: debouncedSearch } : {}),
+		...(isOverride !== undefined ? { isOverride } : {}),
 	};
 
-	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
+	const { data, isLoading, isError } = useListLLMPricingRules(listParams, {
+		query: {
+			enabled: search === debouncedSearch,
+		},
+	});
 
-	const rules: LlmpricingruletypesLLMPricingRuleDTO[] = useMemo(
-		() => data?.data?.items || [],
-		[data],
+	const { user } = useAppContext();
+	const [canManagePricing] = useComponentPermission(
+		['manage_llm_pricing'],
+		user.role,
 	);
+
+	const rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
 	const total = data?.data?.total ?? 0;
 
+	const drawer = useModelCostDrawer();
+	const deletion = useModelCostDelete();
+
 	return (
 		<>
+			<div className={styles.filtersBar}>
+				<div className={styles.filtersBarLeft}>
+					<Input
+						className={styles.filtersBarSearch}
+						placeholder="Search by model or provider"
+						value={search}
+						onChange={handleSearchChange}
+						prefix={<Search size={14} />}
+						suffix={
+							search ? (
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									prefix={<X size={14} />}
+									onClick={clearSearch}
+									aria-label="Clear search"
+									testId="model-cost-search-clear"
+								/>
+							) : undefined
+						}
+						testId="model-cost-search"
+					/>
+					<SelectSimple
+						className={styles.filtersBarSource}
+						items={SOURCE_FILTER_OPTIONS}
+						value={source}
+						onChange={handleSourceChange}
+						testId="source-filter"
+					/>
+				</div>
+				{canManagePricing && (
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={(): void => drawer.openForAdd()}
+						testId="add-model-cost-btn"
+					>
+						Add model cost
+					</Button>
+				)}
+			</div>
+
 			{isError && (
 				<div className={styles.pageError} role="alert">
 					Failed to load pricing rules. Please try again.
 				</div>
 			)}
 
-			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
 			<ModelCostsTable
 				rules={rules}
 				isLoading={isLoading}
 				total={total}
-				selectedRuleId={null}
-				canManage={false}
-				onEdit={(): void => undefined}
-				onDelete={(): void => undefined}
+				selectedRuleId={drawer.selectedRuleId}
+				canManage={canManagePricing}
+				onEdit={drawer.openForEdit}
+				onDelete={deletion.requestDelete}
 			/>
 
 			<footer>
@@ -54,6 +166,29 @@ function ModelCostTabPanel(): JSX.Element {
 					All prices per 1M tokens (USD)
 				</Typography.Text>
 			</footer>
+
+			{drawer.isOpen && (
+				<ModelCostDrawer
+					isOpen={drawer.isOpen}
+					mode={drawer.mode}
+					initialDraft={drawer.initialDraft}
+					onClose={drawer.close}
+					onSave={drawer.save}
+					isSaving={drawer.isSaving}
+					saveError={drawer.saveError}
+					canManage={canManagePricing}
+				/>
+			)}
+
+			{deletion.pendingDelete && (
+				<DeleteConfirmDialog
+					open
+					modelName={deletion.pendingDelete.modelName}
+					isDeleting={deletion.isDeleting}
+					onConfirm={deletion.confirmDelete}
+					onCancel={deletion.cancelDelete}
+				/>
+			)}
 		</>
 	);
 }

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

@@ -0,0 +1,64 @@
+import { AlertDialog } from '@signozhq/ui/alert-dialog';
+import { Button } from '@signozhq/ui/button';
+import { Trash2, X } from '@signozhq/icons';
+
+interface DeleteConfirmDialogProps {
+	open: boolean;
+	modelName: string;
+	isDeleting: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+// Confirmation step before deleting a model cost — deletion is irreversible, so
+// the destructive action is gated behind an explicit confirm. AlertDialog blocks
+// outside-click dismissal and hides the close button to force an explicit choice.
+function DeleteConfirmDialog({
+	open,
+	modelName,
+	isDeleting,
+	onConfirm,
+	onCancel,
+}: DeleteConfirmDialogProps): JSX.Element {
+	return (
+		<AlertDialog
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onCancel();
+				}
+			}}
+			width="narrow"
+			title="Delete Model Cost Data "
+			titleIcon={<Trash2 size={16} />}
+			footer={
+				<>
+					<Button
+						variant="solid"
+						color="secondary"
+						onClick={onCancel}
+						prefix={<X size={12} />}
+						testId="drawer-delete-cancel-btn"
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						loading={isDeleting}
+						onClick={onConfirm}
+						prefix={<Trash2 size={12} />}
+						testId="drawer-delete-confirm-btn"
+					>
+						Delete
+					</Button>
+				</>
+			}
+		>
+			Are you sure you want to delete <strong>{modelName}</strong>? Once deleted,
+			this action cannot be undone.
+		</AlertDialog>
+	);
+}
+
+export default DeleteConfirmDialog;

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

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

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

@@ -0,0 +1,58 @@
+.drawerSection {
+	composes: drawerSection from './shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.required {
+	composes: required from './shared.module.scss';
+}
+
+.modelCostDrawer {
+	// Uniform horizontal padding across header / body / footer. The header and
+	// footer read these dialog vars; the body (rendered in drawer-description)
+	// is set directly below.
+	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
+	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
+
+	display: flex;
+	overflow-y: auto;
+
+	// The drawer body — children render inside [data-slot='drawer-description']
+	// (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op).
+	[data-slot='drawer-description'] {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-12);
+		padding: var(--spacing-10) var(--spacing-12);
+	}
+
+	[data-slot='select-content'] {
+		width: var(--radix-select-trigger-width);
+	}
+}
+
+.title {
+	h3 {
+		margin: 0;
+		font-size: var(--periscope-font-size-medium);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	p {
+		margin: var(--spacing-2) 0 0;
+		color: var(--l3-foreground);
+		font-size: 12px;
+	}
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	// Horizontal padding is provided by the drawer-footer slot var above.
+	padding: 0;
+	width: 100%;
+}

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

@@ -0,0 +1,238 @@
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Controller, useForm } from 'react-hook-form';
+
+import PatternEditor from './components/PatternEditor';
+import PricingFields from './components/PricingFields';
+import SourceSelector from './components/SourceSelector';
+import { PROVIDER_OPTIONS } from '../../../constants';
+import styles from './ModelCostDrawer.module.scss';
+import {
+	validateModelName,
+	validatePricing,
+	validateProvider,
+} from '../../../utils';
+import type { DrawerDraft, DrawerMode } from '../../../types';
+
+interface ModelCostDrawerProps {
+	isOpen: boolean;
+	mode: DrawerMode;
+	initialDraft: DrawerDraft;
+	onClose: () => void;
+	onSave: (draft: DrawerDraft) => void;
+	isSaving: boolean;
+	saveError: string | null;
+	canManage: boolean;
+}
+
+function ModelCostDrawer({
+	isOpen,
+	mode,
+	initialDraft,
+	onClose,
+	onSave,
+	isSaving,
+	saveError,
+	canManage,
+}: ModelCostDrawerProps): JSX.Element {
+	// Default mode validates on submit, then re-validates on change — so we don't
+	// flag empty fields before the user has tried to save, but errors clear live
+	// once they start fixing them.
+	const {
+		control,
+		handleSubmit,
+		watch,
+		formState: { isDirty },
+	} = useForm<DrawerDraft>({
+		defaultValues: initialDraft,
+	});
+
+	const isOverride = watch('isOverride');
+
+	// Metadata (model id / provider / patterns / source) is editable by any
+	// manager. Pricing fields are editable only once the user picks "User
+	// override" — auto-populated pricing is managed by SigNoz. Write APIs are
+	// Admin-only, so non-managers can't edit anything.
+	const metadataReadOnly = !canManage;
+	const pricingReadOnly = !canManage || !isOverride;
+
+	// Non-managers can only view (write APIs are Admin-only), so the drawer is a
+	// read-only "View" rather than "Edit"/"Add".
+	let drawerTitle = 'Add model cost';
+	if (!canManage) {
+		drawerTitle = 'View model cost';
+	} else if (mode === 'edit') {
+		drawerTitle = 'Edit model cost';
+	}
+
+	const footer = (
+		<div className={styles.footer}>
+			<Button
+				variant="outlined"
+				color="secondary"
+				onClick={onClose}
+				testId="drawer-cancel-btn"
+			>
+				{canManage ? 'Cancel' : 'Close'}
+			</Button>
+			{canManage && (
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={handleSubmit(onSave)}
+					disabled={!isDirty}
+					loading={isSaving}
+					testId="drawer-save-btn"
+				>
+					Save
+				</Button>
+			)}
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			width="base"
+			className={styles.modelCostDrawer}
+			footer={footer}
+			title={drawerTitle}
+			drawerHeaderProps={{ className: styles.title }}
+		>
+			<div className={styles.drawerSection}>
+				<label htmlFor="billing-model-id">
+					Billing model ID{' '}
+					<span className={styles.required} aria-hidden="true">
+						*
+					</span>
+				</label>
+				<Controller
+					name="modelName"
+					control={control}
+					rules={{
+						validate: (value): true | string => validateModelName(value, mode),
+					}}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<Input
+								id="billing-model-id"
+								placeholder="e.g. openai:gpt-4o"
+								required
+								value={field.value}
+								disabled={mode === 'edit' || metadataReadOnly}
+								aria-invalid={!!fieldState.error}
+								onChange={(e): void => field.onChange(e.target.value)}
+								testId="drawer-model-id-input"
+							/>
+							{fieldState.error && (
+								<Typography.Text as="p" size="small" color="danger" role="alert">
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+
+			<div className={styles.drawerSection}>
+				<label htmlFor="provider-select">Provider</label>
+				<Controller
+					name="provider"
+					control={control}
+					rules={{ validate: validateProvider }}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<SelectSimple
+								id="provider-select"
+								value={field.value}
+								onChange={(value): void => field.onChange(value as string)}
+								items={PROVIDER_OPTIONS}
+								disabled={mode === 'edit' || metadataReadOnly}
+								className={styles.fullWidth}
+								withPortal={false}
+								testId="drawer-provider-select"
+							/>
+							{fieldState.error && (
+								<Typography.Text size="small" color="danger" role="alert">
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+
+			<Controller
+				name="patterns"
+				control={control}
+				render={({ field }): JSX.Element => (
+					<PatternEditor
+						patterns={field.value}
+						isReadOnly={metadataReadOnly}
+						onChange={field.onChange}
+					/>
+				)}
+			/>
+
+			{/* Source is auto vs. override — a choice only a manager can make, so
+			    there's nothing to show a read-only viewer. */}
+			{canManage && (
+				<Controller
+					name="isOverride"
+					control={control}
+					// Pricing requirements depend on this toggle, so re-validate pricing
+					// whenever the source changes (clears/sets the pricing error).
+					rules={{ deps: ['pricing'] }}
+					render={({ field }): JSX.Element => (
+						<SourceSelector
+							isOverride={field.value}
+							isReadOnly={metadataReadOnly}
+							disableAuto={mode === 'add' || !initialDraft.sourceId}
+							onChange={field.onChange}
+						/>
+					)}
+				/>
+			)}
+
+			<Controller
+				name="pricing"
+				control={control}
+				rules={{
+					validate: (value, values): true | string =>
+						validatePricing(value, values.isOverride),
+				}}
+				render={({ field, fieldState }): JSX.Element => (
+					<>
+						<PricingFields
+							pricing={field.value}
+							isReadOnly={pricingReadOnly}
+							onChange={(patch): void => field.onChange({ ...field.value, ...patch })}
+						/>
+						{fieldState.error && (
+							<Typography.Text as="p" size="small" color="danger" role="alert">
+								{fieldState.error.message}
+							</Typography.Text>
+						)}
+					</>
+				)}
+			/>
+
+			{saveError && (
+				<Typography.Text as="p" size="small" color="danger" role="alert">
+					{saveError}
+				</Typography.Text>
+			)}
+		</DrawerWrapper>
+	);
+}
+
+export default ModelCostDrawer;

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

@@ -0,0 +1,69 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.pricingField {
+	composes: pricingField from '../../shared.module.scss';
+}
+
+.cacheModeField {
+	margin-top: var(--spacing-5);
+}
+
+.extraBucketsSection {
+	margin-top: var(--spacing-7);
+	gap: var(--spacing-5);
+}
+
+.extraBucketsSectionHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.bucketRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+
+	input {
+		flex: 1 auto auto;
+		min-width: 0;
+	}
+}
+
+.bucketRowName {
+	flex: 0 0 110px;
+}
+
+.bucketAddBtn {
+	width: 100%;
+}
+
+.bucketPicker {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing-5);
+	padding: var(--spacing-6);
+	border-radius: 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+}
+
+.bucketPickerTitle {
+	font-size: var(--periscope-font-size-small);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--l3-foreground);
+}
+
+.bucketPickerChips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-4);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.tsx

@@ -0,0 +1,179 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+
+import { CACHE_BUCKETS, CACHE_MODE_OPTIONS } from '../../../../../constants';
+import styles from './ExtraPricingBuckets.module.scss';
+import { parsePricingAmount } from '../../../../../utils';
+import type { CacheBucketKey, DrawerDraft } from '../../../../../types';
+import { Tooltip } from 'antd';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface ExtraPricingBucketsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+function ExtraPricingBuckets({
+	pricing,
+	isReadOnly,
+	onChange,
+}: ExtraPricingBucketsProps): JSX.Element {
+	const [isExtraPricingBucketOpen, setIsExtraPricingBucketOpen] =
+		useState<boolean>(false);
+
+	// Track which buckets are shown separately from their value, so a freshly
+	// added bucket can start blank (value null) instead of being seeded to 0.
+	// Seeded from buckets that already carry a value (edit mode).
+	const [addedKeys, setAddedKeys] = useState<Set<CacheBucketKey>>(
+		() =>
+			new Set(
+				CACHE_BUCKETS.filter((b) => pricing[b.key] !== null).map((b) => b.key),
+			),
+	);
+
+	const addedBuckets = CACHE_BUCKETS.filter((b) => addedKeys.has(b.key));
+	const availableBuckets = CACHE_BUCKETS.filter((b) => !addedKeys.has(b.key));
+	const patchBucket = (key: CacheBucketKey, value: number | null): void => {
+		const patch: Partial<Pricing> = { [key]: value };
+		onChange(patch);
+	};
+
+	const addBucket = (key: CacheBucketKey): void => {
+		// Leave the value null so the field renders blank until the user types.
+		setAddedKeys((prev) => new Set(prev).add(key));
+		// Close the picker once nothing is left to add.
+		if (availableBuckets.length <= 1) {
+			setIsExtraPricingBucketOpen(false);
+		}
+	};
+
+	const removeBucket = (key: CacheBucketKey): void => {
+		setAddedKeys((prev) => {
+			const next = new Set(prev);
+			next.delete(key);
+			return next;
+		});
+		patchBucket(key, null);
+	};
+
+	return (
+		<div className={cx(styles.extraBucketsSection, styles.drawerSection)}>
+			<div className={styles.extraBucketsSectionHead}>
+				<Typography.Text as="span" size="small" color="muted">
+					Extra pricing buckets
+				</Typography.Text>
+				<Typography.Text as="span" size="small" color="muted">
+					optional
+				</Typography.Text>
+			</div>
+
+			{addedBuckets.map((bucket) => (
+				<div className={styles.bucketRow} key={bucket.key}>
+					<Typography.Text as="span" className={styles.bucketRowName}>
+						{bucket.label}
+					</Typography.Text>
+					<Input
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing[bucket.key] ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							// Clearing the field is allowed — the row stays mounted because
+							// presence is tracked in `addedKeys`, not the value. Removal is
+							// explicit via the trash button.
+							patchBucket(bucket.key, parsePricingAmount(e.target.value))
+						}
+						testId={`drawer-${bucket.testId}-cost`}
+					/>
+					<Tooltip title="Pricing per 1M tokens" placement="left">
+						<Typography.Text size="xs" color="muted">
+							1M
+						</Typography.Text>
+					</Tooltip>
+
+					{!isReadOnly && (
+						<Button
+							size="icon"
+							variant="ghost"
+							color="destructive"
+							onClick={(): void => removeBucket(bucket.key)}
+							aria-label={`Remove ${bucket.label}`}
+							data-testid={`drawer-remove-${bucket.testId}`}
+							prefix={<Trash2 size={14} />}
+						/>
+					)}
+				</div>
+			))}
+
+			{addedBuckets.length > 0 && (
+				<div className={cx(styles.pricingField, styles.cacheModeField)}>
+					<label htmlFor="cache-mode">Cache mode</label>
+					<SelectSimple
+						id="cache-mode"
+						value={pricing.cacheMode}
+						items={CACHE_MODE_OPTIONS}
+						onChange={(v): void => onChange({ cacheMode: v as CacheModeDTO })}
+						disabled={isReadOnly}
+						className={styles.fullWidth}
+						withPortal={false}
+						testId="drawer-cache-mode"
+					/>
+				</div>
+			)}
+
+			{!isReadOnly && !isExtraPricingBucketOpen && availableBuckets.length > 0 && (
+				<Button
+					variant="dashed"
+					color="secondary"
+					className={styles.bucketAddBtn}
+					prefix={<Plus size={14} />}
+					onClick={(): void => setIsExtraPricingBucketOpen(true)}
+					testId="drawer-add-bucket-btn"
+				>
+					Add pricing bucket
+				</Button>
+			)}
+
+			{!isReadOnly && isExtraPricingBucketOpen && (
+				<div className={styles.bucketPicker} data-testid="drawer-bucket-picker">
+					<div className={styles.bucketPickerTitle}>Add a pricing bucket</div>
+					<div className={styles.bucketPickerChips}>
+						{availableBuckets.map((bucket) => (
+							<Button
+								key={bucket.key}
+								variant="outlined"
+								color="secondary"
+								size="sm"
+								prefix={<Plus size={12} />}
+								onClick={(): void => addBucket(bucket.key)}
+								testId={`drawer-add-bucket-${bucket.testId}`}
+							>
+								{bucket.label}
+							</Button>
+						))}
+					</div>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setIsExtraPricingBucketOpen(false)}
+						testId="drawer-add-bucket-cancel"
+					>
+						Cancel
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ExtraPricingBuckets;

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

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

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

@@ -0,0 +1,49 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.help {
+	composes: help from '../../shared.module.scss';
+}
+
+.patternBox {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	padding: var(--spacing-6);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+}
+
+.patternChips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-3);
+	min-height: 28px;
+}
+
+.patternChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.patternChipRemove {
+	background: transparent;
+	border: none;
+	padding: 0;
+	margin-left: 2px;
+	cursor: pointer;
+	color: inherit;
+	display: inline-flex;
+	align-items: center;
+
+	&:hover {
+		color: var(--accent-cherry);
+	}
+}
+
+.patternAdd {
+	display: flex;
+	gap: var(--spacing-3);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import { X } from '@signozhq/icons';
+
+import styles from './PatternEditor.module.scss';
+
+interface PatternEditorProps {
+	patterns: string[];
+	isReadOnly: boolean;
+	onChange: (patterns: string[]) => void;
+}
+
+// Model-name prefix patterns as removable chips + an add input.
+function PatternEditor({
+	patterns,
+	isReadOnly,
+	onChange,
+}: PatternEditorProps): JSX.Element {
+	const [patternInput, setPatternInput] = useState<string>('');
+
+	const addPattern = (): void => {
+		const next = patternInput.trim();
+		if (!next || patterns.includes(next)) {
+			setPatternInput('');
+			return;
+		}
+		onChange([...patterns, next]);
+		setPatternInput('');
+	};
+
+	const removePattern = (pattern: string): void => {
+		onChange(patterns.filter((p) => p !== pattern));
+	};
+
+	return (
+		<div className={styles.drawerSection}>
+			<Typography.Text as="span">
+				Model name patterns{' '}
+				<Typography.Text as="span" color="muted">
+					(prefix match)
+				</Typography.Text>
+			</Typography.Text>
+			<div className={styles.patternBox}>
+				<div className={styles.patternChips}>
+					{patterns.map((pattern) => (
+						<Badge
+							key={pattern}
+							color="vanilla"
+							variant="outline"
+							className={styles.patternChip}
+						>
+							{pattern}*
+							{!isReadOnly && (
+								<button
+									type="button"
+									aria-label={`Remove pattern ${pattern}`}
+									className={styles.patternChipRemove}
+									onClick={(): void => removePattern(pattern)}
+								>
+									<X size={10} />
+								</button>
+							)}
+						</Badge>
+					))}
+				</div>
+				{!isReadOnly && (
+					<div className={styles.patternAdd}>
+						<Input
+							placeholder="Add pattern…"
+							value={patternInput}
+							onChange={(e): void => setPatternInput(e.target.value)}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter') {
+									e.preventDefault();
+									addPattern();
+								}
+							}}
+							testId="drawer-pattern-input"
+						/>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={addPattern}
+							testId="drawer-pattern-add-btn"
+						>
+							+ Add
+						</Button>
+					</div>
+				)}
+			</div>
+			<Typography.Text as="p" size="small" color="muted">
+				Each pattern uses <strong>prefix matching</strong> against{' '}
+				<code>gen_ai.request.model</code>.
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default PatternEditor;

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

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

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

@@ -0,0 +1,31 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.drawerSurface {
+	composes: drawerSurface from '../../shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from '../../shared.module.scss';
+}
+
+.managedLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.pricingField {
+	composes: pricingField from '../../shared.module.scss';
+}
+
+.required {
+	composes: required from '../../shared.module.scss';
+}
+
+.pricingGrid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--spacing-6);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.tsx

@@ -0,0 +1,91 @@
+import { Input } from '@signozhq/ui/input';
+import { Lock } from '@signozhq/icons';
+import cx from 'classnames';
+
+import ExtraPricingBuckets from '../ExtraPricingBuckets';
+import styles from './PricingFields.module.scss';
+import { parsePricingAmount } from '../../../../../utils';
+import type { DrawerDraft } from '../../../../../types';
+import { Typography } from '@signozhq/ui/typography';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface PricingFieldsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+function PricingFields({
+	pricing,
+	isReadOnly,
+	onChange,
+}: PricingFieldsProps): JSX.Element {
+	return (
+		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text size="base" weight="bold">
+					Pricing (per 1M tokens, USD)
+				</Typography.Text>
+
+				{isReadOnly && (
+					<span className={styles.managedLabel} data-testid="drawer-readonly-label">
+						<Lock size={12} />
+
+						<Typography.Text color="muted">Read-only</Typography.Text>
+					</span>
+				)}
+			</div>
+			<div className={styles.pricingGrid}>
+				<div className={styles.pricingField}>
+					<label htmlFor="input-cost">
+						Input cost{' '}
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					</label>
+					<Input
+						id="input-cost"
+						type="number"
+						step={0.01}
+						required
+						value={pricing.input ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ input: parsePricingAmount(e.target.value) })
+						}
+						testId="drawer-input-cost"
+					/>
+				</div>
+				<div className={styles.pricingField}>
+					<label htmlFor="output-cost">
+						Output cost{' '}
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					</label>
+					<Input
+						id="output-cost"
+						type="number"
+						step={0.01}
+						required
+						value={pricing.output ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ output: parsePricingAmount(e.target.value) })
+						}
+						testId="drawer-output-cost"
+					/>
+				</div>
+			</div>
+
+			<ExtraPricingBuckets
+				pricing={pricing}
+				isReadOnly={isReadOnly}
+				onChange={onChange}
+			/>
+		</div>
+	);
+}
+
+export default PricingFields;

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

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

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

@@ -0,0 +1,115 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.drawerSurface {
+	composes: drawerSurface from '../../shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from '../../shared.module.scss';
+}
+
+.managedLabel {
+	composes: managedLabel from '../../shared.module.scss';
+}
+
+.sourceRadioGroup {
+	--radio-group-item-border-color: var(--l2-border);
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 100%;
+	.sourceRadio {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: flex-start;
+		gap: var(--spacing-5);
+		padding: var(--spacing-5) var(--spacing-6);
+		border-radius: var(--radius-2);
+		border: 1px solid transparent;
+		background: var(--l3-background);
+		margin: 0;
+		width: 100%;
+		// Include padding + border in the 100% width so the card fits inside
+		// the SOURCE surface instead of overflowing its right edge.
+		box-sizing: border-box;
+		cursor: pointer;
+		transition:
+			background-color 0.12s ease,
+			border-color 0.12s ease;
+
+		// The radio button itself: keep it fixed-size and aligned with the title
+		// baseline (margin-top compensates for align-items: flex-start vs the
+		// title's line-box).
+		> button[role='radio'] {
+			flex: 0 0 16px;
+			width: 16px;
+			height: 16px;
+			margin-top: 3px;
+		}
+
+		// The library wraps children in a <label>. Make it grow into the
+		// remaining width and reset the .drawerSection label typography leak
+		// (set earlier in this file) so the title/desc divs use their own styles.
+		> label {
+			flex: 1 1 auto;
+			min-width: 0;
+			display: block;
+			text-align: left;
+			cursor: pointer;
+			font-size: inherit;
+			font-weight: inherit;
+			color: inherit;
+		}
+
+		// Radix RadioGroupItem renders <button data-state="checked|unchecked">.
+		// Use :has() to highlight the wrapper card when its inner button is checked.
+		&.sourceRadioAuto:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+		}
+
+		&.sourceRadioOverride:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-amber) 30%, transparent);
+		}
+
+		&:hover {
+			background: var(--l3-background-hover);
+		}
+	}
+}
+
+.sourceRadioTitle {
+	font-weight: var(--font-weight-semibold);
+	font-size: var(--periscope-font-size-base);
+	color: var(--l1-foreground);
+}
+
+.sourceRadioDesc {
+	margin-top: 2px;
+	font-size: 12px;
+	color: var(--l3-foreground);
+}
+
+.resetConfirm {
+	margin-top: var(--spacing-6);
+	padding: var(--spacing-6);
+	border-radius: var(--radius-2);
+	background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+	border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
+
+	p {
+		margin: 0 0 var(--spacing-5);
+		font-size: 12px;
+	}
+}
+
+.resetConfirmActions {
+	display: flex;
+	gap: var(--spacing-4);
+	justify-content: flex-end;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Lock } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './SourceSelector.module.scss';
+
+interface SourceSelectorProps {
+	isOverride: boolean;
+	isReadOnly: boolean;
+	disableAuto?: boolean;
+	onChange: (isOverride: boolean) => void;
+}
+
+// Auto-populated vs user-override selector, with a confirm step before
+// discarding custom values back to defaults.
+function SourceSelector({
+	isOverride,
+	isReadOnly,
+	disableAuto = false,
+	onChange,
+}: SourceSelectorProps): JSX.Element {
+	const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
+
+	const handleSourceChange = (value: 'auto' | 'override'): void => {
+		if (value === 'auto' && isOverride) {
+			setShowResetConfirm(true);
+			return;
+		}
+		if (value === 'override' && !isOverride) {
+			onChange(true);
+		}
+	};
+
+	const confirmReset = (): void => {
+		onChange(false);
+		setShowResetConfirm(false);
+	};
+
+	return (
+		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text weight="bold" size="base">
+					Source
+				</Typography.Text>
+
+				{isReadOnly && (
+					<span className={styles.managedLabel} data-testid="drawer-managed-label">
+						<Lock size={12} />
+						Managed by SigNoz
+					</span>
+				)}
+			</div>
+			<RadioGroup
+				value={isOverride ? 'override' : 'auto'}
+				onChange={(value): void => handleSourceChange(value as 'auto' | 'override')}
+				className={styles.sourceRadioGroup}
+			>
+				<RadioGroupItem
+					value="auto"
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioAuto)}
+					testId="drawer-source-auto"
+					disabled={disableAuto}
+				>
+					<div className={styles.sourceRadioTitle}>Auto-populated</div>
+					<div className={styles.sourceRadioDesc}>
+						{disableAuto
+							? 'Available once SigNoz has default pricing for this model.'
+							: 'Default pricing from SigNoz.'}
+					</div>
+				</RadioGroupItem>
+				<RadioGroupItem
+					value="override"
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioOverride)}
+					testId="drawer-source-override"
+				>
+					<div className={styles.sourceRadioTitle}>User override</div>
+					<div className={styles.sourceRadioDesc}>
+						Custom pricing. Takes precedence.
+					</div>
+				</RadioGroupItem>
+			</RadioGroup>
+			{showResetConfirm && (
+				<div className={styles.resetConfirm} aria-label="Reset to default pricing">
+					<p>
+						Reset to default pricing? Custom values will be discarded. It might take
+						24 hours for changes to take effect.
+					</p>
+					<div className={styles.resetConfirmActions}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={(): void => setShowResetConfirm(false)}
+							testId="drawer-reset-keep-btn"
+						>
+							Keep
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={confirmReset}
+							testId="drawer-reset-confirm-btn"
+						>
+							Reset
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default SourceSelector;

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

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

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts

@@ -0,0 +1,100 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	useCreateOrUpdateLLMPricingRules,
+} from 'api/generated/services/llmpricingrules';
+
+import { EMPTY_DRAFT } from '../../../../constants';
+import type { DrawerDraft, DrawerMode, PricingRule } from '../../../../types';
+import { buildRulePayload, draftFromRule } from '../../../../utils';
+
+interface UseModelCostDrawerResult {
+	isOpen: boolean;
+	mode: DrawerMode;
+	initialDraft: DrawerDraft;
+	openForAdd: (prefillModelName?: string) => void;
+	openForEdit: (rule: PricingRule) => void;
+	close: () => void;
+	save: (draft: DrawerDraft) => Promise<void>;
+	isSaving: boolean;
+	saveError: string | null;
+	selectedRuleId: string | null;
+}
+
+export function useModelCostDrawer(): UseModelCostDrawerResult {
+	const queryClient = useQueryClient();
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<DrawerMode>('add');
+	const [initialDraft, setInitialDraft] = useState<DrawerDraft>(EMPTY_DRAFT);
+	const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
+	const [saveError, setSaveError] = useState<string | null>(null);
+
+	const { mutateAsync: createOrUpdate, isLoading: isSaving } =
+		useCreateOrUpdateLLMPricingRules();
+
+	const invalidateList = useCallback(async (): Promise<void> => {
+		await queryClient.invalidateQueries({
+			queryKey: getListLLMPricingRulesQueryKey(),
+		});
+	}, [queryClient]);
+
+	const openForAdd = useCallback((): void => {
+		setMode('add');
+		setInitialDraft({
+			...EMPTY_DRAFT,
+			modelName: '',
+			patterns: [],
+		});
+		setSelectedRuleId(null);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((rule: PricingRule): void => {
+		setMode('edit');
+		setInitialDraft(draftFromRule(rule));
+		setSelectedRuleId(rule.id);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+		setSelectedRuleId(null);
+		setSaveError(null);
+	}, []);
+
+	const save = useCallback(
+		async (draft: DrawerDraft): Promise<void> => {
+			setSaveError(null);
+			try {
+				await createOrUpdate({
+					data: { rules: [buildRulePayload(draft)] },
+				});
+				await invalidateList();
+				setIsOpen(false);
+				setSelectedRuleId(null);
+				toast.success(mode === 'edit' ? 'Model cost updated' : 'Model cost added');
+			} catch (error) {
+				const message = error instanceof Error ? error.message : 'Save failed';
+				setSaveError(message);
+			}
+		},
+		[createOrUpdate, invalidateList, mode],
+	);
+
+	return {
+		isOpen,
+		mode,
+		initialDraft,
+		openForAdd,
+		openForEdit,
+		close,
+		save,
+		isSaving,
+		saveError,
+		selectedRuleId,
+	};
+}

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

@@ -0,0 +1,2 @@
+export { default } from './ModelCostDrawer';
+export { useModelCostDrawer } from './hooks/useModelCostDrawer';

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

@@ -0,0 +1,59 @@
+/* Shared drawer selectors used by 2+ of the model-cost drawer components. */
+/* Components pull these in via CSS-modules `composes` from their own module so */
+/* the authored class names in the TSX stay identical. */
+/* NOTE: this file is a `composes` target, so it is parsed as plain CSS (no SCSS */
+/* preprocessing). Keep it flat — no nesting, no slash-slash comments. */
+
+.drawerSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+}
+
+.drawerSection .help,
+.help {
+	margin: 0;
+}
+
+.help code {
+	padding: 1px var(--spacing-2);
+	border-radius: 3px;
+	background: var(--l3-background);
+	font-size: 10px;
+}
+
+.drawerSurface {
+	padding: var(--spacing-7);
+	border-radius: 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+}
+
+.drawerSurfaceHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: var(--spacing-5);
+}
+
+.managedLabel {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	font-size: var(--periscope-font-size-small);
+	color: var(--l3-foreground);
+}
+
+.required {
+	color: var(--accent-cherry);
+}
+
+.pricingField {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.pricingField input {
+	width: 100%;
+}

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

@@ -15,6 +15,6 @@
 	justify-content: center;
 	margin-top: var(--spacing-8);
 	min-height: 400px;
-	color: var(--text-vanilla-400);
+	color: var(--l3-foreground);
 	font-size: var(--periscope-font-size-base);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts

@@ -0,0 +1,66 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	useDeleteLLMPricingRule,
+} from 'api/generated/services/llmpricingrules';
+
+import type { PricingRule } from '../../types';
+
+// The minimal slice of a rule the delete-confirm flow needs: the id to delete
+// and the model name to show in the confirmation copy.
+type PendingDelete = Pick<PricingRule, 'id' | 'modelName'>;
+
+interface UseModelCostDeleteResult {
+	requestDelete: (rule: PendingDelete) => void;
+	confirmDelete: () => Promise<void>;
+	cancelDelete: () => void;
+	pendingDelete: PendingDelete | null;
+	isDeleting: boolean;
+}
+
+// Owns the confirm-then-delete flow for a pricing rule, independent of the
+// add/edit drawer — delete is triggered from the table row menu, so this state
+// lives at the panel level rather than inside useModelCostDrawer.
+export function useModelCostDelete(): UseModelCostDeleteResult {
+	const queryClient = useQueryClient();
+	// The rule queued for deletion. Non-null drives the confirm dialog open.
+	const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(null);
+
+	const { mutateAsync: deleteRuleApi, isLoading: isDeleting } =
+		useDeleteLLMPricingRule();
+
+	const requestDelete = useCallback((rule: PendingDelete): void => {
+		setPendingDelete({ id: rule.id, modelName: rule.modelName });
+	}, []);
+
+	const cancelDelete = useCallback((): void => {
+		setPendingDelete(null);
+	}, []);
+
+	const confirmDelete = useCallback(async (): Promise<void> => {
+		if (!pendingDelete) {
+			return;
+		}
+		try {
+			await deleteRuleApi({ pathParams: { id: pendingDelete.id } });
+			await queryClient.invalidateQueries({
+				queryKey: getListLLMPricingRulesQueryKey(),
+			});
+			setPendingDelete(null);
+			toast.success('Model cost deleted');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Delete failed';
+			toast.error(message);
+		}
+	}, [deleteRuleApi, pendingDelete, queryClient]);
+
+	return {
+		requestDelete,
+		confirmDelete,
+		cancelDelete,
+		pendingDelete,
+		isDeleting,
+	};
+}

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

@@ -1,6 +1,68 @@
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { CacheBucketDef, DrawerDraft } from './types';
+
 export const PAGE_SIZE = 20;
 
 export const PAGE_KEY = 'page';
 export const LIMIT_KEY = 'limit';
+export const SEARCH_KEY = 'search';
+export const SEARCH_DEBOUNCE_MS = 300;
+export const SOURCE_KEY = 'source';
 
+export type SourceFilter = 'all' | 'override' | 'auto';
+export const SOURCE_FILTER_OPTIONS: { value: SourceFilter; label: string }[] = [
+	{ value: 'all', label: 'All sources' },
+	{ value: 'override', label: 'User override' },
+	{ value: 'auto', label: 'Auto' },
+];
+
+export const SOURCE_FILTER_TO_IS_OVERRIDE: Record<
+	SourceFilter,
+	boolean | undefined
+> = {
+	all: undefined,
+	override: true,
+	auto: false,
+};
+
+// Match the page size so the skeleton reserves the same number of rows the
+// loaded page renders — otherwise the table height jumps on load.
 export const SKELETON_ROW_COUNT = PAGE_SIZE;
+
+export const PROVIDER_OPTIONS = [
+	{ value: 'OpenAI', label: 'OpenAI' },
+	{ value: 'Anthropic', label: 'Anthropic' },
+	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
+	{ value: 'Google', label: 'Google' },
+	{ value: 'Self-hosted', label: 'Self-hosted' },
+	{ value: 'Other', label: 'Other' },
+];
+
+export const CACHE_MODE_OPTIONS = [
+	{ value: CacheModeDTO.subtract, label: 'Subtract (OpenAI style)' },
+	{ value: CacheModeDTO.additive, label: 'Additive (Anthropic style)' },
+	// https://app.notion.com/p/signoz/LLM-Tokens-Cost-Calculation-330fcc6bcd19805283ccc841d596358e?source=copy_link#33efcc6bcd1980e6a187e442c6ba5996
+	{ value: CacheModeDTO.unknown, label: 'Unknown' },
+];
+
+export const CACHE_BUCKETS: CacheBucketDef[] = [
+	{ key: 'cacheRead', label: 'cache_read', testId: 'cache-read' },
+	{ key: 'cacheWrite', label: 'cache_write', testId: 'cache-write' },
+];
+
+export const EMPTY_DRAFT: DrawerDraft = {
+	id: null,
+	sourceId: null,
+	modelName: '',
+	provider: 'OpenAI',
+	patterns: [],
+	isOverride: true,
+	pricing: {
+		input: null,
+		output: null,
+		cacheMode: CacheModeDTO.unknown,
+		cacheRead: null,
+		cacheWrite: null,
+	},
+};

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

@@ -1,4 +1,39 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	type LlmpricingruletypesLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
+
 export interface ExtraBucket {
 	key: string;
 	pricePerMillion: number;
 }
+
+export type DrawerMode = 'add' | 'edit';
+
+// Optional pricing buckets the user can add/remove. Keyed by the matching
+// DrawerDraft['pricing'] field.
+export type CacheBucketKey = 'cacheRead' | 'cacheWrite';
+
+export interface CacheBucketDef {
+	key: CacheBucketKey;
+	label: string;
+	testId: string;
+}
+
+export interface DrawerDraft {
+	id: string | null;
+	sourceId: string | null;
+	modelName: string;
+	provider: string;
+	patterns: string[];
+	isOverride: boolean;
+	pricing: {
+		input: number | null;
+		output: number | null;
+		cacheMode: CacheModeDTO;
+		cacheRead: number | null;
+		cacheWrite: number | null;
+	};
+}

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

@@ -1,8 +1,19 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+	type LlmpricingruletypesLLMPricingCacheCostsDTO,
+	type LlmpricingruletypesLLMRulePricingDTO,
+	type LlmpricingruletypesUpdatableLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
-import type { ExtraBucket } from './types';
-import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DrawerDraft,
+	DrawerMode,
+	ExtraBucket,
+	PricingRule,
+} from './types';
 
 dayjs.extend(relativeTime);
 
@@ -13,6 +24,19 @@ const getRelativeTime = (
 	return parsed?.isValid() ? parsed.fromNow() : '—';
 };
 
+const hasCacheValue = (value: number | null | undefined): value is number =>
+	typeof value === 'number' && value > 0;
+
+// ─── Input helpers ───────────────────────────────────────────────────────────
+
+export const parsePricingAmount = (raw: string): number | null => {
+	if (raw.trim() === '') {
+		return null;
+	}
+	const value = Number(raw);
+	return Number.isFinite(value) ? value : 0;
+};
+
 // ─── Display helpers ─────────────────────────────────────────────────────────
 
 export const formatPricePerMillion = (value: number | undefined): string => {
@@ -23,38 +47,117 @@ export const formatPricePerMillion = (value: number | undefined): string => {
 	return `$${value.toFixed(2)}`;
 };
 
-export const getExtraBuckets = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): ExtraBucket[] => {
+export const getExtraBuckets = (rule: PricingRule): ExtraBucket[] => {
 	const cache = rule.pricing?.cache;
 	if (!cache) {
 		return [];
 	}
 	const buckets: ExtraBucket[] = [];
-	if (typeof cache.read === 'number' && cache.read > 0) {
+	if (hasCacheValue(cache.read)) {
 		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
 	}
-	if (typeof cache.write === 'number' && cache.write > 0) {
+	if (hasCacheValue(cache.write)) {
 		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
 	}
 	return buckets;
 };
 
-export const getSourceLabel = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): 'Auto' | 'User override' => (rule.isOverride ? 'User override' : 'Auto');
+export const getSourceLabel = (rule: PricingRule): 'Auto' | 'User override' =>
+	rule.isOverride ? 'User override' : 'Auto';
 
-export const getRelativeLastSeen = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
+export const getRelativeLastSeen = (rule: PricingRule): string =>
+	getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
 
 // Canonical id shown under the model name, e.g. "openai:gpt-4o". Both segments
 // are lower-cased so the id is consistently normalised (providers/models can
 // arrive with mixed casing).
-export const getCanonicalId = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => {
+export const getCanonicalId = (rule: PricingRule): string => {
 	const provider = rule.provider?.trim().toLowerCase() || 'unknown';
 	const model = rule.modelName?.trim().toLowerCase() || 'unknown';
 	return `${provider}:${model}`;
 };
+
+// ─── Drawer draft <-> API helpers ────────────────────────────────────────────
+
+export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
+	id: rule.id,
+	sourceId: rule.sourceId ?? null,
+	modelName: rule.modelName,
+	provider: rule.provider,
+	patterns: rule.modelPattern || [],
+	isOverride: !!rule.isOverride,
+	pricing: {
+		input: rule.pricing?.input ?? 0,
+		output: rule.pricing?.output ?? 0,
+		cacheMode: rule.pricing?.cache?.mode ?? CacheModeDTO.unknown,
+		cacheRead: rule.pricing?.cache?.read ?? null,
+		cacheWrite: rule.pricing?.cache?.write ?? null,
+	},
+});
+
+const buildCacheCosts = (
+	pricing: DrawerDraft['pricing'],
+): LlmpricingruletypesLLMPricingCacheCostsDTO | undefined => {
+	const { cacheMode, cacheRead, cacheWrite } = pricing;
+	if (!hasCacheValue(cacheRead) && !hasCacheValue(cacheWrite)) {
+		return undefined;
+	}
+	return {
+		mode: cacheMode,
+		...(hasCacheValue(cacheRead) && { read: cacheRead }),
+		...(hasCacheValue(cacheWrite) && { write: cacheWrite }),
+	};
+};
+
+export const buildPricingPayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesLLMRulePricingDTO => {
+	const cache = buildCacheCosts(draft.pricing);
+	return {
+		input: draft.pricing.input ?? 0,
+		output: draft.pricing.output ?? 0,
+		...(cache && { cache }),
+	};
+};
+
+export const buildRulePayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesUpdatableLLMPricingRuleDTO => ({
+	id: draft.id || undefined,
+	sourceId: draft.sourceId || undefined,
+	modelName: draft.modelName.trim(),
+	provider: draft.provider.trim(),
+	modelPattern: draft.patterns,
+	isOverride: draft.isOverride,
+	enabled: true,
+	unit: UnitDTO.per_million_tokens,
+	pricing: buildPricingPayload(draft),
+});
+
+export const validateModelName = (
+	modelName: string,
+	mode: DrawerMode,
+): true | string =>
+	mode === 'add' && !modelName.trim() ? 'Billing model ID is required.' : true;
+
+export const validateProvider = (provider: string): true | string =>
+	provider.trim() ? true : 'Provider is required.';
+
+export const validatePricing = (
+	pricing: DrawerDraft['pricing'],
+	isOverride: boolean,
+): true | string => {
+	if (!isOverride) {
+		return true;
+	}
+	if (pricing.input === null || pricing.input <= 0) {
+		return 'Input cost must be greater than 0.';
+	}
+	if (pricing.output === null || pricing.output <= 0) {
+		return 'Output cost must be greater than 0.';
+	}
+	if ((pricing.cacheRead ?? 0) < 0 || (pricing.cacheWrite ?? 0) < 0) {
+		return 'Cache costs must be non-negative.';
+	}
+	return true;
+};

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlBadge.tsx

@@ -1,4 +1,5 @@
 import { Gauge } from '@signozhq/icons';
+import { Tooltip } from 'antd';
 import { MetricreductionruletypesGettableReductionRuleDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { Badge } from '@signozhq/ui/badge';
@@ -8,16 +9,26 @@ interface VolumeControlBadgeProps {
 }
 
 function VolumeControlBadge({ rule }: VolumeControlBadgeProps): JSX.Element {
-	return (
+	const badge = (
 		<Badge
 			data-testid="vc-badge-active"
 			variant="outline"
-			color={!rule.active ? 'success' : 'warning'}
+			color={rule.active ? 'success' : 'warning'}
 		>
 			<Gauge size={12} />
-			{!rule.active ? 'Active' : 'Pending'}
+			{rule.active ? 'Active' : 'Pending'}
 		</Badge>
 	);
+
+	if (rule.active) {
+		return badge;
+	}
+
+	return (
+		<Tooltip title="Takes about 5 minutes to take effect">
+			<span>{badge}</span>
+		</Tooltip>
+	);
 }
 
 export default VolumeControlBadge;

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlChart/VolumeControlChart.module.scss

@@ -7,6 +7,12 @@
 	padding: 12px 16px 0 16px;
 }
 
+.chartHeader {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
 .chartTitle {
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
@@ -15,3 +21,11 @@
 .chartBody {
 	height: 340px;
 }
+
+.chartStatus {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlChart/VolumeControlChart.tsx

@@ -1,5 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Typography } from '@signozhq/ui/typography';
+import { Spin } from 'antd';
 import { useGetMetricReductionRuleTimeseries } from 'api/generated/services/metrics';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
@@ -25,7 +26,9 @@ interface VolumeControlChartProps {
 }
 
 function VolumeControlChart({ enabled }: VolumeControlChartProps): JSX.Element {
-	const { data } = useGetMetricReductionRuleTimeseries({ query: { enabled } });
+	const { data, isLoading, isError } = useGetMetricReductionRuleTimeseries({
+		query: { enabled },
+	});
 
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
@@ -65,11 +68,34 @@ function VolumeControlChart({ enabled }: VolumeControlChartProps): JSX.Element {
 
 	return (
 		<div className={styles.chart} data-testid="volume-control-chart">
-			<Typography.Text className={styles.chartTitle} size={'small'}>
-				Series volume over time · ingested vs retained
-			</Typography.Text>
+			<div className={styles.chartHeader}>
+				<Typography.Text className={styles.chartTitle} size={'small'}>
+					Sample volume · ingested vs retained
+				</Typography.Text>
+				<Typography.Text size="small" color="muted">
+					Last 6 hours
+				</Typography.Text>
+			</div>
 			<div className={styles.chartBody} ref={graphRef}>
-				{dimensions.width > 0 && (
+				{isLoading && (
+					<div
+						className={styles.chartStatus}
+						data-testid="volume-control-chart-loading"
+					>
+						<Spin size="small" />
+					</div>
+				)}
+				{!isLoading && isError && (
+					<div
+						className={styles.chartStatus}
+						data-testid="volume-control-chart-error"
+					>
+						<Typography.Text size="small" color="danger">
+							Failed to load chart
+						</Typography.Text>
+					</div>
+				)}
+				{!isLoading && !isError && dimensions.width > 0 && (
 					<BarChart
 						config={config}
 						data={chartData}

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/ImpactPanel/ImpactPanel.module.scss

@@ -17,11 +17,27 @@
 	gap: 5px;
 }
 
+.meterLabelRow {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
 .meterLabel {
 	text-transform: uppercase;
 	letter-spacing: 0.04em;
 }
 
+.meterInfo {
+	flex-shrink: 0;
+	color: var(--bg-vanilla-400, #c0c1c3);
+	line-height: 1;
+	cursor: help;
+}
+
 .meterValue {
+	display: flex;
+	align-items: baseline;
+	gap: 6px;
 	font-family: 'Geist Mono', monospace;
 }

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/ImpactPanel/ImpactPanel.tsx

@@ -1,6 +1,8 @@
+import { Info } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
-import { Spin } from 'antd';
+import { Spin, Tooltip } from 'antd';
 import { MetricreductionruletypesGettableReductionRulePreviewDTO } from 'api/generated/services/sigNoz.schemas';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { formatCompact } from '../../../configUtils';
 import { RuleMode } from '../../../types';
@@ -27,6 +29,7 @@ function ImpactPanel({
 		);
 	}
 
+	const full = preview?.ingestedSeries ?? 0;
 	const current = preview?.currentRetainedSeries ?? 0;
 	const proposed = preview?.retainedSeries ?? 0;
 	const deltaPct = current > 0 ? (1 - proposed / current) * 100 : 0;
@@ -40,31 +43,59 @@ function ImpactPanel({
 			{!isLoading && preview && (
 				<div className={styles.meterGrid}>
 					<div className={styles.meter}>
-						<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
-							Current series
+						<div className={styles.meterLabelRow}>
+							<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
+								Full series
+							</Typography.Text>
+							<Tooltip
+								title="Total number of series for this metric before any reduction."
+								getPopupContainer={popupContainer}
+							>
+								<Info size={12} className={styles.meterInfo} />
+							</Tooltip>
+						</div>
+						<Typography.Text size="2xl" className={styles.meterValue}>
+							{formatCompact(full)}
 						</Typography.Text>
+					</div>
+					<div className={styles.meter}>
+						<div className={styles.meterLabelRow}>
+							<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
+								Current retained
+							</Typography.Text>
+							<Tooltip
+								title="Series kept today under the metric's existing rule, or all of them if it has no rule yet."
+								getPopupContainer={popupContainer}
+							>
+								<Info size={12} className={styles.meterInfo} />
+							</Tooltip>
+						</div>
 						<Typography.Text size="2xl" className={styles.meterValue}>
 							{formatCompact(current)}
 						</Typography.Text>
 					</div>
 					<div className={styles.meter}>
-						<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
-							Proposed series
-						</Typography.Text>
+						<div className={styles.meterLabelRow}>
+							<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
+								Potential retained
+							</Typography.Text>
+							<Tooltip
+								title="Series that would be kept if you save this rule, with the reduction vs what's retained today."
+								getPopupContainer={popupContainer}
+							>
+								<Info size={12} className={styles.meterInfo} />
+							</Tooltip>
+						</div>
 						<Typography.Text size="2xl" className={styles.meterValue}>
 							{formatCompact(proposed)}
-						</Typography.Text>
-					</div>
-					<div className={styles.meter}>
-						<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
-							Reduction
-						</Typography.Text>
-						<Typography.Text
-							size="2xl"
-							color={deltaPct >= 0 ? 'success' : undefined}
-							className={styles.meterValue}
-						>
-							{reductionLabel}
+							{deltaPct !== 0 && (
+								<Typography.Text
+									size="small"
+									color={deltaPct >= 0 ? 'success' : undefined}
+								>
+									{reductionLabel}
+								</Typography.Text>
+							)}
 						</Typography.Text>
 					</div>
 				</div>

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/ModeSelector/ModeSelector.tsx

@@ -18,12 +18,12 @@ const MODE_OPTIONS: ModeOption[] = [
 	},
 	{
 		mode: 'include',
-		title: 'Include attributes',
+		title: 'Include',
 		description: 'Allowlist: only the selected attributes stay queryable.',
 	},
 	{
 		mode: 'exclude',
-		title: 'Exclude attributes',
+		title: 'Exclude',
 		description: 'Blocklist: the selected attributes are aggregated away.',
 	},
 ];

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/RelatedAssetsWarning/RelatedAssetsWarning.tsx

@@ -53,12 +53,12 @@ function RelatedAssetsWarning({
 		<div className={styles.warning} data-testid="volume-control-warning">
 			<Info size={14} />
 			<div className={styles.warningBody}>
-				<Typography.Text as="div" size="small" weight="semibold" color="warning">
+				<Typography.Text as="div" size="base" weight="semibold" color="warning">
 					This rule affects {impacted.length} related asset
 					{impacted.length > 1 ? 's' : ''}.
 				</Typography.Text>
 				{impactedLabels.length > 0 && (
-					<Typography.Text as="div" size="sm" color="muted">
+					<Typography.Text as="div" size="base" color="muted">
 						{impactedLabels.join(', ')} will no longer be queryable; affected panels
 						fall back to aggregated data once the rule applies.
 					</Typography.Text>
@@ -73,7 +73,7 @@ function RelatedAssetsWarning({
 							<li key={`${asset.type}-${asset.id}-${asset.widget?.id ?? ''}`}>
 								{href ? (
 									<Typography.Link
-										size="sm"
+										size="base"
 										href={href}
 										target="_blank"
 										rel="noopener noreferrer"
@@ -81,7 +81,7 @@ function RelatedAssetsWarning({
 										{label}
 									</Typography.Link>
 								) : (
-									<Typography.Text size="sm" color="muted">
+									<Typography.Text size="base" color="muted">
 										{label}
 									</Typography.Text>
 								)}

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/VolumeControlConfigDrawer.tsx

@@ -42,6 +42,10 @@ function VolumeControlConfigDrawer({
 
 	const footer = (
 		<div className={styles.footer}>
+			<Typography.Text size="small" color="muted">
+				Changes take effect about 5 minutes after saving.
+			</Typography.Text>
+			<div className={styles.footerSpacer} />
 			<Button
 				variant="outlined"
 				color="secondary"
@@ -50,7 +54,6 @@ function VolumeControlConfigDrawer({
 			>
 				Cancel
 			</Button>
-			<div className={styles.footerSpacer} />
 			{hasExistingRule && (
 				<Button
 					variant="ghost"

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlSection/PendingActivationBanner/PendingActivationBanner.tsx

@@ -8,8 +8,8 @@ function PendingActivationBanner(): JSX.Element {
 		<div className={styles.banner} data-testid="volume-control-pending-banner">
 			<Info size={13} />
 			<Typography.Text size="sm" color="muted">
-				This metric&apos;s configuration was recently updated. Volume changes will
-				take effect within a few minutes.
+				This metric&apos;s configuration was recently updated. Volume changes take
+				effect within about 5 minutes.
 			</Typography.Text>
 		</div>
 	);

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlSection/VolumeControlSection.tsx

@@ -22,7 +22,7 @@ function VolumeControlSection({
 		useVolumeControlFeatureGate();
 	const [isConfigOpen, setIsConfigOpen] = useState(false);
 
-	const { data, isLoading, error } = useListMetricReductionRules(
+	const { data, isLoading, isError } = useListMetricReductionRules(
 		{ metricName },
 		{
 			query: {
@@ -37,7 +37,7 @@ function VolumeControlSection({
 	}
 
 	const rule = data?.data.rules?.[0];
-	const hasRule = !!rule && !error;
+	const hasRule = !!rule && !isError;
 
 	const openConfig = (): void => setIsConfigOpen(true);
 	const closeConfig = (): void => setIsConfigOpen(false);
@@ -53,6 +53,16 @@ function VolumeControlSection({
 
 			{isLoading && <Skeleton active title={false} paragraph={{ rows: 2 }} />}
 
+			{!isLoading && isError && (
+				<Typography.Text
+					size="small"
+					color="danger"
+					data-testid="volume-control-section-error"
+				>
+					Failed to load volume control. Please try again.
+				</Typography.Text>
+			)}
+
 			{!isLoading && hasRule && rule && !rule.active && (
 				<PendingActivationBanner />
 			)}
@@ -65,7 +75,7 @@ function VolumeControlSection({
 				/>
 			)}
 
-			{!isLoading && !hasRule && (
+			{!isLoading && !isError && !hasRule && (
 				<NoRuleEmptyState canManage={canManageVolumeControl} onSetup={openConfig} />
 			)}
 

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlStats/VolumeControlStats.module.scss

@@ -1,3 +1,9 @@
+.statsSection {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
 .stats {
 	display: flex;
 	flex-wrap: wrap;
@@ -21,11 +27,24 @@
 	background: var(--callout-success-background);
 }
 
+.statCardLabelRow {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
 .statCardLabel {
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 }
 
+.statCardInfo {
+	flex-shrink: 0;
+	color: var(--bg-vanilla-400, #c0c1c3);
+	line-height: 1;
+	cursor: help;
+}
+
 .statCardValue {
 	display: flex;
 	align-items: baseline;

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlStats/VolumeControlStats.tsx

@@ -1,4 +1,6 @@
+import { Info } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
+import { Skeleton, Tooltip } from 'antd';
 import cx from 'classnames';
 
 import { formatCompact, formatUsd } from '../../../configUtils';
@@ -8,12 +10,17 @@ interface VolumeControlStatsProps {
 	activeRules: number;
 	ingestedSeries: number;
 	retainedSeries: number;
+	ingestedSamples: number;
+	retainedSamples: number;
 	estimatedMonthlySavingsUsd: number;
+	isLoading?: boolean;
+	isError?: boolean;
 }
 
 interface StatItem {
 	label: string;
 	value: string;
+	tooltip: string;
 	delta?: string;
 	unit?: string;
 	highlighted?: boolean;
@@ -24,20 +31,53 @@ function VolumeControlStats({
 	activeRules,
 	ingestedSeries,
 	retainedSeries,
+	ingestedSamples,
+	retainedSamples,
 	estimatedMonthlySavingsUsd,
+	isLoading = false,
+	isError = false,
 }: VolumeControlStatsProps): JSX.Element {
 	const overallReduction =
 		ingestedSeries > 0
 			? Math.round((1 - retainedSeries / ingestedSeries) * 100)
 			: 0;
 
+	const sampleReduction =
+		ingestedSamples > 0
+			? Math.round((1 - retainedSamples / ingestedSamples) * 100)
+			: 0;
+
 	const items: StatItem[] = [
-		{ label: 'Active rules', value: String(activeRules) },
-		{ label: 'Ingested series', value: formatCompact(ingestedSeries) },
+		{
+			label: 'Configured rules',
+			value: String(activeRules),
+			tooltip: 'Volume-control rules currently configured for this workspace.',
+		},
+		{
+			label: 'Ingested series',
+			value: formatCompact(ingestedSeries),
+			tooltip:
+				'Distinct time series across all metrics in the last 1 hour, before any reduction.',
+		},
 		{
 			label: 'Retained series',
 			value: formatCompact(retainedSeries),
 			delta: overallReduction > 0 ? `−${overallReduction}%` : undefined,
+			tooltip:
+				'Distinct time series kept across all metrics in the last 1 hour; everything except what the rules reduce away. Lower than ingested means more reduction.',
+		},
+		{
+			label: 'Ingested samples',
+			value: formatCompact(ingestedSamples),
+			tooltip:
+				'Sample data points across all metrics in the last 1 hour, before any reduction.',
+		},
+		{
+			label: 'Retained samples',
+			value: formatCompact(retainedSamples),
+			delta: sampleReduction > 0 ? `−${sampleReduction}%` : undefined,
+			tooltip:
+				'Sample data points kept across all metrics in the last 1 hour; everything except what the rules reduce. Samples reduce more than series because series do not all carry the same sample volume.',
 		},
 		{
 			label: 'Est. monthly savings',
@@ -45,42 +85,73 @@ function VolumeControlStats({
 			unit: '/mo',
 			highlighted: true,
 			valueGood: true,
+			tooltip:
+				'Rough monthly estimate: the samples the rules reduced in the last 1 hour, scaled to a month at 1-month standard retention. It is extrapolated from a single rolling hour.',
 		},
 	];
 
 	return (
-		<div className={styles.stats} data-testid="volume-control-stats">
-			{items.map((item) => (
-				<div
-					key={item.label}
-					className={cx(styles.statCard, {
-						[styles.statCardHighlighted]: item.highlighted,
-					})}
-				>
-					<Typography.Text size="sm" color="muted" className={styles.statCardLabel}>
-						{item.label}
-					</Typography.Text>
-					<Typography.Text
-						as="div"
-						size="large"
-						weight="semibold"
-						color={item.valueGood ? 'success' : undefined}
-						className={styles.statCardValue}
+		<div className={styles.statsSection}>
+			<Typography.Text size="small" color="muted">
+				Last 1 hour
+			</Typography.Text>
+			<div className={styles.stats} data-testid="volume-control-stats">
+				{items.map((item) => (
+					<div
+						key={item.label}
+						className={cx(styles.statCard, {
+							[styles.statCardHighlighted]: item.highlighted,
+						})}
 					>
-						{item.value}
-						{item.delta && (
-							<Typography.Text size="small" weight="semibold" color="success">
-								{item.delta}
+						<div className={styles.statCardLabelRow}>
+							<Typography.Text
+								size="sm"
+								color="muted"
+								className={styles.statCardLabel}
+							>
+								{item.label}
+							</Typography.Text>
+							<Tooltip title={item.tooltip}>
+								<Info size={12} className={styles.statCardInfo} />
+							</Tooltip>
+						</div>
+						{isLoading && (
+							<Skeleton.Button active size="small" className={styles.statCardValue} />
+						)}
+						{!isLoading && isError && (
+							<Typography.Text
+								as="div"
+								size="small"
+								color="danger"
+								className={styles.statCardValue}
+							>
+								Failed to load
 							</Typography.Text>
 						)}
-						{item.unit && (
-							<Typography.Text size="small" weight="medium" color="muted">
-								{item.unit}
+						{!isLoading && !isError && (
+							<Typography.Text
+								as="div"
+								size="large"
+								weight="semibold"
+								color={item.valueGood ? 'success' : undefined}
+								className={styles.statCardValue}
+							>
+								{item.value}
+								{item.delta && (
+									<Typography.Text size="small" weight="semibold" color="success">
+										{item.delta}
+									</Typography.Text>
+								)}
+								{item.unit && (
+									<Typography.Text size="small" weight="medium" color="muted">
+										{item.unit}
+									</Typography.Text>
+								)}
 							</Typography.Text>
 						)}
-					</Typography.Text>
-				</div>
-			))}
+					</div>
+				))}
+			</div>
 		</div>
 	);
 }

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlTab.module.scss

@@ -13,8 +13,10 @@
 	font-family: 'Geist Mono', monospace;
 }
 
-.reductionCell {
-	font-family: 'Geist Mono', monospace;
+.volumeCell {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
 }
 
 .empty {

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlTab.tsx

@@ -36,7 +36,7 @@ type VolumeControlTableParams = Required<
 >;
 
 const DEFAULT_PARAMS: VolumeControlTableParams = {
-	orderBy: OrderBy.reduction,
+	orderBy: OrderBy.ingested_volume,
 	order: SortOrder.desc,
 	search: '',
 	offset: 0,
@@ -60,11 +60,20 @@ function VolumeControlTab(): JSX.Element {
 		);
 	}, [debouncedSearch]);
 
-	const { data, isLoading } = useListMetricReductionRules(params, {
+	const {
+		data,
+		isLoading,
+		isError: isListError,
+	} = useListMetricReductionRules(params, {
 		query: { enabled: isVolumeControlEnabled },
 	});
 
-	const { data: statsData } = useGetMetricReductionRuleStats({
+	const {
+		data: statsData,
+		isLoading: isStatsLoading,
+		isFetching: isStatsFetching,
+		isError: isStatsError,
+	} = useGetMetricReductionRuleStats({
 		query: { enabled: isVolumeControlEnabled },
 	});
 	const stats = statsData?.data;
@@ -111,7 +120,7 @@ function VolumeControlTab(): JSX.Element {
 				{
 					title: 'MODE',
 					key: 'mode',
-					width: 160,
+					width: 110,
 					render: (
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
@@ -138,7 +147,14 @@ function VolumeControlTab(): JSX.Element {
 					),
 				},
 				{
-					title: 'INGESTED',
+					title: (
+						<>
+							INGESTED{' '}
+							<Typography.Text size="small" color="muted">
+								(1h)
+							</Typography.Text>
+						</>
+					),
 					key: OrderBy.ingested_volume,
 					width: 130,
 					sorter: true,
@@ -147,13 +163,28 @@ function VolumeControlTab(): JSX.Element {
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
 					): JSX.Element => (
-						<Typography.Text size="small" color="muted">
-							{formatCompact(rule.ingestedSeries)}
-						</Typography.Text>
+						<div className={styles.volumeCell}>
+							<Typography.Text size="small">
+								{formatCompact(rule.ingestedSeries)}{' '}
+								<Typography.Text size="small" color="muted">
+									series
+								</Typography.Text>
+							</Typography.Text>
+							<Typography.Text size="small" color="muted">
+								{formatCompact(rule.ingestedSamples)} samples
+							</Typography.Text>
+						</div>
 					),
 				},
 				{
-					title: 'RETAINED',
+					title: (
+						<>
+							RETAINED{' '}
+							<Typography.Text size="small" color="muted">
+								(1h)
+							</Typography.Text>
+						</>
+					),
 					key: OrderBy.reduced_volume,
 					width: 130,
 					sorter: true,
@@ -162,22 +193,35 @@ function VolumeControlTab(): JSX.Element {
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
 					): JSX.Element => (
-						<Typography.Text size="small">
-							{formatCompact(rule.retainedSeries)}
-						</Typography.Text>
+						<div className={styles.volumeCell}>
+							<Typography.Text size="small">
+								{formatCompact(rule.retainedSeries)}{' '}
+								<Typography.Text size="small" color="muted">
+									series
+								</Typography.Text>
+							</Typography.Text>
+							<Typography.Text size="small" color="muted">
+								{formatCompact(rule.retainedSamples)} samples
+							</Typography.Text>
+						</div>
 					),
 				},
 				{
 					title: 'CHANGE',
-					key: OrderBy.reduction,
-					width: 110,
-					sorter: true,
-					sortOrder: sortOrderFor(OrderBy.reduction),
+					width: 140,
 					render: (
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
 					): JSX.Element => {
-						if (rule.reductionPercent <= 0) {
+						const seriesReduction =
+							rule.ingestedSeries > 0
+								? (1 - rule.retainedSeries / rule.ingestedSeries) * 100
+								: 0;
+						const samplesReduction =
+							rule.ingestedSamples > 0
+								? (1 - rule.retainedSamples / rule.ingestedSamples) * 100
+								: 0;
+						if (seriesReduction <= 0 && samplesReduction <= 0) {
 							return (
 								<Typography.Text size="small" color="muted">
 									—
@@ -185,14 +229,18 @@ function VolumeControlTab(): JSX.Element {
 							);
 						}
 						return (
-							<Typography.Text
-								size="small"
-								weight="semibold"
-								color="success"
-								className={styles.reductionCell}
-							>
-								−{Math.round(rule.reductionPercent)}%
-							</Typography.Text>
+							<div className={styles.volumeCell}>
+								<Typography.Text size="small" weight="semibold" color="success">
+									{seriesReduction > 0 ? `−${Math.round(seriesReduction)}%` : '0%'}{' '}
+									<Typography.Text size="small" color="muted">
+										series
+									</Typography.Text>
+								</Typography.Text>
+								<Typography.Text size="small" color="muted">
+									{samplesReduction > 0 ? `−${Math.round(samplesReduction)}%` : '0%'}{' '}
+									samples
+								</Typography.Text>
+							</div>
 						);
 					},
 				},
@@ -273,7 +321,11 @@ function VolumeControlTab(): JSX.Element {
 				activeRules={total}
 				ingestedSeries={stats?.ingestedSeries ?? 0}
 				retainedSeries={stats?.retainedSeries ?? 0}
+				ingestedSamples={stats?.ingestedSamples ?? 0}
+				retainedSamples={stats?.retainedSamples ?? 0}
 				estimatedMonthlySavingsUsd={stats?.estimatedMonthlySavingsUsd ?? 0}
+				isLoading={isStatsLoading || isStatsFetching}
+				isError={isStatsError}
 			/>
 
 			<VolumeControlChart enabled={isVolumeControlEnabled} />
@@ -293,7 +345,13 @@ function VolumeControlTab(): JSX.Element {
 					showSizeChanger: false,
 				}}
 				locale={{
-					emptyText: (
+					emptyText: isListError ? (
+						<div className={styles.empty} data-testid="volume-control-tab-error">
+							<Typography.Text color="danger">
+								Failed to load volume control rules. Please try again.
+							</Typography.Text>
+						</div>
+					) : (
 						<div className={styles.empty} data-testid="volume-control-tab-empty">
 							<Typography.Text color="muted">
 								No volume control rules yet. Open a metric and set one up to start

frontend/src/container/MetricsExplorer/VolumeControl/hooks/useVolumeControlConfig.ts

@@ -49,6 +49,7 @@ export interface UseVolumeControlConfigResult {
 const PREVIEW_DEBOUNCE_MS = 400;
 const SAVE_ERROR_MESSAGE = 'Failed to save volume control rule';
 const REMOVE_ERROR_MESSAGE = 'Failed to remove volume control rule';
+const PREVIEW_ERROR_MESSAGE = 'Failed to preview volume control rule';
 
 export function useVolumeControlConfig({
 	metricName,
@@ -95,11 +96,25 @@ export function useVolumeControlConfig({
 		const timer = setTimeout(() => {
 			previewMutate(
 				{ data: { metricName, matchType: matchTypeForMode(mode), labels } },
-				{ onSettled: () => setIsPreviewPending(false) },
+				{
+					onError: (error) =>
+						notifications.error({
+							message: error.response?.data?.error?.message ?? PREVIEW_ERROR_MESSAGE,
+						}),
+					onSettled: () => setIsPreviewPending(false),
+				},
 			);
 		}, PREVIEW_DEBOUNCE_MS);
 		return (): void => clearTimeout(timer);
-	}, [open, mode, labels, metricName, previewMutate, previewReset]);
+	}, [
+		open,
+		mode,
+		labels,
+		metricName,
+		previewMutate,
+		previewReset,
+		notifications,
+	]);
 
 	const createMutation = useCreateMetricReductionRule();
 	const updateMutation = useUpdateMetricReductionRuleByID();
@@ -142,7 +157,10 @@ export function useVolumeControlConfig({
 		}
 
 		const onSuccess = (): void => {
-			notifications.success({ message: 'Volume control rule saved' });
+			notifications.success({
+				message:
+					'Volume control rule saved. It takes about 5 minutes to take effect.',
+			});
 			invalidate();
 			onClose();
 		};

frontend/src/container/MetricsExplorer/VolumeControl/ruleUtils.ts

@@ -9,7 +9,7 @@ export function isKeepMode(
 export function getMatchTypeLabel(
 	matchType: MetricreductionruletypesMatchTypeDTO,
 ): string {
-	return isKeepMode(matchType) ? 'Include attributes' : 'Exclude attributes';
+	return isKeepMode(matchType) ? 'Include' : 'Exclude';
 }
 
 export function getLabelVerb(

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -24,6 +24,11 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { withBasePath } from 'utils/basePath';
 import { getGraphType } from 'utils/getGraphType';
 
+/**
+ * @deprecated V1-only. V2 dashboards seed alerts from a panel via
+ * `useCreateAlertFromPanel` / `buildCreateAlertUrl`
+ * (pages/DashboardPageV2/.../Panel). Do not use in new code.
+ */
 const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 	const queryRangeMutation = useMutation(getSubstituteVars);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx

@@ -4,7 +4,6 @@ import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
 import {
 	lockDashboardV2,
-	patchDashboardV2,
 	unlockDashboardV2,
 } from 'api/generated/services/dashboard';
 import type {
@@ -18,6 +17,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
 import { useCreatePanel } from '../hooks/useCreatePanel';
+import { useOptimisticPatch } from '../hooks/useOptimisticPatch';
 import PanelTypeSelectionModal from '../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
@@ -51,6 +51,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
+	const { patchAsync } = useOptimisticPatch();
 	const { isPickerOpen, openPicker, closePicker, createPanel } =
 		useCreatePanel();
 
@@ -88,14 +89,13 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 						value: next,
 					},
 				];
-				await patchDashboardV2({ id }, patch);
+				await patchAsync(patch);
 				toast.success('Dashboard renamed successfully');
-				refetch();
 			} catch (error) {
 				showErrorModal(error as APIError);
 			}
 		},
-		[id, refetch, showErrorModal],
+		[id, patchAsync, showErrorModal],
 	);
 
 	const { isEditing, draft, setDraft, startEdit, cancel, commit } =

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/index.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
 import type {
 	DashboardtypesGettableDashboardV2DTO,
 	DashboardtypesJSONPatchOperationDTO,
@@ -9,7 +8,7 @@ import { isEqual } from 'lodash-es';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-import { useDashboardStore } from '../../store/useDashboardStore';
+import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
 import DashboardInfoForm from './DashboardInfoForm/DashboardInfoForm';
 import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
@@ -23,7 +22,7 @@ interface OverviewProps {
 function Overview({ dashboard }: OverviewProps): JSX.Element {
 	const id = dashboard.id;
 
-	const refetch = useDashboardStore((s) => s.refetch);
+	const { patchAsync } = useOptimisticPatch();
 
 	const title = dashboard.spec.display.name;
 	const description = dashboard.spec.display.description ?? '';
@@ -96,15 +95,14 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 
 		try {
 			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
+			await patchAsync(ops);
 			toast.success('Dashboard updated');
-			refetch();
 		} catch (error) {
 			showErrorModal(error as APIError);
 		} finally {
 			setIsSaving(false);
 		}
-	}, [id, buildPatch, refetch, showErrorModal]);
+	}, [buildPatch, patchAsync, showErrorModal]);
 
 	useEffect(() => {
 		let numberOfUnsavedChanges = 0;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/useSaveVariables.ts

@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
 import { toast } from '@signozhq/ui/sonner';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
+import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { formModelToDto } from './variableAdapters';
 import type { VariableFormModel } from './variableFormModel';
@@ -14,14 +14,9 @@ interface UseSaveVariables {
 	isSaving: boolean;
 }
 
-/**
- * Persists the dashboard's variable list via a single `/spec/variables` patch,
- * then refetches. Mirrors the General-settings save flow (patch → toast →
- * refetch → surface errors).
- */
 export function useSaveVariables(): UseSaveVariables {
 	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
+	const { patchAsync } = useOptimisticPatch();
 	const { showErrorModal } = useErrorModal();
 	const [isSaving, setIsSaving] = useState(false);
 
@@ -33,9 +28,8 @@ export function useSaveVariables(): UseSaveVariables {
 			const dtos = variables.map(formModelToDto);
 			try {
 				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, buildVariablesPatch(dtos));
+				await patchAsync(buildVariablesPatch(dtos));
 				toast.success('Variables updated');
-				refetch();
 				return true;
 			} catch (error) {
 				showErrorModal(error as APIError);
@@ -44,7 +38,7 @@ export function useSaveVariables(): UseSaveVariables {
 				setIsSaving(false);
 			}
 		},
-		[dashboardId, refetch, showErrorModal],
+		[dashboardId, patchAsync, showErrorModal],
 	);
 
 	return { save, isSaving };

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActionRow.tsx

@@ -0,0 +1,43 @@
+import { SquareArrowOutUpRight } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import type { ReactNode } from 'react';
+
+import styles from './ConfigActions.module.scss';
+
+interface ConfigActionRowProps {
+	/** Leading glyph for the action. */
+	icon: ReactNode;
+	label: string;
+	onClick: () => void;
+	testId?: string;
+}
+
+/**
+ * One row in the config pane's "Actions" list — a cross-page navigation link
+ * (leading icon, label, trailing external-link affordance). The whole row is the
+ * click target.
+ */
+function ConfigActionRow({
+	icon,
+	label,
+	onClick,
+	testId,
+}: ConfigActionRowProps): JSX.Element {
+	return (
+		<Button
+			type="button"
+			variant="outlined"
+			color="secondary"
+			className={styles.row}
+			data-testid={testId}
+			onClick={onClick}
+			prefix={<span className={styles.icon}>{icon}</span>}
+			suffix={<SquareArrowOutUpRight size={14} />}
+		>
+			<Typography.Text className={styles.label}>{label}</Typography.Text>
+		</Button>
+	);
+}
+
+export default ConfigActionRow;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.module.scss

@@ -0,0 +1,57 @@
+/* The "Actions" group: a list of cross-page navigation links, visually separated
+   from the collapsible config sections above by the same hairline divider. */
+.divider {
+	height: 1px;
+	background: var(--l2-border);
+	margin: 18px 0;
+}
+
+.container {
+	padding: 0 16px;
+}
+
+.eyebrow {
+	display: block;
+	margin: 0 2px 10px;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--l1-foreground);
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+}
+
+/* A navigation-link row: leading icon, label, trailing external-link affordance. */
+.row {
+	display: flex;
+	align-items: center;
+	gap: 11px;
+	width: 100%;
+	height: 44px;
+	padding: 0 4px;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	color: var(--text-vanilla-100);
+	border-radius: 4px;
+
+	&:hover {
+		background: color-mix(in srgb, var(--bg-vanilla-100) 6%, transparent);
+	}
+}
+
+.icon {
+	display: grid;
+	place-items: center;
+	flex: none;
+	color: var(--l2-foreground);
+}
+
+.label {
+	flex: 1;
+	text-align: left;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.tsx

@@ -0,0 +1,51 @@
+import { Bell } from '@signozhq/icons';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import { useCreateAlertFromPanel } from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel';
+
+import ConfigActionRow from './ConfigActionRow';
+import styles from './ConfigActions.module.scss';
+
+interface ConfigActionsProps {
+	/** The draft panel — its current query seeds the actions (e.g. Create alert). */
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
+}
+
+/**
+ * The "Actions" group at the foot of the config pane: cross-page navigation links,
+ * kept distinct from the collapsible config sections above. Each link is gated by the
+ * panel kind's capabilities; the whole group hides when none apply.
+ */
+function ConfigActions({
+	panel,
+	panelId,
+}: ConfigActionsProps): JSX.Element | null {
+	const createAlert = useCreateAlertFromPanel();
+	const { actions } = getPanelDefinition(panel.spec.plugin.kind);
+
+	// Only kinds whose query can seed an alert offer this today; mirror the panel
+	// menu's create-alert capability.
+	if (!actions.createAlert) {
+		return null;
+	}
+
+	return (
+		<>
+			<div className={styles.divider} />
+			<div className={styles.container}>
+				<span className={styles.eyebrow}>Actions</span>
+				<div className={styles.list}>
+					<ConfigActionRow
+						testId="panel-editor-v2-create-alert"
+						icon={<Bell size={14} />}
+						label="Create alert"
+						onClick={(): void => createAlert(panel, panelId)}
+					/>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default ConfigActions;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/__tests__/ConfigActions.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import ConfigActions from '../ConfigActions';
+
+const mockCreateAlert = jest.fn();
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel',
+	() => ({
+		useCreateAlertFromPanel: jest.fn(() => mockCreateAlert),
+	}),
+);
+
+function makePanel(kind: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'CPU' },
+			plugin: { kind, spec: {} },
+			queries: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+describe('ConfigActions', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('offers "Create alert rule" for a create-alert-capable kind and seeds from the panel', async () => {
+		const user = userEvent.setup();
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		render(<ConfigActions panel={panel} panelId="panel-1" />);
+
+		const row = screen.getByTestId('panel-editor-v2-create-alert');
+		expect(row).toHaveTextContent('Create alert');
+
+		await user.click(row);
+		expect(mockCreateAlert).toHaveBeenCalledWith(panel, 'panel-1');
+	});
+
+	it('renders nothing for a kind that cannot seed an alert', () => {
+		const { container } = render(
+			<ConfigActions panel={makePanel('signoz/TablePanel')} panelId="panel-1" />,
+		);
+
+		expect(
+			screen.queryByTestId('panel-editor-v2-create-alert'),
+		).not.toBeInTheDocument();
+		expect(container).toBeEmptyDOMElement();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -1,20 +1,22 @@
 import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesPanelDTO,
+	DashboardtypesPanelSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { resolveSignal } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
 import type { LegendSeries } from '../hooks/useLegendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
+import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';
 
 import styles from './ConfigPane.module.scss';
 import { PanelKind } from '../../Panels/types/panelKind';
 
 interface ConfigPaneProps {
-	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`); drives which sections show. */
-	panelKind: PanelKind;
 	/** The panel spec — the single editing surface (title/description + section slices). */
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
@@ -32,6 +34,14 @@ interface ConfigPaneProps {
 	tableColumns: TableColumnOption[];
 	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
 	stepInterval?: number;
+	/**
+	 * The draft panel and its id — the "Actions" group seeds cross-page links
+	 * (Create alert) from the current query.
+	 */
+	panel: DashboardtypesPanelDTO;
+	panelId: string;
+	/** Unit the selected metric was sent with; drives the unit selector's mismatch warning. */
+	metricUnit?: string;
 }
 
 /**
@@ -41,7 +51,6 @@ interface ConfigPaneProps {
  * generically via the section registry — only sections with a built editor appear.
  */
 function ConfigPane({
-	panelKind,
 	spec,
 	onChangeSpec,
 	onChangePanelKind,
@@ -49,7 +58,11 @@ function ConfigPane({
 	legendSeries,
 	tableColumns,
 	stepInterval,
+	panel,
+	panelId,
+	metricUnit,
 }: ConfigPaneProps): JSX.Element {
+	const panelKind = spec.plugin.kind;
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
 
@@ -108,12 +121,15 @@ function ConfigPane({
 									onChangePanelKind={onChangePanelKind}
 									queryType={queryType}
 									stepInterval={stepInterval}
+									metricUnit={metricUnit}
 								/>
 							))}
 						</div>
 					</div>
 				</>
 			)}
+
+			<ConfigActions panel={panel} panelId={panelId} />
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx

@@ -34,6 +34,7 @@ function SectionSlot({
 	onChangePanelKind,
 	queryType,
 	stepInterval,
+	metricUnit,
 }: SectionSlotProps): JSX.Element | null {
 	// A kind can hide a section based on current spec state (e.g. Histogram legend once
 	// queries are merged) — skip it before resolving the editor.
@@ -74,6 +75,7 @@ function SectionSlot({
 				onChangePanelKind={onChangePanelKind}
 				queryType={queryType}
 				stepInterval={stepInterval}
+				metricUnit={metricUnit}
 			/>
 		</SettingsSection>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/__tests__/ConfigPane.test.tsx

@@ -1,9 +1,20 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesPanelDTO,
+	DashboardtypesPanelSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 import ConfigPane from '../ConfigPane';
 
+// The Actions group's hook navigates/logs; stub it so ConfigPane renders without a router.
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel',
+	() => ({
+		useCreateAlertFromPanel: (): jest.Mock => jest.fn(),
+	}),
+);
+
 function spec(unit?: string): DashboardtypesPanelSpecDTO {
 	return {
 		display: { name: 'CPU', description: 'usage' },
@@ -19,13 +30,14 @@ function renderConfigPane(
 	overrides: Partial<React.ComponentProps<typeof ConfigPane>> = {},
 ): React.ComponentProps<typeof ConfigPane> {
 	const props: React.ComponentProps<typeof ConfigPane> = {
-		panelKind: 'signoz/TimeSeriesPanel',
 		spec: spec(),
 		onChangeSpec: jest.fn(),
 		onChangePanelKind: jest.fn(),
 		queryType: EQueryType.QUERY_BUILDER,
 		legendSeries: [],
 		tableColumns: [],
+		panel: { kind: 'Panel', spec: spec() } as DashboardtypesPanelDTO,
+		panelId: 'panel-1',
 		...overrides,
 	};
 	render(<ConfigPane {...props} />);
@@ -63,4 +75,28 @@ describe('ConfigPane', () => {
 			screen.getByTestId('config-section-formatting-&-units'),
 		).toBeInTheDocument();
 	});
+
+	it('renders the Actions group for a create-alert-capable panel', () => {
+		// renderConfigPane defaults to a TimeSeries panel, which can seed an alert.
+		renderConfigPane();
+
+		expect(screen.getByText('Actions')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('panel-editor-v2-create-alert'),
+		).toBeInTheDocument();
+	});
+
+	it('omits the create-alert action for a kind that cannot seed an alert', () => {
+		// Table panels can't seed alerts → the Actions group hides its row. Only the
+		// panel passed to ConfigActions needs the kind; sections are asserted elsewhere.
+		const panel = {
+			kind: 'Panel',
+			spec: { ...spec(), plugin: { kind: 'signoz/TablePanel', spec: {} } },
+		} as DashboardtypesPanelDTO;
+		renderConfigPane({ panel });
+
+		expect(
+			screen.queryByTestId('panel-editor-v2-create-alert'),
+		).not.toBeInTheDocument();
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -19,4 +19,6 @@ export interface SectionEditorContext {
 	yAxisUnit?: string;
 	queryType?: EQueryType;
 	stepInterval?: number;
+	/** Unit the selected metric was sent with; drives the unit selector's mismatch warning. */
+	metricUnit?: string;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesField.tsx

@@ -46,11 +46,10 @@ function DisconnectValuesField({
 	onChange,
 }: DisconnectValuesFieldProps): JSX.Element {
 	const duration = value?.fillLessThan || undefined;
-	const isThreshold = !!duration;
-	// Remember the last threshold so toggling Never → Threshold restores it.
-	const [lastDuration, setLastDuration] = useState(
-		duration ?? defaultDuration(stepInterval),
-	);
+	// `fillOnlyBelow` is authoritative; fall back to a stored duration for legacy panels.
+	const isThreshold = value?.fillOnlyBelow ?? !!duration;
+	// Remember the last committed threshold so Never → Threshold restores it.
+	const [lastDuration, setLastDuration] = useState<string | undefined>(duration);
 
 	useEffect(() => {
 		if (duration) {
@@ -59,11 +58,17 @@ function DisconnectValuesField({
 	}, [duration]);
 
 	const handleMode = (mode: DisconnectValuesMode): void => {
-		onChange(
-			mode === DisconnectValuesMode.THRESHOLD
-				? { ...value, fillLessThan: lastDuration }
-				: undefined,
-		);
+		if (mode === DisconnectValuesMode.THRESHOLD) {
+			onChange({
+				...value,
+				fillOnlyBelow: true,
+				// Seed from the live stepInterval (async — undefined until results load), not mount.
+				fillLessThan: lastDuration ?? defaultDuration(stepInterval),
+			});
+			return;
+		}
+		// Never spans every gap; drop the duration so the renderer reads a clean "span all".
+		onChange({ ...value, fillOnlyBelow: false, fillLessThan: undefined });
 	};
 
 	return (
@@ -79,14 +84,16 @@ function DisconnectValuesField({
 					onChange={handleMode}
 				/>
 			</div>
-			{isThreshold && (
+			{isThreshold && duration && (
 				<div className={styles.field}>
 					<Typography.Text>Threshold value</Typography.Text>
 					<DisconnectValuesThresholdInput
 						testId={`${testId}-value`}
-						value={lastDuration}
+						value={duration}
 						minValue={stepInterval}
-						onChange={(next): void => onChange({ ...value, fillLessThan: next })}
+						onChange={(next): void =>
+							onChange({ ...value, fillOnlyBelow: true, fillLessThan: next })
+						}
 					/>
 				</div>
 			)}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesThresholdInput.tsx

@@ -14,6 +14,28 @@ interface DisconnectValuesThresholdInputProps {
 	onChange: (duration: string) => void;
 }
 
+/**
+ * Inline error for a raw duration, or `null` when valid and in range. The parse is
+ * guarded: `isValidTimeSpan` passes some strings `intervalToSeconds` throws on (e.g. "5x").
+ */
+function validationError(raw: string, minValue?: number): string | null {
+	let seconds: number;
+	try {
+		seconds = rangeUtil.isValidTimeSpan(raw)
+			? rangeUtil.intervalToSeconds(raw)
+			: NaN;
+	} catch {
+		seconds = NaN;
+	}
+	if (!Number.isFinite(seconds) || seconds <= 0) {
+		return 'Enter a valid duration (e.g. 30s, 1m, 1h)';
+	}
+	if (minValue !== undefined && seconds < minValue) {
+		return `Threshold should be > ${rangeUtil.secondsToHms(minValue)}`;
+	}
+	return null;
+}
+
 /**
  * Duration input for the span-gaps threshold: shows/accepts and reports a human
  * duration ("30s", "1m", "1h"), which is the value stored verbatim in
@@ -36,24 +58,21 @@ function DisconnectValuesThresholdInput({
 		setError(null);
 	}, [value]);
 
+	// Validate live so an invalid entry surfaces immediately, not only on blur.
+	const handleText = (raw: string): void => {
+		setText(raw);
+		setError(raw ? validationError(raw, minValue) : null);
+	};
+
 	const commit = (raw: string): void => {
-		if (!raw) {
+		// Skip no-op commits: blur fires when clicking the Never toggle, and re-emitting
+		// the unchanged value there would race the toggle and snap back to Threshold.
+		if (!raw || raw === value) {
 			return;
 		}
-		let seconds: number;
-		try {
-			seconds = rangeUtil.isValidTimeSpan(raw)
-				? rangeUtil.intervalToSeconds(raw)
-				: NaN;
-		} catch {
-			seconds = NaN;
-		}
-		if (!Number.isFinite(seconds) || seconds <= 0) {
-			setError('Enter a valid duration (e.g. 30s, 1m, 1h)');
-			return;
-		}
-		if (minValue !== undefined && seconds < minValue) {
-			setError(`Threshold should be > ${rangeUtil.secondsToHms(minValue)}`);
+		const message = validationError(raw, minValue);
+		if (message) {
+			setError(message);
 			return;
 		}
 		setError(null);
@@ -69,12 +88,9 @@ function DisconnectValuesThresholdInput({
 				status={error ? 'error' : undefined}
 				prefix={<span className={styles.thresholdPrefix}>&gt;</span>}
 				value={text}
-				onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-					setText(e.target.value);
-					if (error) {
-						setError(null);
-					}
-				}}
+				onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+					handleText(e.target.value)
+				}
 				onBlur={(e): void => commit(e.currentTarget.value)}
 				onKeyDown={(e): void => {
 					if (e.key === 'Enter') {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/__tests__/ChartAppearanceSection.test.tsx

@@ -1,9 +1,34 @@
+import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DashboardtypesLineStyleDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesLineStyleDTO,
+	type DashboardtypesTimeSeriesChartAppearanceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import ChartAppearanceSection from '../ChartAppearanceSection';
 
+/** Stateful wrapper that feeds onChange back as the spec, mirroring the real editor. */
+function StatefulSpanGaps({
+	initial,
+	stepInterval,
+}: {
+	initial?: DashboardtypesTimeSeriesChartAppearanceDTO;
+	stepInterval?: number;
+}): JSX.Element {
+	const [value, setValue] = useState<
+		DashboardtypesTimeSeriesChartAppearanceDTO | undefined
+	>(initial);
+	return (
+		<ChartAppearanceSection
+			value={value}
+			controls={{ spanGaps: true }}
+			stepInterval={stepInterval}
+			onChange={setValue}
+		/>
+	);
+}
+
 // Open the antd Select by clicking its selector, then pick the option by label. The
 // line-style and fill-mode controls are ConfigSegmented (buttons), so this helper is
 // only used for the line-interpolation ConfigSelect.
@@ -139,7 +164,7 @@ describe('ChartAppearanceSection', () => {
 		await user.click(screen.getByText('Threshold'));
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '1m' },
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '1m' },
 		});
 	});
 
@@ -162,7 +187,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '5m' },
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
 		});
 	});
 
@@ -183,7 +208,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '300' },
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '300' },
 		});
 	});
 
@@ -200,7 +225,24 @@ describe('ChartAppearanceSection', () => {
 
 		await user.click(screen.getByText('Never'));
 
-		expect(onChange).toHaveBeenLastCalledWith({ spanGaps: undefined });
+		expect(onChange).toHaveBeenLastCalledWith({
+			spanGaps: { fillOnlyBelow: false, fillLessThan: undefined },
+		});
+	});
+
+	it('selects Never when fillOnlyBelow is false even if a duration lingers', () => {
+		render(
+			<ChartAppearanceSection
+				value={{ spanGaps: { fillOnlyBelow: false, fillLessThan: '1m' } }}
+				controls={{ spanGaps: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		// The flag is authoritative: a stale fillLessThan must not show Threshold.
+		expect(
+			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
+		).not.toBeInTheDocument();
 	});
 
 	it('shows an error and does not commit an invalid duration', async () => {
@@ -244,4 +286,117 @@ describe('ChartAppearanceSection', () => {
 		expect(screen.getByText(/Threshold should be >/)).toBeInTheDocument();
 		expect(onChange).not.toHaveBeenCalled();
 	});
+
+	it('seeds the threshold from the step interval when switching to Threshold', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ spanGaps: true }}
+				stepInterval={300}
+				onChange={onChange}
+			/>,
+		);
+
+		await user.click(screen.getByText('Threshold'));
+
+		expect(onChange).toHaveBeenLastCalledWith({
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
+		});
+	});
+
+	it('seeds from the step interval even when it arrives after mount', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		// The step interval is undefined until the query response carries step metadata,
+		// so the panel first renders without it and receives it on a later render.
+		const { rerender } = render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ spanGaps: true }}
+				onChange={onChange}
+			/>,
+		);
+		rerender(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ spanGaps: true }}
+				stepInterval={300}
+				onChange={onChange}
+			/>,
+		);
+
+		await user.click(screen.getByText('Threshold'));
+
+		// Regression: a value seeded at mount would still be the 1m fallback.
+		expect(onChange).toHaveBeenLastCalledWith({
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
+		});
+	});
+
+	it('shows a validation error while typing, before blur', async () => {
+		const user = userEvent.setup();
+		render(
+			<ChartAppearanceSection
+				value={{ spanGaps: { fillLessThan: '1m' } }}
+				controls={{ spanGaps: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
+		await user.clear(input);
+		await user.type(input, 'abc');
+		// No blur / Enter — the error must already be visible.
+
+		expect(screen.getByText(/valid duration/i)).toBeInTheDocument();
+	});
+
+	it('does not re-commit the threshold when blurred without a change', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		render(
+			<ChartAppearanceSection
+				value={{ spanGaps: { fillLessThan: '1m' } }}
+				controls={{ spanGaps: true }}
+				onChange={onChange}
+			/>,
+		);
+
+		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
+		await user.click(input);
+		await user.tab();
+
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it('fully switches from Threshold to Never (the input disappears)', async () => {
+		const user = userEvent.setup();
+		render(<StatefulSpanGaps initial={{ spanGaps: { fillLessThan: '1m' } }} />);
+
+		expect(
+			screen.getByTestId('panel-editor-v2-span-gaps-value'),
+		).toBeInTheDocument();
+
+		// Focus the input first so clicking Never also fires its blur (the toggle race).
+		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-value'));
+		await user.click(screen.getByText('Never'));
+
+		expect(
+			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('remembers the last threshold when toggling Never → Threshold', async () => {
+		const user = userEvent.setup();
+		render(<StatefulSpanGaps initial={{ spanGaps: { fillLessThan: '5m' } }} />);
+
+		await user.click(screen.getByText('Never'));
+		await user.click(screen.getByText('Threshold'));
+
+		expect(screen.getByTestId('panel-editor-v2-span-gaps-value')).toHaveValue(
+			'5m',
+		);
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/FormattingSection.tsx

@@ -14,7 +14,7 @@ import ColumnUnits from './ColumnUnits';
 import styles from './FormattingSection.module.scss';
 
 type FormattingSectionProps = SectionEditorProps<SectionKind.Formatting> &
-	Pick<SectionEditorContext, 'tableColumns'>;
+	Pick<SectionEditorContext, 'tableColumns' | 'metricUnit'>;
 
 // `full` means "show the raw value, no rounding"; the digits round to that many places.
 const DECIMAL_OPTIONS: {
@@ -39,6 +39,7 @@ function FormattingSection({
 	controls,
 	onChange,
 	tableColumns = [],
+	metricUnit,
 }: FormattingSectionProps): JSX.Element {
 	return (
 		<>
@@ -50,6 +51,7 @@ function FormattingSection({
 						data-testid="panel-editor-v2-unit"
 						source={YAxisSource.DASHBOARDS}
 						value={value?.unit}
+						initialValue={metricUnit}
 						onChange={(unit): void => onChange({ ...value, unit })}
 					/>
 				</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/__tests__/FormattingSection.test.tsx

@@ -3,6 +3,8 @@ import userEvent from '@testing-library/user-event';
 
 import FormattingSection from '../FormattingSection';
 
+// Auto-seeding is covered by useMetricYAxisUnit's tests; here `metricUnit` is just a prop.
+
 // Open the Decimals select (clicking its antd selector) and pick the option with the
 // given visible label.
 async function pickDecimal(label: string): Promise<void> {
@@ -71,4 +73,31 @@ describe('FormattingSection', () => {
 			decimalPrecision: '2',
 		});
 	});
+
+	it('warns when the selected unit mismatches the metric unit', () => {
+		// metric sent in seconds, but bytes is selected.
+		render(
+			<FormattingSection
+				value={{ unit: 'By' }}
+				controls={{ unit: true }}
+				metricUnit="s"
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByLabelText('warning')).toBeInTheDocument();
+	});
+
+	it('shows no warning when the selected unit matches the metric unit', () => {
+		render(
+			<FormattingSection
+				value={{ unit: 's' }}
+				controls={{ unit: true }}
+				metricUnit="s"
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.queryByLabelText('warning')).not.toBeInTheDocument();
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -82,6 +82,15 @@ function ThresholdsSection({
 	// Which row is being edited, and whether it was just added (so Discard removes it).
 	const [editingIndex, setEditingIndex] = useState<number | null>(null);
 	const [unsavedIndex, setUnsavedIndex] = useState<number | null>(null);
+	// The saved threshold captured on edit entry, restored if the edit is discarded
+	// (edits stream into the spec live, so Discard can't just drop a local draft).
+	const editSnapshot = useRef<AnyThreshold | null>(null);
+
+	const updateAt =
+		(index: number) =>
+		(next: AnyThreshold): void => {
+			onChange(thresholds.map((t, i) => (i === index ? next : t)));
+		};
 
 	const addThreshold = (): void => {
 		const nextIndex = thresholds.length;
@@ -90,6 +99,11 @@ function ThresholdsSection({
 		setUnsavedIndex(nextIndex);
 	};
 
+	const beginEdit = (index: number): void => {
+		editSnapshot.current = thresholds[index] ?? null;
+		setEditingIndex(index);
+	};
+
 	const saveAt =
 		(index: number) =>
 		(next: AnyThreshold): void => {
@@ -105,11 +119,15 @@ function ThresholdsSection({
 	};
 
 	const discardAt = (index: number) => (): void => {
-		// Discarding a row that was never saved removes it; otherwise just exit edit.
+		// A never-saved row is removed; otherwise revert the live edits to the snapshot.
 		if (index === unsavedIndex) {
 			removeAt(index);
 			return;
 		}
+		const original = editSnapshot.current;
+		if (original) {
+			onChange(thresholds.map((t, i) => (i === index ? original : t)));
+		}
 		setEditingIndex(null);
 	};
 
@@ -120,8 +138,9 @@ function ThresholdsSection({
 			index,
 			yAxisUnit,
 			isEditing: editingIndex === index,
-			onEdit: (): void => setEditingIndex(index),
+			onEdit: (): void => beginEdit(index),
 			onSave: saveAt(index),
+			onLiveChange: updateAt(index),
 			onDiscard: discardAt(index),
 			onRemove: (): void => removeAt(index),
 		};

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/__tests__/ThresholdsSection.comparison.test.tsx

@@ -5,7 +5,7 @@ import {
 	DashboardtypesThresholdFormatDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { AnyThreshold } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import UnifiedThresholdsSection from '../ThresholdsSection';
 
@@ -36,9 +36,16 @@ const THRESHOLDS: DashboardtypesComparisonThresholdDTO[] = [
 	},
 ];
 
-// Stateful harness for flows that depend on the value updating (add/discard).
-function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
-	const [value, setValue] = useState<DashboardtypesComparisonThresholdDTO[]>([]);
+// Stateful harness for flows that depend on the value updating (add/discard/live).
+function Harness({
+	yAxisUnit,
+	initial = [],
+}: {
+	yAxisUnit?: string;
+	initial?: DashboardtypesComparisonThresholdDTO[];
+}): JSX.Element {
+	const [value, setValue] =
+		useState<DashboardtypesComparisonThresholdDTO[]>(initial);
 	return (
 		<ComparisonThresholdsSection
 			value={value}
@@ -142,24 +149,46 @@ describe('ComparisonThresholdsSection', () => {
 		expect(valueInput).toHaveValue(5);
 	});
 
-	it('does not commit edits when Discard is clicked', async () => {
+	it('reflects edits live (before Save) so the preview can react', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(
 			<ComparisonThresholdsSection value={THRESHOLDS} onChange={onChange} />,
 		);
 
+		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
+		await user.clear(screen.getByTestId('comparison-threshold-value-0'));
+		await user.type(screen.getByTestId('comparison-threshold-value-0'), '90');
+
+		// No Save click — the latest edit is pushed up (debounced) for the preview.
+		await waitFor(() =>
+			expect(onChange).toHaveBeenLastCalledWith([
+				{
+					value: 90,
+					color: '#F5B225',
+					operator: DashboardtypesComparisonOperatorDTO.above,
+					unit: 'percent',
+					format: DashboardtypesThresholdFormatDTO.background,
+				},
+			]),
+		);
+	});
+
+	it('reverts the live edits to the saved value on Discard', async () => {
+		const user = userEvent.setup();
+		render(<Harness initial={THRESHOLDS} />);
+
 		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
 		await user.clear(screen.getByTestId('comparison-threshold-value-0'));
 		await user.type(screen.getByTestId('comparison-threshold-value-0'), '90');
 		await user.click(screen.getByTestId('comparison-threshold-discard-0'));
 
-		expect(onChange).not.toHaveBeenCalled();
-		// Back to view mode.
+		// Back to view mode, and re-opening shows the rolled-back 80, not 90.
 		expect(
 			screen.queryByTestId('comparison-threshold-value-0'),
 		).not.toBeInTheDocument();
-		expect(screen.getByTestId('comparison-threshold-edit-0')).toBeInTheDocument();
+		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
+		expect(screen.getByTestId('comparison-threshold-value-0')).toHaveValue(80);
 	});
 
 	it('removes a threshold from view mode', async () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/__tests__/ThresholdsSection.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { DashboardtypesThresholdWithLabelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { AnyThreshold } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
@@ -10,10 +10,16 @@ const THRESHOLDS: DashboardtypesThresholdWithLabelDTO[] = [
 	{ value: 80, color: '#F5B225', label: 'High', unit: 'percent' },
 ];
 
-// Stateful harness for flows that depend on the value updating (add/discard);
+// Stateful harness for flows that depend on the value updating (add/discard/live);
 // omits `controls` to exercise the default `label` variant.
-function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
-	const [value, setValue] = useState<AnyThreshold[]>([]);
+function Harness({
+	yAxisUnit,
+	initial = [],
+}: {
+	yAxisUnit?: string;
+	initial?: AnyThreshold[];
+}): JSX.Element {
+	const [value, setValue] = useState<AnyThreshold[]>(initial);
 	return (
 		<ThresholdsSection value={value} onChange={setValue} yAxisUnit={yAxisUnit} />
 	);
@@ -37,19 +43,20 @@ describe('ThresholdsSection', () => {
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 	});
 
-	it('edits a threshold value and commits it on Save', () => {
+	it('edits a threshold value and commits it on Save', async () => {
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
-		expect(screen.getByTestId('threshold-value-0')).toHaveValue(80);
+		await user.click(screen.getByTestId('threshold-edit-0'));
+		const valueInput = screen.getByTestId('threshold-value-0');
+		expect(valueInput).toHaveValue(80);
 
-		fireEvent.change(screen.getByTestId('threshold-value-0'), {
-			target: { value: '90' },
-		});
-		fireEvent.click(screen.getByTestId('threshold-save-0'));
+		await user.clear(valueInput);
+		await user.type(valueInput, '90');
+		await user.click(screen.getByTestId('threshold-save-0'));
 
-		expect(onChange).toHaveBeenCalledWith([
+		expect(onChange).toHaveBeenLastCalledWith([
 			{ value: 90, color: '#F5B225', label: 'High', unit: 'percent' },
 		]);
 	});
@@ -70,43 +77,63 @@ describe('ThresholdsSection', () => {
 		]);
 	});
 
-	it('does not commit edits when Discard is clicked', () => {
+	it('reflects edits live (before Save) so the preview can react', async () => {
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
-		fireEvent.change(screen.getByTestId('threshold-value-0'), {
-			target: { value: '90' },
-		});
-		fireEvent.click(screen.getByTestId('threshold-discard-0'));
+		await user.click(screen.getByTestId('threshold-edit-0'));
+		await user.clear(screen.getByTestId('threshold-value-0'));
+		await user.type(screen.getByTestId('threshold-value-0'), '90');
 
-		expect(onChange).not.toHaveBeenCalled();
-		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
-		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
+		// No Save click — the edit is pushed up (debounced) for the preview to render.
+		await waitFor(() =>
+			expect(onChange).toHaveBeenLastCalledWith([
+				{ value: 90, color: '#F5B225', label: 'High', unit: 'percent' },
+			]),
+		);
 	});
 
-	it('removes a threshold from view mode', () => {
+	it('reverts the live edits to the saved value on Discard', async () => {
+		const user = userEvent.setup();
+		render(<Harness initial={THRESHOLDS} />);
+
+		await user.click(screen.getByTestId('threshold-edit-0'));
+		await user.clear(screen.getByTestId('threshold-value-0'));
+		await user.type(screen.getByTestId('threshold-value-0'), '90');
+		await user.click(screen.getByTestId('threshold-discard-0'));
+
+		// Back to view mode, and re-opening shows the rolled-back 80, not 90.
+		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
+		await user.click(screen.getByTestId('threshold-edit-0'));
+		expect(screen.getByTestId('threshold-value-0')).toHaveValue(80);
+	});
+
+	it('removes a threshold from view mode', async () => {
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		fireEvent.click(screen.getByTestId('threshold-remove-0'));
+		await user.click(screen.getByTestId('threshold-remove-0'));
 
 		expect(onChange).toHaveBeenCalledWith([]);
 	});
 
-	it('adds a threshold that opens in edit mode, and discards it away', () => {
+	it('adds a threshold that opens in edit mode, and discards it away', async () => {
+		const user = userEvent.setup();
 		render(<Harness />);
 
-		fireEvent.click(screen.getByTestId('panel-editor-v2-add-threshold'));
+		await user.click(screen.getByTestId('panel-editor-v2-add-threshold'));
 		expect(screen.getByTestId('threshold-value-0')).toBeInTheDocument();
 
 		// Discarding a never-saved row removes it entirely.
-		fireEvent.click(screen.getByTestId('threshold-discard-0'));
+		await user.click(screen.getByTestId('threshold-discard-0'));
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('threshold-edit-0')).not.toBeInTheDocument();
 	});
 
-	it('flags a threshold unit in a different category than the y-axis unit', () => {
+	it('flags a threshold unit in a different category than the y-axis unit', async () => {
+		const user = userEvent.setup();
 		render(
 			<ThresholdsSection
 				value={[{ value: 80, color: '#F5B225', label: '', unit: 'ms' }]}
@@ -115,11 +142,12 @@ describe('ThresholdsSection', () => {
 			/>,
 		);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
+		await user.click(screen.getByTestId('threshold-edit-0'));
 		expect(screen.getByTestId('threshold-unit-invalid-0')).toBeInTheDocument();
 	});
 
-	it('does not flag a threshold unit in the same category as the y-axis unit', () => {
+	it('does not flag a threshold unit in the same category as the y-axis unit', async () => {
+		const user = userEvent.setup();
 		render(
 			<ThresholdsSection
 				value={[{ value: 80, color: '#F5B225', label: '', unit: 'ms' }]}
@@ -128,7 +156,7 @@ describe('ThresholdsSection', () => {
 			/>,
 		);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
+		await user.click(screen.getByTestId('threshold-edit-0'));
 		expect(
 			screen.queryByTestId('threshold-unit-invalid-0'),
 		).not.toBeInTheDocument();

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/ComparisonThresholdRow.tsx

@@ -27,6 +27,7 @@ interface ComparisonThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesComparisonThresholdDTO) => void;
+	onLiveChange: (next: DashboardtypesComparisonThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -42,10 +43,15 @@ function ComparisonThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
+	onLiveChange,
 	onDiscard,
 	onRemove,
 }: ComparisonThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
+	const { draft, setDraft, setValue } = useThresholdDraft(
+		threshold,
+		isEditing,
+		onLiveChange,
+	);
 
 	const symbol = threshold.operator ? OPERATOR_SYMBOL[threshold.operator] : '';
 	const summary = (

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/LabelThresholdRow.tsx

@@ -20,6 +20,7 @@ interface LabelThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesThresholdWithLabelDTO) => void;
+	onLiveChange: (next: DashboardtypesThresholdWithLabelDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -32,10 +33,15 @@ function LabelThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
+	onLiveChange,
 	onDiscard,
 	onRemove,
 }: LabelThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
+	const { draft, setDraft, setValue } = useThresholdDraft(
+		threshold,
+		isEditing,
+		onLiveChange,
+	);
 
 	// Persist an empty-string label when none was entered — the spec requires a string.
 	const handleSave = useCallback((): void => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/TableThresholdRow.tsx

@@ -28,6 +28,7 @@ interface TableThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesTableThresholdDTO) => void;
+	onLiveChange: (next: DashboardtypesTableThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -45,10 +46,15 @@ function TableThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
+	onLiveChange,
 	onDiscard,
 	onRemove,
 }: TableThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
+	const { draft, setDraft, setValue } = useThresholdDraft(
+		threshold,
+		isEditing,
+		onLiveChange,
+	);
 
 	// Stored columnName is the query key; resolve its label + configured unit.
 	const columnUnit = tableColumns.find((c) => c.key === draft.columnName)?.unit;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/shared/useThresholdDraft.ts

@@ -1,4 +1,5 @@
 import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
 
 interface ThresholdDraft<T> {
 	draft: T;
@@ -7,17 +8,25 @@ interface ThresholdDraft<T> {
 	setValue: (raw: string) => void;
 }
 
+const LIVE_PREVIEW_DEBOUNCE_MS = 150;
+
 /**
  * Local draft for a threshold row, shared by every variant. Snapshots the saved
- * threshold on each entry into edit mode (so Discard simply drops the draft and the
- * next edit starts clean) and exposes the numeric `value` setter all variants use.
+ * threshold on each entry into edit mode and exposes the numeric `value` setter all
+ * variants use. `onLiveChange` mirrors the draft into the spec as the user edits, so the
+ * panel preview updates live (without Save); the section reverts it on Discard.
  */
 export function useThresholdDraft<T extends { value: number }>(
 	threshold: T,
 	isEditing: boolean,
+	onLiveChange?: (draft: T) => void,
 ): ThresholdDraft<T> {
 	const [draft, setDraft] = useState<T>(threshold);
 
+	const emitLiveChange = useDebouncedFn((next) => {
+		onLiveChange?.(next as T);
+	}, LIVE_PREVIEW_DEBOUNCE_MS);
+
 	useEffect(() => {
 		if (isEditing) {
 			setDraft(threshold);
@@ -25,6 +34,20 @@ export function useThresholdDraft<T extends { value: number }>(
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- snapshot only on edit entry
 	}, [isEditing]);
 
+	useEffect(() => {
+		if (isEditing) {
+			emitLiveChange(draft);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps -- propagate on draft change only
+	}, [draft]);
+
+	useEffect(() => {
+		if (!isEditing) {
+			emitLiveChange.cancel();
+		}
+		return (): void => emitLiveChange.cancel();
+	}, [isEditing, emitLiveChange]);
+
 	const setValue = (raw: string): void => {
 		const next = Number(raw);
 		setDraft((d) => ({ ...d, value: Number.isNaN(next) ? d.value : next }));

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -71,10 +71,8 @@ function PreviewPane({
 			<div className={styles.container}>
 				<div className={styles.surface}>
 					<PanelHeader
-						name={panel.spec.display.name}
-						description={panel.spec.display.description}
 						panelId={panelId}
-						panelKind={panel.spec.plugin.kind}
+						panel={panel}
 						isFetching={isFetching}
 						error={error}
 						warning={data.response?.data?.warning}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/getSwitchedPluginSpec.test.ts

@@ -1,6 +1,8 @@
 import {
-	TelemetrytypesSignalDTO,
+	DashboardtypesComparisonOperatorDTO,
 	type DashboardtypesPanelSpecDTO,
+	DashboardtypesThresholdFormatDTO,
+	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 
@@ -95,4 +97,141 @@ describe('getSwitchedPluginSpec', () => {
 
 		expect(result.legend?.position).toBe('bottom');
 	});
+
+	describe('thresholds', () => {
+		it('does not carry thresholds when the new kind has no thresholds section', () => {
+			mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/ListPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toBeUndefined();
+		});
+
+		it('carries thresholds verbatim within the label variant (color/value/unit/label)', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
+			});
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/BarChartPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([
+				{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' },
+			]);
+		});
+
+		it('remaps label thresholds into the comparison variant, defaulting operator + format', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'comparison' } }],
+			});
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/NumberPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			// The label is dropped; operator/format are seeded so the threshold can match.
+			expect(result.thresholds).toStrictEqual([
+				{
+					value: 80,
+					color: '#F1575F',
+					operator: DashboardtypesComparisonOperatorDTO.above,
+					format: DashboardtypesThresholdFormatDTO.text,
+				},
+			]);
+		});
+
+		it('remaps comparison thresholds into the table variant, keeping operator/format and seeding a column', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'table' } }],
+			});
+			const old = specWith({
+				thresholds: [
+					{
+						value: 80,
+						color: '#F1575F',
+						operator: DashboardtypesComparisonOperatorDTO.below,
+						format: DashboardtypesThresholdFormatDTO.text,
+					},
+				],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/TablePanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([
+				{
+					value: 80,
+					color: '#F1575F',
+					operator: DashboardtypesComparisonOperatorDTO.below,
+					format: DashboardtypesThresholdFormatDTO.text,
+					columnName: '',
+				},
+			]);
+		});
+
+		it('drops the table-only columnName when remapping into the label variant', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
+			});
+			const old = specWith({
+				thresholds: [
+					{
+						value: 80,
+						color: '#F1575F',
+						operator: DashboardtypesComparisonOperatorDTO.above,
+						format: DashboardtypesThresholdFormatDTO.background,
+						columnName: 'p99',
+					},
+				],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/TimeSeriesPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([{ value: 80, color: '#F1575F' }]);
+		});
+
+		it('defaults the variant to label when the thresholds section omits controls', () => {
+			mockGetPanelDefinition.mockReturnValue({
+				sections: [{ kind: 'thresholds', controls: {} }],
+			});
+			const old = specWith({
+				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
+			});
+
+			const result = getSwitchedPluginSpec(
+				old,
+				'signoz/TimeSeriesPanel',
+				TelemetrytypesSignalDTO.logs,
+			);
+
+			expect(result.thresholds).toStrictEqual([
+				{ value: 80, color: '#F1575F', label: 'warn' },
+			]);
+		});
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts

@@ -1,13 +1,18 @@
-import type {
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
+import {
+	DashboardtypesComparisonOperatorDTO,
+	type DashboardtypesPanelSpecDTO,
+	DashboardtypesThresholdFormatDTO,
+	type TelemetrytypesSignalDTO,
+	type TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import {
-	SectionKind,
+	type AnyThreshold,
 	type PanelFormattingSlice,
+	type SectionConfig,
+	SectionKind,
+	type ThresholdVariant,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import {
 	buildDefaultPluginSpec,
@@ -24,13 +29,73 @@ import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
 export interface SwitchedPluginSpec extends DefaultPluginSpec {
 	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
 	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	thresholds?: AnyThreshold[];
+}
+
+/** Every field any threshold variant can hold; switching reads across shapes to remap. */
+interface AnyThresholdFields {
+	color: string;
+	value: number;
+	unit?: string;
+	operator?: DashboardtypesComparisonOperatorDTO;
+	format?: DashboardtypesThresholdFormatDTO;
+	columnName?: string;
+	label?: string;
+}
+
+/** The threshold variant a kind edits, or `undefined` when it has no Thresholds section. */
+function getThresholdVariant(
+	sections: SectionConfig[],
+): ThresholdVariant | undefined {
+	const section = sections.find(
+		(s): s is Extract<SectionConfig, { kind: SectionKind.Thresholds }> =>
+			s.kind === SectionKind.Thresholds,
+	);
+	return section ? (section.controls.variant ?? 'label') : undefined;
+}
+
+/**
+ * Remaps a threshold to the target kind's variant: keeps the shared core (color, value,
+ * unit) plus any cross-variant fields, and seeds the rest with the variant's defaults so
+ * the carried threshold stays functional (a comparison/table threshold needs an operator
+ * to match, a table threshold a column).
+ */
+function toThresholdVariant(
+	source: AnyThresholdFields,
+	variant: ThresholdVariant,
+): AnyThreshold {
+	const core = {
+		color: source.color,
+		value: source.value,
+		...(source.unit !== undefined && { unit: source.unit }),
+	};
+	if (variant === 'comparison') {
+		return {
+			...core,
+			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
+			format: source.format ?? DashboardtypesThresholdFormatDTO.text,
+		};
+	}
+	if (variant === 'table') {
+		return {
+			...core,
+			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
+			format: source.format ?? DashboardtypesThresholdFormatDTO.background,
+			columnName: source.columnName ?? '',
+		};
+	}
+	return {
+		...core,
+		...(source.label !== undefined && { label: source.label }),
+	};
 }
 
 /**
  * Builds the plugin spec for a first-visit switch to `newKind`: the kind's declared
  * section defaults (so the config pane opens populated, matching new-panel seeding) plus
- * the only cross-kind config worth keeping — unit + decimal precision. Switching into a
- * List seeds the current signal's default columns so the columns control isn't empty.
+ * the cross-kind config worth keeping — unit + decimal precision, and thresholds when the
+ * new kind supports them (remapped to its variant). Switching into a List seeds the
+ * current signal's default columns so the columns control isn't empty.
  *
  * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
  */
@@ -66,5 +131,19 @@ export function getSwitchedPluginSpec(
 		}
 	}
 
+	const thresholdVariant = getThresholdVariant(sections);
+	if (thresholdVariant) {
+		const oldThresholds = (
+			oldSpec.plugin.spec as {
+				thresholds?: AnyThreshold[] | null;
+			}
+		).thresholds;
+		if (oldThresholds && oldThresholds.length > 0) {
+			result.thresholds = oldThresholds.map((threshold) =>
+				toThresholdVariant(threshold as AnyThresholdFields, thresholdVariant),
+			);
+		}
+	}
+
 	return result;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/useMetricYAxisUnit.test.ts

@@ -0,0 +1,103 @@
+import { renderHook } from '@testing-library/react';
+import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
+
+import { useMetricYAxisUnit } from '../useMetricYAxisUnit';
+
+jest.mock('hooks/useGetYAxisUnit', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockUseGetYAxisUnit = useGetYAxisUnit as unknown as jest.Mock;
+
+function mockMetricUnit(
+	yAxisUnit: string | undefined,
+	isLoading = false,
+): void {
+	mockUseGetYAxisUnit.mockReturnValue({ yAxisUnit, isLoading, isError: false });
+}
+
+describe('useMetricYAxisUnit', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('seeds the unit from the metric on a new panel', () => {
+		mockMetricUnit('bytes');
+		const onSelectUnit = jest.fn();
+
+		renderHook(() =>
+			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
+		);
+
+		expect(onSelectUnit).toHaveBeenCalledWith('bytes');
+	});
+
+	it('does not seed when not a new panel', () => {
+		mockMetricUnit('bytes');
+		const onSelectUnit = jest.fn();
+
+		renderHook(() =>
+			useMetricYAxisUnit({ isNewPanel: false, unit: undefined, onSelectUnit }),
+		);
+
+		expect(onSelectUnit).not.toHaveBeenCalled();
+	});
+
+	it('does not seed when the metric has no unit', () => {
+		mockMetricUnit(undefined);
+		const onSelectUnit = jest.fn();
+
+		renderHook(() =>
+			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
+		);
+
+		expect(onSelectUnit).not.toHaveBeenCalled();
+	});
+
+	it('does not seed when the unit already matches the metric', () => {
+		mockMetricUnit('bytes');
+		const onSelectUnit = jest.fn();
+
+		renderHook(() =>
+			useMetricYAxisUnit({ isNewPanel: true, unit: 'bytes', onSelectUnit }),
+		);
+
+		expect(onSelectUnit).not.toHaveBeenCalled();
+	});
+
+	it('re-seeds when the resolved metric unit changes', () => {
+		mockMetricUnit('bytes');
+		const onSelectUnit = jest.fn();
+
+		const { rerender } = renderHook(
+			(props: { unit: string | undefined }) =>
+				useMetricYAxisUnit({
+					isNewPanel: true,
+					unit: props.unit,
+					onSelectUnit,
+				}),
+			{ initialProps: { unit: undefined as string | undefined } },
+		);
+		expect(onSelectUnit).toHaveBeenLastCalledWith('bytes');
+
+		// The metric changes; the panel now holds the previously-seeded unit.
+		mockMetricUnit('ms');
+		rerender({ unit: 'bytes' });
+
+		expect(onSelectUnit).toHaveBeenLastCalledWith('ms');
+	});
+
+	it('returns the resolved metric unit and loading state', () => {
+		mockMetricUnit('bytes', true);
+
+		const { result } = renderHook(() =>
+			useMetricYAxisUnit({
+				isNewPanel: false,
+				unit: undefined,
+				onSelectUnit: jest.fn(),
+			}),
+		);
+
+		expect(result.current.metricUnit).toBe('bytes');
+		expect(result.current.isLoading).toBe(true);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/usePanelEditorSave.test.ts

@@ -1,40 +1,36 @@
 import { renderHook } from '@testing-library/react';
-import {
-	getGetDashboardV2QueryKey,
-	usePatchDashboardV2,
-} from 'api/generated/services/dashboard';
 import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { usePanelEditorSave } from '../usePanelEditorSave';
 
-const mockInvalidateQueries = jest.fn();
+const mockPatchAsync = jest.fn().mockResolvedValue(undefined);
+let mockIsPatching = false;
+jest.mock('../../../hooks/useOptimisticPatch', () => ({
+	useOptimisticPatch: (): {
+		patchAsync: jest.Mock;
+		isPatching: boolean;
+		error: Error | null;
+	} => ({ patchAsync: mockPatchAsync, isPatching: mockIsPatching, error: null }),
+}));
+
+// The hook reads getQueryData only for the isNew branch; a stub client is enough here.
 jest.mock('react-query', () => ({
-	useQueryClient: (): { invalidateQueries: jest.Mock } => ({
-		invalidateQueries: mockInvalidateQueries,
+	useQueryClient: (): { getQueryData: jest.Mock } => ({
+		getQueryData: jest.fn(),
 	}),
 }));
 
 jest.mock('api/generated/services/dashboard', () => ({
-	usePatchDashboardV2: jest.fn(),
 	getGetDashboardV2QueryKey: jest.fn(() => ['/api/v2/dashboards/dash-1']),
 }));
 
-const mockUsePatch = usePatchDashboardV2 as unknown as jest.Mock;
-const mockGetQueryKey = getGetDashboardV2QueryKey as unknown as jest.Mock;
-
 describe('usePanelEditorSave', () => {
-	const mutateAsync = jest.fn().mockResolvedValue(undefined);
-
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockUsePatch.mockReturnValue({
-			mutateAsync,
-			isLoading: false,
-			error: null,
-		});
+		mockIsPatching = false;
 	});
 
-	it('emits an add patch replacing the whole panel spec and invalidates the dashboard query', async () => {
+	it('optimistically patches an add replacing the whole panel spec', async () => {
 		const { result } = renderHook(() =>
 			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),
 		);
@@ -50,28 +46,17 @@ describe('usePanelEditorSave', () => {
 
 		await result.current.save(spec);
 
-		expect(mutateAsync).toHaveBeenCalledWith({
-			pathParams: { id: 'dash-1' },
-			data: [
-				{
-					op: 'add',
-					path: '/spec/panels/panel-9/spec',
-					value: spec,
-				},
-			],
-		});
-		expect(mockGetQueryKey).toHaveBeenCalledWith({ id: 'dash-1' });
-		expect(mockInvalidateQueries).toHaveBeenCalledWith([
-			'/api/v2/dashboards/dash-1',
+		expect(mockPatchAsync).toHaveBeenCalledWith([
+			{
+				op: 'add',
+				path: '/spec/panels/panel-9/spec',
+				value: spec,
+			},
 		]);
 	});
 
-	it('surfaces the mutation loading state as isSaving', () => {
-		mockUsePatch.mockReturnValue({
-			mutateAsync,
-			isLoading: true,
-			error: null,
-		});
+	it('surfaces the patch in-flight state as isSaving', () => {
+		mockIsPatching = true;
 
 		const { result } = renderHook(() =>
 			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useMetricYAxisUnit.ts

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
+
+interface UseMetricYAxisUnitArgs {
+	/** Only a new panel auto-seeds; editing never overwrites the saved unit. */
+	isNewPanel: boolean;
+	unit: string | undefined;
+	onSelectUnit: (unit: string) => void;
+}
+
+interface UseMetricYAxisUnitResult {
+	metricUnit: string | undefined;
+	isLoading: boolean;
+}
+
+/**
+ * Resolves the selected metric's unit and, on a new panel only, seeds the formatting unit
+ * from it (V1 parity); returns the unit for the selector's mismatch warning.
+ */
+export function useMetricYAxisUnit({
+	isNewPanel,
+	unit,
+	onSelectUnit,
+}: UseMetricYAxisUnitArgs): UseMetricYAxisUnitResult {
+	const { yAxisUnit: metricUnit, isLoading } = useGetYAxisUnit();
+
+	useEffect(() => {
+		if (isNewPanel && metricUnit && metricUnit !== unit) {
+			onSelectUnit(metricUnit);
+		}
+		// Re-seed only when the resolved metric unit changes, not on every unit edit.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isNewPanel, metricUnit]);
+
+	return { metricUnit, isLoading };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorSave.ts

@@ -1,10 +1,7 @@
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
-import {
-	getGetDashboardV2QueryKey,
-	usePatchDashboardV2,
-} from 'api/generated/services/dashboard';
+import { getGetDashboardV2QueryKey } from 'api/generated/services/dashboard';
 import {
 	type DashboardtypesJSONPatchOperationDTO,
 	type DashboardtypesPanelSpecDTO,
@@ -13,6 +10,7 @@ import {
 	type GetDashboardV2200,
 } from 'api/generated/services/sigNoz.schemas';
 
+import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import { createPanelOps } from '../../patchOps';
 
 interface UsePanelEditorSaveArgs {
@@ -43,15 +41,14 @@ export function usePanelEditorSave({
 	layoutIndex,
 }: UsePanelEditorSaveArgs): UsePanelEditorSaveApi {
 	const queryClient = useQueryClient();
-	const { mutateAsync, isLoading, error } = usePatchDashboardV2();
+	const { patchAsync, isPatching, error } = useOptimisticPatch(dashboardId);
 
 	const save = useCallback(
 		async (spec: DashboardtypesPanelSpecDTO): Promise<void> => {
-			const dashboardQueryKey = getGetDashboardV2QueryKey({ id: dashboardId });
-
 			let ops: DashboardtypesJSONPatchOperationDTO[];
 			if (isNew) {
 				// Resolve the target section against the freshest dashboard we have.
+				const dashboardQueryKey = getGetDashboardV2QueryKey({ id: dashboardId });
 				const cached =
 					queryClient.getQueryData<GetDashboardV2200>(dashboardQueryKey);
 				ops = createPanelOps({
@@ -70,11 +67,11 @@ export function usePanelEditorSave({
 				];
 			}
 
-			await mutateAsync({ pathParams: { id: dashboardId }, data: ops });
-			await queryClient.invalidateQueries(dashboardQueryKey);
+			// Optimistic cache write + settle refetch (replaces the manual invalidate).
+			await patchAsync(ops);
 		},
-		[dashboardId, panelId, isNew, layoutIndex, mutateAsync, queryClient],
+		[dashboardId, panelId, isNew, layoutIndex, patchAsync, queryClient],
 	);
 
-	return { save, isSaving: isLoading, error: (error as Error) ?? null };
+	return { save, isSaving: isPatching, error };
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx

@@ -8,6 +8,8 @@ import {
 import { toast } from '@signozhq/ui/sonner';
 import {
 	type DashboardtypesPanelDTO,
+	type DashboardtypesPanelFormattingDTO,
+	type DashboardtypesPanelSpecDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -30,6 +32,7 @@ import { useLegendSeries } from './hooks/useLegendSeries';
 import { usePanelQuery } from '../hooks/usePanelQuery';
 import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
+import { useMetricYAxisUnit } from './hooks/useMetricYAxisUnit';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
 import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
@@ -123,6 +126,33 @@ function PanelEditorContainer({
 	// Switch the panel's visualization kind in place (reversible per session).
 	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
 
+	// At editor level, not the collapsible FormattingSection, so seeding runs while closed.
+	const formattingUnit = (
+		spec.plugin.spec as {
+			formatting?: DashboardtypesPanelFormattingDTO;
+		}
+	).formatting?.unit;
+	const seedFormattingUnit = useCallback(
+		(unit: string): void => {
+			const pluginSpec = spec.plugin.spec as {
+				formatting?: DashboardtypesPanelFormattingDTO;
+			};
+			setSpec({
+				...spec,
+				plugin: {
+					...spec.plugin,
+					spec: { ...pluginSpec, formatting: { ...pluginSpec.formatting, unit } },
+				},
+			} as DashboardtypesPanelSpecDTO);
+		},
+		[spec, setSpec],
+	);
+	const { metricUnit } = useMetricYAxisUnit({
+		isNewPanel: isNew,
+		unit: formattingUnit,
+		onSelectUnit: seedFormattingUnit,
+	});
+
 	// Spec and query dirtiness are tracked independently so query re-serialization
 	// never false-dirties. A new panel is always savable (you're creating it).
 	const isDirty = isNew || isSpecDirty || isQueryDirty;
@@ -242,7 +272,8 @@ function PanelEditorContainer({
 					className={styles.right}
 				>
 					<ConfigPane
-						panelKind={draft.spec.plugin.kind}
+						panel={draft}
+						panelId={panelId}
 						spec={spec}
 						onChangeSpec={setSpec}
 						onChangePanelKind={onChangePanelKind}
@@ -250,6 +281,7 @@ function PanelEditorContainer({
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
 						stepInterval={stepInterval}
+						metricUnit={metricUnit}
 					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/__tests__/prepareData.test.ts

@@ -0,0 +1,130 @@
+import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+import { preparePieData } from '../prepareData';
+
+function tableWith(
+	columns: PanelTable['columns'],
+	rows: PanelTable['rows'],
+	overrides: Partial<PanelTable> = {},
+): PanelTable {
+	return { queryName: 'A', legend: '', columns, rows, ...overrides };
+}
+
+const args = (tables: PanelTable[]): Parameters<typeof preparePieData>[0] => ({
+	tables,
+	isDarkMode: true,
+});
+
+describe('preparePieData', () => {
+	it('renders a slice per value column for a multi-column ClickHouse scalar', () => {
+		const table = tableWith(
+			[
+				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+			],
+			[{ data: { col1: 23399927, col2: 588691297 } }],
+		);
+
+		const slices = preparePieData(args([table]));
+
+		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
+			['col1', 23399927],
+			['col2', 588691297],
+		]);
+	});
+
+	it('keeps one slice per group row for a single value column', () => {
+		const table = tableWith(
+			[
+				{
+					name: 'service.name',
+					queryName: 'A',
+					isValueColumn: false,
+					id: 'service.name',
+				},
+				{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
+			],
+			[
+				{ data: { 'service.name': 'adservice', A: 100 } },
+				{ data: { 'service.name': 'cartservice', A: 200 } },
+			],
+		);
+
+		const slices = preparePieData(args([table]));
+
+		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
+			['adservice', 100],
+			['cartservice', 200],
+		]);
+	});
+
+	it('prefixes the group when multiple value columns are grouped', () => {
+		const table = tableWith(
+			[
+				{ name: 'env', queryName: 'A', isValueColumn: false, id: 'env' },
+				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+			],
+			[{ data: { env: 'prod', col1: 10, col2: 20 } }],
+		);
+
+		const slices = preparePieData(args([table]));
+
+		expect(slices.map((s) => s.label)).toStrictEqual([
+			'prod · col1',
+			'prod · col2',
+		]);
+	});
+
+	it('falls back to legend/query name when a single value column has no group', () => {
+		const table = tableWith(
+			[{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' }],
+			[{ data: { A: 42 } }],
+			{ legend: 'requests' },
+		);
+
+		const slices = preparePieData(args([table]));
+
+		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
+			['requests', 42],
+		]);
+	});
+
+	it('honours customColors over the generated palette', () => {
+		const table = tableWith(
+			[
+				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+			],
+			[{ data: { col1: 10, col2: 20 } }],
+		);
+
+		const slices = preparePieData({
+			tables: [table],
+			isDarkMode: true,
+			customColors: { col1: '#ff0000' },
+		});
+
+		expect(slices[0].color).toBe('#ff0000');
+		expect(slices[1].color).not.toBe('#ff0000');
+	});
+
+	it('drops non-positive and non-numeric values', () => {
+		const table = tableWith(
+			[
+				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+				{ name: 'col3', queryName: 'A', isValueColumn: true, id: 'col3' },
+			],
+			[{ data: { col1: 5, col2: 0, col3: 'n/a' } }],
+		);
+
+		const slices = preparePieData(args([table]));
+
+		expect(slices.map((s) => s.label)).toStrictEqual(['col1']);
+	});
+
+	it('returns no slices for empty tables', () => {
+		expect(preparePieData(args([]))).toStrictEqual([]);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts

@@ -11,11 +11,7 @@ export interface PreparePieDataArgs {
 	isDarkMode: boolean;
 }
 
-/**
- * Turns the scalar tables of a V5 response into pie slices (one per group row):
- * value column → value, group column(s) → label. Colours honour `customColors`
- * then fall back to the deterministic palette; non-positive/non-numeric dropped.
- */
+/** One pie slice per (row × value column); column name labels slices when a query has several value columns. */
 export function preparePieData({
 	tables,
 	customColors,
@@ -27,26 +23,35 @@ export function preparePieData({
 
 	const slices: PieSlice[] = [];
 	tables.forEach((table) => {
-		const valueColumn = table.columns.find((column) => column.isValueColumn);
-		if (!valueColumn) {
+		const valueColumns = table.columns.filter((column) => column.isValueColumn);
+		if (valueColumns.length === 0) {
 			return;
 		}
-		const valueKey = valueColumn.id || valueColumn.name;
 		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
+		const hasMultipleValueColumns = valueColumns.length > 1;
 
 		table.rows.forEach((row) => {
-			const value = Number(row.data[valueKey]);
-			const label =
-				labelColumns
-					.map((column) => row.data[column.id || column.name])
-					.filter((part) => part != null)
-					.map(String)
-					.join(', ') ||
-				table.legend ||
-				table.queryName ||
-				'';
-			const color = customColors?.[label] ?? generateColor(label, colorMap);
-			slices.push({ label, value, color });
+			const groupLabel = labelColumns
+				.map((column) => row.data[column.id || column.name])
+				.filter((part) => part != null)
+				.map(String)
+				.join(', ');
+
+			valueColumns.forEach((column) => {
+				let label: string;
+				if (hasMultipleValueColumns) {
+					label = groupLabel ? `${groupLabel} · ${column.name}` : column.name;
+				} else {
+					label = groupLabel || table.legend || table.queryName || '';
+				}
+
+				const color = customColors?.[label] ?? generateColor(label, colorMap);
+				slices.push({
+					label,
+					value: Number(row.data[column.id || column.name]),
+					color,
+				});
+			});
 		});
 	});
 

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/utils/buildConfig.ts

@@ -108,7 +108,9 @@ function addSeries({
 	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
 	// a defined record (it dereferences keys without a guard).
 	const colorMapping = spec.legend?.customColors ?? {};
-	const spanGaps = resolveSpanGaps(chartAppearance?.spanGaps?.fillLessThan);
+	const spanGaps = chartAppearance?.spanGaps
+		? resolveSpanGaps(chartAppearance?.spanGaps)
+		: true;
 
 	const lineStyle = chartAppearance?.lineStyle
 		? LINE_STYLE_MAP[chartAppearance.lineStyle]

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/__tests__/resolvers.test.ts

@@ -1,22 +1,35 @@
 import { resolveSpanGaps } from '../resolvers';
 
 describe('resolveSpanGaps', () => {
-	it('spans all gaps (true) when unset', () => {
-		expect(resolveSpanGaps(undefined)).toBe(true);
-		expect(resolveSpanGaps('')).toBe(true);
-	});
-
-	it('parses a duration string into seconds', () => {
-		expect(resolveSpanGaps('5s')).toBe(5);
-		expect(resolveSpanGaps('10m')).toBe(600);
-		expect(resolveSpanGaps('1h')).toBe(3600);
+	it('parses a duration string into seconds when thresholding', () => {
+		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '5s' })).toBe(5);
+		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '10m' })).toBe(
+			600,
+		);
+		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '1h' })).toBe(
+			3600,
+		);
 	});
 
 	it('tolerates a bare seconds number (back-compat)', () => {
-		expect(resolveSpanGaps('600')).toBe(600);
+		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '600' })).toBe(
+			600,
+		);
 	});
 
 	it('falls back to true for unparseable input', () => {
-		expect(resolveSpanGaps('abc')).toBe(true);
+		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: 'abc' })).toBe(
+			true,
+		);
+	});
+
+	it('spans all gaps when fillOnlyBelow is explicitly false, ignoring any duration', () => {
+		expect(resolveSpanGaps({ fillOnlyBelow: false, fillLessThan: '5m' })).toBe(
+			true,
+		);
+	});
+
+	it('treats a duration with no fillOnlyBelow flag as a threshold (legacy panels)', () => {
+		expect(resolveSpanGaps({ fillLessThan: '5m' })).toBe(300);
 	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/resolvers.ts

@@ -2,6 +2,7 @@ import { rangeUtil } from '@grafana/data';
 import {
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesPrecisionOptionDTO,
+	type DashboardtypesSpanGapsDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
@@ -39,15 +40,14 @@ export function resolveDecimalPrecision(
 }
 
 /**
- * `spec.chartAppearance.spanGaps.fillLessThan` is a duration string on the wire
- * ("10m", "5s"). Empty/missing → span all gaps (default); otherwise forward the
- * threshold in seconds so uPlot only bridges short runs of nulls. Tolerates a
- * bare seconds number for back-compat.
+ * Resolves `spanGaps` to uPlot's value. `fillOnlyBelow: false` spans every gap regardless
+ * of `fillLessThan`; a duration with no flag still thresholds (panels predating the flag).
  */
 export function resolveSpanGaps(
-	fillLessThan: string | undefined,
+	spanGaps: DashboardtypesSpanGapsDTO,
 ): boolean | number {
-	if (!fillLessThan) {
+	const fillLessThan = spanGaps.fillLessThan;
+	if (spanGaps.fillOnlyBelow === false || !fillLessThan) {
 		return true;
 	}
 	const seconds = rangeUtil.isValidTimeSpan(fillLessThan)

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -41,10 +41,6 @@ function Panel({
 	isVisible,
 	panelActions,
 }: PanelProps): JSX.Element {
-	const name = panel.spec.display.name;
-	const description = panel.spec.display?.description;
-	const fullKind = panel.spec.plugin.kind;
-
 	// A per-panel time preference is surfaced as a header pill. `visualization` is
 	// common to every plugin-spec variant — localized cast reads it without
 	// narrowing on kind.
@@ -55,7 +51,8 @@ function Panel({
 	)?.visualization?.timePreference;
 	const timeLabel = panelTimePreferenceLabel(timePreference);
 
-	const panelDefinition = getPanelDefinition(fullKind);
+	const panelKind = panel.spec.plugin.kind;
+	const panelDefinition = getPanelDefinition(panelKind);
 
 	// Header search: only kinds that declare it render the box. The term is owned
 	// here and threaded to both the header (input) and renderer (filter).
@@ -77,10 +74,8 @@ function Panel({
 			data-panel-visible={isVisible ? 'true' : 'false'}
 		>
 			<PanelHeader
-				name={name}
-				description={description}
 				panelId={panelId}
-				panelKind={fullKind}
+				panel={panel}
 				isFetching={isFetching}
 				error={error}
 				warning={data.response?.data?.warning}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -1,17 +1,17 @@
 import { EllipsisVertical } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 
 import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import type { PanelActionsConfig } from '../Panel';
 import { usePanelActionItems } from './usePanelActionItems';
 import styles from './PanelActionsMenu.module.scss';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 interface PanelActionsMenuProps {
 	panelId: string;
-	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`);*/
-	panelKind: PanelKind;
+	/** The panel itself — its query seeds "Create Alerts". */
+	panel: DashboardtypesPanelDTO;
 	/** Layout context for move/delete — absent outside editable sectioned mode. */
 	panelActions?: PanelActionsConfig;
 }
@@ -23,12 +23,12 @@ interface PanelActionsMenuProps {
  */
 function PanelActionsMenu({
 	panelId,
-	panelKind,
+	panel,
 	panelActions,
 }: PanelActionsMenuProps): JSX.Element | null {
 	const { items, deleteConfirm } = usePanelActionItems({
 		panelId,
-		panelKind,
+		panel,
 		panelActions,
 	});
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/__tests__/usePanelActionItems.test.tsx

@@ -1,10 +1,10 @@
 import { act, renderHook } from '@testing-library/react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { ROLES } from 'types/roles';
 
 import type { DashboardSection } from '../../../../utils';
 import { useDashboardStore } from '../../../../store/useDashboardStore';
 import { usePanelActionItems } from '../usePanelActionItems';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 const mockOpenEditor = jest.fn();
 jest.mock(
@@ -29,6 +29,11 @@ jest.mock('../../hooks/useClonePanel', () => ({
 	useClonePanel: (): jest.Mock => mockClonePanel,
 }));
 
+const mockCreateAlert = jest.fn();
+jest.mock('../../hooks/useCreateAlertFromPanel', () => ({
+	useCreateAlertFromPanel: (): jest.Mock => mockCreateAlert,
+}));
+
 // Role is the only thing read off the app context; useComponentPermission runs
 // for real so the tests exercise the actual role → permission mapping.
 let mockRole: ROLES = 'ADMIN';
@@ -55,9 +60,20 @@ const TWO_TITLED_SECTIONS = [section(0, 'Overview'), section(1, 'Latency')];
 // Index 0 is the untitled root (free-flow) section; index 1 is a titled section.
 const TITLED_WITH_ROOT = [section(0, undefined), section(1, 'Latency')];
 
+// Minimal panel — only its presence gates "Create Alerts"; the query→URL
+// translation it drives is covered by buildCreateAlertUrl's own tests.
+const mockPanel = {
+	kind: 'Panel',
+	spec: {
+		display: { name: 'CPU' },
+		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+		queries: [],
+	},
+} as unknown as DashboardtypesPanelDTO;
+
 const baseArgs = {
 	panelId: 'panel-1',
-	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
+	panel: mockPanel,
 	panelActions: { currentLayoutIndex: 0, sections: TWO_TITLED_SECTIONS },
 };
 
@@ -115,29 +131,18 @@ describe('usePanelActionItems', () => {
 		]);
 	});
 
-	it('unknown panel kind hides all kind-gated actions (incl. clone), keeping only move/delete', () => {
-		const { result } = renderHook(() =>
-			// A kind with no registered definition — exercises the "unsupported kind"
-			// branch. Clone is kind-gated (needs the kind to declare actions.clone),
-			// so it drops too; only the kind-agnostic layout actions remain.
-			usePanelActionItems({
-				...baseArgs,
-				panelKind: 'signoz/UnsupportedPanel' as PanelKind,
-			}),
-		);
-		expect(itemKeys(result.current)).toStrictEqual([
-			'move',
-			'divider',
-			'delete-panel',
-		]);
-	});
-
-	it('read-only dashboard keeps only View (V1 parity)', () => {
+	it('read-only dashboard keeps View and Create Alerts (V1 parity: both survive a lock)', () => {
 		useDashboardStore.setState({ isEditable: false });
 		const { result } = renderHook(() =>
 			usePanelActionItems({ ...baseArgs, panelActions: undefined }),
 		);
-		expect(itemKeys(result.current)).toStrictEqual(['view-panel']);
+		// Create Alerts opens a new tab and never mutates the dashboard, so it
+		// isn't gated on edit access — matching V1's locked-dashboard menu.
+		expect(itemKeys(result.current)).toStrictEqual([
+			'view-panel',
+			'divider',
+			'create-alert',
+		]);
 	});
 
 	it('move is disabled when there is no other titled section to move to', () => {
@@ -259,18 +264,26 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('not-yet-implemented actions (view/create-alert) fire the placeholder alert with the feature name', () => {
+	it('not-yet-implemented actions (view) fire the placeholder alert with the feature name', () => {
 		const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
 
-		['view-panel', 'create-alert'].forEach((key) => {
-			const item = result.current.items.find((i) => 'key' in i && i.key === key);
-			(item as { onClick: () => void }).onClick();
-		});
+		const view = result.current.items.find(
+			(i) => 'key' in i && i.key === 'view-panel',
+		);
+		(view as { onClick: () => void }).onClick();
 
-		expect(alertSpy).toHaveBeenCalledTimes(2);
+		expect(alertSpy).toHaveBeenCalledTimes(1);
 		expect(alertSpy).toHaveBeenCalledWith('View option clicked');
-		expect(alertSpy).toHaveBeenCalledWith('Create Alerts option clicked');
 		alertSpy.mockRestore();
 	});
+
+	it('create-alert seeds an alert from this panel', () => {
+		const { result } = renderHook(() => usePanelActionItems(baseArgs));
+		const createAlert = result.current.items.find(
+			(i) => 'key' in i && i.key === 'create-alert',
+		);
+		(createAlert as { onClick: () => void }).onClick();
+		expect(mockCreateAlert).toHaveBeenCalledWith(mockPanel, 'panel-1');
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/usePanelActionItems.tsx

@@ -10,6 +10,7 @@ import {
 	Trash2,
 } from '@signozhq/icons';
 import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import useComponentPermission from 'hooks/useComponentPermission';
 import {
 	type ConfirmableAction,
@@ -23,13 +24,13 @@ import { useAppContext } from 'providers/App/App';
 import type { DashboardSection } from '../../../utils';
 import type { PanelActionsConfig } from '../Panel';
 import { useClonePanel } from '../hooks/useClonePanel';
+import { useCreateAlertFromPanel } from '../hooks/useCreateAlertFromPanel';
 import { useDeletePanel } from '../hooks/useDeletePanel';
 import {
 	type MovePanelArgs,
 	useMovePanelToSection,
 } from '../hooks/useMovePanelToSection';
 import { PANEL_ACTION_META } from './panelActionMeta';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 // Stable fallback so renders without layout context don't churn the mutation
 // hooks' deps (a fresh [] each render would re-create their callbacks).
@@ -103,8 +104,8 @@ function buildMoveItems({
 
 interface UsePanelActionItemsArgs {
 	panelId: string;
-	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`); */
-	panelKind: PanelKind;
+	/** The panel itself — its query seeds the "Create Alerts" action. */
+	panel: DashboardtypesPanelDTO;
 	/** Layout context for move/delete — absent outside editable mode. */
 	panelActions?: PanelActionsConfig;
 }
@@ -128,9 +129,10 @@ export interface PanelActionItems {
  */
 export function usePanelActionItems({
 	panelId,
-	panelKind,
+	panel,
 	panelActions,
 }: UsePanelActionItemsArgs): PanelActionItems {
+	const panelKind = panel.spec.plugin.kind;
 	const { user } = useAppContext();
 	const [canEditWidget, canMove, canDelete] = useComponentPermission(
 		[
@@ -143,6 +145,7 @@ export function usePanelActionItems({
 	);
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const openPanelEditor = useOpenPanelEditor();
+	const createAlert = useCreateAlertFromPanel();
 
 	// Mutations are store-backed (dashboardId/refetch) — the layout tree only
 	// supplies data (`sections`), so no callbacks are threaded through it.
@@ -151,7 +154,7 @@ export function usePanelActionItems({
 	const deletePanel = useDeletePanel({ sections });
 	const clonePanel = useClonePanel({ sections });
 
-	const kindActions = getPanelDefinition(panelKind)?.actions;
+	const panelCapabilities = getPanelDefinition(panelKind).actions;
 
 	// Delete runs on confirm, not on click — the menu item opens a prompt.
 	const deleteConfirm = useConfirmableAction(
@@ -170,7 +173,7 @@ export function usePanelActionItems({
 
 	const items = useMemo<MenuItem[]>(() => {
 		const panelGroup: MenuItem[] = [];
-		if (kindActions?.view) {
+		if (panelCapabilities.view) {
 			panelGroup.push({
 				key: 'view-panel',
 				label: 'View',
@@ -178,7 +181,7 @@ export function usePanelActionItems({
 				onClick: (): void => notImplementedYet('View'),
 			});
 		}
-		if (isEditable && canEditWidget && kindActions?.edit) {
+		if (isEditable && canEditWidget && panelCapabilities.edit) {
 			panelGroup.push({
 				key: 'edit-panel',
 				label: 'Edit panel',
@@ -188,7 +191,7 @@ export function usePanelActionItems({
 		}
 		// Clone needs the section context (source spec + dimensions) to place the
 		// copy, so — unlike Edit — it requires panelActions.
-		if (isEditable && canEditWidget && panelActions && kindActions?.clone) {
+		if (isEditable && canEditWidget && panelActions && panelCapabilities.clone) {
 			panelGroup.push({
 				key: 'clone-panel',
 				label: 'Clone',
@@ -202,7 +205,7 @@ export function usePanelActionItems({
 		}
 
 		const dataGroup: MenuItem[] = [];
-		if (kindActions?.download) {
+		if (panelCapabilities.download) {
 			dataGroup.push({
 				key: 'download-panel',
 				label: 'Download as CSV',
@@ -210,12 +213,15 @@ export function usePanelActionItems({
 				onClick: (): void => notImplementedYet('Download'),
 			});
 		}
-		if (isEditable && kindActions?.createAlert) {
+		// Seeding an alert opens a new tab and never mutates the dashboard, so —
+		// unlike edit/clone — it isn't gated on `isEditable` (V1 parity: available
+		// on locked dashboards too).
+		if (panelCapabilities.createAlert) {
 			dataGroup.push({
 				key: 'create-alert',
 				label: 'Create Alerts',
 				icon: <Bell size={14} />,
-				onClick: (): void => notImplementedYet('Create Alerts'),
+				onClick: (): void => createAlert(panel, panelId),
 			});
 		}
 
@@ -252,11 +258,13 @@ export function usePanelActionItems({
 		canEditWidget,
 		canMove,
 		canDelete,
-		kindActions,
+		panelCapabilities,
+		panel,
 		panelActions,
 		sections,
 		panelId,
 		openPanelEditor,
+		createAlert,
 		movePanel,
 		clonePanel,
 		requestDelete,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.tsx

@@ -1,7 +1,10 @@
 import { useMemo } from 'react';
 import { Info, Loader } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
-import type { Querybuildertypesv5QueryWarnDataDTO as WarningDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesPanelDTO,
+	Querybuildertypesv5QueryWarnDataDTO as WarningDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import type { PanelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
 
@@ -14,15 +17,12 @@ import {
 	panelStatusFromWarning,
 } from '../PanelStatus/utils';
 import styles from './PanelHeader.module.scss';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface PanelHeaderProps {
-	name: string;
-	description?: string;
 	panelId: string;
-	/** Full plugin kind — drives kind-gated menu actions. */
-	panelKind: PanelKind;
+	/** The panel itself — its query seeds the menu's "Create Alerts" action. */
+	panel: DashboardtypesPanelDTO;
 	/** Background refresh in flight — shows a spinner without blinking the chart. */
 	isFetching: boolean;
 	/** Latest query error — surfaced as a header error indicator. */
@@ -49,10 +49,8 @@ interface PanelHeaderProps {
 
 /** Panel chrome: drag handle, title, refetch + status indicators, actions. */
 function PanelHeader({
-	name,
-	description,
 	panelId,
-	panelKind,
+	panel,
 	isFetching,
 	error,
 	warning,
@@ -63,6 +61,8 @@ function PanelHeader({
 	onSearchChange,
 	hideActions,
 }: PanelHeaderProps): JSX.Element {
+	const name = panel.spec.display.name;
+	const description = panel.spec.display.description;
 	const errorDetail = useMemo(() => panelStatusFromError(error), [error]);
 
 	const warningDetail = useMemo(
@@ -116,7 +116,7 @@ function PanelHeader({
 				{!hideActions && (
 					<PanelActionsMenu
 						panelId={panelId}
-						panelKind={panelKind}
+						panel={panel}
 						panelActions={panelActions}
 					/>
 				)}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/PanelHeader.test.tsx

@@ -1,11 +1,11 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { ReactElement } from 'react';
 import type { Warning } from 'types/api';
 
 import PanelHeader from '../PanelHeader/PanelHeader';
-import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
 // Status indicators use a radix tooltip, which needs a TooltipProvider ancestor
 // (supplied globally by AppLayout at runtime).
@@ -22,9 +22,26 @@ jest.mock(
 		},
 );
 
+// The header reads its name/description/kind off the panel itself.
+function makePanel(overrides?: {
+	name?: string;
+	description?: string;
+}): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: {
+				name: overrides?.name ?? 'My panel',
+				description: overrides?.description,
+			},
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
 const baseProps = {
-	name: 'My panel',
-	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
+	panel: makePanel(),
 	panelId: 'panel-1',
 	isFetching: false,
 };
@@ -44,7 +61,10 @@ describe('PanelHeader title and description', () => {
 
 	it('shows the description info icon when a description is provided', () => {
 		renderWithProvider(
-			<PanelHeader {...baseProps} description="What this panel measures" />,
+			<PanelHeader
+				{...baseProps}
+				panel={makePanel({ description: 'What this panel measures' })}
+			/>,
 		);
 		expect(screen.getByTestId('panel-header-info-icon')).toBeInTheDocument();
 	});