feat: ui update

.vscode/settings.json

@@ -19,8 +19,5 @@
     "editor.defaultFormatter": "vscode.html-language-features"
   },
   "python-envs.defaultEnvManager": "ms-python.python:system",
-  "python-envs.pythonProjects": [],
-  "[json]": {
-    "editor.defaultFormatter": "vscode.json-language-features"
-  }
+  "python-envs.pythonProjects": []
 }

docs/api/openapi.yml

@@ -409,6 +409,10 @@ components:
       properties:
         duration:
           type: string
+        endTime:
+          format: date-time
+          nullable: true
+          type: string
         repeatOn:
           items:
             $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
@@ -416,7 +420,11 @@ components:
           type: array
         repeatType:
           $ref: '#/components/schemas/AlertmanagertypesRepeatType'
+        startTime:
+          format: date-time
+          type: string
       required:
+      - startTime
       - duration
       - repeatType
       type: object
@@ -450,7 +458,6 @@ components:
           type: string
       required:
       - timezone
-      - startTime
       type: object
     AuthtypesAttributeMapping:
       properties:
@@ -2429,6 +2436,13 @@ components:
         url:
           type: string
       type: object
+    DashboardPanelDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2556,12 +2570,13 @@ components:
             $ref: '#/components/schemas/DashboardtypesDatasourceSpec'
           type: object
         display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/CommonDisplay'
         duration:
           type: string
         layouts:
           items:
             $ref: '#/components/schemas/DashboardtypesLayout'
+          nullable: true
           type: array
         links:
           items:
@@ -2570,6 +2585,7 @@ components:
         panels:
           additionalProperties:
             $ref: '#/components/schemas/DashboardtypesPanel'
+          nullable: true
           type: object
         refreshInterval:
           type: string
@@ -2577,11 +2593,6 @@ components:
           items:
             $ref: '#/components/schemas/DashboardtypesVariable'
           type: array
-      required:
-      - display
-      - variables
-      - panels
-      - layouts
       type: object
     DashboardtypesDatasourcePlugin:
       discriminator:
@@ -2617,15 +2628,6 @@ components:
         plugin:
           $ref: '#/components/schemas/DashboardtypesDatasourcePlugin'
       type: object
-    DashboardtypesDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      required:
-      - name
-      type: object
     DashboardtypesDynamicVariableSpec:
       properties:
         name:
@@ -2820,7 +2822,7 @@ components:
         defaultValue:
           $ref: '#/components/schemas/VariableDefaultValue'
         display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/VariableDisplay'
         name:
           type: string
         plugin:
@@ -2828,8 +2830,6 @@ components:
         sort:
           nullable: true
           type: string
-      required:
-      - display
       type: object
     DashboardtypesListableDashboardForUserV2:
       properties:
@@ -2957,7 +2957,7 @@ components:
     DashboardtypesListedDashboardV2Spec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/CommonDisplay'
       type: object
     DashboardtypesNumberPanelSpec:
       properties:
@@ -2977,9 +2977,6 @@ components:
           $ref: '#/components/schemas/DashboardtypesPanelKind'
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
-      required:
-      - kind
-      - spec
       type: object
     DashboardtypesPanelFormatting:
       properties:
@@ -3109,7 +3106,7 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/DashboardPanelDisplay'
         links:
           items:
             $ref: '#/components/schemas/DashboardLink'
@@ -3119,12 +3116,7 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
-          nullable: true
           type: array
-      required:
-      - display
-      - plugin
-      - queries
       type: object
     DashboardtypesPatchOp:
       enum:
@@ -3193,9 +3185,6 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5RequestType'
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
-      required:
-      - kind
-      - spec
       type: object
     DashboardtypesQueryPlugin:
       discriminator:
@@ -3302,8 +3291,6 @@ components:
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesQueryPlugin'
-      required:
-      - plugin
       type: object
     DashboardtypesQueryVariableSpec:
       properties:
@@ -3566,6 +3553,10 @@ components:
           items:
             $ref: '#/components/schemas/ErrorsResponseerroradditional'
           type: array
+        invalidReferences:
+          items:
+            type: string
+          type: array
         message:
           type: string
         retry:
@@ -3586,10 +3577,6 @@ components:
       properties:
         message:
           type: string
-        suggestions:
-          items:
-            type: string
-          type: array
       type: object
     ErrorsResponseretryjson:
       properties:
@@ -9004,6 +8991,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "401":
           content:
@@ -9156,6 +9147,10 @@ paths:
               $ref: '#/components/schemas/DashboardtypesUpdatablePublicDashboard'
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "401":
           content:
@@ -9750,6 +9745,10 @@ paths:
               $ref: '#/components/schemas/Querybuildertypesv5QueryRangeRequest'
       responses:
         "200":
+          content:
+            application/json:
+              schema:
+                type: string
           description: OK
         "400":
           content:
@@ -10934,6 +10933,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "401":
           content:
@@ -11047,6 +11050,10 @@ paths:
               $ref: '#/components/schemas/AuthtypesPatchableRole'
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "401":
           content:
@@ -11193,6 +11200,10 @@ paths:
               $ref: '#/components/schemas/CoretypesPatchableObjects'
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:
@@ -11642,6 +11653,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "401":
           content:
@@ -11749,6 +11764,10 @@ paths:
               $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccount'
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:
@@ -11930,6 +11949,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "401":
           content:
@@ -11987,6 +12010,10 @@ paths:
               $ref: '#/components/schemas/ServiceaccounttypesUpdatableFactorAPIKey'
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:
@@ -12169,6 +12196,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "401":
           content:
@@ -12244,6 +12275,10 @@ paths:
               $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccount'
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "404":
           content:
@@ -12735,53 +12770,6 @@ paths:
       summary: Update a span mapper
       tags:
       - spanmapper
-  /api/v1/stats:
-    get:
-      deprecated: false
-      description: This endpoint returns the collected stats for the organization
-      operationId: GetStats
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    additionalProperties: {}
-                    type: object
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get stats
-      tags:
-      - stats
   /api/v1/testChannel:
     post:
       deprecated: true
@@ -13468,6 +13456,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:
@@ -13727,6 +13719,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:
@@ -13779,6 +13775,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:
@@ -15509,6 +15509,10 @@ paths:
               $ref: '#/components/schemas/MetricsexplorertypesUpdateMetricMetadataRequest'
       responses:
         "200":
+          content:
+            application/json:
+              schema:
+                type: string
           description: OK
         "400":
           content:
@@ -20807,6 +20811,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:
@@ -20854,6 +20862,10 @@ paths:
           type: string
       responses:
         "204":
+          content:
+            application/json:
+              schema:
+                type: string
           description: No Content
         "400":
           content:

docs/contributing/go/handler.md

@@ -109,20 +109,6 @@ func (h *handler) CreateThing(rw http.ResponseWriter, req *http.Request) {
 }
 ```
 
-When you need an ID from `claims` as a `valuer.UUID` (for example to pass it to a module), derive it with the `Must*` constructor instead of `NewUUID` plus an error check. Claims are validated by the auth middleware, so the conversion cannot fail and the error branch would be dead code:
-
-```go
-// Good — claims are pre-validated, the conversion cannot fail.
-orgID := valuer.MustNewUUID(claims.OrgID)
-
-// Avoid — the error path is unreachable.
-orgID, err := valuer.NewUUID(claims.OrgID)
-if err != nil {
-    render.Error(rw, err)
-    return
-}
-```
-
 ### 3. Register the handler in `signozapiserver`
 
 In `pkg/apiserver/signozapiserver`, add a route in the appropriate `add*Routes` function (`addUserRoutes`, `addSessionRoutes`, `addOrgRoutes`, etc.). The pattern is:
@@ -401,4 +387,3 @@ Note the discriminator property lives in the variants, not on the parent — the
 - **Add `nullable:"true"`** on fields that can be `null`. Pay special attention to slices and maps -- in Go these default to `nil` which serializes to `null`. If the field should always be an array, initialize it and do not mark it nullable.
 - **Implement `Enum()`** on every type that has a fixed set of acceptable values so the JSON schema generates proper `enum` constraints.
 - **Add request examples** via `RequestExamples` in `OpenAPIDef` for any non-trivial endpoint. See `pkg/apiserver/signozapiserver/querier.go` for reference.
-- **Derive IDs from `claims` with `valuer.MustNewUUID`** (e.g. `claims.OrgID`, `claims.UserID`). Claims are pre-validated by the auth middleware, so use the `Must*` constructor — don't write `NewUUID` followed by an `if err != nil { render.Error(...); return }` block.

ee/modules/dashboard/impldashboard/module.go

@@ -254,12 +254,12 @@ func (module *module) PinV2(ctx context.Context, orgID valuer.UUID, userID value
 	return module.pkgDashboardModule.PinV2(ctx, orgID, userID, id)
 }
 
-func (module *module) UnpinV2(ctx context.Context, orgID valuer.UUID, userID valuer.UUID, id valuer.UUID) error {
-	return module.pkgDashboardModule.UnpinV2(ctx, orgID, userID, id)
+func (module *module) UnpinV2(ctx context.Context, userID valuer.UUID, id valuer.UUID) error {
+	return module.pkgDashboardModule.UnpinV2(ctx, userID, id)
 }
 
-func (module *module) DeletePreferencesForUser(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
-	return module.pkgDashboardModule.DeletePreferencesForUser(ctx, orgID, userID)
+func (module *module) DeletePreferencesForUser(ctx context.Context, userID valuer.UUID) error {
+	return module.pkgDashboardModule.DeletePreferencesForUser(ctx, userID)
 }
 
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {

ee/querier/handler.go

@@ -3,13 +3,13 @@ package querier
 import (
 	"bytes"
 	"context"
+	"encoding/json"
 	"io"
 	"net/http"
 
 	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/http/binding"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -48,8 +48,8 @@ func (h *handler) QueryRange(rw http.ResponseWriter, req *http.Request) {
 	}
 
 	var queryRangeRequest qbtypes.QueryRangeRequest
-	if err := binding.JSON.BindBody(req.Body, &queryRangeRequest); err != nil {
-		render.Error(rw, err)
+	if err := json.NewDecoder(req.Body).Decode(&queryRangeRequest); err != nil {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to decode request body: %v", err))
 		return
 	}
 

ee/query-service/app/server.go

@@ -185,7 +185,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Default,
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
-	r.Use(middleware.NewResource(s.signoz.Instrumentation.Logger()).Wrap)
 	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
 	r.Use(middleware.NewComment().Wrap)
 

frontend/src/AppRoutes/pageComponents.ts

@@ -323,3 +323,17 @@ export const AIAssistantPage = Loadable(
 			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
 		),
 );
+
+export const LLMObservabilityModelPricingPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
+		),
+);
+
+export const LLMObservabilityAttributeMappingPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "LLM Observability Attribute Mapping Page" */ 'pages/LLMObservabilityAttributeMapping'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -22,6 +22,8 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
+	LLMObservabilityAttributeMappingPage,
+	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -507,6 +509,20 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
+		exact: true,
+		component: LLMObservabilityModelPricingPage,
+		key: 'LLM_OBSERVABILITY_MODEL_PRICING',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		exact: true,
+		component: LLMObservabilityAttributeMappingPage,
+		key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

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

@@ -63,7 +63,7 @@ export const deletePublicDashboard = (
 	{ id }: DeletePublicDashboardPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/dashboards/${id}/public`,
 		method: 'DELETE',
 		signal,
@@ -346,7 +346,7 @@ export const updatePublicDashboard = (
 	dashboardtypesUpdatablePublicDashboardDTO?: BodyType<DashboardtypesUpdatablePublicDashboardDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/dashboards/${id}/public`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
@@ -836,7 +836,7 @@ export const deleteDashboardV2 = (
 	{ id }: DeleteDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v2/dashboards/${id}`,
 		method: 'DELETE',
 		signal,
@@ -1214,7 +1214,7 @@ export const unlockDashboardV2 = (
 	{ id }: UnlockDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v2/dashboards/${id}/lock`,
 		method: 'DELETE',
 		signal,
@@ -1293,7 +1293,7 @@ export const lockDashboardV2 = (
 	{ id }: LockDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v2/dashboards/${id}/lock`,
 		method: 'PUT',
 		signal,
@@ -1471,7 +1471,7 @@ export const unpinDashboardV2 = (
 	{ id }: UnpinDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v2/users/me/dashboards/${id}/pins`,
 		method: 'DELETE',
 		signal,
@@ -1550,7 +1550,7 @@ export const pinDashboardV2 = (
 	{ id }: PinDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v2/users/me/dashboards/${id}/pins`,
 		method: 'PUT',
 		signal,

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

@@ -37,7 +37,7 @@ export const handleExportRawDataPOST = (
 	params?: HandleExportRawDataPOSTParams,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/export_raw_data`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },

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

@@ -680,7 +680,7 @@ export const updateMetricMetadata = (
 	metricsexplorertypesUpdateMetricMetadataRequestDTO?: BodyType<MetricsexplorertypesUpdateMetricMetadataRequestDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v2/metrics/${metricName}/metadata`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },

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

@@ -203,7 +203,7 @@ export const deleteRole = (
 	{ id }: DeleteRolePathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}`,
 		method: 'DELETE',
 		signal,
@@ -372,7 +372,7 @@ export const patchRole = (
 	authtypesPatchableRoleDTO?: BodyType<AuthtypesPatchableRoleDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
@@ -572,7 +572,7 @@ export const patchObjects = (
 	coretypesPatchableObjectsDTO?: BodyType<CoretypesPatchableObjectsDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },

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

@@ -222,7 +222,7 @@ export const deleteServiceAccount = (
 	{ id }: DeleteServiceAccountPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/service_accounts/${id}`,
 		method: 'DELETE',
 		signal,
@@ -405,7 +405,7 @@ export const updateServiceAccount = (
 	serviceaccounttypesPostableServiceAccountDTO?: BodyType<ServiceaccounttypesPostableServiceAccountDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/service_accounts/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
@@ -707,7 +707,7 @@ export const revokeServiceAccountKey = (
 	{ id, fid }: RevokeServiceAccountKeyPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/service_accounts/${id}/keys/${fid}`,
 		method: 'DELETE',
 		signal,
@@ -788,7 +788,7 @@ export const updateServiceAccountKey = (
 	serviceaccounttypesUpdatableFactorAPIKeyDTO?: BodyType<ServiceaccounttypesUpdatableFactorAPIKeyDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/service_accounts/${id}/keys/${fid}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
@@ -1090,7 +1090,7 @@ export const deleteServiceAccountRole = (
 	{ id, rid }: DeleteServiceAccountRolePathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/service_accounts/${id}/roles/${rid}`,
 		method: 'DELETE',
 		signal,
@@ -1254,7 +1254,7 @@ export const updateMyServiceAccount = (
 	serviceaccounttypesPostableServiceAccountDTO?: BodyType<ServiceaccounttypesPostableServiceAccountDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v1/service_accounts/me`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },

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

@@ -413,11 +413,21 @@ export interface AlertmanagertypesRecurrenceDTO {
 	 * @type string
 	 */
 	duration: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	endTime?: string | null;
 	/**
 	 * @type array,null
 	 */
 	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
 	repeatType: AlertmanagertypesRepeatTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime: string;
 }
 
 export interface AlertmanagertypesScheduleDTO {
@@ -431,7 +441,7 @@ export interface AlertmanagertypesScheduleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startTime: string;
+	startTime?: string;
 	/**
 	 * @type string
 	 */
@@ -2143,10 +2153,6 @@ export interface ErrorsResponseerroradditionalDTO {
 	 * @type string
 	 */
 	message?: string;
-	/**
-	 * @type array
-	 */
-	suggestions?: string[];
 }
 
 export interface ErrorsResponseretryjsonDTO {
@@ -2162,6 +2168,10 @@ export interface ErrorsJSONDTO {
 	 * @type array
 	 */
 	errors?: ErrorsResponseerroradditionalDTO[];
+	/**
+	 * @type array
+	 */
+	invalidReferences?: string[];
 	/**
 	 * @type string
 	 */
@@ -3146,6 +3156,17 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
+export interface DashboardPanelDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3871,17 +3892,6 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 export enum DashboardtypesPanelKindDTO {
 	Panel = 'Panel',
 }
-export interface DashboardtypesDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4430,36 +4440,42 @@ export interface DashboardtypesQuerySpecDTO {
 	 * @type string
 	 */
 	name?: string;
-	plugin: DashboardtypesQueryPluginDTO;
+	plugin?: DashboardtypesQueryPluginDTO;
 }
 
 export interface DashboardtypesQueryDTO {
-	kind: Querybuildertypesv5RequestTypeDTO;
-	spec: DashboardtypesQuerySpecDTO;
+	kind?: Querybuildertypesv5RequestTypeDTO;
+	spec?: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display: DashboardtypesDisplayDTO;
+	display?: DashboardPanelDisplayDTO;
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
-	plugin: DashboardtypesPanelPluginDTO;
+	plugin?: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	queries: DashboardtypesQueryDTO[] | null;
+	queries?: DashboardtypesQueryDTO[];
 }
 
 export interface DashboardtypesPanelDTO {
-	kind: DashboardtypesPanelKindDTO;
-	spec: DashboardtypesPanelSpecDTO;
+	kind?: DashboardtypesPanelKindDTO;
+	spec?: DashboardtypesPanelSpecDTO;
 }
 
-export type DashboardtypesDashboardSpecDTOPanels = {
+export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
 	[key: string]: DashboardtypesPanelDTO;
 };
 
+/**
+ * @nullable
+ */
+export type DashboardtypesDashboardSpecDTOPanels =
+	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
+
 export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
@@ -4556,7 +4572,7 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display: DashboardtypesDisplayDTO;
+	display?: VariableDisplayDTO;
 	/**
 	 * @type string
 	 */
@@ -4598,23 +4614,23 @@ export interface DashboardtypesDashboardSpecDTO {
 	 * @type object
 	 */
 	datasources?: DashboardtypesDashboardSpecDTODatasources;
-	display: DashboardtypesDisplayDTO;
+	display?: CommonDisplayDTO;
 	/**
 	 * @type string
 	 */
 	duration?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	layouts: DashboardtypesLayoutDTO[];
+	layouts?: DashboardtypesLayoutDTO[] | null;
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
 	/**
-	 * @type object
+	 * @type object,null
 	 */
-	panels: DashboardtypesDashboardSpecDTOPanels;
+	panels?: DashboardtypesDashboardSpecDTOPanels;
 	/**
 	 * @type string
 	 */
@@ -4622,7 +4638,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	variables: DashboardtypesVariableDTO[];
+	variables?: DashboardtypesVariableDTO[];
 }
 
 export enum DashboardtypesDatasourcePluginKindDTO {
@@ -4746,7 +4762,7 @@ export enum DashboardtypesListSortDTO {
 	name = 'name',
 }
 export interface DashboardtypesListedDashboardV2SpecDTO {
-	display?: DashboardtypesDisplayDTO;
+	display?: CommonDisplayDTO;
 }
 
 export interface DashboardtypesListedDashboardForUserV2DTO {
@@ -9736,19 +9752,6 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
-export type GetStats200Data = { [key: string]: unknown };
-
-export type GetStats200 = {
-	/**
-	 * @type object
-	 */
-	data: GetStats200Data;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetTraceAggregationsPathParameters = {
 	traceID: string;
 };

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

@@ -1,96 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
- * SigNoz
- */
-import { useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type { GetStats200, RenderErrorResponseDTO } from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType } from '../../../generatedAPIInstance';
-
-/**
- * This endpoint returns the collected stats for the organization
- * @summary Get stats
- */
-export const getStats = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetStats200>({
-		url: `/api/v1/stats`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetStatsQueryKey = () => {
-	return [`/api/v1/stats`] as const;
-};
-
-export const getGetStatsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getStats>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetStatsQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getStats>>> = ({
-		signal,
-	}) => getStats(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getStats>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetStatsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getStats>>
->;
-export type GetStatsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get stats
- */
-
-export function useGetStats<
-	TData = Awaited<ReturnType<typeof getStats>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getStats>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetStatsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get stats
- */
-export const invalidateGetStats = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetStatsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -90,20 +90,4 @@ describe('RouteTab component', () => {
 		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(onChangeHandler).toHaveBeenCalled();
 	});
-
-	it('unmounts inactive tab pane content after switching', () => {
-		const history = createMemoryHistory({ initialEntries: ['/tab1'] });
-		render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
-
-		expect(screen.getByText('Dummy Component 1')).toBeInTheDocument();
-
-		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
-
-		expect(screen.queryByText('Dummy Component 1')).not.toBeInTheDocument();
-		expect(screen.getByText('Dummy Component 2')).toBeInTheDocument();
-	});
 });

frontend/src/components/RouteTab/index.tsx

@@ -59,7 +59,7 @@ function RouteTab({
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}
 			defaultActiveKey={currentRoute?.key || activeKey}
-			animated={{ inkBar: true, tabPane: false }}
+			animated
 			items={items}
 			tabBarExtraContent={
 				showRightSection && (

frontend/src/constants/env.ts

@@ -1,7 +1,9 @@
 export const ENVIRONMENT = {
-	baseURL:
-		process?.env?.FRONTEND_API_ENDPOINT ||
-		process?.env?.GITPOD_WORKSPACE_URL?.replace('://', '://8080-') ||
-		'',
-	wsURL: process?.env?.WEBSOCKET_API_ENDPOINT || '',
+	// baseURL:
+	// 	process?.env?.FRONTEND_API_ENDPOINT ||
+	// 	process?.env?.GITPOD_WORKSPACE_URL?.replace('://', '://8080-') ||
+	// 	'',
+	// wsURL: process?.env?.WEBSOCKET_API_ENDPOINT || '',
+	baseURL: 'https://app.us.staging.signoz.cloud',
+	wsURL: 'ws://app.us.staging.signoz.cloud',
 };

frontend/src/constants/reactQueryKeys.ts

@@ -36,7 +36,6 @@ export const REACT_QUERY_KEY = {
 	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
 	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
-	GET_TRACE_V3_FLAMEGRAPH: 'GET_TRACE_V3_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',
 	GET_DEPLOYMENT_LIST: 'GET_DEPLOYMENT_LIST',

frontend/src/constants/routes.ts

@@ -91,6 +91,9 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
+	LLM_OBSERVABILITY_MODEL_PRICING: '/llm-observability/settings/model-pricing',
+	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING:
+		'/llm-observability/settings/attribute-mapping',
 } as const;
 
 export default ROUTES;

frontend/src/container/AIAssistant/hooks/useSpeechRecognition.ts

@@ -40,31 +40,13 @@ type SpeechRecognitionConstructor = new () => ISpeechRecognition;
 
 // ── Vendor-prefix shim for Safari / older browsers ────────────────────────────
 
-// Some hardened/enterprise browsers install a getter
-// on window.SpeechRecognition that THROWS on access ("Web Speech API is disabled
-// due to your security policy") instead of leaving the property undefined.
-// Because this resolves at module-evaluation time, an uncaught throw here aborts
-// the entire bundle and the app renders a blank page. Read defensively so a
-// throwing getter degrades to "unsupported" rather than crashing the app.
-function resolveSpeechRecognitionAPI(): SpeechRecognitionConstructor | null {
-	if (typeof window === 'undefined') {
-		return null;
-	}
-	try {
-		return (
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			(window as any).SpeechRecognition ??
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			(window as any).webkitSpeechRecognition ??
-			null
-		);
-	} catch {
-		return null;
-	}
-}
-
 const SpeechRecognitionAPI: SpeechRecognitionConstructor | null =
-	resolveSpeechRecognitionAPI();
+	typeof window !== 'undefined'
+		? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+			((window as any).SpeechRecognition ??
+			(window as any).webkitSpeechRecognition ??
+			null)
+		: null;
 
 export type SpeechRecognitionError =
 	| 'not-supported'

frontend/src/container/BillingContainer/BillingContainer.module.scss

@@ -1,7 +1,8 @@
 .billingContainer {
+	margin-bottom: var(--spacing-20);
 	padding-top: 36px;
 	width: 90%;
-	margin: 0 auto var(--spacing-20);
+	margin: 0 auto;
 
 	.pageHeader {
 		margin-bottom: var(--spacing-8);

frontend/src/container/CreateAlertRule/index.tsx

@@ -11,7 +11,6 @@ import CreateAlertV2 from 'container/CreateAlertV2';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import useReducedMotion from 'hooks/useReducedMotion';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { AlertListTabs } from 'pages/AlertList/types';
@@ -27,7 +26,6 @@ import './CreateAlertRule.styles.scss';
 
 function CreateRules(): JSX.Element {
 	const [formInstance] = Form.useForm();
-	const prefersReducedMotion = useReducedMotion();
 	const compositeQuery = useGetCompositeQueryParam();
 	const queryParams = useUrlQuery();
 	const { safeNavigate } = useSafeNavigate();
@@ -43,7 +41,7 @@ function CreateRules(): JSX.Element {
 
 	useEffect(() => {
 		if (isTypeSelectionMode) {
-			void logEvent('Alert: New alert data source selection page visited', {});
+			logEvent('Alert: New alert data source selection page visited', {});
 		}
 	}, [isTypeSelectionMode]);
 
@@ -189,7 +187,6 @@ function CreateRules(): JSX.Element {
 	return (
 		<Tabs
 			destroyInactiveTabPane
-			animated={!prefersReducedMotion}
 			items={items}
 			activeKey={AlertListTabs.ALERT_RULES}
 			onChange={handleTabChange}

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissible.styles.scss

@@ -1,6 +1,6 @@
 .license-key-callout {
 	margin: var(--spacing-4) var(--spacing-6);
-	width: auto !important;
+	width: auto;
 
 	.license-key-callout__description {
 		display: flex;

frontend/src/container/GeneralSettings/__tests__/index.test.tsx

@@ -1,41 +0,0 @@
-import { useQueries } from 'react-query';
-import { render, screen } from 'tests/test-utils';
-
-import GeneralSettings from '../index';
-
-jest.mock('react-query', () => ({
-	...jest.requireActual('react-query'),
-	useQueries: jest.fn(),
-}));
-
-const baseQueryResult = {
-	isError: false,
-	isLoading: false,
-	isFetching: false,
-	isSuccess: true,
-	data: undefined,
-	error: null,
-	refetch: jest.fn(),
-};
-
-describe('GeneralSettings index', () => {
-	it('renders fallback message when logs query fails with a non-APIError', () => {
-		(useQueries as jest.Mock).mockReturnValue([
-			{ ...baseQueryResult },
-			{ ...baseQueryResult },
-			{
-				...baseQueryResult,
-				isError: true,
-				isSuccess: false,
-				error: new TypeError(
-					"Cannot read properties of undefined (reading 'code')",
-				),
-			},
-			{ ...baseQueryResult },
-		]);
-
-		render(<GeneralSettings />);
-
-		expect(screen.getByText('something_went_wrong')).toBeInTheDocument();
-	});
-});

frontend/src/container/GeneralSettings/index.tsx

@@ -76,9 +76,7 @@ function GeneralSettings(): JSX.Element {
 	if (getRetentionPeriodLogsApiResponse.isError || getDisksResponse.isError) {
 		return (
 			<Typography>
-				{(getRetentionPeriodLogsApiResponse.error instanceof APIError
-					? getRetentionPeriodLogsApiResponse.error.getErrorMessage()
-					: undefined) ||
+				{(getRetentionPeriodLogsApiResponse.error as APIError).getErrorMessage() ||
 					getDisksResponse.data?.error ||
 					t('something_went_wrong')}
 			</Typography>

frontend/src/container/InfraMonitoringK8s/Clusters/constants.ts

@@ -796,7 +796,7 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDeploymentDesiredKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
@@ -839,7 +839,7 @@ export const getClusterMetricsQueryPayload = (
 							reduceTo: ReduceOperators.LAST,
 							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'avg',
 						},
 					],
 					queryFormulas: [],

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -40,7 +40,6 @@ import { K8S_ENTITY_EVENTS_EXPRESSION_KEY, useEntityEvents } from './hooks';
 import { getEntityEventsQueryPayload, isEventsKeyNotFoundError } from './utils';
 
 import styles from './EntityEvents.module.scss';
-import { useTimezone } from 'providers/Timezone';
 
 interface EventDataType {
 	key: string;
@@ -168,25 +167,17 @@ function EntityEventsContent({
 		[events],
 	);
 
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const columns: TableColumnsType<EventDataType> = useMemo(
-		() => [
-			{ title: 'Severity', dataIndex: 'severity', key: 'severity', width: 100 },
-			{
-				title: 'Timestamp',
-				dataIndex: 'timestamp',
-				width: 240,
-				ellipsis: true,
-				key: 'timestamp',
-				render: (value: string | number): string =>
-					formatTimezoneAdjustedTimestamp(
-						typeof value === 'string' ? value : value / 1e6,
-					),
-			},
-			{ title: 'Body', dataIndex: 'body', key: 'body' },
-		],
-		[formatTimezoneAdjustedTimestamp],
-	);
+	const columns: TableColumnsType<EventDataType> = [
+		{ title: 'Severity', dataIndex: 'severity', key: 'severity', width: 100 },
+		{
+			title: 'Timestamp',
+			dataIndex: 'timestamp',
+			width: 240,
+			ellipsis: true,
+			key: 'timestamp',
+		},
+		{ title: 'Body', dataIndex: 'body', key: 'body' },
+	];
 
 	const handleExpandRowIcon = ({
 		expanded,

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -41,7 +41,6 @@ import { getTraceListColumns } from './traceListColumns';
 import { getEntityTracesQueryPayload } from './utils';
 
 import styles from './EntityTraces.module.scss';
-import { useTimezone } from 'providers/Timezone';
 
 interface Props {
 	timeRange: {
@@ -137,11 +136,7 @@ function EntityTracesContent({
 		[timeRange.startTime, timeRange.endTime, userExpression],
 	);
 
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const traceListColumns = getTraceListColumns(
-		selectedEntityTracesColumns,
-		formatTimezoneAdjustedTimestamp,
-	);
+	const traceListColumns = getTraceListColumns(selectedEntityTracesColumns);
 
 	const isKeyNotFound = isKeyNotFoundError(error);
 	const isDataEmpty =

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -1,14 +1,15 @@
 import { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import {
 	BlockLink,
 	getTraceLink,
 } from 'container/TracesExplorer/ListView/utils';
+import dayjs from 'dayjs';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { FormatTimezoneAdjustedTimestamp } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 
 const keyToLabelMap: Record<string, string> = {
 	timestamp: 'Timestamp',
@@ -58,7 +59,6 @@ const getValueForKey = (data: Record<string, any>, key: string): any => {
 
 export const getTraceListColumns = (
 	selectedColumns: BaseAutocompleteData[],
-	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp,
 ): ColumnsType<RowData> => {
 	const columns: ColumnsType<RowData> =
 		selectedColumns.map(({ dataType, key, type }) => ({
@@ -73,8 +73,8 @@ export const getTraceListColumns = (
 				if (primaryKey === 'timestamp') {
 					const date =
 						typeof value === 'string'
-							? formatTimezoneAdjustedTimestamp(value)
-							: formatTimezoneAdjustedTimestamp(value / 1e6);
+							? dayjs(value).format(DATE_TIME_FORMATS.ISO_DATETIME_MS)
+							: dayjs(value / 1e6).format(DATE_TIME_FORMATS.ISO_DATETIME_MS);
 
 					return (
 						<BlockLink to={getTraceLink(itemData)} openInNewTab>

frontend/src/container/InfraMonitoringK8s/Pods/constants.ts

@@ -1366,7 +1366,7 @@ export const getPodMetricsQueryPayload = (
 							orderBy: [],
 							queryName: 'B',
 							reduceTo: ReduceOperators.AVG,
-							spaceAggregation: 'sum',
+							spaceAggregation: 'avg',
 							stepInterval: 60,
 							timeAggregation: 'avg',
 						},

frontend/src/container/InfraMonitoringK8s/Volumes/table.config.tsx

@@ -86,9 +86,9 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 	},
 	{
 		id: 'capacity',
-		header: 'Capacity',
+		header: 'Volume Capacity',
 		accessorFn: (row): number => row.volumeCapacity,
-		width: { min: 140 },
+		width: { min: 220 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const capacity = value as number;
@@ -105,9 +105,9 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 	},
 	{
 		id: 'usage',
-		header: 'Used',
+		header: 'Volume Utilization',
 		accessorFn: (row): number => row.volumeUsage,
-		width: { min: 140 },
+		width: { min: 220 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const usage = value as number;
@@ -124,9 +124,9 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 	},
 	{
 		id: 'available',
-		header: 'Available',
+		header: 'Volume Available',
 		accessorFn: (row): number => row.volumeAvailable,
-		width: { min: 140 },
+		width: { min: 220 },
 		enableSort: true,
 		cell: ({ value }): React.ReactNode => {
 			const available = value as number;
@@ -141,61 +141,4 @@ export const k8sVolumesColumnsConfig: TableColumnDef<K8sVolumesData>[] = [
 			);
 		},
 	},
-	{
-		id: 'inodes',
-		header: 'Inodes',
-		accessorFn: (row): number => row.volumeInodes,
-		width: { min: 140 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const inodes = value as number;
-			return (
-				<ValidateColumnValueWrapper
-					value={inodes}
-					entity={InfraMonitoringEntity.VOLUMES}
-					attribute="inodes metric"
-				>
-					<TanStackTable.Text>{inodes}</TanStackTable.Text>
-				</ValidateColumnValueWrapper>
-			);
-		},
-	},
-	{
-		id: 'inodesUsed',
-		header: 'Inodes Used',
-		accessorFn: (row): number => row.volumeInodesUsed,
-		width: { min: 160 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const inodesUsed = value as number;
-			return (
-				<ValidateColumnValueWrapper
-					value={inodesUsed}
-					entity={InfraMonitoringEntity.VOLUMES}
-					attribute="inodes used metric"
-				>
-					<TanStackTable.Text>{inodesUsed}</TanStackTable.Text>
-				</ValidateColumnValueWrapper>
-			);
-		},
-	},
-	{
-		id: 'inodesFree',
-		header: 'Inodes Free',
-		accessorFn: (row): number => row.volumeInodesFree,
-		width: { min: 160 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const inodesFree = value as number;
-			return (
-				<ValidateColumnValueWrapper
-					value={inodesFree}
-					entity={InfraMonitoringEntity.VOLUMES}
-					attribute="inodes free metric"
-				>
-					<TanStackTable.Text>{inodesFree}</TanStackTable.Text>
-				</ValidateColumnValueWrapper>
-			);
-		},
-	},
 ];

frontend/src/container/LLMObservabilityAttributeMapping/AttributeMappingHeader.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@signozhq/ui/button';
+
+interface AttributeMappingHeaderProps {
+	isDirty: boolean;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function AttributeMappingHeader({
+	isDirty,
+	isSaving,
+	onDiscard,
+	onSave,
+}: AttributeMappingHeaderProps): JSX.Element {
+	return (
+		<header className="page-header">
+			<div className="page-header__title">
+				<h1>Attribute Mapping</h1>
+				<p>Configure source-to-target attribute remapping for LLM traces</p>
+			</div>
+			<div className="page-header__actions">
+				{isDirty && (
+					<span className="page-header__unsaved" data-testid="unsaved-changes">
+						Unsaved changes
+					</span>
+				)}
+				<Button
+					variant="outlined"
+					color="secondary"
+					onClick={onDiscard}
+					disabled={!isDirty || isSaving}
+					testId="discard-changes-btn"
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={onSave}
+					loading={isSaving}
+					disabled={!isDirty || isSaving}
+					testId="save-changes-btn"
+				>
+					{isSaving ? 'Saving…' : 'Save changes'}
+				</Button>
+			</div>
+		</header>
+	);
+}
+
+export default AttributeMappingHeader;

frontend/src/container/LLMObservabilityAttributeMapping/ConditionKeyList.tsx

@@ -0,0 +1,90 @@
+import { Button } from '@signozhq/ui/button';
+import { Plus, X } from '@signozhq/icons';
+
+import KeySearchInput from './KeySearchInput';
+import { FieldContextValue } from './types';
+
+interface ConditionKeyListProps {
+	label: string;
+	labelHint?: string;
+	keys: string[];
+	placeholder: string;
+	addLabel: string;
+	testIdPrefix: string;
+	fieldContext: FieldContextValue;
+	onChange: (keys: string[]) => void;
+}
+
+// Editor for one list of condition keys (the group's span-attribute or
+// resource gating keys). Substring "contains" match, order irrelevant.
+function ConditionKeyList({
+	label,
+	labelHint,
+	keys,
+	placeholder,
+	addLabel,
+	testIdPrefix,
+	fieldContext,
+	onChange,
+}: ConditionKeyListProps): JSX.Element {
+	const updateKey = (index: number, value: string): void => {
+		onChange(keys.map((key, i) => (i === index ? value : key)));
+	};
+
+	const addKey = (): void => {
+		onChange([...keys, '']);
+	};
+
+	const removeKey = (index: number): void => {
+		onChange(keys.filter((_, i) => i !== index));
+	};
+
+	return (
+		<div className="group-form__field">
+			<span className="group-form__label">
+				{label}
+				{labelHint && <span className="group-form__label-hint"> {labelHint}</span>}
+			</span>
+
+			{keys.length > 0 && (
+				<div className="group-form__keys">
+					{keys.map((key, index) => (
+						// eslint-disable-next-line react/no-array-index-key
+						<div className="group-form__key" key={index}>
+							<KeySearchInput
+								className="group-form__key-input"
+								placeholder={placeholder}
+								value={key}
+								fieldContext={fieldContext}
+								onChange={(next): void => updateKey(index, next)}
+								testId={`${testIdPrefix}-${index}`}
+							/>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								aria-label="Remove key"
+								onClick={(): void => removeKey(index)}
+								testId={`${testIdPrefix}-remove-${index}`}
+							>
+								<X size={14} />
+							</Button>
+						</div>
+					))}
+				</div>
+			)}
+
+			<Button
+				variant="dashed"
+				color="secondary"
+				prefix={<Plus size={14} />}
+				onClick={addKey}
+				testId={`${testIdPrefix}-add`}
+			>
+				{addLabel}
+			</Button>
+		</div>
+	);
+}
+
+export default ConditionKeyList;

frontend/src/container/LLMObservabilityAttributeMapping/GroupFormDrawer.styles.scss

@@ -0,0 +1,76 @@
+.group-form {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 4px 0;
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&--row {
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+		}
+	}
+
+	&__label {
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__label-hint {
+		font-weight: 400;
+		text-transform: none;
+		letter-spacing: normal;
+	}
+
+	&__hint {
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__keys {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__key {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__key-input {
+		flex: 1;
+		font-family: 'Geist Mono', monospace;
+	}
+
+	&__error {
+		padding: 10px 12px;
+		border-radius: 4px;
+		background: rgba(229, 72, 77, 0.1);
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		gap: 8px;
+	}
+
+	&__footer-actions {
+		display: flex;
+		gap: 8px;
+		margin-left: auto;
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/GroupFormDrawer.tsx

@@ -0,0 +1,148 @@
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { Switch } from '@signozhq/ui/switch';
+import { Trash2 } from '@signozhq/icons';
+
+import ConditionKeyList from './ConditionKeyList';
+import { FieldContext, GroupDraft, MapperDraftMode } from './types';
+import { isGroupDraftValid } from './utils';
+
+import './GroupFormDrawer.styles.scss';
+
+interface GroupFormDrawerProps {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: GroupDraft;
+	setDraft: (next: GroupDraft) => void;
+	onClose: () => void;
+	onSave: () => void;
+	onDelete: () => void;
+	isSaving: boolean;
+	isDeleting: boolean;
+	saveError: string | null;
+}
+
+function GroupFormDrawer({
+	isOpen,
+	mode,
+	draft,
+	setDraft,
+	onClose,
+	onSave,
+	onDelete,
+	isSaving,
+	isDeleting,
+	saveError,
+}: GroupFormDrawerProps): JSX.Element {
+	const isEdit = mode === 'edit';
+	const isValid = isGroupDraftValid(draft);
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			title={isEdit ? 'Edit group' : 'New group'}
+			subTitle="A group gates which spans its mappings run on"
+			width="wide"
+			testId="group-form-drawer"
+			footer={
+				<div className="group-form__footer">
+					{isEdit && (
+						<Button
+							variant="ghost"
+							color="destructive"
+							prefix={<Trash2 size={14} />}
+							onClick={onDelete}
+							disabled={isDeleting}
+							testId="group-form-delete"
+						>
+							{isDeleting ? 'Deleting…' : 'Delete'}
+						</Button>
+					)}
+					<div className="group-form__footer-actions">
+						<Button
+							variant="ghost"
+							color="secondary"
+							onClick={onClose}
+							testId="group-form-cancel"
+						>
+							Cancel
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={onSave}
+							disabled={!isValid || isSaving}
+							testId="group-form-save"
+						>
+							{/* eslint-disable-next-line no-nested-ternary */}
+							{isSaving ? 'Saving…' : isEdit ? 'Save group' : 'Create group'}
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			<div className="group-form">
+				<div className="group-form__field">
+					<span className="group-form__label">Group name</span>
+					<Input
+						placeholder="e.g. OpenAI gateway"
+						value={draft.name}
+						onChange={(event): void =>
+							setDraft({ ...draft, name: event.target.value })
+						}
+						testId="group-form-name"
+					/>
+				</div>
+
+				<div className="group-form__field group-form__field--row">
+					<span className="group-form__label">Enabled</span>
+					<Switch
+						value={draft.enabled}
+						onChange={(checked): void => setDraft({ ...draft, enabled: checked })}
+						testId="group-form-enabled"
+					/>
+				</div>
+
+				<ConditionKeyList
+					label="Condition · span attribute keys"
+					labelHint="· runs when a span attribute key contains any of these"
+					keys={draft.attributes}
+					placeholder="e.g. gen_ai."
+					addLabel="Add attribute key"
+					testIdPrefix="group-form-attribute"
+					fieldContext={FieldContext.attribute}
+					onChange={(attributes): void => setDraft({ ...draft, attributes })}
+				/>
+
+				<ConditionKeyList
+					label="Condition · resource keys"
+					labelHint="· or when a resource key contains any of these"
+					keys={draft.resource}
+					placeholder="e.g. service.name"
+					addLabel="Add resource key"
+					testIdPrefix="group-form-resource"
+					fieldContext={FieldContext.resource}
+					onChange={(resource): void => setDraft({ ...draft, resource })}
+				/>
+
+				<span className="group-form__hint">
+					Leave both empty to run this group on every span.
+				</span>
+
+				{saveError && (
+					<div className="group-form__error" role="alert">
+						{saveError}
+					</div>
+				)}
+			</div>
+		</DrawerWrapper>
+	);
+}
+
+export default GroupFormDrawer;

frontend/src/container/LLMObservabilityAttributeMapping/IndexBadge.tsx

@@ -0,0 +1,10 @@
+interface IndexBadgeProps {
+	index: number;
+}
+
+// Small positional badge mirroring the Pipelines list ordering chip.
+function IndexBadge({ index }: IndexBadgeProps): JSX.Element {
+	return <span className="am-index-badge">{index + 1}</span>;
+}
+
+export default IndexBadge;

frontend/src/container/LLMObservabilityAttributeMapping/KeySearchInput.styles.scss

@@ -0,0 +1,51 @@
+.key-search {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+
+	&__dropdown {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		z-index: 20;
+		min-width: 100%;
+		width: max-content;
+		max-width: 420px;
+		max-height: 240px;
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding: 4px;
+		border: 1px solid var(--bg-slate-400, rgba(255, 255, 255, 0.12));
+		border-radius: 6px;
+		background: var(--bg-ink-400, #121317);
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+
+		&--empty {
+			padding: 8px 10px;
+			font-size: 12px;
+			color: var(--bg-vanilla-400);
+		}
+	}
+
+	&__option {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		padding: 6px 10px;
+		border: none;
+		border-radius: 3px;
+		background: transparent;
+		color: var(--bg-vanilla-100);
+		font-family: 'Geist Mono', monospace;
+		font-size: 12px;
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		cursor: pointer;
+
+		&:hover {
+			background: var(--bg-slate-400, rgba(255, 255, 255, 0.08));
+		}
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/KeySearchInput.tsx

@@ -0,0 +1,112 @@
+import { useMemo, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { useGetFieldsKeys } from 'api/generated/services/fields';
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+import useDebounce from 'hooks/useDebounce';
+
+import { FieldContext, FieldContextValue } from './types';
+
+import './KeySearchInput.styles.scss';
+
+const SUGGESTION_LIMIT = 50;
+const DEBOUNCE_MS = 300;
+
+interface KeySearchInputProps {
+	value: string;
+	fieldContext: FieldContextValue;
+	placeholder?: string;
+	className?: string;
+	disabled?: boolean;
+	testId?: string;
+	onChange: (value: string) => void;
+}
+
+// Maps the mapper's attribute/resource context to the fields-endpoint context.
+function toFieldsContext(
+	context: FieldContextValue,
+): TelemetrytypesFieldContextDTO {
+	return context === FieldContext.resource
+		? TelemetrytypesFieldContextDTO.resource
+		: TelemetrytypesFieldContextDTO.attribute;
+}
+
+// Free-text input with span/resource key suggestions from /api/v1/fields/keys
+// (signal=traces). Typing keeps the custom value; suggestions are assistive.
+function KeySearchInput({
+	value,
+	fieldContext,
+	placeholder,
+	className,
+	disabled,
+	testId,
+	onChange,
+}: KeySearchInputProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const debouncedSearch = useDebounce(value, DEBOUNCE_MS);
+
+	const { data, isFetching } = useGetFieldsKeys(
+		{
+			signal: TelemetrytypesSignalDTO.traces,
+			fieldContext: toFieldsContext(fieldContext),
+			searchText: debouncedSearch,
+			limit: SUGGESTION_LIMIT,
+		},
+		{ query: { enabled: isOpen && !disabled, keepPreviousData: true } },
+	);
+
+	const suggestions = useMemo(() => {
+		const keys = data?.data?.keys ?? {};
+		return Object.keys(keys)
+			.filter((key) => key !== value)
+			.slice(0, SUGGESTION_LIMIT);
+	}, [data, value]);
+
+	return (
+		<div className={cx('key-search', className)}>
+			<Input
+				placeholder={placeholder}
+				value={value}
+				disabled={disabled}
+				autoComplete="off"
+				onChange={(event): void => {
+					onChange(event.target.value);
+					setIsOpen(true);
+				}}
+				onFocus={(): void => setIsOpen(true)}
+				onBlur={(): void => setIsOpen(false)}
+				testId={testId}
+			/>
+			{isOpen && suggestions.length > 0 && (
+				<div className="key-search__dropdown" data-testid={`${testId}-dropdown`}>
+					{suggestions.map((name) => (
+						<button
+							type="button"
+							key={name}
+							className="key-search__option"
+							// onMouseDown (not onClick) so selection runs before the input blur.
+							onMouseDown={(event): void => {
+								event.preventDefault();
+								onChange(name);
+								setIsOpen(false);
+							}}
+							data-testid={`${testId}-option-${name}`}
+						>
+							{name}
+						</button>
+					))}
+				</div>
+			)}
+			{isOpen && isFetching && suggestions.length === 0 && (
+				<div className="key-search__dropdown key-search__dropdown--empty">
+					Searching…
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default KeySearchInput;

frontend/src/container/LLMObservabilityAttributeMapping/LLMObservabilityAttributeMapping.styles.scss

@@ -0,0 +1,183 @@
+.llm-observability-attribute-mapping {
+	padding: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.page-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 16px;
+
+		&__title {
+			h1 {
+				margin: 0;
+				font-size: 18px;
+				font-weight: 600;
+			}
+
+			p {
+				margin: 4px 0 0;
+				font-size: 13px;
+				color: var(--bg-vanilla-400);
+			}
+		}
+
+		&__actions {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		&__unsaved {
+			font-size: 13px;
+			color: var(--bg-amber-400);
+		}
+	}
+
+	.page-error {
+		padding: 12px 16px;
+		border-radius: 4px;
+		background: var(--bg-cherry-500-opacity-10, rgba(229, 72, 77, 0.1));
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	.page-footer {
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	.muted {
+		color: var(--bg-vanilla-400);
+	}
+
+	.am-index-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 22px;
+		height: 22px;
+		padding: 0 6px;
+		border-radius: 999px;
+		background: var(--bg-robin-500);
+		color: var(--bg-vanilla-100);
+		font-size: 12px;
+		font-weight: 600;
+	}
+
+	.am-row-actions {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.am-add-row {
+		align-self: flex-start;
+	}
+
+	.groups-table__wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.am-table {
+		&__empty {
+			padding: 24px 12px;
+			text-align: center;
+			color: var(--bg-vanilla-400);
+			font-size: 13px;
+		}
+	}
+
+	.groups-table {
+		&__name {
+			font-weight: 600;
+		}
+
+		&__name-cell {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		&__sub-row > td {
+			padding: 0 16px 12px;
+			background: var(--bg-ink-400, rgba(255, 255, 255, 0.02));
+		}
+
+		&__filters {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		&__filter {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			font-size: 13px;
+		}
+
+		&__filter-key {
+			font-family: 'Geist Mono', monospace;
+		}
+
+		&__edited {
+			display: flex;
+			flex-direction: column;
+			font-size: 12px;
+		}
+	}
+
+	.mappers-table__wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		margin: 4px 0;
+	}
+
+	.mappers-table {
+		margin: 4px 0;
+
+		&__target {
+			font-family: 'Geist Mono', monospace;
+			font-weight: 600;
+		}
+
+		&__sources {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 6px;
+		}
+
+		&__source-chip {
+			display: inline-flex;
+			align-items: center;
+			max-width: 220px;
+			padding: 2px 8px;
+			border: 1px solid var(--bg-slate-400, rgba(255, 255, 255, 0.12));
+			border-radius: 6px;
+			background: var(--bg-ink-300, rgba(255, 255, 255, 0.04));
+			font-family: 'Geist Mono', monospace;
+			font-size: 12px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		&__source-more {
+			font-size: 12px;
+			white-space: nowrap;
+		}
+
+		&__error {
+			padding: 12px;
+			font-size: 13px;
+			color: var(--bg-cherry-400);
+		}
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+
+import AttributeMappingHeader from './AttributeMappingHeader';
+import GroupFormDrawer from './GroupFormDrawer';
+import MapperGroupsTable from './MapperGroupsTable';
+import { useAttributeMappingStore } from './useAttributeMappingStore';
+import { useGroupFormDrawer } from './useGroupFormDrawer';
+
+import './LLMObservabilityAttributeMapping.styles.scss';
+
+function LLMObservabilityAttributeMapping(): JSX.Element {
+	const store = useAttributeMappingStore();
+	const groupDrawer = useGroupFormDrawer();
+
+	const handleGroupSave = useCallback((): void => {
+		store.upsertGroup(groupDrawer.draft);
+		groupDrawer.close();
+	}, [store, groupDrawer]);
+
+	const handleGroupDelete = useCallback((): void => {
+		if (groupDrawer.draft.id) {
+			store.removeGroup(groupDrawer.draft.id);
+		}
+		groupDrawer.close();
+	}, [store, groupDrawer]);
+
+	return (
+		<div
+			className="llm-observability-attribute-mapping"
+			data-testid="llm-observability-attribute-mapping-page"
+		>
+			<AttributeMappingHeader
+				isDirty={store.isDirty}
+				isSaving={store.isSaving}
+				onDiscard={store.discard}
+				onSave={store.save}
+			/>
+
+			{store.saveError && (
+				<div className="page-error" role="alert">
+					{store.saveError}
+				</div>
+			)}
+
+			{store.isError && (
+				<div className="page-error" role="alert">
+					Failed to load mapping groups. Please try again.
+				</div>
+			)}
+
+			<MapperGroupsTable
+				store={store}
+				onEditGroup={groupDrawer.openForEdit}
+				onAddGroup={groupDrawer.openForAdd}
+			/>
+
+			<footer className="page-footer">
+				Showing {store.groups.length} group{store.groups.length === 1 ? '' : 's'}
+			</footer>
+
+			<GroupFormDrawer
+				isOpen={groupDrawer.isOpen}
+				mode={groupDrawer.mode}
+				draft={groupDrawer.draft}
+				setDraft={groupDrawer.setDraft}
+				onClose={groupDrawer.close}
+				onSave={handleGroupSave}
+				onDelete={handleGroupDelete}
+				isSaving={false}
+				isDeleting={false}
+				saveError={null}
+			/>
+		</div>
+	);
+}
+
+export default LLMObservabilityAttributeMapping;

frontend/src/container/LLMObservabilityAttributeMapping/MapperFormDrawer.styles.scss

@@ -0,0 +1,104 @@
+.mapper-form {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 4px 0;
+
+	&__field {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__label {
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__label-hint {
+		font-weight: 400;
+		text-transform: none;
+		letter-spacing: normal;
+	}
+
+	&__hint {
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__sources {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__source {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__source-handle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 4px;
+		border: none;
+		background: transparent;
+		color: var(--bg-vanilla-400);
+		cursor: grab;
+		touch-action: none;
+		user-select: none;
+
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&__source-index {
+		width: 20px;
+		text-align: center;
+		font-size: 12px;
+		color: var(--bg-vanilla-400);
+	}
+
+	&__source-input {
+		flex: 1;
+		min-width: 0;
+		font-family: 'Geist Mono', monospace;
+	}
+
+	&__source-select {
+		flex: 0 0 auto;
+		width: 120px;
+	}
+
+	&__field-context {
+		width: 200px;
+	}
+
+	&__error {
+		padding: 10px 12px;
+		border-radius: 4px;
+		background: rgba(229, 72, 77, 0.1);
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		gap: 8px;
+	}
+
+	&__footer-actions {
+		display: flex;
+		gap: 8px;
+		margin-left: auto;
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/MapperFormDrawer.tsx

@@ -0,0 +1,267 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { SelectSimple } from '@signozhq/ui/select';
+import {
+	closestCenter,
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+	arrayMove,
+	SortableContext,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { v4 as uuid } from 'uuid';
+
+import KeySearchInput from './KeySearchInput';
+import SourceAttributeRow from './SourceAttributeRow';
+import {
+	FieldContext,
+	FieldContextValue,
+	MapperDraft,
+	MapperDraftMode,
+	SourceConfig,
+} from './types';
+import { createEmptySource, isMapperDraftValid } from './utils';
+
+import './MapperFormDrawer.styles.scss';
+
+const FIELD_CONTEXT_OPTIONS = [
+	{ value: FieldContext.attribute, label: 'Span attribute' },
+	{ value: FieldContext.resource, label: 'Resource' },
+];
+
+interface MapperFormDrawerProps {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: MapperDraft;
+	setDraft: (next: MapperDraft) => void;
+	onClose: () => void;
+	onSave: () => void;
+	onDelete: () => void;
+	isSaving: boolean;
+	isDeleting: boolean;
+	saveError: string | null;
+}
+
+function MapperFormDrawer({
+	isOpen,
+	mode,
+	draft,
+	setDraft,
+	onClose,
+	onSave,
+	onDelete,
+	isSaving,
+	isDeleting,
+	saveError,
+}: MapperFormDrawerProps): JSX.Element {
+	const isEdit = mode === 'edit';
+	const isValid = isMapperDraftValid(draft);
+
+	// Stable per-row ids for the sortable list. These are UI-only (never sent to
+	// the API and excluded from the draft), so dnd-kit can track rows reliably
+	// even though sources are stored as a plain array. Re-seeded each time the
+	// drawer opens; kept in lockstep with the sources array on add/remove/drag.
+	const [rowIds, setRowIds] = useState<string[]>([]);
+	const wasOpen = useRef(false);
+
+	useEffect(() => {
+		if (isOpen && !wasOpen.current) {
+			setRowIds(draft.sources.map(() => uuid()));
+		}
+		wasOpen.current = isOpen;
+		// Only re-seed on the closed→open transition.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isOpen]);
+
+	const sourceIds = draft.sources.map(
+		(_, index) => rowIds[index] ?? `pending-${index}`,
+	);
+
+	// 5px activation distance so clicking into the input never starts a drag.
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+	);
+
+	const updateSource = (index: number, patch: Partial<SourceConfig>): void => {
+		const sources = draft.sources.map((source, i) =>
+			i === index ? { ...source, ...patch } : source,
+		);
+		setDraft({ ...draft, sources });
+	};
+
+	const addSource = (): void => {
+		setDraft({ ...draft, sources: [...draft.sources, createEmptySource()] });
+		setRowIds((prev) => [...prev, uuid()]);
+	};
+
+	const removeSource = (index: number): void => {
+		const sources = draft.sources.filter((_, i) => i !== index);
+		if (sources.length === 0) {
+			setDraft({ ...draft, sources: [createEmptySource()] });
+			setRowIds([uuid()]);
+			return;
+		}
+		setDraft({ ...draft, sources });
+		setRowIds((prev) => prev.filter((_, i) => i !== index));
+	};
+
+	const handleDragEnd = (event: DragEndEvent): void => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) {
+			return;
+		}
+		const from = sourceIds.indexOf(String(active.id));
+		const to = sourceIds.indexOf(String(over.id));
+		if (from === -1 || to === -1) {
+			return;
+		}
+		setDraft({ ...draft, sources: arrayMove(draft.sources, from, to) });
+		setRowIds((prev) => arrayMove(prev, from, to));
+	};
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			title={isEdit ? 'Edit mapping' : 'New custom mapping'}
+			subTitle="Map source attributes onto a canonical target attribute"
+			width="wide"
+			testId="mapper-form-drawer"
+			footer={
+				<div className="mapper-form__footer">
+					{isEdit && (
+						<Button
+							variant="ghost"
+							color="destructive"
+							prefix={<Trash2 size={14} />}
+							onClick={onDelete}
+							disabled={isDeleting}
+							testId="mapper-form-delete"
+						>
+							{isDeleting ? 'Deleting…' : 'Delete'}
+						</Button>
+					)}
+					<div className="mapper-form__footer-actions">
+						<Button
+							variant="ghost"
+							color="secondary"
+							onClick={onClose}
+							testId="mapper-form-cancel"
+						>
+							Cancel
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={onSave}
+							disabled={!isValid || isSaving}
+							testId="mapper-form-save"
+						>
+							{/* eslint-disable-next-line no-nested-ternary */}
+							{isSaving ? 'Saving…' : isEdit ? 'Save mapping' : 'Create mapping'}
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			<div className="mapper-form">
+				<div className="mapper-form__field">
+					<span className="mapper-form__label">Target attribute</span>
+					<KeySearchInput
+						placeholder="e.g. gen_ai.content.prompt"
+						value={draft.name}
+						fieldContext={draft.fieldContext}
+						disabled={isEdit}
+						onChange={(name): void => setDraft({ ...draft, name })}
+						testId="mapper-form-target"
+					/>
+					{isEdit && (
+						<span className="mapper-form__hint">
+							The target attribute can&apos;t be changed after creation.
+						</span>
+					)}
+				</div>
+
+				<div className="mapper-form__field">
+					<span className="mapper-form__label">Write target to</span>
+					<SelectSimple
+						className="mapper-form__field-context"
+						items={FIELD_CONTEXT_OPTIONS}
+						value={draft.fieldContext}
+						withPortal={false}
+						onChange={(next): void =>
+							setDraft({ ...draft, fieldContext: next as FieldContextValue })
+						}
+						testId="mapper-form-field-context"
+					/>
+					<span className="mapper-form__hint">
+						Where the standardized attribute is written.
+					</span>
+				</div>
+
+				<div className="mapper-form__field">
+					<span className="mapper-form__label">
+						Source attributes
+						<span className="mapper-form__label-hint">
+							{' '}
+							· priority: top → bottom · drag to reorder
+						</span>
+					</span>
+
+					<DndContext
+						sensors={sensors}
+						collisionDetection={closestCenter}
+						modifiers={[restrictToVerticalAxis]}
+						onDragEnd={handleDragEnd}
+					>
+						<SortableContext items={sourceIds} strategy={verticalListSortingStrategy}>
+							<div className="mapper-form__sources">
+								{draft.sources.map((source, index) => (
+									<SourceAttributeRow
+										key={sourceIds[index]}
+										id={sourceIds[index]}
+										index={index}
+										value={source}
+										canRemove={draft.sources.length > 1}
+										onChange={updateSource}
+										onRemove={removeSource}
+									/>
+								))}
+							</div>
+						</SortableContext>
+					</DndContext>
+
+					<Button
+						variant="dashed"
+						color="secondary"
+						prefix={<Plus size={14} />}
+						onClick={addSource}
+						testId="mapper-form-add-source"
+					>
+						Add another source
+					</Button>
+				</div>
+
+				{saveError && (
+					<div className="mapper-form__error" role="alert">
+						{saveError}
+					</div>
+				)}
+			</div>
+		</DrawerWrapper>
+	);
+}
+
+export default MapperFormDrawer;

frontend/src/container/LLMObservabilityAttributeMapping/MapperGroupsTable.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Switch } from '@signozhq/ui/switch';
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@signozhq/ui/table';
+import {
+	ChevronDown,
+	ChevronRight,
+	Pencil,
+	Plus,
+	Trash2,
+} from '@signozhq/icons';
+
+import MappersTable from './MappersTable';
+import { DraftGroup } from './types';
+import { AttributeMappingStore } from './useAttributeMappingStore';
+import { conditionFiltersFromGroup } from './utils';
+
+const COLUMN_COUNT = 4;
+
+interface MapperGroupsTableProps {
+	store: AttributeMappingStore;
+	onEditGroup: (group: DraftGroup) => void;
+	onAddGroup: () => void;
+}
+
+function FiltersCell({ group }: { group: DraftGroup }): JSX.Element {
+	const filters = conditionFiltersFromGroup(group);
+	if (filters.length === 0) {
+		return <span className="muted">No condition · always runs</span>;
+	}
+
+	return (
+		<div
+			className="groups-table__filters"
+			data-testid={`group-filters-${group.localId}`}
+		>
+			{filters.map((filter) => (
+				<div
+					className="groups-table__filter"
+					key={`${filter.context}:${filter.key}`}
+				>
+					<Badge
+						color={filter.context === 'resource' ? 'amber' : 'robin'}
+						variant="outline"
+					>
+						{filter.context}
+					</Badge>
+					<span className="groups-table__filter-key">contains {filter.key}</span>
+				</div>
+			))}
+		</div>
+	);
+}
+
+interface GroupRowProps {
+	group: DraftGroup;
+	store: AttributeMappingStore;
+	isExpanded: boolean;
+	onToggleExpand: (localId: string) => void;
+	onEditGroup: (group: DraftGroup) => void;
+}
+
+function GroupRow({
+	group,
+	store,
+	isExpanded,
+	onToggleExpand,
+	onEditGroup,
+}: GroupRowProps): JSX.Element {
+	return (
+		<>
+			<TableRow data-testid={`group-row-${group.localId}`}>
+				<TableCell>
+					<div className="groups-table__name-cell">
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="icon"
+							aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
+							onClick={(): void => onToggleExpand(group.localId)}
+							testId={`group-expand-${group.localId}`}
+						>
+							{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+						</Button>
+						<span
+							className="groups-table__name"
+							data-testid={`group-name-${group.localId}`}
+						>
+							{group.name}
+						</span>
+					</div>
+				</TableCell>
+				<TableCell>
+					<FiltersCell group={group} />
+				</TableCell>
+				<TableCell>
+					<span className="muted">{group.mappers.length} mappings</span>
+				</TableCell>
+				<TableCell>
+					<div className="am-row-actions">
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="icon"
+							aria-label="Edit group"
+							onClick={(): void => onEditGroup(group)}
+							testId={`group-edit-${group.localId}`}
+						>
+							<Pencil size={14} />
+						</Button>
+						<Button
+							variant="ghost"
+							color="destructive"
+							size="icon"
+							aria-label="Delete group"
+							onClick={(): void => store.removeGroup(group.localId)}
+							testId={`group-delete-${group.localId}`}
+						>
+							<Trash2 size={14} />
+						</Button>
+						<Switch
+							value={group.enabled}
+							onChange={(checked): void => store.toggleGroup(group.localId, checked)}
+							testId={`group-enabled-${group.localId}`}
+						/>
+					</div>
+				</TableCell>
+			</TableRow>
+			{isExpanded && (
+				<TableRow className="groups-table__sub-row">
+					<TableCell colSpan={COLUMN_COUNT}>
+						<MappersTable group={group} store={store} />
+					</TableCell>
+				</TableRow>
+			)}
+		</>
+	);
+}
+
+function MapperGroupsTable({
+	store,
+	onEditGroup,
+	onAddGroup,
+}: MapperGroupsTableProps): JSX.Element {
+	const [expandedId, setExpandedId] = useState<string | null>(null);
+
+	const toggleExpand = (localId: string): void => {
+		setExpandedId((current) => (current === localId ? null : localId));
+	};
+
+	return (
+		<div className="groups-table__wrapper">
+			<Table testId="mapper-groups-table" className="am-table">
+				<TableHeader>
+					<TableRow>
+						<TableHead>Group name</TableHead>
+						<TableHead>Filters</TableHead>
+						<TableHead>Mappings</TableHead>
+						<TableHead>Actions</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{store.isLoading && store.groups.length === 0 && (
+						<TableRow>
+							<TableCell colSpan={COLUMN_COUNT} className="am-table__empty">
+								Loading groups…
+							</TableCell>
+						</TableRow>
+					)}
+					{!store.isLoading && store.groups.length === 0 && (
+						<TableRow>
+							<TableCell colSpan={COLUMN_COUNT} className="am-table__empty">
+								No mapping groups yet.
+							</TableCell>
+						</TableRow>
+					)}
+					{store.groups.map((group) => (
+						<GroupRow
+							key={group.localId}
+							group={group}
+							store={store}
+							isExpanded={expandedId === group.localId}
+							onToggleExpand={toggleExpand}
+							onEditGroup={onEditGroup}
+						/>
+					))}
+				</TableBody>
+			</Table>
+
+			<Button
+				variant="ghost"
+				color="primary"
+				prefix={<Plus size={14} />}
+				className="am-add-row"
+				onClick={onAddGroup}
+				testId="add-group-row"
+			>
+				Add a new group
+			</Button>
+		</div>
+	);
+}
+
+export default MapperGroupsTable;

frontend/src/container/LLMObservabilityAttributeMapping/MappersTable.tsx

@@ -0,0 +1,208 @@
+import { useCallback } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Switch } from '@signozhq/ui/switch';
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@signozhq/ui/table';
+import { Pencil, Plus, Trash2 } from '@signozhq/icons';
+
+import IndexBadge from './IndexBadge';
+import MapperFormDrawer from './MapperFormDrawer';
+import { DraftGroup, DraftMapper, FieldContext } from './types';
+import { AttributeMappingStore } from './useAttributeMappingStore';
+import { useMapperFormDrawer } from './useMapperFormDrawer';
+
+const MAX_VISIBLE_SOURCES = 3;
+const COLUMN_COUNT = 5;
+
+interface MappersTableProps {
+	group: DraftGroup;
+	store: AttributeMappingStore;
+}
+
+function SourcesCell({ mapper }: { mapper: DraftMapper }): JSX.Element {
+	if (mapper.sources.length === 0) {
+		return <span className="muted">—</span>;
+	}
+
+	const visible = mapper.sources.slice(0, MAX_VISIBLE_SOURCES);
+	const remaining = mapper.sources.length - visible.length;
+
+	return (
+		<div
+			className="mappers-table__sources"
+			data-testid={`mapper-sources-${mapper.localId}`}
+		>
+			{visible.map((source) => (
+				<span
+					className="mappers-table__source-chip"
+					key={`${source.context}:${source.key}`}
+					title={source.key}
+				>
+					{source.key}
+				</span>
+			))}
+			{remaining > 0 && (
+				<span className="mappers-table__source-more muted">+{remaining} more</span>
+			)}
+		</div>
+	);
+}
+
+interface MapperRowProps {
+	mapper: DraftMapper;
+	index: number;
+	onEdit: (mapper: DraftMapper) => void;
+	onDelete: (mapperLocalId: string) => void;
+	onToggle: (mapperLocalId: string, enabled: boolean) => void;
+}
+
+function MapperRow({
+	mapper,
+	index,
+	onEdit,
+	onDelete,
+	onToggle,
+}: MapperRowProps): JSX.Element {
+	return (
+		<TableRow data-testid={`mapper-row-${mapper.localId}`}>
+			<TableCell>
+				<IndexBadge index={index} />
+			</TableCell>
+			<TableCell>
+				<span
+					className="mappers-table__target"
+					data-testid={`mapper-target-${mapper.localId}`}
+				>
+					{mapper.name}
+				</span>
+			</TableCell>
+			<TableCell>
+				<SourcesCell mapper={mapper} />
+			</TableCell>
+			<TableCell>
+				<Badge
+					color={mapper.fieldContext === FieldContext.resource ? 'amber' : 'robin'}
+					variant="outline"
+				>
+					{mapper.fieldContext}
+				</Badge>
+			</TableCell>
+			<TableCell>
+				<div className="am-row-actions">
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Edit mapping"
+						onClick={(): void => onEdit(mapper)}
+						testId={`mapper-edit-${mapper.localId}`}
+					>
+						<Pencil size={14} />
+					</Button>
+					<Button
+						variant="ghost"
+						color="destructive"
+						size="icon"
+						aria-label="Delete mapping"
+						onClick={(): void => onDelete(mapper.localId)}
+						testId={`mapper-delete-${mapper.localId}`}
+					>
+						<Trash2 size={14} />
+					</Button>
+					<Switch
+						value={mapper.enabled}
+						onChange={(checked): void => onToggle(mapper.localId, checked)}
+						testId={`mapper-enabled-${mapper.localId}`}
+					/>
+				</div>
+			</TableCell>
+		</TableRow>
+	);
+}
+
+function MappersTable({ group, store }: MappersTableProps): JSX.Element {
+	const drawer = useMapperFormDrawer();
+
+	const handleSave = useCallback((): void => {
+		store.upsertMapper(group.localId, drawer.draft);
+		drawer.close();
+	}, [store, group.localId, drawer]);
+
+	const handleDelete = useCallback((): void => {
+		if (drawer.draft.id) {
+			store.removeMapper(group.localId, drawer.draft.id);
+		}
+		drawer.close();
+	}, [store, group.localId, drawer]);
+
+	return (
+		<div className="mappers-table__wrapper">
+			<Table testId={`mappers-table-${group.localId}`} className="am-table">
+				<TableHeader>
+					<TableRow>
+						<TableHead>#</TableHead>
+						<TableHead>Target</TableHead>
+						<TableHead>Sources</TableHead>
+						<TableHead>Writes to</TableHead>
+						<TableHead>Actions</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{group.mappers.length === 0 && (
+						<TableRow>
+							<TableCell colSpan={COLUMN_COUNT} className="am-table__empty">
+								No mappings in this group yet.
+							</TableCell>
+						</TableRow>
+					)}
+					{group.mappers.map((mapper, index) => (
+						<MapperRow
+							key={mapper.localId}
+							mapper={mapper}
+							index={index}
+							onEdit={drawer.openForEdit}
+							onDelete={(localId): void => store.removeMapper(group.localId, localId)}
+							onToggle={(localId, enabled): void =>
+								store.toggleMapper(group.localId, localId, enabled)
+							}
+						/>
+					))}
+				</TableBody>
+			</Table>
+
+			<Button
+				variant="ghost"
+				color="primary"
+				size="sm"
+				prefix={<Plus size={14} />}
+				className="am-add-row"
+				onClick={drawer.openForAdd}
+				testId={`add-mapper-${group.localId}`}
+			>
+				Add mapping
+			</Button>
+
+			<MapperFormDrawer
+				isOpen={drawer.isOpen}
+				mode={drawer.mode}
+				draft={drawer.draft}
+				setDraft={drawer.setDraft}
+				onClose={drawer.close}
+				onSave={handleSave}
+				onDelete={handleDelete}
+				isSaving={false}
+				isDeleting={false}
+				saveError={null}
+			/>
+		</div>
+	);
+}
+
+export default MappersTable;

frontend/src/container/LLMObservabilityAttributeMapping/SourceAttributeRow.tsx

@@ -0,0 +1,115 @@
+import { Button } from '@signozhq/ui/button';
+import { SelectSimple } from '@signozhq/ui/select';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, X } from '@signozhq/icons';
+
+import KeySearchInput from './KeySearchInput';
+import {
+	FieldContext,
+	FieldContextValue,
+	MapperOperation,
+	MapperOperationValue,
+	SourceConfig,
+} from './types';
+
+const CONTEXT_OPTIONS = [
+	{ value: FieldContext.attribute, label: 'Attribute' },
+	{ value: FieldContext.resource, label: 'Resource' },
+];
+
+const OPERATION_OPTIONS = [
+	{ value: MapperOperation.move, label: 'Move' },
+	{ value: MapperOperation.copy, label: 'Copy' },
+];
+
+interface SourceAttributeRowProps {
+	id: string;
+	index: number;
+	value: SourceConfig;
+	canRemove: boolean;
+	onChange: (index: number, patch: Partial<SourceConfig>) => void;
+	onRemove: (index: number) => void;
+}
+
+// A single draggable source row. Order = priority (top wins). Each source can
+// be read from a span attribute or the resource, and moved (delete source) or
+// copied (keep source). Only the grip is a drag handle.
+function SourceAttributeRow({
+	id,
+	index,
+	value,
+	canRemove,
+	onChange,
+	onRemove,
+}: SourceAttributeRowProps): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id });
+
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? 0.6 : 1,
+	};
+
+	return (
+		<div className="mapper-form__source" ref={setNodeRef} style={style}>
+			<div
+				className="mapper-form__source-handle"
+				data-testid={`mapper-form-source-handle-${index}`}
+				{...attributes}
+				{...listeners}
+			>
+				<GripVertical size={14} />
+			</div>
+			<span className="mapper-form__source-index">{index + 1}</span>
+			<KeySearchInput
+				className="mapper-form__source-input"
+				placeholder="Source attribute key"
+				value={value.key}
+				fieldContext={value.context}
+				onChange={(key): void => onChange(index, { key })}
+				testId={`mapper-form-source-${index}`}
+			/>
+			<SelectSimple
+				className="mapper-form__source-select"
+				items={CONTEXT_OPTIONS}
+				value={value.context}
+				withPortal={false}
+				onChange={(next): void =>
+					onChange(index, { context: next as FieldContextValue })
+				}
+				testId={`mapper-form-source-context-${index}`}
+			/>
+			<SelectSimple
+				className="mapper-form__source-select"
+				items={OPERATION_OPTIONS}
+				value={value.operation}
+				withPortal={false}
+				onChange={(next): void =>
+					onChange(index, { operation: next as MapperOperationValue })
+				}
+				testId={`mapper-form-source-operation-${index}`}
+			/>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="icon"
+				aria-label="Remove source"
+				disabled={!canRemove}
+				onClick={(): void => onRemove(index)}
+				testId={`mapper-form-source-remove-${index}`}
+			>
+				<X size={14} />
+			</Button>
+		</div>
+	);
+}
+
+export default SourceAttributeRow;

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/ConditionKeyList.test.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import ConditionKeyList from '../ConditionKeyList';
+import { FieldContext } from '../types';
+
+const FIELDS_ENDPOINT = '*/api/v1/fields/keys';
+
+function Harness({ initial = [] as string[] }): JSX.Element {
+	const [keys, setKeys] = useState<string[]>(initial);
+	return (
+		<ConditionKeyList
+			label="Attributes"
+			keys={keys}
+			placeholder="key"
+			addLabel="Add attribute key"
+			testIdPrefix="cond"
+			fieldContext={FieldContext.attribute}
+			onChange={setKeys}
+		/>
+	);
+}
+
+describe('ConditionKeyList', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(FIELDS_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ status: 'success', data: { complete: true, keys: {} } }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders no key rows and only the add button when empty', () => {
+		render(<Harness />);
+		expect(screen.queryByTestId('cond-0')).not.toBeInTheDocument();
+		expect(screen.getByTestId('cond-add')).toBeInTheDocument();
+	});
+
+	it('adds a key row when the add button is clicked', () => {
+		render(<Harness />);
+		fireEvent.click(screen.getByTestId('cond-add'));
+		expect(screen.getByTestId('cond-0')).toBeInTheDocument();
+	});
+
+	it('removes a key row when its remove button is clicked', () => {
+		render(<Harness initial={['gen_ai.', 'llm.']} />);
+
+		expect(screen.getByTestId('cond-0')).toBeInTheDocument();
+		expect(screen.getByTestId('cond-1')).toBeInTheDocument();
+
+		fireEvent.click(screen.getByTestId('cond-remove-1'));
+
+		expect(screen.queryByTestId('cond-1')).not.toBeInTheDocument();
+		expect(screen.getByTestId('cond-0')).toBeInTheDocument();
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/KeySearchInput.test.tsx

@@ -0,0 +1,123 @@
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+
+import KeySearchInput from '../KeySearchInput';
+import { FieldContext } from '../types';
+
+const FIELDS_ENDPOINT = '*/api/v1/fields/keys';
+
+const mockKeysResponse = {
+	status: 'success',
+	data: {
+		complete: true,
+		keys: {
+			'gen_ai.request.model': [
+				{ name: 'gen_ai.request.model', fieldContext: 'attribute' },
+			],
+			'llm.model': [{ name: 'llm.model', fieldContext: 'attribute' }],
+		},
+	},
+};
+
+describe('KeySearchInput', () => {
+	let lastRequestParams: Record<string, string | null> = {};
+
+	beforeEach(() => {
+		lastRequestParams = {};
+		server.use(
+			rest.get(FIELDS_ENDPOINT, (req, res, ctx) => {
+				lastRequestParams = {
+					signal: req.url.searchParams.get('signal'),
+					fieldContext: req.url.searchParams.get('fieldContext'),
+					searchText: req.url.searchParams.get('searchText'),
+				};
+				return res(ctx.status(200), ctx.json(mockKeysResponse));
+			}),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('does not show suggestions until the input is focused', () => {
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				onChange={jest.fn()}
+				testId="key"
+			/>,
+		);
+
+		expect(screen.queryByTestId('key-dropdown')).not.toBeInTheDocument();
+	});
+
+	it('shows suggestions on focus and selecting one calls onChange with the key', async () => {
+		const onChange = jest.fn();
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				onChange={onChange}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.focus(screen.getByTestId('key'));
+
+		const option = await screen.findByTestId('key-option-gen_ai.request.model');
+		fireEvent.mouseDown(option);
+
+		expect(onChange).toHaveBeenCalledWith('gen_ai.request.model');
+	});
+
+	it('queries traces with the resource context when fieldContext is resource', async () => {
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.resource}
+				onChange={jest.fn()}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.focus(screen.getByTestId('key'));
+
+		await waitFor(() => expect(lastRequestParams.fieldContext).toBe('resource'));
+		expect(lastRequestParams.signal).toBe('traces');
+	});
+
+	it('accepts free text typed by the user (custom key)', () => {
+		const onChange = jest.fn();
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				onChange={onChange}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.change(screen.getByTestId('key'), {
+			target: { value: 'my.custom.key' },
+		});
+
+		expect(onChange).toHaveBeenCalledWith('my.custom.key');
+	});
+
+	it('does not query while disabled', () => {
+		render(
+			<KeySearchInput
+				value=""
+				fieldContext={FieldContext.attribute}
+				disabled
+				onChange={jest.fn()}
+				testId="key"
+			/>,
+		);
+
+		fireEvent.focus(screen.getByTestId('key'));
+		expect(screen.queryByTestId('key-dropdown')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -0,0 +1,72 @@
+import { SpantypesSpanMapperGroupDTO } from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
+
+const GROUPS_ENDPOINT = '*/api/v1/span_mapper_groups';
+const MAPPERS_ENDPOINT = '*/api/v1/span_mapper_groups/:groupId/span_mappers';
+
+const mockGroups: SpantypesSpanMapperGroupDTO[] = [
+	{
+		id: 'group-openai',
+		orgId: 'org-1',
+		name: 'OpenAI gateway',
+		enabled: true,
+		condition: { attributes: ['gen_ai.'], resource: [] },
+		updatedBy: 'gaurav.tewari@signoz.io',
+		updatedAt: '2026-06-10T09:30:00Z',
+	},
+];
+
+describe('LLMObservabilityAttributeMapping', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(MAPPERS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: { items: [] } })),
+			),
+			rest.get(GROUPS_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ status: 'success', data: { items: mockGroups } }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders the page header and the group row', async () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		await screen.findByTestId('group-name-group-openai');
+		expect(screen.getByText('Attribute Mapping')).toBeInTheDocument();
+		expect(screen.getByText('OpenAI gateway')).toBeInTheDocument();
+	});
+
+	it('opens the group drawer in Add mode with empty name', async () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		await screen.findByTestId('group-name-group-openai');
+		fireEvent.click(screen.getByTestId('add-group-row'));
+
+		const input = (await screen.findByTestId(
+			'group-form-name',
+		)) as HTMLInputElement;
+		expect(input.value).toBe('');
+	});
+
+	it('opens the group drawer in Edit mode prefilled with the group name', async () => {
+		render(<LLMObservabilityAttributeMapping />);
+
+		await screen.findByTestId('group-name-group-openai');
+		fireEvent.click(screen.getByTestId('group-edit-group-openai'));
+
+		const input = (await screen.findByTestId(
+			'group-form-name',
+		)) as HTMLInputElement;
+		expect(input.value).toBe('OpenAI gateway');
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/MapperFormDrawer.test.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import MapperFormDrawer from '../MapperFormDrawer';
+import {
+	FieldContext,
+	MapperDraft,
+	MapperDraftMode,
+	MapperOperation,
+} from '../types';
+import { EMPTY_MAPPER_DRAFT } from '../utils';
+
+const FIELDS_ENDPOINT = '*/api/v1/fields/keys';
+
+const filledDraft: MapperDraft = {
+	id: null,
+	name: 'gen_ai.request.model',
+	fieldContext: FieldContext.attribute,
+	sources: [
+		{
+			key: 'llm.model',
+			context: FieldContext.attribute,
+			operation: MapperOperation.move,
+		},
+	],
+	enabled: true,
+};
+
+interface HarnessProps {
+	initialDraft?: MapperDraft;
+	mode?: MapperDraftMode;
+	onSave?: () => void;
+	onDelete?: () => void;
+}
+
+function Harness({
+	initialDraft = EMPTY_MAPPER_DRAFT,
+	mode = 'add',
+	onSave = jest.fn(),
+	onDelete = jest.fn(),
+}: HarnessProps): JSX.Element {
+	const [draft, setDraft] = useState<MapperDraft>(initialDraft);
+	return (
+		<MapperFormDrawer
+			isOpen
+			mode={mode}
+			draft={draft}
+			setDraft={setDraft}
+			onClose={jest.fn()}
+			onSave={onSave}
+			onDelete={onDelete}
+			isSaving={false}
+			isDeleting={false}
+			saveError={null}
+		/>
+	);
+}
+
+describe('MapperFormDrawer', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(FIELDS_ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ status: 'success', data: { complete: true, keys: {} } }),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('disables Create when the target/sources are empty', () => {
+		render(<Harness />);
+		expect(screen.getByTestId('mapper-form-save')).toBeDisabled();
+	});
+
+	it('enables Create with a target and a source key, and calls onSave', () => {
+		const onSave = jest.fn();
+		render(<Harness initialDraft={filledDraft} onSave={onSave} />);
+
+		const save = screen.getByTestId('mapper-form-save');
+		expect(save).not.toBeDisabled();
+
+		fireEvent.click(save);
+		expect(onSave).toHaveBeenCalledTimes(1);
+	});
+
+	it('adds a source row when "Add another source" is clicked', () => {
+		render(<Harness initialDraft={filledDraft} />);
+
+		expect(screen.queryByTestId('mapper-form-source-1')).not.toBeInTheDocument();
+		fireEvent.click(screen.getByTestId('mapper-form-add-source'));
+		expect(screen.getByTestId('mapper-form-source-1')).toBeInTheDocument();
+	});
+
+	it('makes the target read-only in edit mode and shows delete', () => {
+		const onDelete = jest.fn();
+		render(
+			<Harness
+				initialDraft={{ ...filledDraft, id: 'local-mapper-1' }}
+				mode="edit"
+				onDelete={onDelete}
+			/>,
+		);
+
+		expect(screen.getByTestId('mapper-form-target')).toBeDisabled();
+
+		fireEvent.click(screen.getByTestId('mapper-form-delete'));
+		expect(onDelete).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/saveDraft.test.ts

@@ -0,0 +1,146 @@
+import { persistDraft, SaveMutations } from '../saveDraft';
+import {
+	DraftGroup,
+	DraftMapper,
+	FieldContext,
+	MapperOperation,
+} from '../types';
+
+function mapper(over: Partial<DraftMapper>): DraftMapper {
+	return {
+		localId: 'm',
+		serverId: 'm',
+		name: 'm',
+		fieldContext: FieldContext.attribute,
+		sources: [
+			{
+				key: 'x',
+				context: FieldContext.attribute,
+				operation: MapperOperation.move,
+			},
+		],
+		enabled: true,
+		...over,
+	};
+}
+
+function group(over: Partial<DraftGroup>): DraftGroup {
+	return {
+		localId: 'g',
+		serverId: 'g',
+		name: 'g',
+		attributes: [],
+		resource: [],
+		enabled: true,
+		mappers: [],
+		...over,
+	};
+}
+
+interface RecordedCalls {
+	createGroup: unknown[];
+	updateGroup: [string, unknown][];
+	deleteGroup: string[];
+	createMapper: [string, unknown][];
+	updateMapper: [string, string, unknown][];
+	deleteMapper: [string, string][];
+}
+
+function makeMutations(): { calls: RecordedCalls; mutations: SaveMutations } {
+	const calls: RecordedCalls = {
+		createGroup: [],
+		updateGroup: [],
+		deleteGroup: [],
+		createMapper: [],
+		updateMapper: [],
+		deleteMapper: [],
+	};
+	const mutations: SaveMutations = {
+		createGroup: async (data): Promise<string> => {
+			calls.createGroup.push(data);
+			return 'new-group-id';
+		},
+		updateGroup: async (id, data): Promise<void> => {
+			calls.updateGroup.push([id, data]);
+		},
+		deleteGroup: async (id): Promise<void> => {
+			calls.deleteGroup.push(id);
+		},
+		createMapper: async (gid, data): Promise<void> => {
+			calls.createMapper.push([gid, data]);
+		},
+		updateMapper: async (gid, mid, data): Promise<void> => {
+			calls.updateMapper.push([gid, mid, data]);
+		},
+		deleteMapper: async (gid, mid): Promise<void> => {
+			calls.deleteMapper.push([gid, mid]);
+		},
+	};
+	return { calls, mutations };
+}
+
+describe('persistDraft', () => {
+	it('issues the minimal set of create/update/delete calls', async () => {
+		const snapshot: DraftGroup[] = [
+			group({
+				localId: 'g1',
+				serverId: 'g1',
+				name: 'G1',
+				mappers: [
+					mapper({ localId: 'm1', serverId: 'm1', name: 'keep' }),
+					mapper({ localId: 'mdel', serverId: 'mdel', name: 'del' }),
+				],
+			}),
+			group({ localId: 'g2', serverId: 'g2', name: 'G2' }),
+		];
+
+		const draft: DraftGroup[] = [
+			group({
+				localId: 'g1',
+				serverId: 'g1',
+				name: 'G1-renamed', // changed -> update
+				mappers: [
+					mapper({ localId: 'm1', serverId: 'm1', name: 'keep' }), // unchanged
+					mapper({ localId: 'local-mapper-x', serverId: null, name: 'fresh' }), // new
+				],
+			}),
+			// g2 removed -> delete
+			group({
+				localId: 'local-group-y',
+				serverId: null,
+				name: 'G3',
+				mappers: [
+					mapper({ localId: 'local-mapper-z', serverId: null, name: 'g3map' }),
+				],
+			}),
+		];
+
+		const { calls, mutations } = makeMutations();
+		await persistDraft(snapshot, draft, mutations);
+
+		expect(calls.deleteGroup).toStrictEqual(['g2']);
+		expect(calls.updateGroup.map(([id]) => id)).toStrictEqual(['g1']);
+		expect(calls.deleteMapper).toStrictEqual([['g1', 'mdel']]);
+		// no-op mapper is not updated
+		expect(calls.updateMapper).toStrictEqual([]);
+		// new group created once, then its mapper created under the returned id
+		expect(calls.createGroup).toHaveLength(1);
+		const createMapperGroupIds = calls.createMapper.map(([gid]) => gid).sort();
+		expect(createMapperGroupIds).toStrictEqual(['g1', 'new-group-id']);
+	});
+
+	it('does nothing when the draft equals the snapshot', async () => {
+		const snapshot: DraftGroup[] = [group({ localId: 'g1', serverId: 'g1' })];
+		const draft: DraftGroup[] = [group({ localId: 'g1', serverId: 'g1' })];
+
+		const { calls, mutations } = makeMutations();
+		await persistDraft(snapshot, draft, mutations);
+
+		expect(calls.createGroup).toHaveLength(0);
+		expect(calls.updateGroup).toHaveLength(0);
+		expect(calls.deleteGroup).toHaveLength(0);
+		expect(calls.createMapper).toHaveLength(0);
+		expect(calls.updateMapper).toHaveLength(0);
+		expect(calls.deleteMapper).toHaveLength(0);
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/__tests__/utils.test.ts

@@ -0,0 +1,330 @@
+import {
+	DraftGroup,
+	FieldContext,
+	Mapper,
+	MapperDraft,
+	MapperGroup,
+	MapperOperation,
+	SourceConfig,
+} from '../types';
+import {
+	buildDraftGroup,
+	buildDraftMapper,
+	buildPostableGroup,
+	buildPostableMapper,
+	buildUpdatableMapper,
+	cleanKeys,
+	conditionFiltersFromGroup,
+	EMPTY_GROUP_DRAFT,
+	EMPTY_MAPPER_DRAFT,
+	formatTimestamp,
+	getMapperSources,
+	groupDraftFromNode,
+	isGroupDraftValid,
+	isMapperDraftValid,
+	mapperDraftFromNode,
+	nodeFromGroupDraft,
+	nodeFromMapperDraft,
+} from '../utils';
+
+function src(
+	key: string,
+	operation = MapperOperation.copy,
+	context = FieldContext.attribute,
+): SourceConfig {
+	return { key, context, operation };
+}
+
+function mapperDraft(over: Partial<MapperDraft>): MapperDraft {
+	return {
+		id: null,
+		name: 'target',
+		fieldContext: FieldContext.attribute,
+		sources: [src('a')],
+		enabled: true,
+		...over,
+	};
+}
+
+const mapper: Mapper = {
+	id: 'm1',
+	group_id: 'g1',
+	name: 'gen_ai.request.model',
+	enabled: true,
+	fieldContext: FieldContext.attribute,
+	config: {
+		sources: [
+			{
+				key: 'low',
+				context: FieldContext.attribute,
+				operation: MapperOperation.copy,
+				priority: 1,
+			},
+			{
+				key: 'high',
+				context: FieldContext.resource,
+				operation: MapperOperation.move,
+				priority: 3,
+			},
+			{
+				key: 'mid',
+				context: FieldContext.attribute,
+				operation: MapperOperation.copy,
+				priority: 2,
+			},
+		],
+	},
+};
+
+const group: MapperGroup = {
+	id: 'g1',
+	orgId: 'org1',
+	name: 'OpenAI',
+	enabled: true,
+	condition: { attributes: ['gen_ai.', 'llm.'], resource: [] },
+};
+
+describe('attribute-mapping utils', () => {
+	describe('cleanKeys', () => {
+		it('trims, drops empties, and de-duplicates preserving order', () => {
+			expect(cleanKeys([' a ', '', 'b', 'a', '  '])).toStrictEqual(['a', 'b']);
+		});
+	});
+
+	describe('getMapperSources', () => {
+		it('returns sources sorted by priority descending, preserving context/operation', () => {
+			expect(getMapperSources(mapper)).toStrictEqual([
+				{
+					key: 'high',
+					context: FieldContext.resource,
+					operation: MapperOperation.move,
+				},
+				{
+					key: 'mid',
+					context: FieldContext.attribute,
+					operation: MapperOperation.copy,
+				},
+				{
+					key: 'low',
+					context: FieldContext.attribute,
+					operation: MapperOperation.copy,
+				},
+			]);
+		});
+
+		it('returns empty array when there are no sources', () => {
+			expect(
+				getMapperSources({ ...mapper, config: { sources: null } }),
+			).toStrictEqual([]);
+		});
+	});
+
+	describe('conditionFiltersFromGroup', () => {
+		it('lists attribute clauses first, then resource clauses', () => {
+			expect(
+				conditionFiltersFromGroup({
+					attributes: ['gen_ai.', 'llm.'],
+					resource: ['service.name'],
+				}),
+			).toStrictEqual([
+				{ context: 'attribute', key: 'gen_ai.' },
+				{ context: 'attribute', key: 'llm.' },
+				{ context: 'resource', key: 'service.name' },
+			]);
+		});
+	});
+
+	describe('formatTimestamp', () => {
+		it('renders a dash for missing timestamps', () => {
+			expect(formatTimestamp(undefined)).toBe('—');
+		});
+	});
+
+	describe('draft-tree builders', () => {
+		it('builds a draft mapper node carrying server id, fieldContext and sources', () => {
+			expect(buildDraftMapper(mapper)).toStrictEqual({
+				localId: 'm1',
+				serverId: 'm1',
+				name: 'gen_ai.request.model',
+				fieldContext: FieldContext.attribute,
+				sources: [
+					{
+						key: 'high',
+						context: FieldContext.resource,
+						operation: MapperOperation.move,
+					},
+					{
+						key: 'mid',
+						context: FieldContext.attribute,
+						operation: MapperOperation.copy,
+					},
+					{
+						key: 'low',
+						context: FieldContext.attribute,
+						operation: MapperOperation.copy,
+					},
+				],
+				enabled: true,
+			});
+		});
+
+		it('builds a draft group node with nested mappers', () => {
+			const node = buildDraftGroup(group, [mapper]);
+			expect(node.localId).toBe('g1');
+			expect(node.attributes).toStrictEqual(['gen_ai.', 'llm.']);
+			expect(node.mappers).toHaveLength(1);
+			expect(node.mappers[0].localId).toBe('m1');
+		});
+	});
+
+	describe('node <-> form conversions', () => {
+		const node: DraftGroup = {
+			localId: 'g1',
+			serverId: 'g1',
+			name: 'OpenAI',
+			attributes: ['gen_ai.'],
+			resource: ['service.name'],
+			enabled: true,
+			mappers: [],
+		};
+
+		it('builds a form draft from a group node', () => {
+			expect(groupDraftFromNode(node)).toStrictEqual({
+				id: 'g1',
+				name: 'OpenAI',
+				attributes: ['gen_ai.'],
+				resource: ['service.name'],
+				enabled: true,
+			});
+		});
+
+		it('updates an existing group node, preserving its ids and mappers', () => {
+			const existing = { ...node, mappers: [buildDraftMapper(mapper)] };
+			const updated = nodeFromGroupDraft(
+				{
+					id: 'g1',
+					name: '  Renamed  ',
+					attributes: ['a', '', 'a'],
+					resource: ['service.name', ''],
+					enabled: false,
+				},
+				existing,
+			);
+			expect(updated.serverId).toBe('g1');
+			expect(updated.name).toBe('Renamed');
+			expect(updated.attributes).toStrictEqual(['a']);
+			expect(updated.resource).toStrictEqual(['service.name']);
+			expect(updated.mappers).toHaveLength(1);
+		});
+
+		it('round-trips a mapper node through the form and de-dups sources by key', () => {
+			const draft = mapperDraftFromNode(buildDraftMapper(mapper));
+			expect(draft.id).toBe('m1');
+			expect(draft.fieldContext).toBe(FieldContext.attribute);
+
+			const created = nodeFromMapperDraft(
+				mapperDraft({
+					id: null,
+					sources: [src('a', MapperOperation.move), src(' '), src('a'), src('b')],
+				}),
+			);
+			expect(created.serverId).toBeNull();
+			expect(created.localId).toMatch(/^local-mapper-/);
+			expect(created.sources).toStrictEqual([
+				{
+					key: 'a',
+					context: FieldContext.attribute,
+					operation: MapperOperation.move,
+				},
+				{
+					key: 'b',
+					context: FieldContext.attribute,
+					operation: MapperOperation.copy,
+				},
+			]);
+		});
+	});
+
+	describe('validation', () => {
+		it('validates a mapper draft (name + at least one keyed source)', () => {
+			expect(isMapperDraftValid(EMPTY_MAPPER_DRAFT)).toBe(false);
+			expect(
+				isMapperDraftValid(mapperDraft({ name: 'x', sources: [src(' ')] })),
+			).toBe(false);
+			expect(
+				isMapperDraftValid(mapperDraft({ name: 'x', sources: [src('a')] })),
+			).toBe(true);
+		});
+
+		it('validates a group draft (name only)', () => {
+			expect(isGroupDraftValid(EMPTY_GROUP_DRAFT)).toBe(false);
+			expect(
+				isGroupDraftValid({
+					id: null,
+					name: 'g',
+					attributes: [],
+					resource: [],
+					enabled: true,
+				}),
+			).toBe(true);
+		});
+	});
+
+	describe('API payload builders', () => {
+		it('derives descending priorities and carries per-source context/operation', () => {
+			const payload = buildPostableMapper(
+				mapperDraft({
+					name: ' target ',
+					fieldContext: FieldContext.resource,
+					sources: [
+						src('a', MapperOperation.move),
+						src('b', MapperOperation.copy, FieldContext.resource),
+					],
+				}),
+			);
+			expect(payload.name).toBe('target');
+			expect(payload.fieldContext).toBe(FieldContext.resource);
+			expect(payload.config.sources).toStrictEqual([
+				{
+					key: 'a',
+					context: FieldContext.attribute,
+					operation: MapperOperation.move,
+					priority: 2,
+				},
+				{
+					key: 'b',
+					context: FieldContext.resource,
+					operation: MapperOperation.copy,
+					priority: 1,
+				},
+			]);
+		});
+
+		it('omits name on the mapper update payload (immutable target)', () => {
+			const payload = buildUpdatableMapper(
+				mapperDraft({
+					id: 'm1',
+					enabled: false,
+					fieldContext: FieldContext.resource,
+				}),
+			);
+			expect(payload).not.toHaveProperty('name');
+			expect(payload.enabled).toBe(false);
+			expect(payload.fieldContext).toBe(FieldContext.resource);
+		});
+
+		it('cleans both attribute and resource condition keys', () => {
+			const payload = buildPostableGroup({
+				id: null,
+				name: 'g',
+				attributes: ['gen_ai.', '', 'gen_ai.'],
+				resource: ['service.name', '  ', 'service.name'],
+				enabled: true,
+			});
+			expect(payload.condition).toStrictEqual({
+				attributes: ['gen_ai.'],
+				resource: ['service.name'],
+			});
+		});
+	});
+});

frontend/src/container/LLMObservabilityAttributeMapping/saveDraft.ts

@@ -0,0 +1,185 @@
+import {
+	SpantypesPostableSpanMapperDTO,
+	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesUpdatableSpanMapperDTO,
+	SpantypesUpdatableSpanMapperGroupDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { DraftGroup, DraftMapper, SourceConfig } from './types';
+import {
+	buildPostableGroup,
+	buildPostableMapper,
+	buildUpdatableGroup,
+	buildUpdatableMapper,
+} from './utils';
+
+// Thin persistence surface the store wires to the generated mutations.
+// createGroup returns the new server id so its mappers can be created under it.
+export interface SaveMutations {
+	createGroup: (data: SpantypesPostableSpanMapperGroupDTO) => Promise<string>;
+	updateGroup: (
+		groupId: string,
+		data: SpantypesUpdatableSpanMapperGroupDTO,
+	) => Promise<void>;
+	deleteGroup: (groupId: string) => Promise<void>;
+	createMapper: (
+		groupId: string,
+		data: SpantypesPostableSpanMapperDTO,
+	) => Promise<void>;
+	updateMapper: (
+		groupId: string,
+		mapperId: string,
+		data: SpantypesUpdatableSpanMapperDTO,
+	) => Promise<void>;
+	deleteMapper: (groupId: string, mapperId: string) => Promise<void>;
+}
+
+function arraysEqual(a: string[], b: string[]): boolean {
+	return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+
+function sourcesEqual(a: SourceConfig[], b: SourceConfig[]): boolean {
+	return (
+		a.length === b.length &&
+		a.every(
+			(source, index) =>
+				source.key === b[index].key &&
+				source.context === b[index].context &&
+				source.operation === b[index].operation,
+		)
+	);
+}
+
+function groupChanged(snapshot: DraftGroup, draft: DraftGroup): boolean {
+	return (
+		snapshot.name !== draft.name ||
+		snapshot.enabled !== draft.enabled ||
+		!arraysEqual(snapshot.attributes, draft.attributes) ||
+		!arraysEqual(snapshot.resource, draft.resource)
+	);
+}
+
+function mapperChanged(snapshot: DraftMapper, draft: DraftMapper): boolean {
+	return (
+		snapshot.enabled !== draft.enabled ||
+		snapshot.fieldContext !== draft.fieldContext ||
+		!sourcesEqual(snapshot.sources, draft.sources)
+	);
+}
+
+function groupDraftOf(
+	node: DraftGroup,
+): Parameters<typeof buildPostableGroup>[0] {
+	return {
+		id: node.serverId,
+		name: node.name,
+		attributes: node.attributes,
+		resource: node.resource,
+		enabled: node.enabled,
+	};
+}
+
+function mapperDraftOf(
+	node: DraftMapper,
+): Parameters<typeof buildPostableMapper>[0] {
+	return {
+		id: node.serverId,
+		name: node.name,
+		fieldContext: node.fieldContext,
+		sources: node.sources,
+		enabled: node.enabled,
+	};
+}
+
+async function persistMappers(
+	groupServerId: string,
+	snapshotMappers: DraftMapper[],
+	draftMappers: DraftMapper[],
+	m: SaveMutations,
+): Promise<void> {
+	const snapById = new Map(
+		snapshotMappers
+			.filter((mapper) => mapper.serverId)
+			.map((mapper) => [mapper.serverId as string, mapper]),
+	);
+	const draftServerIds = new Set(
+		draftMappers
+			.filter((mapper) => mapper.serverId)
+			.map((mapper) => mapper.serverId as string),
+	);
+
+	// Deleted mappers.
+	await Promise.all(
+		snapshotMappers
+			.filter((mapper) => mapper.serverId && !draftServerIds.has(mapper.serverId))
+			.map((mapper) => m.deleteMapper(groupServerId, mapper.serverId as string)),
+	);
+
+	// Created + updated mappers (sequential to keep ordering deterministic).
+	for (const mapper of draftMappers) {
+		if (!mapper.serverId) {
+			// eslint-disable-next-line no-await-in-loop
+			await m.createMapper(
+				groupServerId,
+				buildPostableMapper(mapperDraftOf(mapper)),
+			);
+		} else {
+			const snap = snapById.get(mapper.serverId);
+			if (!snap || mapperChanged(snap, mapper)) {
+				// eslint-disable-next-line no-await-in-loop
+				await m.updateMapper(
+					groupServerId,
+					mapper.serverId,
+					buildUpdatableMapper(mapperDraftOf(mapper)),
+				);
+			}
+		}
+	}
+}
+
+// Diffs the staged tree against the server snapshot and issues the minimal set
+// of create/update/delete calls to reconcile them.
+export async function persistDraft(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+	m: SaveMutations,
+): Promise<void> {
+	const snapById = new Map(
+		snapshot
+			.filter((group) => group.serverId)
+			.map((group) => [group.serverId as string, group]),
+	);
+	const draftServerIds = new Set(
+		draft
+			.filter((group) => group.serverId)
+			.map((group) => group.serverId as string),
+	);
+
+	// Deleted groups (cascades mappers server-side).
+	await Promise.all(
+		snapshot
+			.filter((group) => group.serverId && !draftServerIds.has(group.serverId))
+			.map((group) => m.deleteGroup(group.serverId as string)),
+	);
+
+	for (const group of draft) {
+		if (!group.serverId) {
+			// eslint-disable-next-line no-await-in-loop
+			const newId = await m.createGroup(buildPostableGroup(groupDraftOf(group)));
+			// eslint-disable-next-line no-await-in-loop
+			await persistMappers(newId, [], group.mappers, m);
+			continue;
+		}
+
+		const snap = snapById.get(group.serverId);
+		if (!snap || groupChanged(snap, group)) {
+			// eslint-disable-next-line no-await-in-loop
+			await m.updateGroup(
+				group.serverId,
+				buildUpdatableGroup(groupDraftOf(group)),
+			);
+		}
+		// eslint-disable-next-line no-await-in-loop
+		await persistMappers(group.serverId, snap?.mappers ?? [], group.mappers, m);
+	}
+}

frontend/src/container/LLMObservabilityAttributeMapping/types.ts

@@ -0,0 +1,84 @@
+import {
+	SpantypesFieldContextDTO,
+	SpantypesSpanMapperConfigDTO,
+	SpantypesSpanMapperDTO,
+	SpantypesSpanMapperGroupConditionDTO,
+	SpantypesSpanMapperGroupDTO,
+	SpantypesSpanMapperOperationDTO,
+	SpantypesSpanMapperSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type MapperGroup = SpantypesSpanMapperGroupDTO;
+export type MapperGroupCondition =
+	NonNullable<SpantypesSpanMapperGroupConditionDTO>;
+export type Mapper = SpantypesSpanMapperDTO;
+export type MapperConfig = SpantypesSpanMapperConfigDTO;
+export type MapperSource = SpantypesSpanMapperSourceDTO;
+
+export const FieldContext = SpantypesFieldContextDTO;
+export const MapperOperation = SpantypesSpanMapperOperationDTO;
+
+export type FieldContextValue = SpantypesFieldContextDTO;
+export type MapperOperationValue = SpantypesSpanMapperOperationDTO;
+
+// A single human-readable condition clause shown in the group's Filters column.
+export interface ConditionFilter {
+	context: 'attribute' | 'resource';
+	key: string;
+}
+
+export type MapperDraftMode = 'add' | 'edit';
+
+// One source candidate. `context` is where the key is read from (span
+// attribute or resource); `operation` is move (delete source) or copy (keep).
+// Priority is implicit in list order (top wins), derived on save.
+export interface SourceConfig {
+	key: string;
+	context: SpantypesFieldContextDTO;
+	operation: SpantypesSpanMapperOperationDTO;
+}
+
+// Editable form state for a mapper. `sources` is ordered highest priority
+// first; `fieldContext` is where the standardized target is written.
+export interface MapperDraft {
+	id: string | null;
+	name: string;
+	fieldContext: SpantypesFieldContextDTO;
+	sources: SourceConfig[];
+	enabled: boolean;
+}
+
+// Editable form state for a group. The group runs when a span carries a
+// span-attribute key matching `attributes` OR a resource key matching
+// `resource` (plain substring match).
+export interface GroupDraft {
+	id: string | null;
+	name: string;
+	attributes: string[];
+	resource: string[];
+	enabled: boolean;
+}
+
+// Working-copy node for a mapper. `localId` is a stable client key (the server
+// id once persisted, or a temporary id for not-yet-saved rows). `serverId` is
+// null until the row has been persisted.
+export interface DraftMapper {
+	localId: string;
+	serverId: string | null;
+	name: string;
+	fieldContext: SpantypesFieldContextDTO;
+	sources: SourceConfig[];
+	enabled: boolean;
+}
+
+// Working-copy node for a group, holding its mappers inline so the whole tree
+// can be staged locally and diffed against the server snapshot on save.
+export interface DraftGroup {
+	localId: string;
+	serverId: string | null;
+	name: string;
+	attributes: string[];
+	resource: string[];
+	enabled: boolean;
+	mappers: DraftMapper[];
+}

frontend/src/container/LLMObservabilityAttributeMapping/useAttributeMappingStore.ts

@@ -0,0 +1,287 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueries, useQueryClient } from 'react-query';
+import {
+	getListSpanMappersQueryOptions,
+	useCreateSpanMapper,
+	useCreateSpanMapperGroup,
+	useDeleteSpanMapper,
+	useDeleteSpanMapperGroup,
+	useListSpanMapperGroups,
+	useUpdateSpanMapper,
+	useUpdateSpanMapperGroup,
+} from 'api/generated/services/spanmapper';
+
+import { persistDraft, SaveMutations } from './saveDraft';
+import {
+	DraftGroup,
+	GroupDraft,
+	Mapper,
+	MapperDraft,
+	MapperGroup,
+} from './types';
+import {
+	buildDraftGroup,
+	nodeFromGroupDraft,
+	nodeFromMapperDraft,
+} from './utils';
+
+const GROUPS_KEY_PREFIX = '/api/v1/span_mapper_groups';
+
+function clone(groups: DraftGroup[]): DraftGroup[] {
+	return JSON.parse(JSON.stringify(groups)) as DraftGroup[];
+}
+
+export interface AttributeMappingStore {
+	groups: DraftGroup[];
+	isLoading: boolean;
+	isError: boolean;
+	isDirty: boolean;
+	isSaving: boolean;
+	saveError: string | null;
+	upsertGroup: (draft: GroupDraft) => void;
+	removeGroup: (localId: string) => void;
+	toggleGroup: (localId: string, enabled: boolean) => void;
+	upsertMapper: (groupLocalId: string, draft: MapperDraft) => void;
+	removeMapper: (groupLocalId: string, mapperLocalId: string) => void;
+	toggleMapper: (
+		groupLocalId: string,
+		mapperLocalId: string,
+		enabled: boolean,
+	) => void;
+	save: () => Promise<void>;
+	discard: () => void;
+}
+
+export function useAttributeMappingStore(): AttributeMappingStore {
+	const queryClient = useQueryClient();
+
+	const groupsQuery = useListSpanMapperGroups();
+	const serverGroups: MapperGroup[] = useMemo(
+		() => groupsQuery.data?.data?.items ?? [],
+		[groupsQuery.data],
+	);
+
+	const mapperQueries = useQueries(
+		serverGroups.map((group) =>
+			getListSpanMappersQueryOptions({ groupId: group.id }),
+		),
+	);
+
+	const mappersReady = mapperQueries.every((query) => !query.isLoading);
+	const ready = !groupsQuery.isLoading && mappersReady;
+
+	// Stable signature so the snapshot only rebuilds when server data changes.
+	const dataSignature = useMemo(
+		() =>
+			JSON.stringify(serverGroups) +
+			JSON.stringify(mapperQueries.map((query) => query.data?.data?.items ?? [])),
+		[serverGroups, mapperQueries],
+	);
+
+	const snapshot = useMemo<DraftGroup[]>(() => {
+		if (!ready) {
+			return [];
+		}
+		return serverGroups.map((group, index) =>
+			buildDraftGroup(
+				group,
+				(mapperQueries[index]?.data?.data?.items ?? []) as unknown as Mapper[],
+			),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ready, dataSignature]);
+
+	const [draft, setDraft] = useState<DraftGroup[] | null>(null);
+
+	// Initialise the working copy once data is ready (and re-init after a save
+	// clears it). Never clobbers in-flight edits — only runs when draft is null.
+	useEffect(() => {
+		if (ready && draft === null) {
+			setDraft(clone(snapshot));
+		}
+	}, [ready, draft, snapshot]);
+
+	const [isSaving, setIsSaving] = useState(false);
+	const [saveError, setSaveError] = useState<string | null>(null);
+
+	const { mutateAsync: createGroup } = useCreateSpanMapperGroup();
+	const { mutateAsync: updateGroup } = useUpdateSpanMapperGroup();
+	const { mutateAsync: deleteGroup } = useDeleteSpanMapperGroup();
+	const { mutateAsync: createMapper } = useCreateSpanMapper();
+	const { mutateAsync: updateMapper } = useUpdateSpanMapper();
+	const { mutateAsync: deleteMapper } = useDeleteSpanMapper();
+
+	const mutations: SaveMutations = useMemo(
+		() => ({
+			createGroup: async (data): Promise<string> => {
+				const result = await createGroup({ data });
+				return result.data.id;
+			},
+			updateGroup: async (groupId, data): Promise<void> => {
+				await updateGroup({ pathParams: { groupId }, data });
+			},
+			deleteGroup: async (groupId): Promise<void> => {
+				await deleteGroup({ pathParams: { groupId } });
+			},
+			createMapper: async (groupId, data): Promise<void> => {
+				await createMapper({ pathParams: { groupId }, data });
+			},
+			updateMapper: async (groupId, mapperId, data): Promise<void> => {
+				await updateMapper({ pathParams: { groupId, mapperId }, data });
+			},
+			deleteMapper: async (groupId, mapperId): Promise<void> => {
+				await deleteMapper({ pathParams: { groupId, mapperId } });
+			},
+		}),
+		[
+			createGroup,
+			updateGroup,
+			deleteGroup,
+			createMapper,
+			updateMapper,
+			deleteMapper,
+		],
+	);
+
+	const upsertGroup = useCallback((groupDraft: GroupDraft): void => {
+		setDraft((prev) => {
+			const groups = prev ?? [];
+			if (groupDraft.id) {
+				return groups.map((group) =>
+					group.localId === groupDraft.id
+						? nodeFromGroupDraft(groupDraft, group)
+						: group,
+				);
+			}
+			return [...groups, nodeFromGroupDraft(groupDraft)];
+		});
+	}, []);
+
+	const removeGroup = useCallback((localId: string): void => {
+		setDraft((prev) => (prev ?? []).filter((group) => group.localId !== localId));
+	}, []);
+
+	const toggleGroup = useCallback((localId: string, enabled: boolean): void => {
+		setDraft((prev) =>
+			(prev ?? []).map((group) =>
+				group.localId === localId ? { ...group, enabled } : group,
+			),
+		);
+	}, []);
+
+	const upsertMapper = useCallback(
+		(groupLocalId: string, mapperDraft: MapperDraft): void => {
+			setDraft((prev) =>
+				(prev ?? []).map((group) => {
+					if (group.localId !== groupLocalId) {
+						return group;
+					}
+					if (mapperDraft.id) {
+						return {
+							...group,
+							mappers: group.mappers.map((mapper) =>
+								mapper.localId === mapperDraft.id
+									? nodeFromMapperDraft(mapperDraft, mapper)
+									: mapper,
+							),
+						};
+					}
+					return {
+						...group,
+						mappers: [...group.mappers, nodeFromMapperDraft(mapperDraft)],
+					};
+				}),
+			);
+		},
+		[],
+	);
+
+	const removeMapper = useCallback(
+		(groupLocalId: string, mapperLocalId: string): void => {
+			setDraft((prev) =>
+				(prev ?? []).map((group) =>
+					group.localId === groupLocalId
+						? {
+								...group,
+								mappers: group.mappers.filter(
+									(mapper) => mapper.localId !== mapperLocalId,
+								),
+							}
+						: group,
+				),
+			);
+		},
+		[],
+	);
+
+	const toggleMapper = useCallback(
+		(groupLocalId: string, mapperLocalId: string, enabled: boolean): void => {
+			setDraft((prev) =>
+				(prev ?? []).map((group) =>
+					group.localId === groupLocalId
+						? {
+								...group,
+								mappers: group.mappers.map((mapper) =>
+									mapper.localId === mapperLocalId ? { ...mapper, enabled } : mapper,
+								),
+							}
+						: group,
+				),
+			);
+		},
+		[],
+	);
+
+	const discard = useCallback((): void => {
+		setSaveError(null);
+		setDraft(clone(snapshot));
+	}, [snapshot]);
+
+	const save = useCallback(async (): Promise<void> => {
+		if (!draft) {
+			return;
+		}
+		setIsSaving(true);
+		setSaveError(null);
+		try {
+			await persistDraft(snapshot, draft, mutations);
+			await queryClient.invalidateQueries({
+				predicate: (query) =>
+					typeof query.queryKey?.[0] === 'string' &&
+					(query.queryKey[0] as string).startsWith(GROUPS_KEY_PREFIX),
+			});
+			// Re-initialise the working copy from the freshly-fetched server data.
+			setDraft(null);
+			toast.success('Attribute mapping changes saved');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Save failed';
+			setSaveError(message);
+			toast.error(`Failed to save changes: ${message}`);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [draft, snapshot, mutations, queryClient]);
+
+	const isDirty = useMemo(
+		() => draft !== null && JSON.stringify(draft) !== JSON.stringify(snapshot),
+		[draft, snapshot],
+	);
+
+	return {
+		groups: draft ?? [],
+		isLoading: !ready || draft === null,
+		isError: groupsQuery.isError,
+		isDirty,
+		isSaving,
+		saveError,
+		upsertGroup,
+		removeGroup,
+		toggleGroup,
+		upsertMapper,
+		removeMapper,
+		toggleMapper,
+		save,
+		discard,
+	};
+}

frontend/src/container/LLMObservabilityAttributeMapping/useGroupFormDrawer.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+
+import { DraftGroup, GroupDraft, MapperDraftMode } from './types';
+import { EMPTY_GROUP_DRAFT, groupDraftFromNode } from './utils';
+
+interface UseGroupFormDrawerResult {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: GroupDraft;
+	setDraft: (next: GroupDraft) => void;
+	openForAdd: () => void;
+	openForEdit: (group: DraftGroup) => void;
+	close: () => void;
+}
+
+// Form state for the group drawer. Persistence is staged through the store,
+// so this hook only owns open/draft/mode.
+export function useGroupFormDrawer(): UseGroupFormDrawerResult {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<MapperDraftMode>('add');
+	const [draft, setDraft] = useState<GroupDraft>(EMPTY_GROUP_DRAFT);
+
+	const openForAdd = useCallback((): void => {
+		setMode('add');
+		setDraft(EMPTY_GROUP_DRAFT);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((group: DraftGroup): void => {
+		setMode('edit');
+		setDraft(groupDraftFromNode(group));
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+	}, []);
+
+	return { isOpen, mode, draft, setDraft, openForAdd, openForEdit, close };
+}

frontend/src/container/LLMObservabilityAttributeMapping/useMapperFormDrawer.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+
+import { DraftMapper, MapperDraft, MapperDraftMode } from './types';
+import { EMPTY_MAPPER_DRAFT, mapperDraftFromNode } from './utils';
+
+interface UseMapperFormDrawerResult {
+	isOpen: boolean;
+	mode: MapperDraftMode;
+	draft: MapperDraft;
+	setDraft: (next: MapperDraft) => void;
+	openForAdd: () => void;
+	openForEdit: (mapper: DraftMapper) => void;
+	close: () => void;
+}
+
+// Form state for the mapper drawer. Persistence is staged through the store,
+// so this hook only owns open/draft/mode.
+export function useMapperFormDrawer(): UseMapperFormDrawerResult {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<MapperDraftMode>('add');
+	const [draft, setDraft] = useState<MapperDraft>(EMPTY_MAPPER_DRAFT);
+
+	const openForAdd = useCallback((): void => {
+		setMode('add');
+		setDraft(EMPTY_MAPPER_DRAFT);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((mapper: DraftMapper): void => {
+		setMode('edit');
+		setDraft(mapperDraftFromNode(mapper));
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+	}, []);
+
+	return { isOpen, mode, draft, setDraft, openForAdd, openForEdit, close };
+}

frontend/src/container/LLMObservabilityAttributeMapping/utils.ts

@@ -0,0 +1,262 @@
+import {
+	SpantypesPostableSpanMapperDTO,
+	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesUpdatableSpanMapperDTO,
+	SpantypesUpdatableSpanMapperGroupDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import dayjs from 'dayjs';
+import { v4 as uuid } from 'uuid';
+
+import {
+	ConditionFilter,
+	DraftGroup,
+	DraftMapper,
+	FieldContext,
+	GroupDraft,
+	Mapper,
+	MapperDraft,
+	MapperGroup,
+	MapperOperation,
+	SourceConfig,
+} from './types';
+
+// Client-side id for not-yet-persisted rows. Prefixed so it never collides
+// with a server UUID and is easy to spot in logs.
+export function genLocalId(prefix: 'group' | 'mapper'): string {
+	return `local-${prefix}-${uuid()}`;
+}
+
+// Trimmed, de-duplicated, non-empty keys preserving input order.
+export function cleanKeys(keys: string[]): string[] {
+	const seen = new Set<string>();
+	const result: string[] = [];
+	keys.forEach((raw) => {
+		const key = raw.trim();
+		if (key && !seen.has(key)) {
+			seen.add(key);
+			result.push(key);
+		}
+	});
+	return result;
+}
+
+// Display clauses for a group's staged condition keys (span attribute keys
+// first, then resource keys).
+export function conditionFiltersFromGroup(group: {
+	attributes: string[];
+	resource: string[];
+}): ConditionFilter[] {
+	return [
+		...group.attributes.map((key) => ({ context: 'attribute' as const, key })),
+		...group.resource.map((key) => ({ context: 'resource' as const, key })),
+	];
+}
+
+// Source configs for a mapper, highest priority first (first match wins at
+// evaluation time).
+export function getMapperSources(mapper: Mapper): SourceConfig[] {
+	const sources = mapper.config?.sources ?? [];
+	return [...sources]
+		.sort((a, b) => b.priority - a.priority)
+		.map((source) => ({
+			key: source.key,
+			context: source.context,
+			operation: source.operation,
+		}));
+}
+
+// A blank source row. New sources default to `move` so the original key is
+// removed once standardized (the PRD default — minimizes duplication).
+export function createEmptySource(): SourceConfig {
+	return {
+		key: '',
+		context: FieldContext.attribute,
+		operation: MapperOperation.move,
+	};
+}
+
+export function formatTimestamp(iso?: string): string {
+	if (!iso) {
+		return '—';
+	}
+	return dayjs(iso).format('MMM D, YYYY HH:mm');
+}
+
+export const EMPTY_MAPPER_DRAFT: MapperDraft = {
+	id: null,
+	name: '',
+	fieldContext: FieldContext.attribute,
+	sources: [createEmptySource()],
+	enabled: true,
+};
+
+// Trimmed, de-duplicated (by key), non-empty sources in priority order,
+// preserving each source's context and operation.
+export function getCleanSources(draft: MapperDraft): SourceConfig[] {
+	const seen = new Set<string>();
+	const result: SourceConfig[] = [];
+	draft.sources.forEach((source) => {
+		const key = source.key.trim();
+		if (key && !seen.has(key)) {
+			seen.add(key);
+			result.push({ ...source, key });
+		}
+	});
+	return result;
+}
+
+export function isMapperDraftValid(draft: MapperDraft): boolean {
+	return draft.name.trim().length > 0 && getCleanSources(draft).length > 0;
+}
+
+// Priority is derived from list order so the first row wins.
+function buildSources(
+	draft: MapperDraft,
+): SpantypesPostableSpanMapperDTO['config']['sources'] {
+	const sources = getCleanSources(draft);
+	return sources.map((source, index) => ({
+		key: source.key,
+		context: source.context,
+		operation: source.operation,
+		priority: sources.length - index,
+	}));
+}
+
+export function buildPostableMapper(
+	draft: MapperDraft,
+): SpantypesPostableSpanMapperDTO {
+	return {
+		name: draft.name.trim(),
+		fieldContext: draft.fieldContext,
+		enabled: draft.enabled,
+		config: { sources: buildSources(draft) },
+	};
+}
+
+// The target name is immutable on update (UpdatableSpanMapper has no name).
+export function buildUpdatableMapper(
+	draft: MapperDraft,
+): SpantypesUpdatableSpanMapperDTO {
+	return {
+		fieldContext: draft.fieldContext,
+		enabled: draft.enabled,
+		config: { sources: buildSources(draft) },
+	};
+}
+
+export const EMPTY_GROUP_DRAFT: GroupDraft = {
+	id: null,
+	name: '',
+	attributes: [''],
+	resource: [],
+	enabled: true,
+};
+
+export function isGroupDraftValid(draft: GroupDraft): boolean {
+	return draft.name.trim().length > 0;
+}
+
+export function buildPostableGroup(
+	draft: GroupDraft,
+): SpantypesPostableSpanMapperGroupDTO {
+	return {
+		name: draft.name.trim(),
+		enabled: draft.enabled,
+		condition: {
+			attributes: cleanKeys(draft.attributes),
+			resource: cleanKeys(draft.resource),
+		},
+	};
+}
+
+// A full group payload is also a valid partial-update payload (all updatable
+// fields are present), so we reuse the postable builder.
+export function buildUpdatableGroup(
+	draft: GroupDraft,
+): SpantypesUpdatableSpanMapperGroupDTO {
+	return buildPostableGroup(draft);
+}
+
+// ---- working-copy (draft tree) helpers ----
+
+export function buildDraftMapper(mapper: Mapper): DraftMapper {
+	return {
+		localId: mapper.id,
+		serverId: mapper.id,
+		name: mapper.name,
+		fieldContext: mapper.fieldContext,
+		sources: getMapperSources(mapper),
+		enabled: mapper.enabled,
+	};
+}
+
+export function buildDraftGroup(
+	group: MapperGroup,
+	mappers: Mapper[],
+): DraftGroup {
+	return {
+		localId: group.id,
+		serverId: group.id,
+		name: group.name,
+		attributes: group.condition?.attributes ?? [],
+		resource: group.condition?.resource ?? [],
+		enabled: group.enabled,
+		mappers: mappers.map(buildDraftMapper),
+	};
+}
+
+// DraftGroup -> editable form state (id carries the localId).
+export function groupDraftFromNode(group: DraftGroup): GroupDraft {
+	return {
+		id: group.localId,
+		name: group.name,
+		attributes: group.attributes.length > 0 ? group.attributes : [''],
+		resource: group.resource,
+		enabled: group.enabled,
+	};
+}
+
+// DraftMapper -> editable form state (id carries the localId).
+export function mapperDraftFromNode(mapper: DraftMapper): MapperDraft {
+	return {
+		id: mapper.localId,
+		name: mapper.name,
+		fieldContext: mapper.fieldContext,
+		sources:
+			mapper.sources.length > 0
+				? mapper.sources.map((source) => ({ ...source }))
+				: [createEmptySource()],
+		enabled: mapper.enabled,
+	};
+}
+
+// Form state -> working-copy node. Reuses cleanKeys/getCleanSourceKeys so the
+// staged tree already holds normalized values.
+export function nodeFromGroupDraft(
+	draft: GroupDraft,
+	existing?: DraftGroup,
+): DraftGroup {
+	return {
+		localId: existing?.localId ?? genLocalId('group'),
+		serverId: existing?.serverId ?? null,
+		name: draft.name.trim(),
+		attributes: cleanKeys(draft.attributes),
+		resource: cleanKeys(draft.resource),
+		enabled: draft.enabled,
+		mappers: existing?.mappers ?? [],
+	};
+}
+
+export function nodeFromMapperDraft(
+	draft: MapperDraft,
+	existing?: DraftMapper,
+): DraftMapper {
+	return {
+		localId: existing?.localId ?? genLocalId('mapper'),
+		serverId: existing?.serverId ?? null,
+		name: draft.name.trim(),
+		fieldContext: draft.fieldContext,
+		sources: getCleanSources(draft),
+		enabled: draft.enabled,
+	};
+}

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.styles.scss

@@ -0,0 +1,172 @@
+.llm-observability-model-pricing {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 24px 32px;
+
+	.page-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 16px;
+
+		&__title {
+			h1 {
+				margin: 0;
+				font-size: 22px;
+				font-weight: 600;
+			}
+
+			p {
+				margin: 4px 0 0;
+				color: var(--bg-vanilla-400);
+				font-size: 13px;
+			}
+		}
+
+		&__actions {
+			display: flex;
+			gap: 8px;
+		}
+	}
+
+	.page-tabs {
+		.ant-tabs-nav {
+			margin-bottom: 0;
+		}
+	}
+
+	.filters-bar {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+
+		&__search {
+			flex: 1;
+			max-width: 360px;
+		}
+
+		&__source,
+		&__currency {
+			min-width: 160px;
+		}
+
+		&__add {
+			margin-left: auto;
+		}
+	}
+
+	.page-error {
+		padding: 12px 16px;
+		border-radius: 4px;
+		background: rgba(255, 90, 90, 0.08);
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	.page-pagination {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 8px;
+	}
+
+	.page-footer {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+	}
+}
+
+.model-costs-table {
+	.ant-table-thead > tr > th {
+		color: var(--bg-vanilla-400) !important;
+		font-size: 11px;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+
+	.ant-table-tbody > tr > td {
+		color: var(--bg-vanilla-400);
+	}
+
+	.model-cell {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		// Allow the flex children to shrink below their content width so the
+		// table's fixed-layout / nowrap cells truncate instead of overflowing
+		// into the Provider column.
+		min-width: 0;
+
+		&__name {
+			color: var(--bg-vanilla-100);
+			font-weight: 600;
+		}
+
+		&__name,
+		&__canonical-id {
+			max-width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		&__canonical-id {
+			color: var(--bg-vanilla-400);
+			font-family: var(--code-font-family, monospace);
+			font-size: 12px;
+		}
+	}
+
+	.price-cell {
+		font-family: var(--code-font-family, monospace);
+		color: var(--bg-vanilla-400);
+	}
+
+	.extra-buckets {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+
+		&__chip {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			margin: 0;
+		}
+
+		&__key {
+			font-family: var(--code-font-family, monospace);
+			font-size: 12px;
+		}
+
+		&__price {
+			font-family: var(--code-font-family, monospace);
+			font-weight: 600;
+		}
+	}
+
+	.muted {
+		color: var(--bg-vanilla-400);
+	}
+
+	.source-badge {
+		margin: 0;
+
+		&--auto {
+			background: rgba(78, 116, 248, 0.12);
+			color: var(--bg-robin-400);
+			border-color: rgba(78, 116, 248, 0.24);
+		}
+
+		&--override {
+			background: rgba(245, 175, 25, 0.12);
+			color: var(--bg-amber-400);
+			border-color: rgba(245, 175, 25, 0.24);
+		}
+	}
+
+	&__row--selected {
+		background: rgba(78, 116, 248, 0.06);
+	}
+}

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.tsx

@@ -0,0 +1,180 @@
+import { useMemo, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Pagination } from '@signozhq/ui/pagination';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Tabs } from '@signozhq/ui/tabs';
+import { Plus, Search } from '@signozhq/icons';
+import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
+
+import ModelCostDrawer from './ModelCostDrawer';
+import ModelCostsTable from './ModelCostsTable';
+import { useModelCostDrawer } from './useModelCostDrawer';
+import type { PricingRule, SourceFilter } from './types';
+import { filterRules } from './utils';
+
+import './LLMObservabilityModelPricing.styles.scss';
+
+const SOURCE_OPTIONS: { value: SourceFilter; label: string }[] = [
+	{ value: 'all', label: 'Source: All' },
+	{ value: 'auto', label: 'Auto-populated' },
+	{ value: 'override', label: 'User override' },
+];
+
+const CURRENCY_OPTIONS = [
+	{ value: 'USD', label: 'USD' },
+	{ value: 'EUR', label: 'EUR', disabled: true },
+	{ value: 'INR', label: 'INR', disabled: true },
+];
+
+const PAGE_SIZE = 20;
+
+function LLMObservabilityModelPricing(): JSX.Element {
+	const [search, setSearch] = useState<string>('');
+	const [source, setSource] = useState<SourceFilter>('all');
+	const [currency, setCurrency] = useState<string>('USD');
+	const [page, setPage] = useState<number>(1);
+
+	const { data, isLoading, isError } = useListLLMPricingRules({
+		offset: (page - 1) * PAGE_SIZE,
+		limit: PAGE_SIZE,
+	});
+
+	const { user } = useAppContext();
+	const [canManagePricing] = useComponentPermission(
+		['manage_llm_pricing'],
+		user.role,
+	);
+
+	const rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
+	const total = data?.data?.total ?? 0;
+
+	const filteredRules = useMemo(
+		() => filterRules(rules, search, source),
+		[rules, search, source],
+	);
+
+	const drawer = useModelCostDrawer();
+
+	// Search/source filter the current page client-side (the list endpoint only
+	// supports offset/limit), so reset to the first page when they change.
+	const resetToFirstPage = (): void => setPage(1);
+
+	return (
+		<div
+			className="llm-observability-model-pricing"
+			data-testid="llm-observability-model-pricing-page"
+		>
+			<header className="page-header">
+				<div className="page-header__title">
+					<h1>Configuration</h1>
+					<p>Model pricing and cost estimation settings</p>
+				</div>
+			</header>
+
+			<Tabs
+				className="page-tabs"
+				defaultValue="model-costs"
+				items={[
+					{ key: 'model-costs', label: 'Model costs', children: null },
+					{
+						key: 'unpriced-models',
+						label: 'Unpriced models',
+						disabled: true,
+						children: null,
+					},
+				]}
+			/>
+
+			<div className="filters-bar">
+				<Input
+					className="filters-bar__search"
+					placeholder="Search by model or provider…"
+					prefix={<Search size={14} />}
+					value={search}
+					onChange={(event): void => {
+						setSearch(event.target.value);
+						resetToFirstPage();
+					}}
+					testId="search-input"
+				/>
+				<SelectSimple
+					className="filters-bar__source"
+					value={source}
+					onChange={(value): void => {
+						setSource(value as SourceFilter);
+						resetToFirstPage();
+					}}
+					items={SOURCE_OPTIONS}
+					testId="source-select"
+				/>
+				<SelectSimple
+					className="filters-bar__currency"
+					value={currency}
+					onChange={(value): void => setCurrency(value as string)}
+					items={CURRENCY_OPTIONS}
+					testId="currency-select"
+				/>
+				{canManagePricing && (
+					<Button
+						variant="solid"
+						color="primary"
+						className="filters-bar__add"
+						prefix={<Plus size={14} />}
+						onClick={(): void => drawer.openForAdd()}
+						testId="add-model-cost-btn"
+					>
+						Add model cost
+					</Button>
+				)}
+			</div>
+
+			{isError && (
+				<div className="page-error" role="alert">
+					Failed to load pricing rules. Please try again.
+				</div>
+			)}
+
+			<ModelCostsTable
+				rules={filteredRules}
+				isLoading={isLoading}
+				selectedRuleId={drawer.selectedRuleId}
+				canManage={canManagePricing}
+				onEdit={drawer.openForEdit}
+			/>
+
+			{total > PAGE_SIZE && (
+				<Pagination
+					className="page-pagination"
+					total={total}
+					pageSize={PAGE_SIZE}
+					current={page}
+					onPageChange={setPage}
+				/>
+			)}
+
+			<footer className="page-footer">
+				Showing {filteredRules.length} of {total} model{total === 1 ? '' : 's'}
+				{' · '}All prices per 1M tokens (USD)
+			</footer>
+
+			<ModelCostDrawer
+				isOpen={drawer.isOpen}
+				mode={drawer.mode}
+				draft={drawer.draft}
+				setDraft={drawer.setDraft}
+				onClose={drawer.close}
+				onSave={drawer.save}
+				onDelete={drawer.deleteRule}
+				isSaving={drawer.isSaving}
+				isDeleting={drawer.isDeleting}
+				saveError={drawer.saveError}
+				canManage={canManagePricing}
+			/>
+		</div>
+	);
+}
+
+export default LLMObservabilityModelPricing;

frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.styles.scss

@@ -0,0 +1,313 @@
+.model-cost-drawer {
+	// Uniform horizontal padding across header / body / footer. The header and
+	// footer read these dialog vars; the body (rendered in drawer-description)
+	// is set directly below.
+	--dialog-header-padding: 20px 24px;
+	--dialog-footer-padding: 16px 24px;
+
+	// The drawer body — children render inside [data-slot='drawer-description']
+	// (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op).
+	[data-slot='drawer-description'] {
+		display: flex;
+		flex-direction: column;
+		gap: 18px;
+		padding: 20px 24px;
+	}
+
+	[data-slot='select-content'] {
+		width: var(--radix-select-trigger-width);
+	}
+	display: flex;
+	overflow-y: auto;
+
+	&__title {
+		h3 {
+			margin: 0;
+			font-size: 16px;
+			font-weight: 600;
+		}
+
+		p {
+			margin: 4px 0 0;
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+		}
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		// Horizontal padding is provided by the drawer-footer slot var above.
+		padding: 0;
+		width: 100%;
+
+		&-right {
+			display: flex;
+			gap: 8px;
+			margin-left: auto;
+		}
+	}
+
+	.drawer-section {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+
+		label,
+		.field-label {
+			font-size: 12px;
+			font-weight: 600;
+			color: var(--bg-vanilla-200);
+		}
+
+		.help {
+			margin: 0;
+			font-size: 11px;
+		}
+	}
+
+	.muted {
+		color: var(--bg-vanilla-400);
+	}
+
+	.required {
+		color: var(--bg-cherry-400);
+	}
+
+	.full-width {
+		width: 100%;
+	}
+
+	.drawer-surface {
+		padding: 14px;
+		border-radius: 6px;
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid var(--bg-slate-300);
+
+		&__head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 10px;
+
+			h4 {
+				margin: 0;
+				font-size: 13px;
+				font-weight: 600;
+				text-transform: uppercase;
+				letter-spacing: 0.04em;
+				color: var(--bg-vanilla-300);
+			}
+		}
+	}
+
+	.managed-label {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 11px;
+		color: var(--bg-vanilla-400);
+	}
+
+	.pattern-box {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px;
+		border-radius: 6px;
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid var(--bg-slate-300);
+	}
+
+	.pattern-chips {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		min-height: 28px;
+	}
+
+	.pattern-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+
+		&__remove {
+			background: transparent;
+			border: none;
+			padding: 0;
+			margin-left: 2px;
+			cursor: pointer;
+			color: inherit;
+			display: inline-flex;
+			align-items: center;
+
+			&:hover {
+				color: var(--bg-cherry-400);
+			}
+		}
+	}
+
+	.pattern-add {
+		display: flex;
+		gap: 6px;
+	}
+
+	.help {
+		code {
+			padding: 1px 4px;
+			border-radius: 3px;
+			background: rgba(255, 255, 255, 0.06);
+			font-family: var(--code-font-family, monospace);
+			font-size: 10px;
+		}
+	}
+
+	.source-radio-group {
+		// @signozhq/ui's RadioGroupItem defaults its unchecked border to
+		// --l3-background, which matches the drawer surface and makes the dot
+		// invisible. Override with a contrasting border so users can see the
+		// unchecked state.
+		--radio-group-item-border-color: var(--bg-slate-200);
+
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+
+		// Layout overrides for @signozhq/ui's RadioGroupItem wrapper. The
+		// library injects single-class CSS at runtime (after our bundled
+		// stylesheet loads), so we use a two-class selector to win the
+		// cascade and force the wrapper to lay the dot on the left with the
+		// label text flush beside it.
+		.source-radio {
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: flex-start;
+			gap: 10px;
+			padding: 10px 12px;
+			border-radius: 4px;
+			border: 1px solid transparent;
+			background: rgba(255, 255, 255, 0.02);
+			margin: 0;
+			width: 100%;
+			// Include padding + border in the 100% width so the card fits inside
+			// the SOURCE surface instead of overflowing its right edge.
+			box-sizing: border-box;
+			cursor: pointer;
+			transition:
+				background-color 0.12s ease,
+				border-color 0.12s ease;
+
+			// The radio button itself: keep it fixed-size and aligned with
+			// the title baseline (margin-top compensates for align-items:
+			// flex-start vs the title's line-box).
+			> button[role='radio'] {
+				flex: 0 0 16px;
+				width: 16px;
+				height: 16px;
+				margin-top: 3px;
+			}
+
+			// The library wraps children in a <label>. Make it grow into the
+			// remaining width and reset the .drawer-section label typography
+			// leak (set earlier in this file) so the title/desc divs use
+			// their own styles.
+			> label {
+				flex: 1 1 auto;
+				min-width: 0;
+				display: block;
+				text-align: left;
+				cursor: pointer;
+				font-size: inherit;
+				font-weight: inherit;
+				color: inherit;
+			}
+
+			&__title {
+				font-weight: 600;
+				font-size: 13px;
+				color: var(--bg-vanilla-100);
+			}
+
+			&__desc {
+				margin-top: 2px;
+				font-size: 12px;
+				color: var(--bg-vanilla-400);
+			}
+
+			// Radix RadioGroupItem renders <button data-state="checked|unchecked">.
+			// Use :has() to highlight the wrapper card when its inner button is checked.
+			&.source-radio--auto:has(button[data-state='checked']) {
+				background: rgba(78, 116, 248, 0.1);
+				border-color: rgba(78, 116, 248, 0.3);
+			}
+
+			&.source-radio--override:has(button[data-state='checked']) {
+				background: rgba(245, 175, 25, 0.1);
+				border-color: rgba(245, 175, 25, 0.3);
+			}
+
+			&:hover {
+				background: rgba(255, 255, 255, 0.04);
+			}
+		}
+	}
+
+	.reset-confirm {
+		margin-top: 12px;
+		padding: 12px;
+		border-radius: 4px;
+		background: rgba(78, 116, 248, 0.06);
+		border: 1px solid rgba(78, 116, 248, 0.2);
+
+		p {
+			margin: 0 0 10px;
+			font-size: 12px;
+		}
+
+		&__actions {
+			display: flex;
+			gap: 8px;
+			justify-content: flex-end;
+		}
+	}
+
+	.pricing-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 12px;
+	}
+
+	.pricing-field {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		input {
+			width: 100%;
+		}
+	}
+
+	.cache-mode-field {
+		margin-top: 10px;
+	}
+
+	.extras-divider {
+		margin-top: 14px;
+		margin-bottom: 6px;
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--bg-vanilla-400);
+	}
+
+	.drawer-error {
+		padding: 10px 12px;
+		border-radius: 4px;
+		background: rgba(255, 90, 90, 0.08);
+		color: var(--bg-cherry-400);
+		font-size: 12px;
+	}
+}

frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.tsx

@@ -0,0 +1,176 @@
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Trash2 } from '@signozhq/icons';
+
+import PatternEditor from './PatternEditor';
+import PricingFields from './PricingFields';
+import SourceSelector from './SourceSelector';
+import { PROVIDER_OPTIONS } from './constants';
+import { validateDraft } from './utils';
+import type { DrawerDraft, DrawerMode } from './types';
+import './ModelCostDrawer.styles.scss';
+
+interface ModelCostDrawerProps {
+	isOpen: boolean;
+	mode: DrawerMode;
+	draft: DrawerDraft;
+	setDraft: (next: DrawerDraft) => void;
+	onClose: () => void;
+	onSave: () => void;
+	onDelete: () => void;
+	isSaving: boolean;
+	isDeleting: boolean;
+	saveError: string | null;
+	canManage: boolean;
+}
+
+function ModelCostDrawer({
+	isOpen,
+	mode,
+	draft,
+	setDraft,
+	onClose,
+	onSave,
+	onDelete,
+	isSaving,
+	isDeleting,
+	saveError,
+	canManage,
+}: ModelCostDrawerProps): JSX.Element {
+	// Metadata (model id / provider / patterns / source) is editable by any
+	// manager. Pricing fields are editable only once the user picks "User
+	// override" — auto-populated pricing is managed by SigNoz. Write APIs are
+	// Admin-only, so non-managers can't edit anything.
+	const metadataReadOnly = !canManage;
+	const pricingReadOnly = !canManage || !draft.isOverride;
+
+	const validation = validateDraft(draft, mode);
+	const showValidationTooltip =
+		canManage && !validation.ok && !!validation.message;
+
+	const update = (patch: Partial<DrawerDraft>): void => {
+		setDraft({ ...draft, ...patch });
+	};
+
+	const footer = (
+		<div className="model-cost-drawer__footer">
+			{mode === 'edit' && canManage && (
+				<Button
+					variant="ghost"
+					color="destructive"
+					prefix={<Trash2 size={14} />}
+					onClick={onDelete}
+					loading={isDeleting}
+					testId="drawer-delete-btn"
+				>
+					Delete
+				</Button>
+			)}
+			<div className="model-cost-drawer__footer-right">
+				<Button
+					variant="outlined"
+					color="secondary"
+					onClick={onClose}
+					testId="drawer-cancel-btn"
+				>
+					{canManage ? 'Cancel' : 'Close'}
+				</Button>
+				{canManage && (
+					<TooltipSimple
+						title={showValidationTooltip ? validation.message : ''}
+						withPortal={false}
+					>
+						{/* span wrapper so the tooltip fires even when the button is disabled */}
+						<span className="model-cost-drawer__save-wrap">
+							<Button
+								variant="solid"
+								color="primary"
+								onClick={onSave}
+								loading={isSaving}
+								disabled={!validation.ok}
+								testId="drawer-save-btn"
+							>
+								Save
+							</Button>
+						</span>
+					</TooltipSimple>
+				)}
+			</div>
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			width="base"
+			className="model-cost-drawer"
+			footer={footer}
+			title={mode === 'edit' ? 'Edit model cost' : 'Add model cost'}
+			subTitle="Pricing computes gen_ai.estimated_total_cost at ingest."
+			drawerHeaderProps={{ className: 'model-cost-drawer__title' }}
+		>
+			<div className="drawer-section">
+				<label htmlFor="billing-model-id">Billing model ID</label>
+				<Input
+					id="billing-model-id"
+					placeholder="e.g. openai:gpt-4o"
+					value={draft.modelName}
+					disabled={mode === 'edit' || metadataReadOnly}
+					onChange={(e): void => update({ modelName: e.target.value })}
+					testId="drawer-model-id-input"
+				/>
+			</div>
+
+			<div className="drawer-section">
+				<label htmlFor="provider-select">Provider</label>
+				<SelectSimple
+					id="provider-select"
+					value={draft.provider}
+					onChange={(value): void => update({ provider: value as string })}
+					items={PROVIDER_OPTIONS}
+					disabled={mode === 'edit' || metadataReadOnly}
+					className="full-width"
+					withPortal={false}
+					testId="drawer-provider-select"
+				/>
+			</div>
+
+			<PatternEditor
+				patterns={draft.patterns}
+				isReadOnly={metadataReadOnly}
+				onChange={(patterns): void => update({ patterns })}
+			/>
+
+			<SourceSelector
+				isOverride={draft.isOverride}
+				isReadOnly={metadataReadOnly}
+				onChange={(isOverride): void => update({ isOverride })}
+			/>
+
+			<PricingFields
+				pricing={draft.pricing}
+				isReadOnly={pricingReadOnly}
+				onChange={(patch): void =>
+					setDraft({ ...draft, pricing: { ...draft.pricing, ...patch } })
+				}
+			/>
+
+			{saveError && (
+				<div className="drawer-error" role="alert">
+					{saveError}
+				</div>
+			)}
+		</DrawerWrapper>
+	);
+}
+
+export default ModelCostDrawer;

frontend/src/container/LLMObservabilityModelPricing/ModelCostsTable.tsx

@@ -0,0 +1,179 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@signozhq/ui/table';
+import { ChevronDown } from '@signozhq/icons';
+import cx from 'classnames';
+import { startCase } from 'lodash-es';
+
+import type { PricingRule } from './types';
+import {
+	formatPricePerMillion,
+	getCanonicalId,
+	getExtraBuckets,
+	getRelativeLastSeen,
+	getSourceLabel,
+} from './utils';
+
+const COLUMN_COUNT = 8;
+
+interface ModelCostsTableProps {
+	rules: PricingRule[];
+	isLoading: boolean;
+	selectedRuleId: string | null;
+	canManage: boolean;
+	onEdit: (rule: PricingRule) => void;
+}
+
+interface RowProps {
+	rule: PricingRule;
+	isSelected: boolean;
+	canManage: boolean;
+	onEdit: (rule: PricingRule) => void;
+}
+
+function ModelCostRow({
+	rule,
+	isSelected,
+	canManage,
+	onEdit,
+}: RowProps): JSX.Element {
+	const buckets = getExtraBuckets(rule);
+
+	return (
+		<TableRow
+			className={cx({ 'model-costs-table__row--selected': isSelected })}
+			data-testid={`model-cost-row-${rule.id}`}
+		>
+			<TableCell>
+				<div className="model-cell">
+					<div
+						className="model-cell__name"
+						data-testid={`model-cell-name-${rule.id}`}
+					>
+						{rule.modelName}
+					</div>
+					<div
+						className="model-cell__canonical-id"
+						data-testid={`model-cell-canonical-id-${rule.id}`}
+					>
+						{getCanonicalId(rule)}
+					</div>
+				</div>
+			</TableCell>
+			<TableCell>{rule.provider}</TableCell>
+			<TableCell>
+				<span className="price-cell" data-testid={`price-cell-input-${rule.id}`}>
+					{formatPricePerMillion(rule.pricing?.input)}
+				</span>
+			</TableCell>
+			<TableCell>
+				<span className="price-cell" data-testid={`price-cell-output-${rule.id}`}>
+					{formatPricePerMillion(rule.pricing?.output)}
+				</span>
+			</TableCell>
+			<TableCell>
+				{buckets.length === 0 ? (
+					<span className="muted">—</span>
+				) : (
+					<div className="extra-buckets">
+						{buckets.map((bucket) => (
+							<Badge
+								key={bucket.key}
+								color="vanilla"
+								variant="outline"
+								className="extra-buckets__chip"
+							>
+								<span className="extra-buckets__key">{startCase(bucket.key)}</span>
+								<span className="extra-buckets__price">
+									{formatPricePerMillion(bucket.pricePerMillion)}
+								</span>
+							</Badge>
+						))}
+					</div>
+				)}
+			</TableCell>
+			<TableCell>
+				<Badge
+					color={rule.isOverride ? 'amber' : 'robin'}
+					variant="outline"
+					className="source-badge"
+					data-testid={`source-badge-${rule.id}`}
+				>
+					{getSourceLabel(rule)}
+				</Badge>
+			</TableCell>
+			<TableCell>{getRelativeLastSeen(rule)}</TableCell>
+			<TableCell>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					suffix={<ChevronDown size={14} />}
+					testId={`edit-rule-${rule.id}`}
+					onClick={(): void => onEdit(rule)}
+				>
+					{canManage ? 'Edit' : 'View'}
+				</Button>
+			</TableCell>
+		</TableRow>
+	);
+}
+
+function ModelCostsTable({
+	rules,
+	isLoading,
+	selectedRuleId,
+	canManage,
+	onEdit,
+}: ModelCostsTableProps): JSX.Element {
+	return (
+		<Table className="model-costs-table" testId="model-costs-table">
+			<TableHeader>
+				<TableRow>
+					<TableHead>Model</TableHead>
+					<TableHead>Provider</TableHead>
+					<TableHead>Input / 1M</TableHead>
+					<TableHead>Output / 1M</TableHead>
+					<TableHead>Extra buckets</TableHead>
+					<TableHead>Source</TableHead>
+					<TableHead>Last seen</TableHead>
+					<TableHead aria-label="Actions" />
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{isLoading && rules.length === 0 && (
+					<TableRow>
+						<TableCell colSpan={COLUMN_COUNT} className="model-costs-table__empty">
+							Loading pricing rules…
+						</TableCell>
+					</TableRow>
+				)}
+				{!isLoading && rules.length === 0 && (
+					<TableRow>
+						<TableCell colSpan={COLUMN_COUNT} className="model-costs-table__empty">
+							No model costs yet.
+						</TableCell>
+					</TableRow>
+				)}
+				{rules.map((rule) => (
+					<ModelCostRow
+						key={rule.id}
+						rule={rule}
+						isSelected={rule.id === selectedRuleId}
+						canManage={canManage}
+						onEdit={onEdit}
+					/>
+				))}
+			</TableBody>
+		</Table>
+	);
+}
+
+export default ModelCostsTable;

frontend/src/container/LLMObservabilityModelPricing/PatternEditor.tsx

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

frontend/src/container/LLMObservabilityModelPricing/PricingFields.tsx

@@ -0,0 +1,137 @@
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Lock } from '@signozhq/icons';
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { CACHE_MODE_OPTIONS } from './constants';
+import type { DrawerDraft } from './types';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface PricingFieldsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+// Parses a number input's raw string. Empty → null (used by optional buckets),
+// otherwise a finite number (NaN coerced to 0).
+function parseAmount(raw: string): number | null {
+	if (raw.trim() === '') {
+		return null;
+	}
+	const value = Number(raw);
+	return Number.isFinite(value) ? value : 0;
+}
+
+function PricingFields({
+	pricing,
+	isReadOnly,
+	onChange,
+}: PricingFieldsProps): JSX.Element {
+	const hasCacheBucket =
+		pricing.cacheRead !== null || pricing.cacheWrite !== null;
+
+	return (
+		<div className="drawer-section drawer-surface">
+			<div className="drawer-surface__head">
+				<h4>Pricing (per 1M tokens, USD)</h4>
+				{isReadOnly && (
+					<span className="managed-label" data-testid="drawer-readonly-label">
+						<Lock size={12} />
+						Read-only
+					</span>
+				)}
+			</div>
+			<div className="pricing-grid">
+				<div className="pricing-field">
+					<label htmlFor="input-cost">
+						Input cost <span className="required">*</span>
+					</label>
+					<Input
+						id="input-cost"
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing.input}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ input: parseAmount(e.target.value) ?? 0 })
+						}
+						testId="drawer-input-cost"
+					/>
+				</div>
+				<div className="pricing-field">
+					<label htmlFor="output-cost">
+						Output cost <span className="required">*</span>
+					</label>
+					<Input
+						id="output-cost"
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing.output}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ output: parseAmount(e.target.value) ?? 0 })
+						}
+						testId="drawer-output-cost"
+					/>
+				</div>
+			</div>
+
+			<div className="extras-divider">Extra pricing buckets</div>
+			<div className="pricing-grid">
+				<div className="pricing-field">
+					<label htmlFor="cache-read">cache_read</label>
+					<Input
+						id="cache-read"
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing.cacheRead ?? ''}
+						placeholder="—"
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ cacheRead: parseAmount(e.target.value) })
+						}
+						testId="drawer-cache-read-cost"
+					/>
+				</div>
+				<div className="pricing-field">
+					<label htmlFor="cache-write">cache_write</label>
+					<Input
+						id="cache-write"
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing.cacheWrite ?? ''}
+						placeholder="—"
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ cacheWrite: parseAmount(e.target.value) })
+						}
+						testId="drawer-cache-write-cost"
+					/>
+				</div>
+			</div>
+			{hasCacheBucket && (
+				<div className="pricing-field cache-mode-field">
+					<label htmlFor="cache-mode">Cache mode</label>
+					<SelectSimple
+						id="cache-mode"
+						value={pricing.cacheMode}
+						items={CACHE_MODE_OPTIONS}
+						onChange={(v): void => onChange({ cacheMode: v as CacheModeDTO })}
+						disabled={isReadOnly}
+						className="full-width"
+						withPortal={false}
+						testId="drawer-cache-mode"
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default PricingFields;

frontend/src/container/LLMObservabilityModelPricing/SourceSelector.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Lock } from '@signozhq/icons';
+
+interface SourceSelectorProps {
+	isOverride: boolean;
+	isReadOnly: boolean;
+	onChange: (isOverride: boolean) => void;
+}
+
+// Auto-populated vs user-override selector, with a confirm step before
+// discarding custom values back to defaults.
+function SourceSelector({
+	isOverride,
+	isReadOnly,
+	onChange,
+}: SourceSelectorProps): JSX.Element {
+	const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
+
+	const handleSourceChange = (value: 'auto' | 'override'): void => {
+		if (value === 'auto' && isOverride) {
+			setShowResetConfirm(true);
+			return;
+		}
+		if (value === 'override' && !isOverride) {
+			onChange(true);
+		}
+	};
+
+	const confirmReset = (): void => {
+		onChange(false);
+		setShowResetConfirm(false);
+	};
+
+	return (
+		<div className="drawer-section drawer-surface">
+			<div className="drawer-surface__head">
+				<h4>Source</h4>
+				{isReadOnly && (
+					<span className="managed-label" data-testid="drawer-managed-label">
+						<Lock size={12} />
+						Managed by SigNoz
+					</span>
+				)}
+			</div>
+			<RadioGroup
+				value={isOverride ? 'override' : 'auto'}
+				onChange={(value): void => handleSourceChange(value as 'auto' | 'override')}
+				className="source-radio-group"
+			>
+				<RadioGroupItem
+					value="auto"
+					containerClassName="source-radio source-radio--auto"
+					testId="drawer-source-auto"
+				>
+					<div className="source-radio__title">Auto-populated</div>
+					<div className="source-radio__desc">Default pricing from SigNoz.</div>
+				</RadioGroupItem>
+				<RadioGroupItem
+					value="override"
+					containerClassName="source-radio source-radio--override"
+					testId="drawer-source-override"
+				>
+					<div className="source-radio__title">User override</div>
+					<div className="source-radio__desc">Custom pricing. Takes precedence.</div>
+				</RadioGroupItem>
+			</RadioGroup>
+			{showResetConfirm && (
+				<div
+					className="reset-confirm"
+					role="dialog"
+					aria-label="Reset to default pricing"
+				>
+					<p>
+						Reset to default pricing? Custom values will be discarded. it might take
+						24 hours for changes to take effect.
+					</p>
+					<div className="reset-confirm__actions">
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={(): void => setShowResetConfirm(false)}
+							testId="drawer-reset-keep-btn"
+						>
+							Keep
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={confirmReset}
+							testId="drawer-reset-confirm-btn"
+						>
+							Reset
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default SourceSelector;

frontend/src/container/LLMObservabilityModelPricing/__tests__/LLMObservabilityModelPricing.test.tsx

@@ -0,0 +1,149 @@
+import {
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+	type LlmpricingruletypesLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { rest, server } from 'mocks-server/server';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import LLMObservabilityModelPricing from '../LLMObservabilityModelPricing';
+
+const ENDPOINT = '*/api/v1/llm_pricing_rules';
+
+const mockRules: LlmpricingruletypesLLMPricingRuleDTO[] = [
+	{
+		id: 'rule-gpt4o',
+		orgId: 'org-1',
+		modelName: 'gpt-4o',
+		provider: 'OpenAI',
+		modelPattern: ['gpt-4o'],
+		isOverride: false,
+		enabled: true,
+		unit: UnitDTO.per_million_tokens,
+		pricing: { input: 15, output: 60 },
+	},
+	{
+		id: 'rule-llama',
+		orgId: 'org-1',
+		modelName: 'llama-3.1-70b',
+		provider: 'Self-hosted',
+		modelPattern: ['llama-3.1'],
+		isOverride: true,
+		enabled: true,
+		unit: UnitDTO.per_million_tokens,
+		pricing: { input: 0, output: 0 },
+	},
+];
+
+describe('LLMObservabilityModelPricing', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(ENDPOINT, (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							items: mockRules,
+							limit: 100,
+							offset: 0,
+							total: mockRules.length,
+						},
+					}),
+				),
+			),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders the page header and both rules', async () => {
+		render(<LLMObservabilityModelPricing />);
+
+		await screen.findByText('gpt-4o');
+		expect(screen.getByText('Configuration')).toBeInTheDocument();
+		expect(screen.getByText('llama-3.1-70b')).toBeInTheDocument();
+		expect(screen.getByText('openai:gpt-4o')).toBeInTheDocument();
+	});
+
+	it('filters rules by the search input', async () => {
+		render(<LLMObservabilityModelPricing />);
+
+		await screen.findByText('gpt-4o');
+
+		fireEvent.change(screen.getByTestId('search-input'), {
+			target: { value: 'llama' },
+		});
+
+		expect(screen.queryByText('gpt-4o')).not.toBeInTheDocument();
+		expect(screen.getByText('llama-3.1-70b')).toBeInTheDocument();
+	});
+
+	it('opens the drawer in Add mode when the Add button is clicked', async () => {
+		render(<LLMObservabilityModelPricing />);
+
+		await screen.findByText('gpt-4o');
+		fireEvent.click(screen.getByTestId('add-model-cost-btn'));
+
+		const input = (await screen.findByTestId(
+			'drawer-model-id-input',
+		)) as HTMLInputElement;
+		expect(input).toBeInTheDocument();
+		expect(input.value).toBe('');
+	});
+
+	it('opens the drawer in Edit mode with prefilled values when a row Edit is clicked', async () => {
+		render(<LLMObservabilityModelPricing />);
+
+		await screen.findByText('gpt-4o');
+		fireEvent.click(screen.getByTestId('edit-rule-rule-gpt4o'));
+
+		const input = (await screen.findByTestId(
+			'drawer-model-id-input',
+		)) as HTMLInputElement;
+		expect(input).toBeInTheDocument();
+		expect(input.value).toBe('gpt-4o');
+	});
+
+	it('hides the Add button for non-admin users (write APIs are Admin-only)', async () => {
+		render(<LLMObservabilityModelPricing />, {}, { role: 'VIEWER' });
+
+		await screen.findByText('gpt-4o');
+		expect(screen.queryByTestId('add-model-cost-btn')).not.toBeInTheDocument();
+		// rows still open in read-only "View" mode
+		expect(screen.getByTestId('edit-rule-rule-gpt4o')).toHaveTextContent('View');
+	});
+
+	it('paginates server-side: selecting page 2 requests the next offset', async () => {
+		const requestedOffsets: number[] = [];
+		server.use(
+			rest.get(ENDPOINT, (req, res, ctx) => {
+				const offset = Number(req.url.searchParams.get('offset') ?? '0');
+				requestedOffsets.push(offset);
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							items: [
+								{ ...mockRules[0], id: `rule-${offset}`, modelName: `model-${offset}` },
+							],
+							limit: 20,
+							offset,
+							total: 25,
+						},
+					}),
+				);
+			}),
+		);
+
+		render(<LLMObservabilityModelPricing />);
+
+		await screen.findByText('model-0');
+		fireEvent.click(screen.getByRole('button', { name: '2' }));
+
+		await screen.findByText('model-20');
+		expect(requestedOffsets).toContain(20);
+	});
+});

frontend/src/container/LLMObservabilityModelPricing/__tests__/ModelCostDrawer.test.tsx

@@ -0,0 +1,220 @@
+import { useState } from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import { EMPTY_DRAFT } from '../constants';
+import type { DrawerDraft } from '../types';
+import ModelCostDrawer from '../ModelCostDrawer';
+
+interface HarnessProps {
+	initialDraft?: DrawerDraft;
+	mode?: 'add' | 'edit';
+	canManage?: boolean;
+	onSave?: () => void;
+	onDelete?: () => void;
+}
+
+function Harness({
+	initialDraft = {
+		...EMPTY_DRAFT,
+		modelName: 'gpt-4o',
+		pricing: { ...EMPTY_DRAFT.pricing, input: 1, output: 1 },
+	},
+	mode = 'add',
+	canManage = true,
+	onSave = jest.fn(),
+	onDelete = jest.fn(),
+}: HarnessProps): JSX.Element {
+	const [draft, setDraft] = useState<DrawerDraft>(initialDraft);
+	return (
+		<ModelCostDrawer
+			isOpen
+			mode={mode}
+			draft={draft}
+			setDraft={setDraft}
+			onClose={jest.fn()}
+			onSave={onSave}
+			onDelete={onDelete}
+			isSaving={false}
+			isDeleting={false}
+			saveError={null}
+			canManage={canManage}
+		/>
+	);
+}
+
+describe('ModelCostDrawer', () => {
+	it('adds a pattern chip when the user types and presses Enter', () => {
+		render(<Harness />);
+
+		fireEvent.change(screen.getByTestId('drawer-pattern-input'), {
+			target: { value: 'gpt-4o-mini' },
+		});
+		fireEvent.keyDown(screen.getByTestId('drawer-pattern-input'), {
+			key: 'Enter',
+			code: 'Enter',
+		});
+
+		expect(screen.getByText('gpt-4o-mini*')).toBeInTheDocument();
+	});
+
+	it('disables pricing fields when isOverride is false', () => {
+		render(
+			<Harness
+				mode="edit"
+				initialDraft={{
+					...EMPTY_DRAFT,
+					id: 'rule-1',
+					modelName: 'gpt-4o',
+					provider: 'OpenAI',
+					isOverride: false,
+				}}
+			/>,
+		);
+
+		expect(screen.getByTestId('drawer-input-cost')).toBeDisabled();
+		expect(screen.getByTestId('drawer-output-cost')).toBeDisabled();
+	});
+
+	it('enables pricing fields when isOverride is true', () => {
+		render(
+			<Harness
+				mode="edit"
+				initialDraft={{
+					...EMPTY_DRAFT,
+					id: 'rule-1',
+					modelName: 'gpt-4o',
+					provider: 'OpenAI',
+					isOverride: true,
+				}}
+			/>,
+		);
+
+		expect(screen.getByTestId('drawer-input-cost')).not.toBeDisabled();
+		expect(screen.getByTestId('drawer-output-cost')).not.toBeDisabled();
+	});
+
+	it('disables the Provider select in Edit mode but allows it in Add mode', () => {
+		const { unmount } = render(<Harness mode="add" />);
+
+		expect(screen.getByTestId('drawer-provider-select')).not.toHaveAttribute(
+			'data-disabled',
+		);
+		unmount();
+
+		render(
+			<Harness
+				mode="edit"
+				initialDraft={{
+					...EMPTY_DRAFT,
+					id: 'rule-1',
+					modelName: 'gpt-4o',
+					provider: 'OpenAI',
+					isOverride: true,
+				}}
+			/>,
+		);
+
+		expect(screen.getByTestId('drawer-provider-select')).toHaveAttribute(
+			'data-disabled',
+		);
+	});
+
+	it('keeps metadata editable but locks pricing when source is auto-populated', () => {
+		render(
+			<Harness
+				mode="add"
+				initialDraft={{ ...EMPTY_DRAFT, modelName: 'gpt-4o', isOverride: false }}
+			/>,
+		);
+
+		// Metadata stays editable while the rule is auto-populated…
+		expect(screen.getByTestId('drawer-model-id-input')).not.toBeDisabled();
+		// …but pricing is read-only until "User override" is chosen.
+		expect(screen.getByTestId('drawer-input-cost')).toBeDisabled();
+	});
+
+	it('shows a reset confirmation when switching from Override to Auto', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(
+			<Harness
+				initialDraft={{
+					...EMPTY_DRAFT,
+					modelName: 'gpt-4o',
+					isOverride: true,
+				}}
+			/>,
+		);
+
+		await user.click(screen.getByTestId('drawer-source-auto'));
+
+		expect(screen.getByTestId('drawer-reset-confirm-btn')).toBeInTheDocument();
+		expect(screen.getByTestId('drawer-reset-keep-btn')).toBeInTheDocument();
+	});
+
+	it('hides the Delete action in Add mode', () => {
+		render(<Harness mode="add" />);
+		expect(screen.queryByTestId('drawer-delete-btn')).not.toBeInTheDocument();
+	});
+
+	it('shows the Delete action in Edit mode', () => {
+		render(
+			<Harness
+				mode="edit"
+				initialDraft={{
+					...EMPTY_DRAFT,
+					id: 'rule-1',
+					modelName: 'gpt-4o',
+					isOverride: true,
+				}}
+			/>,
+		);
+		expect(screen.getByTestId('drawer-delete-btn')).toBeInTheDocument();
+	});
+
+	it('disables the provider select in Edit mode', () => {
+		render(
+			<Harness
+				mode="edit"
+				initialDraft={{
+					...EMPTY_DRAFT,
+					id: 'rule-1',
+					modelName: 'gpt-4o',
+					provider: 'OpenAI',
+					isOverride: true,
+				}}
+			/>,
+		);
+
+		const providerNode = screen.getByTestId('drawer-provider-select');
+		expect(providerNode.className).toMatch(/ant-select-disabled/);
+	});
+
+	it('calls onSave when the Save button is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onSave = jest.fn();
+		render(<Harness onSave={onSave} />);
+
+		await user.click(screen.getByTestId('drawer-save-btn'));
+		expect(onSave).toHaveBeenCalledTimes(1);
+	});
+
+	it('is read-only when the user cannot manage pricing (hides Save/Delete)', () => {
+		render(
+			<Harness
+				mode="edit"
+				canManage={false}
+				initialDraft={{
+					...EMPTY_DRAFT,
+					id: 'rule-1',
+					modelName: 'gpt-4o',
+					isOverride: true,
+				}}
+			/>,
+		);
+
+		expect(screen.queryByTestId('drawer-save-btn')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('drawer-delete-btn')).not.toBeInTheDocument();
+		expect(screen.getByTestId('drawer-model-id-input')).toBeDisabled();
+	});
+});

frontend/src/container/LLMObservabilityModelPricing/__tests__/drawerUtils.test.ts

@@ -0,0 +1,149 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { EMPTY_DRAFT } from '../constants';
+import type { DrawerDraft, PricingRule } from '../types';
+import {
+	buildPricingPayload,
+	buildRulePayload,
+	draftFromRule,
+	validateDraft,
+} from '../utils';
+
+const makeRule = (overrides: Partial<PricingRule> = {}): PricingRule => ({
+	id: 'rule-1',
+	orgId: 'org-1',
+	modelName: 'gpt-4o',
+	provider: 'OpenAI',
+	modelPattern: ['gpt-4o'],
+	isOverride: false,
+	enabled: true,
+	unit: UnitDTO.per_million_tokens,
+	pricing: { input: 15, output: 60 },
+	...overrides,
+});
+
+describe('drawer draft utils', () => {
+	describe('draftFromRule', () => {
+		it('maps a rule to a draft with cache values when present', () => {
+			const rule = makeRule({
+				pricing: {
+					input: 3,
+					output: 15,
+					cache: {
+						mode: CacheModeDTO.additive,
+						read: 0.3,
+						write: 3.75,
+					},
+				},
+			});
+			const draft = draftFromRule(rule);
+			expect(draft.modelName).toBe('gpt-4o');
+			expect(draft.pricing.input).toBe(3);
+			expect(draft.pricing.cacheRead).toBe(0.3);
+			expect(draft.pricing.cacheWrite).toBe(3.75);
+			expect(draft.pricing.cacheMode).toBe(CacheModeDTO.additive);
+		});
+
+		it('falls back to defaults when cache is missing', () => {
+			const draft = draftFromRule(makeRule());
+			expect(draft.pricing.cacheRead).toBeNull();
+			expect(draft.pricing.cacheWrite).toBeNull();
+			expect(draft.pricing.cacheMode).toBe(CacheModeDTO.unknown);
+		});
+	});
+
+	describe('buildPricingPayload', () => {
+		it('omits the cache block when no cache values are set', () => {
+			const payload = buildPricingPayload(EMPTY_DRAFT);
+			expect(payload.cache).toBeUndefined();
+		});
+
+		it('includes only the cache values that are > 0', () => {
+			const draft: DrawerDraft = {
+				...EMPTY_DRAFT,
+				pricing: {
+					...EMPTY_DRAFT.pricing,
+					cacheRead: 1.5,
+					cacheWrite: 0,
+					cacheMode: CacheModeDTO.subtract,
+				},
+			};
+			const payload = buildPricingPayload(draft);
+			expect(payload.cache?.read).toBe(1.5);
+			expect(payload.cache?.write).toBeUndefined();
+			expect(payload.cache?.mode).toBe(CacheModeDTO.subtract);
+		});
+	});
+
+	describe('buildRulePayload', () => {
+		it('uses the modelName as a default pattern when no patterns are supplied', () => {
+			const draft: DrawerDraft = {
+				...EMPTY_DRAFT,
+				modelName: 'gpt-4o',
+				patterns: [],
+				provider: 'OpenAI',
+			};
+			const payload = buildRulePayload(draft);
+			expect(payload.modelPattern).toStrictEqual(['gpt-4o']);
+			expect(payload.unit).toBe(UnitDTO.per_million_tokens);
+			expect(payload.enabled).toBe(true);
+		});
+
+		it('omits id and sourceId for an Add draft', () => {
+			const payload = buildRulePayload(EMPTY_DRAFT);
+			expect(payload.id).toBeUndefined();
+			expect(payload.sourceId).toBeUndefined();
+		});
+	});
+
+	describe('validateDraft', () => {
+		it('requires a model name in Add mode', () => {
+			const result = validateDraft(EMPTY_DRAFT, 'add');
+			expect(result.ok).toBe(false);
+			expect(result.message).toMatch(/billing model id/i);
+		});
+
+		it('rejects negative pricing', () => {
+			const draft: DrawerDraft = {
+				...EMPTY_DRAFT,
+				modelName: 'gpt-4o',
+				pricing: { ...EMPTY_DRAFT.pricing, input: -1 },
+			};
+			expect(validateDraft(draft, 'add').ok).toBe(false);
+		});
+
+		it('accepts a valid Add draft', () => {
+			const draft: DrawerDraft = {
+				...EMPTY_DRAFT,
+				modelName: 'gpt-4o',
+				pricing: { ...EMPTY_DRAFT.pricing, input: 1, output: 2 },
+			};
+			expect(validateDraft(draft, 'add').ok).toBe(true);
+		});
+
+		it('rejects zero input/output cost for overrides', () => {
+			const draft: DrawerDraft = {
+				...EMPTY_DRAFT,
+				modelName: 'gpt-4o',
+				isOverride: true,
+				pricing: { ...EMPTY_DRAFT.pricing, input: 0, output: 5 },
+			};
+			const result = validateDraft(draft, 'add');
+			expect(result.ok).toBe(false);
+			expect(result.message).toMatch(/input cost must be greater than 0/i);
+		});
+
+		it('skips pricing validation for auto-populated (non-override) rules', () => {
+			const draft: DrawerDraft = {
+				...EMPTY_DRAFT,
+				modelName: 'gpt-4o',
+				isOverride: false,
+				pricing: { ...EMPTY_DRAFT.pricing, input: 0, output: 0 },
+			};
+			expect(validateDraft(draft, 'edit').ok).toBe(true);
+		});
+	});
+});

frontend/src/container/LLMObservabilityModelPricing/__tests__/utils.test.ts

@@ -0,0 +1,119 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import type { PricingRule } from '../types';
+import {
+	filterRules,
+	formatPricePerMillion,
+	getCanonicalId,
+	getExtraBuckets,
+	getRelativeLastSeen,
+	getSourceLabel,
+} from '../utils';
+
+const makeRule = (overrides: Partial<PricingRule> = {}): PricingRule => ({
+	id: 'rule-1',
+	orgId: 'org-1',
+	modelName: 'gpt-4o',
+	provider: 'OpenAI',
+	modelPattern: ['gpt-4o'],
+	isOverride: false,
+	enabled: true,
+	unit: UnitDTO.per_million_tokens,
+	pricing: { input: 15, output: 60 },
+	...overrides,
+});
+
+describe('utils', () => {
+	describe('formatPricePerMillion', () => {
+		it('formats numbers with 2 decimals and dollar prefix', () => {
+			expect(formatPricePerMillion(15)).toBe('$15.00');
+			expect(formatPricePerMillion(0.15)).toBe('$0.15');
+		});
+
+		it('returns em-dash for nullish or NaN', () => {
+			expect(formatPricePerMillion(undefined)).toBe('—');
+			expect(formatPricePerMillion(Number.NaN)).toBe('—');
+		});
+	});
+
+	describe('getExtraBuckets', () => {
+		it('returns an empty array when there is no cache pricing', () => {
+			expect(getExtraBuckets(makeRule())).toStrictEqual([]);
+		});
+
+		it('returns only buckets with values > 0', () => {
+			const rule = makeRule({
+				pricing: {
+					input: 3,
+					output: 15,
+					cache: {
+						mode: CacheModeDTO.additive,
+						read: 0.3,
+						write: 0,
+					},
+				},
+			});
+			const buckets = getExtraBuckets(rule);
+			expect(buckets).toStrictEqual([{ key: 'cache_read', pricePerMillion: 0.3 }]);
+		});
+	});
+
+	describe('getSourceLabel', () => {
+		it('returns "Auto" for non-override and "User override" otherwise', () => {
+			expect(getSourceLabel(makeRule({ isOverride: false }))).toBe('Auto');
+			expect(getSourceLabel(makeRule({ isOverride: true }))).toBe('User override');
+		});
+	});
+
+	describe('getCanonicalId', () => {
+		it('lowercases the provider and joins with the model name', () => {
+			expect(getCanonicalId(makeRule({ provider: 'OpenAI' }))).toBe(
+				'openai:gpt-4o',
+			);
+		});
+	});
+
+	describe('getRelativeLastSeen', () => {
+		it('returns em-dash when no timestamp is present', () => {
+			expect(getRelativeLastSeen(makeRule())).toBe('—');
+		});
+
+		it('formats minutes-old timestamps via dayjs fromNow', () => {
+			const recent = new Date(Date.now() - 5 * 60 * 1000).toISOString();
+			expect(getRelativeLastSeen(makeRule({ updatedAt: recent }))).toMatch(
+				/minutes? ago/,
+			);
+		});
+	});
+
+	describe('filterRules', () => {
+		const auto = makeRule({ id: 'r1', modelName: 'gpt-4o', isOverride: false });
+		const override = makeRule({
+			id: 'r2',
+			modelName: 'llama-3',
+			provider: 'Self-hosted',
+			modelPattern: ['llama-3'],
+			isOverride: true,
+		});
+
+		it('returns everything when no filters are applied', () => {
+			expect(filterRules([auto, override], '', 'all')).toHaveLength(2);
+		});
+
+		it('narrows by source = override', () => {
+			expect(filterRules([auto, override], '', 'override')).toStrictEqual([
+				override,
+			]);
+		});
+
+		it('narrows by free-text search across model and provider', () => {
+			expect(filterRules([auto, override], 'self', 'all')).toStrictEqual([
+				override,
+			]);
+			expect(filterRules([auto, override], 'gpt-4', 'all')).toStrictEqual([auto]);
+		});
+	});
+});

frontend/src/container/LLMObservabilityModelPricing/constants.ts

@@ -0,0 +1,34 @@
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DrawerDraft } from './types';
+
+export const PROVIDER_OPTIONS = [
+	{ value: 'OpenAI', label: 'OpenAI' },
+	{ value: 'Anthropic', label: 'Anthropic' },
+	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
+	{ value: 'Google', label: 'Google' },
+	{ value: 'Self-hosted', label: 'Self-hosted' },
+	{ value: 'Other', label: 'Other' },
+];
+
+export const CACHE_MODE_OPTIONS = [
+	{ value: CacheModeDTO.subtract, label: 'Subtract (OpenAI style)' },
+	{ value: CacheModeDTO.additive, label: 'Additive (Anthropic style)' },
+	{ value: CacheModeDTO.unknown, label: 'Unknown' },
+];
+
+export const EMPTY_DRAFT: DrawerDraft = {
+	id: null,
+	sourceId: null,
+	modelName: '',
+	provider: 'OpenAI',
+	patterns: [],
+	isOverride: true,
+	pricing: {
+		input: 0,
+		output: 0,
+		cacheMode: CacheModeDTO.unknown,
+		cacheRead: null,
+		cacheWrite: null,
+	},
+};

frontend/src/container/LLMObservabilityModelPricing/types.ts

@@ -0,0 +1,36 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	type LlmpricingruletypesLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
+
+export type SourceFilter = 'all' | 'auto' | 'override';
+
+export interface ExtraBucket {
+	key: string;
+	pricePerMillion: number;
+}
+
+export type DrawerMode = 'add' | 'edit';
+
+export interface DrawerDraft {
+	id: string | null;
+	sourceId: string | null;
+	modelName: string;
+	provider: string;
+	patterns: string[];
+	isOverride: boolean;
+	pricing: {
+		input: number;
+		output: number;
+		cacheMode: CacheModeDTO;
+		cacheRead: number | null;
+		cacheWrite: number | null;
+	};
+}
+
+export interface ValidationResult {
+	ok: boolean;
+	message?: string;
+}

frontend/src/container/LLMObservabilityModelPricing/useModelCostDrawer.ts

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

frontend/src/container/LLMObservabilityModelPricing/utils.ts

@@ -0,0 +1,175 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+	type LlmpricingruletypesLLMPricingCacheCostsDTO,
+	type LlmpricingruletypesLLMRulePricingDTO,
+	type LlmpricingruletypesUpdatableLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import type {
+	DrawerDraft,
+	DrawerMode,
+	ExtraBucket,
+	PricingRule,
+	SourceFilter,
+	ValidationResult,
+} from './types';
+
+// Idempotent — relativeTime is also extended globally in utils/timeUtils.
+dayjs.extend(relativeTime);
+
+const lc = (value: string): string => value.toLowerCase();
+
+const hasCacheValue = (value: number | null): boolean =>
+	typeof value === 'number' && value > 0;
+
+// ─── Display helpers ─────────────────────────────────────────────────────────
+
+export const formatPricePerMillion = (value: number | undefined): string => {
+	if (value === undefined || value === null || Number.isNaN(value)) {
+		return '—';
+	}
+	return `$${value.toFixed(2)}`;
+};
+
+export const getExtraBuckets = (rule: PricingRule): ExtraBucket[] => {
+	const cache = rule.pricing?.cache;
+	if (!cache) {
+		return [];
+	}
+	const buckets: ExtraBucket[] = [];
+	if (typeof cache.read === 'number' && cache.read > 0) {
+		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
+	}
+	if (typeof cache.write === 'number' && cache.write > 0) {
+		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
+	}
+	return buckets;
+};
+
+export const getSourceLabel = (rule: PricingRule): 'Auto' | 'User override' =>
+	rule.isOverride ? 'User override' : 'Auto';
+
+export const getRelativeLastSeen = (rule: PricingRule): string => {
+	const ts = rule.updatedAt || rule.syncedAt || rule.createdAt;
+	const parsed = ts ? dayjs(ts) : null;
+	return parsed?.isValid() ? parsed.fromNow() : '—';
+};
+
+export const filterRules = (
+	rules: PricingRule[],
+	search: string,
+	source: SourceFilter,
+): PricingRule[] => {
+	const normalized = lc(search.trim());
+	return rules.filter((rule) => {
+		if (source === 'auto' && rule.isOverride) {
+			return false;
+		}
+		if (source === 'override' && !rule.isOverride) {
+			return false;
+		}
+		if (!normalized) {
+			return true;
+		}
+		return (
+			lc(rule.modelName).includes(normalized) ||
+			lc(rule.provider).includes(normalized) ||
+			(rule.modelPattern || []).some((pattern) => lc(pattern).includes(normalized))
+		);
+	});
+};
+
+export const getCanonicalId = (rule: PricingRule): string => {
+	const provider = rule.provider?.trim() || 'unknown';
+	return `${lc(provider)}:${rule.modelName}`;
+};
+
+// ─── Drawer draft <-> API helpers ────────────────────────────────────────────
+
+export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
+	id: rule.id,
+	sourceId: rule.sourceId ?? null,
+	modelName: rule.modelName,
+	provider: rule.provider || 'OpenAI',
+	patterns: rule.modelPattern || [],
+	isOverride: !!rule.isOverride,
+	pricing: {
+		input: rule.pricing?.input ?? 0,
+		output: rule.pricing?.output ?? 0,
+		cacheMode: rule.pricing?.cache?.mode ?? CacheModeDTO.unknown,
+		cacheRead: rule.pricing?.cache?.read ?? null,
+		cacheWrite: rule.pricing?.cache?.write ?? null,
+	},
+});
+
+export const buildPricingPayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesLLMRulePricingDTO => {
+	const pricing: LlmpricingruletypesLLMRulePricingDTO = {
+		input: draft.pricing.input,
+		output: draft.pricing.output,
+	};
+	if (
+		hasCacheValue(draft.pricing.cacheRead) ||
+		hasCacheValue(draft.pricing.cacheWrite)
+	) {
+		const cache: LlmpricingruletypesLLMPricingCacheCostsDTO = {
+			mode: draft.pricing.cacheMode,
+		};
+		if (hasCacheValue(draft.pricing.cacheRead)) {
+			cache.read = draft.pricing.cacheRead as number;
+		}
+		if (hasCacheValue(draft.pricing.cacheWrite)) {
+			cache.write = draft.pricing.cacheWrite as number;
+		}
+		pricing.cache = cache;
+	}
+	return pricing;
+};
+
+export const buildRulePayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesUpdatableLLMPricingRuleDTO => ({
+	id: draft.id || undefined,
+	sourceId: draft.sourceId || undefined,
+	modelName: draft.modelName.trim(),
+	provider: draft.provider.trim(),
+	modelPattern:
+		draft.patterns.length > 0 ? draft.patterns : [draft.modelName.trim()],
+	isOverride: draft.isOverride,
+	enabled: true,
+	unit: UnitDTO.per_million_tokens,
+	pricing: buildPricingPayload(draft),
+});
+
+export const validateDraft = (
+	draft: DrawerDraft,
+	mode: DrawerMode,
+): ValidationResult => {
+	if (mode === 'add' && !draft.modelName.trim()) {
+		return { ok: false, message: 'Billing model ID is required.' };
+	}
+	if (!draft.provider.trim()) {
+		return { ok: false, message: 'Provider is required.' };
+	}
+	// Pricing is only user-entered for overrides; auto-populated rules are
+	// managed by SigNoz (and may legitimately be 0 for self-hosted models).
+	if (draft.isOverride) {
+		if (!(draft.pricing.input > 0)) {
+			return { ok: false, message: 'Input cost must be greater than 0.' };
+		}
+		if (!(draft.pricing.output > 0)) {
+			return { ok: false, message: 'Output cost must be greater than 0.' };
+		}
+		if (
+			(draft.pricing.cacheRead !== null && draft.pricing.cacheRead < 0) ||
+			(draft.pricing.cacheWrite !== null && draft.pricing.cacheWrite < 0)
+		) {
+			return { ok: false, message: 'Cache costs must be non-negative.' };
+		}
+	}
+	return { ok: true };
+};

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -151,11 +151,6 @@ export function PlannedDowntimeForm(
 
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
-			const { startTime, timezone } = values;
-			if (!startTime || !timezone) {
-				// unreachable: required fields should always be present on submitting.
-				return;
-			}
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
 				alertIds:
 					values.alertRuleScope === 'all'
@@ -166,9 +161,9 @@ export function PlannedDowntimeForm(
 				name: values.name,
 				scope: values.scope,
 				schedule: {
-					startTime: startTime.format(),
+					startTime: values.startTime?.format(),
 					endTime: values.endTime?.format(),
-					timezone,
+					timezone: values.timezone!,
 					recurrence: values.recurrence,
 				},
 			};
@@ -205,17 +200,25 @@ export function PlannedDowntimeForm(
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const rec = values.recurrence;
-		const recurrence =
-			rec && rec.repeatType !== recurrenceOptions.doesNotRepeat.value
-				? {
-						duration: `${rec.duration}${durationUnit}`,
-						repeatOn: rec.repeatOn,
-						repeatType: rec.repeatType,
-					}
-				: undefined;
+		const { recurrence } = values;
+		const recurrenceData =
+			!recurrence ||
+			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
+				? undefined
+				: {
+						duration: recurrence.duration
+							? `${recurrence.duration}${durationUnit}`
+							: '',
+						startTime: values.startTime!.format(),
+						endTime: values.endTime?.format(),
+						repeatOn: recurrence.repeatOn,
+						repeatType: recurrence.repeatType,
+					};
 
-		await saveHandler({ ...values, recurrence });
+		await saveHandler({
+			...values,
+			recurrence: recurrenceData,
+		});
 	};
 
 	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
@@ -272,6 +275,9 @@ export function PlannedDowntimeForm(
 
 	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
 		const { schedule } = initialValues;
+		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
+		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
+
 		const initialAlertIds = initialValues.alertIds || [];
 
 		return {
@@ -279,12 +285,8 @@ export function PlannedDowntimeForm(
 			alertRuleScope:
 				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
 			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
-			startTime: schedule?.startTime
-				? dayjs(schedule.startTime).tz(schedule.timezone)
-				: null,
-			endTime: schedule?.endTime
-				? dayjs(schedule.endTime).tz(schedule.timezone)
-				: null,
+			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
+			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
 			recurrence: {
 				...schedule?.recurrence,
 				repeatType: !isScheduleRecurring(schedule)
@@ -295,7 +297,7 @@ export function PlannedDowntimeForm(
 			timezone: schedule?.timezone as string,
 			scope: initialValues.scope || '',
 		};
-	}, [initialValues, isEditMode, alertOptions]);
+	}, [initialValues, alertOptions]);
 
 	useEffect(() => {
 		setSelectedTags(formattedInitialValues.alertRules);
@@ -339,7 +341,7 @@ export function PlannedDowntimeForm(
 		const formattedEndTime = endTime.format(TIME_FORMAT);
 		const formattedEndDate = endTime.format(DATE_FORMAT);
 		return `Scheduled to end maintenance on ${formattedEndDate} at ${formattedEndTime}.`;
-	}, [formData]);
+	}, [formData, recurrenceType]);
 
 	return (
 		<Modal

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -142,6 +142,7 @@ export function CollapseListContent({
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
 }): JSX.Element {
+	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
@@ -192,7 +193,10 @@ export function CollapseListContent({
 				'Timezone',
 				<Typography>{schedule?.timezone || '-'}</Typography>,
 			)}
-			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
+			{renderItems(
+				'Repeats',
+				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
+			)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -6,7 +6,7 @@ import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
 	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesScheduleDTO,
+	AlertmanagertypesRecurrenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
@@ -66,17 +66,14 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	schedule?: AlertmanagertypesScheduleDTO | null,
+	recurrence?: AlertmanagertypesRecurrenceDTO | null,
+	timezone?: string,
 ): string => {
-	if (!schedule) {
-		return 'No';
-	}
-	const { startTime, endTime, timezone, recurrence } = schedule;
 	if (!recurrence) {
 		return 'No';
 	}
 
-	const { duration, repeatOn, repeatType } = recurrence;
+	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
 
 	const formattedStartTime = startTime
 		? formatDateTime(startTime, timezone)
@@ -98,7 +95,7 @@ export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDT
 			timezone: '',
 			endTime: undefined,
 			recurrence: undefined,
-			startTime: '',
+			startTime: undefined,
 		},
 		alertIds: [],
 		createdAt: undefined,

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -11,7 +11,7 @@ export const buildSchedule = (
 	schedule: Partial<AlertmanagertypesScheduleDTO>,
 ): AlertmanagertypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
-	startTime: schedule?.startTime ?? '',
+	startTime: schedule?.startTime,
 	endTime: schedule?.endTime,
 	recurrence: schedule?.recurrence,
 });

frontend/src/container/ResetPassword/ResetPassword.styles.scss

@@ -142,15 +142,6 @@
 		}
 	}
 
-	.reset-password-back-action {
-		margin-top: var(--spacing-12);
-		width: 100%;
-
-		button {
-			width: 100%;
-		}
-	}
-
 	@media (max-width: 768px) {
 		width: 100%;
 		padding: 0 16px;

frontend/src/container/ResetPassword/TokenError.tsx

@@ -1,10 +1,7 @@
-import { ArrowLeft, CircleAlert } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
+import { CircleAlert } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import APIError from 'types/api/error';
 
 import './ResetPassword.styles.scss';
@@ -62,16 +59,6 @@ function TokenError({ error }: TokenErrorProps): JSX.Element {
 					</Typography.Text>
 				</div>
 				{error && <AuthError error={error} />}
-				<div className="reset-password-back-action">
-					<Button
-						variant="solid"
-						data-testid="back-to-login"
-						prefix={<ArrowLeft size={12} />}
-						onClick={(): void => history.push(ROUTES.LOGIN)}
-					>
-						Back to login
-					</Button>
-				</div>
 			</div>
 		</AuthPageContainer>
 	);

frontend/src/container/SideNav/SideNav.styles.scss

@@ -119,10 +119,6 @@
 
 				border-radius: 0px 4px 4px 0px;
 				background: var(--l3-background);
-
-				&.version-container-standalone {
-					border-radius: 4px;
-				}
 			}
 
 			.version {
@@ -1135,9 +1131,17 @@
 
 .settings-dropdown,
 .help-support-dropdown {
-	.user-settings-dropdown-logout-section {
-		color: var(--danger-background);
-		pointer-events: auto;
+	.ant-dropdown-menu-item {
+		min-height: 32px;
+
+		.ant-dropdown-menu-title-content {
+			color: var(--l1-foreground) !important;
+		}
+
+		.user-settings-dropdown-logout-section {
+			color: var(--danger-background);
+			pointer-events: auto;
+		}
 	}
 }
 

frontend/src/container/SideNav/SideNav.tsx

@@ -1010,7 +1010,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 								<img src={signozBrandLogoUrl} alt="SigNoz" />
 							</div>
 
-							{(licenseTag || currentVersion) && (
+							{licenseTag && (
 								<div
 									className={cx(
 										'brand-title-section',
@@ -1021,7 +1021,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 											'version-update-notification',
 									)}
 								>
-									{licenseTag && <span className="license-type"> {licenseTag} </span>}
+									<span className="license-type"> {licenseTag} </span>
 
 									{currentVersion && (
 										<Tooltip
@@ -1043,12 +1043,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 												)
 											}
 										>
-											<div
-												className={cx(
-													'version-container',
-													!licenseTag && 'version-container-standalone',
-												)}
-											>
+											<div className="version-container">
 												<span
 													className={cx('version', changelog && 'version-clickable')}
 													onClick={onClickVersionHandler}

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -206,6 +206,8 @@ export const routesToSkip = [
 	ROUTES.METER,
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.SOMETHING_WENT_WRONG,
+	ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
+	ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/hooks/__tests__/useReducedMotion.test.ts

@@ -1,80 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import useReducedMotion from 'hooks/useReducedMotion';
-
-type ChangeListener = (e: Partial<MediaQueryListEvent>) => void;
-
-function mockMatchMedia(matches: boolean): {
-	setMatches: (next: boolean) => void;
-} {
-	const listeners: ChangeListener[] = [];
-	let currentMatches = matches;
-
-	Object.defineProperty(window, 'matchMedia', {
-		writable: true,
-		value: jest.fn(() => ({
-			get matches() {
-				return currentMatches;
-			},
-			addEventListener: jest.fn((_: string, fn: ChangeListener) => {
-				listeners.push(fn);
-			}),
-			removeEventListener: jest.fn(),
-		})),
-	});
-
-	return {
-		setMatches: (next: boolean): void => {
-			currentMatches = next;
-			listeners.forEach((fn) => fn({ matches: next } as MediaQueryListEvent));
-		},
-	};
-}
-
-describe('useReducedMotion', () => {
-	it('returns false when prefers-reduced-motion is not set', () => {
-		mockMatchMedia(false);
-		const { result } = renderHook(() => useReducedMotion());
-		expect(result.current).toBe(false);
-	});
-
-	it('returns true when prefers-reduced-motion: reduce is active', () => {
-		mockMatchMedia(true);
-		const { result } = renderHook(() => useReducedMotion());
-		expect(result.current).toBe(true);
-	});
-
-	it('updates when system preference changes at runtime', () => {
-		const { setMatches } = mockMatchMedia(false);
-		const { result } = renderHook(() => useReducedMotion());
-		expect(result.current).toBe(false);
-
-		act(() => {
-			setMatches(true);
-		});
-		expect(result.current).toBe(true);
-
-		act(() => {
-			setMatches(false);
-		});
-		expect(result.current).toBe(false);
-	});
-
-	it('removes event listener on unmount', () => {
-		const removeEventListener = jest.fn();
-		Object.defineProperty(window, 'matchMedia', {
-			writable: true,
-			value: jest.fn(() => ({
-				matches: false,
-				addEventListener: jest.fn(),
-				removeEventListener,
-			})),
-		});
-
-		const { unmount } = renderHook(() => useReducedMotion());
-		unmount();
-		expect(removeEventListener).toHaveBeenCalledWith(
-			'change',
-			expect.any(Function),
-		);
-	});
-});

frontend/src/hooks/trace/useGetTraceFlamegraphV3.tsx

@@ -1,42 +0,0 @@
-import { getFlamegraph } from 'api/generated/services/tracedetail';
-import {
-	SpantypesGettableFlamegraphTraceDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useQuery, UseQueryResult } from 'react-query';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-export interface GetTraceFlamegraphV3Props {
-	traceId: string;
-	selectedSpanId?: string;
-	selectFields?: TelemetryFieldKey[];
-	enabled?: boolean;
-}
-
-const useGetTraceFlamegraphV3 = (
-	props: GetTraceFlamegraphV3Props,
-): UseQueryResult<SpantypesGettableFlamegraphTraceDTO, unknown> =>
-	useQuery({
-		queryFn: () =>
-			getFlamegraph(
-				{ traceID: props.traceId },
-				{
-					selectedSpanId: props.selectedSpanId,
-					// v5 TelemetryFieldKey and the generated DTO are runtime-identical; only
-					// the literal-union vs enum nominal types differ
-					selectFields: props.selectFields as TelemetrytypesTelemetryFieldKeyDTO[],
-				},
-			).then((res) => res.data),
-		queryKey: [
-			REACT_QUERY_KEY.GET_TRACE_V3_FLAMEGRAPH,
-			props.traceId,
-			props.selectedSpanId,
-			props.selectFields,
-		],
-		enabled: props.enabled,
-		keepPreviousData: true,
-		refetchOnWindowFocus: false,
-	});
-
-export default useGetTraceFlamegraphV3;

frontend/src/hooks/useReducedMotion.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react';
-
-function useReducedMotion(): boolean {
-	const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(
-		() => window.matchMedia('(prefers-reduced-motion: reduce)').matches,
-	);
-
-	useEffect(() => {
-		const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-		const onChange = (e: MediaQueryListEvent): void => {
-			setPrefersReducedMotion(e.matches);
-		};
-		mediaQuery.addEventListener('change', onChange);
-		return (): void => mediaQuery.removeEventListener('change', onChange);
-	}, []);
-
-	return prefersReducedMotion;
-}
-
-export default useReducedMotion;

frontend/src/hooks/useTimezoneFormatter/useTimezoneFormatter.ts

@@ -22,13 +22,11 @@ interface CacheEntry {
 const CACHE_SIZE_LIMIT = 1000;
 const CACHE_CLEANUP_PERCENTAGE = 0.5; // Remove 50% when limit is reached
 
-export type FormatTimezoneAdjustedTimestamp = (
-	input: TimestampInput,
-	format?: string,
-) => string;
-
 function useTimezoneFormatter({ userTimezone }: { userTimezone: Timezone }): {
-	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp;
+	formatTimezoneAdjustedTimestamp: (
+		input: TimestampInput,
+		format?: string,
+	) => string;
 } {
 	// Initialize cache using useMemo to persist between renders
 	const cache = useMemo(() => new Map<string, CacheEntry>(), []);

frontend/src/pages/AlertList/index.tsx

@@ -8,7 +8,6 @@ import AllAlertRules from 'container/ListAlertRules';
 import { PlannedDowntime } from 'container/PlannedDowntime/PlannedDowntime';
 import RoutingPolicies from 'container/RoutingPolicies';
 import TriggeredAlerts from 'container/TriggeredAlerts';
-import useReducedMotion from 'hooks/useReducedMotion';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
@@ -22,7 +21,6 @@ function AllAlertList(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
 	const { safeNavigate } = useSafeNavigate();
-	const prefersReducedMotion = useReducedMotion();
 
 	const tab = urlQuery.get('tab');
 	const subTab = urlQuery.get('subTab');
@@ -103,7 +101,6 @@ function AllAlertList(): JSX.Element {
 	return (
 		<Tabs
 			destroyInactiveTabPane
-			animated={!prefersReducedMotion}
 			items={items}
 			activeKey={tab || AlertListTabs.ALERT_RULES}
 			onChange={(tab): void => {

frontend/src/pages/DashboardPage/DashboardPage.tsx

@@ -1,53 +0,0 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-import NotFound from 'components/NotFound';
-import Spinner from 'components/Spinner';
-import DashboardContainer from 'container/DashboardContainer';
-import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
-import { ErrorType } from 'types/common';
-
-function DashboardPage(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
-
-	const [onModal, Content] = Modal.useModal();
-
-	const { isLoading, isError, isFetching, error } = useDashboardBootstrap(
-		dashboardId,
-		{ confirm: onModal.confirm },
-	);
-
-	const dashboardTitle = useDashboardStore((s) => s.dashboardData?.data.title);
-
-	useEffect(() => {
-		document.title = dashboardTitle || document.title;
-	}, [dashboardTitle]);
-
-	const errorMessage = isError
-		? (error as AxiosError<{ errorType: string }>)?.response?.data?.errorType
-		: 'Something went wrong';
-
-	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
-		return <NotFound />;
-	}
-
-	if (isError && errorMessage) {
-		return <Typography>{errorMessage}</Typography>;
-	}
-
-	if (isLoading) {
-		return <Spinner tip="Loading.." />;
-	}
-
-	return (
-		<>
-			{Content}
-			<DashboardContainer />
-		</>
-	);
-}
-
-export default DashboardPage;

frontend/src/pages/DashboardPage/index.tsx

@@ -1,15 +1,53 @@
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
-import DashboardPageV2 from 'pages/DashboardPageV2';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import NotFound from 'components/NotFound';
+import Spinner from 'components/Spinner';
+import DashboardContainer from 'container/DashboardContainer';
+import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
+import { ErrorType } from 'types/common';
 
-import DashboardPage from './DashboardPage';
+function DashboardPage(): JSX.Element {
+	const { dashboardId } = useParams<{ dashboardId: string }>();
 
-// Serves the V2 dashboard detail page when the `use_dashboard_v2` flag is active;
-// otherwise the existing V1 page. Lets V2 dark-ship behind the flag without
-// changing route definitions.
-function DashboardPageEntry(): JSX.Element {
-	const isDashboardV2 = useIsDashboardV2();
+	const [onModal, Content] = Modal.useModal();
 
-	return isDashboardV2 ? <DashboardPageV2 /> : <DashboardPage />;
+	const { isLoading, isError, isFetching, error } = useDashboardBootstrap(
+		dashboardId,
+		{ confirm: onModal.confirm },
+	);
+
+	const dashboardTitle = useDashboardStore((s) => s.dashboardData?.data.title);
+
+	useEffect(() => {
+		document.title = dashboardTitle || document.title;
+	}, [dashboardTitle]);
+
+	const errorMessage = isError
+		? (error as AxiosError<{ errorType: string }>)?.response?.data?.errorType
+		: 'Something went wrong';
+
+	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {
+		return <NotFound />;
+	}
+
+	if (isError && errorMessage) {
+		return <Typography>{errorMessage}</Typography>;
+	}
+
+	if (isLoading) {
+		return <Spinner tip="Loading.." />;
+	}
+
+	return (
+		<>
+			{Content}
+			<DashboardContainer />
+		</>
+	);
 }
 
-export default DashboardPageEntry;
+export default DashboardPage;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardActions/DashboardActions.tsx

@@ -28,40 +28,43 @@ import { USER_ROLES } from 'types/roles';
 import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DashboardSettings from '../../DashboardSettings';
 import SettingsDrawer from '../SettingsDrawer';
-import styles from './DashboardActions.module.scss';
-import { useDashboardStore } from '../../store/useDashboardStore';
+import styles from '../DashboardDescription.module.scss';
 
 interface DashboardActionsProps {
-	title: string;
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
+	editDashboard: boolean;
 	isAuthor: boolean;
+	addPanelPermission: boolean;
 	onAddPanel: () => void;
 	onLockToggle: () => void;
 	onOpenRename: () => void;
 }
 
 function DashboardActions({
-	title,
 	dashboard,
 	handle,
 	isDashboardLocked,
+	editDashboard,
 	isAuthor,
+	addPanelPermission,
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
 }: DashboardActionsProps): JSX.Element {
-	const canEdit = useDashboardStore((s) => s.isEditable);
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
+	const id = dashboard.id ?? '';
+	const title = dashboard.spec?.display?.name ?? '';
+
 	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
 		useState<boolean>(false);
 
 	const [state, setCopy] = useCopyToClipboard();
 	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
-	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
+	const deleteDashboardMutation = useDeleteDashboard(id);
 
 	useEffect(() => {
 		if (state.error) {
@@ -100,7 +103,7 @@ function DashboardActions({
 
 	const menuItems = useMemo<MenuItem[]>(() => {
 		const editGroup: MenuItem[] = [];
-		if (canEdit) {
+		if (!isDashboardLocked && editDashboard) {
 			editGroup.push({
 				key: 'rename',
 				label: 'Rename',
@@ -156,6 +159,7 @@ function DashboardActions({
 			);
 	}, [
 		isDashboardLocked,
+		editDashboard,
 		isAuthor,
 		user.role,
 		dashboard.createdBy,
@@ -165,60 +169,58 @@ function DashboardActions({
 		exportJSON,
 		setCopy,
 		dashboardDataJSON,
-		canEdit,
 	]);
 
 	return (
-		<div className={styles.dashboardActionsContainer}>
+		<div className={styles.rightSection}>
 			<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-			<div className={styles.dashboardActionsSecondary}>
-				<DropdownMenuSimple menu={{ items: menuItems }}>
+			<DropdownMenuSimple menu={{ items: menuItems }}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					prefix={<Ellipsis size={14} />}
+					className={styles.icons}
+					testId="options"
+				/>
+			</DropdownMenuSimple>
+			{!isDashboardLocked && editDashboard && (
+				<>
 					<Button
 						variant="solid"
 						color="secondary"
-						size="icon"
-						prefix={<Ellipsis size="md" />}
-						testId="options"
-					/>
-				</DropdownMenuSimple>
-				{canEdit && (
-					<>
-						<Button
-							variant="solid"
-							color="secondary"
-							prefix={<Configure size="md" />}
-							testId="show-drawer"
-							onClick={(): void => setIsSettingsDrawerOpen(true)}
-							size="md"
-						>
-							Configure
-						</Button>
-						<SettingsDrawer
-							drawerTitle="Dashboard Configuration"
-							isOpen={isSettingsDrawerOpen}
-							onClose={(): void => setIsSettingsDrawerOpen(false)}
-						>
-							<DashboardSettings dashboard={dashboard} />
-						</SettingsDrawer>
-					</>
-				)}
-				{!isDashboardLocked && (
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={onAddPanel}
-						prefix={<Plus size="md" />}
-						testId="add-panel-header"
+						prefix={<Configure size="md" />}
+						testId="show-drawer"
+						onClick={(): void => setIsSettingsDrawerOpen(true)}
 						size="md"
 					>
-						New Panel
+						Configure
 					</Button>
-				)}
-			</div>
+					<SettingsDrawer
+						drawerTitle="Dashboard Configuration"
+						isOpen={isSettingsDrawerOpen}
+						onClose={(): void => setIsSettingsDrawerOpen(false)}
+					>
+						<DashboardSettings dashboard={dashboard} />
+					</SettingsDrawer>
+				</>
+			)}
+			{!isDashboardLocked && addPanelPermission && (
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={onAddPanel}
+					prefix={<Plus size="md" />}
+					testId="add-panel-header"
+					size="md"
+				>
+					New Panel
+				</Button>
+			)}
 			<ConfirmDeleteDialog
 				open={isDeleteOpen}
-				title={`Delete dashboard"?`}
-				description={`Are you sure you want to delete this dashboard - "${title}"? This action cannot be undone.`}
+				title={`Delete dashboard "${title}"?`}
+				description="This action cannot be undone."
 				isLoading={deleteDashboardMutation.isLoading}
 				onConfirm={handleConfirmDelete}
 				onClose={(): void => setIsDeleteOpen(false)}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardDescription.module.scss

@@ -0,0 +1,210 @@
+.dashboardDescriptionContainer {
+	box-shadow: none;
+	border: none;
+	background: unset;
+	color: var(--l2-foreground);
+
+	:global(.ant-card-body) {
+		padding: 0px;
+	}
+
+	.dashboardDetails {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 16px 16px 0px 16px;
+		align-items: flex-start;
+
+		.leftSection {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			width: 45%;
+			height: 40px;
+
+			.dashboardImg {
+				height: 16px;
+				width: 16px;
+			}
+
+			.dashboardTitle {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 24px; /* 150% */
+				letter-spacing: -0.08px;
+				max-width: 80%;
+
+				display: -webkit-box;
+				-webkit-line-clamp: 1;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+			}
+
+			.clickableTitle {
+				cursor: pointer;
+			}
+
+			.titleEdit {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				width: 100%;
+				min-width: 0;
+			}
+
+			.titleInput {
+				flex: 1;
+				min-width: 0;
+				max-width: 70%;
+			}
+
+			.titleEditActionButton {
+				--button-height: auto;
+				--button-padding: 4px;
+				flex-shrink: 0;
+			}
+
+			.titleSaveActionButton {
+				--button-border-color: var(--text-forest-700);
+				--button-outlined-foreground: var(--text-forest-700);
+			}
+
+			.publicDashboardIcon {
+				margin-right: 4px;
+			}
+		}
+
+		.rightSection {
+			display: flex;
+			width: 55%;
+			justify-content: flex-end;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 14px;
+			height: 40px;
+
+			.icons {
+				display: flex;
+				align-items: center;
+				width: 32px;
+				height: 34px;
+				padding: 6px;
+				justify-content: center;
+				border-radius: 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 10px; /* 83.333% */
+				letter-spacing: 0.12px;
+			}
+
+			.icons:hover {
+				background-color: unset;
+			}
+		}
+	}
+
+	.dashboardTags {
+		display: flex;
+		gap: 6px;
+		padding: 16px 16px 0px 16px;
+		flex-wrap: wrap;
+
+		.tag {
+			display: flex;
+			padding: 4px 8px;
+			justify-content: center;
+			align-items: center;
+			border-radius: 20px;
+			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+			color: var(--bg-sienna-400);
+			text-align: center;
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+			margin-inline-end: 0px;
+		}
+	}
+
+	.dashboardDescriptionSection {
+		color: var(--l2-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 22px; /* 157.143% */
+		letter-spacing: -0.07px;
+		padding: 20px 16px 0px 16px;
+	}
+}
+
+.dashboardSettings {
+	width: 191px;
+	height: 302px;
+	flex-shrink: 0;
+
+	:global(.ant-popover-inner) {
+		padding: 0px;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		) !important;
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+	}
+
+	.menuContent {
+		display: flex;
+		flex-direction: column;
+
+		section {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+
+			button {
+				display: flex;
+				width: 100%;
+				height: unset;
+				padding: 8px;
+				align-items: center;
+				gap: 12px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				border-top: none;
+			}
+		}
+
+		.section1,
+		.section2 {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		.deleteDashboard button {
+			color: var(--bg-cherry-400) !important;
+		}
+	}
+}
+
+.deleteModal :global(.ant-modal-confirm-body) {
+	align-items: center;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -0,0 +1,32 @@
+import { Badge } from '@signozhq/ui/badge';
+import { isEmpty } from 'lodash-es';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface DashboardMetaProps {
+	tags: string[];
+	description: string;
+}
+
+function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
+	return (
+		<>
+			{tags.length > 0 && (
+				<div className={styles.dashboardTags}>
+					{tags.map((tag) => (
+						<Badge key={tag} className={styles.tag}>
+							{tag}
+						</Badge>
+					))}
+				</div>
+			)}
+			{!isEmpty(description) && (
+				<section className={styles.dashboardDescriptionSection}>
+					{description}
+				</section>
+			)}
+		</>
+	);
+}
+
+export default DashboardMeta;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -0,0 +1,116 @@
+import { KeyboardEvent } from 'react';
+import { Check, Globe, LockKeyhole, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from '../DashboardDescription.module.scss';
+
+interface DashboardTitleProps {
+	title: string;
+	image: string;
+	isPublicDashboard: boolean;
+	isDashboardLocked: boolean;
+	isEditable: boolean;
+	isEditing: boolean;
+	draft: string;
+	onDraftChange: (value: string) => void;
+	onStartEdit: () => void;
+	onCommit: () => void;
+	onCancel: () => void;
+}
+
+function DashboardTitle({
+	title,
+	image,
+	isPublicDashboard,
+	isDashboardLocked,
+	isEditable,
+	isEditing,
+	draft,
+	onDraftChange,
+	onStartEdit,
+	onCommit,
+	onCancel,
+}: DashboardTitleProps): JSX.Element {
+	const canEdit = isEditable && !isDashboardLocked;
+
+	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			onCommit();
+		} else if (event.key === 'Escape') {
+			onCancel();
+		}
+	};
+
+	return (
+		<div className={styles.leftSection}>
+			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
+			{isEditing ? (
+				<div className={styles.titleEdit}>
+					<Input
+						autoFocus
+						value={draft}
+						testId="dashboard-title-input"
+						maxLength={120}
+						className={styles.titleInput}
+						onChange={(e): void => onDraftChange(e.target.value)}
+						onKeyDown={onKeyDown}
+					/>
+					<Button
+						type="button"
+						variant="outlined"
+						size="icon"
+						className={cx(styles.titleEditActionButton, styles.titleSaveActionButton)}
+						aria-label="Save title"
+						testId="dashboard-title-save"
+						onClick={onCommit}
+					>
+						<Check size={14} />
+					</Button>
+					<Button
+						type="button"
+						variant="outlined"
+						color="destructive"
+						size="icon"
+						className={styles.titleEditActionButton}
+						aria-label="Cancel title edit"
+						testId="dashboard-title-cancel"
+						onClick={onCancel}
+					>
+						<X size={14} />
+					</Button>
+				</div>
+			) : (
+				<TooltipSimple title={title.length > 30 ? title : ''}>
+					<Typography.Text
+						className={cx(styles.dashboardTitle, {
+							[styles.clickableTitle]: canEdit,
+						})}
+						data-testid="dashboard-title"
+						onClick={canEdit ? onStartEdit : undefined}
+					>
+						{title}
+					</Typography.Text>
+				</TooltipSimple>
+			)}
+
+			{isPublicDashboard && (
+				<TooltipSimple title="This dashboard is publicly accessible">
+					<Globe size={14} className={styles.publicDashboardIcon} />
+				</TooltipSimple>
+			)}
+
+			{isDashboardLocked && (
+				<TooltipSimple title="This dashboard is locked">
+					<LockKeyhole size={14} />
+				</TooltipSimple>
+			)}
+		</div>
+	);
+}
+
+export default DashboardTitle;

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

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
+import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
 import {
@@ -12,31 +13,34 @@ import type {
 	DashboardtypesJSONPatchOperationDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 import { usePanelTypeSelectionModalStore } from 'providers/Dashboard/helpers/panelTypeSelectionModalHelper';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
-import DashboardInfo from './DashboardInfo/DashboardInfo';
-import { useEditableTitle } from './DashboardInfo/useEditableTitle';
+import DashboardMeta from './DashboardMeta/DashboardMeta';
+import DashboardTitle from './DashboardTitle/DashboardTitle';
+import { useEditableTitle } from './DashboardTitle/useEditableTitle';
 
-import styles from './DashboardPageToolbar.module.scss';
+import styles from './DashboardDescription.module.scss';
 
-interface DashboardPageToolbarProps {
+interface DashboardDescriptionProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	refetch: () => void;
 }
 
-function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
+function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const { dashboard, handle, refetch } = props;
 
 	const id = dashboard.id;
 	const isDashboardLocked = !!dashboard.locked;
 
-	const title = dashboard.spec.display.name;
-	const description = dashboard.spec.display.description ?? '';
+	const title = dashboard.spec?.display?.name ?? '';
+	const description = dashboard.spec?.display?.description ?? '';
 	const image = dashboard.image || Base64Icons[0];
 	const tags = useMemo(
 		() =>
@@ -47,6 +51,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	);
 
 	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
 	const { showErrorModal } = useErrorModal();
 	const setIsPanelTypeSelectionModalOpen = usePanelTypeSelectionModalStore(
 		(s) => s.setIsPanelTypeSelectionModalOpen,
@@ -54,6 +59,9 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
+	const addPanelPermission = !isDashboardLocked;
+	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
+	const isPublicDashboard = false;
 
 	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
@@ -102,7 +110,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 			onSave: onNameSave,
 		});
 
-	const onAddPanel = useCallback((): void => {
+	const onEmptyWidgetHandler = useCallback((): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
@@ -110,15 +118,15 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 	}, [id, setIsPanelTypeSelectionModalOpen]);
 
 	return (
-		<section className={styles.dashboardPageToolbarContainer}>
-			<div className={styles.dashboardInfoWithActions}>
-				<DashboardInfo
+		<Card className={styles.dashboardDescriptionContainer}>
+			<DashboardHeader title={title} image={image} />
+			<section className={styles.dashboardDetails}>
+				<DashboardTitle
 					title={title}
 					image={image}
-					tags={tags}
-					description={description}
-					isPublicDashboard={false}
+					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
+					isEditable={editDashboard}
 					isEditing={isEditing}
 					draft={draft}
 					onDraftChange={setDraft}
@@ -127,18 +135,20 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 					onCancel={cancel}
 				/>
 				<DashboardActions
-					title={title}
 					dashboard={dashboard}
 					handle={handle}
 					isDashboardLocked={isDashboardLocked}
+					editDashboard={editDashboard}
 					isAuthor={isAuthor}
-					onAddPanel={onAddPanel}
+					addPanelPermission={addPanelPermission}
+					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
 					onOpenRename={startEdit}
 				/>
-			</div>
-		</section>
+			</section>
+			<DashboardMeta tags={tags} description={description} />
+		</Card>
 	);
 }
 
-export default DashboardPageToolbar;
+export default DashboardDescription;

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

@@ -1,11 +0,0 @@
-.dashboardActionsContainer {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: flex-end;
-	gap: 12px;
-}
-
-.dashboardActionsSecondary {
-	display: flex;
-	gap: 12px;
-}

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

@@ -1,61 +0,0 @@
-.dashboardInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	width: 40%;
-
-	@media (min-width: 1280px) {
-		width: 30%;
-	}
-}
-
-.dashboardTitleContainer {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-}
-
-.dashboardImage {
-	flex-shrink: 0;
-}
-
-.dashboardTitle {
-	flex: 1;
-	min-width: 0;
-	max-width: fit-content;
-	color: var(--l1-foreground);
-	font-size: 18px;
-	font-weight: 500;
-
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.dashboardTitleHover {
-	cursor: text !important;
-}
-
-.dashboardTitleEditor {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	flex: 1;
-	min-width: 0;
-}
-
-.dashboardTitleInput {
-	flex: 1;
-	min-width: 0;
-}
-
-.dashboardTitleActionButton {
-	flex-shrink: 0;
-}
-
-.dashboardTags {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}