refactor(dashboard-v2): migrate variables bar to the overhauled model

* chore: deployments -> add default namespace group by

* chore: added integration tests for statefulsets

* chore: namespace group by for jobs

* chore: namespace group by for daemonsets

* chore: added group by clustername for all workloads and integration tests for the same

* chore: fix py fmt for integration tests

* chore: added group by namespace, cluster for pvcs

* chore: added cluster name default group by for namespaces monitoring

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.128.0
+    image: signoz/signoz:v0.129.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.128.0
+    image: signoz/signoz:v0.129.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.128.0}
+    image: signoz/signoz:${VERSION:-v0.129.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.128.0}
+    image: signoz/signoz:${VERSION:-v0.129.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -2591,6 +2591,41 @@ components:
       - panels
       - layouts
       type: object
+    DashboardtypesDashboardView:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        data:
+          $ref: '#/components/schemas/DashboardtypesDashboardViewData'
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - data
+      - orgId
+      type: object
+    DashboardtypesDashboardViewData:
+      properties:
+        order:
+          $ref: '#/components/schemas/DashboardtypesListOrder'
+        query:
+          type: string
+        sort:
+          $ref: '#/components/schemas/DashboardtypesListSort'
+        version:
+          type: string
+      required:
+      - version
+      type: object
     DashboardtypesDatasourcePlugin:
       discriminator:
         mapping:
@@ -2875,6 +2910,15 @@ components:
       - total
       - tags
       type: object
+    DashboardtypesListableDashboardView:
+      properties:
+        views:
+          items:
+            $ref: '#/components/schemas/DashboardtypesDashboardView'
+          type: array
+      required:
+      - views
+      type: object
     DashboardtypesListedDashboardForUserV2:
       properties:
         createdAt:
@@ -3179,6 +3223,16 @@ components:
       - tags
       - spec
       type: object
+    DashboardtypesPostableDashboardView:
+      properties:
+        data:
+          $ref: '#/components/schemas/DashboardtypesDashboardViewData'
+        name:
+          type: string
+      required:
+      - name
+      - data
+      type: object
     DashboardtypesPostablePublicDashboard:
       properties:
         defaultTimeRange:
@@ -13328,6 +13382,231 @@ paths:
       summary: Update user preference
       tags:
       - preferences
+  /api/v2/dashboard_views:
+    get:
+      deprecated: false
+      description: Returns every saved view in the calling user's org. Saved views
+        are shared org-wide.
+      operationId: ListDashboardViews
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesListableDashboardView'
+                  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
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List dashboard saved views
+      tags:
+      - dashboard
+    post:
+      deprecated: false
+      description: Persists the calling user's dashboard listing state (query, sort,
+        order) as a named, reusable view shared across the org.
+      operationId: CreateDashboardView
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesPostableDashboardView'
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesDashboardView'
+                  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
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Create dashboard saved view
+      tags:
+      - dashboard
+  /api/v2/dashboard_views/{id}:
+    delete:
+      deprecated: false
+      description: Removes a saved view. Saved views are shared org-wide. Deleting
+        a non-existent view returns 404.
+      operationId: DeleteDashboardView
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Delete dashboard saved view
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: Replaces a saved view's name and data. Saved views are shared org-wide.
+      operationId: UpdateDashboardView
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesPostableDashboardView'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesDashboardView'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Update dashboard saved view
+      tags:
+      - dashboard
   /api/v2/dashboards:
     get:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -266,6 +266,22 @@ func (module *module) DeletePreferencesForUser(ctx context.Context, orgID valuer
 	return module.pkgDashboardModule.DeletePreferencesForUser(ctx, orgID, userID)
 }
 
+func (module *module) CreateView(ctx context.Context, orgID valuer.UUID, postable dashboardtypes.PostableDashboardView) (*dashboardtypes.DashboardView, error) {
+	return module.pkgDashboardModule.CreateView(ctx, orgID, postable)
+}
+
+func (module *module) ListViews(ctx context.Context, orgID valuer.UUID) (*dashboardtypes.ListableDashboardView, error) {
+	return module.pkgDashboardModule.ListViews(ctx, orgID)
+}
+
+func (module *module) UpdateView(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updateable dashboardtypes.UpdatableDashboardView) (*dashboardtypes.DashboardView, error) {
+	return module.pkgDashboardModule.UpdateView(ctx, orgID, id, updateable)
+}
+
+func (module *module) DeleteView(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	return module.pkgDashboardModule.DeleteView(ctx, orgID, id)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

ee/query-service/app/server.go

@@ -10,7 +10,6 @@ import (
 	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
 	"go.opentelemetry.io/otel/propagation"
 
-	"github.com/SigNoz/signoz/pkg/cache/memorycache"
 	"github.com/SigNoz/signoz/pkg/errors"
 
 	"github.com/gorilla/handlers"
@@ -20,7 +19,6 @@ import (
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
-	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/web"
@@ -59,25 +57,12 @@ type Server struct {
 
 // NewServer creates and initializes Server
 func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
-	cacheForTraceDetail, err := memorycache.New(context.TODO(), signoz.Instrumentation.ToProviderSettings(), cache.Config{
-		Provider: "memory",
-		Memory: cache.Memory{
-			NumCounters: 10 * 10000,
-			MaxCost:     1 << 27, // 128 MB
-		},
-	})
-	if err != nil {
-		return nil, err
-	}
-
 	reader := clickhouseReader.NewReader(
 		signoz.Instrumentation.Logger(),
 		signoz.SQLStore,
 		signoz.TelemetryStore,
 		signoz.Prometheus,
 		signoz.TelemetryStore.Cluster(),
-		config.Querier.FluxInterval,
-		cacheForTraceDetail,
 		signoz.Cache,
 		nil,
 	)

ee/sqlschema/postgressqlschema/signozdb_index_test.go

@@ -1,101 +0,0 @@
-package postgressqlschema
-
-import (
-	"context"
-	"os"
-	"testing"
-	"time"
-
-	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
-	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
-	"github.com/SigNoz/signoz/pkg/sqlschema"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/stretchr/testify/require"
-)
-
-// devenvPostgresDSN is the DSN for the postgres started by `make devenv-postgres`.
-// Override with TEST_POSTGRES_DSN to point at a different instance.
-const devenvPostgresDSN = "postgres://postgres:password@localhost:5432/signoz?sslmode=disable"
-
-// TestSignozDBTagUniqueIndex inspects the real postgres database the enterprise
-// server migrates and verifies the functional unique index added by migration
-// 094 on the "tag" table.
-//
-//   - "MigrationCreatedIndex" is the ground-truth check: it reads the index
-//     definition straight out of pg_indexes and confirms the functional unique
-//     index physically exists. This proves the migration ran and postgres
-//     accepted it.
-//   - "GetIndicesRoundTrip" exercises the engine's GetIndices read-back path and
-//     checks it reconstructs the same index. This is the part your colleague
-//     asked about.
-//
-// It mirrors the sqlite signoz.db test, but talks to the devenv postgres
-// container instead of a local file. The test skips if postgres is unreachable
-// (run `make devenv-postgres` and the enterprise server first).
-func TestSignozDBTagUniqueIndex(t *testing.T) {
-	dsn := os.Getenv("TEST_POSTGRES_DSN")
-	if dsn == "" {
-		dsn = devenvPostgresDSN
-	}
-
-	ctx := context.Background()
-	cfg := sqlstore.Config{
-		Provider:   "postgres",
-		Postgres:   sqlstore.PostgresConfig{DSN: dsn},
-		Connection: sqlstore.ConnectionConfig{MaxOpenConns: 10, MaxConnLifetime: time.Minute},
-	}
-
-	providerSettings := instrumentationtest.New().ToProviderSettings()
-	store, err := postgressqlstore.New(ctx, providerSettings, cfg)
-	if err != nil {
-		t.Skipf("postgres unreachable at %s (run `make devenv-postgres` and the enterprise server): %v", dsn, err)
-	}
-
-	pingCtx, cancel := context.WithTimeout(ctx, 2*time.Second)
-	defer cancel()
-	if err := store.SQLDB().PingContext(pingCtx); err != nil {
-		t.Skipf("postgres unreachable at %s (run `make devenv-postgres` and the enterprise server): %v", dsn, err)
-	}
-	t.Logf("using postgres at %s", dsn)
-
-	schema, err := New(ctx, providerSettings, sqlschema.Config{}, store)
-	require.NoError(t, err)
-
-	expected := &sqlschema.UniqueIndex{
-		TableName:   "tag",
-		ColumnNames: []sqlschema.ColumnName{"org_id", "kind", "key", "value"},
-		Expressions: []string{"org_id", "kind", "LOWER(key)", "LOWER(value)"},
-	}
-
-	t.Run("MigrationCreatedIndex", func(t *testing.T) {
-		var def string
-		err := store.
-			BunDB().
-			NewRaw("SELECT indexdef FROM pg_indexes WHERE tablename = 'tag' AND indexname = ?", expected.Name()).
-			Scan(ctx, &def)
-		require.NoError(t, err, "expected unique index %q to exist in postgres", expected.Name())
-		t.Logf("stored indexdef: %s", def)
-
-		require.Contains(t, def, "UNIQUE")
-		// postgres normalizes function names to lowercase.
-		require.Contains(t, def, "lower(key)")
-		require.Contains(t, def, "lower(value)")
-	})
-
-	t.Run("GetIndicesRoundTrip", func(t *testing.T) {
-		indices, err := schema.GetIndices(ctx, "tag")
-		require.NoError(t, err)
-
-		t.Logf("GetIndices returned %d indices", len(indices))
-		var got sqlschema.Index
-		for _, idx := range indices {
-			t.Logf("  name=%q type=%s columns=%v create=%s", idx.Name(), idx.Type(), idx.Columns(), string(idx.ToCreateSQL(schema.Formatter())))
-			if idx.Name() == expected.Name() {
-				got = idx
-			}
-		}
-
-		require.NotNil(t, got, "GetIndices did not return the functional unique index %q", expected.Name())
-		require.True(t, expected.Equals(got), "round-tripped index should equal the original definition")
-	})
-}

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

@@ -21,14 +21,17 @@ import type {
 	CloneDashboardV2201,
 	CloneDashboardV2PathParameters,
 	CreateDashboardV2201,
+	CreateDashboardView201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
 	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
+	DashboardtypesPostableDashboardViewDTO,
 	DashboardtypesPostablePublicDashboardDTO,
 	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeleteDashboardV2PathParameters,
+	DeleteDashboardViewPathParameters,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
 	GetDashboardV2PathParameters,
@@ -38,6 +41,7 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	ListDashboardViews200,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
 	ListDashboardsV2200,
@@ -51,6 +55,8 @@ import type {
 	UnpinDashboardV2PathParameters,
 	UpdateDashboardV2200,
 	UpdateDashboardV2PathParameters,
+	UpdateDashboardView200,
+	UpdateDashboardViewPathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -650,6 +656,354 @@ export const invalidateGetPublicDashboardWidgetQueryRange = async (
 	return queryClient;
 };
 
+/**
+ * Returns every saved view in the calling user's org. Saved views are shared org-wide.
+ * @summary List dashboard saved views
+ */
+export const listDashboardViews = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListDashboardViews200>({
+		url: `/api/v2/dashboard_views`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListDashboardViewsQueryKey = () => {
+	return [`/api/v2/dashboard_views`] as const;
+};
+
+export const getListDashboardViewsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listDashboardViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listDashboardViews>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListDashboardViewsQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listDashboardViews>>
+	> = ({ signal }) => listDashboardViews(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listDashboardViews>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListDashboardViewsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listDashboardViews>>
+>;
+export type ListDashboardViewsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List dashboard saved views
+ */
+
+export function useListDashboardViews<
+	TData = Awaited<ReturnType<typeof listDashboardViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listDashboardViews>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListDashboardViewsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List dashboard saved views
+ */
+export const invalidateListDashboardViews = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListDashboardViewsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Persists the calling user's dashboard listing state (query, sort, order) as a named, reusable view shared across the org.
+ * @summary Create dashboard saved view
+ */
+export const createDashboardView = (
+	dashboardtypesPostableDashboardViewDTO?: BodyType<DashboardtypesPostableDashboardViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateDashboardView201>({
+		url: `/api/v2/dashboard_views`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesPostableDashboardViewDTO,
+		signal,
+	});
+};
+
+export const getCreateDashboardViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createDashboardView>>,
+		TError,
+		{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createDashboardView>>,
+	TError,
+	{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
+	TContext
+> => {
+	const mutationKey = ['createDashboardView'];
+	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 createDashboardView>>,
+		{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createDashboardView(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateDashboardViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createDashboardView>>
+>;
+export type CreateDashboardViewMutationBody =
+	| BodyType<DashboardtypesPostableDashboardViewDTO>
+	| undefined;
+export type CreateDashboardViewMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create dashboard saved view
+ */
+export const useCreateDashboardView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createDashboardView>>,
+		TError,
+		{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createDashboardView>>,
+	TError,
+	{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
+	TContext
+> => {
+	return useMutation(getCreateDashboardViewMutationOptions(options));
+};
+/**
+ * Removes a saved view. Saved views are shared org-wide. Deleting a non-existent view returns 404.
+ * @summary Delete dashboard saved view
+ */
+export const deleteDashboardView = (
+	{ id }: DeleteDashboardViewPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/dashboard_views/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteDashboardViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteDashboardView>>,
+		TError,
+		{ pathParams: DeleteDashboardViewPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteDashboardView>>,
+	TError,
+	{ pathParams: DeleteDashboardViewPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteDashboardView'];
+	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 deleteDashboardView>>,
+		{ pathParams: DeleteDashboardViewPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteDashboardView(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteDashboardViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteDashboardView>>
+>;
+
+export type DeleteDashboardViewMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete dashboard saved view
+ */
+export const useDeleteDashboardView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteDashboardView>>,
+		TError,
+		{ pathParams: DeleteDashboardViewPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteDashboardView>>,
+	TError,
+	{ pathParams: DeleteDashboardViewPathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteDashboardViewMutationOptions(options));
+};
+/**
+ * Replaces a saved view's name and data. Saved views are shared org-wide.
+ * @summary Update dashboard saved view
+ */
+export const updateDashboardView = (
+	{ id }: UpdateDashboardViewPathParameters,
+	dashboardtypesPostableDashboardViewDTO?: BodyType<DashboardtypesPostableDashboardViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateDashboardView200>({
+		url: `/api/v2/dashboard_views/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesPostableDashboardViewDTO,
+		signal,
+	});
+};
+
+export const getUpdateDashboardViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardView>>,
+		TError,
+		{
+			pathParams: UpdateDashboardViewPathParameters;
+			data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateDashboardView>>,
+	TError,
+	{
+		pathParams: UpdateDashboardViewPathParameters;
+		data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateDashboardView'];
+	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 updateDashboardView>>,
+		{
+			pathParams: UpdateDashboardViewPathParameters;
+			data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateDashboardView(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateDashboardViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateDashboardView>>
+>;
+export type UpdateDashboardViewMutationBody =
+	| BodyType<DashboardtypesPostableDashboardViewDTO>
+	| undefined;
+export type UpdateDashboardViewMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update dashboard saved view
+ */
+export const useUpdateDashboardView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardView>>,
+		TError,
+		{
+			pathParams: UpdateDashboardViewPathParameters;
+			data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateDashboardView>>,
+	TError,
+	{
+		pathParams: UpdateDashboardViewPathParameters;
+		data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateDashboardViewMutationOptions(options));
+};
 /**
  * Returns a page of v2-shape dashboards for the org. This is the pure, user-independent list — it carries no pin state. Use ListDashboardsForUserV2 for the personalized, pin-aware list. Supports a filter DSL (`query`), sort (`updated_at`/`created_at`/`name`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`).
  * @summary List dashboards (v2)

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

@@ -4633,6 +4633,54 @@ export interface DashboardtypesDashboardSpecDTO {
 	variables: DashboardtypesVariableDTO[];
 }
 
+export enum DashboardtypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum DashboardtypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+}
+export interface DashboardtypesDashboardViewDataDTO {
+	order?: DashboardtypesListOrderDTO;
+	/**
+	 * @type string
+	 */
+	query?: string;
+	sort?: DashboardtypesListSortDTO;
+	/**
+	 * @type string
+	 */
+	version: string;
+}
+
+export interface DashboardtypesDashboardViewDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	data: DashboardtypesDashboardViewDataDTO;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export enum DashboardtypesDatasourcePluginKindDTO {
 	'signoz/Datasource' = 'signoz/Datasource',
 }
@@ -4744,15 +4792,6 @@ export interface DashboardtypesJSONPatchOperationDTO {
 	value?: unknown;
 }
 
-export enum DashboardtypesListOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export enum DashboardtypesListSortDTO {
-	updated_at = 'updated_at',
-	created_at = 'created_at',
-	name = 'name',
-}
 export interface DashboardtypesListedDashboardV2SpecDTO {
 	display?: DashboardtypesDisplayDTO;
 }
@@ -4895,6 +4934,13 @@ export interface DashboardtypesListableDashboardV2DTO {
 	total: number;
 }
 
+export interface DashboardtypesListableDashboardViewDTO {
+	/**
+	 * @type array
+	 */
+	views: DashboardtypesDashboardViewDTO[];
+}
+
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4946,6 +4992,14 @@ export interface DashboardtypesPostableDashboardV2DTO {
 	tags: TagtypesPostableTagDTO[] | null;
 }
 
+export interface DashboardtypesPostableDashboardViewDTO {
+	data: DashboardtypesDashboardViewDataDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export interface DashboardtypesPostablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -9837,6 +9891,36 @@ export type GetUserPreference200 = {
 export type UpdateUserPreferencePathParameters = {
 	name: string;
 };
+export type ListDashboardViews200 = {
+	data: DashboardtypesListableDashboardViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateDashboardView201 = {
+	data: DashboardtypesDashboardViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteDashboardViewPathParameters = {
+	id: string;
+};
+export type UpdateDashboardViewPathParameters = {
+	id: string;
+};
+export type UpdateDashboardView200 = {
+	data: DashboardtypesDashboardViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListDashboardsV2Params = {
 	/**
 	 * @type string

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.module.scss

@@ -63,5 +63,6 @@
 	flex: 0 0 auto;
 	min-height: 0;
 	min-width: 0;
-	padding: 8px;
+	padding-left: 12px;
+	padding-bottom: 12px;
 }

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.tsx

@@ -16,7 +16,7 @@ import PieArc from './PieArc';
 import PieCenterLabel from './PieCenterLabel';
 import styles from './Pie.module.scss';
 import { PieTooltipData } from './types';
-import { getFillColor } from './utils';
+import { getDonutGeometry, getFillColor } from './utils';
 
 /**
  * Donut chart rendered with @visx. Splits its area into chart + legend with the
@@ -78,16 +78,12 @@ export default function Pie({
 			[containerWidth, containerHeight, position, data],
 		);
 
-	// Donut geometry derived from the allocated chart box.
-	const { size, radius, innerRadius } = useMemo(() => {
-		const nextSize = Math.min(width, height);
-		const nextRadius = nextSize * 0.35;
-		return {
-			size: nextSize,
-			radius: nextRadius,
-			innerRadius: nextRadius * 0.6,
-		};
-	}, [width, height]);
+	// Donut geometry derived from the allocated chart box, sized to leave room
+	// for the external leader labels (see getDonutGeometry).
+	const { size, radius, innerRadius } = useMemo(
+		() => getDonutGeometry(width, height),
+		[width, height],
+	);
 
 	const totalValue = useMemo(
 		() => visibleData.reduce((sum, slice) => sum + slice.value, 0),

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/utils.test.ts

@@ -1,11 +1,40 @@
 import {
 	getArcGeometry,
+	getDonutGeometry,
 	getFillColor,
 	getScaledFontSize,
 	lightenColor,
 } from '../utils';
 
 describe('Pie utils', () => {
+	describe('getDonutGeometry', () => {
+		it('keeps the label anchor inside the box (reserves room for leader labels)', () => {
+			const { radius } = getDonutGeometry(400, 300);
+			const half = Math.min(400, 300) / 2; // 150
+			// The label anchor sits at radius * 1.3 and must stay within the box
+			// half-extent so labels are not clipped.
+			expect(radius * 1.3).toBeLessThanOrEqual(half);
+			// And it should use the available room (anchor = half - 22 allowance).
+			expect(radius * 1.3).toBeCloseTo(half - 22);
+		});
+
+		it('derives size and inner radius from the outer radius', () => {
+			const { size, radius, innerRadius } = getDonutGeometry(300, 300);
+			expect(size).toBeCloseTo(radius * 2);
+			expect(innerRadius).toBeCloseTo(radius * 0.6);
+		});
+
+		it('sizes off the smaller dimension so it fits both axes', () => {
+			expect(getDonutGeometry(1000, 200)).toStrictEqual(
+				getDonutGeometry(200, 1000),
+			);
+		});
+
+		it('never returns a negative radius for a box too small for labels', () => {
+			expect(getDonutGeometry(20, 20).radius).toBe(0);
+		});
+	});
+
 	describe('getScaledFontSize', () => {
 		it('returns the base size for empty text', () => {
 			expect(getScaledFontSize({ text: '', baseSize: 30, innerRadius: 100 })).toBe(

frontend/src/container/DashboardContainer/visualization/charts/Pie/types.ts

@@ -10,6 +10,16 @@ export interface ScaledFontSizeArgs {
 	innerRadius: number;
 }
 
+/** Donut sizing for a given chart box: the outer/inner radii and the square it spans. */
+export interface DonutGeometry {
+	/** Outer diameter — feeds the visx Pie width/height and the render guard. */
+	size: number;
+	/** Outer radius of the donut ring. */
+	radius: number;
+	/** Inner radius (the hole) — also bounds the centre-total font. */
+	innerRadius: number;
+}
+
 export interface ArcGeometry {
 	/** Outer point where the leader label sits. */
 	labelX: number;

frontend/src/container/DashboardContainer/visualization/charts/Pie/utils.ts

@@ -3,7 +3,37 @@
  * so the renderer stays declarative (per the one-component-per-file rule).
  */
 
-import { ArcGeometry, ParsedRgb, ScaledFontSizeArgs } from './types';
+import {
+	ArcGeometry,
+	DonutGeometry,
+	ParsedRgb,
+	ScaledFontSizeArgs,
+} from './types';
+
+// Leader-line + two-line label/value drawn outside the donut. `getArcGeometry`
+// anchors the label at `radius * LABEL_RADIUS_RATIO`; `LABEL_TEXT_ALLOWANCE` is
+// the px reserved beyond that anchor for the (10px, two-line) text so it never
+// clips against the SVG edge.
+const LABEL_RADIUS_RATIO = 1.3;
+const LABEL_TEXT_ALLOWANCE = 22;
+const INNER_RADIUS_RATIO = 0.6;
+
+/**
+ * Sizes the donut to fit inside a `width × height` box *with room for the
+ * external leader labels*. The label anchor sits at `radius * 1.3`, so we solve
+ * the outer radius back from the box's half-extent minus the text allowance —
+ * guaranteeing the labels stay inside the SVG instead of being clipped (V1 used
+ * a flat `0.35 * min(w,h)`, which left too little margin on small panels).
+ */
+export function getDonutGeometry(width: number, height: number): DonutGeometry {
+	const half = Math.min(width, height) / 2;
+	const radius = Math.max(0, (half - LABEL_TEXT_ALLOWANCE) / LABEL_RADIUS_RATIO);
+	return {
+		size: radius * 2,
+		radius,
+		innerRadius: radius * INNER_RADIUS_RATIO,
+	};
+}
 
 /**
  * Shrinks the centre-total font as the text gets longer so it never overflows
@@ -37,7 +67,7 @@ export function getArcGeometry(
 	radius: number,
 ): ArcGeometry {
 	const angle = (startAngle + endAngle) / 2;
-	const labelRadius = radius * 1.3;
+	const labelRadius = radius * LABEL_RADIUS_RATIO;
 	const lineEndRadius = radius * 1.1;
 	return {
 		labelX: Math.sin(angle) * labelRadius,

frontend/src/container/DashboardContainer/visualization/charts/__tests__/utils.test.ts

@@ -0,0 +1,79 @@
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+
+import { calculateChartDimensions } from '../utils';
+
+const labels = (count: number, length = 20): string[] =>
+	Array.from({ length: count }, (_, i) =>
+		`label-${i}`.padEnd(length, 'x').slice(0, length),
+	);
+
+describe('calculateChartDimensions', () => {
+	it('returns all zeros when the container has no space', () => {
+		expect(
+			calculateChartDimensions({
+				containerWidth: 0,
+				containerHeight: 300,
+				legendConfig: { position: LegendPosition.BOTTOM },
+				seriesLabels: labels(3),
+			}),
+		).toStrictEqual({
+			width: 0,
+			height: 0,
+			legendWidth: 0,
+			legendHeight: 0,
+			averageLegendWidth: 0,
+		});
+	});
+
+	it('RIGHT: reserves a side column capped at 30% of the width and keeps full height', () => {
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 400,
+			legendConfig: { position: LegendPosition.RIGHT },
+			seriesLabels: labels(10, 40),
+		});
+		// 40-char labels approximate to 336px, capped at min(240, 30% of 1000).
+		expect(dims.legendWidth).toBe(240);
+		expect(dims.width).toBe(760);
+		expect(dims.height).toBe(400);
+		expect(dims.legendHeight).toBe(400);
+	});
+
+	it('BOTTOM: a single row of items reserves one legend row', () => {
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 500,
+			legendConfig: { position: LegendPosition.BOTTOM },
+			seriesLabels: labels(3),
+		});
+		// One row = line height (28) + padding (12).
+		expect(dims.legendHeight).toBe(40);
+		expect(dims.height).toBe(460);
+		expect(dims.legendWidth).toBe(1000);
+	});
+
+	it('BOTTOM: many items cap at two rows on a tall container', () => {
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 500,
+			legendConfig: { position: LegendPosition.BOTTOM },
+			seriesLabels: labels(40),
+		});
+		// Two rows = 2 * 40 - 12 (no trailing padding) = 68, under the 80px cap.
+		expect(dims.legendHeight).toBe(68);
+		expect(dims.height).toBe(432);
+	});
+
+	it('BOTTOM: on a short container the legend never takes more than 30% of the height', () => {
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 160,
+			legendConfig: { position: LegendPosition.BOTTOM },
+			seriesLabels: labels(40),
+		});
+		// Without the height-relative cap the legend would take 68px of a 160px
+		// panel and the chart (pie especially) collapses to a sliver.
+		expect(dims.legendHeight).toBe(48); // 30% of 160
+		expect(dims.height).toBe(112);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/utils.ts

@@ -116,7 +116,15 @@ export function calculateChartDimensions({
 			? legendRowCount * legendRowHeight - LEGEND_PADDING
 			: legendRowHeight;
 
-	const maxAllowedLegendHeight = Math.min(2 * legendRowHeight, 80);
+	// Cap at two rows / 80px, and never more than 30% of the container height
+	// (the doc above always promised the %-cap; without it, short grid panels
+	// hand most of their area to the legend and the chart — the pie donut
+	// especially — collapses to a sliver). 30% mirrors the RIGHT-legend width cap.
+	const maxAllowedLegendHeight = Math.min(
+		2 * legendRowHeight,
+		80,
+		Math.floor(containerHeight * 0.3),
+	);
 
 	const bottomLegendHeight = Math.min(
 		idealBottomLegendHeight,

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { Skeleton } from 'antd';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -124,24 +123,14 @@ function ServiceOverview({
 			/>
 			<Card data-testid="service_latency">
 				<GraphContainer>
-					{topLevelOperationsIsLoading && (
-						<Skeleton
-							style={{
-								height: '100%',
-								padding: '16px',
-							}}
-						/>
-					)}
-					{!topLevelOperationsIsLoading && (
-						<Graph
-							onDragSelect={onDragSelect}
-							widget={latencyWidget}
-							onClickHandler={handleGraphClick('Service')}
-							isQueryEnabled={isQueryEnabled}
-							version={ENTITY_VERSION_V4}
-							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
-						/>
-					)}
+					<Graph
+						onDragSelect={onDragSelect}
+						widget={latencyWidget}
+						onClickHandler={handleGraphClick('Service')}
+						isQueryEnabled={isQueryEnabled}
+						version={ENTITY_VERSION_V4}
+						enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
+					/>
 				</GraphContainer>
 			</Card>
 		</>

frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx

@@ -1,4 +1,3 @@
-import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -29,24 +28,14 @@ function TopLevelOperation({
 				</Typography>
 			) : (
 				<GraphContainer>
-					{topLevelOperationsIsLoading && (
-						<Skeleton
-							style={{
-								height: '100%',
-								padding: '16px',
-							}}
-						/>
-					)}
-					{!topLevelOperationsIsLoading && (
-						<Graph
-							widget={widget}
-							onClickHandler={handleGraphClick(opName)}
-							onDragSelect={onDragSelect}
-							isQueryEnabled={!topLevelOperationsIsLoading}
-							version={ENTITY_VERSION_V4}
-							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
-						/>
-					)}
+					<Graph
+						widget={widget}
+						onClickHandler={handleGraphClick(opName)}
+						onDragSelect={onDragSelect}
+						isQueryEnabled={!topLevelOperationsIsLoading}
+						version={ENTITY_VERSION_V4}
+						enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
+					/>
 				</GraphContainer>
 			)}
 		</Card>

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -44,7 +44,6 @@
 				auto-fill,
 				minmax(var(--legend-average-width, 240px), 1fr)
 			);
-			row-gap: 4px;
 			column-gap: 12px;
 		}
 

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

@@ -20,6 +20,7 @@ import APIError from 'types/api/error';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
 import { useEditableTitle } from './DashboardInfo/useEditableTitle';
+import VariablesBar from '../VariablesBar/VariablesBar';
 
 import styles from './DashboardPageToolbar.module.scss';
 
@@ -137,6 +138,8 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 					onOpenRename={startEdit}
 				/>
 			</div>
+
+			<VariablesBar dashboard={dashboard} />
 		</section>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboard.module.scss

@@ -1,106 +1,15 @@
-// settings card wrapper — mirrors the V1 public dashboard treatment
-.publicDashboardCard {
+// Publish tab — "status strip" direction (Claude Design: Publish Drawer Final).
+// Fills the drawer height so the actions anchor a footer instead of floating.
+.publishTab {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
-	padding: 16px;
-	border-radius: 3px;
-	border: 1px solid var(--l2-border);
+	height: 100%;
+	min-height: 100%;
 }
 
-.statusTitle {
-	margin-bottom: 16px;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.checkbox {
-	margin-bottom: 8px;
-}
-
-.timeRangeSelectGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	margin-bottom: 8px;
-}
-
-.timeRangeSelectLabel {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-weight: 500;
-	line-height: 18px;
-}
-
-.timeRangeSelect {
-	width: 200px;
-}
-
-.urlGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.urlLabel {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-weight: 500;
-	line-height: 18px;
-}
-
-.urlContainer {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 0 4px;
-	border-radius: 4px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.urlText {
+.content {
 	flex: 1;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	line-height: 32px;
-}
-
-.callout {
 	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-top: 12px;
-	padding: 12px 8px;
-	border-radius: 3px;
-	background: color-mix(in srgb, var(--primary-background) 10%, transparent);
-}
-
-.calloutIcon {
-	flex-shrink: 0;
-	color: var(--text-robin-300);
-}
-
-.calloutText {
-	color: var(--text-robin-300);
-	font-family: Inter;
-	font-size: 11px;
-	font-weight: 400;
-	line-height: 16px;
-}
-
-.actions {
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-	margin-top: 32px;
+	flex-direction: column;
+	gap: 20px;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardActions/PublicDashboardActions.module.scss

@@ -0,0 +1,12 @@
+.footer {
+	position: sticky;
+	z-index: 1;
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 12px;
+	margin-top: 10px;
+	padding-top: 14px;
+	border-top: 1px solid var(--l2-border);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardActions/PublicDashboardActions.tsx

@@ -1,7 +1,7 @@
-import { Globe, Trash } from '@signozhq/icons';
+import { Globe, RefreshCw, Trash } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 
-import styles from './PublicDashboard.module.scss';
+import styles from './PublicDashboardActions.module.scss';
 
 interface PublicDashboardActionsProps {
 	isPublic: boolean;
@@ -25,7 +25,7 @@ function PublicDashboardActions({
 	onUnpublish,
 }: PublicDashboardActionsProps): JSX.Element {
 	return (
-		<div className={styles.actions}>
+		<div className={styles.footer}>
 			{isPublic ? (
 				<>
 					<Button
@@ -33,22 +33,22 @@ function PublicDashboardActions({
 						color="destructive"
 						disabled={disabled}
 						loading={isUnpublishing}
-						prefix={<Trash size={14} />}
+						prefix={<Trash size={15} />}
 						testId="public-dashboard-unpublish"
 						onClick={onUnpublish}
 					>
-						Unpublish dashboard
+						Unpublish Dashboard
 					</Button>
 					<Button
 						variant="solid"
 						color="primary"
 						disabled={disabled}
 						loading={isUpdating}
-						prefix={<Globe size={14} />}
+						prefix={<RefreshCw size={15} />}
 						testId="public-dashboard-update"
 						onClick={onUpdate}
 					>
-						Update published dashboard
+						Update Dashboard
 					</Button>
 				</>
 			) : (
@@ -57,11 +57,11 @@ function PublicDashboardActions({
 					color="primary"
 					disabled={disabled}
 					loading={isPublishing}
-					prefix={<Globe size={14} />}
+					prefix={<Globe size={15} />}
 					testId="public-dashboard-publish"
 					onClick={onPublish}
 				>
-					Publish dashboard
+					Publish Dashboard
 				</Button>
 			)}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardCallout.tsx

@@ -1,17 +0,0 @@
-import { Info } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './PublicDashboard.module.scss';
-
-function PublicDashboardCallout(): JSX.Element {
-	return (
-		<div className={styles.callout}>
-			<Info size={12} className={styles.calloutIcon} />
-			<Typography.Text className={styles.calloutText}>
-				Dashboard variables won&apos;t work in public dashboards
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default PublicDashboardCallout;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardHint/PublicDashboardHint.module.scss

@@ -0,0 +1,19 @@
+.hint {
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+	padding-top: 2px;
+	color: var(--l3-foreground);
+}
+
+.hintIcon {
+	flex: none;
+	margin-top: 1px;
+	color: var(--l3-foreground);
+}
+
+.hintText {
+	color: var(--l3-foreground);
+	font-size: 12px;
+	line-height: 1.5;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardHint/PublicDashboardHint.tsx

@@ -0,0 +1,17 @@
+import { Info } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './PublicDashboardHint.module.scss';
+
+function PublicDashboardHint(): JSX.Element {
+	return (
+		<div className={styles.hint}>
+			<Info size={14} className={styles.hintIcon} />
+			<Typography.Text className={styles.hintText}>
+				Dashboard variables aren&apos;t supported on public links.
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default PublicDashboardHint;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardSettingsForm/PublicDashboardSettingsForm.module.scss

@@ -0,0 +1,34 @@
+.switchRow {
+	display: flex;
+	align-items: center;
+}
+
+.fieldGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	// Render the (non-portaled) dropdown above the drawer.
+	[data-radix-popper-content-wrapper] {
+		z-index: 1100 !important;
+	}
+
+	// Radix sets --radix-select-trigger-width on the content element (the wrapper's
+	// child), so match it there to make the dropdown take the input's width.
+	// SelectSimple exposes no content className, hence the descendant selector.
+	[data-radix-popper-content-wrapper] > * {
+		width: var(--radix-select-trigger-width);
+		min-width: var(--radix-select-trigger-width);
+	}
+}
+
+.fieldLabel {
+	color: var(--l2-foreground);
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1;
+}
+
+.timeRangeSelect {
+	width: 100%;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardSettingsForm/PublicDashboardSettingsForm.tsx

@@ -1,9 +1,9 @@
-import { Checkbox } from '@signozhq/ui/checkbox';
 import { SelectSimple } from '@signozhq/ui/select';
+import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
+import { RelativeDurationOptions } from 'container/TopNav/DateTimeSelectionV2/constants';
 
-import { TIME_RANGE_PRESETS_OPTIONS } from './constants';
-import styles from './PublicDashboard.module.scss';
+import styles from './PublicDashboardSettingsForm.module.scss';
 
 interface PublicDashboardSettingsFormProps {
 	timeRangeEnabled: boolean;
@@ -22,28 +22,29 @@ function PublicDashboardSettingsForm({
 }: PublicDashboardSettingsFormProps): JSX.Element {
 	return (
 		<>
-			<Checkbox
-				id="public-dashboard-enable-time-range"
-				className={styles.checkbox}
-				testId="public-dashboard-time-range-toggle"
-				value={timeRangeEnabled}
-				disabled={disabled}
-				onChange={(checked): void => onTimeRangeEnabledChange(checked === true)}
-			>
-				Enable time range
-			</Checkbox>
+			<div className={styles.switchRow}>
+				<Switch
+					testId="public-dashboard-time-range-toggle"
+					value={timeRangeEnabled}
+					disabled={disabled}
+					onChange={onTimeRangeEnabledChange}
+				>
+					Enable time range
+				</Switch>
+			</div>
 
-			<div className={styles.timeRangeSelectGroup}>
-				<Typography.Text className={styles.timeRangeSelectLabel}>
+			<div className={styles.fieldGroup}>
+				<Typography.Text className={styles.fieldLabel}>
 					Default time range
 				</Typography.Text>
 				<SelectSimple
 					className={styles.timeRangeSelect}
 					testId="public-dashboard-default-time-range"
 					placeholder="Select default time range"
-					items={TIME_RANGE_PRESETS_OPTIONS}
+					items={RelativeDurationOptions}
 					value={defaultTimeRange}
 					disabled={disabled}
+					withPortal={false}
 					onChange={(value): void => onDefaultTimeRangeChange(value as string)}
 				/>
 			</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardStatus.tsx

@@ -1,21 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './PublicDashboard.module.scss';
-
-interface PublicDashboardStatusProps {
-	isPublic: boolean;
-}
-
-function PublicDashboardStatus({
-	isPublic,
-}: PublicDashboardStatusProps): JSX.Element {
-	return (
-		<Typography.Text className={styles.statusTitle}>
-			{isPublic
-				? 'This dashboard is publicly accessible. Anyone with the link can view it.'
-				: 'This dashboard is private. Publish it to make it accessible to anyone with the link.'}
-		</Typography.Text>
-	);
-}
-
-export default PublicDashboardStatus;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardStatus/PublicDashboardStatus.module.scss

@@ -0,0 +1,67 @@
+.statusStrip {
+	display: flex;
+	align-items: center;
+	gap: 13px;
+	padding: 14px 16px;
+	border-radius: 8px;
+	border: 1px solid var(--l2-border);
+	background: var(--l1-background);
+}
+
+.statusStripLive {
+	border-color: var(--callout-primary-border);
+	background: var(--callout-primary-background);
+}
+
+.statusMedallion {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: 38px;
+	height: 38px;
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+	background: var(--l3-background);
+	color: var(--l2-foreground);
+}
+
+.statusMedallionLive {
+	border-color: var(--callout-primary-border);
+	background: var(--callout-primary-background);
+	color: var(--callout-primary-icon);
+}
+
+.statusBody {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.statusTitle {
+	color: var(--l1-foreground);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
+.statusSubtitle {
+	margin-top: 2px;
+	color: var(--l3-foreground);
+	font-size: 13px;
+	line-height: 1.35;
+}
+
+.statusSubtitleLive {
+	color: var(--l2-foreground);
+}
+
+.statusBadgeDot {
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	margin-right: 6px;
+	background: currentColor;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardStatus/PublicDashboardStatus.tsx

@@ -0,0 +1,50 @@
+import { Globe, LockKeyhole } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './PublicDashboardStatus.module.scss';
+
+interface PublicDashboardStatusProps {
+	isPublic: boolean;
+}
+
+function PublicDashboardStatus({
+	isPublic,
+}: PublicDashboardStatusProps): JSX.Element {
+	return (
+		<div
+			className={cx(styles.statusStrip, { [styles.statusStripLive]: isPublic })}
+		>
+			<span
+				className={cx(styles.statusMedallion, {
+					[styles.statusMedallionLive]: isPublic,
+				})}
+			>
+				{isPublic ? <Globe size={18} /> : <LockKeyhole size={18} />}
+			</span>
+
+			<div className={styles.statusBody}>
+				<Typography.Text className={styles.statusTitle}>
+					{isPublic ? 'This dashboard is live' : 'This dashboard is private'}
+				</Typography.Text>
+				<Typography.Text
+					className={cx(styles.statusSubtitle, {
+						[styles.statusSubtitleLive]: isPublic,
+					})}
+				>
+					{isPublic
+						? 'Anyone with the link can view it — no account needed.'
+						: 'Publish it to share a read-only view with anyone who has the link.'}
+				</Typography.Text>
+			</div>
+
+			<Badge variant="outline" color={isPublic ? 'robin' : 'secondary'}>
+				<span className={styles.statusBadgeDot} />
+				{isPublic ? 'Public' : 'Private'}
+			</Badge>
+		</div>
+	);
+}
+
+export default PublicDashboardStatus;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardUrl.tsx

@@ -1,49 +0,0 @@
-import { Copy, ExternalLink } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './PublicDashboard.module.scss';
-
-interface PublicDashboardUrlProps {
-	url: string;
-	onCopy: () => void;
-	onOpen: () => void;
-}
-
-function PublicDashboardUrl({
-	url,
-	onCopy,
-	onOpen,
-}: PublicDashboardUrlProps): JSX.Element {
-	return (
-		<div className={styles.urlGroup}>
-			<Typography.Text className={styles.urlLabel}>
-				Public dashboard URL
-			</Typography.Text>
-
-			<div className={styles.urlContainer}>
-				<Typography.Text className={styles.urlText}>{url}</Typography.Text>
-				<Button
-					variant="ghost"
-					size="icon"
-					aria-label="Copy public dashboard URL"
-					testId="public-dashboard-copy-url"
-					onClick={onCopy}
-				>
-					<Copy size={14} />
-				</Button>
-				<Button
-					variant="ghost"
-					size="icon"
-					aria-label="Open public dashboard in new tab"
-					testId="public-dashboard-open-url"
-					onClick={onOpen}
-				>
-					<ExternalLink size={14} />
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default PublicDashboardUrl;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardUrl/PublicDashboardUrl.module.scss

@@ -0,0 +1,69 @@
+.fieldGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.fieldLabel {
+	color: var(--l2-foreground);
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1;
+}
+
+.linkPlaceholder {
+	display: flex;
+	align-items: center;
+	gap: 9px;
+	height: 40px;
+	padding: 0 12px;
+	border-radius: 6px;
+	border: 1px dashed var(--l2-border);
+	background: var(--l1-background);
+	color: var(--l3-foreground);
+}
+
+.linkPlaceholderIcon {
+	flex: none;
+	color: var(--l3-foreground);
+}
+
+.linkPlaceholderText {
+	color: var(--l3-foreground);
+	font-size: 13px;
+	line-height: 1;
+}
+
+.linkField {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	height: 40px;
+	padding: 0 5px 0 12px;
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+	background: var(--l1-background);
+
+	&:hover {
+		border-color: var(--l3-border);
+	}
+}
+
+.linkUrl {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--l2-foreground);
+	font-family: var(--font-mono, 'Geist Mono'), monospace;
+	font-size: 13px;
+	line-height: 1;
+}
+
+.linkDivider {
+	width: 1px;
+	height: 20px;
+	margin: 0 4px;
+	background: var(--l2-border);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboardUrl/PublicDashboardUrl.tsx

@@ -0,0 +1,59 @@
+import { Copy, ExternalLink, Link2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './PublicDashboardUrl.module.scss';
+
+interface PublicDashboardUrlProps {
+	isPublic: boolean;
+	url: string;
+	onCopy: () => void;
+	onOpen: () => void;
+}
+
+function PublicDashboardUrl({
+	isPublic,
+	url,
+	onCopy,
+	onOpen,
+}: PublicDashboardUrlProps): JSX.Element {
+	return (
+		<div className={styles.fieldGroup}>
+			<Typography.Text className={styles.fieldLabel}>Public link</Typography.Text>
+
+			{isPublic ? (
+				<div className={styles.linkField}>
+					<Typography.Text className={styles.linkUrl}>{url}</Typography.Text>
+					<span className={styles.linkDivider} />
+					<Button
+						variant="ghost"
+						size="icon"
+						aria-label="Copy link"
+						testId="public-dashboard-copy-url"
+						onClick={onCopy}
+					>
+						<Copy size={15} />
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						aria-label="Open link"
+						testId="public-dashboard-open-url"
+						onClick={onOpen}
+					>
+						<ExternalLink size={15} />
+					</Button>
+				</div>
+			) : (
+				<div className={styles.linkPlaceholder}>
+					<Link2 size={15} className={styles.linkPlaceholderIcon} />
+					<Typography.Text className={styles.linkPlaceholderText}>
+						Your shareable link will appear here once published
+					</Typography.Text>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default PublicDashboardUrl;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/constants.ts

@@ -1,14 +0,0 @@
-export interface TimeRangePresetOption {
-	label: string;
-	value: string;
-}
-
-// Default time-range presets offered for the public dashboard viewer.
-export const TIME_RANGE_PRESETS_OPTIONS: TimeRangePresetOption[] = [
-	{ label: 'Last 5 minutes', value: '5m' },
-	{ label: 'Last 15 minutes', value: '15m' },
-	{ label: 'Last 30 minutes', value: '30m' },
-	{ label: 'Last 1 hour', value: '1h' },
-	{ label: 'Last 6 hours', value: '6h' },
-	{ label: 'Last 1 day', value: '24h' },
-];

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

@@ -1,10 +1,10 @@
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
-import PublicDashboardActions from './PublicDashboardActions';
-import PublicDashboardCallout from './PublicDashboardCallout';
-import PublicDashboardSettingsForm from './PublicDashboardSettingsForm';
-import PublicDashboardStatus from './PublicDashboardStatus';
-import PublicDashboardUrl from './PublicDashboardUrl';
+import PublicDashboardActions from './PublicDashboardActions/PublicDashboardActions';
+import PublicDashboardHint from './PublicDashboardHint/PublicDashboardHint';
+import PublicDashboardSettingsForm from './PublicDashboardSettingsForm/PublicDashboardSettingsForm';
+import PublicDashboardStatus from './PublicDashboardStatus/PublicDashboardStatus';
+import PublicDashboardUrl from './PublicDashboardUrl/PublicDashboardUrl';
 import { usePublicDashboard } from './usePublicDashboard';
 import styles from './PublicDashboard.module.scss';
 
@@ -37,22 +37,27 @@ function PublicDashboardSettings({
 	const controlsDisabled = isLoading || !isAdmin;
 
 	return (
-		<div className={styles.publicDashboardCard}>
-			<PublicDashboardStatus isPublic={isPublic} />
+		<div className={styles.publishTab}>
+			<div className={styles.content}>
+				<PublicDashboardStatus isPublic={isPublic} />
 
-			<PublicDashboardSettingsForm
-				timeRangeEnabled={timeRangeEnabled}
-				defaultTimeRange={defaultTimeRange}
-				disabled={controlsDisabled}
-				onTimeRangeEnabledChange={setTimeRangeEnabled}
-				onDefaultTimeRangeChange={setDefaultTimeRange}
-			/>
+				<PublicDashboardUrl
+					isPublic={isPublic}
+					url={publicUrl}
+					onCopy={onCopyUrl}
+					onOpen={onOpenUrl}
+				/>
 
-			{isPublic && (
-				<PublicDashboardUrl url={publicUrl} onCopy={onCopyUrl} onOpen={onOpenUrl} />
-			)}
+				<PublicDashboardSettingsForm
+					timeRangeEnabled={timeRangeEnabled}
+					defaultTimeRange={defaultTimeRange}
+					disabled={controlsDisabled}
+					onTimeRangeEnabledChange={setTimeRangeEnabled}
+					onDefaultTimeRangeChange={setDefaultTimeRange}
+				/>
+			</div>
 
-			<PublicDashboardCallout />
+			<PublicDashboardHint />
 
 			<PublicDashboardActions
 				isPublic={isPublic}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/usePublicDashboard.ts

@@ -6,7 +6,6 @@ import {
 	invalidateGetPublicDashboard,
 	useCreatePublicDashboard,
 	useDeletePublicDashboard,
-	useGetPublicDashboard,
 	useUpdatePublicDashboard,
 } from 'api/generated/services/dashboard';
 import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
@@ -17,6 +16,8 @@ import { USER_ROLES } from 'types/roles';
 import { getAbsoluteUrl } from 'utils/basePath';
 import { openInNewTab } from 'utils/navigation';
 
+import { usePublicDashboardMeta } from './usePublicDashboardMeta';
+
 export interface UsePublicDashboardReturn {
 	isPublic: boolean;
 	isAdmin: boolean;
@@ -54,22 +55,16 @@ export function usePublicDashboard(
 	const [defaultTimeRange, setDefaultTimeRange] =
 		useState<string>(DEFAULT_TIME_RANGE);
 
+	// Read the shared public-meta cache — the GET is owned globally (toolbar), so the
+	// drawer reuses it rather than issuing its own request.
 	const {
-		data,
+		publicMeta,
+		isPublic,
 		isLoading: isLoadingMeta,
 		isFetching,
 		error,
 		refetch,
-	} = useGetPublicDashboard(
-		{ id: dashboardId },
-		{ query: { enabled: !!dashboardId, retry: false } },
-	);
-
-	// react-query retains the last successful `data` even after a refetch errors, so
-	// after unpublishing (the refetch 404s) `data` still holds the old publicPath.
-	// Gate on `!error` so the UI flips back to the private state.
-	const publicMeta = error ? undefined : data?.data;
-	const isPublic = !!publicMeta?.publicPath;
+	} = usePublicDashboardMeta(dashboardId);
 
 	// Seed form state from the server config when published.
 	useEffect(() => {
@@ -103,7 +98,7 @@ export function usePublicDashboard(
 		(message: string): void => {
 			toast.success(message);
 			void invalidateGetPublicDashboard(queryClient, { id: dashboardId });
-			void refetch();
+			refetch();
 		},
 		[queryClient, dashboardId, refetch],
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/PublicDashboard/usePublicDashboardMeta.ts

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { useGetPublicDashboard } from 'api/generated/services/dashboard';
+import type { DashboardtypesGettablePublicDasbhboardDTO } from 'api/generated/services/sigNoz.schemas';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+
+export interface UsePublicDashboardMetaReturn {
+	publicMeta: DashboardtypesGettablePublicDasbhboardDTO | undefined;
+	isPublic: boolean;
+	isLoading: boolean;
+	isFetching: boolean;
+	error: unknown;
+	refetch: () => void;
+}
+
+// How long a fetched result stays fresh before a natural trigger may refresh it.
+const PUBLIC_META_STALE_TIME = 5 * 60 * 1000;
+
+/**
+ * Single source of truth for a dashboard's public-sharing meta. Keyed by dashboard
+ * id via the generated query, so the GET happens once globally (the toolbar mounts it
+ * with the dashboard) and every other caller — the publish settings drawer — reads the
+ * same cache instead of issuing its own request. A mutation that invalidates
+ * getGetPublicDashboardQueryKey refreshes all consumers at once.
+ *
+ * Only fetched on cloud / enterprise tenants, where public dashboards are available.
+ */
+export function usePublicDashboardMeta(
+	dashboardId: string,
+): UsePublicDashboardMetaReturn {
+	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
+	const enabled = !!dashboardId && (isCloudUser || isEnterpriseSelfHostedUser);
+
+	const { data, isLoading, isFetching, error, refetch } = useGetPublicDashboard(
+		{ id: dashboardId },
+		{
+			query: {
+				enabled,
+				retry: false,
+				// refetchOnMount: false stops opening the drawer / switching to the Publish
+				// tab from refiring the GET — it reuses the toolbar's cached result. A finite
+				// staleTime still lets it refresh naturally once the data ages, and mutations
+				// invalidate the key to refresh the published state immediately.
+				staleTime: PUBLIC_META_STALE_TIME,
+				refetchOnMount: false,
+			},
+		},
+	);
+
+	// react-query retains the last successful `data` after a refetch errors (e.g. the
+	// 404 once a dashboard is unpublished), so gate on the error to reflect the
+	// private state.
+	const publicMeta = error ? undefined : data?.data;
+
+	return useMemo(
+		() => ({
+			publicMeta,
+			isPublic: !!publicMeta?.publicPath,
+			isLoading,
+			isFetching,
+			error,
+			refetch,
+		}),
+		[publicMeta, isLoading, isFetching, error, refetch],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/DynamicVariableFields.tsx

@@ -1,24 +1,34 @@
 import { useEffect, useMemo, useState } from 'react';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Info } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-// eslint-disable-next-line signoz/no-antd-components -- searchable async select: no @signozhq/ui equivalent
+// eslint-disable-next-line signoz/no-antd-components -- fixed-option signal picker
 import { Select } from 'antd';
+import { CustomSelect } from 'components/NewSelect';
+import TextToolTip from 'components/TextToolTip';
 import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
 import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import useDebounce from 'hooks/useDebounce';
+import { isRetryableError } from 'utils/errorUtils';
 
-import { TELEMETRY_SIGNALS, type TelemetrySignal } from '../variableModel';
+import {
+	DYNAMIC_SIGNAL_LABEL,
+	DYNAMIC_SIGNALS,
+	type DynamicSignalOption,
+	signalForApi,
+} from '../variableFormModel';
 import styles from './VariableForm.module.scss';
 
 interface DynamicVariableFieldsProps {
 	attribute: string;
-	signal: TelemetrySignal;
+	signal: DynamicSignalOption;
 	onChange: (patch: {
 		dynamicAttribute?: string;
-		dynamicSignal?: TelemetrySignal;
+		dynamicSignal?: DynamicSignalOption;
 	}) => void;
 	onPreview: (values: (string | number)[]) => void;
+	/** Inline error shown under the attribute field (e.g. duplicate attribute). */
+	attributeError?: string;
 }
 
 /** Dynamic-variable body: telemetry signal + field, whose live values preview. */
@@ -27,18 +37,24 @@ function DynamicVariableFields({
 	signal,
 	onChange,
 	onPreview,
+	attributeError,
 }: DynamicVariableFieldsProps): JSX.Element {
 	const [search, setSearch] = useState('');
 	const debouncedSearch = useDebounce(search, 300);
+	const apiSignal = signalForApi(signal);
 
-	const { data: keyData, isLoading } = useGetFieldKeys({
-		signal,
+	const {
+		data: keyData,
+		isLoading,
+		error,
+		refetch,
+	} = useGetFieldKeys({
+		signal: apiSignal,
 		name: debouncedSearch || undefined,
 	});
 
 	// `keys` is a Record keyed BY field name; the field names are the map keys.
-	// When the API reports the list is `complete`, search filters locally.
-	const isComplete = keyData?.data?.complete === true;
+	// CustomSelect filters the supplied options locally as the user types.
 	const options = useMemo(
 		() =>
 			Object.keys(keyData?.data?.keys ?? {}).map((name) => ({
@@ -49,7 +65,7 @@ function DynamicVariableFields({
 	);
 
 	const { data: valueData } = useGetFieldValues({
-		signal,
+		signal: apiSignal,
 		name: attribute,
 		enabled: !!attribute,
 	});
@@ -62,40 +78,60 @@ function DynamicVariableFields({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [valueData]);
 
+	const errorMessage = error ? (error as Error).message || null : null;
+
 	return (
 		<>
 			<div className={cx(styles.row, styles.sortSection)}>
-				<div className={styles.labelContainer}>
+				<div className={cx(styles.labelContainer, styles.sourceLabel)}>
 					<Typography.Text className={styles.label}>Source</Typography.Text>
+					<TextToolTip
+						text="By default, this searches across logs, traces, and metrics, which can be slow. Selecting a single source improves performance. Many fields share the same values across different signals (for example, `k8s.pod.name` is identical in logs, traces and metrics) making one source enough. Only use `All telemetry` when you need fields that have different values in different signal types."
+						useFilledIcon={false}
+						outlinedIcon={<Info size={14} />}
+					/>
 				</div>
-				<SelectSimple
+				<Select
 					className={styles.sortSelect}
+					popupMatchSelectWidth={false}
 					value={signal}
-					items={TELEMETRY_SIGNALS.map((s) => ({ label: s, value: s }))}
+					options={DYNAMIC_SIGNALS.map((s) => ({
+						label: DYNAMIC_SIGNAL_LABEL[s],
+						value: s,
+					}))}
 					onChange={(value): void =>
-						onChange({ dynamicSignal: value as TelemetrySignal })
+						onChange({ dynamicSignal: value as DynamicSignalOption })
 					}
-					testId="variable-signal-select"
+					data-testid="variable-signal-select"
 				/>
 			</div>
 			<div className={cx(styles.row, styles.sortSection)}>
 				<div className={styles.labelContainer}>
 					<Typography.Text className={styles.label}>Attribute</Typography.Text>
 				</div>
-				<Select
+				<CustomSelect
 					className={styles.searchSelect}
 					showSearch
 					value={attribute || undefined}
 					placeholder="Select a telemetry field"
 					loading={isLoading}
-					filterOption={isComplete}
+					options={options}
 					onSearch={setSearch}
 					onChange={(value): void => onChange({ dynamicAttribute: value as string })}
-					options={options}
-					notFoundContent={isLoading ? 'Loading…' : 'No fields found'}
+					noDataMessage="No fields found"
+					errorMessage={errorMessage}
+					onRetry={(): void => {
+						void refetch();
+					}}
+					showRetryButton={error ? isRetryableError(error) : true}
 					data-testid="variable-field-select"
 				/>
 			</div>
+			{attributeError ? (
+				<Typography.Text className={styles.errorText}>
+					{attributeError}
+				</Typography.Text>
+			) : null}
 		</>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/ListVariableFields.tsx

@@ -0,0 +1,139 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- fixed-option sort picker
+import { Select } from 'antd';
+import { CustomSelect } from 'components/NewSelect';
+
+import {
+	VARIABLE_SORT_LABEL,
+	VARIABLE_SORTS,
+	type VariableFormModel,
+	type VariableSort,
+} from '../variableFormModel';
+import styles from './VariableForm.module.scss';
+
+interface ListVariableFieldsProps {
+	model: VariableFormModel;
+	onChange: (patch: Partial<VariableFormModel>) => void;
+	previewValues: (string | number)[];
+	previewError: string | null;
+	defaultValue: string;
+	onDefaultValueChange: (value: string) => void;
+	/** Whether the "ALL values" toggle applies to this type (QUERY / CUSTOM). */
+	showAllOptionField: boolean;
+}
+
+/**
+ * Rows shared by the list-style variables (Query / Custom / Dynamic): the value
+ * preview, sort, multi-select / ALL toggles and the default-value picker.
+ */
+function ListVariableFields({
+	model,
+	onChange,
+	previewValues,
+	previewError,
+	defaultValue,
+	onDefaultValueChange,
+	showAllOptionField,
+}: ListVariableFieldsProps): JSX.Element {
+	return (
+		<>
+			<div className={cx(styles.row, styles.previewSection)}>
+				<Typography.Text className={styles.previewLabel}>
+					Preview of Values
+				</Typography.Text>
+				<div className={styles.previewValues}>
+					{previewError ? (
+						<Typography.Text className={styles.previewError}>
+							{previewError}
+						</Typography.Text>
+					) : (
+						previewValues.map((value, idx) => (
+							<Badge
+								// eslint-disable-next-line react/no-array-index-key -- preview values are display-only and may contain duplicates
+								key={`${value}-${idx}`}
+								color="vanilla"
+							>
+								{value.toString()}
+							</Badge>
+						))
+					)}
+				</div>
+			</div>
+
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Sort Values</Typography.Text>
+				</div>
+				<Select
+					className={styles.sortSelect}
+					popupMatchSelectWidth={false}
+					value={model.sort}
+					options={VARIABLE_SORTS.map((sort) => ({
+						label: VARIABLE_SORT_LABEL[sort],
+						value: sort,
+					}))}
+					onChange={(value): void => onChange({ sort: value as VariableSort })}
+					data-testid="variable-sort-select"
+				/>
+			</div>
+
+			<div className={cx(styles.row, styles.multiSection)}>
+				<Typography.Text className={styles.rowLabel}>
+					Enable multiple values to be checked
+				</Typography.Text>
+				<Switch
+					value={model.multiSelect}
+					onChange={(checked): void =>
+						onChange({
+							multiSelect: checked,
+							showAllOption: checked ? model.showAllOption : false,
+						})
+					}
+					testId="variable-multi-switch"
+				/>
+			</div>
+
+			{model.multiSelect && showAllOptionField ? (
+				<div className={cx(styles.row, styles.allOptionSection)}>
+					<Typography.Text className={styles.rowLabel}>
+						Include an option for ALL values
+					</Typography.Text>
+					<Switch
+						value={model.showAllOption}
+						onChange={(checked): void => onChange({ showAllOption: checked })}
+						testId="variable-all-switch"
+					/>
+				</div>
+			) : null}
+
+			<div className={cx(styles.row, styles.defaultValueSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Default Value</Typography.Text>
+					<Typography.Text className={styles.defaultValueDesc}>
+						{model.type === 'QUERY'
+							? 'Click Test Run Query to see the values or add custom value'
+							: 'Select a value from the preview values or add custom value'}
+					</Typography.Text>
+				</div>
+				<CustomSelect
+					className={styles.searchSelect}
+					showSearch
+					allowClear
+					placeholder="Select a default value"
+					value={defaultValue || undefined}
+					onChange={(value): void => onDefaultValueChange((value as string) ?? '')}
+					options={previewValues.map((value) => ({
+						label: value.toString(),
+						value: value.toString(),
+					}))}
+					data-testid="variable-default-select"
+				/>
+			</div>
+		</>
+	);
+}
+
+export default ListVariableFields;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/QueryVariableFields.tsx

@@ -3,14 +3,14 @@ import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import Editor from 'components/Editor';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
+import type { PayloadVariables } from 'types/api/dashboard/variables/query';
 
-import type { VariableSort } from '../variableModel';
 import styles from './VariableForm.module.scss';
 
 interface QueryVariableFieldsProps {
 	queryValue: string;
-	sort: VariableSort;
+	/** Sibling variable selections, so dependent `$vars` in the query resolve. */
+	variables: PayloadVariables;
 	onChange: (queryValue: string) => void;
 	onPreview: (values: (string | number)[]) => void;
 	onError: (message: string | null) => void;
@@ -19,7 +19,7 @@ interface QueryVariableFieldsProps {
 /** Query-variable body: SQL editor + "Test Run Query" that previews the values. */
 function QueryVariableFields({
 	queryValue,
-	sort,
+	variables,
 	onChange,
 	onPreview,
 	onError,
@@ -30,20 +30,21 @@ function QueryVariableFields({
 		setIsRunning(true);
 		onError(null);
 		try {
-			const res = await dashboardVariablesQuery({
-				query: queryValue,
-				variables: {},
-			});
+			const res = await dashboardVariablesQuery({ query: queryValue, variables });
 			if (res.statusCode === 200 && res.payload) {
-				onPreview(
-					sortValues(res.payload.variableValues ?? [], sort) as (string | number)[],
-				);
+				onPreview(res.payload.variableValues ?? []);
 			} else {
 				onError(res.error || 'Failed to run query');
 				onPreview([]);
 			}
 		} catch (err) {
-			onError((err as Error).message || 'Failed to run query');
+			// `dashboardVariablesQuery` throws `{ message, details: { error } }`.
+			const detail = (err as { details?: { error?: string } }).details?.error;
+			const message =
+				detail && detail.includes('Syntax error:')
+					? 'Please make sure query is valid and dependent variables are selected'
+					: detail || (err as Error).message || 'Failed to run query';
+			onError(message);
 			onPreview([]);
 		} finally {
 			setIsRunning(false);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -5,22 +5,8 @@
 .container {
 	display: flex;
 	flex-direction: column;
-	border: 1px solid var(--l1-border);
 	border-radius: 3px;
-}
-
-.allVariables {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 10px 16px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.allVariablesBtn {
-	--button-height: 24px;
-	--button-padding: 0;
-	color: var(--muted-foreground);
+	border: 1px solid var(--l2-border);
 }
 
 .content {
@@ -42,6 +28,12 @@
 	width: 200px;
 }
 
+.sourceLabel {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
 .label {
 	color: var(--l2-foreground);
 	font-family: Inter;
@@ -59,7 +51,7 @@
 .textarea,
 .defaultInput {
 	padding: 6px 6px 6px 8px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 	border-radius: 2px;
 	background: var(--l3-background);
 }
@@ -78,48 +70,89 @@
 	color: var(--bg-amber-500);
 }
 
-/* Variable type segmented group */
+/* Variable type — Tabs root composing the picker row + per-type body panels. */
 .typeSection {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	margin-top: 40px;
+	margin-bottom: 0;
+}
+
+/* Picker row (label left, tabs right); the bottom divider separates type from
+   config. Single line — the tab row scrolls (never wraps) when narrow. */
+.typePicker {
+	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16px;
+	padding-bottom: 12px;
+	border-bottom: 1px solid var(--l2-border);
+
+	@media (max-width: 1440px) {
+		flex-wrap: wrap;
+	}
+}
+
+/* Active tab panel — reset the Tabs default padding; body rows handle spacing. */
+.typePanel {
+	padding: 0 !important;
+}
+
+.typeContent {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
 }
 
 .typeLabelContainer {
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	width: auto;
+	white-space: nowrap;
 }
 
-.typeBtnGroup {
-	display: grid;
-	grid-template-columns: repeat(4, max-content);
-	height: 32px;
-	flex-shrink: 0;
-	border: 1px solid var(--l1-border);
+/* Horizontal scroll so the tab row never wraps to a second line. The scrollbar
+   is hidden — the row stays a single crisp line and scrolls only when narrow. */
+.typeTabsScroll {
+	justify-self: flex-end;
+	--tab-list-wrapper-secondary-padding-left: 0;
+}
+
+/* Connected segmented control, mirroring Overview's SegmentedControl: no outer
+   padding, segments divided by 1px borders, active segment filled + bold. */
+.typeTabs {
+	display: inline-flex;
+	flex-wrap: nowrap;
+	width: max-content;
+	gap: 0;
+	padding: 0;
+	border: 1px solid var(--l2-border);
 	border-radius: 2px;
-	background: var(--l2-background);
-	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+	background: transparent;
 }
 
-.typeBtn {
-	--button-height: 32px;
-	display: flex;
+.typeTab {
+	display: inline-flex;
+	flex-shrink: 0;
 	align-items: center;
-	justify-content: center;
-	gap: 4px;
-	min-width: 114px;
+	gap: 6px;
+	min-height: 24px;
+	padding: 6px 14px;
+	white-space: nowrap;
 	border-radius: 0;
 	color: var(--l2-foreground);
 
-	& + & {
-		border-left: 1px solid var(--l1-border);
+	&:not(:last-child) {
+		border-right: 1px solid var(--l2-border);
 	}
-}
 
-.typeBtnSelected {
-	background: var(--l1-border);
-	color: var(--l1-foreground);
+	&[data-state='active'] {
+		color: var(--l1-foreground);
+		font-weight: 500;
+		// override the Tabs component's default (transparent) active background.
+		background: var(--l3-background) !important;
+	}
 }
 
 .betaTag {
@@ -138,7 +171,7 @@
 .editorWrap {
 	height: 240px;
 	overflow: hidden;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 	border-radius: 2px;
 }
 
@@ -154,7 +187,7 @@
 
 .customSection :global(.custom-collapse) {
 	width: 100%;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 	border-radius: 3px 3px 0 0;
 
 	:global(.ant-collapse-item) {
@@ -208,7 +241,7 @@
 	min-height: 88px;
 	margin-bottom: 0;
 	padding-bottom: 8px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 	border-radius: 3px;
 }
 
@@ -271,13 +304,9 @@
 	letter-spacing: -0.07px;
 }
 
-.sortSelect {
-	width: 192px;
-}
-
 .defaultValueSection {
-	display: grid;
-	grid-template-columns: max-content 1fr;
+	display: flex;
+	justify-content: space-between;
 	gap: 1rem;
 	align-items: center;
 	margin-bottom: 0;
@@ -297,14 +326,21 @@
 	letter-spacing: -0.06px;
 }
 
+/* All variable selects (Source / Attribute / Sort / Default Value) share width
+   and a consistent --l2-border outline. */
+.sortSelect,
 .searchSelect {
-	width: 100%;
+	width: 240px;
+	flex-shrink: 0;
+
+	:global(.ant-select-selector) {
+		border-color: var(--l2-border) !important;
+	}
 }
 
-/* Footer */
-.footer {
+.actionButtons {
+	width: 100%;
 	display: flex;
 	justify-content: flex-end;
 	gap: 1rem;
-	margin-top: 12px;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.tsx

@@ -1,350 +1,199 @@
-import { useEffect, useState } from 'react';
-import { ArrowLeft, Check, X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Check, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Switch } from '@signozhq/ui/switch';
+import { TabsContent, TabsRoot } from '@signozhq/ui/tabs';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-// eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse/searchable Select: no @signozhq/ui equivalent
-import { Collapse, Input as AntdInput, Select } from 'antd';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
+// eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse: no @signozhq/ui equivalent
+import { Collapse, Input as AntdInput } from 'antd';
 
-import {
-	VARIABLE_SORTS,
-	type VariableFormModel,
-	type VariableSort,
-	type VariableType,
-} from '../variableModel';
+import type { VariableType } from '../variableFormModel';
 import DynamicVariableFields from './DynamicVariableFields';
+import ListVariableFields from './ListVariableFields';
 import QueryVariableFields from './QueryVariableFields';
-import VariableTypeSelector from './VariableTypeSelector';
+import { useVariableForm } from './useVariableForm';
+import VariableTypeTabs from './VariableTypeTabs';
 import styles from './VariableForm.module.scss';
-
-const SORT_LABEL: Record<VariableSort, string> = {
-	DISABLED: 'Disabled',
-	ASC: 'Ascending',
-	DESC: 'Descending',
-};
-
-function getNameError(name: string, existingNames: string[]): string | null {
-	if (name === '') {
-		return 'Variable name is required';
-	}
-	if (/\s/.test(name)) {
-		return 'Variable name cannot contain whitespaces';
-	}
-	if (existingNames.includes(name)) {
-		return 'Variable name already exists';
-	}
-	return null;
-}
-
-interface VariableFormProps {
-	initial: VariableFormModel;
-	/** Names of the other variables, for uniqueness validation. */
-	existingNames: string[];
-	isSaving: boolean;
-	onClose: () => void;
-	onSave: (model: VariableFormModel) => void;
-}
+import BackToAllVariables from '../components/BackToAllVariables/BackToAllVariables';
+import { VariableFormProps } from '../types';
+import VariableInfoForm from '../components/VariableInfoForm/VariableInfoForm';
 
 /**
  * In-drawer variable editor reproducing the V1 VariableItem layout, built on
  * @signozhq components (antd kept only for the monaco editor, TextArea, Collapse
- * and searchable selects). Master→detail: renders in place of the list.
+ * and searchable selects). Master→detail: renders in place of the list. Form
+ * state/handlers live in {@link useVariableForm}; the shared list-type rows in
+ * {@link ListVariableFields}.
  */
 function VariableForm({
 	initial,
-	existingNames,
+	siblings,
+	isNew,
 	isSaving,
 	onClose,
 	onSave,
 }: VariableFormProps): JSX.Element {
-	const [model, setModel] = useState<VariableFormModel>(initial);
-	const [previewValues, setPreviewValues] = useState<(string | number)[]>([]);
-	const [previewError, setPreviewError] = useState<string | null>(null);
-	const [defaultValue, setDefaultValue] = useState<string>(
-		((initial.defaultValue as { value?: string })?.value ?? '') as string,
-	);
+	const {
+		model,
+		set,
+		onNameChange,
+		selectType,
+		onCustomChange,
+		onDynamicChange,
+		setRawPreview,
+		previewValues,
+		previewError,
+		setPreviewError,
+		defaultValue,
+		setDefaultValue,
+		visibleNameError,
+		nameError,
+		attributeError,
+		cycleError,
+		isListType,
+		showAllOptionField,
+		payloadVariables,
+		handleSave,
+	} = useVariableForm({ initial, siblings, isNew, onSave });
 
-	useEffect(() => {
-		setModel(initial);
-		setPreviewValues([]);
-		setPreviewError(null);
-		setDefaultValue(
-			((initial.defaultValue as { value?: string })?.value ?? '') as string,
-		);
-	}, [initial]);
-
-	const set = (patch: Partial<VariableFormModel>): void =>
-		setModel((prev) => ({ ...prev, ...patch }));
-
-	const selectType = (type: VariableType): void => {
-		set({ type });
-		setPreviewValues([]);
-		setPreviewError(null);
-	};
-
-	const onCustomChange = (value: string): void => {
-		set({ customValue: value });
-		setPreviewValues(
-			sortValues(commaValuesParser(value), model.sort) as (string | number)[],
-		);
-	};
-
-	const trimmedName = model.name.trim();
-	const nameError = getNameError(trimmedName, existingNames);
-
-	const isListType =
-		model.type === 'QUERY' || model.type === 'CUSTOM' || model.type === 'DYNAMIC';
-	const showAllOptionField = model.type === 'QUERY' || model.type === 'CUSTOM';
-
-	const handleSave = (): void => {
-		onSave({
-			...model,
-			name: trimmedName,
-			defaultValue: defaultValue ? { value: defaultValue } : undefined,
-		});
-	};
+	// Shared list rows (preview/sort/multi/default) for the list-type variables;
+	// rendered as a sibling inside each list-type panel. Only the active panel
+	// mounts (Tabs unmounts the rest), so reusing one element is safe.
+	const listFields = isListType ? (
+		<ListVariableFields
+			model={model}
+			onChange={set}
+			previewValues={previewValues}
+			previewError={previewError}
+			defaultValue={defaultValue}
+			onDefaultValueChange={setDefaultValue}
+			showAllOptionField={showAllOptionField}
+		/>
+	) : null;
 
 	return (
-		<>
-			<div className={styles.container}>
-				<div className={styles.allVariables}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						className={styles.allVariablesBtn}
-						prefix={<ArrowLeft size={14} />}
-						onClick={onClose}
-						testId="variable-form-back"
-					>
-						All variables
-					</Button>
-				</div>
+		<div className={styles.container}>
+			<BackToAllVariables onClose={onClose} />
 
-				<div className={styles.content}>
-					{/* Name */}
-					<div className={cx(styles.row, styles.column)}>
-						<Typography.Text className={styles.label}>Name</Typography.Text>
-						<Input
-							className={styles.input}
-							value={model.name}
-							placeholder="Unique name of the variable"
-							onChange={(e): void => set({ name: e.target.value })}
-							testId="variable-name-input"
-						/>
-						{nameError ? (
-							<Typography.Text className={styles.errorText}>
-								{nameError}
-							</Typography.Text>
-						) : null}
-					</div>
+			<div className={styles.content}>
+				<VariableInfoForm
+					title={model.name}
+					description={model.description}
+					onTitleChange={onNameChange}
+					onDescriptionChange={(value): void => set({ description: value })}
+					visibleNameError={visibleNameError}
+				/>
 
-					{/* Description */}
-					<div className={cx(styles.row, styles.column)}>
-						<Typography.Text className={styles.label}>Description</Typography.Text>
-						<AntdInput.TextArea
-							className={styles.textarea}
-							value={model.description}
-							placeholder="Enter a description for the variable"
-							rows={3}
-							onChange={(e): void => set({ description: e.target.value })}
-							data-testid="variable-description-input"
-						/>
-					</div>
+				<TabsRoot
+					className={styles.typeSection}
+					value={model.type}
+					onValueChange={(next): void => selectType(next as VariableType)}
+				>
+					<VariableTypeTabs />
 
-					{/* Variable Type */}
-					<VariableTypeSelector value={model.type} onChange={selectType} />
-
-					{/* Type-specific body */}
-					{model.type === 'DYNAMIC' ? (
-						<DynamicVariableFields
-							attribute={model.dynamicAttribute}
-							signal={model.dynamicSignal}
-							onChange={(patch): void => set(patch)}
-							onPreview={setPreviewValues}
-						/>
-					) : null}
-
-					{model.type === 'QUERY' ? (
-						<QueryVariableFields
-							queryValue={model.queryValue}
-							sort={model.sort}
-							onChange={(queryValue): void => set({ queryValue })}
-							onPreview={setPreviewValues}
-							onError={setPreviewError}
-						/>
-					) : null}
-
-					{model.type === 'CUSTOM' ? (
-						<div className={cx(styles.row, styles.customSection)}>
-							<Collapse
-								collapsible="header"
-								rootClassName="custom-collapse"
-								defaultActiveKey={['1']}
-								items={[
-									{
-										key: '1',
-										label: 'Options',
-										children: (
-											<AntdInput.TextArea
-												value={model.customValue}
-												placeholder="Enter options separated by commas."
-												rootClassName="comma-input"
-												onChange={(e): void => onCustomChange(e.target.value)}
-												data-testid="variable-custom-input"
-											/>
-										),
-									},
-								]}
+					<TabsContent value="DYNAMIC" className={styles.typePanel}>
+						<div className={styles.typeContent}>
+							<DynamicVariableFields
+								attribute={model.dynamicAttribute}
+								signal={model.dynamicSignal}
+								onChange={onDynamicChange}
+								onPreview={setRawPreview}
+								attributeError={attributeError}
 							/>
+							{listFields}
 						</div>
-					) : null}
+					</TabsContent>
 
-					{model.type === 'TEXT' ? (
-						<div className={cx(styles.row, styles.textboxSection)}>
-							<div className={styles.labelContainer}>
-								<Typography.Text className={styles.label}>
-									Default Value
-								</Typography.Text>
-							</div>
-							<Input
-								className={styles.defaultInput}
-								value={model.textValue}
-								placeholder="Enter a default value (if any)..."
-								onChange={(e): void => set({ textValue: e.target.value })}
-								testId="variable-text-input"
+					<TabsContent value="QUERY" className={styles.typePanel}>
+						<div className={styles.typeContent}>
+							<QueryVariableFields
+								queryValue={model.queryValue}
+								variables={payloadVariables}
+								onChange={(queryValue): void => set({ queryValue })}
+								onPreview={setRawPreview}
+								onError={setPreviewError}
 							/>
+							{listFields}
 						</div>
-					) : null}
+					</TabsContent>
 
-					{/* Shared rows for list-type variables */}
-					{isListType ? (
-						<>
-							<div className={cx(styles.row, styles.previewSection)}>
-								<Typography.Text className={styles.previewLabel}>
-									Preview of Values
-								</Typography.Text>
-								<div className={styles.previewValues}>
-									{previewError ? (
-										<Typography.Text className={styles.previewError}>
-											{previewError}
-										</Typography.Text>
-									) : (
-										previewValues.map((value, idx) => (
-											<Badge
-												// eslint-disable-next-line react/no-array-index-key -- preview values are display-only and may contain duplicates
-												key={`${value}-${idx}`}
-												color="vanilla"
-											>
-												{value.toString()}
-											</Badge>
-										))
-									)}
-								</div>
-							</div>
-
-							<div className={cx(styles.row, styles.sortSection)}>
-								<div className={styles.labelContainer}>
-									<Typography.Text className={styles.label}>Sort Values</Typography.Text>
-								</div>
-								<SelectSimple
-									className={styles.sortSelect}
-									value={model.sort}
-									items={VARIABLE_SORTS.map((sort) => ({
-										label: SORT_LABEL[sort],
-										value: sort,
-									}))}
-									onChange={(value): void => set({ sort: value as VariableSort })}
-									testId="variable-sort-select"
+					<TabsContent value="CUSTOM" className={styles.typePanel}>
+						<div className={styles.typeContent}>
+							<div className={cx(styles.row, styles.customSection)}>
+								<Collapse
+									collapsible="header"
+									rootClassName="custom-collapse"
+									defaultActiveKey={['1']}
+									items={[
+										{
+											key: '1',
+											label: 'Options',
+											children: (
+												<AntdInput.TextArea
+													value={model.customValue}
+													placeholder="Enter options separated by commas."
+													rootClassName="comma-input"
+													onChange={(e): void => onCustomChange(e.target.value)}
+													data-testid="variable-custom-input"
+												/>
+											),
+										},
+									]}
 								/>
 							</div>
+							{listFields}
+						</div>
+					</TabsContent>
 
-							<div className={cx(styles.row, styles.multiSection)}>
-								<Typography.Text className={styles.rowLabel}>
-									Enable multiple values to be checked
-								</Typography.Text>
-								<Switch
-									value={model.multiSelect}
-									onChange={(checked): void => {
-										set({
-											multiSelect: checked,
-											showAllOption: checked ? model.showAllOption : false,
-										});
-									}}
-									testId="variable-multi-switch"
-								/>
-							</div>
-
-							{model.multiSelect && showAllOptionField ? (
-								<div className={cx(styles.row, styles.allOptionSection)}>
-									<Typography.Text className={styles.rowLabel}>
-										Include an option for ALL values
-									</Typography.Text>
-									<Switch
-										value={model.showAllOption}
-										onChange={(checked): void => set({ showAllOption: checked })}
-										testId="variable-all-switch"
-									/>
-								</div>
-							) : null}
-
-							<div className={cx(styles.row, styles.defaultValueSection)}>
+					<TabsContent value="TEXT" className={styles.typePanel}>
+						<div className={styles.typeContent}>
+							<div className={cx(styles.row, styles.textboxSection)}>
 								<div className={styles.labelContainer}>
 									<Typography.Text className={styles.label}>
 										Default Value
 									</Typography.Text>
-									<Typography.Text className={styles.defaultValueDesc}>
-										{model.type === 'QUERY'
-											? 'Click Test Run Query to see the values or add custom value'
-											: 'Select a value from the preview values or add custom value'}
-									</Typography.Text>
 								</div>
-								<Select
-									className={styles.searchSelect}
-									showSearch
-									allowClear
-									placeholder="Select a default value"
-									value={defaultValue || undefined}
-									onChange={(value): void => setDefaultValue(value ?? '')}
-									options={previewValues.map((value) => ({
-										label: value.toString(),
-										value: value.toString(),
-									}))}
-									data-testid="variable-default-select"
+								<Input
+									className={styles.defaultInput}
+									value={model.textValue}
+									placeholder="Enter a default value (if any)..."
+									onChange={(e): void => set({ textValue: e.target.value })}
+									testId="variable-text-input"
 								/>
 							</div>
-						</>
-					) : null}
+						</div>
+					</TabsContent>
+				</TabsRoot>
+
+				{cycleError ? (
+					<Typography.Text className={styles.errorText}>
+						{cycleError}
+					</Typography.Text>
+				) : null}
+
+				<div className={styles.actionButtons}>
+					<Button
+						variant="outlined"
+						color="secondary"
+						prefix={<X size={14} />}
+						onClick={onClose}
+					>
+						Discard
+					</Button>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Check size={14} />}
+						disabled={!!nameError || !!attributeError}
+						loading={isSaving}
+						onClick={handleSave}
+						testId="variable-save"
+					>
+						Save Variable
+					</Button>
 				</div>
 			</div>
-
-			<div className={styles.footer}>
-				<Button
-					variant="solid"
-					color="secondary"
-					prefix={<X size={14} />}
-					onClick={onClose}
-				>
-					Discard
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					prefix={<Check size={14} />}
-					disabled={!!nameError}
-					loading={isSaving}
-					onClick={handleSave}
-					testId="variable-save"
-				>
-					Save Variable
-				</Button>
-			</div>
-		</>
+		</div>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableTypeSelector.tsx

@@ -1,99 +0,0 @@
-import {
-	ClipboardType,
-	DatabaseZap,
-	Info,
-	LayoutList,
-	Pyramid,
-} from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import TextToolTip from 'components/TextToolTip';
-
-import type { VariableType } from '../variableModel';
-import styles from './VariableForm.module.scss';
-
-interface VariableTypeSelectorProps {
-	value: VariableType;
-	onChange: (type: VariableType) => void;
-}
-
-/** The segmented Dynamic / Textbox / Custom / Query type picker. */
-function VariableTypeSelector({
-	value,
-	onChange,
-}: VariableTypeSelectorProps): JSX.Element {
-	return (
-		<div className={cx(styles.row, styles.typeSection)}>
-			<div className={styles.typeLabelContainer}>
-				<Typography.Text className={styles.label}>Variable Type</Typography.Text>
-				<TextToolTip
-					text="Learn more about supported variable types"
-					url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
-					urlText="here"
-					useFilledIcon={false}
-					outlinedIcon={<Info size={14} />}
-				/>
-			</div>
-			<div className={styles.typeBtnGroup}>
-				<Button
-					variant="ghost"
-					color="secondary"
-					prefix={<Pyramid size={14} />}
-					className={cx(styles.typeBtn, {
-						[styles.typeBtnSelected]: value === 'DYNAMIC',
-					})}
-					onClick={(): void => onChange('DYNAMIC')}
-					testId="variable-type-dynamic"
-				>
-					Dynamic
-					<Badge color="robin" className={styles.betaTag}>
-						Beta
-					</Badge>
-				</Button>
-				<Button
-					variant="ghost"
-					color="secondary"
-					prefix={<ClipboardType size={14} />}
-					className={cx(styles.typeBtn, {
-						[styles.typeBtnSelected]: value === 'TEXT',
-					})}
-					onClick={(): void => onChange('TEXT')}
-					testId="variable-type-textbox"
-				>
-					Textbox
-				</Button>
-				<Button
-					variant="ghost"
-					color="secondary"
-					prefix={<LayoutList size={14} />}
-					className={cx(styles.typeBtn, {
-						[styles.typeBtnSelected]: value === 'CUSTOM',
-					})}
-					onClick={(): void => onChange('CUSTOM')}
-					testId="variable-type-custom"
-				>
-					Custom
-				</Button>
-				<Button
-					variant="ghost"
-					color="secondary"
-					prefix={<DatabaseZap size={14} />}
-					className={cx(styles.typeBtn, {
-						[styles.typeBtnSelected]: value === 'QUERY',
-					})}
-					onClick={(): void => onChange('QUERY')}
-					testId="variable-type-query"
-				>
-					Query
-					<Badge color="amber" className={styles.betaTag}>
-						Not Recommended
-					</Badge>
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default VariableTypeSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableTypeTabs.tsx

@@ -0,0 +1,93 @@
+import {
+	ClipboardType,
+	DatabaseZap,
+	Info,
+	LayoutList,
+	Pyramid,
+} from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { TabsList, TabsTrigger } from '@signozhq/ui/tabs';
+import { Typography } from '@signozhq/ui/typography';
+import TextToolTip from 'components/TextToolTip';
+
+import styles from './VariableForm.module.scss';
+
+/**
+ * Presentational trigger row for the variable-type tabs (label + segmented
+ * triggers). Must render inside a `TabsRoot`, which owns the active state and
+ * change handling; the matching `TabsContent` panels are siblings in the root.
+ */
+function VariableTypeTabs(): JSX.Element {
+	return (
+		<div className={styles.typePicker}>
+			<div className={styles.typeLabelContainer}>
+				<Typography.Text className={styles.label}>Variable Type</Typography.Text>
+				<TextToolTip
+					text="Learn more about supported variable types"
+					url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
+					urlText="here"
+					useFilledIcon={false}
+					outlinedIcon={<Info size={14} />}
+				/>
+			</div>
+
+			<div className={styles.typeTabsScroll}>
+				<TabsList variant="secondary" className={styles.typeTabs}>
+					<TabsTrigger
+						value="DYNAMIC"
+						className={styles.typeTab}
+						testId="variable-type-dynamic"
+					>
+						<Pyramid size={14} />
+						Dynamic
+						<Badge color="robin" className={styles.betaTag}>
+							Beta
+						</Badge>
+					</TabsTrigger>
+					<TabsTrigger
+						value="TEXT"
+						className={styles.typeTab}
+						testId="variable-type-textbox"
+					>
+						<ClipboardType size={14} />
+						Textbox
+					</TabsTrigger>
+					<TabsTrigger
+						value="CUSTOM"
+						className={styles.typeTab}
+						testId="variable-type-custom"
+					>
+						<LayoutList size={14} />
+						Custom
+					</TabsTrigger>
+					<TabsTrigger
+						value="QUERY"
+						className={styles.typeTab}
+						testId="variable-type-query"
+					>
+						<DatabaseZap size={14} />
+						Query
+						<Badge color="amber" className={styles.betaTag}>
+							Not Recommended
+						</Badge>
+						<span
+							className={styles.betaTag}
+							onClick={(e): void => e.stopPropagation()}
+							role="presentation"
+						>
+							<TextToolTip
+								text="Learn why we don't recommend"
+								url="https://signoz.io/docs/userguide/manage-variables/#why-avoid-clickhouse-query-variables"
+								urlText="here"
+								useFilledIcon={false}
+								outlinedIcon={<Info size={14} />}
+							/>
+						</span>
+					</TabsTrigger>
+				</TabsList>
+			</div>
+		</div>
+	);
+}
+
+export default VariableTypeTabs;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/useVariableForm.ts

@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from 'react';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import type { PayloadVariables } from 'types/api/dashboard/variables/query';
+
+import type { VariableSelectionMap } from '../../../VariablesBar/selectionTypes';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { detectVariableCycle } from '../variableDependencies';
+import {
+	sortValuesByOrder,
+	type VariableFormModel,
+	type VariableType,
+} from '../variableFormModel';
+import { getAttributeError, getNameError } from './variableValidation';
+
+// Stable reference so the zustand selector never returns a fresh object (which
+// would make useSyncExternalStore loop) when this dashboard has no selections.
+const EMPTY_SELECTIONS: VariableSelectionMap = {};
+
+interface UseVariableFormArgs {
+	initial: VariableFormModel;
+	siblings: VariableFormModel[];
+	isNew: boolean;
+	onSave: (model: VariableFormModel) => void;
+}
+
+export interface UseVariableForm {
+	model: VariableFormModel;
+	set: (patch: Partial<VariableFormModel>) => void;
+	onNameChange: (value: string) => void;
+	selectType: (type: VariableType) => void;
+	onCustomChange: (value: string) => void;
+	onDynamicChange: (patch: Partial<VariableFormModel>) => void;
+	setRawPreview: (values: (string | number)[]) => void;
+	previewValues: (string | number)[];
+	previewError: string | null;
+	setPreviewError: (message: string | null) => void;
+	defaultValue: string;
+	setDefaultValue: (value: string) => void;
+	visibleNameError: string | null;
+	nameError: string | null;
+	attributeError: string | undefined;
+	cycleError: string | null;
+	isListType: boolean;
+	showAllOptionField: boolean;
+	payloadVariables: PayloadVariables;
+	handleSave: () => void;
+}
+
+const readDefaultValue = (model: VariableFormModel): string =>
+	((model.defaultValue as { value?: string })?.value ?? '') as string;
+
+/** Form state, derivations and handlers for the variable editor. */
+export function useVariableForm({
+	initial,
+	siblings,
+	isNew,
+	onSave,
+}: UseVariableFormArgs): UseVariableForm {
+	const [model, setModel] = useState<VariableFormModel>(initial);
+	// Raw, unsorted preview; `previewValues` applies the chosen sort so a shown
+	// preview re-sorts when Sort changes.
+	const [rawPreview, setRawPreview] = useState<(string | number)[]>([]);
+	const [previewError, setPreviewError] = useState<string | null>(null);
+	const [cycleError, setCycleError] = useState<string | null>(null);
+	// In add mode, mirror the chosen attribute into the name until the user types.
+	const [nameTouched, setNameTouched] = useState(false);
+	const [defaultValue, setDefaultValue] = useState<string>(
+		readDefaultValue(initial),
+	);
+
+	useEffect(() => {
+		setModel(initial);
+		setRawPreview([]);
+		setPreviewError(null);
+		setCycleError(null);
+		setNameTouched(false);
+		setDefaultValue(readDefaultValue(initial));
+	}, [initial]);
+
+	const set = (patch: Partial<VariableFormModel>): void =>
+		setModel((prev) => ({ ...prev, ...patch }));
+
+	const previewValues = useMemo(
+		() => sortValuesByOrder(rawPreview, model.sort) as (string | number)[],
+		[rawPreview, model.sort],
+	);
+
+	const existingNames = useMemo(() => siblings.map((v) => v.name), [siblings]);
+
+	const existingDynamicAttributes = useMemo(
+		() =>
+			siblings
+				.filter((v) => v.type === 'DYNAMIC' && v.dynamicAttribute)
+				.map((v) => v.dynamicAttribute),
+		[siblings],
+	);
+
+	// Sibling selections feed the Query "Test Run" so dependent `$vars` resolve.
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const selections = useDashboardStore(
+		(s) => s.variableValues[dashboardId ?? ''] ?? EMPTY_SELECTIONS,
+	);
+	const payloadVariables = useMemo<PayloadVariables>(() => {
+		const out: PayloadVariables = {};
+		siblings.forEach((v) => {
+			if (v.name) {
+				out[v.name] = selections[v.name]?.value ?? null;
+			}
+		});
+		return out;
+	}, [siblings, selections]);
+
+	const trimmedName = model.name.trim();
+	const nameError = getNameError(trimmedName, existingNames, initial.name);
+	// Surface the message only once the field is dirty; Save stays disabled regardless.
+	const visibleNameError = nameTouched ? nameError : null;
+	const attributeError = getAttributeError(model, existingDynamicAttributes);
+
+	const isListType =
+		model.type === 'QUERY' || model.type === 'CUSTOM' || model.type === 'DYNAMIC';
+	const showAllOptionField = model.type === 'QUERY' || model.type === 'CUSTOM';
+
+	const onNameChange = (value: string): void => {
+		setNameTouched(true);
+		set({ name: value });
+	};
+
+	const selectType = (type: VariableType): void => {
+		set({ type });
+		setRawPreview([]);
+		setPreviewError(null);
+	};
+
+	const onCustomChange = (value: string): void => {
+		set({ customValue: value });
+		setRawPreview(commaValuesParser(value));
+	};
+
+	// In add mode, mirror the selected attribute into the name until the user
+	// edits the name themselves (matches the V1 dynamic-variable behaviour).
+	const onDynamicChange = (patch: Partial<VariableFormModel>): void => {
+		if (isNew && !nameTouched && patch.dynamicAttribute) {
+			set({ ...patch, name: patch.dynamicAttribute });
+		} else {
+			set(patch);
+		}
+	};
+
+	const handleSave = (): void => {
+		const next: VariableFormModel = {
+			...model,
+			name: trimmedName,
+			defaultValue: defaultValue ? { value: defaultValue } : undefined,
+		};
+
+		const cycle = detectVariableCycle([...siblings, next]);
+		if (cycle) {
+			setCycleError(
+				`Cannot save: circular dependency detected between variables: ${cycle.join(
+					' → ',
+				)}`,
+			);
+			return;
+		}
+		setCycleError(null);
+		onSave(next);
+	};
+
+	return {
+		model,
+		set,
+		onNameChange,
+		selectType,
+		onCustomChange,
+		onDynamicChange,
+		setRawPreview,
+		previewValues,
+		previewError,
+		setPreviewError,
+		defaultValue,
+		setDefaultValue,
+		visibleNameError,
+		nameError,
+		attributeError,
+		cycleError,
+		isListType,
+		showAllOptionField,
+		payloadVariables,
+		handleSave,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/variableValidation.ts

@@ -0,0 +1,37 @@
+import type { VariableFormModel } from '../variableFormModel';
+
+/**
+ * Name validation, mirroring V1: empty / whitespace are rejected, and the name
+ * set includes self, but keeping your own (original) name is always allowed.
+ */
+export function getNameError(
+	name: string,
+	existingNames: string[],
+	originalName: string,
+): string | null {
+	if (name === '') {
+		return 'Variable name is required';
+	}
+	if (/\s/.test(name)) {
+		return 'Variable name cannot contain whitespaces';
+	}
+	if (name !== originalName && existingNames.includes(name)) {
+		return 'Variable name already exists';
+	}
+	return null;
+}
+
+/** Rejects a dynamic variable reusing an attribute already bound elsewhere. */
+export function getAttributeError(
+	model: VariableFormModel,
+	existingDynamicAttributes: string[],
+): string | undefined {
+	if (
+		model.type === 'DYNAMIC' &&
+		model.dynamicAttribute &&
+		existingDynamicAttributes.includes(model.dynamicAttribute)
+	) {
+		return 'A variable with this attribute key already exists';
+	}
+	return undefined;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableRow.tsx

@@ -0,0 +1,140 @@
+import type { CSSProperties } from 'react';
+import { Check, GripVertical, PenLine, Trash2, X } from '@signozhq/icons';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { VariableFormModel } from './variableFormModel';
+import styles from './Variables.module.scss';
+
+const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
+	QUERY: 'Query',
+	CUSTOM: 'Custom',
+	TEXT: 'Text',
+	DYNAMIC: 'Dynamic',
+};
+
+interface VariableRowProps {
+	variable: VariableFormModel;
+	index: number;
+	canEdit: boolean;
+	/** True when this row's delete is awaiting inline confirmation. */
+	isConfirmingDelete: boolean;
+	onEdit: (index: number) => void;
+	onRequestDelete: (index: number) => void;
+	onConfirmDelete: (index: number) => void;
+	onCancelDelete: () => void;
+}
+
+/** A single draggable variable row (drag handle + meta + inline actions). */
+function VariableRow({
+	variable,
+	index,
+	canEdit,
+	isConfirmingDelete,
+	onEdit,
+	onRequestDelete,
+	onConfirmDelete,
+	onCancelDelete,
+}: VariableRowProps): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: variable.name });
+
+	const style: CSSProperties = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		...(isDragging ? { position: 'relative', zIndex: 1, opacity: 0.8 } : {}),
+	};
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={style}
+			className={styles.row}
+			data-testid={`variable-row-${variable.name}`}
+		>
+			<div className={styles.rowMain}>
+				{canEdit ? (
+					<span
+						ref={setActivatorNodeRef}
+						className={styles.dragHandle}
+						aria-label="Reorder variable"
+						{...attributes}
+						{...listeners}
+					>
+						<GripVertical size={14} />
+					</span>
+				) : null}
+				<Typography.Text className={styles.varName}>
+					${variable.name}
+				</Typography.Text>
+				<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
+				{variable.description ? (
+					<Typography.Text className={styles.varDesc}>
+						{variable.description}
+					</Typography.Text>
+				) : null}
+			</div>
+
+			{canEdit && isConfirmingDelete ? (
+				<div className={styles.rowActions}>
+					<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
+					<Button
+						variant="ghost"
+						color="destructive"
+						size="icon"
+						onClick={(): void => onConfirmDelete(index)}
+						aria-label="Confirm delete"
+						testId={`variable-delete-confirm-${variable.name}`}
+					>
+						<Check size={14} />
+					</Button>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						onClick={onCancelDelete}
+						aria-label="Cancel delete"
+					>
+						<X size={14} />
+					</Button>
+				</div>
+			) : null}
+
+			{canEdit && !isConfirmingDelete ? (
+				<div className={styles.rowActions}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						onClick={(): void => onEdit(index)}
+						aria-label="Edit variable"
+						testId={`variable-edit-${variable.name}`}
+					>
+						<PenLine size={14} />
+					</Button>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						onClick={(): void => onRequestDelete(index)}
+						aria-label="Delete variable"
+						testId={`variable-delete-${variable.name}`}
+					>
+						<Trash2 size={14} />
+					</Button>
+				</div>
+			) : null}
+		</div>
+	);
+}
+
+export default VariableRow;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/Variables.module.scss

@@ -2,13 +2,11 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
-	padding: 20px 16px;
 }
 
 .header {
 	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
+	justify-content: flex-end;
 	gap: 16px;
 }
 
@@ -30,14 +28,6 @@
 	color: var(--l2-foreground);
 }
 
-.empty {
-	padding: 32px;
-	text-align: center;
-	border: 1px dashed var(--l1-border);
-	border-radius: 4px;
-	color: var(--l2-foreground);
-}
-
 .list {
 	display: flex;
 	flex-direction: column;
@@ -62,6 +52,15 @@
 	min-width: 0;
 }
 
+.dragHandle {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	color: var(--l3-foreground);
+	cursor: grab;
+	touch-action: none;
+}
+
 .varName {
 	font-weight: 500;
 	color: var(--l1-foreground);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariablesList.tsx

@@ -1,24 +1,20 @@
+import type { DragEndEvent } from '@dnd-kit/core';
 import {
-	Check,
-	ChevronDown,
-	ChevronUp,
-	PenLine,
-	Trash2,
-	X,
-} from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
+	DndContext,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+	SortableContext,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
 
-import type { VariableFormModel } from './variableModel';
+import VariableRow from './VariableRow';
+import type { VariableFormModel } from './variableFormModel';
 import styles from './Variables.module.scss';
 
-const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
-	QUERY: 'Query',
-	CUSTOM: 'Custom',
-	TEXT: 'Text',
-	DYNAMIC: 'Dynamic',
-};
-
 interface VariablesListProps {
 	variables: VariableFormModel[];
 	canEdit: boolean;
@@ -41,98 +37,48 @@ function VariablesList({
 	onCancelDelete,
 	onMove,
 }: VariablesListProps): JSX.Element {
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 1 } }),
+	);
+
+	const handleDragEnd = ({ active, over }: DragEndEvent): void => {
+		if (!over || active.id === over.id) {
+			return;
+		}
+		const from = variables.findIndex((v) => v.name === active.id);
+		const to = variables.findIndex((v) => v.name === over.id);
+		if (from !== -1 && to !== -1) {
+			onMove(from, to);
+		}
+	};
+
 	return (
-		<div className={styles.list} data-testid="variables-list">
-			{variables.map((variable, index) => (
-				<div
-					className={styles.row}
-					key={variable.name || `variable-${index}`}
-					data-testid={`variable-row-${variable.name}`}
-				>
-					<div className={styles.rowMain}>
-						<Typography.Text className={styles.varName}>
-							${variable.name}
-						</Typography.Text>
-						<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
-						{variable.description ? (
-							<Typography.Text className={styles.varDesc}>
-								{variable.description}
-							</Typography.Text>
-						) : null}
-					</div>
-
-					{canEdit && confirmingIndex === index ? (
-						<div className={styles.rowActions}>
-							<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
-							<Button
-								variant="ghost"
-								color="destructive"
-								size="icon"
-								onClick={(): void => onConfirmDelete(index)}
-								aria-label="Confirm delete"
-								testId={`variable-delete-confirm-${variable.name}`}
-							>
-								<Check size={14} />
-							</Button>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								onClick={onCancelDelete}
-								aria-label="Cancel delete"
-							>
-								<X size={14} />
-							</Button>
-						</div>
-					) : null}
-
-					{canEdit && confirmingIndex !== index ? (
-						<div className={styles.rowActions}>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								disabled={index === 0}
-								onClick={(): void => onMove(index, index - 1)}
-								aria-label="Move up"
-							>
-								<ChevronUp size={14} />
-							</Button>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								disabled={index === variables.length - 1}
-								onClick={(): void => onMove(index, index + 1)}
-								aria-label="Move down"
-							>
-								<ChevronDown size={14} />
-							</Button>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								onClick={(): void => onEdit(index)}
-								aria-label="Edit variable"
-								testId={`variable-edit-${variable.name}`}
-							>
-								<PenLine size={14} />
-							</Button>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								onClick={(): void => onRequestDelete(index)}
-								aria-label="Delete variable"
-								testId={`variable-delete-${variable.name}`}
-							>
-								<Trash2 size={14} />
-							</Button>
-						</div>
-					) : null}
+		<DndContext
+			sensors={sensors}
+			modifiers={[restrictToVerticalAxis]}
+			onDragEnd={handleDragEnd}
+		>
+			<SortableContext
+				items={variables.map((v) => v.name)}
+				strategy={verticalListSortingStrategy}
+			>
+				<div className={styles.list} data-testid="variables-list">
+					{variables.map((variable, index) => (
+						<VariableRow
+							key={variable.name || `variable-${index}`}
+							variable={variable}
+							index={index}
+							canEdit={canEdit}
+							isConfirmingDelete={confirmingIndex === index}
+							onEdit={onEdit}
+							onRequestDelete={onRequestDelete}
+							onConfirmDelete={onConfirmDelete}
+							onCancelDelete={onCancelDelete}
+						/>
+					))}
 				</div>
-			))}
-		</div>
+			</SortableContext>
+		</DndContext>
 	);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/AddVariableButton.tsx

@@ -0,0 +1,26 @@
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+
+const AddVariableButton = ({
+	isEditable,
+	setIsEditing,
+}: {
+	isEditable: boolean;
+	setIsEditing: (state: { type: 'new' }) => void;
+}): JSX.Element => {
+	return (
+		<Button
+			variant="solid"
+			color="primary"
+			prefix={<Plus size={14} />}
+			size="md"
+			onClick={(): void => setIsEditing({ type: 'new' })}
+			testId="add-variable"
+			disabled={!isEditable}
+		>
+			Add variable
+		</Button>
+	);
+};
+
+export default AddVariableButton;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/BackToAllVariables/BackToAllVariables.module.scss

@@ -0,0 +1,11 @@
+.backToAllVariables {
+	gap: 8px;
+	padding: 8px;
+	border-bottom: 1px solid var(--l3-border);
+}
+
+.backToAllVariablesButton {
+	--button-font-size: 14px;
+	--button-padding: var(--spacing-5) var(--spacing-3);
+	color: var(--l1-foreground);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/BackToAllVariables/BackToAllVariables.tsx

@@ -0,0 +1,28 @@
+import { ArrowLeft } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import styles from './BackToAllVariables.module.scss';
+import { VariableFormProps } from '../../types';
+
+const BackToAllVariables = ({
+	onClose,
+}: {
+	onClose: VariableFormProps['onClose'];
+}): JSX.Element => {
+	return (
+		<div className={styles.backToAllVariables}>
+			<Button
+				variant="ghost"
+				color="secondary"
+				className={styles.backToAllVariablesButton}
+				prefix={<ArrowLeft size={14} />}
+				onClick={onClose}
+				testId="variable-form-back"
+				size="md"
+			>
+				All variables
+			</Button>
+		</div>
+	);
+};
+
+export default BackToAllVariables;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/NoVariablesCard/NoVariables.module.scss

@@ -0,0 +1,25 @@
+.noVariablesCard {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.noVariablesCopy {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.noVariablesTitle {
+	color: var(--l1-foreground);
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.noVariablesInfo {
+	color: var(--l3-foreground);
+	font-size: 13px;
+	line-height: 18px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/NoVariablesCard/NoVariablesCard.tsx

@@ -0,0 +1,28 @@
+import { Typography } from '@signozhq/ui/typography';
+import AddVariableButton from '../AddVariableButton';
+import { EditingState } from '../../types';
+import styles from './NoVariables.module.scss';
+
+const NoVariablesCard = ({
+	isEditable,
+	setIsEditing,
+}: {
+	isEditable: boolean;
+	setIsEditing: React.Dispatch<React.SetStateAction<EditingState | null>>;
+}): JSX.Element => {
+	return (
+		<div className={styles.noVariablesCard}>
+			<div className={styles.noVariablesCopy}>
+				<Typography.Text className={styles.noVariablesTitle}>
+					No variables yet
+				</Typography.Text>
+				<Typography.Text className={styles.noVariablesInfo}>
+					Create a variable to parameterize your panel queries.
+				</Typography.Text>
+			</div>
+			<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
+		</div>
+	);
+};
+
+export default NoVariablesCard;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/VariableInfoForm/VariableInfoForm.module.scss

@@ -0,0 +1,25 @@
+.infoItemContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.infoTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 12px;
+}
+
+.variableNameInput {
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+
+	&::placeholder {
+		color: var(--l3-foreground);
+	}
+}
+
+.descriptionTextArea {
+	border-radius: 2px;
+	border: 1px solid var(--l2-border);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/components/VariableInfoForm/VariableInfoForm.tsx

@@ -0,0 +1,60 @@
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+// eslint-disable-next-line signoz/no-antd-components -- multiline TextArea has no @signozhq/ui equivalent yet
+import { Input as AntdInput } from 'antd';
+
+import styles from './VariableInfoForm.module.scss';
+import variableFormStyles from '../../VariableForm/VariableForm.module.scss';
+
+interface VariableInfoFormProps {
+	title: string;
+	description: string;
+	onTitleChange: (value: string) => void;
+	onDescriptionChange: (value: string) => void;
+	visibleNameError: string | null;
+}
+
+function VariableInfoForm({
+	title,
+	description,
+	onTitleChange,
+	onDescriptionChange,
+	visibleNameError,
+}: VariableInfoFormProps): JSX.Element {
+	return (
+		<>
+			<div className={styles.infoItemContainer}>
+				<Typography className={styles.infoTitle}>Name</Typography>
+
+				<Input
+					testId="variable-name"
+					className={styles.variableNameInput}
+					value={title}
+					onChange={(e): void => onTitleChange(e.target.value)}
+					placeholder="Unique name of the variable"
+				/>
+
+				{visibleNameError ? (
+					<Typography.Text className={variableFormStyles.errorText}>
+						<sup>*</sup>&nbsp;
+						{visibleNameError}
+					</Typography.Text>
+				) : null}
+			</div>
+
+			<div className={styles.infoItemContainer}>
+				<Typography className={styles.infoTitle}>Description</Typography>
+				<AntdInput.TextArea
+					className={styles.descriptionTextArea}
+					value={description}
+					placeholder="Enter a description for the variable"
+					data-testid="dashboard-desc"
+					rows={3}
+					onChange={(e): void => onDescriptionChange(e.target.value)}
+				/>
+			</div>
+		</>
+	);
+}
+
+export default VariableInfoForm;

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

@@ -1,75 +1,75 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
 
+import settingsStyles from '../DashboardSettings.module.scss';
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { useSaveVariables } from './useSaveVariables';
 import { dtoToFormModel } from './variableAdapters';
 import {
 	emptyVariableFormModel,
 	type VariableFormModel,
-} from './variableModel';
+} from './variableFormModel';
 import VariableForm from './VariableForm/VariableForm';
 import VariablesList from './VariablesList';
 import styles from './Variables.module.scss';
+import AddVariableButton from './components/AddVariableButton';
+import NoVariablesCard from './components/NoVariablesCard/NoVariablesCard';
+import { EditingState } from './types';
 
 interface VariablesSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-/** `null` index = adding a new variable; a number = editing that row. */
-type EditingState = { index: number | null } | null;
-
 function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const { save, isSaving } = useSaveVariables();
 
-	const initialModels = useMemo(
-		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
-		[dashboard.spec?.variables],
+	const initialFormModels = useMemo(
+		() => dashboard.spec.variables.map(dtoToFormModel),
+		[dashboard.spec.variables],
 	);
-	const [variables, setVariables] = useState<VariableFormModel[]>(initialModels);
+	const [variables, setVariables] =
+		useState<VariableFormModel[]>(initialFormModels);
 
 	// Resync from the dashboard after a save round-trips (refetch bumps updatedAt).
 	useEffect(() => {
-		setVariables(initialModels);
+		setVariables(initialFormModels);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dashboard.updatedAt]);
 
-	const [editing, setEditing] = useState<EditingState>(null);
+	const [isEditing, setIsEditing] = useState<EditingState>(null);
 	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
 		null,
 	);
 
-	const editingModel: VariableFormModel | null = useMemo(() => {
-		if (!editing) {
+	const editingFormModel: VariableFormModel | null = useMemo(() => {
+		if (!isEditing) {
 			return null;
 		}
-		return editing.index === null
+		return isEditing.type === 'new'
 			? emptyVariableFormModel()
-			: variables[editing.index];
-	}, [editing, variables]);
+			: variables[isEditing.index];
+	}, [isEditing, variables]);
 
-	const existingNames = useMemo(() => {
-		const self = editing?.index ?? null;
-		return variables.filter((_, i) => i !== self).map((v) => v.name);
-	}, [variables, editing]);
+	const siblings = useMemo(() => {
+		const self = isEditing?.type === 'edit' ? isEditing.index : null;
+		return variables.filter((_, i) => i !== self);
+	}, [variables, isEditing]);
 
 	const persist = (next: VariableFormModel[]): void => {
 		setVariables(next);
 		void save(next);
 	};
 
-	const handleFormSave = (model: VariableFormModel): void => {
+	const handleFormSave = (Formmodel: VariableFormModel): void => {
 		const next = [...variables];
-		if (editing?.index == null) {
-			next.push(model);
-		} else {
-			next[editing.index] = model;
+		if (isEditing?.type === 'new') {
+			next.push(Formmodel);
+		} else if (isEditing?.type === 'edit') {
+			next[isEditing.index] = Formmodel;
 		}
-		setEditing(null);
+		setIsEditing(null);
 		persist(next);
 	};
 
@@ -88,14 +88,14 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 		setConfirmDeleteIndex(null);
 	};
 
-	// Detail view — edit/new form replaces the list in place (no modal).
-	if (editingModel) {
+	if (editingFormModel) {
 		return (
 			<VariableForm
-				initial={editingModel}
-				existingNames={existingNames}
+				initial={editingFormModel}
+				siblings={siblings}
+				isNew={isEditing?.type === 'new'}
 				isSaving={isSaving}
-				onClose={(): void => setEditing(null)}
+				onClose={(): void => setIsEditing(null)}
 				onSave={handleFormSave}
 			/>
 		);
@@ -103,42 +103,25 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
 
 	// Master view — the variables list.
 	return (
-		<div className={styles.container}>
-			<div className={styles.header}>
-				<div className={styles.titleRow}>
-					<Typography.Text className={styles.title}>Variables</Typography.Text>
-					<Typography.Text className={styles.subtitle}>
-						Define variables to parameterize panel queries.
-					</Typography.Text>
-				</div>
-				{isEditable ? (
-					<Button
-						variant="solid"
-						color="primary"
-						prefix={<Plus size={14} />}
-						onClick={(): void => setEditing({ index: null })}
-						testId="add-variable"
-					>
-						New variable
-					</Button>
-				) : null}
-			</div>
-
+		<div className={cx(styles.container, settingsStyles.settingsCard)}>
 			{variables.length === 0 ? (
-				<div className={styles.empty}>
-					<Typography.Text>No variables defined yet.</Typography.Text>
-				</div>
+				<NoVariablesCard isEditable={isEditable} setIsEditing={setIsEditing} />
 			) : (
-				<VariablesList
-					variables={variables}
-					canEdit={isEditable}
-					confirmingIndex={confirmDeleteIndex}
-					onEdit={(index): void => setEditing({ index })}
-					onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
-					onConfirmDelete={handleConfirmDelete}
-					onCancelDelete={(): void => setConfirmDeleteIndex(null)}
-					onMove={handleMove}
-				/>
+				<>
+					<div className={styles.header}>
+						<AddVariableButton isEditable={isEditable} setIsEditing={setIsEditing} />
+					</div>
+					<VariablesList
+						variables={variables}
+						canEdit={isEditable}
+						confirmingIndex={confirmDeleteIndex}
+						onEdit={(index): void => setIsEditing({ type: 'edit', index })}
+						onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
+						onConfirmDelete={handleConfirmDelete}
+						onCancelDelete={(): void => setConfirmDeleteIndex(null)}
+						onMove={handleMove}
+					/>
+				</>
 			)}
 		</div>
 	);

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

@@ -0,0 +1,18 @@
+import { VariableFormModel } from './variableFormModel';
+
+/** `null` index = adding a new variable; a number = editing that row. */
+export type EditingState =
+	| { type: 'new' }
+	| { type: 'edit'; index: number }
+	| null;
+
+export interface VariableFormProps {
+	initial: VariableFormModel;
+	/** The other variables (excluding this one), for uniqueness & cycle checks. */
+	siblings: VariableFormModel[];
+	/** True when adding a new variable (enables auto-naming from the attribute). */
+	isNew: boolean;
+	isSaving: boolean;
+	onClose: () => void;
+	onSave: (model: VariableFormModel) => void;
+}

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

@@ -6,7 +6,7 @@ import APIError from 'types/api/error';
 
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { formModelToDto } from './variableAdapters';
-import type { VariableFormModel } from './variableModel';
+import type { VariableFormModel } from './variableFormModel';
 import { buildVariablesPatch } from './variablePatchOps';
 
 interface UseSaveVariables {

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

@@ -4,7 +4,6 @@ import {
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTOKind as QueryPluginKind,
-	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type {
 	DashboardtypesListVariableSpecDTO,
@@ -14,21 +13,24 @@ import type {
 } from 'api/generated/services/sigNoz.schemas';
 
 import {
+	DYNAMIC_SIGNAL_ALL,
+	type DynamicSignalOption,
 	emptyVariableFormModel,
-	PLUGIN_KIND,
-	type TelemetrySignal,
+	signalForApi,
+	VARIABLE_SORT_DISABLED,
 	type VariableFormModel,
 	type VariableSort,
-} from './variableModel';
+} from './variableFormModel';
 
 /** DTO envelope → flat form model (for display / editing). */
 export function dtoToFormModel(
 	dto: DashboardtypesVariableDTO,
 ): VariableFormModel {
 	const base = emptyVariableFormModel();
-	const display = dto.spec?.display;
+	const display = dto.spec.display;
 	const common: VariableFormModel = {
 		...base,
+		// TODO
 		name: dto.spec?.name ?? display?.name ?? '',
 		description: display?.description ?? '',
 	};
@@ -50,7 +52,7 @@ export function dtoToFormModel(
 		...common,
 		multiSelect: spec.allowMultiple ?? false,
 		showAllOption: spec.allowAllValue ?? false,
-		sort: (spec.sort as VariableSort) ?? 'DISABLED',
+		sort: (spec.sort as VariableSort) ?? VARIABLE_SORT_DISABLED,
 		defaultValue: spec.defaultValue,
 	};
 	const plugin = spec.plugin;
@@ -67,7 +69,9 @@ export function dtoToFormModel(
 			...listCommon,
 			type: 'DYNAMIC',
 			dynamicAttribute: plugin.spec.name ?? '',
-			dynamicSignal: (plugin.spec.signal as TelemetrySignal) ?? 'traces',
+			// An omitted wire signal means "all telemetry".
+			dynamicSignal:
+				(plugin.spec.signal as DynamicSignalOption) ?? DYNAMIC_SIGNAL_ALL,
 		};
 	}
 	// Default to Query (also covers a query plugin or a missing/unknown plugin).
@@ -95,7 +99,7 @@ function buildPlugin(
 				kind: DynamicPluginKind['signoz/DynamicVariable'],
 				spec: {
 					name: model.dynamicAttribute,
-					signal: model.dynamicSignal as TelemetrytypesSignalDTO,
+					signal: signalForApi(model.dynamicSignal),
 				},
 			};
 		case 'QUERY':
@@ -114,7 +118,6 @@ export function formModelToDto(
 	const display = {
 		name: model.name,
 		description: model.description,
-		hidden: model.hidden,
 	};
 
 	if (model.type === 'TEXT') {
@@ -135,7 +138,10 @@ export function formModelToDto(
 			name: model.name,
 			display,
 			allowMultiple: model.multiSelect,
-			allowAllValue: model.showAllOption,
+			// Dynamic variables always expose the aggregate "ALL" entry (matches V1,
+			// which forced showALLOption true on save); other types respect the toggle.
+			allowAllValue: model.type === 'DYNAMIC' ? true : model.showAllOption,
+			// model.sort is already a Perses sort token (`none` / `alphabetical-*`).
 			sort: model.sort,
 			defaultValue: model.defaultValue,
 			plugin: buildPlugin(model),
@@ -149,5 +155,3 @@ export function variableTypeOf(
 ): VariableFormModel['type'] {
 	return dtoToFormModel(dto).type;
 }
-
-export { PLUGIN_KIND };

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

@@ -0,0 +1,35 @@
+import {
+	buildDependencies,
+	buildDependencyGraph,
+} from 'container/DashboardContainer/DashboardVariablesSelection/util';
+import type { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import type { VariableFormModel } from './variableFormModel';
+
+/**
+ * Detects a circular reference among QUERY variables (a query referencing
+ * another that, transitively, references it back). Reuses the V1 dependency
+ * graph helpers, which key off `name` / `type` / `queryValue` only.
+ *
+ * Returns the names forming the cycle, or `null` when the set is acyclic.
+ */
+export function detectVariableCycle(
+	variables: VariableFormModel[],
+): string[] | null {
+	const asDbVariables = variables
+		.filter((variable) => variable.name)
+		.map(
+			(variable) =>
+				({
+					name: variable.name,
+					type: variable.type,
+					queryValue: variable.queryValue,
+				}) as IDashboardVariable,
+		);
+
+	const { hasCycle, cycleNodes } = buildDependencyGraph(
+		buildDependencies(asDbVariables),
+	);
+
+	return hasCycle ? (cycleNodes ?? []) : null;
+}

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

@@ -0,0 +1,154 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
+import { sortBy } from 'lodash-es';
+
+/**
+ * The four variable types the editor exposes. No generated enum exists for this
+ * — it's a UI grouping over the wire's envelope + plugin kinds: the TextVariable
+ * envelope → `TEXT`, and a ListVariable's `DashboardtypesVariablePluginKindDTO`
+ * (`signoz/QueryVariable` | `signoz/CustomVariable` | `signoz/DynamicVariable`)
+ * → `QUERY` | `CUSTOM` | `DYNAMIC`. Replace with a generated enum if the backend
+ * ever exposes a single variable-kind type.
+ */
+export type VariableType = 'QUERY' | 'CUSTOM' | 'TEXT' | 'DYNAMIC';
+
+/** Telemetry signal — the generated enum (traces / logs / metrics). */
+export type TelemetrySignal = TelemetrytypesSignalDTO;
+
+/**
+ * Signal selected in the dynamic-variable editor. `'all'` is UI-only (the
+ * generated `TelemetrytypesSignalDTO` has no "all") — it searches across every
+ * signal and maps to an omitted `signal` on the wire (see {@link signalForApi}).
+ */
+export const DYNAMIC_SIGNAL_ALL = 'all' as const;
+export type DynamicSignalOption = TelemetrySignal | typeof DYNAMIC_SIGNAL_ALL;
+
+/**
+ * Sort order for list-variable values. The wire (Perses) validates `sort`
+ * against a fixed method set. There is no generated TS enum for it
+ * (`DashboardtypesListOrderDTO` is the query-builder order, a different field),
+ * so we mirror the Perses `Sort` tokens here.
+ */
+export const VARIABLE_SORT = {
+	DISABLED: 'none',
+	ASC: 'alphabetical-asc',
+	DESC: 'alphabetical-desc',
+	NUMERICAL_ASC: 'numerical-asc',
+	NUMERICAL_DESC: 'numerical-desc',
+	CI_ASC: 'alphabetical-ci-asc',
+	CI_DESC: 'alphabetical-ci-desc',
+} as const;
+
+export type VariableSort = (typeof VARIABLE_SORT)[keyof typeof VARIABLE_SORT];
+
+/** Persisted "no sort" value (Perses `none`). */
+export const VARIABLE_SORT_DISABLED: VariableSort = VARIABLE_SORT.DISABLED;
+
+export const VARIABLE_SORTS: VariableSort[] = [
+	VARIABLE_SORT.DISABLED,
+	VARIABLE_SORT.ASC,
+	VARIABLE_SORT.DESC,
+	VARIABLE_SORT.NUMERICAL_ASC,
+	VARIABLE_SORT.NUMERICAL_DESC,
+	VARIABLE_SORT.CI_ASC,
+	VARIABLE_SORT.CI_DESC,
+];
+
+export const VARIABLE_SORT_LABEL: Record<VariableSort, string> = {
+	[VARIABLE_SORT.DISABLED]: 'Disabled',
+	[VARIABLE_SORT.ASC]: 'Alphabetical (ascending)',
+	[VARIABLE_SORT.DESC]: 'Alphabetical (descending)',
+	[VARIABLE_SORT.NUMERICAL_ASC]: 'Numerical (ascending)',
+	[VARIABLE_SORT.NUMERICAL_DESC]: 'Numerical (descending)',
+	[VARIABLE_SORT.CI_ASC]: 'Alphabetical, case-insensitive (ascending)',
+	[VARIABLE_SORT.CI_DESC]: 'Alphabetical, case-insensitive (descending)',
+};
+
+export const DYNAMIC_SIGNALS: DynamicSignalOption[] = [
+	DYNAMIC_SIGNAL_ALL,
+	TelemetrytypesSignalDTO.traces,
+	TelemetrytypesSignalDTO.logs,
+	TelemetrytypesSignalDTO.metrics,
+];
+
+export const DYNAMIC_SIGNAL_LABEL: Record<DynamicSignalOption, string> = {
+	[DYNAMIC_SIGNAL_ALL]: 'All telemetry',
+	[TelemetrytypesSignalDTO.traces]: 'Traces',
+	[TelemetrytypesSignalDTO.logs]: 'Logs',
+	[TelemetrytypesSignalDTO.metrics]: 'Metrics',
+};
+
+/** Maps the editor's signal selection to the wire value (`'all'` → omitted). */
+export function signalForApi(
+	signal: DynamicSignalOption,
+): TelemetrySignal | undefined {
+	return signal === DYNAMIC_SIGNAL_ALL ? undefined : signal;
+}
+
+type SortableValues = (string | number | boolean)[];
+
+/** Sorts preview / option values by the variable's chosen order (no-op when disabled). */
+export function sortValuesByOrder(
+	values: SortableValues,
+	sort: VariableSort,
+): SortableValues {
+	switch (sort) {
+		case VARIABLE_SORT.ASC:
+			return sortBy(values);
+		case VARIABLE_SORT.DESC:
+			return sortBy(values).reverse();
+		case VARIABLE_SORT.NUMERICAL_ASC:
+			return sortBy(values, (value) => Number(value));
+		case VARIABLE_SORT.NUMERICAL_DESC:
+			return sortBy(values, (value) => Number(value)).reverse();
+		case VARIABLE_SORT.CI_ASC:
+			return sortBy(values, (value) => String(value).toLowerCase());
+		case VARIABLE_SORT.CI_DESC:
+			return sortBy(values, (value) => String(value).toLowerCase()).reverse();
+		default:
+			return values;
+	}
+}
+
+export interface VariableFormModel {
+	/** Stable identifier, referenced in queries (e.g. `$name`); must be unique. */
+	name: string;
+	description: string;
+	type: VariableType;
+
+	// List-variable common fields (Query / Custom / Dynamic).
+	multiSelect: boolean;
+	showAllOption: boolean;
+	sort: VariableSort;
+
+	// Type-specific.
+	queryValue: string; // QUERY
+	customValue: string; // CUSTOM
+	textValue: string; // TEXT
+	textConstant: boolean; // TEXT
+	dynamicAttribute: string; // DYNAMIC — the telemetry field name
+	dynamicSignal: DynamicSignalOption; // DYNAMIC — the telemetry signal
+
+	/**
+	 * Runtime-selected default, not editable in the management tab yet; carried
+	 * through edits so saving a definition doesn't clobber it.
+	 */
+	defaultValue?: VariableDefaultValueDTO;
+}
+
+export function emptyVariableFormModel(): VariableFormModel {
+	return {
+		name: '',
+		description: '',
+		type: 'DYNAMIC',
+		multiSelect: false,
+		showAllOption: false,
+		sort: VARIABLE_SORT_DISABLED,
+		queryValue: '',
+		customValue: '',
+		textValue: '',
+		textConstant: false,
+		dynamicAttribute: '',
+		dynamicSignal: DYNAMIC_SIGNAL_ALL,
+	};
+}

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

@@ -1,78 +0,0 @@
-import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
-
-/**
- * Flat, UI-friendly representation of a V2 dashboard variable. The wire format
- * (`DashboardtypesVariableDTO`) is a nested envelope/plugin union that is awkward
- * to bind a form to; `variableAdapters` converts between this model and the DTO.
- */
-
-export type VariableType = 'QUERY' | 'CUSTOM' | 'TEXT' | 'DYNAMIC';
-
-export type VariableSort = 'DISABLED' | 'ASC' | 'DESC';
-
-export type TelemetrySignal = 'traces' | 'logs' | 'metrics';
-
-/** Wire `kind` discriminators (string values of the generated enums). */
-export const ENVELOPE_KIND = {
-	LIST: 'ListVariable',
-	TEXT: 'TextVariable',
-} as const;
-
-export const PLUGIN_KIND = {
-	QUERY: 'signoz/QueryVariable',
-	CUSTOM: 'signoz/CustomVariable',
-	DYNAMIC: 'signoz/DynamicVariable',
-} as const;
-
-export const VARIABLE_SORTS: VariableSort[] = ['DISABLED', 'ASC', 'DESC'];
-
-export const TELEMETRY_SIGNALS: TelemetrySignal[] = [
-	'traces',
-	'logs',
-	'metrics',
-];
-
-export interface VariableFormModel {
-	/** Stable identifier, referenced in queries (e.g. `$name`); must be unique. */
-	name: string;
-	description: string;
-	hidden: boolean;
-	type: VariableType;
-
-	// List-variable common fields (Query / Custom / Dynamic).
-	multiSelect: boolean;
-	showAllOption: boolean;
-	sort: VariableSort;
-
-	// Type-specific.
-	queryValue: string; // QUERY
-	customValue: string; // CUSTOM
-	textValue: string; // TEXT
-	textConstant: boolean; // TEXT
-	dynamicAttribute: string; // DYNAMIC — the telemetry field name
-	dynamicSignal: TelemetrySignal; // DYNAMIC — the telemetry signal
-
-	/**
-	 * Runtime-selected default, not editable in the management tab yet; carried
-	 * through edits so saving a definition doesn't clobber it.
-	 */
-	defaultValue?: VariableDefaultValueDTO;
-}
-
-export function emptyVariableFormModel(): VariableFormModel {
-	return {
-		name: '',
-		description: '',
-		hidden: false,
-		type: 'QUERY',
-		multiSelect: false,
-		showAllOption: false,
-		sort: 'DISABLED',
-		queryValue: '',
-		customValue: '',
-		textValue: '',
-		textConstant: false,
-		dynamicAttribute: '',
-		dynamicSignal: 'traces',
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.module.scss

@@ -0,0 +1,11 @@
+.noData {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.noDataText {
+	font-size: 14px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/NoData/NoData.tsx

@@ -0,0 +1,28 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './NoData.module.scss';
+
+interface NoDataProps {
+	/** Message to display. Defaults to "No data". */
+	label?: string;
+	'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.
+ */
+function NoData({
+	label = 'No data',
+	'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>
+	);
+}
+
+export default NoData;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/hooks/useGroupByPerQuery.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import type { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+/**
+ * Builds a record keyed by builder-query name to that query's groupBy keys
+ * in the V1 `BaseAutocompleteData` shape — the shape `TimeSeries` and the
+ * tooltip plugin consume. Conversion from v5 `GroupByKey` lives at this one
+ * call site that needs the V1 shape; the rest of V2 panel code stays on
+ * v5 types.
+ */
+export function useGroupByPerQuery(
+	builderQueries: BuilderQuery[],
+): Record<string, BaseAutocompleteData[]> {
+	return useMemo(() => {
+		const result: Record<string, BaseAutocompleteData[]> = {};
+		builderQueries.forEach((q) => {
+			if (!q.name) {
+				return;
+			}
+			result[q.name] = (q.groupBy ?? []).map((g) => ({
+				key: g.name,
+				dataType: g.fieldDataType as BaseAutocompleteData['dataType'],
+				type: (g.fieldContext as BaseAutocompleteData['type']) ?? '',
+				id: '',
+			}));
+		});
+		return result;
+	}, [builderQueries]);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/hooks/useResponsiveFontSize.ts

@@ -0,0 +1,48 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+const MIN_FONT_PX = 16;
+const MAX_FONT_PX = 60;
+// The value font is sized to a fraction of the container's smaller dimension so
+// it scales with the panel without overflowing.
+const FONT_SCALE_DIVISOR = 5;
+
+/**
+ * Sizes a single large value to its container, recomputing on resize via a
+ * ResizeObserver. Returns the ref to attach to the container and the current
+ * font size (px) to apply to the value text.
+ */
+export function useResponsiveFontSize(): {
+	containerRef: RefObject<HTMLDivElement>;
+	fontSize: string;
+} {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [fontSize, setFontSize] = useState('2.5vw');
+
+	useEffect(() => {
+		const updateFontSize = (): void => {
+			if (!containerRef.current) {
+				return;
+			}
+			const { width, height } = containerRef.current.getBoundingClientRect();
+			const minDimension = Math.min(width, height);
+			const newSize = Math.max(
+				Math.min(minDimension / FONT_SCALE_DIVISOR, MAX_FONT_PX),
+				MIN_FONT_PX,
+			);
+			setFontSize(`${newSize}px`);
+		};
+
+		updateFontSize();
+
+		const resizeObserver = new ResizeObserver(updateFontSize);
+		if (containerRef.current) {
+			resizeObserver.observe(containerRef.current);
+		}
+
+		return (): void => {
+			resizeObserver.disconnect();
+		};
+	}, []);
+
+	return { containerRef, fontSize };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -0,0 +1,175 @@
+import { useCallback, useMemo, useRef } from 'react';
+import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
+import {
+	flattenTimeSeries,
+	getExecStats,
+	getTimeSeriesResults,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
+import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
+import { useTimezone } from 'providers/Timezone';
+import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
+import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
+
+import NoData from '../../components/NoData/NoData';
+import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
+import PanelStyles from '../../panel.module.scss';
+import { PanelRendererProps } from '../../types/rendererProps';
+import {
+	resolveDecimalPrecision,
+	resolveLegendPosition,
+} from '../../utils/chartAppearance/resolvers';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+
+import { buildBarChartConfig } from './utils/buildConfig';
+import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+function BarPanelRenderer({
+	panelId,
+	panel,
+	data,
+	onClick,
+	onDragSelect,
+	dashboardPreference,
+	panelMode,
+}: PanelRendererProps<'signoz/BarChartPanel'>): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	// The registry guarantees this Renderer only runs when
+	// `panel.spec.plugin.kind === 'signoz/BarChartPanel'`, so the cast is a
+	// documented boundary narrowing.
+	const spec = useMemo<DashboardtypesBarChartPanelSpecDTO>(
+		() => panel.spec.plugin.spec as DashboardtypesBarChartPanelSpecDTO,
+		[panel.spec.plugin.spec],
+	);
+
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries),
+		[panel.spec.queries],
+	);
+
+	// X-scale clamps come from the request that produced the data (falls back
+	// to the global picker inside the helper). The generated request DTO is
+	// structurally the hand-written V5 request; the cast is the boundary.
+	const { minTimeScale, maxTimeScale } = useMemo(() => {
+		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
+			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
+		);
+		return { minTimeScale: startTime, maxTimeScale: endTime };
+	}, [data.requestPayload]);
+
+	const groupByPerQuery = useGroupByPerQuery(builderQueries);
+
+	const flatSeries = useMemo(
+		() =>
+			flattenTimeSeries(getTimeSeriesResults(data.response), data.legendMap ?? {}),
+		[data.response, data.legendMap],
+	);
+
+	const config = useMemo(
+		() =>
+			buildBarChartConfig({
+				panelId,
+				spec,
+				builderQueries,
+				series: flatSeries,
+				stepIntervals: getExecStats(data.response)?.stepIntervals,
+				isDarkMode,
+				timezone,
+				panelMode,
+				minTimeScale,
+				maxTimeScale,
+				onDragSelect,
+			}),
+		[
+			panelId,
+			spec,
+			builderQueries,
+			flatSeries,
+			data.response,
+			isDarkMode,
+			timezone,
+			panelMode,
+			minTimeScale,
+			maxTimeScale,
+			onDragSelect,
+			// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
+			// Rebuild it on syncMode changes so the new chart instance starts from a
+			// clean config — otherwise switching to "No Sync" would inherit stale sync
+			// settings from the previous mode.
+			dashboardPreference?.syncMode,
+		],
+	);
+
+	const chartData = useMemo(() => prepareAlignedData(flatSeries), [flatSeries]);
+
+	const decimalPrecision = useMemo(
+		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
+		[spec.formatting?.decimalPrecision],
+	);
+
+	const legendPosition = useMemo(() => {
+		return resolveLegendPosition(spec.legend?.position);
+	}, [spec.legend?.position]);
+
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
+			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
+		),
+		[panelId],
+	);
+
+	// The uPlot key prop is the only way to force a full teardown and re-mount
+	// of the chart. Including syncMode/syncFilterMode in the key ensures changes
+	// to these preferences trigger a fresh chart instance, preventing stale
+	// sync wiring from being inherited.
+	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
+
+	const handleChartClick = useCallback(
+		(args: ChartClickData) => {
+			onClick?.(args);
+		},
+		[onClick],
+	);
+
+	return (
+		<div
+			ref={graphRef}
+			data-testid="bar-panel-renderer"
+			className={PanelStyles.panelContainer}
+		>
+			{flatSeries.length === 0 && <NoData />}
+			{flatSeries.length > 0 &&
+				containerDimensions.width > 0 &&
+				containerDimensions.height > 0 && (
+					<BarChart
+						key={key}
+						config={config}
+						data={chartData}
+						legendConfig={{ position: legendPosition }}
+						groupByPerQuery={groupByPerQuery}
+						canPinTooltip
+						timezone={timezone}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						width={containerDimensions.width}
+						height={containerDimensions.height}
+						syncMode={dashboardPreference?.syncMode}
+						syncFilterMode={dashboardPreference?.syncFilterMode}
+						isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
+						renderTooltipFooter={renderTooltipFooter}
+						onClick={handleChartClick}
+					/>
+				)}
+		</div>
+	);
+}
+
+export default BarPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -0,0 +1,13 @@
+import { DataSource } from 'types/common/queryBuilder';
+
+import type { PanelDefinition } from '../../types/panelDefinition';
+import Renderer from './Renderer';
+import { sections } from './sections';
+
+export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
+	kind: 'signoz/BarChartPanel',
+	displayName: 'Bar Chart',
+	Renderer,
+	sections,
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts

@@ -0,0 +1,9 @@
+import type { SectionConfig } from '../../types/sections';
+
+export const sections: SectionConfig[] = [
+	{ kind: 'formatting', controls: { unit: true, decimals: true } },
+	{ kind: 'axes', controls: { minMax: true, unit: true, logScale: true } },
+	{ kind: 'legend', controls: { position: true, mode: true } },
+	{ kind: 'thresholds', controls: { list: true } },
+	{ kind: 'chartAppearance', controls: { stacked: true } },
+];

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

@@ -0,0 +1,138 @@
+import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import { toClickPluginPayload } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
+import getLabelName from 'lib/getLabelName';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+export interface BuildBarChartConfigArgs {
+	panelId: string;
+	spec: DashboardtypesBarChartPanelSpecDTO;
+	/**
+	 * Flat list of builder queries on this panel (see `getBuilderQueries`).
+	 * Powers per-query legend resolution; empty for non-builder panels.
+	 */
+	builderQueries: BuilderQuery[];
+	/** Flattened V5 series (see `flattenTimeSeries`). */
+	series: PanelSeries[];
+	/** Per-query step intervals from the response exec stats. */
+	stepIntervals?: Record<string, number>;
+	isDarkMode: boolean;
+	timezone: Timezone;
+	panelMode: PanelMode;
+	onDragSelect?: (start: number, end: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}
+
+/**
+ * Builds a fully-wired `UPlotConfigBuilder` for a Bar chart panel.
+ *
+ * Delegates the panel-agnostic scaffolding (scales, thresholds, axes,
+ * drag-to-zoom, click plugin) to the shared `buildBaseConfig`, then layers
+ * in the Bar-specific concerns: optional stacking via uPlot bands, plus
+ * one bar series per result row.
+ */
+export function buildBarChartConfig({
+	panelId,
+	spec,
+	builderQueries,
+	series,
+	stepIntervals,
+	isDarkMode,
+	timezone,
+	panelMode,
+	onDragSelect,
+	onClick,
+	minTimeScale,
+	maxTimeScale,
+}: BuildBarChartConfigArgs): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		panelId,
+		panelType: PANEL_TYPES.BAR,
+		isDarkMode,
+		timezone,
+		panelMode,
+		isLogScale: spec.axes?.isLogScale,
+		softMin: spec.axes?.softMin ?? undefined,
+		softMax: spec.axes?.softMax ?? undefined,
+		formatting: spec.formatting,
+		thresholds: spec.thresholds,
+		stepIntervals,
+		clickPayload: toClickPluginPayload(series),
+		minTimeScale,
+		maxTimeScale,
+		onDragSelect,
+		onClick,
+	});
+
+	addSeries({
+		builder,
+		spec,
+		builderQueries,
+		series,
+		stepIntervals,
+		isDarkMode,
+	});
+
+	return builder;
+}
+
+interface AddSeriesArgs {
+	builder: UPlotConfigBuilder;
+	spec: DashboardtypesBarChartPanelSpecDTO;
+	builderQueries: BuilderQuery[];
+	series: PanelSeries[];
+	stepIntervals?: Record<string, number>;
+	isDarkMode: boolean;
+}
+
+/**
+ * Adds one bar series per flattened V5 series, plus uPlot bands for stacking
+ * when `spec.visualization.stackedBarChart` is set. Each series receives its
+ * own per-query step interval so bar widths line up with the actual
+ * sampling cadence reported by the backend.
+ *
+ * Order must match `prepareAlignedData` — both iterate the same flat list.
+ */
+function addSeries({
+	builder,
+	spec,
+	builderQueries,
+	series,
+	stepIntervals,
+	isDarkMode,
+}: AddSeriesArgs): void {
+	const colorMapping = spec.legend?.customColors ?? {};
+
+	if (spec.visualization?.stackedBarChart) {
+		// uPlot uses 1-based series indices (index 0 is the timestamp axis);
+		// `+1` keeps the band targets aligned with the series we're about to add.
+		builder.setBands(getInitialStackedBands(series.length + 1));
+	}
+
+	series.forEach((s) => {
+		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
+		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
+		const stepInterval = s.queryName ? stepIntervals?.[s.queryName] : undefined;
+
+		builder.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			label,
+			colorMapping,
+			isDarkMode,
+			stepInterval,
+			metric: s.labels,
+		});
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useMemo, useRef } from 'react';
+import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import Histogram from 'container/DashboardContainer/visualization/charts/Histogram/Histogram';
+import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
+import {
+	flattenTimeSeries,
+	getTimeSeriesResults,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
+import { useTimezone } from 'providers/Timezone';
+import type uPlot from 'uplot';
+
+import NoData from '../../components/NoData/NoData';
+import PanelStyles from '../../panel.module.scss';
+import { PanelRendererProps } from '../../types/rendererProps';
+import { resolveLegendPosition } from '../../utils/chartAppearance/resolvers';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+
+import { buildHistogramConfig } from './utils/buildConfig';
+import { prepareHistogramData } from './prepareData';
+import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+function HistogramPanelRenderer({
+	panelId,
+	panel,
+	data,
+	panelMode,
+	onClick,
+}: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	// The registry guarantees this Renderer only runs when
+	// `panel.spec.plugin.kind === 'signoz/HistogramPanel'`, so the cast is a
+	// documented boundary narrowing.
+	const spec = useMemo<DashboardtypesHistogramPanelSpecDTO>(
+		() => panel.spec.plugin.spec as DashboardtypesHistogramPanelSpecDTO,
+		[panel.spec.plugin.spec],
+	);
+
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries),
+		[panel.spec.queries],
+	);
+
+	const flatSeries = useMemo(
+		() =>
+			flattenTimeSeries(getTimeSeriesResults(data.response), data.legendMap ?? {}),
+		[data.response, data.legendMap],
+	);
+
+	const config = useMemo(
+		() =>
+			buildHistogramConfig({
+				panelId,
+				spec,
+				builderQueries,
+				series: flatSeries,
+				isDarkMode,
+				timezone,
+				panelMode,
+			}),
+		[panelId, spec, builderQueries, flatSeries, isDarkMode, timezone, panelMode],
+	);
+
+	const chartData = useMemo(
+		() =>
+			prepareHistogramData({
+				series: flatSeries,
+				bucketWidth: spec.histogramBuckets?.bucketWidth ?? undefined,
+				bucketCount: spec.histogramBuckets?.bucketCount ?? undefined,
+				mergeAllActiveQueries: spec.histogramBuckets?.mergeAllActiveQueries,
+			}),
+		[
+			flatSeries,
+			spec.histogramBuckets?.bucketWidth,
+			spec.histogramBuckets?.bucketCount,
+			spec.histogramBuckets?.mergeAllActiveQueries,
+		],
+	);
+
+	const legendPosition = useMemo(
+		() => resolveLegendPosition(spec.legend?.position),
+		[spec.legend?.position],
+	);
+
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
+			<TooltipFooter
+				id={panelId}
+				isPinned={isPinned}
+				dismiss={dismiss}
+				canDrilldown={false}
+			/>
+		),
+		[panelId],
+	);
+
+	const isQueriesMerged = spec.histogramBuckets?.mergeAllActiveQueries ?? false;
+
+	const handleChartClick = useCallback(
+		(args: ChartClickData) => {
+			onClick?.(args);
+		},
+		[onClick],
+	);
+
+	return (
+		<div
+			ref={graphRef}
+			data-testid="histogram-panel-renderer"
+			className={PanelStyles.panelContainer}
+		>
+			{flatSeries.length === 0 && <NoData />}
+			{flatSeries.length > 0 &&
+				containerDimensions.width > 0 &&
+				containerDimensions.height > 0 && (
+					<Histogram
+						key={panelId}
+						config={config}
+						data={chartData as uPlot.AlignedData}
+						legendConfig={{ position: legendPosition }}
+						canPinTooltip
+						isQueriesMerged={isQueriesMerged}
+						width={containerDimensions.width}
+						height={containerDimensions.height}
+						renderTooltipFooter={renderTooltipFooter}
+						onClick={handleChartClick}
+					/>
+				)}
+		</div>
+	);
+}
+
+export default HistogramPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -0,0 +1,13 @@
+import { DataSource } from 'types/common/queryBuilder';
+
+import type { PanelDefinition } from '../../types/panelDefinition';
+import Renderer from './Renderer';
+import { sections } from './sections';
+
+export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
+	kind: 'signoz/HistogramPanel',
+	displayName: 'Histogram',
+	Renderer,
+	sections,
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+};

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

@@ -0,0 +1,148 @@
+import { histogramBucketSizes } from '@grafana/data';
+import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
+import {
+	buildHistogramBuckets,
+	mergeAlignedDataTables,
+	prependNullBinToFirstHistogramSeries,
+	replaceUndefinedWithNullInAlignedData,
+} from 'container/DashboardContainer/visualization/panels/utils/histogram';
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import { AlignedData } from 'uplot';
+import { incrRoundDn, roundDecimals } from 'utils/round';
+
+export interface PrepareHistogramDataArgs {
+	/** Flattened V5 series (see `flattenTimeSeries`). */
+	series: PanelSeries[];
+	bucketWidth?: number;
+	bucketCount?: number;
+	mergeAllActiveQueries?: boolean;
+}
+
+const BUCKET_OFFSET = 0;
+const sortAscending = (a: number, b: number): number => a - b;
+
+/**
+ * Bins raw series values into a uPlot-aligned histogram. Picks a bucket size
+ * either from `bucketWidth` (explicit override) or the smallest predefined
+ * Grafana bucket that fits the data's `range / bucketCount` target while
+ * staying ≥ the data's smallest non-zero delta (so we never sub-divide below
+ * the resolution of the input).
+ *
+ * Empty input → `[[]]` (a valid empty AlignedData uPlot accepts).
+ */
+export function prepareHistogramData({
+	series,
+	bucketWidth,
+	bucketCount = DEFAULT_BUCKET_COUNT,
+	mergeAllActiveQueries = false,
+}: PrepareHistogramDataArgs): AlignedData {
+	const values = extractNumericValues(series);
+	if (values.length === 0) {
+		return [[]];
+	}
+
+	const sorted = [...values].sort(sortAscending);
+	const range = sorted[sorted.length - 1] - sorted[0];
+	const smallestDelta = computeSmallestDelta(sorted);
+	let bucketSize = selectBucketSize({
+		range,
+		bucketCount,
+		smallestDelta,
+		bucketWidthOverride: bucketWidth,
+	});
+	if (bucketSize <= 0) {
+		bucketSize = range > 0 ? range / bucketCount : 1;
+	}
+
+	const getBucket = (v: number): number =>
+		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
+
+	const frames = buildFrames(series, mergeAllActiveQueries);
+	// Merged mode folds every query into frame 0 and leaves trailing empty
+	// frames — drop those. Per-query mode must keep one column per result row
+	// (even empty queries), or the data column count drifts below the series
+	// count `buildHistogramConfig` adds per row → uPlot renders nothing.
+	const histograms: AlignedData[] = frames
+		.filter((frame) => !mergeAllActiveQueries || frame.length > 0)
+		.map((frame) => buildHistogramBuckets(frame, getBucket, sortAscending));
+
+	if (histograms.length === 0) {
+		return [[]];
+	}
+
+	const merged = mergeAlignedDataTables(histograms);
+	replaceUndefinedWithNullInAlignedData(merged);
+	prependNullBinToFirstHistogramSeries(merged, bucketSize);
+	return merged;
+}
+
+// Non-finite samples degrade to 0 (legacy `parseFloat(...) || 0` parity).
+function toBinnableValue(value: number): number {
+	return Number.isFinite(value) ? value : 0;
+}
+
+function extractNumericValues(series: PanelSeries[]): number[] {
+	const values: number[] = [];
+	for (const s of series) {
+		for (const point of s.values) {
+			values.push(toBinnableValue(point.value));
+		}
+	}
+	return values;
+}
+
+function computeSmallestDelta(sortedValues: number[]): number {
+	if (sortedValues.length <= 1) {
+		return 0;
+	}
+	let smallest = Infinity;
+	for (let i = 1; i < sortedValues.length; i++) {
+		const delta = sortedValues[i] - sortedValues[i - 1];
+		if (delta > 0) {
+			smallest = Math.min(smallest, delta);
+		}
+	}
+	return smallest === Infinity ? 0 : smallest;
+}
+
+function selectBucketSize({
+	range,
+	bucketCount,
+	smallestDelta,
+	bucketWidthOverride,
+}: {
+	range: number;
+	bucketCount: number;
+	smallestDelta: number;
+	bucketWidthOverride?: number;
+}): number {
+	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
+		return bucketWidthOverride;
+	}
+	const targetSize = range / bucketCount;
+	for (const candidate of histogramBucketSizes) {
+		if (targetSize < candidate && candidate >= smallestDelta) {
+			return candidate;
+		}
+	}
+	return 0;
+}
+
+// When merging is on, fold all frames into the first; the trailing empty
+// frames stay in the array so downstream `.filter(length > 0)` drops them.
+function buildFrames(
+	series: PanelSeries[],
+	mergeAllActiveQueries: boolean,
+): number[][] {
+	const frames: number[][] = series.map((s) =>
+		s.values.map((point) => toBinnableValue(point.value)),
+	);
+	if (mergeAllActiveQueries && frames.length > 1) {
+		const first = frames[0];
+		for (let i = 1; i < frames.length; i++) {
+			first.push(...frames[i]);
+			frames[i] = [];
+		}
+	}
+	return frames;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts

@@ -0,0 +1,6 @@
+import type { SectionConfig } from '../../types/sections';
+
+export const sections: SectionConfig[] = [
+	{ kind: 'legend', controls: { position: true, mode: true } },
+	{ kind: 'buckets', controls: { count: true } },
+];

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

@@ -0,0 +1,129 @@
+import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import getLabelName from 'lib/getLabelName';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+const POINT_SIZE = 5;
+const BAR_WIDTH_FACTOR = 1;
+// Merged-series colors mirror the V1 default — single histogram bin gets a
+// fixed blue-ish pair so the merged view looks the same as before.
+const MERGED_SERIES_LINE_COLOR = '#3f5ecc';
+const MERGED_SERIES_FILL_COLOR = '#4E74F8';
+
+export interface BuildHistogramConfigArgs {
+	panelId: string;
+	spec: DashboardtypesHistogramPanelSpecDTO;
+	/** Builder queries on this panel — used to resolve per-series labels. */
+	builderQueries: BuilderQuery[];
+	/** Flattened V5 series (see `flattenTimeSeries`). */
+	series: PanelSeries[];
+	isDarkMode: boolean;
+	timezone: Timezone;
+	panelMode: PanelMode;
+}
+
+/**
+ * Builds a fully-wired `UPlotConfigBuilder` for a Histogram panel.
+ *
+ * Unlike time-axis panels, histograms have no time scale and no drag-to-zoom.
+ * We still reuse `buildBaseConfig` for the consistent scaffolding (thresholds,
+ * axes, click plugin) but then override the X/Y scales to be auto-linear
+ * (`time: false, auto: true`) and install a histogram-specific cursor that
+ * disables drag-pan and tightens focus proximity.
+ */
+export function buildHistogramConfig({
+	panelId,
+	spec,
+	builderQueries,
+	series,
+	isDarkMode,
+	timezone,
+	panelMode,
+}: BuildHistogramConfigArgs): UPlotConfigBuilder {
+	// Histograms have no time axis — no stepIntervals, and no click plugin
+	// (the renderer passes no onClick), so the base config needs no response.
+	const builder = buildBaseConfig({
+		panelId,
+		panelType: PANEL_TYPES.HISTOGRAM,
+		isDarkMode,
+		timezone,
+		panelMode,
+	});
+
+	builder.setCursor({
+		drag: { x: false, y: false, setScale: true },
+		focus: { prox: 1e3 },
+	});
+
+	// Override the time-axis scales from `buildBaseConfig` — histograms are
+	// distribution plots, not time series.
+	builder.addScale({ scaleKey: 'x', time: false, auto: true });
+	builder.addScale({ scaleKey: 'y', time: false, auto: true, min: 0 });
+
+	addSeries({ builder, spec, builderQueries, series, isDarkMode });
+
+	return builder;
+}
+
+interface AddSeriesArgs {
+	builder: UPlotConfigBuilder;
+	spec: DashboardtypesHistogramPanelSpecDTO;
+	builderQueries: BuilderQuery[];
+	series: PanelSeries[];
+	isDarkMode: boolean;
+}
+
+/**
+ * Adds histogram bar series to the builder. When `mergeAllActiveQueries` is
+ * set, `prepareHistogramData` produces a single Y column, so we add exactly
+ * one series with the fixed merged-mode colors. Otherwise one series per
+ * result row, with labels resolved via the standard legend matrix.
+ */
+function addSeries({
+	builder,
+	spec,
+	builderQueries,
+	series,
+	isDarkMode,
+}: AddSeriesArgs): void {
+	const colorMapping = spec.legend?.customColors ?? {};
+	const mergeAllActiveQueries =
+		spec.histogramBuckets?.mergeAllActiveQueries ?? false;
+
+	if (mergeAllActiveQueries) {
+		builder.addSeries({
+			scaleKey: 'y',
+			label: '',
+			drawStyle: DrawStyle.Histogram,
+			colorMapping,
+			barWidthFactor: BAR_WIDTH_FACTOR,
+			pointSize: POINT_SIZE,
+			lineColor: MERGED_SERIES_LINE_COLOR,
+			fillColor: MERGED_SERIES_FILL_COLOR,
+			isDarkMode,
+		});
+		return;
+	}
+
+	series.forEach((s) => {
+		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
+		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
+
+		builder.addSeries({
+			scaleKey: 'y',
+			label,
+			drawStyle: DrawStyle.Histogram,
+			colorMapping,
+			barWidthFactor: BAR_WIDTH_FACTOR,
+			pointSize: POINT_SIZE,
+			isDarkMode,
+		});
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx

@@ -0,0 +1,78 @@
+import { useMemo } from 'react';
+import type { DashboardtypesNumberPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { prepareScalarTables } from 'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables';
+import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
+
+import NoData from '../../components/NoData/NoData';
+import PanelStyles from '../../panel.module.scss';
+import { PanelRendererProps } from '../../types/rendererProps';
+import { formatPanelValue } from '../../utils/formatPanelValue';
+import { resolveDecimalPrecision } from '../../utils/chartAppearance/resolvers';
+
+import { prepareNumberData } from './prepareData';
+import { mapNumberThresholds } from './utils';
+import ValueDisplay from './components/ValueDisplay/ValueDisplay';
+
+function NumberPanelRenderer({
+	panel,
+	data,
+}: PanelRendererProps<'signoz/NumberPanel'>): JSX.Element {
+	// The registry guarantees this Renderer only runs when
+	// `panel.spec.plugin.kind === 'signoz/NumberPanel'`, so the cast is a
+	// documented boundary narrowing.
+	const spec = useMemo<DashboardtypesNumberPanelSpecDTO>(
+		() => panel.spec.plugin.spec as DashboardtypesNumberPanelSpecDTO,
+		[panel.spec.plugin.spec],
+	);
+
+	const value = useMemo(
+		() =>
+			prepareNumberData(
+				prepareScalarTables({
+					results: getScalarResults(data.response),
+					legendMap: data.legendMap ?? {},
+					requestPayload: data.requestPayload,
+				}),
+			),
+		[data.response, data.legendMap, data.requestPayload],
+	);
+
+	const thresholds = useMemo(
+		() => mapNumberThresholds(spec.thresholds),
+		[spec.thresholds],
+	);
+
+	const decimalPrecision = useMemo(
+		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
+		[spec.formatting?.decimalPrecision],
+	);
+
+	const unit = spec.formatting?.unit;
+
+	// Precision is applied regardless of whether a unit is set (see
+	// `formatPanelValue`), so decimal-precision changes always take effect.
+	const formattedValue = useMemo(
+		() => (value === null ? '' : formatPanelValue(value, unit, decimalPrecision)),
+		[value, unit, decimalPrecision],
+	);
+
+	return (
+		<div
+			data-testid="number-panel-renderer"
+			className={PanelStyles.panelContainer}
+		>
+			{value === null ? (
+				<NoData data-testid="number-panel-no-data" />
+			) : (
+				<ValueDisplay
+					value={formattedValue}
+					rawValue={value}
+					thresholds={thresholds}
+					unit={unit}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default NumberPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/__tests__/Renderer.test.tsx

@@ -0,0 +1,163 @@
+import {
+	DashboardtypesComparisonOperatorDTO,
+	type DashboardtypesNumberPanelSpecDTO,
+	type DashboardtypesPanelDTO,
+	DashboardtypesThresholdFormatDTO,
+	type QueryRangeV5200,
+} from 'api/generated/services/sigNoz.schemas';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import type { PanelQueryData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import { render } from 'tests/test-utils';
+
+import { BaseRendererProps } from '../../../types/rendererProps';
+import BaseNumberPanelRenderer from '../Renderer';
+
+// The kind's interaction map is `Record<string, never>`, which makes the strict
+// `PanelRendererProps<'signoz/NumberPanel'>` intersection impossible to satisfy
+// with a literal. NumberPanel reads no interaction props, so render it against
+// the base prop surface.
+const NumberPanelRenderer =
+	BaseNumberPanelRenderer as React.FC<BaseRendererProps>;
+
+// ValueDisplay observes its container to size the font.
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+function panelWith(
+	spec: DashboardtypesNumberPanelSpecDTO,
+): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: { plugin: { kind: 'signoz/NumberPanel', spec } },
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+// V5 scalar response: one table per query, value in the aggregation column.
+function dataWith(value: string | number): PanelQueryData {
+	return {
+		response: {
+			status: 'success',
+			data: {
+				type: 'scalar',
+				data: {
+					results: [
+						{
+							queryName: 'A',
+							columns: [
+								{
+									name: '__result',
+									queryName: 'A',
+									columnType: 'aggregation',
+									aggregationIndex: 0,
+								},
+							],
+							data: [[value]],
+						},
+					],
+				},
+			},
+		} as unknown as QueryRangeV5200,
+		requestPayload: undefined,
+		legendMap: {},
+	};
+}
+
+const emptyData: PanelQueryData = {
+	response: {
+		status: 'success',
+		data: { type: 'scalar', data: { results: [] } },
+	} as unknown as QueryRangeV5200,
+	requestPayload: undefined,
+	legendMap: {},
+};
+
+// `data` is always present per the renderer contract; an absent fetch surfaces
+// as a missing `response`, not a missing `data`.
+const absentResponseData: PanelQueryData = {
+	response: undefined,
+	requestPayload: undefined,
+	legendMap: {},
+};
+
+// NumberPanel adds no interaction props (its interaction map is
+// `Record<string, never>`), so the base renderer props fully describe it.
+function renderPanel(
+	props: Partial<BaseRendererProps>,
+): ReturnType<typeof render> {
+	const baseProps: BaseRendererProps = {
+		panelId: 'panel-1',
+		panel: panelWith({}),
+		data: emptyData,
+		isLoading: false,
+		error: null,
+		panelMode: PanelMode.DASHBOARD_VIEW,
+		...props,
+	};
+	return render(<NumberPanelRenderer {...baseProps} />);
+}
+
+describe('NumberPanelRenderer', () => {
+	it('renders the value with its y-axis unit', () => {
+		const { getByText } = renderPanel({
+			panel: panelWith({ formatting: { unit: 'ms' } }),
+			data: dataWith('295.4299833508185'),
+		});
+
+		expect(getByText('295.43')).toBeInTheDocument();
+		expect(getByText('ms')).toBeInTheDocument();
+	});
+
+	// Regression: with no unit configured, decimal precision must still apply.
+	// Previously the renderer fell back to `value.toString()` whenever the unit
+	// was empty, so precision changes had no effect on unitless panels.
+	it('applies decimal precision even when no unit is set', () => {
+		const { getByText, queryByText } = renderPanel({
+			panel: panelWith({}),
+			data: dataWith('3.14159'),
+		});
+
+		expect(getByText('3.14')).toBeInTheDocument();
+		expect(queryByText('3.14159')).not.toBeInTheDocument();
+	});
+
+	it('renders No Data when the response has no scalar results', () => {
+		const { getByTestId } = renderPanel({ data: emptyData });
+
+		expect(getByTestId('number-panel-no-data')).toBeInTheDocument();
+	});
+
+	it('renders No Data when the response is absent', () => {
+		const { getByTestId } = renderPanel({ data: absentResponseData });
+
+		expect(getByTestId('number-panel-no-data')).toBeInTheDocument();
+	});
+
+	it('surfaces the conflicting-thresholds indicator when a value matches multiple thresholds', () => {
+		const { getByTestId } = renderPanel({
+			panel: panelWith({
+				thresholds: [
+					{
+						color: '#f00',
+						operator: DashboardtypesComparisonOperatorDTO.above,
+						value: 0,
+						format: DashboardtypesThresholdFormatDTO.background,
+					},
+					{
+						color: '#0f0',
+						operator: DashboardtypesComparisonOperatorDTO.above,
+						value: 100,
+						format: DashboardtypesThresholdFormatDTO.background,
+					},
+				],
+			}),
+			data: dataWith('295.4299833508185'),
+		});
+
+		expect(getByTestId('conflicting-thresholds')).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,62 @@
+import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+import { prepareNumberData } from '../prepareData';
+
+function tableWith(
+	columns: PanelTable['columns'],
+	rows: PanelTable['rows'],
+): PanelTable {
+	return { queryName: 'A', legend: '', columns, rows };
+}
+
+describe('prepareNumberData', () => {
+	it('returns null for no tables', () => {
+		expect(prepareNumberData([])).toBeNull();
+	});
+
+	it('reads the first row of the value column', () => {
+		const table = tableWith(
+			[
+				{ name: 'group', queryName: 'A', isValueColumn: false, id: 'group' },
+				{ name: 'value', queryName: 'A', isValueColumn: true, id: 'val' },
+			],
+			[
+				{ data: { group: 'prod', val: '295.4299833508185' } },
+				{ data: { group: 'dev', val: '7' } },
+			],
+		);
+
+		expect(prepareNumberData([table])).toBeCloseTo(295.43, 2);
+	});
+
+	it('falls back to the row first value when no column is tagged isValueColumn', () => {
+		const table = tableWith(
+			[{ name: 'value', queryName: 'A', isValueColumn: false, id: 'value' }],
+			[{ data: { value: '7' } }],
+		);
+
+		expect(prepareNumberData([table])).toBe(7);
+	});
+
+	it('skips empty tables and reads the first one with rows', () => {
+		const empty = tableWith(
+			[{ name: 'value', queryName: 'A', isValueColumn: true, id: 'A' }],
+			[],
+		);
+		const filled = tableWith(
+			[{ name: 'value', queryName: 'B', isValueColumn: true, id: 'B' }],
+			[{ data: { B: 42 } }],
+		);
+
+		expect(prepareNumberData([empty, filled])).toBe(42);
+	});
+
+	it('returns null when the value is non-numeric', () => {
+		const table = tableWith(
+			[{ name: 'value', queryName: 'A', isValueColumn: true, id: 'A' }],
+			[{ data: { A: 'n/a' } }],
+		);
+
+		expect(prepareNumberData([table])).toBeNull();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/__tests__/utils.test.ts

@@ -0,0 +1,99 @@
+import {
+	DashboardtypesComparisonOperatorDTO,
+	DashboardtypesComparisonThresholdDTO,
+	DashboardtypesThresholdFormatDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { mapNumberThresholds } from '../utils';
+
+describe('mapNumberThresholds', () => {
+	it('returns [] for null / undefined / empty', () => {
+		expect(mapNumberThresholds(null)).toStrictEqual([]);
+		expect(mapNumberThresholds(undefined)).toStrictEqual([]);
+		expect(mapNumberThresholds([])).toStrictEqual([]);
+	});
+
+	it('maps comparison operators to symbol operators', () => {
+		const thresholds: DashboardtypesComparisonThresholdDTO[] = [
+			{
+				color: '#f00',
+				operator: DashboardtypesComparisonOperatorDTO.above,
+				value: 1,
+			},
+			{
+				color: '#0f0',
+				operator: DashboardtypesComparisonOperatorDTO.below,
+				value: 2,
+			},
+			{
+				color: '#00f',
+				operator: DashboardtypesComparisonOperatorDTO.above_or_equal,
+				value: 3,
+			},
+			{
+				color: '#ff0',
+				operator: DashboardtypesComparisonOperatorDTO.below_or_equal,
+				value: 4,
+			},
+			{
+				color: '#0ff',
+				operator: DashboardtypesComparisonOperatorDTO.equal,
+				value: 5,
+			},
+		];
+
+		const mapped = mapNumberThresholds(thresholds);
+
+		expect(mapped.map((t) => t.operator)).toStrictEqual([
+			'>',
+			'<',
+			'>=',
+			'<=',
+			'=',
+		]);
+	});
+
+	it('maps not_equal to !=', () => {
+		const mapped = mapNumberThresholds([
+			{
+				color: '#f00',
+				operator: DashboardtypesComparisonOperatorDTO.not_equal,
+				value: 1,
+			},
+		]);
+
+		expect(mapped[0].operator).toBe('!=');
+	});
+
+	it('maps format and carries value/unit/color', () => {
+		const mapped = mapNumberThresholds([
+			{
+				color: '#abcdef',
+				operator: DashboardtypesComparisonOperatorDTO.above,
+				value: 100,
+				unit: 'ms',
+				format: DashboardtypesThresholdFormatDTO.background,
+			},
+		]);
+
+		expect(mapped[0]).toStrictEqual({
+			color: '#abcdef',
+			operator: '>',
+			value: 100,
+			unit: 'ms',
+			format: 'background',
+		});
+	});
+
+	it('maps text format to text', () => {
+		const mapped = mapNumberThresholds([
+			{
+				color: '#000',
+				value: 1,
+				format: DashboardtypesThresholdFormatDTO.text,
+			},
+		]);
+
+		expect(mapped[0].format).toBe('text');
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueDisplay/ValueDisplay.module.scss

@@ -0,0 +1,36 @@
+.container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+}
+
+.textContainer {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	justify-content: center;
+	flex-wrap: nowrap;
+}
+
+.valueText {
+	text-align: center;
+	font-weight: 400;
+}
+
+.conflictBackground {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+}
+
+.conflictText {
+	margin-left: 10px;
+	margin-top: 20px;
+}
+
+.conflictIcon {
+	color: var(--warning-background);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueDisplay/ValueDisplay.tsx

@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from 'antd';
+import { CircleAlert } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { PanelThreshold } from '../../../../types/threshold';
+import { resolveActiveThreshold } from '../../../../utils/evaluateThresholds';
+
+import { parseFormattedValue } from '../../../../utils/parseFormattedValue';
+import styles from './ValueDisplay.module.scss';
+import { useResponsiveFontSize } from '../../../../hooks/useResponsiveFontSize';
+import ValueUnit from '../ValueUnit/ValueUnit';
+
+interface ValueDisplayProps {
+	/** The pre-formatted value string (may include a unit label). */
+	value: string;
+	/** The raw numeric value, used for threshold evaluation. */
+	rawValue: number;
+	thresholds: PanelThreshold[];
+	/** The panel's unit, used to convert threshold units before comparison. */
+	unit?: string;
+}
+
+/**
+ * Renders a single large scalar with optional prefix/suffix units and threshold
+ * recoloring (text or background). A V2-native replacement for the V1
+ * `ValueGraph` — depends only on V2 threshold utilities and the shared icon/
+ * typography primitives.
+ */
+function ValueDisplay({
+	value,
+	rawValue,
+	thresholds,
+	unit,
+}: ValueDisplayProps): JSX.Element {
+	const { t } = useTranslation(['valueGraph']);
+	const { containerRef, fontSize } = useResponsiveFontSize();
+
+	const { numericValue, prefixUnit, suffixUnit } = useMemo(
+		() => parseFormattedValue(value),
+		[value],
+	);
+
+	const { threshold, isConflicting } = useMemo(
+		() => resolveActiveThreshold(thresholds, rawValue, unit),
+		[thresholds, rawValue, unit],
+	);
+
+	const isBackground = threshold?.format === 'background';
+	const textColor = threshold?.format === 'text' ? threshold.color : undefined;
+	const backgroundColor = isBackground ? threshold?.color : undefined;
+
+	return (
+		<div
+			ref={containerRef}
+			className={styles.container}
+			style={{ backgroundColor }}
+		>
+			<div className={styles.textContainer}>
+				{prefixUnit && (
+					<ValueUnit
+						type="prefix"
+						unit={prefixUnit}
+						color={textColor}
+						fontSize={fontSize}
+					/>
+				)}
+				<Typography.Text
+					className={styles.valueText}
+					data-testid="number-panel-value"
+					style={{ color: textColor, fontSize }}
+				>
+					{numericValue}
+				</Typography.Text>
+				{suffixUnit && (
+					<ValueUnit
+						type="suffix"
+						unit={suffixUnit}
+						color={textColor}
+						fontSize={fontSize}
+					/>
+				)}
+			</div>
+			{isConflicting && (
+				<div
+					className={isBackground ? styles.conflictBackground : styles.conflictText}
+				>
+					<Tooltip title={t('this_value_satisfies_multiple_thresholds')}>
+						<CircleAlert
+							className={styles.conflictIcon}
+							data-testid="conflicting-thresholds"
+							size="md"
+						/>
+					</Tooltip>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ValueDisplay;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueUnit/ValueUnit.module.scss

@@ -0,0 +1,5 @@
+.unit {
+	margin-left: 4px;
+	font-weight: 300;
+	opacity: 0.8;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/components/ValueUnit/ValueUnit.tsx

@@ -0,0 +1,31 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './ValueUnit.module.scss';
+
+interface ValueUnitProps {
+	type: 'prefix' | 'suffix';
+	unit: string;
+	/** Text color, set only when a "text" threshold is active. */
+	color?: string;
+	fontSize: string;
+}
+
+/** A prefix/suffix unit label rendered alongside the numeric value. */
+function ValueUnit({
+	type,
+	unit,
+	color,
+	fontSize,
+}: ValueUnitProps): JSX.Element {
+	return (
+		<Typography.Text
+			className={styles.unit}
+			data-testid={`value-display-${type}-unit`}
+			style={{ color, fontSize: `calc(${fontSize} * 0.7)` }}
+		>
+			{unit}
+		</Typography.Text>
+	);
+}
+
+export default ValueUnit;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -0,0 +1,13 @@
+import { DataSource } from 'types/common/queryBuilder';
+
+import type { PanelDefinition } from '../../types/panelDefinition';
+import Renderer from './Renderer';
+import { sections } from './sections';
+
+export const definition: PanelDefinition<'signoz/NumberPanel'> = {
+	kind: 'signoz/NumberPanel',
+	displayName: 'Number',
+	Renderer,
+	sections,
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+};

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

@@ -0,0 +1,33 @@
+import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+/**
+ * Reduces the scalar tables of a V5 response to the single number a
+ * NumberPanel renders.
+ *
+ * V2 always issues `requestType: 'scalar'` for VALUE panels, so the response
+ * is a scalar table per query (see `prepareScalarTables`). The value is the
+ * first row's `isValueColumn` cell of the first table that has rows —
+ * falling back to the row's first cell when no column is marked as the
+ * value (mirrors the V1 `formatForWeb` fallback read).
+ *
+ * Returns `null` when there is no numeric value to show, which the renderer
+ * maps to the "No Data" state.
+ */
+export function prepareNumberData(tables: PanelTable[]): number | null {
+	for (const table of tables) {
+		if (table.rows.length === 0) {
+			continue;
+		}
+		const row = table.rows[0].data;
+		const valueColumn = table.columns.find((column) => column.isValueColumn);
+		const raw = valueColumn
+			? row[valueColumn.id || valueColumn.name]
+			: Object.values(row)[0];
+		const value = Number(raw);
+		if (Number.isFinite(value)) {
+			return value;
+		}
+	}
+
+	return null;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/sections.ts

@@ -0,0 +1,8 @@
+import type { SectionConfig } from '../../types/sections';
+
+// A number panel renders one scalar — no axes, legend, or stacking. Just value
+// formatting and thresholds that recolor the value/background.
+export const sections: SectionConfig[] = [
+	{ kind: 'formatting', controls: { unit: true, decimals: true } },
+	{ kind: 'thresholds', controls: { list: true } },
+];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/utils.ts

@@ -0,0 +1,54 @@
+import {
+	DashboardtypesComparisonOperatorDTO,
+	DashboardtypesComparisonThresholdDTO,
+	DashboardtypesThresholdFormatDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import type {
+	PanelThreshold,
+	ThresholdComparisonOperator,
+	ThresholdDisplayFormat,
+} from '../../types/threshold';
+
+// Perses comparison operators → the symbol operators V2 threshold evaluation
+// uses.
+const OPERATOR_MAP: Record<
+	DashboardtypesComparisonOperatorDTO,
+	ThresholdComparisonOperator
+> = {
+	[DashboardtypesComparisonOperatorDTO.above]: '>',
+	[DashboardtypesComparisonOperatorDTO.below]: '<',
+	[DashboardtypesComparisonOperatorDTO.above_or_equal]: '>=',
+	[DashboardtypesComparisonOperatorDTO.below_or_equal]: '<=',
+	[DashboardtypesComparisonOperatorDTO.equal]: '=',
+	[DashboardtypesComparisonOperatorDTO.not_equal]: '!=',
+};
+
+const FORMAT_MAP: Record<
+	DashboardtypesThresholdFormatDTO,
+	ThresholdDisplayFormat
+> = {
+	[DashboardtypesThresholdFormatDTO.text]: 'text',
+	[DashboardtypesThresholdFormatDTO.background]: 'background',
+};
+
+/**
+ * Maps the panel-spec threshold shape (`ComparisonThresholdDTO`) onto the
+ * V2-native `PanelThreshold` consumed by `ValueDisplay` / threshold
+ * evaluation. No dependency on the V1 `ThresholdProps` shape.
+ */
+export function mapNumberThresholds(
+	thresholds: DashboardtypesComparisonThresholdDTO[] | null | undefined,
+): PanelThreshold[] {
+	if (!thresholds || thresholds.length === 0) {
+		return [];
+	}
+
+	return thresholds.map((threshold) => ({
+		color: threshold.color,
+		operator: threshold.operator ? OPERATOR_MAP[threshold.operator] : undefined,
+		value: threshold.value,
+		unit: threshold.unit,
+		format: threshold.format ? FORMAT_MAP[threshold.format] : undefined,
+	}));
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx

@@ -0,0 +1,92 @@
+import { useCallback, useMemo } from 'react';
+import type { DashboardtypesPieChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import Pie from 'container/DashboardContainer/visualization/charts/Pie/Pie';
+import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { prepareScalarTables } from 'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables';
+import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
+
+import NoData from '../../components/NoData/NoData';
+import PanelStyles from '../../panel.module.scss';
+import { PanelRendererProps } from '../../types/rendererProps';
+import {
+	resolveDecimalPrecision,
+	resolveLegendPosition,
+} from '../../utils/chartAppearance/resolvers';
+
+import { preparePieData } from './prepareData';
+
+function PiePanelRenderer({
+	panelId,
+	panel,
+	data,
+	onClick,
+}: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	// The registry guarantees this Renderer only runs when
+	// `panel.spec.plugin.kind === 'signoz/PieChartPanel'`, so the cast is a
+	// documented boundary narrowing.
+	const spec = useMemo<DashboardtypesPieChartPanelSpecDTO>(
+		() => panel.spec.plugin.spec as DashboardtypesPieChartPanelSpecDTO,
+		[panel.spec.plugin.spec],
+	);
+
+	const slices = useMemo(
+		() =>
+			preparePieData({
+				tables: prepareScalarTables({
+					results: getScalarResults(data.response),
+					legendMap: data.legendMap ?? {},
+					requestPayload: data.requestPayload,
+				}),
+				customColors: spec.legend?.customColors,
+				isDarkMode,
+			}),
+		[
+			data.response,
+			data.legendMap,
+			data.requestPayload,
+			spec.legend?.customColors,
+			isDarkMode,
+		],
+	);
+
+	const decimalPrecision = useMemo(
+		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
+		[spec.formatting?.decimalPrecision],
+	);
+
+	const legendPosition = useMemo(
+		() => resolveLegendPosition(spec.legend?.position),
+		[spec.legend?.position],
+	);
+
+	const handleSliceClick = useCallback(
+		(slice: PieSlice) => {
+			onClick?.({ label: slice.label, value: slice.value });
+		},
+		[onClick],
+	);
+
+	return (
+		<div data-testid="pie-panel-renderer" className={PanelStyles.panelContainer}>
+			{slices.length === 0 ? (
+				<NoData />
+			) : (
+				<Pie
+					data={slices}
+					yAxisUnit={spec.formatting?.unit}
+					decimalPrecision={decimalPrecision}
+					isDarkMode={isDarkMode}
+					position={legendPosition}
+					id={panelId}
+					onSliceClick={handleSliceClick}
+					data-testid="pie-chart"
+				/>
+			)}
+		</div>
+	);
+}
+
+export default PiePanelRenderer;

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

@@ -0,0 +1,13 @@
+import { DataSource } from 'types/common/queryBuilder';
+
+import type { PanelDefinition } from '../../types/panelDefinition';
+import Renderer from './Renderer';
+import { sections } from './sections';
+
+export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
+	kind: 'signoz/PieChartPanel',
+	displayName: 'Pie Chart',
+	Renderer,
+	sections,
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+};

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

@@ -0,0 +1,58 @@
+import { themeColors } from 'constants/theme';
+import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+export interface PreparePieDataArgs {
+	/** Scalar tables from the V5 response (see `prepareScalarTables`). */
+	tables: PanelTable[];
+	/** Per-label colour overrides from `spec.legend.customColors`. */
+	customColors?: Record<string, string> | null;
+	isDarkMode: boolean;
+}
+
+/**
+ * Turns the scalar tables of a V5 response into pie slices: one slice per
+ * group row. The aggregation column holds the value, the group column(s)
+ * form the label. Colours honour `customColors` then fall back to a
+ * deterministic palette colour; non-positive / non-numeric values are
+ * dropped.
+ */
+export function preparePieData({
+	tables,
+	customColors,
+	isDarkMode,
+}: PreparePieDataArgs): PieSlice[] {
+	const colorMap = isDarkMode
+		? themeColors.chartcolors
+		: themeColors.lightModeColor;
+
+	const slices: PieSlice[] = [];
+	tables.forEach((table) => {
+		const valueColumn = table.columns.find((column) => column.isValueColumn);
+		if (!valueColumn) {
+			return;
+		}
+		const valueKey = valueColumn.id || valueColumn.name;
+		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
+
+		table.rows.forEach((row) => {
+			const value = Number(row.data[valueKey]);
+			const label =
+				labelColumns
+					.map((column) => row.data[column.id || column.name])
+					.filter((part) => part != null)
+					.map(String)
+					.join(', ') ||
+				table.legend ||
+				table.queryName ||
+				'';
+			const color = customColors?.[label] ?? generateColor(label, colorMap);
+			slices.push({ label, value, color });
+		});
+	});
+
+	return slices.filter(
+		(slice) => Number.isFinite(slice.value) && slice.value > 0,
+	);
+}

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

@@ -0,0 +1,8 @@
+import type { SectionConfig } from '../../types/sections';
+
+// Pie has no axes, thresholds, or stacking — just value formatting and a
+// legend. `mode` is omitted: the pie legend is always interactive swatches.
+export const sections: SectionConfig[] = [
+	{ kind: 'formatting', controls: { unit: true, decimals: true } },
+	{ kind: 'legend', controls: { position: true } },
+];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -0,0 +1,180 @@
+import { useCallback, useMemo, useRef } from 'react';
+import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
+import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
+import {
+	flattenTimeSeries,
+	getExecStats,
+	getTimeSeriesResults,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
+import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
+import { useTimezone } from 'providers/Timezone';
+import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
+import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
+
+import NoData from '../../components/NoData/NoData';
+import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
+import PanelStyles from '../../panel.module.scss';
+import { PanelRendererProps } from '../../types/rendererProps';
+import {
+	resolveDecimalPrecision,
+	resolveLegendPosition,
+} from '../../utils/chartAppearance/resolvers';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+
+import { buildTimeSeriesConfig } from './utils/buildConfig';
+import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+function TimeSeriesPanelRenderer({
+	panelId,
+	panel,
+	data,
+	onClick,
+	onDragSelect,
+	dashboardPreference,
+	panelMode,
+}: PanelRendererProps<'signoz/TimeSeriesPanel'>): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	// The registry guarantees this Renderer only runs when
+	// `panel.spec.plugin.kind === 'signoz/TimeSeriesPanel'`, so the cast is a
+	// documented boundary narrowing — not a blind assertion. Memoized so the
+	// `?? {}` fallback doesn't produce a fresh object on each render.
+	const spec = useMemo<DashboardtypesTimeSeriesPanelSpecDTO>(
+		() => (panel.spec.plugin.spec ?? {}) as DashboardtypesTimeSeriesPanelSpecDTO,
+		[panel.spec.plugin.spec],
+	);
+
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries),
+		[panel.spec.queries],
+	);
+
+	// X-scale clamps come from the request that produced the data, so each
+	// panel pins to the window it actually fetched — important during
+	// drag-zoom transitions when the time picker has moved but new data
+	// hasn't arrived yet. Falls back to the global picker inside the helper.
+	// The generated request DTO is structurally the hand-written V5 request;
+	// the cast is the documented boundary.
+	const { minTimeScale, maxTimeScale } = useMemo(() => {
+		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
+			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
+		);
+		return { minTimeScale: startTime, maxTimeScale: endTime };
+	}, [data.requestPayload]);
+
+	const groupByPerQuery = useGroupByPerQuery(builderQueries);
+
+	const flatSeries = useMemo(
+		() =>
+			flattenTimeSeries(getTimeSeriesResults(data.response), data.legendMap ?? {}),
+		[data.response, data.legendMap],
+	);
+
+	const config = useMemo(
+		() =>
+			buildTimeSeriesConfig({
+				panelId,
+				spec,
+				builderQueries,
+				series: flatSeries,
+				stepIntervals: getExecStats(data.response)?.stepIntervals,
+				isDarkMode,
+				timezone,
+				panelMode,
+				minTimeScale,
+				maxTimeScale,
+				onDragSelect,
+			}),
+		[
+			panelId,
+			spec,
+			builderQueries,
+			flatSeries,
+			data.response,
+			isDarkMode,
+			timezone,
+			panelMode,
+			minTimeScale,
+			maxTimeScale,
+			onDragSelect,
+			// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
+			// Rebuild it on syncMode changes so the new chart instance starts from a
+			// clean config — otherwise switching to "No Sync" would inherit stale sync
+			// settings from the previous mode.
+			dashboardPreference?.syncMode,
+		],
+	);
+
+	const chartData = useMemo(() => prepareAlignedData(flatSeries), [flatSeries]);
+
+	const decimalPrecision = useMemo(
+		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
+		[spec.formatting?.decimalPrecision],
+	);
+
+	const legendPosition = useMemo(() => {
+		return resolveLegendPosition(spec.legend?.position);
+	}, [spec.legend?.position]);
+
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
+			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
+		),
+		[panelId],
+	);
+
+	/**
+	 * The uPlot key prop is the only way to force a full teardown and re-mount
+	 * of the chart. By including the syncMode and syncFilterMode in the key,
+	 * we ensure that changes to these preferences trigger a fresh chart instance,
+	 * preventing stale sync settings from being inherited.
+	 */
+	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
+
+	const handleChartClick = useCallback(
+		(args: ChartClickData) => {
+			onClick?.(args);
+		},
+		[onClick],
+	);
+
+	return (
+		<div
+			ref={graphRef}
+			data-testid="time-series-renderer"
+			className={PanelStyles.panelContainer}
+		>
+			{flatSeries.length === 0 && <NoData />}
+			{flatSeries.length > 0 &&
+				containerDimensions.width > 0 &&
+				containerDimensions.height > 0 && (
+					<TimeSeries
+						key={key}
+						config={config}
+						data={chartData}
+						legendConfig={{ position: legendPosition }}
+						groupByPerQuery={groupByPerQuery}
+						canPinTooltip
+						timezone={timezone}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						width={containerDimensions.width}
+						height={containerDimensions.height}
+						syncMode={dashboardPreference?.syncMode}
+						syncFilterMode={dashboardPreference?.syncFilterMode}
+						renderTooltipFooter={renderTooltipFooter}
+						onClick={handleChartClick}
+					/>
+				)}
+		</div>
+	);
+}
+
+export default TimeSeriesPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -0,0 +1,13 @@
+import { DataSource } from 'types/common/queryBuilder';
+
+import type { PanelDefinition } from '../../types/panelDefinition';
+import Renderer from './Renderer';
+import { sections } from './sections';
+
+export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
+	kind: 'signoz/TimeSeriesPanel',
+	displayName: 'Time Series',
+	Renderer,
+	sections,
+	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
+};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts

@@ -0,0 +1,15 @@
+import type { SectionConfig } from '../../types/sections';
+
+export const sections: SectionConfig[] = [
+	{
+		kind: 'formatting',
+		controls: {
+			unit: true,
+			decimals: true,
+		},
+	},
+	{ kind: 'axes', controls: { minMax: true, unit: true, logScale: true } },
+	{ kind: 'legend', controls: { position: true, mode: true } },
+	{ kind: 'thresholds', controls: { list: true } },
+	{ kind: 'chartAppearance', controls: { lineStyle: true, fillOpacity: true } },
+];

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

@@ -0,0 +1,159 @@
+import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
+import {
+	FILL_MODE_MAP,
+	LINE_INTERPOLATION_MAP,
+	LINE_STYLE_MAP,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/enumMaps';
+import { resolveSpanGaps } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/resolvers';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import {
+	hasSingleVisiblePoint,
+	toClickPluginPayload,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
+import getLabelName from 'lib/getLabelName';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import {
+	DrawStyle,
+	FillMode,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+const DEFAULT_POINT_SIZE = 5;
+
+export interface BuildTimeSeriesConfigArgs {
+	panelId: string;
+	spec: DashboardtypesTimeSeriesPanelSpecDTO;
+	/**
+	 * Flat list of builder queries on this panel (see `getBuilderQueries`).
+	 * Powers per-query legend resolution; empty for non-builder panels.
+	 */
+	builderQueries: BuilderQuery[];
+	/** Flattened V5 series (see `flattenTimeSeries`). */
+	series: PanelSeries[];
+	/** Per-query step intervals from the response exec stats. */
+	stepIntervals?: Record<string, number>;
+	isDarkMode: boolean;
+	timezone: Timezone;
+	panelMode: PanelMode;
+	onDragSelect?: (start: number, end: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
+	minTimeScale?: number;
+	maxTimeScale?: number;
+}
+
+/**
+ * Builds a fully-wired `UPlotConfigBuilder` for a TimeSeries panel.
+ *
+ * Delegates the panel-agnostic scaffolding (scales, thresholds, axes,
+ * drag-to-zoom, click plugin) to the shared `buildBaseConfig`, then layers
+ * in the TimeSeries-specific concern: one series per result, with visuals
+ * resolved from `spec.chartAppearance`.
+ */
+export function buildTimeSeriesConfig({
+	panelId,
+	spec,
+	builderQueries,
+	series,
+	stepIntervals,
+	isDarkMode,
+	timezone,
+	panelMode,
+	onDragSelect,
+	onClick,
+	minTimeScale,
+	maxTimeScale,
+}: BuildTimeSeriesConfigArgs): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		panelId,
+		panelType: PANEL_TYPES.TIME_SERIES,
+		isDarkMode,
+		timezone,
+		panelMode,
+		isLogScale: spec.axes?.isLogScale,
+		softMin: spec.axes?.softMin ?? undefined,
+		softMax: spec.axes?.softMax ?? undefined,
+		formatting: spec.formatting,
+		thresholds: spec.thresholds,
+		stepIntervals,
+		clickPayload: toClickPluginPayload(series),
+		minTimeScale,
+		maxTimeScale,
+		onDragSelect,
+		onClick,
+	});
+
+	addSeries({ builder, spec, builderQueries, series, isDarkMode });
+
+	return builder;
+}
+
+interface AddSeriesArgs {
+	builder: UPlotConfigBuilder;
+	spec: DashboardtypesTimeSeriesPanelSpecDTO;
+	builderQueries: BuilderQuery[];
+	series: PanelSeries[];
+	isDarkMode: boolean;
+}
+
+/**
+ * Adds one uPlot series per flattened V5 series to the scaffolded builder.
+ * The visual resolution (line style, interpolation, fill mode, span gaps)
+ * reads from `spec.chartAppearance`; the label is resolved via the legend
+ * matrix in `resolveSeriesLabelV5`. Mutates the builder in place.
+ *
+ * Order must match `prepareAlignedData` — both iterate the same flat list.
+ */
+function addSeries({
+	builder,
+	spec,
+	builderQueries,
+	series,
+	isDarkMode,
+}: AddSeriesArgs): void {
+	const chartAppearance = spec.chartAppearance;
+	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
+	// a defined record (it dereferences keys without a guard).
+	const colorMapping = spec.legend?.customColors ?? {};
+	const spanGaps = resolveSpanGaps(chartAppearance?.spanGaps?.fillLessThan);
+
+	const lineStyle = chartAppearance?.lineStyle
+		? LINE_STYLE_MAP[chartAppearance.lineStyle]
+		: LineStyle.Solid;
+	const lineInterpolation = chartAppearance?.lineInterpolation
+		? LINE_INTERPOLATION_MAP[chartAppearance.lineInterpolation]
+		: LineInterpolation.Spline;
+	const fillMode = chartAppearance?.fillMode
+		? FILL_MODE_MAP[chartAppearance.fillMode]
+		: FillMode.None;
+
+	series.forEach((s) => {
+		const hasSingleValidPoint = hasSingleVisiblePoint(s.values);
+		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
+		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
+
+		builder.addSeries({
+			scaleKey: 'y',
+			// A single visible point can't be drawn as a line — degrade to points
+			// so the user still sees the datum (matches V1 behavior).
+			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
+			label,
+			colorMapping,
+			spanGaps,
+			lineStyle,
+			lineInterpolation,
+			showPoints: chartAppearance?.showPoints || hasSingleValidPoint,
+			pointSize: DEFAULT_POINT_SIZE,
+			fillMode,
+			isDarkMode,
+			metric: s.labels,
+		});
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/panel.module.scss

@@ -0,0 +1,9 @@
+.panelContainer {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	position: relative;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/registry.ts

@@ -0,0 +1,34 @@
+import { definition as BarChart } from './kinds/BarChartPanel/definition';
+import { definition as Histogram } from './kinds/HistogramPanel/definition';
+import { definition as NumberValue } from './kinds/NumberPanel/definition';
+import { definition as PieChart } from './kinds/PieChartPanel/definition';
+import { definition as TimeSeries } from './kinds/TimeSeriesPanel/definition';
+import type {
+	PanelRegistry,
+	RenderablePanelDefinition,
+} from './types/panelDefinition';
+import type { DashboardtypesPanelPluginKindDTO as PanelKind } from 'api/generated/services/sigNoz.schemas';
+
+// 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.
+export const PANELS: PanelRegistry = {
+	[TimeSeries.kind]: TimeSeries,
+	[BarChart.kind]: BarChart,
+	[Histogram.kind]: Histogram,
+	[NumberValue.kind]: NumberValue,
+	[PieChart.kind]: PieChart,
+};
+
+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;
+}