feat(traces): migrate list view to the shared TanStack table

feat(traces): add shared TanStack traces table module
feat(tanstack-table): expose header height and first-column header padding vars
2026-08-24 13:40:32 +01:00 · 2026-08-24 12:53:05 +05:30 · 2026-08-24 12:52:49 +05:30 · 2026-08-24 12:52:36 +05:30 · 2026-08-19 20:03:16 +00:00 · 2026-08-19 19:16:14 +00:00
251 changed files with 9472 additions and 4290 deletions
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -8024,13 +8024,6 @@ components:
      - schemaVersion
      - spec
      type: object
-    ServiceaccounttypesDeprecatedPostableServiceAccountRole:
-      properties:
-        id:
-          type: string
-      required:
-      - id
-      type: object
    ServiceaccounttypesGettableFactorAPIKey:
      properties:
        createdAt:
@@ -8805,6 +8798,7 @@ components:
      - metric
      - log
      - span
+      - trace
      - resource
      - attribute
      - body
@@ -9115,6 +9109,158 @@ info:
  version: ""
 openapi: 3.0.3
 paths:
+  /api/v1/ai_observability/fields/keys:
+    get:
+      deprecated: false
+      description: This endpoint returns the field keys the AI observability explorer
+        can filter on, including the computed per-trace aggregates
+      operationId: GetAIObservabilityFieldsKeys
+      parameters:
+      - in: query
+        name: searchText
+        schema:
+          type: string
+      - in: query
+        name: fieldContext
+        schema:
+          $ref: '#/components/schemas/TelemetrytypesFieldContext'
+      - in: query
+        name: fieldDataType
+        schema:
+          $ref: '#/components/schemas/TelemetrytypesFieldDataType'
+      - in: query
+        name: startUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: endUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TelemetrytypesGettableFieldKeys'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get AI observability field keys
+      tags:
+      - ai_observability
+  /api/v1/ai_observability/fields/values:
+    get:
+      deprecated: false
+      description: This endpoint returns the values the AI observability explorer
+        can filter a field key on
+      operationId: GetAIObservabilityFieldsValues
+      parameters:
+      - in: query
+        name: searchText
+        schema:
+          type: string
+      - in: query
+        name: fieldContext
+        schema:
+          $ref: '#/components/schemas/TelemetrytypesFieldContext'
+      - in: query
+        name: fieldDataType
+        schema:
+          $ref: '#/components/schemas/TelemetrytypesFieldDataType'
+      - in: query
+        name: startUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: endUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      - in: query
+        name: name
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TelemetrytypesGettableFieldValues'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get AI observability field values
+      tags:
+      - ai_observability
  /api/v1/alerts:
    get:
      deprecated: false
@@ -13109,117 +13255,6 @@ paths:
      summary: Gets service account roles
      tags:
      - serviceaccount
-    post:
-      deprecated: true
-      description: This endpoint assigns a role to a service account
-      operationId: CreateServiceAccountRoleDeprecated
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesDeprecatedPostableServiceAccountRole'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesIdentifiable'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:attach
-        - role:attach
-      - tokenizer:
-        - serviceaccount:attach
-        - role:attach
-      summary: Create service account role
-      tags:
-      - serviceaccount
-  /api/v1/service_accounts/{id}/roles/{rid}:
-    delete:
-      deprecated: true
-      description: This endpoint revokes a role from service account
-      operationId: DeleteServiceAccountRoleDeprecated
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: rid
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:detach
-        - role:detach
-      - tokenizer:
-        - serviceaccount:detach
-        - role:detach
-      summary: Delete service account role
-      tags:
-      - serviceaccount
  /api/v1/service_accounts/me:
    get:
      deprecated: false
@@ -14223,9 +14258,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - auth-domain:list
      - tokenizer:
-        - ADMIN
+        - auth-domain:list
      summary: List all auth domains
      tags:
      - authdomains
@@ -14285,9 +14320,13 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - auth-domain:create
+        - auth-domain:attach
+        - role:attach
      - tokenizer:
-        - ADMIN
+        - auth-domain:create
+        - auth-domain:attach
+        - role:attach
      summary: Create auth domain
      tags:
      - authdomains
@@ -14331,9 +14370,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - auth-domain:delete
      - tokenizer:
-        - ADMIN
+        - auth-domain:delete
      summary: Delete auth domain
      tags:
      - authdomains
@@ -14388,9 +14427,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - auth-domain:read
      - tokenizer:
-        - ADMIN
+        - auth-domain:read
      summary: Get auth domain by ID
      tags:
      - authdomains
@@ -14444,9 +14483,17 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - auth-domain:update
+        - auth-domain:attach
+        - auth-domain:detach
+        - role:attach
+        - role:detach
      - tokenizer:
-        - ADMIN
+        - auth-domain:update
+        - auth-domain:attach
+        - auth-domain:detach
+        - role:attach
+        - role:detach
      summary: Update auth domain
      tags:
      - authdomains
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -56,10 +56,10 @@ const config: Config.InitialOptions = {
 	transformIgnorePatterns: [
 		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
 		// Pattern 1: allow .pnpm virtual store through (handled by pattern 2), plus root-level ESM packages.
-		'node_modules/(?!(\\.pnpm|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
+		'node_modules/(?!(\\.pnpm|react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|micromark-core-commonmark|micromark-extension-gfm|micromark-extension-gfm-autolink-literal|micromark-extension-gfm-footnote|micromark-extension-gfm-strikethrough|micromark-extension-gfm-table|micromark-extension-gfm-tagfilter|micromark-extension-gfm-task-list-item|micromark-factory-destination|micromark-factory-label|micromark-factory-space|micromark-factory-title|micromark-factory-whitespace|micromark-util-character|micromark-util-chunked|micromark-util-classify-character|micromark-util-combine-extensions|micromark-util-decode-numeric-character-reference|micromark-util-decode-string|micromark-util-encode|micromark-util-html-tag-name|micromark-util-normalize-identifier|micromark-util-resolve-all|micromark-util-sanitize-uri|micromark-util-subtokenize|micromark-util-symbol|micromark-util-types|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)/)',
 		// Pattern 2: pnpm virtual store — ignore everything except ESM-only packages.
 		// pnpm encodes scoped packages as @scope+name@version, so match on scope prefix.
-		'node_modules/\\.pnpm/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
+		'node_modules/\\.pnpm/(?!(react-json-tree|react-base16-styling|lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou|@signozhq|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs|uuid|copy-text-to-clipboard|react-markdown|vfile|vfile-message|unist-util-stringify-position|unified|bail|is-plain-obj|trough|remark-parse|mdast-util-from-markdown|mdast-util-to-string|micromark|decode-named-character-reference|remark-rehype|mdast-util-to-hast|unist-util-position|trim-lines|unist-util-visit|unist-util-visit-parents|unist-util-is|unist-util-generated|mdast-util-definitions|property-information|hast-util-whitespace|space-separated-tokens|comma-separated-tokens|rehype-raw|hast-util-raw|hast-util-from-parse5|devlop|hastscript|hast-util-parse-selector|vfile-location|web-namespaces|hast-util-to-parse5|zwitch|html-void-elements)[^/]*/node_modules)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -197,7 +197,7 @@
    "oxfmt": "0.54.0",
    "oxlint": "1.69.0",
    "oxlint-tsgolint": "0.23.0",
-    "postcss": "8.5.14",
+    "postcss": "8.5.26",
    "postcss-scss": "4.0.9",
    "react-resizable": "3.0.4",
    "redux-mock-store": "1.5.4",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -6,12 +6,19 @@ settings:

 overrides:
  '@babel/core@<=7.29.0': '>=7.29.6 <8'
-  '@istanbuljs/load-nyc-config>js-yaml': '>=4.2.0 <5'
+  '@istanbuljs/load-nyc-config>js-yaml': '>=4.3.1 <5'
+  brace-expansion@<1.1.18: '>=1.1.18 <2'
+  brace-expansion@>=2.0.0 <2.1.4: '>=2.1.4 <3'
+  brace-expansion@>=5.0.0 <5.0.9: '>=5.0.9 <6'
  cookie@<0.7.0: '>=0.7.1 <1'
  dompurify@<=3.4.10: '>=3.4.11 <4'
  esbuild@>=0.27.3 <0.28.1: '>=0.28.1 <0.29.0'
+  fast-uri@<3.1.5: '>=3.1.5 <4'
+  immutable@<5.1.8: '>=5.1.8 <6'
  js-cookie@<=3.0.5: '>=3.0.7 <4'
-  js-yaml@>=4.0.0 <=4.1.1: '>=4.2.0 <5'
+  js-yaml@>=4.0.0 <4.3.1: '>=4.3.1 <5'
+  less@<4.5.0: '>=4.5.0 <5'
+  nanoid@<3.3.18: '>=3.3.18 <4'
  prismjs@<1.30.0: '>=1.30.0 <2'
  react-router@>=6.7.0 <6.30.4: '>=6.30.4 <7'
  tmp@<0.2.6: '>=0.2.6 <0.3.0'
@@ -98,7 +105,7 @@ importers:
        version: 3.3.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@vitejs/plugin-react':
        specifier: 5.1.4
-        version: 5.1.4(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))
+        version: 5.1.4(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))
      ansi-to-html:
        specifier: 0.7.2
        version: 0.7.2
@@ -311,10 +318,10 @@ importers:
        version: 14.0.1
      vite:
        specifier: npm:rolldown-vite@7.3.1
-        version: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
+        version: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
      vite-plugin-html:
        specifier: 3.2.2
-        version: 3.2.2(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))
+        version: 3.2.2(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))
      zod:
        specifier: 4.3.6
        version: 4.3.6
@@ -467,11 +474,11 @@ importers:
        specifier: 0.23.0
        version: 0.23.0
      postcss:
-        specifier: 8.5.14
-        version: 8.5.14
+        specifier: 8.5.26
+        version: 8.5.26
      postcss-scss:
        specifier: 4.0.9
-        version: 4.0.9(postcss@8.5.14)
+        version: 4.0.9(postcss@8.5.26)
      react-resizable:
        specifier: 3.0.4
        version: 3.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -501,16 +508,16 @@ importers:
        version: 1.6.0(react@18.2.0)
      vite-plugin-checker:
        specifier: 0.12.0
-        version: 0.12.0(eslint@10.2.1(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(oxlint@1.69.0(oxlint-tsgolint@0.23.0))(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(stylelint@17.7.0(typescript@5.9.3))(typescript@5.9.3)
+        version: 0.12.0(eslint@10.2.1(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(oxlint@1.69.0(oxlint-tsgolint@0.23.0))(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(stylelint@17.7.0(typescript@5.9.3))(typescript@5.9.3)
      vite-plugin-compression:
        specifier: 0.5.1
-        version: 0.5.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))
+        version: 0.5.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))
      vite-plugin-image-optimizer:
        specifier: 2.0.3
-        version: 2.0.3(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(sharp@0.35.0)(svgo@4.0.2)
+        version: 2.0.3(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(sharp@0.35.0)(svgo@4.0.2)
      vite-tsconfig-paths:
        specifier: 6.1.1
-        version: 6.1.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(typescript@5.9.3)
+        version: 6.1.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(typescript@5.9.3)

 packages:

@@ -4159,15 +4166,15 @@ packages:
  boolbase@1.0.0:
    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}

-  brace-expansion@1.1.15:
-    resolution: {integrity: sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==}
+  brace-expansion@1.1.18:
+    resolution: {integrity: sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==}

-  brace-expansion@2.1.1:
-    resolution: {integrity: sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==}
+  brace-expansion@2.1.4:
+    resolution: {integrity: sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==}

-  brace-expansion@5.0.7:
-    resolution: {integrity: sha512-7oFy703dxfY3/NLxC1fh2SUCQ0H9rmAY+5EpDVfXjUTTs+HEwR2nYaqLv+GWcTsumwxPfiz6CzCNkwXwBUwqCA==}
-    engines: {node: 18 || 20 || >=22}
+  brace-expansion@5.0.9:
+    resolution: {integrity: sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==}
+    engines: {node: 20 || >=22}

  braces@3.0.3:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
@@ -4459,8 +4466,9 @@ packages:
    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
    engines: {node: '>= 0.6'}

-  copy-anything@2.0.6:
-    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+  copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}

  copy-text-to-clipboard@3.2.2:
    resolution: {integrity: sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==}
@@ -4707,6 +4715,14 @@ packages:
  debounce@1.2.1:
    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}

+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
  debug@3.2.7:
    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
    peerDependencies:
@@ -5100,8 +5116,8 @@ packages:
  fast-shallow-equal@1.0.0:
    resolution: {integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==}

-  fast-uri@3.1.2:
-    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+  fast-uri@3.1.5:
+    resolution: {integrity: sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==}

  fast_array_intersect@1.1.0:
    resolution: {integrity: sha512-/DCilZlUdz2XyNDF+ASs0PwY+RKG9Y4Silp/gbS72Cvbg4oibc778xcecg+pnNyiNHYgh/TApsiDTjpdniyShw==}
@@ -5556,19 +5572,14 @@ packages:
    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
    engines: {node: '>= 4'}

-  image-size@0.5.5:
-    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
-    engines: {node: '>=0.10.0'}
-    hasBin: true
-
  immediate@3.0.6:
    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}

  immer@11.1.3:
    resolution: {integrity: sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q==}

-  immutable@5.1.5:
-    resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==}
+  immutable@5.1.9:
+    resolution: {integrity: sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==}

  import-fresh@3.3.1:
    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
@@ -5811,8 +5822,9 @@ packages:
    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
    engines: {node: '>= 0.4'}

-  is-what@3.14.1:
-    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}

  is-wsl@3.1.1:
    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
@@ -6089,8 +6101,8 @@ packages:
  js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

-  js-yaml@4.3.0:
-    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
+  js-yaml@4.3.1:
+    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
    hasBin: true

  jsdom@20.0.3:
@@ -6173,9 +6185,9 @@ packages:
  lerc@3.0.0:
    resolution: {integrity: sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==}

-  less@4.4.0:
-    resolution: {integrity: sha512-kdTwsyRuncDfjEs0DlRILWNvxhDG/Zij4YLO4TMJgDLW+8OzpfkdPnRgrsRuY1o+oaxJGWsps5f/RVBgGmmN0w==}
-    engines: {node: '>=14'}
+  less@4.9.0:
+    resolution: {integrity: sha512-umRhrCH7fCi8Uj2RcwKjJdvUORTjeWqkdKx0LbcZvjIwsAVsnIAGcxHaqowPeBFBjQuWOeC/bve0AlpFzF/+SQ==}
+    engines: {node: '>=18'}
    hasBin: true

  leven@3.1.0:
@@ -6364,14 +6376,14 @@ packages:
    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
    engines: {node: '>=12'}

-  make-dir@2.1.0:
-    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
-    engines: {node: '>=6'}
-
  make-dir@3.1.0:
    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
    engines: {node: '>=8'}

+  make-dir@5.1.0:
+    resolution: {integrity: sha512-IfpFq6UM39dUNiphpA6uDezNx/AvWyhwfICWPR3t1VspkgkMZrL+Rk1RbN1bx+aeNYwOrqGJgEgV3yotk+ZUVw==}
+    engines: {node: '>=18'}
+
  make-error@1.3.6:
    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}

@@ -6691,6 +6703,9 @@ packages:
    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
    engines: {node: '>=4'}

+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
  ms@2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}

@@ -6719,8 +6734,8 @@ packages:
  nano-time@1.0.0:
    resolution: {integrity: sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==}

-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true

@@ -6732,6 +6747,11 @@ packages:
  natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}

+  needle@2.9.1:
+    resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
  needle@3.2.0:
    resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
    engines: {node: '>= 4.4.x'}
@@ -7066,10 +7086,6 @@ packages:
    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
    engines: {node: '>=12'}

-  pify@4.0.1:
-    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
-    engines: {node: '>=6'}
-
  pirates@4.0.7:
    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
    engines: {node: '>= 6'}
@@ -7131,8 +7147,8 @@ packages:
  postcss-value-parser@4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}

-  postcss@8.5.14:
-    resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
+  postcss@8.5.26:
+    resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
    engines: {node: ^10 || ^12 || >=14}

  posthog-js@1.298.0:
@@ -7178,6 +7194,9 @@ packages:
    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
    engines: {node: '>=6'}

+  probe-image-size@7.4.0:
+    resolution: {integrity: sha512-cdEprVtZxV+awMde9X+4jILBFYh4CARxVrQaMl4wY4YcPWbul9jntXrIW95NInBDyJwcVUP3U0T6yukN8rMBaQ==}
+
  process-nextick-args@2.0.1:
    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}

@@ -7924,7 +7943,7 @@ packages:
      '@types/node': ^20.19.0 || >=22.12.0
      esbuild: '>=0.28.1 <0.29.0'
      jiti: '>=1.21.0'
-      less: ^4.0.0
+      less: '>=4.5.0 <5'
      sass: ^1.70.0
      sass-embedded: ^1.70.0
      stylus: '>=0.54.8'
@@ -8044,10 +8063,6 @@ packages:
    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
    engines: {node: ^14.0.0 || >=16.0.0}

-  semver@5.7.2:
-    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
-    hasBin: true
-
  semver@6.3.1:
    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
    hasBin: true
@@ -8205,6 +8220,9 @@ packages:
    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
    engines: {node: '>= 0.4'}

+  stream-parser@0.3.1:
+    resolution: {integrity: sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==}
+
  strict-event-emitter@0.2.8:
    resolution: {integrity: sha512-KDf/ujU8Zud3YaLtMCcTI4xkZlZVIYxTLr+XIULexP+77EEVWixeXroLUXQXiVtH4XH2W7jr/3PT1v3zBuvc3A==}

@@ -9069,7 +9087,7 @@ snapshots:
    dependencies:
      '@jsdevtools/ono': 7.1.3
      '@types/json-schema': 7.0.15
-      js-yaml: 4.3.0
+      js-yaml: 4.3.1

  '@babel/code-frame@7.29.0':
    dependencies:
@@ -10569,7 +10587,7 @@ snapshots:
      camelcase: 5.3.1
      find-up: 4.1.0
      get-package-type: 0.1.0
-      js-yaml: 4.3.0
+      js-yaml: 4.3.1
      resolve-from: 5.0.0

  '@istanbuljs/schema@0.1.3': {}
@@ -12428,11 +12446,11 @@ snapshots:

  '@types/postcss-modules-local-by-default@4.0.2':
    dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26

  '@types/postcss-modules-scope@3.0.4':
    dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26

  '@types/prop-types@15.7.5': {}

@@ -12761,7 +12779,7 @@ snapshots:
      d3-time-format: 4.1.0
      internmap: 2.0.3

-  '@vitejs/plugin-react@5.1.4(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))':
+  '@vitejs/plugin-react@5.1.4(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))':
    dependencies:
      '@babel/core': 7.29.7
      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.7)
@@ -12769,7 +12787,7 @@ snapshots:
      '@rolldown/pluginutils': 1.0.0-rc.3
      '@types/babel__core': 7.20.5
      react-refresh: 0.18.0
-      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
+      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
    transitivePeerDependencies:
      - supports-color

@@ -12823,7 +12841,7 @@ snapshots:
  ajv@8.18.0:
    dependencies:
      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.2
+      fast-uri: 3.1.5
      json-schema-traverse: 1.0.0
      require-from-string: 2.0.2

@@ -13134,16 +13152,16 @@ snapshots:

  boolbase@1.0.0: {}

-  brace-expansion@1.1.15:
+  brace-expansion@1.1.18:
    dependencies:
      balanced-match: 1.0.2
      concat-map: 0.0.1

-  brace-expansion@2.1.1:
+  brace-expansion@2.1.4:
    dependencies:
      balanced-match: 1.0.2

-  brace-expansion@5.0.7:
+  brace-expansion@5.0.9:
    dependencies:
      balanced-match: 4.0.4

@@ -13432,9 +13450,9 @@ snapshots:

  cookie@0.7.2: {}

-  copy-anything@2.0.6:
+  copy-anything@3.0.5:
    dependencies:
-      is-what: 3.14.1
+      is-what: 4.1.16

  copy-text-to-clipboard@3.2.2: {}

@@ -13472,7 +13490,7 @@ snapshots:
    dependencies:
      env-paths: 2.2.1
      import-fresh: 3.3.1
-      js-yaml: 4.3.0
+      js-yaml: 4.3.1
      parse-json: 5.2.0
    optionalDependencies:
      typescript: 5.9.3
@@ -13682,6 +13700,11 @@ snapshots:

  debounce@1.2.1: {}

+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+    optional: true
+
  debug@3.2.7:
    dependencies:
      ms: 2.1.3
@@ -14141,7 +14164,7 @@ snapshots:

  fast-shallow-equal@1.0.0: {}

-  fast-uri@3.1.2: {}
+  fast-uri@3.1.5: {}

  fast_array_intersect@1.1.0: {}

@@ -14556,7 +14579,7 @@ snapshots:

  history@5.3.0:
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2

  hoist-non-react-statics@3.3.2:
    dependencies:
@@ -14635,9 +14658,9 @@ snapshots:
    dependencies:
      safer-buffer: 2.1.2

-  icss-utils@5.1.0(postcss@8.5.14):
+  icss-utils@5.1.0(postcss@8.5.26):
    dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26

  ieee754@1.2.1: {}

@@ -14645,14 +14668,11 @@ snapshots:

  ignore@7.0.5: {}

-  image-size@0.5.5:
-    optional: true
-
  immediate@3.0.6: {}

  immer@11.1.3: {}

-  immutable@5.1.5: {}
+  immutable@5.1.9: {}

  import-fresh@3.3.1:
    dependencies:
@@ -14871,7 +14891,7 @@ snapshots:
      call-bound: 1.0.4
      get-intrinsic: 1.3.0

-  is-what@3.14.1: {}
+  is-what@4.1.16: {}

  is-wsl@3.1.1:
    dependencies:
@@ -15429,7 +15449,7 @@ snapshots:

  js-tokens@4.0.0: {}

-  js-yaml@4.3.0:
+  js-yaml@4.3.1:
    dependencies:
      argparse: 2.0.1

@@ -15478,7 +15498,7 @@ snapshots:
      '@types/json-schema': 7.0.15
      '@types/lodash': 4.17.24
      is-glob: 4.0.3
-      js-yaml: 4.3.0
+      js-yaml: 4.3.1
      lodash: 4.18.1
      minimist: 1.2.8
      prettier: 3.8.3
@@ -15533,18 +15553,17 @@ snapshots:

  lerc@3.0.0: {}

-  less@4.4.0:
+  less@4.9.0:
    dependencies:
-      copy-anything: 2.0.6
+      copy-anything: 3.0.5
      parse-node-version: 1.0.1
-      tslib: 2.8.1
    optionalDependencies:
      errno: 0.1.8
      graceful-fs: 4.2.11
-      image-size: 0.5.5
-      make-dir: 2.1.0
+      make-dir: 5.1.0
      mime: 1.6.0
      needle: 3.2.0
+      probe-image-size: 7.4.0
      source-map: 0.6.1
    transitivePeerDependencies:
      - supports-color
@@ -15710,16 +15729,13 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5

-  make-dir@2.1.0:
-    dependencies:
-      pify: 4.0.1
-      semver: 5.7.2
-    optional: true
-
  make-dir@3.1.0:
    dependencies:
      semver: 6.3.1

+  make-dir@5.1.0:
+    optional: true
+
  make-error@1.3.6: {}

  makeerror@1.0.12:
@@ -16123,19 +16139,19 @@ snapshots:

  minimatch@10.2.5:
    dependencies:
-      brace-expansion: 5.0.7
+      brace-expansion: 5.0.9

  minimatch@3.1.5:
    dependencies:
-      brace-expansion: 1.1.15
+      brace-expansion: 1.1.18

  minimatch@5.1.9:
    dependencies:
-      brace-expansion: 2.1.1
+      brace-expansion: 2.1.4

  minimatch@9.0.9:
    dependencies:
-      brace-expansion: 2.1.1
+      brace-expansion: 2.1.4

  minimist@1.2.8: {}

@@ -16184,6 +16200,9 @@ snapshots:

  mri@1.2.0: {}

+  ms@2.0.0:
+    optional: true
+
  ms@2.1.2: {}

  ms@2.1.3: {}
@@ -16234,12 +16253,21 @@ snapshots:
    dependencies:
      big-integer: 1.6.51

-  nanoid@3.3.11: {}
+  nanoid@3.3.18: {}

  napi-postinstall@0.3.4: {}

  natural-compare@1.4.0: {}

+  needle@2.9.1:
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.4.24
+      sax: 1.6.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
  needle@3.2.0:
    dependencies:
      debug: 3.2.7
@@ -16412,7 +16440,7 @@ snapshots:
      find-up: 8.0.0
      fs-extra: 11.3.3
      jiti: 2.6.1
-      js-yaml: 4.3.0
+      js-yaml: 4.3.1
      remeda: 2.34.0
      string-argv: 0.3.2
      tsconfck: 3.1.6(typescript@5.9.3)
@@ -16611,9 +16639,6 @@ snapshots:

  picomatch@4.0.4: {}

-  pify@4.0.1:
-    optional: true
-
  pirates@4.0.7: {}

  pkg-dir@4.2.0:
@@ -16622,37 +16647,37 @@ snapshots:

  possible-typed-array-names@1.1.0: {}

-  postcss-load-config@3.1.4(postcss@8.5.14)(ts-node@10.9.1(@types/node@16.18.25)(typescript@5.9.3)):
+  postcss-load-config@3.1.4(postcss@8.5.26)(ts-node@10.9.1(@types/node@16.18.25)(typescript@5.9.3)):
    dependencies:
      lilconfig: 2.1.0
      yaml: 1.10.3
    optionalDependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26
      ts-node: 10.9.1(@types/node@16.18.25)(typescript@5.9.3)

-  postcss-modules-extract-imports@3.0.0(postcss@8.5.14):
+  postcss-modules-extract-imports@3.0.0(postcss@8.5.26):
    dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26

-  postcss-modules-local-by-default@4.2.0(postcss@8.5.14):
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.26):
    dependencies:
-      icss-utils: 5.1.0(postcss@8.5.14)
-      postcss: 8.5.14
+      icss-utils: 5.1.0(postcss@8.5.26)
+      postcss: 8.5.26
      postcss-selector-parser: 7.1.1
      postcss-value-parser: 4.2.0

-  postcss-modules-scope@3.2.1(postcss@8.5.14):
+  postcss-modules-scope@3.2.1(postcss@8.5.26):
    dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26
      postcss-selector-parser: 7.1.1

-  postcss-safe-parser@7.0.1(postcss@8.5.14):
+  postcss-safe-parser@7.0.1(postcss@8.5.26):
    dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26

-  postcss-scss@4.0.9(postcss@8.5.14):
+  postcss-scss@4.0.9(postcss@8.5.26):
    dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.26

  postcss-selector-parser@7.1.1:
    dependencies:
@@ -16661,9 +16686,9 @@ snapshots:

  postcss-value-parser@4.2.0: {}

-  postcss@8.5.14:
+  postcss@8.5.26:
    dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.18
      picocolors: 1.1.1
      source-map-js: 1.2.1

@@ -16714,6 +16739,15 @@ snapshots:

  prismjs@1.30.0: {}

+  probe-image-size@7.4.0:
+    dependencies:
+      lodash.merge: 4.6.2
+      needle: 2.9.1
+      stream-parser: 0.3.1
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
  process-nextick-args@2.0.1: {}

  progress@2.0.3: {}
@@ -17616,13 +17650,13 @@ snapshots:

  robust-predicates@3.0.2: {}

-  rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4):
+  rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4):
    dependencies:
      '@oxc-project/runtime': 0.101.0
      fdir: 6.5.0(picomatch@4.0.4)
      lightningcss: 1.31.1
      picomatch: 4.0.4
-      postcss: 8.5.14
+      postcss: 8.5.26
      rolldown: 1.0.0-beta.53
      tinyglobby: 0.2.15
    optionalDependencies:
@@ -17630,7 +17664,7 @@ snapshots:
      esbuild: 0.28.1
      fsevents: 2.3.3
      jiti: 2.6.1
-      less: 4.4.0
+      less: 4.9.0
      sass: 1.97.3
      stylus: 0.62.0
      terser: 5.46.2
@@ -17705,7 +17739,7 @@ snapshots:
  sass@1.97.3:
    dependencies:
      chokidar: 4.0.3
-      immutable: 5.1.5
+      immutable: 5.1.9
      source-map-js: 1.2.1
    optionalDependencies:
      '@parcel/watcher': 2.5.1
@@ -17735,9 +17769,6 @@ snapshots:
      refa: 0.12.1
      regexp-ast-analysis: 0.7.1

-  semver@5.7.2:
-    optional: true
-
  semver@6.3.1: {}

  semver@7.8.5: {}
@@ -17924,6 +17955,13 @@ snapshots:
      es-errors: 1.3.0
      internal-slot: 1.1.0

+  stream-parser@0.3.1:
+    dependencies:
+      debug: 2.6.9
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
  strict-event-emitter@0.2.8:
    dependencies:
      events: 3.3.0
@@ -18045,8 +18083,8 @@ snapshots:
      micromatch: 4.0.8
      normalize-path: 3.0.0
      picocolors: 1.1.1
-      postcss: 8.5.14
-      postcss-safe-parser: 7.0.1(postcss@8.5.14)
+      postcss: 8.5.26
+      postcss-safe-parser: 7.0.1(postcss@8.5.26)
      postcss-selector-parser: 7.1.1
      postcss-value-parser: 4.2.0
      string-width: 8.2.0
@@ -18287,14 +18325,14 @@ snapshots:
      '@types/postcss-modules-local-by-default': 4.0.2
      '@types/postcss-modules-scope': 3.0.4
      dotenv: 16.6.1
-      icss-utils: 5.1.0(postcss@8.5.14)
-      less: 4.4.0
+      icss-utils: 5.1.0(postcss@8.5.26)
+      less: 4.9.0
      lodash.camelcase: 4.3.0
-      postcss: 8.5.14
-      postcss-load-config: 3.1.4(postcss@8.5.14)(ts-node@10.9.1(@types/node@16.18.25)(typescript@5.9.3))
-      postcss-modules-extract-imports: 3.0.0(postcss@8.5.14)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.14)
-      postcss-modules-scope: 3.2.1(postcss@8.5.14)
+      postcss: 8.5.26
+      postcss-load-config: 3.1.4(postcss@8.5.26)(ts-node@10.9.1(@types/node@16.18.25)(typescript@5.9.3))
+      postcss-modules-extract-imports: 3.0.0(postcss@8.5.26)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.26)
+      postcss-modules-scope: 3.2.1(postcss@8.5.26)
      reserved-words: 0.1.2
      sass: 1.97.3
      source-map-js: 1.2.1
@@ -18519,7 +18557,7 @@ snapshots:
      unist-util-stringify-position: 4.0.0
      vfile-message: 4.0.2

-  vite-plugin-checker@0.12.0(eslint@10.2.1(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(oxlint@1.69.0(oxlint-tsgolint@0.23.0))(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(stylelint@17.7.0(typescript@5.9.3))(typescript@5.9.3):
+  vite-plugin-checker@0.12.0(eslint@10.2.1(jiti@2.6.1))(meow@13.2.0)(optionator@0.9.4)(oxlint@1.69.0(oxlint-tsgolint@0.23.0))(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(stylelint@17.7.0(typescript@5.9.3))(typescript@5.9.3):
    dependencies:
      '@babel/code-frame': 7.29.0
      chokidar: 4.0.3
@@ -18528,7 +18566,7 @@ snapshots:
      picomatch: 4.0.4
      tiny-invariant: 1.3.3
      tinyglobby: 0.2.15
-      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
+      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
      vscode-uri: 3.1.0
    optionalDependencies:
      eslint: 10.2.1(jiti@2.6.1)
@@ -18538,16 +18576,16 @@ snapshots:
      stylelint: 17.7.0(typescript@5.9.3)
      typescript: 5.9.3

-  vite-plugin-compression@0.5.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)):
+  vite-plugin-compression@0.5.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)):
    dependencies:
      chalk: 4.1.2
      debug: 4.3.4
      fs-extra: 10.1.0
-      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
+      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
    transitivePeerDependencies:
      - supports-color

-  vite-plugin-html@3.2.2(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)):
+  vite-plugin-html@3.2.2(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)):
    dependencies:
      '@rollup/pluginutils': 4.2.1
      colorette: 2.0.20
@@ -18561,23 +18599,23 @@ snapshots:
      html-minifier-terser: 6.1.0
      node-html-parser: 5.4.2
      pathe: 0.2.0
-      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
+      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)

-  vite-plugin-image-optimizer@2.0.3(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(sharp@0.35.0)(svgo@4.0.2):
+  vite-plugin-image-optimizer@2.0.3(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(sharp@0.35.0)(svgo@4.0.2):
    dependencies:
      ansi-colors: 4.1.3
      pathe: 2.0.3
-      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
+      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
    optionalDependencies:
      sharp: 0.35.0
      svgo: 4.0.2

-  vite-tsconfig-paths@6.1.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(typescript@5.9.3):
+  vite-tsconfig-paths@6.1.1(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4))(typescript@5.9.3):
    dependencies:
      debug: 4.3.4
      globrex: 0.1.2
      tsconfck: 3.1.6(typescript@5.9.3)
-      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.4.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
+      vite: rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.8.4)
    transitivePeerDependencies:
      - supports-color
      - typescript
--- a/frontend/pnpm-workspace.yaml
+++ b/frontend/pnpm-workspace.yaml
@@ -13,7 +13,16 @@ overrides:
 '@babel/core@<=7.29.0': '>=7.29.6 <8'
 # via: jest > babel-plugin-istanbul > @istanbuljs/load-nyc-config@1.1.0 (js-yaml ^3.13.1)
 # remove: blocked — 1.1.0 is latest and still depends on js-yaml 3.x
- '@istanbuljs/load-nyc-config>js-yaml': '>=4.2.0 <5'
+ '@istanbuljs/load-nyc-config>js-yaml': '>=4.3.1 <5'
+ # via: babel-plugin-istanbul > test-exclude@6 > minimatch@3.1.5 (^1.1.7); also glob@7
+ # remove: blocked — babel-plugin-istanbul pins test-exclude@6, which pins minimatch@3
+ brace-expansion@<1.1.18: '>=1.1.18 <2'
+ # via: jest > glob@10 > minimatch@9.0.9 (^2.0.1); also minimatch@5.1.9 (^2.0.1)
+ # remove: blocked — jest 30 resolves glob@10 > minimatch@9 internally
+ 'brace-expansion@>=2.0.0 <2.1.4': '>=2.1.4 <3'
+ # via: eslint-plugin-sonarjs@4.0.2 (minimatch ^10.2.4) > minimatch@10.2.5 (^5.0.5)
+ # remove: blocked — minimatch@10.2.6 (latest) only widens to ^5.0.8, still vulnerable
+ 'brace-expansion@>=5.0.0 <5.0.9': '>=5.0.9 <6'
 # via: msw@1.3.2 (devDep) > cookie ^0.4.2
 # remove: upgrade msw to >=2 (ships cookie ^1). Do NOT open the cap: cookie >=1 is
 # ESM-only and breaks msw under jest's CJS sandbox (kills every test suite)
@@ -27,13 +36,26 @@ overrides:
 # remove: blocked on rolldown-vite (7.3.1 is latest, still ^0.27.0);
 #         orval >=8.20.0 and ts-jest >=29.4.11 already fixed on their side
 esbuild@>=0.27.3 <0.28.1: '>=0.28.1 <0.29.0'
+ # via: @commitlint/cli > @commitlint/config-validator > ajv@8 (fast-uri ^3.0.1)
+ # remove: blocked — ajv@8 caps fast-uri at ^3, and only 3.1.5 carries the fix
+ fast-uri@<3.1.5: '>=3.1.5 <4'
+ # via: direct devDep sass@1.97.3 (immutable ^5.0.2)
+ # remove: blocked — plain sass bumps stay within ^5, so the floor is what pulls 5.1.8
+ immutable@<5.1.8: '>=5.1.8 <6'
 # via: react-use@17.5.1 (direct, js-cookie ^2.2.1); @grafana/data > react-use@17.6.0
 # remove: bump react-use to >=17.6.1 (js-cookie ^3); @grafana/data side blocked
 js-cookie@<=3.0.5: '>=3.0.7 <4'
 # via: @orval/core@8.9.1 (devDep, js-yaml 4.1.1 EXACT pin — not deletable);
 #      json-schema-to-typescript@15 > @apidevtools/json-schema-ref-parser (^4.1.0)
 # remove: upgrade orval to >=8.20.0 (drops js-yaml dependency entirely)
- js-yaml@>=4.0.0 <=4.1.1: '>=4.2.0 <5'
+ 'js-yaml@>=4.0.0 <4.3.1': '>=4.3.1 <5'
+ # via: typescript-plugin-css-modules@5.2.0 (less ^4.2.0) > less@4.4.0 (image-size ~0.5.0)
+ # remove: bump typescript-plugin-css-modules once it floors less itself; image-size has
+ #         no patched release at all, so dropping the dep is the only fix — less@4.5.0 did
+ less@<4.5.0: '>=4.5.0 <5'
+ # via: direct dep postcss (nanoid ^3.3.17)
+ # remove: blocked — postcss 8.5.26 (latest) caps nanoid at ^3, fix landed in 3.3.18
+ nanoid@<3.3.18: '>=3.3.18 <4'
 # via: react-syntax-highlighter@15.5.0 (prismjs ^1.27.0 + refractor@3 ~1.27.0 tilde-pinned)
 # remove: bump react-syntax-highlighter to >=16.1.1 (prismjs ^1.30.0, refractor@5)
 prismjs@<1.30.0: '>=1.30.0 <2'
--- a/frontend/src/api/generated/services/ai-observability/index.ts
+++ b/frontend/src/api/generated/services/ai-observability/index.ts
@@ -0,0 +1,236 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	GetAIObservabilityFieldsKeys200,
+	GetAIObservabilityFieldsKeysParams,
+	GetAIObservabilityFieldsValues200,
+	GetAIObservabilityFieldsValuesParams,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
+/**
+ * This endpoint returns the field keys the AI observability explorer can filter on, including the computed per-trace aggregates
+ * @summary Get AI observability field keys
+ */
+export const getAIObservabilityFieldsKeys = (
+	params?: GetAIObservabilityFieldsKeysParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAIObservabilityFieldsKeys200>({
+		url: `/api/v1/ai_observability/fields/keys`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetAIObservabilityFieldsKeysQueryKey = (
+	params?: GetAIObservabilityFieldsKeysParams,
+) => {
+	return [
+		`/api/v1/ai_observability/fields/keys`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getGetAIObservabilityFieldsKeysQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: GetAIObservabilityFieldsKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetAIObservabilityFieldsKeysQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>
+	> = ({ signal }) => getAIObservabilityFieldsKeys(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAIObservabilityFieldsKeysQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>
+>;
+export type GetAIObservabilityFieldsKeysQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get AI observability field keys
+ */
+
+export function useGetAIObservabilityFieldsKeys<
+	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: GetAIObservabilityFieldsKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAIObservabilityFieldsKeysQueryOptions(
+		params,
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get AI observability field keys
+ */
+export const invalidateGetAIObservabilityFieldsKeys = async (
+	queryClient: QueryClient,
+	params?: GetAIObservabilityFieldsKeysParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAIObservabilityFieldsKeysQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint returns the values the AI observability explorer can filter a field key on
+ * @summary Get AI observability field values
+ */
+export const getAIObservabilityFieldsValues = (
+	params?: GetAIObservabilityFieldsValuesParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAIObservabilityFieldsValues200>({
+		url: `/api/v1/ai_observability/fields/values`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetAIObservabilityFieldsValuesQueryKey = (
+	params?: GetAIObservabilityFieldsValuesParams,
+) => {
+	return [
+		`/api/v1/ai_observability/fields/values`,
+		...(params ? [params] : []),
+	] as const;
+};
+
+export const getGetAIObservabilityFieldsValuesQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: GetAIObservabilityFieldsValuesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetAIObservabilityFieldsValuesQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>
+	> = ({ signal }) => getAIObservabilityFieldsValues(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAIObservabilityFieldsValuesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>
+>;
+export type GetAIObservabilityFieldsValuesQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get AI observability field values
+ */
+
+export function useGetAIObservabilityFieldsValues<
+	TData = Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: GetAIObservabilityFieldsValuesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAIObservabilityFieldsValuesQueryOptions(
+		params,
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get AI observability field values
+ */
+export const invalidateGetAIObservabilityFieldsValues = async (
+	queryClient: QueryClient,
+	params?: GetAIObservabilityFieldsValuesParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAIObservabilityFieldsValuesQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
--- a/frontend/src/api/generated/services/serviceaccount/index.ts
+++ b/frontend/src/api/generated/services/serviceaccount/index.ts
@@ -22,10 +22,7 @@ import type {
 	CreateServiceAccountKey201,
 	CreateServiceAccountKeyPathParameters,
 	CreateServiceAccountRole201,
-	CreateServiceAccountRoleDeprecated201,
-	CreateServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountPathParameters,
-	DeleteServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountRolePathParameters,
 	GetMyServiceAccount200,
 	GetServiceAccount200,
@@ -39,7 +36,6 @@ import type {
 	ListServiceAccounts200,
 	RenderErrorResponseDTO,
 	RevokeServiceAccountKeyPathParameters,
-	ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
 	ServiceaccounttypesPostableFactorAPIKeyDTO,
 	ServiceaccounttypesPostableServiceAccountDTO,
 	ServiceaccounttypesPostableServiceAccountRoleDTO,
@@ -1253,194 +1249,6 @@ export const invalidateGetServiceAccountRoles = async (
 	return queryClient;
 };

-/**
- * This endpoint assigns a role to a service account
- * @deprecated
- * @summary Create service account role
- */
-export const createServiceAccountRoleDeprecated = (
-	{ id }: CreateServiceAccountRoleDeprecatedPathParameters,
-	serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateServiceAccountRoleDeprecated201>({
-		url: `/api/v1/service_accounts/${id}/roles`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
-		signal,
-	});
-};
-
-export const getCreateServiceAccountRoleDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['createServiceAccountRoleDeprecated'];
-	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 createServiceAccountRoleDeprecated>>,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return createServiceAccountRoleDeprecated(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>
->;
-export type CreateServiceAccountRoleDeprecatedMutationBody =
-	| BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>
-	| undefined;
-export type CreateServiceAccountRoleDeprecatedMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Create service account role
- */
-export const useCreateServiceAccountRoleDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-	},
-	TContext
-> => {
-	return useMutation(
-		getCreateServiceAccountRoleDeprecatedMutationOptions(options),
-	);
-};
-/**
- * This endpoint revokes a role from service account
- * @deprecated
- * @summary Delete service account role
- */
-export const deleteServiceAccountRoleDeprecated = (
-	{ id, rid }: DeleteServiceAccountRoleDeprecatedPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/service_accounts/${id}/roles/${rid}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteServiceAccountRoleDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteServiceAccountRoleDeprecated'];
-	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 deleteServiceAccountRoleDeprecated>>,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteServiceAccountRoleDeprecated(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>
->;
-
-export type DeleteServiceAccountRoleDeprecatedMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Delete service account role
- */
-export const useDeleteServiceAccountRoleDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-	TContext
-> => {
-	return useMutation(
-		getDeleteServiceAccountRoleDeprecatedMutationOptions(options),
-	);
-};
 /**
 * This endpoint gets my service account
 * @summary Gets my service account
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -3490,6 +3490,7 @@ export enum TelemetrytypesFieldContextDTO {
 	metric = 'metric',
 	log = 'log',
 	span = 'span',
+	trace = 'trace',
 	resource = 'resource',
 	attribute = 'attribute',
 	body = 'body',
@@ -9091,13 +9092,6 @@ export interface SavedviewtypesUpdatableSavedViewDTO {
 	spec: SavedviewtypesSavedViewSpecDTO;
 }

-export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -10175,6 +10169,93 @@ export interface ZeustypesPostableProfileDTO {
 	where_did_you_discover_signoz: string;
 }

+export type GetAIObservabilityFieldsKeysParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	searchText?: string;
+	/**
+	 * @description undefined
+	 */
+	fieldContext?: TelemetrytypesFieldContextDTO;
+	/**
+	 * @description undefined
+	 */
+	fieldDataType?: TelemetrytypesFieldDataTypeDTO;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	startUnixMilli?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	endUnixMilli?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+};
+
+export type GetAIObservabilityFieldsKeys200 = {
+	data: TelemetrytypesGettableFieldKeysDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetAIObservabilityFieldsValuesParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	searchText?: string;
+	/**
+	 * @description undefined
+	 */
+	fieldContext?: TelemetrytypesFieldContextDTO;
+	/**
+	 * @description undefined
+	 */
+	fieldDataType?: TelemetrytypesFieldDataTypeDTO;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	startUnixMilli?: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 * @description undefined
+	 */
+	endUnixMilli?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	name?: string;
+};
+
+export type GetAIObservabilityFieldsValues200 = {
+	data: TelemetrytypesGettableFieldValuesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetAlerts200 = {
 	/**
 	 * @type array
@@ -10932,21 +11013,6 @@ export type GetServiceAccountRoles200 = {
 	status: string;
 };

-export type CreateServiceAccountRoleDeprecatedPathParameters = {
-	id: string;
-};
-export type CreateServiceAccountRoleDeprecated201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteServiceAccountRoleDeprecatedPathParameters = {
-	id: string;
-	rid: string;
-};
 export type GetMyServiceAccount200 = {
 	data: ServiceaccounttypesServiceAccountWithRolesDTO;
 	/**
--- a/frontend/src/assets/Logos/azure.svg
+++ b/frontend/src/assets/Logos/azure.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#0078D4" d="M22.379 23.343a1.62 1.62 0 0 0 1.536-2.14v.002L17.35 1.76A1.62 1.62 0 0 0 15.816.657H8.184A1.62 1.62 0 0 0 6.65 1.76L.086 21.204a1.62 1.62 0 0 0 1.536 2.139h4.741a1.62 1.62 0 0 0 1.535-1.103l.977-2.892 4.947 3.675c.28.208.618.32.966.32m-3.084-12.531 3.624 10.739a.54.54 0 0 1-.51.713v-.001h-.03a.54.54 0 0 1-.322-.106l-9.287-6.9h4.853m6.313 7.006c.116-.326.13-.694.007-1.058L9.79 1.76a1.722 1.722 0 0 0-.007-.02h6.034a.54.54 0 0 1 .512.366l6.562 19.445a.54.54 0 0 1-.338.684"/>
+</svg>
--- a/frontend/src/assets/Logos/cloudnative-pg.svg
+++ b/frontend/src/assets/Logos/cloudnative-pg.svg
--- a/frontend/src/assets/Logos/dify.svg
+++ b/frontend/src/assets/Logos/dify.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>Dify</title>
+	<path d="M7.043 6.487c1.635 0 2.241-1.003 2.241-2.243S8.681 2 7.044 2C5.405 2 4.801 3.003 4.801 4.244c0 1.24.604 2.243 2.241 2.243z" fill="#03F" />
+	<path d="M14.883 6.97v1.443h-3.679v3.203h3.68v8.012H8.801V8.41h-8v3.203h4.48v8.012H0v3.203h24v-3.203h-5.6v-8.012H24V8.41h-5.6V5.206H24V2.003h-4.161a4.97 4.97 0 00-4.961 4.967h.005z" fill="#03F" />
+</svg>
--- a/frontend/src/assets/Logos/from-log-file.svg
+++ b/frontend/src/assets/Logos/from-log-file.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill-rule:evenodd;clip-rule:evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill:#D1D5DB;fill-rule:evenodd;clip-rule:evenodd"/></svg>
--- a/frontend/src/assets/Logos/github-copilot.svg
+++ b/frontend/src/assets/Logos/github-copilot.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#9CA3AF" d="M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02 5.937 22.02.939 18.492.078 16.997A.641.641 0 0 1 0 16.741v-2.869a.883.883 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.098 10.098 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98c2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.841.841 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256Zm-11.75-5.992h-.344a4.359 4.359 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492-1.725 0-2.989-.359-3.782-1.259a2.137 2.137 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.359 4.359 0 0 1-.355-.508Zm2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm3.313-6.185c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"/>
+</svg>
--- a/frontend/src/assets/Logos/keda.svg
+++ b/frontend/src/assets/Logos/keda.svg
--- a/frontend/src/assets/Logos/kong.svg
+++ b/frontend/src/assets/Logos/kong.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 44.8 40" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<linearGradient id="kong-a" x1="38.204" x2="8.732" y1="18.417" y2="48.543" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-b" x1="38.107" x2="8.635" y1="18.322" y2="48.448" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-c" x1="29.439" x2="-0.033" y1="9.842" y2="39.968" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-d" x1="30.291" x2="0.819" y1="10.676" y2="40.801" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+	</defs>
+	<path d="m14.7 32.9-1.1 1.4 2.5 3.9-.3 1.8h10.6l.7-1.8-4.2-5.3z" fill="url(#kong-a)" />
+	<path d="M20.5 9.4 16.7 16l18.6 22-.5 2h8.5l1.5-7.1L24.9 9.4z" fill="url(#kong-b)" />
+	<path d="m23 4.4-1.8 3.3h4.5l7.7 9.2 4.6-3.8v-2.4l-1.6-2.2 1.2-1.2L28.4 0z" fill="url(#kong-c)" />
+	<path d="M9.1 22.9H6.6L0 31.3V40h7.1l1.3-1.6 5.5-7.1h7.9l2.4-3.7-8.6-10.2z" fill="url(#kong-d)" />
+</svg>
--- a/frontend/src/assets/Logos/neon.svg
+++ b/frontend/src/assets/Logos/neon.svg
@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+	<path d="M63 0.018v63.535L38.418 42.25v21.303H0V0l63 .018ZM7.723 55.839h22.972V25.323l24.583 21.725V7.729L7.723 7.716v48.123Z" fill="#37C38F" />
+</svg>
--- a/frontend/src/components/ChangelogModal/test/ChangelogRenderer.test.tsx
+++ b/frontend/src/components/ChangelogModal/test/ChangelogRenderer.test.tsx
@@ -8,12 +8,19 @@ import {

 import ChangelogRenderer from '../components/ChangelogRenderer';

-// Mock react-markdown to just render children as plain text
+// Mock react-markdown to render children as plain text and a sample
+// anchor through the `components.a` override
 jest.mock(
 	'react-markdown',
 	() =>
-		function ReactMarkdown({ children }: any) {
-			return <div>{children}</div>;
+		function ReactMarkdown({ children, components }: any) {
+			const Anchor = components?.a;
+			return (
+				<div>
+					{children}
+					{Anchor && <Anchor href="https://signoz.io/docs">docs</Anchor>}
+				</div>
+			);
 		},
 );

@@ -62,4 +69,14 @@ describe('ChangelogRenderer', () => {
 		expect(screen.getByAltText('Media')).toBeInTheDocument();
 		expect(screen.getByText('Description for feature 1')).toBeInTheDocument();
 	});
+
+	it('renders markdown links that open in a new tab', () => {
+		render(<ChangelogRenderer changelog={mockChangelog} />);
+		const links = screen.getAllByRole('link', { name: 'docs' });
+		expect(links.length).toBeGreaterThan(0);
+		links.forEach((link) => {
+			expect(link).toHaveAttribute('target', '_blank');
+			expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+		});
+	});
 });
--- a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx
+++ b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx
@@ -13,6 +13,19 @@ interface Props {
 	changelog: ChangelogSchema;
 }

+interface LinkProps {
+	href?: string;
+	children?: React.ReactNode;
+}
+
+function Link({ href, children }: LinkProps): JSX.Element {
+	return (
+		<a href={href} target="_blank" rel="noopener noreferrer">
+			{children}
+		</a>
+	);
+}
+
 function renderMedia(media: Media): JSX.Element | null {
 	if (SupportedImageTypes.includes(media.ext)) {
 		return (
@@ -62,7 +75,9 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 							<div key={feature.id}>
 								<div className="changelog-renderer-section-title">{feature.title}</div>
 								{feature.media && renderMedia(feature.media)}
-								<ReactMarkdown>{feature.description}</ReactMarkdown>
+								<ReactMarkdown components={{ a: Link }}>
+									{feature.description}
+								</ReactMarkdown>
 							</div>
 						))}
 					</div>
@@ -71,7 +86,9 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 					<div className="changelog-renderer-bug-fixes">
 						<div className="changelog-renderer-section-title">Bug Fixes</div>
 						{changelog.bug_fixes && (
-							<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
+							<ReactMarkdown components={{ a: Link }}>
+								{changelog.bug_fixes}
+							</ReactMarkdown>
 						)}
 					</div>
 				)}
@@ -79,7 +96,9 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 					<div className="changelog-renderer-maintenance">
 						<div className="changelog-renderer-section-title">Maintenance</div>
 						{changelog.maintenance && (
-							<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
+							<ReactMarkdown components={{ a: Link }}>
+								{changelog.maintenance}
+							</ReactMarkdown>
 						)}
 					</div>
 				)}
--- a/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.styles.scss
+++ b/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.styles.scss
@@ -1,5 +0,0 @@
-.client-side-qb-search {
-	.ant-select-selection-search {
-		width: max-content !important;
-	}
-}
--- a/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx
+++ b/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx
@@ -1,661 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-
-import {
-	KeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Select, Tooltip } from 'antd';
-import {
-	OPERATORS,
-	QUERY_BUILDER_OPERATORS_BY_TYPES,
-	QUERY_BUILDER_SEARCH_VALUES,
-} from 'constants/queryBuilder';
-import { CustomTagProps } from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
-import { PLACEHOLDER } from 'container/QueryBuilder/filters/QueryBuilderSearch/constant';
-import { TypographyText } from 'container/QueryBuilder/filters/QueryBuilderSearch/style';
-import {
-	checkCommaInValue,
-	getOperatorFromValue,
-	getOperatorValue,
-	getTagToken,
-	isInNInOperator,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import {
-	DropdownState,
-	ITag,
-	Option,
-} from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
-import Suggestions from 'container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
-import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
-import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
-import { ChevronDown, ChevronUp } from '@signozhq/icons';
-import type { BaseSelectRef } from 'rc-select';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { popupContainer } from 'utils/selectPopupContainer';
-import { v4 as uuid } from 'uuid';
-
-import './ClientSideQBSearch.styles.scss';
-import { Badge } from '@signozhq/ui/badge';
-
-export interface AttributeKey {
-	key: string;
-}
-
-export interface AttributeValuesMap {
-	[key: string]: AttributeValue;
-}
-
-interface ClientSideQBSearchProps {
-	filters: TagFilter;
-	onChange: (value: TagFilter) => void;
-	whereClauseConfig?: WhereClauseConfig;
-	placeholder?: string;
-	className?: string;
-	suffixIcon?: React.ReactNode;
-	attributeValuesMap?: AttributeValuesMap;
-	attributeKeys: AttributeKey[];
-}
-
-interface AttributeValue {
-	stringAttributeValues: string[] | [];
-	numberAttributeValues: number[] | [];
-	boolAttributeValues: boolean[] | [];
-}
-
-function ClientSideQBSearch(
-	props: ClientSideQBSearchProps,
-): React.ReactElement {
-	const {
-		onChange,
-		placeholder,
-		className,
-		suffixIcon,
-		whereClauseConfig,
-		attributeValuesMap,
-		attributeKeys,
-		filters,
-	} = props;
-
-	const isDarkMode = useIsDarkMode();
-
-	const selectRef = useRef<BaseSelectRef>(null);
-
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-
-	// create the tags from the initial query here, this should only be computed on the first load as post that tags and query will be always in sync.
-	const [tags, setTags] = useState<ITag[]>(filters.items as ITag[]);
-
-	// this will maintain the current state of in process filter item
-	const [currentFilterItem, setCurrentFilterItem] = useState<ITag | undefined>();
-
-	const [currentState, setCurrentState] = useState<DropdownState>(
-		DropdownState.ATTRIBUTE_KEY,
-	);
-
-	// to maintain the current running state until the tokenization happens for the tag
-	const [searchValue, setSearchValue] = useState<string>('');
-
-	const [dropdownOptions, setDropdownOptions] = useState<Option[]>([]);
-
-	const attributeValues = useMemo(() => {
-		if (currentFilterItem?.key?.key) {
-			return attributeValuesMap?.[currentFilterItem.key.key];
-		}
-		return {
-			stringAttributeValues: [],
-			numberAttributeValues: [],
-			boolAttributeValues: [],
-		};
-	}, [attributeValuesMap, currentFilterItem?.key?.key]);
-
-	const handleDropdownSelect = useCallback(
-		(value: string) => {
-			let parsedValue: BaseAutocompleteData | string;
-
-			try {
-				parsedValue = JSON.parse(value);
-			} catch {
-				parsedValue = value;
-			}
-			if (currentState === DropdownState.ATTRIBUTE_KEY) {
-				setCurrentFilterItem((prev) => ({
-					...prev,
-					key: parsedValue as BaseAutocompleteData,
-					op: '',
-					value: '',
-				}));
-				setCurrentState(DropdownState.OPERATOR);
-				setSearchValue((parsedValue as BaseAutocompleteData)?.key);
-			} else if (currentState === DropdownState.OPERATOR) {
-				if (value === OPERATORS.EXISTS || value === OPERATORS.NOT_EXISTS) {
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: value,
-							value: '',
-						} as ITag,
-					]);
-					setCurrentFilterItem(undefined);
-					setSearchValue('');
-					setCurrentState(DropdownState.ATTRIBUTE_KEY);
-				} else {
-					setCurrentFilterItem((prev) => ({
-						key: prev?.key as BaseAutocompleteData,
-						op: value as string,
-						value: '',
-					}));
-					setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-					setSearchValue(`${currentFilterItem?.key?.key} ${value}`);
-				}
-			} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-				const operatorType =
-					operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
-				const isMulti = operatorType === QUERY_BUILDER_SEARCH_VALUES.MULTIPLY;
-
-				if (isMulti) {
-					const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
-					// this condition takes care of adding the IN/NIN multi values when pressed enter on an already existing value.
-					// not the best interaction but in sync with what we have today!
-					if (tagValue.includes(String(value))) {
-						setSearchValue('');
-						setCurrentState(DropdownState.ATTRIBUTE_KEY);
-						setCurrentFilterItem(undefined);
-						setTags((prev) => [
-							...prev,
-							{
-								key: currentFilterItem?.key,
-								op: currentFilterItem?.op,
-								value: tagValue,
-							} as ITag,
-						]);
-						return;
-					}
-					// this is for adding subsequent comma seperated values
-					const newSearch = [...tagValue];
-					newSearch[newSearch.length === 0 ? 0 : newSearch.length - 1] = value;
-					const newSearchValue = newSearch.join(',');
-					setSearchValue(`${tagKey} ${tagOperator} ${newSearchValue},`);
-				} else {
-					setSearchValue('');
-					setCurrentState(DropdownState.ATTRIBUTE_KEY);
-					setCurrentFilterItem(undefined);
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: currentFilterItem?.op,
-							value,
-						} as ITag,
-					]);
-				}
-			}
-		},
-		[currentFilterItem?.key, currentFilterItem?.op, currentState, searchValue],
-	);
-
-	const handleSearch = useCallback((value: string) => {
-		setSearchValue(value);
-	}, []);
-
-	const onInputKeyDownHandler = useCallback(
-		(event: KeyboardEvent<Element>): void => {
-			if (event.key === 'Backspace' && !searchValue) {
-				event.stopPropagation();
-				setTags((prev) => prev.slice(0, -1));
-			}
-		},
-		[searchValue],
-	);
-
-	const handleOnBlur = useCallback((): void => {
-		if (searchValue) {
-			const operatorType =
-				operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
-			// if key is added and operator is not present then convert to body CONTAINS key
-			if (
-				currentFilterItem?.key &&
-				isEmpty(currentFilterItem?.op) &&
-				whereClauseConfig?.customKey === 'body' &&
-				whereClauseConfig?.customOp === OPERATORS.CONTAINS
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: {
-							key: 'body',
-							dataType: DataTypes.String,
-							type: '',
-							id: 'body--string----true',
-						},
-						op: OPERATORS.CONTAINS,
-						value: currentFilterItem?.key?.key,
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else if (
-				currentFilterItem?.op === OPERATORS.EXISTS ||
-				currentFilterItem?.op === OPERATORS.NOT_EXISTS
-			) {
-				// is exists and not exists operator is present then convert directly to tag! no need of value here
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: currentFilterItem?.op,
-						value: '',
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else if (
-				// if the current state is in sync with the kind of operator used then convert into a tag
-				validationMapper[operatorType]?.(
-					isArray(currentFilterItem?.value)
-						? currentFilterItem?.value.length || 0
-						: 1,
-				)
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key as BaseAutocompleteData,
-						op: currentFilterItem?.op as string,
-						value: currentFilterItem?.value || '',
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			}
-		}
-	}, [
-		currentFilterItem?.key,
-		currentFilterItem?.op,
-		currentFilterItem?.value,
-		searchValue,
-		whereClauseConfig?.customKey,
-		whereClauseConfig?.customOp,
-	]);
-
-	// this useEffect takes care of tokenisation based on the search state
-	useEffect(() => {
-		// if there is no search value reset to the default state
-		if (!searchValue) {
-			setCurrentFilterItem(undefined);
-			setCurrentState(DropdownState.ATTRIBUTE_KEY);
-		}
-
-		// split the current search value based on delimiters
-		const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
-
-		if (
-			// Case 1 - if key is defined but the search text doesn't match with the set key,
-			// can happen when user selects from dropdown and then deletes a few characters
-			currentFilterItem?.key &&
-			currentFilterItem?.key?.key !== tagKey.split(' ')[0]
-		) {
-			setCurrentFilterItem(undefined);
-			setCurrentState(DropdownState.ATTRIBUTE_KEY);
-		} else if (tagOperator && isEmpty(currentFilterItem?.op)) {
-			// Case 2 -> key is set and now typing for the operator
-			if (
-				tagOperator === OPERATORS.EXISTS ||
-				tagOperator === OPERATORS.NOT_EXISTS
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: tagOperator,
-						value: '',
-					} as ITag,
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else {
-				setCurrentFilterItem((prev) => ({
-					key: prev?.key as BaseAutocompleteData,
-					op: tagOperator,
-					value: '',
-				}));
-
-				setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-			}
-		} else if (
-			// Case 3 -> selected operator from dropdown and then erased a part of it
-			!isEmpty(currentFilterItem?.op) &&
-			tagOperator !== currentFilterItem?.op
-		) {
-			setCurrentFilterItem((prev) => ({
-				key: prev?.key as BaseAutocompleteData,
-				op: '',
-				value: '',
-			}));
-			setCurrentState(DropdownState.OPERATOR);
-		} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-			// Case 4 -> the final value state where we set the current filter values and the tokenisation happens on either
-			// dropdown click or blur event
-			const currentValue = {
-				key: currentFilterItem?.key as BaseAutocompleteData,
-				op: currentFilterItem?.op as string,
-				value: tagValue,
-			};
-			if (!isEqual(currentValue, currentFilterItem)) {
-				setCurrentFilterItem((prev) => ({
-					key: prev?.key as BaseAutocompleteData,
-					op: prev?.op as string,
-					value: tagValue,
-				}));
-			}
-		}
-	}, [
-		currentFilterItem,
-		currentFilterItem?.key,
-		currentFilterItem?.op,
-		searchValue,
-		currentState,
-	]);
-
-	// the useEffect takes care of setting the dropdown values correctly on change of the current state
-	useEffect(() => {
-		if (currentState === DropdownState.ATTRIBUTE_KEY) {
-			const filteredAttributeKeys = attributeKeys.filter((key) =>
-				key.key.startsWith(searchValue),
-			);
-			setDropdownOptions(
-				filteredAttributeKeys?.map(
-					(key) =>
-						({
-							label: key.key,
-							value: key,
-						}) as Option,
-				) || [],
-			);
-		}
-		if (currentState === DropdownState.OPERATOR) {
-			const keyOperator = searchValue.split(' ');
-			const partialOperator = keyOperator?.[1];
-			const strippedKey = keyOperator?.[0];
-
-			let operatorOptions;
-			if (currentFilterItem?.key?.dataType) {
-				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES[
-					currentFilterItem.key
-						.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
-				].map((operator) => ({
-					label: operator,
-					value: operator,
-				}));
-
-				if (partialOperator) {
-					operatorOptions = operatorOptions.filter((op) =>
-						op.label.startsWith(partialOperator.toLocaleUpperCase()),
-					);
-				}
-				setDropdownOptions(operatorOptions);
-			} else if (strippedKey.endsWith('[*]') && strippedKey.startsWith('body.')) {
-				operatorOptions = [OPERATORS.HAS, OPERATORS.NHAS].map((operator) => ({
-					label: operator,
-					value: operator,
-				}));
-				setDropdownOptions(operatorOptions);
-			} else {
-				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES.universal.map(
-					(operator) => ({
-						label: operator,
-						value: operator,
-					}),
-				);
-
-				if (partialOperator) {
-					operatorOptions = operatorOptions.filter((op) =>
-						op.label.startsWith(partialOperator.toLocaleUpperCase()),
-					);
-				}
-				setDropdownOptions(operatorOptions);
-			}
-		}
-
-		if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-			const values: Array<string | number | boolean> = [];
-			const { tagValue } = getTagToken(searchValue);
-			if (isArray(tagValue)) {
-				if (!isEmpty(tagValue[tagValue.length - 1])) {
-					values.push(tagValue[tagValue.length - 1]);
-				}
-			} else if (!isEmpty(tagValue)) {
-				values.push(tagValue);
-			}
-
-			const currentAttributeValues =
-				attributeValues?.stringAttributeValues ||
-				attributeValues?.numberAttributeValues ||
-				attributeValues?.boolAttributeValues ||
-				[];
-
-			values.push(...currentAttributeValues);
-
-			if (attributeValuesMap) {
-				setDropdownOptions(
-					values.map(
-						(val) =>
-							({
-								label: checkCommaInValue(String(val)),
-								value: val,
-							}) as Option,
-					),
-				);
-			} else {
-				// If attributeValuesMap is not provided, don't set dropdown options
-				setDropdownOptions([]);
-			}
-		}
-	}, [
-		attributeValues,
-		currentFilterItem?.key?.dataType,
-		currentState,
-		attributeKeys,
-		searchValue,
-		attributeValuesMap,
-	]);
-
-	useEffect(() => {
-		const filterTags: IBuilderQuery['filters'] = {
-			op: 'AND',
-			items: [],
-		};
-		tags.forEach((tag) => {
-			const computedTagValue =
-				tag.value &&
-				Array.isArray(tag.value) &&
-				tag.value[tag.value.length - 1] === ''
-					? tag.value?.slice(0, -1)
-					: (tag.value ?? '');
-			filterTags.items.push({
-				id: tag.id || uuid().slice(0, 8),
-				key: tag.key,
-				op: getOperatorValue(tag.op),
-				value: computedTagValue,
-			});
-		});
-
-		if (!isEqual(filters, filterTags)) {
-			onChange(filterTags);
-			setTags(
-				filterTags.items.map((tag) => ({
-					...tag,
-					op: getOperatorFromValue(tag.op),
-				})) as ITag[],
-			);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [tags]);
-
-	const queryTags = useMemo(
-		() => tags.map((tag) => `${tag.key.key} ${tag.op} ${tag.value}`),
-		[tags],
-	);
-
-	const onTagRender = ({
-		value,
-		closable,
-		onClose,
-	}: CustomTagProps): React.ReactElement => {
-		const { tagOperator } = getTagToken(value);
-		const isInNin = isInNInOperator(tagOperator);
-		const chipValue = isInNin
-			? value?.trim()?.replace(/,\s*$/, '')
-			: value?.trim();
-
-		const indexInQueryTags = queryTags.findIndex((qTag) => isEqual(qTag, value));
-		const tagDetails = tags[indexInQueryTags];
-
-		const onCloseHandler = (): void => {
-			onClose();
-			setSearchValue('');
-			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
-		};
-
-		const tagEditHandler = (value: string): void => {
-			setCurrentFilterItem(tagDetails);
-			setSearchValue(value);
-			setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
-		};
-
-		const isDisabled = !!searchValue;
-
-		return (
-			<span className="qb-search-bar-tokenised-tags">
-				<Badge
-					color="vanilla"
-					className={tagDetails?.key?.type || ''}
-					closable={!searchValue && closable}
-					onClose={(e): void => {
-						e.preventDefault();
-						onCloseHandler();
-					}}
-				>
-					<Tooltip title={chipValue}>
-						<TypographyText
-							$isInNin={isInNin}
-							$isEnabled={!!searchValue}
-							$disabled={isDisabled}
-							onClick={(): void => {
-								if (!isDisabled) {
-									tagEditHandler(value);
-								}
-							}}
-						>
-							{chipValue}
-						</TypographyText>
-					</Tooltip>
-				</Badge>
-			</span>
-		);
-	};
-
-	const suffixIconContent = useMemo(() => {
-		if (suffixIcon) {
-			return suffixIcon;
-		}
-		return isOpen ? (
-			<ChevronUp
-				size={14}
-				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-			/>
-		) : (
-			<ChevronDown
-				size={14}
-				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-			/>
-		);
-	}, [isDarkMode, isOpen, suffixIcon]);
-
-	return (
-		<div className="query-builder-search-v2 ">
-			<Select
-				ref={selectRef}
-				getPopupContainer={popupContainer}
-				virtual={false}
-				showSearch
-				tagRender={onTagRender}
-				transitionName=""
-				choiceTransitionName=""
-				filterOption={false}
-				open={isOpen}
-				suffixIcon={suffixIconContent}
-				onDropdownVisibleChange={setIsOpen}
-				autoClearSearchValue={false}
-				mode="multiple"
-				placeholder={placeholder}
-				value={queryTags}
-				searchValue={searchValue}
-				className={className}
-				rootClassName="query-builder-search client-side-qb-search"
-				disabled={!attributeKeys.length}
-				style={selectStyle}
-				onSearch={handleSearch}
-				onSelect={handleDropdownSelect}
-				onInputKeyDown={onInputKeyDownHandler}
-				notFoundContent={null}
-				showAction={['focus']}
-				onBlur={handleOnBlur}
-			>
-				{dropdownOptions.map((option) => {
-					let val = option.value;
-					try {
-						if (isObject(option.value)) {
-							val = JSON.stringify(option.value);
-						} else {
-							val = option.value;
-						}
-					} catch {
-						val = option.value;
-					}
-					return (
-						<Select.Option key={isObject(val) ? `select-option` : val} value={val}>
-							<Suggestions
-								label={option.label}
-								value={option.value}
-								option={currentState}
-								searchValue={searchValue}
-							/>
-						</Select.Option>
-					);
-				})}
-			</Select>
-		</div>
-	);
-}
-
-ClientSideQBSearch.defaultProps = {
-	placeholder: PLACEHOLDER,
-	className: '',
-	suffixIcon: null,
-	whereClauseConfig: {},
-	attributeValuesMap: {},
-};
-
-export default ClientSideQBSearch;
--- a/frontend/src/components/LogDetail/LogDetail.interfaces.ts
+++ b/frontend/src/components/LogDetail/LogDetail.interfaces.ts
@@ -19,6 +19,7 @@ export type LogDetailProps = {
 	onScrollToLog?: (logId: string) => void;
 	handleOpenInExplorer?: MouseEventHandler;
 	getContainer?: DrawerProps['getContainer'];
+	onApplyLogFilter?: (expression: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;
--- a/frontend/src/components/LogDetail/LogDetails.styles.scss
+++ b/frontend/src/components/LogDetail/LogDetails.styles.scss
@@ -41,8 +41,7 @@
 	.ant-drawer-body {
 		display: flex;
 		flex-direction: column;
-		padding: 16px;
-		padding-bottom: 0;
+		padding: 0 16px;
 	}

 	.title {
@@ -79,6 +78,7 @@
 		align-items: center;
 		gap: 4px;
 		position: relative;
+		margin-top: 16px;

 		.log-body {
 			font-family: 'SF Mono';
@@ -123,6 +123,19 @@
 		}
 	}

+	.log-detail-drawer__section-divider {
+		height: 8px;
+		margin: 12px 0;
+		background-image:
+			radial-gradient(circle, var(--l3-border) 1px, transparent 1px),
+			radial-gradient(circle, var(--l3-border) 1px, transparent 1px);
+		background-size: 6px 2px;
+		background-position:
+			left top,
+			left bottom;
+		background-repeat: repeat-x;
+	}
+
 	.tabs-and-search {
 		display: flex;
 		justify-content: space-between;
--- a/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx
+++ b/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx
@@ -16,6 +16,7 @@ import {
 	Link,
 } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
+import { normalizeTimeToMs } from 'utils/timeUtils';
 import { ILog } from 'types/api/logs/log';
 import { MouseEvent, MouseEventHandler } from 'react';
 import { useCopyToClipboard } from 'react-use';
@@ -67,6 +68,11 @@ function LogDetailsHeader({
 		},
 	];

+	const rawTimestamp = log.date ?? log.timestamp;
+	const displayTimestamp = Number.isNaN(Number(rawTimestamp))
+		? rawTimestamp
+		: normalizeTimeToMs(rawTimestamp);
+
 	return (
 		<div className={styles.header} data-log-detail-ignore="true">
 			<div className={styles.leftSection}>
@@ -76,7 +82,7 @@ function LogDetailsHeader({
 					data-testid="log-details-header-timestamp"
 				>
 					{formatTimezoneAdjustedTimestamp(
-						log.date ?? log.timestamp,
+						displayTimestamp,
 						DATE_TIME_FORMATS.DASH_DATETIME,
 					)}
 				</Typography.Text>
--- a/frontend/src/components/LogDetail/tests/LogDetail.test.tsx
+++ b/frontend/src/components/LogDetail/tests/LogDetail.test.tsx
@@ -11,10 +11,16 @@ jest.mock('@signozhq/ui/sonner', () => ({
 	toast: { success: jest.fn(), error: jest.fn() },
 }));

-// The flag to be removed later
-jest.mock('../constants', () => ({
-	...jest.requireActual('../constants'),
-	isLogDetailsV2: true,
+// DataViewer pulls in react-json-tree (ESM) + Monaco; mock it (as trace's tests
+// do). These drawer tests assert the header/highlights, not the Overview body.
+jest.mock('periscope/components/DataViewer', () => ({
+	__esModule: true,
+	DataViewer: (): JSX.Element => <div data-testid="overview-data-viewer" />,
+}));
+
+// Force v2 for these tests regardless of route.
+jest.mock('../useIsLogDetailsV2', () => ({
+	useIsLogDetailsV2: (): boolean => true,
 }));

 const mockLog: ILog = {
@@ -66,6 +72,12 @@ describe('LogDetail drawer — header (isLogDetailsV2)', () => {
 		expect(screen.getByTestId('log-details-header-next')).toBeInTheDocument();
 	});

+	it('renders the DataViewer in the Overview tab', () => {
+		renderDrawer();
+
+		expect(screen.getByTestId('overview-data-viewer')).toBeInTheDocument();
+	});
+
 	it('shows the log timestamp formatted (DASH_DATETIME) in the header', () => {
 		// Pin the timezone to UTC so the formatted output is deterministic across
 		// machines/CI (Jest doesn't fix a TZ).
@@ -79,6 +91,24 @@ describe('LogDetail drawer — header (isLogDetailsV2)', () => {
 		);
 	});

+	it('normalizes a nanosecond-epoch timestamp in the header', () => {
+		localStorage.setItem(LOCALSTORAGE.PREFERRED_TIMEZONE, 'UTC');
+
+		// Same instant as mockLog but as epoch nanoseconds (e.g. dashboard list panel).
+		// Must scale to ms, not render a wildly wrong date.
+		renderDrawer({
+			log: {
+				...mockLog,
+				date: '1705311930000000000',
+				timestamp: 1705311930000000000,
+			},
+		});
+
+		expect(screen.getByTestId('log-details-header-timestamp')).toHaveTextContent(
+			'Jan 15, 2024 ⎯ 09:45:30',
+		);
+	});
+
 	it('copies the log link from the ⋯ menu', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });

--- a/frontend/src/components/LogDetail/constants.ts
+++ b/frontend/src/components/LogDetail/constants.ts
@@ -1,10 +1,3 @@
-import getLocalStorage from 'api/browser/localstorage/get';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-// Temp feature flag before actual roll-out
-export const isLogDetailsV2 =
-	getLocalStorage(LOCALSTORAGE.LOG_DETAILS_V2) === 'true';
-
 export const VIEW_TYPES = {
 	OVERVIEW: 'OVERVIEW',
 	JSON: 'JSON',
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -51,11 +51,12 @@ import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';

-import { isLogDetailsV2, RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
+import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 import LogDetailsHeader from './LogDetailsHeader/LogDetailsHeader';
 import { useLogNavigation } from './LogDetailsHeader/useLogNavigation';
 import LogHighlights from './LogHighlights/LogHighlights';
+import { useIsLogDetailsV2 } from './useIsLogDetailsV2';

 import './LogDetails.styles.scss';

@@ -74,6 +75,7 @@ function LogDetailInner({
 	onScrollToLog,
 	handleOpenInExplorer,
 	getContainer,
+	onApplyLogFilter,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -92,6 +94,8 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery } = useQueryBuilder();

+	const isLogDetailsV2 = useIsLogDetailsV2();
+
 	// Handle clicks outside to close drawer, except on explicitly ignored regions
 	useEffect(() => {
 		const handleClickOutside = (e: MouseEvent): void => {
@@ -100,6 +104,7 @@ function LogDetailInner({
 			// Don't close if clicking on drawer content, overlays, or portal elements
 			if (
 				target.closest('[data-log-detail-ignore="true"]') ||
+				target.closest('.log-detail-drawer') ||
 				target.closest('.cm-tooltip-autocomplete') ||
 				target.closest('.drawer-popover') ||
 				target.closest('.query-status-popover') ||
@@ -402,6 +407,8 @@ function LogDetailInner({

 				{isLogDetailsV2 && <LogHighlights log={log} />}

+				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
+
 				<div className="tabs-and-search">
 					<ToggleGroupSimple
 						type="single"
@@ -418,15 +425,21 @@ function LogDetailInner({
 									</div>
 								),
 							},
-							{
-								value: VIEW_TYPES.JSON,
-								label: (
-									<div className="view-title">
-										<Braces size={14} />
-										JSON
-									</div>
-								),
-							},
+							// V2's DataViewer has its own Pretty/JSON toggle, so the separate
+							// JSON tab is redundant.
+							...(isLogDetailsV2
+								? []
+								: [
+										{
+											value: VIEW_TYPES.JSON,
+											label: (
+												<div className="view-title">
+													<Braces size={14} />
+													JSON
+												</div>
+											),
+										},
+									]),
 							{
 								value: VIEW_TYPES.CONTEXT,
 								label: (
@@ -507,9 +520,10 @@ function LogDetailInner({
 						selectedOptions={options}
 						listViewPanelSelectedFields={listViewPanelSelectedFields}
 						handleChangeSelectedView={handleChangeSelectedView}
+						onApplyLogFilter={onApplyLogFilter}
 					/>
 				)}
-				{selectedView === VIEW_TYPES.JSON && (
+				{!isLogDetailsV2 && selectedView === VIEW_TYPES.JSON && (
 					<JsonView data={LogJsonData} height="68vh" />
 				)}

--- a/frontend/src/components/LogDetail/useIsLogDetailsV2.ts
+++ b/frontend/src/components/LogDetail/useIsLogDetailsV2.ts
@@ -0,0 +1,11 @@
+import ROUTES from 'constants/routes';
+import { useLocation } from 'react-router-dom';
+
+export function useIsLogDetailsV2(): boolean {
+	const { pathname } = useLocation();
+	return (
+		pathname === ROUTES.LOGS_EXPLORER ||
+		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||
+		pathname.startsWith(`${ROUTES.ALL_DASHBOARD}/`)
+	);
+}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/RecentSearches.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/RecentSearches.test.tsx
@@ -107,14 +107,38 @@ async function renderAndFocus(
 	return editor;
 }

-function openRecents(): Promise<void> {
+// Re-requests completions while waiting: typing and the async fetches can close the popup.
+function waitForRecents(
+	assertLabels: (labels: string[]) => void,
+): Promise<void> {
 	return waitFor(
 		() => {
 			const view = getEditorView();
 			if (view && !isCompletionOpen()) {
 				startCompletion(view);
 			}
-			expect(getRecentLabels().length).toBeGreaterThan(0);
+			assertLabels(getRecentLabels());
+		},
+		{ timeout: 3000 },
+	);
+}
+
+function openRecents(): Promise<void> {
+	return waitForRecents((labels) => expect(labels.length).toBeGreaterThan(0));
+}
+
+function waitForPopupElement(
+	find: () => HTMLElement | null | undefined,
+): Promise<HTMLElement> {
+	return waitFor(
+		() => {
+			const view = getEditorView();
+			if (view && !isCompletionOpen()) {
+				startCompletion(view);
+			}
+			const node = find();
+			expect(node).toBeTruthy();
+			return node as HTMLElement;
 		},
 		{ timeout: 3000 },
 	);
@@ -132,11 +156,8 @@ describe('QuerySearch recent searches', () => {
 		await renderAndFocus();
 		await openRecents();

-		await waitFor(
-			() => {
-				expect(getRecentLabels()).toStrictEqual([FRONTEND_FILTER]);
-			},
-			{ timeout: 3000 },
+		await waitForRecents((labels) =>
+			expect(labels).toStrictEqual([FRONTEND_FILTER]),
 		);

 		const view = getEditorView() as EditorView;
@@ -152,11 +173,8 @@ describe('QuerySearch recent searches', () => {
 		await openRecents();
 		await userEvent.type(editor, 'status_code');

-		await waitFor(
-			() => {
-				expect(getRecentLabels()).toStrictEqual([STATUS_CODE_FILTER]);
-			},
-			{ timeout: 3000 },
+		await waitForRecents((labels) =>
+			expect(labels).toStrictEqual([STATUS_CODE_FILTER]),
 		);
 	});

@@ -170,11 +188,8 @@ describe('QuerySearch recent searches', () => {
 		await renderAndFocus();
 		await openRecents();

-		await waitFor(
-			() => {
-				expect(getRecentLabels()).toStrictEqual([FRONTEND_FILTER]);
-			},
-			{ timeout: 3000 },
+		await waitForRecents((labels) =>
+			expect(labels).toStrictEqual([FRONTEND_FILTER]),
 		);
 	});

@@ -187,11 +202,8 @@ describe('QuerySearch recent searches', () => {
 		await openRecents();
 		await userEvent.type(editor, FRONTEND_FILTER);

-		await waitFor(
-			() => {
-				expect(getRecentLabels()).toStrictEqual([supersetFilter]);
-			},
-			{ timeout: 3000 },
+		await waitForRecents((labels) =>
+			expect(labels).toStrictEqual([supersetFilter]),
 		);
 	});

@@ -206,11 +218,8 @@ describe('QuerySearch recent searches', () => {
 		await renderAndFocus();
 		await openRecents();

-		await waitFor(
-			() => {
-				expect(getRecentLabels()).toStrictEqual(expectedLabels);
-			},
-			{ timeout: 3000 },
+		await waitForRecents((labels) =>
+			expect(labels).toStrictEqual(expectedLabels),
 		);
 	});

@@ -221,17 +230,13 @@ describe('QuerySearch recent searches', () => {
 		await renderAndFocus(onChange);
 		await openRecents();

-		const option = await waitFor(
-			() => {
-				const node = Array.from(
-					document.querySelectorAll<HTMLElement>(COMPLETION_LABEL_SELECTOR),
-				).find((element) => element.textContent === FRONTEND_FILTER);
-				expect(node).toBeDefined();
-				return node as HTMLElement;
-			},
-			{ timeout: 3000 },
+		const option = await waitForPopupElement(() =>
+			Array.from(
+				document.querySelectorAll<HTMLElement>(COMPLETION_LABEL_SELECTOR),
+			).find((element) => element.textContent === FRONTEND_FILTER),
 		);
-		await userEvent.click(option);
+		// fireEvent: userEvent's pointerdown blurs the editor, closing the popup before CM's mousedown apply.
+		fireEvent.mouseDown(option);

 		await waitFor(
 			() => {
@@ -256,13 +261,8 @@ describe('QuerySearch recent searches', () => {
 		await renderAndFocus();
 		await openRecents();

-		const deleteButton = await waitFor(
-			() => {
-				const button = document.querySelector(DELETE_BUTTON_SELECTOR);
-				expect(button).toBeInTheDocument();
-				return button as HTMLElement;
-			},
-			{ timeout: 3000 },
+		const deleteButton = await waitForPopupElement(() =>
+			document.querySelector<HTMLElement>(DELETE_BUTTON_SELECTOR),
 		);

 		// fireEvent: the button preventDefaults pointerdown, which makes userEvent.click drop the mouse chain.
--- a/frontend/src/components/QueryBuilderV2/utils.ts
+++ b/frontend/src/components/QueryBuilderV2/utils.ts
@@ -8,7 +8,7 @@ import {
 	OPERATORS,
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import FilterQueryLexer from 'parser/FilterQueryLexer';
 import FilterQueryParser, {
 	AndExpressionContext,
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts
@@ -5,7 +5,7 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { cloneDeep, isArray } from 'lodash-es';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
@@ -1,4 +1,7 @@
-import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
+import {
+	listRolesSuccessResponse,
+	managedRoles,
+} from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
@@ -18,17 +21,24 @@ const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
 const SA_DELETE_ENDPOINT = '*/api/v1/service_accounts/sa-1';
-const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
-const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_accounts/:id/roles/:rid';
+const SA_ROLES_ENDPOINT = '*/api/v1/service_account_roles';
+const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_account_roles/:id';

 const activeAccountResponse = {
 	id: 'sa-1',
 	name: 'CI Bot',
 	email: 'ci-bot@signoz.io',
-	roles: ['signoz-admin'],
 	status: 'ACTIVE',
 	createdAt: '2026-01-01T00:00:00Z',
 	updatedAt: '2026-01-02T00:00:00Z',
+	serviceAccountRoles: [
+		{
+			id: 'sar-admin-1',
+			serviceAccountId: 'sa-1',
+			roleId: managedRoles[0].id,
+			role: { ...managedRoles[0], transactionGroups: [] },
+		},
+	],
 };

 function renderDrawer(
@@ -58,22 +68,13 @@ function setupBaseHandlers(): void {
 		rest.delete(SA_DELETE_ENDPOINT, (_, res, ctx) =>
 			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 		),
-		rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+		rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
 			res(
-				ctx.status(200),
-				ctx.json({
-					data: listRolesSuccessResponse.data.filter(
-						(r) => r.name === 'signoz-admin',
-					),
-				}),
+				ctx.status(201),
+				ctx.json({ status: 'success', data: { id: 'sar-new' } }),
 			),
 		),
-		rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-		),
-		rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
-			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-		),
+		rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => res(ctx.status(204))),
 	);
 }

--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
@@ -1,4 +1,7 @@
-import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
+import {
+	listRolesSuccessResponse,
+	managedRoles,
+} from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -10,23 +13,33 @@ const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
 const SA_DELETE_ENDPOINT = '*/api/v1/service_accounts/sa-1';
-const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
-const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_accounts/:id/roles/:rid';
+const SA_ROLES_ENDPOINT = '*/api/v1/service_account_roles';
+const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_account_roles/:id';
+
+const ADMIN_ASSIGNMENT_ID = 'sar-admin-1';

 const activeAccountResponse = {
 	id: 'sa-1',
 	name: 'CI Bot',
 	email: 'ci-bot@signoz.io',
-	roles: ['signoz-admin'],
 	status: 'ACTIVE',
 	createdAt: '2026-01-01T00:00:00Z',
 	updatedAt: '2026-01-02T00:00:00Z',
+	serviceAccountRoles: [
+		{
+			id: ADMIN_ASSIGNMENT_ID,
+			serviceAccountId: 'sa-1',
+			roleId: managedRoles[0].id,
+			role: { ...managedRoles[0], transactionGroups: [] },
+		},
+	],
 };

 const deletedAccountResponse = {
 	...activeAccountResponse,
 	id: 'sa-2',
 	status: 'DELETED',
+	serviceAccountRoles: [],
 };

 function renderDrawer(
@@ -58,22 +71,13 @@ describe('ServiceAccountDrawer', () => {
 			rest.delete(SA_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
 				res(
-					ctx.status(200),
-					ctx.json({
-						data: listRolesSuccessResponse.data.filter(
-							(r) => r.name === 'signoz-admin',
-						),
-					}),
+					ctx.status(201),
+					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
 				),
 			),
-			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-			),
-			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-			),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => res(ctx.status(204))),
 			setupAuthzAdmin(),
 		);
 	});
@@ -136,11 +140,14 @@ describe('ServiceAccountDrawer', () => {
 		server.use(
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+				return res(
+					ctx.status(201),
+					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
+				);
 			}),
 			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
 				deleteSpy();
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+				return res(ctx.status(204));
 			}),
 		);

@@ -159,7 +166,8 @@ describe('ServiceAccountDrawer', () => {
 		await waitFor(() => {
 			expect(roleSpy).toHaveBeenCalledWith(
 				expect.objectContaining({
-					id: '019c24aa-2248-7585-a129-4188b3473c27',
+					serviceAccountId: 'sa-1',
+					roleId: '019c24aa-2248-7585-a129-4188b3473c27',
 				}),
 			);
 			expect(deleteSpy).not.toHaveBeenCalled();
@@ -174,11 +182,14 @@ describe('ServiceAccountDrawer', () => {
 		server.use(
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+				return res(
+					ctx.status(201),
+					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
+				);
 			}),
-			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
-				deleteSpy();
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (req, res, ctx) => {
+				deleteSpy(req.params.id);
+				return res(ctx.status(204));
 			}),
 		);

@@ -198,7 +209,7 @@ describe('ServiceAccountDrawer', () => {
 		await user.click(saveBtn);

 		await waitFor(() => {
-			expect(deleteSpy).toHaveBeenCalled();
+			expect(deleteSpy).toHaveBeenCalledWith(ADMIN_ASSIGNMENT_ID);
 			expect(roleSpy).not.toHaveBeenCalled();
 		});
 	});
@@ -246,9 +257,6 @@ describe('ServiceAccountDrawer', () => {
 			rest.get('*/api/v1/service_accounts/sa-2/keys', (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ data: [] })),
 			),
-			rest.get('*/api/v1/service_accounts/sa-2/roles', (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: [] })),
-			),
 		);

 		renderDrawer({ account: 'sa-2' });
@@ -312,22 +320,13 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 			rest.delete(SA_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
 				res(
-					ctx.status(200),
-					ctx.json({
-						data: listRolesSuccessResponse.data.filter(
-							(r) => r.name === 'signoz-admin',
-						),
-					}),
+					ctx.status(201),
+					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
 				),
 			),
-			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-			),
-			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-			),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => res(ctx.status(204))),
 			setupAuthzAdmin(),
 		);
 	});
@@ -410,14 +409,17 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		let roleAddCallCount = 0;

-		// First call → 429, second call → 200
+		// First call → 429, second call → 201
 		server.use(
 			rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) => {
 				roleAddCallCount += 1;
 				if (roleAddCallCount === 1) {
 					return res(ctx.status(429), ctx.json({ message: 'Too Many Requests' }));
 				}
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+				return res(
+					ctx.status(201),
+					ctx.json({ status: 'success', data: { id: 'sar-new' } }),
+				);
 			}),
 		);

--- a/frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss
+++ b/frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss
@@ -44,6 +44,13 @@
 			--tanstack-first-column-header-bg,
 			var(--tanstack-table-header-cell-bg, var(--l2-background))
 		) !important;
+		padding-left: var(
+			--tanstack-cell-header-padding-left-first-column,
+			var(
+				--tanstack-cell-header-padding-left-override,
+				var(--tanstack-cell-padding-left, 0.3rem)
+			)
+		);
 	}
 }

--- a/frontend/src/components/TanStackTableView/TanStackTable.module.scss
+++ b/frontend/src/components/TanStackTableView/TanStackTable.module.scss
@@ -161,7 +161,7 @@
 .tableHeaderCell {
 	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
 		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
-	height: 36px;
+	height: var(--tanstack-table-header-height, 36px);
 	text-align: left;
 	font-size: 14px;
 	font-style: normal;
--- a/frontend/src/components/TanStackTableView/tests/useRecoverFromEmptyPage.test.ts
+++ b/frontend/src/components/TanStackTableView/tests/useRecoverFromEmptyPage.test.ts
@@ -0,0 +1,280 @@
+import { renderHook } from '@testing-library/react';
+
+import {
+	useRecoverFromEmptyPage,
+	UseRecoverFromEmptyPageParams,
+} from '../useRecoverFromEmptyPage';
+
+const REPLACE = { history: 'replace' };
+
+function renderRecovery(
+	overrides: Partial<UseRecoverFromEmptyPageParams> = {},
+): { setPage: jest.Mock; rerender: (next?: unknown) => void } {
+	const setPage = jest.fn();
+	const props: UseRecoverFromEmptyPageParams = {
+		page: 1,
+		pageSize: 10,
+		rowCount: 10,
+		total: 100,
+		isFetching: false,
+		setPage,
+		...overrides,
+	};
+
+	const { rerender } = renderHook(
+		(next: UseRecoverFromEmptyPageParams) => useRecoverFromEmptyPage(next),
+		{ initialProps: props },
+	);
+
+	return {
+		setPage,
+		rerender: (next?: unknown): void =>
+			rerender({ ...props, ...(next as Partial<UseRecoverFromEmptyPageParams>) }),
+	};
+}
+
+describe('useRecoverFromEmptyPage', () => {
+	it('leaves the page alone while it still holds rows', () => {
+		const { setPage } = renderRecovery({ page: 3, rowCount: 10 });
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('leaves the page alone on page 1 with no rows at all', () => {
+		const { setPage } = renderRecovery({ page: 1, rowCount: 0, total: 0 });
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('jumps to the last page that holds data when the page is out of range', () => {
+		const { setPage } = renderRecovery({
+			page: 7,
+			pageSize: 10,
+			rowCount: 0,
+			total: 25,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
+	});
+
+	it('replaces the history entry so the back button does not return to the empty page', () => {
+		const { setPage } = renderRecovery({ page: 4, rowCount: 0, total: 10 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('falls back to page 1 when the total is unknown', () => {
+		const { setPage } = renderRecovery({ page: 5, rowCount: 0, total: 0 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('steps back one page when the total claims the page should have data', () => {
+		// total says 100 rows exist, yet page 5 came back empty — step back rather
+		// than stall on a page the query cannot actually serve.
+		const { setPage } = renderRecovery({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(4, REPLACE);
+	});
+
+	it('clamps a page below the first one', () => {
+		const { setPage } = renderRecovery({ page: 0, rowCount: 10 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('falls back to page 1 when pageSize is zero', () => {
+		const { setPage } = renderRecovery({
+			page: 5,
+			pageSize: 0,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('waits for the request to settle before moving the user', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 3,
+			rowCount: 0,
+			total: 10,
+			isFetching: true,
+		});
+
+		expect(setPage).not.toHaveBeenCalled();
+
+		rerender({ page: 3, rowCount: 0, total: 10, isFetching: false });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('clamps a page below the first one even when the query failed', () => {
+		// A negative offset is what made the request fail (400 "offset cannot be
+		// negative"), so retrying the same page loops forever — clamp regardless.
+		const { setPage } = renderRecovery({
+			page: 0,
+			rowCount: 0,
+			total: 0,
+			isDisabled: true,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('clamps a page below the first one while the query is still in flight', () => {
+		const { setPage } = renderRecovery({
+			page: -2,
+			rowCount: 0,
+			isFetching: true,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('keeps the page when the query failed so a retry lands where the user was', () => {
+		const { setPage } = renderRecovery({
+			page: 3,
+			rowCount: 0,
+			total: 0,
+			isDisabled: true,
+		});
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('clamps a page below the first one exactly once while the request settles', () => {
+		// The clamp runs ahead of both gates, so a request settling underneath an
+		// uncorrected page must not re-issue the same history rewrite.
+		const { setPage, rerender } = renderRecovery({
+			page: 0,
+			rowCount: 0,
+			total: 0,
+			isFetching: true,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+
+		rerender({ page: 0, rowCount: 0, total: 0, isFetching: false });
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('stops correcting once the corrected page comes back with rows', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 7,
+			pageSize: 10,
+			rowCount: 0,
+			total: 25,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
+
+		// The correction lands: the query refetches, then resolves with the rows page 3 holds.
+		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 25, isFetching: true });
+		rerender({
+			page: 3,
+			pageSize: 10,
+			rowCount: 5,
+			total: 25,
+			isFetching: false,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not correct again while the same page is still being observed', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+
+		// A refetch cycle that leaves the page untouched — the correction is already in flight.
+		rerender({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+			isFetching: true,
+		});
+		rerender({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+			isFetching: false,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('gives up on step-backs and jumps to page 1 when the total keeps lying', () => {
+		// `total` claims 400 rows exist, but every page comes back empty. Walking back one
+		// page at a time would cost a request per hop, so bail out to page 1 instead.
+		const { setPage, rerender } = renderRecovery({
+			page: 40,
+			pageSize: 10,
+			rowCount: 0,
+			total: 400,
+		});
+
+		expect(setPage).toHaveBeenNthCalledWith(1, 39, REPLACE);
+
+		rerender({ page: 39, pageSize: 10, rowCount: 0, total: 400 });
+
+		expect(setPage).toHaveBeenNthCalledWith(2, 38, REPLACE);
+
+		rerender({ page: 38, pageSize: 10, rowCount: 0, total: 400 });
+
+		expect(setPage).toHaveBeenNthCalledWith(3, 1, REPLACE);
+		expect(setPage).toHaveBeenCalledTimes(3);
+	});
+
+	it('corrects again when the user returns to a page that is still empty', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 3,
+			pageSize: 10,
+			rowCount: 0,
+			total: 10,
+		});
+
+		expect(setPage).toHaveBeenNthCalledWith(1, 1, REPLACE);
+
+		rerender({ page: 1, pageSize: 10, rowCount: 10, total: 10 });
+		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 10 });
+
+		expect(setPage).toHaveBeenNthCalledWith(2, 1, REPLACE);
+	});
+
+	it('does not re-run the correction when setPage is a fresh function each render', () => {
+		// The hook reads setPage through a ref, so an inline arrow must not turn the
+		// ungated `page < 1` clamp into a per-render history rewrite.
+		const setPage = jest.fn();
+		const { rerender } = renderHook(
+			() =>
+				useRecoverFromEmptyPage({
+					page: 0,
+					pageSize: 10,
+					rowCount: 0,
+					total: 0,
+					isFetching: false,
+					setPage: (nextPage, options): void => setPage(nextPage, options),
+				}),
+			{ initialProps: undefined },
+		);
+
+		rerender(undefined);
+		rerender(undefined);
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/useStableTotalCount.test.ts
+++ b/frontend/src/components/TanStackTableView/tests/useStableTotalCount.test.ts
@@ -0,0 +1,91 @@
+import { renderHook } from '@testing-library/react';
+
+import {
+	useStableTotalCount,
+	UseStableTotalCountParams,
+} from '../useStableTotalCount';
+
+function renderStableTotalCount(initial: UseStableTotalCountParams): {
+	result: { current: number };
+	rerender: (next: UseStableTotalCountParams) => void;
+} {
+	const { result, rerender } = renderHook(
+		(params: UseStableTotalCountParams) => useStableTotalCount(params),
+		{ initialProps: initial },
+	);
+
+	return { result, rerender };
+}
+
+describe('useStableTotalCount', () => {
+	it('reports the total once the load settles', () => {
+		const { result } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		expect(result.current).toBe(100);
+	});
+
+	it('keeps the last count while the same list refetches', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'pods' });
+
+		expect(result.current).toBe(100);
+	});
+
+	it('forgets the count when the list changes', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
+
+		expect(result.current).toBe(0);
+	});
+
+	it('reports the new list total once it arrives', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
+		rerender({ total: 25, isLoading: false, resetKey: 'nodes' });
+
+		expect(result.current).toBe(25);
+	});
+
+	it('reports zero for a list that is genuinely empty', () => {
+		const { result } = renderStableTotalCount({
+			total: 0,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		expect(result.current).toBe(0);
+	});
+
+	it('holds nothing back when no reset key is given', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: undefined,
+		});
+
+		// Without a key there is no context to compare, so the cache behaves as it
+		// always did: it survives the refetch.
+		rerender({ total: 0, isLoading: true, resetKey: undefined });
+
+		expect(result.current).toBe(100);
+	});
+});
--- a/frontend/src/components/TanStackTableView/index.tsx
+++ b/frontend/src/components/TanStackTableView/index.tsx
@@ -9,6 +9,7 @@ export * from './useCalculatedPageSize';
 export * from './useColumnState';
 export * from './useColumnStore';
 export * from './usePreferredPageSize.store';
+export * from './useRecoverFromEmptyPage';
 export * from './useTableParams';

 /**
@@ -285,6 +286,51 @@ export * from './useTableParams';
 *
 * **Pagination shows "Auto" option** when `calculatedPageSize` is passed, allowing users
 * to reset to auto-calculated size.
+ *
+ * **`setPage` accepts history options**: `setPage(page, { history: 'replace' })` rewrites the
+ * current history entry instead of pushing a new one. Use `replace` for corrections the user
+ * did not ask for — otherwise the back button walks straight back into the state that was just
+ * corrected. Only applies when the page is synced to the URL; local (non-URL) pages ignore it.
+ *
+ * @example useRecoverFromEmptyPage — send the user back to a page that has data
+ *
+ * When rows disappear underneath the current page (filters narrowed, time range moved, items
+ * deleted), the user is stranded on an empty page they cannot leave by scrolling. This hook
+ * watches the fetched result and corrects the page with `history: 'replace'`, so the back
+ * button does not return to the empty page.
+ *
+ * Correction rules:
+ * - `page < 1` → jump to page 1, even while fetching or disabled. Such a page usually maps to a
+ *   negative offset the API rejects (400 `offset cannot be negative`), so the response can never
+ *   confirm the page is empty — deferring to it would strand the user on a permanent error.
+ * - Page is empty and not page 1 → go to `min(ceil(total / pageSize), page - 1)`. When `total`
+ *   is trustworthy that lands on the last page holding data; when `total` is unknown or zero it
+ *   lands on page 1; and when `total` claims this page should have had rows it steps back a
+ *   single page. Repeated step-backs give up and jump to page 1 after the second one, so a
+ *   badly inflated `total` cannot walk the user down one request at a time.
+ * - Page has rows, or the user is already on page 1 → do nothing (an empty page 1 means there
+ *   is genuinely nothing to show).
+ *
+ * Pass `isFetching` so the hook waits for the request to settle, and `isDisabled` so a failed
+ * request is not mistaken for an empty page. Neither gate suppresses the `page < 1` clamp.
+ *
+ * ```tsx
+ * import { useRecoverFromEmptyPage, useTableParams } from 'components/TanStackTableView';
+ *
+ * const { page, limit, setPage } = useTableParams(QUERY_PARAMS, { page: 1, limit: 20 });
+ * const { data, isLoading, isFetching, isError } = useListQuery({ page, limit });
+ *
+ * useRecoverFromEmptyPage({
+ *   page,
+ *   pageSize: limit,
+ *   rowCount: data?.rows.length ?? 0,
+ *   total: data?.total ?? 0,
+ *   isFetching: isLoading || isFetching,
+ *   // Skip correction on errors — no rows there means "request failed", not "page is empty".
+ *   isDisabled: isError,
+ *   setPage,
+ * });
+ * ```
 */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,
--- a/frontend/src/components/TanStackTableView/useRecoverFromEmptyPage.ts
+++ b/frontend/src/components/TanStackTableView/useRecoverFromEmptyPage.ts
@@ -0,0 +1,107 @@
+import { useEffect, useRef } from 'react';
+
+import { SetPageOptions } from './useTableParams';
+
+const FIRST_PAGE = 1;
+const REPLACE_HISTORY: SetPageOptions = { history: 'replace' };
+
+/**
+ * How many single-page step-backs to attempt before giving up and going to page 1.
+ *
+ * A step-back only happens when `total` claims the current page should hold data but the
+ * response came back empty. Each hop costs a request, so an inflated `total` on a high page
+ * number would otherwise walk the user down one page at a time behind a spinner.
+ */
+const MAX_STEP_BACKS = 2;
+
+type Correction = {
+	from: number;
+	to: number;
+};
+
+export type UseRecoverFromEmptyPageParams = {
+	page: number;
+	pageSize: number;
+	rowCount: number;
+	total: number;
+	isFetching: boolean;
+	isDisabled?: boolean;
+	setPage: (page: number, options?: SetPageOptions) => void;
+};
+
+export function useRecoverFromEmptyPage({
+	page,
+	pageSize,
+	rowCount,
+	total,
+	isFetching,
+	isDisabled = false,
+	setPage,
+}: UseRecoverFromEmptyPageParams): void {
+	const setPageRef = useRef(setPage);
+	const lastCorrectionRef = useRef<Correction | null>(null);
+	const stepBacksRef = useRef(0);
+
+	useEffect(() => {
+		setPageRef.current = setPage;
+	});
+
+	useEffect(() => {
+		if (lastCorrectionRef.current && lastCorrectionRef.current.from !== page) {
+			lastCorrectionRef.current = null;
+		}
+
+		const correctTo = (nextPage: number): boolean => {
+			if (lastCorrectionRef.current?.to === nextPage) {
+				return false;
+			}
+
+			lastCorrectionRef.current = { from: page, to: nextPage };
+			setPageRef.current(nextPage, REPLACE_HISTORY);
+			return true;
+		};
+
+		// A page below the first one is invalid on its own terms — it usually maps to a
+		// negative offset the API rejects outright, so waiting for a response that will
+		// never arrive (or trusting a failed one) would strand the user for good.
+		if (page < FIRST_PAGE) {
+			stepBacksRef.current = 0;
+			void correctTo(FIRST_PAGE);
+			return;
+		}
+
+		if (isFetching || isDisabled) {
+			return;
+		}
+
+		// The page has data, or there is genuinely nothing to show anywhere.
+		if (rowCount > 0 || page === FIRST_PAGE) {
+			stepBacksRef.current = 0;
+			return;
+		}
+
+		const currentPage = Math.floor(page);
+		const lastPageWithData =
+			pageSize > 0 && total > 0 ? Math.ceil(total / pageSize) : FIRST_PAGE;
+		const nextPage = Math.max(
+			FIRST_PAGE,
+			Math.min(lastPageWithData, currentPage - 1),
+		);
+
+		// `total` disagrees with the response: it says this page should have rows, so the
+		// only safe move is one page back. Cap how often that repeats — every hop is a
+		// request, and a badly inflated `total` would otherwise crawl down from page 40.
+		const isStepBack = nextPage === currentPage - 1;
+
+		if (isStepBack && stepBacksRef.current >= MAX_STEP_BACKS) {
+			if (correctTo(FIRST_PAGE)) {
+				stepBacksRef.current = 0;
+			}
+			return;
+		}
+
+		if (correctTo(nextPage) && isStepBack) {
+			stepBacksRef.current += 1;
+		}
+	}, [isFetching, isDisabled, page, pageSize, rowCount, total]);
+}
--- a/frontend/src/components/TanStackTableView/useStableTotalCount.ts
+++ b/frontend/src/components/TanStackTableView/useStableTotalCount.ts
@@ -0,0 +1,35 @@
+import { useRef } from 'react';
+
+export type UseStableTotalCountParams = {
+	total: number | undefined;
+	isLoading: boolean;
+	/**
+	 * Identifies the list being counted. When it changes, the cached count is
+	 * dropped so the previous list's page count cannot outlive it.
+	 */
+	resetKey: string | undefined;
+};
+
+/**
+ * Holds on to the last non-zero total so the pagination does not flash while the
+ * same list refetches, and forgets it as soon as `resetKey` moves to another list.
+ */
+export function useStableTotalCount({
+	total,
+	isLoading,
+	resetKey,
+}: UseStableTotalCountParams): number {
+	const prevTotalRef = useRef(total || 0);
+	const prevResetKeyRef = useRef(resetKey);
+
+	if (prevResetKeyRef.current !== resetKey) {
+		prevResetKeyRef.current = resetKey;
+		prevTotalRef.current = 0;
+	}
+
+	if (total && total > 0) {
+		prevTotalRef.current = total;
+	}
+
+	return isLoading ? prevTotalRef.current : total || 0;
+}
--- a/frontend/src/components/TanStackTableView/useTableParams.ts
+++ b/frontend/src/components/TanStackTableView/useTableParams.ts
@@ -29,12 +29,16 @@ type Defaults = {
 	cleanupOnUnmount?: boolean;
 };

+export type SetPageOptions = {
+	history?: 'push' | 'replace';
+};
+
 export type TableParamsResult = {
 	page: number;
 	limit: number;
 	orderBy: SortState | null;
 	expanded: ExpandedState;
-	setPage: (p: number) => void;
+	setPage: (p: number, options?: SetPageOptions) => void;
 	setLimit: (l: number) => void;
 	setOrderBy: (s: SortState | null) => void;
 	setExpanded: (updaterOrValue: Updater<ExpandedState>) => void;
@@ -249,6 +253,17 @@ export function useTableParams(
 		[],
 	);

+	const setUrlPageWithOptions = useCallback(
+		(page: number, options?: SetPageOptions): void => {
+			void setUrlPage(page, options);
+		},
+		[setUrlPage],
+	);
+
+	const setLocalPageValue = useCallback((page: number): void => {
+		setLocalPage(page);
+	}, []);
+
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
 	const prevOrderByRef = useRef<string | null>(null);

@@ -303,7 +318,7 @@ export function useTableParams(
 		limit: useUrlForLimit ? urlLimit : localLimit,
 		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
 		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
-		setPage: useUrlForPage ? setUrlPage : setLocalPage,
+		setPage: useUrlForPage ? setUrlPageWithOptions : setLocalPageValue,
 		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimitWithPersist,
 		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
 		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -13,7 +13,6 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
-	LOG_DETAILS_V2 = 'LOG_DETAILS_V2',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',
 	LOGGED_IN_USER_EMAIL = 'LOGGED_IN_USER_EMAIL',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
--- a/frontend/src/container/AlertHistory/Timeline/Table/utils.ts
+++ b/frontend/src/container/AlertHistory/Timeline/Table/utils.ts
@@ -9,6 +9,7 @@ const fieldContextToSuggestionMap: Record<
 	[TelemetrytypesFieldContextDTO.span]: 'span',
 	[TelemetrytypesFieldContextDTO.attribute]: 'attribute',
 	// no maps for the following values on suggestion context
+	[TelemetrytypesFieldContextDTO.trace]: undefined,
 	[TelemetrytypesFieldContextDTO.body]: undefined,
 	[TelemetrytypesFieldContextDTO.metric]: undefined,
 	[TelemetrytypesFieldContextDTO.log]: undefined,
--- a/frontend/src/container/ExplorerOrderBy/index.tsx
+++ b/frontend/src/container/ExplorerOrderBy/index.tsx
@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react';
 import { Select, Spin } from 'antd';
 import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { useOrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/useOrderByFilter';
-import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
+import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/config';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { StringOperators } from 'types/common/queryBuilder';
--- a/frontend/src/container/GridCardLayout/tests/useResolveQuery.test.tsx
+++ b/frontend/src/container/GridCardLayout/tests/useResolveQuery.test.tsx
@@ -0,0 +1,91 @@
+import { renderHook } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import useUpdatedQuery from '../useResolveQuery';
+
+const mockGetSubstituteVars = jest.fn();
+const mockDynamicVariables: unknown[] = [];
+
+jest.mock('api/dashboard/substitute_vars', () => ({
+	getSubstituteVars: (...args: unknown[]): unknown =>
+		mockGetSubstituteVars(...args),
+}));
+
+jest.mock('api/v5/v5', () => ({
+	prepareQueryRangePayloadV5: (): { queryPayload: unknown } => ({
+		queryPayload: { start: 0, end: 1 },
+	}),
+}));
+
+jest.mock(
+	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
+	() => ({
+		mapQueryDataFromApi: (): Query => ({ resolved: true }) as unknown as Query,
+	}),
+);
+
+jest.mock('hooks/dashboard/useDashboardVariablesByType', () => ({
+	useDashboardVariablesByType: (): unknown[] => mockDynamicVariables,
+}));
+
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: (): unknown => ({
+		selectedTime: 'GLOBAL_TIME',
+	}),
+}));
+
+const QUERY = { builder: { queryData: [] } } as unknown as Query;
+
+const WIDGET_CONFIG = {
+	query: QUERY,
+	panelTypes: PANEL_TYPES.TIME_SERIES,
+	timePreferance: 'GLOBAL_TIME' as const,
+};
+
+describe('useResolveQuery', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockDynamicVariables.length = 0;
+	});
+
+	it('skips the substitute_vars round-trip when there are no variables', async () => {
+		const { result } = renderHook(() => useUpdatedQuery(), {
+			wrapper: MockQueryClientProvider,
+		});
+
+		const resolved = await result.current.getUpdatedQuery({
+			widgetConfig: WIDGET_CONFIG,
+		});
+
+		expect(mockGetSubstituteVars).not.toHaveBeenCalled();
+		expect(resolved).toBe(QUERY);
+	});
+
+	it('resolves through substitute_vars when the dashboard has variables', async () => {
+		mockGetSubstituteVars.mockResolvedValue({
+			httpStatusCode: 200,
+			data: { compositeQuery: {} },
+		});
+
+		const { result } = renderHook(() => useUpdatedQuery(), {
+			wrapper: MockQueryClientProvider,
+		});
+
+		const resolved = await result.current.getUpdatedQuery({
+			widgetConfig: WIDGET_CONFIG,
+			dashboardData: {
+				data: {
+					variables: {
+						env: { name: 'env', selectedValue: 'prod' },
+					},
+				},
+			},
+		});
+
+		expect(mockGetSubstituteVars).toHaveBeenCalledTimes(1);
+		expect(resolved).toStrictEqual({ resolved: true });
+	});
+});
--- a/frontend/src/container/GridCardLayout/useResolveQuery.ts
+++ b/frontend/src/container/GridCardLayout/useResolveQuery.ts
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useMutation } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
+import { isEmpty } from 'lodash-es';
 import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -46,13 +47,21 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 			widgetConfig,
 			dashboardData,
 		}: UseUpdatedQueryOptions): Promise<Query> => {
+			const variables = getDashboardVariables(dashboardData?.data?.variables);
+
+			// `/substitute_vars` only rewrites `$variable` references, so on surfaces with no
+			// dashboard behind them (APM, Celery, API monitoring) the round-trip is a no-op.
+			if (isEmpty(variables) && isEmpty(dashboardDynamicVariables)) {
+				return widgetConfig.query;
+			}
+
 			// Prepare query payload with resolved variables
 			const { queryPayload } = prepareQueryRangePayloadV5({
 				query: widgetConfig.query,
 				graphType: getGraphType(widgetConfig.panelTypes),
 				selectedTime: widgetConfig.timePreferance,
 				globalSelectedInterval,
-				variables: getDashboardVariables(dashboardData?.data?.variables),
+				variables,
 				originalGraphType: widgetConfig.panelTypes,
 				dynamicVariables: dashboardDynamicVariables,
 			});
--- a/frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx
@@ -7,6 +7,7 @@ import TanStackTable, {
 	TableColumnDef,
 	useCalculatedPageSize,
 	useHiddenColumnIds,
+	useRecoverFromEmptyPage,
 	useTableParams,
 } from 'components/TanStackTableView';
 import { InfraMonitoringEvents } from 'constants/events';
@@ -136,6 +137,7 @@ export function K8sBaseList<
 		page: currentPage,
 		limit: currentPageSize,
 		setLimit,
+		setPage,
 	} = useTableParams(
 		{
 			page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
@@ -243,6 +245,16 @@ export function K8sBaseList<
 	const totalCount = data?.total || 0;
 	const hasFilters = !!expression?.trim();

+	useRecoverFromEmptyPage({
+		page: currentPage,
+		pageSize: currentPageSize,
+		rowCount: pageData.length,
+		total: totalCount,
+		isFetching: isLoading || isFetching,
+		isDisabled: isError || Boolean(data?.error),
+		setPage,
+	});
+
 	const getGroupKeyFn = useCallback(
 		(item: T) => getGroupedByMeta(item, groupBy),
 		[groupBy],
--- a/frontend/src/container/InfraMonitoringK8sV2/Base/K8sEmptyState.module.scss
+++ b/frontend/src/container/InfraMonitoringK8sV2/Base/K8sEmptyState.module.scss
@@ -51,4 +51,5 @@
 	gap: var(--spacing-3);
 	max-width: 500px;
 	padding: 24px;
+	max-height: 100%;
 }
--- a/frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx
@@ -37,7 +37,7 @@ import { useInfraMonitoringFontSize } from './useInfraMonitoringTablePreferences
 import styles from './K8sExpandedRow.module.scss';
 import { buildExpressionFromGroupMeta } from './utils';
 import { logInfraColumnSortedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
-import { getUnstableCurrentSearchParams } from 'container/TopNav/DateTimeSelectionV2/utils/getUnstableCurrentSearchParams';
+import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';
 import { QueryParams } from 'constants/query';

 const EXPANDED_ROW_LIMIT = 10;
--- a/frontend/src/container/InfraMonitoringK8sV2/Base/tests/K8sBaseList.test.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/Base/tests/K8sBaseList.test.tsx
@@ -591,12 +591,14 @@ describe('K8sBaseList', () => {
 	});

 	describe('with empty data', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
 		const fetchListDataMock = jest.fn<
 			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
 			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
 		>();

 		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
 			fetchListDataMock.mockClear();
 			fetchListDataMock.mockResolvedValue({
 				data: [],
@@ -605,6 +607,7 @@ describe('K8sBaseList', () => {
 			});

 			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
 				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
@@ -625,6 +628,177 @@ describe('K8sBaseList', () => {
 				expect(fetchListDataMock).toHaveBeenCalled();
 			});
 		});
+
+		it('should not rewrite the page when already on the first page', async () => {
+			await waitFor(() => {
+				expect(fetchListDataMock).toHaveBeenCalled();
+			});
+
+			const pageUpdates = onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get('page'))
+				.filter(Boolean);
+
+			expect(pageUpdates).toHaveLength(0);
+		});
+	});
+
+	describe('with a page beyond the end of the list', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
+			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
+		>();
+
+		// 25 rows exist, so pages 1-3 serve data and page 7 of 10 comes back empty.
+		const rows: TestItem[] = Array.from({ length: 25 }, (_, index) => ({
+			id: `pod-${index + 1}`,
+		}));
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			// Offset-aware on purpose: a mock that answers empty for every offset would let
+			// the assertions pass against a page the recovery has already moved on from.
+			fetchListDataMock.mockImplementation(async ({ offset = 0, limit = 10 }) => ({
+				data: rows.slice(offset, offset + limit),
+				total: rows.length,
+				error: null,
+			}));
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: { page: '7', pageSize: '10' },
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should send the user back to the last page holding data', async () => {
+			// The rows of page 3 on screen are what proves the recovery settled there,
+			// rather than passing through on its way somewhere else.
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			const pageUpdates = onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get('page'))
+				.filter(Boolean);
+
+			expect(pageUpdates).toStrictEqual(['3']);
+		});
+
+		it('should correct the page in a single hop', async () => {
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			// Only the original out-of-range page and the corrected one are requested.
+			expect(
+				fetchListDataMock.mock.calls.map((call) => call[0].offset),
+			).toStrictEqual([60, 20]);
+		});
+
+		it('should replace the history entry instead of pushing the correction', async () => {
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === '3',
+			);
+
+			expect(pageCorrection?.[0].options.history).toBe('replace');
+		});
+	});
+
+	describe('with a page below the first one', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
+			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
+		>();
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			// page=0 turns into offset=-10, which the API rejects outright — the list
+			// can only recover by clamping the page, never by reading the response.
+			fetchListDataMock.mockImplementation(async ({ offset = 0 }) => {
+				if (offset < 0) {
+					throw new APIError({
+						httpStatusCode: 400,
+						error: {
+							code: 'invalid_input',
+							message: 'offset cannot be negative',
+							url: '',
+							errors: [],
+						},
+					});
+				}
+
+				return { data: [{ id: 'pod-1' }], total: 1, error: null };
+			});
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: { page: '0', pageSize: '10' },
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should reject the request that carried the negative offset', async () => {
+			await waitFor(() => {
+				expect(
+					fetchListDataMock.mock.calls.some((call) => call[0].offset === -10),
+				).toBe(true);
+			});
+
+			await expect(
+				fetchListDataMock.mock.results[0].value as Promise<unknown>,
+			).rejects.toThrow('offset cannot be negative');
+		});
+
+		it('should clamp the page to the first one even though the request failed', async () => {
+			await waitFor(() => {
+				expect(onUrlUpdateMock).toHaveBeenCalled();
+			});
+
+			// Page 1 is the default, so the correction drops the param rather than
+			// writing `page=1`.
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === null,
+			);
+
+			expect(pageCorrection).toBeDefined();
+			expect(pageCorrection?.[0].queryString).toBe('?pageSize=10');
+		});
+
+		it('should replace the history entry instead of pushing the correction', async () => {
+			await waitFor(() => {
+				expect(onUrlUpdateMock).toHaveBeenCalled();
+			});
+
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === null,
+			);
+
+			expect(pageCorrection?.[0].options.history).toBe('replace');
+		});
+
+		it('should refetch with a non-negative offset after clamping', async () => {
+			await waitFor(() => {
+				expect(
+					fetchListDataMock.mock.calls.some((call) => call[0].offset === 0),
+				).toBe(true);
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('pod-1')).toBeInTheDocument();
+			});
+		});
 	});

 	describe('with error response', () => {
--- a/frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.tsx
@@ -82,6 +82,7 @@ function EntityLogsContent({
 	const { activeLog, selectedTab, handleSetActiveLog, handleCloseLogDetail } =
 		useLogDetailHandlers();

+	// TODO: Move away from using onAddToQuery after old drawer cleanup
 	const onAddToQuery = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string): void => {
 			handleCloseLogDetail();
@@ -104,6 +105,21 @@ function EntityLogsContent({
 		[userExpression, querySearchOnRun, handleCloseLogDetail, category],
 	);

+	const onApplyLogFilter = useCallback(
+		(expression: string): void => {
+			handleCloseLogDetail();
+
+			const newUser = userExpression.trim()
+				? `${userExpression} AND ${expression}`
+				: expression;
+
+			querySearchOnRun(newUser);
+
+			logInfraDrawerFilterCustomizedEvent(category, 'logs', newUser, 'logs');
+		},
+		[userExpression, querySearchOnRun, handleCloseLogDetail, category],
+	);
+
 	const {
 		logs,
 		loadMoreLogs,
@@ -328,6 +344,7 @@ function EntityLogsContent({
 						selectedTab={selectedTab}
 						onAddToQuery={onAddToQuery}
 						onClickActionItem={onAddToQuery}
+						onApplyLogFilter={onApplyLogFilter}
 						onScrollToLog={handleScrollToLog}
 						handleOpenInExplorer={(e) => handleOpenInExplorer(e, activeLog)}
 						getContainer={(): HTMLElement =>
--- a/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx
@@ -47,6 +47,7 @@ import {
 	useInfraMonitoringCategory,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
+	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from './hooks';

@@ -67,6 +68,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setOrderBy] = useInfraMonitoringOrderBy();
 	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
+	const [, setCurrentPage] = useInfraMonitoringPageListing();

 	const compositeQuery = useGetCompositeQueryParam();
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -218,6 +220,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			void setSelectedCategory(key as string);
 			void setOrderBy(null);
 			void setGroupBy(null);
+			void setCurrentPage(null);
 			setSelectedItemParams(null);
 			redirectWithQueryBuilderData({
 				...currentQuery,
--- a/frontend/src/container/InfraMonitoringK8sV2/tests/InfraMonitoringK8s.test.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/tests/InfraMonitoringK8s.test.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter as MemoryRouterV5 } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { NuqsTestingAdapter, UrlUpdateEvent } from 'nuqs/adapters/testing';
+import { AppProvider } from 'providers/App/App';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import TimezoneProvider from 'providers/Timezone';
+import store from 'store';
+
+import { K8sCategories } from '../constants';
+import InfraMonitoringK8s from '../InfraMonitoringK8s';
+
+// Quick filters fire their own field APIs and are irrelevant to pagination.
+jest.mock('components/QuickFilters/QuickFilters', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="quick-filters" />,
+}));
+
+// The list owns its own page recovery; stubbing it keeps the page param under the
+// sole control of the category handler being tested here.
+jest.mock('../Base/K8sDynamicList', () => ({
+	__esModule: true,
+	K8sDynamicList: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
+	default: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
+}));
+
+// Analytics only; jsdom lacks the Performance navigation entries it reads.
+jest.mock('lib/navigation', () => ({
+	getNavigationReferrer: (): string => 'direct',
+}));
+
+function renderPage(
+	queryParams: Record<string, string>,
+	onUrlUpdate: jest.Mock<void, [UrlUpdateEvent]>,
+): void {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	render(
+		<MemoryRouter>
+			<MemoryRouterV5>
+				<TimezoneProvider>
+					<QueryClientProvider client={queryClient}>
+						<AppProvider>
+							<Provider store={store}>
+								<NuqsTestingAdapter
+									searchParams={queryParams}
+									onUrlUpdate={onUrlUpdate}
+								>
+									<TooltipProvider>
+										<QueryBuilderProvider>
+											<InfraMonitoringK8s />
+										</QueryBuilderProvider>
+									</TooltipProvider>
+								</NuqsTestingAdapter>
+							</Provider>
+						</AppProvider>
+					</QueryClientProvider>
+				</TimezoneProvider>
+			</MemoryRouterV5>
+		</MemoryRouter>,
+	);
+}
+
+describe('InfraMonitoringK8s', () => {
+	describe('when the category changes from a page other than the first', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+
+		beforeEach(async () => {
+			onUrlUpdateMock.mockClear();
+
+			renderPage(
+				{ category: K8sCategories.PODS, page: '3', pageSize: '10' },
+				onUrlUpdateMock,
+			);
+
+			await screen.findByTestId(`category-${K8sCategories.NODES}`);
+		});
+
+		it('should drop the page so the new category starts at the first one', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
+
+			// Page 3 of pods says nothing about nodes — keeping it asks the new entity
+			// for an offset it may not have. The param is cleared rather than set to 1,
+			// since an absent page already means the first one.
+			await waitFor(() => {
+				const categorySwitch = onUrlUpdateMock.mock.calls.find(
+					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
+				);
+
+				expect(categorySwitch).toBeDefined();
+				expect(categorySwitch?.[0].searchParams.get('page')).toBeNull();
+			});
+		});
+
+		it('should keep the page size, which is not category specific', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
+
+			await waitFor(() => {
+				const categorySwitch = onUrlUpdateMock.mock.calls.find(
+					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
+				);
+
+				expect(categorySwitch?.[0].searchParams.get('pageSize')).toBe('10');
+			});
+		});
+
+		it('should leave the page alone when the same category is clicked again', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.PODS}`));
+
+			await waitFor(() => {
+				expect(screen.getByTestId('k8s-dynamic-list')).toBeInTheDocument();
+			});
+
+			const droppedPage = onUrlUpdateMock.mock.calls.some(
+				(call) => !call[0].searchParams.has('page'),
+			);
+
+			expect(droppedPage).toBe(false);
+		});
+	});
+});
--- a/frontend/src/container/InfraMonitoringK8sV2/hooks.ts
+++ b/frontend/src/container/InfraMonitoringK8sV2/hooks.ts
@@ -34,6 +34,9 @@ export const useInfraMonitoringPageListing = (): UseQueryStateReturn<
 > =>
 	useQueryState(
 		INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
+		// do not use .withDefault here, this can cause bugs when
+		// two hooks of nuqs define default twice, this is also
+		// defined at useTableParams
 		parseAsInteger.withOptions(defaultNuqsOptions),
 	);

--- a/frontend/src/container/LLMObservability/Overview/Overview.tsx
+++ b/frontend/src/container/LLMObservability/Overview/Overview.tsx
@@ -9,7 +9,11 @@ function Overview(): JSX.Element {

 	return (
 		<div className={styles.overview} data-testid="llm-observability-overview">
-			<DashboardContainer dashboard={dashboard} refetch={refetch} />
+			<DashboardContainer
+				dashboard={dashboard}
+				refetch={refetch}
+				canEditDashboardOverride={false}
+			/>
 		</div>
 	);
 }
--- a/frontend/src/container/LLMObservability/Overview/json/dashboard.json
+++ b/frontend/src/container/LLMObservability/Overview/json/dashboard.json
@@ -1,7 +1,7 @@
 {
  "id": "llm-observability-overview",
  "orgId": "",
-  "locked": true,
+  "locked": false,
  "name": "AI Observability Overview",
  "schemaVersion": "v6",
  "source": "system",
@@ -1146,4 +1146,4 @@
      }
    ]
  }
-}
+}
--- a/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/constants.ts
@@ -2806,8 +2806,8 @@ export const hostWidgetInfo = [
 			'The 1m, 5m and 15m load averages together; 1m above 15m means load is building.',
 	},
 	{
-		title: 'Network usage (bytes)',
-		yAxisUnit: 'bytes',
+		title: 'Network usage',
+		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/host-monitoring/#network-usage-bytes',
 		description:
 			'Throughput in bytes/s per interface and direction, to spot NICs nearing rated bandwidth.',
@@ -2841,8 +2841,8 @@ export const hostWidgetInfo = [
 			'Active connection counts per protocol and state (ESTABLISHED, TIME_WAIT, SYN_RECV) to spot leaks and churn.',
 	},
 	{
-		title: 'System disk io (bytes transferred)',
-		yAxisUnit: 'bytes',
+		title: 'System disk IO',
+		yAxisUnit: 'binBps',
 		docPath: '/infrastructure-monitoring/host-monitoring/#system-disk-io-bytes',
 		description:
 			'Disk throughput in bytes/s per device and direction, tracking heavy file I/O or database flushes.',
--- a/frontend/src/container/LogDetailedView/Overview.styles.scss
+++ b/frontend/src/container/LogDetailedView/Overview.styles.scss
@@ -1,4 +1,21 @@
 .overview-container {
+	.data-viewer {
+		min-height: 500px;
+	}
+
+	.pretty-view__search-wrapper {
+		background: var(--l2-background);
+	}
+
+	.pretty-view__search-input {
+		background: var(--l2-background) !important;
+	}
+
+	.log-body-value {
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
+
 	.tag {
 		border-radius: 20px;
 		border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
--- a/frontend/src/container/LogDetailedView/Overview.tsx
+++ b/frontend/src/container/LogDetailedView/Overview.tsx
@@ -13,21 +13,35 @@ import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronRight, Search } from '@signozhq/icons';
+import { useIsLogDetailsV2 } from 'components/LogDetail/useIsLogDetailsV2';
+import { DataViewer } from 'periscope/components/DataViewer';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';

 import { ActionItemProps } from './ActionItem';
+import { useLogAttributeActions } from './hooks/useLogAttributeActions';
 import TableView from './TableView';
-import { getBodyDisplayString, removeEscapeCharacters } from './utils';
+import {
+	aggregateAttributesResourcesToObject,
+	buildPrettyViewData,
+	getBodyDisplayString,
+	getSanitizedLogBody,
+	removeEscapeCharacters,
+} from './utils';

 import './Overview.styles.scss';

+// Skip body sanitization above this size. sanitization is expensive and fails
+// for large bodies
+const MAX_BODY_SANITIZE_CHARS = 64 * 1024;
+
 interface OverviewProps {
 	logData: ILog;
 	isListViewPanel?: boolean;
 	selectedOptions: OptionsQuery;
 	listViewPanelSelectedFields?: IField[] | null;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	onApplyLogFilter?: (expression: string) => void;
 }

 type Props = OverviewProps &
@@ -42,6 +56,7 @@ function Overview({
 	selectedOptions,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
+	onApplyLogFilter,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
 	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
@@ -51,6 +66,55 @@ function Overview({

 	const isDarkMode = useIsDarkMode();

+	const { actions, visibleActions } = useLogAttributeActions({
+		handleChangeSelectedView,
+		isListViewPanel,
+		onApplyLogFilter,
+	});
+
+	const isLogDetailsV2 = useIsLogDetailsV2();
+
+	if (isLogDetailsV2) {
+		const raw = aggregateAttributesResourcesToObject(logData);
+		const prettyData = buildPrettyViewData(raw);
+		return (
+			<div className="overview-container">
+				<DataViewer
+					data={prettyData}
+					drawerKey="logs-details"
+					fontSize={13}
+					prettyViewProps={{
+						actions,
+						visibleActions,
+						renderLeafValue: (value, keyPath): ReactNode | undefined => {
+							// Sanitize (unescape + ANSI→color) string values under `body`.
+							// Skip huge ones (render raw, still safe) to avoid the sanitize
+							// choke;
+							if (
+								typeof value !== 'string' ||
+								keyPath[keyPath.length - 1] !== 'body' ||
+								value.length > MAX_BODY_SANITIZE_CHARS
+							) {
+								return undefined;
+							}
+							return (
+								<span
+									className="log-body-value"
+									// Safe: getSanitizedLogBody runs the value through dompurify.
+									// eslint-disable-next-line react/no-danger
+									dangerouslySetInnerHTML={{
+										__html: getSanitizedLogBody(value, { shouldEscapeHtml: true }),
+									}}
+								/>
+							);
+						},
+					}}
+					jsonString={JSON.stringify(raw, null, 2)}
+				/>
+			</div>
+		);
+	}
+
 	const options: EditorProps['options'] = {
 		automaticLayout: true,
 		readOnly: true,
--- a/frontend/src/container/LogDetailedView/constants.ts
+++ b/frontend/src/container/LogDetailedView/constants.ts
@@ -0,0 +1,13 @@
+export enum LogAttributeBucket {
+	ATTRIBUTES = 'attributes',
+	RESOURCES = 'resource',
+	SCOPE = 'scope',
+}
+
+export enum LogDetailsAction {
+	COPY = 'copy',
+	FILTER_IN = 'filter-in',
+	FILTER_OUT = 'filter-out',
+	GROUP_BY = 'group-by',
+	REPLACE_FILTER = 'replace-filter',
+}
--- a/frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx
+++ b/frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx
@@ -0,0 +1,268 @@
+import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { FeatureKeys } from 'constants/features';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import {
+	FieldContext,
+	PrettyViewAction,
+	VisibleActionsConfig,
+} from 'periscope/components/PrettyView/PrettyView';
+import { useAppContext } from 'providers/App/App';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import { LogDetailsAction } from '../constants';
+import {
+	buildLogFilterTarget,
+	getFilterQueryData,
+	getGroupByQueryData,
+	getReplaceFilterQueryData,
+} from '../logAttributeActions.utils';
+
+interface UseLogAttributeActionsParams {
+	handleChangeSelectedView?: ChangeViewFunctionType;
+	isListViewPanel?: boolean;
+	onApplyLogFilter?: (expression: string) => void;
+}
+
+interface UseLogAttributeActionsResult {
+	actions: PrettyViewAction[];
+	visibleActions: VisibleActionsConfig;
+}
+
+const COPY_ONLY_ACTIONS = [LogDetailsAction.COPY];
+const ALL_LEAF_ACTIONS = [
+	LogDetailsAction.COPY,
+	LogDetailsAction.FILTER_IN,
+	LogDetailsAction.FILTER_OUT,
+	LogDetailsAction.GROUP_BY,
+	LogDetailsAction.REPLACE_FILTER,
+];
+
+/**
+ * PrettyView filter/group-by/replace actions for the log-details drawer (keys mapped via
+ * buildLogFilterTarget). Also owns `visibleActions` (leaf/nested + list-panel copy-only).
+ */
+export function useLogAttributeActions({
+	handleChangeSelectedView,
+	isListViewPanel = false,
+	onApplyLogFilter,
+}: UseLogAttributeActionsParams): UseLogAttributeActionsResult {
+	const { pathname } = useLocation();
+	const { stagedQuery, updateQueriesData } = useQueryBuilder();
+	const { featureFlags } = useAppContext();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
+
+	const isOldExplorerOrLive =
+		pathname === ROUTES.OLD_LOGS_EXPLORER || pathname === ROUTES.LIVE_LOGS;
+
+	const filterFor = useCallback(
+		(context: FieldContext, isFilterIn: boolean): void => {
+			const target = buildLogFilterTarget(
+				context.fieldKeyPath,
+				context.fieldValue,
+				isBodyJsonQueryEnabled,
+			);
+			const operator = isFilterIn
+				? target.filterInOperator
+				: target.filterOutOperator;
+
+			// Non-explorer surfaces (infra monitoring, etc.) apply a ready v5
+			// expression fragment to their own query.
+			if (onApplyLogFilter) {
+				const base = {
+					filters: { items: [], op: 'AND' },
+				} as unknown as IBuilderQuery;
+				const nextFilters = getFilterQueryData(
+					base,
+					target,
+					context.fieldValue,
+					operator,
+				).filters ?? { items: [], op: 'AND' };
+				const { expression } = convertFiltersToExpression(nextFilters);
+				if (expression) {
+					onApplyLogFilter(expression);
+				}
+				return;
+			}
+
+			if (!stagedQuery) {
+				return;
+			}
+
+			const updatedQuery = updateQueriesData(
+				stagedQuery,
+				'queryData',
+				(item, index) =>
+					index === 0
+						? getFilterQueryData(item, target, context.fieldValue, operator)
+						: item,
+			);
+
+			const queryData: ICurrentQueryData = {
+				name: viewName,
+				id: updatedQuery.id,
+				query: updatedQuery,
+			};
+			handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
+		},
+		[
+			stagedQuery,
+			isBodyJsonQueryEnabled,
+			updateQueriesData,
+			viewName,
+			handleChangeSelectedView,
+			onApplyLogFilter,
+		],
+	);
+
+	const groupBy = useCallback(
+		(context: FieldContext): void => {
+			if (!stagedQuery) {
+				return;
+			}
+			const target = buildLogFilterTarget(
+				context.fieldKeyPath,
+				context.fieldValue,
+				isBodyJsonQueryEnabled,
+			);
+			if (!target.groupBySupported || !target.groupByKey) {
+				return;
+			}
+
+			const updatedQuery = updateQueriesData(
+				stagedQuery,
+				'queryData',
+				(item, index) => (index === 0 ? getGroupByQueryData(item, target) : item),
+			);
+
+			const queryData: ICurrentQueryData = {
+				name: viewName,
+				id: updatedQuery.id,
+				query: updatedQuery,
+			};
+			handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
+		},
+		[
+			stagedQuery,
+			isBodyJsonQueryEnabled,
+			updateQueriesData,
+			viewName,
+			handleChangeSelectedView,
+		],
+	);
+
+	const replaceFilter = useCallback(
+		(context: FieldContext): void => {
+			if (!stagedQuery) {
+				return;
+			}
+			const target = buildLogFilterTarget(
+				context.fieldKeyPath,
+				context.fieldValue,
+				isBodyJsonQueryEnabled,
+			);
+
+			const updatedQuery = updateQueriesData(
+				stagedQuery,
+				'queryData',
+				(item, index) =>
+					index === 0
+						? getReplaceFilterQueryData(item, target, context.fieldValue)
+						: item,
+			);
+
+			const queryData: ICurrentQueryData = {
+				name: viewName,
+				id: updatedQuery.id,
+				query: updatedQuery,
+			};
+			handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
+		},
+		[
+			stagedQuery,
+			isBodyJsonQueryEnabled,
+			updateQueriesData,
+			viewName,
+			handleChangeSelectedView,
+		],
+	);
+
+	const actions: PrettyViewAction[] = useMemo(() => {
+		const isRestricted = (fieldKeyPath: (string | number)[]): boolean =>
+			buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
+				.isRestricted;
+
+		// The using surface must provide an apply path.
+		const canApplyFilter = !!handleChangeSelectedView || !!onApplyLogFilter;
+
+		return [
+			{
+				key: LogDetailsAction.FILTER_IN,
+				label: 'Filter for value',
+				icon: <CirclePlus size={12} />,
+				onClick: (context): void => filterFor(context, true),
+				shouldHide: (_key, fieldKeyPath): boolean =>
+					!canApplyFilter || isRestricted(fieldKeyPath),
+			},
+			{
+				key: LogDetailsAction.FILTER_OUT,
+				label: 'Filter out value',
+				icon: <CircleMinus size={12} />,
+				onClick: (context): void => filterFor(context, false),
+				shouldHide: (_key, fieldKeyPath): boolean =>
+					!canApplyFilter || isRestricted(fieldKeyPath),
+			},
+			{
+				key: LogDetailsAction.GROUP_BY,
+				label: 'Group by field',
+				icon: <Layers size={12} />,
+				onClick: groupBy,
+				shouldHide: (_key, fieldKeyPath): boolean =>
+					!handleChangeSelectedView ||
+					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
+						.groupBySupported ||
+					isOldExplorerOrLive,
+			},
+			{
+				key: LogDetailsAction.REPLACE_FILTER,
+				label: 'Replace filters with this value',
+				icon: <RefreshCw size={12} />,
+				onClick: replaceFilter,
+				shouldHide: (_key, fieldKeyPath): boolean =>
+					!handleChangeSelectedView ||
+					isRestricted(fieldKeyPath) ||
+					isOldExplorerOrLive,
+			},
+		];
+	}, [
+		filterFor,
+		groupBy,
+		replaceFilter,
+		isBodyJsonQueryEnabled,
+		isOldExplorerOrLive,
+		handleChangeSelectedView,
+		onApplyLogFilter,
+	]);
+
+	const visibleActions = useMemo<VisibleActionsConfig>(
+		() => ({
+			leaf: isListViewPanel ? COPY_ONLY_ACTIONS : ALL_LEAF_ACTIONS,
+			nested: COPY_ONLY_ACTIONS,
+		}),
+		[isListViewPanel],
+	);
+
+	return { actions, visibleActions };
+}
--- a/frontend/src/container/LogDetailedView/logAttributeActions.utils.test.ts
+++ b/frontend/src/container/LogDetailedView/logAttributeActions.utils.test.ts
@@ -0,0 +1,246 @@
+import { MetricsType } from 'container/MetricsApplication/constant';
+
+import {
+	buildLogFilterTarget,
+	toTypedFilterValue,
+} from './logAttributeActions.utils';
+
+describe('buildLogFilterTarget', () => {
+	describe('attributes / resources / scope / top-level scalars', () => {
+		it('maps a top-level scalar to its bare key with =/!=, groupable', () => {
+			const t = buildLogFilterTarget(['severity_text'], 'ERROR', true);
+			expect(t).toMatchObject({
+				fieldKey: 'severity_text',
+				filterInOperator: '=',
+				filterOutOperator: '!=',
+				groupBySupported: true,
+				groupByKey: 'severity_text',
+				isRestricted: false,
+			});
+			expect(t.metricsType).toBeUndefined();
+		});
+
+		it('strips the `attributes` root to a bare dotted key + Tag type', () => {
+			expect(
+				buildLogFilterTarget(['attributes', 'http.method'], 'GET', true),
+			).toMatchObject({
+				fieldKey: 'http.method',
+				filterInOperator: '=',
+				metricsType: MetricsType.Tag,
+				groupBySupported: true,
+			});
+		});
+
+		it('maps `resources` with Resource type', () => {
+			expect(
+				buildLogFilterTarget(['resource', 'service.name'], 'api', true),
+			).toMatchObject({
+				fieldKey: 'service.name',
+				metricsType: MetricsType.Resource,
+			});
+		});
+
+		it('maps `scope` with Scope type', () => {
+			expect(
+				buildLogFilterTarget(['scope', 'name'], 'my-scope', true),
+			).toMatchObject({ fieldKey: 'name', metricsType: MetricsType.Scope });
+		});
+
+		it('offers group-by for attributes now', () => {
+			expect(
+				buildLogFilterTarget(['attributes', 'k'], 'v', true).groupBySupported,
+			).toBe(true);
+		});
+	});
+
+	describe('nested attribute values (parsed JSON)', () => {
+		it('marks a sub-field of a parsed attribute copy-only (restricted, no group-by)', () => {
+			const t = buildLogFilterTarget(['attributes', 'payload', 'x'], 1, true);
+			expect(t.isRestricted).toBe(true);
+			expect(t.groupBySupported).toBe(false);
+			expect(t.groupByKey).toBeUndefined();
+		});
+
+		it('leaves a top-level attribute (depth 2) filterable', () => {
+			const t = buildLogFilterTarget(['attributes', 'payload'], 'v', true);
+			expect(t.isRestricted).toBe(false);
+			expect(t.groupBySupported).toBe(true);
+		});
+
+		it('does not restrict nested resource/scope values', () => {
+			expect(
+				buildLogFilterTarget(['resource', 'k8s', 'pod'], 'p', true).isRestricted,
+			).toBe(false);
+			expect(
+				buildLogFilterTarget(['scope', 'a', 'b'], 'v', true).isRestricted,
+			).toBe(false);
+		});
+	});
+
+	describe('restricted fields (timestamp / id)', () => {
+		it.each(['timestamp', 'id'])(
+			'marks %s restricted with no group-by',
+			(key) => {
+				const t = buildLogFilterTarget([key], 'v', true);
+				expect(t.isRestricted).toBe(true);
+				expect(t.groupBySupported).toBe(false);
+				expect(t.groupByKey).toBeUndefined();
+			},
+		);
+	});
+
+	describe('group-by-restricted fields (trace_id)', () => {
+		it('allows filtering but not group-by on top-level trace_id', () => {
+			const t = buildLogFilterTarget(['trace_id'], 'abc123', true);
+			expect(t.isRestricted).toBe(false);
+			expect(t.filterInOperator).toBe('=');
+			expect(t.groupBySupported).toBe(false);
+			expect(t.groupByKey).toBeUndefined();
+		});
+
+		it.each([
+			['resource', ['resource', 'trace_id']],
+			['attributes', ['attributes', 'trace_id']],
+		])(
+			'blocks group-by on a %s field named trace_id, keeping filter',
+			(_bucket, path) => {
+				const t = buildLogFilterTarget(path as string[], 'abc123', true);
+				expect(t.isRestricted).toBe(false);
+				expect(t.filterInOperator).toBe('=');
+				expect(t.groupBySupported).toBe(false);
+				expect(t.groupByKey).toBeUndefined();
+			},
+		);
+	});
+
+	describe('body scalars', () => {
+		it('maps a top-level body scalar to body.<key> with =/!=, groupable when json body on', () => {
+			const t = buildLogFilterTarget(['body', 'message'], 'hello', true);
+			expect(t).toMatchObject({
+				fieldKey: 'body.message',
+				filterInOperator: '=',
+				filterOutOperator: '!=',
+				groupBySupported: true,
+				groupByKey: 'body.message',
+				isRestricted: false,
+			});
+			expect(t.dataType).toBeDefined();
+			expect(t.metricsType).toBeUndefined();
+		});
+
+		it('maps a nested body scalar to a dotted body key', () => {
+			expect(buildLogFilterTarget(['body', 'a', 'b'], 'x', true)).toMatchObject({
+				fieldKey: 'body.a.b',
+				groupBySupported: true,
+				groupByKey: 'body.a.b',
+			});
+		});
+
+		it('does not offer group-by when USE_JSON_BODY is off', () => {
+			const t = buildLogFilterTarget(['body', 'message'], 'hello', false);
+			expect(t.groupBySupported).toBe(false);
+			expect(t.groupByKey).toBeUndefined();
+			expect(t.fieldKey).toBe('body.message');
+		});
+
+		it('filters the whole `body` field when body is an unparsed string leaf', () => {
+			expect(buildLogFilterTarget(['body'], 'raw text', true)).toMatchObject({
+				fieldKey: 'body',
+				filterInOperator: '=',
+				groupBySupported: false,
+			});
+		});
+
+		it('restricts a body leaf named `timestamp` (no filter / group-by)', () => {
+			const t = buildLogFilterTarget(['body', 'timestamp'], '2026-01-01', true);
+			expect(t.fieldKey).toBe('body.timestamp');
+			expect(t.isRestricted).toBe(true);
+			expect(t.groupBySupported).toBe(false);
+			expect(t.groupByKey).toBeUndefined();
+		});
+
+		it('restricts a nested body leaf named `timestamp`', () => {
+			const t = buildLogFilterTarget(['body', 'obj', 'timestamp'], 'x', true);
+			expect(t.isRestricted).toBe(true);
+			expect(t.groupBySupported).toBe(false);
+		});
+
+		it('restricts a body leaf named `id` (uses RESTRICTED_SELECTED_FIELDS)', () => {
+			expect(buildLogFilterTarget(['body', 'id'], 'abc', true).isRestricted).toBe(
+				true,
+			);
+		});
+
+		it('does not restrict an ordinary body leaf', () => {
+			expect(
+				buildLogFilterTarget(['body', 'message'], 'hello', true).isRestricted,
+			).toBe(false);
+		});
+	});
+
+	describe('body arrays', () => {
+		it('uses has()/!has() on the array key for a primitive array element', () => {
+			const t = buildLogFilterTarget(['body', 'tags', 0], 'urgent', true);
+			expect(t).toMatchObject({
+				fieldKey: 'body.tags',
+				filterInOperator: 'has',
+				groupBySupported: false,
+			});
+			expect(t.filterOutOperator).toContain('has');
+			expect(t.filterOutOperator).not.toBe('has');
+		});
+
+		it('collapses deep array-element paths to a []-marked has() key', () => {
+			expect(
+				buildLogFilterTarget(
+					['body', 'config', 'features', 1, 'items', 0, 'variants', 2],
+					'ballpen',
+					true,
+				),
+			).toMatchObject({
+				fieldKey: 'body.config.features[].items[].variants',
+				filterInOperator: 'has',
+			});
+		});
+
+		it('maps a field nested inside an array element with =/!= and a []-marked key, no group-by', () => {
+			expect(
+				buildLogFilterTarget(['body', 'items', 2, 'sku'], 'ABC', true),
+			).toMatchObject({
+				fieldKey: 'body.items[].sku',
+				filterInOperator: '=',
+				filterOutOperator: '!=',
+				groupBySupported: false,
+			});
+		});
+
+		it('uses the [*] string-body marker for an array element when USE_JSON_BODY is off', () => {
+			expect(
+				buildLogFilterTarget(['body', 'tags', 0], 'urgent', false),
+			).toMatchObject({ fieldKey: 'body.tags[*]', filterInOperator: 'has' });
+		});
+
+		it('uses [*] for a field nested inside an array element when USE_JSON_BODY is off', () => {
+			expect(
+				buildLogFilterTarget(['body', 'items', 2, 'sku'], 'ABC', false),
+			).toMatchObject({ fieldKey: 'body.items[*].sku', filterInOperator: '=' });
+		});
+	});
+});
+
+describe('toTypedFilterValue', () => {
+	const run = (value: unknown): unknown => toTypedFilterValue(value);
+
+	it('keeps numbers/booleans as their JS type (so the expression stays unquoted)', () => {
+		expect(run(848)).toBe(848);
+		expect(typeof run(848)).toBe('number');
+		expect(run(1.1)).toBe(1.1);
+		expect(run(true)).toBe(true);
+		expect(typeof run(true)).toBe('boolean');
+	});
+
+	it('passes strings through unchanged (no numeric inference)', () => {
+		expect(run('unknown_service')).toBe('unknown_service');
+		expect(typeof run('12345')).toBe('string');
+	});
+});
--- a/frontend/src/container/LogDetailedView/logAttributeActions.utils.ts
+++ b/frontend/src/container/LogDetailedView/logAttributeActions.utils.ts
@@ -0,0 +1,241 @@
+import { v4 as uuid } from 'uuid';
+import {
+	negateOperator,
+	OPERATORS,
+	QUERY_BUILDER_FUNCTIONS,
+} from 'constants/antlrQueryConstants';
+import { OPERATORS as QUERY_BUILDER_OPERATORS } from 'constants/queryBuilder';
+import {
+	RESTRICTED_GROUP_BY_FIELDS,
+	RESTRICTED_SELECTED_FIELDS,
+} from 'container/LogsFilters/config';
+import { MetricsType } from 'container/MetricsApplication/constant';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
+import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import { LogAttributeBucket } from './constants';
+import { generateFieldKeyForArray, getDataTypes } from './utils';
+
+export const toTypedFilterValue = (value: unknown): string =>
+	typeof value === 'number' || typeof value === 'boolean'
+		? (value as unknown as string)
+		: String(value);
+
+export interface LogFilterTarget {
+	fieldKey: string;
+	filterInOperator: string;
+	filterOutOperator: string;
+	dataType?: DataTypes;
+	metricsType?: MetricsType;
+	groupBySupported: boolean;
+	groupByKey?: string;
+	isRestricted: boolean;
+}
+
+// Collapse a body forward path into the query-builder key segment; array indices become
+// `[]` (json body on) or `[*]` (string body off — a distinct operator/search path).
+//   ['items', 2, 'sku'] -> 'items[].sku' (json on)  / 'items[*].sku' (off)
+//   ['tags', 0]         -> 'tags[]'      (json on)  / 'tags[*]'      (off)
+const collapseBodyPath = (
+	subpath: (string | number)[],
+	isBodyJsonQueryEnabled: boolean,
+): string => {
+	const arrayMarker = isBodyJsonQueryEnabled ? '[]' : '[*]';
+	let out = '';
+	subpath.forEach((seg) => {
+		if (typeof seg === 'number') {
+			out += arrayMarker;
+		} else {
+			out += out ? `.${seg}` : seg;
+		}
+	});
+	return out;
+};
+
+const metricsTypeForRoot = (root: string | number): MetricsType | undefined => {
+	if (root === LogAttributeBucket.ATTRIBUTES) {
+		return MetricsType.Tag;
+	}
+	if (root === LogAttributeBucket.RESOURCES) {
+		return MetricsType.Resource;
+	}
+	if (root === LogAttributeBucket.SCOPE) {
+		return MetricsType.Scope;
+	}
+	return undefined;
+};
+
+/**
+ * Map a PrettyView leaf (forward keyPath) to its query-builder filter/group-by target:
+ * scalars → `=`/`!=`, body array elements → `has`/`!has`; group-by gated by
+ * `groupBySupported`. Attribute/resource/scope carry a `metricsType` (Tag/Resource/Scope).
+ */
+export const buildLogFilterTarget = (
+	fieldKeyPath: (string | number)[],
+	value: unknown,
+	isBodyJsonQueryEnabled: boolean,
+): LogFilterTarget => {
+	const root = fieldKeyPath[0];
+
+	// Attributes / resources / scope / top-level scalars: bare dotted key, =/!=.
+	if (root !== 'body') {
+		const fieldKey =
+			fieldKeyPath.length > 1 ? fieldKeyPath.slice(1).join('.') : String(root);
+		// Temporarily removing filter/group-by support for nested attributes.
+		// This will be removed once backend starts to support these actions.
+		const isNestedAttributeValue =
+			root === LogAttributeBucket.ATTRIBUTES && fieldKeyPath.length > 2;
+
+		const isRestricted =
+			RESTRICTED_SELECTED_FIELDS.includes(fieldKey) || isNestedAttributeValue;
+
+		const groupBySupported =
+			!isRestricted && !RESTRICTED_GROUP_BY_FIELDS.includes(fieldKey);
+		return {
+			fieldKey,
+			filterInOperator: OPERATORS['='],
+			filterOutOperator: OPERATORS['!='],
+			dataType: getDataTypes(value),
+			metricsType: metricsTypeForRoot(root),
+			groupBySupported,
+			groupByKey: groupBySupported ? fieldKey : undefined,
+			isRestricted,
+		};
+	}
+
+	const subpath = fieldKeyPath.slice(1);
+
+	// Whole-body leaf (unparsed string body): filter on the `body` field itself.
+	if (subpath.length === 0) {
+		return {
+			fieldKey: 'body',
+			filterInOperator: OPERATORS['='],
+			filterOutOperator: OPERATORS['!='],
+			dataType: getDataTypes(value),
+			groupBySupported: false,
+			isRestricted: false,
+		};
+	}
+
+	const collapsed = collapseBodyPath(subpath, isBodyJsonQueryEnabled);
+	const isArrayElement = typeof subpath[subpath.length - 1] === 'number';
+
+	if (isArrayElement) {
+		// has(body.<array>, value): generateFieldKeyForArray strips the trailing value
+		// segment + `[]` exactly as the old BodyTitleRenderer.filterHandler did.
+		const fieldKey = generateFieldKeyForArray(
+			`${collapsed}.${String(value)}`,
+			getDataTypes(value),
+			isBodyJsonQueryEnabled,
+		);
+		return {
+			fieldKey,
+			filterInOperator: QUERY_BUILDER_FUNCTIONS.HAS,
+			filterOutOperator: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
+			dataType: getDataTypes([value]),
+			groupBySupported: false,
+			isRestricted: false,
+		};
+	}
+
+	const fieldKey = `body.${collapsed}`;
+	// Restrict body leaves whose own key is a restricted field (e.g. a JSON body's own
+	// `timestamp`/`id`/`date`) — hides filter / group-by, same as top-level fields.
+	const leafKey = String(subpath[subpath.length - 1]);
+	const isRestricted = RESTRICTED_SELECTED_FIELDS.includes(leafKey);
+	// Group by only for plain body scalars (no array anywhere in the path) with json
+	// body on — mirrors isGroupBySupported in the old BodyTitleRenderer.
+	const groupBySupported =
+		isBodyJsonQueryEnabled && !collapsed.includes('[]') && !isRestricted;
+	return {
+		fieldKey,
+		filterInOperator: OPERATORS['='],
+		filterOutOperator: OPERATORS['!='],
+		dataType: getDataTypes(value),
+		groupBySupported,
+		groupByKey: groupBySupported ? fieldKey : undefined,
+		isRestricted,
+	};
+};
+
+const normalizeDataType = (
+	dataType: DataTypes | undefined,
+): DataTypes | undefined =>
+	dataType && Object.values(DataTypes).includes(dataType) ? dataType : undefined;
+
+// Append a filter item (filter-in / filter-out) to a query-data item. The autocomplete
+// key is fabricated locally (empty source list), so no click-time getAggregateKeys fetch.
+export const getFilterQueryData = (
+	item: IBuilderQuery,
+	target: LogFilterTarget,
+	value: unknown,
+	operator: string,
+): IBuilderQuery => {
+	const filterKey = chooseAutocompleteFromCustomValue(
+		[],
+		target.fieldKey,
+		target.dataType,
+		target.metricsType,
+	);
+	return {
+		...item,
+		filters: {
+			items: [
+				...(item.filters?.items || []),
+				{
+					id: uuid(),
+					key: filterKey,
+					op: getOperatorValue(operator),
+					value: toTypedFilterValue(value),
+				},
+			],
+			op: item.filters?.op || 'AND',
+		},
+	};
+};
+
+// Append a group-by. Caller guards groupBySupported / groupByKey.
+export const getGroupByQueryData = (
+	item: IBuilderQuery,
+	target: LogFilterTarget,
+): IBuilderQuery => {
+	const newGroupByItem: BaseAutocompleteData = {
+		key: target.groupByKey || '',
+		type: target.metricsType || '',
+		dataType: normalizeDataType(target.dataType),
+	};
+	return { ...item, groupBy: [...(item.groupBy || []), newGroupByItem] };
+};
+
+// Replace all filters with a single IN filter on this value.
+export const getReplaceFilterQueryData = (
+	item: IBuilderQuery,
+	target: LogFilterTarget,
+	value: unknown,
+): IBuilderQuery => {
+	const newFilterItem: BaseAutocompleteData = {
+		key: target.fieldKey,
+		type: target.metricsType || '',
+		dataType: normalizeDataType(target.dataType),
+	};
+	return {
+		...item,
+		filters: {
+			items: [
+				{
+					id: '',
+					key: newFilterItem,
+					op: QUERY_BUILDER_OPERATORS.IN,
+					value: [toTypedFilterValue(value)],
+				},
+			],
+			op: 'AND',
+		},
+		filter: { expression: '' },
+	};
+};
--- a/frontend/src/container/LogDetailedView/util.test.ts
+++ b/frontend/src/container/LogDetailedView/util.test.ts
@@ -1,12 +1,121 @@
+import { ILog } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';

 import {
+	aggregateAttributesResourcesToObject,
+	buildPrettyViewData,
 	flattenObject,
 	getDataTypes,
 	getSanitizedLogBody,
+	parseJsonStringValue,
 	recursiveParseJSON,
 } from './utils';

+describe('parseJsonStringValue', () => {
+	it('parses a JSON-object string into an object', () => {
+		expect(parseJsonStringValue('{"a":1,"b":{"c":2}}')).toStrictEqual({
+			a: 1,
+			b: { c: 2 },
+		});
+	});
+
+	it('parses a JSON-array string into an array', () => {
+		expect(parseJsonStringValue('[1,2,3]')).toStrictEqual([1, 2, 3]);
+	});
+
+	it('returns a plain (non-JSON) string unchanged', () => {
+		expect(parseJsonStringValue('plain log line')).toBe('plain log line');
+	});
+
+	it('returns a string that is not object/array-looking unchanged', () => {
+		expect(parseJsonStringValue('42')).toBe('42');
+	});
+
+	it('returns an invalid JSON string unchanged', () => {
+		expect(parseJsonStringValue('{not valid}')).toBe('{not valid}');
+	});
+
+	it('returns an already-object value unchanged (same reference)', () => {
+		const value = { message: 'hi', a: 1 };
+		expect(parseJsonStringValue(value)).toBe(value);
+	});
+
+	it('leaves a value larger than the 128KB parse guard as a string', () => {
+		const huge = `{"x":"${'a'.repeat(130 * 1024)}"}`;
+		expect(parseJsonStringValue(huge)).toBe(huge);
+	});
+});
+
+describe('buildPrettyViewData', () => {
+	const baseRaw = {
+		id: 'log-1',
+		timestamp: 1234,
+		body: 'hello',
+		attributes: {},
+		resource: {},
+		scope: {},
+	} as any;
+
+	it('parses a JSON-string body into a tree', () => {
+		const result = buildPrettyViewData({ ...baseRaw, body: '{"a":1}' });
+		expect(result.body).toStrictEqual({ a: 1 });
+	});
+
+	it('parses attribute values that are JSON strings, leaves others as-is', () => {
+		const result = buildPrettyViewData({
+			...baseRaw,
+			attributes: { payload: '{"x":1}', name: 'cart', count: 3 },
+		});
+		expect(result.attributes).toStrictEqual({
+			payload: { x: 1 },
+			name: 'cart',
+			count: 3,
+		});
+	});
+
+	it('drops undefined fields so they do not render as empty rows', () => {
+		const result = buildPrettyViewData({ ...baseRaw, trace_id: undefined });
+		expect('trace_id' in result).toBe(false);
+	});
+});
+
+describe('aggregateAttributesResourcesToObject', () => {
+	const mockLog = {
+		id: 'log-1',
+		timestamp: 1234,
+		body: 'hello',
+		severity_text: 'INFO',
+		severity_number: 9,
+		attributes_string: { 'http.method': 'GET' },
+		attributes_int: { retries: 3 },
+		resources_string: { 'service.name': 'cart' },
+		scope_string: { lib: 'otel' },
+	} as unknown as ILog;
+
+	it('merges attributes_/resources_/scope_ maps and keeps scalars + body', () => {
+		const result = aggregateAttributesResourcesToObject(mockLog);
+
+		expect(result.attributes).toStrictEqual({
+			'http.method': 'GET',
+			retries: 3,
+		});
+		expect(result.resource).toStrictEqual({ 'service.name': 'cart' });
+		expect(result.scope).toStrictEqual({ lib: 'otel' });
+		expect(result.body).toBe('hello');
+		expect(result.id).toBe('log-1');
+		expect(result.severity_text).toBe('INFO');
+	});
+
+	it('does not parse a JSON-string body (leaves it raw)', () => {
+		const result = aggregateAttributesResourcesToObject({
+			...mockLog,
+			body: '{"a":1}',
+		} as unknown as ILog);
+
+		expect(result.body).toBe('{"a":1}');
+	});
+});
+
 describe('recursiveParseJSON', () => {
 	it('should return an empty object if the input is not valid JSON', () => {
 		const result = recursiveParseJSON('not valid JSON');
--- a/frontend/src/container/LogDetailedView/utils.tsx
+++ b/frontend/src/container/LogDetailedView/utils.tsx
@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react';
 import Convert from 'ansi-to-html';
 import type { DataNode } from 'antd/es/tree';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -262,10 +263,11 @@ export const filterKeyForField = (field: string): string => {
 	return fieldAttribs?.newField || field;
 };

-export const aggregateAttributesResourcesToString = (logData: ILog): string => {
+export const aggregateAttributesResourcesToObject = (
+	logData: ILog,
+): ILogAggregateAttributesResources => {
 	const outputJson: ILogAggregateAttributesResources = {
 		body: logData.body,
-		date: logData.date,
 		id: logData.id,
 		severityNumber: logData.severityNumber,
 		severityText: logData.severityText,
@@ -274,29 +276,94 @@ export const aggregateAttributesResourcesToString = (logData: ILog): string => {
 		traceFlags: logData.traceFlags,
 		traceId: logData.traceId,
 		attributes: {},
-		resources: {},
+		resource: {},
 		scope: {},
 		severity_text: logData.severity_text,
 		severity_number: logData.severity_number,
 	};

 	Object.keys(logData).forEach((key) => {
+		if (key === 'date') {
+			return;
+		}
 		if (key.startsWith('attributes_')) {
 			outputJson.attributes = outputJson.attributes || {};
 			Object.assign(outputJson.attributes, logData[key as keyof ILog]);
 		} else if (key.startsWith('resources_')) {
-			outputJson.resources = outputJson.resources || {};
-			Object.assign(outputJson.resources, logData[key as keyof ILog]);
+			outputJson.resource = outputJson.resource || {};
+			Object.assign(outputJson.resource, logData[key as keyof ILog]);
 		} else if (key.startsWith('scope_string')) {
 			outputJson.scope = outputJson.scope || {};
 			Object.assign(outputJson.scope, logData[key as keyof ILog]);
 		} else {
-			// @ts-expect-error
+			// @ts-expect-error dynamic top-level copy
 			outputJson[key] = logData[key as keyof ILog];
 		}
 	});

-	return JSON.stringify(outputJson, null, 2);
+	// Show `timestamp` first and `id` last in the details view.
+	const { timestamp, id, ...rest } = outputJson;
+	return { timestamp, ...rest, id };
+};
+
+export const aggregateAttributesResourcesToString = (logData: ILog): string => {
+	try {
+		return JSON.stringify(aggregateAttributesResourcesToObject(logData), null, 2);
+	} catch (err) {
+		Sentry.captureException(err);
+		return '';
+	}
+};
+
+const MAX_JSON_PARSE_BYTES = 128 * 1024;
+
+// A JSON-encoded object/array string is parsed so DataViewer renders it as a tree
+// instead of one escaped string; non-JSON / plain-text values are returned unchanged.
+// Guarded against very large payloads.
+export const parseJsonStringValue = (value: unknown): unknown => {
+	if (typeof value !== 'string') {
+		return value;
+	}
+	const trimmed = value.trim();
+	const looksLikeJson = trimmed.startsWith('{') || trimmed.startsWith('[');
+	if (!looksLikeJson || trimmed.length > MAX_JSON_PARSE_BYTES) {
+		return value;
+	}
+	try {
+		const parsed = JSON.parse(trimmed);
+		return parsed !== null && typeof parsed === 'object' ? parsed : value;
+	} catch {
+		return value;
+	}
+};
+
+// Parse each attribute value that's a stringified JSON string into an object
+// Non-JSON values are left unchanged.
+const parseAttributeJsonValues = (
+	attributes: Record<string, unknown>,
+): Record<string, unknown> => {
+	const parsed: Record<string, unknown> = {};
+	Object.keys(attributes).forEach((key) => {
+		parsed[key] = parseJsonStringValue(attributes[key]);
+	});
+	return parsed;
+};
+
+export const buildPrettyViewData = (
+	raw: ILogAggregateAttributesResources,
+): Record<string, unknown> => {
+	const prettyData: Record<string, unknown> = { ...raw };
+	prettyData.body = parseJsonStringValue(raw.body);
+	prettyData.attributes = parseAttributeJsonValues(raw.attributes);
+
+	// drop undefined fields so they don't render as empty rows
+	Object.keys(prettyData).forEach((key) => {
+		if (prettyData[key] === undefined) {
+			delete prettyData[key];
+		}
+	});
+
+	return prettyData;
 };

 const isFloat = (num: number): boolean => num % 1 !== 0;
--- a/frontend/src/container/LogsFilters/config.ts
+++ b/frontend/src/container/LogsFilters/config.ts
@@ -2,6 +2,9 @@ import { blue, red } from '@ant-design/colors';

 export const RESTRICTED_SELECTED_FIELDS = ['timestamp', 'id'];

+// Fields that can be filtered on but not grouped by in the log details view.
+export const RESTRICTED_GROUP_BY_FIELDS = ['body', 'trace_id'];
+
 export const ICON_STYLE = {
 	PLUS: { color: blue[5] },
 	CLOSE: { color: red[5] },
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -124,6 +124,9 @@ function Application(): JSX.Element {
 				start: minTime,
 				end: maxTime,
 			}),
+		// the time range is part of the key, so without this every window change blanks the
+		// operations list and the widgets below are rebuilt with an empty `operation in []`
+		keepPreviousData: true,
 	});

 	const selectedTraceTags: string = JSON.stringify(
--- a/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
+++ b/frontend/src/container/MetricsExplorer/Inspect/tests/QueryBuilder.test.tsx
@@ -42,7 +42,7 @@ jest.mock('hooks/useDebounce', () => ({
 }));

 jest.mock(
-	'container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer',
+	'container/QueryBuilder/filters/OptionRenderer/OptionRenderer',
 	() => ({
 		__esModule: true,
 		default: ({ value }: { value: string }): JSX.Element => <span>{value}</span>,
--- a/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
+++ b/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
@@ -21,6 +21,7 @@ import azureMysqlUrl from '@/assets/Logos/azure-mysql.svg';
 import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
 import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
+import azureUrl from '@/assets/Logos/azure.svg';
 import basetenUrl from '@/assets/Logos/baseten.svg';
 import cassandraUrl from '@/assets/Logos/cassandra.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
@@ -28,6 +29,7 @@ import certManagerUrl from '@/assets/Logos/cert-manager.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
 import clickhouseUrl from '@/assets/Logos/clickhouse.svg';
 import cloudflareUrl from '@/assets/Logos/cloudflare.svg';
+import cloudnativePgUrl from '@/assets/Logos/cloudnative-pg.svg';
 import cloudwatchLogsUrl from '@/assets/Logos/cloudwatch-logs.svg';
 import cohereUrl from '@/assets/Logos/cohere.svg';
 import confluentKafkaUrl from '@/assets/Logos/confluent-kafka.svg';
@@ -39,6 +41,7 @@ import datadogUrl from '@/assets/Logos/datadog.svg';
 import dbosUrl from '@/assets/Logos/dbos.svg';
 import deepseekUrl from '@/assets/Logos/deepseek.svg';
 import denoUrl from '@/assets/Logos/deno.svg';
+import difyUrl from '@/assets/Logos/dify.svg';
 import dockerUrl from '@/assets/Logos/docker.svg';
 import documentLoadUrl from '@/assets/Logos/document-load.svg';
 import dotnetUrl from '@/assets/Logos/dotnet.svg';
@@ -70,6 +73,8 @@ import gcpCloudStorageUrl from '@/assets/Logos/gcp-cloud-storage.svg';
 import gcpComputeEngineUrl from '@/assets/Logos/gcp-compute-engine.svg';
 import gcpGkeUrl from '@/assets/Logos/gcp-gke.svg';
 import gcpVpcUrl from '@/assets/Logos/gcp-vpc.svg';
+import gcpUrl from '@/assets/Logos/gcp.svg';
+import githubCopilotUrl from '@/assets/Logos/github-copilot.svg';
 import githubUrl from '@/assets/Logos/github.svg';
 import goUrl from '@/assets/Logos/go.svg';
 import googleAdkUrl from '@/assets/Logos/google-adk.svg';
@@ -96,6 +101,8 @@ import javascriptUrl from '@/assets/Logos/javascript.svg';
 import jbossUrl from '@/assets/Logos/jboss.svg';
 import jenkinsUrl from '@/assets/Logos/jenkins.svg';
 import kafkaUrl from '@/assets/Logos/kafka.svg';
+import kedaUrl from '@/assets/Logos/keda.svg';
+import kongUrl from '@/assets/Logos/kong.svg';
 import kubernetesUrl from '@/assets/Logos/kubernetes.svg';
 import lambdaUrl from '@/assets/Logos/lambda.svg';
 import langchainUrl from '@/assets/Logos/langchain.svg';
@@ -114,6 +121,7 @@ import microsoftSqlServerUrl from '@/assets/Logos/microsoft-sql-server.svg';
 import mistralUrl from '@/assets/Logos/mistral.svg';
 import mongoUrl from '@/assets/Logos/mongo.svg';
 import n8nUrl from '@/assets/Logos/n8n.svg';
+import neonUrl from '@/assets/Logos/neon.svg';
 import newrelicUrl from '@/assets/Logos/newrelic.svg';
 import nextjsUrl from '@/assets/Logos/nextjs.svg';
 import nginxUrl from '@/assets/Logos/nginx.svg';
@@ -2859,6 +2867,25 @@ const onboardingConfigWithLinks = [
 					label: 'Traces',
 					imgUrl: lambdaUrl,
 					link: '/docs/aws-monitoring/lambda/lambda-traces/',
+					question: {
+						desc: 'Which runtime does your Lambda function use?',
+						helpText:
+							'Python, Node.js, Java, and Ruby use the OpenTelemetry auto-instrumentation layer. Go has no layer, so you add the SDK to your code.',
+						options: [
+							{
+								key: 'aws-lambda-traces-auto',
+								label: 'Python, Node.js, Java, Ruby',
+								imgUrl: lambdaUrl,
+								link: '/docs/aws-monitoring/lambda/lambda-traces/',
+							},
+							{
+								key: 'aws-lambda-traces-golang',
+								label: 'Go',
+								imgUrl: goUrl,
+								link: '/docs/aws-monitoring/lambda/lambda-traces-golang/',
+							},
+						],
+					},
 				},
 				{
 					key: 'aws-lambda-metrics',
@@ -5510,8 +5537,10 @@ const onboardingConfigWithLinks = [
 		module: 'metrics',
 		relatedSearchKeywords: [
 			'integrations',
+			'logs',
 			'metrics',
 			'supabase',
+			'supabase logs',
 			'supabase metrics',
 			'supabase monitoring',
 			'supabase observability',
@@ -5545,43 +5574,23 @@ const onboardingConfigWithLinks = [
 		label: 'Traefik',
 		imgUrl: opentelemetryUrl,
 		tags: ['infrastructure monitoring'],
-		module: 'infrastructure',
+		module: 'apm',
 		relatedSearchKeywords: [
 			'infrastructure',
 			'traefik',
-			'traefik access logs',
-			'traefik logs',
 			'traefik metrics',
 			'traefik monitoring',
 			'traefik observability',
 			'traefik tracing',
 		],
 		link: '/docs/tutorial/traefik-observability/',
-		question: {
-			desc: 'Which Traefik signals do you want to send to SigNoz?',
-			type: 'select',
-			options: [
-				{
-					key: 'traefik-metrics-traces',
-					label: 'Metrics & Traces',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/tutorial/traefik-observability/',
-				},
-				{
-					key: 'traefik-logs',
-					label: 'Access Logs',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/integrations/opentelemetry-traefik/',
-				},
-			],
-		},
 	},
 	{
 		dataSource: 'mongodb-atlas',
 		label: 'MongoDB (Atlas)',
 		imgUrl: mongoUrl,
 		tags: ['database'],
-		module: 'database',
+		module: 'metrics',
 		relatedSearchKeywords: [
 			'atlas',
 			'atlas metrics',
@@ -5600,36 +5609,15 @@ const onboardingConfigWithLinks = [
 		label: 'MySQL',
 		imgUrl: opentelemetryUrl,
 		tags: ['database'],
-		module: 'database',
+		module: 'metrics',
 		relatedSearchKeywords: [
 			'database',
 			'mysql',
-			'mysql error log',
-			'mysql logs',
 			'mysql metrics',
 			'mysql monitoring',
 			'mysql observability',
-			'mysql slow query log',
 		],
 		link: '/docs/metrics-management/mysql-metrics/',
-		question: {
-			desc: 'Which MySQL signals do you want to send to SigNoz?',
-			type: 'select',
-			options: [
-				{
-					key: 'mysql-metrics',
-					label: 'Metrics',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/metrics-management/mysql-metrics/',
-				},
-				{
-					key: 'mysql-logs',
-					label: 'Logs',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/integrations/opentelemetry-mysql/',
-				},
-			],
-		},
 	},
 	{
 		dataSource: 'jmx',
@@ -6992,5 +6980,514 @@ const onboardingConfigWithLinks = [
 		id: 'dspy',
 		link: '/docs/dspy-observability/',
 	},
+	{
+		dataSource: 'grok-build',
+		label: 'Grok Build',
+		imgUrl: grokUrl,
+		tags: ['LLM Monitoring'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'coding agent',
+			'grok build',
+			'grok build events',
+			'grok build logs',
+			'grok build metrics',
+			'grok build monitoring',
+			'grok build observability',
+			'llm',
+			'llm monitoring',
+			'metrics',
+			'monitoring',
+			'observability',
+			'otel grok build integration',
+			'terminal coding agent',
+			'token usage',
+			'xai',
+		],
+		id: 'grok-build',
+		link: '/docs/grok-build-observability/',
+	},
+	{
+		dataSource: 'neon',
+		label: 'Neon',
+		imgUrl: neonUrl,
+		tags: ['database'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'database',
+			'neon',
+			'neon database',
+			'neon db',
+			'neon logs',
+			'neon metrics',
+			'neon monitoring',
+			'neon observability',
+			'neondb',
+			'opentelemetry neon',
+			'postgres',
+			'postgresql',
+			'serverless postgres',
+		],
+		id: 'neon',
+		link: '/docs/integrations/opentelemetry-neondb/',
+	},
+	{
+		dataSource: 'dify',
+		label: 'Dify',
+		imgUrl: difyUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'ai agent',
+			'dify',
+			'dify monitoring',
+			'dify observability',
+			'dify traces',
+			'llm',
+			'llm monitoring',
+			'metrics',
+			'no code ai',
+			'observability',
+			'opentelemetry dify',
+			'traces',
+		],
+		id: 'dify',
+		link: '/docs/dify-observability/',
+	},
+	{
+		dataSource: 'firecrawl',
+		label: 'Firecrawl',
+		imgUrl: llmMonitoringUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'crawl',
+			'firecrawl',
+			'firecrawl metrics',
+			'firecrawl monitoring',
+			'firecrawl observability',
+			'firecrawl traces',
+			'llm',
+			'llm monitoring',
+			'opentelemetry firecrawl',
+			'scrape',
+			'traces',
+			'web scraping',
+		],
+		id: 'firecrawl',
+		link: '/docs/firecrawl-monitoring/',
+	},
+	{
+		dataSource: 'keda',
+		label: 'KEDA',
+		imgUrl: kedaUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'autoscaling',
+			'event driven autoscaling',
+			'keda',
+			'keda metrics',
+			'keda monitoring',
+			'kubernetes',
+			'kubernetes autoscaling',
+			'metrics',
+			'opentelemetry keda',
+			'scaled jobs',
+			'scaled objects',
+		],
+		id: 'keda',
+		link: '/docs/metrics-management/keda-metrics/',
+	},
+	{
+		dataSource: 'opentelemetry-collector-metrics',
+		label: 'OpenTelemetry Collector Metrics',
+		imgUrl: opentelemetryUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'collector health',
+			'collector internal metrics',
+			'collector metrics',
+			'metrics',
+			'opentelemetry',
+			'opentelemetry collector',
+			'otel collector',
+			'otelcol metrics',
+			'pipeline health',
+		],
+		id: 'opentelemetry-collector-metrics',
+		link: '/docs/metrics-management/opentelemetry-collector-metrics/',
+	},
+	{
+		dataSource: 'cloudnative-pg',
+		label: 'CloudNativePG',
+		imgUrl: cloudnativePgUrl,
+		tags: ['database'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'cloud native postgres',
+			'cloudnativepg',
+			'cnpg',
+			'cnpg metrics',
+			'database',
+			'kubernetes postgres',
+			'metrics',
+			'opentelemetry cloudnativepg',
+			'postgres',
+			'postgresql',
+		],
+		id: 'cloudnative-pg',
+		link: '/docs/metrics-management/opentelemetry-cloudnative-pg/',
+	},
+	{
+		dataSource: 'kong-gateway',
+		label: 'Kong Gateway',
+		imgUrl: kongUrl,
+		tags: ['infrastructure monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'api gateway',
+			'kong',
+			'kong gateway',
+			'kong logs',
+			'kong metrics',
+			'kong monitoring',
+			'kong observability',
+			'kong traces',
+			'opentelemetry kong',
+			'proxy',
+			'traces',
+		],
+		id: 'kong-gateway',
+		link: '/docs/integrations/kong-gateway/',
+	},
+	{
+		dataSource: 'github-copilot',
+		label: 'GitHub Copilot',
+		imgUrl: githubCopilotUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'coding agent',
+			'copilot',
+			'copilot chat',
+			'github copilot',
+			'github copilot metrics',
+			'github copilot monitoring',
+			'github copilot observability',
+			'github copilot traces',
+			'llm',
+			'llm monitoring',
+			'monitoring',
+			'observability',
+			'otel github copilot integration',
+			'traces',
+			'tracing',
+			'vs code',
+		],
+		id: 'github-copilot',
+		link: '/docs/github-copilot-monitoring/',
+	},
+	{
+		dataSource: 'serilog',
+		label: 'Serilog',
+		imgUrl: dotnetUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'.net',
+			'asp.net',
+			'c#',
+			'csharp',
+			'dotnet',
+			'dotnet logs',
+			'logging',
+			'logs',
+			'monitoring',
+			'observability',
+			'otel serilog integration',
+			'serilog',
+			'serilog logs',
+			'serilog sink',
+			'structured logging',
+		],
+		id: 'serilog',
+		link: '/docs/logs-management/send-logs/serilog-to-signoz/',
+	},
+	{
+		dataSource: 'gcp-integration',
+		label: 'GCP Integration',
+		imgUrl: gcpUrl,
+		tags: ['GCP'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'cloud monitoring metrics',
+			'connect gcp account',
+			'gcp',
+			'gcp integration',
+			'gcp manual setup',
+			'gcp metrics',
+			'gcp monitoring',
+			'gcp observability',
+			'gcp service account',
+			'google cloud',
+			'google cloud integration',
+			'metrics',
+			'monitoring',
+			'observability',
+			'opentelemetry collector gcp',
+		],
+		id: 'gcp-integration',
+		link: '/docs/integrations/gcp/gcp-integration/',
+	},
+	{
+		dataSource: 'azure-cosmos-db',
+		label: 'Azure Cosmos DB',
+		imgUrl: azureUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure cosmos db',
+			'azure integration',
+			'cosmos db',
+			'cosmosdb',
+			'database',
+			'metrics',
+			'monitoring',
+			'nosql',
+			'observability',
+			'one click azure',
+			'request units',
+		],
+		id: 'azure-cosmos-db',
+		link: '/integrations/azure?service=cosmosdb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-mongodb',
+		label: 'Azure MongoDB vCore',
+		imgUrl: mongoUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure mongodb',
+			'azure mongodb vcore',
+			'database',
+			'metrics',
+			'mongodb',
+			'mongodb vcore',
+			'monitoring',
+			'nosql',
+			'observability',
+			'one click azure',
+		],
+		id: 'azure-mongodb',
+		link: '/integrations/azure?service=mongodb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-postgresql-flexible-server',
+		label: 'Azure PostgreSQL Flexible Server',
+		imgUrl: postgresqlUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure postgresql',
+			'azure postgresql flexible server',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'postgres',
+			'postgresql',
+			'postgresql flexible server',
+		],
+		id: 'azure-postgresql-flexible-server',
+		link: '/integrations/azure?service=postgresqlflexibleserver',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-cache-redis',
+		label: 'Azure Cache for Redis',
+		imgUrl: redisUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure cache for redis',
+			'azure integration',
+			'azure redis',
+			'cache',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'redis',
+		],
+		id: 'azure-cache-redis',
+		link: '/integrations/azure?service=redis',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-sql-managed-instance',
+		label: 'Azure SQL Managed Instance',
+		imgUrl: azureSqlDatabaseMetricsUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure sql',
+			'azure sql managed instance',
+			'database',
+			'managed instance',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'sql server',
+		],
+		id: 'azure-sql-managed-instance',
+		link: '/integrations/azure?service=sqldatabasemi',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-cassandra-db',
+		label: 'Azure Managed Instance for Apache Cassandra',
+		imgUrl: cassandraUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'apache cassandra',
+			'azure',
+			'azure cassandra',
+			'azure integration',
+			'azure managed instance for apache cassandra',
+			'cassandra',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+		],
+		id: 'azure-cassandra-db',
+		link: '/integrations/azure?service=cassandradb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'gcp-cloud-sql-postgresql',
+		label: 'GCP Cloud SQL for PostgreSQL',
+		imgUrl: gcpCloudSqlUrl,
+		tags: ['GCP'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'cloud sql',
+			'cloud sql for postgresql',
+			'database',
+			'gcp',
+			'gcp integration',
+			'google cloud',
+			'metrics',
+			'monitoring',
+			'observability',
+			'postgres',
+			'postgresql',
+		],
+		id: 'gcp-cloud-sql-postgresql',
+		link: '/integrations/gcp?service=cloudsql_postgres',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'gcp-memorystore-redis',
+		label: 'GCP Memorystore for Redis',
+		imgUrl: redisUrl,
+		tags: ['GCP'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'cache',
+			'database',
+			'gcp',
+			'gcp integration',
+			'google cloud',
+			'memorystore',
+			'memorystore for redis',
+			'metrics',
+			'monitoring',
+			'observability',
+			'redis',
+		],
+		id: 'gcp-memorystore-redis',
+		link: '/integrations/gcp?service=memorystore_redis',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'supabase-logs',
+		label: 'Supabase Logs',
+		imgUrl: supabaseUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'database',
+			'logging',
+			'logs',
+			'postgres',
+			'postgresql',
+			'send supabase logs',
+			'supabase',
+			'supabase log drains',
+			'supabase logs',
+			'supabase observability',
+		],
+		id: 'supabase-logs',
+		link: '/docs/logs-management/send-logs/supabase-logs/',
+	},
+	{
+		dataSource: 'traefik-logs',
+		label: 'Traefik Access Logs',
+		imgUrl: opentelemetryUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'access logs',
+			'logging',
+			'logs',
+			'opentelemetry traefik',
+			'proxy',
+			'reverse proxy',
+			'traefik',
+			'traefik access logs',
+			'traefik logs',
+		],
+		id: 'traefik-logs',
+		link: '/docs/integrations/opentelemetry-traefik/',
+	},
+	{
+		dataSource: 'mysql-logs',
+		label: 'MySQL Logs',
+		imgUrl: opentelemetryUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'database',
+			'logging',
+			'logs',
+			'mysql',
+			'mysql error log',
+			'mysql general query log',
+			'mysql logs',
+			'mysql slow query log',
+			'opentelemetry mysql',
+		],
+		id: 'mysql-logs',
+		link: '/docs/integrations/opentelemetry-mysql/',
+	},
 ];
 export default onboardingConfigWithLinks;
--- a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx
@@ -2,14 +2,17 @@ import { useTranslation } from 'react-i18next';
 import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
 import { Form, Select, Space } from 'antd';
+import { FeatureKeys } from 'constants/features';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
+import { useAppContext } from 'providers/App/App';
 import { ProcessorData } from 'types/api/pipeline/def';

 import { formValidationRules } from '../config';
-import { processorFields, ProcessorFormField } from './config';
+import { ProcessorFormField } from './config';
 import CSVInput from './FormFields/CSVInput';
 import JsonFlattening from './FormFields/JsonFlattening';
 import { FormWrapper, PipelineIndexIcon, StyledSelect } from './styles';
+import { resolveProcessorFields } from './utils';

 import './styles.scss';

@@ -133,16 +136,23 @@ function ProcessorForm({
 	selectedProcessorData,
 	isAdd,
 }: ProcessorFormProps): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const isBodyJsonEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY)
+			?.active || false;
+
 	return (
 		<div className="processor-form-container">
-			{processorFields[processorType]?.map((fieldData: ProcessorFormField) => (
-				<ProcessorFieldInput
-					key={fieldData.name + String(fieldData.initialValue)}
-					fieldData={fieldData}
-					selectedProcessorData={selectedProcessorData}
-					isAdd={isAdd}
-				/>
-			))}
+			{resolveProcessorFields(processorType, isBodyJsonEnabled).map(
+				(fieldData: ProcessorFormField) => (
+					<ProcessorFieldInput
+						key={fieldData.name + String(fieldData.initialValue)}
+						fieldData={fieldData}
+						selectedProcessorData={selectedProcessorData}
+						isAdd={isAdd}
+					/>
+				),
+			)}
 		</div>
 	);
 }
--- a/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/utils.ts
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/utils.ts
@@ -0,0 +1,24 @@
+import { processorFields, ProcessorFormField } from './config';
+
+const BODY_PARSE_FROM = 'body';
+const JSON_BODY_PARSE_FROM = 'body.message';
+
+// With use_json_body the collector normalizes every body into a map before user
+// operators run, so a parser pointed at `body` gets a map it cannot read and
+// silently extracts nothing. The log text lives at body.message.
+export function resolveProcessorFields(
+	processorType: string,
+	isBodyJsonEnabled: boolean,
+): Array<ProcessorFormField> {
+	const fields = processorFields[processorType] ?? [];
+
+	if (!isBodyJsonEnabled) {
+		return fields;
+	}
+
+	return fields.map((field) =>
+		field.name === 'parse_from' && field.initialValue === BODY_PARSE_FROM
+			? { ...field, initialValue: JSON_BODY_PARSE_FROM }
+			: field,
+	);
+}
--- a/frontend/src/container/PipelinePage/tests/processorFieldDefaults.test.ts
+++ b/frontend/src/container/PipelinePage/tests/processorFieldDefaults.test.ts
@@ -0,0 +1,45 @@
+import { processorFields } from '../PipelineListsView/AddNewProcessor/config';
+import { resolveProcessorFields } from '../PipelineListsView/AddNewProcessor/utils';
+
+const parseFromDefault = (
+	fields: ReturnType<typeof resolveProcessorFields>,
+): unknown => fields.find((field) => field.name === 'parse_from')?.initialValue;
+
+describe('resolveProcessorFields', () => {
+	it.each(['grok_parser', 'regex_parser', 'json_parser'])(
+		'defaults %s parse_from to body.message when use_json_body is on',
+		(processorType) => {
+			expect(parseFromDefault(resolveProcessorFields(processorType, true))).toBe(
+				'body.message',
+			);
+		},
+	);
+
+	it.each(['grok_parser', 'regex_parser', 'json_parser'])(
+		'keeps %s parse_from as body when use_json_body is off',
+		(processorType) => {
+			expect(parseFromDefault(resolveProcessorFields(processorType, false))).toBe(
+				'body',
+			);
+		},
+	);
+
+	it('leaves parse_from defaults that do not point at the body alone', () => {
+		expect(parseFromDefault(resolveProcessorFields('time_parser', true))).toBe(
+			'attributes.timestamp',
+		);
+		expect(
+			parseFromDefault(resolveProcessorFields('severity_parser', true)),
+		).toBe('attributes.logLevel');
+	});
+
+	it('does not mutate the shared config', () => {
+		resolveProcessorFields('grok_parser', true);
+
+		expect(parseFromDefault(processorFields.grok_parser)).toBe('body');
+	});
+
+	it('returns an empty list for an unknown processor type', () => {
+		expect(resolveProcessorFields('does_not_exist', true)).toStrictEqual([]);
+	});
+});
--- a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

 import { OrderByFilterProps } from './filters/OrderByFilter/OrderByFilter.interfaces';

+export type WhereClauseConfig = {
+	customKey: string;
+	customOp: string;
+};
+
 type FilterConfigs = {
 	[Key in keyof Omit<IBuilderQuery, 'filters'>]: {
 		isHidden: boolean;
--- a/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx
@@ -1,45 +0,0 @@
-import { useMemo } from 'react';
-import { InputNumber, InputNumberProps } from 'antd';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { selectStyle } from '../QueryBuilderSearch/config';
-
-function AggregateEveryFilter({
-	onChange,
-	query,
-	disabled,
-}: AggregateEveryFilterProps): JSX.Element {
-	const isMetricsDataSource = useMemo(
-		() => query.dataSource === DataSource.METRICS,
-		[query.dataSource],
-	);
-
-	const onChangeHandler: InputNumberProps<number>['onChange'] = (event) => {
-		if (event && event >= 0) {
-			onChange(event);
-		}
-	};
-
-	const isDisabled =
-		(isMetricsDataSource && !query.aggregateAttribute?.key) || disabled;
-
-	return (
-		<InputNumber
-			placeholder="Enter in seconds"
-			disabled={isDisabled}
-			style={selectStyle}
-			value={query?.stepInterval}
-			onChange={onChangeHandler}
-			min={0}
-		/>
-	);
-}
-
-interface AggregateEveryFilterProps {
-	onChange: (values: number) => void;
-	query: IBuilderQuery;
-	disabled: boolean;
-}
-
-export default AggregateEveryFilter;
--- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
@@ -24,8 +24,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { ExtendedSelectOption } from 'types/common/select';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';

-import { selectStyle } from '../QueryBuilderSearch/config';
-import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
+import OptionRenderer from '../OptionRenderer/OptionRenderer';
 // ** Types
 import { AgregatorFilterProps } from './AggregatorFilter.intefaces';

--- a/frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx
+++ b/frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx
@@ -1,6 +1,6 @@
 import { InputNumber } from 'antd';

-import { selectStyle } from '../../QueryBuilderSearch/config';
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
 import { handleKeyDownLimitFilter } from '../../utils';
 import { LimitFilterProps } from './types';

--- a/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx
@@ -4,7 +4,7 @@ import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { MetricAggregateOperator } from 'types/common/queryBuilder';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';

-import { selectStyle } from '../../QueryBuilderSearch/config';
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
 import { OrderByProps } from './types';
 import { useOrderByFormulaFilter } from './useOrderByFormulaFilter';

--- a/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx
@@ -16,7 +16,7 @@ import {
 	mapLabelValuePairs,
 	orderByValueDelimiter,
 } from '../../OrderByFilter/utils';
-import { getRemoveOrderFromValue } from '../../QueryBuilderSearch/utils';
+import { getRemoveOrderFromValue } from '../../QueryBuilderSearchV2/utils';
 import { getUniqueOrderByValues, getValidOrderByResult } from '../../utils';
 import { IOrderByFormulaFilterProps } from './types';
 import { transformToOrderByStringValuesByFormula } from './utils';
--- a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
@@ -23,8 +23,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';

-import { selectStyle } from '../QueryBuilderSearch/config';
-import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
+import OptionRenderer from '../OptionRenderer/OptionRenderer';
 import { GroupByFilterProps } from './GroupByFilter.interfaces';

 export const GroupByFilter = memo(function GroupByFilter({
--- a/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx
@@ -1,31 +0,0 @@
-import { InputNumber } from 'antd';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { selectStyle } from '../QueryBuilderSearch/config';
-import { handleKeyDownLimitFilter } from '../utils';
-
-function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
-	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
-
-	const isDisabled = isMetricsDataSource && !query.aggregateAttribute?.key;
-
-	return (
-		<InputNumber
-			min={1}
-			type="number"
-			value={query.limit}
-			style={selectStyle}
-			disabled={isDisabled}
-			onChange={onChange}
-			onKeyDown={handleKeyDownLimitFilter}
-		/>
-	);
-}
-
-interface LimitFilterProps {
-	onChange: (values: number | null) => void;
-	query: IBuilderQuery;
-}
-
-export default LimitFilter;
--- a/frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.test.tsx
+++ b/frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.test.tsx
@@ -31,7 +31,7 @@ jest.mock('hooks/useDebounce', () => ({
 	default: <T,>(value: T): T => value,
 }));

-jest.mock('../QueryBuilderSearch/OptionRenderer', () => ({
+jest.mock('../OptionRenderer/OptionRenderer', () => ({
 	__esModule: true,
 	default: ({ value }: { value: string }): JSX.Element => <span>{value}</span>,
 }));
--- a/frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.tsx
+++ b/frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.tsx
@@ -16,8 +16,8 @@ import { MetricAggregation } from 'types/api/v5/queryRange';
 import { ExtendedSelectOption } from 'types/common/select';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';

-import { selectStyle } from '../QueryBuilderSearch/config';
-import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
+import OptionRenderer from '../OptionRenderer/OptionRenderer';

 import './MetricNameSelector.styles.scss';

--- a/frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx
+++ b/frontend/src/container/QueryBuilder/filters/OperatorsSelect/OperatorsSelect.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { Select } from 'antd';

 // ** Types
-import { selectStyle } from '../QueryBuilderSearch/config';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
 import { OperatorsSelectProps } from './OperatorsSelect.interfaces';

 export const OperatorsSelect = memo(function OperatorsSelect({
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.styles.scss
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.styles.scss
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.tsx
--- a/frontend/src/container/QueryBuilder/filters/OptionRenderer/style.ts
+++ b/frontend/src/container/QueryBuilder/filters/OptionRenderer/style.ts
@@ -0,0 +1,22 @@
+import { Badge } from '@signozhq/ui/badge';
+import styled from 'styled-components';
+
+export const TagContainer = styled(Badge).attrs({
+	color: 'secondary',
+	variant: 'outline',
+})`
+	&&& {
+		display: flex;
+		font-weight: 300;
+		font-size: 0.6rem;
+	}
+`;
+
+export const TagLabel = styled.span`
+	font-weight: 400;
+`;
+
+export const TagValue = styled.span`
+	text-transform: capitalize;
+	font-weight: 400;
+`;
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
@@ -5,7 +5,7 @@ import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { getParsedAggregationOptionsForOrderBy } from 'utils/aggregationConverter';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';

-import { selectStyle } from '../QueryBuilderSearch/config';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
 import { OrderByFilterProps } from './OrderByFilter.interfaces';
 import { useOrderByFilter } from './useOrderByFilter';

--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts
@@ -7,7 +7,7 @@ import { parse } from 'papaparse';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';

-import { getRemoveOrderFromValue } from '../QueryBuilderSearch/utils';
+import { getRemoveOrderFromValue } from '../QueryBuilderSearchV2/utils';
 import { getUniqueOrderByValues, getValidOrderByResult } from '../utils';
 import { ORDERBY_FILTERS } from './config';
 import { SIGNOZ_VALUE } from './constants';
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRendererForLogs.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRendererForLogs.tsx
@@ -1,70 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { Zap } from '@signozhq/icons';
-
-import { getOptionType } from './utils';
-
-import './QueryBuilderSearch.styles.scss';
-
-function OptionRendererForLogs({
-	label,
-	value,
-	dataType,
-	isIndexed,
-	setDynamicPlaceholder,
-}: OptionRendererProps): JSX.Element {
-	const optionType = getOptionType(label);
-
-	return (
-		<span
-			className="option"
-			onMouseEnter={(): void => setDynamicPlaceholder(value)}
-			onFocus={(): void => setDynamicPlaceholder(value)}
-		>
-			{optionType ? (
-				<Tooltip title={value} placement="topLeft">
-					<div className="logs-options-select">
-						<section className="left-section">
-							{isIndexed ? (
-								<Zap size={12} fill={Color.BG_AMBER_500} />
-							) : (
-								<div className="dot" />
-							)}
-							<Typography.Text className="text value" truncate={1}>
-								{value}
-							</Typography.Text>
-						</section>
-						<section className="right-section">
-							<div className="text tags data-type-tag">{dataType}</div>
-							<div className={cx('text tags option-type-tag', optionType)}>
-								<div className="dot" />
-								{optionType}
-							</div>
-						</section>
-					</div>
-				</Tooltip>
-			) : (
-				<Tooltip title={label} placement="topLeft">
-					<div className="without-option-type">
-						<div className="dot" />
-						<Typography.Text className="text" truncate={1}>
-							{label}
-						</Typography.Text>
-					</div>
-				</Tooltip>
-			)}
-		</span>
-	);
-}
-
-interface OptionRendererProps {
-	label: string;
-	value: string;
-	dataType: string;
-	isIndexed: boolean;
-	setDynamicPlaceholder: React.Dispatch<React.SetStateAction<string>>;
-}
-
-export default OptionRendererForLogs;
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/QueryBuilderSearch.styles.scss
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/QueryBuilderSearch.styles.scss
@@ -1,298 +0,0 @@
-.query-builder-search-container {
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.logs-popup {
-	&.hide-scroll {
-		.rc-virtual-list-holder {
-			height: 100px;
-		}
-	}
-}
-
-.logs-explorer-popup {
-	padding: 0px;
-	.ant-select-item-group {
-		padding: 12px 14px 8px 14px;
-		color: var(--muted-foreground);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px; /* 163.636% */
-		letter-spacing: 0.88px;
-		text-transform: uppercase;
-	}
-
-	.show-all-filter-props {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 13px;
-		width: 100%;
-		cursor: pointer;
-
-		.content {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			width: 100%;
-
-			.left-section {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-
-				.text:hover {
-					color: var(--l1-foreground);
-				}
-			}
-			.right-section {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-				.keyboard-shortcut-slash {
-					width: 16px;
-					height: 16px;
-					flex-shrink: 0;
-					border-radius: 2.286px;
-					border-top: 1.143px solid var(--l1-border);
-					border-right: 1.143px solid var(--l1-border);
-					border-bottom: 2.286px solid var(--l1-border);
-					border-left: 1.143px solid var(--l1-border);
-					background: var(--l2-background);
-				}
-			}
-		}
-	}
-
-	.show-all-filter-props:hover {
-		background: color-mix(
-			in srgb,
-			var(--l1-foreground) 4%,
-			transparent
-		) !important;
-	}
-
-	.example-queries {
-		cursor: default;
-		.heading {
-			padding: 12px 14px 8px 14px;
-			color: var(--muted-foreground);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 163.636% */
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-		}
-
-		.query-container {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-			padding: 0px 12px 12px 12px;
-			cursor: pointer;
-
-			.example-query {
-				display: flex;
-				padding: 4px 8px;
-				justify-content: center;
-				align-items: center;
-				gap: 10px;
-				border-radius: 2px;
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: -0.07px;
-				width: fit-content;
-			}
-
-			.example-query:hover {
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.ant-select-item-option-grouped {
-		padding-inline-start: 0px;
-		padding: 7px 13px;
-	}
-
-	.keyboard-shortcuts {
-		display: flex;
-		align-items: center;
-		border-radius: 0px 0px 4px 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		padding: 11px 16px;
-		cursor: default;
-
-		.icons {
-			width: 16px;
-			height: 16px;
-			flex-shrink: 0;
-			border-radius: 2.286px;
-			border-top: 1.143px solid var(--l3-background);
-			border-right: 1.143px solid var(--l3-background);
-			border-bottom: 2.286px solid var(--l3-background);
-			border-left: 1.143px solid var(--l3-background);
-			background: var(--l2-background);
-		}
-
-		.keyboard-text {
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.navigate {
-			display: flex;
-			align-items: center;
-			padding-right: 12px;
-			gap: 4px;
-			border-right: 1px solid var(--l1-border);
-		}
-
-		.update-query {
-			display: flex;
-			align-items: center;
-			margin-left: 12px;
-			gap: 4px;
-		}
-	}
-
-	.without-option-type {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-		.dot {
-			height: 5px;
-			width: 5px;
-			border-radius: 50%;
-			background-color: var(--l3-background);
-		}
-	}
-
-	.logs-options-select {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		.text {
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.tags {
-			display: flex;
-			height: 20px;
-			padding: 4px 8px;
-			justify-content: center;
-			align-items: center;
-			gap: 4px;
-			border-radius: 20px;
-		}
-
-		.dot {
-			height: 5px;
-			width: 5px;
-			border-radius: 50%;
-			flex-shrink: 0;
-		}
-
-		.left-section {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			width: 90%;
-
-			.dot {
-				background-color: var(--l3-background);
-			}
-
-			.value {
-				width: 100%;
-			}
-		}
-
-		.right-section {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-
-			.data-type-tag {
-				background: color-mix(in srgb, var(--l1-foreground) 8%, transparent);
-			}
-
-			.option-type-tag {
-				display: flex;
-				gap: 4px;
-				align-items: center;
-				padding: 0px 6px;
-				text-transform: capitalize;
-			}
-
-			.tag {
-				border-radius: 50px;
-				background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
-				color: var(--bg-sienna-400);
-
-				.dot {
-					background-color: var(--bg-sienna-400);
-				}
-			}
-
-			.resource {
-				border-radius: 50px;
-				background: color-mix(in srgb, var(--bg-sakura-400) 10%, transparent);
-				color: var(--bg-sakura-400);
-
-				.dot {
-					background-color: var(--bg-sakura-400);
-				}
-			}
-		}
-	}
-
-	.ant-select-item-option-active {
-		.logs-options-select {
-			.left-section {
-				.value {
-					color: var(--l1-foreground);
-				}
-			}
-		}
-	}
-}
-
-.span-scope-selector {
-	width: 160px;
-}
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -1,558 +0,0 @@
-import {
-	KeyboardEvent,
-	ReactElement,
-	ReactNode,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
-import { Button, Select, Spin, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import {
-	INFRA_LONG_TO_SHORT_OPERATOR_MAP,
-	OPERATORS,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { getDataTypes } from 'container/LogDetailedView/utils';
-import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import {
-	useAutoComplete,
-	WhereClauseConfig,
-} from 'hooks/queryBuilder/useAutoComplete';
-import { useFetchKeysAndValues } from 'hooks/queryBuilder/useFetchKeysAndValues';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isEqual, isUndefined } from 'lodash-es';
-import {
-	ArrowDown,
-	ArrowUp,
-	ChevronDown,
-	ChevronUp,
-	Command,
-	CornerDownLeft,
-	Filter,
-	Slash,
-} from '@signozhq/icons';
-import type { BaseSelectRef } from 'rc-select';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
-import { v4 as uuid } from 'uuid';
-
-import { selectStyle } from './config';
-import { PLACEHOLDER } from './constant';
-import ExampleQueriesRendererForLogs from './ExampleQueriesRendererForLogs';
-import OptionRenderer from './OptionRenderer';
-import OptionRendererForLogs from './OptionRendererForLogs';
-import { StyledCheckOutlined, TypographyText } from './style';
-import {
-	convertExampleQueriesToOptions,
-	getOperatorValue,
-	getRemovePrefixFromKey,
-	getTagToken,
-	isExistsNotExistsOperator,
-	isInNInOperator,
-} from './utils';
-
-import './QueryBuilderSearch.styles.scss';
-
-function getOperatorValueForContext(
-	op: string,
-	isInfraMonitoring?: boolean,
-): string {
-	const mappedOp =
-		isInfraMonitoring && INFRA_LONG_TO_SHORT_OPERATOR_MAP[op]
-			? INFRA_LONG_TO_SHORT_OPERATOR_MAP[op]
-			: op;
-	return getOperatorValue(mappedOp);
-}
-
-function QueryBuilderSearch({
-	query,
-	onChange,
-	whereClauseConfig,
-	className,
-	placeholder,
-	suffixIcon,
-	isInfraMonitoring,
-	isMetricsExplorer,
-	disableNavigationShortcuts,
-	entity,
-}: QueryBuilderSearchProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
-	const { pathname } = useLocation();
-	const isLogsExplorerPage = useMemo(
-		() => pathname === ROUTES.LOGS_EXPLORER,
-		[pathname],
-	);
-
-	const [isEditingTag, setIsEditingTag] = useState(false);
-
-	const {
-		updateTag,
-		handleClearTag,
-		handleKeyDown,
-		handleOnBlur,
-		handleSearch,
-		handleSelect,
-		tags,
-		options,
-		searchValue,
-		isMulti,
-		isFetching,
-		setSearchKey,
-		setSearchValue,
-		searchKey,
-		key,
-		exampleQueries,
-	} = useAutoComplete(
-		query,
-		whereClauseConfig,
-		isLogsExplorerPage,
-		isInfraMonitoring,
-		entity,
-		isMetricsExplorer,
-	);
-
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const [showAllFilters, setShowAllFilters] = useState<boolean>(false);
-	const [dynamicPlacholder, setDynamicPlaceholder] = useState<string>(
-		placeholder || '',
-	);
-	const selectRef = useRef<BaseSelectRef>(null);
-
-	const { sourceKeys, handleRemoveSourceKey } = useFetchKeysAndValues(
-		searchValue,
-		query,
-		searchKey,
-		isLogsExplorerPage,
-		isInfraMonitoring,
-		entity,
-		isMetricsExplorer,
-	);
-
-	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
-
-	const { handleRunQuery, currentQuery } = useQueryBuilder();
-
-	const toggleEditMode = useCallback(
-		(value: boolean) => {
-			// Editing mode is required only in infra monitoring or metrics explorer
-			if (isInfraMonitoring || isMetricsExplorer) {
-				setIsEditingTag(value);
-			}
-		},
-		[isInfraMonitoring, isMetricsExplorer],
-	);
-
-	const onTagRender = ({
-		value,
-		closable,
-		onClose,
-	}: CustomTagProps): ReactElement => {
-		const { tagOperator } = getTagToken(value);
-		const isInNin = isInNInOperator(tagOperator);
-		const chipValue = isInNin
-			? value?.trim()?.replace(/,\s*$/, '')
-			: value?.trim();
-
-		const onCloseHandler = (): void => {
-			onClose();
-			// Editing is done after closing a tag
-			toggleEditMode(false);
-			handleSearch('');
-			setSearchKey('');
-		};
-
-		const tagEditHandler = (value: string): void => {
-			updateTag(value);
-			// Editing starts
-			toggleEditMode(true);
-			if (isInfraMonitoring || isMetricsExplorer) {
-				setSearchValue(value);
-			} else {
-				handleSearch(value);
-			}
-		};
-
-		const isDisabled = !!searchValue;
-
-		return (
-			<Badge
-				color="vanilla"
-				closable={!searchValue && closable}
-				onClose={(e): void => {
-					e.preventDefault();
-					onCloseHandler();
-				}}
-			>
-				<Tooltip title={chipValue}>
-					<TypographyText
-						$isInNin={isInNin}
-						$isEnabled={!!searchValue}
-						onClick={(): void => {
-							if (!isDisabled) {
-								tagEditHandler(value);
-							}
-						}}
-					>
-						{chipValue}
-					</TypographyText>
-				</Tooltip>
-			</Badge>
-		);
-	};
-
-	const onChangeHandler = (value: string[]): void => {
-		if (!isMulti) {
-			handleSearch(value[value.length - 1]);
-		}
-	};
-
-	const onInputKeyDownHandler = (event: KeyboardEvent<Element>): void => {
-		if (isMulti || event.key === 'Backspace') {
-			handleKeyDown(event);
-		}
-		if (isExistsNotExistsOperator(searchValue)) {
-			handleKeyDown(event);
-		}
-
-		// Editing is done after enter key press
-		if (event.key === 'Enter') {
-			toggleEditMode(false);
-		}
-
-		if (
-			!disableNavigationShortcuts &&
-			(event.ctrlKey || event.metaKey) &&
-			event.key === 'Enter'
-		) {
-			event.preventDefault();
-			event.stopPropagation();
-			handleRunQuery();
-			setIsOpen(false);
-		}
-
-		if (
-			!disableNavigationShortcuts &&
-			(event.ctrlKey || event.metaKey) &&
-			event.key === '/'
-		) {
-			event.preventDefault();
-			event.stopPropagation();
-			setShowAllFilters((prev) => !prev);
-		}
-	};
-
-	const handleDeselect = useCallback(
-		(deselectedItem: string) => {
-			handleClearTag(deselectedItem);
-			handleRemoveSourceKey(deselectedItem);
-		},
-		[handleClearTag, handleRemoveSourceKey],
-	);
-
-	const isMetricsDataSource = useMemo(
-		() =>
-			query.dataSource === DataSource.METRICS &&
-			!isInfraMonitoring &&
-			!isMetricsExplorer,
-		[query.dataSource, isInfraMonitoring, isMetricsExplorer],
-	);
-
-	const fetchValueDataType = (value: unknown, operator: string): DataTypes => {
-		if (operator === OPERATORS.HAS || operator === OPERATORS.NHAS) {
-			return getDataTypes([value]);
-		}
-
-		return DataTypes.EMPTY;
-	};
-
-	const queryTags = useMemo(() => {
-		if (!query.aggregateAttribute?.key && isMetricsDataSource) {
-			return [];
-		}
-		return tags;
-	}, [isMetricsDataSource, query.aggregateAttribute?.key, tags]);
-
-	useEffect(() => {
-		const initialTagFilters: TagFilter = { items: [], op: 'AND' };
-		const initialSourceKeys = query.filters?.items?.map(
-			(item) => item.key as BaseAutocompleteData,
-		);
-
-		initialTagFilters.items = tags.map((tag) => {
-			const { tagKey, tagOperator, tagValue } = getTagToken(tag);
-
-			const filterAttribute = [
-				...(initialSourceKeys || []),
-				...(sourceKeys || []),
-			].find((key) => key?.key === getRemovePrefixFromKey(tagKey));
-
-			const computedTagValue =
-				tagValue && Array.isArray(tagValue) && tagValue[tagValue.length - 1] === ''
-					? tagValue?.slice(0, -1)
-					: (tagValue ?? '');
-
-			return {
-				id: uuid().slice(0, 8),
-				key: filterAttribute ?? {
-					key: tagKey,
-					dataType: fetchValueDataType(computedTagValue, tagOperator),
-					type: '',
-				},
-				op: getOperatorValueForContext(tagOperator, isInfraMonitoring),
-				value: computedTagValue,
-			};
-		});
-
-		// If in infra monitoring or metrics explorer, only run the onChange query when editing is finsished.
-		if (isInfraMonitoring || isMetricsExplorer) {
-			if (!isEditingTag) {
-				onChange(initialTagFilters);
-			}
-		} else {
-			onChange(initialTagFilters);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [sourceKeys]);
-
-	const isLastQuery = useMemo(
-		() =>
-			isEqual(
-				currentQuery.builder.queryData[currentQuery.builder.queryData.length - 1],
-				query,
-			),
-		[currentQuery, query],
-	);
-
-	useEffect(() => {
-		if (isLastQuery && !disableNavigationShortcuts) {
-			registerShortcut(LogsExplorerShortcuts.FocusTheSearchBar, () => {
-				// set timeout is needed here else the select treats the hotkey as input value
-				setTimeout(() => {
-					selectRef.current?.focus();
-				}, 0);
-			});
-		}
-
-		return (): void =>
-			deregisterShortcut(LogsExplorerShortcuts.FocusTheSearchBar);
-	}, [
-		deregisterShortcut,
-		disableNavigationShortcuts,
-		isLastQuery,
-		registerShortcut,
-	]);
-
-	useEffect(() => {
-		if (!isOpen) {
-			setDynamicPlaceholder(placeholder || '');
-		}
-	}, [isOpen, placeholder]);
-
-	const userOs = getUserOperatingSystem();
-
-	// conditional changes here to use a seperate component to render the example queries based on the option group label
-	const customRendererForLogsExplorer = options.map((option) => (
-		<Select.Option
-			key={`${option.label}-${option.type || ''}-${option.dataType || ''}`}
-			value={option.value}
-		>
-			<OptionRendererForLogs
-				label={option.label}
-				value={option.value}
-				dataType={option.dataType || ''}
-				isIndexed={option.isIndexed || false}
-				setDynamicPlaceholder={setDynamicPlaceholder}
-			/>
-			{option.selected && <StyledCheckOutlined />}
-		</Select.Option>
-	));
-
-	return (
-		<div className="query-builder-search-container">
-			<Select
-				data-testid={'qb-search-select'}
-				ref={selectRef}
-				getPopupContainer={getPopupContainer}
-				transitionName=""
-				choiceTransitionName=""
-				virtual={false}
-				showSearch
-				tagRender={onTagRender}
-				filterOption={false}
-				open={isOpen}
-				onDropdownVisibleChange={setIsOpen}
-				autoClearSearchValue={false}
-				mode="multiple"
-				placeholder={dynamicPlacholder}
-				value={queryTags}
-				searchValue={searchValue}
-				className={cx(
-					className,
-					isLogsExplorerPage ? 'logs-popup' : '',
-					!showAllFilters && options.length > 3 && !key ? 'hide-scroll' : '',
-				)}
-				rootClassName="query-builder-search"
-				disabled={isMetricsDataSource && !query.aggregateAttribute?.key}
-				style={selectStyle}
-				onSearch={handleSearch}
-				onChange={onChangeHandler}
-				onSelect={handleSelect}
-				onDeselect={handleDeselect}
-				onInputKeyDown={onInputKeyDownHandler}
-				notFoundContent={isFetching ? <Spin size="small" /> : null}
-				suffixIcon={
-					!isUndefined(suffixIcon) ? (
-						suffixIcon
-					) : isOpen ? (
-						<ChevronUp size={14} />
-					) : (
-						<ChevronDown size={14} />
-					)
-				}
-				showAction={['focus']}
-				onBlur={(e: React.FocusEvent<HTMLInputElement>): void => {
-					handleOnBlur(e);
-					// Editing is done after tapping out of the input
-					toggleEditMode(false);
-				}}
-				popupClassName={isLogsExplorerPage ? 'logs-explorer-popup' : ''}
-				dropdownRender={(menu): ReactElement => (
-					<div>
-						{!searchKey && isLogsExplorerPage && (
-							<div className="ant-select-item-group ">Suggested Filters</div>
-						)}
-						{menu}
-						{isLogsExplorerPage && (
-							<div>
-								{!searchKey && tags.length === 0 && (
-									<div className="example-queries">
-										<div className="heading"> Example Queries </div>
-										<div className="query-container">
-											{convertExampleQueriesToOptions(exampleQueries).map((query) => (
-												<ExampleQueriesRendererForLogs
-													key={query.label}
-													label={query.label}
-													value={query.value}
-													handleAddTag={onChange}
-												/>
-											))}
-										</div>
-									</div>
-								)}
-								{!key && !isFetching && !showAllFilters && options.length > 3 && (
-									<Button
-										type="text"
-										className="show-all-filter-props"
-										onClick={(): void => {
-											setShowAllFilters(true);
-											// when clicking on the button the search bar looses the focus
-											selectRef?.current?.focus();
-										}}
-									>
-										<div className="content">
-											<section className="left-section">
-												<Filter size={14} />
-												<Typography.Text className="text">
-													Show all filters properties
-												</Typography.Text>
-											</section>
-											<section className="right-section">
-												{userOs === UserOperatingSystem.MACOS ? (
-													<Command size={14} className="keyboard-shortcut-slash" />
-												) : (
-													<ChevronUp size={14} className="keyboard-shortcut-slash" />
-												)}
-												+
-												<Slash size={14} className="keyboard-shortcut-slash" />
-											</section>
-										</div>
-									</Button>
-								)}
-								<div className="keyboard-shortcuts">
-									<section className="navigate">
-										<ArrowDown size={10} className="icons" />
-										<ArrowUp size={10} className="icons" />
-										<span className="keyboard-text">to navigate</span>
-									</section>
-									<section className="update-query">
-										<CornerDownLeft size={10} className="icons" />
-										<span className="keyboard-text">to update query</span>
-									</section>
-								</div>
-							</div>
-						)}
-					</div>
-				)}
-			>
-				{isLogsExplorerPage
-					? customRendererForLogsExplorer
-					: options.map((option) => (
-							<Select.Option
-								key={`${option.label}-${option.type || ''}-${option.dataType || ''}`}
-								value={option.value}
-							>
-								<OptionRenderer
-									label={option.label}
-									value={option.value}
-									dataType={option.dataType || ''}
-									type={option.type || ''}
-								/>
-								{option.selected && <StyledCheckOutlined />}
-							</Select.Option>
-						))}
-			</Select>
-		</div>
-	);
-}
-
-interface QueryBuilderSearchProps {
-	query: IBuilderQuery;
-	onChange: (value: TagFilter) => void;
-	whereClauseConfig?: WhereClauseConfig;
-	className?: string;
-	placeholder?: string;
-	suffixIcon?: React.ReactNode;
-	isInfraMonitoring?: boolean;
-	disableNavigationShortcuts?: boolean;
-	// TODO: Remove the dependency of InfraMonitoring from this code
-	entity?: InfraMonitoringEntity | null;
-	isMetricsExplorer?: boolean;
-}
-
-QueryBuilderSearch.defaultProps = {
-	whereClauseConfig: undefined,
-	className: '',
-	placeholder: PLACEHOLDER,
-	suffixIcon: undefined,
-	isInfraMonitoring: false,
-	disableNavigationShortcuts: false,
-	entity: null,
-	isMetricsExplorer: false,
-};
-
-export interface CustomTagProps {
-	label: ReactNode;
-	value: string;
-	disabled: boolean;
-	onClose: () => void;
-	closable: boolean;
-}
-
-export default QueryBuilderSearch;
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/ExampleQueriesRendererForLogs.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/ExampleQueriesRendererForLogs.tsx
@@ -1,7 +1,5 @@
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';

-import './QueryBuilderSearch.styles.scss';
-
 function ExampleQueriesRendererForLogs({
 	label,
 	value,
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchDropdown.tsx
@@ -11,8 +11,8 @@ import {
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';

-import ExampleQueriesRendererForLogs from '../QueryBuilderSearch/ExampleQueriesRendererForLogs';
-import { convertExampleQueriesToOptions } from '../QueryBuilderSearch/utils';
+import ExampleQueriesRendererForLogs from './ExampleQueriesRendererForLogs';
+import { convertExampleQueriesToOptions } from './utils';
 import { ITag, Option } from './QueryBuilderSearchV2';

 import './QueryBuilderSearchV2.styles.scss';
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx
@@ -19,10 +19,10 @@ import {
 	QUERY_BUILDER_SEARCH_VALUES,
 } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import type { WhereClauseConfig } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
@@ -53,16 +53,16 @@ import { DataSource } from 'types/common/queryBuilder';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';

-import { selectStyle } from '../QueryBuilderSearch/config';
-import { PLACEHOLDER } from '../QueryBuilderSearch/constant';
-import { TypographyText } from '../QueryBuilderSearch/style';
+import { selectStyle } from './config';
+import { PLACEHOLDER } from './constant';
+import { TypographyText } from './style';
 import {
 	checkCommaInValue,
 	getOperatorFromValue,
 	getOperatorValue,
 	getTagToken,
 	isInNInOperator,
-} from '../QueryBuilderSearch/utils';
+} from './utils';
 import { filterByOperatorConfig } from '../utils';
 import QueryBuilderSearchDropdown from './QueryBuilderSearchDropdown';
 import SpanScopeSelector from './SpanScopeSelector';
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.tsx
@@ -7,7 +7,7 @@ import { isEmpty, isObject } from 'lodash-es';
 import { Check, Zap } from '@signozhq/icons';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';

-import { getTagToken } from '../QueryBuilderSearch/utils';
+import { getTagToken } from './utils';
 import { DropdownState } from './QueryBuilderSearchV2';

 import './Suggestions.styles.scss';
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/config.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/config.ts
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/constant.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/constant.ts
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/style.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/style.ts
@@ -1,5 +1,3 @@
-import { Check } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
 import styled from 'styled-components';

 export const TypographyText = styled.span<{
@@ -17,27 +15,3 @@ export const TypographyText = styled.span<{
 	padding-left: 8px;
 	${({ $disabled }): string => ($disabled ? 'opacity: 0.6' : '')}
 `;
-
-export const StyledCheckOutlined = styled(Check)`
-	float: right;
-`;
-
-export const TagContainer = styled(Badge).attrs({
-	color: 'secondary',
-	variant: 'outline',
-})`
-	&&& {
-		display: flex;
-		font-weight: 300;
-		font-size: 0.6rem;
-	}
-`;
-
-export const TagLabel = styled.span`
-	font-weight: 400;
-`;
-
-export const TagValue = styled.span`
-	text-transform: capitalize;
-	font-weight: 400;
-`;
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/utils.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/utils.ts
@@ -1,8 +1,7 @@
 import { OPERATORS } from 'constants/queryBuilder';
-import { MetricsType } from 'container/MetricsApplication/constant';
 import { queryFilterTags } from 'hooks/queryBuilder/useTag';
 import { parse } from 'papaparse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import type { TagFilter } from 'types/api/queryBuilder/queryBuilderData';

 import { orderByValueDelimiter } from '../OrderByFilter/utils';

@@ -191,18 +190,6 @@ export function getRemoveOrderFromValue(tag: string): string {
 	return tag;
 }

-export function getOptionType(label: string): MetricsType | undefined {
-	let optionType;
-
-	if (label.startsWith('tag_')) {
-		optionType = MetricsType.Tag;
-	} else if (label.startsWith('resource_')) {
-		optionType = MetricsType.Resource;
-	}
-
-	return optionType;
-}
-
 /**
 *
 * @param exampleQueries the example queries based on recommendation engine
--- a/frontend/src/container/QueryBuilder/filters/utils.ts
+++ b/frontend/src/container/QueryBuilder/filters/utils.ts
@@ -1,4 +1,3 @@
-import { AttributeValuesMap } from 'components/ClientSideQBSearch/ClientSideQBSearch';
 import { OperatorConfigKeys, OPERATORS_CONFIG } from 'constants/queryBuilder';
 import { HAVING_FILTER_REGEXP } from 'constants/regExp';
 import { IOption } from 'hooks/useResourceAttribute/types';
@@ -11,7 +10,7 @@ import {
 	orderByValueDelimiter,
 	splitOrderByFromString,
 } from './OrderByFilter/utils';
-import { getRemoveOrderFromValue } from './QueryBuilderSearch/utils';
+import { getRemoveOrderFromValue } from './QueryBuilderSearchV2/utils';

 export const handleKeyDownLimitFilter: React.KeyboardEventHandler<
 	HTMLInputElement
@@ -101,23 +100,6 @@ export const getValidOrderByResult = (result: IOption[]): IOption[] =>
 		return acc;
 	}, []);

-export const transformKeyValuesToAttributeValuesMap = (
-	attributeValuesMap: Record<string, string[] | number[] | boolean[]>,
-): AttributeValuesMap =>
-	Object.fromEntries(
-		Object.entries(attributeValuesMap || {}).map(([key, values]) => [
-			key,
-			{
-				stringAttributeValues:
-					typeof values[0] === 'string' ? (values as string[]) : [],
-				numberAttributeValues:
-					typeof values[0] === 'number' ? (values as number[]) : [],
-				boolAttributeValues:
-					typeof values[0] === 'boolean' ? (values as boolean[]) : [],
-			},
-		]),
-	);
-
 export const filterByOperatorConfig = (
 	options: IOption[],
 	key?: OperatorConfigKeys,
--- a/frontend/src/container/QueryTable/Drilldown/tests/useBaseAggregateOptions.test.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/tests/useBaseAggregateOptions.test.tsx
@@ -0,0 +1,88 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import useBaseAggregateOptions from '../useBaseAggregateOptions';
+
+const mockGetUpdatedQuery = jest.fn();
+const mockNotificationsError = jest.fn();
+
+jest.mock('container/GridCardLayout/useResolveQuery', () => ({
+	__esModule: true,
+	default: (): unknown => ({
+		getUpdatedQuery: mockGetUpdatedQuery,
+		isLoading: false,
+	}),
+}));
+
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): unknown => ({
+		notifications: { error: mockNotificationsError },
+	}),
+}));
+
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): unknown => ({ dashboardData: undefined }),
+}));
+
+jest.mock('hooks/dashboard/useContextVariables', () => ({
+	__esModule: true,
+	default: (): unknown => ({ processedVariables: {} }),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): unknown => ({ safeNavigate: jest.fn() }),
+}));
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({ pathname: '/services/socky-api' }),
+}));
+
+const QUERY = {
+	builder: {
+		queryData: [{ queryName: 'A', dataSource: 'traces', aggregations: [] }],
+	},
+} as unknown as Query;
+
+const AGGREGATE_DATA = { queryName: 'A', filters: [] };
+
+const renderOptions = (): ReturnType<typeof renderHook> =>
+	renderHook(() =>
+		useBaseAggregateOptions({
+			query: QUERY,
+			onClose: jest.fn(),
+			subMenu: '',
+			setSubMenu: jest.fn(),
+			aggregateData: AGGREGATE_DATA,
+			fieldVariables: {},
+		}),
+	);
+
+describe('useBaseAggregateOptions', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('notifies and keeps the unresolved query when variable resolution fails', async () => {
+		mockGetUpdatedQuery.mockRejectedValue(
+			new Error('syntax errors in expression'),
+		);
+
+		renderOptions();
+
+		await waitFor(() =>
+			expect(mockNotificationsError).toHaveBeenCalledWith({
+				message: 'Unable to resolve variables',
+			}),
+		);
+	});
+
+	it('does not notify when variable resolution succeeds', async () => {
+		mockGetUpdatedQuery.mockResolvedValue(QUERY);
+
+		renderOptions();
+
+		await waitFor(() => expect(mockGetUpdatedQuery).toHaveBeenCalled());
+		expect(mockNotificationsError).not.toHaveBeenCalled();
+	});
+});
--- a/Show More
+++ b/Show More