chore(css-modules): add good practices for writing css module files

* chore: follow proper unmarshal json method structure

* feat: v2 create dashboard API

* fix: only return name of a tag in dashboard response

* fix: use existing tag's casing if new tag is a prefix of an existing tag

* fix: go lint fix

* fix: more dashboard request validations

* chore: separate method for validation

* fix: module should also validate postable dashboard

* test: integration tests for create API

* test: integration test fixes

* chore: use existing mapper

* fix: remove extra spec from builder query marshalling

* fix: merge conflicts

* feat: v2 dashboard GET API

* feat: v2 dashboard update API

* fix: add allowed values in err messages

* fix: remove extra (un)marshal cycle

* fix: return 500 err if spec is nil for composite kind w/ code comment

* fix: no need for copying textboxvariablespec

* fix: wrap errors

* chore: no v2 subpackage

* fix: no v2 package and its consequences

* fix: no v2 package and its consequences

* Merge branch 'nv/v2-dashboard-create' into nv/v2-dashboard-get

* fix: merge fixes

* fix: query-less panels not allowed

* feat: consolidate tag module and tagtypes changes from downstream branches

* chore: update api specs

* chore: update api specs

* fix: allow only 1 query in a panel

* test: unit test fixes

* feat: method to fetch tags for multiple entries at once

* test: fix mock interface in test

* feat: move tags to key:value pairs model

* feat: entity type column in tags

* fix: pass entity type in create many

* feat: reserved DSL key validation for tags

* feat: new module for tags

* chore: merge conflicts error fixing pt 1

* fix: lint fix regarding nil, nil return in test file

* chore: change where tag module is instantiated

* fix: add back api endpoint

* chore: generate api spec

* fix: remove soft delete references

* chore: embed StorableDashboard into joinedRow in store method

* fix: extend bun in joinedRow

* fix: compile error fix

* fix: remove soft delete references

* feat: method to build postable tags from tags

* fix: diff error codes for invalid keys and values

* fix: correct pk in bun model for tag relations

* fix: created and updated by schema

* fix: use coretypes.Kind instead of defining entity type

* fix: singular table name

* chore: remove org ID from tag relation

* feat: foreign key on tag id

* feat: add SyncTags method that covers creation and linking

* fix: remove entity type definition

* fix: fix build errors in dashboard module

* chore: bump migration number

* chore: change entity id to resource id

* fix: add org id filter in all list and delete queries

* fix: remove user auditable

* fix: add ID in tag relation

* fix: fix build error

* fix: fix build error

* chore: bump migration number

* fix: add len check on tags keys and values

* fix: add regex for tags

* chore: remove methods that shouldn't be exposed

* fix: use sync tags in create api

* feat: functional unique index in sql schema

* fix: only ascii in regex

* fix: use sync tags method in update

* chore: rename create method to createOrGet

* chore: use tagtypestest package for mock store

* chore: combine functional unique index with unique index

* chore: move tag resolution to module

* test: add unit tests for new idx type

* chore: comment out tags unique index for now

* chore: add a todo comment

* chore: comment out unique index test

* feat: add created at to tag relations

* chore: comment out unique index test

* chore: bump migration number

* chore: remove uploaded grafana flag from metadata

* Merge branch 'main' into nv/v2-dashboard-create

* chore: revert idx generation to resolve conflicts

* fix: use store.RunInTx instead of taking in sqlstore

* fix: use binding package to get request

* chore: move NewDashboardV2 to NewDashboardV2WithoutTags

* chore: rename module to m

* fix: add ctx needed in sqlstore

* fix: remove sqlstore passage in ee pkg

* chore: change dashboardData to dashboardSpec

* feat: follow the metadata+spec key structure

* feat: follow the metadata+spec key structure in open api spec

* feat: v2 dashboard GET API (#11136)

* feat: v2 dashboard GET API

* Merge branch 'nv/v2-dashboard-create' into nv/v2-dashboard-get

* chore: update api specs

* fix: remove soft delete references

* chore: embed StorableDashboard into joinedRow in store method

* fix: fix build error

* chore: revert all frontend changes

* fix: remove public dashboard from get v2 call

* chore: revert all frontend changes

* fix: fix build errors post merge conflict resolution

* feat: lock, unlock, create public, update public v2 dashboard APIs (#11167)

* feat: lock, unlock, create public, update public v2 dashboard APIs

* chore: update api specs

* fix: use new pattern of checking for admin permission

* fix: remove soft delete reference

* chore: revert all frontend changes

* fix: fix build errors and remove v2 create/update public apis

* chore: use v1 methods wherever possible

* fix: use update v2 store method

* chore: update frontend schema

* chore: update frontend schema

* chore: generate api specs

* chore: generate api specs

* feat: patch dashboard api (#11182)

* feat: lock, unlock, create public, update public v2 dashboard APIs

* feat: delete dashboard v2 API and hard delete cron job

* feat: patch dashboard api

* chore: update api specs

* chore: update api specs

* chore: update api specs

* chore: remove delete related work

* fix: add examples of structs for value param in param description

* test: unit test fixes

* fix: use new pattern of checking for admin permission

* fix: remove soft delete reference

* test: key value tags in test

* fix: build error in patch module method

* fix: build error in Apply method

* fix: use sync tags method in update

* fix: fix build errors

* fix: fix all patch application tests

* chore: add more mapper methods

* fix: add source for v2 dashboards

* chore: incorporate source

* chore: incorporate source in api spec

* chore: incorporate source

* fix: add some required fields

* feat: add immutable name in dashboard v2

* feat: add immutable name in dashboard v2

* feat: add immutable name in dashboard v2 api specs

* fix: remove unused param in constructor

* fix: improve api descriptions

* fix: remove unneeded comment

* chore: increase MaxTagsPerDashboard to 10

* fix: set display name in unmarshal json

* chore: remove integration test for now (will add along with list api)

* feat: add validation on dashboard name

* test: fix build errors and tests based on name related changes

* fix: correct convertor method name

* test: add unit tests for type conversions

* chore: remove enum def of threshold comparison operator

* feat: add flag to generate unique name in backend

* chore: generate api specs

* chore: make tags required in postable

* fix: build error fix

* fix: fix build error in test after merge conflict

* fix: remove unused store method

* fix: remove unused module methods

* fix: use v1 store update method

* fix: change data to spec in api param description

* chore: add back accidentally removed tests

* fix: address review comments

* chore: generate frontend api spec

* chore: use same jsonpatch package as done in zeus

* chore: remove JSONPatchDocument and use patchable everywhere

* fix: make remove idempotent in patch

* chore: separate file for patch types

* chore: better error passage

* fix: remove extra decodePatch calls

* fix: use must new org id

* fix: proper error passage

* chore: rename updateable to updatable

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

docs/api/openapi.yml

@@ -2645,6 +2645,30 @@ components:
         legend:
           $ref: '#/components/schemas/DashboardtypesLegend'
       type: object
+    DashboardtypesJSONPatchOperation:
+      properties:
+        from:
+          description: Source JSON Pointer for move/copy ops; ignored for other ops.
+          type: string
+        op:
+          $ref: '#/components/schemas/DashboardtypesPatchOp'
+        path:
+          description: JSON Pointer (RFC 6901) into the dashboard's postable shape
+            — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0,
+            /tags/-.
+          type: string
+        value:
+          description: 'Value to add/replace/test against. The expected type depends
+            on the path. Common shapes (see referenced schemas for the exact field
+            set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N
+            (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable;
+            /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a
+            TagtypesPostableTag; /spec/display/name and other leaf string fields take
+            a string. Required for add/replace/test; ignored for remove/move/copy.'
+      required:
+      - op
+      - path
+      type: object
     DashboardtypesLayout:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
@@ -2860,6 +2884,20 @@ components:
             $ref: '#/components/schemas/DashboardtypesQuery'
           type: array
       type: object
+    DashboardtypesPatchOp:
+      enum:
+      - add
+      - remove
+      - replace
+      - move
+      - copy
+      - test
+      type: string
+    DashboardtypesPatchableDashboardV2:
+      items:
+        $ref: '#/components/schemas/DashboardtypesJSONPatchOperation'
+      nullable: true
+      type: array
     DashboardtypesPieChartPanelSpec:
       properties:
         formatting:
@@ -3147,6 +3185,27 @@ components:
         timePreference:
           $ref: '#/components/schemas/DashboardtypesTimePreference'
       type: object
+    DashboardtypesUpdatableDashboardV2:
+      properties:
+        image:
+          type: string
+        name:
+          type: string
+        schemaVersion:
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesDashboardSpec'
+        tags:
+          items:
+            $ref: '#/components/schemas/TagtypesPostableTag'
+          nullable: true
+          type: array
+      required:
+      - schemaVersion
+      - name
+      - tags
+      - spec
+      type: object
     DashboardtypesUpdatablePublicDashboard:
       properties:
         defaultTimeRange:
@@ -12824,6 +12883,12 @@ paths:
                 - data
                 type: object
           description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
         "401":
           content:
             application/json:
@@ -12876,6 +12941,12 @@ paths:
                 - data
                 type: object
           description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
         "401":
           content:
             application/json:
@@ -12888,6 +12959,12 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
         "500":
           content:
             application/json:
@@ -12902,6 +12979,262 @@ paths:
       summary: Get dashboard (v2)
       tags:
       - dashboard
+    patch:
+      deprecated: false
+      description: 'This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard.
+        The patch is applied against the postable view of the dashboard (metadata,
+        data, tags), so individual panels, queries, variables, layouts, or tags can
+        be updated without re-sending the rest of the dashboard. Apply is lenient:
+        `remove` on a missing path is a no-op (idempotent) and `add` creates any missing
+        parent objects, rather than failing as strict RFC 6902 would. The resulting
+        dashboard is still validated. Locked dashboards are rejected.'
+      operationId: PatchDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesPatchableDashboardV2'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  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: Patch dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint updates a v2-shape dashboard's metadata, data, and
+        tag set. Locked dashboards are rejected.
+      operationId: UpdateDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesUpdatableDashboardV2'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  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 (v2)
+      tags:
+      - dashboard
+  /api/v2/dashboards/{id}/lock:
+    delete:
+      deprecated: false
+      description: This endpoint unlocks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: UnlockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          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: Unlock dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint locks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: LockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          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: Lock dashboard (v2)
+      tags:
+      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -221,6 +221,18 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

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/__mocks__/useSafeNavigate.ts

@@ -1,28 +0,0 @@
-// Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
-interface SafeNavigateOptions {
-	replace?: boolean;
-	state?: unknown;
-	newTab?: boolean;
-}
-
-interface SafeNavigateTo {
-	pathname?: string;
-	search?: string;
-	hash?: string;
-}
-
-type SafeNavigateToType = string | SafeNavigateTo;
-
-interface UseSafeNavigateReturn {
-	safeNavigate: jest.MockedFunction<
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-	>;
-}
-
-export const useSafeNavigate = (): UseSafeNavigateReturn => ({
-	safeNavigate: jest.fn(
-		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
-	) as jest.MockedFunction<
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-	>,
-});

frontend/docs/css-modules-guide.md

@@ -0,0 +1,471 @@
+# CSS Modules Guide for AI Agents
+
+## 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? |
+|-----------|-----------|--------|
+| `.alertHistory` | `styles.alertHistory` | Yes |
+| `.alert-history` | `styles.alertHistory` | Yes |
+| `.alert-history` | `styles['alert-history']` | NO - undefined |
+
+## 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 { }
+```
+
+### 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;
+  }
+}
+```
+
+## 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
+```
+
+## Checklist Before Committing
+
+- [ ] All class names use camelCase in CSS
+- [ ] No bracket access (`styles['...']`) in JS unless verified
+- [ ] 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
+
+## 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/jest.config.ts

@@ -1,6 +1,8 @@
 import type { Config } from '@jest/types';
 
-const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
+const USE_SAFE_NAVIGATE_MOCK_PATH =
+	'<rootDir>/src/__tests__/safeNavigateMock.ts';
+const LOG_EVENT_MOCK_PATH = '<rootDir>/src/__tests__/logEventMock.ts';
 
 const config: Config.InitialOptions = {
 	silent: true,
@@ -22,6 +24,8 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^api/common/logEvent$': LOG_EVENT_MOCK_PATH,
+		'^src/api/common/logEvent$': LOG_EVENT_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',

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/__tests__/logEventMock.ts

@@ -0,0 +1,11 @@
+// Shared mock for `api/common/logEvent`.
+// Wired into jest.config.ts moduleNameMapper, so any import of
+// `api/common/logEvent` in test code resolves to this file.
+// Tests can import `logEventMock` to assert analytics calls — Jest's
+// `clearMocks: true` resets call history between tests.
+
+export const logEventMock: jest.MockedFunction<
+	(eventName: string, attributes?: Record<string, unknown>) => void
+> = jest.fn();
+
+export default logEventMock;

frontend/src/__tests__/safeNavigateMock.ts

@@ -0,0 +1,29 @@
+// Shared mock for `hooks/useSafeNavigate`.
+// Wired into jest.config.ts moduleNameMapper, so any import of
+// `hooks/useSafeNavigate` in test code resolves to this file.
+// Tests can import `safeNavigateMock` to assert navigation calls — Jest's
+// `clearMocks: true` resets call history between tests.
+
+interface SafeNavigateOptions {
+	replace?: boolean;
+	state?: unknown;
+	newTab?: boolean;
+}
+
+interface SafeNavigateTo {
+	pathname?: string;
+	search?: string;
+	hash?: string;
+}
+
+type SafeNavigateToType = string | SafeNavigateTo;
+
+export const safeNavigateMock: jest.MockedFunction<
+	(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+> = jest.fn();
+
+export const useSafeNavigate = (): {
+	safeNavigate: typeof safeNavigateMock;
+} => ({
+	safeNavigate: safeNavigateMock,
+});

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

@@ -21,8 +21,10 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
+	DashboardtypesPatchableDashboardV2DTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
+	DashboardtypesUpdatableDashboardV2DTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
 	DeletePublicDashboardPathParameters,
 	GetDashboardV2200,
@@ -33,7 +35,13 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	LockDashboardV2PathParameters,
+	PatchDashboardV2200,
+	PatchDashboardV2PathParameters,
 	RenderErrorResponseDTO,
+	UnlockDashboardV2PathParameters,
+	UpdateDashboardV2200,
+	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -816,3 +824,360 @@ export const invalidateGetDashboardV2 = async (
 
 	return queryClient;
 };
+
+/**
+ * This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.
+ * @summary Patch dashboard (v2)
+ */
+export const patchDashboardV2 = (
+	{ id }: PatchDashboardV2PathParameters,
+	dashboardtypesPatchableDashboardV2DTONull?: BodyType<DashboardtypesPatchableDashboardV2DTO | null> | null,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<PatchDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesPatchableDashboardV2DTONull,
+		signal,
+	});
+};
+
+export const getPatchDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+	},
+	TContext
+> => {
+	const mutationKey = ['patchDashboardV2'];
+	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 patchDashboardV2>>,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return patchDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PatchDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof patchDashboardV2>>
+>;
+export type PatchDashboardV2MutationBody =
+	| BodyType<DashboardtypesPatchableDashboardV2DTO | null>
+	| undefined;
+export type PatchDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Patch dashboard (v2)
+ */
+export const usePatchDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchDashboardV2>>,
+		TError,
+		{
+			pathParams: PatchDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof patchDashboardV2>>,
+	TError,
+	{
+		pathParams: PatchDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesPatchableDashboardV2DTO | null>;
+	},
+	TContext
+> => {
+	return useMutation(getPatchDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.
+ * @summary Update dashboard (v2)
+ */
+export const updateDashboardV2 = (
+	{ id }: UpdateDashboardV2PathParameters,
+	dashboardtypesUpdatableDashboardV2DTO?: BodyType<DashboardtypesUpdatableDashboardV2DTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateDashboardV2200>({
+		url: `/api/v2/dashboards/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesUpdatableDashboardV2DTO,
+		signal,
+	});
+};
+
+export const getUpdateDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateDashboardV2'];
+	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 updateDashboardV2>>,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateDashboardV2(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateDashboardV2>>
+>;
+export type UpdateDashboardV2MutationBody =
+	| BodyType<DashboardtypesUpdatableDashboardV2DTO>
+	| undefined;
+export type UpdateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update dashboard (v2)
+ */
+export const useUpdateDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDashboardV2>>,
+		TError,
+		{
+			pathParams: UpdateDashboardV2PathParameters;
+			data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateDashboardV2>>,
+	TError,
+	{
+		pathParams: UpdateDashboardV2PathParameters;
+		data?: BodyType<DashboardtypesUpdatableDashboardV2DTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateDashboardV2MutationOptions(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)
+ */
+export const unlockDashboardV2 = (
+	{ id }: UnlockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getUnlockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['unlockDashboardV2'];
+	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 unlockDashboardV2>>,
+		{ pathParams: UnlockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return unlockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UnlockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof unlockDashboardV2>>
+>;
+
+export type UnlockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Unlock dashboard (v2)
+ */
+export const useUnlockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof unlockDashboardV2>>,
+		TError,
+		{ pathParams: UnlockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof unlockDashboardV2>>,
+	TError,
+	{ pathParams: UnlockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getUnlockDashboardV2MutationOptions(options));
+};
+/**
+ * This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
+ * @summary Lock dashboard (v2)
+ */
+export const lockDashboardV2 = (
+	{ id }: LockDashboardV2PathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v2/dashboards/${id}/lock`,
+		method: 'PUT',
+		signal,
+	});
+};
+
+export const getLockDashboardV2MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	const mutationKey = ['lockDashboardV2'];
+	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 lockDashboardV2>>,
+		{ pathParams: LockDashboardV2PathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return lockDashboardV2(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type LockDashboardV2MutationResult = NonNullable<
+	Awaited<ReturnType<typeof lockDashboardV2>>
+>;
+
+export type LockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Lock dashboard (v2)
+ */
+export const useLockDashboardV2 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof lockDashboardV2>>,
+		TError,
+		{ pathParams: LockDashboardV2PathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof lockDashboardV2>>,
+	TError,
+	{ pathParams: LockDashboardV2PathParameters },
+	TContext
+> => {
+	return useMutation(getLockDashboardV2MutationOptions(options));
+};

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

@@ -4653,6 +4653,32 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }
 
+export enum DashboardtypesPatchOpDTO {
+	add = 'add',
+	remove = 'remove',
+	replace = 'replace',
+	move = 'move',
+	copy = 'copy',
+	test = 'test',
+}
+export interface DashboardtypesJSONPatchOperationDTO {
+	/**
+	 * @type string
+	 * @description Source JSON Pointer for move/copy ops; ignored for other ops.
+	 */
+	from?: string;
+	op: DashboardtypesPatchOpDTO;
+	/**
+	 * @type string
+	 * @description JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-.
+	 */
+	path: string;
+	/**
+	 * @description Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy.
+	 */
+	value?: unknown;
+}
+
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -4662,6 +4688,13 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 }
+/**
+ * @nullable
+ */
+export type DashboardtypesPatchableDashboardV2DTO =
+	| DashboardtypesJSONPatchOperationDTO[]
+	| null;
+
 export interface DashboardtypesPostableDashboardV2DTO {
 	/**
 	 * @type boolean
@@ -4705,6 +4738,26 @@ export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/ClickHouseSQL' = 'signoz/ClickHouseSQL',
 	'signoz/TraceOperator' = 'signoz/TraceOperator',
 }
+export interface DashboardtypesUpdatableDashboardV2DTO {
+	/**
+	 * @type string
+	 */
+	image?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	schemaVersion: string;
+	spec: DashboardtypesDashboardSpecDTO;
+	/**
+	 * @type array,null
+	 */
+	tags: TagtypesPostableTagDTO[] | null;
+}
+
 export interface DashboardtypesUpdatablePublicDashboardDTO {
 	/**
 	 * @type string
@@ -9476,6 +9529,34 @@ export type GetDashboardV2200 = {
 	status: string;
 };
 
+export type PatchDashboardV2PathParameters = {
+	id: string;
+};
+export type PatchDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateDashboardV2PathParameters = {
+	id: string;
+};
+export type UpdateDashboardV2200 = {
+	data: DashboardtypesGettableDashboardV2DTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UnlockDashboardV2PathParameters = {
+	id: string;
+};
+export type LockDashboardV2PathParameters = {
+	id: string;
+};
 export type GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -3,17 +3,12 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -35,7 +30,6 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
-const mockLogEvent = logEvent as jest.MockedFunction<typeof logEvent>;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
@@ -50,6 +44,7 @@ const mockLocation = {
 describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		logEventMock.mockReturnValue(Promise.resolve() as never);
 		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
@@ -116,7 +111,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'feedback',
 			page: mockLocation.pathname,
@@ -149,7 +144,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'reportBug',
 			page: mockLocation.pathname,
@@ -182,7 +177,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'featureRequest',
 			page: mockLocation.pathname,

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -2,16 +2,11 @@
 import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -50,7 +45,6 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
-const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
@@ -120,7 +114,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(feedbackButton!);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
@@ -133,7 +127,7 @@ describe('HeaderRightSection', () => {
 		const shareButton = screen.getByRole('button', { name: /share/i });
 		await user.click(shareButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Share: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Share: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
@@ -150,7 +144,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(announcementsButton!);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Announcements: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Announcements: Clicked', {
 			page: mockLocation.pathname,
 		});
 	});

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -5,18 +5,13 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -53,7 +48,6 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
-const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
@@ -125,7 +119,7 @@ describe('ShareURLModal', () => {
 		await user.click(copyButton);
 
 		expect(mockHandleCopyToClipboard).toHaveBeenCalled();
-		expect(mockLogEvent).toHaveBeenCalledWith('Share: Copy link clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Share: Copy link clicked', {
 			page: TEST_PATH,
 			URL: expect.any(String),
 		});

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -139,7 +139,6 @@ jest.mock('react-query', (): unknown => {
 });
 
 // mock other side-effecty modules
-jest.mock('api/common/logEvent', () => jest.fn());
 jest.mock('api/browser/localstorage/set', () => jest.fn());
 jest.mock('utils/error', () => ({ showErrorNotification: jest.fn() }));
 

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import {
@@ -24,8 +24,6 @@ jest.mock('providers/cmdKProvider', () => ({
 	}),
 }));
 
-jest.mock('api/common/logEvent', () => jest.fn());
-
 // Mock the AppContext
 const mockUpdateUserPreferenceInContext = jest.fn();
 
@@ -139,7 +137,7 @@ describe('Sidebar Toggle Shortcut', () => {
 		it('should log the toggle event with correct parameters', async () => {
 			const user = userEvent.setup();
 			const mockHandleShortcut = jest.fn(() => {
-				logEvent('Global Shortcut: Sidebar Toggle', {
+				logEventMock('Global Shortcut: Sidebar Toggle', {
 					previousState: false,
 					newState: true,
 				});
@@ -155,10 +153,13 @@ describe('Sidebar Toggle Shortcut', () => {
 
 			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
 
-			expect(logEvent).toHaveBeenCalledWith('Global Shortcut: Sidebar Toggle', {
-				previousState: false,
-				newState: true,
-			});
+			expect(logEventMock).toHaveBeenCalledWith(
+				'Global Shortcut: Sidebar Toggle',
+				{
+					previousState: false,
+					newState: true,
+				},
+			);
 		});
 
 		it('should update user preference in context', async () => {

frontend/src/container/DashboardContainer/visualization/panels/components/__tests__/TooltipFooter.test.tsx

@@ -1,16 +1,10 @@
+import { logEventMock } from '__tests__/logEventMock';
 import { Events } from 'constants/events';
 import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import TooltipFooter from '../TooltipFooter';
 
-const mockLogEvent = jest.fn();
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: (...args: unknown[]): unknown => mockLogEvent(...args),
-}));
-
 describe('TooltipFooter', () => {
 	const defaultProps = {
 		id: 'panel-123',
@@ -84,7 +78,7 @@ describe('TooltipFooter', () => {
 
 			await user.click(screen.getByTestId('uplot-tooltip-unpin'));
 
-			expect(mockLogEvent).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
+			expect(logEventMock).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
 				id: 'panel-123',
 			});
 			expect(dismiss).toHaveBeenCalledTimes(1);

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -1,7 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -67,20 +66,6 @@ function GridCardGraph({
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const [isInternalServerError, setIsInternalServerError] =
 		useState<boolean>(false);
-	const queryRangeCalledRef = useRef(false);
-
-	useEffect(() => {
-		const timeoutId = setTimeout(() => {
-			if (!queryRangeCalledRef.current) {
-				Sentry.captureEvent({
-					message: `Dashboard query range not called within expected timeframe for widget ${widget?.id}`,
-					level: 'warning',
-				});
-			}
-		}, 120000);
-		return (): void => clearTimeout(timeoutId);
-	}, [widget?.id]);
-
 	const {
 		minTime,
 		maxTime,
@@ -271,14 +256,12 @@ function GridCardGraph({
 						});
 					}
 				}
-				queryRangeCalledRef.current = true;
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
 				getGraphData?.(data?.payload?.data);
-				queryRangeCalledRef.current = true;
 			},
 		},
 	);

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -89,7 +89,7 @@ export function AlertsEmptyState({
 									onClick={onClickNewAlertHandler}
 									disabled={!addNewAlert}
 									loading={loading}
-									data-testid="add-alert"
+									testId="add-alert"
 								>
 									<span className={styles.buttonContent}>
 										<Plus size="md" />
@@ -97,7 +97,12 @@ export function AlertsEmptyState({
 									</span>
 								</Button>
 								{onRefresh && (
-									<Button onClick={onRefresh} prefix={<RefreshCw />} color="secondary">
+									<Button
+										onClick={onRefresh}
+										prefix={<RefreshCw />}
+										color="secondary"
+										testId="list-alerts-empty-refresh-button"
+									>
 										Refresh
 									</Button>
 								)}

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.actions.test.tsx

@@ -0,0 +1,215 @@
+import userEvent from '@testing-library/user-event';
+import { logEventMock } from '__tests__/logEventMock';
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { findAlertRow, renderListAlertRules } from './_helpers';
+
+async function openActionsMenu(row: HTMLElement): Promise<void> {
+	const trigger = row.querySelector(
+		'[data-testid="alert-actions"]',
+	) as HTMLElement | null;
+	expect(trigger).not.toBeNull();
+	const user = userEvent.setup({ delay: null });
+	await user.click(trigger as HTMLElement);
+	// Radix renders the menu items in a portal once the trigger is activated.
+	await screen.findByRole('menu');
+}
+
+async function clickMenuItem(label: string): Promise<void> {
+	const user = userEvent.setup({ delay: null });
+	const item = await screen.findByRole('menuitem', { name: label });
+	await user.click(item);
+}
+
+describe('ListAlertRules — actions menu', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('renders Enable/Disable/Edit/Edit in New Tab/Clone/Delete items after opening the menu', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+
+		expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+
+		await openActionsMenu(row);
+
+		const items = screen.getAllByRole('menuitem');
+		const labels = items.map((it) => it.textContent);
+		expect(labels).toStrictEqual(
+			expect.arrayContaining([
+				'Edit',
+				'Edit in New Tab',
+				'Clone',
+				'Delete',
+				'Disable',
+			]),
+		);
+	});
+
+	it('disabled rule (rule-4) shows "Enable" instead of "Disable"', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('Disabled Alert');
+		await openActionsMenu(row);
+
+		const items = screen.getAllByRole('menuitem');
+		const labels = items.map((it) => it.textContent);
+		expect(labels).toContain('Enable');
+		expect(labels).not.toContain('Disable');
+	});
+
+	it('toggle action: clicking Disable sends PATCH with disabled:true', async () => {
+		let capturedBody: unknown = null;
+		let capturedPath: string | null = null;
+		server.use(
+			rest.patch('http://localhost/api/v2/rules/:id', async (req, res, ctx) => {
+				capturedBody = await req.json();
+				capturedPath = req.params.id as string;
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Disable');
+
+		await waitFor(() => {
+			expect(capturedBody).toStrictEqual(
+				expect.objectContaining({ disabled: true }),
+			);
+		});
+		expect(capturedPath).toBe('rule-1');
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('edit action: clicking Edit navigates via safeNavigate and logs event', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Edit');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock.mock.calls[0][0]).toContain('ruleId=rule-1');
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Edit', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('edit in new tab action: clicking opens with newTab:true', async () => {
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Edit in New Tab');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		const [url, options] = safeNavigateMock.mock.calls[0];
+		expect(url).toContain('ruleId=rule-1');
+		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
+	});
+
+	it('clone action: sends POST with " - Copy" suffix and opens the cloned rule returned by the API', async () => {
+		let capturedPostBody: unknown = null;
+		server.use(
+			rest.post('http://localhost/api/v2/rules', async (req, res, ctx) => {
+				capturedPostBody = await req.json();
+				return res(
+					ctx.status(201),
+					ctx.json({
+						data: {
+							...(capturedPostBody as Record<string, unknown>),
+							id: 'cloned-from-server',
+						},
+						status: 'success',
+					}),
+				);
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Clone');
+
+		await waitFor(() => {
+			expect(capturedPostBody).toStrictEqual(
+				expect.objectContaining({ alert: 'High CPU Alert - Copy' }),
+			);
+		});
+
+		// The id from the server response round-trips into the navigate URL — this
+		// protects against a regression where the code hardcodes the id.
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock.mock.calls[0][0]).toContain(
+			'ruleId=cloned-from-server',
+		);
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Clone', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('delete action: sends DELETE for the rule id', async () => {
+		let deletedId: string | null = null;
+		server.use(
+			rest.delete('http://localhost/api/v2/rules/:id', (req, res, ctx) => {
+				deletedId = req.params.id as string;
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Delete');
+
+		await waitFor(() => {
+			expect(deletedId).toBe('rule-1');
+		});
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Delete', ruleId: 'rule-1' }),
+		);
+	});
+
+	it('error path: PATCH is still attempted when server returns 500', async () => {
+		let patchAttempted = false;
+		server.use(
+			rest.patch('http://localhost/api/v2/rules/:id', (_, res, ctx) => {
+				patchAttempted = true;
+				return res(ctx.status(500), ctx.json({ status: 'error' }));
+			}),
+		);
+
+		renderListAlertRules();
+		const row = await findAlertRow('High CPU Alert');
+		await openActionsMenu(row);
+		await clickMenuItem('Disable');
+
+		await waitFor(() => {
+			expect(patchAttempted).toBe(true);
+		});
+
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
+		);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.columns.test.tsx

@@ -0,0 +1,79 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+const COLUMN_STORAGE_KEY = '@signoz/table-columns/alert-rules-columns';
+
+describe('ListAlertRules — columns selector', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+		localStorage.clear();
+	});
+
+	afterEach(() => {
+		localStorage.clear();
+	});
+
+	it('opens columns popover and lists toggleable columns', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.click(screen.getByTestId('alert-columns-button'));
+
+		// Popover should reveal "Toggle Columns" heading + per-column labels.
+		await screen.findByText('Toggle Columns');
+		expect(screen.getByText('Created At')).toBeInTheDocument();
+		expect(screen.getByText('Created By')).toBeInTheDocument();
+		expect(screen.getByText('Updated At')).toBeInTheDocument();
+		expect(screen.getByText('Updated By')).toBeInTheDocument();
+	});
+
+	it('default-hidden columns (Created At/By, Updated At/By) are not in the table header', async () => {
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		const headers = document.querySelectorAll('th');
+		const headerTexts = Array.from(headers).map((h) => h.textContent || '');
+		expect(headerTexts.some((t) => t.includes('Created At'))).toBe(false);
+		expect(headerTexts.some((t) => t.includes('Created By'))).toBe(false);
+		expect(headerTexts.some((t) => t.includes('Updated At'))).toBe(false);
+		expect(headerTexts.some((t) => t.includes('Updated By'))).toBe(false);
+	});
+
+	it('toggling Created At on writes to localStorage and adds the header', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		const headersBefore = Array.from(document.querySelectorAll('th')).map(
+			(h) => h.textContent ?? '',
+		);
+		expect(headersBefore.some((t) => t.includes('Created At'))).toBe(false);
+
+		await user.click(screen.getByTestId('alert-columns-button'));
+		await screen.findByText('Toggle Columns');
+
+		const checkbox = document.getElementById('col-createdAt');
+		expect(checkbox).not.toBeNull();
+		await user.click(checkbox as HTMLElement);
+
+		await waitFor(() => {
+			const stored = window.localStorage.getItem(COLUMN_STORAGE_KEY);
+			expect(stored).not.toBeNull();
+			const parsed = JSON.parse(stored as string);
+			expect(parsed.hiddenColumnIds).not.toContain('createdAt');
+		});
+
+		await waitFor(() => {
+			const headersAfter = Array.from(document.querySelectorAll('th')).map(
+				(h) => h.textContent ?? '',
+			);
+			expect(headersAfter.some((t) => t.includes('Created At'))).toBe(true);
+		});
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.empty.test.tsx

@@ -0,0 +1,91 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import userEvent from '@testing-library/user-event';
+import ROUTES from 'constants/routes';
+import { alertRulesFixture } from 'mocks-server/__mockdata__/alert_rules';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — empty states', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('renders AlertsEmptyState when API returns no rules', async () => {
+		const user = userEvent.setup({ delay: null });
+
+		server.use(
+			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [], status: 'success' })),
+			),
+		);
+
+		renderListAlertRules();
+
+		await screen.findByText('No Alert rules yet.');
+		expect(
+			screen.getByText('Create an Alert Rule to get started'),
+		).toBeInTheDocument();
+
+		// New Alert Rule button is visible and triggers safeNavigate to ALERTS_NEW.
+		await user.click(screen.getByTestId('add-alert'));
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.ALERTS_NEW,
+			expect.objectContaining({ newTab: false }),
+		);
+	});
+
+	it('renders ErrorEmptyState when API returns 500; refresh triggers a refetch', async () => {
+		const user = userEvent.setup({ delay: null });
+
+		let callCount = 0;
+		server.use(
+			rest.get('http://localhost/api/v2/rules', (_, res, ctx) => {
+				callCount += 1;
+				if (callCount === 1) {
+					return res(ctx.status(500), ctx.json({ status: 'error' }));
+				}
+				return res(
+					ctx.status(200),
+					ctx.json({ data: alertRulesFixture, status: 'success' }),
+				);
+			}),
+		);
+
+		renderListAlertRules();
+
+		await screen.findByTestId('error-empty-state');
+
+		await user.click(screen.getByTestId('error-refresh-button'));
+
+		const rule = await screen.findByText('High CPU Alert');
+		expect(rule).toBeInTheDocument();
+	});
+
+	it('renders NoResultsEmptyState when search yields no match; Clear Search resets', async () => {
+		const user = userEvent.setup({ delay: null });
+
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		const searchInput = screen.getByTestId('list-alerts-search-input');
+		await user.clear(searchInput);
+		await user.type(searchInput, 'totally-not-found');
+
+		await screen.findByTestId('no-results-empty-state');
+		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
+			'No matching alert rules',
+		);
+		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
+			'No alert rules match your search. Try adjusting your search criteria.',
+		);
+
+		await user.click(screen.getByTestId('no-results-clear-button'));
+
+		const rule = await screen.findByText('High CPU Alert');
+		expect(rule).toBeInTheDocument();
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.list.test.tsx

@@ -0,0 +1,123 @@
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — list rendering', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('renders alert rules from API', async () => {
+		renderListAlertRules();
+
+		await expect(
+			screen.findByTestId('alert-row-rule-1-name'),
+		).resolves.toHaveTextContent('High CPU Alert');
+		expect(screen.getByTestId('alert-row-rule-2-name')).toHaveTextContent(
+			'Memory Pending Alert',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-name')).toHaveTextContent(
+			'Healthy Alert',
+		);
+		expect(screen.getByTestId('alert-row-rule-4-name')).toHaveTextContent(
+			'Disabled Alert',
+		);
+	});
+
+	it('renders state badges via STATE_CONFIG mapping', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveTextContent(
+			'Firing',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveTextContent(
+			'Pending',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveTextContent('OK');
+		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveTextContent(
+			'Disabled',
+		);
+		expect(screen.getByTestId('alert-row-rule-5-state')).toHaveTextContent('OK');
+	});
+
+	it('renders state badges with semantic colors', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveAttribute(
+			'data-color',
+			'cherry',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveAttribute(
+			'data-color',
+			'amber',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveAttribute(
+			'data-color',
+			'forest',
+		);
+		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveAttribute(
+			'data-color',
+			'vanilla',
+		);
+	});
+
+	it('renders severity badges for rules with severity', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-severity')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveTextContent(
+			'critical',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveTextContent(
+			'warning',
+		);
+		expect(screen.getByTestId('alert-row-rule-3-severity')).toHaveTextContent(
+			'info',
+		);
+		expect(screen.getByTestId('alert-row-rule-4-severity')).toHaveTextContent(
+			'critical',
+		);
+		expect(screen.getByTestId('alert-row-rule-5-severity')).toHaveTextContent(
+			'-',
+		);
+		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveAttribute(
+			'data-color',
+			'cherry',
+		);
+		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveAttribute(
+			'data-color',
+			'amber',
+		);
+	});
+
+	it('renders header controls (search, columns, new alert)', async () => {
+		renderListAlertRules();
+
+		await waitFor(() =>
+			expect(screen.getByTestId('alert-row-rule-1-name')).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('list-alerts-search-input')).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText('Search by Alert Name, Severity and Labels'),
+		).toBeInTheDocument();
+		expect(screen.getByTestId('alert-columns-button')).toBeInTheDocument();
+		expect(
+			screen.getByTestId('list-alerts-new-alert-button'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /new alert/i }),
+		).toBeInTheDocument();
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.newAlert.test.tsx

@@ -0,0 +1,65 @@
+import { logEventMock } from '__tests__/logEventMock';
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import userEvent from '@testing-library/user-event';
+import ROUTES from 'constants/routes';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — new alert button', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('plain click navigates to ALERTS_NEW with newTab:false', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.click(screen.getByRole('button', { name: /new alert/i }));
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.ALERTS_NEW,
+			expect.objectContaining({ newTab: false }),
+		);
+	});
+
+	it('logs Alert: New alert button clicked', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.click(screen.getByRole('button', { name: /new alert/i }));
+
+		await waitFor(() => {
+			expect(logEventMock).toHaveBeenCalledWith(
+				'Alert: New alert button clicked',
+				expect.objectContaining({ layout: 'new' }),
+			);
+		});
+	});
+
+	it('ctrl+click on New Alert opens in a new tab (newTab:true)', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.keyboard('{Control>}');
+		await user.click(screen.getByRole('button', { name: /new alert/i }));
+		await user.keyboard('{/Control}');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.ALERTS_NEW,
+			expect.objectContaining({ newTab: true }),
+		);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.pagination.test.tsx

@@ -0,0 +1,64 @@
+import userEvent from '@testing-library/user-event';
+import { alertRulesPaginationFixture } from 'mocks-server/__mockdata__/alert_rules';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, waitFor } from 'tests/test-utils';
+import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — pagination', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+		server.use(
+			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({ data: alertRulesPaginationFixture, status: 'success' }),
+				),
+			),
+		);
+	});
+
+	it('shows first 10 rows on page 1 (default limit)', async () => {
+		renderListAlertRules();
+
+		await screen.findByText('Pag Rule 0');
+
+		for (let i = 0; i < 10; i += 1) {
+			expect(screen.getByText(`Pag Rule ${i}`)).toBeInTheDocument();
+		}
+		expect(screen.queryByText('Pag Rule 10')).not.toBeInTheDocument();
+		expect(screen.queryByText('Pag Rule 14')).not.toBeInTheDocument();
+	});
+
+	it('shows total count when showTotalCount is enabled', async () => {
+		renderListAlertRules();
+
+		await screen.findByText('Pag Rule 0');
+
+		const totalCount = await screen.findByTestId('pagination-total-count');
+		expect(totalCount.textContent).toContain('Showing');
+		expect(totalCount.textContent).toContain('of 15');
+	});
+
+	it('navigates to page 2 and shows remaining rows', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('Pag Rule 0');
+
+		const nextBtn = screen.getByLabelText('Go to next page');
+		await user.click(nextBtn);
+
+		await waitFor(() => {
+			expect(screen.getByText('Pag Rule 10')).toBeInTheDocument();
+			expect(screen.getByText('Pag Rule 14')).toBeInTheDocument();
+			expect(screen.queryByText('Pag Rule 0')).not.toBeInTheDocument();
+		});
+
+		await waitFor(() => {
+			expect(getCurrentNuqsQueryString()).toContain('page=2');
+		});
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.permissions.test.tsx

@@ -0,0 +1,71 @@
+import { screen, waitFor } from 'tests/test-utils';
+import { USER_ROLES } from 'types/roles';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — permissions', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('VIEWER role hides "New Alert" button and "Actions" column', async () => {
+		renderListAlertRules({ role: USER_ROLES.VIEWER });
+
+		await screen.findByText('High CPU Alert');
+
+		expect(
+			screen.queryByTestId('list-alerts-new-alert-button'),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /new alert/i }),
+		).not.toBeInTheDocument();
+
+		const headers = Array.from(document.querySelectorAll('th')).map(
+			(h) => h.textContent ?? '',
+		);
+		expect(headers.some((t) => t.includes('Actions'))).toBe(false);
+		expect(screen.queryByTestId('alert-actions')).not.toBeInTheDocument();
+	});
+
+	it('ADMIN role shows "New Alert" button and "Actions" column', async () => {
+		renderListAlertRules({ role: USER_ROLES.ADMIN });
+
+		await screen.findByText('High CPU Alert');
+
+		expect(
+			screen.getByTestId('list-alerts-new-alert-button'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /new alert/i }),
+		).toBeInTheDocument();
+
+		await waitFor(() => {
+			const headers = Array.from(document.querySelectorAll('th')).map(
+				(h) => h.textContent ?? '',
+			);
+			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
+		});
+		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
+	});
+
+	it('EDITOR role behaves like ADMIN (New Alert + Actions visible)', async () => {
+		renderListAlertRules({ role: USER_ROLES.EDITOR });
+
+		await screen.findByText('High CPU Alert');
+
+		expect(
+			screen.getByTestId('list-alerts-new-alert-button'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /new alert/i }),
+		).toBeInTheDocument();
+
+		await waitFor(() => {
+			const headers = Array.from(document.querySelectorAll('th')).map(
+				(h) => h.textContent ?? '',
+			);
+			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
+		});
+		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.rowClick.test.tsx

@@ -0,0 +1,52 @@
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderListAlertRules } from './_helpers';
+
+describe('ListAlertRules — row click navigation', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('clicking a row calls safeNavigate to alerts/overview with composite query + ruleId', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		const ruleCell = await screen.findByText('High CPU Alert');
+
+		const td = ruleCell.closest('td');
+		expect(td).not.toBeNull();
+		await user.click(td as HTMLElement);
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+
+		const [url] = safeNavigateMock.mock.calls[0];
+		expect(url).toContain('/alerts/overview?');
+		expect(url).toContain('ruleId=rule-1');
+		expect(url).toContain('panelTypes=graph');
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('ctrl+click on a row navigates with newTab option', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		const ruleCell = await screen.findByText('High CPU Alert');
+
+		const td = ruleCell.closest('td');
+		await user.keyboard('{Control>}');
+		await user.click(td as HTMLElement);
+		await user.keyboard('{/Control}');
+
+		await waitFor(() => {
+			expect(safeNavigateMock).toHaveBeenCalled();
+		});
+
+		const [url, options] = safeNavigateMock.mock.calls[0];
+		expect(url).toContain('ruleId=rule-1');
+		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
+	});
+});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.search.test.tsx

@@ -0,0 +1,99 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
+
+import { renderListAlertRules } from './_helpers';
+
+function getSearchInput(): HTMLInputElement {
+	return screen.getByTestId('list-alerts-search-input') as HTMLInputElement;
+}
+
+describe('ListAlertRules — search', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('filters rows by alert name with debounce', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'CPU');
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
+			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
+		});
+	});
+
+	it('filters rows by label values (severity)', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'warning');
+
+		await waitFor(() => {
+			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
+			expect(screen.queryByText('High CPU Alert')).not.toBeInTheDocument();
+		});
+	});
+
+	it('restores all rows when search is cleared', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'CPU');
+
+		await waitFor(() => {
+			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
+		});
+
+		await user.clear(getSearchInput());
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
+			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
+			expect(screen.getByText('Healthy Alert')).toBeInTheDocument();
+		});
+	});
+
+	it('shows no-results state when no match', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.clear(getSearchInput());
+		await user.type(getSearchInput(), 'zzzzzz-no-match');
+
+		await waitFor(() => {
+			expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
+			expect(screen.getByTestId('no-results-title')).toHaveTextContent(
+				'No matching alert rules',
+			);
+		});
+	});
+
+	it('resets page to 1 when search debounce fires', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules({ initialRoute: '/?page=2' });
+
+		// Page 2 of the 4-rule fixture has no rows; we only need the search input
+		// to be mounted, which happens before data is fetched.
+		const input = await screen.findByTestId('list-alerts-search-input');
+		await user.clear(input);
+		await user.type(input, 'CPU');
+
+		await waitFor(() => {
+			expect(getCurrentNuqsQueryString()).not.toContain('page=2');
+		});
+	});
+});

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

@@ -0,0 +1,232 @@
+import { logEventMock } from '__tests__/logEventMock';
+import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
+import type { SortState } from 'components/TanStackTableView/types';
+
+import type { AlertRule } from '../types';
+import {
+	ALERT_ACTIONS,
+	alertActionLogEvent,
+	filterRulesByFilters,
+	getAlertSortValue,
+	sortRules,
+} from '../utils';
+
+const baseRule = {
+	id: 'r1',
+	alert: 'Rule 1',
+	alertType: 'METRIC_BASED_ALERT',
+	state: 'inactive',
+	labels: { severity: 'info' },
+	condition: {},
+	createdAt: '2023-10-15T10:00:00Z',
+	updatedAt: '2023-10-19T10:00:00Z',
+} as unknown as AlertRule;
+
+const makeRule = (overrides: Partial<AlertRule>): AlertRule => ({
+	...baseRule,
+	...overrides,
+});
+
+describe('getAlertSortValue', () => {
+	it('returns state for "state"', () => {
+		expect(
+			getAlertSortValue(
+				makeRule({ state: RuletypesAlertStateDTO.firing }),
+				'state',
+			),
+		).toBe('firing');
+	});
+
+	it('returns alert name for "name"', () => {
+		expect(getAlertSortValue(makeRule({ alert: 'My Rule' }), 'name')).toBe(
+			'My Rule',
+		);
+	});
+
+	it('returns severity label for "severity"', () => {
+		expect(
+			getAlertSortValue(
+				makeRule({ labels: { severity: 'critical' } }),
+				'severity',
+			),
+		).toBe('critical');
+	});
+
+	it('returns createdAt as ms', () => {
+		const rule = makeRule({ createdAt: '2023-10-15T10:00:00Z' });
+		const result = getAlertSortValue(rule, 'createdAt');
+		expect(result).toBe(new Date('2023-10-15T10:00:00Z').getTime());
+	});
+
+	it('returns updatedAt as ms', () => {
+		const rule = makeRule({ updatedAt: '2023-10-19T10:00:00Z' });
+		const result = getAlertSortValue(rule, 'updatedAt');
+		expect(result).toBe(new Date('2023-10-19T10:00:00Z').getTime());
+	});
+
+	it('returns 0 when createdAt missing', () => {
+		expect(
+			getAlertSortValue(makeRule({ createdAt: undefined }), 'createdAt'),
+		).toBe(0);
+	});
+
+	it('returns empty for unknown column', () => {
+		expect(getAlertSortValue(baseRule, 'xxx')).toBe('');
+	});
+
+	it('returns empty for missing fields', () => {
+		expect(
+			getAlertSortValue(
+				makeRule({ state: undefined, labels: undefined }),
+				'state',
+			),
+		).toBe('');
+		expect(
+			getAlertSortValue(
+				makeRule({ state: undefined, labels: undefined }),
+				'severity',
+			),
+		).toBe('');
+	});
+});
+
+describe('sortRules', () => {
+	const r1 = makeRule({ id: '1', alert: 'A' });
+	const r2 = makeRule({ id: '2', alert: 'B' });
+	const r3 = makeRule({ id: '3', alert: 'C' });
+
+	it('sorts ascending by name', () => {
+		const order: SortState = { columnName: 'name', order: 'asc' };
+		const result = sortRules([r3, r1, r2], order);
+		expect(result.map((r) => r.alert)).toStrictEqual(['A', 'B', 'C']);
+	});
+
+	it('sorts descending by name', () => {
+		const order: SortState = { columnName: 'name', order: 'desc' };
+		const result = sortRules([r1, r2, r3], order);
+		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'B', 'A']);
+	});
+
+	it('returns unsorted when orderBy is null', () => {
+		const result = sortRules([r3, r1, r2], null);
+		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'A', 'B']);
+	});
+});
+
+describe('filterRulesByFilters', () => {
+	const r1 = makeRule({
+		id: '1',
+		alert: 'R1',
+		state: RuletypesAlertStateDTO.firing,
+		labels: { severity: 'critical' },
+	});
+	const r2 = makeRule({
+		id: '2',
+		alert: 'R2',
+		state: RuletypesAlertStateDTO.inactive,
+		labels: { severity: 'warning' },
+	});
+	const r3 = makeRule({
+		id: '3',
+		alert: 'R3',
+		state: RuletypesAlertStateDTO.firing,
+		labels: { severity: 'warning' },
+	});
+	const rules = [r1, r2, r3];
+
+	it('returns input when filters empty', () => {
+		expect(filterRulesByFilters(rules, [])).toStrictEqual(rules);
+	});
+
+	it('filters by state', () => {
+		const result = filterRulesByFilters(rules, ['state:firing']);
+		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
+	});
+
+	it('filters by severity', () => {
+		const result = filterRulesByFilters(rules, ['severity:warning']);
+		expect(result.map((r) => r.id)).toStrictEqual(['2', '3']);
+	});
+
+	it('combines state AND severity', () => {
+		const result = filterRulesByFilters(rules, [
+			'state:firing',
+			'severity:warning',
+		]);
+		expect(result.map((r) => r.id)).toStrictEqual(['3']);
+	});
+
+	it('OR within same key (state)', () => {
+		const result = filterRulesByFilters(rules, [
+			'state:firing',
+			'state:inactive',
+		]);
+		expect(result.map((r) => r.id)).toStrictEqual(['1', '2', '3']);
+	});
+
+	it('matches values case-insensitively', () => {
+		const result = filterRulesByFilters(rules, ['state:FIRING']);
+		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
+	});
+
+	it('ignores prefixes with wrong case (state: is required lowercase)', () => {
+		const result = filterRulesByFilters(rules, ['STATE:FIRING']);
+		expect(result).toStrictEqual(rules);
+	});
+
+	it('returns empty when no rule matches', () => {
+		expect(filterRulesByFilters(rules, ['state:nonexistent'])).toStrictEqual([]);
+	});
+
+	it('ignores unknown prefix', () => {
+		expect(filterRulesByFilters(rules, ['foo:bar'])).toStrictEqual(rules);
+	});
+});
+
+describe('alertActionLogEvent', () => {
+	it('logs with mapped action label', () => {
+		const rule = makeRule({
+			id: 'rule-1',
+			alert: 'My Rule',
+			alertType: 'METRIC_BASED_ALERT' as AlertRule['alertType'],
+		});
+		alertActionLogEvent(ALERT_ACTIONS.EDIT, rule);
+		expect(logEventMock).toHaveBeenCalledWith('Alert: Action', {
+			ruleId: 'rule-1',
+			dataSource: expect.any(String),
+			name: 'My Rule',
+			action: 'Edit',
+		});
+	});
+
+	it('falls back to raw action when unmapped', () => {
+		alertActionLogEvent('custom', baseRule);
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'custom' }),
+		);
+	});
+
+	it('maps TOGGLE action', () => {
+		alertActionLogEvent(ALERT_ACTIONS.TOGGLE, baseRule);
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Action',
+			expect.objectContaining({ action: 'Enable/Disable' }),
+		);
+	});
+
+	it('maps DELETE and CLONE', () => {
+		alertActionLogEvent(ALERT_ACTIONS.DELETE, baseRule);
+		alertActionLogEvent(ALERT_ACTIONS.CLONE, baseRule);
+		expect(logEventMock).toHaveBeenNthCalledWith(
+			1,
+			'Alert: Action',
+			expect.objectContaining({ action: 'Delete' }),
+		);
+		expect(logEventMock).toHaveBeenNthCalledWith(
+			2,
+			'Alert: Action',
+			expect.objectContaining({ action: 'Clone' }),
+		);
+	});
+});

frontend/src/container/ListAlertRules/__tests__/_helpers.tsx

@@ -0,0 +1,65 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, RenderResult, screen } from '@testing-library/react';
+import ListAlertRules from 'container/ListAlertRules';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { AppContext } from 'providers/App/App';
+import TimezoneProvider from 'providers/Timezone';
+import { onNuqsUrlUpdate, resetNuqsState } from 'tests/nuqs-helpers';
+import { getAppContextMock } from 'tests/test-utils';
+
+interface RenderOptions {
+	role?: string;
+	initialRoute?: string;
+}
+
+export function renderListAlertRules(
+	options: RenderOptions = {},
+): RenderResult {
+	const { role = 'ADMIN', initialRoute = '/' } = options;
+
+	const initialSearch = initialRoute.includes('?')
+		? initialRoute.slice(initialRoute.indexOf('?'))
+		: '';
+	resetNuqsState(initialSearch);
+
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { refetchOnWindowFocus: false, retry: false },
+			mutations: { retry: false },
+		},
+	});
+
+	return render(
+		<MemoryRouter initialEntries={[initialRoute]}>
+			<NuqsTestingAdapter
+				searchParams={initialSearch}
+				onUrlUpdate={onNuqsUrlUpdate}
+				rateLimitFactor={0}
+				hasMemory
+			>
+				<QueryClientProvider client={queryClient}>
+					<AppContext.Provider value={getAppContextMock(role)}>
+						<TimezoneProvider>
+							<VirtuosoMockContext.Provider
+								value={{ viewportHeight: 800, itemHeight: 46 }}
+							>
+								<ListAlertRules />
+							</VirtuosoMockContext.Provider>
+						</TimezoneProvider>
+					</AppContext.Provider>
+				</QueryClientProvider>
+			</NuqsTestingAdapter>
+		</MemoryRouter>,
+	);
+}
+
+export async function findAlertRow(alertName: string): Promise<HTMLElement> {
+	const cell = await screen.findByText(alertName, {}, { timeout: 5000 });
+	const row = cell.closest('tr');
+	if (!row) {
+		throw new Error(`Row not found for alert "${alertName}"`);
+	}
+	return row as HTMLElement;
+}

frontend/src/container/ListAlertRules/components/ColumnSelector.tsx

@@ -47,6 +47,7 @@ function ColumnSelector<TData>({
 					size="sm"
 					color="secondary"
 					prefix={<Columns3 size={14} />}
+					data-testid="alert-columns-button"
 				>
 					Columns
 				</Button>

frontend/src/container/ListAlertRules/index.tsx

@@ -136,6 +136,7 @@ function ListAlertRules(): JSX.Element {
 								prefix={<Plus size={14} />}
 								onClick={handleNewAlert}
 								color="primary"
+								testId="list-alerts-new-alert-button"
 							>
 								New Alert
 							</Button>
@@ -157,6 +158,7 @@ function ListAlertRules(): JSX.Element {
 						value={searchText}
 						onChange={handleSearchChange}
 						suffix={<Search size={14} className={styles.searchIcon} />}
+						testId="list-alerts-search-input"
 					/>
 				</div>
 			)}

frontend/src/container/ListAlertRules/table.config.tsx

@@ -26,14 +26,18 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => {
+			cell: ({ row, value }): JSX.Element => {
 				const state = String(value ?? '').toLowerCase();
 				const config = STATE_CONFIG[state] ?? {
 					color: 'secondary' as BadgeColor,
 					label: 'Unknown',
 				};
 				return (
-					<Badge color={config.color} variant="outline">
+					<Badge
+						color={config.color}
+						variant="outline"
+						testId={`alert-row-${row.id ?? ''}-state`}
+					>
 						{config.label}
 					</Badge>
 				);
@@ -47,8 +51,11 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text title={value}>
+			cell: ({ row, value }): JSX.Element => (
+				<TanStackTable.Text
+					title={value}
+					data-testid={`alert-row-${row.id ?? ''}-name`}
+				>
 					{String(value ?? '-')}
 				</TanStackTable.Text>
 			),
@@ -60,15 +67,20 @@ export function getAlertRuleColumns(
 			width: { fixed: '120px' },
 			enableSort: true,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => {
+			cell: ({ row, value }): JSX.Element => {
 				const severity = String(value ?? '').toLowerCase();
 				if (!severity) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
+					return (
+						<TanStackTable.Text data-testid={`alert-row-${row.id ?? ''}-severity`}>
+							-
+						</TanStackTable.Text>
+					);
 				}
 				return (
 					<Badge
 						color={SEVERITY_BADGE_COLORS[severity] ?? 'secondary'}
 						variant="outline"
+						testId={`alert-row-${row.id ?? ''}-severity`}
 					>
 						{severity}
 					</Badge>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -10,7 +10,7 @@ import {
 	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import getFromLocalstorage from 'api/browser/localstorage/get';
 import setToLocalstorage from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
@@ -42,7 +42,6 @@ import useUrlQueryData from 'hooks/useUrlQueryData';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
 import LiveLogs from 'pages/LiveLogs';
-import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
@@ -77,7 +76,6 @@ function LogsExplorerViewsContainer({
 	handleChangeSelectedView: ChangeViewFunctionType;
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
-	const dispatch = useDispatch();
 
 	const [showFrequencyChart, setShowFrequencyChart] = useState(
 		() => getFromLocalstorage(LOCALSTORAGE.SHOW_FREQUENCY_CHART) === 'true',
@@ -90,10 +88,9 @@ function LogsExplorerViewsContainer({
 		DEFAULT_PER_PAGE_VALUE,
 	);
 
-	const { minTime, maxTime, selectedTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 
 	const currentMinTimeRef = useRef<number>(minTime);
 
@@ -329,16 +326,6 @@ function LogsExplorerViewsContainer({
 			currentMinTimeRef.current !== minTime ||
 			orderByChanged
 		) {
-			// Recalculate global time when query changes i.e. stage and run query clicked
-			if (
-				!!requestData?.id &&
-				stagedQuery?.id &&
-				requestData?.id !== stagedQuery?.id &&
-				selectedTime !== 'custom'
-			) {
-				dispatch(UpdateTimeInterval(selectedTime));
-			}
-
 			const newRequestData = getRequestData(stagedQuery, {
 				filters: listQuery?.filters || initialFilters,
 				filter: listQuery?.filter || { expression: '' },
@@ -360,8 +347,6 @@ function LogsExplorerViewsContainer({
 		minTime,
 		activeLogId,
 		selectedPanelType,
-		dispatch,
-		selectedTime,
 		maxTime,
 		orderBy,
 	]);

frontend/src/container/LogsExplorerViews/tests/LogsExplorerPagination.test.tsx

@@ -108,13 +108,21 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
-jest.mock(
-	'container/TopNav/DateTimeSelectionV2/index.tsx',
-	() =>
-		function MockDateTimeSelection(): JSX.Element {
-			return <div>MockDateTimeSelection</div>;
-		},
-);
+jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => {
+	const { useQueryBuilder } = jest.requireActual(
+		'hooks/queryBuilder/useQueryBuilder',
+	);
+	const { useSyncTimeOnStagedQueryChange } = jest.requireActual(
+		'hooks/queryBuilder/useSyncTimeOnStagedQueryChange',
+	);
+
+	return function MockDateTimeSelection(): JSX.Element {
+		const { stagedQuery } = useQueryBuilder();
+		useSyncTimeOnStagedQueryChange(stagedQuery?.id);
+		return <div>MockDateTimeSelection</div>;
+	};
+});
+
 jest.mock(
 	'container/LogsExplorerChart',
 	() =>

frontend/src/container/MCPServerSettings/MCPServerSettings.test.tsx

@@ -1,8 +1,8 @@
+import { logEventMock } from '__tests__/logEventMock';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import MCPServerSettings from './MCPServerSettings';
 
-const mockLogEvent = jest.fn();
 const mockCopyToClipboard = jest.fn();
 const mockHistoryPush = jest.fn();
 const mockUseGetGlobalConfig = jest.fn();
@@ -11,11 +11,6 @@ const mockUseGetTenantLicense = jest.fn();
 const mockToastSuccess = jest.fn();
 const mockToastWarning = jest.fn();
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: (...args: unknown[]): unknown => mockLogEvent(...args),
-}));
-
 jest.mock('api/generated/services/global', () => ({
 	useGetGlobalConfig: (...args: unknown[]): unknown =>
 		mockUseGetGlobalConfig(...args),
@@ -148,7 +143,7 @@ describe('MCPServerSettings', () => {
 
 		render(<MCPServerSettings />, undefined, { role: 'ADMIN' });
 
-		expect(mockLogEvent).toHaveBeenCalledWith('MCP Settings: Page viewed', {
+		expect(logEventMock).toHaveBeenCalledWith('MCP Settings: Page viewed', {
 			role: 'ADMIN',
 		});
 	});

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

@@ -1,5 +1,6 @@
 import userEvent from '@testing-library/user-event';
 import MySettingsContainer from 'container/MySettings';
+import { logEventMock } from '__tests__/logEventMock';
 import {
 	act,
 	fireEvent,
@@ -12,7 +13,6 @@ import APIError from 'types/api/error';
 import { toast } from '@signozhq/ui/sonner';
 
 const toggleThemeFunction = jest.fn();
-const logEventFunction = jest.fn();
 const copyToClipboardFn = jest.fn();
 const editUserFn = jest.fn();
 const updateMyPasswordFn = jest.fn();
@@ -62,11 +62,6 @@ jest.mock('hooks/useDarkMode', () => ({
 	})),
 }));
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn((eventName, data) => logEventFunction(eventName, data)),
-}));
-
 const errorNotification = jest.fn();
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
@@ -135,7 +130,7 @@ describe('MySettings Flows', () => {
 
 			await waitFor(() => {
 				expect(toggleThemeFunction).toHaveBeenCalled();
-				expect(logEventFunction).toHaveBeenCalledWith(
+				expect(logEventMock).toHaveBeenCalledWith(
 					'Account Settings: Theme Changed',
 					{
 						theme: 'light',

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/__tests__/InviteTeamMembers.test.tsx

@@ -9,11 +9,6 @@ import {
 
 import InviteTeamMembers from '../InviteTeamMembers';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 const mockNotificationSuccess = jest.fn() as jest.MockedFunction<
 	(args: { message: string }) => void
 >;

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

@@ -4,11 +4,6 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import OnboardingQuestionaire from '../index';
 
 // Mock dependencies
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('lib/history', () => ({
 	__esModule: true,
 	default: {

frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx

@@ -4,15 +4,13 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import i18n from 'ReactI18';
 import store from 'store';
 
 import CreatePipelineButton from '../Layouts/Pipeline/CreatePipelineButton';
 import { pipelineApiResponseMockData } from '../mocks/pipeline';
 
-jest.mock('api/common/logEvent');
-
 describe('PipelinePage container test', () => {
 	it('should render CreatePipelineButton section', async () => {
 		const { asFragment } = render(
@@ -53,9 +51,12 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(logEvent).toHaveBeenCalledWith('Logs: Pipelines: Entered Edit Mode', {
-			source: 'signoz-ui',
-		});
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Logs: Pipelines: Entered Edit Mode',
+			{
+				source: 'signoz-ui',
+			},
+		);
 	});
 
 	it('CreatePipelineButton - add new mode & tracking', async () => {
@@ -78,7 +79,7 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(logEvent).toHaveBeenCalledWith(
+		expect(logEventMock).toHaveBeenCalledWith(
 			'Logs: Pipelines: Clicked Add New Pipeline',
 			{
 				source: 'signoz-ui',

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss

@@ -233,8 +233,10 @@
 			background: var(--l1-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			padding: 0px;
+			gap: 0;
+			margin: 4px;
 
-			.ant-typography {
+			.qb-tag-text {
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px !important;
@@ -244,7 +246,7 @@
 				padding: 2px 6px;
 			}
 
-			.close-icon {
+			> button {
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -259,26 +261,26 @@
 			&.resource {
 				border: 1px solid color-mix(in srgb, var(--bg-aqua-400) 13%, transparent);
 
-				.ant-typography {
+				.qb-tag-text {
 					color: var(--bg-aqua-400);
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 					font-size: 14px;
 				}
 
-				.close-icon {
+				> button {
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 				}
 			}
 			&.tag {
 				border: 1px solid color-mix(in srgb, var(--bg-sienna-400) 20%, transparent);
 
-				.ant-typography {
+				.qb-tag-text {
 					color: var(--bg-sienna-400);
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 					font-size: 14px;
 				}
 
-				.close-icon {
+				> button {
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 				}
 			}
@@ -286,13 +288,13 @@
 			&.scope {
 				border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
 
-				.ant-typography {
+				.qb-tag-text {
 					color: var(--bg-robin-400);
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 					font-size: 14px;
 				}
 
-				.close-icon {
+				> button {
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 				}
 			}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -966,6 +966,7 @@ function QueryBuilderSearchV2(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
+							className="qb-tag-text"
 							$isInNin={isInNin}
 							$isEnabled={!!searchValue}
 							onClick={(): void => {

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -19,6 +19,7 @@ import {
 	useIsGlobalTimeQueryRefreshing,
 } from 'store/globalTime';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSyncTimeOnStagedQueryChange } from 'hooks/queryBuilder/useSyncTimeOnStagedQueryChange';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
@@ -187,6 +188,8 @@ function DateTimeSelection({
 
 	const { stagedQuery, currentQuery, initQueryBuilderData } = useQueryBuilder();
 
+	useSyncTimeOnStagedQueryChange(stagedQuery?.id);
+
 	const getInputLabel = (
 		startTime?: Dayjs,
 		endTime?: Dayjs,

frontend/src/container/TriggeredAlerts/__tests__/TriggeredAlerts.empty.test.tsx

@@ -0,0 +1,118 @@
+import userEvent from '@testing-library/user-event';
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import ROUTES from 'constants/routes';
+import { triggeredAlertsFixture } from 'mocks-server/__mockdata__/triggered_alerts';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderTriggeredAlerts } from './_helpers';
+
+describe('TriggeredAlerts — empty / error states', () => {
+	it('shows the "No alerts firing" empty state when the API returns []', async () => {
+		server.use(
+			rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [], status: 'success' })),
+			),
+		);
+
+		renderTriggeredAlerts();
+
+		await screen.findByText('No alerts firing');
+		expect(
+			screen.getByTestId('triggered-alerts-empty-create-button'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByTestId('triggered-alerts-empty-refresh-button'),
+		).toBeInTheDocument();
+	});
+
+	it('navigates to ROUTES.ALERTS_NEW when "Create Alert Rule" is clicked', async () => {
+		const user = userEvent.setup({ delay: null });
+		server.use(
+			rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [], status: 'success' })),
+			),
+		);
+
+		renderTriggeredAlerts();
+
+		await screen.findByText('No alerts firing');
+
+		await user.click(screen.getByTestId('triggered-alerts-empty-create-button'));
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			ROUTES.ALERTS_NEW,
+			expect.objectContaining({ newTab: false }),
+		);
+	});
+
+	it('shows ErrorEmptyState when the API returns 500', async () => {
+		server.use(
+			rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
+				res(ctx.status(500)),
+			),
+		);
+
+		renderTriggeredAlerts();
+
+		await screen.findByTestId('error-empty-state');
+		expect(screen.getByTestId('error-refresh-button')).toBeInTheDocument();
+	});
+
+	it('refetches on refresh button click after an initial error', async () => {
+		let callCount = 0;
+		server.use(
+			rest.get('http://localhost/api/v1/alerts', (_, res, ctx) => {
+				callCount += 1;
+				if (callCount === 1) {
+					return res(ctx.status(500));
+				}
+				return res(
+					ctx.status(200),
+					ctx.json({ data: triggeredAlertsFixture, status: 'success' }),
+				);
+			}),
+		);
+
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await screen.findByTestId('error-refresh-button');
+
+		await user.click(screen.getByTestId('error-refresh-button'));
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+	});
+
+	it('shows NoResultsEmptyState when filters yield zero matches', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		const input = screen.getByTestId('triggered-alerts-search-input');
+		await user.type(input, 'this-matches-nothing-xyz');
+
+		await screen.findByTestId('no-results-empty-state');
+		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
+			'No matching alerts',
+		);
+		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
+			'No alerts match your current filters. Try adjusting your search criteria.',
+		);
+
+		await user.click(screen.getByTestId('no-results-clear-button'));
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+		expect(
+			(screen.getByTestId('triggered-alerts-search-input') as HTMLInputElement)
+				.value,
+		).toBe('');
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/TriggeredAlerts.filter.test.tsx

@@ -0,0 +1,87 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderTriggeredAlerts } from './_helpers';
+
+describe('TriggeredAlerts — severity filter', () => {
+	it('filters to only critical-severity rows when "Critical" is selected', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		await user.click(screen.getByTestId('triggered-alerts-filter-combobox'));
+
+		const criticalOption = await screen.findByText(
+			'Critical (severity:critical)',
+		);
+		await user.click(criticalOption);
+
+		await user.keyboard('{Escape}');
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument();
+			expect(screen.queryByText('Memory Warning')).not.toBeInTheDocument();
+			expect(screen.queryByText('Disk Slow')).not.toBeInTheDocument();
+			expect(screen.queryByText('Network Hiccup')).not.toBeInTheDocument();
+		});
+	});
+
+	it('shows union when multiple severities are selected', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		await user.click(screen.getByTestId('triggered-alerts-filter-combobox'));
+		const critical = await screen.findByText('Critical (severity:critical)');
+		await user.click(critical);
+
+		const warning = await screen.findByText('Warning (severity:warning)');
+		await user.click(warning);
+
+		await user.keyboard('{Escape}');
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument();
+			expect(screen.getByText('Memory Warning')).toBeInTheDocument();
+			expect(screen.queryByText('Disk Slow')).not.toBeInTheDocument();
+			expect(screen.queryByText('Network Hiccup')).not.toBeInTheDocument();
+		});
+	});
+
+	it('clearing the filter shows all rows again', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		await user.click(screen.getByTestId('triggered-alerts-filter-combobox'));
+		const critical = await screen.findByText('Critical (severity:critical)');
+		await user.click(critical);
+		await user.keyboard('{Escape}');
+
+		await waitFor(() =>
+			expect(screen.queryByText('Memory Warning')).not.toBeInTheDocument(),
+		);
+
+		// Reopen the filter combobox and deselect Critical (clicking again toggles).
+		await user.click(screen.getByTestId('triggered-alerts-filter-combobox'));
+		const criticalAgain = await screen.findByText('Critical (severity:critical)');
+		await user.click(criticalAgain);
+		await user.keyboard('{Escape}');
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument();
+			expect(screen.getByText('Memory Warning')).toBeInTheDocument();
+			expect(screen.getByText('Disk Slow')).toBeInTheDocument();
+			expect(screen.getByText('Network Hiccup')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/TriggeredAlerts.grouping.test.tsx

@@ -0,0 +1,85 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderTriggeredAlerts } from './_helpers';
+
+describe('TriggeredAlerts — group by', () => {
+	it('renders a flat table when no group-by is selected', async () => {
+		renderTriggeredAlerts();
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+		// No "Group" column header in flat mode.
+		expect(screen.queryByText('Group')).not.toBeInTheDocument();
+	});
+
+	it('groups by service when "service" is selected', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		await user.click(screen.getByTestId('triggered-alerts-groupby-combobox'));
+
+		const serviceOption = await screen.findByText('service');
+		await user.click(serviceOption);
+		await user.keyboard('{Escape}');
+
+		await waitFor(() => expect(screen.getByText('Group')).toBeInTheDocument());
+
+		await waitFor(() => {
+			expect(screen.getByText('service:frontend')).toBeInTheDocument();
+			expect(screen.getByText('service:backend')).toBeInTheDocument();
+			expect(screen.getByText('service:misc')).toBeInTheDocument();
+		});
+	});
+
+	it('expands and collapses a group row to reveal nested alerts', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		await user.click(screen.getByTestId('triggered-alerts-groupby-combobox'));
+		const serviceOption = await screen.findByText('service');
+		await user.click(serviceOption);
+		await user.keyboard('{Escape}');
+
+		await waitFor(() =>
+			expect(screen.getByText('service:frontend')).toBeInTheDocument(),
+		);
+
+		// Nested rows aren't shown yet.
+		expect(screen.queryByText('High CPU Usage')).not.toBeInTheDocument();
+
+		// The "frontend" group sits first in the table; its expand toggle is the
+		// first `group-expand-toggle` in DOM order. Targeting by testid is safe
+		// against design changes that add other buttons to the row.
+		const expandToggles = screen.getAllByTestId('group-expand-toggle');
+		expect(expandToggles.length).toBeGreaterThan(0);
+		const frontendGroupBadge = screen.getByText('service:frontend');
+		const frontendRow = frontendGroupBadge.closest('tr');
+		expect(frontendRow).not.toBeNull();
+		const frontendToggle = (frontendRow as HTMLElement).querySelector(
+			'[data-testid="group-expand-toggle"]',
+		) as HTMLElement | null;
+		expect(frontendToggle).not.toBeNull();
+
+		await user.click(frontendToggle as HTMLElement);
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+		expect(screen.getByText('Disk Slow')).toBeInTheDocument();
+
+		await user.click(frontendToggle as HTMLElement);
+
+		await waitFor(() =>
+			expect(screen.queryByText('High CPU Usage')).not.toBeInTheDocument(),
+		);
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/TriggeredAlerts.list.test.tsx

@@ -0,0 +1,115 @@
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderTriggeredAlerts } from './_helpers';
+
+describe('TriggeredAlerts — list rendering', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+	});
+
+	it('renders alerts from the API', async () => {
+		renderTriggeredAlerts();
+
+		await expect(
+			screen.findByTestId('alert-row-fp-critical-1-name'),
+		).resolves.toHaveTextContent('High CPU Usage');
+		expect(screen.getByTestId('alert-row-fp-warning-1-name')).toHaveTextContent(
+			'Memory Warning',
+		);
+		expect(screen.getByTestId('alert-row-fp-info-1-name')).toHaveTextContent(
+			'Disk Slow',
+		);
+	});
+
+	it('renders severity badges for alerts that have severity', async () => {
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId('alert-row-fp-critical-1-name'),
+			).toBeInTheDocument(),
+		);
+
+		expect(
+			screen.getByTestId('alert-row-fp-critical-1-severity'),
+		).toHaveTextContent('critical');
+		expect(
+			screen.getByTestId('alert-row-fp-warning-1-severity'),
+		).toHaveTextContent('warning');
+		expect(screen.getByTestId('alert-row-fp-info-1-severity')).toHaveTextContent(
+			'info',
+		);
+		expect(
+			screen.getByTestId('alert-row-fp-noseverity-severity'),
+		).toHaveTextContent('-');
+	});
+
+	it('renders status tags reflecting the alert state', async () => {
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId('alert-row-fp-critical-1-name'),
+			).toBeInTheDocument(),
+		);
+
+		expect(
+			screen.getByTestId('alert-row-fp-critical-1-status'),
+		).toHaveTextContent('Firing');
+		expect(screen.getByTestId('alert-row-fp-info-1-status')).toHaveTextContent(
+			'Unprocessed',
+		);
+		expect(
+			screen.getByTestId('alert-row-fp-suppressed-1-status'),
+		).toHaveTextContent('Suppressed');
+	});
+
+	it('renders status badges with semantic colors', async () => {
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId('alert-row-fp-critical-1-status'),
+			).toBeInTheDocument(),
+		);
+
+		expect(screen.getByTestId('alert-row-fp-critical-1-status')).toHaveAttribute(
+			'data-color',
+			'cherry',
+		);
+		expect(screen.getByTestId('alert-row-fp-info-1-status')).toHaveAttribute(
+			'data-color',
+			'forest',
+		);
+		expect(
+			screen.getByTestId('alert-row-fp-critical-1-severity'),
+		).toHaveAttribute('data-color', 'cherry');
+		expect(screen.getByTestId('alert-row-fp-warning-1-severity')).toHaveAttribute(
+			'data-color',
+			'amber',
+		);
+	});
+
+	it('renders the search input and filter comboboxes', async () => {
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId('alert-row-fp-critical-1-name'),
+			).toBeInTheDocument(),
+		);
+
+		expect(
+			screen.getByTestId('triggered-alerts-search-input'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText('Search alerts by name'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByTestId('triggered-alerts-filter-combobox'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByTestId('triggered-alerts-groupby-combobox'),
+		).toBeInTheDocument();
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/TriggeredAlerts.pagination.test.tsx

@@ -0,0 +1,76 @@
+import userEvent from '@testing-library/user-event';
+import { triggeredAlertsPaginationFixture } from 'mocks-server/__mockdata__/triggered_alerts';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, waitFor } from 'tests/test-utils';
+import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
+
+import { renderTriggeredAlerts } from './_helpers';
+
+function usePaginationHandler(): void {
+	server.use(
+		rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					data: triggeredAlertsPaginationFixture,
+					status: 'success',
+				}),
+			),
+		),
+	);
+}
+
+describe('TriggeredAlerts — pagination', () => {
+	// Default sort is duration ascending = newest startsAt first. Fixture indices
+	// 0..14 use startsAt 2023-10-01..15, so index 14 (newest) appears first and
+	// index 0 (oldest) appears last. Page 1 (limit 10) = items 14..5. Page 2 = 4..0.
+
+	it('shows the first 10 rows on page 1 by default', async () => {
+		usePaginationHandler();
+		renderTriggeredAlerts();
+
+		await screen.findByText('Pag Alert 14');
+
+		expect(screen.getByText('Pag Alert 5')).toBeInTheDocument();
+		expect(screen.queryByText('Pag Alert 4')).not.toBeInTheDocument();
+		expect(screen.queryByText('Pag Alert 0')).not.toBeInTheDocument();
+	});
+
+	it('renders a "page 2" pagination button reflecting total=15 with pageSize=10', async () => {
+		usePaginationHandler();
+		renderTriggeredAlerts();
+
+		await screen.findByText('Pag Alert 14');
+
+		const nav = screen.getByRole('navigation');
+		const page2 = Array.from(nav.querySelectorAll('button')).find(
+			(b) => b.textContent?.trim() === '2',
+		);
+		expect(page2).toBeDefined();
+	});
+
+	it('navigates to page 2 and shows the next batch of alerts', async () => {
+		usePaginationHandler();
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await screen.findByText('Pag Alert 14');
+
+		const nav = screen.getByRole('navigation');
+		const page2Button = Array.from(nav.querySelectorAll('button')).find(
+			(b) => b.textContent?.trim() === '2',
+		);
+		if (!page2Button) {
+			throw new Error('Page 2 button not found');
+		}
+		await user.click(page2Button);
+
+		await waitFor(() =>
+			expect(screen.getByText('Pag Alert 0')).toBeInTheDocument(),
+		);
+		expect(screen.getByText('Pag Alert 4')).toBeInTheDocument();
+		expect(screen.queryByText('Pag Alert 14')).not.toBeInTheDocument();
+		await waitFor(() => expect(getCurrentNuqsQueryString()).toContain('page=2'));
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/TriggeredAlerts.rowClick.test.tsx

@@ -0,0 +1,143 @@
+import userEvent from '@testing-library/user-event';
+import { logEventMock } from '__tests__/logEventMock';
+import { safeNavigateMock } from '__tests__/safeNavigateMock';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { getTriggeredAlertRowTestId, renderTriggeredAlerts } from './_helpers';
+
+describe('TriggeredAlerts — row click', () => {
+	it('navigates to the alert overview with the rule id from labels on row click', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId(getTriggeredAlertRowTestId('fp-critical-1', 'name')),
+			).toBeInTheDocument(),
+		);
+
+		await user.click(
+			screen.getByTestId(getTriggeredAlertRowTestId('fp-critical-1', 'name')),
+		);
+
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			'/alerts/overview?ruleId=rule-1',
+		);
+		expect(logEventMock).toHaveBeenCalledWith(
+			'Alert: Triggered alert clicked',
+			expect.objectContaining({
+				ruleId: 'rule-1',
+				alertName: 'High CPU Usage',
+			}),
+		);
+	});
+
+	it('opens in a new tab when ctrl+clicked', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId(getTriggeredAlertRowTestId('fp-warning-1', 'name')),
+			).toBeInTheDocument(),
+		);
+
+		await user.keyboard('{Control>}');
+		await user.click(
+			screen.getByTestId(getTriggeredAlertRowTestId('fp-warning-1', 'name')),
+		);
+		await user.keyboard('{/Control}');
+
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			'/alerts/overview?ruleId=rule-2',
+			{ newTab: true },
+		);
+	});
+
+	it('navigates correctly when ruleId is parsed from generatorURL', async () => {
+		// Override fixture so the alert has no labels.ruleId but a valid
+		// generatorURL → getRuleId() falls back to parsing the URL.
+		server.use(
+			rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						data: [
+							{
+								fingerprint: 'fp-no-rule-label',
+								startsAt: '2023-10-19T10:00:00Z',
+								endsAt: '0001-01-01T00:00:00Z',
+								updatedAt: '2023-10-20T00:00:00Z',
+								generatorURL: 'http://localhost/alerts/edit?ruleId=rule-from-url',
+								labels: { alertname: 'URL Rule Alert' },
+								annotations: {},
+								status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+								receivers: [],
+							},
+						],
+						status: 'success',
+					}),
+				),
+			),
+		);
+
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId(getTriggeredAlertRowTestId('fp-no-rule-label', 'name')),
+			).toBeInTheDocument(),
+		);
+
+		await user.click(
+			screen.getByTestId(getTriggeredAlertRowTestId('fp-no-rule-label', 'name')),
+		);
+
+		expect(safeNavigateMock).toHaveBeenCalledWith(
+			'/alerts/overview?ruleId=rule-from-url',
+		);
+	});
+
+	it('does not navigate when the row has no ruleId anywhere', async () => {
+		server.use(
+			rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						data: [
+							{
+								fingerprint: 'fp-no-rule',
+								startsAt: '2023-10-19T10:00:00Z',
+								endsAt: '0001-01-01T00:00:00Z',
+								updatedAt: '2023-10-20T00:00:00Z',
+								labels: { alertname: 'No Rule Alert' },
+								annotations: {},
+								status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+								receivers: [],
+							},
+						],
+						status: 'success',
+					}),
+				),
+			),
+		);
+
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(
+				screen.getByTestId(getTriggeredAlertRowTestId('fp-no-rule', 'name')),
+			).toBeInTheDocument(),
+		);
+
+		await user.click(
+			screen.getByTestId(getTriggeredAlertRowTestId('fp-no-rule', 'name')),
+		);
+
+		expect(safeNavigateMock).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/TriggeredAlerts.search.test.tsx

@@ -0,0 +1,118 @@
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from 'tests/test-utils';
+
+import { renderTriggeredAlerts } from './_helpers';
+
+describe('TriggeredAlerts — search', () => {
+	it('filters rows by alertname when typing in the search input', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+		expect(screen.getByText('Memory Warning')).toBeInTheDocument();
+
+		const input = screen.getByTestId('triggered-alerts-search-input');
+		await user.type(input, 'CPU');
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument();
+			expect(screen.queryByText('Memory Warning')).not.toBeInTheDocument();
+		});
+	});
+
+	it('shows all rows again when search is cleared', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		const input = screen.getByTestId('triggered-alerts-search-input');
+		await user.type(input, 'CPU');
+
+		await waitFor(() =>
+			expect(screen.queryByText('Memory Warning')).not.toBeInTheDocument(),
+		);
+
+		await user.clear(input);
+
+		await waitFor(() => {
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument();
+			expect(screen.getByText('Memory Warning')).toBeInTheDocument();
+			expect(screen.getByText('Disk Slow')).toBeInTheDocument();
+		});
+	});
+
+	it('matches rows by label value (case-insensitive)', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		const input = screen.getByTestId('triggered-alerts-search-input');
+		// "backend" matches `service: backend` labels on Memory Warning and Network Hiccup.
+		await user.type(input, 'backend');
+
+		await waitFor(() => {
+			expect(screen.getByText('Memory Warning')).toBeInTheDocument();
+			expect(screen.getByText('Network Hiccup')).toBeInTheDocument();
+			expect(screen.queryByText('High CPU Usage')).not.toBeInTheDocument();
+			expect(screen.queryByText('Disk Slow')).not.toBeInTheDocument();
+		});
+	});
+
+	it('matches rows by label key', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		const input = screen.getByTestId('triggered-alerts-search-input');
+		await user.type(input, 'staging');
+
+		await waitFor(() => {
+			expect(screen.getByText('Disk Slow')).toBeInTheDocument();
+			expect(screen.queryByText('High CPU Usage')).not.toBeInTheDocument();
+			expect(screen.queryByText('Memory Warning')).not.toBeInTheDocument();
+		});
+	});
+
+	it('renders the no-results empty state when the search matches nothing', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts();
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+
+		const input = screen.getByTestId('triggered-alerts-search-input');
+		await user.type(input, 'zzzzznever-matches-anything');
+
+		await waitFor(() =>
+			expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument(),
+		);
+	});
+
+	it('resets pagination to page 1 when the search changes', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderTriggeredAlerts({ initialRoute: '/?page=2&limit=2' });
+
+		await waitFor(() =>
+			expect(screen.getByText('Disk Slow')).toBeInTheDocument(),
+		);
+
+		const input = screen.getByTestId('triggered-alerts-search-input');
+		await user.type(input, 'CPU');
+
+		await waitFor(() =>
+			expect(screen.getByText('High CPU Usage')).toBeInTheDocument(),
+		);
+	});
+});

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

@@ -0,0 +1,181 @@
+import type { SortState } from 'components/TanStackTableView/types';
+
+import type { Alert } from '../types';
+import {
+	getAlertSortValue,
+	getRuleId,
+	normalizeAlerts,
+	sortAlerts,
+} from '../utils';
+
+const alertWithFingerprint: Alert = {
+	fingerprint: 'fp-existing',
+	labels: { alertname: 'Test', severity: 'critical' },
+	annotations: {},
+	startsAt: '2023-10-19T10:00:00Z',
+	endsAt: '0001-01-01T00:00:00Z',
+	status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+	receivers: [],
+};
+
+const alertWithoutFingerprint: Alert = {
+	...alertWithFingerprint,
+	fingerprint: undefined,
+};
+
+describe('normalizeAlerts', () => {
+	it('returns empty array when given undefined', () => {
+		expect(normalizeAlerts(undefined)).toStrictEqual([]);
+	});
+
+	it('preserves existing fingerprints', () => {
+		const result = normalizeAlerts([alertWithFingerprint]);
+		expect(result).toHaveLength(1);
+		expect(result[0].fingerprint).toBe('fp-existing');
+	});
+
+	it('mints fingerprint when missing', () => {
+		const result = normalizeAlerts([alertWithoutFingerprint]);
+		expect(result[0].fingerprint).toBeDefined();
+		expect(typeof result[0].fingerprint).toBe('string');
+		expect(result[0].fingerprint?.length).toBeGreaterThan(0);
+	});
+
+	it('does not mutate the input array', () => {
+		const input = [alertWithFingerprint];
+		const copy = JSON.parse(JSON.stringify(input));
+		normalizeAlerts(input);
+		expect(input).toStrictEqual(copy);
+	});
+});
+
+describe('getAlertSortValue', () => {
+	const alert: Alert = {
+		fingerprint: 'fp',
+		labels: { alertname: 'CPU', severity: 'critical' },
+		annotations: {},
+		startsAt: '2023-10-19T10:00:00Z',
+		endsAt: '0001-01-01T00:00:00Z',
+		status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+		receivers: [],
+	};
+
+	it('returns status.state for "status"', () => {
+		expect(getAlertSortValue(alert, 'status')).toBe('active');
+	});
+
+	it('returns alertname for "alertName"', () => {
+		expect(getAlertSortValue(alert, 'alertName')).toBe('CPU');
+	});
+
+	it('returns severity for "severity"', () => {
+		expect(getAlertSortValue(alert, 'severity')).toBe('critical');
+	});
+
+	it('returns elapsed ms for "firingSince"', () => {
+		const result = getAlertSortValue(alert, 'firingSince');
+		expect(typeof result).toBe('number');
+		expect(result).toBeGreaterThan(0);
+	});
+
+	it('returns elapsed ms for "duration"', () => {
+		const result = getAlertSortValue(alert, 'duration');
+		expect(typeof result).toBe('number');
+	});
+
+	it('returns empty string for unknown columns', () => {
+		expect(getAlertSortValue(alert, 'unknown')).toBe('');
+	});
+
+	it('returns empty string for missing fields', () => {
+		const empty = { ...alert, status: undefined, labels: undefined };
+		expect(getAlertSortValue(empty, 'status')).toBe('');
+		expect(getAlertSortValue(empty, 'alertName')).toBe('');
+		expect(getAlertSortValue(empty, 'severity')).toBe('');
+	});
+
+	it('returns empty for firingSince with no startsAt', () => {
+		const empty = { ...alert, startsAt: undefined };
+		expect(getAlertSortValue(empty, 'firingSince')).toBe('');
+	});
+});
+
+describe('sortAlerts', () => {
+	const a: Alert = {
+		fingerprint: 'a',
+		labels: { alertname: 'A' },
+		annotations: {},
+		startsAt: '2023-10-19T10:00:00Z',
+		endsAt: '0001-01-01T00:00:00Z',
+		status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+		receivers: [],
+	};
+	const b: Alert = { ...a, fingerprint: 'b', labels: { alertname: 'B' } };
+	const c: Alert = { ...a, fingerprint: 'c', labels: { alertname: 'C' } };
+
+	it('sorts ascending when given orderBy', () => {
+		const order: SortState = { columnName: 'alertName', order: 'asc' };
+		const result = sortAlerts([c, a, b], order);
+		expect(result.map((x) => x.labels?.alertname)).toStrictEqual(['A', 'B', 'C']);
+	});
+
+	it('sorts descending', () => {
+		const order: SortState = { columnName: 'alertName', order: 'desc' };
+		const result = sortAlerts([a, b, c], order);
+		expect(result.map((x) => x.labels?.alertname)).toStrictEqual(['C', 'B', 'A']);
+	});
+
+	it('falls back to default duration asc when orderBy is null', () => {
+		const result = sortAlerts([a, b, c], null);
+		expect(result).toHaveLength(3);
+	});
+});
+
+describe('getRuleId', () => {
+	const base: Alert = {
+		labels: {},
+		annotations: {},
+		startsAt: '2023-10-19T10:00:00Z',
+		endsAt: '0001-01-01T00:00:00Z',
+		status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+		receivers: [],
+		fingerprint: 'fp',
+	};
+
+	it('returns labels.ruleId when present', () => {
+		expect(getRuleId({ ...base, labels: { ruleId: 'rule-1' } })).toBe('rule-1');
+	});
+
+	it('falls back to generatorURL when ruleId label missing', () => {
+		expect(
+			getRuleId({
+				...base,
+				generatorURL: 'http://localhost/foo?ruleId=rule-42',
+			}),
+		).toBe('rule-42');
+	});
+
+	it('prefers labels.ruleId over generatorURL', () => {
+		expect(
+			getRuleId({
+				...base,
+				labels: { ruleId: 'from-label' },
+				generatorURL: 'http://localhost/foo?ruleId=from-url',
+			}),
+		).toBe('from-label');
+	});
+
+	it('returns null when generatorURL has no ruleId param', () => {
+		expect(
+			getRuleId({ ...base, generatorURL: 'http://localhost/foo' }),
+		).toBeNull();
+	});
+
+	it('returns null when generatorURL is invalid', () => {
+		expect(getRuleId({ ...base, generatorURL: 'not-a-url' })).toBeNull();
+	});
+
+	it('returns null when no source available', () => {
+		expect(getRuleId(base)).toBeNull();
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/_helpers.tsx

@@ -0,0 +1,71 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { render, RenderResult, screen } from '@testing-library/react';
+import TriggeredAlerts from 'container/TriggeredAlerts';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { AppContext } from 'providers/App/App';
+import TimezoneProvider from 'providers/Timezone';
+import { onNuqsUrlUpdate, resetNuqsState } from 'tests/nuqs-helpers';
+import { getAppContextMock } from 'tests/test-utils';
+
+interface RenderOptions {
+	initialRoute?: string;
+}
+
+export function renderTriggeredAlerts(
+	options: RenderOptions = {},
+): RenderResult {
+	const { initialRoute = '/' } = options;
+
+	const initialSearch = initialRoute.includes('?')
+		? initialRoute.slice(initialRoute.indexOf('?'))
+		: '';
+	resetNuqsState(initialSearch);
+
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { refetchOnWindowFocus: false, retry: false },
+			mutations: { retry: false },
+		},
+	});
+
+	return render(
+		<MemoryRouter initialEntries={[initialRoute]}>
+			<NuqsTestingAdapter
+				searchParams={initialSearch}
+				onUrlUpdate={onNuqsUrlUpdate}
+				rateLimitFactor={0}
+				hasMemory
+			>
+				<QueryClientProvider client={queryClient}>
+					<AppContext.Provider value={getAppContextMock('ADMIN')}>
+						<TimezoneProvider>
+							<VirtuosoMockContext.Provider
+								value={{ viewportHeight: 800, itemHeight: 46 }}
+							>
+								<TriggeredAlerts />
+							</VirtuosoMockContext.Provider>
+						</TimezoneProvider>
+					</AppContext.Provider>
+				</QueryClientProvider>
+			</NuqsTestingAdapter>
+		</MemoryRouter>,
+	);
+}
+
+export async function findAlertRow(alertName: string): Promise<HTMLElement> {
+	const cell = await screen.findByText(alertName, {}, { timeout: 5000 });
+	const row = cell.closest('tr');
+	if (!row) {
+		throw new Error(`Row not found for alert "${alertName}"`);
+	}
+	return row as HTMLElement;
+}
+
+export function getTriggeredAlertRowTestId(
+	fingerprint: string,
+	column: 'name' | 'severity' | 'status',
+): string {
+	return `alert-row-${fingerprint}-${column}`;
+}

frontend/src/container/TriggeredAlerts/components/AlertStatusTag.tsx

@@ -2,31 +2,32 @@ import { Badge } from '@signozhq/ui/badge';
 
 interface AlertStatusTagProps {
 	state: string;
+	testId?: string;
 }
 
-function AlertStatusTag({ state }: AlertStatusTagProps): JSX.Element {
+function AlertStatusTag({ state, testId }: AlertStatusTagProps): JSX.Element {
 	switch (state) {
 		case 'unprocessed':
 			return (
-				<Badge color="success" variant="outline">
+				<Badge color="success" variant="outline" testId={testId}>
 					Unprocessed
 				</Badge>
 			);
 		case 'active':
 			return (
-				<Badge color="error" variant="outline">
+				<Badge color="error" variant="outline" testId={testId}>
 					Firing
 				</Badge>
 			);
 		case 'suppressed':
 			return (
-				<Badge color="error" variant="outline">
+				<Badge color="error" variant="outline" testId={testId}>
 					Suppressed
 				</Badge>
 			);
 		default:
 			return (
-				<Badge color="secondary" variant="outline">
+				<Badge color="secondary" variant="outline" testId={testId}>
 					Unknown
 				</Badge>
 			);

frontend/src/container/TriggeredAlerts/components/EmptyStates.tsx

@@ -3,6 +3,7 @@ import { CircleCheck, Plus, RefreshCw } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isModifierKeyPressed } from 'utils/app';
 
 import styles from './EmptyStates.module.scss';
 
@@ -13,9 +14,12 @@ interface EmptyStateProps {
 export function EmptyState({ onRefresh }: EmptyStateProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 
-	const handleCreateAlert = useCallback((): void => {
-		safeNavigate(ROUTES.ALERTS_NEW);
-	}, [safeNavigate]);
+	const handleCreateAlert = useCallback(
+		(e: React.MouseEvent): void => {
+			safeNavigate(ROUTES.ALERTS_NEW, { newTab: isModifierKeyPressed(e) });
+		},
+		[safeNavigate],
+	);
 
 	return (
 		<div className={styles.emptyState}>
@@ -30,6 +34,7 @@ export function EmptyState({ onRefresh }: EmptyStateProps): JSX.Element {
 					color="primary"
 					prefix={<Plus size={14} />}
 					onClick={handleCreateAlert}
+					testId="triggered-alerts-empty-create-button"
 				>
 					Create Alert Rule
 				</Button>
@@ -39,6 +44,7 @@ export function EmptyState({ onRefresh }: EmptyStateProps): JSX.Element {
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
+						testId="triggered-alerts-empty-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/container/TriggeredAlerts/components/GroupTagsCell.tsx

@@ -44,6 +44,7 @@ export function GroupTagsCell({
 				prefix={
 					localIsExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />
 				}
+				testId="group-expand-toggle"
 			/>
 			<div className={styles.tagsContainer}>
 				{tags.map((tag) => (

frontend/src/container/TriggeredAlerts/index.tsx

@@ -175,6 +175,7 @@ function TriggeredAlerts(): JSX.Element {
 					value={searchText}
 					onChange={handleSearchChange}
 					suffix={<Search size={14} className={styles.searchIcon} />}
+					testId="triggered-alerts-search-input"
 				/>
 				<ComboboxSimple
 					className={styles.filterSelect}
@@ -186,6 +187,7 @@ function TriggeredAlerts(): JSX.Element {
 					allowCreate
 					items={severyFilters}
 					maxDisplayedPills={2}
+					testId="triggered-alerts-filter-combobox"
 				/>
 				<ComboboxSimple
 					className={styles.filterSelect}
@@ -196,6 +198,7 @@ function TriggeredAlerts(): JSX.Element {
 					items={labelOptions}
 					multiple
 					maxDisplayedPills={2}
+					testId="triggered-alerts-groupby-combobox"
 				/>
 			</div>
 

frontend/src/container/TriggeredAlerts/table.config.tsx

@@ -21,8 +21,11 @@ export function getAlertColumns(
 			width: { fixed: '100px' },
 			enableSort: false,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<AlertStatusTag state={String(value ?? '')} />
+			cell: ({ row, value }): JSX.Element => (
+				<AlertStatusTag
+					state={String(value ?? '')}
+					testId={`alert-row-${row.fingerprint ?? ''}-status`}
+				/>
 			),
 		},
 		{
@@ -32,8 +35,11 @@ export function getAlertColumns(
 			width: { default: '100%' },
 			enableSort: true,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text title={value}>
+			cell: ({ row, value }): JSX.Element => (
+				<TanStackTable.Text
+					title={value}
+					data-testid={`alert-row-${row.fingerprint ?? ''}-name`}
+				>
 					{String(value ?? '-')}
 				</TanStackTable.Text>
 			),
@@ -45,15 +51,17 @@ export function getAlertColumns(
 			width: { fixed: '120px' },
 			enableSort: true,
 			enableMove: false,
-			cell: ({ value }): JSX.Element => {
+			cell: ({ row, value }): JSX.Element => {
 				const severity = String(value ?? '').toLowerCase();
+				const testId = `alert-row-${row.fingerprint ?? ''}-severity`;
 				if (!severity) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
+					return <TanStackTable.Text data-testid={testId}>-</TanStackTable.Text>;
 				}
 				return (
 					<Badge
 						color={SEVERITY_BADGE_COLORS[severity] ?? 'secondary'}
 						variant="outline"
+						testId={testId}
 					>
 						{severity}
 					</Badge>

frontend/src/hooks/queryBuilder/__tests__/useCreateAlerts.test.tsx

@@ -17,11 +17,6 @@ jest.mock('react-redux', () => ({
 	useSelector: jest.fn(),
 }));
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('api/dashboard/substitute_vars', () => ({
 	getSubstituteVars: jest.fn(),
 }));

frontend/src/hooks/queryBuilder/__tests__/useSyncTimeOnStagedQueryChange.test.ts

@@ -0,0 +1,139 @@
+import { renderHook } from '@testing-library/react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { UpdateTimeInterval } from 'store/actions';
+
+import { useSyncTimeOnStagedQueryChange } from '../useSyncTimeOnStagedQueryChange';
+
+const mockDispatch = jest.fn();
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: jest.fn(),
+}));
+
+jest.mock('store/actions', () => ({
+	UpdateTimeInterval: jest.fn((time: string) => ({
+		type: 'UPDATE_TIME_INTERVAL_THUNK',
+		payload: time,
+	})),
+}));
+
+const mockedUseSelector = useSelector as jest.Mock;
+const mockedUpdateTimeInterval = UpdateTimeInterval as unknown as jest.Mock;
+
+const setSelectedTime = (value: string): void => {
+	mockedUseSelector.mockImplementation(
+		(selector: (state: { globalTime: { selectedTime: string } }) => unknown) =>
+			selector({ globalTime: { selectedTime: value } }),
+	);
+};
+
+describe('useSyncTimeOnStagedQueryChange', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		setSelectedTime('1h');
+	});
+
+	it('does not dispatch on initial mount when stagedQueryId is undefined', () => {
+		renderHook(() => useSyncTimeOnStagedQueryChange(undefined));
+		expect(mockDispatch).not.toHaveBeenCalled();
+	});
+
+	it('does not dispatch on initial mount when stagedQueryId is already defined', () => {
+		renderHook(() => useSyncTimeOnStagedQueryChange('initial-id'));
+		expect(mockDispatch).not.toHaveBeenCalled();
+	});
+
+	it('does not dispatch when stagedQueryId transitions from undefined to defined (first staged query arriving)', () => {
+		const { rerender } = renderHook(
+			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
+			{ initialProps: { id: undefined as string | undefined } },
+		);
+
+		rerender({ id: 'first-id' });
+
+		expect(mockDispatch).not.toHaveBeenCalled();
+	});
+
+	it('dispatches UpdateTimeInterval with current selectedTime when stagedQueryId changes', () => {
+		const { rerender } = renderHook(
+			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
+			{ initialProps: { id: 'first-id' as string | undefined } },
+		);
+
+		expect(mockDispatch).not.toHaveBeenCalled();
+
+		rerender({ id: 'second-id' });
+
+		expect(mockedUpdateTimeInterval).toHaveBeenCalledTimes(1);
+		expect(mockedUpdateTimeInterval).toHaveBeenCalledWith('1h');
+		expect(mockDispatch).toHaveBeenCalledTimes(1);
+		expect(mockDispatch).toHaveBeenCalledWith({
+			type: 'UPDATE_TIME_INTERVAL_THUNK',
+			payload: '1h',
+		});
+	});
+
+	it('does not dispatch when selectedTime is "custom" even if stagedQueryId changes', () => {
+		setSelectedTime('custom');
+
+		const { rerender } = renderHook(
+			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
+			{ initialProps: { id: 'first-id' as string | undefined } },
+		);
+
+		rerender({ id: 'second-id' });
+
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockedUpdateTimeInterval).not.toHaveBeenCalled();
+	});
+
+	it('does not dispatch when only selectedTime changes (stagedQueryId stable)', () => {
+		const { rerender } = renderHook(
+			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
+			{ initialProps: { id: 'stable-id' as string | undefined } },
+		);
+
+		setSelectedTime('5m');
+		rerender({ id: 'stable-id' });
+
+		expect(mockDispatch).not.toHaveBeenCalled();
+	});
+
+	it('dispatches once per distinct stagedQueryId change', () => {
+		const { rerender } = renderHook(
+			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
+			{ initialProps: { id: 'a' as string | undefined } },
+		);
+
+		rerender({ id: 'b' });
+		rerender({ id: 'c' });
+		rerender({ id: 'c' }); // no change — should not dispatch again
+
+		expect(mockDispatch).toHaveBeenCalledTimes(2);
+	});
+
+	it('does not dispatch when stagedQueryId transitions from defined to undefined', () => {
+		const { rerender } = renderHook(
+			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
+			{ initialProps: { id: 'first-id' as string | undefined } },
+		);
+
+		rerender({ id: undefined });
+
+		expect(mockDispatch).not.toHaveBeenCalled();
+	});
+
+	it('uses the latest selectedTime at the moment of stagedQueryId change', () => {
+		const { rerender } = renderHook(
+			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
+			{ initialProps: { id: 'a' as string | undefined } },
+		);
+
+		setSelectedTime('15m');
+		rerender({ id: 'b' });
+
+		expect(mockedUpdateTimeInterval).toHaveBeenCalledWith('15m');
+	});
+});

frontend/src/hooks/queryBuilder/useSyncTimeOnStagedQueryChange.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+// Push fresh min/max back into Redux whenever the staged query changes for a
+// relative time interval. The data hooks that read minTime/maxTime from Redux
+// otherwise keep refetching with the originally frozen window and the time
+// picker displays a stale absolute range.
+// ref - SigNoz/signoz#8277
+export function useSyncTimeOnStagedQueryChange(
+	stagedQueryId: string | undefined,
+): void {
+	const dispatch = useDispatch();
+	const selectedTime = useSelector<AppState, GlobalReducer['selectedTime']>(
+		(state) => state.globalTime.selectedTime,
+	);
+	const prevStagedQueryIdRef = useRef<string | undefined>();
+
+	useEffect(() => {
+		const prevId = prevStagedQueryIdRef.current;
+		const currentId = stagedQueryId;
+		prevStagedQueryIdRef.current = currentId;
+
+		if (
+			prevId !== undefined &&
+			currentId !== undefined &&
+			prevId !== currentId &&
+			selectedTime !== 'custom'
+		) {
+			dispatch(UpdateTimeInterval(selectedTime));
+		}
+	}, [stagedQueryId, selectedTime, dispatch]);
+}

frontend/src/mocks-server/__mockdata__/alert_rules.ts

@@ -0,0 +1,85 @@
+import {
+	RuletypesAlertStateDTO,
+	RuletypesAlertTypeDTO,
+	RuletypesPanelTypeDTO,
+	RuletypesQueryTypeDTO,
+	RuletypesRuleTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type {
+	RuletypesRuleConditionDTO,
+	RuletypesRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+const baseCondition: RuletypesRuleConditionDTO = {
+	compositeQuery: {
+		queryType: RuletypesQueryTypeDTO.builder,
+		panelType: RuletypesPanelTypeDTO.graph,
+		queries: null,
+	},
+} as unknown as RuletypesRuleConditionDTO;
+
+const make = (
+	id: string,
+	overrides: Partial<RuletypesRuleDTO>,
+): RuletypesRuleDTO => ({
+	id,
+	alert: `Alert ${id}`,
+	alertType: RuletypesAlertTypeDTO.METRIC_BASED_ALERT,
+	condition: baseCondition,
+	createdAt: '2023-10-15T10:00:00Z',
+	updatedAt: '2023-10-19T10:00:00Z',
+	createdBy: 'alice@signoz.io',
+	updatedBy: 'alice@signoz.io',
+	disabled: false,
+	state: RuletypesAlertStateDTO.inactive,
+	labels: { severity: 'info' },
+	annotations: {},
+	source: '',
+	evalWindow: '5m0s',
+	frequency: '1m0s',
+	ruleType: RuletypesRuleTypeDTO.threshold_rule,
+	...overrides,
+});
+
+export const alertRulesFixture: RuletypesRuleDTO[] = [
+	make('rule-1', {
+		alert: 'High CPU Alert',
+		state: RuletypesAlertStateDTO.firing,
+		labels: { severity: 'critical', team: 'infra' },
+	}),
+	make('rule-2', {
+		alert: 'Memory Pending Alert',
+		state: RuletypesAlertStateDTO.pending,
+		labels: { severity: 'warning', team: 'backend' },
+	}),
+	make('rule-3', {
+		alert: 'Healthy Alert',
+		state: RuletypesAlertStateDTO.inactive,
+		labels: { severity: 'info', team: 'infra' },
+	}),
+	make('rule-4', {
+		alert: 'Disabled Alert',
+		state: RuletypesAlertStateDTO.disabled,
+		disabled: true,
+		labels: { severity: 'critical', team: 'frontend' },
+	}),
+	make('rule-5', {
+		alert: 'No Labels Alert',
+		state: RuletypesAlertStateDTO.inactive,
+		labels: {},
+	}),
+];
+
+export const alertRulesPaginationFixture: RuletypesRuleDTO[] = Array.from(
+	{ length: 15 },
+	(_, i) =>
+		make(`rule-pag-${i}`, {
+			alert: `Pag Rule ${i}`,
+			state:
+				i % 2 === 0
+					? RuletypesAlertStateDTO.firing
+					: RuletypesAlertStateDTO.inactive,
+			labels: { severity: i % 2 === 0 ? 'critical' : 'warning' },
+			createdAt: `2023-10-${String(i + 1).padStart(2, '0')}T10:00:00Z`,
+		}),
+);

frontend/src/mocks-server/__mockdata__/triggered_alerts.ts

@@ -0,0 +1,102 @@
+import type { AlertmanagertypesDeprecatedGettableAlertDTO } from 'api/generated/services/sigNoz.schemas';
+
+export const triggeredAlertsFixture: AlertmanagertypesDeprecatedGettableAlertDTO[] =
+	[
+		{
+			fingerprint: 'fp-critical-1',
+			startsAt: '2023-10-19T10:00:00Z',
+			endsAt: '0001-01-01T00:00:00Z',
+			generatorURL: 'http://localhost/alerts/edit?ruleId=rule-1&panelTypes=graph',
+			labels: {
+				alertname: 'High CPU Usage',
+				severity: 'critical',
+				ruleId: 'rule-1',
+				service: 'frontend',
+				env: 'prod',
+			},
+			annotations: {
+				summary: 'CPU above 90%',
+				description: 'Frontend CPU usage critical',
+			},
+			status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+			receivers: ['slack'],
+		},
+		{
+			fingerprint: 'fp-warning-1',
+			startsAt: '2023-10-19T09:00:00Z',
+			endsAt: '0001-01-01T00:00:00Z',
+			generatorURL: 'http://localhost/alerts/edit?ruleId=rule-2',
+			labels: {
+				alertname: 'Memory Warning',
+				severity: 'warning',
+				ruleId: 'rule-2',
+				service: 'backend',
+				env: 'prod',
+			},
+			annotations: { summary: 'Memory high' },
+			status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+			receivers: ['slack'],
+		},
+		{
+			fingerprint: 'fp-info-1',
+			startsAt: '2023-10-19T08:00:00Z',
+			endsAt: '0001-01-01T00:00:00Z',
+			generatorURL: 'http://localhost/alerts/edit?ruleId=rule-3',
+			labels: {
+				alertname: 'Disk Slow',
+				severity: 'info',
+				ruleId: 'rule-3',
+				service: 'frontend',
+				env: 'staging',
+			},
+			annotations: { summary: 'Disk slow' },
+			status: { state: 'unprocessed', silencedBy: [], inhibitedBy: [] },
+			receivers: ['email'],
+		},
+		{
+			fingerprint: 'fp-suppressed-1',
+			startsAt: '2023-10-19T07:00:00Z',
+			endsAt: '0001-01-01T00:00:00Z',
+			generatorURL: 'http://localhost/alerts/edit?ruleId=rule-4',
+			labels: {
+				alertname: 'Network Hiccup',
+				severity: 'error',
+				ruleId: 'rule-4',
+				service: 'backend',
+				env: 'dev',
+			},
+			annotations: { summary: 'Network errors' },
+			status: { state: 'suppressed', silencedBy: ['s-1'], inhibitedBy: [] },
+			receivers: ['pagerduty'],
+		},
+		{
+			fingerprint: 'fp-noseverity',
+			startsAt: '2023-10-19T06:00:00Z',
+			endsAt: '0001-01-01T00:00:00Z',
+			labels: {
+				alertname: 'Unknown Alert',
+				service: 'misc',
+			},
+			annotations: {},
+			status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+			receivers: [],
+		},
+	];
+
+// Bigger fixture for pagination tests (15 entries → 2 pages at limit=10).
+export const triggeredAlertsPaginationFixture: AlertmanagertypesDeprecatedGettableAlertDTO[] =
+	Array.from({ length: 15 }, (_, i) => ({
+		fingerprint: `fp-pag-${i}`,
+		startsAt: `2023-10-${String(i + 1).padStart(2, '0')}T10:00:00Z`,
+		endsAt: '0001-01-01T00:00:00Z',
+		generatorURL: `http://localhost/alerts/edit?ruleId=rule-pag-${i}`,
+		labels: {
+			alertname: `Pag Alert ${i}`,
+			severity: i % 2 === 0 ? 'critical' : 'warning',
+			ruleId: `rule-pag-${i}`,
+			service: 'frontend',
+		},
+		annotations: {},
+		status: { state: 'active', silencedBy: [], inhibitedBy: [] },
+		receivers: [],
+	}));

frontend/src/mocks-server/handlers.ts

@@ -3,6 +3,8 @@ import { rest } from 'msw';
 import commonEnTranslation from '../../public/locales/en/common.json';
 import enTranslation from '../../public/locales/en/translation.json';
 import { allAlertChannels } from './__mockdata__/alerts';
+import { alertRulesFixture } from './__mockdata__/alert_rules';
+import { triggeredAlertsFixture } from './__mockdata__/triggered_alerts';
 import { billingSuccessResponse } from './__mockdata__/billing';
 import {
 	dashboardSuccessResponse,
@@ -236,6 +238,38 @@ export const handlers = [
 	rest.get('http://localhost/api/v1/channels', (_, res, ctx) =>
 		res(ctx.status(200), ctx.json({ data: allAlertChannels, status: 'success' })),
 	),
+	rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json({ data: triggeredAlertsFixture, status: 'success' }),
+		),
+	),
+	rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json({ data: alertRulesFixture, status: 'success' }),
+		),
+	),
+	rest.post('http://localhost/api/v2/rules', async (req, res, ctx) => {
+		const body = (await req.json()) as { alert?: string };
+		return res(
+			ctx.status(201),
+			ctx.json({
+				data: {
+					...alertRulesFixture[0],
+					id: 'new-rule-id',
+					alert: body?.alert ?? 'New Rule',
+				},
+				status: 'success',
+			}),
+		);
+	}),
+	rest.patch('http://localhost/api/v2/rules/:id', (_, res, ctx) =>
+		res(ctx.status(200), ctx.json({ status: 'success' })),
+	),
+	rest.delete('http://localhost/api/v2/rules/:id', (_, res, ctx) =>
+		res(ctx.status(200), ctx.json({ status: 'success' })),
+	),
 	rest.delete('http://localhost/api/v1/channels/:id', (_, res, ctx) =>
 		res(
 			ctx.status(200),

frontend/src/pages/Settings/__tests__/Settings.test.tsx

@@ -10,11 +10,6 @@ jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
 		children,
 }));
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('lib/history', () => ({
 	push: jest.fn(),
 	listen: jest.fn(() => jest.fn()),

frontend/src/pages/SignUp/__tests__/SignUp.test.tsx

@@ -14,11 +14,6 @@ jest.mock('AppRoutes/utils', () => ({
 
 const mockAfterLogin = jest.mocked(afterLogin);
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('lib/history', () => ({
 	__esModule: true,
 	default: {

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.module.scss

@@ -119,6 +119,7 @@
 	gap: 12px;
 	margin-bottom: 14px;
 	align-items: center;
+	background: var(--l3-background);
 }
 
 .searchInput {
@@ -126,16 +127,13 @@
 	padding: 6px 8px;
 	background: var(--l3-background);
 
-	:global(.ant-input-prefix) {
-		height: 18px;
-		margin-inline-end: 6px;
+	height: 18px;
+	margin-inline-end: 6px;
 
-		svg {
-			opacity: 0.4;
-		}
+	svg {
+		opacity: 0.4;
 	}
 
-	&,
 	input {
 		font-size: 14px;
 		line-height: 18px;

frontend/src/tests/nuqs-helpers.ts

@@ -0,0 +1,41 @@
+// Helpers for tests that drive components built with `nuqs`.
+//
+// We replace `NuqsAdapter` (which throttles URL writes to `window.history`)
+// with `NuqsTestingAdapter`. The testing adapter applies URL updates
+// synchronously (`rateLimitFactor: 0`) and stores state in memory
+// (`hasMemory: true`) so subsequent reads see the latest value without any
+// `flushNuqsUrl` sleep. Each test gets a fresh queue because
+// `resetUrlUpdateQueueOnMount` defaults to `true`.
+//
+// Reads on `window.location.search` are no longer authoritative since the
+// adapter does not push to the browser history. Use
+// `getCurrentNuqsQueryString()` (or assert on `lastNuqsUrlUpdate`) instead.
+
+import type { OnUrlUpdateFunction } from 'nuqs/adapters/testing';
+
+let lastUrlUpdate: { searchParams: URLSearchParams; queryString: string } = {
+	searchParams: new URLSearchParams(),
+	queryString: '',
+};
+
+export function resetNuqsState(initialQuery = ''): void {
+	lastUrlUpdate = {
+		searchParams: new URLSearchParams(initialQuery),
+		queryString: initialQuery,
+	};
+}
+
+export const onNuqsUrlUpdate: OnUrlUpdateFunction = (event) => {
+	lastUrlUpdate = {
+		searchParams: event.searchParams,
+		queryString: event.queryString,
+	};
+};
+
+export function getCurrentNuqsQueryString(): string {
+	return lastUrlUpdate.queryString;
+}
+
+export function getCurrentNuqsSearchParams(): URLSearchParams {
+	return lastUrlUpdate.searchParams;
+}

frontend/src/utils/__tests__/queryContextUtils.test.ts

@@ -648,176 +648,3 @@ describe('getQueryContextAtCursor - trailing dot in key/value', () => {
 		expect(ctx.keyToken).toBe('k8s.namespace');
 	});
 });
-
-describe('getQueryContextAtCursor - partial operator', () => {
-	it('treats text after an incomplete key as an operator prefix', () => {
-		const q = 'service.name c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.isInKey).toBe(false);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('c');
-		expect(ctx.currentPair).toStrictEqual(
-			expect.objectContaining({
-				key: 'service.name',
-				operator: 'c',
-				position: expect.objectContaining({
-					operatorStart: 13,
-					operatorEnd: 13,
-				}),
-			}),
-		);
-	});
-
-	it('keeps the operator context while completing contains', () => {
-		const q = 'service.name cont';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('cont');
-	});
-
-	it('treats cursor mid-token as operator context', () => {
-		const q = 'service.name cont';
-		// cursor sits between "con" and "t" — user still typing the operator
-		const ctx = getQueryContextAtCursor(q, 15);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.isInKey).toBe(false);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('cont');
-	});
-
-	it('keeps operator context when an AND conjunction precedes the pair', () => {
-		const q = 'a = 1 AND service.name c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.isInKey).toBe(false);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('c');
-		expect(ctx.currentPair).toStrictEqual(
-			expect.objectContaining({
-				key: 'service.name',
-				operator: 'c',
-				position: expect.objectContaining({
-					operatorStart: 23,
-					operatorEnd: 23,
-				}),
-			}),
-		);
-	});
-
-	it('keeps operator context when an open parenthesis precedes the pair', () => {
-		const q = '(service.name c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.isInKey).toBe(false);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('c');
-	});
-
-	it('re-glues a partial operator that follows a NOT negation', () => {
-		const q = 'service.name NOT c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.isInKey).toBe(false);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('NOT c');
-		// operatorStart points at the partial operator (post-NOT), not at the
-		// negation — so suggestion selection only replaces the partial, never
-		// the user's typed NOT.
-		expect(ctx.currentPair).toStrictEqual(
-			expect.objectContaining({
-				key: 'service.name',
-				operator: 'NOT c',
-				hasNegation: true,
-				position: expect.objectContaining({
-					negationStart: 13,
-					negationEnd: 15,
-					operatorStart: 17,
-					operatorEnd: 17,
-				}),
-			}),
-		);
-	});
-
-	it('re-glues a multi-character partial operator after NOT', () => {
-		const q = 'service.name NOT lik';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('NOT lik');
-		expect(ctx.currentPair?.hasNegation).toBe(true);
-	});
-
-	it('re-glues an uppercase partial operator after NOT', () => {
-		const q = 'service.name NOT EXI';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('NOT EXI');
-		expect(ctx.currentPair?.hasNegation).toBe(true);
-	});
-
-	it('preserves original NOT casing in the operator text', () => {
-		const q = 'service.name not c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('not c');
-		expect(ctx.currentPair?.hasNegation).toBe(true);
-	});
-
-	it('tolerates extra whitespace between NOT and the partial operator', () => {
-		const q = 'service.name NOT  c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('service.name');
-		// Display text uses a canonical single space between NOT and the
-		// partial, regardless of how many spaces the user typed.
-		expect(ctx.operatorToken).toBe('NOT c');
-		expect(ctx.currentPair?.hasNegation).toBe(true);
-	});
-
-	it('keeps operator context for NOT-prefixed partial inside parentheses', () => {
-		const q = '(service.name NOT c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('NOT c');
-		expect(ctx.currentPair?.hasNegation).toBe(true);
-	});
-
-	it('keeps operator context for NOT-prefixed partial after an AND conjunction', () => {
-		const q = 'a = 1 AND service.name NOT c';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('NOT c');
-		expect(ctx.currentPair?.hasNegation).toBe(true);
-	});
-
-	it('re-glues the most recent incomplete pair when three partial tokens are typed', () => {
-		// Pins documented behavior: with two trailing partial pairs (`c` and
-		// `k`), the heuristic pairs the most recent two — `c` becomes the
-		// key, `k` becomes the partial operator. The earlier `service.name`
-		// is dropped from the current pair view.
-		const q = 'service.name c k';
-		const ctx = getQueryContextAtCursor(q, q.length);
-
-		expect(ctx.isInOperator).toBe(true);
-		expect(ctx.keyToken).toBe('c');
-		expect(ctx.operatorToken).toBe('k');
-	});
-});

frontend/src/utils/queryContextUtils.ts

@@ -605,98 +605,6 @@ export function getQueryContextAtCursor(
 			queryPairs,
 		);
 
-		// Re-glue a partial operator that ANTLR has lexed as a second key.
-		//
-		// When the user types `service.name c` (or `service.name NOT c`), the
-		// lexer sees two KEY tokens (`service.name`, `c`) instead of a key +
-		// partial operator, so `extractQueryPairs` emits two consecutive
-		// key-only incomplete pairs. Downstream, that makes the dropdown
-		// suggest keys when it should be suggesting operators.
-		//
-		// Detect that pattern — a previous incomplete key-only pair followed
-		// by another incomplete key-only `currentPair`, separated only by
-		// whitespace (or by a negation token attached to the previous pair) —
-		// and rebuild a single synthetic pair where the previous pair's key
-		// is the key and the current pair's key is treated as the partial
-		// operator. The synthetic pair inherits the previous pair's negation
-		// flag and positions via the spread, so `NOT <partial>` propagates
-		// correctly to consumers.
-		const previousIncompletePair = queryPairs
-			.filter(
-				(pair) =>
-					!pair.isComplete &&
-					!!pair.key &&
-					!pair.operator &&
-					pair.position.keyEnd < (currentPair?.position.keyStart ?? cursorIndex),
-			)
-			.sort((a, b) => b.position.keyEnd - a.position.keyEnd)[0];
-
-		if (
-			previousIncompletePair &&
-			currentPair &&
-			currentPair !== previousIncompletePair &&
-			!currentPair.operator &&
-			currentPair.position.keyStart > previousIncompletePair.position.keyEnd
-		) {
-			const negationStart = previousIncompletePair.position.negationStart ?? 0;
-			const negationEnd = previousIncompletePair.position.negationEnd ?? 0;
-			const negationAfterKey =
-				previousIncompletePair.hasNegation &&
-				negationStart > previousIncompletePair.position.keyEnd;
-			const gapStart = negationAfterKey
-				? negationEnd + 1
-				: previousIncompletePair.position.keyEnd + 1;
-			const textBetweenPairs = query.slice(
-				gapStart,
-				currentPair.position.keyStart,
-			);
-
-			if (textBetweenPairs.trim() === '') {
-				// The replacement range (operatorStart/operatorEnd) must point
-				// at the partial operator only, NOT the leading negation.
-				// Consumers like QuerySearch use it to splice the chosen
-				// suggestion in-place, so including the negation would let a
-				// `NOT lik` -> `LIKE` selection erase the user's typed `NOT`.
-				// Matches the convention used for complete pairs in
-				// extractQueryPairs, where operatorStart starts after the
-				// negation token.
-				const operatorStart = currentPair.position.keyStart;
-				const operatorEnd = currentPair.position.keyEnd;
-				const partialOperator = query.slice(operatorStart, operatorEnd + 1);
-				const operatorText = negationAfterKey
-					? `${query.slice(negationStart, negationEnd + 1)} ${partialOperator}`
-					: partialOperator;
-
-				return {
-					tokenType: -1,
-					text: '',
-					start: cursorIndex,
-					stop: cursorIndex,
-					currentToken: operatorText,
-					isInKey: false,
-					isInNegation: false,
-					isInOperator: true,
-					isInValue: false,
-					isInConjunction: false,
-					isInFunction: false,
-					isInParenthesis: false,
-					isInBracketList: false,
-					keyToken: previousIncompletePair.key,
-					operatorToken: operatorText,
-					queryPairs,
-					currentPair: {
-						...previousIncompletePair,
-						operator: operatorText,
-						position: {
-							...previousIncompletePair.position,
-							operatorStart,
-							operatorEnd,
-						},
-					},
-				};
-			}
-		}
-
 		// Check if cursor is within any of the specific context boundaries
 		// FIXED: Include the case where the cursor is exactly at the end of a boundary
 		const isInKeyBoundary =

frontend/stylelint-rules/css-modules/class-name-pattern.js

@@ -0,0 +1,186 @@
+/**
+ * Stylelint rule: local/class-name-pattern
+ *
+ * Enforces camelCase class names in CSS modules.
+ * With Vite's `localsConvention: 'camelCaseOnly'`, kebab-case is converted but
+ * using camelCase directly avoids confusion.
+ *
+ * BAD:
+ *   .my-class { }        // converted to myClass, but confusing
+ *   .my_class { }        // converted to myClass, but confusing
+ *   .MyClass { }         // PascalCase not conventional
+ *
+ * GOOD:
+ *   .myClass { }
+ *   .alertHistory { }
+ *   .statsCard { }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/class-name-pattern';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	kebabCase: (className) =>
+		`Class "${className}" uses kebab-case. Use camelCase instead: "${toCamelCase(className)}".`,
+	snakeCase: (className) =>
+		`Class "${className}" uses snake_case. Use camelCase instead: "${toCamelCase(className)}".`,
+	pascalCase: (className) =>
+		`Class "${className}" uses PascalCase. Use camelCase instead: "${className.charAt(0).toLowerCase() + className.slice(1)}".`,
+});
+
+function toCamelCase(str) {
+	return str
+		.split(/[-_]/)
+		.map((part, i) =>
+			i === 0
+				? part.toLowerCase()
+				: part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(),
+		)
+		.join('');
+}
+
+function isKebabCase(str) {
+	return str.includes('-');
+}
+
+function isSnakeCase(str) {
+	return str.includes('_');
+}
+
+function isPascalCase(str) {
+	return /^[A-Z][a-zA-Z0-9]*$/.test(str);
+}
+
+const CLASS_PATTERN = /\.([a-zA-Z_][a-zA-Z0-9_-]*)/g;
+
+const DEFAULT_THIRD_PARTY_PREFIXES = [
+	'ant-', // Ant Design
+	'rc-', // rc-components (Ant Design internals)
+	'recharts-', // Recharts
+	'uplot-', // uPlot
+	'u-', // uPlot legacy
+	'leaflet-', // Leaflet
+	'monaco-', // Monaco editor
+	'react-resizable', // react-resizable
+	'cm-', // CodeMirror
+];
+
+// Bare `:global { ... }` block (no parens) makes all descendants global.
+// `:global(.foo)` is a per-selector escape — handled separately by globalRanges().
+function hasBareGlobalAncestor(node) {
+	let current = node.parent;
+	while (current) {
+		const selector = current.selector;
+		if (selector && /:global(?!\s*\()/.test(selector)) {
+			return true;
+		}
+		current = current.parent;
+	}
+	return false;
+}
+
+// Return list of [start, end) index ranges inside `selector` that fall within a
+// balanced `:global(...)` argument list. Class matches inside these ranges are
+// third-party and should be skipped.
+function globalRanges(selector) {
+	const ranges = [];
+	const re = /:global\s*\(/g;
+	let match;
+	while ((match = re.exec(selector)) !== null) {
+		const argStart = match.index + match[0].length;
+		let depth = 1;
+		let i = argStart;
+		while (i < selector.length && depth > 0) {
+			const ch = selector[i];
+			if (ch === '(') {
+				depth++;
+			} else if (ch === ')') {
+				depth--;
+			}
+			if (depth > 0) {
+				i++;
+			}
+		}
+		ranges.push([argStart, i]);
+		re.lastIndex = i;
+	}
+	return ranges;
+}
+
+function indexInRanges(index, ranges) {
+	for (const [start, end] of ranges) {
+		if (index >= start && index < end) {
+			return true;
+		}
+	}
+	return false;
+}
+
+const rule = (primaryOption, secondaryOptions) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		const userPrefixes =
+			(secondaryOptions && secondaryOptions.ignoreThirdPartyPrefixes) || [];
+		const allPrefixes = [...DEFAULT_THIRD_PARTY_PREFIXES, ...userPrefixes];
+
+		root.walkRules((ruleNode) => {
+			const selector = ruleNode.selector;
+
+			// Bare `:global { }` block makes all descendants global — skip entirely.
+			if (hasBareGlobalAncestor(ruleNode)) {
+				return;
+			}
+
+			const ranges = globalRanges(selector);
+
+			let match;
+			CLASS_PATTERN.lastIndex = 0;
+
+			while ((match = CLASS_PATTERN.exec(selector)) !== null) {
+				const className = match[1];
+				// Skip classes inside `:global(...)` ranges of this selector.
+				if (indexInRanges(match.index, ranges)) {
+					continue;
+				}
+
+				// Skip third-party library classes
+				if (allPrefixes.some((prefix) => className.startsWith(prefix))) {
+					continue;
+				}
+
+				if (isKebabCase(className)) {
+					stylelint.utils.report({
+						message: messages.kebabCase(className),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				} else if (isSnakeCase(className)) {
+					stylelint.utils.report({
+						message: messages.snakeCase(className),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				} else if (isPascalCase(className)) {
+					stylelint.utils.report({
+						message: messages.pascalCase(className),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/no-bare-element-selectors.js

@@ -0,0 +1,164 @@
+/**
+ * Stylelint rule: local/no-bare-element-selectors
+ *
+ * Prevents bare element selectors at root level in CSS modules.
+ * Bare elements affect ALL instances of that element within component scope,
+ * often unintentionally.
+ *
+ * BAD:
+ *   div { }
+ *   span { padding: 4px; }
+ *   p { margin: 0; }
+ *
+ * GOOD:
+ *   .container { }
+ *   .title { }
+ *
+ * ALLOWED (nested under class):
+ *   .container {
+ *     p { margin: 0; }  // Scoped to .container
+ *   }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-bare-element-selectors';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	unexpected: (element) =>
+		`Bare element selector "${element}" at root level affects all instances. Use class selector or nest under a class.`,
+	unexpectedInCompound: (element, full) =>
+		`Bare element "${element}" in unscoped selector "${full}" at root level matches every "<${element}>" in the module. Anchor the selector with a class (e.g., ".container ${element}") or use :global() if intentional.`,
+});
+
+const ELEMENT_PATTERN = /^[a-z][a-z0-9]*$/i;
+const EXCLUDED_ELEMENTS = new Set(['html', 'body', 'root']);
+
+function isPartBareElement(part) {
+	const trimmed = part.trim();
+	if (!trimmed) {
+		return false;
+	}
+	// Strip pseudo suffixes (`:hover`, `::before`) — element part is what's before
+	const elementOnly = trimmed.split(':')[0];
+	if (!elementOnly) {
+		return false;
+	}
+	// Skip class/id/attribute parts
+	if (/[.#[]/.test(elementOnly)) {
+		return false;
+	}
+	return (
+		ELEMENT_PATTERN.test(elementOnly) &&
+		!EXCLUDED_ELEMENTS.has(elementOnly.toLowerCase())
+	);
+}
+
+function isBareElement(selector) {
+	const trimmed = selector.trim();
+	// Skip combined selectors
+	if (/[,\s>+~]/.test(trimmed)) {
+		return false;
+	}
+	// Skip pseudo-selectors
+	if (trimmed.includes(':')) {
+		return false;
+	}
+	// Skip class/id/attribute selectors
+	if (/[.#[]/.test(trimmed)) {
+		return false;
+	}
+	return (
+		ELEMENT_PATTERN.test(trimmed) && !EXCLUDED_ELEMENTS.has(trimmed.toLowerCase())
+	);
+}
+
+// Split a compound selector on combinators (`>`, `+`, `~`, descendant space)
+// while keeping each part intact. Returns an array of selector parts.
+function splitOnCombinators(selector) {
+	return selector
+		.split(/\s*[>+~]\s*|\s+/)
+		.map((p) => p.trim())
+		.filter(Boolean);
+}
+
+function isInsideGlobal(selector) {
+	return /:global\s*\(/.test(selector);
+}
+
+const KEYFRAME_ATRULES = new Set([
+	'keyframes',
+	'-webkit-keyframes',
+	'-moz-keyframes',
+	'-o-keyframes',
+]);
+
+// Rule's effective parent is root if all ancestors above it are atrules
+// (e.g. `@media`, `@supports`). A bare `div` inside `@media { }` at top level
+// still matches every `<div>` in the module. Exclude `@keyframes` — its
+// `from`/`to`/`0%` children are not element selectors.
+function isEffectivelyTopLevel(node) {
+	let parent = node.parent;
+	while (parent && parent.type === 'atrule') {
+		if (KEYFRAME_ATRULES.has(parent.name.toLowerCase())) {
+			return false;
+		}
+		parent = parent.parent;
+	}
+	return Boolean(parent) && parent.type === 'root';
+}
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkRules((ruleNode) => {
+			if (!isEffectivelyTopLevel(ruleNode)) {
+				return;
+			}
+
+			const selectors = ruleNode.selector.split(',').map((s) => s.trim());
+
+			for (const selector of selectors) {
+				if (isInsideGlobal(selector)) {
+					continue;
+				}
+
+				if (isBareElement(selector)) {
+					stylelint.utils.report({
+						message: messages.unexpected(selector),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+					continue;
+				}
+
+				// Check combined selectors part-by-part. Only flag when the compound
+				// has NO class/id anchor — `.container > div` is already scoped, but
+				// `div + span` at root affects every matching descendant in the module.
+				if (/[\s>+~]/.test(selector) && !/[.#]/.test(selector)) {
+					const parts = splitOnCombinators(selector);
+					for (const part of parts) {
+						if (isPartBareElement(part)) {
+							stylelint.utils.report({
+								message: messages.unexpectedInCompound(part.split(':')[0], selector),
+								node: ruleNode,
+								result,
+								ruleName,
+							});
+						}
+					}
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/no-deep-nesting.js

@@ -0,0 +1,97 @@
+/**
+ * Stylelint rule: local/no-deep-nesting
+ *
+ * Prevents deep nesting in CSS modules (max 3 levels).
+ * Deep nesting creates specificity wars and hard-to-override styles.
+ *
+ * BAD:
+ *   .container { .wrapper { .inner { .content { } } } }  // 4 levels
+ *
+ * GOOD:
+ *   .container { }
+ *   .containerWrapper { }
+ *   .containerContent { }
+ *
+ * Allowed nesting (pseudo-classes/elements):
+ *   .button { &:hover { } &::before { } }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-deep-nesting';
+const DEFAULT_MAX_DEPTH = 3;
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	tooDeep: (depth, max) =>
+		`Nesting depth ${depth} exceeds maximum of ${max}. Flatten selectors for CSS modules.`,
+});
+
+function isPseudoSelector(selector) {
+	return /^&?:/.test(selector.trim());
+}
+
+function isParentReference(selector) {
+	return /^&[.#[]/.test(selector.trim());
+}
+
+function countNestingDepth(rule, depth = 0) {
+	const selector = rule.selector || '';
+
+	// Don't count pseudo-selectors or parent references toward depth
+	if (isPseudoSelector(selector) || isParentReference(selector)) {
+		// Still check children
+		let maxChildDepth = depth;
+		rule.walkRules?.((child) => {
+			const childDepth = countNestingDepth(child, depth);
+			maxChildDepth = Math.max(maxChildDepth, childDepth);
+		});
+		return maxChildDepth;
+	}
+
+	const currentDepth = depth + 1;
+	let maxDepth = currentDepth;
+
+	rule.walkRules?.((child) => {
+		const childDepth = countNestingDepth(child, currentDepth);
+		maxDepth = Math.max(maxDepth, childDepth);
+	});
+
+	return maxDepth;
+}
+
+const rule = (primaryOption, secondaryOptions) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		const maxDepth =
+			secondaryOptions && Number.isInteger(secondaryOptions.maxDepth)
+				? secondaryOptions.maxDepth
+				: DEFAULT_MAX_DEPTH;
+
+		root.walkRules((ruleNode) => {
+			// Only check top-level rules
+			if (ruleNode.parent.type !== 'root' && ruleNode.parent.type !== 'atrule') {
+				return;
+			}
+
+			const depth = countNestingDepth(ruleNode);
+
+			if (depth > maxDepth) {
+				stylelint.utils.report({
+					message: messages.tooDeep(depth, maxDepth),
+					node: ruleNode,
+					result,
+					ruleName,
+				});
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/no-id-selectors.js

@@ -0,0 +1,55 @@
+/**
+ * Stylelint rule: local/no-id-selectors
+ *
+ * Prevents ID selectors in CSS modules.
+ * IDs create high specificity, can't be reused, and defeat CSS modules scoping purpose.
+ *
+ * BAD:
+ *   #myComponent { }
+ *   .container #header { }
+ *
+ * GOOD:
+ *   .myComponent { }
+ *   .containerHeader { }
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/no-id-selectors';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	unexpected: (selector) =>
+		`ID selector "${selector}" not allowed in CSS modules. Use class selector instead.`,
+});
+
+const ID_PATTERN = /#[a-zA-Z_][a-zA-Z0-9_-]*/g;
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkRules((ruleNode) => {
+			const selector = ruleNode.selector;
+			const matches = selector.match(ID_PATTERN);
+
+			if (matches) {
+				for (const match of matches) {
+					stylelint.utils.report({
+						message: messages.unexpected(match),
+						node: ruleNode,
+						result,
+						ruleName,
+					});
+				}
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

frontend/stylelint-rules/css-modules/prefer-css-variables.js

@@ -0,0 +1,168 @@
+/**
+ * Stylelint rule: local/prefer-css-variables
+ *
+ * Warns on hardcoded colors in CSS modules.
+ * Use CSS variables for consistent theming.
+ *
+ * BAD:
+ *   color: #ff0000;
+ *   background: rgb(255, 0, 0);
+ *   border: 1px solid blue;
+ *
+ * GOOD:
+ *   color: var(--l1-foreground);
+ *   background: var(--primary-background);
+ *   border: 1px solid var(--l2-border);
+ *
+ * ALLOWED:
+ *   transparent, inherit, currentColor, none
+ *   Colors inside var() fallbacks
+ */
+import stylelint from 'stylelint';
+
+const ruleName = 'local/prefer-css-variables';
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+	hardcodedColor: (value, property) =>
+		`Hardcoded color "${value}" in "${property}". Use a semantic CSS variable instead (e.g., var(--l1-foreground), var(--primary-background)). See docs/css-modules-guide.md.`,
+});
+
+const COLOR_PROPERTIES = new Set([
+	'color',
+	'background',
+	'background-color',
+	'background-image',
+	'border',
+	'border-color',
+	'border-top',
+	'border-right',
+	'border-bottom',
+	'border-left',
+	'border-top-color',
+	'border-right-color',
+	'border-bottom-color',
+	'border-left-color',
+	'border-image',
+	'border-image-source',
+	'outline',
+	'outline-color',
+	'box-shadow',
+	'text-shadow',
+	'fill',
+	'stroke',
+	'caret-color',
+	'text-decoration-color',
+	'column-rule-color',
+	'mask',
+	'mask-image',
+]);
+
+const ALLOWED_VALUES = new Set([
+	'transparent',
+	'inherit',
+	'initial',
+	'unset',
+	'currentcolor',
+	'none',
+	'auto',
+]);
+
+const HEX_PATTERN = /#[0-9a-fA-F]{3,8}\b/;
+const RGB_PATTERN = /rgba?\s*\([^)]+\)/i;
+const HSL_PATTERN = /hsla?\s*\([^)]+\)/i;
+const NAMED_COLOR_PATTERN =
+	/\b(red|blue|green|yellow|orange|purple|pink|black|white|gray|grey|cyan|magenta|brown|navy|teal|olive|maroon|lime|aqua|fuchsia|silver)\b/i;
+
+// Strip balanced `fn(...)` sections (e.g. `var(...)`, `url(...)`) from value.
+// Handles nested parens by counting depth.
+function stripBalancedFn(value, fnName) {
+	const needle = `${fnName}(`;
+	let out = '';
+	let i = 0;
+	while (i < value.length) {
+		if (value.startsWith(needle, i)) {
+			let depth = 1;
+			i += needle.length;
+			while (i < value.length && depth > 0) {
+				const ch = value[i];
+				if (ch === '(') {
+					depth++;
+				} else if (ch === ')') {
+					depth--;
+				}
+				i++;
+			}
+		} else {
+			out += value[i];
+			i++;
+		}
+	}
+	return out;
+}
+
+function containsHardcodedColor(value) {
+	// Strip url(...) first — paths/fragments may contain hex-like or color-named substrings
+	let scanned = value.includes('url(') ? stripBalancedFn(value, 'url') : value;
+
+	// Strip var(...) — color tokens inside var fallbacks are allowed
+	if (scanned.includes('var(')) {
+		scanned = stripBalancedFn(scanned, 'var');
+		if (!scanned.trim()) {
+			return null;
+		}
+	}
+
+	const lower = scanned.toLowerCase();
+	if (ALLOWED_VALUES.has(lower)) {
+		return null;
+	}
+
+	if (HEX_PATTERN.test(scanned)) {
+		return scanned.match(HEX_PATTERN)[0];
+	}
+	if (RGB_PATTERN.test(scanned)) {
+		return scanned.match(RGB_PATTERN)[0];
+	}
+	if (HSL_PATTERN.test(scanned)) {
+		return scanned.match(HSL_PATTERN)[0];
+	}
+	if (NAMED_COLOR_PATTERN.test(scanned)) {
+		return scanned.match(NAMED_COLOR_PATTERN)[0];
+	}
+
+	return null;
+}
+
+const rule = (primaryOption) => {
+	return (root, result) => {
+		if (!primaryOption) {
+			return;
+		}
+
+		root.walkDecls((decl) => {
+			const prop = decl.prop.toLowerCase();
+
+			if (!COLOR_PROPERTIES.has(prop)) {
+				return;
+			}
+
+			const hardcodedColor = containsHardcodedColor(decl.value);
+
+			if (hardcodedColor) {
+				stylelint.utils.report({
+					message: messages.hardcodedColor(hardcodedColor, decl.prop),
+					node: decl,
+					result,
+					ruleName,
+				});
+			}
+		});
+	};
+};
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = {};
+
+export { ruleName, rule };
+export default { ruleName, rule };

go.mod

@@ -18,6 +18,7 @@ require (
 	github.com/dgraph-io/ristretto/v2 v2.3.0
 	github.com/dustin/go-humanize v1.0.1
 	github.com/emersion/go-smtp v0.24.0
+	github.com/evanphx/json-patch/v5 v5.9.11
 	github.com/gin-gonic/gin v1.11.0
 	github.com/go-co-op/gocron v1.30.1
 	github.com/go-openapi/runtime v0.29.2

go.sum

@@ -311,6 +311,8 @@ github.com/envoyproxy/go-control-plane/envoy v1.37.0/go.mod h1:DReE9MMrmecPy+YvQ
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/envoyproxy/protoc-gen-validate v1.3.3 h1:MVQghNeW+LZcmXe7SY1V36Z+WFMDjpqGAGacLe2T0ds=
 github.com/envoyproxy/protoc-gen-validate v1.3.3/go.mod h1:TsndJ/ngyIdQRhMcVVGDDHINPLWB7C82oDArY51KfB0=
+github.com/evanphx/json-patch/v5 v5.9.11 h1:/8HVnzMq13/3x9TPvjG08wUGqBTmZBsCWzjTM0wiaDU=
+github.com/evanphx/json-patch/v5 v5.9.11/go.mod h1:3j+LviiESTElxA4p3EMKAB9HXj3/XEtnUf6OZxqIQTM=
 github.com/facette/natsort v0.0.0-20181210072756-2cd4dd1e2dcb h1:IT4JYU7k4ikYg1SCxNI1/Tieq/NFvh6dzLdgi7eu0tM=
 github.com/facette/natsort v0.0.0-20181210072756-2cd4dd1e2dcb/go.mod h1:bH6Xx7IW64qjjJq8M2u4dxNaBiDfKK+z/3eGDpXEQhc=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=

pkg/apiserver/signozapiserver/dashboard.go

@@ -24,9 +24,10 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		Response:            new(dashboardtypes.GettableDashboardV2),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusCreated,
-		ErrorStatusCodes:    []int{},
-		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+		// TODO: add http.StatusConflict once the dashboard name unique index is added.
+		ErrorStatusCodes: []int{http.StatusBadRequest},
+		Deprecated:       false,
+		SecuritySchemes:  newSecuritySchemes(types.RoleEditor),
 	})).Methods(http.MethodPost).GetError(); err != nil {
 		return err
 	}
@@ -41,13 +42,87 @@ func (provider *provider) addDashboardRoutes(router *mux.Router) error {
 		Response:            new(dashboardtypes.GettableDashboardV2),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusOK,
-		ErrorStatusCodes:    []int{},
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
 		Deprecated:          false,
 		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}
 
+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UpdateV2), handler.OpenAPIDef{
+		ID:                  "UpdateDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Update dashboard (v2)",
+		Description:         "This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.",
+		Request:             new(dashboardtypes.UpdatableDashboardV2),
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.PatchV2), handler.OpenAPIDef{
+		ID:          "PatchDashboardV2",
+		Tags:        []string{"dashboard"},
+		Summary:     "Patch dashboard (v2)",
+		Description: "This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Apply is lenient: `remove` on a missing path is a no-op (idempotent) and `add` creates any missing parent objects, rather than failing as strict RFC 6902 would. The resulting dashboard is still validated. Locked dashboards are rejected.",
+		Request:     new(dashboardtypes.PatchableDashboardV2),
+		// Strictly per RFC 6902 the content type is `application/json-patch+json`,
+		// but our OpenAPI generator only reflects schemas for content types it
+		// understands (application/json, form-urlencoded, multipart) — anything
+		// else degrades to `type: string`. Declaring application/json here keeps
+		// the array-of-ops schema visible to spec consumers; the runtime decoder
+		// parses JSON regardless of the request's actual Content-Type header.
+		RequestContentType:  "application/json",
+		Response:            new(dashboardtypes.GettableDashboardV2),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPatch).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.LockV2), handler.OpenAPIDef{
+		ID:                  "LockDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Lock dashboard (v2)",
+		Description:         "This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/dashboards/{id}/lock", handler.New(provider.authzMiddleware.EditAccess(provider.dashboardHandler.UnlockV2), handler.OpenAPIDef{
+		ID:                  "UnlockDashboardV2",
+		Tags:                []string{"dashboard"},
+		Summary:             "Unlock dashboard (v2)",
+		Description:         "This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleEditor),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v1/dashboards/{id}/public", handler.New(provider.authzMiddleware.AdminAccess(provider.dashboardHandler.CreatePublic), handler.OpenAPIDef{
 		ID:                  "CreatePublicDashboard",
 		Tags:                []string{"dashboard"},

pkg/modules/dashboard/dashboard.go

@@ -60,6 +60,12 @@ type Module interface {
 	CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error)
 
 	GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error)
+
+	UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error)
+
+	LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error
+
+	PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error)
 }
 
 type Handler interface {
@@ -89,4 +95,12 @@ type Handler interface {
 	CreateV2(http.ResponseWriter, *http.Request)
 
 	GetV2(http.ResponseWriter, *http.Request)
+
+	UpdateV2(http.ResponseWriter, *http.Request)
+
+	LockV2(http.ResponseWriter, *http.Request)
+
+	UnlockV2(http.ResponseWriter, *http.Request)
+
+	PatchV2(http.ResponseWriter, *http.Request)
 }

pkg/modules/dashboard/impldashboard/store.go

@@ -153,7 +153,7 @@ func (store *store) ListPublic(ctx context.Context, orgID valuer.UUID) ([]*dashb
 func (store *store) Update(ctx context.Context, orgID valuer.UUID, storableDashboard *dashboardtypes.StorableDashboard) error {
 	_, err := store.
 		sqlstore.
-		BunDB().
+		BunDBCtx(ctx).
 		NewUpdate().
 		Model(storableDashboard).
 		WherePK().

pkg/modules/dashboard/impldashboard/v2_handler.go

@@ -9,6 +9,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/http/binding"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
@@ -72,3 +73,135 @@ func (handler *handler) GetV2(rw http.ResponseWriter, r *http.Request) {
 
 	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
 }
+
+func (handler *handler) LockV2(rw http.ResponseWriter, r *http.Request) {
+	handler.lockUnlockV2(rw, r, true)
+}
+
+func (handler *handler) UnlockV2(rw http.ResponseWriter, r *http.Request) {
+	handler.lockUnlockV2(rw, r, false)
+}
+
+func (handler *handler) lockUnlockV2(rw http.ResponseWriter, r *http.Request, lock bool) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	isAdmin := false
+	selectors := []coretypes.Selector{
+		coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName),
+	}
+	err = handler.authz.CheckWithTupleCreation(
+		ctx,
+		claims,
+		orgID,
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		coretypes.NewResourceRole(),
+		selectors,
+		selectors,
+	)
+	if err == nil {
+		isAdmin = true
+	}
+
+	if err := handler.module.LockUnlockV2(ctx, orgID, dashboardID, claims.Email, isAdmin, lock); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+func (handler *handler) UpdateV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.UpdatableDashboardV2{}
+	if err := binding.JSON.BindBody(r.Body, &req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.UpdateV2(ctx, orgID, dashboardID, claims.Email, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
+}
+
+func (handler *handler) PatchV2(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id := mux.Vars(r)["id"]
+	if id == "" {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "id is missing in the path"))
+		return
+	}
+	dashboardID, err := valuer.NewUUID(id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := dashboardtypes.PatchableDashboardV2{}
+	if err := binding.JSON.BindBody(r.Body, &req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	dashboard, err := handler.module.PatchV2(ctx, orgID, dashboardID, claims.Email, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, dashboard.ToGettableDashboardV2())
+}

pkg/modules/dashboard/impldashboard/v2_module.go

@@ -55,3 +55,97 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 
 	return storable.ToDashboardV2(tags)
 }
+
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	if err := updatable.Validate(); err != nil {
+		return nil, err
+	}
+
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
+	if err := existing.CanUpdate(); err != nil {
+		return nil, err
+	}
+
+	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
+		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updatable.Tags)
+		if err != nil {
+			return err
+		}
+
+		err = existing.Update(updatable, updatedBy, resolvedTags)
+		if err != nil {
+			return err
+		}
+
+		storable, err := existing.ToStorableDashboard()
+		if err != nil {
+			return err
+		}
+
+		return module.store.Update(ctx, orgID, storable)
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return existing, nil
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+	// Locked-dashboard / state gate — independent of tags, so run it before the tx.
+	if err := existing.CanUpdate(); err != nil {
+		return nil, err
+	}
+
+	updateable, err := patch.Apply(existing)
+	if err != nil {
+		return nil, err
+	}
+
+	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
+		resolvedTags, err := module.tagModule.SyncTags(ctx, orgID, coretypes.KindDashboard, id, updateable.Tags)
+		if err != nil {
+			return err
+		}
+
+		err = existing.Update(*updateable, updatedBy, resolvedTags)
+		if err != nil {
+			return err
+		}
+
+		storable, err := existing.ToStorableDashboard()
+		if err != nil {
+			return err
+		}
+
+		return module.store.Update(ctx, orgID, storable)
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return existing, nil
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	existing, err := module.GetV2(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+	if err := existing.LockUnlock(lock, isAdmin, updatedBy); err != nil {
+		return err
+	}
+	storable, err := existing.ToStorableDashboard()
+	if err != nil {
+		return err
+	}
+	return module.store.Update(ctx, orgID, storable)
+}

pkg/types/dashboardtypes/dashboard.go

@@ -21,6 +21,7 @@ var (
 	ErrCodeDashboardInvalidWidgetQuery = errors.MustNewCode("dashboard_invalid_widget_query")
 	ErrCodeDashboardInvalidSource      = errors.MustNewCode("dashboard_invalid_source")
 	ErrCodeDashboardImmutable          = errors.MustNewCode("dashboard_immutable")
+	ErrCodeDashboardInvalidPatch       = errors.MustNewCode("dashboard_invalid_patch")
 )
 
 type StorableDashboard struct {

pkg/types/dashboardtypes/perses_dashboard.go

@@ -62,6 +62,54 @@ type DashboardV2 struct {
 	Spec DashboardSpec   `json:"spec" required:"true"`
 }
 
+func (d *DashboardV2) CanUpdate() error {
+	if d.Source == SourceIntegration {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be modified")
+	}
+	if d.Locked {
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "cannot update a locked dashboard, please unlock the dashboard to update")
+	}
+	return nil
+}
+
+func (d *DashboardV2) Update(updatable UpdatableDashboardV2, updatedBy string, resolvedTags []*tagtypes.Tag) error {
+	if err := d.CanUpdate(); err != nil {
+		return err
+	}
+	if updatable.Name != d.Name {
+		return errors.NewInvalidInputf(ErrCodeDashboardImmutable, "name is immutable; cannot change from %q to %q", d.Name, updatable.Name)
+	}
+	d.DashboardV2MetadataBase = updatable.DashboardV2MetadataBase
+	d.Tags = resolvedTags
+	d.Spec = updatable.Spec
+	d.UpdatedBy = updatedBy
+	d.UpdatedAt = time.Now()
+	return nil
+}
+
+func (d *DashboardV2) CanLockUnlock(isAdmin bool, updatedBy string) error {
+	if d.Source == SourceIntegration {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "integration dashboards cannot be locked or unlocked")
+	}
+	if d.Source == SourceSystem {
+		return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardImmutable, "system dashboards cannot be locked or unlocked")
+	}
+	if d.CreatedBy != updatedBy && !isAdmin {
+		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "you are not authorized to lock/unlock this dashboard")
+	}
+	return nil
+}
+
+func (d *DashboardV2) LockUnlock(lock bool, isAdmin bool, updatedBy string) error {
+	if err := d.CanLockUnlock(isAdmin, updatedBy); err != nil {
+		return err
+	}
+	d.Locked = lock
+	d.UpdatedBy = updatedBy
+	d.UpdatedAt = time.Now()
+	return nil
+}
+
 type DashboardV2MetadataBase struct {
 	SchemaVersion string `json:"schemaVersion" required:"true"`
 	Image         string `json:"image,omitempty"`
@@ -126,7 +174,7 @@ func (p *PostableDashboardV2) Validate() error {
 	if err := p.validateName(); err != nil {
 		return err
 	}
-	if err := p.validateTags(); err != nil {
+	if err := validateDashboardTags(p.Tags); err != nil {
 		return err
 	}
 	return p.Spec.Validate()
@@ -193,11 +241,11 @@ func generateDashboardName(displayName string) string {
 	return prefix + "-" + string(suffix)
 }
 
-func (p *PostableDashboardV2) validateTags() error {
-	if len(p.Tags) > MaxTagsPerDashboard {
+func validateDashboardTags(tags []tagtypes.PostableTag) error {
+	if len(tags) > MaxTagsPerDashboard {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "a dashboard can have at most %d tags", MaxTagsPerDashboard)
 	}
-	for _, tag := range p.Tags {
+	for _, tag := range tags {
 		if _, reserved := reservedDSLKeys[DSLKey(strings.ToLower(strings.TrimSpace(tag.Key)))]; reserved {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "tag key %q is reserved", tag.Key)
 		}
@@ -263,6 +311,57 @@ func (s StorableDashboardV2Data) toStorableDashboardData() (StorableDashboardDat
 
 type StorableDashboardV2Metadata = DashboardV2MetadataBase
 
+// ════════════════════════════════════════════════════════════════════════
+// Updatable
+// ════════════════════════════════════════════════════════════════════════
+
+type UpdatableDashboardV2 struct {
+	DashboardV2MetadataBase
+	Name string                 `json:"name" required:"true"`
+	Tags []tagtypes.PostableTag `json:"tags" required:"true"`
+	Spec DashboardSpec          `json:"spec" required:"true"`
+}
+
+func (u *UpdatableDashboardV2) UnmarshalJSON(data []byte) error {
+	dec := json.NewDecoder(bytes.NewReader(data))
+	dec.DisallowUnknownFields()
+	type alias UpdatableDashboardV2
+	var tmp alias
+	if err := dec.Decode(&tmp); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
+	}
+	*u = UpdatableDashboardV2(tmp)
+	if u.Spec.Display == nil {
+		u.Spec.Display = &common.Display{}
+	}
+	if u.Spec.Display.Name == "" {
+		u.Spec.Display.Name = u.Name
+	}
+	return u.Validate()
+}
+
+func (u *UpdatableDashboardV2) Validate() error {
+	if u.SchemaVersion != SchemaVersion {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "schemaVersion must be %q, got %q", SchemaVersion, u.SchemaVersion)
+	}
+	if err := validateDashboardName(u.Name); err != nil {
+		return err
+	}
+	if err := validateDashboardTags(u.Tags); err != nil {
+		return err
+	}
+	return u.Spec.Validate()
+}
+
+func (d DashboardV2) toUpdatableDashboardV2() UpdatableDashboardV2 {
+	return UpdatableDashboardV2{
+		DashboardV2MetadataBase: d.DashboardV2MetadataBase,
+		Name:                    d.Name,
+		Tags:                    tagtypes.NewPostableTagsFromTags(d.Tags),
+		Spec:                    d.Spec,
+	}
+}
+
 // ════════════════════════════════════════════════════════════════════════
 // Convertors
 // ════════════════════════════════════════════════════════════════════════

pkg/types/dashboardtypes/perses_dashboard_patch.go

@@ -0,0 +1,83 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	jsonpatch "github.com/evanphx/json-patch/v5"
+	"github.com/swaggest/jsonschema-go"
+)
+
+// PatchableDashboardV2 is an RFC 6902 patch request.
+type PatchableDashboardV2 struct {
+	// Ops shapes the OpenAPI schema; tagged so swaggest reflects it.
+	Ops []JSONPatchOperation `json:"ops"`
+	// patch holds the decoded payload, set by UnmarshalJSON.
+	patch jsonpatch.Patch
+}
+
+// PrepareJSONSchema collapses the struct's object schema into the bare ops array.
+func (PatchableDashboardV2) PrepareJSONSchema(s *jsonschema.Schema) error {
+	// Called on several passes; only the one with built properties carries `ops`.
+	ops, ok := s.Properties["ops"]
+	if !ok || ops.TypeObject == nil {
+		return nil
+	}
+	*s = *ops.TypeObject
+	return nil
+}
+
+type JSONPatchOperation struct {
+	Op   PatchOp `json:"op" required:"true"`
+	Path string  `json:"path" required:"true" description:"JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /spec/display/name, /spec/panels/<id>, /spec/panels/<id>/spec/queries/0, /tags/-."`
+	// `value` is required for add/replace/test.
+	Value any `json:"value,omitempty" description:"Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /spec/panels/<id> takes a DashboardtypesPanel; /spec/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /spec/variables/N takes a DashboardtypesVariable; /spec/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /spec/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy."`
+	// `from` is required for move/copy.
+	From string `json:"from,omitempty" description:"Source JSON Pointer for move/copy ops; ignored for other ops."`
+}
+
+// PatchOp covers the six RFC 6902 JSON Patch verbs.
+type PatchOp struct{ valuer.String }
+
+var (
+	PatchOpAdd     = PatchOp{valuer.NewString("add")}
+	PatchOpRemove  = PatchOp{valuer.NewString("remove")}
+	PatchOpReplace = PatchOp{valuer.NewString("replace")}
+	PatchOpMove    = PatchOp{valuer.NewString("move")}
+	PatchOpCopy    = PatchOp{valuer.NewString("copy")}
+	PatchOpTest    = PatchOp{valuer.NewString("test")}
+)
+
+func (PatchOp) Enum() []any {
+	return []any{PatchOpAdd, PatchOpRemove, PatchOpReplace, PatchOpMove, PatchOpCopy, PatchOpTest}
+}
+
+func (p *PatchableDashboardV2) UnmarshalJSON(data []byte) error {
+	patch, err := jsonpatch.DecodePatch(data)
+	if err != nil {
+		return errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "request body is not a valid RFC 6902 JSON Patch document").WithAdditional(err.Error())
+	}
+	if err := json.Unmarshal(data, &p.Ops); err != nil {
+		return errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "request body is not a valid RFC 6902 JSON Patch document").WithAdditional(err.Error())
+	}
+	p.patch = patch
+	return nil
+}
+
+func (p PatchableDashboardV2) Apply(existing *DashboardV2) (*UpdatableDashboardV2, error) {
+	existingAsUpdatable := existing.toUpdatableDashboardV2()
+	raw, err := json.Marshal(existingAsUpdatable)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal existing dashboard for patch")
+	}
+	patched, err := p.patch.ApplyWithOptions(raw, &jsonpatch.ApplyOptions{AllowMissingPathOnRemove: true, EnsurePathExistsOnAdd: true})
+	if err != nil {
+		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard")
+	}
+	out := &UpdatableDashboardV2{}
+	if err := json.Unmarshal(patched, out); err != nil {
+		return nil, err
+	}
+	return out, nil
+}

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -0,0 +1,569 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"strings"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+// basePostableJSON is the postable shape of a small but realistic v2
+// dashboard used as the base document for patch tests. Each panel carries
+// one builder query in the same shape production dashboards use
+// (aggregations, filter, groupBy populated), and the dashboard has one
+// variable — the variable is not patched in any test here, that's
+// covered in a separate variable-focused suite.
+const basePostableJSON = `{
+	"schemaVersion": "v6",
+	"name": "service-overview",
+	"tags": [{"key": "team", "value": "alpha"}, {"key": "env", "value": "prod"}],
+	"spec": {
+		"display": {"name": "Service overview"},
+		"variables": [
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "service",
+					"allowAllValue": true,
+					"allowMultiple": false,
+					"plugin": {
+						"kind": "signoz/DynamicVariable",
+						"spec": {"name": "service.name", "signal": "metrics"}
+					}
+				}
+			}
+		],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+					"queries": [
+						{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "A",
+								"signal": "metrics",
+								"aggregations": [{
+									"metricName": "signoz_calls_total",
+									"temporality": "cumulative",
+									"timeAggregation": "rate",
+									"spaceAggregation": "sum"
+								}],
+								"filter": {"expression": "service.name IN $service"},
+								"groupBy": [{"name": "service.name", "fieldDataType": "string", "fieldContext": "tag"}]
+							}}}
+						}
+					]
+				}
+			},
+			"p2": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/NumberPanel", "spec": {}},
+					"queries": [
+						{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "X",
+								"signal": "metrics",
+								"aggregations": [{
+									"metricName": "signoz_latency_count",
+									"temporality": "cumulative",
+									"timeAggregation": "rate",
+									"spaceAggregation": "sum"
+								}]
+							}}}
+						}
+					]
+				}
+			}
+		},
+		"layouts": [
+			{
+				"kind": "Grid",
+				"spec": {
+					"display": {"title": "Row 1"},
+					"items": [
+						{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+						{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
+					]
+				}
+			}
+		],
+		"duration": "1h"
+	}
+}`
+
+func TestPatchableDashboardV2_Apply(t *testing.T) {
+	// Apply doesn't mutate the input *DashboardV2 — it marshals it to
+	// JSON, applies the patch, and unmarshals the result into a fresh
+	// struct. Sharing one base across subtests is safe.
+	var p PostableDashboardV2
+	require.NoError(t, json.Unmarshal([]byte(basePostableJSON), &p), "base postable JSON must validate")
+	testOrgID := valuer.GenerateUUID()
+	base := p.NewDashboardV2(testOrgID, "somecreatedthisiguess@signoz.io", SourceUser)
+	base.Tags = []*tagtypes.Tag{
+		{Key: "team", Value: "alpha"},
+		{Key: "env", Value: "prod"},
+	}
+
+	decode := func(t *testing.T, body string) PatchableDashboardV2 {
+		t.Helper()
+		var patch PatchableDashboardV2
+		require.NoError(t, json.Unmarshal([]byte(body), &patch))
+		return patch
+	}
+
+	// jsonOf marshals the patched dashboard back to JSON so subtests can
+	// assert on field values without reaching into the typed plugin specs.
+	jsonOf := func(t *testing.T, out *UpdatableDashboardV2) string {
+		t.Helper()
+		raw, err := json.Marshal(out)
+		require.NoError(t, err)
+		return string(raw)
+	}
+
+	// ─────────────────────────────────────────────────────────────────
+	// Successful patches
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("no-op preserves all fields", func(t *testing.T) {
+		out, err := decode(t, `[]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, base.DashboardV2MetadataBase, out.DashboardV2MetadataBase)
+		assert.Equal(t, tagtypes.NewPostableTagsFromTags(base.Tags), out.Tags)
+		assert.Equal(t, base.Spec.Display.Name, out.Spec.Display.Name)
+		require.Equal(t, len(base.Spec.Panels), len(out.Spec.Panels))
+		for k, panel := range base.Spec.Panels {
+			require.Contains(t, out.Spec.Panels, k)
+			assert.Equal(t, panel.Spec.Plugin.Kind, out.Spec.Panels[k].Spec.Plugin.Kind)
+		}
+		assert.Len(t, out.Tags, len(base.Tags))
+		assert.Len(t, out.Spec.Variables, len(base.Spec.Variables))
+		assert.Len(t, out.Spec.Layouts, len(base.Spec.Layouts))
+	})
+
+	t.Run("add metadata image", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/image", "value": "https://example.com/img.png"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "https://example.com/img.png", out.Image)
+		assert.Equal(t, SchemaVersion, out.SchemaVersion, "schemaVersion preserved")
+	})
+
+	t.Run("replace display name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/display/name", "value": "Renamed"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Renamed", out.Spec.Display.Name)
+	})
+
+	// Per RFC 6902 § 4.1, `add` on an existing object member replaces the
+	// existing value rather than erroring — same effect as `replace`.
+	t.Run("add overwrites existing display name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/spec/display/name", "value": "Overwritten"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Overwritten", out.Spec.Display.Name)
+	})
+
+	t.Run("add data refreshInterval", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/spec/refreshInterval", "value": "30s"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "30s", string(out.Spec.RefreshInterval))
+	})
+
+	t.Run("add panel leaves others untouched", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "add",
+			"path": "/spec/panels/p3",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+					"queries": [{
+						"kind": "TimeSeriesQuery",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A",
+							"signal": "logs",
+							"aggregations": [{"expression": "count()"}]
+						}}}
+					}]
+				}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Spec.Panels, 3)
+		assert.Contains(t, out.Spec.Panels, "p3")
+		// Plugin specs round-trip through MarshalJSON which resolves defaults
+		// (e.g. timePreference → "global_time"), so compare the serialized
+		// shape rather than the in-memory structs to skip that normalization.
+		for _, id := range []string{"p1", "p2"} {
+			wantJSON, err := json.Marshal(base.Spec.Panels[id])
+			require.NoError(t, err)
+			gotJSON, err := json.Marshal(out.Spec.Panels[id])
+			require.NoError(t, err)
+			assert.JSONEq(t, string(wantJSON), string(gotJSON), "panel %s untouched", id)
+		}
+	})
+
+	t.Run("replace single panel", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p2",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/BarChartPanel", "spec": {}},
+					"queries": [{
+						"kind": "TimeSeriesQuery",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A",
+							"signal": "metrics",
+							"aggregations": [{
+								"metricName": "signoz_calls_total",
+								"temporality": "cumulative",
+								"timeAggregation": "rate",
+								"spaceAggregation": "sum"
+							}]
+						}}}
+					}]
+				}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, PanelPluginKind("signoz/BarChartPanel"), out.Spec.Panels["p2"].Spec.Plugin.Kind)
+		assert.Equal(t, PanelPluginKind("signoz/TimeSeriesPanel"), out.Spec.Panels["p1"].Spec.Plugin.Kind, "p1 untouched")
+	})
+
+	// Removing a panel realistically also drops its layout item — exercise
+	// the multi-op shape the UI sends.
+	t.Run("remove panel and its layout item", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "remove", "path": "/spec/panels/p2"},
+			{"op": "remove", "path": "/spec/layouts/0/spec/items/1"}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Spec.Panels, 1)
+		assert.Contains(t, out.Spec.Panels, "p1")
+		assert.NotContains(t, out.Spec.Panels, "p2")
+		raw := jsonOf(t, out)
+		assert.NotContains(t, raw, `"$ref":"#/spec/panels/p2"`)
+		assert.Contains(t, raw, `"$ref":"#/spec/panels/p1"`)
+	})
+
+	// The headline use case: edit a single field of a single query inside
+	// one panel without re-sending any other part of the dashboard.
+	t.Run("rename single query inside panel", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1/spec/queries/0/spec/plugin/spec/name",
+			"value": "renamed"
+		}]`).Apply(base)
+		require.NoError(t, err)
+
+		require.Len(t, out.Spec.Panels["p1"].Spec.Queries, 1)
+		assert.Contains(t, jsonOf(t, out), `"name":"renamed"`)
+	})
+
+	// Replace a query at a specific index — swaps query "A" out for "B"
+	// without re-sending the rest of the panel.
+	t.Run("replace query at index", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1/spec/queries/0",
+			"value": {
+				"kind": "TimeSeriesQuery",
+				"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+					"name": "B",
+					"signal": "metrics",
+					"aggregations": [{
+						"metricName": "signoz_db_calls_total",
+						"temporality": "cumulative",
+						"timeAggregation": "rate",
+						"spaceAggregation": "sum"
+					}]
+				}}}
+			}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Spec.Panels["p1"].Spec.Queries, 1)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"name":"B"`)
+		assert.NotContains(t, raw, `"name":"A"`)
+	})
+
+	// ─────────────────────────────────────────────────────────────────
+	// Layout edits
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
+		require.NoError(t, err)
+		raw := jsonOf(t, out)
+		// The first item used to live at x=0, now lives at x=6.
+		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
+	})
+
+	t.Run("resize panel by editing layout width", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
+		require.NoError(t, err)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"width":12`)
+	})
+
+	t.Run("rename layout row title", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/display/title", "value": "Latency"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Contains(t, jsonOf(t, out), `"title":"Latency"`)
+	})
+
+	t.Run("append layout item", func(t *testing.T) {
+		out, err := decode(t, `[{
+			"op": "add",
+			"path": "/spec/layouts/0/spec/items/-",
+			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
+		}]`).Apply(base)
+		require.NoError(t, err)
+		// Item count went 2 → 3.
+		raw := jsonOf(t, out)
+		assert.Equal(t, 3, strings.Count(raw, `"$ref":"#/spec/panels/`))
+	})
+
+	// Composing add-panel + add-layout-item is the realistic shape of the
+	// "add a new chart to my dashboard" UI flow — exercise it end-to-end.
+	t.Run("add panel and corresponding layout item", func(t *testing.T) {
+		out, err := decode(t, `[
+			{
+				"op": "add",
+				"path": "/spec/panels/p3",
+				"value": {
+					"kind": "Panel",
+					"spec": {
+						"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+						"queries": [{
+							"kind": "TimeSeriesQuery",
+							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+								"name": "A",
+								"signal": "logs",
+								"aggregations": [{"expression": "count()"}]
+							}}}
+						}]
+					}
+				}
+			},
+			{
+				"op": "add",
+				"path": "/spec/layouts/0/spec/items/-",
+				"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}
+			}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Len(t, out.Spec.Panels, 3)
+		raw := jsonOf(t, out)
+		assert.Contains(t, raw, `"$ref":"#/spec/panels/p3"`)
+	})
+
+	t.Run("append tag", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "env", "value": "staging"}}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 3)
+		assert.Equal(t, "env", out.Tags[2].Key)
+		assert.Equal(t, "staging", out.Tags[2].Value)
+	})
+
+	t.Run("append tag when none exist", func(t *testing.T) {
+		noTagsBase := &DashboardV2{
+			DashboardV2MetadataBase: base.DashboardV2MetadataBase,
+			Name:                    base.Name,
+			Tags:                    nil,
+			Spec:                    base.Spec,
+		}
+		out, err := decode(t, `[{"op": "add", "path": "/tags/-", "value": {"key": "team", "value": "new"}}]`).Apply(noTagsBase)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 1)
+		assert.Equal(t, "team", out.Tags[0].Key)
+		assert.Equal(t, "new", out.Tags[0].Value)
+	})
+
+	t.Run("replace tag value", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/tags/0/value", "value": "beta"}]`).Apply(base)
+		require.NoError(t, err)
+		require.Len(t, out.Tags, 2)
+		assert.Equal(t, "team", out.Tags[0].Key)
+		assert.Equal(t, "beta", out.Tags[0].Value)
+		assert.Equal(t, "env", out.Tags[1].Key, "tag at index 1 untouched")
+		assert.Equal(t, "prod", out.Tags[1].Value, "tag at index 1 untouched")
+		for _, tag := range out.Tags {
+			assert.NotEqual(t, "alpha", tag.Value, "old tag value must be gone")
+		}
+	})
+
+	t.Run("multiple ops applied in order", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "replace", "path": "/spec/display/name", "value": "Multi-step"},
+			{"op": "remove",  "path": "/spec/panels/p2"},
+			{"op": "add",     "path": "/tags/-", "value": {"key": "env", "value": "staging"}}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Multi-step", out.Spec.Display.Name)
+		assert.Len(t, out.Spec.Panels, 1)
+		assert.Len(t, out.Tags, 3)
+	})
+
+	// `test` is an RFC 6902 precondition op: aborts the patch if the value
+	// at the path doesn't equal the supplied value. Used for optimistic
+	// concurrency. Here it matches, so the subsequent ops apply.
+	t.Run("test op passes", func(t *testing.T) {
+		out, err := decode(t, `[
+			{"op": "test",    "path": "/spec/display/name", "value": "Service overview"},
+			{"op": "replace", "path": "/spec/display/name", "value": "Confirmed"}
+		]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, "Confirmed", out.Spec.Display.Name)
+	})
+
+	// ─────────────────────────────────────────────────────────────────
+	// Failure cases
+	// ─────────────────────────────────────────────────────────────────
+
+	t.Run("decode rejects non-array body", func(t *testing.T) {
+		var patch PatchableDashboardV2
+		err := json.Unmarshal([]byte(`{"op": "replace"}`), &patch)
+		require.Error(t, err)
+	})
+
+	t.Run("decode rejects malformed JSON", func(t *testing.T) {
+		var patch PatchableDashboardV2
+		// Outer json.Unmarshal rejects non-JSON before PatchableDashboardV2's
+		// UnmarshalJSON runs, so the error is a stdlib SyntaxError rather
+		// than the InvalidInput-classified wrap.
+		err := json.Unmarshal([]byte(`not json`), &patch)
+		require.Error(t, err)
+	})
+
+	// `test` precondition fails — the whole patch is rejected, including
+	// the subsequent replace.
+	t.Run("test op failure rejected", func(t *testing.T) {
+		_, err := decode(t, `[
+			{"op": "test", "path": "/spec/display/name", "value": "Wrong"},
+			{"op": "replace", "path": "/spec/display/name", "value": "Should not apply"}
+		]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	// Lenient apply (AllowMissingPathOnRemove): removing a path that doesn't
+	// exist is a no-op rather than an error, so removes are idempotent.
+	t.Run("remove at missing path is a no-op", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "remove", "path": "/spec/panels/does-not-exist"}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, len(base.Spec.Panels), len(out.Spec.Panels), "existing panels untouched")
+	})
+
+	t.Run("remove schemaVersion rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "remove", "path": "/schemaVersion"}]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("wrong schemaVersion rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "replace", "path": "/schemaVersion", "value": "v5"}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), SchemaVersion)
+	})
+
+	t.Run("empty display name defaults to dashboard name", func(t *testing.T) {
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/display/name", "value": ""}]`).Apply(base)
+		require.NoError(t, err)
+		assert.Equal(t, base.Name, out.Spec.Display.Name, "empty display.name should default from name")
+	})
+
+	t.Run("unknown top-level field rejected", func(t *testing.T) {
+		_, err := decode(t, `[{"op": "add", "path": "/bogus", "value": 42}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "bogus")
+	})
+
+	t.Run("invalid panel kind rejected", func(t *testing.T) {
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1",
+			"value": {
+				"kind": "Panel",
+				"spec": {"plugin": {"kind": "signoz/NotAPanel", "spec": {}}}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "NotAPanel")
+	})
+
+	t.Run("query kind incompatible with panel rejected", func(t *testing.T) {
+		// PromQLQuery is not allowed on ListPanel — verify the cross-check
+		// in Validate still runs after a patch.
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p2",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/ListPanel", "spec": {}},
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+				}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+	})
+
+	t.Run("removing the only query rejected", func(t *testing.T) {
+		// Validate requires exactly one query per panel — leaving zero is rejected.
+		_, err := decode(t, `[{"op": "remove", "path": "/spec/panels/p2/spec/queries/0"}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "panel must have one query")
+	})
+
+	t.Run("two direct queries rejected", func(t *testing.T) {
+		// Validate requires exactly one query per panel. To display multiple
+		// data sources in one panel, wrap them in a CompositeQuery (see the
+		// "replace query with composite" subtest below).
+		_, err := decode(t, `[{
+			"op": "replace",
+			"path": "/spec/panels/p1",
+			"value": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+					"queries": [
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A", "signal": "metrics",
+							"aggregations": [{"metricName": "signoz_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
+						}}}},
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "B", "signal": "metrics",
+							"aggregations": [{"metricName": "signoz_db_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
+						}}}}
+					]
+				}
+			}
+		}]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "panel must have one query")
+	})
+
+	t.Run("too many tags rejected", func(t *testing.T) {
+		// Base already has 2 tags; add 9 more to exceed MaxTagsPerDashboard (10).
+		_, err := decode(t, `[
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "1"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "2"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "3"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "4"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "5"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "6"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "7"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "8"}},
+			{"op": "add", "path": "/tags/-", "value": {"key": "t", "value": "9"}}
+		]`).Apply(base)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "at most")
+	})
+}