feat(dashboards-v2): switch panel visualization type in the editor

Wire the panel-type switcher into the config pane: every kind now declares a `visualization` section (with `switchPanelKind`) so the switcher is reachable from any panel, VisualizationSection renders it, and ConfigPane threads the current kind/signal and an onChange down through SectionSlot. The editor drives the in-place kind switch via usePanelTypeSwitch, so switching is reversible within an edit session and a first visit rebuilds the query + resets the spec (carrying unit/decimals).
feat(dashboards-v2): add the PanelTypeSwitcher control
2026-06-25 17:40:32 +01:00 · 2026-06-25 16:34:47 +05:30 · 2026-06-25 16:34:47 +05:30 · 2026-06-25 16:34:47 +05:30 · 2026-06-25 16:25:40 +05:30 · 2026-06-25 15:43:35 +05:30
131 changed files with 2669 additions and 4861 deletions
--- a/cmd/community/server.go
+++ b/cmd/community/server.go
@@ -29,8 +29,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule/implmetricreductionrule"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -121,9 +119,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ sqlstore.SQLStore, _ dashboard.Module, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
 			return implcloudintegration.NewModule(), nil
 		},
-		func(_ sqlstore.SQLStore, _ telemetrystore.TelemetryStore, _ dashboard.Module, _ queryparser.QueryParser, _ licensing.Licensing, _ flagger.Flagger, _ telemetrytypes.MetadataStore, _ factory.ProviderSettings, _ int) metricreductionrule.Module {
-			return implmetricreductionrule.NewModule()
-		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
 			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, nil, nil))
 		},
--- a/cmd/enterprise/server.go
+++ b/cmd/enterprise/server.go
@@ -24,7 +24,6 @@ import (
 	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration/implcloudprovider"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
-	eeimplmetricreductionrule "github.com/SigNoz/signoz/ee/modules/metricreductionrule/implmetricreductionrule"
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	eerules "github.com/SigNoz/signoz/ee/query-service/rules"
@@ -47,7 +46,6 @@ import (
 	pkgcloudintegration "github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
 	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
@@ -184,9 +182,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e

 			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), dashboardModule, global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
 		},
-		func(sqlStore sqlstore.SQLStore, ts telemetrystore.TelemetryStore, dashboardModule dashboard.Module, queryParser queryparser.QueryParser, lic licensing.Licensing, flgr pkgflagger.Flagger, ms telemetrytypes.MetadataStore, ps factory.ProviderSettings, threads int) metricreductionrule.Module {
-			return eeimplmetricreductionrule.NewModule(sqlStore, ts, dashboardModule, queryParser, lic, flgr, ms, ps, threads)
-		},
 		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
 			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, eerules.PrepareTaskFunc, eerules.TestNotification))
 		},
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -5138,221 +5138,6 @@ components:
      required:
      - rules
      type: object
-    MetricreductionruletypesAffectedAsset:
-      properties:
-        id:
-          type: string
-        impactedLabels:
-          items:
-            type: string
-          nullable: true
-          type: array
-        name:
-          type: string
-        type:
-          $ref: '#/components/schemas/MetricreductionruletypesAssetType'
-        widget:
-          $ref: '#/components/schemas/MetricreductionruletypesAffectedWidget'
-      required:
-      - type
-      - id
-      - name
-      - impactedLabels
-      type: object
-    MetricreductionruletypesAffectedWidget:
-      properties:
-        id:
-          type: string
-        name:
-          type: string
-      required:
-      - id
-      - name
-      type: object
-    MetricreductionruletypesAssetType:
-      enum:
-      - dashboard
-      - alert_rule
-      type: string
-    MetricreductionruletypesGettableReductionRule:
-      properties:
-        active:
-          type: boolean
-        createdAt:
-          format: date-time
-          type: string
-        createdBy:
-          type: string
-        effectiveFrom:
-          format: date-time
-          type: string
-        id:
-          type: string
-        ingestedSeries:
-          minimum: 0
-          type: integer
-        labels:
-          items:
-            type: string
-          nullable: true
-          type: array
-        matchType:
-          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
-        metricName:
-          type: string
-        reductionPercent:
-          format: double
-          type: number
-        retainedSeries:
-          minimum: 0
-          type: integer
-        updatedAt:
-          format: date-time
-          type: string
-        updatedBy:
-          type: string
-      required:
-      - id
-      - metricName
-      - matchType
-      - labels
-      - effectiveFrom
-      - active
-      - ingestedSeries
-      - retainedSeries
-      - reductionPercent
-      type: object
-    MetricreductionruletypesGettableReductionRulePreview:
-      properties:
-        affectedAssets:
-          items:
-            $ref: '#/components/schemas/MetricreductionruletypesAffectedAsset'
-          nullable: true
-          type: array
-        currentRetainedSeries:
-          minimum: 0
-          type: integer
-        droppedLabels:
-          items:
-            type: string
-          nullable: true
-          type: array
-        effectiveFrom:
-          format: date-time
-          type: string
-        ingestedSeries:
-          minimum: 0
-          type: integer
-        reductionPercent:
-          format: double
-          type: number
-        retainedSeries:
-          minimum: 0
-          type: integer
-      required:
-      - ingestedSeries
-      - currentRetainedSeries
-      - retainedSeries
-      - reductionPercent
-      - droppedLabels
-      - affectedAssets
-      - effectiveFrom
-      type: object
-    MetricreductionruletypesGettableReductionRuleStats:
-      properties:
-        estimatedMonthlySavingsUsd:
-          format: double
-          type: number
-        ingestedSeries:
-          minimum: 0
-          type: integer
-        retainedSeries:
-          minimum: 0
-          type: integer
-      required:
-      - ingestedSeries
-      - retainedSeries
-      - estimatedMonthlySavingsUsd
-      type: object
-    MetricreductionruletypesGettableReductionRules:
-      properties:
-        rules:
-          items:
-            $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
-          nullable: true
-          type: array
-        total:
-          type: integer
-      required:
-      - rules
-      - total
-      type: object
-    MetricreductionruletypesMatchType:
-      enum:
-      - drop
-      - keep
-      type: string
-    MetricreductionruletypesOrder:
-      enum:
-      - asc
-      - desc
-      type: string
-    MetricreductionruletypesPostableReductionRule:
-      properties:
-        labels:
-          items:
-            type: string
-          nullable: true
-          type: array
-        matchType:
-          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
-        metricName:
-          type: string
-      required:
-      - metricName
-      - matchType
-      - labels
-      type: object
-    MetricreductionruletypesPostableReductionRulePreview:
-      properties:
-        labels:
-          items:
-            type: string
-          nullable: true
-          type: array
-        lookbackMs:
-          format: int64
-          type: integer
-        matchType:
-          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
-        metricName:
-          type: string
-      required:
-      - metricName
-      - matchType
-      - labels
-      type: object
-    MetricreductionruletypesReductionRuleOrderBy:
-      enum:
-      - metric
-      - ingested_volume
-      - reduced_volume
-      - reduction
-      - last_updated
-      type: string
-    MetricreductionruletypesUpdatableReductionRule:
-      properties:
-        labels:
-          items:
-            type: string
-          nullable: true
-          type: array
-        matchType:
-          $ref: '#/components/schemas/MetricreductionruletypesMatchType'
-      required:
-      - matchType
-      - labels
-      type: object
    MetricsexplorertypesInspectMetricsRequest:
      properties:
        end:
@@ -15839,566 +15624,6 @@ paths:
      summary: Liveness check
      tags:
      - health
-  /api/v2/metric_reduction_rules:
-    get:
-      deprecated: false
-      description: Returns active metric volume-control (label reduction) rules.
-      operationId: ListMetricReductionRules
-      parameters:
-      - in: query
-        name: orderBy
-        schema:
-          $ref: '#/components/schemas/MetricreductionruletypesReductionRuleOrderBy'
-      - in: query
-        name: order
-        schema:
-          $ref: '#/components/schemas/MetricreductionruletypesOrder'
-      - in: query
-        name: search
-        schema:
-          type: string
-      - in: query
-        name: metricName
-        schema:
-          type: string
-      - in: query
-        name: offset
-        schema:
-          type: integer
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRules'
-                  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
-        "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:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List metric reduction rules
-      tags:
-      - metrics
-    post:
-      deprecated: false
-      description: Creates a volume-control rule for a metric and returns it with
-        its id; fails if the metric already has a rule.
-      operationId: CreateMetricReductionRule
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/MetricreductionruletypesPostableReductionRule'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "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
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create a metric reduction rule
-      tags:
-      - metrics
-  /api/v2/metric_reduction_rules/{id}:
-    delete:
-      deprecated: false
-      description: Deletes a volume-control rule by its id.
-      operationId: DeleteMetricReductionRuleByID
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Delete a metric reduction rule by id
-      tags:
-      - metrics
-    get:
-      deprecated: false
-      description: Returns a single volume-control rule by its id.
-      operationId: GetMetricReductionRuleByID
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
-                  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:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get a metric reduction rule by id
-      tags:
-      - metrics
-    put:
-      deprecated: false
-      description: Updates the match type and labels of a volume-control rule by its
-        id; the metric name is immutable.
-      operationId: UpdateMetricReductionRuleByID
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/MetricreductionruletypesUpdatableReductionRule'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRule'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Update a metric reduction rule by id
-      tags:
-      - metrics
-  /api/v2/metric_reduction_rules/preview:
-    post:
-      deprecated: false
-      description: Estimates the series reduction and related-asset impact of a candidate
-        volume-control rule without persisting it.
-      operationId: PreviewMetricReductionRule
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/MetricreductionruletypesPostableReductionRulePreview'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRulePreview'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Preview a metric reduction rule
-      tags:
-      - metrics
-  /api/v2/metric_reduction_rules/stats:
-    get:
-      deprecated: false
-      description: Returns total ingested vs retained series and the estimated monthly
-        savings across all volume-control rules.
-      operationId: GetMetricReductionRuleStats
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/MetricreductionruletypesGettableReductionRuleStats'
-                  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
-        "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:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Metric reduction stats
-      tags:
-      - metrics
-  /api/v2/metric_reduction_rules/timeseries:
-    get:
-      deprecated: false
-      description: Returns ingested vs retained series over time across all volume-control
-        rules (hourly buckets), in the query-range time-series response shape.
-      operationId: GetMetricReductionRuleTimeseries
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
-                  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
-        "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:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Metric reduction volume over time
-      tags:
-      - metrics
  /api/v2/metrics:
    get:
      deprecated: false
--- a/ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go
+++ b/ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go
@@ -1,543 +0,0 @@
-package implmetricreductionrule
-
-import (
-	"context"
-	"slices"
-	"time"
-
-	sqlbuilder "github.com/huandu/go-sqlbuilder"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
-	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
-)
-
-var (
-	reductionRulesTable = telemetrymetrics.DBName + "." + telemetrymetrics.ReductionRulesTableName
-	metadataTable       = telemetrymetrics.DBName + "." + telemetrymetrics.AttributesMetadataTableName
-	bufferSeriesTable   = telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4BufferTableName
-)
-
-const (
-	timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
-	sampleBucketMilli     = int64(60 * time.Second / time.Millisecond)
-)
-
-type volumeRow struct {
-	MetricName string
-	Ingested   uint64
-	Reduced    uint64
-}
-
-type volumePoint struct {
-	TimestampMs int64
-	Ingested    uint64
-	Reduced     uint64
-}
-
-type clickhouse struct {
-	telemetryStore telemetrystore.TelemetryStore
-	threads        int
-}
-
-func newClickhouse(telemetryStore telemetrystore.TelemetryStore, threads int) *clickhouse {
-	return &clickhouse{telemetryStore: telemetryStore, threads: threads}
-}
-
-func (c *clickhouse) withThreads(ctx context.Context) context.Context {
-	return ctxtypes.SetClickhouseMaxThreads(ctx, c.threads)
-}
-
-func floorToTimeSeriesBucket(ms int64) int64 {
-	return ms - (ms % timeSeriesBucketMilli)
-}
-
-func strictEffectiveFrom(sb *sqlbuilder.SelectBuilder, metricNames []string, effectiveFrom map[string]int64) string {
-	names := make([]any, 0, len(metricNames))
-	froms := make([]any, 0, len(metricNames))
-	for _, name := range metricNames {
-		names = append(names, name)
-		froms = append(froms, effectiveFrom[name])
-	}
-	return "unix_milli >= transform(metric_name, " + sb.Var(names) + ", " + sb.Var(froms) + ", 0)"
-}
-
-func (c *clickhouse) Sync(ctx context.Context, metricName string, labels []string, matchType string, effectiveFromMs int64, deleted bool, updatedAt time.Time) error {
-	ctx = c.withThreads(ctx)
-
-	ib := sqlbuilder.NewInsertBuilder()
-	ib.InsertInto(reductionRulesTable)
-	ib.Cols("metric_name", "labels", "match_type", "effective_from_unix_milli", "deleted", "updated_at")
-	ib.Values(metricName, labels, matchType, effectiveFromMs, deleted, updatedAt)
-
-	query, args := ib.BuildWithFlavor(sqlbuilder.ClickHouse)
-	if err := c.telemetryStore.ClickhouseDB().Exec(ctx, query, args...); err != nil {
-		return errors.WrapInternalf(err, errors.CodeInternal, "failed to sync reduction rule to clickhouse")
-	}
-	return nil
-}
-
-func (c *clickhouse) AttributeKeys(ctx context.Context, metricName string, startMs, endMs int64) ([]string, error) {
-	ctx = c.withThreads(ctx)
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("attr_name")
-	sb.Distinct()
-	sb.From(metadataTable)
-	sb.Where(
-		sb.E("metric_name", metricName),
-		"NOT startsWith(attr_name, '__')",
-		sb.GE("last_reported_unix_milli", startMs),
-		sb.LE("first_reported_unix_milli", endMs),
-	)
-
-	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 fetch metric attribute keys")
-	}
-	defer rows.Close()
-
-	keys := make([]string, 0)
-	for rows.Next() {
-		var key string
-		if err := rows.Scan(&key); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan attribute key")
-		}
-		keys = append(keys, key)
-	}
-	return keys, rows.Err()
-}
-
-func (c *clickhouse) EstimateCardinality(ctx context.Context, metricName string, keptLabels []string, startMs, endMs int64) (uint64, uint64, error) {
-	ctx = c.withThreads(ctx)
-	startMs = floorToTimeSeriesBucket(startMs)
-
-	sb := sqlbuilder.NewSelectBuilder()
-
-	reducedExpr := "1"
-	if len(keptLabels) > 0 {
-		reducedExpr = "uniq(("
-		for i, label := range keptLabels {
-			if i > 0 {
-				reducedExpr += ", "
-			}
-			reducedExpr += "JSONExtractString(labels, " + sb.Var(label) + ")"
-		}
-		reducedExpr += "))"
-	}
-
-	sb.Select("uniq(fingerprint)", reducedExpr)
-	sb.From(bufferSeriesTable)
-	conds := []string{
-		sb.E("metric_name", metricName),
-		sb.GE("unix_milli", startMs),
-		sb.LT("unix_milli", endMs),
-		sb.E("is_reduced", false),
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var current, reduced uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&current, &reduced); err != nil {
-		return 0, 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to estimate reduction impact")
-	}
-	if len(keptLabels) == 0 && current == 0 {
-		reduced = 0
-	}
-	if reduced > current {
-		reduced = current
-	}
-	return current, reduced, nil
-}
-
-// VolumeByMetric returns ingested vs reduced series counts per metric.
-func (c *clickhouse) VolumeByMetric(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]volumeRow, error) {
-	if len(metricNames) == 0 {
-		return map[string]volumeRow{}, nil
-	}
-	ctx = c.withThreads(ctx)
-
-	ingested, err := c.ingestedSeriesCount(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	reduced, err := c.reducedSeriesCount(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	out := make(map[string]volumeRow, len(metricNames))
-	for metricName, count := range ingested {
-		out[metricName] = volumeRow{MetricName: metricName, Ingested: count, Reduced: out[metricName].Reduced}
-	}
-	for metricName, count := range reduced {
-		row := out[metricName]
-		row.MetricName = metricName
-		row.Reduced = count
-		out[metricName] = row
-	}
-	return out, nil
-}
-
-// ingestedSeriesCount counts distinct raw fingerprints per metric from the samples buffer over the
-// window.
-func (c *clickhouse) ingestedSeriesCount(ctx context.Context, 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", "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("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 ingested series")
-	}
-	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()
-}
-
-// reducedSeriesCount counts distinct reduced_fingerprints per metric, summed across the two 60s
-// reduced sample tables.
-func (c *clickhouse) reducedSeriesCount(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
-	out := make(map[string]uint64, len(metricNames))
-	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
-		counts, err := c.reducedSeriesCountForTable(ctx, telemetrymetrics.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
-		if err != nil {
-			return nil, err
-		}
-		for metricName, count := range counts {
-			out[metricName] += count
-		}
-	}
-	return out, nil
-}
-
-func (c *clickhouse) reducedSeriesCountForTable(ctx context.Context, table 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", "uniq(reduced_fingerprint)")
-	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 reduced series")
-	}
-	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()
-}
-
-// RankByVolume ranks metrics by ingested/reduced series volume. Like VolumeByMetric, the counts read
-// the samples tables with a strict effective_from gate; the reduced count sums distinct
-// reduced_fingerprints across the two 60s reduced sample tables.
-func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, orderBy metricreductionruletypes.ReductionRuleOrderBy, order metricreductionruletypes.Order, startMs, endMs int64, offset, limit int) ([]volumeRow, error) {
-	if len(metricNames) == 0 {
-		return []volumeRow{}, nil
-	}
-	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))"
-	}
-	direction := "ASC"
-	if order == metricreductionruletypes.OrderDesc {
-		direction = "DESC"
-	}
-
-	ingestedTable := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName
-	reducedLast := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedLastTableName
-	reducedSum := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedSumTableName
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("base.metric_name AS metric_name", "ifNull(i.cnt, 0) AS ingested", "ifNull(d.cnt, 0) AS reduced")
-	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",
-		"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"+
-			" 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"+
-			") GROUP BY metric_name) AS d",
-		"base.metric_name = d.metric_name",
-	)
-	sb.OrderBy(orderExpr + " " + direction)
-	if limit > 0 {
-		sb.Limit(limit).Offset(offset)
-	}
-
-	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 rank reduction rules by volume")
-	}
-	defer rows.Close()
-
-	out := make([]volumeRow, 0, len(metricNames))
-	for rows.Next() {
-		var row volumeRow
-		if err := rows.Scan(&row.MetricName, &row.Ingested, &row.Reduced); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan volume row")
-		}
-		out = append(out, row)
-	}
-	return out, rows.Err()
-}
-
-func (c *clickhouse) SampleVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, uint64, error) {
-	if len(metricNames) == 0 {
-		return 0, 0, 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, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) ([]volumePoint, error) {
-	if len(metricNames) == 0 {
-		return []volumePoint{}, nil
-	}
-	ctx = c.withThreads(ctx)
-
-	ingested, err := c.ingestedSeriesByBucket(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	reduced, err := c.reducedSeriesByBucket(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	return mergeVolumePoints(ingested, reduced), nil
-}
-
-func mergeVolumePoints(ingested, reduced map[int64]uint64) []volumePoint {
-	buckets := make(map[int64]struct{}, len(ingested))
-	for ts := range ingested {
-		buckets[ts] = struct{}{}
-	}
-	for ts := range reduced {
-		buckets[ts] = struct{}{}
-	}
-	timestamps := make([]int64, 0, len(buckets))
-	for ts := range buckets {
-		timestamps = append(timestamps, ts)
-	}
-	slices.Sort(timestamps)
-
-	points := make([]volumePoint, 0, len(timestamps))
-	for _, ts := range timestamps {
-		points = append(points, volumePoint{
-			TimestampMs: ts,
-			Ingested:    ingested[ts],
-			Reduced:     reduced[ts],
-		})
-	}
-	return points
-}
-
-// ingestedSeriesByBucket counts distinct raw fingerprints per 60s 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 := "intDiv(unix_milli, " + sb.Var(sampleBucketMilli) + ") * " + sb.Var(sampleBucketMilli) + " 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 60s 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 := "intDiv(unix_milli, " + sb.Var(sampleBucketMilli) + ") * " + sb.Var(sampleBucketMilli) + " 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...)
-	if err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to bucket series by time")
-	}
-	defer rows.Close()
-
-	out := make(map[int64]uint64)
-	for rows.Next() {
-		var (
-			ts    int64
-			count uint64
-		)
-		if err := rows.Scan(&ts, &count); err != nil {
-			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series bucket")
-		}
-		out[ts] = count
-	}
-	return out, rows.Err()
-}
--- a/ee/modules/metricreductionrule/implmetricreductionrule/module.go
+++ b/ee/modules/metricreductionrule/implmetricreductionrule/module.go
@@ -1,544 +0,0 @@
-package implmetricreductionrule
-
-import (
-	"context"
-	"log/slog"
-	"sort"
-	"strings"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/flagger"
-	"github.com/SigNoz/signoz/pkg/licensing"
-	"github.com/SigNoz/signoz/pkg/modules/dashboard"
-	"github.com/SigNoz/signoz/pkg/modules/metricreductionrule"
-	"github.com/SigNoz/signoz/pkg/queryparser"
-	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/types/featuretypes"
-	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
-	"github.com/SigNoz/signoz/pkg/types/metrictypes"
-	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-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
-
-	pricePerMillionSamplesUSD = 0.1
-	monthDuration             = 30 * 24 * time.Hour
-)
-
-type module struct {
-	store         metricreductionruletypes.Store
-	ch            *clickhouse
-	dashboard     dashboard.Module
-	ruleStore     ruletypes.RuleStore
-	licensing     licensing.Licensing
-	flagger       flagger.Flagger
-	metadataStore telemetrytypes.MetadataStore
-	logger        *slog.Logger
-}
-
-func NewModule(sqlStore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, dashboardModule dashboard.Module, queryParser queryparser.QueryParser, licensing licensing.Licensing, flagger flagger.Flagger, metadataStore telemetrytypes.MetadataStore, providerSettings factory.ProviderSettings, threads int) metricreductionrule.Module {
-	scoped := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/ee/modules/metricreductionrule/implmetricreductionrule")
-	return &module{
-		store:         NewStore(sqlStore),
-		ch:            newClickhouse(telemetryStore, threads),
-		dashboard:     dashboardModule,
-		ruleStore:     sqlrulestore.NewRuleStore(sqlStore, queryParser, providerSettings),
-		licensing:     licensing,
-		flagger:       flagger,
-		metadataStore: metadataStore,
-		logger:        scoped.Logger(),
-	}
-}
-
-func (m *module) checkAccess(ctx context.Context, orgID valuer.UUID) error {
-	if !m.flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, featuretypes.NewFlaggerEvaluationContext(orgID)) {
-		return errors.Newf(errors.TypeUnsupported, metricreductionruletypes.ErrCodeMetricReductionRuleUnsupported, "metric volume control is not enabled")
-	}
-	if _, err := m.licensing.GetActive(ctx, orgID); err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "metric volume control requires a valid license").WithAdditional(err.Error())
-	}
-	return nil
-}
-
-func (m *module) List(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams) (*metricreductionruletypes.GettableReductionRules, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	if err := params.Validate(); err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
-	endMs := now.UnixMilli()
-
-	switch params.OrderBy {
-	case metricreductionruletypes.OrderByMetricName, metricreductionruletypes.OrderByLastUpdated:
-		return m.listSortedByColumn(ctx, orgID, params, startMs, endMs)
-	default:
-		return m.listSortedByVolume(ctx, orgID, params, startMs, endMs)
-	}
-}
-
-func (m *module) listSortedByColumn(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams, startMs, endMs int64) (*metricreductionruletypes.GettableReductionRules, error) {
-	domainRules, total, err := m.store.List(ctx, orgID, params)
-	if err != nil {
-		return nil, err
-	}
-
-	metricNames := make([]string, len(domainRules))
-	effectiveFrom := make(map[string]int64, len(domainRules))
-	for i, rule := range domainRules {
-		metricNames[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-	}
-	volumes, err := m.ch.VolumeByMetric(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]))
-	}
-
-	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
-}
-
-func (m *module) listSortedByVolume(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams, startMs, endMs int64) (*metricreductionruletypes.GettableReductionRules, error) {
-	allRules, total, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{Search: params.Search, MetricName: params.MetricName})
-	if err != nil {
-		return nil, err
-	}
-	if total == 0 {
-		return &metricreductionruletypes.GettableReductionRules{Rules: []metricreductionruletypes.GettableReductionRule{}, Total: 0}, nil
-	}
-
-	metricNames := make([]string, len(allRules))
-	effectiveFrom := make(map[string]int64, len(allRules))
-	ruleByMetric := make(map[string]*metricreductionruletypes.ReductionRule, len(allRules))
-	for i, rule := range allRules {
-		metricNames[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-		ruleByMetric[rule.MetricName] = rule
-	}
-
-	ranked, err := m.ch.RankByVolume(ctx, metricNames, effectiveFrom, params.OrderBy, params.Order, startMs, endMs, params.Offset, params.Limit)
-	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))
-	}
-
-	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
-}
-
-func (m *module) Create(ctx context.Context, orgID valuer.UUID, userEmail string, req *metricreductionruletypes.PostableReductionRule) (*metricreductionruletypes.GettableReductionRule, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	if err := req.Validate(); err != nil {
-		return nil, err
-	}
-	if err := m.validateMetricForReduction(ctx, orgID, req.MetricName); err != nil {
-		return nil, err
-	}
-	now := time.Now()
-	rule := metricreductionruletypes.NewReductionRule(orgID, req.MetricName, req.MatchType, req.Labels, now.Add(effectiveFromMargin), userEmail)
-
-	if err := m.store.RunInTx(ctx, func(ctx context.Context) error {
-		if err := m.store.Create(ctx, rule); err != nil {
-			return err
-		}
-		return m.ch.Sync(ctx, rule.MetricName, rule.Labels, rule.MatchType.StringValue(), rule.EffectiveFrom.UnixMilli(), false, rule.UpdatedAt)
-	}); err != nil {
-		return nil, err
-	}
-
-	gettable := toGettableReductionRule(rule)
-	return &gettable, nil
-}
-
-func (m *module) GetByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*metricreductionruletypes.GettableReductionRule, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	rule, err := m.store.GetByID(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-	gettable := toGettableReductionRule(rule)
-	return &gettable, nil
-}
-
-func (m *module) UpdateByID(ctx context.Context, orgID valuer.UUID, userEmail string, id valuer.UUID, req *metricreductionruletypes.UpdatableReductionRule) (*metricreductionruletypes.GettableReductionRule, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	existing, err := m.store.GetByID(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-	if err := req.Validate(); err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	existing.MatchType = req.MatchType
-	existing.Labels = metricreductionruletypes.LabelList(req.Labels)
-	existing.EffectiveFrom = now.Add(effectiveFromMargin)
-	existing.UpdatedAt = now
-	existing.UpdatedBy = userEmail
-
-	if err := m.store.RunInTx(ctx, func(ctx context.Context) error {
-		if err := m.store.Upsert(ctx, existing); err != nil {
-			return err
-		}
-		return m.ch.Sync(ctx, existing.MetricName, existing.Labels, existing.MatchType.StringValue(), existing.EffectiveFrom.UnixMilli(), false, existing.UpdatedAt)
-	}); err != nil {
-		return nil, err
-	}
-
-	gettable := toGettableReductionRule(existing)
-	return &gettable, nil
-}
-
-func (m *module) DeleteByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return err
-	}
-	rule, err := m.store.GetByID(ctx, orgID, id)
-	if err != nil {
-		return err
-	}
-
-	now := time.Now()
-	effectiveFromMs := now.Add(effectiveFromMargin).UnixMilli()
-	return m.store.RunInTx(ctx, func(ctx context.Context) error {
-		if err := m.store.DeleteByID(ctx, orgID, id); err != nil {
-			return err
-		}
-		return m.ch.Sync(ctx, rule.MetricName, []string{}, metricreductionruletypes.MatchTypeDrop.StringValue(), effectiveFromMs, true, now)
-	})
-}
-
-func (m *module) Preview(ctx context.Context, orgID valuer.UUID, req *metricreductionruletypes.PostableReductionRulePreview) (*metricreductionruletypes.GettableReductionRulePreview, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-	if err := req.Validate(); err != nil {
-		return nil, err
-	}
-	if err := m.validateMetricForReduction(ctx, orgID, req.MetricName); err != nil {
-		return nil, err
-	}
-	lookback := time.Duration(req.LookbackMs) * time.Millisecond
-	if lookback <= 0 {
-		lookback = defaultPreviewLookback
-	}
-	now := time.Now()
-	startMs := now.Add(-lookback).UnixMilli()
-	endMs := now.UnixMilli()
-	current, reduced, reductionPercent, dropped, err := m.estimateVolume(ctx, req.MetricName, req.MatchType, req.Labels, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	// Baseline is what the metric keeps today (its current rule, or raw if none) so the preview reads
-	// as current -> proposed.
-	currentReduced := current
-	if existing, gerr := m.store.Get(ctx, orgID, req.MetricName); gerr == nil {
-		if _, existingReduced, _, _, eerr := m.estimateVolume(ctx, req.MetricName, existing.MatchType, existing.Labels, startMs, endMs); eerr == nil {
-			currentReduced = existingReduced
-		}
-	}
-
-	return &metricreductionruletypes.GettableReductionRulePreview{
-		IngestedSeries:        current,
-		CurrentRetainedSeries: currentReduced,
-		RetainedSeries:        reduced,
-		ReductionPercent:      reductionPercent,
-		DroppedLabels:         dropped,
-		AffectedAssets:        m.relatedAssetImpact(ctx, orgID, req.MetricName, dropped),
-		EffectiveFrom:         now.Add(effectiveFromMargin),
-	}, nil
-}
-
-func (m *module) Stats(ctx context.Context, orgID valuer.UUID) (*metricreductionruletypes.GettableReductionRuleStats, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
-	endMs := now.UnixMilli()
-
-	allRules, total, 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[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-	}
-
-	volumes, err := m.ch.VolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-	var ingestedSeries, reducedSeries uint64
-	for _, volume := range volumes {
-		ingestedSeries += volume.Ingested
-		reducedSeries += volume.Reduced
-	}
-
-	ingestedSamples, reducedSamples, err := m.ch.SampleVolume(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	return &metricreductionruletypes.GettableReductionRuleStats{
-		IngestedSeries:             ingestedSeries,
-		RetainedSeries:             reducedSeries,
-		EstimatedMonthlySavingsUsd: monthlySavingsUSD(ingestedSamples, reducedSamples, startMs, endMs),
-	}, nil
-}
-
-// 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 {
-	if reducedSamples >= ingestedSamples || endMs <= startMs {
-		return 0
-	}
-	savedSamples := float64(ingestedSamples - reducedSamples)
-	monthlySamples := savedSamples * float64(monthDuration.Milliseconds()) / float64(endMs-startMs)
-	return monthlySamples / 1_000_000 * pricePerMillionSamplesUSD
-}
-
-func (m *module) Timeseries(ctx context.Context, orgID valuer.UUID) (*querybuildertypesv5.QueryRangeResponse, error) {
-	if err := m.checkAccess(ctx, orgID); err != nil {
-		return nil, err
-	}
-
-	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
-	endMs := now.UnixMilli()
-
-	allRules, _, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
-	if err != nil {
-		return nil, err
-	}
-	metricNames := make([]string, len(allRules))
-	effectiveFrom := make(map[string]int64, len(allRules))
-	for i, rule := range allRules {
-		metricNames[i] = rule.MetricName
-		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
-	}
-
-	points, err := m.ch.SeriesTimeseries(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-
-	return buildVolumeTimeseries(points), nil
-}
-
-func buildVolumeTimeseries(points []volumePoint) *querybuildertypesv5.QueryRangeResponse {
-	ingested := make([]*querybuildertypesv5.TimeSeriesValue, 0, len(points))
-	reduced := make([]*querybuildertypesv5.TimeSeriesValue, 0, len(points))
-	for _, point := range points {
-		ingested = append(ingested, &querybuildertypesv5.TimeSeriesValue{Timestamp: point.TimestampMs, Value: float64(point.Ingested)})
-		reduced = append(reduced, &querybuildertypesv5.TimeSeriesValue{Timestamp: point.TimestampMs, Value: float64(point.Reduced)})
-	}
-
-	return &querybuildertypesv5.QueryRangeResponse{
-		Type: querybuildertypesv5.RequestTypeTimeSeries,
-		Data: querybuildertypesv5.QueryData{
-			Results: []any{
-				&querybuildertypesv5.TimeSeriesData{
-					QueryName: "reduction_volume",
-					Aggregations: []*querybuildertypesv5.AggregationBucket{
-						{
-							Series: []*querybuildertypesv5.TimeSeries{
-								{Labels: []*querybuildertypesv5.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "series"}, Value: "ingested"}}, Values: ingested},
-								{Labels: []*querybuildertypesv5.Label{{Key: telemetrytypes.TelemetryFieldKey{Name: "series"}, Value: "retained"}}, Values: reduced},
-							},
-						},
-					},
-				},
-			},
-		},
-	}
-}
-
-func (m *module) validateMetricForReduction(ctx context.Context, orgID valuer.UUID, metricName string) error {
-	now := time.Now()
-	startTs := uint64(now.Add(-defaultPreviewLookback).UnixMilli())
-	endTs := uint64(now.UnixMilli())
-
-	_, types, _, err := m.metadataStore.FetchTemporalityAndTypeMulti(ctx, orgID, startTs, endTs, metricName)
-	if err != nil {
-		return err
-	}
-
-	metricType, ok := types[metricName]
-	if !ok || metricType == metrictypes.UnspecifiedType {
-		return errors.NewNotFoundf(errors.CodeNotFound, "metric not found: %q", metricName)
-	}
-	if metricType == metrictypes.ExpHistogramType {
-		return errors.Newf(errors.TypeInvalidInput, metricreductionruletypes.ErrCodeMetricReductionRuleUnsupportedMetricType,
-			"exponential histogram metrics cannot be reduced in v1")
-	}
-	return nil
-}
-
-func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metricName string, dropped []string) []metricreductionruletypes.AffectedAsset {
-	affected := make([]metricreductionruletypes.AffectedAsset, 0)
-	droppedSet := make(map[string]struct{}, len(dropped))
-	for _, label := range dropped {
-		droppedSet[label] = struct{}{}
-	}
-
-	if dashboards, err := m.dashboard.GetByMetricNames(ctx, orgID, []string{metricName}); err != nil {
-		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"])...)
-			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"]},
-				ImpactedLabels: intersectLabels(usedLabels, droppedSet),
-			})
-		}
-	}
-
-	if alerts, err := m.ruleStore.GetStoredRulesByMetricName(ctx, orgID.String(), metricName); err != nil {
-		m.logger.WarnContext(ctx, "failed to fetch related alerts for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
-	} else {
-		for _, a := range alerts {
-			affected = append(affected, metricreductionruletypes.AffectedAsset{
-				Type: metricreductionruletypes.AssetTypeAlert,
-				ID:   a.AlertID,
-				Name: a.AlertName,
-			})
-		}
-	}
-
-	return affected
-}
-
-func toGettableReductionRule(rule *metricreductionruletypes.ReductionRule) metricreductionruletypes.GettableReductionRule {
-	return metricreductionruletypes.GettableReductionRule{
-		Identifiable:  rule.Identifiable,
-		TimeAuditable: rule.TimeAuditable,
-		UserAuditable: rule.UserAuditable,
-		MetricName:    rule.MetricName,
-		MatchType:     rule.MatchType,
-		Labels:        rule.Labels,
-		EffectiveFrom: rule.EffectiveFrom,
-		Active:        !rule.EffectiveFrom.After(time.Now()),
-	}
-}
-
-func withVolume(rule metricreductionruletypes.GettableReductionRule, volume volumeRow) metricreductionruletypes.GettableReductionRule {
-	rule.IngestedSeries = volume.Ingested
-	rule.RetainedSeries = volume.Reduced
-	if volume.Ingested > 0 && volume.Reduced <= volume.Ingested {
-		rule.ReductionPercent = (1 - float64(volume.Reduced)/float64(volume.Ingested)) * 100
-	}
-	return rule
-}
-
-func intersectLabels(keys []string, droppedSet map[string]struct{}) []string {
-	seen := make(map[string]struct{})
-	var out []string
-	for _, key := range keys {
-		if _, ok := droppedSet[key]; !ok {
-			continue
-		}
-		if _, dup := seen[key]; dup {
-			continue
-		}
-		seen[key] = struct{}{}
-		out = append(out, key)
-	}
-	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 {
-		ruleSet[l] = struct{}{}
-	}
-
-	for _, k := range keys {
-		if metricreductionruletypes.IsProtectedLabel(k) {
-			kept = append(kept, k)
-			continue
-		}
-		_, listed := ruleSet[k]
-		drop := listed
-		if matchType == metricreductionruletypes.MatchTypeKeep {
-			drop = !listed
-		}
-		if drop {
-			dropped = append(dropped, k)
-		} else {
-			kept = append(kept, k)
-		}
-	}
-
-	sort.Strings(dropped)
-	sort.Strings(kept)
-	return dropped, kept
-}
-
-func (m *module) estimateVolume(ctx context.Context, metricName string, matchType metricreductionruletypes.MatchType, labels []string, startMs, endMs int64) (current uint64, reduced uint64, reductionPercent float64, dropped []string, err error) {
-	keys, err := m.ch.AttributeKeys(ctx, metricName, startMs, endMs)
-	if err != nil {
-		return 0, 0, 0, nil, err
-	}
-	dropped, kept := resolveDroppedKept(matchType, labels, keys)
-
-	current, reduced, err = m.ch.EstimateCardinality(ctx, metricName, kept, startMs, endMs)
-	if err != nil {
-		return 0, 0, 0, nil, err
-	}
-	if current > 0 && reduced <= current {
-		reductionPercent = (1 - float64(reduced)/float64(current)) * 100
-	}
-	return current, reduced, reductionPercent, dropped, nil
-}
--- a/ee/modules/metricreductionrule/implmetricreductionrule/store.go
+++ b/ee/modules/metricreductionrule/implmetricreductionrule/store.go
@@ -1,145 +0,0 @@
-package implmetricreductionrule
-
-import (
-	"context"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type store struct {
-	sqlstore sqlstore.SQLStore
-}
-
-func NewStore(sqlstore sqlstore.SQLStore) metricreductionruletypes.Store {
-	return &store{sqlstore: sqlstore}
-}
-
-func (s *store) List(ctx context.Context, orgID valuer.UUID, params *metricreductionruletypes.ListReductionRulesParams) ([]*metricreductionruletypes.ReductionRule, int, error) {
-	column := "metric_name"
-	if params.OrderBy == metricreductionruletypes.OrderByLastUpdated {
-		column = "updated_at"
-	}
-	direction := "ASC"
-	if params.Order == metricreductionruletypes.OrderDesc {
-		direction = "DESC"
-	}
-
-	rules := make([]*metricreductionruletypes.ReductionRule, 0)
-	query := s.sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(&rules).
-		Where("org_id = ?", orgID).
-		Order(column + " " + direction)
-	if params.Search != "" {
-		query = query.Where("metric_name LIKE ?", "%"+params.Search+"%")
-	}
-	if params.MetricName != "" {
-		query = query.Where("metric_name = ?", params.MetricName)
-	}
-	if params.Limit > 0 {
-		query = query.Limit(params.Limit).Offset(params.Offset)
-	}
-
-	total, err := query.ScanAndCount(ctx)
-	if err != nil {
-		return nil, 0, err
-	}
-	return rules, total, nil
-}
-
-func (s *store) Get(ctx context.Context, orgID valuer.UUID, metricName string) (*metricreductionruletypes.ReductionRule, error) {
-	rule := new(metricreductionruletypes.ReductionRule)
-	err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(rule).
-		Where("org_id = ?", orgID).
-		Where("metric_name = ?", metricName).
-		Scan(ctx)
-	if err != nil {
-		return nil, s.sqlstore.WrapNotFoundErrf(err, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found for metric %q", metricName)
-	}
-	return rule, nil
-}
-
-func (s *store) GetByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*metricreductionruletypes.ReductionRule, error) {
-	rule := new(metricreductionruletypes.ReductionRule)
-	err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(rule).
-		Where("org_id = ?", orgID).
-		Where("id = ?", id).
-		Scan(ctx)
-	if err != nil {
-		return nil, s.sqlstore.WrapNotFoundErrf(err, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found with id %q", id.String())
-	}
-	return rule, nil
-}
-
-func (s *store) Create(ctx context.Context, rule *metricreductionruletypes.ReductionRule) error {
-	res, err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewInsert().
-		Model(rule).
-		On("CONFLICT (org_id, metric_name) DO NOTHING").
-		Exec(ctx)
-	if err != nil {
-		return err
-	}
-
-	rowsAffected, err := res.RowsAffected()
-	if err != nil {
-		return err
-	}
-	if rowsAffected == 0 {
-		return errors.Newf(errors.TypeAlreadyExists, metricreductionruletypes.ErrCodeMetricReductionRuleAlreadyExists,
-			"a reduction rule for metric %q already exists", rule.MetricName)
-	}
-	return nil
-}
-
-func (s *store) Upsert(ctx context.Context, rule *metricreductionruletypes.ReductionRule) error {
-	_, err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewInsert().
-		Model(rule).
-		On("CONFLICT (org_id, metric_name) DO UPDATE").
-		Set("match_type = EXCLUDED.match_type").
-		Set("labels = EXCLUDED.labels").
-		Set("effective_from = EXCLUDED.effective_from").
-		Set("updated_at = EXCLUDED.updated_at").
-		Set("updated_by = EXCLUDED.updated_by").
-		Exec(ctx)
-	return err
-}
-
-func (s *store) DeleteByID(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	res, err := s.sqlstore.
-		BunDBCtx(ctx).
-		NewDelete().
-		Model((*metricreductionruletypes.ReductionRule)(nil)).
-		Where("org_id = ?", orgID).
-		Where("id = ?", id).
-		Exec(ctx)
-	if err != nil {
-		return err
-	}
-
-	rowsAffected, err := res.RowsAffected()
-	if err != nil {
-		return err
-	}
-	if rowsAffected == 0 {
-		return errors.Newf(errors.TypeNotFound, metricreductionruletypes.ErrCodeMetricReductionRuleNotFound, "no reduction rule found with id %q", id.String())
-	}
-	return nil
-}
-
-func (s *store) RunInTx(ctx context.Context, cb func(ctx context.Context) error) error {
-	return s.sqlstore.RunInTxCtx(ctx, nil, cb)
-}
--- a/ee/query-service/app/api/featureFlags.go
+++ b/ee/query-service/app/api/featureFlags.go
@@ -107,15 +107,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})

-	metricsReduction := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureEnableMetricsReduction.String()),
-		Active:     metricsReduction,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {
--- a/frontend/src/api/generated/services/metrics/index.ts
+++ b/frontend/src/api/generated/services/metrics/index.ts
@@ -18,8 +18,6 @@ import type {
 } from 'react-query';

 import type {
-	CreateMetricReductionRule201,
-	DeleteMetricReductionRuleByIDPathParameters,
 	GetMetricAlerts200,
 	GetMetricAlertsParams,
 	GetMetricAttributes200,
@@ -30,762 +28,22 @@ import type {
 	GetMetricHighlightsParams,
 	GetMetricMetadata200,
 	GetMetricMetadataParams,
-	GetMetricReductionRuleByID200,
-	GetMetricReductionRuleByIDPathParameters,
-	GetMetricReductionRuleStats200,
-	GetMetricReductionRuleTimeseries200,
 	GetMetricsOnboardingStatus200,
 	GetMetricsStats200,
 	GetMetricsTreemap200,
 	InspectMetrics200,
-	ListMetricReductionRules200,
-	ListMetricReductionRulesParams,
 	ListMetrics200,
 	ListMetricsParams,
-	MetricreductionruletypesPostableReductionRuleDTO,
-	MetricreductionruletypesPostableReductionRulePreviewDTO,
-	MetricreductionruletypesUpdatableReductionRuleDTO,
 	MetricsexplorertypesInspectMetricsRequestDTO,
 	MetricsexplorertypesStatsRequestDTO,
 	MetricsexplorertypesTreemapRequestDTO,
 	MetricsexplorertypesUpdateMetricMetadataRequestDTO,
-	PreviewMetricReductionRule200,
 	RenderErrorResponseDTO,
-	UpdateMetricReductionRuleByID200,
-	UpdateMetricReductionRuleByIDPathParameters,
 } from '../sigNoz.schemas';

 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';

-/**
- * Returns active metric volume-control (label reduction) rules.
- * @summary List metric reduction rules
- */
-export const listMetricReductionRules = (
-	params?: ListMetricReductionRulesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListMetricReductionRules200>({
-		url: `/api/v2/metric_reduction_rules`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListMetricReductionRulesQueryKey = (
-	params?: ListMetricReductionRulesParams,
-) => {
-	return [
-		`/api/v2/metric_reduction_rules`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getListMetricReductionRulesQueryOptions = <
-	TData = Awaited<ReturnType<typeof listMetricReductionRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListMetricReductionRulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listMetricReductionRules>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getListMetricReductionRulesQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listMetricReductionRules>>
-	> = ({ signal }) => listMetricReductionRules(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listMetricReductionRules>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListMetricReductionRulesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listMetricReductionRules>>
->;
-export type ListMetricReductionRulesQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List metric reduction rules
- */
-
-export function useListMetricReductionRules<
-	TData = Awaited<ReturnType<typeof listMetricReductionRules>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListMetricReductionRulesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listMetricReductionRules>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListMetricReductionRulesQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List metric reduction rules
- */
-export const invalidateListMetricReductionRules = async (
-	queryClient: QueryClient,
-	params?: ListMetricReductionRulesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListMetricReductionRulesQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Creates a volume-control rule for a metric and returns it with its id; fails if the metric already has a rule.
- * @summary Create a metric reduction rule
- */
-export const createMetricReductionRule = (
-	metricreductionruletypesPostableReductionRuleDTO?: BodyType<MetricreductionruletypesPostableReductionRuleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateMetricReductionRule201>({
-		url: `/api/v2/metric_reduction_rules`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: metricreductionruletypesPostableReductionRuleDTO,
-		signal,
-	});
-};
-
-export const getCreateMetricReductionRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createMetricReductionRule>>,
-		TError,
-		{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createMetricReductionRule>>,
-	TError,
-	{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
-	TContext
-> => {
-	const mutationKey = ['createMetricReductionRule'];
-	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 createMetricReductionRule>>,
-		{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createMetricReductionRule(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateMetricReductionRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createMetricReductionRule>>
->;
-export type CreateMetricReductionRuleMutationBody =
-	| BodyType<MetricreductionruletypesPostableReductionRuleDTO>
-	| undefined;
-export type CreateMetricReductionRuleMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create a metric reduction rule
- */
-export const useCreateMetricReductionRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createMetricReductionRule>>,
-		TError,
-		{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createMetricReductionRule>>,
-	TError,
-	{ data?: BodyType<MetricreductionruletypesPostableReductionRuleDTO> },
-	TContext
-> => {
-	return useMutation(getCreateMetricReductionRuleMutationOptions(options));
-};
-/**
- * Deletes a volume-control rule by its id.
- * @summary Delete a metric reduction rule by id
- */
-export const deleteMetricReductionRuleByID = (
-	{ id }: DeleteMetricReductionRuleByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/metric_reduction_rules/${id}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteMetricReductionRuleByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
-		TError,
-		{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
-	TError,
-	{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteMetricReductionRuleByID'];
-	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 deleteMetricReductionRuleByID>>,
-		{ pathParams: DeleteMetricReductionRuleByIDPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteMetricReductionRuleByID(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteMetricReductionRuleByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>
->;
-
-export type DeleteMetricReductionRuleByIDMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete a metric reduction rule by id
- */
-export const useDeleteMetricReductionRuleByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
-		TError,
-		{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteMetricReductionRuleByID>>,
-	TError,
-	{ pathParams: DeleteMetricReductionRuleByIDPathParameters },
-	TContext
-> => {
-	return useMutation(getDeleteMetricReductionRuleByIDMutationOptions(options));
-};
-/**
- * Returns a single volume-control rule by its id.
- * @summary Get a metric reduction rule by id
- */
-export const getMetricReductionRuleByID = (
-	{ id }: GetMetricReductionRuleByIDPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricReductionRuleByID200>({
-		url: `/api/v2/metric_reduction_rules/${id}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricReductionRuleByIDQueryKey = ({
-	id,
-}: GetMetricReductionRuleByIDPathParameters) => {
-	return [`/api/v2/metric_reduction_rules/${id}`] as const;
-};
-
-export const getGetMetricReductionRuleByIDQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetMetricReductionRuleByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricReductionRuleByIDQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricReductionRuleByID>>
-	> = ({ signal }) => getMetricReductionRuleByID({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricReductionRuleByIDQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricReductionRuleByID>>
->;
-export type GetMetricReductionRuleByIDQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get a metric reduction rule by id
- */
-
-export function useGetMetricReductionRuleByID<
-	TData = Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id }: GetMetricReductionRuleByIDPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricReductionRuleByIDQueryOptions(
-		{ id },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get a metric reduction rule by id
- */
-export const invalidateGetMetricReductionRuleByID = async (
-	queryClient: QueryClient,
-	{ id }: GetMetricReductionRuleByIDPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricReductionRuleByIDQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Updates the match type and labels of a volume-control rule by its id; the metric name is immutable.
- * @summary Update a metric reduction rule by id
- */
-export const updateMetricReductionRuleByID = (
-	{ id }: UpdateMetricReductionRuleByIDPathParameters,
-	metricreductionruletypesUpdatableReductionRuleDTO?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateMetricReductionRuleByID200>({
-		url: `/api/v2/metric_reduction_rules/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: metricreductionruletypesUpdatableReductionRuleDTO,
-		signal,
-	});
-};
-
-export const getUpdateMetricReductionRuleByIDMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
-		TError,
-		{
-			pathParams: UpdateMetricReductionRuleByIDPathParameters;
-			data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
-	TError,
-	{
-		pathParams: UpdateMetricReductionRuleByIDPathParameters;
-		data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateMetricReductionRuleByID'];
-	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 updateMetricReductionRuleByID>>,
-		{
-			pathParams: UpdateMetricReductionRuleByIDPathParameters;
-			data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateMetricReductionRuleByID(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateMetricReductionRuleByIDMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateMetricReductionRuleByID>>
->;
-export type UpdateMetricReductionRuleByIDMutationBody =
-	| BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>
-	| undefined;
-export type UpdateMetricReductionRuleByIDMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update a metric reduction rule by id
- */
-export const useUpdateMetricReductionRuleByID = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
-		TError,
-		{
-			pathParams: UpdateMetricReductionRuleByIDPathParameters;
-			data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateMetricReductionRuleByID>>,
-	TError,
-	{
-		pathParams: UpdateMetricReductionRuleByIDPathParameters;
-		data?: BodyType<MetricreductionruletypesUpdatableReductionRuleDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateMetricReductionRuleByIDMutationOptions(options));
-};
-/**
- * Estimates the series reduction and related-asset impact of a candidate volume-control rule without persisting it.
- * @summary Preview a metric reduction rule
- */
-export const previewMetricReductionRule = (
-	metricreductionruletypesPostableReductionRulePreviewDTO?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PreviewMetricReductionRule200>({
-		url: `/api/v2/metric_reduction_rules/preview`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: metricreductionruletypesPostableReductionRulePreviewDTO,
-		signal,
-	});
-};
-
-export const getPreviewMetricReductionRuleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof previewMetricReductionRule>>,
-		TError,
-		{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof previewMetricReductionRule>>,
-	TError,
-	{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
-	TContext
-> => {
-	const mutationKey = ['previewMetricReductionRule'];
-	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 previewMetricReductionRule>>,
-		{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return previewMetricReductionRule(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PreviewMetricReductionRuleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof previewMetricReductionRule>>
->;
-export type PreviewMetricReductionRuleMutationBody =
-	| BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO>
-	| undefined;
-export type PreviewMetricReductionRuleMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Preview a metric reduction rule
- */
-export const usePreviewMetricReductionRule = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof previewMetricReductionRule>>,
-		TError,
-		{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof previewMetricReductionRule>>,
-	TError,
-	{ data?: BodyType<MetricreductionruletypesPostableReductionRulePreviewDTO> },
-	TContext
-> => {
-	return useMutation(getPreviewMetricReductionRuleMutationOptions(options));
-};
-/**
- * Returns total ingested vs retained series and the estimated monthly savings across all volume-control rules.
- * @summary Metric reduction stats
- */
-export const getMetricReductionRuleStats = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetMetricReductionRuleStats200>({
-		url: `/api/v2/metric_reduction_rules/stats`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricReductionRuleStatsQueryKey = () => {
-	return [`/api/v2/metric_reduction_rules/stats`] as const;
-};
-
-export const getGetMetricReductionRuleStatsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricReductionRuleStatsQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricReductionRuleStats>>
-	> = ({ signal }) => getMetricReductionRuleStats(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricReductionRuleStatsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricReductionRuleStats>>
->;
-export type GetMetricReductionRuleStatsQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Metric reduction stats
- */
-
-export function useGetMetricReductionRuleStats<
-	TData = Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricReductionRuleStats>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricReductionRuleStatsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Metric reduction stats
- */
-export const invalidateGetMetricReductionRuleStats = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricReductionRuleStatsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Returns ingested vs retained series over time across all volume-control rules (hourly buckets), in the query-range time-series response shape.
- * @summary Metric reduction volume over time
- */
-export const getMetricReductionRuleTimeseries = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetMetricReductionRuleTimeseries200>({
-		url: `/api/v2/metric_reduction_rules/timeseries`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricReductionRuleTimeseriesQueryKey = () => {
-	return [`/api/v2/metric_reduction_rules/timeseries`] as const;
-};
-
-export const getGetMetricReductionRuleTimeseriesQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricReductionRuleTimeseriesQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>
-	> = ({ signal }) => getMetricReductionRuleTimeseries(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricReductionRuleTimeseriesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>
->;
-export type GetMetricReductionRuleTimeseriesQueryError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Metric reduction volume over time
- */
-
-export function useGetMetricReductionRuleTimeseries<
-	TData = Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricReductionRuleTimeseries>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricReductionRuleTimeseriesQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Metric reduction volume over time
- */
-export const invalidateGetMetricReductionRuleTimeseries = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricReductionRuleTimeseriesQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
 * This endpoint returns a list of distinct metric names within the specified time range
 * @summary List metric names
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -6689,213 +6689,6 @@ export interface LlmpricingruletypesUpdatableLLMPricingRulesDTO {
 	rules: LlmpricingruletypesUpdatableLLMPricingRuleDTO[] | null;
 }

-export enum MetricreductionruletypesAssetTypeDTO {
-	dashboard = 'dashboard',
-	alert_rule = 'alert_rule',
-}
-export interface MetricreductionruletypesAffectedWidgetDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
-export interface MetricreductionruletypesAffectedAssetDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type array,null
-	 */
-	impactedLabels: string[] | null;
-	/**
-	 * @type string
-	 */
-	name: string;
-	type: MetricreductionruletypesAssetTypeDTO;
-	widget?: MetricreductionruletypesAffectedWidgetDTO;
-}
-
-export enum MetricreductionruletypesMatchTypeDTO {
-	drop = 'drop',
-	keep = 'keep',
-}
-export interface MetricreductionruletypesGettableReductionRuleDTO {
-	/**
-	 * @type boolean
-	 */
-	active: boolean;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	effectiveFrom: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	ingestedSeries: number;
-	/**
-	 * @type array,null
-	 */
-	labels: string[] | null;
-	matchType: MetricreductionruletypesMatchTypeDTO;
-	/**
-	 * @type string
-	 */
-	metricName: string;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	reductionPercent: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	retainedSeries: number;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
-export interface MetricreductionruletypesGettableReductionRulePreviewDTO {
-	/**
-	 * @type array,null
-	 */
-	affectedAssets: MetricreductionruletypesAffectedAssetDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	currentRetainedSeries: number;
-	/**
-	 * @type array,null
-	 */
-	droppedLabels: string[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	effectiveFrom: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	ingestedSeries: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	reductionPercent: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	retainedSeries: number;
-}
-
-export interface MetricreductionruletypesGettableReductionRuleStatsDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	estimatedMonthlySavingsUsd: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	ingestedSeries: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	retainedSeries: number;
-}
-
-export interface MetricreductionruletypesGettableReductionRulesDTO {
-	/**
-	 * @type array,null
-	 */
-	rules: MetricreductionruletypesGettableReductionRuleDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	total: number;
-}
-
-export enum MetricreductionruletypesOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export interface MetricreductionruletypesPostableReductionRuleDTO {
-	/**
-	 * @type array,null
-	 */
-	labels: string[] | null;
-	matchType: MetricreductionruletypesMatchTypeDTO;
-	/**
-	 * @type string
-	 */
-	metricName: string;
-}
-
-export interface MetricreductionruletypesPostableReductionRulePreviewDTO {
-	/**
-	 * @type array,null
-	 */
-	labels: string[] | null;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	lookbackMs?: number;
-	matchType: MetricreductionruletypesMatchTypeDTO;
-	/**
-	 * @type string
-	 */
-	metricName: string;
-}
-
-export enum MetricreductionruletypesReductionRuleOrderByDTO {
-	metric = 'metric',
-	ingested_volume = 'ingested_volume',
-	reduced_volume = 'reduced_volume',
-	reduction = 'reduction',
-	last_updated = 'last_updated',
-}
-export interface MetricreductionruletypesUpdatableReductionRuleDTO {
-	/**
-	 * @type array,null
-	 */
-	labels: string[] | null;
-	matchType: MetricreductionruletypesMatchTypeDTO;
-}
-
 export interface MetricsexplorertypesInspectMetricsRequestDTO {
 	/**
 	 * @type integer
@@ -10541,102 +10334,6 @@ export type Livez200 = {
 	status: string;
 };

-export type ListMetricReductionRulesParams = {
-	/**
-	 * @description undefined
-	 */
-	orderBy?: MetricreductionruletypesReductionRuleOrderByDTO;
-	/**
-	 * @description undefined
-	 */
-	order?: MetricreductionruletypesOrderDTO;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	search?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	metricName?: string;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-};
-
-export type ListMetricReductionRules200 = {
-	data: MetricreductionruletypesGettableReductionRulesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateMetricReductionRule201 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteMetricReductionRuleByIDPathParameters = {
-	id: string;
-};
-export type GetMetricReductionRuleByIDPathParameters = {
-	id: string;
-};
-export type GetMetricReductionRuleByID200 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateMetricReductionRuleByIDPathParameters = {
-	id: string;
-};
-export type UpdateMetricReductionRuleByID200 = {
-	data: MetricreductionruletypesGettableReductionRuleDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type PreviewMetricReductionRule200 = {
-	data: MetricreductionruletypesGettableReductionRulePreviewDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetMetricReductionRuleStats200 = {
-	data: MetricreductionruletypesGettableReductionRuleStatsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetMetricReductionRuleTimeseries200 = {
-	data: Querybuildertypesv5QueryRangeResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListMetricsParams = {
 	/**
 	 * @type integer,null
--- a/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
@@ -5,6 +5,7 @@ import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
+import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import { Check, Copy } from '@signozhq/icons';

@@ -36,17 +37,16 @@ export default function Legend({

 	// Search is intrinsic to the right-positioned legend.
 	const searchEnabled = position === LegendPosition.RIGHT;
+	const { width: containerWidth } = useResizeObserver(legendContainerRef);

 	const isSingleRow = useMemo(() => {
-		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
+		if (position !== LegendPosition.BOTTOM || containerWidth <= 0) {
 			return false;
 		}
-		const containerWidth = legendContainerRef.current.clientWidth;
-
 		const totalLegendWidth = items.length * (averageLegendWidth + 16);
 		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
 		return totalRows <= 1;
-	}, [averageLegendWidth, items.length, position]);
+	}, [averageLegendWidth, items.length, position, containerWidth]);

 	const visibleLegendItems = useMemo(() => {
 		if (!searchEnabled || !legendSearchQuery.trim()) {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx
@@ -14,10 +14,11 @@ import type {
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useAppContext } from 'providers/App/App';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';

+import { useCreatePanel } from '../hooks/useCreatePanel';
+import PanelTypeSelectionModal from '../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
 import { useEditableTitle } from './DashboardInfo/useEditableTitle';
@@ -50,9 +51,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {

 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();

 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
@@ -108,8 +108,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
-		setIsPanelTypeSelectionModalOpen(true);
-	}, [id, setIsPanelTypeSelectionModalOpen]);
+		openPicker();
+	}, [id, openPicker]);

 	return (
 		<section className={styles.dashboardPageToolbarContainer}>
@@ -149,6 +149,11 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 				</div>
 				<VariablesBar dashboard={dashboard} />
 			</div>
+			<PanelTypeSelectionModal
+				open={isPickerOpen}
+				onClose={closePicker}
+				onSelect={createPanel}
+			/>
 		</section>
 	);
 }
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx
@@ -20,6 +20,8 @@ interface ConfigPaneProps {
 	/** The panel spec — the single editing surface (title/description + section slices). */
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
+	/** Switch the panel to another visualization kind. */
+	onChangePanelKind: (kind: PanelKind) => void;
 	/** Panel's resolved series, provided to sections that need them (legend colors). */
 	legendSeries: LegendSeries[];
 	/** Table panel's resolved value columns, for the table-only editors. */
@@ -36,6 +38,7 @@ function ConfigPane({
 	panelKind,
 	spec,
 	onChangeSpec,
+	onChangePanelKind,
 	legendSeries,
 	tableColumns,
 }: ConfigPaneProps): JSX.Element {
@@ -95,6 +98,8 @@ function ConfigPane({
 									legendSeries={legendSeries}
 									tableColumns={tableColumns}
 									signal={signal}
+									panelKind={panelKind}
+									onChangePanelKind={onChangePanelKind}
 								/>
 							))}
 						</div>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.module.scss
@@ -0,0 +1,6 @@
+// Matches ConfigPane's `.field` so the switcher lines up with the title/description fields.
+.field {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.tsx
@@ -0,0 +1,54 @@
+import { Typography } from '@signozhq/ui/typography';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { getPanelDefinition } from '../../../Panels/registry';
+import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
+import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
+
+import styles from './PanelTypeSwitcher.module.scss';
+
+interface PanelTypeSwitcherProps {
+	/** The current panel kind (selected value). */
+	panelKind: PanelKind;
+	/** Panel's current datasource — drives the disabled rule. */
+	signal?: TelemetrytypesSignalDTO;
+	onChange: (kind: PanelKind) => void;
+}
+
+/**
+ * Visualization-type selector (rendered inside the Visualization section). Types whose
+ * supported signals exclude the panel's current datasource are disabled (V1 parity —
+ * e.g. List needs logs/traces, not metrics). The datasource is unknown for
+ * PromQL/ClickHouse queries, in which case no type is disabled.
+ */
+function PanelTypeSwitcher({
+	panelKind,
+	signal,
+	onChange,
+}: PanelTypeSwitcherProps): JSX.Element {
+	const items = PANEL_TYPES.map((type) => {
+		const definition = getPanelDefinition(type.pluginKind as PanelKind);
+		return {
+			value: type.pluginKind,
+			label: type.label,
+			icon: type.icon,
+			disabled:
+				!!signal && !!definition && !definition.supportedSignals.includes(signal),
+		};
+	});
+
+	return (
+		<div className={styles.field}>
+			<Typography.Text>Panel Type</Typography.Text>
+			<ConfigSelect
+				testId="panel-editor-v2-type-switcher"
+				value={panelKind}
+				items={items}
+				onChange={(value): void => onChange(value as PanelKind)}
+			/>
+		</div>
+	);
+}
+
+export default PanelTypeSwitcher;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/tests/PanelTypeSwitcher.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/tests/PanelTypeSwitcher.test.tsx
@@ -0,0 +1,73 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+
+import PanelTypeSwitcher from '../PanelTypeSwitcher';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+
+jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
+	getPanelDefinition: jest.fn(),
+}));
+
+const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
+
+function openDropdown(): void {
+	fireEvent.mouseDown(screen.getByRole('combobox'));
+}
+
+describe('PanelTypeSwitcher', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// List supports only logs/traces; every other kind also supports metrics.
+		mockGetPanelDefinition.mockImplementation((kind: string) => ({
+			supportedSignals:
+				kind === 'signoz/ListPanel'
+					? ['logs', 'traces']
+					: ['metrics', 'logs', 'traces'],
+		}));
+	});
+
+	it('fires onChange with the chosen plugin kind', () => {
+		const onChange = jest.fn();
+		render(
+			<PanelTypeSwitcher panelKind="signoz/TimeSeriesPanel" onChange={onChange} />,
+		);
+
+		openDropdown();
+		fireEvent.click(screen.getByText('List'));
+
+		expect(onChange).toHaveBeenCalledWith('signoz/ListPanel');
+	});
+
+	it('disables types whose supported signals exclude the current datasource', () => {
+		render(
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				signal={TelemetrytypesSignalDTO.metrics}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		openDropdown();
+		const disabled = Array.from(
+			document.querySelectorAll('.ant-select-item-option-disabled'),
+		).map((el) => el.textContent);
+
+		// List can't render a metrics query, so it's disabled; Time Series stays enabled.
+		expect(disabled).toContain('List');
+		expect(disabled).not.toContain('Time Series');
+	});
+
+	it('does not disable any type when the datasource is unknown', () => {
+		render(
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				onChange={jest.fn()}
+			/>,
+		);
+
+		openDropdown();
+		expect(
+			document.querySelectorAll('.ant-select-item-option-disabled'),
+		).toHaveLength(0);
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx
@@ -8,6 +8,7 @@ import {
 	type SectionConfig,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';

+import type { PanelKind } from '../../../Panels/types/panelKind';
 import type { LegendSeries } from '../../hooks/useLegendSeries';
 import type { TableColumnOption } from '../../hooks/useTableColumns';
 import { resolveSectionEditor } from '../sectionRegistry';
@@ -23,6 +24,9 @@ interface SectionSlotProps {
 	tableColumns: TableColumnOption[];
 	/** Panel's telemetry signal, for editors that fetch field suggestions (List columns). */
 	signal?: TelemetrytypesSignalDTO;
+	/** Current panel kind + switch handler, for the visualization section's type switcher. */
+	panelKind: PanelKind;
+	onChangePanelKind: (kind: PanelKind) => void;
 }

 /**
@@ -38,6 +42,8 @@ function SectionSlot({
 	legendSeries,
 	tableColumns,
 	signal,
+	panelKind,
+	onChangePanelKind,
 }: 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.
@@ -60,7 +66,12 @@ function SectionSlot({
 		.formatting?.unit;

 	return (
-		<SettingsSection title={title} icon={<Icon size={15} />}>
+		<SettingsSection
+			title={title}
+			icon={<Icon size={15} />}
+			// Open Visualization by default so the type switcher is visible.
+			defaultOpen={config.kind === 'visualization'}
+		>
 			<Component
 				value={get(spec)}
 				controls={controls}
@@ -69,6 +80,8 @@ function SectionSlot({
 				yAxisUnit={yAxisUnit}
 				tableColumns={tableColumns}
 				signal={signal}
+				panelKind={panelKind}
+				onChangePanelKind={onChangePanelKind}
 			/>
 		</SettingsSection>
 	);
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/tests/ConfigPane.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/tests/ConfigPane.test.tsx
@@ -22,6 +22,7 @@ function renderConfigPane(
 		panelKind: 'signoz/TimeSeriesPanel',
 		spec: spec(),
 		onChangeSpec: jest.fn(),
+		onChangePanelKind: jest.fn(),
 		legendSeries: [],
 		tableColumns: [],
 		...overrides,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSegmented/ConfigSegmented.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSegmented/ConfigSegmented.module.scss
@@ -1,5 +1,5 @@
 .group {
-	width: min(350px, 100%);
+	width: 100%;
 }

 .segment {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { Select } from 'antd';

 import { SegmentIcon, type SegmentIconName } from '../segmentIcons';
@@ -7,7 +8,9 @@ import styles from './ConfigSelect.module.scss';
 export interface ConfigSelectItem {
 	value: string;
 	label: string;
-	icon?: SegmentIconName;
+	/** A `SegmentIconName` string (resolved to a glyph), or an arbitrary icon node. */
+	icon?: ReactNode;
+	disabled?: boolean;
 }

 interface ConfigSelectProps {
@@ -40,9 +43,14 @@ function ConfigSelect({
 			virtual={false}
 			options={items.map((item) => ({
 				value: item.value,
+				disabled: item.disabled,
 				label: item.icon ? (
 					<span className={styles.item}>
-						<SegmentIcon name={item.icon} />
+						{typeof item.icon === 'string' ? (
+							<SegmentIcon name={item.icon as SegmentIconName} />
+						) : (
+							item.icon
+						)}
 						{item.label}
 					</span>
 				) : (
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionRegistry.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionRegistry.tsx
@@ -157,6 +157,10 @@ export interface ErasedSectionDescriptor {
 		// The panel's telemetry signal; read by editors that fetch field-key
 		// suggestions scoped to it (List column picker).
 		signal?: unknown;
+		// Current panel kind + switch handler; read by the visualization section's
+		// type switcher.
+		panelKind?: unknown;
+		onChangePanelKind?: unknown;
 	}>;
 	get: (spec: PanelSpec) => unknown;
 	update: (spec: PanelSpec, value: unknown) => PanelSpec;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/tests/ThresholdsSection.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/tests/ThresholdsSection.test.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { fireEvent, render, screen } 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';

@@ -9,8 +10,8 @@ const THRESHOLDS: DashboardtypesThresholdWithLabelDTO[] = [
 	{ value: 80, color: '#F5B225', label: 'High', unit: 'percent' },
 ];

-// Stateful harness for flows that depend on the value updating (add/discard). No
-// `controls` is passed, exercising the default `label` variant.
+// Stateful harness for flows that depend on the value updating (add/discard);
+// omits `controls` to exercise the default `label` variant.
 function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
 	const [value, setValue] = useState<AnyThreshold[]>([]);
 	return (
@@ -33,7 +34,6 @@ describe('ThresholdsSection', () => {

 		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
 		expect(screen.getByText('High')).toBeInTheDocument();
-		// The editable fields are hidden until the row is edited.
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 	});

@@ -54,6 +54,22 @@ describe('ThresholdsSection', () => {
 		]);
 	});

+	it('persists an empty-string label when none is provided', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		// Label absent (e.g. a pre-existing spec); spec requires a string, so save
+		// must send '' not undefined.
+		const noLabel = [{ value: 50, color: '#F1575F' }] as AnyThreshold[];
+		render(<ThresholdsSection value={noLabel} onChange={onChange} />);
+
+		await user.click(screen.getByTestId('threshold-edit-0'));
+		await user.click(screen.getByTestId('threshold-save-0'));
+
+		expect(onChange).toHaveBeenCalledWith([
+			{ value: 50, color: '#F1575F', label: '' },
+		]);
+	});
+
 	it('does not commit edits when Discard is clicked', () => {
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
@@ -65,7 +81,6 @@ describe('ThresholdsSection', () => {
 		fireEvent.click(screen.getByTestId('threshold-discard-0'));

 		expect(onChange).not.toHaveBeenCalled();
-		// Back to view mode.
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
 	});
@@ -83,11 +98,10 @@ describe('ThresholdsSection', () => {
 		render(<Harness />);

 		fireEvent.click(screen.getByTestId('panel-editor-v2-add-threshold'));
-		// New row opens in edit mode.
 		expect(screen.getByTestId('threshold-value-0')).toBeInTheDocument();

-		fireEvent.click(screen.getByTestId('threshold-discard-0'));
 		// Discarding a never-saved row removes it entirely.
+		fireEvent.click(screen.getByTestId('threshold-discard-0'));
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('threshold-edit-0')).not.toBeInTheDocument();
 	});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/LabelThresholdRow.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/LabelThresholdRow.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { Typography } from '@signozhq/ui/typography';
 import { Input } from 'antd';
 import type { DashboardtypesThresholdWithLabelDTO } from 'api/generated/services/sigNoz.schemas';
@@ -23,10 +24,7 @@ interface LabelThresholdRowProps {
 	onRemove: () => void;
 }

-/**
- * Value + color + label threshold (TimeSeries / Bar): a line drawn on the chart. Edit
- * form is color, value, unit, label.
- */
+/** Value + color + label threshold (TimeSeries / Bar): a line drawn on the chart. */
 function LabelThresholdRow({
 	index,
 	threshold,
@@ -39,6 +37,11 @@ function LabelThresholdRow({
 }: LabelThresholdRowProps): JSX.Element {
 	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);

+	// Persist an empty-string label when none was entered — the spec requires a string.
+	const handleSave = useCallback((): void => {
+		onSave({ ...draft, label: draft.label ?? '' });
+	}, [onSave, draft]);
+
 	const summary = (
 		<>
 			<span className={styles.viewValue}>
@@ -58,7 +61,7 @@ function LabelThresholdRow({
 			isEditing={isEditing}
 			summary={summary}
 			onEdit={onEdit}
-			onSave={(): void => onSave(draft)}
+			onSave={handleSave}
 			onDiscard={onDiscard}
 			onRemove={onRemove}
 		>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/VisualizationSection.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/VisualizationSection.tsx
@@ -1,26 +1,50 @@
 import { Typography } from '@signozhq/ui/typography';
-import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesTimePreferenceDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { SectionEditorProps } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';

+import type { PanelKind } from '../../../../Panels/types/panelKind';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
+import PanelTypeSwitcher from '../../PanelTypeSwitcher/PanelTypeSwitcher';
 import { TIME_PREFERENCE_OPTIONS } from './timePreferenceOptions';

 import styles from './VisualizationSection.module.scss';

+type VisualizationSectionProps = SectionEditorProps<'visualization'> & {
+	/** Current panel kind + switch handler, forwarded by SectionSlot for the type switcher. */
+	panelKind?: PanelKind;
+	onChangePanelKind?: (kind: PanelKind) => void;
+	/** Panel's datasource, forwarded by SectionSlot — scopes the switcher's disabled types. */
+	signal?: TelemetrytypesSignalDTO;
+};
+
 /**
- * Edits the `visualization` slice: the per-panel time preference (all kinds), bar
- * stacking (`stackedBarChart`, Bar only), and gap filling (`fillSpans`, TimeSeries
- * only). Each control is gated by its `controls` flag, so a kind only renders — and only
- * writes — the visualization fields its spec actually supports.
+ * Edits the `visualization` slice: the panel-type switcher (`switchPanelKind`, every
+ * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only), and
+ * gap filling (`fillSpans`, TimeSeries only). Each control is gated by its `controls`
+ * flag, so a kind only renders — and only writes — the fields its spec supports.
 */
 function VisualizationSection({
 	value,
 	controls,
 	onChange,
-}: SectionEditorProps<'visualization'>): JSX.Element {
+	panelKind,
+	onChangePanelKind,
+	signal,
+}: VisualizationSectionProps): JSX.Element {
 	return (
 		<>
+			{controls.switchPanelKind && panelKind && onChangePanelKind && (
+				<PanelTypeSwitcher
+					panelKind={panelKind}
+					signal={signal}
+					onChange={onChangePanelKind}
+				/>
+			)}
+
 			{controls.timePreference && (
 				<div className={styles.field}>
 					<Typography.Text>Panel time preference</Typography.Text>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/tests/VisualizationSection.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/tests/VisualizationSection.test.tsx
@@ -4,6 +4,14 @@ import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.s

 import VisualizationSection from '../VisualizationSection';

+// The type switcher resolves each kind's supported signals; stub it so the test
+// doesn't pull the whole panel registry (renderers, chart libs).
+jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
+	getPanelDefinition: jest.fn(() => ({
+		supportedSignals: ['metrics', 'logs', 'traces'],
+	})),
+}));
+
 // Open the antd Select by clicking its selector, then pick the option by label.
 async function pickOption(triggerTestId: string, label: string): Promise<void> {
 	const user = userEvent.setup();
@@ -17,7 +25,12 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{ timePreference: true, stacking: true, fillSpans: true }}
+				controls={{
+					switchPanelKind: true,
+					timePreference: true,
+					stacking: true,
+					fillSpans: true,
+				}}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -35,7 +48,10 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{ timePreference: true }}
+				controls={{
+					switchPanelKind: true,
+					timePreference: true,
+				}}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -56,7 +72,10 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{ timePreference: true }}
+				controls={{
+					switchPanelKind: true,
+					timePreference: true,
+				}}
 				onChange={onChange}
 			/>,
 		);
@@ -74,7 +93,10 @@ describe('VisualizationSection', () => {
 					timePreference: DashboardtypesTimePreferenceDTO.global_time,
 					stackedBarChart: false,
 				}}
-				controls={{ stacking: true }}
+				controls={{
+					switchPanelKind: true,
+					stacking: true,
+				}}
 				onChange={onChange}
 			/>,
 		);
@@ -92,7 +114,10 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={{ fillSpans: false }}
-				controls={{ fillSpans: true }}
+				controls={{
+					switchPanelKind: true,
+					fillSpans: true,
+				}}
 				onChange={onChange}
 			/>,
 		);
@@ -101,4 +126,43 @@ describe('VisualizationSection', () => {

 		expect(onChange).toHaveBeenCalledWith({ fillSpans: true });
 	});
+
+	it('renders the type switcher and switches kind when switchPanelKind is set', async () => {
+		const onChangePanelKind = jest.fn();
+		render(
+			<VisualizationSection
+				value={undefined}
+				controls={{ switchPanelKind: true }}
+				onChange={jest.fn()}
+				panelKind="signoz/TimeSeriesPanel"
+				onChangePanelKind={onChangePanelKind}
+			/>,
+		);
+
+		expect(
+			screen.getByTestId('panel-editor-v2-type-switcher'),
+		).toBeInTheDocument();
+
+		await pickOption('panel-editor-v2-type-switcher', 'Table');
+		expect(onChangePanelKind).toHaveBeenCalledWith('signoz/TablePanel');
+	});
+
+	it('hides the type switcher when switchPanelKind is not set', () => {
+		render(
+			<VisualizationSection
+				value={undefined}
+				controls={{
+					switchPanelKind: false,
+					timePreference: true,
+				}}
+				onChange={jest.fn()}
+				panelKind="signoz/TimeSeriesPanel"
+				onChangePanelKind={jest.fn()}
+			/>,
+		);
+
+		expect(
+			screen.queryByTestId('panel-editor-v2-type-switcher'),
+		).not.toBeInTheDocument();
+	});
 });
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/ListColumnsEditor.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/ListColumnsEditor.tsx
@@ -29,8 +29,7 @@ import styles from './ListColumnsEditor.module.scss';
 interface ListColumnsEditorProps {
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-	/** Committed query's signal — scopes the add-dropdown's field suggestions. */
-	signal: TelemetrytypesSignalDTO | undefined;
+	signal: TelemetrytypesSignalDTO;
 }

 /**
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/components/AddColumnDropdown/AddColumnDropdown.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/components/AddColumnDropdown/AddColumnDropdown.tsx
@@ -21,7 +21,7 @@ import { useListColumnSuggestions } from '../../hooks/useListColumnSuggestions';
 import styles from './AddColumnDropdown.module.scss';

 interface AddColumnDropdownProps {
-	signal: TelemetrytypesSignalDTO | undefined;
+	signal: TelemetrytypesSignalDTO;
 	/** Names already chosen — drives the checked state + toggle behavior. */
 	selectedNames: Set<string>;
 	onToggle: (field: TelemetrytypesTelemetryFieldKeyDTO) => void;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/hooks/useListColumnSuggestions.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/hooks/useListColumnSuggestions.ts
@@ -21,7 +21,7 @@ interface UseListColumnSuggestions {
 * flatten them and index by name so picks can carry their context/data-type.
 */
 export function useListColumnSuggestions(
-	signal: TelemetrytypesSignalDTO | undefined,
+	signal: TelemetrytypesSignalDTO,
 ): UseListColumnSuggestions {
 	const [searchText, setSearchText] = useState('');
 	const debouncedSearch = useDebounce(searchText, 300);
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/selectFields.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ListColumnsEditor/selectFields.ts
@@ -1,14 +1,17 @@
-import type {
-	DashboardtypesListPanelSpecDTO,
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
+import {
+	TelemetrytypesSignalDTO,
+	type DashboardtypesListPanelSpecDTO,
+	type DashboardtypesPanelSpecDTO,
+	type TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import {
+	defaultLogsSelectedColumns,
+	defaultTraceSelectedColumns,
+} from 'container/OptionsMenu/constants';

 /**
- * The field-key suggestions API and the default-column constants carry extra
- * runtime fields (e.g. `isIndexed`) that the save contract rejects. Reduce each
- * column to the `TelemetrytypesTelemetryFieldKeyDTO` shape so persisted
- * `selectFields` only contain backend-known keys.
+ * Reduce each column to the field-key DTO shape: the suggestions API and default
+ * constants carry extra runtime fields (e.g. `isIndexed`) the save contract rejects.
 */
 function toFieldKeyDTO(
 	field: TelemetrytypesTelemetryFieldKeyDTO,
@@ -31,10 +34,26 @@ export function sanitizeSelectFields(
 }

 /**
- * `spec.plugin.spec` is a discriminated union over every panel kind; these helpers
- * run only for the List panel, so it's narrowed to the List variant with a single
- * localized cast at the boundary.
+ * logs/traces List-column defaults (V1 parity), sanitized to the field-key DTO.
 */
+export function defaultColumnsForSignal(
+	signal: TelemetrytypesSignalDTO,
+): TelemetrytypesTelemetryFieldKeyDTO[] {
+	if (signal === TelemetrytypesSignalDTO.logs) {
+		return sanitizeSelectFields(
+			defaultLogsSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
+		);
+	}
+	if (signal === TelemetrytypesSignalDTO.traces) {
+		return sanitizeSelectFields(
+			defaultTraceSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
+		);
+	}
+	return [];
+}
+
+// `spec.plugin.spec` is a discriminated union over panel kinds; these List-only
+// helpers narrow to the List variant via a single localized cast at the boundary.
 export function readSelectFields(
 	spec: DashboardtypesPanelSpecDTO,
 ): TelemetrytypesTelemetryFieldKeyDTO[] {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PlotTag.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PlotTag.tsx
@@ -0,0 +1,35 @@
+import { Spline } from '@signozhq/icons';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
+import { EQueryType } from 'types/common/dashboard';
+
+interface PlotTagProps {
+	/** Authoring mode of the panel's query; undefined when no query exists yet. */
+	queryType: EQueryType | undefined;
+	panelType: PANEL_TYPES;
+	className?: string;
+}
+
+/**
+ * "Plotted with <query mode>" chip for the editor preview; V2 counterpart of V1's
+ * PlotTag (duplicated per the split policy). Hidden for list panels and before a
+ * query exists, where the mode is irrelevant.
+ */
+function PlotTag({
+	queryType,
+	panelType,
+	className,
+}: PlotTagProps): JSX.Element | null {
+	if (queryType === undefined || panelType === PANEL_TYPES.LIST) {
+		return null;
+	}
+
+	return (
+		<div className={className} data-testid="panel-editor-plot-tag">
+			<Spline size={14} />
+			Plotted with <QueryTypeTag queryType={queryType} />
+		</div>
+	);
+}
+
+export default PlotTag;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss
@@ -43,8 +43,10 @@
 	border-radius: 4px;
 	overflow: hidden;
 	display: flex;
+	// Header stacks above the body, flush to the border — mirrors the dashboard
+	// grid's `.panel` so the preview reads as the real panel chrome.
+	flex-direction: column;
 	background: var(--l2-background);
-	padding: 8px;
 }

 .state {
@@ -57,3 +59,7 @@
 	font-size: 13px;
 	text-align: center;
 }
+
+.dateTimeSelector {
+	margin-left: auto;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx
@@ -1,25 +1,28 @@
-import { Spline } from '@signozhq/icons';
+import { useState } from 'react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
+import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
 	PanelPagination,
 	PanelQueryData,
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import { EQueryType } from 'types/common/dashboard';

+import PlotTag from './PlotTag';
 import styles from './PreviewPane.module.scss';

 interface PreviewPaneProps {
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
-	/** Resolved definition for the panel kind; undefined when the kind is unsupported. */
-	panelDef: RenderablePanelDefinition | undefined;
+	/** Resolved definition for the panel kind; */
+	panelDefinition: RenderablePanelDefinition;
 	data: PanelQueryData;
-	isLoading: boolean;
+	/** Any fetch in flight — drives the header spinner and the body's loading state. */
+	isFetching: boolean;
 	error: Error | null;
 	/** Re-run the query (drives PanelBody's error-state retry). */
 	refetch: () => void;
@@ -30,50 +33,69 @@ interface PreviewPaneProps {
 }

 /**
- * Live preview for the panel editor. Renders the draft through the same `PanelBody`
- * the dashboard grid uses (only `panelMode={DASHBOARD_EDIT}` differs), so the preview
- * is the production render path. The query result is owned by the editor root.
+ * Live preview for the panel editor: renders the draft through the same `PanelBody`
+ * the dashboard grid uses (only `panelMode` differs), so the preview is the
+ * production render path. The query result is owned by the editor root.
 */
 function PreviewPane({
 	panelId,
 	panel,
-	panelDef,
+	panelDefinition,
 	data,
-	isLoading,
+	isFetching,
 	error,
 	refetch,
 	onDragSelect,
 	pagination,
 }: PreviewPaneProps): JSX.Element {
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
+	const queryType = getPanelQueryType(panel);
+
+	// Search term is ephemeral preview state, threaded to header + renderer but
+	// not persisted to the draft spec. Only kinds that declare it render the box.
+	const searchable = !!panelDefinition.actions.search;
+	const [searchTerm, setSearchTerm] = useState('');
+
 	return (
 		<div className={styles.preview}>
 			<div className={styles.header}>
-				<div className={styles.queryType}>
-					<Spline size={14} />
-					Plotted with <QueryTypeTag queryType={EQueryType.QUERY_BUILDER} />
+				<PlotTag
+					queryType={queryType}
+					panelType={panelType}
+					className={styles.queryType}
+				/>
+				<div className={styles.dateTimeSelector}>
+					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
 				</div>
-				<DateTimeSelectionV2 showAutoRefresh hideShareModal />
 			</div>
 			<div className={styles.container}>
 				<div className={styles.surface}>
-					{panelDef ? (
-						<PanelBody
-							panelDefinition={panelDef}
-							panel={panel}
-							panelId={panelId}
-							data={data}
-							isLoading={isLoading}
-							error={error}
-							refetch={refetch}
-							onDragSelect={onDragSelect}
-							panelMode={PanelMode.DASHBOARD_EDIT}
-							pagination={pagination}
-						/>
-					) : (
-						<div className={styles.state} data-testid="panel-editor-v2-unknown-kind">
-							This panel type is not yet supported in V2.
-						</div>
-					)}
+					<PanelHeader
+						name={panel.spec.display.name}
+						description={panel.spec.display.description}
+						panelId={panelId}
+						panelKind={panel.spec.plugin.kind}
+						isFetching={isFetching}
+						error={error}
+						warning={data.response?.data?.warning}
+						searchable={searchable}
+						searchTerm={searchTerm}
+						onSearchChange={setSearchTerm}
+						hideActions
+					/>
+					<PanelBody
+						panelDefinition={panelDefinition}
+						panel={panel}
+						panelId={panelId}
+						data={data}
+						isLoading={isFetching}
+						error={error}
+						refetch={refetch}
+						onDragSelect={onDragSelect}
+						panelMode={PanelMode.DASHBOARD_EDIT}
+						searchTerm={searchable ? searchTerm : undefined}
+						pagination={pagination}
+					/>
 				</div>
 			</div>
 		</div>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/tests/PlotTag.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/tests/PlotTag.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { EQueryType } from 'types/common/dashboard';
+
+import PlotTag from '../PlotTag';
+
+describe('PlotTag', () => {
+	it('renders the resolved query mode', () => {
+		render(
+			<PlotTag queryType={EQueryType.PROM} panelType={PANEL_TYPES.TIME_SERIES} />,
+		);
+		expect(screen.getByTestId('panel-editor-plot-tag')).toBeInTheDocument();
+		expect(screen.getByText('PromQL')).toBeInTheDocument();
+	});
+
+	it('renders nothing when there is no query yet', () => {
+		render(<PlotTag queryType={undefined} panelType={PANEL_TYPES.TIME_SERIES} />);
+		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
+	});
+
+	it('renders nothing for list panels (query mode is irrelevant)', () => {
+		render(
+			<PlotTag
+				queryType={EQueryType.QUERY_BUILDER}
+				panelType={PANEL_TYPES.LIST}
+			/>,
+		);
+		expect(screen.queryByTestId('panel-editor-plot-tag')).not.toBeInTheDocument();
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/tests/getSwitchedPluginSpec.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/tests/getSwitchedPluginSpec.test.ts
@@ -0,0 +1,90 @@
+import {
+	TelemetrytypesSignalDTO,
+	type DashboardtypesPanelSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+
+import { defaultColumnsForSignal } from '../ListColumnsEditor/selectFields';
+import { getSwitchedPluginSpec } from '../getSwitchedPluginSpec';
+
+jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
+	getPanelDefinition: jest.fn(),
+}));
+jest.mock('../ListColumnsEditor/selectFields', () => ({
+	defaultColumnsForSignal: jest.fn(),
+}));
+
+const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
+const mockDefaultColumnsForSignal =
+	defaultColumnsForSignal as unknown as jest.Mock;
+
+function specWith(pluginSpec: unknown): DashboardtypesPanelSpecDTO {
+	return {
+		display: { name: 'Panel' },
+		plugin: { kind: 'signoz/TablePanel', spec: pluginSpec },
+		queries: [],
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+describe('getSwitchedPluginSpec', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockDefaultColumnsForSignal.mockReturnValue([]);
+	});
+
+	it('carries only unit + decimalPrecision when the new kind has a formatting section', () => {
+		mockGetPanelDefinition.mockReturnValue({
+			sections: [{ kind: 'formatting', controls: { unit: true, decimals: true } }],
+		});
+		const old = specWith({
+			formatting: { unit: 'ms', decimalPrecision: 2, columnUnits: { A: 'bytes' } },
+			axes: { logScale: true },
+		});
+
+		const result = getSwitchedPluginSpec(old, 'signoz/TimeSeriesPanel');
+
+		expect(result.formatting).toStrictEqual({ unit: 'ms', decimalPrecision: 2 });
+		// Type-specific config from the old kind is dropped.
+		expect((result as { axes?: unknown }).axes).toBeUndefined();
+	});
+
+	it('does not carry formatting when the new kind has no formatting section', () => {
+		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
+		const old = specWith({ formatting: { unit: 'ms' } });
+
+		const result = getSwitchedPluginSpec(
+			old,
+			'signoz/ListPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(result.formatting).toBeUndefined();
+	});
+
+	it('seeds List columns from the signal when switching into a List', () => {
+		const columns = [{ name: 'body' }];
+		mockDefaultColumnsForSignal.mockReturnValue(columns);
+		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
+
+		const result = getSwitchedPluginSpec(
+			specWith({}),
+			'signoz/ListPanel',
+			TelemetrytypesSignalDTO.logs,
+		);
+
+		expect(mockDefaultColumnsForSignal).toHaveBeenCalledWith(
+			TelemetrytypesSignalDTO.logs,
+		);
+		expect(result.selectFields).toBe(columns);
+	});
+
+	it('includes the kind section defaults (e.g. legend position)', () => {
+		mockGetPanelDefinition.mockReturnValue({
+			sections: [{ kind: 'legend', controls: { position: true } }],
+		});
+
+		const result = getSwitchedPluginSpec(specWith({}), 'signoz/PieChartPanel');
+
+		expect(result.legend?.position).toBe('bottom');
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/tests/newPanelRoute.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/tests/newPanelRoute.test.ts
@@ -0,0 +1,34 @@
+import {
+	NEW_PANEL_ID,
+	newPanelSearch,
+	parseNewPanelKind,
+	parseNewPanelLayoutIndex,
+} from '../newPanelRoute';
+
+describe('newPanelRoute', () => {
+	it('round-trips kind + layoutIndex through the new-panel search', () => {
+		const search = newPanelSearch('signoz/ListPanel', 2);
+		expect(parseNewPanelKind(NEW_PANEL_ID, search)).toBe('signoz/ListPanel');
+		expect(parseNewPanelLayoutIndex(search)).toBe(2);
+	});
+
+	it('omits layoutIndex when not provided', () => {
+		const search = newPanelSearch('signoz/TimeSeriesPanel');
+		expect(parseNewPanelKind(NEW_PANEL_ID, search)).toBe(
+			'signoz/TimeSeriesPanel',
+		);
+		expect(parseNewPanelLayoutIndex(search)).toBeUndefined();
+	});
+
+	it('returns null for an existing panel id (not the new sentinel)', () => {
+		const search = newPanelSearch('signoz/ListPanel');
+		expect(parseNewPanelKind('a1b2c3d4-uuid', search)).toBeNull();
+	});
+
+	it('returns null when the kind param is missing or unknown', () => {
+		expect(parseNewPanelKind(NEW_PANEL_ID, '')).toBeNull();
+		expect(
+			parseNewPanelKind(NEW_PANEL_ID, '?panelKind=NotARealPanel'),
+		).toBeNull();
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts
@@ -0,0 +1,67 @@
+import type {
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+	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 type { PanelFormattingSlice } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import {
+	buildDefaultPluginSpec,
+	type DefaultPluginSpec,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultPluginSpec';
+
+import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
+
+/**
+ * Plugin spec produced on a first-time switch to a new kind. A partial cross-section
+ * of the per-kind spec union; the caller assigns it to `plugin.spec` (typed `unknown`)
+ * at the boundary.
+ */
+export interface SwitchedPluginSpec extends DefaultPluginSpec {
+	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+}
+
+/**
+ * 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.
+ *
+ * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
+ */
+export function getSwitchedPluginSpec(
+	oldSpec: DashboardtypesPanelSpecDTO,
+	newKind: PanelKind,
+	signal?: TelemetrytypesSignalDTO,
+): SwitchedPluginSpec {
+	const sections = getPanelDefinition(newKind)?.sections ?? [];
+	const result: SwitchedPluginSpec = buildDefaultPluginSpec(sections);
+
+	if (sections.some((section) => section.kind === 'formatting')) {
+		const oldFormatting = (
+			oldSpec.plugin.spec as {
+				formatting?: PanelFormattingSlice;
+			}
+		).formatting;
+		const carried: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'> = {
+			...(oldFormatting?.unit !== undefined && { unit: oldFormatting.unit }),
+			...(oldFormatting?.decimalPrecision !== undefined && {
+				decimalPrecision: oldFormatting.decimalPrecision,
+			}),
+		};
+		if (Object.keys(carried).length > 0) {
+			result.formatting = carried;
+		}
+	}
+
+	if (sections.some((section) => section.kind === 'columns') && signal) {
+		const columns = defaultColumnsForSignal(signal);
+		if (columns.length > 0) {
+			result.selectFields = columns;
+		}
+	}
+
+	return result;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/tests/usePanelTypeSwitch.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/tests/usePanelTypeSwitch.test.ts
@@ -0,0 +1,190 @@
+import { act, renderHook } from '@testing-library/react';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { handleQueryChange } from 'container/NewWidget/utils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getBuilderQueries } from '../../../Panels/utils/getBuilderQueries';
+import { toPerses } from '../../../queryV5/persesQueryAdapters';
+import { getSwitchedPluginSpec } from '../../getSwitchedPluginSpec';
+import { usePanelTypeSwitch } from '../usePanelTypeSwitch';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('container/NewWidget/utils', () => ({
+	handleQueryChange: jest.fn(),
+	PANEL_TYPE_TO_QUERY_TYPES: {
+		graph: ['builder', 'clickhouse', 'promql'],
+		table: ['builder', 'clickhouse'],
+		list: ['builder'],
+		value: ['builder', 'clickhouse', 'promql'],
+		bar: ['builder', 'clickhouse', 'promql'],
+		pie: ['builder', 'clickhouse'],
+		histogram: ['builder', 'clickhouse', 'promql'],
+	},
+}));
+jest.mock('../../../queryV5/persesQueryAdapters', () => ({
+	toPerses: jest.fn(),
+}));
+jest.mock('../../getSwitchedPluginSpec', () => ({
+	getSwitchedPluginSpec: jest.fn(),
+}));
+jest.mock('../../../Panels/utils/getBuilderQueries', () => ({
+	getBuilderQueries: jest.fn(),
+}));
+
+const mockUseQueryBuilder = useQueryBuilder as unknown as jest.Mock;
+const mockHandleQueryChange = handleQueryChange as unknown as jest.Mock;
+const mockToPerses = toPerses as unknown as jest.Mock;
+const mockGetSwitchedPluginSpec = getSwitchedPluginSpec as unknown as jest.Mock;
+const mockGetBuilderQueries = getBuilderQueries as unknown as jest.Mock;
+
+// Opaque sentinels — the leaf utilities are mocked, so only identity matters.
+const TABLE_PLUGIN_SPEC = { table: true } as unknown;
+const TABLE_QUERIES = [{ id: 'table-q' }] as unknown as NonNullable<
+	DashboardtypesPanelSpecDTO['queries']
+>;
+const LIST_PLUGIN_SPEC = { list: true } as unknown;
+const LIST_QUERIES = [{ id: 'list-q' }] as unknown as NonNullable<
+	DashboardtypesPanelSpecDTO['queries']
+>;
+const TRANSFORMED = {
+	id: 'transformed',
+	queryType: 'builder',
+} as unknown as Query;
+const CONVERTED = [{ id: 'converted' }] as unknown as NonNullable<
+	DashboardtypesPanelSpecDTO['queries']
+>;
+const SWITCHED_SPEC = { switched: true } as unknown;
+
+function makeSpec(
+	kind: string,
+	pluginSpec: unknown,
+	queries: NonNullable<DashboardtypesPanelSpecDTO['queries']>,
+): DashboardtypesPanelSpecDTO {
+	return {
+		display: { name: 'Panel' },
+		plugin: { kind, spec: pluginSpec },
+		queries,
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+const tableSpec = makeSpec(
+	'signoz/TablePanel',
+	TABLE_PLUGIN_SPEC,
+	TABLE_QUERIES,
+);
+const listSpec = makeSpec('signoz/ListPanel', LIST_PLUGIN_SPEC, LIST_QUERIES);
+
+function builderState(currentQuery: Query): {
+	currentQuery: Query;
+	redirectWithQueryBuilderData: jest.Mock;
+} {
+	return { currentQuery, redirectWithQueryBuilderData: jest.fn() };
+}
+
+describe('usePanelTypeSwitch', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockHandleQueryChange.mockReturnValue(TRANSFORMED);
+		mockToPerses.mockReturnValue(CONVERTED);
+		mockGetSwitchedPluginSpec.mockReturnValue(SWITCHED_SPEC);
+		mockGetBuilderQueries.mockReturnValue([{ signal: 'logs' }]);
+	});
+
+	it('does nothing when switching to the current kind', () => {
+		const setSpec = jest.fn();
+		const state = builderState({ id: 'q', queryType: 'builder' } as Query);
+		mockUseQueryBuilder.mockReturnValue(state);
+
+		const { result } = renderHook(() =>
+			usePanelTypeSwitch({
+				spec: tableSpec,
+				panelType: PANEL_TYPES.TABLE,
+				setSpec,
+			}),
+		);
+		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
+
+		expect(setSpec).not.toHaveBeenCalled();
+		expect(state.redirectWithQueryBuilderData).not.toHaveBeenCalled();
+	});
+
+	it('on first visit: transforms the query and resets the spec to the new kind', () => {
+		const setSpec = jest.fn();
+		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
+		const state = builderState(tableQuery);
+		mockUseQueryBuilder.mockReturnValue(state);
+
+		const { result } = renderHook(() =>
+			usePanelTypeSwitch({
+				spec: tableSpec,
+				panelType: PANEL_TYPES.TABLE,
+				setSpec,
+			}),
+		);
+		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
+
+		expect(setSpec).toHaveBeenCalledTimes(1);
+		const next = setSpec.mock.calls[0][0] as DashboardtypesPanelSpecDTO;
+		expect(next.plugin.kind).toBe('signoz/ListPanel');
+		expect(next.plugin.spec).toBe(SWITCHED_SPEC);
+		expect(next.queries).toBe(CONVERTED);
+		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(TRANSFORMED);
+	});
+
+	it('coerces the query type when the new kind disallows it (promql → List)', () => {
+		const setSpec = jest.fn();
+		const promQuery = { id: 'prom', queryType: 'promql' } as Query;
+		mockUseQueryBuilder.mockReturnValue(builderState(promQuery));
+
+		const { result } = renderHook(() =>
+			usePanelTypeSwitch({
+				spec: makeSpec('signoz/TimeSeriesPanel', {}, TABLE_QUERIES),
+				panelType: PANEL_TYPES.TIME_SERIES,
+				setSpec,
+			}),
+		);
+		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
+
+		// List allows only Query Builder, so the promql query is coerced to 'builder'.
+		const [, queryArg] = mockHandleQueryChange.mock.calls[0];
+		expect((queryArg as Query).queryType).toBe('builder');
+	});
+
+	it('restores the original kind verbatim on switch-back (reversibility)', () => {
+		const setSpec = jest.fn();
+		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
+		const listQuery = { id: 'list-current', queryType: 'builder' } as Query;
+		let state = builderState(tableQuery);
+		mockUseQueryBuilder.mockImplementation(() => state);
+
+		const { result, rerender } = renderHook(
+			(props: { spec: DashboardtypesPanelSpecDTO; panelType: PANEL_TYPES }) =>
+				usePanelTypeSwitch({ ...props, setSpec }),
+			{ initialProps: { spec: tableSpec, panelType: PANEL_TYPES.TABLE } },
+		);
+
+		// Leave Table for List (stashes Table in its pristine state).
+		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
+
+		// Parent re-renders as a List panel; the builder now holds the List query.
+		state = builderState(listQuery);
+		rerender({ spec: listSpec, panelType: PANEL_TYPES.LIST });
+
+		// Switch back to Table → restored from the stash, not re-transformed.
+		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
+
+		const restored = setSpec.mock.calls[
+			setSpec.mock.calls.length - 1
+		][0] as DashboardtypesPanelSpecDTO;
+		expect(restored.plugin.kind).toBe('signoz/TablePanel');
+		expect(restored.plugin.spec).toBe(TABLE_PLUGIN_SPEC);
+		expect(restored.queries).toBe(TABLE_QUERIES);
+		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(tableQuery);
+		// The restore path must not run the query transform again.
+		expect(mockHandleQueryChange).toHaveBeenCalledTimes(1);
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/tests/useSwitchColumnsOnSignalChange.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/tests/useSwitchColumnsOnSignalChange.test.ts
@@ -10,10 +10,13 @@ import {
 } from 'container/OptionsMenu/constants';

 import { sanitizeSelectFields } from '../../ListColumnsEditor/selectFields';
-import { useSwitchColumnsOnSignalChange } from '../useSwitchColumnsOnSignalChange';
+import {
+	useSwitchColumnsOnSignalChange,
+	type UseSwitchColumnsOnSignalChangeArgs,
+} from '../useSwitchColumnsOnSignalChange';

-// The hook applies the datasource defaults reduced to the field-key DTO (the V1
-// constants carry extra keys like `isIndexed`); assertions mirror that.
+// V1 constants carry extra keys (e.g. `isIndexed`); the hook reduces them to the
+// field-key DTO, so assertions sanitize the same way.
 const expectedLogs = sanitizeSelectFields(
 	defaultLogsSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
 );
@@ -30,16 +33,12 @@ function makeSpec(
 	} as unknown as DashboardtypesPanelSpecDTO;
 }

-type Props = {
-	enabled: boolean;
-	signal: TelemetrytypesSignalDTO | undefined;
-	spec: DashboardtypesPanelSpecDTO;
-	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-};
-
-function renderWith(initial: Props): { rerender: (next: Props) => void } {
+function renderWith(initial: UseSwitchColumnsOnSignalChangeArgs): {
+	rerender: (next: UseSwitchColumnsOnSignalChangeArgs) => void;
+} {
 	const { rerender } = renderHook(
-		(props: Props) => useSwitchColumnsOnSignalChange(props),
+		(props: UseSwitchColumnsOnSignalChangeArgs) =>
+			useSwitchColumnsOnSignalChange(props),
 		{ initialProps: initial },
 	);
 	return { rerender };
@@ -73,6 +72,45 @@ describe('useSwitchColumnsOnSignalChange', () => {
 		);
 	});

+	it('restores the original columns on logs → traces → logs', () => {
+		// Customized logs selection, not the timestamp/body defaults.
+		const original = [
+			{ name: 'timestamp' },
+			{ name: 'body' },
+			{ name: 'response_status_code' },
+			{ name: 'trace_id' },
+		];
+		// Mirror the real parent: persist the spec so the next switch stashes the
+		// columns the previous one applied.
+		let spec = makeSpec(original);
+		const onChangeSpec = jest.fn((next: DashboardtypesPanelSpecDTO) => {
+			spec = next;
+		});
+		const { rerender } = renderWith({
+			enabled: true,
+			signal: TelemetrytypesSignalDTO.logs,
+			spec,
+			onChangeSpec,
+		});
+
+		rerender({
+			enabled: true,
+			signal: TelemetrytypesSignalDTO.traces,
+			spec,
+			onChangeSpec,
+		});
+		expect(selectFieldsOf(spec)).toStrictEqual(expectedTraces);
+
+		// Switching back restores the original columns, not the log defaults.
+		rerender({
+			enabled: true,
+			signal: TelemetrytypesSignalDTO.logs,
+			spec,
+			onChangeSpec,
+		});
+		expect(selectFieldsOf(spec)).toStrictEqual(original);
+	});
+
 	it('switches to the log defaults when going traces → logs', () => {
 		const onChangeSpec = jest.fn();
 		const spec = makeSpec([{ name: 'service.name' }]);
@@ -114,20 +152,6 @@ describe('useSwitchColumnsOnSignalChange', () => {
 		expect(onChangeSpec).not.toHaveBeenCalled();
 	});

-	it('does not switch on a transient undefined signal', () => {
-		const onChangeSpec = jest.fn();
-		const spec = makeSpec([{ name: 'body' }]);
-		const { rerender } = renderWith({
-			enabled: true,
-			signal: TelemetrytypesSignalDTO.logs,
-			spec,
-			onChangeSpec,
-		});
-
-		rerender({ enabled: true, signal: undefined, spec, onChangeSpec });
-		expect(onChangeSpec).not.toHaveBeenCalled();
-	});
-
 	it('does nothing when disabled (non-List kinds)', () => {
 		const onChangeSpec = jest.fn();
 		const spec = makeSpec([{ name: 'body' }]);
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorQuerySync.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorQuerySync.ts
@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { getIsQueryModified } from 'container/NewWidget/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -19,14 +20,21 @@ interface UsePanelEditorQuerySyncArgs {
 	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
 	/** Re-fetch the preview when the query is unchanged (Stage & Run on a no-op). */
 	refetch: () => void;
+	/**
+	 * Serialize the live query on save even when unchanged. Set for a new panel,
+	 * whose seed query is the builder default (not a real saved query).
+	 */
+	alwaysSerializeQuery?: boolean;
+	/** Signal to seed a new panel's builder with — the kind's first supported signal. */
+	signal?: TelemetrytypesSignalDTO;
 }

 interface UsePanelEditorQuerySyncApi {
 	/** Run the current query (Stage & Run / ⌘↵). */
 	runQuery: () => void;
-	/** True when the live builder query differs from the saved query (compared builder-normalized to avoid re-serialization noise). */
+	/** True when the live builder query differs from the saved query. */
 	isQueryDirty: boolean;
-	/** Bake the live query into a spec for saving so unstaged edits persist; returns the spec untouched when unchanged. */
+	/** Bake the live query into a spec so unstaged edits persist; unchanged → spec untouched. */
 	buildSaveSpec: (
 		spec: DashboardtypesPanelSpecDTO,
 	) => DashboardtypesPanelSpecDTO;
@@ -34,27 +42,36 @@ interface UsePanelEditorQuerySyncApi {

 /**
 * Bridges the shared (URL-synced) query builder and the V2 editor draft: seeds the
- * builder from the saved panel, then commits the active query into `draft.spec.queries`
- * (what the preview fetches) on a query-type/datasource switch and on Stage & Run.
+ * builder from the saved panel, then commits the active query into
+ * `draft.spec.queries` (what the preview fetches) on a query-type/datasource switch
+ * and on Stage & Run.
 */
 export function usePanelEditorQuerySync({
 	draft,
 	panelType,
 	setSpec,
 	refetch,
+	alwaysSerializeQuery = false,
+	signal,
 }: UsePanelEditorQuerySyncArgs): UsePanelEditorQuerySyncApi {
 	const { currentQuery, stagedQuery, handleRunQuery } = useQueryBuilder();

 	// Saved queries, captured once: seed the builder and serve as the restore target.
 	// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only snapshot
 	const savedQueries = useMemo(() => draft.spec?.queries ?? [], []);
+	// A new panel has no saved query: seed from the kind's first supported signal
+	// instead of letting `fromPerses` fall back to the metrics default (which List
+	// doesn't support).
 	const seedQuery = useMemo(
-		() => fromPerses(savedQueries, panelType),
-		[savedQueries, panelType],
+		() =>
+			savedQueries.length === 0 && signal
+				? initialQueriesMap[signal]
+				: fromPerses(savedQueries, panelType),
+		[savedQueries, panelType, signal],
 	);
-	// Force-reset the builder to the SAVED panel on first render only, discarding any
-	// stale URL query from a prior edit — otherwise the QB and preview diverge and the
-	// dirty baseline gets captured from the URL. After mount the URL syncs normally.
+	// Force-reset the builder to the SAVED panel on first render only, discarding a
+	// stale URL query from a prior edit (else the QB/preview diverge and the dirty
+	// baseline is captured from the URL). After mount the URL syncs normally.
 	const isInitialRenderRef = useRef(true);
 	useShareBuilderUrl({
 		defaultValue: seedQuery,
@@ -64,11 +81,10 @@ export function usePanelEditorQuerySync({
 		isInitialRenderRef.current = false;
 	}, []);

-	// Commit the live query into the draft (what the preview fetches). The dirty check
-	// compares against the SAVED query (`seedQuery`), not the URL-synced staged query,
-	// which can carry stale state across a refresh and make a real switch read as
-	// "unchanged". Unchanged → restore saved queries; changed → commit. Returns whether
-	// the draft changed.
+	// Commit the live query into the draft (what the preview fetches). The dirty
+	// check compares against the SAVED query (`seedQuery`), not the URL-synced
+	// staged query, which can carry stale state across a refresh and read a real
+	// switch as "unchanged". Returns whether the draft changed.
 	const commitQuery = useCallback(
 		(query: Query): boolean => {
 			const next = getIsQueryModified(query, seedQuery)
@@ -76,7 +92,7 @@ export function usePanelEditorQuerySync({
 				: savedQueries;
 			// No-op guard at the V5 envelope level: equivalent wrappers (bare
 			// `signoz/BuilderQuery` vs `signoz/CompositeQuery`) unwrap to the same
-			// envelopes, so comparing them structurally would falsely dirty the draft.
+			// envelopes, so a structural compare would falsely dirty the draft.
 			const current = draft.spec?.queries ?? [];
 			if (isEqual(toQueryEnvelopes(next), toQueryEnvelopes(current))) {
 				return false;
@@ -93,8 +109,8 @@ export function usePanelEditorQuerySync({
 	const queryRef = useRef(currentQuery);
 	queryRef.current = currentQuery;

-	// Re-commit on a query-type or datasource switch so the preview refetches. Skip
-	// mount: the draft already holds the saved queries the builder is force-reset to.
+	// Re-commit on a query-type/datasource switch so the preview refetches. Skip
+	// mount: the draft already holds the saved queries the builder is reset to.
 	const dataSourceSignature = useMemo(
 		() =>
 			(currentQuery.builder?.queryData ?? []).map((q) => q.dataSource).join(','),
@@ -119,10 +135,10 @@ export function usePanelEditorQuerySync({
 	}, [handleRunQuery, commitQuery, currentQuery, refetch]);

 	// Dirty baseline: the builder's OWN normalized saved query (first non-null
-	// `stagedQuery` after the mount reset). Comparing builder-normalized to
+	// `stagedQuery` after the mount reset) — comparing builder-normalized to
 	// builder-normalized avoids serialization drift reading an untouched query as
-	// modified. Held in state (not a ref) so capture re-triggers `isQueryDirty`;
-	// captured once and never moved by Stage & Run, so it stays anchored to saved.
+	// modified. In state (not a ref) so capture re-triggers `isQueryDirty`; captured
+	// once and never moved by Stage & Run, so it stays anchored to saved.
 	const [queryBaseline, setQueryBaseline] = useState<Query | null>(null);
 	useEffect(() => {
 		if (queryBaseline === null && stagedQuery) {
@@ -135,10 +151,10 @@ export function usePanelEditorQuerySync({

 	const buildSaveSpec = useCallback(
 		(spec: DashboardtypesPanelSpecDTO): DashboardtypesPanelSpecDTO =>
-			isQueryDirty
+			isQueryDirty || alwaysSerializeQuery
 				? { ...spec, queries: toPerses(currentQuery, panelType) }
 				: spec,
-		[isQueryDirty, currentQuery, panelType],
+		[isQueryDirty, alwaysSerializeQuery, currentQuery, panelType],
 	);

 	return { runQuery, isQueryDirty, buildSaveSpec };
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorSave.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorSave.ts
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';
+import { v4 as uuid } from 'uuid';
 import {
 	getGetDashboardV2QueryKey,
 	usePatchDashboardV2,
@@ -7,12 +8,20 @@ import {
 import {
 	type DashboardtypesJSONPatchOperationDTO,
 	type DashboardtypesPanelSpecDTO,
+	DashboardtypesPanelKindDTO,
 	DashboardtypesPatchOpDTO,
+	type GetDashboardV2200,
 } from 'api/generated/services/sigNoz.schemas';

+import { createPanelOps } from '../../patchOps';
+
 interface UsePanelEditorSaveArgs {
 	dashboardId: string;
 	panelId: string;
+	/** Creating a new panel (vs editing an existing one) — adds panel + layout. */
+	isNew?: boolean;
+	/** Target section for a new panel; falls back to the last/new section. */
+	layoutIndex?: number;
 }

 interface UsePanelEditorSaveApi {
@@ -22,34 +31,49 @@ interface UsePanelEditorSaveApi {
 }

 /**
- * Persists panel edits via a single RFC-6902 `add` op that replaces the whole panel
- * spec at `/spec/panels/{panelId}/spec`, so every config-pane edit is saved (not just
- * title/description). `add` doubles as create-or-replace, avoiding a separate
- * existence check.
+ * Persists panel edits for the V2 editor via RFC-6902 JSON Patch. Editing: one
+ * `add` op replaces the whole spec. Creating (`isNew`): mints a fresh id and adds
+ * a grid item in the target section. Persists only on save — cancelling never
+ * touches the dashboard.
 */
 export function usePanelEditorSave({
 	dashboardId,
 	panelId,
+	isNew = false,
+	layoutIndex,
 }: UsePanelEditorSaveArgs): UsePanelEditorSaveApi {
 	const queryClient = useQueryClient();
 	const { mutateAsync, isLoading, error } = usePatchDashboardV2();

 	const save = useCallback(
 		async (spec: DashboardtypesPanelSpecDTO): Promise<void> => {
-			const ops: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: DashboardtypesPatchOpDTO.add,
-					path: `/spec/panels/${panelId}/spec`,
-					value: spec,
-				},
-			];
+			const dashboardQueryKey = getGetDashboardV2QueryKey({ id: dashboardId });
+
+			let ops: DashboardtypesJSONPatchOperationDTO[];
+			if (isNew) {
+				// Resolve the target section against the freshest dashboard we have.
+				const cached =
+					queryClient.getQueryData<GetDashboardV2200>(dashboardQueryKey);
+				ops = createPanelOps({
+					layouts: cached?.data.spec.layouts ?? [],
+					layoutIndex,
+					panelId: uuid(),
+					panel: { kind: DashboardtypesPanelKindDTO.Panel, spec },
+				});
+			} else {
+				ops = [
+					{
+						op: DashboardtypesPatchOpDTO.add,
+						path: `/spec/panels/${panelId}/spec`,
+						value: spec,
+					},
+				];
+			}

 			await mutateAsync({ pathParams: { id: dashboardId }, data: ops });
-			await queryClient.invalidateQueries(
-				getGetDashboardV2QueryKey({ id: dashboardId }),
-			);
+			await queryClient.invalidateQueries(dashboardQueryKey);
 		},
-		[dashboardId, panelId, mutateAsync, queryClient],
+		[dashboardId, panelId, isNew, layoutIndex, mutateAsync, queryClient],
 	);

 	return { save, isSaving: isLoading, error: (error as Error) ?? null };
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts
@@ -0,0 +1,137 @@
+import { useCallback, useRef } from 'react';
+import type {
+	DashboardtypesPanelPluginDTO,
+	DashboardtypesPanelSpecDTO,
+	DashboardtypesQueryDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	handleQueryChange,
+	PANEL_TYPE_TO_QUERY_TYPES,
+	type PartialPanelTypes,
+} from 'container/NewWidget/utils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from '../../Panels/types/panelKind';
+import { getBuilderQueries } from '../../Panels/utils/getBuilderQueries';
+import { toPerses } from '../../queryV5/persesQueryAdapters';
+import {
+	getSwitchedPluginSpec,
+	type SwitchedPluginSpec,
+} from '../getSwitchedPluginSpec';
+
+/** What a kind looks like when you leave it; restored verbatim if you return. */
+interface KindState {
+	pluginSpec: DashboardtypesPanelPluginDTO['spec'];
+	queries: DashboardtypesQueryDTO[] | null;
+	builderQuery: Query;
+}
+
+interface UsePanelTypeSwitchArgs {
+	spec: DashboardtypesPanelSpecDTO;
+	panelType: PANEL_TYPES;
+	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
+}
+
+interface UsePanelTypeSwitchApi {
+	/** Switch the panel to `newKind`, transforming/restoring its query + spec. */
+	onChangePanelKind: (newKind: PanelKind) => void;
+}
+
+/**
+ * Switches the edited panel's visualization kind. Mutating `plugin.kind` re-derives the
+ * renderer, config sections, query-builder tabs and request type for free; this hook adds
+ * the two things that don't: a per-kind session cache that makes switching reversible
+ * (`Table → List → Table` restores the original query + spec), and, on first visit to a
+ * kind, a query rebuild (`handleQueryChange`) + spec reset (`getSwitchedPluginSpec`).
+ */
+export function usePanelTypeSwitch({
+	spec,
+	panelType,
+	setSpec,
+}: UsePanelTypeSwitchArgs): UsePanelTypeSwitchApi {
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+
+	const cacheRef = useRef<Map<PanelKind, KindState>>(new Map());
+
+	// Latest spec/query/type, read inside the stable callback without re-subscribing.
+	const specRef = useRef(spec);
+	specRef.current = spec;
+	const queryRef = useRef(currentQuery);
+	queryRef.current = currentQuery;
+	const panelTypeRef = useRef(panelType);
+	panelTypeRef.current = panelType;
+
+	const onChangePanelKind = useCallback(
+		(newKind: PanelKind): void => {
+			const currentSpec = specRef.current;
+			const oldKind = currentSpec.plugin.kind as PanelKind;
+			if (newKind === oldKind) {
+				return;
+			}
+			const query = queryRef.current;
+
+			cacheRef.current.set(oldKind, {
+				pluginSpec: currentSpec.plugin.spec,
+				queries: currentSpec.queries ?? null,
+				builderQuery: query,
+			});
+
+			const newPanelType = PANEL_KIND_TO_PANEL_TYPE[newKind];
+
+			// Only `plugin` needs a cast: it's a discriminated union over `kind`, and a
+			// dynamically-chosen kind can't be correlated with its spec statically (as in
+			// `createDefaultPanel`). The surrounding spec stays fully typed.
+			const buildSpec = (
+				pluginSpec: DashboardtypesPanelPluginDTO['spec'] | SwitchedPluginSpec,
+				queries: DashboardtypesQueryDTO[] | null,
+			): DashboardtypesPanelSpecDTO => ({
+				...currentSpec,
+				plugin: {
+					...currentSpec.plugin,
+					kind: newKind,
+					spec: pluginSpec,
+				} as DashboardtypesPanelPluginDTO,
+				queries,
+			});
+
+			// Revisit → restore the stash verbatim (the reversibility path).
+			const cached = cacheRef.current.get(newKind);
+			if (cached) {
+				setSpec(buildSpec(cached.pluginSpec, cached.queries));
+				redirectWithQueryBuilderData(cached.builderQuery);
+				return;
+			}
+
+			// First visit → coerce the query type if the new panel disallows it, then
+			// rebuild the builder query for the new type.
+			const supported = PANEL_TYPE_TO_QUERY_TYPES[newPanelType] ?? [];
+			const queryType = supported.includes(query.queryType)
+				? query.queryType
+				: supported[0];
+			const transformed = handleQueryChange(
+				newPanelType as keyof PartialPanelTypes,
+				{ ...query, queryType },
+				panelTypeRef.current,
+			);
+			const signal = getBuilderQueries(currentSpec.queries)[0]
+				?.signal as TelemetrytypesSignalDTO;
+
+			setSpec(
+				buildSpec(
+					getSwitchedPluginSpec(currentSpec, newKind, signal),
+					toPerses(transformed, newPanelType),
+				),
+			);
+			redirectWithQueryBuilderData(transformed);
+		},
+		[setSpec, redirectWithQueryBuilderData],
+	);
+
+	return { onChangePanelKind };
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useSeedNewListColumns.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useSeedNewListColumns.ts
@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react';
+import type {
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	defaultColumnsForSignal,
+	readSelectFields,
+	writeSelectFields,
+} from '../ListColumnsEditor/selectFields';
+
+interface UseSeedNewListColumnsArgs {
+	/** Gate: a brand-new List panel (the only case that should auto-fill columns). */
+	enabled: boolean;
+	/** Default signal for the new panel — its kind's first supported signal. */
+	signal: TelemetrytypesSignalDTO;
+	spec: DashboardtypesPanelSpecDTO;
+	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
+}
+
+/**
+ * Seeds a brand-new List panel's columns with its default signal's columns so the
+ * Columns control isn't empty on first open. Runs once and only when empty: an
+ * empty selection is a valid "show all fields" state, so existing panels and
+ * user-cleared selections are never touched.
+ */
+export function useSeedNewListColumns({
+	enabled,
+	signal,
+	spec,
+	onChangeSpec,
+}: UseSeedNewListColumnsArgs): void {
+	const seededRef = useRef(false);
+
+	useEffect(() => {
+		if (!enabled || seededRef.current || !signal) {
+			return;
+		}
+		// Only seed when empty — don't clobber a selection that's already present.
+		if (readSelectFields(spec).length > 0) {
+			return;
+		}
+		seededRef.current = true;
+		onChangeSpec(writeSelectFields(spec, defaultColumnsForSignal(signal)));
+	}, [enabled, signal, spec, onChangeSpec]);
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useSwitchColumnsOnSignalChange.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useSwitchColumnsOnSignalChange.ts
@@ -1,52 +1,31 @@
 import { useEffect, useRef } from 'react';
-import {
-	type DashboardtypesPanelSpecDTO,
+
+import type {
+	DashboardtypesPanelSpecDTO,
 	TelemetrytypesSignalDTO,
-	type TelemetrytypesTelemetryFieldKeyDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
+
 import {
-	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
-} from 'container/OptionsMenu/constants';
+	defaultColumnsForSignal,
+	readSelectFields,
+	writeSelectFields,
+} from '../ListColumnsEditor/selectFields';

-import { sanitizeSelectFields } from '../ListColumnsEditor/selectFields';
-
-/**
- * The datasource's default List columns (V1 parity), sanitized to the field-key
- * DTO — the V1 constants carry extra keys (isIndexed) the save contract rejects.
- * Other signals (metrics) don't produce a list, so they clear the selection.
- */
-function defaultColumnsForSignal(
-	signal: TelemetrytypesSignalDTO,
-): TelemetrytypesTelemetryFieldKeyDTO[] {
-	if (signal === TelemetrytypesSignalDTO.logs) {
-		return sanitizeSelectFields(
-			defaultLogsSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
-		);
-	}
-	if (signal === TelemetrytypesSignalDTO.traces) {
-		return sanitizeSelectFields(
-			defaultTraceSelectedColumns as TelemetrytypesTelemetryFieldKeyDTO[],
-		);
-	}
-	return [];
-}
-
-interface UseSwitchColumnsOnSignalChangeArgs {
+export interface UseSwitchColumnsOnSignalChangeArgs {
 	/** Gate so the switch only runs for the List kind (the only one with columns). */
 	enabled: boolean;
 	/** The panel's current telemetry signal (logs / traces / metrics). */
-	signal: TelemetrytypesSignalDTO | undefined;
+	signal: TelemetrytypesSignalDTO;
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
 }

 /**
- * Switches the List panel's chosen columns to the new datasource's defaults when
- * the panel's telemetry signal changes (e.g. logs → traces). V1 kept a separate
- * field list per datasource; V2 stores a single `selectFields`, so columns picked
- * for one signal are meaningless after switching — replace them with the new
- * source's sensible defaults (matching V1's logs/traces list defaults).
+ * Swaps the List panel's columns when the telemetry signal changes. V2 stores a
+ * single `selectFields`, so each signal's columns are stashed and restored on
+ * switch-back; a signal seen for the first time gets the datasource defaults (V1
+ * parity).
 */
 export function useSwitchColumnsOnSignalChange({
 	enabled,
@@ -55,28 +34,28 @@ export function useSwitchColumnsOnSignalChange({
 	onChangeSpec,
 }: UseSwitchColumnsOnSignalChangeArgs): void {
 	const prevSignalRef = useRef(signal);
+	const columnsBySignalRef = useRef<
+		Map<string, TelemetrytypesTelemetryFieldKeyDTO[]>
+	>(new Map());

 	useEffect(() => {
-		const prev = prevSignalRef.current;
-		prevSignalRef.current = signal;
-
 		if (!enabled) {
 			return;
 		}
-		// Only an actual switch between two known signals swaps the columns;
-		// transient `undefined` states (mid query-edit) leave the selection intact.
-		if (!prev || !signal || prev === signal) {
+		const prev = prevSignalRef.current;
+		// Track only real signals: a transient `undefined` (mid query-edit) must
+		// not become `prev`, or stash/restore would lose a step.
+		prevSignalRef.current = signal;
+
+		if (!prev || prev === signal) {
 			return;
 		}
-		onChangeSpec({
-			...spec,
-			plugin: {
-				...spec.plugin,
-				spec: {
-					...spec.plugin.spec,
-					selectFields: defaultColumnsForSignal(signal),
-				},
-			},
-		} as DashboardtypesPanelSpecDTO);
+
+		// Stash the leaving signal's columns; restore the entering one's, or its
+		// datasource defaults the first time it's seen.
+		columnsBySignalRef.current.set(prev, readSelectFields(spec));
+		const restored =
+			columnsBySignalRef.current.get(signal) ?? defaultColumnsForSignal(signal);
+		onChangeSpec(writeSelectFields(spec, restored));
 	}, [enabled, signal, spec, onChangeSpec]);
 }
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx
@@ -6,8 +6,8 @@ import {
 	useDefaultLayout,
 } from '@signozhq/ui/resizable';
 import { toast } from '@signozhq/ui/sonner';
-import type {
-	DashboardtypesPanelDTO,
+import {
+	type DashboardtypesPanelDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -29,6 +29,8 @@ import { usePanelQuery } from '../hooks/usePanelQuery';
 import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
+import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
+import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
 import ListColumnsEditor from './ListColumnsEditor/ListColumnsEditor';
@@ -39,6 +41,10 @@ interface PanelEditorContainerProps {
 	dashboardId: string;
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
+	/** Creating a new panel (seeded default) vs editing an existing one. */
+	isNew?: boolean;
+	/** Target section for a new panel; falls back to the last/new section. */
+	layoutIndex?: number;
 	/** Leave the editor (navigate back to the dashboard) without saving. */
 	onClose: () => void;
 	/** Called after a successful save — navigates back to the dashboard. */
@@ -46,19 +52,26 @@ interface PanelEditorContainerProps {
 }

 /**
- * V2 panel editor page body (rendered full-page by `PanelEditorPage`): a resizable
- * split with the live preview + query builder on the left and the config pane on the
- * right. Owns the draft state and the save round-trip.
+ * V2 panel editor page body: a resizable split with the live preview + query
+ * builder on the left and the config pane on the right. Owns the draft state and
+ * the save round-trip.
 */
 function PanelEditorContainer({
 	dashboardId,
 	panelId,
 	panel,
+	isNew = false,
+	layoutIndex,
 	onClose,
 	onSaved,
 }: PanelEditorContainerProps): JSX.Element {
 	const { draft, spec, setSpec, isSpecDirty } = usePanelEditorDraft(panel);
-	const { save, isSaving } = usePanelEditorSave({ dashboardId, panelId });
+	const { save, isSaving } = usePanelEditorSave({
+		dashboardId,
+		panelId,
+		isNew,
+		layoutIndex,
+	});
 	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
 		id: 'panel-editor-v2',
 		storage: layoutStorage,
@@ -79,47 +92,44 @@ function PanelEditorContainer({
 		PANEL_TYPES.TIME_SERIES;

 	// One shared query result for the whole editor; the preview renders it.
-	const panelDef = getPanelDefinition(draft.spec.plugin.kind);
-	const {
-		data,
-		isLoading,
-		isFetching,
-		error,
-		cancelQuery,
-		refetch,
-		pagination,
-	} = usePanelQuery({
-		panel: draft,
-		panelId,
-		enabled: !!panelDef,
-	});
+	const panelDefinition = getPanelDefinition(draft.spec.plugin.kind);
+	const { data, isFetching, error, cancelQuery, refetch, pagination } =
+		usePanelQuery({
+			panel: draft,
+			panelId,
+			enabled: !!panelDefinition,
+		});
+
+	// A new panel's default signal (its kind's first supported) — seeds the query and columns.
+	const defaultSignal = panelDefinition.supportedSignals[0];

-	// Seed the shared query builder from the draft and expose the Stage-&-Run action.
 	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
 		draft,
 		panelType,
 		setSpec,
 		refetch,
+		// New panel's seed query is the builder default, not a real saved query —
+		// always serialize it on save.
+		alwaysSerializeQuery: isNew,
+		signal: defaultSignal,
 	});

+	// Switch the panel's visualization kind in place (reversible per session).
+	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
+
 	// Spec and query dirtiness are tracked independently so query re-serialization
-	// never false-dirties.
-	const isDirty = isSpecDirty || isQueryDirty;
-	// The List panel edits its columns below the query builder (V1 parity), so the
-	// editor container resolves the committed query's signal once and shares it
-	// with both the columns control and the datasource-switch effect below.
+	// never false-dirties. A new panel is always savable (you're creating it).
+	const isDirty = isNew || isSpecDirty || isQueryDirty;
 	const isListPanel = fullKind === 'signoz/ListPanel';
 	// The builder-query `signal` literal matches the TelemetrytypesSignalDTO enum
 	// values; cast at this boundary (as ConfigPane does) so the columns editor's
 	// field-key lookup is typed.
-	const listSignal = getBuilderQueries(spec.queries)[0]?.signal as
-		| TelemetrytypesSignalDTO
-		| undefined;
+	const listSignal =
+		(getBuilderQueries(spec.queries)[0]?.signal as TelemetrytypesSignalDTO) ||
+		TelemetrytypesSignalDTO.logs;

-	// When the List panel's datasource changes, swap its columns to the new
-	// source's defaults (V1 kept a per-datasource field list; V2 has one
-	// `selectFields`). Driven by the committed query's signal, so it lives in the
-	// editor container alongside the query sync — ConfigPane stays presentational.
+	// Swap the List panel's columns to the new signal's defaults on signal change
+	// (V1 had a per-signal field list; V2 has one `selectFields`).
 	useSwitchColumnsOnSignalChange({
 		enabled: isListPanel,
 		signal: listSignal,
@@ -127,6 +137,14 @@ function PanelEditorContainer({
 		onChangeSpec: setSpec,
 	});

+	// Seed a new List panel's default columns so the Columns control isn't empty.
+	useSeedNewListColumns({
+		enabled: isNew && isListPanel,
+		signal: defaultSignal,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
 	// Drag-to-zoom on the preview updates the URL-synced time window, as on the dashboard.
 	const { onDragSelect } = usePanelInteractions();
 	const legendSeries = useLegendSeries(draft, data);
@@ -166,17 +184,19 @@ function PanelEditorContainer({
 							onLayoutChanged={onMainLayoutChanged}
 						>
 							<ResizablePanel minSize="55%" maxSize="65%" defaultSize="60%">
-								<PreviewPane
-									panelId={panelId}
-									panel={draft}
-									panelDef={panelDef}
-									data={data}
-									isLoading={isLoading}
-									error={error}
-									refetch={refetch}
-									onDragSelect={onDragSelect}
-									pagination={pagination}
-								/>
+								{panelDefinition && (
+									<PreviewPane
+										panelId={panelId}
+										panel={draft}
+										panelDefinition={panelDefinition}
+										data={data}
+										isFetching={isFetching}
+										error={error}
+										refetch={refetch}
+										onDragSelect={onDragSelect}
+										pagination={pagination}
+									/>
+								)}
 							</ResizablePanel>
 							<ResizableHandle withHandle className={styles.handle} />
 							<ResizablePanel minSize="35%" maxSize="45%" defaultSize="40%">
@@ -210,6 +230,7 @@ function PanelEditorContainer({
 						panelKind={draft.spec.plugin.kind}
 						spec={spec}
 						onChangeSpec={setSpec}
+						onChangePanelKind={onChangePanelKind}
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
 					/>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute.ts
@@ -0,0 +1,48 @@
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from '../Panels/types/panelKind';
+
+// New (unsaved) panels share a fixed id segment, carrying kind + target section
+// in the query: `/panel/new?panelKind=signoz/ListPanel&layoutIndex=2`. The real
+// id is generated on save.
+export const NEW_PANEL_ID = 'new';
+const PANEL_KIND_PARAM = 'panelKind';
+const LAYOUT_INDEX_PARAM = 'layoutIndex';
+
+/** Query string (incl. leading `?`) for the new-panel editor route. */
+export function newPanelSearch(
+	panelKind: PanelKind,
+	layoutIndex?: number,
+): string {
+	const params = new URLSearchParams({ [PANEL_KIND_PARAM]: panelKind });
+	if (layoutIndex !== undefined) {
+		params.set(LAYOUT_INDEX_PARAM, String(layoutIndex));
+	}
+	return `?${params.toString()}`;
+}
+
+/**
+ * The PanelKind a `panel/new` route is creating, or null when the id isn't the
+ * new-panel sentinel or the `panelKind` param is missing/unknown (stale link).
+ */
+export function parseNewPanelKind(
+	panelId: string,
+	search: string,
+): PanelKind | null {
+	if (panelId !== NEW_PANEL_ID) {
+		return null;
+	}
+	const kind = new URLSearchParams(search).get(PANEL_KIND_PARAM);
+	return kind && kind in PANEL_KIND_TO_PANEL_TYPE ? (kind as PanelKind) : null;
+}
+
+/** Target section index for a new panel, or undefined when unset/invalid. */
+export function parseNewPanelLayoutIndex(search: string): number | undefined {
+	const raw = new URLSearchParams(search).get(LAYOUT_INDEX_PARAM);
+	if (raw === null || raw === '') {
+		return undefined;
+	}
+	const n = Number(raw);
+	return Number.isNaN(n) ? undefined : n;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.module.scss
@@ -1,11 +0,0 @@
-.noData {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-}
-
-.noDataText {
-	font-size: 14px;
-}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.tsx
@@ -1,27 +1,39 @@
-import { Typography } from '@signozhq/ui/typography';
+import { Clock, RotateCw } from '@signozhq/icons';

-import styles from './NoData.module.scss';
+import PanelMessage from '../PanelMessage/PanelMessage';

 interface NoDataProps {
-	/** Message to display. Defaults to "No data". */
-	label?: string;
+	/** Title override. Defaults to the time-range empty-state copy. */
+	title?: string;
+	/** Description override. Defaults to the "widen the range" hint. */
+	description?: string;
+	/** When provided, renders a Retry button that re-runs the query. */
+	onRetry?: () => void;
 	'data-testid'?: string;
 }

 /**
- * Shared empty-state for panel renderers, shown when a query resolves but
- * returns nothing to plot. Centred in the panel body so every panel kind
- * surfaces the same "No data" affordance instead of each renderer (or its
- * underlying chart) inventing its own copy and casing.
+ * Shared empty-state for panel renderers: wraps `PanelMessage` so every panel
+ * kind surfaces the same "no data" affordance when a query returns nothing.
 */
 function NoData({
-	label = 'No data',
+	title = 'No data in this time range',
+	description = 'Nothing in the selected window. Try widening the range.',
+	onRetry,
 	'data-testid': testId = 'panel-no-data',
 }: NoDataProps): JSX.Element {
 	return (
-		<div className={styles.noData} data-testid={testId}>
-			<Typography.Text className={styles.noDataText}>{label}</Typography.Text>
-		</div>
+		<PanelMessage
+			icon={<Clock size={18} />}
+			title={title}
+			description={description}
+			action={
+				onRetry
+					? { label: 'Retry', onClick: onRetry, icon: <RotateCw size={14} /> }
+					: undefined
+			}
+			data-testid={testId}
+		/>
 	);
 }

--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage.module.scss
@@ -0,0 +1,50 @@
+// Centred, vertically-stacked panel state (no query / no data / error). Fills
+// the panel body below the header and centres its content both axes.
+.message {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	padding: 16px;
+	text-align: center;
+	min-height: 0;
+	min-width: 0;
+}
+
+// Muted glyph in a soft tinted disc so the icon reads as decorative chrome
+// rather than an actionable control.
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	margin-bottom: 4px;
+	border-radius: 8px;
+	color: var(--l2-foreground);
+	background: var(--l2-background);
+}
+
+.iconDanger {
+	color: var(--bg-cherry-500);
+	background: var(--bg-cherry-500-transparent, rgba(231, 64, 64, 0.12));
+}
+
+.title {
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.description {
+	font-size: 12px;
+	color: var(--l2-foreground);
+	max-width: 280px;
+	overflow-wrap: anywhere;
+}
+
+.action {
+	margin-top: 8px;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage.tsx
@@ -0,0 +1,68 @@
+import type { ReactElement, ReactNode } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './PanelMessage.module.scss';
+
+export interface PanelMessageAction {
+	label: string;
+	onClick: () => void;
+	/** Optional leading icon for the action button. */
+	icon?: ReactElement;
+}
+
+interface PanelMessageProps {
+	/** Glyph shown above the title — sets the state's visual identity. */
+	icon: ReactNode;
+	title: string;
+	/** Secondary line explaining the state / suggesting a next step. */
+	description?: string;
+	/** Optional call-to-action (e.g. Retry). Omitted → no button. */
+	action?: PanelMessageAction;
+	/** `danger` tints the icon for failure states; `neutral` for empty states. */
+	tone?: 'neutral' | 'danger';
+	'data-testid'?: string;
+}
+
+/**
+ * Shared centred panel state (icon + title + optional description/action) so the
+ * no-query / no-data / error states stay visually consistent across call sites.
+ */
+function PanelMessage({
+	icon,
+	title,
+	description,
+	action,
+	tone = 'neutral',
+	'data-testid': testId,
+}: PanelMessageProps): JSX.Element {
+	return (
+		<div className={styles.message} data-testid={testId}>
+			<div className={cx(styles.icon, { [styles.iconDanger]: tone === 'danger' })}>
+				{icon}
+			</div>
+			<Typography.Text className={styles.title}>{title}</Typography.Text>
+			{description && (
+				<Typography.Text className={styles.description}>
+					{description}
+				</Typography.Text>
+			)}
+			{action && (
+				<Button
+					variant="outlined"
+					color="secondary"
+					size="sm"
+					prefix={action.icon}
+					onClick={action.onClick}
+					className={styles.action}
+					data-testid={testId ? `${testId}-action` : undefined}
+				>
+					{action.label}
+				</Button>
+			)}
+		</div>
+	);
+}
+
+export default PanelMessage;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/tests/PanelMessage.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/tests/PanelMessage.test.tsx
@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import PanelMessage from '../PanelMessage';
+
+describe('PanelMessage', () => {
+	it('renders the icon, title and description', () => {
+		render(
+			<PanelMessage
+				icon={<svg data-testid="icon" />}
+				title="Nothing to visualize yet"
+				description="This panel has no query."
+				data-testid="panel-state"
+			/>,
+		);
+
+		expect(screen.getByTestId('panel-state')).toBeInTheDocument();
+		expect(screen.getByTestId('icon')).toBeInTheDocument();
+		expect(screen.getByText('Nothing to visualize yet')).toBeInTheDocument();
+		expect(screen.getByText('This panel has no query.')).toBeInTheDocument();
+	});
+
+	it('renders no action button when no action is provided', () => {
+		render(
+			<PanelMessage icon={null} title="No data" data-testid="panel-state" />,
+		);
+
+		expect(screen.queryByTestId('panel-state-action')).not.toBeInTheDocument();
+	});
+
+	it('renders the action button and fires onClick when pressed', () => {
+		const onClick = jest.fn();
+		render(
+			<PanelMessage
+				icon={null}
+				title="Couldn’t load panel data"
+				action={{ label: 'Retry', onClick }}
+				data-testid="panel-error"
+			/>,
+		);
+
+		const button = screen.getByTestId('panel-error-action');
+		expect(button).toHaveTextContent('Retry');
+		fireEvent.click(button);
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx
@@ -32,6 +32,7 @@ function BarPanelRenderer({
 	panelId,
 	panel,
 	data,
+	refetch,
 	onClick,
 	onDragSelect,
 	dashboardPreference,
@@ -42,9 +43,8 @@ function BarPanelRenderer({
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();

-	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesBarChartPanelSpecDTO>(
-		() => panel.spec.plugin.spec as DashboardtypesBarChartPanelSpecDTO,
+		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);

@@ -138,7 +138,7 @@ function BarPanelRenderer({
 			data-testid="bar-panel-renderer"
 			className={PanelStyles.panelContainer}
 		>
-			{flatSeries.length === 0 && <NoData />}
+			{flatSeries.length === 0 && <NoData onRetry={refetch} />}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&
 				containerDimensions.height > 0 && (
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts
@@ -1,15 +1,18 @@
-import { DataSource } from 'types/common/queryBuilder';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 	kind: 'signoz/BarChartPanel',
 	displayName: 'Bar Chart',
 	Renderer,
 	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
 	actions: {
 		view: true,
 		edit: true,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts
@@ -3,7 +3,10 @@ import type { SectionConfig } from '../../types/sections';
 // Bar stacking lives in `visualization.stackedBarChart`, so it's a `visualization`
 // control, not `chartAppearance`. fillSpans is TimeSeries-only, so Bar omits it (V1 parity).
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true, stacking: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true, stacking: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true } },
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx
@@ -26,6 +26,7 @@ function HistogramPanelRenderer({
 	panelId,
 	panel,
 	data,
+	refetch,
 	panelMode,
 	onClick,
 }: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
@@ -34,9 +35,8 @@ function HistogramPanelRenderer({
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();

-	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesHistogramPanelSpecDTO>(
-		() => panel.spec.plugin.spec as DashboardtypesHistogramPanelSpecDTO,
+		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);

@@ -113,7 +113,7 @@ function HistogramPanelRenderer({
 			data-testid="histogram-panel-renderer"
 			className={PanelStyles.panelContainer}
 		>
-			{flatSeries.length === 0 && <NoData />}
+			{flatSeries.length === 0 && <NoData onRetry={refetch} />}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&
 				containerDimensions.height > 0 && (
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts
@@ -1,15 +1,18 @@
-import { DataSource } from 'types/common/queryBuilder';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 	kind: 'signoz/HistogramPanel',
 	displayName: 'Histogram',
 	Renderer,
 	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
 	actions: {
 		view: true,
 		edit: true,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts
@@ -3,6 +3,10 @@ import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services
 import type { SectionConfig } from '../../types/sections';

 export const sections: SectionConfig[] = [
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true },
+	},
 	{
 		kind: 'legend',
 		controls: { position: true },
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/Renderer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/Renderer.tsx
@@ -26,14 +26,14 @@ import { useListRowInteraction } from './useListRowInteraction';

 import styles from './ListPanel.module.scss';

-// `body` flexes to fill the remaining table width (module-level so the resize
-// hook's memo dependency stays referentially stable across renders).
+// `body` flexes to fill remaining width; module-level to stay referentially stable for the resize hook's memo.
 const BODY_FLEX_COLUMNS = ['body'];

 function ListPanelRenderer({
 	panelId,
 	panel,
 	data,
+	refetch,
 	searchTerm = '',
 	pagination,
 }: PanelRendererProps<'signoz/ListPanel'>): JSX.Element {
@@ -42,16 +42,14 @@ function ListPanelRenderer({
 	const { height } = useResizeObserver(containerRef);
 	const { scrollY } = useMemo(() => computeTableLayout(height), [height]);

-	// The registry guarantees this Renderer only runs for `signoz/ListPanel`, so
-	// the cast is a documented boundary narrowing.
+	// `panel` is narrowed to this kind by PanelRendererProps, so no cast needed.
 	const spec = useMemo<DashboardtypesListPanelSpecDTO>(
-		() => (panel.spec.plugin.spec ?? {}) as DashboardtypesListPanelSpecDTO,
+		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);

-	// Telemetry signal of the panel's first builder query — drives data flattening,
-	// per-signal cell rendering, and the row-click behavior (log drawer vs trace
-	// navigation). Cast at this boundary (the query carries the same string values).
+	// Telemetry signal of the first builder query; drives flattening, cell rendering,
+	// and row-click behavior. Cast is safe — the query carries the same string values.
 	const signal = useMemo(
 		() =>
 			(getBuilderQueries(panel.spec.queries)[0]
@@ -83,7 +81,7 @@ function ListPanelRenderer({
 		[table, signal, formatTimezoneAdjustedTimestamp],
 	);

-	// User-resizable columns, persisted per panel; `body` flexes to fill width.
+	// User-resizable columns, persisted per panel.
 	const { columns: resizableColumns, components } = useResizableColumns({
 		panelId,
 		columns,
@@ -92,8 +90,7 @@ function ListPanelRenderer({

 	const dataSource = useMemo(() => table?.rows ?? [], [table]);

-	// Header search filters the current page client-side (V1 parity); paging
-	// across pages is server-side via `pagination`.
+	// Header search filters the current page client-side (V1 parity); cross-page paging is server-side via `pagination`.
 	const filteredDataSource = useMemo(
 		() => filterTableRows(dataSource, searchTerm),
 		[dataSource, searchTerm],
@@ -115,8 +112,7 @@ function ListPanelRenderer({
 		[spec.selectFields],
 	);

-	// Show the footer whenever the panel pages server-side (no explicit query
-	// limit), so the page-size picker is always reachable — V1 parity.
+	// Show the footer whenever the panel pages server-side, so the page-size picker stays reachable (V1 parity).
 	const showPager = !!pagination;

 	return (
@@ -126,7 +122,7 @@ function ListPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{!table || dataSource.length === 0 ? (
-				<NoData />
+				<NoData onRetry={refetch} />
 			) : (
 				<>
 					<div
@@ -142,9 +138,7 @@ function ListPanelRenderer({
 							components={components}
 							dataSource={filteredDataSource}
 							pagination={false}
-							// Scroll the body vertically only — no `x: 'max-content'`, which
-							// forced a content-width min and pushed columns off-screen;
-							// `tableLayout="fixed"` fits them to the available width.
+							// Vertical scroll only; `x: 'max-content'` forced a content-width min that pushed columns off-screen.
 							scroll={{ y: scrollY }}
 							onRow={onRow}
 						/>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/tests/Renderer.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/tests/Renderer.test.tsx
@@ -1,6 +1,5 @@
 import {
 	type DashboardtypesListPanelSpecDTO,
-	type DashboardtypesPanelDTO,
 	type QueryRangeV5200,
 } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
@@ -10,16 +9,19 @@ import type {
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
 import { fireEvent, render } from 'tests/test-utils';

-import { BaseRendererProps } from '../../../types/rendererProps';
+import type {
+	PanelOfKind,
+	PanelRendererProps,
+} from '../../../types/rendererProps';
 import ListPanelRenderer from '../Renderer';

 function panelWith(
 	spec: DashboardtypesListPanelSpecDTO,
-): DashboardtypesPanelDTO {
+): PanelOfKind<'signoz/ListPanel'> {
 	return {
 		kind: 'Panel',
 		spec: { plugin: { kind: 'signoz/ListPanel', spec } },
-	} as unknown as DashboardtypesPanelDTO;
+	} as unknown as PanelOfKind<'signoz/ListPanel'>;
 }

 // V5 raw response: one result carrying flattened log rows.
@@ -49,9 +51,9 @@ const emptyData: PanelQueryData = {
 };

 function renderPanel(
-	props: Partial<BaseRendererProps>,
+	props: Partial<PanelRendererProps<'signoz/ListPanel'>>,
 ): ReturnType<typeof render> {
-	const baseProps: BaseRendererProps = {
+	const baseProps: PanelRendererProps<'signoz/ListPanel'> = {
 		panelId: 'panel-1',
 		panel: panelWith({}),
 		data: emptyData,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/definition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/definition.ts
@@ -1,15 +1,17 @@
-import { DataSource } from 'types/common/queryBuilder';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 export const definition: PanelDefinition<'signoz/ListPanel'> = {
 	kind: 'signoz/ListPanel',
 	displayName: 'List',
 	Renderer,
 	// Raw records come from logs and traces; metrics don't produce row data.
-	supportedSignals: [DataSource.LOGS, DataSource.TRACES],
+	supportedSignals: [
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
 	sections,
 	actions: {
 		view: true,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/sections.ts
@@ -1,5 +1,8 @@
 import type { SectionConfig } from '../../types/sections';

-// List columns are edited below the query builder, not in the config pane, so
-// only Context Links shows here.
-export const sections: SectionConfig[] = [{ kind: 'contextLinks' }];
+export const sections: SectionConfig[] = [
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true },
+	},
+];
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx
@@ -16,10 +16,10 @@ import ValueDisplay from './components/ValueDisplay/ValueDisplay';
 function NumberPanelRenderer({
 	panel,
 	data,
+	refetch,
 }: PanelRendererProps<'signoz/NumberPanel'>): JSX.Element {
-	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesNumberPanelSpecDTO>(
-		() => panel.spec.plugin.spec as DashboardtypesNumberPanelSpecDTO,
+		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);

@@ -60,7 +60,7 @@ function NumberPanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{value === null ? (
-				<NoData data-testid="number-panel-no-data" />
+				<NoData data-testid="number-panel-no-data" onRetry={refetch} />
 			) : (
 				<ValueDisplay
 					value={formattedValue}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts
@@ -1,15 +1,18 @@
-import { DataSource } from 'types/common/queryBuilder';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 	kind: 'signoz/NumberPanel',
 	displayName: 'Number',
 	Renderer,
 	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
 	actions: {
 		view: true,
 		edit: true,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/sections.ts
@@ -1,7 +1,10 @@
 import type { SectionConfig } from '../../types/sections';

 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'thresholds', controls: { variant: 'comparison' } },
 	{ kind: 'contextLinks' },
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx
@@ -20,13 +20,13 @@ function PiePanelRenderer({
 	panelId,
 	panel,
 	data,
+	refetch,
 	onClick,
 }: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
 	const isDarkMode = useIsDarkMode();

-	// The registry guarantees the kind, so the cast is a boundary narrowing.
 	const spec = useMemo<DashboardtypesPieChartPanelSpecDTO>(
-		() => panel.spec.plugin.spec as DashboardtypesPieChartPanelSpecDTO,
+		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);

@@ -70,7 +70,7 @@ function PiePanelRenderer({
 	return (
 		<div data-testid="pie-panel-renderer" className={PanelStyles.panelContainer}>
 			{slices.length === 0 ? (
-				<NoData />
+				<NoData onRetry={refetch} />
 			) : (
 				<Pie
 					data={slices}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts
@@ -1,15 +1,18 @@
-import { DataSource } from 'types/common/queryBuilder';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	kind: 'signoz/PieChartPanel',
 	displayName: 'Pie Chart',
 	Renderer,
 	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
 	actions: {
 		view: true,
 		edit: true,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts
@@ -3,7 +3,10 @@ import type { SectionConfig } from '../../types/sections';
 // Pie has no axes, thresholds, or stacking — just value formatting and a legend.
 // Legend `colors` is omitted: the pie legend is always interactive swatches.
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'legend', controls: { position: true } },
 	{ kind: 'contextLinks' },
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/Renderer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/Renderer.tsx
@@ -25,10 +25,10 @@ function TablePanelRenderer({
 	panelId,
 	panel,
 	data,
+	refetch,
 	searchTerm = '',
 }: PanelRendererProps<'signoz/TablePanel'>): JSX.Element {
-	// Measure the panel so each page roughly fills it (min 10 rows) and the
-	// header stays pinned while the body scrolls.
+	// Measure the panel so each page roughly fills it (min 10 rows) with a pinned header.
 	const containerRef = useRef<HTMLDivElement>(null);
 	const { height } = useResizeObserver(containerRef);
 	const { pageSize, scrollY } = useMemo(
@@ -36,12 +36,9 @@ function TablePanelRenderer({
 		[height],
 	);

-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/TablePanel'`, so the cast is a
-	// documented boundary narrowing. Memoized so the `?? {}` fallback doesn't
-	// produce a fresh object on each render.
+	// `panel` is narrowed to this kind by PanelRendererProps, so no cast needed.
 	const spec = useMemo<DashboardtypesTablePanelSpecDTO>(
-		() => (panel.spec.plugin.spec ?? {}) as DashboardtypesTablePanelSpecDTO,
+		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);

@@ -92,15 +89,13 @@ function TablePanelRenderer({
 		[table],
 	);

-	// Header search filters rows client-side (V1 parity). Falls back to the full
-	// set when the term is empty, so non-searching tables pay nothing.
+	// Header search filters rows client-side (V1 parity); empty term returns the full set, so non-searching tables pay nothing.
 	const filteredDataSource = useMemo(
 		() => filterTableRows(dataSource, searchTerm),
 		[dataSource, searchTerm],
 	);

-	// Keep pagination in range as the filtered set shrinks: a new term snaps back
-	// to the first page so the user never lands on a now-empty page.
+	// Snap back to page 1 on a new search term so the filtered set never lands on a now-empty page.
 	const [page, setPage] = useState(1);
 	useEffect(() => setPage(1), [searchTerm]);

@@ -111,7 +106,7 @@ function TablePanelRenderer({
 			className={PanelStyles.panelContainer}
 		>
 			{!table || dataSource.length === 0 ? (
-				<NoData />
+				<NoData onRetry={refetch} />
 			) : (
 				<div className={styles.container}>
 					<Table
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/tests/Renderer.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/tests/Renderer.test.tsx
@@ -1,5 +1,4 @@
 import {
-	type DashboardtypesPanelDTO,
 	type DashboardtypesTablePanelSpecDTO,
 	type QueryRangeV5200,
 } from 'api/generated/services/sigNoz.schemas';
@@ -7,16 +6,19 @@ import { PanelMode } from 'container/DashboardContainer/visualization/panels/typ
 import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
 import { render } from 'tests/test-utils';

-import { BaseRendererProps } from '../../../types/rendererProps';
+import type {
+	PanelOfKind,
+	PanelRendererProps,
+} from '../../../types/rendererProps';
 import TablePanelRenderer from '../Renderer';

 function panelWith(
 	spec: DashboardtypesTablePanelSpecDTO,
-): DashboardtypesPanelDTO {
+): PanelOfKind<'signoz/TablePanel'> {
 	return {
 		kind: 'Panel',
 		spec: { plugin: { kind: 'signoz/TablePanel', spec } },
-	} as unknown as DashboardtypesPanelDTO;
+	} as unknown as PanelOfKind<'signoz/TablePanel'>;
 }

 // V5 scalar response: one joined result with a group column + an aggregation column.
@@ -60,9 +62,9 @@ const emptyData: PanelQueryData = {
 };

 function renderPanel(
-	props: Partial<BaseRendererProps>,
+	props: Partial<PanelRendererProps<'signoz/TablePanel'>>,
 ): ReturnType<typeof render> {
-	const baseProps: BaseRendererProps = {
+	const baseProps: PanelRendererProps<'signoz/TablePanel'> = {
 		panelId: 'panel-1',
 		panel: panelWith({}),
 		data: emptyData,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/definition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/definition.ts
@@ -1,15 +1,18 @@
-import { DataSource } from 'types/common/queryBuilder';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	kind: 'signoz/TablePanel',
 	displayName: 'Table',
 	Renderer,
 	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
 	// Tables carry tabular data worth exporting (V1 parity: download is table-only).
 	actions: {
 		view: true,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/sections.ts
@@ -4,7 +4,10 @@ import type { SectionConfig } from '../../types/sections';
 // single column set). It exposes the per-panel time scope, formatting (decimals +
 // per-column units), per-column thresholds, and context links.
 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true },
+	},
 	{ kind: 'formatting', controls: { decimals: true, columnUnits: true } },
 	{ kind: 'thresholds', controls: { variant: 'table' } },
 	{ kind: 'contextLinks' },
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx
@@ -32,6 +32,7 @@ function TimeSeriesPanelRenderer({
 	panelId,
 	panel,
 	data,
+	refetch,
 	onClick,
 	onDragSelect,
 	dashboardPreference,
@@ -42,10 +43,8 @@ function TimeSeriesPanelRenderer({
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();

-	// The registry guarantees the kind, so the cast is a boundary narrowing.
-	// Memoized so the `?? {}` fallback doesn't produce a fresh object each render.
 	const spec = useMemo<DashboardtypesTimeSeriesPanelSpecDTO>(
-		() => (panel.spec.plugin.spec ?? {}) as DashboardtypesTimeSeriesPanelSpecDTO,
+		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);

@@ -140,7 +139,7 @@ function TimeSeriesPanelRenderer({
 			data-testid="time-series-renderer"
 			className={PanelStyles.panelContainer}
 		>
-			{flatSeries.length === 0 && <NoData />}
+			{flatSeries.length === 0 && <NoData onRetry={refetch} />}
 			{flatSeries.length > 0 &&
 				containerDimensions.width > 0 &&
 				containerDimensions.height > 0 && (
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts
@@ -1,15 +1,18 @@
-import { DataSource } from 'types/common/queryBuilder';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 	kind: 'signoz/TimeSeriesPanel',
 	displayName: 'Time Series',
 	Renderer,
 	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
 	actions: {
 		view: true,
 		edit: true,
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts
@@ -1,7 +1,10 @@
 import type { SectionConfig } from '../../types/sections';

 export const sections: SectionConfig[] = [
-	{ kind: 'visualization', controls: { timePreference: true, fillSpans: true } },
+	{
+		kind: 'visualization',
+		controls: { switchPanelKind: true, timePreference: true, fillSpans: true },
+	},
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true, colors: true } },
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/registry.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/registry.ts
@@ -11,9 +11,7 @@ import type {
 } from './types/panelDefinition';
 import { PanelKind } from './types/panelKind';

-// Pure assembly: each kind owns its own PanelDefinition (see
-// `kinds/<Kind>/definition.ts`). Registering a new panel = add its folder and a
-// single entry below — no other central file needs editing.
+// Each kind owns its PanelDefinition; registering a new panel is one entry here.
 export const PANELS: PanelRegistry = {
 	[TimeSeries.kind]: TimeSeries,
 	[BarChart.kind]: BarChart,
@@ -24,15 +22,8 @@ export const PANELS: PanelRegistry = {
 	[List.kind]: List,
 };

-export function getPanelDefinition(
-	kind: PanelKind,
-): RenderablePanelDefinition | undefined {
-	if (!kind) {
-		return undefined;
-	}
-	// The registry is correlated by kind, so a string lookup yields a union over
-	// every kind's exactly-typed definition. The renderer cannot be validated
-	// against that union at the JSX boundary, so widen to the kind-agnostic
-	// surface here — the single, intentional cast for the whole panel system.
-	return PANELS[kind] as unknown as RenderablePanelDefinition | undefined;
+export function getPanelDefinition(kind: PanelKind): RenderablePanelDefinition {
+	// Single intentional cast widening the per-kind Renderer to the kind-agnostic
+	// prop surface (a per-kind renderer can't be statically validated against the union).
+	return PANELS[kind] as RenderablePanelDefinition;
 }
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts
@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import { DataSource } from 'types/common/queryBuilder';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';

 import type { SectionConfig } from './sections';
 import type { AnyPanelInteractionProps } from './interactions';
@@ -35,12 +35,13 @@ export interface PanelDefinition<K extends PanelKind = PanelKind> {
 	displayName: string;
 	Renderer: ComponentType<PanelRendererProps<K>>;
 	sections: SectionConfig[];
-	supportedSignals: DataSource[];
+	supportedSignals: TelemetrytypesSignalDTO[];
 	actions: PanelActionCapabilities;
 }

-// Indexing with a literal kind yields that kind's exactly-typed PanelDefinition.
-export type PanelRegistry = { [K in PanelKind]?: PanelDefinition<K> };
+// Total over PanelKind: every kind must be registered (missing → compile error),
+// so getPanelDefinition never returns undefined.
+export type PanelRegistry = { [K in PanelKind]: PanelDefinition<K> };

 // PanelDefinition with its Renderer widened to the kind-agnostic prop surface.
 // getPanelDefinition resolves to this, concentrating the unavoidable cast in one
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps.ts
@@ -1,4 +1,8 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesPanelDTO,
+	DashboardtypesPanelPluginDTO,
+	DashboardtypesPanelSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
@@ -22,37 +26,59 @@ export interface DashboardPreference {
 	dashboardId?: string;
 }

-// Kind-agnostic props every renderer receives. Kind-specific interaction props
-// are layered on per-kind by PanelRendererProps<K>.
+/** Kind-agnostic props every renderer receives; kind-specific interactions are layered on by PanelRendererProps<K>. */
 export interface BaseRendererProps {
 	panelId: string;
-	/**
-	 * The whole perses panel — renderers derive `spec` and `queries` from this.
-	 * Required: the render boundary only mounts a renderer once the panel and its
-	 * kind are resolved, so a renderer never sees an absent panel.
-	 */
+	/** The whole panel — renderers derive `spec` and `queries` from it. Required: the render boundary only mounts once panel + kind resolve. */
 	panel: DashboardtypesPanelDTO;
 	/** Raw V5 fetch result — response + the request that produced it. */
 	data: PanelQueryData;
 	isLoading: boolean;
 	error: Error | null;
+	/** Re-run the panel query; wired to the no-data Retry affordance. Optional so standalone call sites (e.g. the editor preview) can omit it. */
+	refetch?: () => void;
 	/** Gate for the drill-down right-click menu. Off by default in V2. */
 	enableDrillDown?: boolean;
 	/** Render context (dashboard widget vs. standalone vs. editor); see PanelMode. */
 	panelMode: PanelMode;
 	/** Dashboard-level preferences propagated to every panel; shell resolves, renderer consumes. */
 	dashboardPreference?: DashboardPreference;
-	/**
-	 * Free-text filter from the header search box, applied client-side. Only
-	 * meaningful for kinds that declare `actions.search`; others ignore it.
-	 */
+	/** Free-text header filter, applied client-side. Only meaningful for kinds that declare `actions.search`. */
 	searchTerm?: string;
 	/** Server-side paging handles. Present only for raw/list panels; others ignore it. */
 	pagination?: PanelPagination;
 }

-// Renderer props for a specific kind: shared base plus that kind's interaction
-// surface. Indexing PanelInteractionMap forces it to cover every PanelKind; the
-// default K = PanelKind yields the widest surface (a union over all kinds).
-export type PanelRendererProps<K extends PanelKind = PanelKind> =
-	BaseRendererProps & PanelInteractionMap[K];
+// The single plugin variant for kind K, picked from the generated plugin union.
+// Distributes over the union, coercing each member's nominal kind-enum to its
+// string value (`${VK & string}`) to match K. K = PanelKind recovers the full union.
+type PluginOfKind<K extends PanelKind> =
+	DashboardtypesPanelPluginDTO extends infer V
+		? V extends { kind: infer VK }
+			? `${VK & string}` extends K
+				? V
+				: never
+			: never
+		: never;
+
+// The panel narrowed to kind K: the wire DTO with `plugin` (and `plugin.spec`)
+// fixed to K's single variant, so a renderer reads `panel.spec.plugin.spec` as
+// its own spec type with no cast.
+export type PanelOfKind<K extends PanelKind = PanelKind> = Omit<
+	DashboardtypesPanelDTO,
+	'spec'
+> & {
+	spec: Omit<DashboardtypesPanelSpecDTO, 'plugin'> & {
+		plugin: PluginOfKind<K>;
+	};
+};
+
+// Renderer props for kind K: the base (with `panel` narrowed to K) plus K's
+// interaction surface (PanelInteractionMap[K]), so a renderer sees its exact spec
+// and only the gestures it supports. The default K = PanelKind is the widest surface.
+export type PanelRendererProps<K extends PanelKind = PanelKind> = Omit<
+	BaseRendererProps,
+	'panel'
+> & {
+	panel: PanelOfKind<K>;
+} & PanelInteractionMap[K];
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/sections.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/sections.ts
@@ -89,8 +89,11 @@ export interface SectionControls {
 		spanGaps?: boolean;
 	};
 	buckets: { count?: boolean; width?: boolean; mergeQueries?: boolean };
-	// stacking → stackedBarChart (Bar); fillSpans → fill gaps with 0 (TimeSeries).
+	// switchPanelKind → the visualization-type switcher (every kind, so you can switch
+	// away from any panel); stacking → stackedBarChart (Bar); fillSpans → fill gaps with
+	// 0 (TimeSeries).
 	visualization: {
+		switchPanelKind: boolean;
 		timePreference?: boolean;
 		stacking?: boolean;
 		fillSpans?: boolean;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/tests/buildDefaultPluginSpec.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/tests/buildDefaultPluginSpec.test.ts
@@ -0,0 +1,67 @@
+import {
+	DashboardtypesFillModeDTO,
+	DashboardtypesLegendPositionDTO,
+	DashboardtypesLineInterpolationDTO,
+	DashboardtypesLineStyleDTO,
+	DashboardtypesTimePreferenceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { sections as barSections } from '../../kinds/BarChartPanel/sections';
+import { sections as histogramSections } from '../../kinds/HistogramPanel/sections';
+import { sections as listSections } from '../../kinds/ListPanel/sections';
+import { sections as timeSeriesSections } from '../../kinds/TimeSeriesPanel/sections';
+import type { SectionConfig } from '../../types/sections';
+import { buildDefaultPluginSpec } from '../buildDefaultPluginSpec';
+
+describe('buildDefaultPluginSpec', () => {
+	it('seeds the TimeSeries dropdowns/segmented controls with their renderer defaults', () => {
+		expect(buildDefaultPluginSpec(timeSeriesSections)).toStrictEqual({
+			visualization: {
+				timePreference: DashboardtypesTimePreferenceDTO.global_time,
+			},
+			legend: { position: DashboardtypesLegendPositionDTO.bottom },
+			chartAppearance: {
+				lineStyle: DashboardtypesLineStyleDTO.solid,
+				lineInterpolation: DashboardtypesLineInterpolationDTO.spline,
+				fillMode: DashboardtypesFillModeDTO.none,
+			},
+		});
+	});
+
+	it('omits chartAppearance for a kind that does not declare it (Bar)', () => {
+		expect(buildDefaultPluginSpec(barSections)).toStrictEqual({
+			visualization: {
+				timePreference: DashboardtypesTimePreferenceDTO.global_time,
+			},
+			legend: { position: DashboardtypesLegendPositionDTO.bottom },
+		});
+	});
+
+	it('seeds only the legend for Histogram (no visualization section)', () => {
+		expect(buildDefaultPluginSpec(histogramSections)).toStrictEqual({
+			legend: { position: DashboardtypesLegendPositionDTO.bottom },
+		});
+	});
+
+	it('returns an empty spec for a kind with no seeded controls (List)', () => {
+		expect(buildDefaultPluginSpec(listSections)).toStrictEqual({});
+	});
+
+	it('does not seed controls that already show a clear default', () => {
+		// `axes` and `formatting` stay unset — their empty state is the chart default.
+		const sections: SectionConfig[] = [
+			{ kind: 'axes', controls: { minMax: true, logScale: true } },
+			{ kind: 'formatting', controls: { unit: true, decimals: true } },
+			{ kind: 'thresholds', controls: { variant: 'label' } },
+			{ kind: 'contextLinks' },
+		];
+		expect(buildDefaultPluginSpec(sections)).toStrictEqual({});
+	});
+
+	it('only seeds the legend position when the kind exposes that control', () => {
+		const sections: SectionConfig[] = [
+			{ kind: 'legend', controls: { colors: true } },
+		];
+		expect(buildDefaultPluginSpec(sections)).toStrictEqual({});
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/tests/buildDefaultQueries.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/tests/buildDefaultQueries.test.ts
@@ -0,0 +1,20 @@
+import { buildDefaultQueries } from '../buildDefaultQueries';
+
+describe('buildDefaultQueries', () => {
+	it('seeds a List panel with a runnable logs query ordered by timestamp desc', () => {
+		const queries = buildDefaultQueries('signoz/ListPanel');
+
+		expect(queries).toHaveLength(1);
+		// orderBy timestamp desc must survive serialization so the preview opens
+		// pre-sorted (V1 parity).
+		const serialized = JSON.stringify(queries);
+		expect(serialized).toContain('timestamp');
+		expect(serialized).toContain('desc');
+		expect(serialized.toLowerCase()).toContain('logs');
+	});
+
+	it('seeds no query for non-List kinds (they seed from the builder)', () => {
+		expect(buildDefaultQueries('signoz/TimeSeriesPanel')).toStrictEqual([]);
+		expect(buildDefaultQueries('signoz/NumberPanel')).toStrictEqual([]);
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/tests/getPanelQueryType.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/tests/getPanelQueryType.test.ts
@@ -0,0 +1,50 @@
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+import { getPanelQueryType } from '../getPanelQueryType';
+
+function panelWithEnvelopes(envelopes: unknown[]): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'P' },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: envelopes.length
+				? [
+						{
+							spec: {
+								plugin: { kind: 'signoz/CompositeQuery', spec: { queries: envelopes } },
+							},
+						},
+					]
+				: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+describe('getPanelQueryType', () => {
+	it('returns undefined when the panel has no query', () => {
+		expect(getPanelQueryType(panelWithEnvelopes([]))).toBeUndefined();
+	});
+
+	it('reports the builder mode for builder queries', () => {
+		const panel = panelWithEnvelopes([
+			{ type: 'builder_query', spec: { signal: 'traces', name: 'A' } },
+		]);
+		expect(getPanelQueryType(panel)).toBe(EQueryType.QUERY_BUILDER);
+	});
+
+	it('reports PromQL when a promql envelope is present', () => {
+		const panel = panelWithEnvelopes([
+			{ type: 'promql', spec: { query: 'up', name: 'A' } },
+		]);
+		expect(getPanelQueryType(panel)).toBe(EQueryType.PROM);
+	});
+
+	it('reports ClickHouse when a clickhouse_sql envelope is present', () => {
+		const panel = panelWithEnvelopes([
+			{ type: 'clickhouse_sql', spec: { query: 'SELECT 1', name: 'A' } },
+		]);
+		expect(getPanelQueryType(panel)).toBe(EQueryType.CLICKHOUSE);
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultPluginSpec.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultPluginSpec.ts
@@ -0,0 +1,69 @@
+import {
+	DashboardtypesFillModeDTO,
+	DashboardtypesLegendPositionDTO,
+	DashboardtypesLineInterpolationDTO,
+	DashboardtypesLineStyleDTO,
+	DashboardtypesTimePreferenceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import type { SectionConfig, SectionSpecMap } from '../types/sections';
+
+/**
+ * Seeded plugin-spec slices, typed as canonical section slices so each value is
+ * checked against its DTO. A partial cross-section, not any single kind's spec,
+ * so the union cast stays localized to `createDefaultPanel`.
+ */
+export interface DefaultPluginSpec {
+	visualization?: SectionSpecMap['visualization'];
+	legend?: SectionSpecMap['legend'];
+	chartAppearance?: SectionSpecMap['chartAppearance'];
+}
+
+/**
+ * Seeds per-kind config defaults derived from the kind's declared `sections` so the
+ * config pane opens populated. Values equal the renderer fallbacks (display only).
+ * Controls whose empty state already IS the default are left unset.
+ */
+export function buildDefaultPluginSpec(
+	sections: SectionConfig[],
+): DefaultPluginSpec {
+	const spec: DefaultPluginSpec = {};
+
+	sections.forEach((section) => {
+		switch (section.kind) {
+			case 'visualization':
+				if (section.controls.timePreference) {
+					spec.visualization = {
+						timePreference: DashboardtypesTimePreferenceDTO.global_time,
+					};
+				}
+				break;
+			case 'legend':
+				if (section.controls.position) {
+					spec.legend = { position: DashboardtypesLegendPositionDTO.bottom };
+				}
+				break;
+			case 'chartAppearance': {
+				const chartAppearance: SectionSpecMap['chartAppearance'] = {};
+				if (section.controls.lineStyle) {
+					chartAppearance.lineStyle = DashboardtypesLineStyleDTO.solid;
+				}
+				if (section.controls.lineInterpolation) {
+					chartAppearance.lineInterpolation =
+						DashboardtypesLineInterpolationDTO.spline;
+				}
+				if (section.controls.fillMode) {
+					chartAppearance.fillMode = DashboardtypesFillModeDTO.none;
+				}
+				if (Object.keys(chartAppearance).length > 0) {
+					spec.chartAppearance = chartAppearance;
+				}
+				break;
+			}
+			default:
+				break;
+		}
+	});
+
+	return spec;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultQueries.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultQueries.ts
@@ -0,0 +1,14 @@
+import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
+import { listViewInitialLogQuery, PANEL_TYPES } from 'constants/queryBuilder';
+
+import { toPerses } from '../../queryV5/persesQueryAdapters';
+import { PANEL_KIND_TO_PANEL_TYPE, type PanelKind } from '../types/panelKind';
+
+/** Seed query for a new panel. Only List needs one (logs, timestamp desc) so its
+ * preview runs on open; other kinds start empty and seed from the builder. */
+export function buildDefaultQueries(kind: PanelKind): DashboardtypesQueryDTO[] {
+	if (PANEL_KIND_TO_PANEL_TYPE[kind] === PANEL_TYPES.LIST) {
+		return toPerses(listViewInitialLogQuery, PANEL_TYPES.LIST);
+	}
+	return [];
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType.ts
@@ -0,0 +1,20 @@
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+import { toQueryEnvelopes } from '../../queryV5/buildQueryRangeRequest';
+import { deriveQueryType } from '../../queryV5/persesQueryAdapters';
+
+/**
+ * The authoring mode (builder / ClickHouse / PromQL) of a panel's query. Returns
+ * `undefined` when the panel has no query yet so callers can hide query-type chrome
+ * (e.g. the editor preview's "Plotted with" tag) rather than defaulting to builder.
+ */
+export function getPanelQueryType(
+	panel: DashboardtypesPanelDTO,
+): EQueryType | undefined {
+	const envelopes = toQueryEnvelopes(panel.spec.queries);
+	if (envelopes.length === 0) {
+		return undefined;
+	}
+	return deriveQueryType(envelopes);
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/DashboardEmptyState/DashboardEmptyState.tsx
@@ -1,11 +1,12 @@
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';

 import dashboardEmojiUrl from '@/assets/Icons/dashboard_emoji.svg';
 import landscapeUrl from '@/assets/Icons/landscape.svg';

+import { useCreatePanel } from '../../hooks/useCreatePanel';
+import PanelTypeSelectionModal from '../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import styles from './DashboardEmptyState.module.scss';

 interface DashboardEmptyStateProps {
@@ -15,9 +16,8 @@ interface DashboardEmptyStateProps {
 function DashboardEmptyState({
 	canAddPanel,
 }: DashboardEmptyStateProps): JSX.Element {
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();

 	return (
 		<section className={styles.emptyState}>
@@ -48,7 +48,7 @@ function DashboardEmptyState({
 						<Button
 							color="primary"
 							prefix={<Plus size="md" />}
-							onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
+							onClick={(): void => openPicker()}
 							testId="add-panel"
 						>
 							New Panel
@@ -56,6 +56,11 @@ function DashboardEmptyState({
 					)}
 				</div>
 			</div>
+			<PanelTypeSelectionModal
+				open={isPickerOpen}
+				onClose={closePicker}
+				onSelect={createPanel}
+			/>
 		</section>
 	);
 }
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx
@@ -1,9 +1,7 @@
-import { useMemo, useState } from 'react';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { useState } from 'react';
 import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesTimePreferenceDTO,
-	DashboardtypesPanelPluginKindDTO as PanelKind,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { panelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
@@ -12,15 +10,12 @@ import { usePanelQuery } from 'pages/DashboardPageV2/DashboardContainer/hooks/us
 import type { DashboardSection } from '../../utils';
 import { usePanelInteractions } from './hooks/usePanelInteractions';
 import PanelBody from './PanelBody/PanelBody';
-import UnsupportedPanelBody from './PanelBody/UnsupportedPanelBody';
 import PanelHeader from './PanelHeader/PanelHeader';
 import styles from './Panel.module.scss';

 /**
- * Layout context for the panel actions menu — pure data, present only in
- * editable mode. No callbacks: the menu resolves its own mutations from
- * store-backed hooks (useDeletePanel / useMovePanelToSection), and edit is
- * URL-driven (useOpenPanelEditor).
+ * Layout context for the panel actions menu — present only in editable mode. No
+ * callbacks: the menu resolves its own mutations from store-backed hooks.
 */
 export interface PanelActionsConfig {
 	currentLayoutIndex: number;
@@ -37,10 +32,8 @@ interface PanelProps {
 }

 /**
- * A single dashboard panel: chrome (header) + content (body). Thin orchestrator
- * — data fetching lives in `usePanelQuery`, cross-panel interactions in
- * `usePanelInteractions`, and the loading/error/chart state machine in
- * `PanelBody`.
+ * A single dashboard panel (header + body). Thin orchestrator: fetching lives in
+ * `usePanelQuery`, interactions in `usePanelInteractions`, state in `PanelBody`.
 */
 function Panel({
 	panel,
@@ -48,17 +41,15 @@ function Panel({
 	isVisible,
 	panelActions,
 }: PanelProps): JSX.Element {
-	const name = panel.spec.display?.name;
+	const name = panel.spec.display.name;
 	const description = panel.spec.display?.description;
-	const fullKind = panel.spec.plugin?.kind as unknown as PanelKind;
-	const kind = fullKind?.replace(/^signoz\//, '') ?? 'unknown';
-	const queryCount = panel.spec.queries?.length ?? 0;
+	const fullKind = panel.spec.plugin.kind;

-	// A per-panel relative time preference (anything other than global_time) is
-	// surfaced as a pill in the header. `visualization` is common to every
-	// plugin-spec variant — localized cast reads it without narrowing on 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.
 	const timePreference = (
-		panel.spec.plugin?.spec as
+		panel.spec.plugin.spec as
 			| { visualization?: { timePreference?: DashboardtypesTimePreferenceDTO } }
 			| undefined
 	)?.visualization?.timePreference;
@@ -66,41 +57,28 @@ function Panel({

 	const panelDefinition = getPanelDefinition(fullKind);

-	// Header search: only kinds that declare it (e.g. tables) render the box; the
-	// term is owned here and threaded to both the header (input) and the renderer
-	// (filter), the two being siblings under this orchestrator.
+	// 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).
 	const searchable = !!panelDefinition?.actions.search;
 	const [searchTerm, setSearchTerm] = useState('');

-	const { data, isLoading, isFetching, error, refetch, pagination } =
-		usePanelQuery({
-			panel,
-			panelId,
-			// Lazy: only fetch once the section is on screen (undefined → treat as
-			// visible) and a renderer exists for the kind.
-			enabled: !!panelDefinition && isVisible !== false,
-		});
+	const { data, isFetching, error, refetch, pagination } = usePanelQuery({
+		panel,
+		panelId,
+		// Lazy: fetch only once on screen (undefined → visible) and a renderer exists.
+		enabled: !!panelDefinition && isVisible !== false,
+	});

 	const { onDragSelect, dashboardPreference } = usePanelInteractions();

-	const headerTitle = useMemo(() => {
-		if (!description) {
-			return name;
-		}
-		return (
-			<TooltipSimple title={description}>
-				<span>{name}</span>
-			</TooltipSimple>
-		);
-	}, [name, description]);
-
 	return (
 		<div
 			className={styles.panel}
 			data-panel-visible={isVisible ? 'true' : 'false'}
 		>
 			<PanelHeader
-				title={headerTitle}
+				name={name}
+				description={description}
 				panelId={panelId}
 				panelKind={fullKind}
 				isFetching={isFetching}
@@ -112,13 +90,13 @@ function Panel({
 				searchTerm={searchTerm}
 				onSearchChange={setSearchTerm}
 			/>
-			{panelDefinition ? (
+			{panelDefinition && (
 				<PanelBody
 					panelDefinition={panelDefinition}
 					panel={panel}
 					panelId={panelId}
 					data={data}
-					isLoading={isLoading}
+					isLoading={isFetching}
 					error={error}
 					refetch={refetch}
 					onDragSelect={onDragSelect}
@@ -126,9 +104,6 @@ function Panel({
 					searchTerm={searchable ? searchTerm : undefined}
 					pagination={pagination}
 				/>
-			) : (
-				// TODO: remove this after all panel kinds are supported
-				<UnsupportedPanelBody kind={kind} queryCount={queryCount} />
 			)}
 		</div>
 	);
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody.module.scss
@@ -1,5 +1,4 @@
-// Generic centred body — used by the loading indicator and the
-// unsupported-kind fallback.
+// Generic centred body — used by the loading indicator.
 .body {
 	flex: 1;
 	display: flex;
@@ -11,10 +10,6 @@
 	text-align: center;
 }

-.bodyKind {
-	margin-bottom: 6px;
-}
-
 // Container for the rendered chart — fills the panel below the header and lets
 // the chart shrink (min-* 0) so it resizes with the grid cell.
 .chartContainer {
@@ -23,26 +18,3 @@
 	min-height: 0;
 	min-width: 0;
 }
-
-// Error state — shown only when there's no stale data to fall back to.
-.error {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding: 12px;
-	text-align: center;
-}
-
-.errorIcon {
-	color: var(--bg-cherry-500);
-}
-
-.errorMessage {
-	color: var(--l2-foreground);
-	font-size: 12px;
-	max-width: 90%;
-	overflow-wrap: anywhere;
-}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody.tsx
@@ -1,11 +1,11 @@
 import { Spin } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { Loader, TriangleAlert } from '@signozhq/icons';
+import { Loader, RotateCw, SquarePlus, TriangleAlert } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import PanelMessage from 'pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
+import { hasRunnableQueries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
 import type {
 	PanelPagination,
 	PanelQueryData,
@@ -15,8 +15,7 @@ import { panelStatusFromError } from '../PanelStatus/utils';
 import styles from './PanelBody.module.scss';

 interface PanelBodyProps {
-	/** Resolved renderer for the panel kind — always present (`Panel` renders the
-	 * unsupported fallback itself when none is registered). */
+	/** Resolved renderer for the panel kind (`Panel` handles the unsupported case). */
 	panelDefinition: RenderablePanelDefinition;
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
@@ -36,13 +35,8 @@ interface PanelBodyProps {
 }

 /**
- * Renders a panel whose kind has a registered renderer, as an explicit state
- * machine:
- *
- *   error + no data → error message with retry
- *   first load (no data) → loading indicator
- *   otherwise → the kind's renderer (owns its own "No Data" state and keeps
- *               stale data mounted during background refetches)
+ * Renders a panel's body as a state machine: not-configured / error+no-data /
+ * first-load / renderer. The renderer keeps stale data mounted across refetches.
 */
 function PanelBody({
 	panelDefinition,
@@ -58,25 +52,39 @@ function PanelBody({
 	searchTerm,
 	pagination,
 }: PanelBodyProps): JSX.Element {
-	// react-query keeps the previous response during background refetches, so
-	// `data.response` presence is the "have something to show" signal — surface a
-	// hard failure only when there's nothing to keep on screen.
+	// react-query keeps the previous response during refetches, so its presence is
+	// the "have something to show" signal — only fail hard when there's nothing.
 	const hasData = !!data.response;

+	// Not-configured panel: no runnable query, so nothing to error/load on.
+	if (!hasRunnableQueries(panel.spec.queries)) {
+		return (
+			<PanelMessage
+				icon={<SquarePlus size={18} />}
+				title="Nothing to visualize yet"
+				description="This panel has no query. Add one to start plotting data."
+				data-testid="panel-no-query"
+			/>
+		);
+	}
+
 	if (error && !hasData) {
-		// Parse the API error like the header popover does, so the body shows the
-		// backend message (not the raw axios "status code 4xx").
+		// Parse the API error (as the header popover does) to show the backend
+		// message, not the raw axios "status code 4xx".
 		const errorDetail = panelStatusFromError(error);
 		return (
-			<div className={styles.error} data-testid="panel-error">
-				<TriangleAlert size={20} className={styles.errorIcon} />
-				<Typography.Text className={styles.errorMessage}>
-					{errorDetail?.message || 'Failed to load panel data'}
-				</Typography.Text>
-				<Button variant="outlined" color="secondary" onClick={refetch}>
-					Retry
-				</Button>
-			</div>
+			<PanelMessage
+				icon={<TriangleAlert size={18} />}
+				tone="danger"
+				title="Couldn’t load panel data"
+				description={errorDetail?.message || 'Something went wrong while fetching.'}
+				action={{
+					label: 'Retry',
+					onClick: refetch,
+					icon: <RotateCw size={14} />,
+				}}
+				data-testid="panel-error"
+			/>
 		);
 	}

@@ -98,6 +106,7 @@ function PanelBody({
 				data={data}
 				isLoading={isLoading}
 				error={error}
+				refetch={refetch}
 				onDragSelect={onDragSelect}
 				panelMode={panelMode}
 				enableDrillDown={false}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/UnsupportedPanelBody.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/UnsupportedPanelBody.tsx
@@ -1,30 +0,0 @@
-import styles from './PanelBody.module.scss';
-
-interface UnsupportedPanelBodyProps {
-	/** Short, signoz-prefix-stripped panel kind (e.g. "TablePanel"). */
-	kind: string;
-	queryCount: number;
-}
-
-/**
- * Body shown when no renderer is registered for the panel's kind. Split out so
- * `PanelBody` only ever runs with a resolved renderer.
- */
-function UnsupportedPanelBody({
-	kind,
-	queryCount,
-}: UnsupportedPanelBodyProps): JSX.Element {
-	return (
-		<div className={styles.body} data-testid="panel-unknown-kind-fallback">
-			<div>
-				<div className={styles.bodyKind}>{kind} panel</div>
-				<div>
-					{queryCount} {queryCount === 1 ? 'query' : 'queries'} · not yet supported
-					in V2
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default UnsupportedPanelBody;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/tests/PanelBody.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/tests/PanelBody.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
+import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+import PanelBody from '../PanelBody';
+
+// Stub the renderer so these tests focus on PanelBody's state machine.
+const MockRenderer = (): JSX.Element => <div data-testid="mock-renderer" />;
+
+const panelDefinition = {
+	Renderer: MockRenderer,
+} as unknown as RenderablePanelDefinition;
+
+function panelWith(queries: unknown[]): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'P' },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries,
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const baseProps = {
+	panelDefinition,
+	panelId: 'p1',
+	data: {} as PanelQueryData,
+	isLoading: false,
+	error: null,
+	refetch: jest.fn(),
+	onDragSelect: jest.fn(),
+};
+
+describe('PanelBody', () => {
+	it('shows the not-configured state when the panel has no runnable query', () => {
+		render(<PanelBody {...baseProps} panel={panelWith([])} />);
+
+		expect(screen.getByTestId('panel-no-query')).toBeInTheDocument();
+		expect(screen.getByText('Nothing to visualize yet')).toBeInTheDocument();
+		expect(screen.queryByTestId('mock-renderer')).not.toBeInTheDocument();
+	});
+
+	it('renders the kind renderer once a runnable query is present', () => {
+		const panel = panelWith([
+			{
+				spec: {
+					plugin: {
+						kind: 'signoz/CompositeQuery',
+						spec: {
+							queries: [
+								{ type: 'builder_query', spec: { signal: 'traces', name: 'A' } },
+							],
+						},
+					},
+				},
+			},
+		]);
+
+		render(<PanelBody {...baseProps} panel={panel} />);
+
+		expect(screen.getByTestId('mock-renderer')).toBeInTheDocument();
+		expect(screen.queryByTestId('panel-no-query')).not.toBeInTheDocument();
+	});
+});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.module.scss
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.module.scss
@@ -53,3 +53,8 @@
 	border: 1px solid var(--l3-border);
 	cursor: default;
 }
+
+.descriptionTooltip {
+	max-width: 240px;
+	padding: 12px;
+}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader.tsx
@@ -1,7 +1,7 @@
-import { useMemo, type ReactNode } from 'react';
+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 { Loader } from '@signozhq/icons';
 import cx from 'classnames';
 import type { PanelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';

@@ -18,9 +18,10 @@ import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types
 import { TooltipSimple } from '@signozhq/ui/tooltip';

 interface PanelHeaderProps {
-	title: ReactNode;
+	name: string;
+	description?: string;
 	panelId: string;
-	/** Full plugin kind — drives kind-gated menu actions; */
+	/** Full plugin kind — drives kind-gated menu actions. */
 	panelKind: PanelKind;
 	/** Background refresh in flight — shows a spinner without blinking the chart. */
 	isFetching: boolean;
@@ -38,11 +39,18 @@ interface PanelHeaderProps {
 	searchTerm?: string;
 	/** Pushes a new search term up to the shell. */
 	onSearchChange?: (value: string) => void;
+	/**
+	 * Suppress the actions menu entirely — for the editor preview, where
+	 * panel-level actions don't apply (some survive their gates without
+	 * `panelActions`, so omitting it isn't enough).
+	 */
+	hideActions?: boolean;
 }

 /** Panel chrome: drag handle, title, refetch + status indicators, actions. */
 function PanelHeader({
-	title,
+	name,
+	description,
 	panelId,
 	panelKind,
 	isFetching,
@@ -53,6 +61,7 @@ function PanelHeader({
 	searchable,
 	searchTerm = '',
 	onSearchChange,
+	hideActions,
 }: PanelHeaderProps): JSX.Element {
 	const errorDetail = useMemo(() => panelStatusFromError(error), [error]);

@@ -64,7 +73,20 @@ function PanelHeader({
 	return (
 		<div className={cx(styles.header, 'panel-drag-handle')}>
 			<div className={styles.headerLeft}>
-				<Typography.Text className={styles.headerTitle}>{title}</Typography.Text>
+				<Typography.Text className={styles.headerTitle}>{name}</Typography.Text>
+				{description && (
+					<TooltipSimple
+						title={description}
+						arrow
+						tooltipContentProps={{ className: styles.descriptionTooltip }}
+					>
+						<Info
+							className={styles.headerInfoIcon}
+							size={14}
+							data-testid="panel-header-info-icon"
+						/>
+					</TooltipSimple>
+				)}
 				{isFetching && (
 					<Loader
 						size={12}
@@ -73,8 +95,8 @@ function PanelHeader({
 					/>
 				)}
 			</div>
-			{/* `panel-no-drag` opts this region out of the grid drag handle so the
-			    actions menu is clickable instead of starting a panel drag. */}
+			{/* `panel-no-drag` opts this region out of the drag handle so clicks hit
+			    the controls instead of starting a panel drag. */}
 			<div className={cx('panel-no-drag', styles.actions)}>
 				{searchable && onSearchChange && (
 					<PanelHeaderSearch value={searchTerm ?? ''} onChange={onSearchChange} />
@@ -91,11 +113,13 @@ function PanelHeader({
 					<PanelStatusPopover variant="warning" detail={warningDetail} />
 				)}
 				{/* Renders nothing when no action survives its gates (kind/role/context). */}
-				<PanelActionsMenu
-					panelId={panelId}
-					panelKind={panelKind}
-					panelActions={panelActions}
-				/>
+				{!hideActions && (
+					<PanelActionsMenu
+						panelId={panelId}
+						panelKind={panelKind}
+						panelActions={panelActions}
+					/>
+				)}
 			</div>
 		</div>
 	);
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx
@@ -1,13 +1,14 @@
 import { Modal } from 'antd';
 import { Button } from '@signozhq/ui/button';

+import type { PanelKind } from '../../../Panels/types/panelKind';
 import { PANEL_TYPES } from './constants';
 import styles from './PanelTypeSelectionModal.module.scss';

 interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
-	onSelect: (pluginKind: string) => void;
+	onSelect: (pluginKind: PanelKind) => void;
 }

 function PanelTypeSelectionModal({
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.tsx
@@ -15,7 +15,11 @@ export const PANEL_TYPES: PanelType[] = [
 		label: 'Time Series',
 		icon: <ChartLine size={16} />,
 	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{
+		pluginKind: 'signoz/NumberPanel',
+		label: 'Number',
+		icon: <Hash size={16} />,
+	},
 	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
 	{
 		pluginKind: 'signoz/BarChartPanel',
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts
@@ -1,5 +1,7 @@
+import type { PanelKind } from '../../../Panels/types/panelKind';
+
 export interface PanelType {
-	pluginKind: string;
+	pluginKind: PanelKind;
 	label: string;
 	icon: JSX.Element;
 }
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/tests/PanelHeader.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/tests/PanelHeader.test.tsx
@@ -7,23 +7,23 @@ import type { Warning } from 'types/api';
 import PanelHeader from '../PanelHeader/PanelHeader';
 import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';

-// PanelHeader's status indicators render a radix tooltip, which needs a
-// TooltipProvider ancestor (supplied globally by AppLayout at runtime).
+// Status indicators use a radix tooltip, which needs a TooltipProvider ancestor
+// (supplied globally by AppLayout at runtime).
 const renderWithProvider = (ui: ReactElement): ReturnType<typeof render> =>
 	render(<TooltipProvider>{ui}</TooltipProvider>);

-// The actions menu has its own gating logic (kind/role/context) and its own
-// tests; stub it so this test exercises only the header's status indicators.
+// Stub the actions menu (its gating logic is tested separately) so this asserts
+// only whether the menu mounts, per the `hideActions` switch.
 jest.mock(
 	'../PanelActionsMenu/PanelActionsMenu',
 	() =>
-		function MockPanelActionsMenu(): null {
-			return null;
+		function MockPanelActionsMenu(): ReactElement {
+			return <div data-testid="panel-actions-menu" />;
 		},
 );

 const baseProps = {
-	title: 'My panel',
+	name: 'My panel',
 	panelKind: 'signoz/TimeSeriesPanel' as PanelKind,
 	panelId: 'panel-1',
 	isFetching: false,
@@ -36,6 +36,27 @@ const warning: Warning = {
 	warnings: [],
 };

+describe('PanelHeader title and description', () => {
+	it('renders the panel name', () => {
+		renderWithProvider(<PanelHeader {...baseProps} />);
+		expect(screen.getByText('My panel')).toBeInTheDocument();
+	});
+
+	it('shows the description info icon when a description is provided', () => {
+		renderWithProvider(
+			<PanelHeader {...baseProps} description="What this panel measures" />,
+		);
+		expect(screen.getByTestId('panel-header-info-icon')).toBeInTheDocument();
+	});
+
+	it('renders no description info icon when there is no description', () => {
+		renderWithProvider(<PanelHeader {...baseProps} />);
+		expect(
+			screen.queryByTestId('panel-header-info-icon'),
+		).not.toBeInTheDocument();
+	});
+});
+
 describe('PanelHeader status indicators', () => {
 	it('shows the error indicator whenever an error is present', () => {
 		renderWithProvider(<PanelHeader {...baseProps} error={new Error('boom')} />);
@@ -76,8 +97,8 @@ describe('PanelHeader search', () => {

 		await user.click(screen.getByTestId('panel-header-search-trigger'));

-		// The input is controlled to the (fixed) `searchTerm` here, so each keystroke
-		// reports a single character — assert one to confirm changes are propagated.
+		// Input is controlled to a fixed `searchTerm`, so each keystroke reports a
+		// single character — one is enough to confirm changes propagate.
 		const input = screen.getByTestId('panel-header-search-input');
 		await user.type(input, 'f');
 		expect(onSearchChange).toHaveBeenCalledWith('f');
@@ -103,6 +124,18 @@ describe('PanelHeader search', () => {
 	});
 });

+describe('PanelHeader actions menu', () => {
+	it('mounts the actions menu by default', () => {
+		renderWithProvider(<PanelHeader {...baseProps} />);
+		expect(screen.getByTestId('panel-actions-menu')).toBeInTheDocument();
+	});
+
+	it('hides the actions menu when hideActions is set (editor preview)', () => {
+		renderWithProvider(<PanelHeader {...baseProps} hideActions />);
+		expect(screen.queryByTestId('panel-actions-menu')).not.toBeInTheDocument();
+	});
+});
+
 describe('PanelHeader time-preference pill', () => {
 	it('shows the pill with the short label when the panel overrides the dashboard time', () => {
 		renderWithProvider(
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts
@@ -1,73 +0,0 @@
-import { useCallback } from 'react';
-import { v4 as uuid } from 'uuid';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	addPanelToSectionOps,
-	createDefaultPanel,
-	panelRef,
-} from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-export interface AddPanelArgs {
-	layoutIndex: number;
-	pluginKind: string;
-}
-
-/**
- * Creates a new panel and places its item ref at the bottom of the target
- * section, as one atomic patch. Structure-only: the panel is a valid minimal
- * placeholder (its query is filled in once the panel editor lands).
- */
-export function useAddPanelToSection({
-	sections,
-}: Params): (args: AddPanelArgs) => Promise<void> {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
-			const target = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!target) {
-				return;
-			}
-
-			const panelId = uuid();
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					addPanelToSectionOps({
-						panelId,
-						panel: createDefaultPanel(pluginKind),
-						layoutIndex,
-						item: {
-							x: 0,
-							y: nextY,
-							width: 6,
-							height: 6,
-							content: { $ref: panelRef(panelId) },
-						},
-					}),
-				);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useClonePanel.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useClonePanel.ts
@@ -59,7 +59,6 @@ export function useClonePanel({
 				}),
 			);

-			// toast.promise reports the failure, so no separate error modal here.
 			toast.promise(clone, {
 				loading: 'Cloning panel…',
 				success: 'Panel cloned',
@@ -67,13 +66,13 @@ export function useClonePanel({
 				position: 'top-center',
 			});

-			// Refetch only on success; swallow the rejection (toast owns the error
-			// UX) to avoid an unhandled rejection.
+			// Refetch only on success; toast.promise owns the error UX, so swallow
+			// the rejection to avoid an unhandled rejection.
 			try {
 				await clone;
 				refetch();
 			} catch {
-				// no-op — toast.promise owns the error UX.
+				// no-op
 			}
 		},
 		[sections, dashboardId, refetch],
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx
@@ -3,11 +3,10 @@ import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';

 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';

 import ConfirmDeleteDialog from '../../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
+import { useCreatePanel } from '../../../hooks/useCreatePanel';
 import type { DashboardSection } from '../../../utils';
-import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
 import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 import { useDeleteSection } from '../hooks/useDeleteSection';
@@ -22,24 +21,16 @@ import styles from './Section.module.scss';

 interface SectionProps {
 	section: DashboardSection;
-	/** Adds a panel to this section; present only in editable sectioned mode. */
-	onAddPanel?: (args: AddPanelArgs) => void;
 	/** All sections — layout context for the panel menu's move/delete actions. */
 	sections?: DashboardSection[];
 	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
 	dragHandle?: SectionDragHandle;
 }

-function Section({
-	section,
-	onAddPanel,
-	sections,
-	dragHandle,
-}: SectionProps): JSX.Element {
+function Section({ section, sections, dragHandle }: SectionProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
-	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
-		(s) => s.setIsPanelTypeSelectionModalOpen,
-	);
+	const { isPickerOpen, openPicker, closePicker, createPanel } =
+		useCreatePanel();
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
@@ -65,15 +56,6 @@ function Section({
 		[rename],
 	);

-	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = useCallback(
-		(pluginKind: string): void => {
-			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-			setIsAddingPanel(false);
-		},
-		[onAddPanel, section.layoutIndex],
-	);
-
 	const { deleteSection } = useDeleteSection({ section });
 	const handleDeleteSection = useCallback((): void => {
 		void deleteSection();
@@ -121,7 +103,7 @@ function Section({
 					isEditable
 						? {
 								onRename: (): void => setIsRenaming(true),
-								onAddPanel: (): void => setIsAddingPanel(true),
+								onAddPanel: (): void => openPicker(section.layoutIndex),
 								onDeleteSection: (): void => setIsDeleteOpen(true),
 							}
 						: undefined
@@ -138,7 +120,7 @@ function Section({
 								variant="dashed"
 								color="secondary"
 								prefix={<Plus size="md" />}
-								onClick={(): void => setIsPanelTypeSelectionModalOpen(true)}
+								onClick={(): void => openPicker(section.layoutIndex)}
 								testId={`section-add-panel-${section.id}`}
 							>
 								New Panel
@@ -156,9 +138,9 @@ function Section({
 				onSubmit={handleRenameSubmit}
 			/>
 			<PanelTypeSelectionModal
-				open={isAddingPanel}
-				onClose={(): void => setIsAddingPanel(false)}
-				onSelect={handleSelectPanelType}
+				open={isPickerOpen}
+				onClose={closePicker}
+				onSelect={createPanel}
 			/>
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx
@@ -11,7 +11,6 @@ import {
 import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';

 import type { DashboardSection } from '../../utils';
-import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { useSectionDragReorder } from './hooks/useSectionDragReorder';
 import Section from './Section/Section';
@@ -35,8 +34,6 @@ function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
 		onDragCancel,
 	} = useSectionDragReorder({ sections, layouts });

-	const onAddPanel = useAddPanelToSection({ sections });
-
 	// Only titled sections participate in reordering; untitled (free-flow)
 	// blocks render in place without a drag handle.
 	const sortableIds = useMemo(
@@ -66,19 +63,9 @@ function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
 			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
 				{orderedSections.map((section) =>
 					section.title ? (
-						<SortableSection
-							key={section.id}
-							section={section}
-							sections={sections}
-							onAddPanel={onAddPanel}
-						/>
+						<SortableSection key={section.id} section={section} sections={sections} />
 					) : (
-						<Section
-							key={section.id}
-							section={section}
-							sections={sections}
-							onAddPanel={onAddPanel}
-						/>
+						<Section key={section.id} section={section} sections={sections} />
 					),
 				)}
 			</SortableContext>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx
@@ -2,19 +2,16 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';

 import type { DashboardSection } from '../../utils';
-import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
 import Section from './Section/Section';

 interface SortableSectionProps {
 	section: DashboardSection;
 	sections: DashboardSection[];
-	onAddPanel: (args: AddPanelArgs) => void;
 }

 function SortableSection({
 	section,
 	sections,
-	onAddPanel,
 }: SortableSectionProps): JSX.Element {
 	const {
 		attributes,
@@ -41,7 +38,6 @@ function SortableSection({
 			<Section
 				section={section}
 				sections={sections}
-				onAddPanel={onAddPanel}
 				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
 			/>
 		</div>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/tests/patchOps.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/tests/patchOps.test.ts
@@ -0,0 +1,142 @@
+import type {
+	DashboardGridItemDTO,
+	DashboardtypesLayoutDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { createDefaultPanel, createPanelOps } from '../patchOps';
+
+function item(y: number, height: number): DashboardGridItemDTO {
+	return { x: 0, y, width: 6, height, content: { $ref: '#/spec/panels/x' } };
+}
+
+function itemAt(
+	x: number,
+	y: number,
+	width: number,
+	height: number,
+): DashboardGridItemDTO {
+	return { x, y, width, height, content: { $ref: '#/spec/panels/x' } };
+}
+
+function section(items: DashboardGridItemDTO[]): DashboardtypesLayoutDTO {
+	return {
+		kind: 'Grid',
+		spec: { display: { title: 'S' }, items },
+	} as DashboardtypesLayoutDTO;
+}
+
+describe('createDefaultPanel', () => {
+	it('builds a Panel of the given kind with no queries (filled in on save)', () => {
+		const panel = createDefaultPanel('signoz/NumberPanel');
+		expect(panel.kind).toBe('Panel');
+		expect(panel.spec.plugin.kind).toBe('signoz/NumberPanel');
+		expect(panel.spec.queries).toStrictEqual([]);
+		expect(panel.spec.display.name).toBe('New panel');
+	});
+});
+
+describe('createPanelOps', () => {
+	const panel = createDefaultPanel('signoz/TimeSeriesPanel');
+
+	it('adds the panel + a grid item in the requested section', () => {
+		const layouts = [section([item(0, 6)]), section([])];
+		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
+
+		expect(ops).toHaveLength(2);
+		expect(ops[0]).toMatchObject({ op: 'add', path: '/spec/panels/p1' });
+		expect(ops[1]).toMatchObject({
+			op: 'add',
+			path: '/spec/layouts/0/spec/items/-',
+		});
+		expect((ops[1].value as DashboardGridItemDTO).content?.$ref).toBe(
+			'#/spec/panels/p1',
+		);
+	});
+
+	it('fills the empty right half of a row instead of wrapping to a new one', () => {
+		// Left half filled → new 6-wide panel fits at x:6 in the same row.
+		const layouts = [section([item(0, 6)])];
+		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
+
+		const value = ops[1].value as DashboardGridItemDTO;
+		expect(value.x).toBe(6);
+		expect(value.y).toBe(0);
+	});
+
+	it('wraps to a new row when the last row is full', () => {
+		// Full-width (12) row leaves no room → panel drops to the next row.
+		const layouts = [section([itemAt(0, 0, 12, 6)])];
+		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
+
+		const value = ops[1].value as DashboardGridItemDTO;
+		expect(value.x).toBe(0);
+		expect(value.y).toBe(6);
+	});
+
+	it('ignores a gap in an upper row and only fills the last row', () => {
+		// Upper-row gap is ignored when the last row is full → starts a fresh row.
+		const layouts = [section([itemAt(0, 0, 6, 6), itemAt(0, 6, 12, 6)])];
+		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
+
+		const value = ops[1].value as DashboardGridItemDTO;
+		expect(value.x).toBe(0);
+		expect(value.y).toBe(12);
+	});
+
+	it('fills the right of the last row when it has room', () => {
+		// Half-filled last row → panel sits at x:6 of that row.
+		const layouts = [section([itemAt(0, 0, 12, 6), itemAt(0, 6, 6, 6)])];
+		const ops = createPanelOps({ layouts, layoutIndex: 0, panelId: 'p1', panel });
+
+		const value = ops[1].value as DashboardGridItemDTO;
+		expect(value.x).toBe(6);
+		expect(value.y).toBe(6);
+	});
+
+	it('checks the last row of the target section only, not other sections', () => {
+		// Placement uses the target section's (1) last row, ignoring section 0's gap.
+		const layouts = [
+			section([itemAt(0, 0, 6, 6)]),
+			section([itemAt(0, 0, 12, 6)]),
+		];
+		const ops = createPanelOps({ layouts, layoutIndex: 1, panelId: 'p1', panel });
+
+		expect(ops[1].path).toBe('/spec/layouts/1/spec/items/-');
+		const value = ops[1].value as DashboardGridItemDTO;
+		expect(value.x).toBe(0);
+		expect(value.y).toBe(6);
+	});
+
+	it('falls back to the last section when no index is requested', () => {
+		const layouts = [section([]), section([item(0, 6)])];
+		const ops = createPanelOps({
+			layouts,
+			layoutIndex: undefined,
+			panelId: 'p1',
+			panel,
+		});
+
+		expect(ops[1].path).toBe('/spec/layouts/1/spec/items/-');
+	});
+
+	it('falls back to the last section when the requested index is out of range', () => {
+		const layouts = [section([])];
+		const ops = createPanelOps({ layouts, layoutIndex: 5, panelId: 'p1', panel });
+		expect(ops[1].path).toBe('/spec/layouts/0/spec/items/-');
+	});
+
+	it('creates a section first when the dashboard has none', () => {
+		const ops = createPanelOps({
+			layouts: [],
+			layoutIndex: undefined,
+			panelId: 'p1',
+			panel,
+		});
+
+		expect(ops).toHaveLength(3);
+		expect(ops[0]).toMatchObject({ op: 'add', path: '/spec/layouts/-' });
+		expect(ops[1]).toMatchObject({ op: 'add', path: '/spec/panels/p1' });
+		expect(ops[2].path).toBe('/spec/layouts/0/spec/items/-');
+		expect((ops[2].value as DashboardGridItemDTO).y).toBe(0);
+	});
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Abhi Kumar	49232846c8	feat(dashboards-v2): switch panel visualization type in the editor Wire the panel-type switcher into the config pane: every kind now declares a `visualization` section (with `switchPanelKind`) so the switcher is reachable from any panel, VisualizationSection renders it, and ConfigPane threads the current kind/signal and an onChange down through SectionSlot. The editor drives the in-place kind switch via usePanelTypeSwitch, so switching is reversible within an edit session and a first visit rebuilds the query + resets the spec (carrying unit/decimals).	2026-06-25 16:34:47 +05:30
Abhi Kumar	82bf12892a	feat(dashboards-v2): add the PanelTypeSwitcher control A presentational visualization-type selector (built on ConfigSelect) that lists the panel kinds and disables types whose supported signals exclude the panel's current datasource (V1 parity — e.g. List needs logs/traces, not metrics). Rename the Value option label to Number so the switcher (and the type-selection modal) read consistently. Not yet rendered anywhere.	2026-06-25 16:34:47 +05:30
Abhi Kumar	935b079ce0	feat(dashboards-v2): add panel-type switch logic Two building blocks for switching a panel's kind in place: - getSwitchedPluginSpec: on a first-time switch to a new kind, rebuild the plugin spec from the kind's defaults, carrying over unit/decimals (and seeding List columns from the signal). - usePanelTypeSwitch: a per-kind session cache that makes switches reversible (Table -> List -> Table restores the original query + spec) and rebuilds the query for the new panel type on a first visit. Both are standalone and not yet wired into the editor.	2026-06-25 16:34:47 +05:30
Abhi Kumar	ebc4923b10	refactor(dashboards-v2): extend ConfigSelect for the type switcher Add per-option `disabled` and let `icon` be an arbitrary `ReactNode` (not just a `SegmentIconName`) so the upcoming panel-type switcher can disable unsupported types and render panel-type glyphs. Also widen the ConfigSegmented group to full width so segmented controls fill the config pane.	2026-06-25 16:25:40 +05:30
Abhi Kumar	8e7338553d	refactor(dashboards-v2): type panel signals as TelemetrytypesSignalDTO Replace the query-builder `DataSource` enum with `TelemetrytypesSignalDTO` across the panel signal plumbing — the panel definitions' `supportedSignals`, the List columns editor/suggestions/defaults, and the editor query-sync and column-seeding hooks — and make the signal non-optional where a panel always resolves one. Drops the now-dead `DataSource` imports.	2026-06-25 15:43:35 +05:30
Abhi Kumar	aa0e9dac6e	refactor(dashboards-v2): address PR review feedback - getPanelDefinition: make PanelRegistry total over PanelKind so it never returns undefined (a missing kind is now a compile error) - toQueryEnvelopes/hasRunnableQueries: accept `... \| null` and drop the `?? []` at call sites - consolidate panel loading to a single `isFetching` signal (Panel, PreviewPane, PanelEditor) - rename defaultDataSource -> signal; use TelemetrytypesSignalDTO enum for the List default columns - useCreatePanel now owns the panel-type picker state, deduping the three add-panel triggers; rename pluginKind -> panelKind - LabelThresholdRow: extract onSave into a callback; ThresholdsSection test uses userEvent - PreviewPane: drop the optional chaining on the required display field - trim over-verbose comments	2026-06-25 15:20:36 +05:30
Abhi Kumar	4f0e9ff8e6	fix(dashboards-v2): drop all config-pane sections from the List panel List columns are edited below the query builder, and Context Links isn't wanted in the config pane, so the List panel now declares no config-pane sections.	2026-06-25 14:10:42 +05:30
Abhi Kumar	b72bc75ec2	feat(dashboards-v2): open new List panels on a runnable logs query (V1 parity) A new List panel opened blank: its seed query had an empty orderBy and lived only in the builder, so the preview didn't run on open. Seed spec.queries at creation with the V1 list logs query (orderBy timestamp desc) so the panel opens on logs, pre-sorted, and the preview runs immediately; wire up useSeedNewListColumns so its default columns (timestamp, body) are populated too. Switching to traces is handled by the builder's list-view path.	2026-06-25 14:10:42 +05:30
Abhi Kumar	985d9dcb79	fix(dashboards-v2): show resource attributes like service.name in trace list panels The List renderer only flattened nested resource/attribute maps for logs, so a selected resource field such as service.name (nested under resources_string) rendered N/A for traces even though the same data shows in V1. Flatten traces too.	2026-06-25 14:10:42 +05:30
Abhi Kumar	5ea71de666	docs(dashboards-v2): trim verbose comments to minimal-why style Condense multi-paragraph block comments and drop comments that restate the code across the new-panel editor surface, keeping only the non-obvious "why" and concise JSDoc on functions and type fields. Comment-only — no code, types, or test assertions changed.	2026-06-25 14:10:42 +05:30
Abhi Kumar	1d264f6996	fix(dashboards-v2): preserve list columns across datasource round-trips The List panel stores a single selectFields list, so switching the query signal replaced the columns with the new datasource's defaults — going logs -> traces -> logs discarded a customized logs selection. Remember each signal's columns and restore them when switching back; defaults still seed a signal the first time it's seen.	2026-06-25 14:10:42 +05:30
Abhi Kumar	61a44b500a	feat(dashboards-v2): seed new panels with per-kind config defaults A new panel was seeded with an empty plugin spec, so the config pane's dropdowns and segmented controls (time scope, legend position, line style / interpolation, fill mode) opened with nothing selected. Derive a default plugin spec from each kind's declared sections via a new pure buildDefaultPluginSpec helper and seed it in createDefaultPanel. Each default equals the matching renderer fallback, so only the config-pane display changes, not the rendered output. Controls whose empty state already reads as the chart default (unit/decimals "auto", switches, numeric "Auto" inputs) are left unset. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-25 14:10:42 +05:30
Abhi Kumar	fffff33919	feat(dashboards-v2): show the panel header in the editor preview Reuse PanelHeader in PreviewPane so the editor preview shows the panel title, description tooltip, refetch spinner, and error/warning indicators, with the body rendered flush beneath it like the dashboard grid panel. Add a hideActions flag to PanelHeader to suppress the actions menu in the editor: View/Edit/Clone/Delete don't apply there, and omitting panelActions alone isn't enough since View/Edit/Download survive their own gates. Wire the table/list header search through the preview as the grid does, and thread the raw isFetching for the header's refetch spinner.	2026-06-25 14:10:42 +05:30
Abhi Kumar	26a137405d	fix(dashboards-v2): default a threshold's label to an empty string on save	2026-06-25 14:10:42 +05:30
Abhi Kumar	0887dc6b2b	refactor(dashboards-v2): let consumers own the refetch loader signal usePanelQuery returns the raw react-query isLoading; the dashboard panel and the editor preview now compute isLoading \|\| isFetching themselves, so each surface decides whether a background refetch shows the full loader. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-25 14:10:42 +05:30
Abhi Kumar	87a5aec0e2	feat(dashboards-v2): panel header title with description tooltip Replace PanelHeader's ReactNode title with explicit name + description props, rendering the description as an info-icon tooltip in the header instead of a wrapper around the title. Panel passes them directly (no headerTitle memo).	2026-06-25 14:10:42 +05:30
Abhi Kumar	16ff68fe95	fix(dashboards-v2): derive the preview "Plotted with" tag from the panel query The editor preview hardcoded EQueryType.QUERY_BUILDER, so PromQL/ClickHouse panels were mislabelled and list panels still showed the tag. Add a V2 PlotTag (mirroring V1: hidden for list panels and before a query exists) fed by a new getPanelQueryType util that reads the panel's V5 envelopes.	2026-06-25 14:10:42 +05:30
Abhi Kumar	52f0fda21f	feat(dashboards-v2): unified panel empty, no-data and no-query states Add a shared PanelMessage component (icon + title + description + optional action) backing every non-chart panel state. PanelBody now shows a 'Nothing to visualize yet' state for panels with no runnable query and a polished error state with Retry. NoData becomes a 'No data in this time range' affordance with an optional Retry, wired through a new optional refetch on the renderer props.	2026-06-25 14:10:42 +05:30
Abhi Kumar	4bc33087b9	fix(uplot): center a single-item chart legend isSingleRow read the container width from a ref inside useMemo, so it computed once at mount (ref still null → width 0 → false) and only recovered if the component happened to re-render. The uPlot legend re-renders on plot sync so it recovered by luck; the Pie legend doesn't, leaving a single item clipped in a narrow grid track. Measure the container with useResizeObserver instead.	2026-06-25 14:10:42 +05:30
Abhi Kumar	c59cb53de2	fix(dashboards-v2): place a new panel in the last row's free space createPanelOps placed every new panel at x:0 on a fresh row, so a half-full last row left its right half empty. Find the first free slot in the section's last row (right of its panels) and only wrap to a new row when it can't fit.	2026-06-25 14:10:42 +05:30
Abhi Kumar	59a0a3fcb1	feat(dashboards-v2): create new panels from the editor Add a draft-first create flow: picking a panel type opens the editor at `/panel/new?panelKind=…&layoutIndex=…` on an in-memory default panel, and nothing is persisted until save — cancelling leaves the dashboard untouched (V1 parity). On save a new panel is minted (uuid) and added to the target section via `createPanelOps` (resolves the section, or creates one when the dashboard has none). All "Add panel" triggers (section header, empty section, empty dashboard, toolbar) route through a single useCreatePanel hook + the V2 type picker; the leftover V1 global modal and useAddPanelToSection are removed. New panels seed sensible defaults from the kind's supported signals: the query datasource (e.g. List → logs, not the unsupported metrics default) and, for List, the signal's default columns — so the Columns control isn't empty on first open. New panels always re-serialize their query for the kind on save, so the persisted query is valid even if untouched. echo "--- working tree after commits (should be only dev hack) ---"; git status --short	2026-06-25 14:10:40 +05:30
Abhi Kumar	86fd8be57c	refactor(dashboards-v2): narrow renderer props to the panel kind PanelRendererProps<K> now carries a `panel` narrowed to kind K (via a PluginOfKind helper that picks the variant from the generated plugin union), so each renderer reads `panel.spec.plugin.spec` as its exact spec DTO. Removes the per-renderer `as <Kind>SpecDTO` cast (and the now-dead `?? {}` fallbacks) across all seven renderers; the single unavoidable widening stays in getPanelDefinition.	2026-06-25 14:10:06 +05:30
Abhi Kumar	56dddba711	refactor(dashboards-v2): tighten the getPanelDefinition cast Drop the dead `if (!kind)` guard (a partial registry already returns undefined for absent keys) and reduce the `as unknown as` double-cast to a single `as` — comparability clears it, so the unknown laundering was unnecessary.	2026-06-25 14:10:06 +05:30
Abhi Kumar	87118163f1	refactor(dashboards-v2): drop the unsupported-panel fallback Every panel kind now has a renderer, so the "not yet supported in V2" body is dead. Remove UnsupportedPanelBody and render the panel body behind a plain `panelDefinition &&` guard. Also clean up the panel-kind typing in Panel.tsx: `spec.plugin.kind` is non-optional and already a PanelKind, so the `as unknown as` cast and `?.` chains go away.	2026-06-25 14:10:06 +05:30
Abhi Kumar	7f615b3514	style(dashboards-v2): format list panel header with oxfmt	2026-06-25 14:10:06 +05:30
Abhi Kumar	1dd01f9b29	feat(dashboards-v2): move list columns editor below the query builder Replace the config-pane Columns section with a dnd-kit reorderable editor rendered beneath the query builder (V1 parity); sanitize selectFields to the field-key DTO so saved columns drop non-contract keys (isIndexed).	2026-06-25 14:10:06 +05:30
Abhi Kumar	89a94dfb77	feat(dashboards-v2): list columns editor with datasource column switch	2026-06-25 14:10:06 +05:30
Abhi Kumar	f227a25310	feat(dashboards-v2): list panel kind (logs/traces) with row detail	2026-06-25 14:10:06 +05:30
Abir Roy	a609a4044c	fix(ui): resolve monaco find widget clipping and flickering (#11826 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details	2026-06-24 20:11:11 +00:00