docs: add contributing guidelines for authz

* feat(dashboards-v2): add context-link variable + URL-param building blocks

Reusable primitives for the V2 context-link editor, kept separate from the
UI wiring:

- types: VariableItem / UrlParam / VariableSource
- utils: query-string <-> key/value param parsing, cursor-aware {{variable}}
  insertion, and URL validation (http(s)://, /path, or {{var}}/)
- VariablesPopover: autocomplete that lists {{variables}} grouped by source
  and inserts the picked token at the cursor
- useContextLinkVariables: self-contained hook sourcing the offered variables
  (global timestamps, per-query groupBy fields as _<key>, dashboard variables)
  from the query-builder provider + dashboard store, no prop threading

Covered by utils + hook unit tests.

* feat(dashboards-v2): rework context-link editor into a list + modal

The section is now a list of saved links (label + URL with edit/delete),
with add/edit handled in a modal (@signozhq/ui DialogWrapper) instead of the
cramped inline rows.

The modal carries V1's full authoring UX:
- label + URL with {{variable}} autocomplete and inline validation
- a key/value URL-parameters editor synced to the URL query string
- an "open in new tab" toggle; Save is gated on a non-empty, valid URL

Saved links set renderVariables so consumers interpolate the URL at
click-time. The variables popover renders with withPortal=false so it stays
inside the modal (radix's modal disables pointer events on portalled content).

* chore: pr review fixes

* refactor(dashboards-v2): split dashboard fetch into fetch-only hook + required accessor

- useDashboardFetch (renamed from useDashboardV2) now exposes only the raw
  dashboard plus fetch lifecycle; spec derivation moves out of it.
- Add useDashboardFetchRequired: reads the active dashboardId from the store,
  reuses the shared react-query cache entry, throws when the dashboard is
  missing, and derives spec collections (variables). Also exposes refetch.
- Enforce the split with a new signoz/no-dashboard-fetch-outside-root lint rule,
  allowlisted for the two root pages and the required hook.
- Point the context-link variables hook at useDashboardFetchRequired and expand
  the VariableSource JSDoc.

* chore: fixed fmt

docs/api/openapi.yml

@@ -2917,6 +2917,13 @@ components:
         publicDashboard:
           $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
       type: object
+    DashboardtypesGettablePublicDashboardDataV2:
+      properties:
+        dashboard:
+          $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+        publicDashboard:
+          $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
+      type: object
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -5224,6 +5231,16 @@ components:
       - offset
       - limit
       type: object
+    LlmpricingruletypesGettableUnmappedModels:
+      properties:
+        items:
+          items:
+            $ref: '#/components/schemas/LlmpricingruletypesUnmappedModel'
+          nullable: true
+          type: array
+      required:
+      - items
+      type: object
     LlmpricingruletypesLLMPricingCacheCosts:
       properties:
         mode:
@@ -5313,6 +5330,19 @@ components:
         type: string
       nullable: true
       type: array
+    LlmpricingruletypesUnmappedModel:
+      properties:
+        modelName:
+          type: string
+        provider:
+          type: string
+        spanCount:
+          minimum: 0
+          type: integer
+      required:
+      - modelName
+      - spanCount
+      type: object
     LlmpricingruletypesUpdatableLLMPricingRule:
       properties:
         enabled:
@@ -11190,6 +11220,60 @@ paths:
       summary: Get a pricing rule
       tags:
       - llmpricingrules
+  /api/v1/llm_pricing_rules/unmapped_models:
+    get:
+      deprecated: false
+      description: Returns models seen in the last hour of trace data (gen_ai.request.model)
+        that no pricing rule pattern matches, so the user can add them to an existing
+        rule or create a new one.
+      operationId: ListUnmappedLLMModels
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/LlmpricingruletypesGettableUnmappedModels'
+                  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
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List unmapped models
+      tags:
+      - llmpricingrules
   /api/v1/logs/promote_paths:
     get:
       deprecated: false
@@ -17441,6 +17525,138 @@ paths:
       summary: Update my organization
       tags:
       - orgs
+  /api/v2/public/dashboards/{id}:
+    get:
+      deprecated: false
+      description: This endpoint returns the sanitized v2-shape dashboard data for
+        public access. Each panel query is reduced to a safe field subset, so filters
+        and raw query strings are not exposed.
+      operationId: GetPublicDashboardDataV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettablePublicDashboardDataV2'
+                  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:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get public dashboard data (v2)
+      tags:
+      - dashboard
+  /api/v2/public/dashboards/{id}/panels/{key}/query_range:
+    get:
+      deprecated: false
+      description: This endpoint returns query range results for a panel of a v2-shape
+        public dashboard. The panel is addressed by its key in spec.panels.
+      operationId: GetPublicDashboardPanelQueryRangeV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: key
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
+                  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:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get query range result (v2)
+      tags:
+      - dashboard
   /api/v2/readyz:
     get:
       operationId: Readyz

docs/contributing/go/authz.md

@@ -0,0 +1,149 @@
+# Authz
+
+SigNoz uses [OpenFGA](https://openfga.dev/), a relationship-based access control (ReBAC) system, to authorize every request. Permissions are never attached to users directly — they are attached to **roles** (as relationship tuples in OpenFGA), and users or service accounts are made **assignees** of those roles. The central interface is `AuthZ` in [pkg/authz/authz.go](/pkg/authz/authz.go), backed by an embedded OpenFGA server in [pkg/authz/openfgaserver](/pkg/authz/openfgaserver/server.go).
+
+As a feature author, you will rarely touch OpenFGA directly. You interact with two layers:
+
+1. **The registries** in [pkg/types/coretypes](/pkg/types/coretypes) — where every resource, verb, and managed-role permission is declared in code.
+2. **The route wiring** in [pkg/apiserver/signozapiserver](/pkg/apiserver/signozapiserver) — where each route declares what resource it touches and which verb it needs, and the middleware turns that into a check.
+
+## What are the building blocks?
+
+### Type
+
+A `Type` is the coarse FGA type of a resource. The set is finite and defined in [pkg/types/coretypes/registry_type.go](/pkg/types/coretypes/registry_type.go): `user`, `serviceaccount`, `anonymous`, `role`, `organization`, `metaresource`, and `telemetryresource`. Each type carries a selector regex (what a valid ID looks like) and the verbs allowed on it.
+
+Almost every feature resource is a `metaresource` (dashboards, rules, pipelines, ...) or a `telemetryresource` (logs, traces, metrics). You should almost never need a new type.
+
+### Verb
+
+A `Verb` is the action being authorized. All verbs are defined in [pkg/types/coretypes/registry_verb.go](/pkg/types/coretypes/registry_verb.go): `create`, `read`, `update`, `delete`, `list`, `assignee`, `attach`, and `detach`.
+
+- `assignee` is special: it is the membership relation between a subject and a role ("user X is an assignee of role Y"), not an action a route checks for.
+- `attach`/`detach` authorize linking two resources together (e.g. assigning a role to a service account).
+
+### Kind
+
+A `Kind` is the fine-grained name of your resource — `dashboard`, `rule`, `quick-filter`. Kinds are registered in [pkg/types/coretypes/registry_kind.go](/pkg/types/coretypes/registry_kind.go). A kind rides on top of an existing type, so adding one does **not** require any OpenFGA schema change.
+
+### Resource
+
+A `Resource` ties a type and a kind together and knows how to render itself as an FGA object string. The interface lives in [pkg/types/coretypes/resource.go](/pkg/types/coretypes/resource.go):
+
+```go
+type Resource interface {
+    Type() Type
+    Kind() Kind
+    Prefix(orgId valuer.UUID) string      // metaresource:organization/<orgID>/dashboard
+    Object(orgId valuer.UUID, selector string) string
+    Scope(verb Verb) string               // dashboard:read
+    AllowedVerbs() []Verb
+}
+```
+
+All resources are registered in [pkg/types/coretypes/registry_resource.go](/pkg/types/coretypes/registry_resource.go) using constructors like `NewResourceMetaResource(KindDashboard)` or `NewResourceTelemetryResource(KindLogs)`.
+
+### Selector
+
+A `Selector` identifies *which* instance(s) of a resource a check is about — a UUID, a role name, or the wildcard `*`. A `SelectorFunc` maps the extracted resource ID to selectors at request time. Two prebuilt ones cover most routes ([pkg/types/coretypes/selector.go](/pkg/types/coretypes/selector.go)):
+
+- `WildcardSelector` — the check is against all instances of the resource (`create`, `list`).
+- `IDSelector` — the check is against the specific instance *or* the wildcard (`read`, `update`, `delete` of one object). A subject authorized on `*` is authorized on every instance.
+
+When the ID in the request is not what FGA needs (e.g. routes receive a role UUID but FGA objects use role names), write a custom `SelectorFunc` — see `roleSelector` in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+
+### Roles, transactions, and tuples
+
+SigNoz ships four managed roles, declared in [pkg/types/coretypes/registry_managed_role.go](/pkg/types/coretypes/registry_managed_role.go): `signoz-admin`, `signoz-editor`, `signoz-viewer`, and `signoz-anonymous`. Their permissions are declared in code as `Transaction`s (a verb on an object) in `ManagedRoleToTransactions` — this map is the single source of truth for what each managed role can do.
+
+At organization bootstrap, `CreateManagedRoles` and `CreateManagedUserRoleTransactions` (see [pkg/authz/authz.go](/pkg/authz/authz.go)) persist the role rows and write one OpenFGA tuple per transaction, linking `role:organization/<orgID>/role/<name>#assignee` to each permitted object. Users and service accounts are then granted roles via `Grant`/`Revoke`, which writes `assignee` tuples. Custom roles (enterprise) are managed through the roles API in [pkg/authz/signozauthzapi/handler.go](/pkg/authz/signozauthzapi/handler.go).
+
+### Schema
+
+The OpenFGA authorization model is a hand-written DSL, embedded at build time: [pkg/authz/openfgaschema/base.fga](/pkg/authz/openfgaschema/base.fga) for community and [ee/authz/openfgaschema/base.fga](/ee/authz/openfgaschema/base.fga) for enterprise. The community model only supports role assignment; the enterprise model defines per-verb relations on every type, enabling genuine per-resource checks. This split is why `CheckWithTupleCreation` behaves differently per edition (see [How does a check work at runtime?](#how-does-a-check-work-at-runtime)). You only touch these files when introducing a brand-new **type** — never for a new kind.
+
+## How do I add authz to my feature?
+
+### 1. Register the kind
+
+Add your kind in [pkg/types/coretypes/registry_kind.go](/pkg/types/coretypes/registry_kind.go) and append it to `Kinds`:
+
+```go
+KindThing = MustNewKind("thing")
+```
+
+### 2. Register the resource
+
+Add the resource in [pkg/types/coretypes/registry_resource.go](/pkg/types/coretypes/registry_resource.go) and append it to `Resources`:
+
+```go
+ResourceMetaResourceThing = NewResourceMetaResource(KindThing)
+```
+
+Pass an explicit verb list to `NewResourceMetaResource` only if your resource supports fewer verbs than the type default.
+
+### 3. Grant permissions to managed roles
+
+Decide what each managed role can do with your resource and add the transactions in [pkg/types/coretypes/registry_managed_role.go](/pkg/types/coretypes/registry_managed_role.go):
+
+```go
+// thing — editors manage, viewers read
+{Verb: VerbCreate, Object: *MustNewObject(ResourceRef{Type: TypeMetaResource, Kind: KindThing}, WildCardSelectorString)},
+```
+
+The convention so far: admin gets everything, editor gets CRUD on day-to-day observability resources, viewer gets `read`/`list`, anonymous gets nothing (except public dashboards).
+
+### 4. Wire the route
+
+Register the route in [pkg/apiserver/signozapiserver](/pkg/apiserver/signozapiserver), wrapping your handler with `CheckResources` and declaring what the route touches via a `ResourceDef` ([pkg/http/handler/resourcedef.go](/pkg/http/handler/resourcedef.go)). A complete example from [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go):
+
+```go
+router.Handle("/api/v1/service_accounts", handler.New(
+    provider.authzMiddleware.CheckResources(provider.serviceAccountHandler.Create, authtypes.SigNozAdminRoleName),
+    handler.OpenAPIDef{
+        ID: "CreateServiceAccount",
+        // ...
+        SecuritySchemes: newScopedSecuritySchemes([]string{coretypes.ResourceServiceAccount.Scope(coretypes.VerbCreate)}),
+    },
+    handler.WithResourceDefs(handler.BasicResourceDef{
+        Resource: coretypes.ResourceServiceAccount,
+        Verb:     coretypes.VerbCreate,
+        Category: coretypes.ActionCategoryAccessControl,
+        ID:       coretypes.ResponseJSONPath("data.id"),
+        Selector: coretypes.WildcardSelector,
+    }),
+)).Methods(http.MethodPost)
+```
+
+The pieces:
+
+- **`CheckResources(handlerFn, roles...)`** — the resource-aware authorization wrapper from [pkg/http/middleware/authz.go](/pkg/http/middleware/authz.go). The role list is the community-edition fallback: which managed roles may call this route when per-resource checks are unavailable.
+- **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
+- **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
+
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role) or `AttachDetachParentChildResourceDef` (only the parent is checked; the child is recorded for audit, e.g. creating an API key under a service account).
+
+Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
+
+### 5. Backfill existing organizations (only if needed)
+
+Managed-role tuples are written from the registry at organization creation, so **new resources need no migration for new organizations**. If existing organizations must get the new permissions, add a migration in [pkg/sqlmigration](/pkg/sqlmigration) that inserts the tuples — see [083_add_role_crud_tuples.go](/pkg/sqlmigration/083_add_role_crud_tuples.go) for the pattern.
+
+## How does a check work at runtime?
+
+1. The resource middleware ([pkg/http/middleware/resource.go](/pkg/http/middleware/resource.go)) runs on every request. It reads the matched handler's `ResourceDef`s, extracts the resource IDs from path/body, and stores the resolved resources in the request context.
+2. `CheckResources` reads them back, runs each `SelectorFunc`, and calls `AuthZ.CheckWithTupleCreation(ctx, claims, orgID, relation, resource, selectors, roleSelectors)`.
+3. What happens next depends on the edition:
+   - **Community** ([pkg/authz/openfgaserver/server.go](/pkg/authz/openfgaserver/server.go)) ignores the resource and selectors and only checks whether the subject is an `assignee` of one of the allowed roles — a plain role gate.
+   - **Enterprise** ([ee/authz/openfgaserver/server.go](/ee/authz/openfgaserver/server.go)) builds tuples via `authtypes.NewTuples` — subject `user:organization/<orgID>/user/<userID>`, relation `create`, object `serviceaccount:organization/<orgID>/serviceaccount/*` — and batch-checks them against OpenFGA: genuine per-resource authorization, including custom roles.
+
+Because both paths go through the same middleware and the same `ResourceDef` declarations, a route wired once works correctly in both editions.
+
+## What should I remember?
+
+- Declare authz in the registries ([pkg/types/coretypes](/pkg/types/coretypes)), not in migrations — tuples for new organizations are derived from code at bootstrap.
+- A new kind never needs an OpenFGA schema change; only a new type does, and then **both** [pkg/authz/openfgaschema/base.fga](/pkg/authz/openfgaschema/base.fga) and [ee/authz/openfgaschema/base.fga](/ee/authz/openfgaschema/base.fga) must be updated together.
+- Prefer `CheckResources` + `ResourceDef` over the coarse `ViewAccess`/`EditAccess`/`AdminAccess` gates for new routes.
+- Use `WildcardSelector` for `create`/`list`, `IDSelector` for instance operations, and a custom `SelectorFunc` when the request ID is not the FGA selector.
+- Attach/detach routes between peer resources must check **both** sides (`AttachDetachSiblingResourceDef`); parent-child creation checks only the parent (`AttachDetachParentChildResourceDef`).
+- Changing `ManagedRoleToTransactions` only affects organizations created afterwards — add a [pkg/sqlmigration](/pkg/sqlmigration) migration to backfill existing ones.

docs/contributing/go/readme.md

@@ -11,6 +11,7 @@ We adhere to three primary style guides as our foundation:
 We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development. In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package:
 
 - [Abstractions](abstractions.md) - When to introduce new types and intermediate representations
+- [Authz](authz.md) - Authorization, roles, and access control
 - [Errors](errors.md) - Structured error handling
 - [Endpoint](endpoint.md) - HTTP endpoint patterns
 - [Flagger](flagger.md) - Feature flag patterns

ee/modules/dashboard/impldashboard/module.go

@@ -29,6 +29,7 @@ type module struct {
 	settings           factory.ScopedProviderSettings
 	querier            querier.Querier
 	licensing          licensing.Licensing
+	tagModule          tag.Module
 }
 
 func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing, tagModule tag.Module) dashboard.Module {
@@ -41,6 +42,7 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		settings:           scopedProviderSettings,
 		querier:            querier,
 		licensing:          licensing,
+		tagModule:          tagModule,
 	}
 }
 
@@ -132,6 +134,55 @@ func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.U
 	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
 }
 
+func (module *module) GetDashboardByPublicIDV2(ctx context.Context, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
+	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
+	if err != nil {
+		return nil, err
+	}
+
+	tags, err := module.tagModule.ListForResource(ctx, storableDashboard.OrgID, coretypes.KindDashboard, storableDashboard.ID)
+	if err != nil {
+		return nil, err
+	}
+
+	return storableDashboard.ToDashboardV2(tags)
+}
+
+func (module *module) GetPublicWidgetQueryRangeV2(ctx context.Context, id valuer.UUID, panelKey, startTimeRaw, endTimeRaw string) (*querybuildertypesv5.QueryRangeResponse, error) {
+	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
+		instrumentationtypes.CodeNamespace:    "dashboard",
+		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRangeV2",
+	})
+
+	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
+	if err != nil {
+		return nil, err
+	}
+
+	// tags are not needed for query range.
+	dashboard, err := storableDashboard.ToDashboardV2(nil)
+	if err != nil {
+		return nil, err
+	}
+
+	publicDashboard, err := module.GetPublic(ctx, dashboard.OrgID, dashboard.ID)
+	if err != nil {
+		return nil, err
+	}
+
+	startTime, endTime, err := publicDashboard.ResolveTimeRange(startTimeRaw, endTimeRaw)
+	if err != nil {
+		return nil, err
+	}
+
+	query, err := dashboard.GetPanelQuery(startTime, endTime, panelKey)
+	if err != nil {
+		return nil, err
+	}
+
+	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
+}
+
 func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publicDashboard *dashboardtypes.PublicDashboard) error {
 	_, err := module.licensing.GetActive(ctx, orgID)
 	if err != nil {

frontend/.oxlintrc.json

@@ -293,6 +293,8 @@
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
     "signoz/no-css-module-bracket-access": "warn",
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
+    "signoz/no-dashboard-fetch-outside-root": "error",
+    // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -558,6 +560,18 @@
       "rules": {
         "signoz/no-zustand-getstate-in-hooks": "off"
       }
+    },
+    {
+      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
+      // Everywhere else must use useDashboardFetchRequired().
+      "files": [
+        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
+        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
+        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
+      ],
+      "rules": {
+        "signoz/no-dashboard-fetch-outside-root": "off"
+      }
     }
   ]
 }

frontend/__mocks__/lib/env.ts

@@ -1,3 +0,0 @@
-export const IS_DEV = false;
-export const IS_PROD = true;
-export const MODE = 'test';

frontend/jest.config.ts

@@ -29,7 +29,6 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
-		'^lib/env$': '<rootDir>/__mocks__/lib/env.ts',
 		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',

frontend/plugins/rules/no-dashboard-fetch-outside-root.mjs

@@ -0,0 +1,48 @@
+/**
+ * Rule: no-dashboard-fetch-outside-root
+ *
+ * `useDashboardFetch` owns the V2 dashboard fetch and exposes its loading/error/refetch
+ * lifecycle. That lifecycle is a root-page concern: DashboardPageV2 and PanelEditorPage
+ * gate their subtree on a resolved dashboard before mounting anything below them.
+ *
+ * Every other component therefore renders inside an already-loaded subtree and must use
+ * `useDashboardFetchRequired`, which reuses the same react-query cache entry but guarantees
+ * a non-undefined dashboard (throwing otherwise) — so consumers don't re-handle states the
+ * root page already owns.
+ *
+ * This rule flags `useDashboardFetch` imports. It is disabled via an override in
+ * .oxlintrc.json for the two root pages and for useDashboardFetchRequired.ts (which wraps it).
+ */
+
+const FETCH_HOOK = 'useDashboardFetch';
+
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow useDashboardFetch outside the root dashboard pages; use useDashboardFetchRequired instead',
+			category: 'Dashboard V2',
+		},
+		schema: [],
+		messages: {
+			useRequired:
+				'Use useDashboardFetchRequired() instead of useDashboardFetch — the latter is reserved for the root pages (DashboardPageV2, PanelEditorPage) that own the fetch lifecycle. Components below them render inside a loaded subtree and should assume a guaranteed dashboard.',
+		},
+	},
+
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				node.specifiers.forEach((specifier) => {
+					if (
+						specifier.type === 'ImportSpecifier' &&
+						specifier.imported.name === FETCH_HOOK
+					) {
+						context.report({ node: specifier, messageId: 'useRequired' });
+					}
+				});
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -12,6 +12,7 @@ import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
+import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 
 export default {
 	meta: {
@@ -25,5 +26,6 @@ export default {
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
+		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 	},
 };

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

@@ -38,6 +38,10 @@ import type {
 	GetPublicDashboard200,
 	GetPublicDashboardData200,
 	GetPublicDashboardDataPathParameters,
+	GetPublicDashboardDataV2200,
+	GetPublicDashboardDataV2PathParameters,
+	GetPublicDashboardPanelQueryRangeV2200,
+	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
@@ -1799,6 +1803,217 @@ export const useLockDashboardV2 = <
 > => {
 	return useMutation(getLockDashboardV2MutationOptions(options));
 };
+/**
+ * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
+ * @summary Get public dashboard data (v2)
+ */
+export const getPublicDashboardDataV2 = (
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardDataV2200>({
+		url: `/api/v2/public/dashboards/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardDataV2QueryKey = ({
+	id,
+}: GetPublicDashboardDataV2PathParameters) => {
+	return [`/api/v2/public/dashboards/${id}`] as const;
+};
+
+export const getGetPublicDashboardDataV2QueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetPublicDashboardDataV2QueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardDataV2>>
+	> = ({ signal }) => getPublicDashboardDataV2({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardDataV2QueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardDataV2>>
+>;
+export type GetPublicDashboardDataV2QueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get public dashboard data (v2)
+ */
+
+export function useGetPublicDashboardDataV2<
+	TData = Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardDataV2QueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get public dashboard data (v2)
+ */
+export const invalidateGetPublicDashboardDataV2 = async (
+	queryClient: QueryClient,
+	{ id }: GetPublicDashboardDataV2PathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardDataV2QueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint returns query range results for a panel of a v2-shape public dashboard. The panel is addressed by its key in spec.panels.
+ * @summary Get query range result (v2)
+ */
+export const getPublicDashboardPanelQueryRangeV2 = (
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
+		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardPanelQueryRangeV2QueryKey = ({
+	id,
+	key,
+}: GetPublicDashboardPanelQueryRangeV2PathParameters) => {
+	return [`/api/v2/public/dashboards/${id}/panels/${key}/query_range`] as const;
+};
+
+export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
+	> = ({ signal }) => getPublicDashboardPanelQueryRangeV2({ id, key }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!(id && key),
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardPanelQueryRangeV2QueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
+>;
+export type GetPublicDashboardPanelQueryRangeV2QueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get query range result (v2)
+ */
+
+export function useGetPublicDashboardPanelQueryRangeV2<
+	TData = Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardPanelQueryRangeV2QueryOptions(
+		{ id, key },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get query range result (v2)
+ */
+export const invalidateGetPublicDashboardPanelQueryRangeV2 = async (
+	queryClient: QueryClient,
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * Same as ListDashboardsV2 but personalized for the calling user: each dashboard carries the caller's `pinned` state, and pinned dashboards float to the top of the requested ordering. Supports the same filter DSL, sort, order, and pagination.
  * @summary List dashboards for the current user (v2)

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

@@ -23,6 +23,7 @@ import type {
 	GetLLMPricingRulePathParameters,
 	ListLLMPricingRules200,
 	ListLLMPricingRulesParams,
+	ListUnmappedLLMModels200,
 	LlmpricingruletypesUpdatableLLMPricingRulesDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -393,3 +394,87 @@ export const invalidateGetLLMPricingRule = async (
 
 	return queryClient;
 };
+
+/**
+ * Returns models seen in the last hour of trace data (gen_ai.request.model) that no pricing rule pattern matches, so the user can add them to an existing rule or create a new one.
+ * @summary List unmapped models
+ */
+export const listUnmappedLLMModels = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListUnmappedLLMModels200>({
+		url: `/api/v1/llm_pricing_rules/unmapped_models`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListUnmappedLLMModelsQueryKey = () => {
+	return [`/api/v1/llm_pricing_rules/unmapped_models`] as const;
+};
+
+export const getListUnmappedLLMModelsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListUnmappedLLMModelsQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>
+	> = ({ signal }) => listUnmappedLLMModels(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListUnmappedLLMModelsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listUnmappedLLMModels>>
+>;
+export type ListUnmappedLLMModelsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List unmapped models
+ */
+
+export function useListUnmappedLLMModels<
+	TData = Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listUnmappedLLMModels>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListUnmappedLLMModelsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List unmapped models
+ */
+export const invalidateListUnmappedLLMModels = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListUnmappedLLMModelsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -4941,6 +4941,11 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
+export interface DashboardtypesGettablePublicDashboardDataV2DTO {
+	dashboard?: DashboardtypesGettableDashboardV2DTO;
+	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
+}
+
 export enum DashboardtypesPatchOpDTO {
 	add = 'add',
 	remove = 'remove',
@@ -6818,6 +6823,29 @@ export interface LlmpricingruletypesGettablePricingRulesDTO {
 	total: number;
 }
 
+export interface LlmpricingruletypesUnmappedModelDTO {
+	/**
+	 * @type string
+	 */
+	modelName: string;
+	/**
+	 * @type string
+	 */
+	provider?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	spanCount: number;
+}
+
+export interface LlmpricingruletypesGettableUnmappedModelsDTO {
+	/**
+	 * @type array,null
+	 */
+	items: LlmpricingruletypesUnmappedModelDTO[] | null;
+}
+
 export interface LlmpricingruletypesUpdatableLLMPricingRuleDTO {
 	/**
 	 * @type boolean
@@ -10168,6 +10196,14 @@ export type GetLLMPricingRule200 = {
 	status: string;
 };
 
+export type ListUnmappedLLMModels200 = {
+	data: LlmpricingruletypesGettableUnmappedModelsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListPromotedAndIndexedPaths200 = {
 	/**
 	 * @type array,null
@@ -11161,6 +11197,29 @@ export type GetMyOrganization200 = {
 	status: string;
 };
 
+export type GetPublicDashboardDataV2PathParameters = {
+	id: string;
+};
+export type GetPublicDashboardDataV2200 = {
+	data: DashboardtypesGettablePublicDashboardDataV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetPublicDashboardPanelQueryRangeV2PathParameters = {
+	id: string;
+	key: string;
+};
+export type GetPublicDashboardPanelQueryRangeV2200 = {
+	data: Querybuildertypesv5QueryRangeResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type Readyz200 = {
 	data: FactoryResponseDTO;
 	/**

frontend/src/components/ExplorerCard/constants.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 
 export const ExploreHeaderToolTip = {
-	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };
 

frontend/src/components/Graph/utils.ts

@@ -1,5 +1,14 @@
 import { MutableRefObject } from 'react';
-import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
+import {
+	ActiveElement,
+	Chart,
+	ChartConfiguration,
+	ChartData,
+	ChartEvent,
+	ChartType,
+	Color,
+	TooltipItem,
+} from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -60,184 +69,189 @@ export const getGraphOptions = (
 	minTime?: number,
 	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-): CustomChartOptions => ({
-	animation: {
-		duration: animate ? 200 : 0,
-	},
-	responsive: true,
-	maintainAspectRatio: false,
-	interaction: {
-		mode: 'index',
-		intersect: true,
-	},
-	plugins: {
-		...(staticLine
-			? {
-					annotation: {
-						annotations: [
-							{
-								type: 'line',
-								yMin: staticLine.yMin,
-								yMax: staticLine.yMax,
-								borderColor: staticLine.borderColor,
-								borderWidth: staticLine.borderWidth,
-								label: {
-									content: staticLine.lineText,
-									enabled: true,
-									font: {
-										size: 10,
+): CustomChartOptions =>
+	({
+		animation: {
+			duration: animate ? 200 : 0,
+		},
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: 'index',
+			intersect: true,
+		},
+		plugins: {
+			...(staticLine
+				? {
+						annotation: {
+							annotations: [
+								{
+									type: 'line',
+									yMin: staticLine.yMin,
+									yMax: staticLine.yMax,
+									borderColor: staticLine.borderColor,
+									borderWidth: staticLine.borderWidth,
+									label: {
+										content: staticLine.lineText,
+										enabled: true,
+										font: {
+											size: 10,
+										},
+										borderWidth: 0,
+										position: 'start',
+										backgroundColor: 'transparent',
+										color: staticLine.textColor,
 									},
-									borderWidth: 0,
-									position: 'start',
-									backgroundColor: 'transparent',
-									color: staticLine.textColor,
 								},
-							},
-						],
+							],
+						},
+					}
+				: {}),
+			title: {
+				display: title !== undefined,
+				text: title,
+			},
+			legend: {
+				display: false,
+			},
+			tooltip: {
+				callbacks: {
+					title(context: TooltipItem<'line'>[]): string | string[] {
+						const date = dayjs(context[0].parsed.x);
+						return date
+							.tz(timezone.value)
+							.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+					},
+					label(context: TooltipItem<'line'>): string | string[] {
+						let label = context.dataset.label || '';
+
+						if (label) {
+							label += ': ';
+						}
+						if (context.parsed.y !== null) {
+							label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
+						}
+
+						return label;
+					},
+					labelTextColor(labelData: TooltipItem<'line'>): Color {
+						if (labelData.datasetIndex === nearestDatasetIndex.current) {
+							return 'rgba(255, 255, 255, 1)';
+						}
+
+						return 'rgba(255, 255, 255, 0.75)';
 					},
-				}
-			: {}),
-		title: {
-			display: title !== undefined,
-			text: title,
-		},
-		legend: {
-			display: false,
-		},
-		tooltip: {
-			callbacks: {
-				title(context): string | string[] {
-					const date = dayjs(context[0].parsed.x);
-					return date
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
 				},
-				label(context): string | string[] {
-					let label = context.dataset.label || '';
-
-					if (label) {
-						label += ': ';
-					}
-					if (context.parsed.y !== null) {
-						label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
-					}
-
-					return label;
-				},
-				labelTextColor(labelData): Color {
-					if (labelData.datasetIndex === nearestDatasetIndex.current) {
-						return 'rgba(255, 255, 255, 1)';
-					}
-
-					return 'rgba(255, 255, 255, 0.75)';
+				position: 'custom',
+				itemSort(item1: TooltipItem<'line'>, item2: TooltipItem<'line'>): number {
+					return item2.parsed.y - item1.parsed.y;
 				},
 			},
-			position: 'custom',
-			itemSort(item1, item2): number {
-				return item2.parsed.y - item1.parsed.y;
-			},
+			[dragSelectPluginId]: createDragSelectPluginOptions(
+				!!onDragSelect,
+				onDragSelect,
+				dragSelectColor,
+			),
+			[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
+				!!onDragSelect,
+				currentTheme === 'dark' ? 'white' : 'black',
+			),
 		},
-		[dragSelectPluginId]: createDragSelectPluginOptions(
-			!!onDragSelect,
-			onDragSelect,
-			dragSelectColor,
-		),
-		[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-			!!onDragSelect,
-			currentTheme === 'dark' ? 'white' : 'black',
-		),
-	},
-	layout: {
-		padding: 0,
-	},
-	scales: {
-		x: {
-			stacked: isStacked,
-			offset: false,
-			grid: {
+		layout: {
+			padding: 0,
+		},
+		scales: {
+			x: {
+				stacked: isStacked,
+				offset: false,
+				grid: {
+					display: true,
+					color: getGridColor(),
+					drawTicks: true,
+				},
+				adapters: {
+					date: chartjsAdapter,
+				},
+				time: {
+					unit: xAxisTimeUnit?.unitName || 'minute',
+					stepSize: xAxisTimeUnit?.stepSize || 1,
+					displayFormats: {
+						millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
+						second: DATE_TIME_FORMATS.TIME_SECONDS,
+						minute: DATE_TIME_FORMATS.TIME,
+						hour: DATE_TIME_FORMATS.SLASH_SHORT,
+						day: DATE_TIME_FORMATS.DATE_SHORT,
+						week: DATE_TIME_FORMATS.DATE_SHORT,
+						month: DATE_TIME_FORMATS.YEAR_MONTH,
+						year: DATE_TIME_FORMATS.YEAR_SHORT,
+					},
+				},
+				type: 'time',
+				ticks: { color: getAxisLabelColor(currentTheme) },
+				...(minTime && {
+					min: dayjs(minTime).tz(timezone.value).format(),
+				}),
+				...(maxTime && {
+					max: dayjs(maxTime).tz(timezone.value).format(),
+				}),
+			},
+			y: {
+				stacked: isStacked,
 				display: true,
-				color: getGridColor(),
-				drawTicks: true,
-			},
-			adapters: {
-				date: chartjsAdapter,
-			},
-			time: {
-				unit: xAxisTimeUnit?.unitName || 'minute',
-				stepSize: xAxisTimeUnit?.stepSize || 1,
-				displayFormats: {
-					millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
-					second: DATE_TIME_FORMATS.TIME_SECONDS,
-					minute: DATE_TIME_FORMATS.TIME,
-					hour: DATE_TIME_FORMATS.SLASH_SHORT,
-					day: DATE_TIME_FORMATS.DATE_SHORT,
-					week: DATE_TIME_FORMATS.DATE_SHORT,
-					month: DATE_TIME_FORMATS.YEAR_MONTH,
-					year: DATE_TIME_FORMATS.YEAR_SHORT,
+				grid: {
+					display: true,
+					color: getGridColor(),
 				},
-			},
-			type: 'time',
-			ticks: { color: getAxisLabelColor(currentTheme) },
-			...(minTime && {
-				min: dayjs(minTime).tz(timezone.value).format(),
-			}),
-			...(maxTime && {
-				max: dayjs(maxTime).tz(timezone.value).format(),
-			}),
-		},
-		y: {
-			stacked: isStacked,
-			display: true,
-			grid: {
-				display: true,
-				color: getGridColor(),
-			},
-			ticks: {
-				color: getAxisLabelColor(currentTheme),
-				// Include a dollar sign in the ticks
-				callback(value): string {
-					return getYAxisFormattedValue(value.toString(), yAxisUnit);
+				ticks: {
+					color: getAxisLabelColor(currentTheme),
+					// Include a dollar sign in the ticks
+					callback(value: number | string): string {
+						return getYAxisFormattedValue(value.toString(), yAxisUnit);
+					},
 				},
 			},
 		},
-	},
-	elements: {
-		line: {
-			tension: 0,
-			cubicInterpolationMode: 'monotone',
-		},
-		point: {
-			hoverBackgroundColor: (ctx: any): string => {
-				if (ctx?.element?.options?.borderColor) {
-					return ctx.element.options.borderColor;
-				}
-				return 'rgba(0,0,0,0.1)';
+		elements: {
+			line: {
+				tension: 0,
+				cubicInterpolationMode: 'monotone',
 			},
-			hoverRadius: 5,
-		},
-	},
-	onClick: (event, element, chart): void => {
-		if (onClickHandler) {
-			onClickHandler(event, element, chart, data);
-		}
-	},
-	onHover: (event, _, chart): void => {
-		if (event.native) {
-			const interactions = chart.getElementsAtEventForMode(
-				event.native,
-				'nearest',
-				{
-					intersect: false,
+			point: {
+				hoverBackgroundColor: (ctx: any): string => {
+					if (ctx?.element?.options?.borderColor) {
+						return ctx.element.options.borderColor;
+					}
+					return 'rgba(0,0,0,0.1)';
 				},
-				true,
-			);
-
-			if (interactions[0]) {
-				nearestDatasetIndex.current = interactions[0].datasetIndex;
+				hoverRadius: 5,
+			},
+		},
+		onClick: (
+			event: ChartEvent,
+			element: ActiveElement[],
+			chart: Chart,
+		): void => {
+			if (onClickHandler) {
+				onClickHandler(event, element, chart, data);
 			}
-		}
-	},
-});
+		},
+		onHover: (event: ChartEvent, _: ActiveElement[], chart: Chart): void => {
+			if (event.native) {
+				const interactions = chart.getElementsAtEventForMode(
+					event.native,
+					'nearest',
+					{
+						intersect: false,
+					},
+					true,
+				);
+
+				if (interactions[0]) {
+					nearestDatasetIndex.current = interactions[0].datasetIndex;
+				}
+			}
+		},
+	}) as CustomChartOptions;
 
 declare module 'chart.js' {
 	interface TooltipPositionerMap {

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -131,7 +131,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 												Set the time interval for aggregation
 												<br />
 												<a
-													href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
+													href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
 													target="_blank"
 													rel="noopener noreferrer"
 													style={{ color: '#1890ff', textDecoration: 'underline' }}
@@ -254,7 +254,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										Set the time interval for aggregation
 										<br />
 										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
+											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
 											target="_blank"
 											rel="noopener noreferrer"
 											style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -52,7 +52,7 @@ const ADD_ONS = [
 		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
-		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
+		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -61,7 +61,7 @@ const ADD_ONS = [
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having',
+			'https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -70,7 +70,7 @@ const ADD_ONS = [
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
+			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -79,7 +79,7 @@ const ADD_ONS = [
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
+			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -88,7 +88,7 @@ const ADD_ONS = [
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#legend-formatting',
+			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
 	},
 ];
 
@@ -99,7 +99,7 @@ const REDUCE_TO = {
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
-		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
+		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
 };
 
 const hasValue = (value: unknown): boolean =>
@@ -349,7 +349,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Group By"
 											description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#grouping"
+											docLink="https://signoz.io/docs/querying/aggregation-grouping/#grouping"
 										/>
 									}
 									placement="top"
@@ -385,7 +385,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Having"
 											description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having"
+											docLink="https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having"
 										/>
 									}
 									placement="top"
@@ -434,7 +434,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Order By"
 											description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting"
+											docLink="https://signoz.io/docs/querying/result-manipulation/#sorting--limiting"
 										/>
 									}
 									placement="top"
@@ -473,7 +473,7 @@ function QueryAddOns({
 											<TooltipContent
 												label="Reduce to"
 												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation"
 											/>
 										}
 										placement="top"

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -65,7 +65,7 @@ function QueryAggregationOptions({
 									Set the time interval for aggregation
 									<br />
 									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
 										target="_blank"
 										rel="noopener noreferrer"
 										style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -676,7 +676,7 @@ function QueryAggregationSelect({
 						</span>
 						<br />
 						<a
-							href="https://signoz.io/docs/userguide/query-builder-v5/#core-aggregation-functions"
+							href="https://signoz.io/docs/querying/aggregation-grouping/#core-aggregation-functions-logs--traces"
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -44,7 +44,7 @@ function TraceOperatorSection({
 					<div style={{ textAlign: 'center' }}>
 						Add Trace Matching
 						<Typography.Link
-							href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
+							href="https://signoz.io/docs/querying/multi-query-analysis/#trace-matching"
 							target="_blank"
 							style={{ textDecoration: 'underline' }}
 						>
@@ -106,7 +106,7 @@ export default function QueryFooter({
 								<div style={{ textAlign: 'center' }}>
 									Add New Formula
 									<Typography.Link
-										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
+										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
 										target="_blank"
 										style={{ textDecoration: 'underline' }}
 									>

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -22,7 +22,6 @@ import {
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { IS_DEV } from 'lib/env';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
@@ -31,33 +30,6 @@ import { useCmdK } from '../../providers/cmdKProvider';
 
 import './cmdKPalette.scss';
 
-const AuthZDevModal = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevModal/AuthZDevModal').then((m) => ({
-				default: m.AuthZDevModal,
-			})),
-		)
-	: null;
-
-const AuthZDevFloatingIndicator = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator').then(
-				(m) => ({
-					default: m.AuthZDevFloatingIndicator,
-				}),
-			),
-		)
-	: null;
-
-const openAuthZDevModal = IS_DEV
-	? (): void => {
-			void import('lib/authz/devtools/useAuthZDevStore').then((m) => {
-				m.openAuthZDevModal();
-				return m;
-			});
-		}
-	: undefined;
-
 type CmdAction = {
 	id: string;
 	name: string;
@@ -138,7 +110,6 @@ export function CmdKPalette({
 		aiAssistant: isAIAssistantEnabled
 			? { open: handleOpenAIAssistant }
 			: undefined,
-		authzDevTools: openAuthZDevModal ? { open: openAuthZDevModal } : undefined,
 	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
@@ -175,57 +146,37 @@ export function CmdKPalette({
 	};
 
 	return (
-		<>
-			<CommandDialog
-				open={open}
-				onOpenChange={setOpen}
-				position="top"
-				offset={110}
-			>
-				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
-				<CommandList className="cmdk-list-scroll">
-					<CommandEmpty>No results</CommandEmpty>
-					{grouped.map(([section, items]) => (
-						<CommandGroup
-							key={section}
-							heading={section}
-							className="cmdk-section-heading"
-						>
-							{items.map((it) => (
-								<CommandItem
-									key={it.id}
-									onSelect={(): void => handleInvoke(it)}
-									value={it.name}
-									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
+			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+			<CommandList className="cmdk-list-scroll">
+				<CommandEmpty>No results</CommandEmpty>
+				{grouped.map(([section, items]) => (
+					<CommandGroup
+						key={section}
+						heading={section}
+						className="cmdk-section-heading"
+					>
+						{items.map((it) => (
+							<CommandItem
+								key={it.id}
+								onSelect={(): void => handleInvoke(it)}
+								value={it.name}
+								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+							>
+								<span
+									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
 								>
-									<span
-										className={cx(
-											'cmd-item-icon',
-											it.id === 'ai-assistant' && 'noz-icon',
-										)}
-									>
-										{it.icon}
-									</span>
-									{it.name}
-									{it.shortcut && it.shortcut.length > 0 && (
-										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-									)}
-								</CommandItem>
-							))}
-						</CommandGroup>
-					))}
-				</CommandList>
-			</CommandDialog>
-			{IS_DEV && AuthZDevModal && (
-				<React.Suspense fallback={null}>
-					<AuthZDevModal />
-				</React.Suspense>
-			)}
-			{IS_DEV && AuthZDevFloatingIndicator && (
-				<React.Suspense fallback={null}>
-					<AuthZDevFloatingIndicator />
-				</React.Suspense>
-			)}
-		</>
+									{it.icon}
+								</span>
+								{it.name}
+								{it.shortcut && it.shortcut.length > 0 && (
+									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+								)}
+							</CommandItem>
+						))}
+					</CommandGroup>
+				))}
+			</CommandList>
+		</CommandDialog>
 	);
 }

frontend/src/constants/apDex.ts

@@ -1,5 +1,5 @@
 export const apDexToolTipText =
 	"Apdex is a way to measure your users' satisfaction with the response time of your web service. It's represented as a score from 0-1.";
 export const apDexToolTipUrl =
-	'https://signoz.io/docs/userguide/metrics/#apdex?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
+	'https://signoz.io/docs/alerts-management/apdex-alerts/?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
 export const apDexToolTipUrlText = 'Learn more about Apdex.';

frontend/src/constants/shortcutActions.tsx

@@ -43,17 +43,10 @@ type ActionDeps = {
 	aiAssistant?: {
 		open: () => void;
 	};
-	/**
-	 * Provided only in development mode. Opens the AuthZ DevTools modal
-	 * for testing permission overrides.
-	 */
-	authzDevTools?: {
-		open: () => void;
-	};
 };
 
 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
+	const { navigate, handleThemeChange, aiAssistant } = deps;
 
 	const actions: CmdAction[] = [
 		{
@@ -309,17 +302,5 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 		});
 	}
 
-	if (authzDevTools) {
-		actions.push({
-			id: 'authz-devtools',
-			name: 'AuthZ DevTools',
-			keywords: 'authz permissions rbac debug devtools override testing',
-			section: 'Dev',
-			icon: <Settings size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
-			perform: authzDevTools.open,
-		});
-	}
-
 	return actions;
 }

frontend/src/container/AllAlertChannels/index.tsx

@@ -68,7 +68,7 @@ function AlertChannels(): JSX.Element {
 				<RightActionContainer>
 					<TextToolTip
 						text={t('tooltip_notification_channels')}
-						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
+						url="https://signoz.io/docs/setup-alerts-notification/"
 					/>
 
 					<Tooltip

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -29,8 +29,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 		let url = '';
 		switch (option) {
 			case AlertTypes.ANOMALY_BASED_ALERT:
-				url =
-					'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+				url = 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/';
 				break;
 			case AlertTypes.METRICS_BASED_ALERT:
 				url =

frontend/src/container/CreateAlertRule/constants.ts

@@ -31,8 +31,7 @@ export const ALERT_TYPE_URL_MAP: Record<
 			'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},
 	[AlertTypes.ANOMALY_BASED_ALERT]: {
-		selection:
-			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples',
+		selection: 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/',
 		creation:
 			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -3,7 +3,6 @@ import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
-import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
@@ -11,6 +10,7 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
+import { toast } from '@signozhq/ui/sonner';
 
 import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
@@ -44,7 +44,6 @@ export default function ChartManager({
 	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
-	const { notifications } = useNotifications();
 	const { legendItemsMap } = useLegendsSync({
 		config,
 		subscribeToFocusChange: false,
@@ -136,11 +135,9 @@ export default function ChartManager({
 
 	const handleSave = useCallback((): void => {
 		syncSeriesVisibilityToLocalStorage();
-		notifications.success({
-			message: 'The updated graphs & legends are saved',
-		});
+		toast.success('The updated graphs & legends are saved');
 		onCancel?.();
-	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
+	}, [syncSeriesVisibilityToLocalStorage, onCancel]);
 
 	return (
 		<div className="chart-manager-container">

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/ChartManager.test.tsx

@@ -5,7 +5,7 @@ import { render, screen } from 'tests/test-utils';
 import ChartManager from '../ChartManager';
 
 const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
-const mockNotificationsSuccess = jest.fn();
+const mockToastSuccess = jest.fn();
 
 jest.mock('lib/uPlotV2/context/PlotContext', () => ({
 	usePlotContext: (): {
@@ -46,12 +46,11 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}): boolean => s.dashboardData?.locked ?? false,
 }));
 
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): { notifications: { success: jest.Mock } } => ({
-		notifications: {
-			success: mockNotificationsSuccess,
-		},
-	}),
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: (...args: unknown[]): unknown => mockToastSuccess(...args),
+	},
 }));
 
 jest.mock('components/ResizeTable', () => {
@@ -160,7 +159,7 @@ describe('ChartManager', () => {
 		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
 	});
 
-	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
+	it('calls syncSeriesVisibilityToLocalStorage, toast.success, and onCancel when Save is clicked', async () => {
 		render(
 			<ChartManager
 				config={createMockConfig() as UPlotConfigBuilder}
@@ -172,9 +171,9 @@ describe('ChartManager', () => {
 		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
 
 		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
-			message: 'The updated graphs & legends are saved',
-		});
+		expect(mockToastSuccess).toHaveBeenCalledWith(
+			'The updated graphs & legends are saved',
+		);
 		expect(mockOnCancel).toHaveBeenCalledTimes(1);
 	});
 });

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -5,6 +5,14 @@
 	height: 100%;
 	flex-direction: column;
 
+	// Stacked children (the FullView / standalone graph-manager) sit below the chart
+	// in the same container; size the chart region to its content so they aren't
+	// pushed out. Only this case opts out of filling the height — the dashboard grid,
+	// alert preview, and other charts keep 100% so they fill their container.
+	&--with-layout-children {
+		height: auto;
+	}
+
 	&--legend-right {
 		flex-direction: row;
 	}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -63,6 +63,7 @@ export default function ChartLayout({
 				className={cx('chart-layout', {
 					'chart-layout--legend-right':
 						legendConfig.position === LegendPosition.RIGHT,
+					'chart-layout--with-layout-children': !!layoutChildren,
 				})}
 			>
 				<div className="chart-layout__content">

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -717,13 +717,13 @@ function ExplorerOptions({
 
 	const infoIconLink = useMemo(() => {
 		if (isLogsExplorer) {
-			return 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar';
+			return 'https://signoz.io/docs/userguide/logs_query_builder/?utm_source=product&utm_medium=logs-explorer-toolbar';
 		}
 		// TODO: Add metrics explorer info icon link
 		if (isMetricsExplorer) {
 			return '';
 		}
-		return 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar';
+		return 'https://signoz.io/docs/userguide/traces/?utm_source=product&utm_medium=trace-explorer-toolbar';
 	}, [isLogsExplorer, isMetricsExplorer]);
 
 	const getQueryName = (query: Query): string => {

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -201,7 +201,7 @@ export default function SavedViews({
 								});
 
 								window.open(
-									'https://signoz.io/docs/product-features/saved-view/',
+									'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
 									'_blank',
 									'noopener noreferrer',
 								);

frontend/src/container/Home/constants.ts

@@ -29,12 +29,12 @@ export const checkListStepToPreferenceKeyMap = {
 
 export const DOCS_LINKS = {
 	ADD_DATA_SOURCE: 'https://signoz.io/docs/instrumentation/overview/',
-	SEND_LOGS: 'https://signoz.io/docs/userguide/logs/',
+	SEND_LOGS: 'https://signoz.io/docs/userguide/logs_query_builder/',
 	SEND_TRACES: 'https://signoz.io/docs/userguide/traces/',
 	SEND_METRICS: 'https://signoz.io/docs/metrics-management/metrics-explorer/',
-	SETUP_ALERTS: 'https://signoz.io/docs/userguide/alerts-management/',
+	SETUP_ALERTS: 'https://signoz.io/docs/alerts/',
 	SETUP_SAVED_VIEWS:
-		'https://signoz.io/docs/product-features/saved-view/#step-2-save-your-view',
+		'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
 	SETUP_DASHBOARDS: 'https://signoz.io/docs/userguide/manage-dashboards/',
 };
 

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -82,7 +82,7 @@ export function K8sEmptyState({
 						<span className={styles.message}>
 							Please refer to{' '}
 							<a
-								href="https://signoz.io/docs/userguide/hostmetrics/"
+								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
 								target="_blank"
 								rel="noreferrer"
 							>

frontend/src/container/InfraMonitoringK8s/Base/__tests__/K8sBaseList.test.tsx

@@ -611,7 +611,7 @@ describe('K8sBaseList', () => {
 				expect(link).toBeInTheDocument();
 				expect(link).toHaveAttribute(
 					'href',
-					'https://signoz.io/docs/userguide/hostmetrics/',
+					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
 				);
 			});
 		});

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss

@@ -66,20 +66,6 @@
 		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
 	}
 
-	:global(.ant-collapse-header) {
-		border-bottom: 1px solid var(--l1-border);
-		padding: 12px 8px;
-	}
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-		padding-block: 0 !important;
-
-		:global(.quick-filters .checkbox-filter) {
-			padding-left: 18px;
-		}
-	}
-
 	:global(.quick-filters) {
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -111,22 +97,6 @@
 	justify-content: space-between;
 }
 
-.quickFiltersCategoryLabel {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.quickFiltersCategoryLabelIcon {
-	margin-right: 8px;
-}
-
-.quickFiltersCategoryLabelContainer {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
 .listContainer {
 	flex: 1;
 	min-width: 0;
@@ -160,3 +130,106 @@
 .listContainerFiltersVisible {
 	max-width: calc(100% - 280px);
 }
+
+.categorySelectorSection {
+	padding: var(--spacing-4);
+}
+
+.sectionHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	margin-bottom: var(--spacing-4);
+
+	&[data-type='filter'] {
+		padding: 0 var(--spacing-4);
+	}
+}
+
+.sectionLabel {
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-semibold);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--l3-foreground);
+	white-space: nowrap;
+}
+
+.sectionLine {
+	flex: 1;
+	height: 1px;
+	background: var(--l1-border);
+}
+
+.categoryCard {
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--spacing-3);
+	padding: var(--spacing-2);
+}
+
+.categoryList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.categoryItem {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-5);
+	padding: var(--spacing-3) var(--spacing-4);
+	border: none;
+	border-radius: var(--spacing-2);
+	background: transparent;
+	cursor: pointer;
+	width: 100%;
+	text-align: left;
+	transition:
+		background-color 0.2s ease,
+		color 0.2s ease;
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	--typography-color: var(--l1-foreground);
+
+	&:hover:not(.categoryItemSelected) {
+		background: var(--l2-background-hover);
+	}
+
+	svg {
+		color: var(--l3-foreground);
+		flex-shrink: 0;
+		transition: color 0.2s ease;
+	}
+
+	&.categoryItemSelected {
+		background: var(--accent-primary);
+		color: var(--l1-background);
+		font-weight: 600;
+
+		&:hover {
+			background: var(--accent-primary-hover, var(--accent-primary));
+		}
+
+		svg {
+			color: var(--l1-foreground);
+		}
+	}
+}
+
+.quickFiltersSection {
+	flex: 1;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--accent-primary);
+	}
+}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, CollapseProps } from 'antd';
-import { Collapse, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
@@ -113,192 +112,74 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		});
 	};
 
-	const renderCategoryLabel = (
-		icon: JSX.Element,
-		label: string,
-	): JSX.Element => (
-		<div className={styles.quickFiltersCategoryLabel}>
-			<div className={styles.quickFiltersCategoryLabelContainer}>
-				{icon}
-				<Typography.Text>{label}</Typography.Text>
-			</div>
-		</div>
+	const categories = useMemo(
+		() => [
+			{
+				key: K8sCategories.PODS,
+				label: 'Pods',
+				icon: <Container size={14} />,
+				config: GetPodsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.NODES,
+				label: 'Nodes',
+				icon: <Workflow size={14} />,
+				config: GetNodesQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.NAMESPACES,
+				label: 'Namespaces',
+				icon: <FilePenLine size={14} />,
+				config: GetNamespaceQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.CLUSTERS,
+				label: 'Clusters',
+				icon: <Boxes size={14} />,
+				config: GetClustersQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.DEPLOYMENTS,
+				label: 'Deployments',
+				icon: <Computer size={14} />,
+				config: GetDeploymentsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.JOBS,
+				label: 'Jobs',
+				icon: <Bolt size={14} />,
+				config: GetJobsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.DAEMONSETS,
+				label: 'DaemonSets',
+				icon: <Group size={14} />,
+				config: GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.STATEFULSETS,
+				label: 'StatefulSets',
+				icon: <ArrowUpDown size={14} />,
+				config: GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.VOLUMES,
+				label: 'Volumes',
+				icon: <HardDrive size={14} />,
+				config: GetVolumesQuickFiltersConfig(dotMetricsEnabled),
+			},
+		],
+		[dotMetricsEnabled],
 	);
 
-	const items: CollapseProps['items'] = [
-		{
-			label: renderCategoryLabel(
-				<Container size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Pods',
-			),
-			key: K8sCategories.PODS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Workflow size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Nodes',
-			),
-			key: K8sCategories.NODES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<FilePenLine size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Namespaces',
-			),
-			key: K8sCategories.NAMESPACES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Boxes size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Clusters',
-			),
-			key: K8sCategories.CLUSTERS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Computer size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Deployments',
-			),
-			key: K8sCategories.DEPLOYMENTS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Bolt size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Jobs',
-			),
-			key: K8sCategories.JOBS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Group size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'DaemonSets',
-			),
-			key: K8sCategories.DAEMONSETS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<ArrowUpDown size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'StatefulSets',
-			),
-			key: K8sCategories.STATEFULSETS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<HardDrive size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Volumes',
-			),
-			key: K8sCategories.VOLUMES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		// TODO: Enable once we have implemented containers.
-		// {
-		// 	label: (
-		// 		<div className="k8s-quick-filters-category-label">
-		// 			<div className="k8s-quick-filters-category-label-container">
-		// 				<PackageOpen
-		// 					size={14}
-		// 					className="k8s-quick-filters-category-label-icon"
-		// 				/>
-		// 				<Typography.Text>Containers</Typography.Text>
-		// 			</div>
-		// 		</div>
-		// 	),
-		// 	key: K8sCategories.CONTAINERS,
-		// 	showArrow: false,
-		// 	children: (
-		// 		<QuickFilters
-		// 			source={QuickFiltersSource.INFRA_MONITORING}
-		// 			config={ContainersQuickFiltersConfig}
-		// 			handleFilterVisibilityChange={handleFilterVisibilityChange}
-		// 			onFilterChange={handleFilterChange}
-		// 		/>
-		// 	),
-		// },
-	];
+	const selectedCategoryConfig = useMemo(
+		() => categories.find((cat) => cat.key === selectedCategory)?.config,
+		[categories, selectedCategory],
+	);
 
-	const handleCategoryChange = (key: string | string[]): void => {
-		if (Array.isArray(key) && key.length > 0) {
-			setSelectedCategory(key[0] as string);
+	const handleCategorySelect = (key: string): void => {
+		if (key !== selectedCategory) {
+			setSelectedCategory(key);
 			// Reset filters
 			setUrlFilters(null);
 			setOrderBy(null);
@@ -332,26 +213,58 @@ export default function InfraMonitoringK8s(): JSX.Element {
 				<div className={styles.infraContentRow}>
 					{showFilters && (
 						<div className={styles.quickFiltersContainer}>
-							<div className={styles.quickFiltersContainerHeader}>
-								<Typography.Text>Filters</Typography.Text>
-
-								<Tooltip title="Collapse Filters">
-									<ArrowUpToLine
-										style={{ transform: 'rotate(270deg)' }}
-										onClick={handleFilterVisibilityChange}
-										size="md"
-									/>
-								</Tooltip>
+							<div className={styles.categorySelectorSection}>
+								<div className={styles.sectionHeader} data-type="resource">
+									<Typography.Text className={styles.sectionLabel}>
+										Viewing · Resource
+									</Typography.Text>
+									<div className={styles.sectionLine} />
+									<Tooltip title="Collapse Filters">
+										<ArrowUpToLine
+											style={{ transform: 'rotate(270deg)' }}
+											onClick={handleFilterVisibilityChange}
+											size="md"
+										/>
+									</Tooltip>
+								</div>
+								<div className={styles.categoryCard}>
+									<div className={styles.categoryList}>
+										{categories.map((category) => (
+											<button
+												key={category.key}
+												type="button"
+												className={`${styles.categoryItem} ${
+													selectedCategory === category.key
+														? styles.categoryItemSelected
+														: ''
+												}`}
+												onClick={(): void => handleCategorySelect(category.key)}
+												data-testid={`category-${category.key}`}
+											>
+												{category.icon}
+												<Typography.Text>{category.label}</Typography.Text>
+											</button>
+										))}
+									</div>
+								</div>
+							</div>
+
+							<div className={styles.quickFiltersSection}>
+								<div className={styles.sectionHeader} data-type="filter">
+									<Typography.Text className={styles.sectionLabel}>
+										Filter by
+									</Typography.Text>
+									<div className={styles.sectionLine} />
+								</div>
+								{selectedCategoryConfig && (
+									<QuickFilters
+										source={QuickFiltersSource.INFRA_MONITORING}
+										config={selectedCategoryConfig}
+										handleFilterVisibilityChange={handleFilterVisibilityChange}
+										onFilterChange={handleFilterChange}
+									/>
+								)}
 							</div>
-							<Collapse
-								onChange={handleCategoryChange}
-								items={items}
-								defaultActiveKey={[selectedCategory]}
-								activeKey={[selectedCategory]}
-								accordion
-								bordered={false}
-								ghost
-							/>
 						</div>
 					)}
 

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesContent.tsx

@@ -0,0 +1,228 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { ChangeEvent, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
+import DockerIcon from 'assets/CustomIcons/DockerIcon';
+import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
+import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
+import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
+import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
+import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
+import NginxIcon from 'assets/CustomIcons/NginxIcon';
+import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
+import RedisIcon from 'assets/CustomIcons/RedisIcon';
+import cx from 'classnames';
+import {
+	ConciergeBell,
+	DraftingCompass,
+	Drill,
+	Plus,
+	X,
+} from '@signozhq/icons';
+import { DashboardTemplate } from 'types/api/dashboard/getAll';
+
+import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
+import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
+
+import { filterTemplates } from '../utils';
+
+import './DashboardTemplatesModal.styles.scss';
+
+const templatesList: DashboardTemplate[] = [
+	{
+		name: 'Blank dashboard',
+		icon: <Drill />,
+		id: 'blank',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Alert Manager',
+		icon: <ConciergeBell />,
+		id: 'alertManager',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Apache',
+		icon: <ApacheIcon />,
+		id: 'apache',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Docker',
+		icon: <DockerIcon />,
+		id: 'docker',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Elasticsearch',
+		icon: <ElasticSearchIcon />,
+		id: 'elasticSearch',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MongoDB',
+		icon: <MongoDBIcon />,
+		id: 'mongoDB',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Heroku',
+		icon: <HerokuIcon />,
+		id: 'heroku',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Nginx',
+		icon: <NginxIcon />,
+		id: 'nginx',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Kubernetes',
+		icon: <KubernetesIcon />,
+		id: 'kubernetes',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MySQL',
+		icon: <MySQLIcon />,
+		id: 'mySQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'PostgreSQL',
+		icon: <PostgreSQLIcon />,
+		id: 'postgreSQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Redis',
+		icon: <RedisIcon />,
+		id: 'redis',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: redisTemplatePreviewUrl,
+	},
+	{
+		name: 'AWS',
+		icon: <DraftingCompass size={14} />,
+		id: 'aws',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+];
+
+interface DashboardTemplatesContentProps {
+	onCreateNewDashboard: () => void;
+	/** When provided, renders the modal-style header with a close affordance. Omitted for inline use. */
+	onCancel?: () => void;
+}
+
+// The template gallery (search + list + preview + create), extracted from the
+// modal so it can be embedded inline (e.g. the V2 new-dashboard modal's template
+// tab) as well as inside DashboardTemplatesModal. Styles live under the global
+// `.new-dashboard-templates-modal` scope, so inline callers wrap it in that class.
+export default function DashboardTemplatesContent({
+	onCreateNewDashboard,
+	onCancel,
+}: DashboardTemplatesContentProps): JSX.Element {
+	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
+		templatesList[0],
+	);
+
+	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
+
+	const handleDashboardTemplateSearch = (
+		event: ChangeEvent<HTMLInputElement>,
+	) => {
+		const searchText = event.target.value;
+		const filteredTemplates = filterTemplates(searchText, templatesList);
+		setDashboardTemplates(filteredTemplates);
+	};
+
+	return (
+		<div className="new-dashboard-templates-content-container">
+			{onCancel && (
+				<div className="new-dashboard-templates-content-header">
+					<Typography.Text>New Dashboard</Typography.Text>
+
+					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
+				</div>
+			)}
+
+			<div className="new-dashboard-templates-content">
+				<div className="new-dashboard-templates-list">
+					<Input
+						className="new-dashboard-templates-search"
+						placeholder="🔍 Search..."
+						onChange={handleDashboardTemplateSearch}
+					/>
+
+					<div className="templates-list">
+						{dashboardTemplates.map((template) => (
+							<div
+								className={cx(
+									'template-list-item',
+									selectedDashboardTemplate.id === template.id ? 'active' : '',
+								)}
+								key={template.name}
+								onClick={() => setSelectedDashboardTemplate(template)}
+							>
+								<div className="template-icon">{template.icon}</div>
+								<div className="template-name">{template.name}</div>
+							</div>
+						))}
+					</div>
+				</div>
+
+				<div className="new-dashboard-template-preview">
+					<div className="template-preview-header">
+						<div className="template-preview-title">
+							<div className="template-preview-icon">
+								{selectedDashboardTemplate.icon}
+							</div>
+
+							<div className="template-info">
+								<div className="template-name">{selectedDashboardTemplate.name}</div>
+
+								<div className="template-description">
+									{selectedDashboardTemplate.description}
+								</div>
+							</div>
+						</div>
+
+						<div className="create-dashboard-btn">
+							<Button
+								type="primary"
+								className="periscope-btn primary"
+								icon={<Plus size={14} />}
+								onClick={onCreateNewDashboard}
+							>
+								New dashboard
+							</Button>
+						</div>
+					</div>
+
+					<div className="template-preview-image">
+						<img
+							src={selectedDashboardTemplate.previewImage}
+							alt={`${selectedDashboardTemplate.name}-preview`}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,129 +1,9 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
-import DockerIcon from 'assets/CustomIcons/DockerIcon';
-import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
-import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
-import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
-import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
-import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
-import NginxIcon from 'assets/CustomIcons/NginxIcon';
-import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
-import RedisIcon from 'assets/CustomIcons/RedisIcon';
-import cx from 'classnames';
-import {
-	ConciergeBell,
-	DraftingCompass,
-	Drill,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { DashboardTemplate } from 'types/api/dashboard/getAll';
+import { Modal } from 'antd';
 
-import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
-import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
-
-import { filterTemplates } from '../utils';
+import DashboardTemplatesContent from './DashboardTemplatesContent';
 
 import './DashboardTemplatesModal.styles.scss';
 
-const templatesList: DashboardTemplate[] = [
-	{
-		name: 'Blank dashboard',
-		icon: <Drill />,
-		id: 'blank',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Alert Manager',
-		icon: <ConciergeBell />,
-		id: 'alertManager',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Apache',
-		icon: <ApacheIcon />,
-		id: 'apache',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Docker',
-		icon: <DockerIcon />,
-		id: 'docker',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Elasticsearch',
-		icon: <ElasticSearchIcon />,
-		id: 'elasticSearch',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MongoDB',
-		icon: <MongoDBIcon />,
-		id: 'mongoDB',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Heroku',
-		icon: <HerokuIcon />,
-		id: 'heroku',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Nginx',
-		icon: <NginxIcon />,
-		id: 'nginx',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Kubernetes',
-		icon: <KubernetesIcon />,
-		id: 'kubernetes',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MySQL',
-		icon: <MySQLIcon />,
-		id: 'mySQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'PostgreSQL',
-		icon: <PostgreSQLIcon />,
-		id: 'postgreSQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Redis',
-		icon: <RedisIcon />,
-		id: 'redis',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: redisTemplatePreviewUrl,
-	},
-	{
-		name: 'AWS',
-		icon: <DraftingCompass size={14} />,
-		id: 'aws',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-];
-
 interface DashboardTemplatesModalProps {
 	showNewDashboardTemplatesModal: boolean;
 	onCreateNewDashboard: () => void;
@@ -135,20 +15,6 @@ export default function DashboardTemplatesModal({
 	onCreateNewDashboard,
 	onCancel,
 }: DashboardTemplatesModalProps): JSX.Element {
-	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
-		templatesList[0],
-	);
-
-	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
-
-	const handleDashboardTemplateSearch = (
-		event: ChangeEvent<HTMLInputElement>,
-	) => {
-		const searchText = event.target.value;
-		const filteredTemplates = filterTemplates(searchText, templatesList);
-		setDashboardTemplates(filteredTemplates);
-	};
-
 	return (
 		<Modal
 			wrapClassName="new-dashboard-templates-modal"
@@ -159,75 +25,10 @@ export default function DashboardTemplatesModal({
 			destroyOnClose
 			width="60vw"
 		>
-			<div className="new-dashboard-templates-content-container">
-				<div className="new-dashboard-templates-content-header">
-					<Typography.Text>New Dashboard</Typography.Text>
-
-					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
-				</div>
-
-				<div className="new-dashboard-templates-content">
-					<div className="new-dashboard-templates-list">
-						<Input
-							className="new-dashboard-templates-search"
-							placeholder="🔍 Search..."
-							onChange={handleDashboardTemplateSearch}
-						/>
-
-						<div className="templates-list">
-							{dashboardTemplates.map((template) => (
-								<div
-									className={cx(
-										'template-list-item',
-										selectedDashboardTemplate.id === template.id ? 'active' : '',
-									)}
-									key={template.name}
-									onClick={() => setSelectedDashboardTemplate(template)}
-								>
-									<div className="template-icon">{template.icon}</div>
-									<div className="template-name">{template.name}</div>
-								</div>
-							))}
-						</div>
-					</div>
-
-					<div className="new-dashboard-template-preview">
-						<div className="template-preview-header">
-							<div className="template-preview-title">
-								<div className="template-preview-icon">
-									{selectedDashboardTemplate.icon}
-								</div>
-
-								<div className="template-info">
-									<div className="template-name">{selectedDashboardTemplate.name}</div>
-
-									<div className="template-description">
-										{selectedDashboardTemplate.description}
-									</div>
-								</div>
-							</div>
-
-							<div className="create-dashboard-btn">
-								<Button
-									type="primary"
-									className="periscope-btn primary"
-									icon={<Plus size={14} />}
-									onClick={onCreateNewDashboard}
-								>
-									New dashboard
-								</Button>
-							</div>
-						</div>
-
-						<div className="template-preview-image">
-							<img
-								src={selectedDashboardTemplate.previewImage}
-								alt={`${selectedDashboardTemplate.name}-preview`}
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
+			<DashboardTemplatesContent
+				onCreateNewDashboard={onCreateNewDashboard}
+				onCancel={onCancel}
+			/>
 		</Modal>
 	);
 }

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -164,7 +164,7 @@ function BreakDown(): JSX.Element {
 								Meter metrics data is aggregated over 1 hour period. Please select time
 								range accordingly. 
 								<a
-									href="https://signoz.io/docs/cost-meter/overview/#accessing-cost-meter"
+									href="https://signoz.io/docs/cost-meter/overview/#get-started"
 									rel="noopener noreferrer"
 									target="_blank"
 									style={{ textDecoration: 'underline' }}

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -197,7 +197,7 @@ function TopOperationsTable({
 
 	const entryPointSpanInfo = {
 		text: 'Shows the spans where requests enter new services for the first time',
-		url: 'https://signoz.io/docs/traces-management/guides/entry-point-spans-service-overview/',
+		url: 'https://signoz.io/docs/apm-and-distributed-tracing/application-details/',
 		urlText: 'Learn more about Entrypoint Spans.',
 	};
 

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -64,7 +64,7 @@ function ConfigureGoogleAuthAuthnProvider({
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
+						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -38,7 +38,7 @@ function ConfigureOIDCAuthnProvider({
 					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
 					the{' '}
 					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
+						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -37,7 +37,7 @@ function ConfigureSAMLAuthnProvider({
 				<p className="authn-provider__description">
 					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
 					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
+						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx

@@ -216,7 +216,7 @@ export default function QueryFunctions({
 							Add new function
 							<Typography.Link
 								style={{ textDecoration: 'underline' }}
-								href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#functions-for-extended-data-analysis"
+								href="https://signoz.io/docs/querying/functions-extended-analysis/?utm_source=product&utm_medium=query-builder"
 								target="_blank"
 							>
 								{' '}

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -48,8 +48,6 @@ describe('CreateRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.authz.test.tsx

@@ -77,8 +77,6 @@ describe('EditRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.authz.test.tsx

@@ -409,8 +409,6 @@ describe('ViewRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
-				allowed: false,
-				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/Version/index.tsx

@@ -100,7 +100,7 @@ function Version(): JSX.Element {
 					{!isError && !isLatestVersion && (
 						<div className="version-page-upgrade-container">
 							<Button
-								href="https://signoz.io/docs/operate/docker-standalone/#upgrade"
+								href="https://signoz.io/docs/opentelemetry-collection-agents/docker/overview/"
 								target="_blank"
 								type="primary"
 								className="periscope-btn primary"

frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx

@@ -16,8 +16,6 @@ const noPermissions = {
 	isFetching: false,
 	error: null,
 	permissions: null,
-	allowed: false,
-	deniedPermissions: [],
 	refetchPermissions: jest.fn(),
 };
 

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.module.css

@@ -1,28 +0,0 @@
-.container {
-	position: fixed;
-	top: 12px;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 9998;
-	pointer-events: auto;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.button {
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}
-
-.badge {
-	margin-left: 4px;
-}
-
-.closeButton {
-	border-radius: 4px;
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.tsx

@@ -1,61 +0,0 @@
-import { X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { useAuthZDevStore } from '../useAuthZDevStore';
-
-import styles from './AuthZDevFloatingIndicator.module.css';
-
-export function AuthZDevFloatingIndicator(): JSX.Element | null {
-	const overrides = useAuthZDevStore((s) => s.overrides);
-	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
-	const openModal = useAuthZDevStore((s) => s.openModal);
-	const [isDismissed, setIsDismissed] = useState(false);
-
-	const overrideCount = Object.keys(overrides).length;
-
-	if (overrideCount === 0 || isModalOpen || isDismissed) {
-		return null;
-	}
-
-	const handleOpen = (): void => {
-		setIsDismissed(false);
-		openModal();
-	};
-
-	const handleDismiss = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-		setIsDismissed(true);
-	};
-
-	return createPortal(
-		<div className={styles.container}>
-			<Button
-				variant="solid"
-				color="warning"
-				size="sm"
-				onClick={handleOpen}
-				className={styles.button}
-				data-testid="authz-dev-floating-indicator"
-			>
-				AuthZ Overrides
-				<Badge color="warning" className={styles.badge}>
-					{overrideCount}
-				</Badge>
-			</Button>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				onClick={handleDismiss}
-				className={styles.closeButton}
-				aria-label="Dismiss indicator"
-				data-testid="authz-dev-floating-dismiss"
-				prefix={<X />}
-			/>
-		</div>,
-		document.body,
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.module.css

@@ -1,140 +0,0 @@
-.modal {
-	--dialog-width: 640px;
-	--dialog-max-width: 92vw;
-	--dialog-max-height: 78vh;
-	--dialog-description-padding: var(--spacing-4) var(--spacing-4) 0px
-		var(--spacing-4);
-
-	[data-slot='dialog-description'],
-	[data-slot='dialog-header'] {
-		background-color: var(--l2-background);
-	}
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	max-height: calc(78vh - 80px);
-}
-
-.header {
-	display: flex;
-	flex-direction: column;
-	flex-shrink: 0;
-	gap: var(--spacing-4);
-	padding-bottom: var(--spacing-4);
-}
-
-.searchRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-
-	--input-background: var(--l3-background);
-	--input-hover-background: var(--l3-background);
-	--input-focus-background: var(--l3-background);
-	--input-border-color: var(--l3-border);
-	--input-hover-border-color: var(--l3-border);
-	--input-focus-border-color: var(--l3-border);
-
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-hover-background: var(--l3-background);
-	--select-trigger-focus-background: var(--l3-background);
-	--select-trigger-border-color: var(--l3-border);
-
-	--select-content-background: var(--l3-background);
-	--select-item-highlight-background: var(--l3-background-hover);
-}
-
-.search {
-	flex: 1 1 auto;
-	min-width: 0;
-
-	--input-width: 100%;
-}
-
-.filter {
-	flex: 0 0 176px;
-	/* Normalize the library trigger height (2.25rem) to match the input. */
-	--select-trigger-height: 2rem;
-}
-
-.search > *,
-.filter > * {
-	box-sizing: border-box;
-}
-
-.searchIcon {
-	display: inline-flex;
-	color: var(--l3-foreground);
-}
-
-.actionsRow {
-	display: flex;
-	gap: var(--spacing-3);
-}
-
-.actionButton {
-	flex: 0 0 auto;
-	height: 2rem;
-}
-
-.list {
-	display: flex;
-	flex: 1 1 auto;
-	flex-direction: column;
-	gap: var(--spacing-6);
-	padding: var(--spacing-4) 0;
-	overflow-y: auto;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-}
-
-.sectionHeader {
-	display: flex;
-	align-items: baseline;
-	gap: var(--spacing-3);
-	padding: var(--spacing-3) var(--spacing-2);
-	margin: 0 0 var(--spacing-1);
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.empty {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 160px;
-	padding: var(--spacing-16);
-}
-
-.footer {
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	padding: var(--spacing-4) 0;
-	border-top: 1px solid var(--l2-border);
-}
-
-.hint {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.hintGroup {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.count {
-	flex: 0 0 auto;
-	white-space: nowrap;
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.tsx

@@ -1,108 +0,0 @@
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { useCallback, useRef } from 'react';
-
-import { useAuthZDevStore } from '../useAuthZDevStore';
-import { useAuthZQueryInvalidation } from '../useAuthZQueryInvalidation';
-
-import { AuthZDevModalContent } from './AuthZDevModalContent';
-import { AuthZDevModalFooter } from './AuthZDevModalFooter';
-import { AuthZDevModalHeader } from './AuthZDevModalHeader';
-import { useAuthZDevModalData } from './useAuthZDevModalData';
-import { useModalKeyboard } from './useModalKeyboard';
-
-import styles from './AuthZDevModal.module.css';
-
-export function AuthZDevModal(): JSX.Element | null {
-	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
-	const closeModal = useAuthZDevStore((s) => s.closeModal);
-	const observed = useAuthZDevStore((s) => s.observed);
-	const overrides = useAuthZDevStore((s) => s.overrides);
-	const cycleOverride = useAuthZDevStore((s) => s.cycleOverride);
-	const setOverride = useAuthZDevStore((s) => s.setOverride);
-	const clearAllOverrides = useAuthZDevStore((s) => s.clearAllOverrides);
-	const grantAll = useAuthZDevStore((s) => s.grantAll);
-	const denyAll = useAuthZDevStore((s) => s.denyAll);
-
-	useAuthZQueryInvalidation(overrides);
-
-	const searchInputRef = useRef<HTMLInputElement>(null);
-
-	const {
-		search,
-		setSearch,
-		resourceFilter,
-		setResourceFilter,
-		observedList,
-		resourceFilterItems,
-		filteredPermissions,
-		groups,
-		orderedPermissions,
-		indexByPermission,
-		hasActiveFilter,
-		filteredOverrideCount,
-		overrideCount,
-	} = useAuthZDevModalData(observed, overrides);
-
-	const { selectedIndex, setSelectedIndex } = useModalKeyboard({
-		permissions: orderedPermissions,
-		overrides,
-		onCycle: cycleOverride,
-		onSetOverride: setOverride,
-		onClose: closeModal,
-		searchInputRef,
-	});
-
-	const handleOpenChange = useCallback(
-		(open: boolean): void => {
-			if (!open) {
-				closeModal();
-				setSelectedIndex(-1);
-			}
-		},
-		[closeModal, setSelectedIndex],
-	);
-
-	return (
-		<DialogWrapper
-			open={isModalOpen}
-			onOpenChange={handleOpenChange}
-			title="AuthZ DevTools"
-			subTitle="Force permission results locally without touching the backend."
-			className={styles.modal}
-			width="wide"
-		>
-			<div className={styles.content}>
-				<AuthZDevModalHeader
-					searchInputRef={searchInputRef}
-					search={search}
-					setSearch={setSearch}
-					resourceFilter={resourceFilter}
-					setResourceFilter={setResourceFilter}
-					resourceFilterItems={resourceFilterItems}
-					hasActiveFilter={hasActiveFilter}
-					filteredPermissions={filteredPermissions}
-					filteredOverrideCount={filteredOverrideCount}
-					overrideCount={overrideCount}
-					grantAll={grantAll}
-					denyAll={denyAll}
-					clearAllOverrides={clearAllOverrides}
-				/>
-				<AuthZDevModalContent
-					observedListLength={observedList.length}
-					orderedPermissions={orderedPermissions}
-					groups={groups}
-					indexByPermission={indexByPermission}
-					selectedIndex={selectedIndex}
-					setSelectedIndex={setSelectedIndex}
-					observed={observed}
-					overrides={overrides}
-					onSetOverride={setOverride}
-				/>
-				<AuthZDevModalFooter
-					orderedPermissionsCount={orderedPermissions.length}
-					observedListLength={observedList.length}
-				/>
-			</div>
-		</DialogWrapper>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalContent.tsx

@@ -1,85 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { useCallback } from 'react';
-
-import { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { ObservedPermission, OverrideState } from '../types';
-
-import { PermissionRow } from './PermissionRow';
-
-import styles from './AuthZDevModal.module.css';
-
-export interface PermissionGroup {
-	resource: string;
-	items: string[];
-}
-
-export interface AuthZDevModalContentProps {
-	observedListLength: number;
-	orderedPermissions: string[];
-	groups: PermissionGroup[];
-	indexByPermission: Map<string, number>;
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
-	observed: Record<string, ObservedPermission>;
-	overrides: Record<string, OverrideState>;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-}
-
-export function AuthZDevModalContent({
-	observedListLength,
-	orderedPermissions,
-	groups,
-	indexByPermission,
-	selectedIndex,
-	setSelectedIndex,
-	observed,
-	overrides,
-	onSetOverride,
-}: AuthZDevModalContentProps): JSX.Element {
-	const handleSelectIndex = useCallback(
-		(index: number) => (): void => {
-			setSelectedIndex(index);
-		},
-		[setSelectedIndex],
-	);
-
-	return (
-		<div className={styles.list} data-testid="authz-dev-permission-list">
-			{orderedPermissions.length === 0 ? (
-				<div className={styles.empty}>
-					<Typography.Text align="center" color="muted">
-						{observedListLength === 0
-							? 'No permissions observed yet. Navigate the app to trigger permission checks.'
-							: 'No permissions match your search.'}
-					</Typography.Text>
-				</div>
-			) : (
-				groups.map((group) => (
-					<div key={group.resource} className={styles.section}>
-						<div className={styles.sectionHeader}>
-							<Typography.Text as="span" size="medium" weight="semibold">
-								{group.resource}
-							</Typography.Text>
-							<Typography.Text as="span" size="small" color="muted">
-								{group.items.length}
-							</Typography.Text>
-						</div>
-						{group.items.map((permission) => {
-							const index = indexByPermission.get(permission) ?? 0;
-							return (
-								<PermissionRow
-									key={permission}
-									observed={observed[permission]}
-									override={overrides[permission]}
-									isSelected={index === selectedIndex}
-									onSetOverride={onSetOverride}
-									onSelect={handleSelectIndex(index)}
-								/>
-							);
-						})}
-					</div>
-				))
-			)}
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalFooter.tsx

@@ -1,56 +0,0 @@
-import { Kbd } from '@signozhq/ui/kbd';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './AuthZDevModal.module.css';
-
-export interface AuthZDevModalFooterProps {
-	orderedPermissionsCount: number;
-	observedListLength: number;
-}
-
-export function AuthZDevModalFooter({
-	orderedPermissionsCount,
-	observedListLength,
-}: AuthZDevModalFooterProps): JSX.Element {
-	return (
-		<div className={styles.footer}>
-			<div className={styles.hint}>
-				<span className={styles.hintGroup}>
-					<Kbd>↑</Kbd>
-					<Kbd>↓</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						navigate
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>←</Kbd>
-					<Kbd>→</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						mode
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>1-5</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						set
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>/</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						search
-					</Typography.Text>
-				</span>
-				<span className={styles.hintGroup}>
-					<Kbd>Esc</Kbd>
-					<Typography.Text as="span" size="small" color="muted">
-						close
-					</Typography.Text>
-				</span>
-			</div>
-			<Typography.Text size="small" color="muted" className={styles.count}>
-				{orderedPermissionsCount} of {observedListLength} permissions
-			</Typography.Text>
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModalHeader.tsx

@@ -1,119 +0,0 @@
-import { Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
-import { RefObject, useCallback } from 'react';
-
-import { BrandedPermission } from '../../hooks/useAuthZ/types';
-
-import styles from './AuthZDevModal.module.css';
-
-export interface AuthZDevModalHeaderProps {
-	searchInputRef: RefObject<HTMLInputElement>;
-	search: string;
-	setSearch: (value: string) => void;
-	resourceFilter: string;
-	setResourceFilter: (value: string) => void;
-	resourceFilterItems: Array<{ value: string; label: string }>;
-	hasActiveFilter: boolean;
-	filteredPermissions: BrandedPermission[];
-	filteredOverrideCount: number;
-	overrideCount: number;
-	grantAll: (permissions?: BrandedPermission[]) => void;
-	denyAll: (permissions?: BrandedPermission[]) => void;
-	clearAllOverrides: (permissions?: BrandedPermission[]) => void;
-}
-
-export function AuthZDevModalHeader({
-	searchInputRef,
-	search,
-	setSearch,
-	resourceFilter,
-	setResourceFilter,
-	resourceFilterItems,
-	hasActiveFilter,
-	filteredPermissions,
-	filteredOverrideCount,
-	overrideCount,
-	grantAll,
-	denyAll,
-	clearAllOverrides,
-}: AuthZDevModalHeaderProps): JSX.Element {
-	const handleGrantAll = useCallback((): void => {
-		grantAll(hasActiveFilter ? filteredPermissions : undefined);
-	}, [grantAll, hasActiveFilter, filteredPermissions]);
-
-	const handleDenyAll = useCallback((): void => {
-		denyAll(hasActiveFilter ? filteredPermissions : undefined);
-	}, [denyAll, hasActiveFilter, filteredPermissions]);
-
-	const handleClearAll = useCallback((): void => {
-		clearAllOverrides(hasActiveFilter ? filteredPermissions : undefined);
-	}, [clearAllOverrides, hasActiveFilter, filteredPermissions]);
-
-	return (
-		<div className={styles.header}>
-			<div className={styles.searchRow}>
-				<div className={styles.search}>
-					<Input
-						ref={searchInputRef}
-						placeholder="Search permissions..."
-						value={search}
-						onChange={(e): void => setSearch(e.target.value)}
-						prefix={<Search size={14} className={styles.searchIcon} />}
-						aria-label="Search permissions"
-						data-testid="authz-dev-search"
-					/>
-				</div>
-				<div className={styles.filter}>
-					<SelectSimple
-						items={resourceFilterItems}
-						value={resourceFilter}
-						onChange={(value): void => setResourceFilter(value as string)}
-						testId="authz-dev-resource-filter"
-						withPortal={false}
-					/>
-				</div>
-			</div>
-			<div className={styles.actionsRow}>
-				<Button
-					className={styles.actionButton}
-					variant="outlined"
-					color="success"
-					size="sm"
-					onClick={handleGrantAll}
-					disabled={filteredPermissions.length === 0}
-					data-testid="authz-dev-grant-all"
-				>
-					{hasActiveFilter ? 'Grant filtered' : 'Grant all'}
-				</Button>
-				<Button
-					className={styles.actionButton}
-					variant="outlined"
-					color="error"
-					size="sm"
-					onClick={handleDenyAll}
-					disabled={filteredPermissions.length === 0}
-					data-testid="authz-dev-deny-all"
-				>
-					{hasActiveFilter ? 'Deny filtered' : 'Deny all'}
-				</Button>
-				<Button
-					className={styles.actionButton}
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					onClick={handleClearAll}
-					disabled={
-						hasActiveFilter ? filteredOverrideCount === 0 : overrideCount === 0
-					}
-					data-testid="authz-dev-clear-all"
-				>
-					{hasActiveFilter
-						? `Clear filtered (${filteredOverrideCount})`
-						: `Clear all (${overrideCount})`}
-				</Button>
-			</div>
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.module.css

@@ -1,72 +0,0 @@
-.segmented {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	padding: var(--spacing-1);
-	background: var(--l2-background);
-	border: 1px solid var(--l3-border);
-	border-radius: var(--radius-2);
-}
-
-.segment {
-	--button-height: 22px;
-	--button-padding: 0 var(--spacing-3);
-	--button-secondary-ghost-hover-foreground: var(--l2-foreground);
-	--button-variant-ghost-background-color: transparent;
-	border: none;
-	--button-border-radius: calc(var(--radius-2) - 1px);
-	transition:
-		background 120ms ease,
-		color 120ms ease;
-}
-
-.segment:not(.segmentActive):hover {
-	--button-secondary-ghost-hover-foreground: var(--l2-foreground-hover);
-	--button-variant-ghost-background-color: var(--l2-background);
-}
-
-.segmentIcon {
-	display: inline-flex;
-	align-items: center;
-}
-
-.segment.optAuto {
-	--button-secondary-ghost-hover-foreground: var(--l1-foreground);
-	--button-variant-ghost-background-color: var(--l3-background);
-}
-
-.segment.optGranted {
-	--button-secondary-ghost-hover-foreground: var(--success-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-forest) 22%,
-		transparent
-	);
-}
-
-.segment.optDenied {
-	--button-secondary-ghost-hover-foreground: var(--danger-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-cherry) 22%,
-		transparent
-	);
-}
-
-.segment.optDelay {
-	--button-secondary-ghost-hover-foreground: var(--warning-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-amber) 22%,
-		transparent
-	);
-}
-
-.segment.optError {
-	--button-secondary-ghost-hover-foreground: var(--danger-foreground);
-	--button-variant-ghost-background-color: color-mix(
-		in srgb,
-		var(--accent-cherry) 22%,
-		transparent
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.tsx

@@ -1,93 +0,0 @@
-import { Check, Clock, RotateCcw, X, Zap } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { OverrideState } from '../types';
-
-import styles from './OverrideControl.module.css';
-import { Button } from '@signozhq/ui/button';
-
-type OverrideControlProps = {
-	permission: BrandedPermission;
-	value: OverrideState;
-	onSelect: (permission: BrandedPermission, state: OverrideState) => void;
-};
-
-type OverrideOption = {
-	state: OverrideState;
-	label: string;
-	icon: React.ReactNode;
-	activeClassName: string;
-};
-
-const OVERRIDE_OPTIONS: OverrideOption[] = [
-	{
-		state: OverrideState.Reset,
-		label: 'Auto',
-		icon: <RotateCcw size={13} />,
-		activeClassName: styles.optAuto,
-	},
-	{
-		state: OverrideState.Granted,
-		label: 'Grant',
-		icon: <Check size={13} />,
-		activeClassName: styles.optGranted,
-	},
-	{
-		state: OverrideState.Denied,
-		label: 'Deny',
-		icon: <X size={13} />,
-		activeClassName: styles.optDenied,
-	},
-	{
-		state: OverrideState.Delay,
-		label: 'Delay',
-		icon: <Clock size={13} />,
-		activeClassName: styles.optDelay,
-	},
-	{
-		state: OverrideState.Error,
-		label: 'Error',
-		icon: <Zap size={13} />,
-		activeClassName: styles.optError,
-	},
-];
-
-export function OverrideControl({
-	permission,
-	value,
-	onSelect,
-}: OverrideControlProps): JSX.Element {
-	return (
-		<div className={styles.segmented}>
-			{OVERRIDE_OPTIONS.map((option) => {
-				const isActive = value === option.state;
-				return (
-					<Button
-						key={option.state}
-						type="button"
-						aria-pressed={isActive}
-						aria-label={option.label}
-						title={option.label}
-						className={cx(styles.segment, {
-							[styles.segmentActive]: isActive,
-							[option.activeClassName]: isActive,
-						})}
-						variant="ghost"
-						color="secondary"
-						onClick={(): void => onSelect(permission, option.state)}
-						data-testid={`override-${option.state}-${permission}`}
-					>
-						<div className={styles.segmentIcon}>{option.icon}</div>
-						{isActive && (
-							<Typography.Text as="span" size="small" weight="medium">
-								{option.label}
-							</Typography.Text>
-						)}
-					</Button>
-				);
-			})}
-		</div>
-	);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.module.css

@@ -1,68 +0,0 @@
-.permissionRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-6);
-	padding: var(--spacing-2);
-	border: 1px solid transparent;
-	border-radius: var(--radius-2);
-	cursor: pointer;
-	transition:
-		background 120ms ease,
-		border-color 120ms ease;
-}
-
-.permissionRow:hover {
-	background: var(--l2-background-hover);
-}
-
-/* Overridden rows carry a faint full border in the override color. */
-.permissionRow.rowGranted {
-	border-color: color-mix(in srgb, var(--accent-forest) 45%, transparent);
-}
-
-.permissionRow.rowDenied {
-	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
-}
-
-.permissionRow.rowDelay {
-	border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent);
-}
-
-.permissionRow.rowError {
-	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
-}
-
-/* Keyboard selection wins over the override border. */
-.permissionRow.isSelected {
-	border-color: var(--primary);
-}
-
-.permissionInfo {
-	display: flex;
-	flex: 1 1 auto;
-	align-items: baseline;
-	gap: var(--spacing-2);
-	min-width: 0;
-}
-
-.relation {
-	flex: 0 0 auto;
-	--typography-color: var(--accent-primary);
-}
-
-.separator {
-	flex: 0 0 auto;
-}
-
-.object {
-	flex: 0 1 auto;
-	min-width: 0;
-}
-
-.permissionMeta {
-	display: flex;
-	flex: 0 0 auto;
-	align-items: center;
-	gap: var(--spacing-5);
-}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.tsx

@@ -1,114 +0,0 @@
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { memo, useCallback, useMemo } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { parsePermission } from '../../hooks/useAuthZ/utils';
-import { OverrideState, type ObservedPermission } from '../types';
-
-import { OverrideControl } from './OverrideControl';
-
-import styles from './PermissionRow.module.css';
-
-type PermissionRowProps = {
-	observed: ObservedPermission;
-	override: OverrideState | undefined;
-	isSelected: boolean;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onSelect: () => void;
-};
-
-const ROW_OVERRIDE_CLASSES: Record<OverrideState, string | null> = {
-	[OverrideState.Reset]: null,
-	[OverrideState.Granted]: styles.rowGranted,
-	[OverrideState.Denied]: styles.rowDenied,
-	[OverrideState.Delay]: styles.rowDelay,
-	[OverrideState.Error]: styles.rowError,
-};
-
-export const PermissionRow = memo(function PermissionRow({
-	observed,
-	override,
-	isSelected,
-	onSetOverride,
-	onSelect,
-}: PermissionRowProps): JSX.Element {
-	const currentState = override ?? OverrideState.Reset;
-
-	const { relation, objectId } = useMemo(() => {
-		const parsed = parsePermission(observed.permission);
-		const separatorIndex = parsed.object.indexOf(':');
-		return {
-			relation: parsed.relation,
-			objectId:
-				separatorIndex === -1
-					? parsed.object
-					: parsed.object.slice(separatorIndex + 1),
-		};
-	}, [observed.permission]);
-
-	const handleSetOverride = useCallback(
-		(permission: BrandedPermission, state: OverrideState): void => {
-			onSelect();
-			onSetOverride(permission, state);
-		},
-		[onSelect, onSetOverride],
-	);
-
-	let apiColor: BadgeColor = 'secondary';
-	let apiLabel = 'API ?';
-	if (observed.apiValue === true) {
-		apiColor = 'success';
-		apiLabel = 'API ✓';
-	} else if (observed.apiValue === false) {
-		apiColor = 'error';
-		apiLabel = 'API ✗';
-	}
-
-	return (
-		<div
-			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState], {
-				[styles.isSelected]: isSelected,
-			})}
-			data-testid={`permission-row-${observed.permission}`}
-		>
-			<div className={styles.permissionInfo}>
-				<Typography.Text
-					as="span"
-					size="small"
-					weight="medium"
-					className={styles.relation}
-				>
-					{relation}
-				</Typography.Text>
-				<Typography.Text
-					as="span"
-					size="small"
-					color="muted"
-					className={styles.separator}
-				>
-					:
-				</Typography.Text>
-				<Typography.Text
-					as="span"
-					size="small"
-					truncate={1}
-					className={styles.object}
-				>
-					{objectId}
-				</Typography.Text>
-			</div>
-			<div className={styles.permissionMeta}>
-				<Badge variant="outline" color={apiColor}>
-					{apiLabel}
-				</Badge>
-				<OverrideControl
-					permission={observed.permission}
-					value={currentState}
-					onSelect={handleSetOverride}
-				/>
-			</div>
-		</div>
-	);
-});

frontend/src/lib/authz/devtools/AuthZDevModal/useAuthZDevModalData.ts

@@ -1,172 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { parsePermission } from '../../hooks/useAuthZ/utils';
-import type { ObservedPermission, OverrideState } from '../types';
-
-type SelectItem = {
-	value: string;
-	label: string;
-};
-
-type PermissionGroup = {
-	resource: string;
-	items: BrandedPermission[];
-};
-
-type UseAuthZDevModalDataResult = {
-	search: string;
-	setSearch: (search: string) => void;
-	resourceFilter: string;
-	setResourceFilter: (filter: string) => void;
-	observedList: ObservedPermission[];
-	resourceFilterItems: SelectItem[];
-	filteredPermissions: BrandedPermission[];
-	groups: PermissionGroup[];
-	orderedPermissions: BrandedPermission[];
-	indexByPermission: Map<string, number>;
-	hasActiveFilter: boolean;
-	filteredOverrideCount: number;
-	overrideCount: number;
-};
-
-export function useAuthZDevModalData(
-	observed: Record<string, ObservedPermission>,
-	overrides: Record<string, OverrideState>,
-): UseAuthZDevModalDataResult {
-	const [search, setSearch] = useState('');
-	const [resourceFilter, setResourceFilter] = useState<string>('all');
-
-	const observedList = useMemo(
-		() =>
-			Object.values(observed).sort((a, b) =>
-				a.permission.localeCompare(b.permission),
-			),
-		[observed],
-	);
-
-	const resources = useMemo(() => {
-		const resourceSet = new Set<string>();
-		for (const obs of observedList) {
-			const { object } = parsePermission(obs.permission);
-			const resource = object.split(':')[0];
-			resourceSet.add(resource);
-		}
-		return Array.from(resourceSet).sort();
-	}, [observedList]);
-
-	const resourceFilterItems = useMemo<SelectItem[]>(
-		() => [
-			{ value: 'all', label: 'All resources' },
-			...resources.map((resource) => ({
-				value: resource,
-				label: resource,
-			})),
-		],
-		[resources],
-	);
-
-	const filteredPermissions = useMemo(() => {
-		let filtered = observedList;
-
-		if (search) {
-			const searchLower = search.toLowerCase();
-			filtered = filtered.filter((obs) =>
-				obs.permission.toLowerCase().includes(searchLower),
-			);
-		}
-
-		if (resourceFilter !== 'all') {
-			filtered = filtered.filter((obs) => {
-				const { object } = parsePermission(obs.permission);
-				const resource = object.split(':')[0];
-				return resource === resourceFilter;
-			});
-		}
-
-		return filtered.map((obs) => obs.permission);
-	}, [observedList, search, resourceFilter]);
-
-	const { groups, orderedPermissions } = useMemo(() => {
-		const groupMap = new Map<string, BrandedPermission[]>();
-		for (const permission of filteredPermissions) {
-			const { object } = parsePermission(permission);
-			const resource = object.split(':')[0] || 'other';
-			const bucket = groupMap.get(resource);
-			if (bucket) {
-				bucket.push(permission);
-			} else {
-				groupMap.set(resource, [permission]);
-			}
-		}
-
-		const sortItems = (items: BrandedPermission[]): BrandedPermission[] =>
-			[...items].sort((a, b) => {
-				const objA = parsePermission(a).object;
-				const objB = parsePermission(b).object;
-				const idA = objA.split(':')[1] ?? '';
-				const idB = objB.split(':')[1] ?? '';
-				const isWildcardA = idA === '*';
-				const isWildcardB = idB === '*';
-
-				// Wildcards first
-				if (isWildcardA && !isWildcardB) {
-					return -1;
-				}
-				if (!isWildcardA && isWildcardB) {
-					return 1;
-				}
-
-				// Then by object ID, then by full permission
-				const idCompare = idA.localeCompare(idB);
-				if (idCompare !== 0) {
-					return idCompare;
-				}
-				return a.localeCompare(b);
-			});
-
-		const sortedGroups = Array.from(groupMap, ([resource, items]) => ({
-			resource,
-			items: sortItems(items),
-		})).sort((a, b) => a.resource.localeCompare(b.resource));
-		return {
-			groups: sortedGroups,
-			orderedPermissions: sortedGroups.flatMap((group) => group.items),
-		};
-	}, [filteredPermissions]);
-
-	const indexByPermission = useMemo(() => {
-		const map = new Map<string, number>();
-		orderedPermissions.forEach((permission, index) => {
-			map.set(permission, index);
-		});
-		return map;
-	}, [orderedPermissions]);
-
-	const hasActiveFilter = search !== '' || resourceFilter !== 'all';
-
-	const filteredOverrideCount = useMemo(() => {
-		if (!hasActiveFilter) {
-			return Object.keys(overrides).length;
-		}
-		return filteredPermissions.filter((p) => p in overrides).length;
-	}, [hasActiveFilter, overrides, filteredPermissions]);
-
-	const overrideCount = Object.keys(overrides).length;
-
-	return {
-		search,
-		setSearch,
-		resourceFilter,
-		setResourceFilter,
-		observedList,
-		resourceFilterItems,
-		filteredPermissions,
-		groups,
-		orderedPermissions,
-		indexByPermission,
-		hasActiveFilter,
-		filteredOverrideCount,
-		overrideCount,
-	};
-}

frontend/src/lib/authz/devtools/AuthZDevModal/useModalKeyboard.ts

@@ -1,174 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import type { BrandedPermission } from '../../hooks/useAuthZ/types';
-import { OverrideState, OVERRIDE_CYCLE } from '../types';
-
-type UseModalKeyboardOptions = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	onClose: () => void;
-	searchInputRef: React.RefObject<HTMLInputElement | null>;
-};
-
-type UseModalKeyboardResult = {
-	selectedIndex: number;
-	setSelectedIndex: (index: number) => void;
-};
-
-type KeyContext = {
-	permissions: BrandedPermission[];
-	overrides: Record<string, OverrideState>;
-	selectedIndex: number;
-	setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
-	onCycle: (permission: BrandedPermission) => void;
-	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
-};
-
-const ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
-
-const NUMBER_KEY_INDEX: Record<string, number> = {
-	'1': 0,
-	'2': 1,
-	'3': 2,
-	'4': 3,
-	'5': 4,
-};
-
-function stepOverrideState(
-	current: OverrideState,
-	direction: number,
-): OverrideState {
-	const currentIndex = OVERRIDE_CYCLE.indexOf(current);
-	const nextIndex =
-		(currentIndex + direction + OVERRIDE_CYCLE.length) % OVERRIDE_CYCLE.length;
-	return OVERRIDE_CYCLE[nextIndex];
-}
-
-// Arrow keys stay active even while the search input is focused so the list can
-// be driven without leaving the search field.
-function handleArrowKey(key: string, ctx: KeyContext): void {
-	if (key === 'ArrowDown') {
-		ctx.setSelectedIndex((prev) =>
-			Math.min(prev + 1, ctx.permissions.length - 1),
-		);
-		return;
-	}
-	if (key === 'ArrowUp') {
-		ctx.setSelectedIndex((prev) => Math.max(prev - 1, 0));
-		return;
-	}
-	const selected = ctx.permissions[ctx.selectedIndex];
-	if (!selected) {
-		return;
-	}
-	const direction = key === 'ArrowLeft' ? -1 : 1;
-	ctx.onSetOverride(
-		selected,
-		stepOverrideState(ctx.overrides[selected] ?? OverrideState.Reset, direction),
-	);
-}
-
-// Number and space/enter shortcuts type into the search field, so they only run
-// when it is not focused. Returns whether the key was handled.
-function handleActionKey(key: string, ctx: KeyContext): boolean {
-	const selected = ctx.permissions[ctx.selectedIndex];
-	const numberIndex = NUMBER_KEY_INDEX[key];
-	if (numberIndex !== undefined) {
-		if (selected) {
-			ctx.onSetOverride(selected, OVERRIDE_CYCLE[numberIndex]);
-		}
-		return true;
-	}
-	if (key === ' ' || key === 'Enter') {
-		if (selected) {
-			ctx.onCycle(selected);
-		}
-		return true;
-	}
-	return false;
-}
-
-export function useModalKeyboard({
-	permissions,
-	overrides,
-	onCycle,
-	onSetOverride,
-	onClose,
-	searchInputRef,
-}: UseModalKeyboardOptions): UseModalKeyboardResult {
-	// Start with no selection (-1) to avoid accidental override changes from
-	// Enter keypress that opened the modal also triggering cycleOverride.
-	const [selectedIndex, setSelectedIndex] = useState(-1);
-
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent) => {
-			const isSearchFocused = document.activeElement === searchInputRef.current;
-
-			if (e.key === 'Escape') {
-				e.preventDefault();
-				onClose();
-				return;
-			}
-
-			if (e.key === '/') {
-				if (!isSearchFocused) {
-					e.preventDefault();
-					searchInputRef.current?.focus();
-				}
-				return;
-			}
-
-			const ctx: KeyContext = {
-				permissions,
-				overrides,
-				selectedIndex,
-				setSelectedIndex,
-				onCycle,
-				onSetOverride,
-			};
-
-			if (ARROW_KEYS.has(e.key)) {
-				e.preventDefault();
-				handleArrowKey(e.key, ctx);
-				return;
-			}
-
-			if (isSearchFocused) {
-				return;
-			}
-
-			if (handleActionKey(e.key, ctx)) {
-				e.preventDefault();
-			}
-		},
-		[
-			permissions,
-			overrides,
-			selectedIndex,
-			onCycle,
-			onSetOverride,
-			onClose,
-			searchInputRef,
-		],
-	);
-
-	useEffect((): (() => void) => {
-		window.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [handleKeyDown]);
-
-	useEffect((): void => {
-		if (selectedIndex >= permissions.length && permissions.length > 0) {
-			setSelectedIndex(permissions.length - 1);
-		}
-	}, [permissions.length, selectedIndex]);
-
-	return {
-		selectedIndex,
-		setSelectedIndex,
-	};
-}

frontend/src/lib/authz/devtools/types.ts

@@ -1,46 +0,0 @@
-import type { BrandedPermission } from '../hooks/useAuthZ/types';
-
-export enum OverrideState {
-	Granted = 'granted',
-	Denied = 'denied',
-	Delay = 'delay',
-	Error = 'error',
-	Reset = 'reset',
-}
-
-export type ObservedPermission = {
-	permission: BrandedPermission;
-	apiValue: boolean | null;
-	lastSeen: number;
-};
-
-export type PermissionOverride = {
-	permission: BrandedPermission;
-	state: OverrideState;
-};
-
-export type AuthZDevStore = {
-	isModalOpen: boolean;
-	observed: Record<string, ObservedPermission>;
-	overrides: Record<string, OverrideState>;
-
-	openModal: () => void;
-	closeModal: () => void;
-	toggleModal: () => void;
-
-	registerObserved: (permission: BrandedPermission, apiValue: boolean) => void;
-	setOverride: (permission: BrandedPermission, state: OverrideState) => void;
-	clearOverride: (permission: BrandedPermission) => void;
-	clearAllOverrides: (permissions?: BrandedPermission[]) => void;
-	grantAll: (permissions?: BrandedPermission[]) => void;
-	denyAll: (permissions?: BrandedPermission[]) => void;
-	cycleOverride: (permission: BrandedPermission) => void;
-};
-
-export const OVERRIDE_CYCLE: OverrideState[] = [
-	OverrideState.Reset,
-	OverrideState.Granted,
-	OverrideState.Denied,
-	OverrideState.Delay,
-	OverrideState.Error,
-];

frontend/src/lib/authz/devtools/useAuthZDevStore.ts

@@ -1,137 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import type { BrandedPermission } from '../hooks/useAuthZ/types';
-import { OverrideState, OVERRIDE_CYCLE, type AuthZDevStore } from './types';
-import { getScopedKey } from 'utils/storage';
-
-export const useAuthZDevStore = create<AuthZDevStore>()(
-	persist(
-		(set, get) => ({
-			isModalOpen: false,
-			observed: {},
-			overrides: {},
-
-			openModal: (): void => {
-				set({ isModalOpen: true });
-			},
-
-			closeModal: (): void => {
-				set({ isModalOpen: false });
-			},
-
-			toggleModal: (): void => {
-				set((state) => ({ isModalOpen: !state.isModalOpen }));
-			},
-
-			registerObserved: (
-				permission: BrandedPermission,
-				apiValue: boolean,
-			): void => {
-				set((state) => ({
-					observed: {
-						...state.observed,
-						[permission]: {
-							permission,
-							apiValue,
-							lastSeen: Date.now(),
-						},
-					},
-				}));
-			},
-
-			setOverride: (permission: BrandedPermission, state: OverrideState): void => {
-				if (state === OverrideState.Reset) {
-					get().clearOverride(permission);
-					return;
-				}
-				set((s) => ({
-					overrides: {
-						...s.overrides,
-						[permission]: state,
-					},
-				}));
-			},
-
-			clearOverride: (permission: BrandedPermission): void => {
-				set((state) => {
-					const { [permission]: _, ...rest } = state.overrides;
-					return { overrides: rest };
-				});
-			},
-
-			clearAllOverrides: (permissions?: BrandedPermission[]): void => {
-				if (permissions) {
-					set((state) => {
-						const newOverrides = { ...state.overrides };
-						for (const permission of permissions) {
-							delete newOverrides[permission];
-						}
-						return { overrides: newOverrides };
-					});
-				} else {
-					set({ overrides: {} });
-				}
-			},
-
-			grantAll: (permissions?: BrandedPermission[]): void => {
-				set((state) => {
-					const keys = permissions ?? Object.keys(state.observed);
-					const newOverrides: Record<string, OverrideState> = {
-						...state.overrides,
-					};
-					for (const key of keys) {
-						newOverrides[key] = OverrideState.Granted;
-					}
-					return { overrides: newOverrides };
-				});
-			},
-
-			denyAll: (permissions?: BrandedPermission[]): void => {
-				set((state) => {
-					const keys = permissions ?? Object.keys(state.observed);
-					const newOverrides: Record<string, OverrideState> = {
-						...state.overrides,
-					};
-					for (const key of keys) {
-						newOverrides[key] = OverrideState.Denied;
-					}
-					return { overrides: newOverrides };
-				});
-			},
-
-			cycleOverride: (permission: BrandedPermission): void => {
-				const currentOverride = get().overrides[permission] ?? OverrideState.Reset;
-				const currentIndex = OVERRIDE_CYCLE.indexOf(currentOverride);
-				const nextIndex = (currentIndex + 1) % OVERRIDE_CYCLE.length;
-				const nextState = OVERRIDE_CYCLE[nextIndex];
-				get().setOverride(permission, nextState);
-			},
-		}),
-		{
-			name: `@signoz/${getScopedKey('authz-dev-overrides')}`,
-			partialize: (state) => {
-				// Clear apiValue for permissions without active override (auto mode)
-				// since the API value can change between sessions
-				const observed: typeof state.observed = {};
-				for (const [key, obs] of Object.entries(state.observed)) {
-					observed[key] = {
-						...obs,
-						apiValue: key in state.overrides ? obs.apiValue : null,
-					};
-				}
-				return {
-					observed,
-					overrides: state.overrides,
-				};
-			},
-		},
-	),
-);
-
-export const openAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().openModal();
-export const closeAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().closeModal();
-export const toggleAuthZDevModal = (): void =>
-	useAuthZDevStore.getState().toggleModal();

frontend/src/lib/authz/devtools/useAuthZQueryInvalidation.ts

@@ -1,28 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useQueryClient } from 'react-query';
-
-import type { OverrideState } from './types';
-
-type Overrides = Record<string, OverrideState>;
-
-export function useAuthZQueryInvalidation(overrides: Overrides): void {
-	const queryClient = useQueryClient();
-	const prevOverridesRef = useRef<Overrides>(overrides);
-
-	useEffect(() => {
-		const prevOverrides = prevOverridesRef.current;
-		prevOverridesRef.current = overrides;
-
-		const allKeys = new Set([
-			...Object.keys(prevOverrides),
-			...Object.keys(overrides),
-		]);
-
-		for (const key of allKeys) {
-			if (prevOverrides[key] !== overrides[key]) {
-				// Reset query to initial state and trigger refetch for active observers
-				void queryClient.resetQueries(['authz', key]);
-			}
-		}
-	}, [overrides, queryClient]);
-}

frontend/src/lib/authz/hooks/useAuthZ/types.ts

@@ -89,13 +89,5 @@ export type UseAuthZResult = {
 	isFetching: boolean;
 	error: Error | null;
 	permissions: AuthZCheckResponse | null;
-	/**
-	 * True if every check is granted. False while loading or on error.
-	 */
-	allowed: boolean;
-	/**
-	 * Checks that resolved as not granted (empty while loading/error).
-	 */
-	deniedPermissions: BrandedPermission[];
 	refetchPermissions: () => void;
 };

frontend/src/lib/authz/hooks/useAuthZ/useAuthZ.authz.test.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react';
-import { renderHook, waitFor, act } from '@testing-library/react';
-import { useQueryClient } from 'react-query';
+import { renderHook, waitFor } from '@testing-library/react';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { AllTheProviders } from 'tests/test-utils';
@@ -47,16 +46,12 @@ describe('useAuthZ', () => {
 
 		expect(result.current.isLoading).toBe(true);
 		expect(result.current.permissions).toBeNull();
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
 		});
 
 		expect(result.current.permissions).toStrictEqual(expectedResponse);
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([permission2]);
 	});
 
 	it('should return error and null permissions when API errors', async () => {
@@ -78,89 +73,6 @@ describe('useAuthZ', () => {
 
 		expect(result.current.error).not.toBeNull();
 		expect(result.current.permissions).toBeNull();
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
-	});
-
-	it('should set allowed to true when all permissions are granted', async () => {
-		const permission1 = buildPermission('read', 'role:*');
-		const permission2 = buildPermission('update', 'role:123');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [true, true])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.allowed).toBe(true);
-		expect(result.current.deniedPermissions).toStrictEqual([]);
-	});
-
-	it('should collect all denied permissions when multiple are denied', async () => {
-		const permission1 = buildPermission('read', 'role:*');
-		const permission2 = buildPermission('update', 'role:123');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [false, false])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.deniedPermissions).toStrictEqual([
-			permission1,
-			permission2,
-		]);
-	});
-
-	it('should not fetch when enabled is false', async () => {
-		let requestCount = 0;
-		const permission = buildPermission('read', 'role:*');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount += 1;
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const { result } = renderHook(
-			() => useAuthZ([permission], { enabled: false }),
-			{ wrapper },
-		);
-
-		await waitFor(() => {
-			expect(result.current.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(0);
-		expect(result.current.allowed).toBe(false);
-		expect(result.current.permissions).toStrictEqual({});
 	});
 
 	it('should refetch when permissions array changes', async () => {
@@ -562,120 +474,3 @@ describe('useAuthZ', () => {
 		expect(result2.current.permissions).not.toHaveProperty(permission1);
 	});
 });
-
-describe('useAuthZ cache invalidation', () => {
-	it('should re-render with updated data when query is invalidated', async () => {
-		const permission = buildPermission('read', 'role:*');
-
-		let requestCount = 0;
-		let shouldGrant = true;
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [shouldGrant])),
-				);
-			}),
-		);
-
-		const { result } = renderHook(
-			() => {
-				const queryClient = useQueryClient();
-				const authz = useAuthZ([permission]);
-				return { authz, queryClient };
-			},
-			{ wrapper },
-		);
-
-		await waitFor(() => {
-			expect(result.current.authz.isLoading).toBe(false);
-		});
-
-		expect(requestCount).toBe(1);
-		expect(result.current.authz.allowed).toBe(true);
-		expect(result.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: true },
-		});
-
-		// Change server response and reset query (forces refetch)
-		shouldGrant = false;
-
-		await act(async () => {
-			await result.current.queryClient.resetQueries(['authz', permission]);
-		});
-
-		await waitFor(() => {
-			expect(result.current.authz.allowed).toBe(false);
-		});
-
-		expect(requestCount).toBe(2);
-		expect(result.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-	});
-
-	it('should re-render all components using the same permission when invalidated', async () => {
-		const permission = buildPermission('update', 'role:123');
-
-		let requestCount = 0;
-		let shouldGrant = true;
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount++;
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(authzMockResponse(payload, [shouldGrant])),
-				);
-			}),
-		);
-
-		// Two separate hooks using the same permission
-		const { result: result1 } = renderHook(
-			() => {
-				const queryClient = useQueryClient();
-				const authz = useAuthZ([permission]);
-				return { authz, queryClient };
-			},
-			{ wrapper },
-		);
-
-		const { result: result2 } = renderHook(() => useAuthZ([permission]), {
-			wrapper,
-		});
-
-		await waitFor(() => {
-			expect(result1.current.authz.isLoading).toBe(false);
-			expect(result2.current.isLoading).toBe(false);
-		});
-
-		// Both should show granted, single batched request
-		expect(requestCount).toBe(1);
-		expect(result1.current.authz.allowed).toBe(true);
-		expect(result2.current.allowed).toBe(true);
-
-		// Change server response and reset query (forces refetch)
-		shouldGrant = false;
-
-		await act(async () => {
-			await result1.current.queryClient.resetQueries(['authz', permission]);
-		});
-
-		// Both hooks should update
-		await waitFor(() => {
-			expect(result1.current.authz.allowed).toBe(false);
-			expect(result2.current.allowed).toBe(false);
-		});
-
-		expect(result1.current.authz.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-		expect(result2.current.permissions).toStrictEqual({
-			[permission]: { isGranted: false },
-		});
-	});
-});

frontend/src/lib/authz/hooks/useAuthZ/useAuthZ.tsx

@@ -1,15 +1,13 @@
 import { useCallback, useMemo } from 'react';
 import { useQueries } from 'react-query';
-import { isAxiosError } from 'axios';
 import { authzCheck } from 'api/generated/services/authz';
 import type {
 	CoretypesObjectDTO,
 	AuthtypesTransactionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { IS_DEV, MODE } from 'lib/env';
 
 import { AUTHZ_CACHE_TIME, SINGLE_FLIGHT_WAIT_TIME_MS } from './constants';
-import type {
+import {
 	AuthZCheckResponse,
 	BrandedPermission,
 	UseAuthZOptions,
@@ -19,59 +17,6 @@ import {
 	gettableTransactionToPermission,
 	permissionToTransactionDto,
 } from './utils';
-import { OverrideState } from '../../devtools/types';
-
-let devStoreRef:
-	| typeof import('../../devtools/useAuthZDevStore').useAuthZDevStore
-	| null = null;
-
-if (IS_DEV) {
-	void import('../../devtools/useAuthZDevStore').then((mod) => {
-		devStoreRef = mod.useAuthZDevStore;
-		return mod;
-	});
-}
-
-const DEV_DELAY_MS = 2000;
-
-function getDevOverride(permission: BrandedPermission): OverrideState | null {
-	if (!IS_DEV || !devStoreRef) {
-		return null;
-	}
-	return devStoreRef.getState().overrides[permission] ?? null;
-}
-
-async function applyDevOverrideToQuery(
-	permission: BrandedPermission,
-	fetchFn: () => Promise<AuthZCheckResponse>,
-): Promise<AuthZCheckResponse> {
-	const override = getDevOverride(permission);
-
-	if (override === OverrideState.Error) {
-		throw new Error(`[AuthZ DevTools] Simulated error for: ${permission}`);
-	}
-
-	if (override === OverrideState.Delay) {
-		await new Promise((resolve) => setTimeout(resolve, DEV_DELAY_MS));
-	}
-
-	const response = await fetchFn();
-
-	if (IS_DEV && devStoreRef) {
-		const apiValue = response[permission]?.isGranted ?? false;
-		devStoreRef.getState().registerObserved(permission, apiValue);
-	}
-
-	if (override === OverrideState.Granted) {
-		return { [permission]: { isGranted: true } };
-	}
-
-	if (override === OverrideState.Denied) {
-		return { [permission]: { isGranted: false } };
-	}
-
-	return response;
-}
 
 let ctx: Promise<AuthZCheckResponse> | null;
 let pendingPermissions: BrandedPermission[] = [];
@@ -82,11 +27,10 @@ function dispatchPermission(
 	pendingPermissions.push(permission);
 
 	if (!ctx) {
-		let promiseResolve: (v: AuthZCheckResponse) => void,
-			promiseReject: (reason?: unknown) => void;
-		ctx = new Promise<AuthZCheckResponse>((resolve, reject) => {
-			promiseResolve = resolve;
-			promiseReject = reject;
+		let resolve: (v: AuthZCheckResponse) => void, reject: (reason?: any) => void;
+		ctx = new Promise<AuthZCheckResponse>((r, re) => {
+			resolve = r;
+			reject = re;
 		});
 
 		setTimeout(() => {
@@ -94,9 +38,7 @@ function dispatchPermission(
 			pendingPermissions = [];
 			ctx = null;
 
-			fetchManyPermissions(copiedPermissions)
-				.then(promiseResolve)
-				.catch(promiseReject);
+			fetchManyPermissions(copiedPermissions).then(resolve).catch(reject);
 		}, SINGLE_FLIGHT_WAIT_TIME_MS);
 	}
 
@@ -143,50 +85,19 @@ export function useAuthZ(
 			return {
 				queryKey: ['authz', permission],
 				cacheTime: AUTHZ_CACHE_TIME,
-				staleTime: AUTHZ_CACHE_TIME,
-				// Keep errored state in cache instead of refetching when new observers subscribe
-				retryOnMount: false,
-				// Only override retry in non-test mode to avoid interfering with test-utils QueryClient defaults
-				...(MODE !== 'test' && {
-					retry: (failureCount: number, error: unknown): boolean => {
-						// Don't retry simulated dev errors - they will always fail
-						if (
-							error instanceof Error &&
-							error.message.includes('[AuthZ DevTools]')
-						) {
-							return false;
-						}
-						// Don't retry server errors (5xx) - they won't recover
-						if (
-							isAxiosError(error) &&
-							error.response?.status &&
-							error.response.status >= 500
-						) {
-							return false;
-						}
-						return failureCount < 3;
-					},
-				}),
 				refetchOnMount: false,
 				refetchIntervalInBackground: false,
 				refetchOnWindowFocus: false,
 				refetchOnReconnect: true,
 				enabled,
 				queryFn: async (): Promise<AuthZCheckResponse> => {
-					const fetchFn = async (): Promise<AuthZCheckResponse> => {
-						const response = await dispatchPermission(permission);
-						return {
-							[permission]: {
-								isGranted: response[permission].isGranted,
-							},
-						};
+					const response = await dispatchPermission(permission);
+
+					return {
+						[permission]: {
+							isGranted: response[permission].isGranted,
+						},
 					};
-
-					if (IS_DEV) {
-						return applyDevOverrideToQuery(permission, fetchFn);
-					}
-
-					return fetchFn();
 				},
 			};
 		}),
@@ -196,7 +107,6 @@ export function useAuthZ(
 		() => queryResults.some((q) => q.isLoading),
 		[queryResults],
 	);
-
 	const isFetching = useMemo(
 		() => queryResults.some((q) => q.isFetching),
 		[queryResults],
@@ -229,31 +139,15 @@ export function useAuthZ(
 
 	const refetchPermissions = useCallback(() => {
 		for (const query of queryResults) {
-			void query.refetch();
+			query.refetch();
 		}
 	}, [queryResults]);
 
-	const allowed = useMemo(() => {
-		if (isLoading || error || !data) {
-			return false;
-		}
-		return permissions.every((check) => data[check]?.isGranted === true);
-	}, [permissions, data, isLoading, error]);
-
-	const deniedPermissions = useMemo(() => {
-		if (!data) {
-			return [];
-		}
-		return permissions.filter((check) => data[check]?.isGranted !== true);
-	}, [permissions, data]);
-
 	return {
 		isLoading,
 		isFetching,
 		error,
 		permissions: data ?? null,
-		allowed,
-		deniedPermissions,
 		refetchPermissions,
 	};
 }

frontend/src/lib/authz/utils/authz-test-utils.ts

@@ -149,8 +149,6 @@ export function mockUseAuthZGrantAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: true }]),
 		) as UseAuthZResult['permissions'],
-		allowed: true,
-		deniedPermissions: [],
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -166,8 +164,6 @@ export function mockUseAuthZDenyAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: false }]),
 		) as UseAuthZResult['permissions'],
-		allowed: false,
-		deniedPermissions: permissions,
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -178,23 +174,16 @@ export function mockUseAuthZGrantByPrefix(
 	permissions: BrandedPermission[],
 	options?: UseAuthZOptions,
 ) => UseAuthZResult {
-	return (permissions, _options) => {
-		const denied = permissions.filter(
-			(p) => !prefixes.some((prefix) => p.startsWith(prefix)),
-		);
-		return {
-			isLoading: false,
-			isFetching: false,
-			error: null,
-			permissions: Object.fromEntries(
-				permissions.map((p) => [
-					p,
-					{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
-				]),
-			) as UseAuthZResult['permissions'],
-			allowed: denied.length === 0,
-			deniedPermissions: denied,
-			refetchPermissions: jest.fn(),
-		};
-	};
+	return (permissions, _options) => ({
+		isLoading: false,
+		isFetching: false,
+		error: null,
+		permissions: Object.fromEntries(
+			permissions.map((p) => [
+				p,
+				{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
+			]),
+		) as UseAuthZResult['permissions'],
+		refetchPermissions: jest.fn(),
+	});
 }

frontend/src/lib/env.ts

@@ -1,3 +0,0 @@
-export const IS_DEV = import.meta.env.DEV;
-export const IS_PROD = import.meta.env.PROD;
-export const MODE = import.meta.env.MODE;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -32,6 +32,34 @@
 	cursor: help;
 }
 
+.publicLink {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+
+.lockButton {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+
+.lockButton:disabled {
+	cursor: default;
+}
+
 .divider {
 	flex-shrink: 0;
 	width: 1px;

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

@@ -1,5 +1,12 @@
 import { KeyboardEvent } from 'react';
-import { Check, Globe, LockKeyhole, SolidInfoCircle, X } from '@signozhq/icons';
+import {
+	Check,
+	Globe,
+	LockKeyhole,
+	LockKeyholeOpen,
+	SolidInfoCircle,
+	X,
+} from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
@@ -7,6 +14,7 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { isEmpty } from 'lodash-es';
+import { openInNewTab } from 'utils/navigation';
 
 import styles from './DashboardInfo.module.scss';
 import { useVisibleTagCount } from './useVisibleTagCount';
@@ -18,7 +26,13 @@ interface DashboardInfoProps {
 	tags: string[];
 	description: string;
 	isPublicDashboard: boolean;
+	/** Absolute URL of the public dashboard page; opened when the globe is clicked. */
+	publicUrl: string;
 	isDashboardLocked: boolean;
+	/** Whether to render the lock toggle at all (hidden for never-locked dashboards). */
+	showLockToggle: boolean;
+	/** When provided, the lock icon toggles lock/unlock (author/admin only). */
+	onToggleLock?: () => void;
 	isEditing: boolean;
 	draft: string;
 	onDraftChange: (value: string) => void;
@@ -33,7 +47,10 @@ function DashboardInfo({
 	tags,
 	description,
 	isPublicDashboard,
+	publicUrl,
 	isDashboardLocked,
+	showLockToggle,
+	onToggleLock,
 	isEditing,
 	draft,
 	onDraftChange,
@@ -51,6 +68,17 @@ function DashboardInfo({
 	const visibleTags = needsOverflow ? tags.slice(0, visibleCount) : tags;
 	const remainingTags = needsOverflow ? tags.slice(visibleCount) : [];
 
+	let lockTooltip: string;
+	if (onToggleLock) {
+		lockTooltip = isDashboardLocked
+			? 'Locked — click to unlock'
+			: 'Unlocked — click to lock';
+	} else {
+		lockTooltip = isDashboardLocked
+			? 'This dashboard is locked'
+			: 'This dashboard is unlocked';
+	}
+
 	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
 		if (event.key === 'Enter') {
 			event.preventDefault();
@@ -101,7 +129,7 @@ function DashboardInfo({
 					</Button>
 				</div>
 			) : (
-				<TooltipSimple title={title}>
+				<TooltipSimple title={title} disableHoverableContent>
 					<Typography.Text
 						className={cx(styles.dashboardTitle, {
 							[styles.dashboardTitleHover]: canEdit,
@@ -115,7 +143,7 @@ function DashboardInfo({
 			)}
 
 			{hasDescription && (
-				<TooltipSimple title={description}>
+				<TooltipSimple title={description} disableHoverableContent>
 					<SolidInfoCircle
 						className={styles.descriptionIcon}
 						size={14}
@@ -125,14 +153,44 @@ function DashboardInfo({
 			)}
 
 			{isPublicDashboard && (
-				<TooltipSimple title="This dashboard is publicly accessible">
-					<Globe size={14} />
+				<TooltipSimple
+					title="This dashboard is publicly accessible. Click to open the public page."
+					disableHoverableContent
+				>
+					<Button
+						type="button"
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						className={styles.publicLink}
+						aria-label="Open public dashboard"
+						testId="dashboard-public-link"
+						onClick={(): void => openInNewTab(publicUrl)}
+					>
+						<Globe size={14} />
+					</Button>
 				</TooltipSimple>
 			)}
 
-			{isDashboardLocked && (
-				<TooltipSimple title="This dashboard is locked">
-					<LockKeyhole size={14} />
+			{showLockToggle && (
+				<TooltipSimple title={lockTooltip} disableHoverableContent>
+					<Button
+						type="button"
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						className={styles.lockButton}
+						aria-label={isDashboardLocked ? 'Unlock dashboard' : 'Lock dashboard'}
+						testId="dashboard-lock"
+						disabled={!onToggleLock}
+						onClick={onToggleLock}
+					>
+						{isDashboardLocked ? (
+							<LockKeyhole size={14} />
+						) : (
+							<LockKeyholeOpen size={14} />
+						)}
+					</Button>
 				</TooltipSimple>
 			)}
 
@@ -145,14 +203,14 @@ function DashboardInfo({
 						data-testid="dashboard-tags"
 					>
 						{visibleTags.map((tag) => (
-							<Badge key={tag} color="warning" variant="outline">
+							<Badge key={tag} color="sienna" variant="outline">
 								{tag}
 							</Badge>
 						))}
 						{remainingTags.length > 0 && (
 							<TooltipSimple title={remainingTags.join(', ')}>
 								<Badge
-									color="warning"
+									color="sienna"
 									variant="outline"
 									data-testid="dashboard-tags-overflow"
 								>

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
@@ -15,9 +15,12 @@ import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { USER_ROLES } from 'types/roles';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 import { useCreatePanel } from '../hooks/useCreatePanel';
 import { useOptimisticPatch } from '../hooks/useOptimisticPatch';
+import { usePublicDashboardMeta } from '../DashboardSettings/PublicDashboard/usePublicDashboardMeta';
 import PanelTypeSelectionModal from '../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
@@ -36,7 +39,15 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const { dashboard, handle, refetch } = props;
 
 	const id = dashboard.id;
-	const isDashboardLocked = !!dashboard.locked;
+
+	// Session-local lock state: the toggle appears once locked and persists for the page.
+	const [isDashboardLocked, setIsDashboardLocked] = useState(!!dashboard.locked);
+	const [showLockToggle, setShowLockToggle] = useState(!!dashboard.locked);
+	useEffect(() => {
+		setIsDashboardLocked(!!dashboard.locked);
+		setShowLockToggle(!!dashboard.locked);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard.id]);
 
 	const title = dashboard.spec.display.name;
 	const description = dashboard.spec.display.description ?? '';
@@ -58,20 +69,36 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
 
+	// Author/admin can lock-unlock (mirrors the Actions menu gate); integration-owned
+	// dashboards are never toggleable.
+	const canToggleLock =
+		(isAuthor || user.role === USER_ROLES.ADMIN) &&
+		dashboard.createdBy !== 'integration';
+
+	// Public-sharing meta (deduped react-query read); drives the header globe.
+	const { isPublic, publicMeta } = usePublicDashboardMeta(id);
+	const publicUrl = getAbsoluteUrl(publicMeta?.publicPath ?? '');
+
 	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
+		const next = !isDashboardLocked;
+		setIsDashboardLocked(next);
+		if (next) {
+			setShowLockToggle(true);
+		}
 		try {
-			if (isDashboardLocked) {
-				await unlockDashboardV2({ id });
-				toast.success('Dashboard unlocked');
-			} else {
+			if (next) {
 				await lockDashboardV2({ id });
 				toast.success('Dashboard locked');
+			} else {
+				await unlockDashboardV2({ id });
+				toast.success('Dashboard unlocked');
 			}
 			refetch();
 		} catch (error) {
+			setIsDashboardLocked(!next);
 			showErrorModal(error as APIError);
 		}
 	}, [id, isDashboardLocked, refetch, showErrorModal]);
@@ -119,8 +146,11 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 					image={image}
 					tags={tags}
 					description={description}
-					isPublicDashboard={false}
+					isPublicDashboard={isPublic}
+					publicUrl={publicUrl}
 					isDashboardLocked={isDashboardLocked}
+					showLockToggle={showLockToggle}
+					onToggleLock={canToggleLock ? handleLockDashboardToggle : undefined}
 					isEditing={isEditing}
 					draft={draft}
 					onDraftChange={setDraft}

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

@@ -2,6 +2,7 @@
 	display: flex;
 	align-items: flex-start;
 	gap: 8px;
+	margin-top: 12px;
 	padding-top: 2px;
 	color: var(--l3-foreground);
 }

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

@@ -1,19 +1,18 @@
 import { Typography } from '@signozhq/ui/typography';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { EQueryType } from 'types/common/dashboard';
+import type { EQueryType } from 'types/common/dashboard';
 
 import type { PanelKind } from '../../../Panels/types/panelKind';
-import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
 import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
 
 import styles from './PanelTypeSwitcher.module.scss';
-import { getPanelTypeDisabledReason } from './utils';
+import { usePanelTypeSelectItems } from './usePanelTypeSelectItems';
 
 interface PanelTypeSwitcherProps {
 	/** The current panel kind (selected value). */
 	panelKind: PanelKind;
-	/** Active query type — a kind that can't be authored in it is disabled (e.g. List is Query-Builder-only, so PromQL/ClickHouse disable it). Defaults to Query Builder. */
-	queryType?: EQueryType;
+	/** Active query type — a kind that can't be authored in it is disabled (e.g. List is Query-Builder-only, so PromQL/ClickHouse disable it). */
+	queryType: EQueryType;
 	/** Panel's current signal — also gates the disabled rule (List needs logs/traces, not metrics). */
 	signal?: TelemetrytypesSignalDTO;
 	onChange: (kind: PanelKind) => void;
@@ -31,22 +30,7 @@ function PanelTypeSwitcher({
 	signal,
 	onChange,
 }: PanelTypeSwitcherProps): JSX.Element {
-	const items = PANEL_TYPES.map(({ panelKind, label, Icon }) => {
-		// One reason drives both the disabled flag and the tooltip, so they can't disagree.
-		const disabledReason = getPanelTypeDisabledReason({
-			kind: panelKind,
-			queryType: queryType ?? EQueryType.QUERY_BUILDER,
-			signal,
-			label,
-		});
-		return {
-			value: panelKind,
-			label,
-			icon: <Icon size={14} />,
-			disabled: !!disabledReason,
-			tooltip: disabledReason,
-		};
-	});
+	const items = usePanelTypeSelectItems({ queryType, signal });
 
 	return (
 		<div className={styles.field}>

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

@@ -49,7 +49,11 @@ describe('PanelTypeSwitcher', () => {
 	it('fires onChange with the chosen plugin kind', () => {
 		const onChange = jest.fn();
 		render(
-			<PanelTypeSwitcher panelKind="signoz/TimeSeriesPanel" onChange={onChange} />,
+			<PanelTypeSwitcher
+				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.QUERY_BUILDER}
+				onChange={onChange}
+			/>,
 		);
 
 		openDropdown();
@@ -62,6 +66,7 @@ describe('PanelTypeSwitcher', () => {
 		render(
 			<PanelTypeSwitcher
 				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.QUERY_BUILDER}
 				signal={TelemetrytypesSignalDTO.metrics}
 				onChange={jest.fn()}
 			/>,
@@ -77,6 +82,7 @@ describe('PanelTypeSwitcher', () => {
 		render(
 			<PanelTypeSwitcher
 				panelKind="signoz/TimeSeriesPanel"
+				queryType={EQueryType.QUERY_BUILDER}
 				onChange={jest.fn()}
 			/>,
 		);

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

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { EQueryType } from 'types/common/dashboard';
+
+import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
+import type { ConfigSelectItem } from '../controls/ConfigSelect/ConfigSelect';
+
+import { getPanelTypeDisabledReason } from './utils';
+
+interface UsePanelTypeSelectItemsArgs {
+	/** Active query type — a kind that can't be authored in it is disabled. */
+	queryType: EQueryType;
+	/** Current datasource — also gates the disabled rule (List needs logs/traces, not metrics). */
+	signal?: TelemetrytypesSignalDTO;
+}
+
+/**
+ * Visualization-kind options for a `ConfigSelect`, each disabled (with a reason
+ * tooltip) when the active query type or signal is incompatible — resolved through
+ * the capabilities guard. Shared by the editor's `PanelTypeSwitcher` and the View
+ * modal's header so the two selectors apply the same rule and can't drift.
+ */
+export function usePanelTypeSelectItems({
+	queryType,
+	signal,
+}: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
+	return useMemo(
+		() =>
+			PANEL_TYPES.map(({ panelKind, label, Icon }) => {
+				// One reason drives both the disabled flag and the tooltip, so they can't disagree.
+				const disabledReason = getPanelTypeDisabledReason({
+					kind: panelKind,
+					queryType,
+					signal,
+					label,
+				});
+				return {
+					value: panelKind,
+					label,
+					icon: <Icon size={14} />,
+					disabled: !!disabledReason,
+					tooltip: disabledReason,
+				};
+			}),
+		[queryType, signal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinkDialog.tsx

@@ -0,0 +1,259 @@
+import { useEffect, useState } from 'react';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
+import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { UrlParam, VariableItem } from './types';
+import {
+	getUrlParams,
+	insertVariableAtCursor,
+	isValidContextLinkUrl,
+	updateUrlWithParams,
+} from './utils';
+import VariablesPopover from './VariablesPopover';
+
+import styles from './ContextLinksSection.module.scss';
+
+interface ContextLinkDialogProps {
+	open: boolean;
+	/** The link being edited, or null when adding a new one. */
+	initialLink: DashboardLinkDTO | null;
+	variables: VariableItem[];
+	onOpenChange: (open: boolean) => void;
+	onSave: (link: DashboardLinkDTO) => void;
+}
+
+const URL_ERROR = 'URL must start with http(s)://, /, or {{variable}}/';
+
+const cursorOf = (e: { target: EventTarget }): number =>
+	(e.target as HTMLInputElement).selectionStart ?? 0;
+
+/**
+ * Modal editor for a single context link (V1 parity): label + URL with `{{variable}}`
+ * autocomplete + validation, a key/value URL-parameters editor, and an "open in new tab"
+ * toggle. The URL is the source of truth; parameter rows are its query string projected
+ * out (blank-key rows live only in local state until they get a key). Save is gated on a
+ * non-empty, well-formed URL. `renderVariables` is set so consumers interpolate the URL.
+ */
+function ContextLinkDialog({
+	open,
+	initialLink,
+	variables,
+	onOpenChange,
+	onSave,
+}: ContextLinkDialogProps): JSX.Element {
+	const [name, setName] = useState('');
+	const [url, setUrlState] = useState('');
+	const [targetBlank, setTargetBlank] = useState(true);
+	const [params, setParams] = useState<UrlParam[]>([]);
+
+	// Seed the draft each time the dialog opens for a (possibly different) link.
+	useEffect(() => {
+		if (open) {
+			setName(initialLink?.name ?? '');
+			setUrlState(initialLink?.url ?? '');
+			setTargetBlank(initialLink?.targetBlank ?? true);
+			setParams(getUrlParams(initialLink?.url ?? ''));
+		}
+	}, [open, initialLink]);
+
+	const setUrl = (next: string): void => {
+		setUrlState(next);
+		setParams(getUrlParams(next));
+	};
+
+	const applyParams = (next: UrlParam[]): void => {
+		setParams(next);
+		setUrlState(updateUrlWithParams(url, next));
+	};
+
+	const patchParam = (index: number, patch: Partial<UrlParam>): void =>
+		applyParams(params.map((p, i) => (i === index ? { ...p, ...patch } : p)));
+
+	const addParam = (): void => {
+		const last = params[params.length - 1];
+		if (!last || last.key.trim() || last.value.trim()) {
+			setParams([...params, { key: '', value: '' }]);
+		}
+	};
+
+	const urlInvalid = !isValidContextLinkUrl(url);
+	const canSave = !!url.trim() && !urlInvalid;
+
+	const handleSave = (): void => {
+		if (canSave) {
+			onSave({ name, url, targetBlank, renderVariables: true });
+		}
+	};
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={onOpenChange}
+			title={initialLink ? 'Edit context link' : 'Add a context link'}
+			width="wide"
+			testId="context-link-dialog"
+			footer={
+				<>
+					<Button
+						type="button"
+						variant="outlined"
+						color="secondary"
+						data-testid="context-link-cancel"
+						onClick={(): void => onOpenChange(false)}
+					>
+						Cancel
+					</Button>
+					<Button
+						type="button"
+						variant="solid"
+						color="primary"
+						disabled={!canSave}
+						data-testid="context-link-save"
+						onClick={handleSave}
+					>
+						Save
+					</Button>
+				</>
+			}
+		>
+			<div className={styles.form}>
+				<div className={styles.formField}>
+					<Typography.Text className={styles.formLabel}>Label</Typography.Text>
+					<Input
+						data-testid="context-link-label"
+						placeholder="View trace details: {{_traceId}}"
+						value={name}
+						onChange={(e): void => setName(e.target.value)}
+					/>
+				</div>
+
+				<div className={styles.formField}>
+					<Typography.Text className={styles.formLabel}>
+						URL <span className={styles.required}>*</span>
+					</Typography.Text>
+					<VariablesPopover
+						variables={variables}
+						onVariableSelect={(token, cursor): void =>
+							setUrl(insertVariableAtCursor(url, token, cursor))
+						}
+					>
+						{({ setIsOpen, setCursorPosition }): JSX.Element => (
+							<Input
+								data-testid="context-link-url"
+								placeholder="https://… or /path?var={{variable}}"
+								value={url}
+								status={urlInvalid ? 'error' : undefined}
+								autoComplete="off"
+								onChange={(e): void => {
+									setCursorPosition(e.target.selectionStart ?? 0);
+									setUrl(e.target.value);
+								}}
+								onFocus={(): void => setIsOpen(true)}
+								onClick={(e): void => setCursorPosition(cursorOf(e))}
+								onKeyUp={(e): void => setCursorPosition(cursorOf(e))}
+							/>
+						)}
+					</VariablesPopover>
+					{urlInvalid && (
+						<Typography.Text
+							className={styles.urlError}
+							data-testid="context-link-url-error"
+						>
+							{URL_ERROR}
+						</Typography.Text>
+					)}
+				</div>
+
+				{params.length > 0 && (
+					<div className={styles.formField}>
+						<Typography.Text className={styles.formLabel}>
+							URL parameters
+						</Typography.Text>
+						<div className={styles.params}>
+							{params.map((param, index) => (
+								<div
+									className={styles.paramRow}
+									// Parameter rows have no stable id; index is the row identity here.
+									// eslint-disable-next-line react/no-array-index-key
+									key={index}
+								>
+									<Input
+										data-testid={`context-link-param-key-${index}`}
+										placeholder="Key"
+										value={param.key}
+										onChange={(e): void => patchParam(index, { key: e.target.value })}
+									/>
+									<VariablesPopover
+										variables={variables}
+										onVariableSelect={(token, cursor): void =>
+											patchParam(index, {
+												value: insertVariableAtCursor(param.value, token, cursor),
+											})
+										}
+									>
+										{({ setIsOpen, setCursorPosition }): JSX.Element => (
+											<Input
+												data-testid={`context-link-param-value-${index}`}
+												placeholder="Value"
+												value={param.value}
+												onChange={(e): void => {
+													setCursorPosition(e.target.selectionStart ?? 0);
+													patchParam(index, { value: e.target.value });
+												}}
+												onFocus={(): void => setIsOpen(true)}
+												onClick={(e): void => setCursorPosition(cursorOf(e))}
+												onKeyUp={(e): void => setCursorPosition(cursorOf(e))}
+											/>
+										)}
+									</VariablesPopover>
+									<Button
+										type="button"
+										variant="ghost"
+										color="destructive"
+										size="icon"
+										aria-label={`Remove parameter ${index + 1}`}
+										data-testid={`context-link-param-remove-${index}`}
+										onClick={(): void =>
+											applyParams(params.filter((_, i) => i !== index))
+										}
+									>
+										<Trash2 size={14} />
+									</Button>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+
+				<Button
+					type="button"
+					variant="dashed"
+					color="secondary"
+					prefix={<Plus size={12} />}
+					data-testid="context-link-add-param"
+					onClick={addParam}
+				>
+					Add URL parameter
+				</Button>
+
+				<div className={styles.newTab}>
+					<Switch
+						testId="context-link-newtab"
+						value={targetBlank}
+						onChange={setTargetBlank}
+					/>
+					<Typography.Text className={styles.newTabLabel}>
+						Open in new tab
+					</Typography.Text>
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default ContextLinkDialog;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinkListItem.tsx

@@ -0,0 +1,62 @@
+import { Pencil, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './ContextLinksSection.module.scss';
+
+interface ContextLinkListItemProps {
+	link: DashboardLinkDTO;
+	index: number;
+	onEdit: () => void;
+	onRemove: () => void;
+}
+
+/** A saved context link in the section list: its label + URL, with edit / delete actions. */
+function ContextLinkListItem({
+	link,
+	index,
+	onEdit,
+	onRemove,
+}: ContextLinkListItemProps): JSX.Element {
+	const label = link.name?.trim() || link.url || 'Untitled link';
+
+	return (
+		<div className={styles.listItem} data-testid={`context-link-item-${index}`}>
+			<div className={styles.listItemText}>
+				<Typography.Text className={styles.listItemLabel}>{label}</Typography.Text>
+				{!!link.url && (
+					<Typography.Text className={styles.listItemUrl}>
+						{link.url}
+					</Typography.Text>
+				)}
+			</div>
+			<div className={styles.listItemActions}>
+				<Button
+					type="button"
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					aria-label={`Edit link ${index + 1}`}
+					data-testid={`context-link-edit-${index}`}
+					onClick={onEdit}
+				>
+					<Pencil size={14} />
+				</Button>
+				<Button
+					type="button"
+					variant="ghost"
+					color="destructive"
+					size="icon"
+					aria-label={`Remove link ${index + 1}`}
+					data-testid={`context-link-remove-${index}`}
+					onClick={onRemove}
+				>
+					<Trash2 size={14} />
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default ContextLinkListItem;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinksSection.module.scss

@@ -1,32 +1,99 @@
 .list {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: 8px;
 }
 
-.row {
+/* --- Saved-link list item --- */
+.listItem {
 	display: flex;
-	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
 	gap: 8px;
-	padding: 10px;
+	padding: 8px 10px;
 	border: 1px solid var(--l2-border);
 	border-radius: 6px;
 }
 
-.rowFooter {
+.listItemText {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.listItemLabel,
+.listItemUrl {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
+}
+
+.listItemLabel {
+	font-size: 13px;
+	color: var(--text-vanilla-100);
+}
+
+.listItemUrl {
+	font-size: 11px;
+	color: var(--text-vanilla-400);
+}
+
+.listItemActions {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	gap: 2px;
+	flex-shrink: 0;
+}
+
+/* --- Dialog form --- */
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.formField {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.formLabel {
+	font-size: 12px;
+	color: var(--l2-foreground);
+}
+
+.required {
+	color: var(--bg-cherry-400);
+}
+
+.urlError {
+	font-size: 11px;
+	color: var(--bg-cherry-400);
+}
+
+.params {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.paramRow {
+	display: grid;
+	grid-template-columns: 1fr 1fr auto;
+	align-items: center;
+	gap: 6px;
 }
 
 .newTab {
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	cursor: pointer;
 }
 
 .newTabLabel {
 	font-size: 12px;
-	color: var(--text-vanilla-400);
+	color: var(--l2-foreground);
 }

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

@@ -1,83 +1,63 @@
-import { Plus, Trash2 } from '@signozhq/icons';
+import { useState } from 'react';
+import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Switch } from '@signozhq/ui/switch';
-import { Typography } from '@signozhq/ui/typography';
-import { Input } from 'antd';
 import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
+import ContextLinkDialog from './ContextLinkDialog';
+import ContextLinkListItem from './ContextLinkListItem';
+import { useContextLinkVariables } from './useContextLinkVariables';
+
 import styles from './ContextLinksSection.module.scss';
 
 /**
- * Edits the panel's context links (`spec.links`): a list of label + URL rows with an
- * "open in new tab" toggle, plus add/remove. Atomic section — no per-kind sub-controls.
- * URLs may reference dashboard/query variables; that interpolation is resolved at render
- * time, so this editor just captures the raw strings.
+ * Edits the panel's context links (`spec.links`) as a list of saved links, each added or
+ * edited through a modal ({@link ContextLinkDialog}) that carries V1's full authoring UX
+ * (variable autocomplete, URL-parameters editor, validation).
  */
 function ContextLinksSection({
 	value,
 	onChange,
 }: SectionEditorProps<SectionKind.ContextLinks>): JSX.Element {
 	const links = value ?? [];
+	const variables = useContextLinkVariables();
 
-	const updateAt = (index: number, patch: Partial<DashboardLinkDTO>): void =>
-		onChange(
-			links.map((link, i) => (i === index ? { ...link, ...patch } : link)),
-		);
-
-	const addLink = (): void =>
-		onChange([...links, { name: '', url: '', targetBlank: true }]);
+	// `index === null` while adding a new link; a number while editing an existing one.
+	const [dialog, setDialog] = useState<{ open: boolean; index: number | null }>({
+		open: false,
+		index: null,
+	});
 
 	const removeAt = (index: number): void =>
 		onChange(links.filter((_, i) => i !== index));
 
+	const handleSave = (link: DashboardLinkDTO): void => {
+		onChange(
+			dialog.index === null
+				? [...links, link]
+				: links.map((existing, i) => (i === dialog.index ? link : existing)),
+		);
+		setDialog((d) => ({ ...d, open: false }));
+	};
+
+	const editingLink =
+		dialog.index !== null ? (links[dialog.index] ?? null) : null;
+
 	return (
 		<div className={styles.list}>
 			{links.map((link, index) => (
-				// Links have no stable id on the wire; index is the row identity here.
-				// eslint-disable-next-line react/no-array-index-key
-				<div className={styles.row} key={index}>
-					<Input
-						data-testid={`context-link-label-${index}`}
-						placeholder="Label"
-						value={link.name ?? ''}
-						onChange={(e): void => updateAt(index, { name: e.target.value })}
-					/>
-					<Input
-						data-testid={`context-link-url-${index}`}
-						placeholder="https://… or /path?var=$variable"
-						value={link.url ?? ''}
-						onChange={(e): void => updateAt(index, { url: e.target.value })}
-					/>
-					<div className={styles.rowFooter}>
-						<div className={styles.newTab}>
-							<Switch
-								testId={`context-link-newtab-${index}`}
-								value={link.targetBlank ?? false}
-								onChange={(checked: boolean): void =>
-									updateAt(index, { targetBlank: checked })
-								}
-							/>
-							<Typography.Text className={styles.newTabLabel}>
-								Open in new tab
-							</Typography.Text>
-						</div>
-						<Button
-							type="button"
-							variant="ghost"
-							color="destructive"
-							size="icon"
-							aria-label={`Remove link ${index + 1}`}
-							data-testid={`context-link-remove-${index}`}
-							onClick={(): void => removeAt(index)}
-						>
-							<Trash2 size={14} />
-						</Button>
-					</div>
-				</div>
+				<ContextLinkListItem
+					// Links have no stable id on the wire; index is the row identity here.
+					// eslint-disable-next-line react/no-array-index-key
+					key={index}
+					link={link}
+					index={index}
+					onEdit={(): void => setDialog({ open: true, index })}
+					onRemove={(): void => removeAt(index)}
+				/>
 			))}
 
 			<Button
@@ -86,10 +66,18 @@ function ContextLinksSection({
 				color="secondary"
 				prefix={<Plus size={14} />}
 				data-testid="panel-editor-v2-add-link"
-				onClick={addLink}
+				onClick={(): void => setDialog({ open: true, index: null })}
 			>
-				Add link
+				Add Context Link
 			</Button>
+
+			<ContextLinkDialog
+				open={dialog.open}
+				initialLink={editingLink}
+				variables={variables}
+				onOpenChange={(open): void => setDialog((d) => ({ ...d, open }))}
+				onSave={handleSave}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.module.scss

@@ -0,0 +1,64 @@
+.container {
+	width: 100%;
+}
+
+.anchor {
+	width: 100%;
+}
+
+.content {
+	z-index: 1100;
+	padding: 4px 0;
+	max-height: 300px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-width: var(--radix-popover-trigger-width);
+}
+
+.empty {
+	padding: 8px 12px;
+	color: var(--text-vanilla-400);
+	font-size: 12px;
+	font-style: italic;
+}
+
+.item {
+	--button-display: flex;
+	--button-justify-content: flex-start;
+	--button-height: auto;
+	--button-padding: 8px 12px;
+	--button-border-radius: 0;
+	--button-font-size: 13px;
+	--button-line-height: 1.4;
+
+	width: 100%;
+	overflow: hidden;
+}
+
+.row {
+	display: flex;
+	flex: 1 1 auto;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	min-width: 0;
+}
+
+.name,
+.source {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.name {
+	flex: 1 1 auto;
+	text-align: start;
+}
+
+.source {
+	color: var(--l3-foreground);
+	font-size: 12px;
+	flex: 0 1 auto;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.tsx

@@ -0,0 +1,117 @@
+// Uses Popover (not DropdownMenu): DropdownMenuTrigger preventDefaults pointerdown,
+// which steals input focus and dismisses on every keystroke. PopoverAnchor is a passive
+// positioning element that leaves the wrapped input fully interactive.
+import { ReactNode, useRef, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { VariableItem } from './types';
+
+import styles from './VariablesPopover.module.scss';
+
+interface VariablesPopoverRenderProps {
+	setIsOpen: (open: boolean) => void;
+	setCursorPosition: (position: number | null) => void;
+}
+
+interface VariablesPopoverProps {
+	variables: VariableItem[];
+	/** Called with the braces-wrapped token (e.g. `{{env}}`) and the tracked cursor offset. */
+	onVariableSelect: (token: string, cursorPosition?: number) => void;
+	children: (props: VariablesPopoverRenderProps) => ReactNode;
+}
+
+/**
+ * Autocomplete for context-link variables. Wraps an input (via the render-prop) and
+ * shows the available `{{variables}}` grouped by source; picking one inserts it at the
+ * tracked cursor. The consumer drives `setIsOpen` (on focus) and `setCursorPosition`.
+ */
+function VariablesPopover({
+	variables,
+	onVariableSelect,
+	children,
+}: VariablesPopoverProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+	const anchorRef = useRef<HTMLDivElement>(null);
+
+	const handleOpenChange = (open: boolean): void => {
+		// Accept "close" events (outside-click, Esc) but ignore opens — opening is driven
+		// by the input's onFocus in the consumer.
+		if (!open) {
+			setIsOpen(false);
+		}
+	};
+
+	// Keep the popover open while the pointer/focus is inside the anchored input.
+	const keepOpenIfInsideAnchor = (event: {
+		target: EventTarget | null;
+	}): void => {
+		const target = event.target as Node | null;
+		if (
+			target &&
+			anchorRef.current?.contains(target) &&
+			'preventDefault' in event
+		) {
+			(event as Event).preventDefault();
+		}
+	};
+
+	return (
+		<div className={styles.container}>
+			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
+				<PopoverAnchor asChild>
+					<div className={styles.anchor} ref={anchorRef}>
+						{children({ setIsOpen, setCursorPosition })}
+					</div>
+				</PopoverAnchor>
+				<PopoverContent
+					align="start"
+					sideOffset={4}
+					// Render inside the anchor (not a body portal): the editor lives in a modal
+					// DialogWrapper, and radix's modal sets pointer-events:none on everything
+					// portalled outside it, which would make the suggestions unclickable.
+					withPortal={false}
+					className={styles.content}
+					onOpenAutoFocus={(e): void => e.preventDefault()}
+					onCloseAutoFocus={(e): void => e.preventDefault()}
+					onInteractOutside={keepOpenIfInsideAnchor}
+					onFocusOutside={keepOpenIfInsideAnchor}
+				>
+					{variables.length === 0 ? (
+						<div className={styles.empty}>No variables available</div>
+					) : (
+						variables.map((v) => (
+							<Button
+								key={`${v.source}-${v.name}`}
+								type="button"
+								variant="ghost"
+								color="secondary"
+								size="md"
+								className={styles.item}
+								aria-label={`Insert {{${v.name}}}`}
+								testId={`context-link-variable-${v.name}`}
+								// Prevent the input from losing focus when clicking an item.
+								onMouseDown={(e): void => e.preventDefault()}
+								onClick={(): void => {
+									onVariableSelect(`{{${v.name}}}`, cursorPosition ?? undefined);
+									setIsOpen(false);
+								}}
+							>
+								<div className={styles.row}>
+									<Typography.Text
+										className={styles.name}
+									>{`{{${v.name}}}`}</Typography.Text>
+									<Typography.Text className={styles.source}>{v.source}</Typography.Text>
+								</div>
+							</Button>
+						))
+					)}
+				</PopoverContent>
+			</Popover>
+		</div>
+	);
+}
+
+export default VariablesPopover;

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

@@ -3,47 +3,92 @@ import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
 
 import ContextLinksSection from '../ContextLinksSection';
 
+// The variable-source hook reads the query-builder provider + store; stub it so the
+// editor can be exercised in isolation (its own suite covers the sourcing logic).
+jest.mock('../useContextLinkVariables', () => ({
+	useContextLinkVariables: (): unknown => [
+		{ name: 'timestamp_start', source: 'Global timestamp' },
+		{ name: 'env', source: 'Dashboard variable' },
+	],
+}));
+
 const LINKS: DashboardLinkDTO[] = [
 	{ name: 'Docs', url: 'https://signoz.io', targetBlank: true },
 ];
 
+const lastCall = (fn: jest.Mock): DashboardLinkDTO[] =>
+	fn.mock.calls[fn.mock.calls.length - 1][0];
+
 describe('ContextLinksSection', () => {
 	it('renders only the add button when there are no links', () => {
 		render(<ContextLinksSection value={undefined} onChange={jest.fn()} />);
 
 		expect(screen.getByTestId('panel-editor-v2-add-link')).toBeInTheDocument();
-		expect(screen.queryByTestId('context-link-label-0')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('context-link-item-0')).not.toBeInTheDocument();
 	});
 
-	it('appends a blank link (open-in-new-tab on) when Add link is clicked', () => {
+	it('renders existing links as list items showing the label', () => {
+		render(<ContextLinksSection value={LINKS} onChange={jest.fn()} />);
+
+		expect(screen.getByTestId('context-link-item-0')).toHaveTextContent('Docs');
+		// The editor is a modal — no inline fields until it's opened.
+		expect(screen.queryByTestId('context-link-url')).not.toBeInTheDocument();
+	});
+
+	it('adds a link through the dialog (Save gated on a valid URL)', async () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={[]} onChange={onChange} />);
 
 		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
 
+		const save = await screen.findByTestId('context-link-save');
+		expect(save).toBeDisabled();
+
+		fireEvent.change(screen.getByTestId('context-link-url'), {
+			target: { value: 'https://signoz.io' },
+		});
+		fireEvent.change(screen.getByTestId('context-link-label'), {
+			target: { value: 'Docs' },
+		});
+		expect(save).not.toBeDisabled();
+
+		fireEvent.click(save);
 		expect(onChange).toHaveBeenCalledWith([
-			{ name: '', url: '', targetBlank: true },
+			{
+				name: 'Docs',
+				url: 'https://signoz.io',
+				targetBlank: true,
+				renderVariables: true,
+			},
 		]);
 	});
 
-	it('renders existing links and edits a label through onChange', () => {
+	it('edits an existing link through the dialog', async () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={LINKS} onChange={onChange} />);
 
-		expect(screen.getByTestId('context-link-label-0')).toHaveValue('Docs');
-		expect(screen.getByTestId('context-link-url-0')).toHaveValue(
+		fireEvent.click(screen.getByTestId('context-link-edit-0'));
+
+		const label = await screen.findByTestId('context-link-label');
+		expect(label).toHaveValue('Docs');
+		expect(screen.getByTestId('context-link-url')).toHaveValue(
 			'https://signoz.io',
 		);
 
-		fireEvent.change(screen.getByTestId('context-link-label-0'), {
-			target: { value: 'Runbook' },
-		});
+		fireEvent.change(label, { target: { value: 'Runbook' } });
+		fireEvent.click(screen.getByTestId('context-link-save'));
+
 		expect(onChange).toHaveBeenCalledWith([
-			{ name: 'Runbook', url: 'https://signoz.io', targetBlank: true },
+			{
+				name: 'Runbook',
+				url: 'https://signoz.io',
+				targetBlank: true,
+				renderVariables: true,
+			},
 		]);
 	});
 
-	it('removes a link through onChange', () => {
+	it('removes a link from the list', () => {
 		const onChange = jest.fn();
 		render(<ContextLinksSection value={LINKS} onChange={onChange} />);
 
@@ -51,4 +96,52 @@ describe('ContextLinksSection', () => {
 
 		expect(onChange).toHaveBeenCalledWith([]);
 	});
+
+	it('shows a validation error only for a malformed URL', async () => {
+		render(<ContextLinksSection value={[]} onChange={jest.fn()} />);
+		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
+
+		const urlInput = await screen.findByTestId('context-link-url');
+
+		fireEvent.change(urlInput, { target: { value: 'not-a-url' } });
+		expect(screen.getByTestId('context-link-url-error')).toBeInTheDocument();
+		expect(screen.getByTestId('context-link-save')).toBeDisabled();
+
+		fireEvent.change(urlInput, { target: { value: '/valid/path' } });
+		expect(
+			screen.queryByTestId('context-link-url-error'),
+		).not.toBeInTheDocument();
+	});
+
+	it('adds a URL parameter and writes it into the URL query string', async () => {
+		const onChange = jest.fn();
+		render(<ContextLinksSection value={[]} onChange={onChange} />);
+		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
+
+		fireEvent.change(await screen.findByTestId('context-link-url'), {
+			target: { value: '/logs' },
+		});
+		fireEvent.click(screen.getByTestId('context-link-add-param'));
+		fireEvent.change(screen.getByTestId('context-link-param-key-0'), {
+			target: { value: 'env' },
+		});
+		fireEvent.click(screen.getByTestId('context-link-save'));
+
+		expect(lastCall(onChange)).toStrictEqual([
+			{ name: '', url: '/logs?env=', targetBlank: true, renderVariables: true },
+		]);
+	});
+
+	it('inserts a {{variable}} into the URL from the autocomplete popover', async () => {
+		render(<ContextLinksSection value={[]} onChange={jest.fn()} />);
+		fireEvent.click(screen.getByTestId('panel-editor-v2-add-link'));
+
+		const urlInput = await screen.findByTestId('context-link-url');
+		fireEvent.focus(urlInput);
+		fireEvent.click(
+			await screen.findByTestId('context-link-variable-timestamp_start'),
+		);
+
+		expect(urlInput).toHaveValue('{{timestamp_start}}');
+	});
 });

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

@@ -0,0 +1,83 @@
+import { renderHook } from '@testing-library/react';
+
+import { useContextLinkVariables } from '../useContextLinkVariables';
+
+const mockUseGetDashboardV2 = jest.fn();
+const mockUseQueryBuilder = jest.fn();
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (
+			selector: (s: { dashboardId: string }) => unknown,
+		): unknown => selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): unknown => mockUseQueryBuilder(),
+}));
+
+jest.mock('api/generated/services/dashboard', () => ({
+	useGetDashboardV2: (): unknown => mockUseGetDashboardV2(),
+}));
+
+// dtoToFormModel is exercised by its own suite; here we only need it to surface a name.
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters',
+	() => ({
+		dtoToFormModel: (dto: { name: string }): { name: string } => ({
+			name: dto.name,
+		}),
+	}),
+);
+
+describe('useContextLinkVariables', () => {
+	beforeEach(() => {
+		mockUseQueryBuilder.mockReturnValue({
+			currentQuery: {
+				builder: {
+					queryData: [
+						{ groupBy: [{ key: 'service.name' }, { key: 'env' }] },
+						// Duplicate across queries — must dedupe.
+						{ groupBy: [{ key: 'service.name' }] },
+					],
+				},
+			},
+		});
+		mockUseGetDashboardV2.mockReturnValue({
+			data: {
+				data: { spec: { variables: [{ name: 'region' }, { name: 'tier' }] } },
+			},
+		});
+	});
+
+	it('orders globals, then _prefixed query fields (deduped), then dashboard vars', () => {
+		const { result } = renderHook(() => useContextLinkVariables());
+
+		expect(result.current).toStrictEqual([
+			{ name: 'timestamp_start', source: 'Global timestamp' },
+			{ name: 'timestamp_end', source: 'Global timestamp' },
+			{ name: '_service.name', source: 'Query variable' },
+			{ name: '_env', source: 'Query variable' },
+			{ name: 'region', source: 'Dashboard variable' },
+			{ name: 'tier', source: 'Dashboard variable' },
+		]);
+	});
+
+	it('still returns the global timestamps when there are no queries or variables', () => {
+		mockUseQueryBuilder.mockReturnValue({
+			currentQuery: { builder: { queryData: [] } },
+		});
+		// Loaded dashboard with no variables — useDashboardFetchRequired guarantees the
+		// dashboard is present, so the empty case is an empty spec, not `undefined`.
+		mockUseGetDashboardV2.mockReturnValue({ data: { data: { spec: {} } } });
+
+		const { result } = renderHook(() => useContextLinkVariables());
+
+		expect(result.current).toStrictEqual([
+			{ name: 'timestamp_start', source: 'Global timestamp' },
+			{ name: 'timestamp_end', source: 'Global timestamp' },
+		]);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/__tests__/utils.test.ts

@@ -0,0 +1,68 @@
+import {
+	getUrlParams,
+	insertVariableAtCursor,
+	isValidContextLinkUrl,
+	updateUrlWithParams,
+} from '../utils';
+
+describe('ContextLinksSection utils', () => {
+	describe('isValidContextLinkUrl', () => {
+		it.each([
+			['', true],
+			['https://signoz.io', true],
+			['http://localhost:3301/trace', true],
+			['/trace/{{_traceId}}', true],
+			['{{host}}/trace', true],
+			['trace/{{_traceId}}', false],
+			['ftp://signoz.io', false],
+		])('validates %p as %p', (url, expected) => {
+			expect(isValidContextLinkUrl(url)).toBe(expected);
+		});
+	});
+
+	describe('insertVariableAtCursor', () => {
+		it('inserts at the cursor position', () => {
+			expect(insertVariableAtCursor('/trace/', '{{id}}', 7)).toBe('/trace/{{id}}');
+			expect(insertVariableAtCursor('ab', '{{x}}', 1)).toBe('a{{x}}b');
+		});
+
+		it('appends when no cursor position is given', () => {
+			expect(insertVariableAtCursor('/trace/', '{{id}}')).toBe('/trace/{{id}}');
+		});
+	});
+
+	describe('getUrlParams', () => {
+		it('returns [] when there is no query string', () => {
+			expect(getUrlParams('/trace/{{id}}')).toStrictEqual([]);
+		});
+
+		it('parses and decodes key/value pairs', () => {
+			expect(getUrlParams('/logs?service={{svc}}&env=prod')).toStrictEqual([
+				{ key: 'service', value: '{{svc}}' },
+				{ key: 'env', value: 'prod' },
+			]);
+		});
+
+		it('double-decodes over-encoded values', () => {
+			// %257B%257B == encodeURIComponent('%7B%7B') == encodeURIComponent('{{')
+			expect(getUrlParams('/logs?q=%257B%257Bx%257D%257D')).toStrictEqual([
+				{ key: 'q', value: '{{x}}' },
+			]);
+		});
+	});
+
+	describe('updateUrlWithParams', () => {
+		it('rebuilds the query string and drops empty keys', () => {
+			expect(
+				updateUrlWithParams('/logs?old=1', [
+					{ key: 'service', value: '{{svc}}' },
+					{ key: '', value: 'ignored' },
+				]),
+			).toBe('/logs?service=%7B%7Bsvc%7D%7D');
+		});
+
+		it('drops the query string entirely when no valid params remain', () => {
+			expect(updateUrlWithParams('/logs?a=b', [])).toBe('/logs');
+		});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Where a context-link variable comes from — shown as the right-hand label in the popover.
+ *
+ * - `Global timestamp` — the dashboard's selected time range: `timestamp_start` /
+ *   `timestamp_end`. Always available, independent of the panel or its queries.
+ * - `Query variable` — a `groupBy` field from the panel's own queries, `_`-prefixed
+ *   (e.g. `_service_name`). Resolved at click time from the data point the user clicked,
+ *   so it reflects the current query definition and changes as the queries are edited.
+ * - `Dashboard variable` — a user-defined dashboard variable from Dashboard Settings
+ *   (e.g. `env`, `region`). Shared across every panel and driven by the dashboard's
+ *   variable selectors rather than by an individual query.
+ */
+export type VariableSource =
+	| 'Global timestamp'
+	| 'Query variable'
+	| 'Dashboard variable';
+
+/** One entry in the context-link variable autocomplete. */
+export interface VariableItem {
+	/** Bare variable name without braces, e.g. `timestamp_start`, `_service_name`, `env`. */
+	name: string;
+	source: VariableSource;
+}
+
+/** A single decoded key/value pair parsed from (or written back to) a URL query string. */
+export interface UrlParam {
+	key: string;
+	value: string;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/useContextLinkVariables.ts

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { dtoToFormModel } from 'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters';
+import { useDashboardFetchRequired } from 'pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired';
+
+import type { VariableItem } from './types';
+
+// Global time-range variables, always available (V1 parity: `timestamp_start` / `_end`).
+const GLOBAL_TIMESTAMP_VARIABLES: VariableItem[] = [
+	{ name: 'timestamp_start', source: 'Global timestamp' },
+	{ name: 'timestamp_end', source: 'Global timestamp' },
+];
+
+/**
+ * Variables offered by the context-link autocomplete, ordered as in V1: global
+ * timestamps, then per-query `groupBy` fields (prefixed `_`), then dashboard variables.
+ *
+ * Self-contained — the editor renders inside the query-builder provider and the
+ * DashboardContainer, so every source is read here rather than threaded through the
+ * section registry. The dashboard fetch dedupes against the editor page's own query.
+ */
+export function useContextLinkVariables(): VariableItem[] {
+	const { currentQuery } = useQueryBuilder();
+
+	const { variables: variableDtos } = useDashboardFetchRequired();
+
+	const dashboardVariableNames = useMemo(
+		() =>
+			variableDtos
+				.map((dto) => dtoToFormModel(dto).name)
+				.filter((name): name is string => !!name),
+		[variableDtos],
+	);
+
+	// `_`-prefixed to match V1 and avoid colliding with dashboard-variable names.
+	const fieldVariableNames = useMemo(() => {
+		const names = new Set<string>();
+		(currentQuery?.builder?.queryData ?? []).forEach((query) => {
+			(query.groupBy ?? []).forEach((field) => {
+				if (field.key) {
+					names.add(`_${field.key}`);
+				}
+			});
+		});
+		return Array.from(names);
+	}, [currentQuery?.builder?.queryData]);
+
+	return useMemo(
+		() => [
+			...GLOBAL_TIMESTAMP_VARIABLES,
+			...fieldVariableNames.map(
+				(name): VariableItem => ({ name, source: 'Query variable' }),
+			),
+			...dashboardVariableNames.map(
+				(name): VariableItem => ({ name, source: 'Dashboard variable' }),
+			),
+		],
+		[fieldVariableNames, dashboardVariableNames],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/utils.ts

@@ -0,0 +1,78 @@
+import type { UrlParam } from './types';
+
+// A link URL must be absolute (http/https), root-relative (`/path`), or start with a
+// leading `{{var}}/` segment (a variable that resolves to a host/path at click-time).
+const CONTEXT_LINK_URL_PATTERN = /^(https?:\/\/|\/|{{.*}}\/)/;
+
+/**
+ * Whether the URL is well-formed for a context link. Empty is treated as valid so the
+ * editor doesn't nag while a row is still being filled in — emptiness is a separate concern.
+ */
+export function isValidContextLinkUrl(url: string): boolean {
+	if (!url) {
+		return true;
+	}
+	return CONTEXT_LINK_URL_PATTERN.test(url);
+}
+
+/** Inserts `variable` into `current` at `cursorPosition`, or appends when it's unknown. */
+export function insertVariableAtCursor(
+	current: string,
+	variable: string,
+	cursorPosition?: number,
+): string {
+	if (cursorPosition === undefined) {
+		return current + variable;
+	}
+	return (
+		current.slice(0, cursorPosition) + variable + current.slice(cursorPosition)
+	);
+}
+
+// Values may be double-encoded on the wire; decode a second time only when it changes
+// the string, so already-single-encoded values are left intact.
+function decodeForDisplay(value: string): string {
+	const decoded = decodeURIComponent(value);
+	try {
+		const doubleDecoded = decodeURIComponent(decoded);
+		return doubleDecoded !== decoded ? doubleDecoded : decoded;
+	} catch {
+		return decoded;
+	}
+}
+
+/** Parses the `?a=b&c=d` query string of a URL into decoded key/value rows. */
+export function getUrlParams(url: string): UrlParam[] {
+	const [, queryString] = url.split('?');
+	if (!queryString) {
+		return [];
+	}
+
+	const params: UrlParam[] = [];
+	queryString.split('&').forEach((pair) => {
+		const [key, value] = pair.split('=');
+		if (key) {
+			params.push({
+				key: decodeURIComponent(key),
+				value: decodeForDisplay(value || ''),
+			});
+		}
+	});
+	return params;
+}
+
+/** Rewrites `url`'s query string from `params`, dropping rows with an empty key. */
+export function updateUrlWithParams(url: string, params: UrlParam[]): string {
+	const [baseUrl] = url.split('?');
+	const queryString = params
+		.filter((param) => param.key.trim() !== '')
+		.map(
+			(param) =>
+				`${encodeURIComponent(param.key.trim())}=${encodeURIComponent(
+					param.value,
+				)}`,
+		)
+		.join('&');
+
+	return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+}

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

@@ -8,7 +8,7 @@ import {
 	DashboardtypesThresholdFormatDTO,
 	type DashboardtypesThresholdWithLabelDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type {
+import {
 	AnyThreshold,
 	ThresholdVariant,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
@@ -77,7 +77,7 @@ function ThresholdsSection({
 	yAxisUnit,
 	tableColumns = [],
 }: ThresholdsSectionProps): JSX.Element {
-	const variant = controls?.variant ?? 'label';
+	const variant = controls?.variant ?? ThresholdVariant.LABEL;
 	const thresholds = value ?? [];
 	// Which row is being edited, and whether it was just added (so Discard removes it).
 	const [editingIndex, setEditingIndex] = useState<number | null>(null);

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

@@ -4,7 +4,10 @@ import {
 	type DashboardtypesComparisonThresholdDTO,
 	DashboardtypesThresholdFormatDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { AnyThreshold } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import {
+	ThresholdVariant,
+	type AnyThreshold,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import UnifiedThresholdsSection from '../ThresholdsSection';
@@ -21,7 +24,7 @@ function ComparisonThresholdsSection(props: {
 			value={props.value}
 			onChange={props.onChange as (next: AnyThreshold[]) => void}
 			yAxisUnit={props.yAxisUnit}
-			controls={{ variant: 'comparison' }}
+			controls={{ variant: ThresholdVariant.COMPARISON }}
 		/>
 	);
 }

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

@@ -3,6 +3,7 @@ import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import { EQueryType } from 'types/common/dashboard';
 
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
@@ -38,7 +39,9 @@ function VisualizationSection({
 			{controls.switchPanelKind && panelKind && onChangePanelKind && (
 				<PanelTypeSwitcher
 					panelKind={panelKind}
-					queryType={queryType}
+					// queryType is optional on the kind-erased section context, but always
+					// supplied in practice; default to Query Builder at this boundary.
+					queryType={queryType ?? EQueryType.QUERY_BUILDER}
 					signal={signal}
 					onChange={onChangePanelKind}
 				/>

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

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { SolidAlertTriangle, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
+import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import { useConfirmableAction } from 'hooks/useConfirmableAction';
@@ -61,24 +61,42 @@ function Header({
 				</Button>
 			</div>
 
-			<ConfirmDialog
+			<DialogWrapper
 				open={discard.open}
-				onOpenChange={(next): void => {
+				onOpenChange={(next: boolean): void => {
 					if (!next) {
 						discard.cancel();
 					}
 				}}
 				title="Discard changes?"
 				titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
-				confirmText="Discard"
-				confirmColor="destructive"
-				cancelText="Keep editing"
-				onConfirm={discard.confirm}
-				onCancel={discard.cancel}
-				data-testid="panel-editor-v2-discard-modal"
+				testId="panel-editor-v2-discard-modal"
+				footer={
+					<>
+						<Button
+							type="button"
+							variant="solid"
+							color="destructive"
+							data-testid="panel-editor-v2-discard-confirm"
+							loading={discard.isPending}
+							onClick={discard.confirm}
+						>
+							Discard
+						</Button>
+						<Button
+							type="button"
+							variant="outlined"
+							color="secondary"
+							data-testid="panel-editor-v2-discard-cancel"
+							onClick={discard.cancel}
+						>
+							Keep editing
+						</Button>
+					</>
+				}
 			>
 				<Typography>Your unsaved edits to this panel will be lost.</Typography>
-			</ConfirmDialog>
+			</DialogWrapper>
 		</div>
 	);
 }

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

@@ -164,7 +164,7 @@ function PanelEditorQueryBuilder({
 							<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
 							<RunQueryBtn
 								className="run-query-dashboard-btn"
-								label="Stage & Run Query"
+								label="Run Query"
 								onStageRunQuery={onStageRunQuery}
 								isLoadingQueries={isLoadingQueries}
 								handleCancelQuery={onCancelQuery}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss

@@ -49,6 +49,13 @@
 	background: var(--l2-background);
 }
 
+// Standalone View stacks the graph-manager below the chart inside the surface (it
+// must stay within the chart's PlotContext). Let it flow out of the surface so the
+// modal body scrolls as a whole, instead of clipping it or scrolling the panel.
+.surfaceStacked {
+	overflow: visible;
+}
+
 .state {
 	flex: 1;
 	display: flex;

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

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
 import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
 	PanelPagination,
@@ -23,6 +25,8 @@ interface PreviewPaneProps {
 	data: PanelQueryData;
 	/** Any fetch in flight — drives the header spinner and the body's loading state. */
 	isFetching: boolean;
+	/** Showing a prior page's data while the next loads; forwarded so the list shows skeleton rows. */
+	isPreviousData?: boolean;
 	error: Error | null;
 	/** Re-run the query (drives PanelBody's error-state retry). */
 	refetch: () => void;
@@ -30,6 +34,14 @@ interface PreviewPaneProps {
 	onDragSelect: (start: number, end: number) => void;
 	/** Server-side pager for raw/list panels; absent for non-paginated panels. */
 	pagination?: PanelPagination;
+	/** Render context — defaults to the editor's DASHBOARD_EDIT; the View modal passes STANDALONE_VIEW. */
+	panelMode?: PanelMode;
+	/** Hide the preview's top row entirely (query-type badge + time picker) — the View modal has its own header. */
+	hideHeader?: boolean;
+	/** Dashboard-wide preferences (cursor sync, …) forwarded to the body; the modal isolates cursor-sync. */
+	dashboardPreference?: DashboardPreference;
+	/** Close the standalone View modal — forwarded to the time-series/bar graph manager. */
+	onCloseStandaloneView?: () => void;
 }
 
 /**
@@ -43,10 +55,15 @@ function PreviewPane({
 	panelDefinition,
 	data,
 	isFetching,
+	isPreviousData,
 	error,
 	refetch,
 	onDragSelect,
 	pagination,
+	panelMode = PanelMode.DASHBOARD_EDIT,
+	hideHeader = false,
+	dashboardPreference,
+	onCloseStandaloneView,
 }: PreviewPaneProps): JSX.Element {
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
 	const queryType = getPanelQueryType(panel);
@@ -58,18 +75,24 @@ function PreviewPane({
 
 	return (
 		<div className={styles.preview}>
-			<div className={styles.header}>
-				<PlotTag
-					queryType={queryType}
-					panelType={panelType}
-					className={styles.queryType}
-				/>
-				<div className={styles.dateTimeSelector}>
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+			{!hideHeader && (
+				<div className={styles.header}>
+					<PlotTag
+						queryType={queryType}
+						panelType={panelType}
+						className={styles.queryType}
+					/>
+					<div className={styles.dateTimeSelector}>
+						<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+					</div>
 				</div>
-			</div>
+			)}
 			<div className={styles.container}>
-				<div className={styles.surface}>
+				<div
+					className={cx(styles.surface, {
+						[styles.surfaceStacked]: panelMode === PanelMode.STANDALONE_VIEW,
+					})}
+				>
 					<PanelHeader
 						panelId={panelId}
 						panel={panel}
@@ -87,12 +110,15 @@ function PreviewPane({
 						panelId={panelId}
 						data={data}
 						isFetching={isFetching}
+						isPreviousData={isPreviousData}
 						error={error}
 						refetch={refetch}
 						onDragSelect={onDragSelect}
-						panelMode={PanelMode.DASHBOARD_EDIT}
+						panelMode={panelMode}
+						dashboardPreference={dashboardPreference}
 						searchTerm={searchable ? searchTerm : undefined}
 						pagination={pagination}
+						onCloseStandaloneView={onCloseStandaloneView}
 					/>
 				</div>
 			</div>

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

@@ -0,0 +1,274 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+
+import PanelEditorContainer from '../index';
+
+/**
+ * Characterization test for the editor's composition: which derived values and
+ * options it forwards to the draft/query/query-sync/type-switch hooks and to its
+ * children. The leaf hooks are mocked as arg-capturing spies so this pins the
+ * wiring; it stays valid (and guards behavior) after that wiring is pulled into a
+ * shared edit-session hook, since the mocks intercept the leaf hooks either way.
+ */
+
+const mockSetSpec = jest.fn();
+const mockRefetch = jest.fn();
+const mockCancelQuery = jest.fn();
+const mockBuildSaveSpec = jest.fn((spec: unknown) => spec);
+const mockOnChangePanelKind = jest.fn();
+const mockSave = jest.fn().mockResolvedValue(undefined);
+
+const mockUseDraft = jest.fn();
+jest.mock('../hooks/usePanelEditorDraft', () => ({
+	usePanelEditorDraft: (panel: unknown): unknown => mockUseDraft(panel),
+}));
+
+const mockUseQuery = jest.fn();
+jest.mock('../../hooks/usePanelQuery', () => ({
+	usePanelQuery: (args: unknown): unknown => mockUseQuery(args),
+}));
+
+const mockUseQuerySync = jest.fn();
+jest.mock('../hooks/usePanelEditorQuerySync', () => ({
+	usePanelEditorQuerySync: (args: unknown): unknown => mockUseQuerySync(args),
+}));
+
+const mockUseTypeSwitch = jest.fn();
+jest.mock('../hooks/usePanelTypeSwitch', () => ({
+	usePanelTypeSwitch: (args: unknown): unknown => mockUseTypeSwitch(args),
+}));
+
+jest.mock('../hooks/usePanelEditorSave', () => ({
+	usePanelEditorSave: (): unknown => ({ save: mockSave, isSaving: false }),
+}));
+
+jest.mock('../hooks/useSwitchColumnsOnSignalChange', () => ({
+	useSwitchColumnsOnSignalChange: jest.fn(),
+}));
+jest.mock('../hooks/useSeedNewListColumns', () => ({
+	useSeedNewListColumns: jest.fn(),
+}));
+jest.mock('../hooks/useLegendSeries', () => ({
+	useLegendSeries: (): [] => [],
+}));
+jest.mock('../hooks/useTableColumns', () => ({
+	useTableColumns: (): [] => [],
+}));
+jest.mock('../hooks/useMetricYAxisUnit', () => ({
+	useMetricYAxisUnit: (): unknown => ({
+		metricUnit: undefined,
+		isLoading: false,
+	}),
+}));
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): unknown => ({ currentQuery: { queryType: 'builder' } }),
+}));
+jest.mock(
+	'../../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions',
+	() => ({
+		usePanelInteractions: (): unknown => ({
+			onDragSelect: jest.fn(),
+			dashboardPreference: {},
+		}),
+	}),
+);
+
+jest.mock('@signozhq/ui/resizable', () => ({
+	__esModule: true,
+	ResizablePanelGroup: ({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element => <div>{children}</div>,
+	ResizablePanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+	ResizableHandle: (): null => null,
+	useDefaultLayout: (): unknown => ({
+		defaultLayout: undefined,
+		onLayoutChanged: jest.fn(),
+	}),
+}));
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+// Children mocked to capture props (and expose a Save trigger / footer slot).
+const mockHeaderProps = jest.fn();
+jest.mock('../Header/Header', () => ({
+	__esModule: true,
+	default: (props: { onSave: () => void }): JSX.Element => {
+		mockHeaderProps(props);
+		return (
+			<button type="button" data-testid="editor-save" onClick={props.onSave}>
+				save
+			</button>
+		);
+	},
+}));
+const mockPreviewProps = jest.fn();
+jest.mock('../PreviewPane/PreviewPane', () => ({
+	__esModule: true,
+	default: (props: unknown): JSX.Element => {
+		mockPreviewProps(props);
+		return <div data-testid="preview" />;
+	},
+}));
+const mockQbProps = jest.fn();
+jest.mock('../PanelEditorQueryBuilder/PanelEditorQueryBuilder', () => ({
+	__esModule: true,
+	default: (props: { footer?: React.ReactNode }): JSX.Element => {
+		mockQbProps(props);
+		return <div data-testid="qb">{props.footer}</div>;
+	},
+}));
+const mockConfigProps = jest.fn();
+jest.mock('../ConfigPane/ConfigPane', () => ({
+	__esModule: true,
+	default: (props: unknown): JSX.Element => {
+		mockConfigProps(props);
+		return <div data-testid="config" />;
+	},
+}));
+jest.mock('../ListColumnsEditor/ListColumnsEditor', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="list-columns" />,
+}));
+
+function makePanel(kind: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'CPU' },
+			plugin: { kind, spec: {} },
+			queries: [],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const baseProps = {
+	dashboardId: 'dash-1',
+	panelId: 'panel-1',
+	onClose: jest.fn(),
+	onSaved: jest.fn(),
+};
+
+function setup(
+	panel: DashboardtypesPanelDTO,
+	overrides?: Partial<React.ComponentProps<typeof PanelEditorContainer>>,
+): void {
+	mockUseDraft.mockReturnValue({
+		draft: panel,
+		spec: panel.spec,
+		setSpec: mockSetSpec,
+		isSpecDirty: false,
+	});
+	mockUseQuery.mockReturnValue({
+		data: { response: undefined },
+		isFetching: false,
+		error: null,
+		cancelQuery: mockCancelQuery,
+		refetch: mockRefetch,
+		pagination: undefined,
+	});
+	mockUseQuerySync.mockReturnValue({
+		runQuery: jest.fn(),
+		isQueryDirty: false,
+		buildSaveSpec: mockBuildSaveSpec,
+	});
+	mockUseTypeSwitch.mockReturnValue({
+		onChangePanelKind: mockOnChangePanelKind,
+	});
+	render(<PanelEditorContainer {...baseProps} panel={panel} {...overrides} />);
+}
+
+describe('PanelEditorContainer composition', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('renders the editor shell with preview, query builder, and config pane', () => {
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		setup(panel);
+
+		expect(screen.getByTestId('panel-editor-v2')).toBeInTheDocument();
+		expect(screen.getByTestId('preview')).toBeInTheDocument();
+		expect(screen.getByTestId('qb')).toBeInTheDocument();
+		expect(screen.getByTestId('config')).toBeInTheDocument();
+
+		expect(mockPreviewProps).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panel,
+				panelDefinition: getPanelDefinition('signoz/TimeSeriesPanel'),
+			}),
+		);
+		expect(mockQbProps).toHaveBeenCalledWith(
+			expect.objectContaining({ panelKind: 'signoz/TimeSeriesPanel' }),
+		);
+		expect(mockConfigProps).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panel,
+				spec: panel.spec,
+				onChangePanelKind: mockOnChangePanelKind,
+			}),
+		);
+	});
+
+	it('forwards the derived panel type + query-sync options to the leaf hooks', () => {
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		setup(panel);
+
+		expect(mockUseQuery).toHaveBeenCalledWith(
+			expect.objectContaining({ panel, panelId: 'panel-1', enabled: true }),
+		);
+		expect(mockUseQuerySync).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panelType: PANEL_TYPES.TIME_SERIES,
+				setSpec: mockSetSpec,
+				refetch: mockRefetch,
+				alwaysSerializeQuery: false,
+				signal: getPanelDefinition('signoz/TimeSeriesPanel').supportedSignals[0],
+			}),
+		);
+		expect(mockUseTypeSwitch).toHaveBeenCalledWith(
+			expect.objectContaining({
+				panelType: PANEL_TYPES.TIME_SERIES,
+				spec: panel.spec,
+				setSpec: mockSetSpec,
+			}),
+		);
+	});
+
+	it('marks a new panel dirty and always serializes its query', () => {
+		setup(makePanel('signoz/TimeSeriesPanel'), { isNew: true });
+
+		expect(mockUseQuerySync).toHaveBeenCalledWith(
+			expect.objectContaining({ alwaysSerializeQuery: true }),
+		);
+		expect(mockHeaderProps).toHaveBeenCalledWith(
+			expect.objectContaining({ isDirty: true }),
+		);
+	});
+
+	it('bakes the live query into the spec on save, then notifies', async () => {
+		const panel = makePanel('signoz/TimeSeriesPanel');
+		setup(panel, { onSaved: baseProps.onSaved });
+
+		await userEvent.click(screen.getByTestId('editor-save'));
+
+		await waitFor(() => expect(baseProps.onSaved).toHaveBeenCalled());
+		expect(mockBuildSaveSpec).toHaveBeenCalledWith(panel.spec);
+		expect(mockSave).toHaveBeenCalledWith(panel.spec);
+	});
+
+	it('renders the list-columns editor only for list panels', () => {
+		setup(makePanel('signoz/ListPanel'));
+		expect(screen.getByTestId('list-columns')).toBeInTheDocument();
+	});
+
+	it('omits the list-columns editor for non-list panels', () => {
+		setup(makePanel('signoz/TimeSeriesPanel'));
+		expect(screen.queryByTestId('list-columns')).not.toBeInTheDocument();
+	});
+});

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

@@ -1,7 +1,5 @@
 import {
-	DashboardtypesComparisonOperatorDTO,
 	type DashboardtypesPanelSpecDTO,
-	DashboardtypesThresholdFormatDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
@@ -28,20 +26,21 @@ function specWith(pluginSpec: unknown): DashboardtypesPanelSpecDTO {
 	} as unknown as DashboardtypesPanelSpecDTO;
 }
 
+// Thin wrapper — only prove delegation; seeding rules are covered in buildPluginSpec.test.ts.
 describe('getSwitchedPluginSpec', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockDefaultColumnsForSignal.mockReturnValue([]);
 	});
 
-	it('carries only unit + decimalPrecision when the new kind has a formatting section', () => {
+	it("resolves the target kind's sections and carries the old spec through them", () => {
 		mockGetPanelDefinition.mockReturnValue({
-			sections: [{ kind: 'formatting', controls: { unit: true, decimals: true } }],
-		});
-		const old = specWith({
-			formatting: { unit: 'ms', decimalPrecision: 2, columnUnits: { A: 'bytes' } },
-			axes: { logScale: true },
+			sections: [
+				{ kind: 'legend', controls: { position: true } },
+				{ kind: 'formatting', controls: { unit: true, decimals: true } },
+			],
 		});
+		const old = specWith({ formatting: { unit: 'ms', decimalPrecision: 2 } });
 
 		const result = getSwitchedPluginSpec(
 			old,
@@ -49,25 +48,12 @@ describe('getSwitchedPluginSpec', () => {
 			TelemetrytypesSignalDTO.logs,
 		);
 
+		expect(mockGetPanelDefinition).toHaveBeenCalledWith('signoz/TimeSeriesPanel');
+		expect(result.legend?.position).toBe('bottom');
 		expect(result.formatting).toStrictEqual({ unit: 'ms', decimalPrecision: 2 });
-		// Type-specific config from the old kind is dropped.
-		expect((result as { axes?: unknown }).axes).toBeUndefined();
 	});
 
-	it('does not carry formatting when the new kind has no formatting section', () => {
-		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-		const old = specWith({ formatting: { unit: 'ms' } });
-
-		const result = getSwitchedPluginSpec(
-			old,
-			'signoz/ListPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(result.formatting).toBeUndefined();
-	});
-
-	it('seeds List columns from the signal when switching into a List', () => {
+	it('forwards the signal to seed List columns', () => {
 		const columns = [{ name: 'body' }];
 		mockDefaultColumnsForSignal.mockReturnValue(columns);
 		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
@@ -83,155 +69,4 @@ describe('getSwitchedPluginSpec', () => {
 		);
 		expect(result.selectFields).toBe(columns);
 	});
-
-	it('includes the kind section defaults (e.g. legend position)', () => {
-		mockGetPanelDefinition.mockReturnValue({
-			sections: [{ kind: 'legend', controls: { position: true } }],
-		});
-
-		const result = getSwitchedPluginSpec(
-			specWith({}),
-			'signoz/PieChartPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(result.legend?.position).toBe('bottom');
-	});
-
-	describe('thresholds', () => {
-		it('does not carry thresholds when the new kind has no thresholds section', () => {
-			mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/ListPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toBeUndefined();
-		});
-
-		it('carries thresholds verbatim within the label variant (color/value/unit/label)', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/BarChartPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' },
-			]);
-		});
-
-		it('remaps label thresholds into the comparison variant, defaulting operator + format', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'comparison' } }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/NumberPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			// The label is dropped; operator/format are seeded so the threshold can match.
-			expect(result.thresholds).toStrictEqual([
-				{
-					value: 80,
-					color: '#F1575F',
-					operator: DashboardtypesComparisonOperatorDTO.above,
-					format: DashboardtypesThresholdFormatDTO.text,
-				},
-			]);
-		});
-
-		it('remaps comparison thresholds into the table variant, keeping operator/format and seeding a column', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'table' } }],
-			});
-			const old = specWith({
-				thresholds: [
-					{
-						value: 80,
-						color: '#F1575F',
-						operator: DashboardtypesComparisonOperatorDTO.below,
-						format: DashboardtypesThresholdFormatDTO.text,
-					},
-				],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TablePanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{
-					value: 80,
-					color: '#F1575F',
-					operator: DashboardtypesComparisonOperatorDTO.below,
-					format: DashboardtypesThresholdFormatDTO.text,
-					columnName: '',
-				},
-			]);
-		});
-
-		it('drops the table-only columnName when remapping into the label variant', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
-			});
-			const old = specWith({
-				thresholds: [
-					{
-						value: 80,
-						color: '#F1575F',
-						operator: DashboardtypesComparisonOperatorDTO.above,
-						format: DashboardtypesThresholdFormatDTO.background,
-						columnName: 'p99',
-					},
-				],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TimeSeriesPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([{ value: 80, color: '#F1575F' }]);
-		});
-
-		it('defaults the variant to label when the thresholds section omits controls', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: {} }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TimeSeriesPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{ value: 80, color: '#F1575F', label: 'warn' },
-			]);
-		});
-	});
 });

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

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

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

@@ -49,6 +49,7 @@ const LIST_QUERIES = [{ id: 'list-q' }] as unknown as NonNullable<
 const TRANSFORMED = {
 	id: 'transformed',
 	queryType: 'builder',
+	builder: { queryData: [{ orderBy: [] }] },
 } as unknown as Query;
 const CONVERTED = [{ id: 'converted' }] as unknown as NonNullable<
 	DashboardtypesPanelSpecDTO['queries']
@@ -131,7 +132,39 @@ describe('usePanelTypeSwitch', () => {
 		expect(next.plugin.kind).toBe('signoz/ListPanel');
 		expect(next.plugin.spec).toBe(SWITCHED_SPEC);
 		expect(next.queries).toBe(CONVERTED);
-		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(TRANSFORMED);
+		const redirected = state.redirectWithQueryBuilderData.mock
+			.calls[0][0] as Query;
+		expect(redirected.builder.queryData[0].orderBy).toStrictEqual([
+			{ columnName: 'timestamp', order: 'desc' },
+		]);
+	});
+
+	it('seeds timestamp-desc Order By on every query when switching to a List panel', () => {
+		const setSpec = jest.fn();
+		mockUseQueryBuilder.mockReturnValue(
+			builderState({ id: 'ts-current', queryType: 'builder' } as Query),
+		);
+		mockHandleQueryChange.mockReturnValue({
+			id: 'transformed',
+			queryType: 'builder',
+			builder: { queryData: [{ orderBy: [] }, { orderBy: undefined }] },
+		} as unknown as Query);
+
+		const { result } = renderHook(() =>
+			usePanelTypeSwitch({
+				spec: makeSpec('signoz/TimeSeriesPanel', {}, TABLE_QUERIES),
+				panelType: PANEL_TYPES.TIME_SERIES,
+				setSpec,
+			}),
+		);
+		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
+
+		const [persisted] = mockToPerses.mock.calls[0] as [Query];
+		persisted.builder.queryData.forEach((qd) => {
+			expect(qd.orderBy).toStrictEqual([
+				{ columnName: 'timestamp', order: 'desc' },
+			]);
+		});
 	});
 
 	it('coerces the query type when the new kind disallows it (promql → List)', () => {