feat: ui update

fix: make ui good
chore: self review change
2026-06-17 14:00:34 +01:00 · 2026-06-16 13:36:43 +05:30 · 2026-06-16 12:20:24 +05:30 · 2026-06-16 11:43:41 +05:30 · 2026-06-16 11:37:01 +05:30 · 2026-06-16 10:55:42 +05:30
506 changed files with 12446 additions and 52080 deletions
--- a/.vscode/settings.json
+++ b/.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": []
 }
--- a/docs/api/openapi.yml
+++ b/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:
@@ -1357,14 +1364,6 @@ components:
      - appservice
      - containerapp
      - aks
-      - sqldatabase
-      - sqldatabasemi
-      - mysqlflexibleserver
-      - postgresqlflexibleserver
-      - mongodb
-      - cosmosdb
-      - cassandradb
-      - redis
      type: string
    CloudintegrationtypesServiceMetadata:
      properties:
@@ -2437,6 +2436,13 @@ components:
        url:
          type: string
      type: object
+    DashboardPanelDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      type: object
    DashboardTextVariableSpec:
      properties:
        constant:
@@ -2564,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:
@@ -2578,6 +2585,7 @@ components:
        panels:
          additionalProperties:
            $ref: '#/components/schemas/DashboardtypesPanel'
+          nullable: true
          type: object
        refreshInterval:
          type: string
@@ -2585,46 +2593,6 @@ components:
          items:
            $ref: '#/components/schemas/DashboardtypesVariable'
          type: array
-      required:
-      - display
-      - variables
-      - panels
-      - layouts
-      type: object
-    DashboardtypesDashboardView:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        data:
-          $ref: '#/components/schemas/DashboardtypesDashboardViewData'
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - data
-      - orgId
-      type: object
-    DashboardtypesDashboardViewData:
-      properties:
-        order:
-          $ref: '#/components/schemas/DashboardtypesListOrder'
-        query:
-          type: string
-        sort:
-          $ref: '#/components/schemas/DashboardtypesListSort'
-        version:
-          type: string
-      required:
-      - version
      type: object
    DashboardtypesDatasourcePlugin:
      discriminator:
@@ -2660,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:
@@ -2863,7 +2822,7 @@ components:
        defaultValue:
          $ref: '#/components/schemas/VariableDefaultValue'
        display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/VariableDisplay'
        name:
          type: string
        plugin:
@@ -2871,8 +2830,6 @@ components:
        sort:
          nullable: true
          type: string
-      required:
-      - display
      type: object
    DashboardtypesListableDashboardForUserV2:
      properties:
@@ -2910,15 +2867,6 @@ components:
      - total
      - tags
      type: object
-    DashboardtypesListableDashboardView:
-      properties:
-        views:
-          items:
-            $ref: '#/components/schemas/DashboardtypesDashboardView'
-          type: array
-      required:
-      - views
-      type: object
    DashboardtypesListedDashboardForUserV2:
      properties:
        createdAt:
@@ -3009,7 +2957,7 @@ components:
    DashboardtypesListedDashboardV2Spec:
      properties:
        display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/CommonDisplay'
      type: object
    DashboardtypesNumberPanelSpec:
      properties:
@@ -3029,9 +2977,6 @@ components:
          $ref: '#/components/schemas/DashboardtypesPanelKind'
        spec:
          $ref: '#/components/schemas/DashboardtypesPanelSpec'
-      required:
-      - kind
-      - spec
      type: object
    DashboardtypesPanelFormatting:
      properties:
@@ -3161,7 +3106,7 @@ components:
    DashboardtypesPanelSpec:
      properties:
        display:
-          $ref: '#/components/schemas/DashboardtypesDisplay'
+          $ref: '#/components/schemas/DashboardPanelDisplay'
        links:
          items:
            $ref: '#/components/schemas/DashboardLink'
@@ -3171,12 +3116,7 @@ components:
        queries:
          items:
            $ref: '#/components/schemas/DashboardtypesQuery'
-          nullable: true
          type: array
-      required:
-      - display
-      - plugin
-      - queries
      type: object
    DashboardtypesPatchOp:
      enum:
@@ -3223,16 +3163,6 @@ components:
      - tags
      - spec
      type: object
-    DashboardtypesPostableDashboardView:
-      properties:
-        data:
-          $ref: '#/components/schemas/DashboardtypesDashboardViewData'
-        name:
-          type: string
-      required:
-      - name
-      - data
-      type: object
    DashboardtypesPostablePublicDashboard:
      properties:
        defaultTimeRange:
@@ -3255,9 +3185,6 @@ components:
          $ref: '#/components/schemas/Querybuildertypesv5RequestType'
        spec:
          $ref: '#/components/schemas/DashboardtypesQuerySpec'
-      required:
-      - kind
-      - spec
      type: object
    DashboardtypesQueryPlugin:
      discriminator:
@@ -3364,8 +3291,6 @@ components:
          type: string
        plugin:
          $ref: '#/components/schemas/DashboardtypesQueryPlugin'
-      required:
-      - plugin
      type: object
    DashboardtypesQueryVariableSpec:
      properties:
@@ -3628,6 +3553,10 @@ components:
          items:
            $ref: '#/components/schemas/ErrorsResponseerroradditional'
          type: array
+        invalidReferences:
+          items:
+            type: string
+          type: array
        message:
          type: string
        retry:
@@ -3648,10 +3577,6 @@ components:
      properties:
        message:
          type: string
-        suggestions:
-          items:
-            type: string
-          type: array
      type: object
    ErrorsResponseretryjson:
      properties:
@@ -9066,6 +8991,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "401":
          content:
@@ -9218,6 +9147,10 @@ paths:
              $ref: '#/components/schemas/DashboardtypesUpdatablePublicDashboard'
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "401":
          content:
@@ -9812,6 +9745,10 @@ paths:
              $ref: '#/components/schemas/Querybuildertypesv5QueryRangeRequest'
      responses:
        "200":
+          content:
+            application/json:
+              schema:
+                type: string
          description: OK
        "400":
          content:
@@ -10996,6 +10933,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "401":
          content:
@@ -11109,6 +11050,10 @@ paths:
              $ref: '#/components/schemas/AuthtypesPatchableRole'
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "401":
          content:
@@ -11255,6 +11200,10 @@ paths:
              $ref: '#/components/schemas/CoretypesPatchableObjects'
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
@@ -11704,6 +11653,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "401":
          content:
@@ -11811,6 +11764,10 @@ paths:
              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccount'
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
@@ -11992,6 +11949,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "401":
          content:
@@ -12049,6 +12010,10 @@ paths:
              $ref: '#/components/schemas/ServiceaccounttypesUpdatableFactorAPIKey'
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
@@ -12231,6 +12196,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "401":
          content:
@@ -12306,6 +12275,10 @@ paths:
              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccount'
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "404":
          content:
@@ -12797,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
@@ -13382,231 +13308,6 @@ paths:
      summary: Update user preference
      tags:
      - preferences
-  /api/v2/dashboard_views:
-    get:
-      deprecated: false
-      description: Returns every saved view in the calling user's org. Saved views
-        are shared org-wide.
-      operationId: ListDashboardViews
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesListableDashboardView'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List dashboard saved views
-      tags:
-      - dashboard
-    post:
-      deprecated: false
-      description: Persists the calling user's dashboard listing state (query, sort,
-        order) as a named, reusable view shared across the org.
-      operationId: CreateDashboardView
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/DashboardtypesPostableDashboardView'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesDashboardView'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Create dashboard saved view
-      tags:
-      - dashboard
-  /api/v2/dashboard_views/{id}:
-    delete:
-      deprecated: false
-      description: Removes a saved view. Saved views are shared org-wide. Deleting
-        a non-existent view returns 404.
-      operationId: DeleteDashboardView
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Delete dashboard saved view
-      tags:
-      - dashboard
-    put:
-      deprecated: false
-      description: Replaces a saved view's name and data. Saved views are shared org-wide.
-      operationId: UpdateDashboardView
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/DashboardtypesPostableDashboardView'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesDashboardView'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Update dashboard saved view
-      tags:
-      - dashboard
  /api/v2/dashboards:
    get:
      deprecated: false
@@ -13755,6 +13456,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
@@ -14000,74 +13705,6 @@ paths:
      summary: Update dashboard (v2)
      tags:
      - dashboard
-  /api/v2/dashboards/{id}/clone:
-    post:
-      deprecated: false
-      description: This endpoint clones an existing v2-shape dashboard. User and integration
-        dashboards can be cloned; system dashboards are rejected. The clone keeps
-        the source's display name, panels, and tags, but gets a freshly generated
-        unique internal name and is always created as an unlocked user dashboard owned
-        by the caller.
-      operationId: CloneDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
-      summary: Clone dashboard (v2)
-      tags:
-      - dashboard
  /api/v2/dashboards/{id}/lock:
    delete:
      deprecated: false
@@ -14082,6 +13719,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
@@ -14134,6 +13775,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
@@ -15864,6 +15509,10 @@ paths:
              $ref: '#/components/schemas/MetricsexplorertypesUpdateMetricMetadataRequest'
      responses:
        "200":
+          content:
+            application/json:
+              schema:
+                type: string
          description: OK
        "400":
          content:
@@ -21162,6 +20811,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
@@ -21209,6 +20862,10 @@ paths:
          type: string
      responses:
        "204":
+          content:
+            application/json:
+              schema:
+                type: string
          description: No Content
        "400":
          content:
--- a/docs/contributing/go/handler.md
+++ b/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.
--- a/ee/modules/dashboard/impldashboard/module.go
+++ b/ee/modules/dashboard/impldashboard/module.go
@@ -217,10 +217,6 @@ func (module *module) CreateV2(ctx context.Context, orgID valuer.UUID, createdBy
 	return module.pkgDashboardModule.CreateV2(ctx, orgID, createdBy, creator, source, postable)
 }

-func (module *module) CloneV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
-	return module.pkgDashboardModule.CloneV2(ctx, orgID, createdBy, creator, id)
-}
-
 func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
@@ -258,28 +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) CreateView(ctx context.Context, orgID valuer.UUID, postable dashboardtypes.PostableDashboardView) (*dashboardtypes.DashboardView, error) {
-	return module.pkgDashboardModule.CreateView(ctx, orgID, postable)
-}
-
-func (module *module) ListViews(ctx context.Context, orgID valuer.UUID) (*dashboardtypes.ListableDashboardView, error) {
-	return module.pkgDashboardModule.ListViews(ctx, orgID)
-}
-
-func (module *module) UpdateView(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updateable dashboardtypes.UpdatableDashboardView) (*dashboardtypes.DashboardView, error) {
-	return module.pkgDashboardModule.UpdateView(ctx, orgID, id, updateable)
-}
-
-func (module *module) DeleteView(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	return module.pkgDashboardModule.DeleteView(ctx, orgID, id)
+func (module *module) 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) {
--- a/ee/querier/handler.go
+++ b/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
 	}

--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -10,6 +10,7 @@ import (
 	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
 	"go.opentelemetry.io/otel/propagation"

+	"github.com/SigNoz/signoz/pkg/cache/memorycache"
 	"github.com/SigNoz/signoz/pkg/errors"

 	"github.com/gorilla/handlers"
@@ -19,6 +20,7 @@ import (

 	"github.com/SigNoz/signoz/ee/query-service/app/api"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
+	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/web"
@@ -57,12 +59,25 @@ type Server struct {

 // NewServer creates and initializes Server
 func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
+	cacheForTraceDetail, err := memorycache.New(context.TODO(), signoz.Instrumentation.ToProviderSettings(), cache.Config{
+		Provider: "memory",
+		Memory: cache.Memory{
+			NumCounters: 10 * 10000,
+			MaxCost:     1 << 27, // 128 MB
+		},
+	})
+	if err != nil {
+		return nil, err
+	}
+
 	reader := clickhouseReader.NewReader(
 		signoz.Instrumentation.Logger(),
 		signoz.SQLStore,
 		signoz.TelemetryStore,
 		signoz.Prometheus,
 		signoz.TelemetryStore.Cluster(),
+		config.Querier.FluxInterval,
+		cacheForTraceDetail,
 		signoz.Cache,
 		nil,
 	)
@@ -170,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)

--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -291,8 +291,6 @@
    // Prevents the usage of specific antd components in favor of our lib
    "signoz/no-signozhq-ui-barrel": "error",
    // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
-    "signoz/no-css-module-bracket-access": "warn",
-    // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
    "no-restricted-globals": [
      "error",
      {
--- a/frontend/.stylelintrc.cjs
+++ b/frontend/.stylelintrc.cjs
@@ -2,33 +2,9 @@
 const path = require('path');

 module.exports = {
-	plugins: [
-		path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/no-deep-nesting.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/no-id-selectors.js'),
-		path.join(
-			__dirname,
-			'stylelint-rules/css-modules/no-bare-element-selectors.js',
-		),
-		path.join(__dirname, 'stylelint-rules/css-modules/prefer-css-variables.js'),
-		path.join(__dirname, 'stylelint-rules/css-modules/class-name-pattern.js'),
-	],
+	plugins: [path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js')],
 	customSyntax: 'postcss-scss',
 	rules: {
-		// Applies to all SCSS files
 		'local/no-unsupported-asset-url': true,
 	},
-	overrides: [
-		{
-			// CSS module-specific rules
-			files: ['**/*.module.scss'],
-			rules: {
-				'local/no-deep-nesting': [true, { severity: 'warning' }],
-				'local/no-id-selectors': true,
-				'local/no-bare-element-selectors': true,
-				'local/prefer-css-variables': [true, { severity: 'warning' }],
-				'local/class-name-pattern': [true, { severity: 'warning' }],
-			},
-		},
-	],
 };
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -23,8 +23,6 @@ You are operating within a constrained context window and strict system prompts.
 - Always add data-testid or testId (if supported) to critical/behavioral components like inputs, buttons, etc...
  - When creating test, these IDs should be used instead of finding by role.
 - Never create barrel files.
- When writing new css, prefer CSS Modules
-  - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.

 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`
--- a/frontend/docs/css-modules-guide.md
+++ b/frontend/docs/css-modules-guide.md
@@ -1,513 +0,0 @@
-# CSS Modules Guide
-
-## Checklist Before Committing
-
- [ ] All class names use camelCase in CSS
- [ ] State classes use `is-`/`has-` prefix (e.g., `isActive`, `hasError`)
- [ ] No bracket access (`styles['...']`) in JS unless verified
- [ ] No dynamic class lookup - use explicit variant maps instead
- [ ] No deep class nesting (max 3 class levels; pseudo-classes/elements and parent-reference selectors like `&.active`, `&#bar` are not counted)
- [ ] No hardcoded colors - use `--l1/l2/l3-*` semantic tokens (not `--bg-*` primitives)
- [ ] No magic numbers - use `--spacing-*` tokens
- [ ] Typography uses `--periscope-font-size-*` or `--font-size-*` tokens
- [ ] @signozhq/ui overrides use CSS variables, not direct class overrides
- [ ] Global escapes only for third-party overrides
- [ ] No ID selectors
- [ ] No bare element selectors
- [ ] Keyframes use `:local(@keyframes name)` to avoid global collisions
-
-## Config (vite.config.ts)
-
-```ts
-css: {
-  modules: {
-    localsConvention: 'camelCaseOnly',
-  },
-}
-```
-
-**Critical:** `camelCaseOnly` exports ONLY camelCase keys. Original kebab-case NOT accessible.
-
-## Quick Reference
-
-| CSS Class | JS Access | Works? | Preferred?                 |
-|-----------|-----------|--------|----------------------------|
-| `.alertHistory` | `styles.alertHistory` | Yes | Yes                        |
-| `.alert-history` | `styles.alertHistory` | Yes | No, use `.alertHistory`    |
-| `.alert-history` | `styles['alert-history']` | NO - undefined | Never, use `.alertHistory` |
-
-## Bad Patterns
-
-### Class Naming
-
-```scss
-// BAD: Bracket access won't work
-.my-class { }
-// Then in JS: styles['my-class'] -> undefined
-
-// BAD: Collision - both become same key
-.alertHistory { }
-.alert-history { }  // -> styles.alertHistory (conflicts)
-
-// BAD: Underscore inconsistency
-.my_class { }  // -> styles.myClass (confusing)
-
-// GOOD: Direct camelCase
-.alertHistory { }
-.statsCard { }
-
-// GOOD: State classes with is-/has- prefix
-.isDisabled { }
-.isActive { }
-.hasError { }
-.isLoading { }
-```
-
-### Nesting
-
-```scss
-// BAD: Deep nesting - specificity wars, hard to override
-.container {
-  .wrapper {
-    .inner {
-      .content { }
-    }
-  }
-}
-
-// BAD: Nesting creates separate classes you might not expect
-.button {
-  .icon { }  // -> styles.icon (separate class, not scoped under .button)
-}
-
-// GOOD: Flat structure
-.container { }
-.containerWrapper { }
-.containerContent { }
-
-// GOOD: Nesting only for pseudo/states
-.button {
-  &:hover { }
-  &:disabled { }
-  &::before { }
-}
-```
-
-### Global Escapes
-
-```scss
-// BAD: Overusing global
-:global {
-  .everything { }
-  .in-here { }
-  .is-global { }
-}
-
-// BAD: Global without necessity
-:global(.myComponent) { }  // defeats purpose of modules
-
-// GOOD: Targeted global for third-party overrides
-.container {
-  :global(.ant-modal-content) {
-    padding: 0;
-  }
-}
-```
-
-### Selectors
-
-```scss
-// BAD: ID selectors - not reusable
-#myComponent { }
-
-// BAD: Element selectors without scope
-div { }  // affects ALL divs in component
-
-// BAD: Complex selectors
-.container > div + span ~ p { }
-
-// GOOD: Class-only selectors
-.container { }
-.title { }
-```
-
-### Variables & Values
-
-```scss
-// BAD: Hardcoded colors
-.button {
-  background: #1890ff;
-  color: white;
-}
-
-// BAD: Magic numbers
-.container {
-  padding: 17px;
-  margin-left: 43px;
-}
-
-// GOOD: Semantic tokens (theme-aware)
-.button {
-  background: var(--primary-background);
-  color: var(--primary-foreground);
-}
-
-.card {
-  background: var(--l2-background);
-  color: var(--l2-foreground);
-}
-
-// GOOD: Spacing system
-.container {
-  padding: var(--spacing-4);
-  margin-left: var(--spacing-5);
-}
-```
-
-## Design Tokens (@signozhq/design-tokens)
-
-Prefer semantic tokens over hardcoded values.
-
-You can read the ./node_modules/@signozhq/design-tokens/dist/style.css to find complete list of available tokens.
-
-### Spacing
-
-```scss
-// Spacing scale (index -> px):
-// --spacing-0=0    --spacing-1=2    --spacing-2=4    --spacing-3=6    --spacing-4=8
-// --spacing-5=10   --spacing-6=12   --spacing-7=14   --spacing-8=16   --spacing-10=20
-// --spacing-12=24  --spacing-16=32  --spacing-20=40  --spacing-24=48  --spacing-32=64
-// --spacing-40=80  --spacing-48=96  --spacing-56=112 --spacing-64=128
-// (index != px; --spacing-2 is 4px, not 2px)
-.container {
-  padding: var(--spacing-4);      // 8px
-  gap: var(--spacing-6);          // 12px
-  margin-bottom: var(--spacing-8); // 16px
-}
-
-// Also available: --padding-* and --margin-* (rem-based)
-// --padding-1 = 0.25rem, --padding-4 = 1rem, etc.
-```
-
-### Typography
-
-```scss
-// Font sizes (preferred)
-.title {
-  font-size: var(--periscope-font-size-large);   // 18px
-  font-size: var(--periscope-font-size-medium);  // 16px
-  font-size: var(--periscope-font-size-base);    // 13px
-  font-size: var(--periscope-font-size-small);   // 11px
-}
-
-// Alternative scale (rem-based)
-.heading {
-  font-size: var(--font-size-xl);  // 1.25rem
-  font-size: var(--font-size-lg);  // 1.125rem
-  font-size: var(--font-size-base); // 1rem
-  font-size: var(--font-size-sm);  // 0.875rem
-}
-
-// Font weights
-.bold {
-  font-weight: var(--font-weight-semibold); // 600
-  font-weight: var(--font-weight-medium);   // 500
-  font-weight: var(--font-weight-normal);   // 400
-}
-
-// Line heights
-.text {
-  line-height: var(--line-height-20); // 20px
-  line-height: var(--line-height-24); // 24px
-}
-```
-
-### Colors (Prefer Semantic Tokens)
-
-Use L1/L2/L3 semantic tokens - they handle light/dark theme automatically.
-
-```scss
-// BAD: Primitive tokens (fixed value across themes, won't swap on theme change)
-.card {
-  background: var(--bg-ink-400);
-  color: var(--text-vanilla-100);
-}
-
-// GOOD: L1/L2/L3 tokens (theme-aware - swap automatically light/dark)
-.card {
-  background: var(--l1-background);  // base layer
-  color: var(--l1-foreground);       // primary text
-}
-
-.panel {
-  background: var(--l2-background);  // elevated surface
-  color: var(--l2-foreground);       // secondary text
-  border-color: var(--l2-border);
-}
-
-.nested {
-  background: var(--l3-background);  // nested/inset
-  color: var(--l3-foreground);       // tertiary text
-}
-
-// Hover states
-.card:hover {
-  background: var(--l1-background-hover);
-  color: var(--l1-foreground-hover);
-}
-
-// Semantic action colors (also theme-aware)
-.primary {
-  background: var(--primary-background);
-  color: var(--primary-foreground);
-}
-
-.danger {
-  background: var(--danger-background);
-  color: var(--danger-foreground);
-}
-
-.success {
-  background: var(--success-background);
-  color: var(--success-foreground);
-}
-
-.warning {
-  background: var(--warning-background);
-  color: var(--warning-foreground);
-}
-
-// Accent colors (for highlights, badges, etc.)
-.accent {
-  background: var(--accent-primary);        // robin blue
-  background: var(--accent-forest);         // green
-  background: var(--accent-cherry);         // red
-  background: var(--accent-amber);          // yellow
-}
-```
-
-**Token hierarchy:**
- Primitive tokens (`--bg-*`, `--text-*`, etc.) have fixed values across themes.
- Semantic tokens (L1/L2/L3, `--primary-*`, `--danger-*`, etc.) automatically swap based on theme.
- L1 = base/root layer
- L2 = elevated surfaces (cards, panels)
- L3 = nested/inset elements
-
-## Overriding @signozhq/ui Components
-
-Components expose CSS variables for customization.
-
-You can ensure they exist by looking at ./node_modules/@signozhq/ui/dist.
-Never write a override without confirm it exists.
-
-Override via:
-
-### Method 1: CSS Variables (Preferred)
-
-Each component exposes `--<component>-<property>` variables:
-
-```scss
-// Override Button
-.customButton {
-  --button-background: var(--success-background);
-  --button-border-radius: var(--radius-2);
-  --button-padding: var(--spacing-4) var(--spacing-8);
-  --button-font-size: var(--periscope-font-size-base);
-}
-
-// Override Input
-.customInput {
-  --input-height: 2.5rem;
-  --input-border-color: var(--l2-border);
-  --input-padding: var(--spacing-2) var(--spacing-6);
-  --input-placeholder-color: var(--l3-foreground);
-}
-
-// Override nested parts
-.customInput {
-  --input-prefix-padding: 0 var(--spacing-4) 0 var(--spacing-6);
-  --input-suffix-color: var(--accent-primary);
-}
-```
-
-### Method 2: Data Attributes
-
-Components use data attributes for variants/states. Target them for state-specific overrides:
-
-```scss
-// Target variant
-.wrapper :global([data-variant="outlined"]) {
-  --button-border-color: var(--accent-primary);
-}
-
-// Target size
-.wrapper :global([data-size="sm"]) {
-  --button-font-size: var(--periscope-font-size-small);
-}
-
-// Target color
-.wrapper :global([data-color="destructive"]) {
-  --button-background: var(--danger-background);
-}
-
-// Target state (Radix patterns)
-.popover :global([data-state="open"]) {
-  opacity: 1;
-}
-
-.tooltip :global([data-side="top"]) {
-  margin-bottom: var(--spacing-2);
-}
-```
-
-### Common Component CSS Variables
-
-**Button:**
- `--button-background`, `--button-border-radius`, `--button-padding`
- `--button-font-size`, `--button-height`, `--button-gap`
- `--button-hover-background`, `--button-disabled-opacity`
-
-**Input:**
- `--input-height`, `--input-border-color`, `--input-background`
- `--input-padding`, `--input-font-size`, `--input-placeholder-color`
- `--input-focus-outline-color`, `--input-hover-border-color`
- `--input-prefix-*`, `--input-suffix-*` for adornments
-
-**General pattern:** `--<component>-<property>` or `--<component>-<state>-<property>`
-
-## Good Patterns
-
-### Structure
-
-```scss
-// Flat, descriptive, component-scoped
-.alertHistory { }
-.alertHistoryHeader { }
-.alertHistoryContent { }
-.alertHistoryFooter { }
-
-// State modifiers as separate classes
-.alertHistory { }
-.alertHistoryLoading { }
-.alertHistoryEmpty { }
-.alertHistoryError { }
-```
-
-### Composition
-
-```scss
-// GOOD: Composing styles
-.baseButton {
-  padding: var(--spacing-2) var(--spacing-4);
-  border-radius: var(--radius-2);
-}
-
-.primaryButton {
-  composes: baseButton;
-  background: var(--primary-background);
-}
-```
-
-### Pseudo Elements
-
-```scss
-.button {
-  // States
-  &:hover { opacity: 0.9; }
-  &:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
-
-  // Pseudo elements
-  &::before { content: ''; }
-  &::after { content: ''; }
-}
-```
-
-### Media Queries
-
-```scss
-.container {
-  display: flex;
-  flex-direction: column;
-  
-  @media (min-width: 768px) {
-    flex-direction: row;
-  }
-}
-```
-
-### Keyframes (Local Scoping)
-
-Without `:local()`, keyframe names are global and can clash across modules:
-
-```scss
-// BAD: Global keyframe - can conflict with other modules
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-// GOOD: Locally scoped keyframe
-:local(@keyframes fadeIn) {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.modal {
-  animation: fadeIn 200ms ease;
-}
-```
-
-## JS Import Patterns
-
-```tsx
-// GOOD
-import styles from './Component.module.scss';
-
-<div className={styles.container}>
-  <span className={styles.title}>Title</span>
-</div>
-
-// GOOD: Conditional classes
-<div className={`${styles.button} ${isActive ? styles.buttonActive : ''}`}>
-
-// GOOD: With clsx/classnames
-<div className={clsx(styles.button, { [styles.buttonActive]: isActive })}>
-
-// BAD: Bracket access (may be undefined)
-<div className={styles['button-active']}>  // undefined if CSS has .button-active
-
-// BAD: String interpolation for class names
-<div className={`${styles.button}-active`}>  // won't work
-
-// BAD: Dynamic class lookup - can't be statically analyzed
-const cls = styles[`variant${props.type}`];  // Vite can't tree-shake or type-check
-
-// GOOD: Explicit map for dynamic variants
-const variantMap = {
-  primary: styles.variantPrimary,
-  secondary: styles.variantSecondary,
-  ghost: styles.variantGhost,
-};
-const cls = variantMap[props.type];
-```
-
-## Lint Rules
-
-### JS/TS (oxlint)
-
-| Rule | Severity | Catches |
-|------|----------|---------|
-| `signoz/no-css-module-bracket-access` | warn | `styles['kebab-case']`, dynamic access |
-
-### CSS/SCSS (stylelint)
-
-| Rule | Severity | Catches |
-|------|----------|---------|
-| `local/no-deep-nesting` | warning | class nesting >3 levels (pseudo-classes/elements and parent-reference selectors `&.foo`, `&#bar` not counted; configurable via `maxDepth` secondary option) |
-| `local/no-id-selectors` | error | `#id` selectors |
-| `local/no-bare-element-selectors` | error | root-level `div`, `span` etc |
-| `local/prefer-css-variables` | warning | hardcoded colors |
-| `local/class-name-pattern` | warning | kebab-case, snake_case, PascalCase |
-
-Run: `pnpm lint:styles` to check CSS modules.
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,8 +45,8 @@
    "@dnd-kit/utilities": "3.2.2",
    "@grafana/data": "^11.6.14",
    "@monaco-editor/react": "^4.7.0",
-    "@sentry/react": "10.57.0",
-    "@sentry/vite-plugin": "5.3.0",
+    "@sentry/react": "8.41.0",
+    "@sentry/vite-plugin": "2.22.6",
    "@signozhq/design-tokens": "2.1.4",
    "@signozhq/icons": "0.4.0",
    "@signozhq/resizable": "0.0.2",
@@ -192,9 +192,9 @@
    "lint-staged": "^17.0.4",
    "msw": "1.3.2",
    "orval": "8.9.1",
-    "oxfmt": "0.54.0",
-    "oxlint": "1.69.0",
-    "oxlint-tsgolint": "0.23.0",
+    "oxfmt": "0.47.0",
+    "oxlint": "1.62.0",
+    "oxlint-tsgolint": "0.22.1",
    "postcss": "8.5.14",
    "postcss-scss": "4.0.9",
    "react-resizable": "3.0.4",
--- a/frontend/plugins/rules/no-css-module-bracket-access.mjs
+++ b/frontend/plugins/rules/no-css-module-bracket-access.mjs
@@ -1,144 +0,0 @@
-/**
- * Rule: no-css-module-bracket-access
- *
- * Prevents bracket access on CSS module imports that may fail with camelCaseOnly config.
- *
- * With Vite's `localsConvention: 'camelCaseOnly'`, kebab-case class names are
- * converted to camelCase and the original key is NOT exported.
- *
- * This rule catches patterns like:
- *   styles['my-class']     // BAD - undefined if CSS has .my-class
- *   styles['myClass']      // OK but prefer dot notation
- *   styles.myClass         // GOOD
- *
- * Catches:
- * - Bracket access with kebab-case strings (always fails)
- * - Bracket access with any string literal (warn - prefer dot notation)
- * - Dynamic bracket access (warn - risky)
- */
-
-const CSS_MODULE_IMPORT_NAMES = new Set([
-	'styles',
-	'classes',
-	'css',
-	'classNames',
-]);
-
-function looksLikeCssModuleImport(name) {
-	// Common patterns: styles, componentStyles, alertHistoryStyles
-	return (
-		CSS_MODULE_IMPORT_NAMES.has(name) ||
-		name.endsWith('Styles') ||
-		name.endsWith('Classes') ||
-		name.endsWith('Css')
-	);
-}
-
-function isKebabCase(str) {
-	return str.includes('-');
-}
-
-function isSnakeCase(str) {
-	return str.includes('_');
-}
-
-export default {
-	create(context) {
-		return {
-			MemberExpression(node) {
-				// Only check bracket notation: styles['...']
-				if (!node.computed) {
-					return;
-				}
-
-				const object = node.object;
-				if (object.type !== 'Identifier') {
-					return;
-				}
-
-				// Check if this looks like a CSS module import
-				if (!looksLikeCssModuleImport(object.name)) {
-					return;
-				}
-
-				const property = node.property;
-
-				// Dynamic access: styles[variable]
-				if (property.type === 'Identifier') {
-					context.report({
-						node,
-						message: `Dynamic CSS module access '${object.name}[${property.name}]' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify the key exists.`,
-					});
-					return;
-				}
-
-				// Template literal: styles[\`...\`]
-				if (property.type === 'TemplateLiteral') {
-					context.report({
-						node,
-						message: `Template literal CSS module access is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Prefer dot notation.`,
-					});
-					return;
-				}
-
-				// Numeric / boolean / null literal: styles[0]. Not a class lookup; ignore.
-				if (property.type === 'Literal' && typeof property.value !== 'string') {
-					return;
-				}
-
-				// String literal: styles['...']
-				if (property.type === 'Literal' && typeof property.value === 'string') {
-					const className = property.value;
-
-					// Kebab-case will definitely fail
-					if (isKebabCase(className)) {
-						context.report({
-							node,
-							message: `CSS module class '${className}' uses kebab-case which won't work with 'camelCaseOnly' config. Use '${object.name}.${toCamelCase(className)}' instead.`,
-						});
-						return;
-					}
-
-					// Snake_case is suspicious
-					if (isSnakeCase(className)) {
-						context.report({
-							node,
-							message: `CSS module class '${className}' uses snake_case which may not work as expected. Prefer camelCase: '${object.name}.${toCamelCase(className)}'.`,
-						});
-						return;
-					}
-
-					// Valid camelCase but using bracket notation - prefer dot
-					if (/^[a-z][a-zA-Z0-9]*$/.test(className)) {
-						context.report({
-							node,
-							message: `Prefer dot notation: '${object.name}.${className}' instead of '${object.name}['${className}']'.`,
-						});
-					}
-					return;
-				}
-
-				// Catch-all for other dynamic expressions:
-				//   styles['prefix' + suffix]   (BinaryExpression)
-				//   styles[isActive && 'foo']   (LogicalExpression)
-				//   styles[isActive ? 'a' : 'b'] (ConditionalExpression)
-				//   styles[fn()]                (CallExpression)
-				context.report({
-					node,
-					message: `Dynamic CSS module access on '${object.name}' is risky. With 'camelCaseOnly' config, kebab-case keys don't exist. Use dot notation or verify each key resolves to an exported camelCase class.`,
-				});
-			},
-		};
-	},
-};
-
-function toCamelCase(str) {
-	return str
-		.split(/[-_]/)
-		.map((part, i) =>
-			i === 0
-				? part.toLowerCase()
-				: part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(),
-		)
-		.join('');
-}
--- a/frontend/plugins/signoz.mjs
+++ b/frontend/plugins/signoz.mjs
@@ -11,7 +11,6 @@ import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs'
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
-import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';

 export default {
 	meta: {
@@ -24,6 +23,5 @@ export default {
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
-		'no-css-module-bracket-access': noCssModuleBracketAccess,
 	},
 };
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -64,17 +64,10 @@ export const TraceDetail = Loadable(
 		),
 );

-export const TraceDetailOldRedirect = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetailOldRedirect" */ 'pages/TraceDetailOldRedirect/index'
-		),
-);
-
 export const TraceDetailV3 = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailsV3/index'
+			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
 		),
 );

@@ -330,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'
+		),
+);
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -22,6 +22,8 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
+	LLMObservabilityAttributeMappingPage,
+	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -47,7 +49,7 @@ import {
 	SomethingWentWrong,
 	StatusPage,
 	SupportPage,
-	TraceDetailOldRedirect,
+	TraceDetail,
 	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
@@ -139,11 +141,13 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
-	// Legacy /trace-old/:id redirects to the current /trace/:id view.
+	// V3 trace details is gated until release: /trace serves V2 (public),
+	// /trace-old serves V3 (URL-only access). Flip the two `component`
+	// values back to release V3.
 	{
 		path: ROUTES.TRACE_DETAIL_OLD,
 		exact: true,
-		component: TraceDetailOldRedirect,
+		component: TraceDetail,
 		isPrivate: true,
 		key: 'TRACE_DETAIL_OLD',
 	},
@@ -505,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 = {
--- a/frontend/src/api/ai-assistant/chat.ts
+++ b/frontend/src/api/ai-assistant/chat.ts
@@ -55,9 +55,6 @@ import type {
 	ThreadDetailResponseDTO,
 	ThreadListResponseDTO,
 	ThreadSummaryDTO,
-	ChipDTO,
-	ChipsResponseDTO,
-	PageTypeDTO,
 	ToolCallEventDTO,
 	ToolResultEventDTO,
 } from './sigNozAIAssistantAPI.schemas';
@@ -544,19 +541,3 @@ export async function submitFeedback(
 		comment: comment ?? null,
 	});
 }
-
-// ---------------------------------------------------------------------------
-// Contextual empty-state chips
-// GET /api/v1/assistant/empty-state/chips?page_type=… → { chips }
-// ---------------------------------------------------------------------------
-
-export async function getEmptyStateChips(
-	pageType: PageTypeDTO,
-	signal?: AbortSignal,
-): Promise<ChipDTO[]> {
-	const response = await AIAssistantInstance.get<ChipsResponseDTO>(
-		'/empty-state/chips',
-		{ params: { page_type: pageType }, signal },
-	);
-	return response.data.chips;
-}
--- a/frontend/src/api/ai-assistant/index.ts
+++ b/frontend/src/api/ai-assistant/index.ts
@@ -26,7 +26,6 @@ import type {
 	CancelApiV1AssistantCancelPostHeaders,
 	CancelRequestDTO,
 	CancelResponseDTO,
-	ChipsResponseDTO,
 	ClarifyApiV1AssistantClarifyPostHeaders,
 	ClarifyRequestDTO,
 	ClarifyResponseDTO,
@@ -40,11 +39,8 @@ import type {
 	ErrorResponseDTO,
 	FeedbackRequestDTO,
 	FeedbackResponseDTO,
-	GetChipsApiV1AssistantEmptyStateChipsGetHeaders,
-	GetChipsApiV1AssistantEmptyStateChipsGetParams,
 	GetThreadApiV1AssistantThreadsThreadIdGetHeaders,
 	GetThreadApiV1AssistantThreadsThreadIdGetPathParameters,
-	GetUsageApiV1AssistantUsageGetHeaders,
 	HTTPValidationErrorDTO,
 	HealthResponseDTO,
 	ListThreadsApiV1AssistantThreadsGetHeaders,
@@ -69,89 +65,93 @@ import type {
 	UpdateThreadApiV1AssistantThreadsThreadIdPatchHeaders,
 	UpdateThreadApiV1AssistantThreadsThreadIdPatchPathParameters,
 	UpdateThreadRequestDTO,
-	UsageResponseDTO,
 } from './sigNozAIAssistantAPI.schemas';

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

 /**
- * @summary Healthz
+ * @summary Health
 */
-export const healthzHealthzGet = (signal?: AbortSignal) => {
+export const healthHealthGet = (signal?: AbortSignal) => {
 	return GeneratedAPIInstance<HealthResponseDTO>({
-		url: `/healthz`,
+		url: `/health`,
 		method: 'GET',
 		signal,
 	});
 };

-export const getHealthzHealthzGetQueryKey = () => {
-	return [`/healthz`] as const;
+export const getHealthHealthGetQueryKey = () => {
+	return [`/health`] as const;
 };

-export const getHealthzHealthzGetQueryOptions = <
-	TData = Awaited<ReturnType<typeof healthzHealthzGet>>,
+export const getHealthHealthGetQueryOptions = <
+	TData = Awaited<ReturnType<typeof healthHealthGet>>,
 	TError = ErrorType<unknown>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof healthzHealthzGet>>,
+		Awaited<ReturnType<typeof healthHealthGet>>,
 		TError,
 		TData
 	>;
 }) => {
 	const { query: queryOptions } = options ?? {};

-	const queryKey = queryOptions?.queryKey ?? getHealthzHealthzGetQueryKey();
+	const queryKey = queryOptions?.queryKey ?? getHealthHealthGetQueryKey();

-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof healthzHealthzGet>>
-	> = ({ signal }) => healthzHealthzGet(signal);
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof healthHealthGet>>> = ({
+		signal,
+	}) => healthHealthGet(signal);

 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof healthzHealthzGet>>,
+		Awaited<ReturnType<typeof healthHealthGet>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };

-export type HealthzHealthzGetQueryResult = NonNullable<
-	Awaited<ReturnType<typeof healthzHealthzGet>>
+export type HealthHealthGetQueryResult = NonNullable<
+	Awaited<ReturnType<typeof healthHealthGet>>
 >;
-export type HealthzHealthzGetQueryError = ErrorType<unknown>;
+export type HealthHealthGetQueryError = ErrorType<unknown>;

 /**
- * @summary Healthz
+ * @summary Health
 */

-export function useHealthzHealthzGet<
-	TData = Awaited<ReturnType<typeof healthzHealthzGet>>,
+export function useHealthHealthGet<
+	TData = Awaited<ReturnType<typeof healthHealthGet>>,
 	TError = ErrorType<unknown>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof healthzHealthzGet>>,
+		Awaited<ReturnType<typeof healthHealthGet>>,
 		TError,
 		TData
 	>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getHealthzHealthzGetQueryOptions(options);
+	const queryOptions = getHealthHealthGetQueryOptions(options);

 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
 	};

-	return { ...query, queryKey: queryOptions.queryKey };
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
 }

 /**
- * @summary Healthz
+ * @summary Health
 */
-export const invalidateHealthzHealthzGet = async (
+export const invalidateHealthHealthGet = async (
 	queryClient: QueryClient,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getHealthzHealthzGetQueryKey() },
+		{ queryKey: getHealthHealthGetQueryKey() },
 		options,
 	);

@@ -159,82 +159,84 @@ export const invalidateHealthzHealthzGet = async (
 };

 /**
- * @summary Readyz
+ * @summary Ready
 */
-export const readyzReadyzGet = (signal?: AbortSignal) => {
+export const readyReadyGet = (signal?: AbortSignal) => {
 	return GeneratedAPIInstance<ReadinessResponseDTO>({
-		url: `/readyz`,
+		url: `/ready`,
 		method: 'GET',
 		signal,
 	});
 };

-export const getReadyzReadyzGetQueryKey = () => {
-	return [`/readyz`] as const;
+export const getReadyReadyGetQueryKey = () => {
+	return [`/ready`] as const;
 };

-export const getReadyzReadyzGetQueryOptions = <
-	TData = Awaited<ReturnType<typeof readyzReadyzGet>>,
+export const getReadyReadyGetQueryOptions = <
+	TData = Awaited<ReturnType<typeof readyReadyGet>>,
 	TError = ErrorType<ReadinessResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof readyzReadyzGet>>,
+		Awaited<ReturnType<typeof readyReadyGet>>,
 		TError,
 		TData
 	>;
 }) => {
 	const { query: queryOptions } = options ?? {};

-	const queryKey = queryOptions?.queryKey ?? getReadyzReadyzGetQueryKey();
+	const queryKey = queryOptions?.queryKey ?? getReadyReadyGetQueryKey();

-	const queryFn: QueryFunction<Awaited<ReturnType<typeof readyzReadyzGet>>> = ({
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof readyReadyGet>>> = ({
 		signal,
-	}) => readyzReadyzGet(signal);
+	}) => readyReadyGet(signal);

 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof readyzReadyzGet>>,
+		Awaited<ReturnType<typeof readyReadyGet>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };

-export type ReadyzReadyzGetQueryResult = NonNullable<
-	Awaited<ReturnType<typeof readyzReadyzGet>>
+export type ReadyReadyGetQueryResult = NonNullable<
+	Awaited<ReturnType<typeof readyReadyGet>>
 >;
-export type ReadyzReadyzGetQueryError = ErrorType<ReadinessResponseDTO>;
+export type ReadyReadyGetQueryError = ErrorType<ReadinessResponseDTO>;

 /**
- * @summary Readyz
+ * @summary Ready
 */

-export function useReadyzReadyzGet<
-	TData = Awaited<ReturnType<typeof readyzReadyzGet>>,
+export function useReadyReadyGet<
+	TData = Awaited<ReturnType<typeof readyReadyGet>>,
 	TError = ErrorType<ReadinessResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof readyzReadyzGet>>,
+		Awaited<ReturnType<typeof readyReadyGet>>,
 		TError,
 		TData
 	>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getReadyzReadyzGetQueryOptions(options);
+	const queryOptions = getReadyReadyGetQueryOptions(options);

 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
 	};

-	return { ...query, queryKey: queryOptions.queryKey };
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
 }

 /**
- * @summary Readyz
+ * @summary Ready
 */
-export const invalidateReadyzReadyzGet = async (
+export const invalidateReadyReadyGet = async (
 	queryClient: QueryClient,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getReadyzReadyzGetQueryKey() },
+		{ queryKey: getReadyReadyGetQueryKey() },
 		options,
 	);

@@ -245,7 +247,7 @@ export const invalidateReadyzReadyzGet = async (
 * @summary Create a new thread
 */
 export const createThreadApiV1AssistantThreadsPost = (
-	createThreadApiV1AssistantThreadsPostBody?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>,
+	createThreadApiV1AssistantThreadsPostBody: BodyType<CreateThreadApiV1AssistantThreadsPostBody>,
 	headers?: CreateThreadApiV1AssistantThreadsPostHeaders,
 	signal?: AbortSignal,
 ) => {
@@ -266,7 +268,7 @@ export const getCreateThreadApiV1AssistantThreadsPostMutationOptions = <
 		Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 		TError,
 		{
-			data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+			data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 			headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 		},
 		TContext
@@ -275,7 +277,7 @@ export const getCreateThreadApiV1AssistantThreadsPostMutationOptions = <
 	Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 	TError,
 	{
-		data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+		data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 		headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 	},
 	TContext
@@ -292,7 +294,7 @@ export const getCreateThreadApiV1AssistantThreadsPostMutationOptions = <
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 		{
-			data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+			data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 			headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 		}
 	> = (props) => {
@@ -308,8 +310,7 @@ export type CreateThreadApiV1AssistantThreadsPostMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>
 >;
 export type CreateThreadApiV1AssistantThreadsPostMutationBody =
-	| BodyType<CreateThreadApiV1AssistantThreadsPostBody>
-	| undefined;
+	BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 export type CreateThreadApiV1AssistantThreadsPostMutationError = ErrorType<
 	ErrorResponseDTO | HTTPValidationErrorDTO
 >;
@@ -325,7 +326,7 @@ export const useCreateThreadApiV1AssistantThreadsPost = <
 		Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 		TError,
 		{
-			data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+			data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 			headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 		},
 		TContext
@@ -334,14 +335,15 @@ export const useCreateThreadApiV1AssistantThreadsPost = <
 	Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 	TError,
 	{
-		data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+		data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 		headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 	},
 	TContext
 > => {
-	return useMutation(
-		getCreateThreadApiV1AssistantThreadsPostMutationOptions(options),
-	);
+	const mutationOptions =
+		getCreateThreadApiV1AssistantThreadsPostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Cursor-based pagination, sorted by updatedAt desc. Use `archived=true|false|all` to filter.
@@ -363,8 +365,13 @@ export const listThreadsApiV1AssistantThreadsGet = (

 export const getListThreadsApiV1AssistantThreadsGetQueryKey = (
 	params?: ListThreadsApiV1AssistantThreadsGetParams,
+	headers?: ListThreadsApiV1AssistantThreadsGetHeaders,
 ) => {
-	return [`/api/v1/assistant/threads`, ...(params ? [params] : [])] as const;
+	return [
+		`/api/v1/assistant/threads`,
+		...(params ? [params] : []),
+		...getGeneratedAPIQueryKeyHeaders(headers),
+	] as const;
 };

 export const getListThreadsApiV1AssistantThreadsGetQueryOptions = <
@@ -385,7 +392,7 @@ export const getListThreadsApiV1AssistantThreadsGetQueryOptions = <

 	const queryKey =
 		queryOptions?.queryKey ??
-		getListThreadsApiV1AssistantThreadsGetQueryKey(params);
+		getListThreadsApiV1AssistantThreadsGetQueryKey(params, headers);

 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof listThreadsApiV1AssistantThreadsGet>>
@@ -434,7 +441,9 @@ export function useListThreadsApiV1AssistantThreadsGet<
 		queryKey: QueryKey;
 	};

-	return { ...query, queryKey: queryOptions.queryKey };
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
 }

 /**
@@ -447,7 +456,7 @@ export const invalidateListThreadsApiV1AssistantThreadsGet = async (
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getListThreadsApiV1AssistantThreadsGetQueryKey(params) },
+		{ queryKey: getListThreadsApiV1AssistantThreadsGetQueryKey(params, headers) },
 		options,
 	);

@@ -471,10 +480,14 @@ export const getThreadApiV1AssistantThreadsThreadIdGet = (
 	});
 };

-export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey = ({
-	threadId,
-}: GetThreadApiV1AssistantThreadsThreadIdGetPathParameters) => {
-	return [`/api/v1/assistant/threads/${threadId}`] as const;
+export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey = (
+	{ threadId }: GetThreadApiV1AssistantThreadsThreadIdGetPathParameters,
+	headers?: GetThreadApiV1AssistantThreadsThreadIdGetHeaders,
+) => {
+	return [
+		`/api/v1/assistant/threads/${threadId}`,
+		...getGeneratedAPIQueryKeyHeaders(headers),
+	] as const;
 };

 export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryOptions = <
@@ -495,7 +508,7 @@ export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryOptions = <

 	const queryKey =
 		queryOptions?.queryKey ??
-		getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey({ threadId });
+		getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey({ threadId }, headers);

 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getThreadApiV1AssistantThreadsThreadIdGet>>
@@ -549,7 +562,9 @@ export function useGetThreadApiV1AssistantThreadsThreadIdGet<
 		queryKey: QueryKey;
 	};

-	return { ...query, queryKey: queryOptions.queryKey };
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
 }

 /**
@@ -563,7 +578,10 @@ export const invalidateGetThreadApiV1AssistantThreadsThreadIdGet = async (
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
 		{
-			queryKey: getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey({ threadId }),
+			queryKey: getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey(
+				{ threadId },
+				headers,
+			),
 		},
 		options,
 	);
@@ -578,14 +596,12 @@ export const updateThreadApiV1AssistantThreadsThreadIdPatch = (
 	{ threadId }: UpdateThreadApiV1AssistantThreadsThreadIdPatchPathParameters,
 	updateThreadRequestDTO: BodyType<UpdateThreadRequestDTO>,
 	headers?: UpdateThreadApiV1AssistantThreadsThreadIdPatchHeaders,
-	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<ThreadSummaryDTO>({
 		url: `/api/v1/assistant/threads/${threadId}`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json', ...headers },
 		data: updateThreadRequestDTO,
-		signal,
 	});
 };

@@ -679,9 +695,10 @@ export const useUpdateThreadApiV1AssistantThreadsThreadIdPatch = <
 	},
 	TContext
 > => {
-	return useMutation(
-		getUpdateThreadApiV1AssistantThreadsThreadIdPatchMutationOptions(options),
-	);
+	const mutationOptions =
+		getUpdateThreadApiV1AssistantThreadsThreadIdPatchMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Persists the user message, creates an execution (state: queued), kicks off the agent loop asynchronously, and returns immediately. Open `GET /executions/{executionId}/events` for the SSE stream.
@@ -808,11 +825,12 @@ export const useCreateMessageApiV1AssistantThreadsThreadIdMessagesPost = <
 	},
 	TContext
 > => {
-	return useMutation(
+	const mutationOptions =
 		getCreateMessageApiV1AssistantThreadsThreadIdMessagesPostMutationOptions(
 			options,
-		),
-	);
+		);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Clean-slate regeneration. Starts a fresh execution with conversation history up to (excluding) the original assistant response.
@@ -943,11 +961,12 @@ export const useRegenerateMessageApiV1AssistantMessagesMessageIdRegeneratePost =
 		},
 		TContext
 	> => {
-		return useMutation(
+		const mutationOptions =
 			getRegenerateMessageApiV1AssistantMessagesMessageIdRegeneratePostMutationOptions(
 				options,
-			),
-		);
+			);
+
+		return useMutation(mutationOptions);
 	};
 /**
 * Triggers a replay execution that runs the stored tool call with exact params. Returns a new executionId — open SSE for that execution.
@@ -1047,9 +1066,10 @@ export const useApproveApiV1AssistantApprovePost = <
 	},
 	TContext
 > => {
-	return useMutation(
-		getApproveApiV1AssistantApprovePostMutationOptions(options),
-	);
+	const mutationOptions =
+		getApproveApiV1AssistantApprovePostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Marks the approval as rejected. The execution completes with no tool execution.
@@ -1149,7 +1169,10 @@ export const useRejectApiV1AssistantRejectPost = <
 	},
 	TContext
 > => {
-	return useMutation(getRejectApiV1AssistantRejectPostMutationOptions(options));
+	const mutationOptions =
+		getRejectApiV1AssistantRejectPostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Provides structured answers to a clarification request. Persists the answers as a user transcript message, emits `user_message` as the first replayable event on the new execution stream, and resumes the agent with the answers as tool results.
@@ -1249,9 +1272,10 @@ export const useClarifyApiV1AssistantClarifyPost = <
 	},
 	TContext
 > => {
-	return useMutation(
-		getClarifyApiV1AssistantClarifyPostMutationOptions(options),
-	);
+	const mutationOptions =
+		getClarifyApiV1AssistantClarifyPostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Cooperative cancel. The agent loop finishes its current step, emits a truncated message if streaming, and transitions to canceled.
@@ -1351,7 +1375,10 @@ export const useCancelApiV1AssistantCancelPost = <
 	},
 	TContext
 > => {
-	return useMutation(getCancelApiV1AssistantCancelPostMutationOptions(options));
+	const mutationOptions =
+		getCancelApiV1AssistantCancelPostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Deletes the resource that was created by the assistant.
@@ -1450,7 +1477,9 @@ export const useUndoApiV1AssistantUndoPost = <
 	},
 	TContext
 > => {
-	return useMutation(getUndoApiV1AssistantUndoPostMutationOptions(options));
+	const mutationOptions = getUndoApiV1AssistantUndoPostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Rolls back the resource to its pre-change snapshot.
@@ -1550,7 +1579,10 @@ export const useRevertApiV1AssistantRevertPost = <
 	},
 	TContext
 > => {
-	return useMutation(getRevertApiV1AssistantRevertPostMutationOptions(options));
+	const mutationOptions =
+		getRevertApiV1AssistantRevertPostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * Recreates the resource from its pre-delete snapshot.
@@ -1650,9 +1682,10 @@ export const useRestoreApiV1AssistantRestorePost = <
 	},
 	TContext
 > => {
-	return useMutation(
-		getRestoreApiV1AssistantRestorePostMutationOptions(options),
-	);
+	const mutationOptions =
+		getRestoreApiV1AssistantRestorePostMutationOptions(options);
+
+	return useMutation(mutationOptions);
 };
 /**
 * @summary Submit feedback on an assistant message
@@ -1778,221 +1811,10 @@ export const useSubmitFeedbackApiV1AssistantMessagesMessageIdFeedbackPost = <
 	},
 	TContext
 > => {
-	return useMutation(
+	const mutationOptions =
 		getSubmitFeedbackApiV1AssistantMessagesMessageIdFeedbackPostMutationOptions(
 			options,
-		),
-	);
-};
-/**
- * @summary Current rate-limit usage for the authenticated user + org
- */
-export const getUsageApiV1AssistantUsageGet = (
-	headers?: GetUsageApiV1AssistantUsageGetHeaders,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UsageResponseDTO>({
-		url: `/api/v1/assistant/usage`,
-		method: 'GET',
-		headers,
-		signal,
-	});
-};
-
-export const getGetUsageApiV1AssistantUsageGetQueryKey = () => {
-	return [`/api/v1/assistant/usage`] as const;
-};
-
-export const getGetUsageApiV1AssistantUsageGetQueryOptions = <
-	TData = Awaited<ReturnType<typeof getUsageApiV1AssistantUsageGet>>,
-	TError = ErrorType<ErrorResponseDTO | HTTPValidationErrorDTO>,
->(
-	headers?: GetUsageApiV1AssistantUsageGetHeaders,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getUsageApiV1AssistantUsageGet>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetUsageApiV1AssistantUsageGetQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getUsageApiV1AssistantUsageGet>>
-	> = ({ signal }) => getUsageApiV1AssistantUsageGet(headers, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getUsageApiV1AssistantUsageGet>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetUsageApiV1AssistantUsageGetQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getUsageApiV1AssistantUsageGet>>
->;
-export type GetUsageApiV1AssistantUsageGetQueryError = ErrorType<
-	ErrorResponseDTO | HTTPValidationErrorDTO
->;
-
-/**
- * @summary Current rate-limit usage for the authenticated user + org
- */
-
-export function useGetUsageApiV1AssistantUsageGet<
-	TData = Awaited<ReturnType<typeof getUsageApiV1AssistantUsageGet>>,
-	TError = ErrorType<ErrorResponseDTO | HTTPValidationErrorDTO>,
->(
-	headers?: GetUsageApiV1AssistantUsageGetHeaders,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getUsageApiV1AssistantUsageGet>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetUsageApiV1AssistantUsageGetQueryOptions(
-		headers,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Current rate-limit usage for the authenticated user + org
- */
-export const invalidateGetUsageApiV1AssistantUsageGet = async (
-	queryClient: QueryClient,
-	headers?: GetUsageApiV1AssistantUsageGetHeaders,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetUsageApiV1AssistantUsageGetQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * @summary Contextual empty-state chips
- */
-export const getChipsApiV1AssistantEmptyStateChipsGet = (
-	params: GetChipsApiV1AssistantEmptyStateChipsGetParams,
-	headers?: GetChipsApiV1AssistantEmptyStateChipsGetHeaders,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ChipsResponseDTO>({
-		url: `/api/v1/assistant/empty-state/chips`,
-		method: 'GET',
-		headers,
-		params,
-		signal,
-	});
-};
-
-export const getGetChipsApiV1AssistantEmptyStateChipsGetQueryKey = (
-	params?: GetChipsApiV1AssistantEmptyStateChipsGetParams,
-) => {
-	return [
-		`/api/v1/assistant/empty-state/chips`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getGetChipsApiV1AssistantEmptyStateChipsGetQueryOptions = <
-	TData = Awaited<ReturnType<typeof getChipsApiV1AssistantEmptyStateChipsGet>>,
-	TError = ErrorType<ErrorResponseDTO | HTTPValidationErrorDTO>,
->(
-	params: GetChipsApiV1AssistantEmptyStateChipsGetParams,
-	headers?: GetChipsApiV1AssistantEmptyStateChipsGetHeaders,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getChipsApiV1AssistantEmptyStateChipsGet>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetChipsApiV1AssistantEmptyStateChipsGetQueryKey(params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getChipsApiV1AssistantEmptyStateChipsGet>>
-	> = ({ signal }) =>
-		getChipsApiV1AssistantEmptyStateChipsGet(params, headers, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getChipsApiV1AssistantEmptyStateChipsGet>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetChipsApiV1AssistantEmptyStateChipsGetQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getChipsApiV1AssistantEmptyStateChipsGet>>
->;
-export type GetChipsApiV1AssistantEmptyStateChipsGetQueryError = ErrorType<
-	ErrorResponseDTO | HTTPValidationErrorDTO
->;
-
-/**
- * @summary Contextual empty-state chips
- */
-
-export function useGetChipsApiV1AssistantEmptyStateChipsGet<
-	TData = Awaited<ReturnType<typeof getChipsApiV1AssistantEmptyStateChipsGet>>,
-	TError = ErrorType<ErrorResponseDTO | HTTPValidationErrorDTO>,
->(
-	params: GetChipsApiV1AssistantEmptyStateChipsGetParams,
-	headers?: GetChipsApiV1AssistantEmptyStateChipsGetHeaders,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getChipsApiV1AssistantEmptyStateChipsGet>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetChipsApiV1AssistantEmptyStateChipsGetQueryOptions(
-		params,
-		headers,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Contextual empty-state chips
- */
-export const invalidateGetChipsApiV1AssistantEmptyStateChipsGet = async (
-	queryClient: QueryClient,
-	params: GetChipsApiV1AssistantEmptyStateChipsGetParams,
-	headers?: GetChipsApiV1AssistantEmptyStateChipsGetHeaders,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetChipsApiV1AssistantEmptyStateChipsGetQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
+		);
+
+	return useMutation(mutationOptions);
 };
--- a/frontend/src/api/ai-assistant/sigNozAIAssistantAPI.schemas.ts
+++ b/frontend/src/api/ai-assistant/sigNozAIAssistantAPI.schemas.ts
@@ -159,25 +159,6 @@ export interface CancelResponseDTO {
 	state: ExecutionStateDTO;
 }

-export interface ChipDTO {
-	/**
-	 * @type string
-	 * @description Stable chip id. Rule-engine chips use intent ids.
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	text: string;
-}
-
-export interface ChipsResponseDTO {
-	/**
-	 * @type array
-	 */
-	chips: ChipDTO[];
-}
-
 export type ClarificationFieldDTOOptions = string[] | null;

 export type ClarificationFieldDTODefault = string | string[] | null;
@@ -405,74 +386,15 @@ export type ErrorBodyDTOErrors = ErrorResponseAdditionalDTO[] | null;

 export type ErrorBodyDTOUrl = string | null;

-/**
-   * Machine-readable error codes carried on ``ErrorBody.code``.
-  
-  **Extensible set.** This enum is the single source of truth for every code
-  the backend can emit, on both the REST envelope and the SSE ``ErrorEvent``.
-  It is published in the OpenAPI schema (and therefore the generated TS
-  client) so clients get autocomplete and a typed discriminant. The set is
-  expected to *grow*: adding a member is a backward-compatible change (the
-  wire is still a plain JSON string), so clients MUST treat unknown codes
-  gracefully — branch on the codes they handle and keep a default fallback,
-  never hard-reject an unrecognized value. Re-exported from ``app.errors``
-  for convenience; ``AssistantError(code=...)`` requires a member of this
-  enum so a typo can never reach a client.
-   */
-export enum ErrorCodeDTO {
-	missing_signoz_url = 'missing_signoz_url',
-	invalid_signoz_url = 'invalid_signoz_url',
-	invalid_content_length = 'invalid_content_length',
-	invalid_fork_target = 'invalid_fork_target',
-	rate_limit_override_exceeds_ceiling = 'rate_limit_override_exceeds_ceiling',
-	thread_message_limit = 'thread_message_limit',
-	validation_error = 'validation_error',
-	missing_token = 'missing_token',
-	invalid_token = 'invalid_token',
-	permission_denied = 'permission_denied',
-	user_disabled = 'user_disabled',
-	org_disabled = 'org_disabled',
-	thread_not_found = 'thread_not_found',
-	message_not_found = 'message_not_found',
-	execution_not_found = 'execution_not_found',
-	approval_not_found = 'approval_not_found',
-	clarification_not_found = 'clarification_not_found',
-	action_metadata_not_found = 'action_metadata_not_found',
-	user_not_found = 'user_not_found',
-	region_not_configured = 'region_not_configured',
-	thread_busy = 'thread_busy',
-	thread_has_active_execution = 'thread_has_active_execution',
-	no_active_execution = 'no_active_execution',
-	approval_superseded = 'approval_superseded',
-	clarification_superseded = 'clarification_superseded',
-	undo_conflict = 'undo_conflict',
-	revert_conflict = 'revert_conflict',
-	revert_expired = 'revert_expired',
-	restore_expired = 'restore_expired',
-	connection_limit_exceeded = 'connection_limit_exceeded',
-	hourly_message_limit = 'hourly_message_limit',
-	daily_message_limit = 'daily_message_limit',
-	daily_token_limit = 'daily_token_limit',
-	daily_cost_limit = 'daily_cost_limit',
-	upstream_auth_error = 'upstream_auth_error',
-	max_turns_exceeded = 'max_turns_exceeded',
-	budget_exceeded = 'budget_exceeded',
-	agent_execution_error = 'agent_execution_error',
-	cli_not_found = 'cli_not_found',
-	cli_connection_error = 'cli_connection_error',
-	cli_process_error = 'cli_process_error',
-	sandbox_unavailable = 'sandbox_unavailable',
-	mcp_unavailable = 'mcp_unavailable',
-	internal_error = 'internal_error',
-	region_unreachable = 'region_unreachable',
-	heartbeat_expired = 'heartbeat_expired',
-	replay_unavailable = 'replay_unavailable',
-}
 /**
 * Inner error object — matches Go ErrorsJSON.
 */
 export interface ErrorBodyDTO {
-	code: ErrorCodeDTO;
+	/**
+	 * @type string
+	 * @pattern ^[a-z_]+$
+	 */
+	code: string;
 	/**
 	 * @type string
 	 */
@@ -568,23 +490,6 @@ export type MessageActionDTOQuery = MessageActionDTOQueryAnyOf | null;

 export type MessageActionDTOUrl = string | null;

-/**
-   * Explorer namespace a saved view belongs to — its ``sourcePage``.
-  
-  Mirrors the SigNoz product's saved-view ``sourcePage`` values so the
-  frontend can route an ``open_resource`` action for a view to the right
-  Explorer via its existing ``SOURCEPAGE_VS_ROUTES`` map. ``meter`` is the
-  Cost Meter Explorer and is intentionally distinct from ``metrics`` (the
-  product persists and lists meter views under ``sourcePage="meter"``).
-   */
-export enum SavedViewEntityDTO {
-	logs = 'logs',
-	traces = 'traces',
-	metrics = 'metrics',
-	meter = 'meter',
-}
-export type MessageActionDTOEntity = SavedViewEntityDTO | null;
-
 export enum MessageActionKindDTO {
 	undo = 'undo',
 	revert = 'revert',
@@ -595,7 +500,7 @@ export enum MessageActionKindDTO {
 	apply_filter = 'apply_filter',
 }
 /**
- * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url. open_resource for a saved view also carries entity (logs/traces/metrics/meter) so the frontend routes to the correct Explorer.
+ * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
 */
 export interface MessageActionDTO {
 	kind: MessageActionKindDTO;
@@ -612,7 +517,6 @@ export interface MessageActionDTO {
 	signal?: MessageActionDTOSignal;
 	query?: MessageActionDTOQuery;
 	url?: MessageActionDTOUrl;
-	entity?: MessageActionDTOEntity;
 }

 export enum MessageContentTypeDTO {
@@ -686,26 +590,6 @@ export interface MessageSummaryDTO {
 	updatedAt: string;
 }

-export enum PageTypeDTO {
-	homepage = 'homepage',
-	dashboard_detail = 'dashboard_detail',
-	dashboard_list = 'dashboard_list',
-	panel_edit = 'panel_edit',
-	panel_fullscreen = 'panel_fullscreen',
-	logs_explorer = 'logs_explorer',
-	log_detail = 'log_detail',
-	traces_explorer = 'traces_explorer',
-	trace_detail = 'trace_detail',
-	metrics_explorer = 'metrics_explorer',
-	service_detail = 'service_detail',
-	services_list = 'services_list',
-	alert_edit = 'alert_edit',
-	alert_list = 'alert_list',
-	alert_new = 'alert_new',
-	alerts_triggered = 'alerts_triggered',
-	infra_entity_detail = 'infra_entity_detail',
-	other = 'other',
-}
 export enum ReadinessChecksDTODatabase {
 	ok = 'ok',
 	failed = 'failed',
@@ -1106,10 +990,8 @@ export type MessageActionEventDTOQuery = MessageActionEventDTOQueryAnyOf | null;

 export type MessageActionEventDTOUrl = string | null;

-export type MessageActionEventDTOEntity = SavedViewEntityDTO | null;
-
 /**
- * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url. open_resource for a saved view also carries entity (logs/traces/metrics/meter) so the frontend routes to the correct Explorer.
+ * Assistant action. Kind-specific requirements: rollback actions require actionMetadataId/resourceType/resourceId; follow_up requires input.intent; open_resource requires resourceType/resourceId; apply_filter requires signal and query; open_docs requires a SigNoz docs url.
 */
 export interface MessageActionEventDTO {
 	kind: MessageActionKindDTO;
@@ -1126,7 +1008,6 @@ export interface MessageActionEventDTO {
 	signal?: MessageActionEventDTOSignal;
 	query?: MessageActionEventDTOQuery;
 	url?: MessageActionEventDTOUrl;
-	entity?: MessageActionEventDTOEntity;
 }

 export type MessageEventDTOActions = MessageActionEventDTO[] | null;
@@ -1504,21 +1385,3 @@ export type GetUsageApiV1AssistantUsageGetHeaders = {
 	 */
 	'X-SigNoz-URL'?: string | null;
 };
-
-export type GetChipsApiV1AssistantEmptyStateChipsGetParams = {
-	/**
-	 * @description Frontend-declared page type. Typed as an enum, but unrecognized values are coerced to 'other' (not rejected) so a new frontend page type works before the backend knows it. The page type alone identifies the focused entity (e.g. trace_detail) for the 'Explain this …' chip; the agent reads the concrete entity from page context once a chip is clicked, so no separate entity id is needed.
-	 */
-	page_type: PageTypeDTO;
-};
-
-export type GetChipsApiV1AssistantEmptyStateChipsGetHeaders = {
-	/**
-	 * @description SigNoz auth token (Bearer or raw JWT)
-	 */
-	authorization?: string | null;
-	/**
-	 * @description SigNoz instance base URL for multi-tenant deployments. Falls back to SIGNOZ_API_URL env var when omitted.
-	 */
-	'X-SigNoz-URL'?: string | null;
-};
--- a/frontend/src/api/generated/services/dashboard/index.ts
+++ b/frontend/src/api/generated/services/dashboard/index.ts
@@ -18,20 +18,15 @@ import type {
 } from 'react-query';

 import type {
-	CloneDashboardV2201,
-	CloneDashboardV2PathParameters,
 	CreateDashboardV2201,
-	CreateDashboardView201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
 	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
-	DashboardtypesPostableDashboardViewDTO,
 	DashboardtypesPostablePublicDashboardDTO,
 	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeleteDashboardV2PathParameters,
-	DeleteDashboardViewPathParameters,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
 	GetDashboardV2PathParameters,
@@ -41,7 +36,6 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
-	ListDashboardViews200,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
 	ListDashboardsV2200,
@@ -55,8 +49,6 @@ import type {
 	UnpinDashboardV2PathParameters,
 	UpdateDashboardV2200,
 	UpdateDashboardV2PathParameters,
-	UpdateDashboardView200,
-	UpdateDashboardViewPathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';

@@ -71,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,
@@ -354,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' },
@@ -656,354 +648,6 @@ export const invalidateGetPublicDashboardWidgetQueryRange = async (
 	return queryClient;
 };

-/**
- * Returns every saved view in the calling user's org. Saved views are shared org-wide.
- * @summary List dashboard saved views
- */
-export const listDashboardViews = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListDashboardViews200>({
-		url: `/api/v2/dashboard_views`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListDashboardViewsQueryKey = () => {
-	return [`/api/v2/dashboard_views`] as const;
-};
-
-export const getListDashboardViewsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listDashboardViews>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listDashboardViews>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListDashboardViewsQueryKey();
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listDashboardViews>>
-	> = ({ signal }) => listDashboardViews(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listDashboardViews>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListDashboardViewsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listDashboardViews>>
->;
-export type ListDashboardViewsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List dashboard saved views
- */
-
-export function useListDashboardViews<
-	TData = Awaited<ReturnType<typeof listDashboardViews>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listDashboardViews>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListDashboardViewsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List dashboard saved views
- */
-export const invalidateListDashboardViews = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListDashboardViewsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Persists the calling user's dashboard listing state (query, sort, order) as a named, reusable view shared across the org.
- * @summary Create dashboard saved view
- */
-export const createDashboardView = (
-	dashboardtypesPostableDashboardViewDTO?: BodyType<DashboardtypesPostableDashboardViewDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateDashboardView201>({
-		url: `/api/v2/dashboard_views`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesPostableDashboardViewDTO,
-		signal,
-	});
-};
-
-export const getCreateDashboardViewMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createDashboardView>>,
-		TError,
-		{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createDashboardView>>,
-	TError,
-	{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
-	TContext
-> => {
-	const mutationKey = ['createDashboardView'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createDashboardView>>,
-		{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createDashboardView(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateDashboardViewMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createDashboardView>>
->;
-export type CreateDashboardViewMutationBody =
-	| BodyType<DashboardtypesPostableDashboardViewDTO>
-	| undefined;
-export type CreateDashboardViewMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create dashboard saved view
- */
-export const useCreateDashboardView = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createDashboardView>>,
-		TError,
-		{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createDashboardView>>,
-	TError,
-	{ data?: BodyType<DashboardtypesPostableDashboardViewDTO> },
-	TContext
-> => {
-	return useMutation(getCreateDashboardViewMutationOptions(options));
-};
-/**
- * Removes a saved view. Saved views are shared org-wide. Deleting a non-existent view returns 404.
- * @summary Delete dashboard saved view
- */
-export const deleteDashboardView = (
-	{ id }: DeleteDashboardViewPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/dashboard_views/${id}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteDashboardViewMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteDashboardView>>,
-		TError,
-		{ pathParams: DeleteDashboardViewPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteDashboardView>>,
-	TError,
-	{ pathParams: DeleteDashboardViewPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteDashboardView'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteDashboardView>>,
-		{ pathParams: DeleteDashboardViewPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteDashboardView(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteDashboardViewMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteDashboardView>>
->;
-
-export type DeleteDashboardViewMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete dashboard saved view
- */
-export const useDeleteDashboardView = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteDashboardView>>,
-		TError,
-		{ pathParams: DeleteDashboardViewPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteDashboardView>>,
-	TError,
-	{ pathParams: DeleteDashboardViewPathParameters },
-	TContext
-> => {
-	return useMutation(getDeleteDashboardViewMutationOptions(options));
-};
-/**
- * Replaces a saved view's name and data. Saved views are shared org-wide.
- * @summary Update dashboard saved view
- */
-export const updateDashboardView = (
-	{ id }: UpdateDashboardViewPathParameters,
-	dashboardtypesPostableDashboardViewDTO?: BodyType<DashboardtypesPostableDashboardViewDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateDashboardView200>({
-		url: `/api/v2/dashboard_views/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesPostableDashboardViewDTO,
-		signal,
-	});
-};
-
-export const getUpdateDashboardViewMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardView>>,
-		TError,
-		{
-			pathParams: UpdateDashboardViewPathParameters;
-			data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateDashboardView>>,
-	TError,
-	{
-		pathParams: UpdateDashboardViewPathParameters;
-		data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateDashboardView'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateDashboardView>>,
-		{
-			pathParams: UpdateDashboardViewPathParameters;
-			data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateDashboardView(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateDashboardViewMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateDashboardView>>
->;
-export type UpdateDashboardViewMutationBody =
-	| BodyType<DashboardtypesPostableDashboardViewDTO>
-	| undefined;
-export type UpdateDashboardViewMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update dashboard saved view
- */
-export const useUpdateDashboardView = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardView>>,
-		TError,
-		{
-			pathParams: UpdateDashboardViewPathParameters;
-			data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateDashboardView>>,
-	TError,
-	{
-		pathParams: UpdateDashboardViewPathParameters;
-		data?: BodyType<DashboardtypesPostableDashboardViewDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateDashboardViewMutationOptions(options));
-};
 /**
 * Returns a page of v2-shape dashboards for the org. This is the pure, user-independent list — it carries no pin state. Use ListDashboardsForUserV2 for the personalized, pin-aware list. Supports a filter DSL (`query`), sort (`updated_at`/`created_at`/`name`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`).
 * @summary List dashboards (v2)
@@ -1192,7 +836,7 @@ export const deleteDashboardV2 = (
 	{ id }: DeleteDashboardV2PathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<void>({
+	return GeneratedAPIInstance<string>({
 		url: `/api/v2/dashboards/${id}`,
 		method: 'DELETE',
 		signal,
@@ -1562,85 +1206,6 @@ export const useUpdateDashboardV2 = <
 > => {
 	return useMutation(getUpdateDashboardV2MutationOptions(options));
 };
-/**
- * This endpoint clones an existing v2-shape dashboard. User and integration dashboards can be cloned; system dashboards are rejected. The clone keeps the source's display name, panels, and tags, but gets a freshly generated unique internal name and is always created as an unlocked user dashboard owned by the caller.
- * @summary Clone dashboard (v2)
- */
-export const cloneDashboardV2 = (
-	{ id }: CloneDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CloneDashboardV2201>({
-		url: `/api/v2/dashboards/${id}/clone`,
-		method: 'POST',
-		signal,
-	});
-};
-
-export const getCloneDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof cloneDashboardV2>>,
-		TError,
-		{ pathParams: CloneDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof cloneDashboardV2>>,
-	TError,
-	{ pathParams: CloneDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['cloneDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof cloneDashboardV2>>,
-		{ pathParams: CloneDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return cloneDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CloneDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof cloneDashboardV2>>
->;
-
-export type CloneDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Clone dashboard (v2)
- */
-export const useCloneDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof cloneDashboardV2>>,
-		TError,
-		{ pathParams: CloneDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof cloneDashboardV2>>,
-	TError,
-	{ pathParams: CloneDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getCloneDashboardV2MutationOptions(options));
-};
 /**
 * This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
 * @summary Unlock dashboard (v2)
@@ -1649,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,
@@ -1728,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,
@@ -1906,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,
@@ -1985,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,
--- a/frontend/src/api/generated/services/logs/index.ts
+++ b/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' },
--- a/frontend/src/api/generated/services/metrics/index.ts
+++ b/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' },
--- a/frontend/src/api/generated/services/role/index.ts
+++ b/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' },
--- a/frontend/src/api/generated/services/serviceaccount/index.ts
+++ b/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' },
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/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
 	 */
@@ -2645,14 +2655,6 @@ export enum CloudintegrationtypesServiceIDDTO {
 	appservice = 'appservice',
 	containerapp = 'containerapp',
 	aks = 'aks',
-	sqldatabase = 'sqldatabase',
-	sqldatabasemi = 'sqldatabasemi',
-	mysqlflexibleserver = 'mysqlflexibleserver',
-	postgresqlflexibleserver = 'postgresqlflexibleserver',
-	mongodb = 'mongodb',
-	cosmosdb = 'cosmosdb',
-	cassandradb = 'cassandradb',
-	redis = 'redis',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -3154,6 +3156,17 @@ export interface DashboardLinkDTO {
 	url?: string;
 }

+export interface DashboardPanelDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+}
+
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3879,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',
 }
@@ -4438,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',
 }
@@ -4564,7 +4572,7 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display: DashboardtypesDisplayDTO;
+	display?: VariableDisplayDTO;
 	/**
 	 * @type string
 	 */
@@ -4606,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
 	 */
@@ -4630,55 +4638,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	variables: DashboardtypesVariableDTO[];
-}
-
-export enum DashboardtypesListOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export enum DashboardtypesListSortDTO {
-	updated_at = 'updated_at',
-	created_at = 'created_at',
-	name = 'name',
-}
-export interface DashboardtypesDashboardViewDataDTO {
-	order?: DashboardtypesListOrderDTO;
-	/**
-	 * @type string
-	 */
-	query?: string;
-	sort?: DashboardtypesListSortDTO;
-	/**
-	 * @type string
-	 */
-	version: string;
-}
-
-export interface DashboardtypesDashboardViewDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	data: DashboardtypesDashboardViewDataDTO;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
+	variables?: DashboardtypesVariableDTO[];
 }

 export enum DashboardtypesDatasourcePluginKindDTO {
@@ -4792,8 +4752,17 @@ export interface DashboardtypesJSONPatchOperationDTO {
 	value?: unknown;
 }

+export enum DashboardtypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum DashboardtypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+}
 export interface DashboardtypesListedDashboardV2SpecDTO {
-	display?: DashboardtypesDisplayDTO;
+	display?: CommonDisplayDTO;
 }

 export interface DashboardtypesListedDashboardForUserV2DTO {
@@ -4934,13 +4903,6 @@ export interface DashboardtypesListableDashboardV2DTO {
 	total: number;
 }

-export interface DashboardtypesListableDashboardViewDTO {
-	/**
-	 * @type array
-	 */
-	views: DashboardtypesDashboardViewDTO[];
-}
-
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4992,14 +4954,6 @@ export interface DashboardtypesPostableDashboardV2DTO {
 	tags: TagtypesPostableTagDTO[] | null;
 }

-export interface DashboardtypesPostableDashboardViewDTO {
-	data: DashboardtypesDashboardViewDataDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
 export interface DashboardtypesPostablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -9798,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;
 };
@@ -9891,36 +9832,6 @@ export type GetUserPreference200 = {
 export type UpdateUserPreferencePathParameters = {
 	name: string;
 };
-export type ListDashboardViews200 = {
-	data: DashboardtypesListableDashboardViewDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateDashboardView201 = {
-	data: DashboardtypesDashboardViewDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteDashboardViewPathParameters = {
-	id: string;
-};
-export type UpdateDashboardViewPathParameters = {
-	id: string;
-};
-export type UpdateDashboardView200 = {
-	data: DashboardtypesDashboardViewDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListDashboardsV2Params = {
 	/**
 	 * @type string
@@ -9999,17 +9910,6 @@ export type UpdateDashboardV2200 = {
 	status: string;
 };

-export type CloneDashboardV2PathParameters = {
-	id: string;
-};
-export type CloneDashboardV2201 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type UnlockDashboardV2PathParameters = {
 	id: string;
 };
--- a/frontend/src/api/generated/services/stats/index.ts
+++ b/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;
-};
--- a/frontend/src/api/saveView/getViewById.ts
+++ b/frontend/src/api/saveView/getViewById.ts
@@ -1,24 +0,0 @@
-import axios from 'api';
-import { AxiosResponse } from 'axios';
-import { ViewProps } from 'types/api/saveViews/types';
-
-/**
- * Fetches a single saved view by ID (`GET /api/v1/explorer/views/{viewId}`).
- *
- * Hand-maintained alongside the other `api/saveView/*` clients — explorer views
- * are not in `docs/api/openapi.yml`, so Orval does not generate a hook here
- * (unlike e.g. `useGetChannelByID` under `api/generated/services/channels`).
- *
- * Used by the AI assistant "Open view" action to load `compositeQuery` and
- * navigate to the correct explorer without listing every view per source page.
- * See `container/AIAssistant/components/ActionsSection/utils/openSavedView.ts`.
- */
-export interface GetViewByIdProps {
-	status: string;
-	data: ViewProps;
-}
-
-export const getViewById = (
-	viewKey: string,
-): Promise<AxiosResponse<GetViewByIdProps>> =>
-	axios.get(`/explorer/views/${viewKey}`);
--- a/frontend/src/constants/env.ts
+++ b/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',
 };
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -38,8 +38,8 @@ export enum LOCALSTORAGE {
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
-	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
+	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/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',
@@ -113,7 +112,4 @@ export const REACT_QUERY_KEY = {

 	// Fields Selector Query Keys
 	GET_FIELDS_SELECTOR_SUGGESTIONS: 'GET_FIELDS_SELECTOR_SUGGESTIONS',
-
-	// AI Assistant Query Keys
-	AI_ASSISTANT_EMPTY_STATE_CHIPS: 'AI_ASSISTANT_EMPTY_STATE_CHIPS',
 } as const;
--- a/frontend/src/constants/routes.ts
+++ b/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;
--- a/frontend/src/container/AIAssistant/tests/getAutoContexts.test.ts
+++ b/frontend/src/container/AIAssistant/tests/getAutoContexts.test.ts
@@ -1,150 +0,0 @@
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-
-import { getAutoContexts } from '../getAutoContexts';
-
-describe('getAutoContexts', () => {
-	it('returns alert detail context on alert overview with ruleId', () => {
-		const ruleId = 'rule-abc';
-		const search = `?${QueryParams.ruleId}=${ruleId}&${QueryParams.relativeTime}=1h`;
-
-		const contexts = getAutoContexts(ROUTES.ALERT_OVERVIEW, search);
-
-		expect(contexts).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: ruleId,
-				metadata: {
-					page: 'alert_detail',
-					ruleId,
-				},
-			},
-		]);
-	});
-
-	it('returns alert detail context on alert history with ruleId', () => {
-		const ruleId = 'rule-xyz';
-		const startTime = '1700000000000';
-		const endTime = '1700003600000';
-		const search = `?${QueryParams.ruleId}=${ruleId}&${QueryParams.startTime}=${startTime}&${QueryParams.endTime}=${endTime}`;
-
-		const contexts = getAutoContexts(ROUTES.ALERT_HISTORY, search);
-
-		expect(contexts).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: ruleId,
-				metadata: {
-					page: 'alert_detail',
-					ruleId,
-					timeRange: {
-						start: Number(startTime),
-						end: Number(endTime),
-					},
-				},
-			},
-		]);
-	});
-
-	it('returns triggered alerts context on alert history without ruleId', () => {
-		const contexts = getAutoContexts(ROUTES.ALERT_HISTORY, '');
-
-		expect(contexts).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: null,
-				metadata: {
-					page: 'alerts_triggered',
-				},
-			},
-		]);
-	});
-
-	it('resolves alert list tabs on /alerts', () => {
-		expect(getAutoContexts(ROUTES.LIST_ALL_ALERT, '')).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: null,
-				metadata: { page: 'alert_list' },
-			},
-		]);
-
-		expect(
-			getAutoContexts(ROUTES.LIST_ALL_ALERT, '?tab=AlertRules'),
-		).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: null,
-				metadata: { page: 'alert_list' },
-			},
-		]);
-
-		expect(
-			getAutoContexts(ROUTES.LIST_ALL_ALERT, '?tab=TriggeredAlerts'),
-		).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: null,
-				metadata: { page: 'alerts_triggered' },
-			},
-		]);
-
-		expect(
-			getAutoContexts(ROUTES.LIST_ALL_ALERT, '?tab=Configuration'),
-		).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'alert',
-				resourceId: null,
-				metadata: { page: 'alert_list' },
-			},
-		]);
-	});
-
-	it('returns dashboard detail context on dashboard page', () => {
-		const dashboardId = 'dash-123';
-		const pathname = ROUTES.DASHBOARD.replace(':dashboardId', dashboardId);
-
-		const contexts = getAutoContexts(pathname, '');
-
-		expect(contexts).toStrictEqual([
-			{
-				source: 'auto',
-				type: 'dashboard',
-				resourceId: dashboardId,
-				metadata: {
-					page: 'dashboard_detail',
-				},
-			},
-		]);
-	});
-
-	it('returns empty array on alert overview without ruleId', () => {
-		const contexts = getAutoContexts(ROUTES.ALERT_OVERVIEW, '');
-
-		expect(contexts).toStrictEqual([]);
-	});
-
-	it('emits no auto-context on /home (no attachable resource)', () => {
-		expect(getAutoContexts(ROUTES.HOME, '')).toStrictEqual([]);
-	});
-
-	it('emits no auto-context on infrastructure monitoring routes', () => {
-		expect(
-			getAutoContexts(ROUTES.INFRASTRUCTURE_MONITORING_BASE, ''),
-		).toStrictEqual([]);
-
-		expect(
-			getAutoContexts(
-				ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-				'?selectedItem=host-1',
-			),
-		).toStrictEqual([]);
-	});
-});
--- a/frontend/src/container/AIAssistant/tests/resolvePageType.test.ts
+++ b/frontend/src/container/AIAssistant/tests/resolvePageType.test.ts
@@ -1,87 +0,0 @@
-import { PageTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-
-import { resolvePageType } from '../resolvePageType';
-
-describe('resolvePageType', () => {
-	it('returns other for the standalone assistant surface', () => {
-		expect(
-			resolvePageType('/services', '', { isStandaloneAssistant: true }),
-		).toBe(PageTypeDTO.other);
-	});
-
-	it('returns dashboard_detail on a dashboard page', () => {
-		const pathname = ROUTES.DASHBOARD.replace(':dashboardId', 'dash-123');
-
-		expect(resolvePageType(pathname, '')).toBe(PageTypeDTO.dashboard_detail);
-	});
-
-	it('returns alerts_triggered on alert history without ruleId', () => {
-		expect(resolvePageType(ROUTES.ALERT_HISTORY, '')).toBe(
-			PageTypeDTO.alerts_triggered,
-		);
-	});
-
-	it('resolves alert list tabs on /alerts', () => {
-		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '')).toBe(
-			PageTypeDTO.alert_list,
-		);
-		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=AlertRules')).toBe(
-			PageTypeDTO.alert_list,
-		);
-		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=TriggeredAlerts')).toBe(
-			PageTypeDTO.alerts_triggered,
-		);
-		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=Configuration')).toBe(
-			PageTypeDTO.alert_list,
-		);
-	});
-
-	it('returns log_detail when logs explorer has activeLogId', () => {
-		const search = `?${QueryParams.activeLogId}=log-1`;
-
-		expect(resolvePageType(ROUTES.LOGS_EXPLORER, search)).toBe(
-			PageTypeDTO.log_detail,
-		);
-	});
-
-	it('returns other for unmapped routes', () => {
-		expect(resolvePageType(ROUTES.ALERT_OVERVIEW, '')).toBe(PageTypeDTO.other);
-	});
-
-	it('returns other for the app root route (no contextual mapping)', () => {
-		expect(resolvePageType(ROUTES.HOME_PAGE, '')).toBe(PageTypeDTO.other);
-	});
-
-	it('returns homepage on /home', () => {
-		expect(resolvePageType(ROUTES.HOME, '')).toBe(PageTypeDTO.homepage);
-	});
-
-	it('returns infra_entity_detail on infrastructure monitoring routes', () => {
-		expect(resolvePageType(ROUTES.INFRASTRUCTURE_MONITORING_BASE, '')).toBe(
-			PageTypeDTO.infra_entity_detail,
-		);
-		expect(resolvePageType(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS, '')).toBe(
-			PageTypeDTO.infra_entity_detail,
-		);
-		expect(resolvePageType(ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES, '')).toBe(
-			PageTypeDTO.infra_entity_detail,
-		);
-	});
-
-	it('returns metrics_explorer on all metrics explorer routes', () => {
-		expect(resolvePageType(ROUTES.METRICS_EXPLORER_BASE, '')).toBe(
-			PageTypeDTO.metrics_explorer,
-		);
-		expect(resolvePageType(ROUTES.METRICS_EXPLORER, '')).toBe(
-			PageTypeDTO.metrics_explorer,
-		);
-		expect(resolvePageType(ROUTES.METRICS_EXPLORER_EXPLORER, '')).toBe(
-			PageTypeDTO.metrics_explorer,
-		);
-		expect(resolvePageType(ROUTES.METRICS_EXPLORER_VIEWS, '')).toBe(
-			PageTypeDTO.metrics_explorer,
-		);
-	});
-});
--- a/frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx
+++ b/frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx
@@ -47,15 +47,6 @@ import { AIAssistantEvents, SuggestedPromptCategory } from '../../events';
 import { useAIAssistantAnalyticsContext } from '../../hooks/useAIAssistantAnalyticsContext';
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';

-import { openSavedViewByKey } from './utils/openSavedView';
-import {
-	isSavedViewOpenAction,
-	resolveOpenResourceType,
-	resolveResourceId,
-	resolveSavedViewSourceHint,
-} from './utils/resolveOpenResource';
-import { ResourceType, resourceRoute } from './utils/resourceRoute';
-
 import styles from './ActionsSection.module.scss';

 interface ActionsSectionProps {
@@ -64,6 +55,20 @@ interface ActionsSectionProps {
 	messageId: string;
 }

+/**
+ * Resource-type strings the backend uses for `open_resource` and rollback
+ * actions. Centralized here so the route/module lookups below stay in sync.
+ */
+const ResourceType = {
+	dashboard: 'dashboard',
+	alert: 'alert',
+	service: 'service',
+	saved_view: 'saved_view',
+	logs_explorer: 'logs_explorer',
+	traces_explorer: 'traces_explorer',
+	metrics_explorer: 'metrics_explorer',
+} as const;
+
 /** Maps an open_resource action's resourceType to its product module name. */
 function targetModuleForResource(resourceType: string): string | null {
 	switch (resourceType) {
@@ -73,8 +78,6 @@ function targetModuleForResource(resourceType: string): string | null {
 			return 'alerts';
 		case ResourceType.service:
 			return 'apm';
-		case ResourceType.channel:
-			return 'channels';
 		case ResourceType.saved_view:
 			return 'savedViews';
 		case ResourceType.logs_explorer:
@@ -137,6 +140,39 @@ function ActionIcon({
 	}
 }

+/**
+ * Resolves an `open_resource` action to an in-app route.
+ * Resource taxonomy mirrors `MessageContextDTOType`: dashboard, alert,
+ * saved_view, service, and the *_explorer signals.
+ */
+function resourceRoute(
+	resourceType: string,
+	resourceId: string,
+): string | null {
+	switch (resourceType) {
+		case ResourceType.dashboard:
+			return ROUTES.DASHBOARD.replace(':dashboardId', resourceId);
+		case ResourceType.alert: {
+			const params = new URLSearchParams({ [QueryParams.ruleId]: resourceId });
+			return `${ROUTES.EDIT_ALERTS}?${params.toString()}`;
+		}
+		case ResourceType.service:
+			return ROUTES.SERVICE_METRICS.replace(':servicename', resourceId);
+		case ResourceType.saved_view:
+			// No detail route — saved views land on the list page.
+			// Caller may provide signal-aware metadata in future; default to logs.
+			return ROUTES.LOGS_SAVE_VIEWS;
+		case ResourceType.logs_explorer:
+			return ROUTES.LOGS_EXPLORER;
+		case ResourceType.traces_explorer:
+			return ROUTES.TRACES_EXPLORER;
+		case ResourceType.metrics_explorer:
+			return ROUTES.METRICS_EXPLORER_EXPLORER;
+		default:
+			return null;
+	}
+}
+
 /**
 * The agent emits `action.query` as the SigNoz REST query-range request body:
 *
@@ -448,35 +484,6 @@ export default function ActionsSection({
 		setResults((prev) => ({ ...prev, [key]: result }));
 	};

-	const runOpenSavedView = async (
-		key: string,
-		action: MessageActionDTO,
-	): Promise<void> => {
-		const resourceId = resolveResourceId(action);
-		if (!resourceId) {
-			return;
-		}
-		setResult(key, { state: 'loading' });
-		try {
-			await openSavedViewByKey(
-				resourceId,
-				resolveSavedViewSourceHint(action),
-				history,
-			);
-			void logEvent(AIAssistantEvents.ResourceOpened, {
-				threadId,
-				messageId,
-				targetModule: targetModuleForResource(ResourceType.saved_view),
-				resourceId,
-			});
-			setResult(key, { state: 'success' });
-		} catch (err) {
-			const message =
-				err instanceof Error ? err.message : 'Failed to open saved view';
-			setResult(key, { state: 'error', error: message });
-		}
-	};
-
 	const runRollback = async (
 		key: string,
 		action: MessageActionDTO,
@@ -495,31 +502,6 @@ export default function ActionsSection({
 		}
 	};

-	const handleOpenResource = (key: string, action: MessageActionDTO): void => {
-		if (isSavedViewOpenAction(action)) {
-			void runOpenSavedView(key, action);
-			return;
-		}
-
-		const resourceType = resolveOpenResourceType(action);
-		const resourceId = resolveResourceId(action);
-		if (!resourceType || !resourceId) {
-			return;
-		}
-
-		const path = resourceRoute(resourceType, resourceId);
-		if (!path) {
-			return;
-		}
-		void logEvent(AIAssistantEvents.ResourceOpened, {
-			threadId,
-			messageId,
-			targetModule: targetModuleForResource(resourceType),
-			resourceId,
-		});
-		history.push(path);
-	};
-
 	const handleClick = (key: string, action: MessageActionDTO): void => {
 		switch (action.kind) {
 			case MessageActionKindDTO.open_docs: {
@@ -560,9 +542,21 @@ export default function ActionsSection({
 				}
 				break;
 			}
-			case MessageActionKindDTO.open_resource:
-				handleOpenResource(key, action);
+			case MessageActionKindDTO.open_resource: {
+				if (action.resourceType && action.resourceId) {
+					const path = resourceRoute(action.resourceType, action.resourceId);
+					if (path) {
+						void logEvent(AIAssistantEvents.ResourceOpened, {
+							threadId,
+							messageId,
+							targetModule: targetModuleForResource(action.resourceType),
+							resourceId: action.resourceId,
+						});
+						history.push(path);
+					}
+				}
 				break;
+			}
 			case MessageActionKindDTO.undo:
 			case MessageActionKindDTO.revert:
 			case MessageActionKindDTO.restore: {
--- a/frontend/src/container/AIAssistant/components/ActionsSection/utils/tests/openSavedView.test.ts
+++ b/frontend/src/container/AIAssistant/components/ActionsSection/utils/tests/openSavedView.test.ts
@@ -1,283 +0,0 @@
-import {
-	ApplyFilterSignalDTO,
-	MessageActionKindDTO,
-	SavedViewEntityDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
-import ROUTES from 'constants/routes';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
-import { AllViewsProps, ViewProps } from 'types/api/saveViews/types';
-import { DataSource } from 'types/common/queryBuilder';
-import { AxiosResponse } from 'axios';
-import type { History } from 'history';
-
-import {
-	buildExplorerNavigationUrl,
-	findSavedViewInLists,
-	openSavedView,
-	openSavedViewByKey,
-} from '../openSavedView';
-import {
-	entityToDataSource,
-	isSavedViewOpenAction,
-	resolveActionEntity,
-	resolveOpenResourceType,
-	resolveResourceId,
-	resolveResourceType,
-	resolveSavedViewSourceHint,
-} from '../resolveOpenResource';
-import { resourceRoute, ResourceType } from '../resourceRoute';
-
-jest.mock('api/saveView/getAllViews');
-jest.mock('api/saveView/getViewById');
-
-jest.mock(
-	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
-	() => ({
-		mapQueryDataFromApi: jest.fn(() => ({
-			queryType: 'builder',
-			builder: {
-				queryData: [{ id: 'A' }],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		})),
-	}),
-);
-
-const mockedGetAllViews = getAllViews as jest.MockedFunction<
-	typeof getAllViews
->;
-const mockedGetViewById = getViewById as jest.MockedFunction<
-	typeof getViewById
->;
-
-function makeView(id: string, sourcePage: DataSource): ViewProps {
-	return {
-		id,
-		name: `View ${id}`,
-		category: 'test',
-		createdAt: '2021-07-07T06:31:00.000Z',
-		createdBy: 'user',
-		updatedAt: '2021-07-07T06:33:00.000Z',
-		updatedBy: 'user',
-		sourcePage,
-		tags: [],
-		extraData: '',
-		compositeQuery: {
-			panelType: PANEL_TYPES.LIST,
-		} as ICompositeMetricQuery,
-	};
-}
-
-function mockViewsResponse(views: ViewProps[]): AxiosResponse<AllViewsProps> {
-	return {
-		data: { status: 'success', data: views },
-	} as AxiosResponse<AllViewsProps>;
-}
-
-function mockViewByIdResponse(
-	view: ViewProps,
-): AxiosResponse<{ status: string; data: ViewProps }> {
-	return {
-		data: { status: 'success', data: view },
-	} as AxiosResponse<{ status: string; data: ViewProps }>;
-}
-
-describe('resourceRoute', () => {
-	it('returns null for saved_view so async navigation is used', () => {
-		expect(resourceRoute(ResourceType.saved_view, 'view-123')).toBeNull();
-	});
-
-	it('routes channels to the edit page', () => {
-		expect(resourceRoute(ResourceType.channel, 'channel-uuid-1')).toBe(
-			'/settings/channels/edit/channel-uuid-1',
-		);
-	});
-});
-
-describe('resolveOpenResource', () => {
-	it('reads entity from the action envelope', () => {
-		expect(
-			resolveActionEntity({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open view',
-				entity: SavedViewEntityDTO.traces,
-			}),
-		).toBe(SavedViewEntityDTO.traces);
-	});
-
-	it('reads resource id from input.viewKey', () => {
-		expect(
-			resolveResourceId({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open view',
-				input: { viewKey: 'abc-123' },
-			}),
-		).toBe('abc-123');
-	});
-
-	it('maps entity values to explorer data sources', () => {
-		expect(entityToDataSource('logs')).toBe(DataSource.LOGS);
-		expect(entityToDataSource('logs_explorer')).toBe(DataSource.LOGS);
-		expect(entityToDataSource('traces')).toBe(DataSource.TRACES);
-	});
-
-	it('prefers entity over signal for saved-view source hints', () => {
-		expect(
-			resolveSavedViewSourceHint({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open view',
-				entity: SavedViewEntityDTO.traces,
-				signal: ApplyFilterSignalDTO.logs,
-			}),
-		).toBe(DataSource.TRACES);
-	});
-
-	it('falls back to signal when entity is absent', () => {
-		expect(
-			resolveSavedViewSourceHint({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open view',
-				signal: ApplyFilterSignalDTO.metrics,
-			}),
-		).toBe(DataSource.METRICS);
-	});
-
-	it('normalises saved-view resource types', () => {
-		expect(
-			resolveResourceType({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open view',
-				resourceType: 'saved-view',
-			}),
-		).toBe(ResourceType.saved_view);
-	});
-
-	it('detects open-view actions from label when id is present in input', () => {
-		expect(
-			isSavedViewOpenAction({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open view',
-				input: { viewId: 'view-1' },
-			}),
-		).toBe(true);
-	});
-
-	it('resolves channel type from notification_channel alias', () => {
-		expect(
-			resolveResourceType({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open channel',
-				resourceType: 'notification_channel',
-			}),
-		).toBe(ResourceType.channel);
-	});
-
-	it('infers channel type from Open channel label when resourceId is present', () => {
-		expect(
-			resolveOpenResourceType({
-				kind: MessageActionKindDTO.open_resource,
-				label: 'Open channel',
-				resourceId: 'channel-1',
-			}),
-		).toBe(ResourceType.channel);
-	});
-});
-
-describe('findSavedViewInLists', () => {
-	beforeEach(() => {
-		mockedGetAllViews.mockReset();
-	});
-
-	it('loads only the hinted source when entity is provided', async () => {
-		const tracesView = makeView('view-traces', DataSource.TRACES);
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([tracesView]));
-
-		const result = await findSavedViewInLists('view-traces', DataSource.TRACES);
-
-		expect(result).toStrictEqual(tracesView);
-		expect(mockedGetAllViews).toHaveBeenCalledTimes(1);
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
-	});
-});
-
-describe('buildExplorerNavigationUrl', () => {
-	it('encodes composite query and view selectors', () => {
-		const url = buildExplorerNavigationUrl(
-			ROUTES.LOGS_EXPLORER,
-			{ queryType: 'builder' } as never,
-			{
-				[QueryParams.panelTypes]: PANEL_TYPES.LIST,
-				[QueryParams.viewName]: 'My view',
-				[QueryParams.viewKey]: 'view-1',
-			},
-		);
-
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-		expect(url).toContain(`${QueryParams.compositeQuery}=`);
-		expect(url).toContain(`${QueryParams.viewKey}=`);
-	});
-});
-
-describe('openSavedView', () => {
-	it('navigates with history.push and view query params', () => {
-		const push = jest.fn();
-		const history = { push } as unknown as History;
-		const view = makeView('view-logs', DataSource.LOGS);
-
-		openSavedView(view, history);
-
-		expect(push).toHaveBeenCalledTimes(1);
-		const pushedUrl = push.mock.calls[0][0] as string;
-		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
-		expect(pushedUrl).toContain(QueryParams.viewKey);
-	});
-});
-
-describe('openSavedViewByKey', () => {
-	beforeEach(() => {
-		mockedGetAllViews.mockReset();
-		mockedGetViewById.mockReset();
-	});
-
-	it('prefers the direct view lookup endpoint', async () => {
-		const view = makeView('view-logs', DataSource.LOGS);
-		mockedGetViewById.mockResolvedValueOnce(mockViewByIdResponse(view));
-		const push = jest.fn();
-		const history = { push } as unknown as History;
-
-		await openSavedViewByKey('view-logs', DataSource.LOGS, history);
-
-		expect(mockedGetViewById).toHaveBeenCalledWith('view-logs');
-		expect(mockedGetAllViews).not.toHaveBeenCalled();
-		expect(push).toHaveBeenCalled();
-	});
-
-	it('falls back to list probing when direct lookup fails', async () => {
-		const view = makeView('view-traces', DataSource.TRACES);
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValueOnce(mockViewsResponse([view]));
-		const push = jest.fn();
-		const history = { push } as unknown as History;
-
-		await openSavedViewByKey('view-traces', DataSource.TRACES, history);
-
-		expect(mockedGetAllViews).toHaveBeenCalledWith(DataSource.TRACES);
-		expect(push).toHaveBeenCalled();
-	});
-
-	it('throws when the saved view does not exist', async () => {
-		mockedGetViewById.mockRejectedValueOnce(new Error('not found'));
-		mockedGetAllViews.mockResolvedValue(mockViewsResponse([]));
-
-		await expect(
-			openSavedViewByKey('missing', DataSource.LOGS, {
-				push: jest.fn(),
-			} as unknown as History),
-		).rejects.toThrow('Saved view not found');
-	});
-});
--- a/frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts
+++ b/frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts
@@ -1,117 +0,0 @@
-import { getAllViews } from 'api/saveView/getAllViews';
-import { getViewById } from 'api/saveView/getViewById';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
-import { ViewProps } from 'types/api/saveViews/types';
-import { DataSource } from 'types/common/queryBuilder';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { History } from 'history';
-
-type SavedViewSourceHint = DataSource | 'meter';
-
-const DEFAULT_PROBE_SOURCES: SavedViewSourceHint[] = [
-	DataSource.LOGS,
-	DataSource.TRACES,
-	DataSource.METRICS,
-];
-
-export async function findSavedViewInLists(
-	viewKey: string,
-	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps | null> {
-	const sources = sourceHint ? [sourceHint] : DEFAULT_PROBE_SOURCES;
-
-	for (const source of sources) {
-		try {
-			const response = await getAllViews(source);
-			const match = response.data.data.find((view) => view.id === viewKey);
-			if (match) {
-				return match;
-			}
-		} catch {
-			// Probe the next source page when no entity hint is provided.
-		}
-	}
-
-	return null;
-}
-
-async function loadSavedView(
-	viewKey: string,
-	sourceHint?: SavedViewSourceHint | null,
-): Promise<ViewProps> {
-	try {
-		const response = await getViewById(viewKey);
-		if (response.data?.data) {
-			return response.data.data;
-		}
-	} catch {
-		// Fall back to list probing when the direct lookup fails.
-	}
-
-	const fromList = await findSavedViewInLists(viewKey, sourceHint);
-	if (fromList) {
-		return fromList;
-	}
-
-	throw new Error('Saved view not found');
-}
-
-export function explorerRouteForSourcePage(
-	sourcePage: DataSource | string,
-): (typeof SOURCEPAGE_VS_ROUTES)[keyof typeof SOURCEPAGE_VS_ROUTES] | null {
-	return SOURCEPAGE_VS_ROUTES[sourcePage] ?? null;
-}
-
-/**
- * Builds an explorer URL the same way `redirectWithQueryBuilderData` does —
- * without inheriting stale query params from the current page's `urlQuery`.
- */
-export function buildExplorerNavigationUrl(
-	route: string,
-	query: Query,
-	searchParams: Record<string, unknown>,
-): string {
-	const params = new URLSearchParams();
-	params.set(
-		QueryParams.compositeQuery,
-		encodeURIComponent(JSON.stringify(query)),
-	);
-	Object.entries(searchParams).forEach(([key, value]) => {
-		params.set(key, JSON.stringify(value));
-	});
-	return `${route}?${params.toString()}`;
-}
-
-export function openSavedView(view: ViewProps, history: History): void {
-	const route = explorerRouteForSourcePage(view.sourcePage);
-	if (!route) {
-		throw new Error('Unsupported saved view source');
-	}
-
-	if (!view.compositeQuery) {
-		throw new Error('Saved view is missing query data');
-	}
-
-	const query = mapQueryDataFromApi(view.compositeQuery);
-	const url = buildExplorerNavigationUrl(route, query, {
-		[QueryParams.panelTypes]: view.compositeQuery.panelType as PANEL_TYPES,
-		[QueryParams.viewName]: view.name,
-		[QueryParams.viewKey]: view.id,
-	});
-	history.push(url);
-}
-
-export async function openSavedViewByKey(
-	viewKey: string,
-	sourceHint: SavedViewSourceHint | null | undefined,
-	history: History,
-): Promise<void> {
-	const view = await loadSavedView(viewKey, sourceHint);
-	openSavedView(view, history);
-}
-
-/** @deprecated Use findSavedViewInLists — kept for tests. */
-export const findSavedView = findSavedViewInLists;
--- a/frontend/src/container/AIAssistant/components/ActionsSection/utils/resolveOpenResource.ts
+++ b/frontend/src/container/AIAssistant/components/ActionsSection/utils/resolveOpenResource.ts
@@ -1,203 +0,0 @@
-import type { MessageActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import {
-	ApplyFilterSignalDTO,
-	SavedViewEntityDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { ResourceType } from './resourceRoute';
-
-function readString(value: unknown): string | null {
-	if (typeof value !== 'string') {
-		return null;
-	}
-	const trimmed = value.trim();
-	return trimmed.length > 0 ? trimmed : null;
-}
-
-/** Normalises backend resource-type strings to the taxonomy used in the UI. */
-export function normalizeResourceType(
-	resourceType: string | null | undefined,
-): string | null {
-	if (!resourceType) {
-		return null;
-	}
-
-	const normalized = resourceType.trim().toLowerCase().replace(/-/g, '_');
-	if (normalized === 'savedview') {
-		return ResourceType.saved_view;
-	}
-	if (
-		normalized === 'notification_channel' ||
-		normalized === 'notificationchannel'
-	) {
-		return ResourceType.channel;
-	}
-
-	return normalized;
-}
-
-/** Reads a resource type from the action envelope or its `input` payload. */
-export function resolveResourceType(action: MessageActionDTO): string | null {
-	const direct = normalizeResourceType(action.resourceType);
-	if (direct) {
-		return direct;
-	}
-
-	const input = action.input;
-	if (!input) {
-		return null;
-	}
-
-	return (
-		normalizeResourceType(readString(input.resourceType)) ??
-		normalizeResourceType(readString(input.type))
-	);
-}
-
-/**
- * Resolves the resource type for an `open_resource` action, including label-based
- * fallbacks when the backend only sends a display label + id.
- */
-export function resolveOpenResourceType(
-	action: MessageActionDTO,
-): string | null {
-	const fromFields = resolveResourceType(action);
-	if (fromFields) {
-		return fromFields;
-	}
-
-	if (/open\s+channel/i.test(action.label) && resolveResourceId(action)) {
-		return ResourceType.channel;
-	}
-
-	return null;
-}
-
-/** Reads a resource id from `resourceId` or common `input` keys. */
-export function resolveResourceId(action: MessageActionDTO): string | null {
-	const direct = readString(action.resourceId);
-	if (direct) {
-		return direct;
-	}
-
-	const input = action.input;
-	if (!input) {
-		return null;
-	}
-
-	for (const key of [
-		'resourceId',
-		'viewId',
-		'viewKey',
-		'channelId',
-		'id',
-	] as const) {
-		const value = readString(input[key]);
-		if (value) {
-			return value;
-		}
-	}
-
-	return null;
-}
-
-/** Reads `entity` from the action envelope or its `input` payload. */
-export function resolveActionEntity(
-	action: MessageActionDTO,
-): SavedViewEntityDTO | null {
-	if (action.entity) {
-		return action.entity;
-	}
-
-	const fromInput = readString(action.input?.entity);
-	if (!fromInput) {
-		return null;
-	}
-
-	return normalizeToSavedViewEntity(fromInput);
-}
-
-function normalizeToSavedViewEntity(value: string): SavedViewEntityDTO | null {
-	const source = entityToDataSource(value);
-	switch (source) {
-		case DataSource.LOGS:
-			return SavedViewEntityDTO.logs;
-		case DataSource.TRACES:
-			return SavedViewEntityDTO.traces;
-		case DataSource.METRICS:
-			return SavedViewEntityDTO.metrics;
-		case 'meter':
-			return SavedViewEntityDTO.meter;
-		default:
-			return null;
-	}
-}
-
-/**
- * Maps an action `entity` to an explorer `DataSource` for saved-view lookups.
- * Accepts both short (`logs`) and taxonomy (`logs_explorer`) values.
- */
-export function entityToDataSource(
-	entity: SavedViewEntityDTO | string,
-): DataSource | 'meter' | null {
-	const normalized = entity.trim().toLowerCase().replace(/-/g, '_');
-
-	switch (normalized) {
-		case SavedViewEntityDTO.logs:
-		case ResourceType.logs_explorer:
-			return DataSource.LOGS;
-		case SavedViewEntityDTO.traces:
-		case ResourceType.traces_explorer:
-			return DataSource.TRACES;
-		case SavedViewEntityDTO.metrics:
-		case ResourceType.metrics_explorer:
-			return DataSource.METRICS;
-		case SavedViewEntityDTO.meter:
-			return 'meter';
-		default:
-			return null;
-	}
-}
-
-/**
- * Picks which explorer source page to search when resolving a saved view.
- * Prefers `entity` (open_resource); falls back to `signal` only for legacy payloads.
- */
-export function resolveSavedViewSourceHint(
-	action: MessageActionDTO,
-): DataSource | 'meter' | null {
-	const entity = resolveActionEntity(action);
-	if (entity) {
-		const fromEntity = entityToDataSource(entity);
-		if (fromEntity) {
-			return fromEntity;
-		}
-	}
-
-	if (action.signal) {
-		switch (action.signal) {
-			case ApplyFilterSignalDTO.logs:
-				return DataSource.LOGS;
-			case ApplyFilterSignalDTO.traces:
-				return DataSource.TRACES;
-			case ApplyFilterSignalDTO.metrics:
-				return DataSource.METRICS;
-			default: {
-				const _exhaustive: never = action.signal;
-				return _exhaustive;
-			}
-		}
-	}
-
-	return null;
-}
-
-export function isSavedViewOpenAction(action: MessageActionDTO): boolean {
-	if (resolveResourceType(action) === ResourceType.saved_view) {
-		return true;
-	}
-
-	// Defensive: some agent payloads only set a human label + id in `input`.
-	return /open\s+view/i.test(action.label) && resolveResourceId(action) !== null;
-}
--- a/frontend/src/container/AIAssistant/components/ActionsSection/utils/resourceRoute.ts
+++ b/frontend/src/container/AIAssistant/components/ActionsSection/utils/resourceRoute.ts
@@ -1,50 +0,0 @@
-import ROUTES from 'constants/routes';
-import { QueryParams } from 'constants/query';
-
-/**
- * Resource-type strings the backend uses for `open_resource` and rollback
- * actions. Centralized here so route/module lookups stay in sync.
- */
-export const ResourceType = {
-	dashboard: 'dashboard',
-	alert: 'alert',
-	service: 'service',
-	channel: 'channel',
-	saved_view: 'saved_view',
-	logs_explorer: 'logs_explorer',
-	traces_explorer: 'traces_explorer',
-	metrics_explorer: 'metrics_explorer',
-} as const;
-
-/**
- * Resolves an `open_resource` action to an in-app route for synchronous
- * navigation. Returns `null` for `saved_view` — callers must load the view
- * by id and navigate with query-builder state instead.
- */
-export function resourceRoute(
-	resourceType: string,
-	resourceId: string,
-): string | null {
-	switch (resourceType) {
-		case ResourceType.dashboard:
-			return ROUTES.DASHBOARD.replace(':dashboardId', resourceId);
-		case ResourceType.alert: {
-			const params = new URLSearchParams({ [QueryParams.ruleId]: resourceId });
-			return `${ROUTES.EDIT_ALERTS}?${params.toString()}`;
-		}
-		case ResourceType.service:
-			return ROUTES.SERVICE_METRICS.replace(':servicename', resourceId);
-		case ResourceType.channel:
-			return ROUTES.CHANNELS_EDIT.replace(':channelId', resourceId);
-		case ResourceType.saved_view:
-			return null;
-		case ResourceType.logs_explorer:
-			return ROUTES.LOGS_EXPLORER;
-		case ResourceType.traces_explorer:
-			return ROUTES.TRACES_EXPLORER;
-		case ResourceType.metrics_explorer:
-			return ROUTES.METRICS_EXPLORER_EXPLORER;
-		default:
-			return null;
-	}
-}
--- a/frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx
+++ b/frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx
@@ -101,8 +101,6 @@ function autoContextLabel(ctx: MessageContext): string {
 			return 'Panel (fullscreen)';
 		case 'dashboard_list':
 			return 'Dashboards';
-		case 'alert_detail':
-			return 'Current alert';
 		case 'alert_edit':
 			return 'Editing alert';
 		case 'alert_new':
--- a/frontend/src/container/AIAssistant/components/MarkdownExternalLink/MarkdownExternalLink.tsx
+++ b/frontend/src/container/AIAssistant/components/MarkdownExternalLink/MarkdownExternalLink.tsx
@@ -1,26 +0,0 @@
-import type { ComponentProps } from 'react';
-
-type MarkdownExternalLinkProps = ComponentProps<'a'> & {
-	// react-markdown passes `node` — accept and ignore it
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	node?: any;
-};
-
-export default function MarkdownExternalLink({
-	href,
-	children,
-	node: _node,
-	...props
-}: MarkdownExternalLinkProps): JSX.Element {
-	return (
-		<a
-			href={href}
-			target="_blank"
-			rel="noopener noreferrer"
-			data-testid="ai-markdown-link"
-			{...props}
-		>
-			{children}
-		</a>
-	);
-}
--- a/frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx
+++ b/frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx
@@ -11,7 +11,6 @@ import { Message, MessageBlock } from '../../types';
 import ActionsSection from '../ActionsSection';
 import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import { RichCodeBlock } from '../blocks';
-import MarkdownExternalLink from '../MarkdownExternalLink/MarkdownExternalLink';
 import { MessageContext } from '../MessageContext';
 import MessageFeedback from '../MessageFeedback';
 import UserMessageActions from '../UserMessageActions';
@@ -38,11 +37,7 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 }

 const MD_PLUGINS = [remarkGfm];
-const MD_COMPONENTS = {
-	code: RichCodeBlock,
-	pre: SmartPre,
-	a: MarkdownExternalLink,
-};
+const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };

 type RenderGroup =
 	| { kind: 'text'; id: string; content: string }
--- a/frontend/src/container/AIAssistant/components/MessageFeedback/MessageFeedback.module.scss
+++ b/frontend/src/container/AIAssistant/components/MessageFeedback/MessageFeedback.module.scss
@@ -50,7 +50,7 @@
 	font-size: 10px;
 	color: var(--l3-foreground);
 	white-space: nowrap;
-	padding-left: 8px;
+	padding-left: 2px;
 	border-left: 1px solid var(--l2-border);
 }

--- a/frontend/src/container/AIAssistant/components/StreamingMessage/StreamingMessage.tsx
+++ b/frontend/src/container/AIAssistant/components/StreamingMessage/StreamingMessage.tsx
@@ -13,7 +13,6 @@ import { StreamingEventItem } from '../../types';
 import ActivityGroup, { ActivityItem } from '../ActivityGroup';
 import ApprovalCard from '../ApprovalCard';
 import { RichCodeBlock } from '../blocks';
-import MarkdownExternalLink from '../MarkdownExternalLink/MarkdownExternalLink';
 import ClarificationForm from '../ClarificationForm';

 import messageStyles from '../MessageBubble/MessageBubble.module.scss';
@@ -31,11 +30,7 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 }

 const MD_PLUGINS = [remarkGfm];
-const MD_COMPONENTS = {
-	code: RichCodeBlock,
-	pre: SmartPre,
-	a: MarkdownExternalLink,
-};
+const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };

 type RenderGroup =
 	| { kind: 'text'; id: string; content: string }
--- a/frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.module.scss
+++ b/frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.module.scss
@@ -45,7 +45,7 @@
 	line-height: 1.45;
 }

-.suggestions {
+.emptySuggestions {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -53,8 +53,11 @@
 	max-width: 360px;
 }

-.suggestion {
-	width: 100%;
+.emptyChip {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start !important;
+	gap: 8px;
 	padding: 10px 14px;
 	border: 1px solid var(--l2-border);
 	border-radius: var(--radius-2);
@@ -63,16 +66,21 @@
 	font-size: 12.5px;
 	text-align: left;
 	cursor: pointer;
-	transition:
-		background 0.15s ease,
-		border-color 0.15s ease,
-		color 0.15s ease;
+	transition: all 0.15s ease;
 	line-height: 1.35;
-	overflow-wrap: anywhere;

 	&:hover {
 		background: var(--l2-background);
 		border-color: var(--l3-border);
 		color: var(--l1-foreground);
 	}
+
+	svg {
+		flex-shrink: 0;
+		color: var(--l3-foreground);
+	}
+
+	&:hover svg {
+		color: var(--accent-primary);
+	}
 }
--- a/frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx
+++ b/frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx
@@ -1,5 +1,13 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { Button } from '@signozhq/ui/button';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import {
+	Activity,
+	TriangleAlert,
+	ChartBar,
+	Search,
+	Zap,
+} from '@signozhq/icons';
 import Noz from 'components/Noz/Noz';

 import logEvent from 'api/common/logEvent';
@@ -12,7 +20,29 @@ import MessageBubble from '../MessageBubble';
 import StreamingMessage from '../StreamingMessage';

 import styles from './VirtualizedMessages.module.scss';
-import { useEmptyStateChips } from './useEmptyStateChips';
+
+const SUGGESTIONS = [
+	{
+		icon: TriangleAlert,
+		text: 'Show me the top errors in the last hour',
+	},
+	{
+		icon: Activity,
+		text: 'What services have the highest latency?',
+	},
+	{
+		icon: ChartBar,
+		text: 'Give me an overview of system health',
+	},
+	{
+		icon: Search,
+		text: 'Find slow database queries',
+	},
+	{
+		icon: Zap,
+		text: 'Which endpoints have the most 5xx errors?',
+	},
+];

 const EMPTY_EVENTS: StreamingEventItem[] = [];

@@ -143,10 +173,8 @@ export default function VirtualizedMessages({

 	const showStreamingSlot =
 		isStreaming || Boolean(pendingApproval) || Boolean(pendingClarification);
-	const isEmptyState = messages.length === 0 && !showStreamingSlot;
-	const { chips: emptyStateChips } = useEmptyStateChips(isEmptyState);

-	if (isEmptyState) {
+	if (messages.length === 0 && !showStreamingSlot) {
 		return (
 			<div className={styles.empty}>
 				<div className={`${styles.emptyIcon} noz-wave`}>
@@ -156,22 +184,24 @@ export default function VirtualizedMessages({
 				<p className={styles.emptySubtitle}>
 					Ask questions about your traces, logs, metrics, and infrastructure.
 				</p>
-				<div className={styles.suggestions}>
-					{emptyStateChips.map((chip) => (
-						<div
-							key={chip.id}
-							className={styles.suggestion}
+				<div className={styles.emptySuggestions}>
+					{SUGGESTIONS.map((s) => (
+						<Button
+							key={s.text}
+							variant="outlined"
+							color="secondary"
+							className={styles.emptyChip}
 							onClick={(): void => {
 								void logEvent(AIAssistantEvents.SuggestedPromptClicked, {
-									promptId: chip.id,
+									promptId: s.text,
 									category: SuggestedPromptCategory.EmptyState,
 								});
-								onSendSuggestedPrompt(chip.text);
+								onSendSuggestedPrompt(s.text);
 							}}
-							data-testid={`empty-state-chip-${chip.id}`}
+							prefix={<s.icon size={14} />}
 						>
-							{chip.text}
-						</div>
+							{s.text}
+						</Button>
 					))}
 				</div>
 			</div>
--- a/frontend/src/container/AIAssistant/components/VirtualizedMessages/emptyStateChipsFallback.ts
+++ b/frontend/src/container/AIAssistant/components/VirtualizedMessages/emptyStateChipsFallback.ts
@@ -1,25 +0,0 @@
-import type { ChipDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-/** Static empty-state chips used when the contextual chips API is unavailable. */
-export const EMPTY_STATE_CHIPS_FALLBACK: ChipDTO[] = [
-	{
-		id: 'top_errors_last_hour',
-		text: 'Show me the top errors in the last hour',
-	},
-	{
-		id: 'highest_latency_services',
-		text: 'What services have the highest latency?',
-	},
-	{
-		id: 'system_health_overview',
-		text: 'Give me an overview of system health',
-	},
-	{
-		id: 'slow_database_queries',
-		text: 'Find slow database queries',
-	},
-	{
-		id: 'endpoints_5xx_errors',
-		text: 'Which endpoints have the most 5xx errors?',
-	},
-];
--- a/frontend/src/container/AIAssistant/components/VirtualizedMessages/useEmptyStateChips.ts
+++ b/frontend/src/container/AIAssistant/components/VirtualizedMessages/useEmptyStateChips.ts
@@ -1,33 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from 'react-query';
-
-import { getEmptyStateChips } from 'api/ai-assistant/chat';
-import type { ChipDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-
-import { useResolvePageType } from 'hooks/aiAssistant/useResolvePageType';
-
-import { EMPTY_STATE_CHIPS_FALLBACK } from './emptyStateChipsFallback';
-
-interface UseEmptyStateChipsResult {
-	chips: ChipDTO[];
-}
-
-export function useEmptyStateChips(enabled: boolean): UseEmptyStateChipsResult {
-	const pageType = useResolvePageType();
-
-	const { data, isError } = useQuery(
-		[REACT_QUERY_KEY.AI_ASSISTANT_EMPTY_STATE_CHIPS, pageType],
-		({ signal }) => getEmptyStateChips(pageType, signal),
-		{ enabled },
-	);
-
-	const chips = useMemo(() => {
-		if (isError) {
-			return EMPTY_STATE_CHIPS_FALLBACK;
-		}
-		return data ?? [];
-	}, [data, isError]);
-
-	return { chips };
-}
--- a/frontend/src/container/AIAssistant/getAutoContexts.ts
+++ b/frontend/src/container/AIAssistant/getAutoContexts.ts
@@ -1,7 +1,6 @@
 import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { AlertListTabs } from 'pages/AlertList/types';
 import { matchPath } from 'react-router-dom';

 /**
@@ -100,30 +99,6 @@ export function getAutoContexts(

 	// ── Alerts ────────────────────────────────────────────────────────────────

-	// Alert detail (overview / per-rule history) — `/alerts/overview?ruleId=…`
-	// or `/alerts/history?ruleId=…`. Mirrors dashboard_detail: resourceId is the
-	// rule id and shared metadata carries the URL time range when present.
-	if (
-		matchPath(pathname, { path: ROUTES.ALERT_OVERVIEW, exact: true }) ||
-		matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })
-	) {
-		const ruleId = params.get(QueryParams.ruleId);
-		if (ruleId) {
-			return [
-				{
-					source: 'auto',
-					type: 'alert',
-					resourceId: ruleId,
-					metadata: {
-						page: 'alert_detail',
-						ruleId,
-						...sharedMetadata,
-					},
-				},
-			];
-		}
-	}
-
 	// Alert edit — `/alerts/edit?ruleId=…`.
 	if (matchPath(pathname, { path: ROUTES.EDIT_ALERTS, exact: true })) {
 		const ruleId = params.get(QueryParams.ruleId);
@@ -133,7 +108,7 @@ export function getAutoContexts(
 					source: 'auto',
 					type: 'alert',
 					resourceId: ruleId,
-					metadata: { page: 'alert_edit', ruleId },
+					metadata: { page: 'alert_edit' },
 				},
 			];
 		}
@@ -150,7 +125,6 @@ export function getAutoContexts(
 		];
 	}

-	// Triggered-alerts index — `/alerts/history` without a rule id.
 	if (matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })) {
 		return [
 			{
@@ -165,18 +139,13 @@ export function getAutoContexts(
 		];
 	}

-	// Alerts index — `/alerts` with tab query param (defaults to Alert Rules).
 	if (matchPath(pathname, { path: ROUTES.LIST_ALL_ALERT, exact: true })) {
-		const page = resolveAlertsIndexPage(params.get(QueryParams.tab));
 		return [
 			{
 				source: 'auto',
 				type: 'alert',
 				resourceId: null,
-				metadata: {
-					page,
-					...(page === 'alerts_triggered' ? sharedMetadata : {}),
-				},
+				metadata: { page: 'alert_list' },
 			},
 		];
 	}
@@ -282,9 +251,8 @@ export function getAutoContexts(

 	// ── Metrics ───────────────────────────────────────────────────────────────

-	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer, views).
 	if (
-		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_BASE, exact: false })
+		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_EXPLORER, exact: false })
 	) {
 		return [
 			{
@@ -299,25 +267,9 @@ export function getAutoContexts(
 		];
 	}

-	// NOTE: Homepage (`/home`) and infrastructure monitoring
-	// (`/infrastructure-monitoring/*`) intentionally emit no auto-context here.
-	// They have no resource that maps to `MessageContextDTOType`, so attaching
-	// a chip would misrepresent the page (e.g. a bogus "metrics_explorer"
-	// context). Their `page_type` for empty-state chips is resolved directly
-	// from the route in `resolvePageType`.
-
 	return [];
 }

-type AlertsIndexPage = 'alert_list' | 'alerts_triggered';
-
-function resolveAlertsIndexPage(tab: string | null): AlertsIndexPage {
-	if (tab === AlertListTabs.TRIGGERED_ALERTS) {
-		return 'alerts_triggered';
-	}
-	return 'alert_list';
-}
-
 /**
 * Pulls metadata fields that any page may carry in its query string —
 * `timeRange`, `query`, saved-view selectors, dashboard variables. Each
--- a/frontend/src/container/AIAssistant/hooks/useSpeechRecognition.ts
+++ b/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'
--- a/frontend/src/container/AIAssistant/resolvePageType.ts
+++ b/frontend/src/container/AIAssistant/resolvePageType.ts
@@ -1,74 +0,0 @@
-import { PageTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { matchPath } from 'react-router-dom';
-
-import { getAutoContexts } from './getAutoContexts';
-
-const PAGE_METADATA_TO_DTO: Record<string, PageTypeDTO> = {
-	dashboard_detail: PageTypeDTO.dashboard_detail,
-	dashboard_list: PageTypeDTO.dashboard_list,
-	panel_edit: PageTypeDTO.panel_edit,
-	panel_fullscreen: PageTypeDTO.panel_fullscreen,
-	logs_explorer: PageTypeDTO.logs_explorer,
-	trace_detail: PageTypeDTO.trace_detail,
-	traces_explorer: PageTypeDTO.traces_explorer,
-	metrics_explorer: PageTypeDTO.metrics_explorer,
-	service_detail: PageTypeDTO.service_detail,
-	services_list: PageTypeDTO.services_list,
-	alert_edit: PageTypeDTO.alert_edit,
-	alert_list: PageTypeDTO.alert_list,
-	alert_new: PageTypeDTO.alert_new,
-	alerts_triggered: PageTypeDTO.alerts_triggered,
-};
-
-interface ResolvePageTypeOptions {
-	/** Standalone `/ai-assistant` surface — no underlying observability page. */
-	isStandaloneAssistant?: boolean;
-}
-
-/**
- * Maps the current URL (and assistant surface) to the backend `page_type`
- * enum used by contextual empty-state chips.
- */
-export function resolvePageType(
-	pathname: string,
-	search: string,
-	options?: ResolvePageTypeOptions,
-): PageTypeDTO {
-	if (options?.isStandaloneAssistant) {
-		return PageTypeDTO.other;
-	}
-
-	// Pseudo-pages with no attachable resource: resolved straight from the
-	// route. They deliberately emit no auto-context chip (see `getAutoContexts`),
-	// so they can't be derived from `metadata.page` like the pages below.
-	if (matchPath(pathname, { path: ROUTES.HOME, exact: true })) {
-		return PageTypeDTO.homepage;
-	}
-	if (
-		matchPath(pathname, {
-			path: ROUTES.INFRASTRUCTURE_MONITORING_BASE,
-			exact: false,
-		})
-	) {
-		return PageTypeDTO.infra_entity_detail;
-	}
-
-	const contexts = getAutoContexts(pathname, search);
-	const page = contexts[0]?.metadata?.page;
-	if (typeof page === 'string') {
-		if (page === 'logs_explorer') {
-			const activeLogId = new URLSearchParams(search).get(QueryParams.activeLogId);
-			if (activeLogId) {
-				return PageTypeDTO.log_detail;
-			}
-		}
-		const mapped = PAGE_METADATA_TO_DTO[page];
-		if (mapped) {
-			return mapped;
-		}
-	}
-
-	return PageTypeDTO.other;
-}
--- a/frontend/src/container/AIAssistant/store/useAIAssistantStore.ts
+++ b/frontend/src/container/AIAssistant/store/useAIAssistantStore.ts
@@ -1,10 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import axios from 'axios';
 import { v4 as uuidv4 } from 'uuid';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';

 import type {
+	ErrorResponseDTO,
 	MessageActionDTO,
 	MessageSummaryDTOBlocksAnyOfItem,
 } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
@@ -35,7 +37,6 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
-import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';

 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -398,7 +399,6 @@ async function runStreamingLoop(
 			}
 			throw Object.assign(new Error(event.error.message), {
 				retryAction: event.retryAction,
-				code: event.error.code,
 			});
 		} else if (event.type === 'conversation' && event.title) {
 			set((s) => {
@@ -484,6 +484,36 @@ function hasPendingInput(conversationId: string, get: StoreGetter): boolean {
 	return Boolean(stream?.pendingApproval || stream?.pendingClarification);
 }

+function parseErrorBody(value: unknown): string | null {
+	if (typeof value === 'string') {
+		try {
+			return parseErrorBody(JSON.parse(value));
+		} catch {
+			return null;
+		}
+	}
+	const message = (value as ErrorResponseDTO | undefined)?.error?.message;
+	return typeof message === 'string' && message.length > 0 ? message : null;
+}
+
+/**
+ * Returns the backend's `error.message` when `err` is a 429 axios response
+ * (typically from the threads API surface — createThread, sendMessage, approve,
+ * clarify, regenerate). Returns null for any other error so callers fall
+ * through to their generic copy.
+ */
+function rateLimitMessage(err: unknown): string | null {
+	if (axios.isAxiosError(err) && err.response?.status === 429) {
+		return parseErrorBody(err.response.data);
+	}
+	return null;
+}
+
+/**
+ * Commits an error message and removes the stream entry. When `isRateLimit`
+ * is true, the committed message is flagged so the feedback/regenerate bar
+ * is hidden — clicking regenerate would just 429 again.
+ */
 function finalizeStreamingError(
 	conversationId: string,
 	errorContent: string,
@@ -1144,11 +1174,14 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] sendMessage failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
-						'Something went wrong while fetching the response. Please try again.',
+					const rateLimit = rateLimitMessage(err);
+					finalizeStreamingError(
+						convId,
+						rateLimit ??
+							'Something went wrong while fetching the response. Please try again.',
+						set,
+						rateLimit !== null,
 					);
-					finalizeStreamingError(convId, message, set, isRateLimit);
 				}
 			},

@@ -1181,11 +1214,14 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] approveAction failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
-						'Something went wrong while processing the approval. Please try again.',
+					const rateLimit = rateLimitMessage(err);
+					finalizeStreamingError(
+						conversationId,
+						rateLimit ??
+							'Something went wrong while processing the approval. Please try again.',
+						set,
+						rateLimit !== null,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},

@@ -1260,11 +1296,14 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
-						'Something went wrong while regenerating the response. Please try again.',
+					const rateLimit = rateLimitMessage(err);
+					finalizeStreamingError(
+						conversationId,
+						rateLimit ??
+							'Something went wrong while regenerating the response. Please try again.',
+						set,
+						rateLimit !== null,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},

@@ -1326,11 +1365,14 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] submitClarification failed:', err);
-					const { message, isRateLimit } = resolveAssistantErrorMessage(
-						err,
-						'Something went wrong while processing your answers. Please try again.',
+					const rateLimit = rateLimitMessage(err);
+					finalizeStreamingError(
+						conversationId,
+						rateLimit ??
+							'Something went wrong while processing your answers. Please try again.',
+						set,
+						rateLimit !== null,
 					);
-					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},
 		})),
--- a/frontend/src/container/AIAssistant/utils/tests/resolveAssistantErrorMessage.test.ts
+++ b/frontend/src/container/AIAssistant/utils/tests/resolveAssistantErrorMessage.test.ts
@@ -1,91 +0,0 @@
-import { AxiosError } from 'axios';
-import { ErrorCodeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-import { resolveAssistantErrorMessage } from '../resolveAssistantErrorMessage';
-
-const FALLBACK = 'Something went wrong. Please try again.';
-
-describe('resolveAssistantErrorMessage', () => {
-	it('returns backend message for a known error code', () => {
-		const err = new AxiosError('Request failed');
-		err.response = {
-			status: 400,
-			data: {
-				error: {
-					code: ErrorCodeDTO.thread_busy,
-					message: 'This thread is busy. Try again shortly.',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'This thread is busy. Try again shortly.',
-			isRateLimit: false,
-		});
-	});
-
-	it('falls back when error code is not in ErrorCodeDTO', () => {
-		const err = new AxiosError('Request failed');
-		err.response = {
-			status: 400,
-			data: {
-				error: {
-					code: 'future_unknown_code',
-					message: 'Backend-only message',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: FALLBACK,
-			isRateLimit: false,
-		});
-	});
-
-	it('marks HTTP 429 responses as rate limited', () => {
-		const err = new AxiosError('Too many requests');
-		err.response = {
-			status: 429,
-			data: {
-				error: {
-					code: ErrorCodeDTO.hourly_message_limit,
-					message: 'Hourly limit reached.',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'Hourly limit reached.',
-			isRateLimit: true,
-		});
-	});
-
-	it('uses backend message for known SSE rate-limit error codes', () => {
-		const err = Object.assign(new Error('Daily token limit exceeded.'), {
-			code: ErrorCodeDTO.daily_token_limit,
-		});
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: 'Daily token limit exceeded.',
-			isRateLimit: true,
-		});
-	});
-
-	it('marks 429 as rate limited even when error code is unknown', () => {
-		const err = new AxiosError('Too many requests');
-		err.response = {
-			status: 429,
-			data: {
-				error: {
-					code: 'future_unknown_code',
-					message: 'Too many requests',
-				},
-			},
-		} as AxiosError['response'];
-
-		expect(resolveAssistantErrorMessage(err, FALLBACK)).toStrictEqual({
-			message: FALLBACK,
-			isRateLimit: true,
-		});
-	});
-});
--- a/frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts
+++ b/frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts
@@ -1,71 +0,0 @@
-import { isAxiosError } from 'axios';
-import {
-	ErrorCodeDTO,
-	type ErrorBodyDTO,
-	type ErrorResponseDTO,
-} from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
-
-export interface AssistantErrorResolution {
-	message: string;
-	isRateLimit: boolean;
-}
-
-function isErrorCodeDTO(code: string | undefined): code is ErrorCodeDTO {
-	return (
-		code !== undefined && (Object.values(ErrorCodeDTO) as string[]).includes(code)
-	);
-}
-
-const RATE_LIMIT_ERROR_CODES = new Set<ErrorCodeDTO>([
-	ErrorCodeDTO.rate_limit_override_exceeds_ceiling,
-	ErrorCodeDTO.thread_message_limit,
-	ErrorCodeDTO.connection_limit_exceeded,
-	ErrorCodeDTO.hourly_message_limit,
-	ErrorCodeDTO.daily_message_limit,
-	ErrorCodeDTO.daily_token_limit,
-	ErrorCodeDTO.daily_cost_limit,
-	ErrorCodeDTO.budget_exceeded,
-]);
-
-function isRateLimitError(code: string | undefined, err: unknown): boolean {
-	if (isAxiosError(err) && err.response?.status === 429) {
-		return true;
-	}
-
-	return isErrorCodeDTO(code) && RATE_LIMIT_ERROR_CODES.has(code);
-}
-
-function getErrorBody(err: unknown): ErrorBodyDTO | null {
-	if (isAxiosError(err)) {
-		return (err.response?.data as ErrorResponseDTO | undefined)?.error ?? null;
-	}
-
-	const code = (err as { code?: string } | undefined)?.code;
-	const message = err instanceof Error ? err.message : undefined;
-	if (!code || !message) {
-		return null;
-	}
-
-	return { code: code as ErrorCodeDTO, message };
-}
-
-/**
- * Uses `error.message` when `error.code` is a known `ErrorCodeDTO`;
- * otherwise returns `fallback`.
- */
-export function resolveAssistantErrorMessage(
-	err: unknown,
-	fallback: string,
-): AssistantErrorResolution {
-	const body = getErrorBody(err);
-	const isRateLimit = isRateLimitError(body?.code, err);
-
-	if (body && isErrorCodeDTO(body.code) && body.message.trim()) {
-		return {
-			message: body.message.trim(),
-			isRateLimit,
-		};
-	}
-
-	return { message: fallback, isRateLimit: Boolean(isRateLimit) };
-}
--- a/frontend/src/container/BillingContainer/BillingContainer.module.scss
+++ b/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);
--- a/frontend/src/container/CreateAlertV2/Footer/styles.scss
+++ b/frontend/src/container/CreateAlertV2/Footer/styles.scss
@@ -29,7 +29,3 @@
 		color: var(--l2-foreground);
 	}
 }
-
-body.ai-assistant-panel-open .create-alert-v2-footer {
-	right: var(--ai-assistant-panel-width, 380px);
-}
--- a/frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.module.scss
+++ b/frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.module.scss
@@ -63,6 +63,5 @@
 	flex: 0 0 auto;
 	min-height: 0;
 	min-width: 0;
-	padding-left: 12px;
-	padding-bottom: 12px;
+	padding: 8px;
 }
--- a/frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.tsx
@@ -16,7 +16,7 @@ import PieArc from './PieArc';
 import PieCenterLabel from './PieCenterLabel';
 import styles from './Pie.module.scss';
 import { PieTooltipData } from './types';
-import { getDonutGeometry, getFillColor } from './utils';
+import { getFillColor } from './utils';

 /**
 * Donut chart rendered with @visx. Splits its area into chart + legend with the
@@ -78,12 +78,16 @@ export default function Pie({
 			[containerWidth, containerHeight, position, data],
 		);

-	// Donut geometry derived from the allocated chart box, sized to leave room
-	// for the external leader labels (see getDonutGeometry).
-	const { size, radius, innerRadius } = useMemo(
-		() => getDonutGeometry(width, height),
-		[width, height],
-	);
+	// Donut geometry derived from the allocated chart box.
+	const { size, radius, innerRadius } = useMemo(() => {
+		const nextSize = Math.min(width, height);
+		const nextRadius = nextSize * 0.35;
+		return {
+			size: nextSize,
+			radius: nextRadius,
+			innerRadius: nextRadius * 0.6,
+		};
+	}, [width, height]);

 	const totalValue = useMemo(
 		() => visibleData.reduce((sum, slice) => sum + slice.value, 0),
--- a/frontend/src/container/DashboardContainer/visualization/charts/Pie/tests/utils.test.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/Pie/tests/utils.test.ts
@@ -1,40 +1,11 @@
 import {
 	getArcGeometry,
-	getDonutGeometry,
 	getFillColor,
 	getScaledFontSize,
 	lightenColor,
 } from '../utils';

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

-/** Donut sizing for a given chart box: the outer/inner radii and the square it spans. */
-export interface DonutGeometry {
-	/** Outer diameter — feeds the visx Pie width/height and the render guard. */
-	size: number;
-	/** Outer radius of the donut ring. */
-	radius: number;
-	/** Inner radius (the hole) — also bounds the centre-total font. */
-	innerRadius: number;
-}
-
 export interface ArcGeometry {
 	/** Outer point where the leader label sits. */
 	labelX: number;
--- a/frontend/src/container/DashboardContainer/visualization/charts/Pie/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/Pie/utils.ts
@@ -3,37 +3,7 @@
 * so the renderer stays declarative (per the one-component-per-file rule).
 */

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

 /**
 * Shrinks the centre-total font as the text gets longer so it never overflows
@@ -67,7 +37,7 @@ export function getArcGeometry(
 	radius: number,
 ): ArcGeometry {
 	const angle = (startAngle + endAngle) / 2;
-	const labelRadius = radius * LABEL_RADIUS_RATIO;
+	const labelRadius = radius * 1.3;
 	const lineEndRadius = radius * 1.1;
 	return {
 		labelX: Math.sin(angle) * labelRadius,
--- a/frontend/src/container/DashboardContainer/visualization/charts/tests/utils.test.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/tests/utils.test.ts
@@ -1,79 +0,0 @@
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-
-import { calculateChartDimensions } from '../utils';
-
-const labels = (count: number, length = 20): string[] =>
-	Array.from({ length: count }, (_, i) =>
-		`label-${i}`.padEnd(length, 'x').slice(0, length),
-	);
-
-describe('calculateChartDimensions', () => {
-	it('returns all zeros when the container has no space', () => {
-		expect(
-			calculateChartDimensions({
-				containerWidth: 0,
-				containerHeight: 300,
-				legendConfig: { position: LegendPosition.BOTTOM },
-				seriesLabels: labels(3),
-			}),
-		).toStrictEqual({
-			width: 0,
-			height: 0,
-			legendWidth: 0,
-			legendHeight: 0,
-			averageLegendWidth: 0,
-		});
-	});
-
-	it('RIGHT: reserves a side column capped at 30% of the width and keeps full height', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 400,
-			legendConfig: { position: LegendPosition.RIGHT },
-			seriesLabels: labels(10, 40),
-		});
-		// 40-char labels approximate to 336px, capped at min(240, 30% of 1000).
-		expect(dims.legendWidth).toBe(240);
-		expect(dims.width).toBe(760);
-		expect(dims.height).toBe(400);
-		expect(dims.legendHeight).toBe(400);
-	});
-
-	it('BOTTOM: a single row of items reserves one legend row', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(3),
-		});
-		// One row = line height (28) + padding (12).
-		expect(dims.legendHeight).toBe(40);
-		expect(dims.height).toBe(460);
-		expect(dims.legendWidth).toBe(1000);
-	});
-
-	it('BOTTOM: many items cap at two rows on a tall container', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(40),
-		});
-		// Two rows = 2 * 40 - 12 (no trailing padding) = 68, under the 80px cap.
-		expect(dims.legendHeight).toBe(68);
-		expect(dims.height).toBe(432);
-	});
-
-	it('BOTTOM: on a short container the legend never takes more than 30% of the height', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 160,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(40),
-		});
-		// Without the height-relative cap the legend would take 68px of a 160px
-		// panel and the chart (pie especially) collapses to a sliver.
-		expect(dims.legendHeight).toBe(48); // 30% of 160
-		expect(dims.height).toBe(112);
-	});
-});
--- a/frontend/src/container/DashboardContainer/visualization/charts/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/utils.ts
@@ -116,15 +116,7 @@ export function calculateChartDimensions({
 			? legendRowCount * legendRowHeight - LEGEND_PADDING
 			: legendRowHeight;

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

 	const bottomLegendHeight = Math.min(
 		idealBottomLegendHeight,
--- a/frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissible.styles.scss
+++ b/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;
--- a/frontend/src/container/GeneralSettings/tests/index.test.tsx
+++ b/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();
-	});
-});
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/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>
--- a/frontend/src/container/InfraMonitoringK8s/Clusters/constants.ts
+++ b/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: [],
--- a/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx
+++ b/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,
--- a/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx
+++ b/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 =
--- a/frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/traceListColumns.tsx
+++ b/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>
--- a/frontend/src/container/InfraMonitoringK8s/Pods/constants.ts
+++ b/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',
 						},
--- a/frontend/src/container/InfraMonitoringK8s/Volumes/table.config.tsx
+++ b/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>
-			);
-		},
-	},
 ];
--- a/frontend/src/container/LLMObservabilityAttributeMapping/AttributeMappingHeader.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/ConditionKeyList.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/GroupFormDrawer.styles.scss
+++ b/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;
+	}
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/GroupFormDrawer.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/IndexBadge.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/KeySearchInput.styles.scss
+++ b/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));
+		}
+	}
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/KeySearchInput.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/LLMObservabilityAttributeMapping.styles.scss
+++ b/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);
+		}
+	}
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/LLMObservabilityAttributeMapping.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/MapperFormDrawer.styles.scss
+++ b/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;
+	}
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/MapperFormDrawer.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/MapperGroupsTable.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/MappersTable.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/SourceAttributeRow.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityAttributeMapping/tests/ConditionKeyList.test.tsx
+++ b/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();
+	});
+});
--- a/frontend/src/container/LLMObservabilityAttributeMapping/tests/KeySearchInput.test.tsx
+++ b/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();
+	});
+});
--- a/frontend/src/container/LLMObservabilityAttributeMapping/tests/LLMObservabilityAttributeMapping.test.tsx
+++ b/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');
+	});
+});
--- a/frontend/src/container/LLMObservabilityAttributeMapping/tests/MapperFormDrawer.test.tsx
+++ b/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);
+	});
+});
--- a/frontend/src/container/LLMObservabilityAttributeMapping/tests/saveDraft.test.ts
+++ b/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);
+	});
+});
--- a/frontend/src/container/LLMObservabilityAttributeMapping/tests/utils.test.ts
+++ b/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'],
+			});
+		});
+	});
+});
--- a/frontend/src/container/LLMObservabilityAttributeMapping/saveDraft.ts
+++ b/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);
+	}
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/types.ts
+++ b/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[];
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/useAttributeMappingStore.ts
+++ b/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,
+	};
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/useGroupFormDrawer.ts
+++ b/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 };
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/useMapperFormDrawer.ts
+++ b/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 };
+}
--- a/frontend/src/container/LLMObservabilityAttributeMapping/utils.ts
+++ b/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,
+	};
+}
--- a/frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.styles.scss
+++ b/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);
+	}
+}
--- a/frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.tsx
+++ b/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;
--- a/frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.styles.scss
+++ b/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;
+	}
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Gaurav Tewari	c4292678a8	feat: ui update	2026-06-16 13:36:43 +05:30
Gaurav Tewari	0b57a1940f	fix: make ui good	2026-06-16 12:20:24 +05:30
Gaurav Tewari	f109d40ef6	chore: self review change	2026-06-16 11:43:41 +05:30
Gaurav Tewari	e2fa3387f4	fix: minor fixes	2026-06-16 11:37:01 +05:30
Gaurav Tewari	667cd5ae3b	feat: attribute mapping	2026-06-16 10:55:42 +05:30
Gaurav Tewari	1dfff8f43e	fix: update model cost drawer	2026-06-16 10:11:08 +05:30
Gaurav Tewari	aaac971606	fix: edit input	2026-06-16 10:10:19 +05:30
Gaurav Tewari	a5a510fb89	refactor: self review changes	2026-06-16 02:10:37 +05:30
Gaurav Tewari	7a7678f4ba	feat: llm pricing	2026-06-16 01:46:28 +05:30
Gaurav Tewari	2c42c13a5c	feat: update modal	2026-06-16 01:27:56 +05:30
Gaurav Tewari	9af7fd6170	fix: self review changes	2026-06-15 23:44:51 +05:30
Gaurav Tewari	e49d17861c	feat: update e2es	2026-06-15 10:16:13 +05:30
Gaurav Tewari	990a4e63af	fix: modal cost drawer	2026-06-15 00:21:17 +05:30
Gaurav Tewari	67f56e0be1	fix: minor fixes	2026-06-14 17:27:43 +05:30
Gaurav Tewari	c9a6b26be0	chore: add more featueres	2026-06-12 11:42:23 +05:30
Gaurav Tewari	1dd887f7fd	feat: add config page initial draft	2026-06-11 20:30:32 +05:30