fix(alerts): surface individual validation errors in API response

* chore: remove flamegraph v2 since we've moved to v4 now

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: remove orphaned helpers after v2 waterfall and flamegraph removal

Drop GetSpansForTrace, cacheForTraceDetail, fluxIntervalForTraceDetail from
clickhouseReader — all were only used by the deleted v2 handlers. Also remove
the orphaned model.Span and model.Event types, and clean up the
cacheForTraceDetail initialization from server.go.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: update ee/query-service NewReader call after v2 cleanup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore: format whitespacing

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/api/openapi.yml

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

ee/modules/dashboard/impldashboard/module.go

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

ee/query-service/app/server.go

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

frontend/.oxlintrc.json

@@ -291,6 +291,8 @@
     // 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",
       {

frontend/.stylelintrc.cjs

@@ -2,9 +2,33 @@
 const path = require('path');
 
 module.exports = {
-	plugins: [path.join(__dirname, 'stylelint-rules/no-unsupported-asset-url.js')],
+	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'),
+	],
 	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' }],
+			},
+		},
+	],
 };

frontend/AGENTS.md

@@ -23,6 +23,8 @@ 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`

frontend/docs/css-modules-guide.md

@@ -0,0 +1,513 @@
+# 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.

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": "8.41.0",
-    "@sentry/vite-plugin": "2.22.6",
+    "@sentry/react": "10.57.0",
+    "@sentry/vite-plugin": "5.3.0",
     "@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.47.0",
-    "oxlint": "1.62.0",
-    "oxlint-tsgolint": "0.22.1",
+    "oxfmt": "0.54.0",
+    "oxlint": "1.69.0",
+    "oxlint-tsgolint": "0.23.0",
     "postcss": "8.5.14",
     "postcss-scss": "4.0.9",
     "react-resizable": "3.0.4",

frontend/plugins/rules/no-css-module-bracket-access.mjs

@@ -0,0 +1,144 @@
+/**
+ * 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('');
+}

frontend/plugins/signoz.mjs

@@ -11,6 +11,7 @@ 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: {
@@ -23,5 +24,6 @@ export default {
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
+		'no-css-module-bracket-access': noCssModuleBracketAccess,
 	},
 };

frontend/src/AppRoutes/pageComponents.ts

@@ -64,10 +64,17 @@ export const TraceDetail = Loadable(
 		),
 );
 
+export const TraceDetailOldRedirect = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailOldRedirect" */ 'pages/TraceDetailOldRedirect/index'
+		),
+);
+
 export const TraceDetailV3 = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
+			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailsV3/index'
 		),
 );
 
@@ -323,10 +330,3 @@ export const AIAssistantPage = Loadable(
 			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
 		),
 );
-
-export const LLMObservabilityModelPricingPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
-		),
-);

frontend/src/AppRoutes/routes.ts

@@ -22,7 +22,6 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
-	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -48,7 +47,7 @@ import {
 	SomethingWentWrong,
 	StatusPage,
 	SupportPage,
-	TraceDetail,
+	TraceDetailOldRedirect,
 	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
@@ -140,13 +139,11 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
-	// 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.
+	// Legacy /trace-old/:id redirects to the current /trace/:id view.
 	{
 		path: ROUTES.TRACE_DETAIL_OLD,
 		exact: true,
-		component: TraceDetail,
+		component: TraceDetailOldRedirect,
 		isPrivate: true,
 		key: 'TRACE_DETAIL_OLD',
 	},
@@ -508,13 +505,6 @@ 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,
-	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/ai-assistant/chat.ts

@@ -55,6 +55,9 @@ import type {
 	ThreadDetailResponseDTO,
 	ThreadListResponseDTO,
 	ThreadSummaryDTO,
+	ChipDTO,
+	ChipsResponseDTO,
+	PageTypeDTO,
 	ToolCallEventDTO,
 	ToolResultEventDTO,
 } from './sigNozAIAssistantAPI.schemas';
@@ -541,3 +544,19 @@ 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;
+}

frontend/src/api/ai-assistant/index.ts

@@ -26,6 +26,7 @@ import type {
 	CancelApiV1AssistantCancelPostHeaders,
 	CancelRequestDTO,
 	CancelResponseDTO,
+	ChipsResponseDTO,
 	ClarifyApiV1AssistantClarifyPostHeaders,
 	ClarifyRequestDTO,
 	ClarifyResponseDTO,
@@ -39,8 +40,11 @@ import type {
 	ErrorResponseDTO,
 	FeedbackRequestDTO,
 	FeedbackResponseDTO,
+	GetChipsApiV1AssistantEmptyStateChipsGetHeaders,
+	GetChipsApiV1AssistantEmptyStateChipsGetParams,
 	GetThreadApiV1AssistantThreadsThreadIdGetHeaders,
 	GetThreadApiV1AssistantThreadsThreadIdGetPathParameters,
+	GetUsageApiV1AssistantUsageGetHeaders,
 	HTTPValidationErrorDTO,
 	HealthResponseDTO,
 	ListThreadsApiV1AssistantThreadsGetHeaders,
@@ -65,93 +69,89 @@ import type {
 	UpdateThreadApiV1AssistantThreadsThreadIdPatchHeaders,
 	UpdateThreadApiV1AssistantThreadsThreadIdPatchPathParameters,
 	UpdateThreadRequestDTO,
+	UsageResponseDTO,
 } from './sigNozAIAssistantAPI.schemas';
 
-import {
-	GeneratedAPIInstance,
-	getGeneratedAPIQueryKeyHeaders,
-} from '../generatedAPIInstance';
+import { GeneratedAPIInstance } from '../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../generatedAPIInstance';
 
 /**
- * @summary Health
+ * @summary Healthz
  */
-export const healthHealthGet = (signal?: AbortSignal) => {
+export const healthzHealthzGet = (signal?: AbortSignal) => {
 	return GeneratedAPIInstance<HealthResponseDTO>({
-		url: `/health`,
+		url: `/healthz`,
 		method: 'GET',
 		signal,
 	});
 };
 
-export const getHealthHealthGetQueryKey = () => {
-	return [`/health`] as const;
+export const getHealthzHealthzGetQueryKey = () => {
+	return [`/healthz`] as const;
 };
 
-export const getHealthHealthGetQueryOptions = <
-	TData = Awaited<ReturnType<typeof healthHealthGet>>,
+export const getHealthzHealthzGetQueryOptions = <
+	TData = Awaited<ReturnType<typeof healthzHealthzGet>>,
 	TError = ErrorType<unknown>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof healthHealthGet>>,
+		Awaited<ReturnType<typeof healthzHealthzGet>>,
 		TError,
 		TData
 	>;
 }) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey = queryOptions?.queryKey ?? getHealthHealthGetQueryKey();
+	const queryKey = queryOptions?.queryKey ?? getHealthzHealthzGetQueryKey();
 
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof healthHealthGet>>> = ({
-		signal,
-	}) => healthHealthGet(signal);
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof healthzHealthzGet>>
+	> = ({ signal }) => healthzHealthzGet(signal);
 
 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof healthHealthGet>>,
+		Awaited<ReturnType<typeof healthzHealthzGet>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };
 
-export type HealthHealthGetQueryResult = NonNullable<
-	Awaited<ReturnType<typeof healthHealthGet>>
+export type HealthzHealthzGetQueryResult = NonNullable<
+	Awaited<ReturnType<typeof healthzHealthzGet>>
 >;
-export type HealthHealthGetQueryError = ErrorType<unknown>;
+export type HealthzHealthzGetQueryError = ErrorType<unknown>;
 
 /**
- * @summary Health
+ * @summary Healthz
  */
 
-export function useHealthHealthGet<
-	TData = Awaited<ReturnType<typeof healthHealthGet>>,
+export function useHealthzHealthzGet<
+	TData = Awaited<ReturnType<typeof healthzHealthzGet>>,
 	TError = ErrorType<unknown>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof healthHealthGet>>,
+		Awaited<ReturnType<typeof healthzHealthzGet>>,
 		TError,
 		TData
 	>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getHealthHealthGetQueryOptions(options);
+	const queryOptions = getHealthzHealthzGetQueryOptions(options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
 	};
 
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
- * @summary Health
+ * @summary Healthz
  */
-export const invalidateHealthHealthGet = async (
+export const invalidateHealthzHealthzGet = async (
 	queryClient: QueryClient,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getHealthHealthGetQueryKey() },
+		{ queryKey: getHealthzHealthzGetQueryKey() },
 		options,
 	);
 
@@ -159,84 +159,82 @@ export const invalidateHealthHealthGet = async (
 };
 
 /**
- * @summary Ready
+ * @summary Readyz
  */
-export const readyReadyGet = (signal?: AbortSignal) => {
+export const readyzReadyzGet = (signal?: AbortSignal) => {
 	return GeneratedAPIInstance<ReadinessResponseDTO>({
-		url: `/ready`,
+		url: `/readyz`,
 		method: 'GET',
 		signal,
 	});
 };
 
-export const getReadyReadyGetQueryKey = () => {
-	return [`/ready`] as const;
+export const getReadyzReadyzGetQueryKey = () => {
+	return [`/readyz`] as const;
 };
 
-export const getReadyReadyGetQueryOptions = <
-	TData = Awaited<ReturnType<typeof readyReadyGet>>,
+export const getReadyzReadyzGetQueryOptions = <
+	TData = Awaited<ReturnType<typeof readyzReadyzGet>>,
 	TError = ErrorType<ReadinessResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof readyReadyGet>>,
+		Awaited<ReturnType<typeof readyzReadyzGet>>,
 		TError,
 		TData
 	>;
 }) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey = queryOptions?.queryKey ?? getReadyReadyGetQueryKey();
+	const queryKey = queryOptions?.queryKey ?? getReadyzReadyzGetQueryKey();
 
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof readyReadyGet>>> = ({
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof readyzReadyzGet>>> = ({
 		signal,
-	}) => readyReadyGet(signal);
+	}) => readyzReadyzGet(signal);
 
 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof readyReadyGet>>,
+		Awaited<ReturnType<typeof readyzReadyzGet>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };
 
-export type ReadyReadyGetQueryResult = NonNullable<
-	Awaited<ReturnType<typeof readyReadyGet>>
+export type ReadyzReadyzGetQueryResult = NonNullable<
+	Awaited<ReturnType<typeof readyzReadyzGet>>
 >;
-export type ReadyReadyGetQueryError = ErrorType<ReadinessResponseDTO>;
+export type ReadyzReadyzGetQueryError = ErrorType<ReadinessResponseDTO>;
 
 /**
- * @summary Ready
+ * @summary Readyz
  */
 
-export function useReadyReadyGet<
-	TData = Awaited<ReturnType<typeof readyReadyGet>>,
+export function useReadyzReadyzGet<
+	TData = Awaited<ReturnType<typeof readyzReadyzGet>>,
 	TError = ErrorType<ReadinessResponseDTO>,
 >(options?: {
 	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof readyReadyGet>>,
+		Awaited<ReturnType<typeof readyzReadyzGet>>,
 		TError,
 		TData
 	>;
 }): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getReadyReadyGetQueryOptions(options);
+	const queryOptions = getReadyzReadyzGetQueryOptions(options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
 	};
 
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
- * @summary Ready
+ * @summary Readyz
  */
-export const invalidateReadyReadyGet = async (
+export const invalidateReadyzReadyzGet = async (
 	queryClient: QueryClient,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getReadyReadyGetQueryKey() },
+		{ queryKey: getReadyzReadyzGetQueryKey() },
 		options,
 	);
 
@@ -247,7 +245,7 @@ export const invalidateReadyReadyGet = async (
  * @summary Create a new thread
  */
 export const createThreadApiV1AssistantThreadsPost = (
-	createThreadApiV1AssistantThreadsPostBody: BodyType<CreateThreadApiV1AssistantThreadsPostBody>,
+	createThreadApiV1AssistantThreadsPostBody?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>,
 	headers?: CreateThreadApiV1AssistantThreadsPostHeaders,
 	signal?: AbortSignal,
 ) => {
@@ -268,7 +266,7 @@ export const getCreateThreadApiV1AssistantThreadsPostMutationOptions = <
 		Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 		TError,
 		{
-			data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+			data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 			headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 		},
 		TContext
@@ -277,7 +275,7 @@ export const getCreateThreadApiV1AssistantThreadsPostMutationOptions = <
 	Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 	TError,
 	{
-		data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+		data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 		headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 	},
 	TContext
@@ -294,7 +292,7 @@ export const getCreateThreadApiV1AssistantThreadsPostMutationOptions = <
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 		{
-			data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+			data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 			headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 		}
 	> = (props) => {
@@ -310,7 +308,8 @@ export type CreateThreadApiV1AssistantThreadsPostMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>
 >;
 export type CreateThreadApiV1AssistantThreadsPostMutationBody =
-	BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+	| BodyType<CreateThreadApiV1AssistantThreadsPostBody>
+	| undefined;
 export type CreateThreadApiV1AssistantThreadsPostMutationError = ErrorType<
 	ErrorResponseDTO | HTTPValidationErrorDTO
 >;
@@ -326,7 +325,7 @@ export const useCreateThreadApiV1AssistantThreadsPost = <
 		Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 		TError,
 		{
-			data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+			data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 			headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 		},
 		TContext
@@ -335,15 +334,14 @@ export const useCreateThreadApiV1AssistantThreadsPost = <
 	Awaited<ReturnType<typeof createThreadApiV1AssistantThreadsPost>>,
 	TError,
 	{
-		data: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
+		data?: BodyType<CreateThreadApiV1AssistantThreadsPostBody>;
 		headers?: CreateThreadApiV1AssistantThreadsPostHeaders;
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getCreateThreadApiV1AssistantThreadsPostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(
+		getCreateThreadApiV1AssistantThreadsPostMutationOptions(options),
+	);
 };
 /**
  * Cursor-based pagination, sorted by updatedAt desc. Use `archived=true|false|all` to filter.
@@ -365,13 +363,8 @@ export const listThreadsApiV1AssistantThreadsGet = (
 
 export const getListThreadsApiV1AssistantThreadsGetQueryKey = (
 	params?: ListThreadsApiV1AssistantThreadsGetParams,
-	headers?: ListThreadsApiV1AssistantThreadsGetHeaders,
 ) => {
-	return [
-		`/api/v1/assistant/threads`,
-		...(params ? [params] : []),
-		...getGeneratedAPIQueryKeyHeaders(headers),
-	] as const;
+	return [`/api/v1/assistant/threads`, ...(params ? [params] : [])] as const;
 };
 
 export const getListThreadsApiV1AssistantThreadsGetQueryOptions = <
@@ -392,7 +385,7 @@ export const getListThreadsApiV1AssistantThreadsGetQueryOptions = <
 
 	const queryKey =
 		queryOptions?.queryKey ??
-		getListThreadsApiV1AssistantThreadsGetQueryKey(params, headers);
+		getListThreadsApiV1AssistantThreadsGetQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof listThreadsApiV1AssistantThreadsGet>>
@@ -441,9 +434,7 @@ export function useListThreadsApiV1AssistantThreadsGet<
 		queryKey: QueryKey;
 	};
 
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -456,7 +447,7 @@ export const invalidateListThreadsApiV1AssistantThreadsGet = async (
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getListThreadsApiV1AssistantThreadsGetQueryKey(params, headers) },
+		{ queryKey: getListThreadsApiV1AssistantThreadsGetQueryKey(params) },
 		options,
 	);
 
@@ -480,14 +471,10 @@ export const getThreadApiV1AssistantThreadsThreadIdGet = (
 	});
 };
 
-export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey = (
-	{ threadId }: GetThreadApiV1AssistantThreadsThreadIdGetPathParameters,
-	headers?: GetThreadApiV1AssistantThreadsThreadIdGetHeaders,
-) => {
-	return [
-		`/api/v1/assistant/threads/${threadId}`,
-		...getGeneratedAPIQueryKeyHeaders(headers),
-	] as const;
+export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey = ({
+	threadId,
+}: GetThreadApiV1AssistantThreadsThreadIdGetPathParameters) => {
+	return [`/api/v1/assistant/threads/${threadId}`] as const;
 };
 
 export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryOptions = <
@@ -508,7 +495,7 @@ export const getGetThreadApiV1AssistantThreadsThreadIdGetQueryOptions = <
 
 	const queryKey =
 		queryOptions?.queryKey ??
-		getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey({ threadId }, headers);
+		getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey({ threadId });
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getThreadApiV1AssistantThreadsThreadIdGet>>
@@ -562,9 +549,7 @@ export function useGetThreadApiV1AssistantThreadsThreadIdGet<
 		queryKey: QueryKey;
 	};
 
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -578,10 +563,7 @@ export const invalidateGetThreadApiV1AssistantThreadsThreadIdGet = async (
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
 		{
-			queryKey: getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey(
-				{ threadId },
-				headers,
-			),
+			queryKey: getGetThreadApiV1AssistantThreadsThreadIdGetQueryKey({ threadId }),
 		},
 		options,
 	);
@@ -596,12 +578,14 @@ 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,
 	});
 };
 
@@ -695,10 +679,9 @@ export const useUpdateThreadApiV1AssistantThreadsThreadIdPatch = <
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getUpdateThreadApiV1AssistantThreadsThreadIdPatchMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(
+		getUpdateThreadApiV1AssistantThreadsThreadIdPatchMutationOptions(options),
+	);
 };
 /**
  * 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.
@@ -825,12 +808,11 @@ export const useCreateMessageApiV1AssistantThreadsThreadIdMessagesPost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
+	return useMutation(
 		getCreateMessageApiV1AssistantThreadsThreadIdMessagesPostMutationOptions(
 			options,
-		);
-
-	return useMutation(mutationOptions);
+		),
+	);
 };
 /**
  * Clean-slate regeneration. Starts a fresh execution with conversation history up to (excluding) the original assistant response.
@@ -961,12 +943,11 @@ export const useRegenerateMessageApiV1AssistantMessagesMessageIdRegeneratePost =
 		},
 		TContext
 	> => {
-		const mutationOptions =
+		return useMutation(
 			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.
@@ -1066,10 +1047,9 @@ export const useApproveApiV1AssistantApprovePost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getApproveApiV1AssistantApprovePostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(
+		getApproveApiV1AssistantApprovePostMutationOptions(options),
+	);
 };
 /**
  * Marks the approval as rejected. The execution completes with no tool execution.
@@ -1169,10 +1149,7 @@ export const useRejectApiV1AssistantRejectPost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getRejectApiV1AssistantRejectPostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(getRejectApiV1AssistantRejectPostMutationOptions(options));
 };
 /**
  * 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.
@@ -1272,10 +1249,9 @@ export const useClarifyApiV1AssistantClarifyPost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getClarifyApiV1AssistantClarifyPostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(
+		getClarifyApiV1AssistantClarifyPostMutationOptions(options),
+	);
 };
 /**
  * Cooperative cancel. The agent loop finishes its current step, emits a truncated message if streaming, and transitions to canceled.
@@ -1375,10 +1351,7 @@ export const useCancelApiV1AssistantCancelPost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getCancelApiV1AssistantCancelPostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(getCancelApiV1AssistantCancelPostMutationOptions(options));
 };
 /**
  * Deletes the resource that was created by the assistant.
@@ -1477,9 +1450,7 @@ export const useUndoApiV1AssistantUndoPost = <
 	},
 	TContext
 > => {
-	const mutationOptions = getUndoApiV1AssistantUndoPostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(getUndoApiV1AssistantUndoPostMutationOptions(options));
 };
 /**
  * Rolls back the resource to its pre-change snapshot.
@@ -1579,10 +1550,7 @@ export const useRevertApiV1AssistantRevertPost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getRevertApiV1AssistantRevertPostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(getRevertApiV1AssistantRevertPostMutationOptions(options));
 };
 /**
  * Recreates the resource from its pre-delete snapshot.
@@ -1682,10 +1650,9 @@ export const useRestoreApiV1AssistantRestorePost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
-		getRestoreApiV1AssistantRestorePostMutationOptions(options);
-
-	return useMutation(mutationOptions);
+	return useMutation(
+		getRestoreApiV1AssistantRestorePostMutationOptions(options),
+	);
 };
 /**
  * @summary Submit feedback on an assistant message
@@ -1811,10 +1778,221 @@ export const useSubmitFeedbackApiV1AssistantMessagesMessageIdFeedbackPost = <
 	},
 	TContext
 > => {
-	const mutationOptions =
+	return useMutation(
 		getSubmitFeedbackApiV1AssistantMessagesMessageIdFeedbackPostMutationOptions(
 			options,
-		);
-
-	return useMutation(mutationOptions);
+		),
+	);
+};
+/**
+ * @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;
 };

frontend/src/api/ai-assistant/sigNozAIAssistantAPI.schemas.ts

@@ -159,6 +159,25 @@ 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;
@@ -386,15 +405,74 @@ 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 {
-	/**
-	 * @type string
-	 * @pattern ^[a-z_]+$
-	 */
-	code: string;
+	code: ErrorCodeDTO;
 	/**
 	 * @type string
 	 */
@@ -490,6 +568,23 @@ 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',
@@ -500,7 +595,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.
+ * 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.
  */
 export interface MessageActionDTO {
 	kind: MessageActionKindDTO;
@@ -517,6 +612,7 @@ export interface MessageActionDTO {
 	signal?: MessageActionDTOSignal;
 	query?: MessageActionDTOQuery;
 	url?: MessageActionDTOUrl;
+	entity?: MessageActionDTOEntity;
 }
 
 export enum MessageContentTypeDTO {
@@ -590,6 +686,26 @@ 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',
@@ -990,8 +1106,10 @@ 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.
+ * 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.
  */
 export interface MessageActionEventDTO {
 	kind: MessageActionKindDTO;
@@ -1008,6 +1126,7 @@ export interface MessageActionEventDTO {
 	signal?: MessageActionEventDTOSignal;
 	query?: MessageActionEventDTOQuery;
 	url?: MessageActionEventDTOUrl;
+	entity?: MessageActionEventDTOEntity;
 }
 
 export type MessageEventDTOActions = MessageActionEventDTO[] | null;
@@ -1385,3 +1504,21 @@ 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;
+};

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

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

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

@@ -2645,6 +2645,14 @@ 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 = {
 	/**
@@ -4625,6 +4633,54 @@ export interface DashboardtypesDashboardSpecDTO {
 	variables: DashboardtypesVariableDTO[];
 }
 
+export enum DashboardtypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum DashboardtypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+}
+export interface DashboardtypesDashboardViewDataDTO {
+	order?: DashboardtypesListOrderDTO;
+	/**
+	 * @type string
+	 */
+	query?: string;
+	sort?: DashboardtypesListSortDTO;
+	/**
+	 * @type string
+	 */
+	version: string;
+}
+
+export interface DashboardtypesDashboardViewDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	data: DashboardtypesDashboardViewDataDTO;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export enum DashboardtypesDatasourcePluginKindDTO {
 	'signoz/Datasource' = 'signoz/Datasource',
 }
@@ -4736,15 +4792,6 @@ export interface DashboardtypesJSONPatchOperationDTO {
 	value?: unknown;
 }
 
-export enum DashboardtypesListOrderDTO {
-	asc = 'asc',
-	desc = 'desc',
-}
-export enum DashboardtypesListSortDTO {
-	updated_at = 'updated_at',
-	created_at = 'created_at',
-	name = 'name',
-}
 export interface DashboardtypesListedDashboardV2SpecDTO {
 	display?: DashboardtypesDisplayDTO;
 }
@@ -4887,6 +4934,13 @@ export interface DashboardtypesListableDashboardV2DTO {
 	total: number;
 }
 
+export interface DashboardtypesListableDashboardViewDTO {
+	/**
+	 * @type array
+	 */
+	views: DashboardtypesDashboardViewDTO[];
+}
+
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4938,6 +4992,14 @@ export interface DashboardtypesPostableDashboardV2DTO {
 	tags: TagtypesPostableTagDTO[] | null;
 }
 
+export interface DashboardtypesPostableDashboardViewDTO {
+	data: DashboardtypesDashboardViewDataDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export interface DashboardtypesPostablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -9829,6 +9891,36 @@ export type GetUserPreference200 = {
 export type UpdateUserPreferencePathParameters = {
 	name: string;
 };
+export type ListDashboardViews200 = {
+	data: DashboardtypesListableDashboardViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateDashboardView201 = {
+	data: DashboardtypesDashboardViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteDashboardViewPathParameters = {
+	id: string;
+};
+export type UpdateDashboardViewPathParameters = {
+	id: string;
+};
+export type UpdateDashboardView200 = {
+	data: DashboardtypesDashboardViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListDashboardsV2Params = {
 	/**
 	 * @type string
@@ -9907,6 +9999,17 @@ export type UpdateDashboardV2200 = {
 	status: string;
 };
 
+export type CloneDashboardV2PathParameters = {
+	id: string;
+};
+export type CloneDashboardV2201 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type UnlockDashboardV2PathParameters = {
 	id: string;
 };

frontend/src/api/saveView/getViewById.ts

@@ -0,0 +1,24 @@
+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}`);

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',
-	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
+	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',

frontend/src/constants/reactQueryKeys.ts

@@ -113,4 +113,7 @@ 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;

frontend/src/constants/routes.ts

@@ -91,7 +91,6 @@ 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',
 } as const;
 
 export default ROUTES;

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -0,0 +1,150 @@
+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([]);
+	});
+});

frontend/src/container/AIAssistant/__tests__/resolvePageType.test.ts

@@ -0,0 +1,87 @@
+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,
+		);
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -47,6 +47,15 @@ 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 {
@@ -55,20 +64,6 @@ 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) {
@@ -78,6 +73,8 @@ 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:
@@ -140,39 +137,6 @@ 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:
  *
@@ -484,6 +448,35 @@ 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,
@@ -502,6 +495,31 @@ 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: {
@@ -542,21 +560,9 @@ export default function ActionsSection({
 				}
 				break;
 			}
-			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);
-					}
-				}
+			case MessageActionKindDTO.open_resource:
+				handleOpenResource(key, action);
 				break;
-			}
 			case MessageActionKindDTO.undo:
 			case MessageActionKindDTO.revert:
 			case MessageActionKindDTO.restore: {

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/openSavedView.test.ts

@@ -0,0 +1,283 @@
+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');
+	});
+});

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -0,0 +1,117 @@
+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;

frontend/src/container/AIAssistant/components/ActionsSection/utils/resolveOpenResource.ts

@@ -0,0 +1,203 @@
+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;
+}

frontend/src/container/AIAssistant/components/ActionsSection/utils/resourceRoute.ts

@@ -0,0 +1,50 @@
+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;
+	}
+}

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -101,6 +101,8 @@ 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':

frontend/src/container/AIAssistant/components/MarkdownExternalLink/MarkdownExternalLink.tsx

@@ -0,0 +1,26 @@
+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>
+	);
+}

frontend/src/container/AIAssistant/components/MessageBubble/MessageBubble.tsx

@@ -11,6 +11,7 @@ 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';
@@ -37,7 +38,11 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 }
 
 const MD_PLUGINS = [remarkGfm];
-const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
+const MD_COMPONENTS = {
+	code: RichCodeBlock,
+	pre: SmartPre,
+	a: MarkdownExternalLink,
+};
 
 type RenderGroup =
 	| { kind: 'text'; id: string; content: string }

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: 2px;
+	padding-left: 8px;
 	border-left: 1px solid var(--l2-border);
 }
 

frontend/src/container/AIAssistant/components/StreamingMessage/StreamingMessage.tsx

@@ -13,6 +13,7 @@ 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';
@@ -30,7 +31,11 @@ function SmartPre({ children }: { children?: React.ReactNode }): JSX.Element {
 }
 
 const MD_PLUGINS = [remarkGfm];
-const MD_COMPONENTS = { code: RichCodeBlock, pre: SmartPre };
+const MD_COMPONENTS = {
+	code: RichCodeBlock,
+	pre: SmartPre,
+	a: MarkdownExternalLink,
+};
 
 type RenderGroup =
 	| { kind: 'text'; id: string; content: string }

frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.module.scss

@@ -45,7 +45,7 @@
 	line-height: 1.45;
 }
 
-.emptySuggestions {
+.suggestions {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -53,11 +53,8 @@
 	max-width: 360px;
 }
 
-.emptyChip {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start !important;
-	gap: 8px;
+.suggestion {
+	width: 100%;
 	padding: 10px 14px;
 	border: 1px solid var(--l2-border);
 	border-radius: var(--radius-2);
@@ -66,21 +63,16 @@
 	font-size: 12.5px;
 	text-align: left;
 	cursor: pointer;
-	transition: all 0.15s ease;
+	transition:
+		background 0.15s ease,
+		border-color 0.15s ease,
+		color 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);
-	}
 }

frontend/src/container/AIAssistant/components/VirtualizedMessages/VirtualizedMessages.tsx

@@ -1,13 +1,5 @@
 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';
@@ -20,29 +12,7 @@ import MessageBubble from '../MessageBubble';
 import StreamingMessage from '../StreamingMessage';
 
 import styles from './VirtualizedMessages.module.scss';
-
-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?',
-	},
-];
+import { useEmptyStateChips } from './useEmptyStateChips';
 
 const EMPTY_EVENTS: StreamingEventItem[] = [];
 
@@ -173,8 +143,10 @@ export default function VirtualizedMessages({
 
 	const showStreamingSlot =
 		isStreaming || Boolean(pendingApproval) || Boolean(pendingClarification);
+	const isEmptyState = messages.length === 0 && !showStreamingSlot;
+	const { chips: emptyStateChips } = useEmptyStateChips(isEmptyState);
 
-	if (messages.length === 0 && !showStreamingSlot) {
+	if (isEmptyState) {
 		return (
 			<div className={styles.empty}>
 				<div className={`${styles.emptyIcon} noz-wave`}>
@@ -184,24 +156,22 @@ export default function VirtualizedMessages({
 				<p className={styles.emptySubtitle}>
 					Ask questions about your traces, logs, metrics, and infrastructure.
 				</p>
-				<div className={styles.emptySuggestions}>
-					{SUGGESTIONS.map((s) => (
-						<Button
-							key={s.text}
-							variant="outlined"
-							color="secondary"
-							className={styles.emptyChip}
+				<div className={styles.suggestions}>
+					{emptyStateChips.map((chip) => (
+						<div
+							key={chip.id}
+							className={styles.suggestion}
 							onClick={(): void => {
 								void logEvent(AIAssistantEvents.SuggestedPromptClicked, {
-									promptId: s.text,
+									promptId: chip.id,
 									category: SuggestedPromptCategory.EmptyState,
 								});
-								onSendSuggestedPrompt(s.text);
+								onSendSuggestedPrompt(chip.text);
 							}}
-							prefix={<s.icon size={14} />}
+							data-testid={`empty-state-chip-${chip.id}`}
 						>
-							{s.text}
-						</Button>
+							{chip.text}
+						</div>
 					))}
 				</div>
 			</div>

frontend/src/container/AIAssistant/components/VirtualizedMessages/emptyStateChipsFallback.ts

@@ -0,0 +1,25 @@
+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?',
+	},
+];

frontend/src/container/AIAssistant/components/VirtualizedMessages/useEmptyStateChips.ts

@@ -0,0 +1,33 @@
+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 };
+}

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -1,6 +1,7 @@
 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';
 
 /**
@@ -99,6 +100,30 @@ 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);
@@ -108,7 +133,7 @@ export function getAutoContexts(
 					source: 'auto',
 					type: 'alert',
 					resourceId: ruleId,
-					metadata: { page: 'alert_edit' },
+					metadata: { page: 'alert_edit', ruleId },
 				},
 			];
 		}
@@ -125,6 +150,7 @@ export function getAutoContexts(
 		];
 	}
 
+	// Triggered-alerts index — `/alerts/history` without a rule id.
 	if (matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })) {
 		return [
 			{
@@ -139,13 +165,18 @@ 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: 'alert_list' },
+				metadata: {
+					page,
+					...(page === 'alerts_triggered' ? sharedMetadata : {}),
+				},
 			},
 		];
 	}
@@ -251,8 +282,9 @@ export function getAutoContexts(
 
 	// ── Metrics ───────────────────────────────────────────────────────────────
 
+	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer, views).
 	if (
-		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_EXPLORER, exact: false })
+		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_BASE, exact: false })
 	) {
 		return [
 			{
@@ -267,9 +299,25 @@ 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

frontend/src/container/AIAssistant/resolvePageType.ts

@@ -0,0 +1,74 @@
+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;
+}

frontend/src/container/AIAssistant/store/useAIAssistantStore.ts

@@ -1,12 +1,10 @@
 /* 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';
@@ -37,6 +35,7 @@ import {
 	MessageBlock,
 	MessageRole,
 } from '../types';
+import { resolveAssistantErrorMessage } from '../utils/resolveAssistantErrorMessage';
 
 // ---------------------------------------------------------------------------
 // Types used by module-level helpers
@@ -399,6 +398,7 @@ 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,36 +484,6 @@ 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,
@@ -1174,14 +1144,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] sendMessage failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						convId,
-						rateLimit ??
-							'Something went wrong while fetching the response. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while fetching the response. Please try again.',
 					);
+					finalizeStreamingError(convId, message, set, isRateLimit);
 				}
 			},
 
@@ -1214,14 +1181,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] approveAction failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						conversationId,
-						rateLimit ??
-							'Something went wrong while processing the approval. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing the approval. Please try again.',
 					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},
 
@@ -1296,14 +1260,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] regenerateAssistantMessage failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						conversationId,
-						rateLimit ??
-							'Something went wrong while regenerating the response. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while regenerating the response. Please try again.',
 					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},
 
@@ -1365,14 +1326,11 @@ export const useAIAssistantStore = create<AIAssistantStore>()(
 						return;
 					}
 					console.error('[AIAssistant] submitClarification failed:', err);
-					const rateLimit = rateLimitMessage(err);
-					finalizeStreamingError(
-						conversationId,
-						rateLimit ??
-							'Something went wrong while processing your answers. Please try again.',
-						set,
-						rateLimit !== null,
+					const { message, isRateLimit } = resolveAssistantErrorMessage(
+						err,
+						'Something went wrong while processing your answers. Please try again.',
 					);
+					finalizeStreamingError(conversationId, message, set, isRateLimit);
 				}
 			},
 		})),

frontend/src/container/AIAssistant/utils/__tests__/resolveAssistantErrorMessage.test.ts

@@ -0,0 +1,91 @@
+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,
+		});
+	});
+});

frontend/src/container/AIAssistant/utils/resolveAssistantErrorMessage.ts

@@ -0,0 +1,71 @@
+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) };
+}

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -29,3 +29,7 @@
 		color: var(--l2-foreground);
 	}
 }
+
+body.ai-assistant-panel-open .create-alert-v2-footer {
+	right: var(--ai-assistant-panel-width, 380px);
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/LLMObservabilityModelPricing/ExtraPricingBuckets.tsx

@@ -1,148 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Plus, Trash2 } from '@signozhq/icons';
-import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { CACHE_BUCKETS, CACHE_MODE_OPTIONS } from './constants';
-import { parsePricingAmount } from './utils';
-import type { CacheBucketKey, DrawerDraft } from './types';
-
-type Pricing = DrawerDraft['pricing'];
-
-interface ExtraPricingBucketsProps {
-	pricing: Pricing;
-	isReadOnly: boolean;
-	onChange: (patch: Partial<Pricing>) => void;
-}
-
-// Optional, add-on-demand pricing buckets. A bucket is "added" once its value
-// is non-null; adding seeds it at 0 and removing clears it back to null. Only
-// the cache buckets are backed by the API today (pricing.cache.read/write).
-function ExtraPricingBuckets({
-	pricing,
-	isReadOnly,
-	onChange,
-}: ExtraPricingBucketsProps): JSX.Element {
-	const [isPicking, setIsPicking] = useState<boolean>(false);
-
-	const addedBuckets = CACHE_BUCKETS.filter((b) => pricing[b.key] !== null);
-	const availableBuckets = CACHE_BUCKETS.filter((b) => pricing[b.key] === null);
-
-	const addBucket = (key: CacheBucketKey): void => {
-		onChange({ [key]: 0 } as Partial<Pricing>);
-		// Close the picker once nothing is left to add.
-		if (availableBuckets.length <= 1) {
-			setIsPicking(false);
-		}
-	};
-
-	const removeBucket = (key: CacheBucketKey): void => {
-		onChange({ [key]: null } as Partial<Pricing>);
-	};
-
-	return (
-		<div className="extra-buckets-section drawer-section">
-			<div className="extra-buckets-section__head">
-				<span className="field-label">Extra pricing buckets</span>
-				<span className="optional-label">optional</span>
-			</div>
-
-			{addedBuckets.map((bucket) => (
-				<div className="bucket-row" key={bucket.key}>
-					<span className="bucket-row__name">{bucket.label}</span>
-					<Input
-						type="number"
-						min={0}
-						step={0.01}
-						value={pricing[bucket.key] ?? 0}
-						placeholder="0.00"
-						disabled={isReadOnly}
-						onChange={(e): void =>
-							// Empty coerces to 0 (not null) so editing never makes the row
-							// vanish — removal is explicit via the trash button.
-							onChange({
-								[bucket.key]: parsePricingAmount(e.target.value) ?? 0,
-							} as Partial<Pricing>)
-						}
-						testId={`drawer-${bucket.testId}-cost`}
-					/>
-					<span className="bucket-row__unit">/ 1M</span>
-					{!isReadOnly && (
-						<button
-							type="button"
-							className="bucket-row__remove"
-							onClick={(): void => removeBucket(bucket.key)}
-							aria-label={`Remove ${bucket.label}`}
-							data-testid={`drawer-remove-${bucket.testId}`}
-						>
-							<Trash2 size={14} />
-						</button>
-					)}
-				</div>
-			))}
-
-			{addedBuckets.length > 0 && (
-				<div className="pricing-field cache-mode-field">
-					<label htmlFor="cache-mode">Cache mode</label>
-					<SelectSimple
-						id="cache-mode"
-						value={pricing.cacheMode}
-						items={CACHE_MODE_OPTIONS}
-						onChange={(v): void => onChange({ cacheMode: v as CacheModeDTO })}
-						disabled={isReadOnly}
-						className="full-width"
-						withPortal={false}
-						testId="drawer-cache-mode"
-					/>
-				</div>
-			)}
-
-			{!isReadOnly && !isPicking && availableBuckets.length > 0 && (
-				<Button
-					variant="dashed"
-					color="secondary"
-					className="bucket-add-btn"
-					prefix={<Plus size={14} />}
-					onClick={(): void => setIsPicking(true)}
-					testId="drawer-add-bucket-btn"
-				>
-					Add pricing bucket
-				</Button>
-			)}
-
-			{!isReadOnly && isPicking && (
-				<div className="bucket-picker" data-testid="drawer-bucket-picker">
-					<div className="bucket-picker__title">Add a pricing bucket</div>
-					<div className="bucket-picker__chips">
-						{availableBuckets.map((bucket) => (
-							<Button
-								key={bucket.key}
-								variant="outlined"
-								color="secondary"
-								size="sm"
-								prefix={<Plus size={12} />}
-								onClick={(): void => addBucket(bucket.key)}
-								testId={`drawer-add-bucket-${bucket.testId}`}
-							>
-								{bucket.label}
-							</Button>
-						))}
-					</div>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="sm"
-						onClick={(): void => setIsPicking(false)}
-						testId="drawer-add-bucket-cancel"
-					>
-						Cancel
-					</Button>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ExtraPricingBuckets;

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

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

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.tsx

@@ -1,185 +0,0 @@
-import { useEffect, 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 useDebounce from 'hooks/useDebounce';
-import { useAppContext } from 'providers/App/App';
-
-import ModelCostDrawer from './ModelCostDrawer';
-import ModelCostsTable from './ModelCostsTable';
-import { useModelCostDrawer } from './useModelCostDrawer';
-import { useModelPricingFilters } from './useModelPricingFilters';
-import type {
-	ListModelPricingParams,
-	PricingRule,
-	SourceFilter,
-} from './types';
-
-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, source, page, setSearch, setSource, setPage } =
-		useModelPricingFilters();
-	const [currency, setCurrency] = useState<string>('USD');
-
-	// Controlled locally for instant typing feedback; the URL `q` param (which
-	// drives the request) is updated on a debounce so we don't fire a request
-	// per keystroke.
-	const [searchInput, setSearchInput] = useState<string>(search);
-	const debouncedSearch = useDebounce(searchInput, 400);
-
-	useEffect(() => {
-		if (debouncedSearch.trim() !== search) {
-			setSearch(debouncedSearch);
-		}
-	}, [debouncedSearch, search, setSearch]);
-
-	const listParams: ListModelPricingParams = {
-		offset: (page - 1) * PAGE_SIZE,
-		limit: PAGE_SIZE,
-		...(search ? { q: search } : {}),
-		...(source !== 'all' ? { source } : {}),
-	};
-
-	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
-
-	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 drawer = useModelCostDrawer();
-
-	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={searchInput}
-					onChange={(event): void => setSearchInput(event.target.value)}
-					testId="search-input"
-				/>
-				<SelectSimple
-					className="filters-bar__source"
-					value={source}
-					onChange={(value): void => setSource(value as SourceFilter)}
-					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={rules}
-				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 {rules.length} of {total} model{total === 1 ? '' : 's'}
-				{' · '}All prices per 1M tokens (USD)
-			</footer>
-
-			<ModelCostDrawer
-				isOpen={drawer.isOpen}
-				mode={drawer.mode}
-				draft={drawer.draft}
-				setDraft={drawer.setDraft}
-				onClose={drawer.close}
-				onSave={drawer.save}
-				onDelete={drawer.deleteRule}
-				isSaving={drawer.isSaving}
-				isDeleting={drawer.isDeleting}
-				saveError={drawer.saveError}
-				canManage={canManagePricing}
-			/>
-		</div>
-	);
-}
-
-export default LLMObservabilityModelPricing;

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

@@ -1,388 +0,0 @@
-.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;
-	}
-
-	.extra-buckets-section {
-		margin-top: 14px;
-		gap: 10px;
-
-		&__head {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			.optional-label {
-				font-size: 11px;
-				font-weight: 400;
-				color: var(--bg-vanilla-400);
-			}
-		}
-	}
-
-	.bucket-row {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-
-		&__name {
-			flex: 0 0 110px;
-			font-size: 12px;
-			color: var(--bg-vanilla-200);
-			font-family: var(--code-font-family, monospace);
-		}
-
-		input {
-			flex: 1 1 auto;
-			min-width: 0;
-		}
-
-		&__unit {
-			flex: 0 0 auto;
-			font-size: 12px;
-			color: var(--bg-vanilla-400);
-		}
-
-		&__remove {
-			flex: 0 0 auto;
-			background: transparent;
-			border: none;
-			padding: 4px;
-			cursor: pointer;
-			color: var(--bg-vanilla-400);
-			display: inline-flex;
-			align-items: center;
-
-			&:hover {
-				color: var(--bg-cherry-400);
-			}
-		}
-	}
-
-	.bucket-add-btn {
-		width: 100%;
-	}
-
-	.bucket-picker {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 10px;
-		padding: 12px;
-		border-radius: 6px;
-		background: rgba(255, 255, 255, 0.02);
-		border: 1px solid var(--bg-slate-300);
-
-		&__title {
-			font-size: 11px;
-			text-transform: uppercase;
-			letter-spacing: 0.04em;
-			color: var(--bg-vanilla-400);
-		}
-
-		&__chips {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 8px;
-		}
-	}
-
-	.drawer-error {
-		padding: 10px 12px;
-		border-radius: 4px;
-		background: rgba(255, 90, 90, 0.08);
-		color: var(--bg-cherry-400);
-		font-size: 12px;
-	}
-}

frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.tsx

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

frontend/src/container/LLMObservabilityModelPricing/ModelCostsTable.tsx

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

frontend/src/container/LLMObservabilityModelPricing/PatternEditor.tsx

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

frontend/src/container/LLMObservabilityModelPricing/PricingFields.tsx

@@ -1,78 +0,0 @@
-import { Input } from '@signozhq/ui/input';
-import { Lock } from '@signozhq/icons';
-
-import ExtraPricingBuckets from './ExtraPricingBuckets';
-import { parsePricingAmount } from './utils';
-import type { DrawerDraft } from './types';
-
-type Pricing = DrawerDraft['pricing'];
-
-interface PricingFieldsProps {
-	pricing: Pricing;
-	isReadOnly: boolean;
-	onChange: (patch: Partial<Pricing>) => void;
-}
-
-function PricingFields({
-	pricing,
-	isReadOnly,
-	onChange,
-}: PricingFieldsProps): JSX.Element {
-	return (
-		<div className="drawer-section drawer-surface">
-			<div className="drawer-surface__head">
-				<h4>Pricing (per 1M tokens, USD)</h4>
-				{isReadOnly && (
-					<span className="managed-label" data-testid="drawer-readonly-label">
-						<Lock size={12} />
-						Read-only
-					</span>
-				)}
-			</div>
-			<div className="pricing-grid">
-				<div className="pricing-field">
-					<label htmlFor="input-cost">
-						Input cost <span className="required">*</span>
-					</label>
-					<Input
-						id="input-cost"
-						type="number"
-						min={0}
-						step={0.01}
-						value={pricing.input}
-						disabled={isReadOnly}
-						onChange={(e): void =>
-							onChange({ input: parsePricingAmount(e.target.value) ?? 0 })
-						}
-						testId="drawer-input-cost"
-					/>
-				</div>
-				<div className="pricing-field">
-					<label htmlFor="output-cost">
-						Output cost <span className="required">*</span>
-					</label>
-					<Input
-						id="output-cost"
-						type="number"
-						min={0}
-						step={0.01}
-						value={pricing.output}
-						disabled={isReadOnly}
-						onChange={(e): void =>
-							onChange({ output: parsePricingAmount(e.target.value) ?? 0 })
-						}
-						testId="drawer-output-cost"
-					/>
-				</div>
-			</div>
-
-			<ExtraPricingBuckets
-				pricing={pricing}
-				isReadOnly={isReadOnly}
-				onChange={onChange}
-			/>
-		</div>
-	);
-}
-
-export default PricingFields;

frontend/src/container/LLMObservabilityModelPricing/SourceSelector.tsx

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

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

@@ -1,194 +0,0 @@
-import {
-	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
-	type LlmpricingruletypesLLMPricingRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { rest, server } from 'mocks-server/server';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-
-import LLMObservabilityModelPricing from '../LLMObservabilityModelPricing';
-
-const ENDPOINT = '*/api/v1/llm_pricing_rules';
-
-const mockRules: LlmpricingruletypesLLMPricingRuleDTO[] = [
-	{
-		id: 'rule-gpt4o',
-		orgId: 'org-1',
-		modelName: 'gpt-4o',
-		provider: 'OpenAI',
-		modelPattern: ['gpt-4o'],
-		isOverride: false,
-		enabled: true,
-		unit: UnitDTO.per_million_tokens,
-		pricing: { input: 15, output: 60 },
-	},
-	{
-		id: 'rule-llama',
-		orgId: 'org-1',
-		modelName: 'llama-3.1-70b',
-		provider: 'Self-hosted',
-		modelPattern: ['llama-3.1'],
-		isOverride: true,
-		enabled: true,
-		unit: UnitDTO.per_million_tokens,
-		pricing: { input: 0, output: 0 },
-	},
-];
-
-describe('LLMObservabilityModelPricing', () => {
-	beforeEach(() => {
-		server.use(
-			rest.get(ENDPOINT, (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							items: mockRules,
-							limit: 100,
-							offset: 0,
-							total: mockRules.length,
-						},
-					}),
-				),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders the page header and both rules', async () => {
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-		expect(screen.getByText('Configuration')).toBeInTheDocument();
-		expect(screen.getByText('llama-3.1-70b')).toBeInTheDocument();
-		expect(screen.getByText('openai:gpt-4o')).toBeInTheDocument();
-	});
-
-	it('search is server-driven: typing sends the q param to the list request', async () => {
-		const requestedQ: (string | null)[] = [];
-		server.use(
-			rest.get(ENDPOINT, (req, res, ctx) => {
-				requestedQ.push(req.url.searchParams.get('q'));
-				return res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: { items: mockRules, limit: 20, offset: 0, total: mockRules.length },
-					}),
-				);
-			}),
-		);
-
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-
-		fireEvent.change(screen.getByTestId('search-input'), {
-			target: { value: 'llama' },
-		});
-
-		// Debounced, so the request fires shortly after typing stops.
-		await waitFor(() => expect(requestedQ).toContain('llama'));
-	});
-
-	// TODO: drive this through the actual source <SelectSimple> UI (open the
-	// dropdown + click "User override") instead of seeding the URL. The radix
-	// Select popover doesn't open under jsdom, so for now we assert the wiring
-	// via the URL param. Fix once we have a reliable way to interact with the
-	// Select in tests.
-	it('source filter is server-driven: the URL source param is sent to the list request', async () => {
-		const requestedSource: (string | null)[] = [];
-		server.use(
-			rest.get(ENDPOINT, (req, res, ctx) => {
-				requestedSource.push(req.url.searchParams.get('source'));
-				return res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: { items: mockRules, limit: 20, offset: 0, total: mockRules.length },
-					}),
-				);
-			}),
-		);
-
-		render(
-			<LLMObservabilityModelPricing />,
-			{},
-			{ initialRoute: '/?source=override' },
-		);
-
-		await screen.findByText('gpt-4o');
-
-		await waitFor(() => expect(requestedSource).toContain('override'));
-	});
-
-	it('opens the drawer in Add mode when the Add button is clicked', async () => {
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-		fireEvent.click(screen.getByTestId('add-model-cost-btn'));
-
-		const input = (await screen.findByTestId(
-			'drawer-model-id-input',
-		)) as HTMLInputElement;
-		expect(input).toBeInTheDocument();
-		expect(input.value).toBe('');
-	});
-
-	it('opens the drawer in Edit mode with prefilled values when a row Edit is clicked', async () => {
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('gpt-4o');
-		fireEvent.click(screen.getByTestId('edit-rule-rule-gpt4o'));
-
-		const input = (await screen.findByTestId(
-			'drawer-model-id-input',
-		)) as HTMLInputElement;
-		expect(input).toBeInTheDocument();
-		expect(input.value).toBe('gpt-4o');
-	});
-
-	it('hides the Add button for non-admin users (write APIs are Admin-only)', async () => {
-		render(<LLMObservabilityModelPricing />, {}, { role: 'VIEWER' });
-
-		await screen.findByText('gpt-4o');
-		expect(screen.queryByTestId('add-model-cost-btn')).not.toBeInTheDocument();
-		// rows still open in read-only "View" mode
-		expect(screen.getByTestId('edit-rule-rule-gpt4o')).toHaveTextContent('View');
-	});
-
-	it('paginates server-side: selecting page 2 requests the next offset', async () => {
-		const requestedOffsets: number[] = [];
-		server.use(
-			rest.get(ENDPOINT, (req, res, ctx) => {
-				const offset = Number(req.url.searchParams.get('offset') ?? '0');
-				requestedOffsets.push(offset);
-				return res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							items: [
-								{ ...mockRules[0], id: `rule-${offset}`, modelName: `model-${offset}` },
-							],
-							limit: 20,
-							offset,
-							total: 25,
-						},
-					}),
-				);
-			}),
-		);
-
-		render(<LLMObservabilityModelPricing />);
-
-		await screen.findByText('model-0');
-		fireEvent.click(screen.getByRole('button', { name: '2' }));
-
-		await screen.findByText('model-20');
-		expect(requestedOffsets).toContain(20);
-	});
-});

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

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

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

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

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

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

frontend/src/container/LLMObservabilityModelPricing/constants.ts

@@ -1,41 +0,0 @@
-import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { CacheBucketDef, DrawerDraft } from './types';
-
-export const PROVIDER_OPTIONS = [
-	{ value: 'OpenAI', label: 'OpenAI' },
-	{ value: 'Anthropic', label: 'Anthropic' },
-	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
-	{ value: 'Google', label: 'Google' },
-	{ value: 'Self-hosted', label: 'Self-hosted' },
-	{ value: 'Other', label: 'Other' },
-];
-
-export const CACHE_MODE_OPTIONS = [
-	{ value: CacheModeDTO.subtract, label: 'Subtract (OpenAI style)' },
-	{ value: CacheModeDTO.additive, label: 'Additive (Anthropic style)' },
-	{ value: CacheModeDTO.unknown, label: 'Unknown' },
-];
-
-// Optional buckets offered in the "Add pricing bucket" picker. Only the cache
-// buckets are persisted by the API today (pricing.cache.read/write).
-export const CACHE_BUCKETS: CacheBucketDef[] = [
-	{ key: 'cacheRead', label: 'cache_read', testId: 'cache-read' },
-	{ key: 'cacheWrite', label: 'cache_write', testId: 'cache-write' },
-];
-
-export const EMPTY_DRAFT: DrawerDraft = {
-	id: null,
-	sourceId: null,
-	modelName: '',
-	provider: 'OpenAI',
-	patterns: [],
-	isOverride: true,
-	pricing: {
-		input: 0,
-		output: 0,
-		cacheMode: CacheModeDTO.unknown,
-		cacheRead: null,
-		cacheWrite: null,
-	},
-};

frontend/src/container/LLMObservabilityModelPricing/types.ts

@@ -1,55 +0,0 @@
-import {
-	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
-	type ListLLMPricingRulesParams,
-	type LlmpricingruletypesLLMPricingRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
-
-export type SourceFilter = 'all' | 'auto' | 'override';
-
-// List request params. Extends the generated (offset/limit) params with the
-// search/source filters — backend support is pending, but sending them now
-// keeps the page backend-driven so no FE change is needed once it lands.
-export type ListModelPricingParams = ListLLMPricingRulesParams & {
-	q?: string;
-	source?: Exclude<SourceFilter, 'all'>;
-};
-
-export interface ExtraBucket {
-	key: string;
-	pricePerMillion: number;
-}
-
-export type DrawerMode = 'add' | 'edit';
-
-// Optional pricing buckets the user can add/remove. Keyed by the matching
-// DrawerDraft['pricing'] field.
-export type CacheBucketKey = 'cacheRead' | 'cacheWrite';
-
-export interface CacheBucketDef {
-	key: CacheBucketKey;
-	label: string;
-	testId: string;
-}
-
-export interface DrawerDraft {
-	id: string | null;
-	sourceId: string | null;
-	modelName: string;
-	provider: string;
-	patterns: string[];
-	isOverride: boolean;
-	pricing: {
-		input: number;
-		output: number;
-		cacheMode: CacheModeDTO;
-		cacheRead: number | null;
-		cacheWrite: number | null;
-	};
-}
-
-export interface ValidationResult {
-	ok: boolean;
-	message?: string;
-}

frontend/src/container/LLMObservabilityModelPricing/useModelCostDrawer.ts

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

frontend/src/container/LLMObservabilityModelPricing/useModelPricingFilters.ts

@@ -1,74 +0,0 @@
-import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import type { SourceFilter } from './types';
-
-const SEARCH_KEY = 'q';
-const SOURCE_KEY = 'source';
-const PAGE_KEY = 'page';
-
-const DEFAULT_SOURCE: SourceFilter = 'all';
-
-export interface ModelPricingFilters {
-	search: string;
-	source: SourceFilter;
-	page: number;
-	setSearch: (value: string) => void;
-	setSource: (value: SourceFilter) => void;
-	setPage: (value: number) => void;
-}
-
-const isSourceFilter = (value: string | null): value is SourceFilter =>
-	value === 'all' || value === 'auto' || value === 'override';
-
-// Keeps the model-cost list filters (search / source / page) in the URL so the
-// view is shareable and reload-safe. These map straight onto the list request
-// params (q, source, offset), making the table backend-driven once the API
-// honours them.
-export function useModelPricingFilters(): ModelPricingFilters {
-	const history = useHistory();
-	const urlQuery = useUrlQuery();
-
-	const search = urlQuery.get(SEARCH_KEY) ?? '';
-	const sourceParam = urlQuery.get(SOURCE_KEY);
-	const source = isSourceFilter(sourceParam) ? sourceParam : DEFAULT_SOURCE;
-	const page = Math.max(1, Number(urlQuery.get(PAGE_KEY)) || 1);
-
-	const setParam = useCallback(
-		(key: string, value: string | null, resetPage: boolean): void => {
-			const next = new URLSearchParams(urlQuery.toString());
-			if (value) {
-				next.set(key, value);
-			} else {
-				next.delete(key);
-			}
-			// Filter changes invalidate the current page offset.
-			if (resetPage) {
-				next.delete(PAGE_KEY);
-			}
-			history.replace({ search: next.toString() });
-		},
-		[history, urlQuery],
-	);
-
-	const setSearch = useCallback(
-		(value: string): void => setParam(SEARCH_KEY, value.trim(), true),
-		[setParam],
-	);
-
-	const setSource = useCallback(
-		(value: SourceFilter): void =>
-			// 'all' is the default, so keep it out of the URL.
-			setParam(SOURCE_KEY, value === DEFAULT_SOURCE ? null : value, true),
-		[setParam],
-	);
-
-	const setPage = useCallback(
-		(value: number): void =>
-			setParam(PAGE_KEY, value <= 1 ? null : String(value), false),
-		[setParam],
-	);
-
-	return { search, source, page, setSearch, setSource, setPage };
-}

frontend/src/container/LLMObservabilityModelPricing/utils.ts

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

frontend/src/container/NewWidget/NewWidget.styles.scss

@@ -39,6 +39,7 @@
 	.right-header {
 		display: flex;
 		gap: 16px;
+		align-items: center;
 	}
 }
 

frontend/src/container/NewWidget/index.tsx

@@ -15,6 +15,7 @@ import { Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { adjustQueryForV5 } from 'components/QueryBuilderV2/utils';
 import { QueryParams } from 'constants/query';
@@ -820,6 +821,11 @@ function NewWidget({
 					</Flex>
 				</div>
 				<div className="right-header">
+					<HeaderRightSection
+						enableAnnouncements={false}
+						enableShare={false}
+						enableFeedback={false}
+					/>
 					{showSwitchToViewModeButton && (
 						<Button
 							color="primary"

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

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

frontend/src/container/TraceMetadata/TraceMetadata.styles.scss

@@ -68,10 +68,6 @@
 				border-left: unset;
 				border-radius: 0px 4px 4px 0px;
 			}
-
-			.new-view-btn {
-				margin-left: 8px;
-			}
 		}
 
 		.second-row {

frontend/src/hooks/aiAssistant/__tests__/useResolvePageType.test.ts

@@ -0,0 +1,48 @@
+import { renderHook } from '@testing-library/react';
+import { PageTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import type { AIAssistantVariant } from 'container/AIAssistant/VariantContext';
+import ROUTES from 'constants/routes';
+
+import { useResolvePageType } from '../useResolvePageType';
+
+const mockUseLocation = jest.fn();
+const mockUseVariant = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): unknown => mockUseLocation(),
+}));
+
+jest.mock('container/AIAssistant/VariantContext', () => ({
+	useVariant: (): unknown => mockUseVariant(),
+}));
+
+function setup(
+	pathname: string,
+	search: string,
+	variant: AIAssistantVariant,
+): PageTypeDTO {
+	mockUseLocation.mockReturnValue({ pathname, search });
+	mockUseVariant.mockReturnValue(variant);
+
+	return renderHook(() => useResolvePageType()).result.current;
+}
+
+describe('useResolvePageType', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns other for the standalone "page" assistant surface', () => {
+		const pathname = ROUTES.DASHBOARD.replace(':dashboardId', 'dash-123');
+
+		expect(setup(pathname, '', 'page')).toBe(PageTypeDTO.other);
+	});
+
+	it('resolves the underlying page type for embedded variants', () => {
+		const pathname = ROUTES.DASHBOARD.replace(':dashboardId', 'dash-123');
+
+		expect(setup(pathname, '', 'panel')).toBe(PageTypeDTO.dashboard_detail);
+		expect(setup(pathname, '', 'modal')).toBe(PageTypeDTO.dashboard_detail);
+	});
+});

frontend/src/hooks/aiAssistant/useResolvePageType.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { PageTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
+import { resolvePageType } from 'container/AIAssistant/resolvePageType';
+import { useVariant } from 'container/AIAssistant/VariantContext';
+
+/**
+ * React hook wrapper around `resolvePageType` that derives the current
+ * `page_type` from the active location and assistant variant.
+ */
+export function useResolvePageType(): PageTypeDTO {
+	const location = useLocation();
+	const variant = useVariant();
+
+	return useMemo(
+		() =>
+			resolvePageType(location.pathname, location.search, {
+				isStandaloneAssistant: variant === 'page',
+			}),
+		[location.pathname, location.search, variant],
+	);
+}

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './NoData.module.scss';
+
+interface NoDataProps {
+	/** Message to display. Defaults to "No data". */
+	label?: string;
+	'data-testid'?: string;
+}
+
+/**
+ * Shared empty-state for panel renderers, shown when a query resolves but
+ * returns nothing to plot. Centred in the panel body so every panel kind
+ * surfaces the same "No data" affordance instead of each renderer (or its
+ * underlying chart) inventing its own copy and casing.
+ */
+function NoData({
+	label = 'No data',
+	'data-testid': testId = 'panel-no-data',
+}: NoDataProps): JSX.Element {
+	return (
+		<div className={styles.noData} data-testid={testId}>
+			<Typography.Text className={styles.noDataText}>{label}</Typography.Text>
+		</div>
+	);
+}
+
+export default NoData;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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