chore(sentry): bump packages to v10 & v5 for vite-plugin

* fix: mark numeric columns as aggregation in scalar query response

* fix: make py-fmt

* fix: comments

frontend/package.json

@@ -45,8 +45,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@grafana/data": "^11.6.14",
     "@monaco-editor/react": "^4.7.0",
-    "@sentry/react": "8.41.0",
-    "@sentry/vite-plugin": "2.22.6",
+    "@sentry/react": "10.57.0",
+    "@sentry/vite-plugin": "5.3.0",
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",

frontend/pnpm-lock.yaml

@@ -62,11 +62,11 @@ importers:
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.55.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@sentry/react':
-        specifier: 8.41.0
-        version: 8.41.0(react@18.2.0)
+        specifier: 10.57.0
+        version: 10.57.0(react@18.2.0)
       '@sentry/vite-plugin':
-        specifier: 2.22.6
-        version: 2.22.6
+        specifier: 5.3.0
+        version: 5.3.0
       '@signozhq/design-tokens':
         specifier: 2.1.4
         version: 2.1.4
@@ -3161,97 +3161,108 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@sentry-internal/browser-utils@8.41.0':
-    resolution: {integrity: sha512-nU7Bn3jEUmf1QXRUT3j2ewUBlFJpe9vnAnjqpeVPDWTsVI52BwVNcJHuE37PrGs66OZ1ZkGMfKnQk43oCAa+oQ==}
-    engines: {node: '>=14.18'}
+  '@sentry-internal/browser-utils@10.57.0':
+    resolution: {integrity: sha512-tXObp954rMTSYKlbftjVXHtNl4t/6ssks3jkqyzmKb+PDPWzabGQO7sWwqVuTjT8Kx/8A3FmriS1bGmqxiJy3A==}
+    engines: {node: '>=18'}
 
-  '@sentry-internal/feedback@8.41.0':
-    resolution: {integrity: sha512-bw+BrSNw8abOnu/IpD8YSbYubXkkT8jyNS7TM4e4UPZMuXcbtia7/r5d7kAiUfKv/sV5PNMlZLOk+EYJeLTANg==}
-    engines: {node: '>=14.18'}
+  '@sentry-internal/feedback@10.57.0':
+    resolution: {integrity: sha512-ZcF4QhkqGX3iiQSXB2N0N3Awp+j5iqnDRu6PA/qyLFrWqH5ZiiAAgu59OLD9E6XAdg6iFtLYw19MAMZVK8qNOQ==}
+    engines: {node: '>=18'}
 
-  '@sentry-internal/replay-canvas@8.41.0':
-    resolution: {integrity: sha512-lpgOBHWr1ZNxidD72A2pfoUMjIpwonOPYoQZWAHr86Oa3eIVQOyfklZlHW+gKPFl2/IEl9Lbtcke0JiDp3dkIQ==}
-    engines: {node: '>=14.18'}
+  '@sentry-internal/replay-canvas@10.57.0':
+    resolution: {integrity: sha512-zsfa4JcfV0AEc9YhNxNabd5lSZL2Av84saAyexGAqcHs+67m9Gd0cGStOzMb/nCl7UAtmdP0aI+G7a3rcxxN/A==}
+    engines: {node: '>=18'}
 
-  '@sentry-internal/replay@8.41.0':
-    resolution: {integrity: sha512-ByXEY7JI95y4Qr9fS3d28l9uuVU5Qa0HgL+xDmYElNx7CXz3Q9hFN6ibgUeC3h8BO5pDULxWNgAppl7FRY8N5w==}
-    engines: {node: '>=14.18'}
+  '@sentry-internal/replay@10.57.0':
+    resolution: {integrity: sha512-Wmnx/6ABynVH1iwuoNUqJNyjIUqsqoGML7qsyivBRKb5Wo2YQtPOQlQYfxfZSvWzGpcoSVdInkRjDssUQxQEQg==}
+    engines: {node: '>=18'}
 
-  '@sentry/babel-plugin-component-annotate@2.22.6':
-    resolution: {integrity: sha512-V2g1Y1I5eSe7dtUVMBvAJr8BaLRr4CLrgNgtPaZyMT4Rnps82SrZ5zqmEkLXPumlXhLUWR6qzoMNN2u+RXVXfQ==}
-    engines: {node: '>= 14'}
+  '@sentry/babel-plugin-component-annotate@5.3.0':
+    resolution: {integrity: sha512-p4q8gn8wcFqZGP/s2MnJCAAd8fTikaU6A0mM97RDHQgStcrYiaS0Sc5zUNfb1V+UOLPuvdEdL6MwyxfzjYJQTA==}
+    engines: {node: '>= 18'}
 
-  '@sentry/browser@8.41.0':
-    resolution: {integrity: sha512-FfAU55eYwW2lG4M3dEw2472RvHrD5YWSfHCZvuRf/4skX38kFvKghZQ+epL+CVHTzvIRHOrbj8qQK6YLTGl9ew==}
-    engines: {node: '>=14.18'}
+  '@sentry/browser@10.57.0':
+    resolution: {integrity: sha512-s36AQy/CKXTfyY9Z+qUhzNomntZXgfs0rbaK7q9ffnFkqcPwzE8qQtVs58y3Suut56u+AhwSztgQtERcuZ5VIA==}
+    engines: {node: '>=18'}
 
-  '@sentry/bundler-plugin-core@2.22.6':
-    resolution: {integrity: sha512-1esQdgSUCww9XAntO4pr7uAM5cfGhLsgTK9MEwAKNfvpMYJi9NUTYa3A7AZmdA8V6107Lo4OD7peIPrDRbaDCg==}
-    engines: {node: '>= 14'}
+  '@sentry/bundler-plugin-core@5.3.0':
+    resolution: {integrity: sha512-L5T60sWdAI3qWwdg3Ptwek/0TY59PERrxyqp4XMUkroayQvGd9r5dIW9Q1kSeXX9iJ442nXbFZKAOyCKV4Z13Q==}
+    engines: {node: '>= 18'}
 
-  '@sentry/cli-darwin@2.39.1':
-    resolution: {integrity: sha512-kiNGNSAkg46LNGatfNH5tfsmI/kCAaPA62KQuFZloZiemTNzhy9/6NJP8HZ/GxGs8GDMxic6wNrV9CkVEgFLJQ==}
+  '@sentry/cli-darwin@2.58.6':
+    resolution: {integrity: sha512-udAVvcyfNa0R+95GvPz/+43/N3TC0TYKdkQ7D7jhPSzbcMc7l2fxRNN5yB3UpCA5fWFnW4toeaqwDBhb/Wh3LA==}
     engines: {node: '>=10'}
     os: [darwin]
 
-  '@sentry/cli-linux-arm64@2.39.1':
-    resolution: {integrity: sha512-5VbVJDatolDrWOgaffsEM7znjs0cR8bHt9Bq0mStM3tBolgAeSDHE89NgHggfZR+DJ2VWOy4vgCwkObrUD6NQw==}
+  '@sentry/cli-linux-arm64@2.58.6':
+    resolution: {integrity: sha512-q8mEcNNmeXMy5i+jWT30TVpH7LcP4HD21CD5XRSPAd/a912HF6EpK0ybf/1USO14WOhoXbAGi9txwaWabSe33g==}
     engines: {node: '>=10'}
     cpu: [arm64]
-    os: [linux, freebsd]
+    os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-arm@2.39.1':
-    resolution: {integrity: sha512-DkENbxyRxUrfLnJLXTA4s5UL/GoctU5Cm4ER1eB7XN7p9WsamFJd/yf2KpltkjEyiTuplv0yAbdjl1KX3vKmEQ==}
+  '@sentry/cli-linux-arm@2.58.6':
+    resolution: {integrity: sha512-pD0LAt5PcUzAinBwvDqc66x9+2CabHEv486yP0gRjWO7SakbaxmfVq/EXd8VLq/Tzi39LAu422UYK1lpW3MILw==}
     engines: {node: '>=10'}
     cpu: [arm]
-    os: [linux, freebsd]
+    os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-i686@2.39.1':
-    resolution: {integrity: sha512-pXWVoKXCRrY7N8vc9H7mETiV9ZCz+zSnX65JQCzZxgYrayQPJTc+NPRnZTdYdk5RlAupXaFicBI2GwOCRqVRkg==}
+  '@sentry/cli-linux-i686@2.58.6':
+    resolution: {integrity: sha512-q8vNJi1eOV/4vxAFWBsEwLHoSYapaZHIf4j76KJGJXFKTkEbsjCOOsKbwUIBTQQhRgV4DFWh3ryfsPS/que4Kg==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
-    os: [linux, freebsd]
+    os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-x64@2.39.1':
-    resolution: {integrity: sha512-IwayNZy+it7FWG4M9LayyUmG1a/8kT9+/IEm67sT5+7dkMIMcpmHDqL8rWcPojOXuTKaOBBjkVdNMBTXy0mXlA==}
+  '@sentry/cli-linux-x64@2.58.6':
+    resolution: {integrity: sha512-DZu956Mhi3ZRjTBe1WdbGV46ldVbA8d2rgp/fh51GsI25zjBHah4wZnPTSzpc+YqxU6pJpg579B/r3jrIK530Q==}
     engines: {node: '>=10'}
     cpu: [x64]
-    os: [linux, freebsd]
+    os: [linux, freebsd, android]
 
-  '@sentry/cli-win32-i686@2.39.1':
-    resolution: {integrity: sha512-NglnNoqHSmE+Dz/wHeIVRnV2bLMx7tIn3IQ8vXGO5HWA2f8zYJGktbkLq1Lg23PaQmeZLPGlja3gBQfZYSG10Q==}
+  '@sentry/cli-win32-arm64@2.58.6':
+    resolution: {integrity: sha512-nj0Ff/kmAB73EPDhR8B4O9r+NUHK5GkPCkGWC+kXVemqAJWL5jcJ5KdxG0l/S0z6RoEoltID8/43/B+TaMlT7A==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@sentry/cli-win32-i686@2.58.6':
+    resolution: {integrity: sha512-WNZiDzPbgsEMQWq4avsQ391v/xWKJDIWWWo9GYl+N/w5qcYKkoDW7wQG7T9FasI6ENn68phChTOAPXXxbfAdOg==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [win32]
 
-  '@sentry/cli-win32-x64@2.39.1':
-    resolution: {integrity: sha512-xv0R2CMf/X1Fte3cMWie1NXuHmUyQPDBfCyIt6k6RPFPxAYUgcqgMPznYwVMwWEA1W43PaOkSn3d8ZylsDaETw==}
+  '@sentry/cli-win32-x64@2.58.6':
+    resolution: {integrity: sha512-R35WJ17oF4D2eqI1DR2sQQqr0fjRTt5xoP16WrTu91XM2lndRMFsnjh+/GttbxapLCBNlrjzia99MJ0PZHZpgA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@sentry/cli@2.39.1':
-    resolution: {integrity: sha512-JIb3e9vh0+OmQ0KxmexMXg9oZsR/G7HMwxt5BUIKAXZ9m17Xll4ETXTRnRUBT3sf7EpNGAmlQk1xEmVN9pYZYQ==}
+  '@sentry/cli@2.58.6':
+    resolution: {integrity: sha512-baBcNPLLfUi9WuL+Tpri9BFaAdvugZIKelC5X0tt0Zdy+K0K+PCVSrnNmwMWU/HyaF/SEv6b6UHnXIdqanBlcg==}
     engines: {node: '>= 10'}
     hasBin: true
 
-  '@sentry/core@8.41.0':
-    resolution: {integrity: sha512-3v7u3t4LozCA5SpZY4yqUN2U3jSrkXNoLgz6L2SUUiydyCuSwXZIFEwpLJfgQyidpNDifeQbBI5E1O910XkPsA==}
-    engines: {node: '>=14.18'}
+  '@sentry/core@10.57.0':
+    resolution: {integrity: sha512-kntItTA2kiT0YpL7encXaF6mkdZMB+y48lwj8w1wkfBpfJAC7sifdgrzLQZqmsqVNE3crg9VfufaAGA+78uFMg==}
+    engines: {node: '>=18'}
 
-  '@sentry/react@8.41.0':
-    resolution: {integrity: sha512-/7LEWDNdICYO5s4ie8ztgpmD/GRJ1+1nHlSKvcwjf83COzT1eGvVeuYTiXFAPmXA29sY+lV1RajziwgySadjIQ==}
-    engines: {node: '>=14.18'}
+  '@sentry/react@10.57.0':
+    resolution: {integrity: sha512-6QThwQ4XWQ2rwKZEVQ9P9WKl7JlowC7S5LpAvmMdrwlfJBpLDFOsM7tycnIvbXTXf0ZOOuLFPa4L4YYbdyNGmA==}
+    engines: {node: '>=18'}
     peerDependencies:
       react: ^16.14.0 || 17.x || 18.x || 19.x
 
-  '@sentry/types@8.41.0':
-    resolution: {integrity: sha512-eqdnGr9k9H++b9CjVUoTNUVahPVWeNnMy0YGkqS5+cjWWC+x43p56202oidGFmWo6702ub/xwUNH6M5PC4kq6A==}
-    engines: {node: '>=14.18'}
+  '@sentry/rollup-plugin@5.3.0':
+    resolution: {integrity: sha512-hgPGPYdQJ/G1cGYOxAb7d4z3V+/k/E5/P/5TFPEEBLuIbFFk+JG0CISUDJdzXJjO382Lb99PBJuXGbueBmO79w==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      rollup: '>=3.2.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
 
-  '@sentry/vite-plugin@2.22.6':
-    resolution: {integrity: sha512-zIieP1VLWQb3wUjFJlwOAoaaJygJhXeUoGd0e/Ha2RLb2eW2S+4gjf6y6NqyY71tZ74LYVZKg/4prB6FAZSMXQ==}
-    engines: {node: '>= 14'}
+  '@sentry/vite-plugin@5.3.0':
+    resolution: {integrity: sha512-qcoSzo4n2MulVQ70UUPLq6dTleb2a2HwL2wuwvAgWhPChrYTuk6A6mDg6aQb9fairPAwFPiU9PzOANpoDJcz1A==}
+    engines: {node: '>= 18'}
 
   '@shikijs/engine-oniguruma@3.23.0':
     resolution: {integrity: sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==}
@@ -5290,11 +5301,6 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
-  glob@9.3.5:
-    resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
-
   global-directory@5.0.0:
     resolution: {integrity: sha512-1pgFdhK3J2LeM+dVf2Pd424yHx2ou338lC0ErNP2hPx4j8eW1Sp0XqSjNxtk6Tc4Kr5wlWtSvz8cn2yb7/SG/w==}
     engines: {node: '>=20'}
@@ -6603,10 +6609,6 @@ packages:
     resolution: {integrity: sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==}
     engines: {node: '>=10'}
 
-  minimatch@8.0.7:
-    resolution: {integrity: sha512-V+1uQNdzybxa14e/p00HZnQNNcTjnRJjDxg2V8wtkjFctq4M7hXFws4oekyTP0Jebeq7QYtpFyOeBAjc88zvYg==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   minimatch@9.0.9:
     resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -6614,10 +6616,6 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass@4.2.8:
-    resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==}
-    engines: {node: '>=8'}
-
   minipass@7.1.3:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -8619,9 +8617,6 @@ packages:
   unload@2.2.0:
     resolution: {integrity: sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==}
 
-  unplugin@1.0.1:
-    resolution: {integrity: sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==}
-
   unrs-resolver@1.11.1:
     resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
 
@@ -8815,13 +8810,6 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
-  webpack-sources@3.2.3:
-    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
-    engines: {node: '>=10.13.0'}
-
-  webpack-virtual-modules@0.5.0:
-    resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
-
   whatwg-encoding@2.0.0:
     resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
     engines: {node: '>=12'}
@@ -11892,75 +11880,72 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
-  '@sentry-internal/browser-utils@8.41.0':
+  '@sentry-internal/browser-utils@10.57.0':
     dependencies:
-      '@sentry/core': 8.41.0
-      '@sentry/types': 8.41.0
+      '@sentry/core': 10.57.0
 
-  '@sentry-internal/feedback@8.41.0':
+  '@sentry-internal/feedback@10.57.0':
     dependencies:
-      '@sentry/core': 8.41.0
-      '@sentry/types': 8.41.0
+      '@sentry/core': 10.57.0
 
-  '@sentry-internal/replay-canvas@8.41.0':
+  '@sentry-internal/replay-canvas@10.57.0':
     dependencies:
-      '@sentry-internal/replay': 8.41.0
-      '@sentry/core': 8.41.0
-      '@sentry/types': 8.41.0
+      '@sentry-internal/replay': 10.57.0
+      '@sentry/core': 10.57.0
 
-  '@sentry-internal/replay@8.41.0':
+  '@sentry-internal/replay@10.57.0':
     dependencies:
-      '@sentry-internal/browser-utils': 8.41.0
-      '@sentry/core': 8.41.0
-      '@sentry/types': 8.41.0
+      '@sentry-internal/browser-utils': 10.57.0
+      '@sentry/core': 10.57.0
 
-  '@sentry/babel-plugin-component-annotate@2.22.6': {}
+  '@sentry/babel-plugin-component-annotate@5.3.0': {}
 
-  '@sentry/browser@8.41.0':
+  '@sentry/browser@10.57.0':
     dependencies:
-      '@sentry-internal/browser-utils': 8.41.0
-      '@sentry-internal/feedback': 8.41.0
-      '@sentry-internal/replay': 8.41.0
-      '@sentry-internal/replay-canvas': 8.41.0
-      '@sentry/core': 8.41.0
-      '@sentry/types': 8.41.0
+      '@sentry-internal/browser-utils': 10.57.0
+      '@sentry-internal/feedback': 10.57.0
+      '@sentry-internal/replay': 10.57.0
+      '@sentry-internal/replay-canvas': 10.57.0
+      '@sentry/core': 10.57.0
 
-  '@sentry/bundler-plugin-core@2.22.6':
+  '@sentry/bundler-plugin-core@5.3.0':
     dependencies:
       '@babel/core': 7.29.0
-      '@sentry/babel-plugin-component-annotate': 2.22.6
-      '@sentry/cli': 2.39.1
+      '@sentry/babel-plugin-component-annotate': 5.3.0
+      '@sentry/cli': 2.58.6
       dotenv: 16.6.1
       find-up: 5.0.0
-      glob: 9.3.5
+      glob: 13.0.6
       magic-string: 0.30.8
-      unplugin: 1.0.1
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/cli-darwin@2.39.1':
+  '@sentry/cli-darwin@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.39.1':
+  '@sentry/cli-linux-arm64@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-arm@2.39.1':
+  '@sentry/cli-linux-arm@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-i686@2.39.1':
+  '@sentry/cli-linux-i686@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-x64@2.39.1':
+  '@sentry/cli-linux-x64@2.58.6':
     optional: true
 
-  '@sentry/cli-win32-i686@2.39.1':
+  '@sentry/cli-win32-arm64@2.58.6':
     optional: true
 
-  '@sentry/cli-win32-x64@2.39.1':
+  '@sentry/cli-win32-i686@2.58.6':
     optional: true
 
-  '@sentry/cli@2.39.1':
+  '@sentry/cli-win32-x64@2.58.6':
+    optional: true
+
+  '@sentry/cli@2.58.6':
     dependencies:
       https-proxy-agent: 5.0.1
       node-fetch: 2.7.0
@@ -11968,39 +11953,43 @@ snapshots:
       proxy-from-env: 1.1.0
       which: 2.0.2
     optionalDependencies:
-      '@sentry/cli-darwin': 2.39.1
-      '@sentry/cli-linux-arm': 2.39.1
-      '@sentry/cli-linux-arm64': 2.39.1
-      '@sentry/cli-linux-i686': 2.39.1
-      '@sentry/cli-linux-x64': 2.39.1
-      '@sentry/cli-win32-i686': 2.39.1
-      '@sentry/cli-win32-x64': 2.39.1
+      '@sentry/cli-darwin': 2.58.6
+      '@sentry/cli-linux-arm': 2.58.6
+      '@sentry/cli-linux-arm64': 2.58.6
+      '@sentry/cli-linux-i686': 2.58.6
+      '@sentry/cli-linux-x64': 2.58.6
+      '@sentry/cli-win32-arm64': 2.58.6
+      '@sentry/cli-win32-i686': 2.58.6
+      '@sentry/cli-win32-x64': 2.58.6
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/core@8.41.0':
-    dependencies:
-      '@sentry/types': 8.41.0
+  '@sentry/core@10.57.0': {}
 
-  '@sentry/react@8.41.0(react@18.2.0)':
+  '@sentry/react@10.57.0(react@18.2.0)':
     dependencies:
-      '@sentry/browser': 8.41.0
-      '@sentry/core': 8.41.0
-      '@sentry/types': 8.41.0
-      hoist-non-react-statics: 3.3.2
+      '@sentry/browser': 10.57.0
+      '@sentry/core': 10.57.0
       react: 18.2.0
 
-  '@sentry/types@8.41.0': {}
-
-  '@sentry/vite-plugin@2.22.6':
+  '@sentry/rollup-plugin@5.3.0':
     dependencies:
-      '@sentry/bundler-plugin-core': 2.22.6
-      unplugin: 1.0.1
+      '@sentry/bundler-plugin-core': 5.3.0
+      magic-string: 0.30.8
     transitivePeerDependencies:
       - encoding
       - supports-color
 
+  '@sentry/vite-plugin@5.3.0':
+    dependencies:
+      '@sentry/bundler-plugin-core': 5.3.0
+      '@sentry/rollup-plugin': 5.3.0
+    transitivePeerDependencies:
+      - encoding
+      - rollup
+      - supports-color
+
   '@shikijs/engine-oniguruma@3.23.0':
     dependencies:
       '@shikijs/types': 3.23.0
@@ -14307,13 +14296,6 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
-  glob@9.3.5:
-    dependencies:
-      fs.realpath: 1.0.0
-      minimatch: 8.0.7
-      minipass: 4.2.8
-      path-scurry: 1.11.1
-
   global-directory@5.0.0:
     dependencies:
       ini: 6.0.0
@@ -16071,18 +16053,12 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
-  minimatch@8.0.7:
-    dependencies:
-      brace-expansion: 2.0.2
-
   minimatch@9.0.9:
     dependencies:
       brace-expansion: 2.0.2
 
   minimist@1.2.8: {}
 
-  minipass@4.2.8: {}
-
   minipass@7.1.3: {}
 
   moment-timezone@0.5.47:
@@ -18347,13 +18323,6 @@ snapshots:
       '@babel/runtime': 7.28.2
       detect-node: 2.1.0
 
-  unplugin@1.0.1:
-    dependencies:
-      acorn: 8.16.0
-      chokidar: 3.6.0
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.5.0
-
   unrs-resolver@1.11.1:
     dependencies:
       napi-postinstall: 0.3.4
@@ -18573,10 +18542,6 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
-  webpack-sources@3.2.3: {}
-
-  webpack-virtual-modules@0.5.0: {}
-
   whatwg-encoding@2.0.0:
     dependencies:
       iconv-lite: 0.6.3

frontend/src/constants/reactQueryKeys.ts

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

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

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

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

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

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

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

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

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

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

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

frontend/src/hooks/trace/useGetTraceFlamegraphV3.tsx

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

frontend/src/hooks/useTimezoneFormatter/useTimezoneFormatter.ts

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

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/DynamicVariableFields.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from 'react';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- searchable async select: no @signozhq/ui equivalent
+import { Select } from 'antd';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
+import useDebounce from 'hooks/useDebounce';
+
+import { TELEMETRY_SIGNALS, type TelemetrySignal } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface DynamicVariableFieldsProps {
+	attribute: string;
+	signal: TelemetrySignal;
+	onChange: (patch: {
+		dynamicAttribute?: string;
+		dynamicSignal?: TelemetrySignal;
+	}) => void;
+	onPreview: (values: (string | number)[]) => void;
+}
+
+/** Dynamic-variable body: telemetry signal + field, whose live values preview. */
+function DynamicVariableFields({
+	attribute,
+	signal,
+	onChange,
+	onPreview,
+}: DynamicVariableFieldsProps): JSX.Element {
+	const [search, setSearch] = useState('');
+	const debouncedSearch = useDebounce(search, 300);
+
+	const { data: keyData, isLoading } = useGetFieldKeys({
+		signal,
+		name: debouncedSearch || undefined,
+	});
+
+	// `keys` is a Record keyed BY field name; the field names are the map keys.
+	// When the API reports the list is `complete`, search filters locally.
+	const isComplete = keyData?.data?.complete === true;
+	const options = useMemo(
+		() =>
+			Object.keys(keyData?.data?.keys ?? {}).map((name) => ({
+				label: name,
+				value: name,
+			})),
+		[keyData],
+	);
+
+	const { data: valueData } = useGetFieldValues({
+		signal,
+		name: attribute,
+		enabled: !!attribute,
+	});
+
+	useEffect(() => {
+		const payload = valueData?.data;
+		const values =
+			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
+		onPreview(values);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [valueData]);
+
+	return (
+		<>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Source</Typography.Text>
+				</div>
+				<SelectSimple
+					className={styles.sortSelect}
+					value={signal}
+					items={TELEMETRY_SIGNALS.map((s) => ({ label: s, value: s }))}
+					onChange={(value): void =>
+						onChange({ dynamicSignal: value as TelemetrySignal })
+					}
+					testId="variable-signal-select"
+				/>
+			</div>
+			<div className={cx(styles.row, styles.sortSection)}>
+				<div className={styles.labelContainer}>
+					<Typography.Text className={styles.label}>Attribute</Typography.Text>
+				</div>
+				<Select
+					className={styles.searchSelect}
+					showSearch
+					value={attribute || undefined}
+					placeholder="Select a telemetry field"
+					loading={isLoading}
+					filterOption={isComplete}
+					onSearch={setSearch}
+					onChange={(value): void => onChange({ dynamicAttribute: value as string })}
+					options={options}
+					notFoundContent={isLoading ? 'Loading…' : 'No fields found'}
+					data-testid="variable-field-select"
+				/>
+			</div>
+		</>
+	);
+}
+
+export default DynamicVariableFields;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/QueryVariableFields.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import Editor from 'components/Editor';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import type { VariableSort } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface QueryVariableFieldsProps {
+	queryValue: string;
+	sort: VariableSort;
+	onChange: (queryValue: string) => void;
+	onPreview: (values: (string | number)[]) => void;
+	onError: (message: string | null) => void;
+}
+
+/** Query-variable body: SQL editor + "Test Run Query" that previews the values. */
+function QueryVariableFields({
+	queryValue,
+	sort,
+	onChange,
+	onPreview,
+	onError,
+}: QueryVariableFieldsProps): JSX.Element {
+	const [isRunning, setIsRunning] = useState(false);
+
+	const runTest = async (): Promise<void> => {
+		setIsRunning(true);
+		onError(null);
+		try {
+			const res = await dashboardVariablesQuery({
+				query: queryValue,
+				variables: {},
+			});
+			if (res.statusCode === 200 && res.payload) {
+				onPreview(
+					sortValues(res.payload.variableValues ?? [], sort) as (string | number)[],
+				);
+			} else {
+				onError(res.error || 'Failed to run query');
+				onPreview([]);
+			}
+		} catch (err) {
+			onError((err as Error).message || 'Failed to run query');
+			onPreview([]);
+		} finally {
+			setIsRunning(false);
+		}
+	};
+
+	return (
+		<div className={styles.queryContainer}>
+			<div className={styles.labelContainer}>
+				<Typography.Text className={styles.label}>Query</Typography.Text>
+			</div>
+			<div className={styles.editorWrap}>
+				<Editor
+					language="sql"
+					value={queryValue}
+					onChange={(value): void => onChange(value)}
+					height="240px"
+					options={{
+						fontSize: 13,
+						wordWrap: 'on',
+						lineNumbers: 'off',
+						glyphMargin: false,
+						folding: false,
+						lineDecorationsWidth: 0,
+						lineNumbersMinChars: 0,
+						minimap: { enabled: false },
+					}}
+				/>
+			</div>
+			<div className={styles.testRow}>
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					loading={isRunning}
+					disabled={!queryValue}
+					onClick={runTest}
+					testId="variable-test-run"
+				>
+					Test Run Query
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default QueryVariableFields;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.module.scss

@@ -0,0 +1,310 @@
+/* Faithful reproduction of the V1 VariableItem layout, scoped as a module and
+   built on @signozhq components where possible. antd is retained only for the
+   monaco Editor, multiline TextArea, Collapse, and searchable Selects. */
+
+.container {
+	display: flex;
+	flex-direction: column;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.allVariables {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.allVariablesBtn {
+	--button-height: 24px;
+	--button-padding: 0;
+	color: var(--muted-foreground);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 12px 16px 20px;
+}
+
+/* VariableItemRow */
+.row {
+	display: flex;
+	gap: 1rem;
+	margin-bottom: 0;
+}
+
+/* LabelContainer */
+.labelContainer {
+	width: 200px;
+}
+
+.label {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.column {
+	flex-direction: column;
+	gap: 8px;
+}
+
+.input,
+.textarea,
+.defaultInput {
+	padding: 6px 6px 6px 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l3-background);
+}
+
+.input,
+.textarea {
+	width: 100%;
+}
+
+.defaultInput {
+	width: 342px;
+}
+
+.errorText {
+	font-size: 12px;
+	color: var(--bg-amber-500);
+}
+
+/* Variable type segmented group */
+.typeSection {
+	align-items: center;
+	justify-content: space-between;
+}
+
+.typeLabelContainer {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+
+.typeBtnGroup {
+	display: grid;
+	grid-template-columns: repeat(4, max-content);
+	height: 32px;
+	flex-shrink: 0;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+	background: var(--l2-background);
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.typeBtn {
+	--button-height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	min-width: 114px;
+	border-radius: 0;
+	color: var(--l2-foreground);
+
+	& + & {
+		border-left: 1px solid var(--l1-border);
+	}
+}
+
+.typeBtnSelected {
+	background: var(--l1-border);
+	color: var(--l1-foreground);
+}
+
+.betaTag {
+	margin-left: 4px;
+}
+
+/* Query */
+.queryContainer {
+	display: flex;
+	flex-flow: column wrap;
+	gap: 1rem;
+	min-width: 0;
+	margin-bottom: 0;
+}
+
+.editorWrap {
+	height: 240px;
+	overflow: hidden;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.testRow {
+	display: flex;
+	margin-top: 8px;
+}
+
+/* Custom — antd Collapse */
+.customSection {
+	margin-bottom: 0;
+}
+
+.customSection :global(.custom-collapse) {
+	width: 100%;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px 3px 0 0;
+
+	:global(.ant-collapse-item) {
+		border-bottom: none;
+	}
+
+	:global(.ant-collapse-header) {
+		align-items: center;
+		gap: 8px;
+		height: 38px;
+		padding: 12px;
+		background: var(--l3-background);
+		border-radius: 3px 3px 0 0;
+	}
+
+	:global(.ant-collapse-header-text) {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 1px 2px;
+		color: var(--bg-robin-400);
+		font-family: 'Space Mono';
+		font-size: 14px;
+		line-height: 18px;
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+	}
+
+	:global(.ant-collapse-content-box) {
+		padding: 0;
+	}
+
+	:global(.comma-input) {
+		height: 109px;
+		border: none;
+	}
+}
+
+/* Textbox */
+.textboxSection {
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+/* Preview strip */
+.previewSection {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-height: 88px;
+	margin-bottom: 0;
+	padding-bottom: 8px;
+	border: 1px solid var(--l1-border);
+	border-radius: 3px;
+}
+
+.previewLabel {
+	align-self: flex-start;
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	padding: 4px 8px;
+	color: var(--bg-robin-400);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	line-height: 18px;
+	border-radius: 3px 0 2px;
+	background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
+}
+
+.previewValues {
+	display: flex;
+	flex-flow: wrap;
+	gap: 8px;
+	padding: 4.5px 11px;
+	overflow-y: auto;
+}
+
+.previewValues [data-slot='badge'] {
+	height: 30px;
+	align-items: center;
+	color: var(--l1-foreground);
+	font-family: 'Space Mono';
+	font-size: 14px;
+	border: 1px solid var(--l1-border);
+	border-radius: 2px;
+}
+
+.previewError {
+	color: var(--bg-amber-500);
+}
+
+/* Sort / multi / all / default rows */
+.sortSection,
+.multiSection,
+.allOptionSection,
+.dynamicSection {
+	align-items: flex-start;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+
+.sortSection {
+	align-items: center;
+}
+
+.rowLabel {
+	width: 339px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.sortSelect {
+	width: 192px;
+}
+
+.defaultValueSection {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 1rem;
+	align-items: center;
+	margin-bottom: 0;
+}
+
+.defaultValueSection .label {
+	display: block;
+	margin-bottom: 2px;
+}
+
+.defaultValueDesc {
+	display: block;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 11px;
+	line-height: 18px;
+	letter-spacing: -0.06px;
+}
+
+.searchSelect {
+	width: 100%;
+}
+
+/* Footer */
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 1rem;
+	margin-top: 12px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableForm.tsx

@@ -0,0 +1,351 @@
+import { useEffect, useState } from 'react';
+import { ArrowLeft, Check, X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+// eslint-disable-next-line signoz/no-antd-components -- TextArea/Collapse/searchable Select: no @signozhq/ui equivalent
+import { Collapse, Input as AntdInput, Select } from 'antd';
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+import sortValues from 'lib/dashboardVariables/sortVariableValues';
+
+import {
+	VARIABLE_SORTS,
+	type VariableFormModel,
+	type VariableSort,
+	type VariableType,
+} from '../variableModel';
+import DynamicVariableFields from './DynamicVariableFields';
+import QueryVariableFields from './QueryVariableFields';
+import VariableTypeSelector from './VariableTypeSelector';
+import styles from './VariableForm.module.scss';
+
+const SORT_LABEL: Record<VariableSort, string> = {
+	DISABLED: 'Disabled',
+	ASC: 'Ascending',
+	DESC: 'Descending',
+};
+
+function getNameError(name: string, existingNames: string[]): string | null {
+	if (name === '') {
+		return 'Variable name is required';
+	}
+	if (/\s/.test(name)) {
+		return 'Variable name cannot contain whitespaces';
+	}
+	if (existingNames.includes(name)) {
+		return 'Variable name already exists';
+	}
+	return null;
+}
+
+interface VariableFormProps {
+	initial: VariableFormModel;
+	/** Names of the other variables, for uniqueness validation. */
+	existingNames: string[];
+	isSaving: boolean;
+	onClose: () => void;
+	onSave: (model: VariableFormModel) => void;
+}
+
+/**
+ * In-drawer variable editor reproducing the V1 VariableItem layout, built on
+ * @signozhq components (antd kept only for the monaco editor, TextArea, Collapse
+ * and searchable selects). Master→detail: renders in place of the list.
+ */
+function VariableForm({
+	initial,
+	existingNames,
+	isSaving,
+	onClose,
+	onSave,
+}: VariableFormProps): JSX.Element {
+	const [model, setModel] = useState<VariableFormModel>(initial);
+	const [previewValues, setPreviewValues] = useState<(string | number)[]>([]);
+	const [previewError, setPreviewError] = useState<string | null>(null);
+	const [defaultValue, setDefaultValue] = useState<string>(
+		((initial.defaultValue as { value?: string })?.value ?? '') as string,
+	);
+
+	useEffect(() => {
+		setModel(initial);
+		setPreviewValues([]);
+		setPreviewError(null);
+		setDefaultValue(
+			((initial.defaultValue as { value?: string })?.value ?? '') as string,
+		);
+	}, [initial]);
+
+	const set = (patch: Partial<VariableFormModel>): void =>
+		setModel((prev) => ({ ...prev, ...patch }));
+
+	const selectType = (type: VariableType): void => {
+		set({ type });
+		setPreviewValues([]);
+		setPreviewError(null);
+	};
+
+	const onCustomChange = (value: string): void => {
+		set({ customValue: value });
+		setPreviewValues(
+			sortValues(commaValuesParser(value), model.sort) as (string | number)[],
+		);
+	};
+
+	const trimmedName = model.name.trim();
+	const nameError = getNameError(trimmedName, existingNames);
+
+	const isListType =
+		model.type === 'QUERY' || model.type === 'CUSTOM' || model.type === 'DYNAMIC';
+	const showAllOptionField = model.type === 'QUERY' || model.type === 'CUSTOM';
+
+	const handleSave = (): void => {
+		onSave({
+			...model,
+			name: trimmedName,
+			defaultValue: defaultValue ? { value: defaultValue } : undefined,
+		});
+	};
+
+	return (
+		<>
+			<div className={styles.container}>
+				<div className={styles.allVariables}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						className={styles.allVariablesBtn}
+						prefix={<ArrowLeft size={14} />}
+						onClick={onClose}
+						testId="variable-form-back"
+					>
+						All variables
+					</Button>
+				</div>
+
+				<div className={styles.content}>
+					{/* Name */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Name</Typography.Text>
+						<Input
+							className={styles.input}
+							value={model.name}
+							placeholder="Unique name of the variable"
+							onChange={(e): void => set({ name: e.target.value })}
+							testId="variable-name-input"
+						/>
+						{nameError ? (
+							<Typography.Text className={styles.errorText}>
+								{nameError}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{/* Description */}
+					<div className={cx(styles.row, styles.column)}>
+						<Typography.Text className={styles.label}>Description</Typography.Text>
+						<AntdInput.TextArea
+							className={styles.textarea}
+							value={model.description}
+							placeholder="Enter a description for the variable"
+							rows={3}
+							onChange={(e): void => set({ description: e.target.value })}
+							data-testid="variable-description-input"
+						/>
+					</div>
+
+					{/* Variable Type */}
+					<VariableTypeSelector value={model.type} onChange={selectType} />
+
+					{/* Type-specific body */}
+					{model.type === 'DYNAMIC' ? (
+						<DynamicVariableFields
+							attribute={model.dynamicAttribute}
+							signal={model.dynamicSignal}
+							onChange={(patch): void => set(patch)}
+							onPreview={setPreviewValues}
+						/>
+					) : null}
+
+					{model.type === 'QUERY' ? (
+						<QueryVariableFields
+							queryValue={model.queryValue}
+							sort={model.sort}
+							onChange={(queryValue): void => set({ queryValue })}
+							onPreview={setPreviewValues}
+							onError={setPreviewError}
+						/>
+					) : null}
+
+					{model.type === 'CUSTOM' ? (
+						<div className={cx(styles.row, styles.customSection)}>
+							<Collapse
+								collapsible="header"
+								rootClassName="custom-collapse"
+								defaultActiveKey={['1']}
+								items={[
+									{
+										key: '1',
+										label: 'Options',
+										children: (
+											<AntdInput.TextArea
+												value={model.customValue}
+												placeholder="Enter options separated by commas."
+												rootClassName="comma-input"
+												onChange={(e): void => onCustomChange(e.target.value)}
+												data-testid="variable-custom-input"
+											/>
+										),
+									},
+								]}
+							/>
+						</div>
+					) : null}
+
+					{model.type === 'TEXT' ? (
+						<div className={cx(styles.row, styles.textboxSection)}>
+							<div className={styles.labelContainer}>
+								<Typography.Text className={styles.label}>
+									Default Value
+								</Typography.Text>
+							</div>
+							<Input
+								className={styles.defaultInput}
+								value={model.textValue}
+								placeholder="Enter a default value (if any)..."
+								onChange={(e): void => set({ textValue: e.target.value })}
+								testId="variable-text-input"
+							/>
+						</div>
+					) : null}
+
+					{/* Shared rows for list-type variables */}
+					{isListType ? (
+						<>
+							<div className={cx(styles.row, styles.previewSection)}>
+								<Typography.Text className={styles.previewLabel}>
+									Preview of Values
+								</Typography.Text>
+								<div className={styles.previewValues}>
+									{previewError ? (
+										<Typography.Text className={styles.previewError}>
+											{previewError}
+										</Typography.Text>
+									) : (
+										previewValues.map((value, idx) => (
+											<Badge
+												// eslint-disable-next-line react/no-array-index-key -- preview values are display-only and may contain duplicates
+												key={`${value}-${idx}`}
+												color="vanilla"
+											>
+												{value.toString()}
+											</Badge>
+										))
+									)}
+								</div>
+							</div>
+
+							<div className={cx(styles.row, styles.sortSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>Sort Values</Typography.Text>
+								</div>
+								<SelectSimple
+									className={styles.sortSelect}
+									value={model.sort}
+									items={VARIABLE_SORTS.map((sort) => ({
+										label: SORT_LABEL[sort],
+										value: sort,
+									}))}
+									onChange={(value): void => set({ sort: value as VariableSort })}
+									testId="variable-sort-select"
+								/>
+							</div>
+
+							<div className={cx(styles.row, styles.multiSection)}>
+								<Typography.Text className={styles.rowLabel}>
+									Enable multiple values to be checked
+								</Typography.Text>
+								<Switch
+									value={model.multiSelect}
+									onChange={(checked): void => {
+										set({
+											multiSelect: checked,
+											showAllOption: checked ? model.showAllOption : false,
+										});
+									}}
+									testId="variable-multi-switch"
+								/>
+							</div>
+
+							{model.multiSelect && showAllOptionField ? (
+								<div className={cx(styles.row, styles.allOptionSection)}>
+									<Typography.Text className={styles.rowLabel}>
+										Include an option for ALL values
+									</Typography.Text>
+									<Switch
+										value={model.showAllOption}
+										onChange={(checked): void => set({ showAllOption: checked })}
+										testId="variable-all-switch"
+									/>
+								</div>
+							) : null}
+
+							<div className={cx(styles.row, styles.defaultValueSection)}>
+								<div className={styles.labelContainer}>
+									<Typography.Text className={styles.label}>
+										Default Value
+									</Typography.Text>
+									<Typography.Text className={styles.defaultValueDesc}>
+										{model.type === 'QUERY'
+											? 'Click Test Run Query to see the values or add custom value'
+											: 'Select a value from the preview values or add custom value'}
+									</Typography.Text>
+								</div>
+								<Select
+									className={styles.searchSelect}
+									showSearch
+									allowClear
+									placeholder="Select a default value"
+									value={defaultValue || undefined}
+									onChange={(value): void => setDefaultValue(value ?? '')}
+									options={previewValues.map((value) => ({
+										label: value.toString(),
+										value: value.toString(),
+									}))}
+									data-testid="variable-default-select"
+								/>
+							</div>
+						</>
+					) : null}
+				</div>
+			</div>
+
+			<div className={styles.footer}>
+				<Button
+					variant="solid"
+					color="secondary"
+					prefix={<X size={14} />}
+					onClick={onClose}
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					prefix={<Check size={14} />}
+					disabled={!!nameError}
+					loading={isSaving}
+					onClick={handleSave}
+					testId="variable-save"
+				>
+					Save Variable
+				</Button>
+			</div>
+		</>
+	);
+}
+
+export default VariableForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariableForm/VariableTypeSelector.tsx

@@ -0,0 +1,99 @@
+import {
+	ClipboardType,
+	DatabaseZap,
+	Info,
+	LayoutList,
+	Pyramid,
+} from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import TextToolTip from 'components/TextToolTip';
+
+import type { VariableType } from '../variableModel';
+import styles from './VariableForm.module.scss';
+
+interface VariableTypeSelectorProps {
+	value: VariableType;
+	onChange: (type: VariableType) => void;
+}
+
+/** The segmented Dynamic / Textbox / Custom / Query type picker. */
+function VariableTypeSelector({
+	value,
+	onChange,
+}: VariableTypeSelectorProps): JSX.Element {
+	return (
+		<div className={cx(styles.row, styles.typeSection)}>
+			<div className={styles.typeLabelContainer}>
+				<Typography.Text className={styles.label}>Variable Type</Typography.Text>
+				<TextToolTip
+					text="Learn more about supported variable types"
+					url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
+					urlText="here"
+					useFilledIcon={false}
+					outlinedIcon={<Info size={14} />}
+				/>
+			</div>
+			<div className={styles.typeBtnGroup}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<Pyramid size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'DYNAMIC',
+					})}
+					onClick={(): void => onChange('DYNAMIC')}
+					testId="variable-type-dynamic"
+				>
+					Dynamic
+					<Badge color="robin" className={styles.betaTag}>
+						Beta
+					</Badge>
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<ClipboardType size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'TEXT',
+					})}
+					onClick={(): void => onChange('TEXT')}
+					testId="variable-type-textbox"
+				>
+					Textbox
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<LayoutList size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'CUSTOM',
+					})}
+					onClick={(): void => onChange('CUSTOM')}
+					testId="variable-type-custom"
+				>
+					Custom
+				</Button>
+				<Button
+					variant="ghost"
+					color="secondary"
+					prefix={<DatabaseZap size={14} />}
+					className={cx(styles.typeBtn, {
+						[styles.typeBtnSelected]: value === 'QUERY',
+					})}
+					onClick={(): void => onChange('QUERY')}
+					testId="variable-type-query"
+				>
+					Query
+					<Badge color="amber" className={styles.betaTag}>
+						Not Recommended
+					</Badge>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default VariableTypeSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/Variables.module.scss

@@ -0,0 +1,101 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 20px 16px;
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.titleRow {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.title {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.subtitle {
+	font-size: 12px;
+	color: var(--l2-foreground);
+}
+
+.empty {
+	padding: 32px;
+	text-align: center;
+	border: 1px dashed var(--l1-border);
+	border-radius: 4px;
+	color: var(--l2-foreground);
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 12px;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	background: var(--l1-background);
+}
+
+.rowMain {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+.varName {
+	font-weight: 500;
+	color: var(--l1-foreground);
+}
+
+.varDesc {
+	min-width: 0;
+	overflow: hidden;
+	font-size: 12px;
+	color: var(--l2-foreground);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.typeTag {
+	flex-shrink: 0;
+	padding: 1px 8px;
+	font-size: 11px;
+	letter-spacing: 0.04em;
+	color: var(--l2-foreground);
+	text-transform: uppercase;
+	background: var(--l2-background);
+	border-radius: 10px;
+}
+
+.rowActions {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: 2px;
+}
+
+.confirmText {
+	margin-right: 4px;
+	font-size: 12px;
+	color: var(--l2-foreground);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/VariablesList.tsx

@@ -0,0 +1,139 @@
+import {
+	Check,
+	ChevronDown,
+	ChevronUp,
+	PenLine,
+	Trash2,
+	X,
+} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import type { VariableFormModel } from './variableModel';
+import styles from './Variables.module.scss';
+
+const TYPE_LABEL: Record<VariableFormModel['type'], string> = {
+	QUERY: 'Query',
+	CUSTOM: 'Custom',
+	TEXT: 'Text',
+	DYNAMIC: 'Dynamic',
+};
+
+interface VariablesListProps {
+	variables: VariableFormModel[];
+	canEdit: boolean;
+	/** Index whose delete is awaiting inline confirmation, if any. */
+	confirmingIndex: number | null;
+	onEdit: (index: number) => void;
+	onRequestDelete: (index: number) => void;
+	onConfirmDelete: (index: number) => void;
+	onCancelDelete: () => void;
+	onMove: (from: number, to: number) => void;
+}
+
+function VariablesList({
+	variables,
+	canEdit,
+	confirmingIndex,
+	onEdit,
+	onRequestDelete,
+	onConfirmDelete,
+	onCancelDelete,
+	onMove,
+}: VariablesListProps): JSX.Element {
+	return (
+		<div className={styles.list} data-testid="variables-list">
+			{variables.map((variable, index) => (
+				<div
+					className={styles.row}
+					key={variable.name || `variable-${index}`}
+					data-testid={`variable-row-${variable.name}`}
+				>
+					<div className={styles.rowMain}>
+						<Typography.Text className={styles.varName}>
+							${variable.name}
+						</Typography.Text>
+						<span className={styles.typeTag}>{TYPE_LABEL[variable.type]}</span>
+						{variable.description ? (
+							<Typography.Text className={styles.varDesc}>
+								{variable.description}
+							</Typography.Text>
+						) : null}
+					</div>
+
+					{canEdit && confirmingIndex === index ? (
+						<div className={styles.rowActions}>
+							<Typography.Text className={styles.confirmText}>Delete?</Typography.Text>
+							<Button
+								variant="ghost"
+								color="destructive"
+								size="icon"
+								onClick={(): void => onConfirmDelete(index)}
+								aria-label="Confirm delete"
+								testId={`variable-delete-confirm-${variable.name}`}
+							>
+								<Check size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={onCancelDelete}
+								aria-label="Cancel delete"
+							>
+								<X size={14} />
+							</Button>
+						</div>
+					) : null}
+
+					{canEdit && confirmingIndex !== index ? (
+						<div className={styles.rowActions}>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === 0}
+								onClick={(): void => onMove(index, index - 1)}
+								aria-label="Move up"
+							>
+								<ChevronUp size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								disabled={index === variables.length - 1}
+								onClick={(): void => onMove(index, index + 1)}
+								aria-label="Move down"
+							>
+								<ChevronDown size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={(): void => onEdit(index)}
+								aria-label="Edit variable"
+								testId={`variable-edit-${variable.name}`}
+							>
+								<PenLine size={14} />
+							</Button>
+							<Button
+								variant="ghost"
+								color="secondary"
+								size="icon"
+								onClick={(): void => onRequestDelete(index)}
+								aria-label="Delete variable"
+								testId={`variable-delete-${variable.name}`}
+							>
+								<Trash2 size={14} />
+							</Button>
+						</div>
+					) : null}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default VariablesList;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/index.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSaveVariables } from './useSaveVariables';
+import { dtoToFormModel } from './variableAdapters';
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from './variableModel';
+import VariableForm from './VariableForm/VariableForm';
+import VariablesList from './VariablesList';
+import styles from './Variables.module.scss';
+
+interface VariablesSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+/** `null` index = adding a new variable; a number = editing that row. */
+type EditingState = { index: number | null } | null;
+
+function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+	const { save, isSaving } = useSaveVariables();
+
+	const initialModels = useMemo(
+		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
+		[dashboard.spec?.variables],
+	);
+	const [variables, setVariables] = useState<VariableFormModel[]>(initialModels);
+
+	// Resync from the dashboard after a save round-trips (refetch bumps updatedAt).
+	useEffect(() => {
+		setVariables(initialModels);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard.updatedAt]);
+
+	const [editing, setEditing] = useState<EditingState>(null);
+	const [confirmDeleteIndex, setConfirmDeleteIndex] = useState<number | null>(
+		null,
+	);
+
+	const editingModel: VariableFormModel | null = useMemo(() => {
+		if (!editing) {
+			return null;
+		}
+		return editing.index === null
+			? emptyVariableFormModel()
+			: variables[editing.index];
+	}, [editing, variables]);
+
+	const existingNames = useMemo(() => {
+		const self = editing?.index ?? null;
+		return variables.filter((_, i) => i !== self).map((v) => v.name);
+	}, [variables, editing]);
+
+	const persist = (next: VariableFormModel[]): void => {
+		setVariables(next);
+		void save(next);
+	};
+
+	const handleFormSave = (model: VariableFormModel): void => {
+		const next = [...variables];
+		if (editing?.index == null) {
+			next.push(model);
+		} else {
+			next[editing.index] = model;
+		}
+		setEditing(null);
+		persist(next);
+	};
+
+	const handleMove = (from: number, to: number): void => {
+		if (to < 0 || to >= variables.length) {
+			return;
+		}
+		const next = [...variables];
+		const [moved] = next.splice(from, 1);
+		next.splice(to, 0, moved);
+		persist(next);
+	};
+
+	const handleConfirmDelete = (index: number): void => {
+		persist(variables.filter((_, i) => i !== index));
+		setConfirmDeleteIndex(null);
+	};
+
+	// Detail view — edit/new form replaces the list in place (no modal).
+	if (editingModel) {
+		return (
+			<VariableForm
+				initial={editingModel}
+				existingNames={existingNames}
+				isSaving={isSaving}
+				onClose={(): void => setEditing(null)}
+				onSave={handleFormSave}
+			/>
+		);
+	}
+
+	// Master view — the variables list.
+	return (
+		<div className={styles.container}>
+			<div className={styles.header}>
+				<div className={styles.titleRow}>
+					<Typography.Text className={styles.title}>Variables</Typography.Text>
+					<Typography.Text className={styles.subtitle}>
+						Define variables to parameterize panel queries.
+					</Typography.Text>
+				</div>
+				{isEditable ? (
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={(): void => setEditing({ index: null })}
+						testId="add-variable"
+					>
+						New variable
+					</Button>
+				) : null}
+			</div>
+
+			{variables.length === 0 ? (
+				<div className={styles.empty}>
+					<Typography.Text>No variables defined yet.</Typography.Text>
+				</div>
+			) : (
+				<VariablesList
+					variables={variables}
+					canEdit={isEditable}
+					confirmingIndex={confirmDeleteIndex}
+					onEdit={(index): void => setEditing({ index })}
+					onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
+					onConfirmDelete={handleConfirmDelete}
+					onCancelDelete={(): void => setConfirmDeleteIndex(null)}
+					onMove={handleMove}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default VariablesSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/useSaveVariables.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { toast } from '@signozhq/ui/sonner';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { formModelToDto } from './variableAdapters';
+import type { VariableFormModel } from './variableModel';
+import { buildVariablesPatch } from './variablePatchOps';
+
+interface UseSaveVariables {
+	save: (variables: VariableFormModel[]) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+/**
+ * Persists the dashboard's variable list via a single `/spec/variables` patch,
+ * then refetches. Mirrors the General-settings save flow (patch → toast →
+ * refetch → surface errors).
+ */
+export function useSaveVariables(): UseSaveVariables {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+	const [isSaving, setIsSaving] = useState(false);
+
+	const save = useCallback(
+		async (variables: VariableFormModel[]): Promise<boolean> => {
+			if (!dashboardId) {
+				return false;
+			}
+			const dtos = variables.map(formModelToDto);
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, buildVariablesPatch(dtos));
+				toast.success('Variables updated');
+				refetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, refetch, showErrorModal],
+	);
+
+	return { save, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -0,0 +1,153 @@
+import {
+	DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind as TextEnvelopeKind,
+	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind as ListEnvelopeKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
+	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpecDTOKind as QueryPluginKind,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesListVariableSpecDTO,
+	DashboardtypesVariableDTO,
+	DashboardtypesVariablePluginDTO,
+	DashboardTextVariableSpecDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	emptyVariableFormModel,
+	PLUGIN_KIND,
+	type TelemetrySignal,
+	type VariableFormModel,
+	type VariableSort,
+} from './variableModel';
+
+/** DTO envelope → flat form model (for display / editing). */
+export function dtoToFormModel(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel {
+	const base = emptyVariableFormModel();
+	const display = dto.spec?.display;
+	const common: VariableFormModel = {
+		...base,
+		name: dto.spec?.name ?? display?.name ?? '',
+		description: display?.description ?? '',
+	};
+
+	// Text variable — a distinct envelope (no list plugin).
+	if (dto.kind === TextEnvelopeKind.TextVariable) {
+		const spec = dto.spec as DashboardTextVariableSpecDTO;
+		return {
+			...common,
+			type: 'TEXT',
+			textValue: spec.value ?? '',
+			textConstant: spec.constant ?? false,
+		};
+	}
+
+	// List variable — Query / Custom / Dynamic, distinguished by plugin.kind.
+	const spec = dto.spec as DashboardtypesListVariableSpecDTO;
+	const listCommon: VariableFormModel = {
+		...common,
+		multiSelect: spec.allowMultiple ?? false,
+		showAllOption: spec.allowAllValue ?? false,
+		sort: (spec.sort as VariableSort) ?? 'DISABLED',
+		defaultValue: spec.defaultValue,
+	};
+	const plugin = spec.plugin;
+
+	if (plugin?.kind === CustomPluginKind['signoz/CustomVariable']) {
+		return {
+			...listCommon,
+			type: 'CUSTOM',
+			customValue: plugin.spec.customValue ?? '',
+		};
+	}
+	if (plugin?.kind === DynamicPluginKind['signoz/DynamicVariable']) {
+		return {
+			...listCommon,
+			type: 'DYNAMIC',
+			dynamicAttribute: plugin.spec.name ?? '',
+			dynamicSignal: (plugin.spec.signal as TelemetrySignal) ?? 'traces',
+		};
+	}
+	// Default to Query (also covers a query plugin or a missing/unknown plugin).
+	return {
+		...listCommon,
+		type: 'QUERY',
+		queryValue:
+			plugin?.kind === QueryPluginKind['signoz/QueryVariable']
+				? (plugin.spec.queryValue ?? '')
+				: '',
+	};
+}
+
+function buildPlugin(
+	model: VariableFormModel,
+): DashboardtypesVariablePluginDTO {
+	switch (model.type) {
+		case 'CUSTOM':
+			return {
+				kind: CustomPluginKind['signoz/CustomVariable'],
+				spec: { customValue: model.customValue },
+			};
+		case 'DYNAMIC':
+			return {
+				kind: DynamicPluginKind['signoz/DynamicVariable'],
+				spec: {
+					name: model.dynamicAttribute,
+					signal: model.dynamicSignal as TelemetrytypesSignalDTO,
+				},
+			};
+		case 'QUERY':
+		default:
+			return {
+				kind: QueryPluginKind['signoz/QueryVariable'],
+				spec: { queryValue: model.queryValue },
+			};
+	}
+}
+
+/** Flat form model → DTO envelope (for persistence). */
+export function formModelToDto(
+	model: VariableFormModel,
+): DashboardtypesVariableDTO {
+	const display = {
+		name: model.name,
+		description: model.description,
+		hidden: model.hidden,
+	};
+
+	if (model.type === 'TEXT') {
+		return {
+			kind: TextEnvelopeKind.TextVariable,
+			spec: {
+				name: model.name,
+				display,
+				value: model.textValue,
+				constant: model.textConstant,
+			},
+		};
+	}
+
+	return {
+		kind: ListEnvelopeKind.ListVariable,
+		spec: {
+			name: model.name,
+			display,
+			allowMultiple: model.multiSelect,
+			allowAllValue: model.showAllOption,
+			sort: model.sort,
+			defaultValue: model.defaultValue,
+			plugin: buildPlugin(model),
+		},
+	};
+}
+
+/** Maps the V2 plugin/envelope to the four UI-facing variable types. */
+export function variableTypeOf(
+	dto: DashboardtypesVariableDTO,
+): VariableFormModel['type'] {
+	return dtoToFormModel(dto).type;
+}
+
+export { PLUGIN_KIND };

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableModel.ts

@@ -0,0 +1,78 @@
+import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Flat, UI-friendly representation of a V2 dashboard variable. The wire format
+ * (`DashboardtypesVariableDTO`) is a nested envelope/plugin union that is awkward
+ * to bind a form to; `variableAdapters` converts between this model and the DTO.
+ */
+
+export type VariableType = 'QUERY' | 'CUSTOM' | 'TEXT' | 'DYNAMIC';
+
+export type VariableSort = 'DISABLED' | 'ASC' | 'DESC';
+
+export type TelemetrySignal = 'traces' | 'logs' | 'metrics';
+
+/** Wire `kind` discriminators (string values of the generated enums). */
+export const ENVELOPE_KIND = {
+	LIST: 'ListVariable',
+	TEXT: 'TextVariable',
+} as const;
+
+export const PLUGIN_KIND = {
+	QUERY: 'signoz/QueryVariable',
+	CUSTOM: 'signoz/CustomVariable',
+	DYNAMIC: 'signoz/DynamicVariable',
+} as const;
+
+export const VARIABLE_SORTS: VariableSort[] = ['DISABLED', 'ASC', 'DESC'];
+
+export const TELEMETRY_SIGNALS: TelemetrySignal[] = [
+	'traces',
+	'logs',
+	'metrics',
+];
+
+export interface VariableFormModel {
+	/** Stable identifier, referenced in queries (e.g. `$name`); must be unique. */
+	name: string;
+	description: string;
+	hidden: boolean;
+	type: VariableType;
+
+	// List-variable common fields (Query / Custom / Dynamic).
+	multiSelect: boolean;
+	showAllOption: boolean;
+	sort: VariableSort;
+
+	// Type-specific.
+	queryValue: string; // QUERY
+	customValue: string; // CUSTOM
+	textValue: string; // TEXT
+	textConstant: boolean; // TEXT
+	dynamicAttribute: string; // DYNAMIC — the telemetry field name
+	dynamicSignal: TelemetrySignal; // DYNAMIC — the telemetry signal
+
+	/**
+	 * Runtime-selected default, not editable in the management tab yet; carried
+	 * through edits so saving a definition doesn't clobber it.
+	 */
+	defaultValue?: VariableDefaultValueDTO;
+}
+
+export function emptyVariableFormModel(): VariableFormModel {
+	return {
+		name: '',
+		description: '',
+		hidden: false,
+		type: 'QUERY',
+		multiSelect: false,
+		showAllOption: false,
+		sort: 'DISABLED',
+		queryValue: '',
+		customValue: '',
+		textValue: '',
+		textConstant: false,
+		dynamicAttribute: '',
+		dynamicSignal: 'traces',
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variablePatchOps.ts

@@ -0,0 +1,22 @@
+import type {
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesVariableDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/**
+ * Builds the JSON-Patch to persist the dashboard's variable list. Add/edit/
+ * delete/reorder all replace the whole `/spec/variables` array in one atomic op
+ * — simpler and race-free vs per-index patches. RFC-6902 `add` on an object
+ * member sets-or-replaces, so it works whether or not `variables` already exists.
+ */
+export function buildVariablesPatch(
+	variables: DashboardtypesVariableDTO[],
+): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		{
+			op: 'add' as DashboardtypesJSONPatchOperationDTO['op'],
+			path: '/spec/variables',
+			value: variables,
+		},
+	];
+}

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

@@ -1,48 +1,39 @@
 import { useMemo } from 'react';
 
 import { Braces, Globe, Table } from '@signozhq/icons';
-import { Tabs } from '@signozhq/ui/tabs';
+import { TabItemProps, Tabs } from '@signozhq/ui/tabs';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 
 import GeneralSettings from './General';
 import { SettingsTabPlaceholder } from './utils';
-
-import styles from './DashboardSettings.module.scss';
+import VariablesSettings from './Variables';
 
 interface DashboardSettingsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 }
 
-function tabLabel(icon: JSX.Element, text: string): JSX.Element {
-	return (
-		<span className={styles.tabLabel}>
-			{icon}
-			{text}
-		</span>
-	);
-}
-
 function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
-	const items = useMemo(
+	const items: TabItemProps[] = useMemo(
 		() => [
 			{
 				key: 'general',
-				label: tabLabel(<Table size={14} />, 'General'),
+				label: 'General',
 				children: <GeneralSettings dashboard={dashboard} />,
+				prefixIcon: <Table size={14} />,
 			},
 			{
 				key: 'variables',
-				label: tabLabel(<Braces size={14} />, 'Variables'),
-				children: (
-					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
-				),
+				label: 'Variables',
+				children: <VariablesSettings dashboard={dashboard} />,
+				prefixIcon: <Braces size={14} />,
 			},
 			{
 				key: 'public-dashboard',
-				label: tabLabel(<Globe size={14} />, 'Publish'),
+				label: 'Publish',
 				children: (
 					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
 				),
+				prefixIcon: <Globe size={14} />,
 			},
 		],
 		[dashboard],

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariableSelector.tsx

@@ -1,98 +0,0 @@
-import { useMemo } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
-import DynamicSelector from './selectors/DynamicSelector';
-import QuerySelector from './selectors/QuerySelector';
-import TextSelector from './selectors/TextSelector';
-import ValueSelector from './selectors/ValueSelector';
-import styles from './VariablesBar.module.scss';
-
-interface VariableSelectorProps {
-	variable: VariableFormModel;
-	/** All variables (Dynamic uses them to scope options by sibling selections). */
-	variables: VariableFormModel[];
-	/** Names this variable depends on (for Query gating). */
-	parents: string[];
-	/** All current selections (Query passes them as the request payload). */
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/** One labelled variable control; dispatches on the variable type. */
-function VariableSelector({
-	variable,
-	variables,
-	parents,
-	selections,
-	selection,
-	onChange,
-}: VariableSelectorProps): JSX.Element {
-	const customOptions = useMemo(
-		() =>
-			variable.type === 'CUSTOM'
-				? sortValues(commaValuesParser(variable.customValue), variable.sort).map(
-						String,
-					)
-				: [],
-		[variable],
-	);
-
-	const renderControl = (): JSX.Element => {
-		switch (variable.type) {
-			case 'TEXT':
-				return (
-					<TextSelector
-						selection={selection}
-						onChange={onChange}
-						testId={`variable-input-${variable.name}`}
-					/>
-				);
-			case 'QUERY':
-				return (
-					<QuerySelector
-						variable={variable}
-						parents={parents}
-						selections={selections}
-						selection={selection}
-						onChange={onChange}
-					/>
-				);
-			case 'DYNAMIC':
-				return (
-					<DynamicSelector
-						variable={variable}
-						variables={variables}
-						selections={selections}
-						selection={selection}
-						onChange={onChange}
-					/>
-				);
-			case 'CUSTOM':
-			default:
-				return (
-					<ValueSelector
-						options={customOptions}
-						multiSelect={variable.multiSelect}
-						showAllOption={variable.showAllOption}
-						selection={selection}
-						onChange={onChange}
-						testId={`variable-select-${variable.name}`}
-					/>
-				);
-		}
-	};
-
-	return (
-		<div className={styles.variable} data-testid={`variable-${variable.name}`}>
-			<Typography.Text className={styles.label}>${variable.name}</Typography.Text>
-			{renderControl()}
-		</div>
-	);
-}
-
-export default VariableSelector;

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

@@ -1,29 +0,0 @@
-.bar {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: flex-end;
-	gap: 12px 16px;
-	padding: 12px 16px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.variable {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	min-width: 0;
-}
-
-.label {
-	font-size: 12px;
-	font-weight: 500;
-	color: var(--l2-foreground);
-}
-
-.select {
-	min-width: 160px;
-}
-
-.input {
-	min-width: 160px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.tsx

@@ -1,45 +0,0 @@
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { useVariableSelection } from './useVariableSelection';
-import VariableSelector from './VariableSelector';
-import styles from './VariablesBar.module.scss';
-
-interface VariablesBarProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-/**
- * Runtime variable selector bar shown above the panels. Renders one control per
- * dashboard variable; selections live in the store + URL (never the spec).
- */
-function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
-	const { variables, dependencyData, selection, setSelection } =
-		useVariableSelection(dashboard);
-
-	if (variables.length === 0) {
-		return null;
-	}
-
-	return (
-		<div className={styles.bar} data-testid="dashboard-variables-bar">
-			{variables.map((variable) => (
-				<VariableSelector
-					key={variable.name}
-					variable={variable}
-					variables={variables}
-					parents={dependencyData.parentGraph[variable.name] ?? []}
-					selections={selection}
-					selection={
-						selection[variable.name] ?? {
-							value: variable.multiSelect ? [] : '',
-							allSelected: false,
-						}
-					}
-					onChange={(next): void => setSelection(variable.name, next)}
-				/>
-			))}
-		</div>
-	);
-}
-
-export default VariablesBar;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/dynamicFilter.ts

@@ -1,56 +0,0 @@
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelectionMap } from './selectionTypes';
-
-function formatQueryValue(val: string): string {
-	const num = Number(val);
-	if (!Number.isNaN(num) && Number.isFinite(num)) {
-		return val;
-	}
-	return `'${val.replace(/'/g, "\\'")}'`;
-}
-
-function buildQueryPart(attribute: string, values: string[]): string {
-	const formatted = values.map(formatQueryValue);
-	if (formatted.length === 1) {
-		return `${attribute} = ${formatted[0]}`;
-	}
-	return `${attribute} IN [${formatted.join(', ')}]`;
-}
-
-/**
- * Builds a filter expression from the OTHER dynamic variables' current
- * selections (e.g. `k8s.namespace.name IN ['prod'] AND service = 'api'`), so a
- * dynamic variable's option list is scoped by its sibling selections. Variables
- * in the ALL state, with no selection, or non-dynamic are skipped. Ported from
- * the V1 dynamic-variable runtime.
- */
-export function buildExistingDynamicVariableQuery(
-	variables: VariableFormModel[],
-	selections: VariableSelectionMap,
-	currentName: string,
-): string {
-	const parts: string[] = [];
-	variables.forEach((variable) => {
-		if (
-			variable.name === currentName ||
-			variable.type !== 'DYNAMIC' ||
-			!variable.dynamicAttribute
-		) {
-			return;
-		}
-		const selection = selections[variable.name];
-		if (!selection || selection.allSelected) {
-			return;
-		}
-		const raw = Array.isArray(selection.value)
-			? selection.value
-			: [selection.value];
-		const valid = raw
-			.filter((v) => v !== null && v !== undefined && v !== '')
-			.map((v) => String(v));
-		if (valid.length > 0) {
-			parts.push(buildQueryPart(variable.dynamicAttribute, valid));
-		}
-	});
-	return parts.join(' AND ');
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionTypes.ts

@@ -1,16 +0,0 @@
-/** A user-selected variable value at runtime (not persisted to the spec). */
-export type SelectedVariableValue =
-	| string
-	| number
-	| boolean
-	| (string | number | boolean)[]
-	| null;
-
-export interface VariableSelection {
-	value: SelectedVariableValue;
-	/** True when every option is selected ("ALL"); for dynamic vars value may be null. */
-	allSelected: boolean;
-}
-
-/** Selected values for a dashboard's variables, keyed by variable name. */
-export type VariableSelectionMap = Record<string, VariableSelection>;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionUtils.ts

@@ -1,31 +0,0 @@
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from './selectionTypes';
-
-/** A selection counts as resolved (usable as a parent value) when it's non-empty. */
-export function isResolved(selection?: VariableSelection): boolean {
-	if (!selection) {
-		return false;
-	}
-	if (selection.allSelected) {
-		return true;
-	}
-	const { value } = selection;
-	if (Array.isArray(value)) {
-		return value.length > 0;
-	}
-	return value !== '' && value !== null && value !== undefined;
-}
-
-/** Flatten the selection map into the `{ name: value }` payload a query expects. */
-export function selectionToPayload(
-	selection: VariableSelectionMap,
-): Record<string, SelectedVariableValue> {
-	const payload: Record<string, SelectedVariableValue> = {};
-	Object.entries(selection).forEach(([name, sel]) => {
-		payload[name] = sel.value;
-	});
-	return payload;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/DynamicSelector.tsx

@@ -1,79 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import type { AppState } from 'store/reducers';
-import type { GlobalReducer } from 'types/reducer/globalTime';
-
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
-import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../selectionTypes';
-import { useAutoSelect } from '../useAutoSelect';
-import ValueSelector from './ValueSelector';
-
-interface DynamicSelectorProps {
-	variable: VariableFormModel;
-	/** All variables + current selections, to scope options by sibling dynamics. */
-	variables: VariableFormModel[];
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/**
- * Dynamic-variable options sourced from live telemetry field values for the
- * chosen signal + attribute, scoped by the other dynamic variables' selections
- * (so e.g. `pod` narrows to the chosen `namespace`).
- */
-function DynamicSelector({
-	variable,
-	variables,
-	selections,
-	selection,
-	onChange,
-}: DynamicSelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const existingQuery = useMemo(
-		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
-		[variables, selections, variable.name],
-	);
-
-	const { data, isFetching } = useGetFieldValues({
-		signal: variable.dynamicSignal,
-		name: variable.dynamicAttribute,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-		existingQuery: existingQuery || undefined,
-		enabled: !!variable.dynamicAttribute,
-	});
-
-	const options = useMemo(() => {
-		const payload = data?.data;
-		const values =
-			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
-		return sortValues(values, variable.sort).map(String);
-	}, [data, variable.sort]);
-
-	useAutoSelect(variable, options, selection, onChange);
-
-	return (
-		<ValueSelector
-			options={options}
-			multiSelect={variable.multiSelect}
-			showAllOption={variable.showAllOption}
-			loading={isFetching}
-			selection={selection}
-			onChange={onChange}
-			testId={`variable-select-${variable.name}`}
-		/>
-	);
-}
-
-export default DynamicSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/QuerySelector.tsx

@@ -1,89 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import type { AppState } from 'store/reducers';
-import type { GlobalReducer } from 'types/reducer/globalTime';
-
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../selectionTypes';
-import { isResolved, selectionToPayload } from '../selectionUtils';
-import { useAutoSelect } from '../useAutoSelect';
-import ValueSelector from './ValueSelector';
-
-interface QuerySelectorProps {
-	variable: VariableFormModel;
-	/** Names this variable's query references; it waits until they're resolved. */
-	parents: string[];
-	/** All current selections, fed to the query as `{ name: value }`. */
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/**
- * Query-driven options. Dependency orchestration is declarative: the query is
- * `enabled` only once every parent is resolved, and the parent values are in the
- * query key — so it refetches automatically when a parent changes (and a cyclic
- * dependency is simply never enabled).
- */
-function QuerySelector({
-	variable,
-	parents,
-	selections,
-	selection,
-	onChange,
-}: QuerySelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const payload = useMemo(() => selectionToPayload(selections), [selections]);
-	const enabled = parents.every((parent) => isResolved(selections[parent]));
-
-	const { data, isFetching } = useQuery(
-		[
-			'dashboard-variable',
-			variable.name,
-			variable.queryValue,
-			payload,
-			minTime,
-			maxTime,
-		],
-		() =>
-			dashboardVariablesQuery({
-				query: variable.queryValue,
-				variables: payload,
-			}),
-		{ enabled, refetchOnWindowFocus: false },
-	);
-
-	const options = useMemo(() => {
-		if (!data || data.statusCode !== 200 || !data.payload) {
-			return [] as string[];
-		}
-		return sortValues(data.payload.variableValues ?? [], variable.sort).map(
-			String,
-		);
-	}, [data, variable.sort]);
-
-	useAutoSelect(variable, options, selection, onChange);
-
-	return (
-		<ValueSelector
-			options={options}
-			multiSelect={variable.multiSelect}
-			showAllOption={variable.showAllOption}
-			loading={isFetching}
-			selection={selection}
-			onChange={onChange}
-			testId={`variable-select-${variable.name}`}
-		/>
-	);
-}
-
-export default QuerySelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/TextSelector.tsx

@@ -1,31 +0,0 @@
-import { Input } from '@signozhq/ui/input';
-
-import type { VariableSelection } from '../selectionTypes';
-import styles from '../VariablesBar.module.scss';
-
-interface TextSelectorProps {
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-	testId?: string;
-}
-
-/** Free-text variable input. */
-function TextSelector({
-	selection,
-	onChange,
-	testId,
-}: TextSelectorProps): JSX.Element {
-	return (
-		<Input
-			className={styles.input}
-			value={typeof selection.value === 'string' ? selection.value : ''}
-			placeholder="Enter a value"
-			onChange={(e): void =>
-				onChange({ value: e.target.value, allSelected: false })
-			}
-			testId={testId}
-		/>
-	);
-}
-
-export default TextSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/ValueSelector.tsx

@@ -1,94 +0,0 @@
-import { useMemo } from 'react';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import type { OptionData } from 'components/NewSelect/types';
-import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
-
-import type { VariableSelection } from '../selectionTypes';
-import styles from '../VariablesBar.module.scss';
-
-interface ValueSelectorProps {
-	options: string[];
-	multiSelect: boolean;
-	showAllOption: boolean;
-	loading?: boolean;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-	testId?: string;
-}
-
-/**
- * Single/multi value picker for Custom/Query/Dynamic variables. Reuses the
- * shared NewSelect components, which provide search, the "ALL" option and
- * apply-on-close batching (so multi-select edits don't cascade per toggle).
- */
-function ValueSelector({
-	options,
-	multiSelect,
-	showAllOption,
-	loading,
-	selection,
-	onChange,
-	testId,
-}: ValueSelectorProps): JSX.Element {
-	const optionData = useMemo<OptionData[]>(
-		() => options.map((option) => ({ label: option, value: option })),
-		[options],
-	);
-
-	if (multiSelect) {
-		const value = selection.allSelected
-			? ALL_SELECT_VALUE
-			: (Array.isArray(selection.value) ? selection.value : []).map(String);
-		return (
-			<CustomMultiSelect
-				className={styles.select}
-				data-testid={testId}
-				options={optionData}
-				value={value}
-				loading={loading}
-				showSearch
-				placeholder="Select value"
-				enableAllSelection={showAllOption}
-				onChange={(next): void => {
-					const values = Array.isArray(next)
-						? next.map(String)
-						: next
-							? [String(next)]
-							: [];
-					if (values.length === 0) {
-						onChange({ value: [], allSelected: false });
-						return;
-					}
-					// CustomMultiSelect emits the full value set when ALL is picked.
-					const isAll =
-						showAllOption &&
-						options.length > 0 &&
-						options.every((option) => values.includes(option));
-					onChange({ value: values, allSelected: isAll });
-				}}
-				onClear={(): void => onChange({ value: [], allSelected: false })}
-			/>
-		);
-	}
-
-	return (
-		<CustomSelect
-			className={styles.select}
-			data-testid={testId}
-			options={optionData}
-			value={
-				selection.value == null || Array.isArray(selection.value)
-					? undefined
-					: String(selection.value)
-			}
-			loading={loading}
-			showSearch
-			placeholder="Select value"
-			onChange={(next): void =>
-				onChange({ value: next == null ? '' : String(next), allSelected: false })
-			}
-		/>
-	);
-}
-
-export default ValueSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useAutoSelect.ts

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelection } from './selectionTypes';
-
-/**
- * When fetched options arrive and the current selection isn't one of them,
- * auto-pick the variable's default (if present in the options) or the first
- * option — so dependent children always have a usable parent value.
- */
-export function useAutoSelect(
-	variable: VariableFormModel,
-	options: string[],
-	selection: VariableSelection,
-	onChange: (selection: VariableSelection) => void,
-): void {
-	useEffect(() => {
-		if (options.length === 0 || selection.allSelected) {
-			return;
-		}
-		const current = selection.value;
-		const isValid = Array.isArray(current)
-			? current.length > 0 && current.every((c) => options.includes(String(c)))
-			: current !== '' &&
-				current !== null &&
-				current !== undefined &&
-				options.includes(String(current));
-		if (isValid) {
-			return;
-		}
-		const fallback = (variable.defaultValue as { value?: string } | undefined)
-			?.value;
-		const initial =
-			fallback && options.includes(fallback) ? fallback : options[0];
-		onChange({
-			value: variable.multiSelect ? [initial] : initial,
-			allSelected: false,
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [options]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection.ts

@@ -1,116 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { parseAsJson, useQueryState } from 'nuqs';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import { selectVariableValues } from '../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../store/useDashboardStore';
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from './selectionTypes';
-import {
-	computeVariableDependencies,
-	type VariableDependencyData,
-} from './variableDependencies';
-
-/** URL sentinel for an "ALL values selected" state (matches V1). */
-export const ALL_SELECTED = '__ALL__';
-
-/** `?variables=` holds `{ [name]: value }` (ALL encoded as the sentinel). */
-const variablesUrlParser = parseAsJson<Record<string, SelectedVariableValue>>(
-	(v) =>
-		typeof v === 'object' && v !== null
-			? (v as Record<string, SelectedVariableValue>)
-			: null,
-);
-
-function defaultSelection(model: VariableFormModel): VariableSelection {
-	const def = (
-		model.defaultValue as { value?: SelectedVariableValue } | undefined
-	)?.value;
-	if (def !== undefined && def !== null && def !== '') {
-		return { value: def, allSelected: false };
-	}
-	return { value: model.multiSelect ? [] : '', allSelected: false };
-}
-
-function fromUrlValue(raw: SelectedVariableValue): VariableSelection {
-	return raw === ALL_SELECTED
-		? { value: null, allSelected: true }
-		: { value: raw, allSelected: false };
-}
-
-interface UseVariableSelection {
-	variables: VariableFormModel[];
-	dependencyData: VariableDependencyData;
-	selection: VariableSelectionMap;
-	setSelection: (name: string, selection: VariableSelection) => void;
-}
-
-/**
- * Runtime variable selection: derives the variable list from the spec, seeds
- * each value from URL → localStorage(store) → default, and persists changes to
- * both the store and the URL. Never writes to the dashboard spec.
- */
-export function useVariableSelection(
-	dashboard: DashboardtypesGettableDashboardV2DTO,
-): UseVariableSelection {
-	const dashboardId = dashboard.id ?? '';
-
-	const variables = useMemo(
-		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
-		[dashboard.spec?.variables],
-	);
-	const dependencyData = useMemo(
-		() => computeVariableDependencies(variables),
-		[variables],
-	);
-
-	const selection = useDashboardStore(selectVariableValues(dashboardId));
-	const setVariableValue = useDashboardStore((s) => s.setVariableValue);
-	const setVariableValues = useDashboardStore((s) => s.setVariableValues);
-
-	const [urlValues, setUrlValues] = useQueryState(
-		'variables',
-		variablesUrlParser.withOptions({ history: 'replace' }),
-	);
-
-	// Seed selections for this dashboard: URL wins, then persisted store, then default.
-	useEffect(() => {
-		if (!dashboardId || variables.length === 0) {
-			return;
-		}
-		// `selection` here is the persisted (localStorage) map on mount — the
-		// effect deliberately doesn't depend on it, so seeding runs once per set.
-		const stored = selection;
-		const seeded: VariableSelectionMap = {};
-		variables.forEach((variable) => {
-			const urlValue = urlValues?.[variable.name];
-			if (urlValue !== undefined) {
-				seeded[variable.name] = fromUrlValue(urlValue);
-			} else if (stored[variable.name]) {
-				seeded[variable.name] = stored[variable.name];
-			} else {
-				seeded[variable.name] = defaultSelection(variable);
-			}
-		});
-		setVariableValues(dashboardId, seeded);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboardId, variables]);
-
-	const setSelection = useCallback(
-		(name: string, next: VariableSelection): void => {
-			setVariableValue(dashboardId, name, next);
-			void setUrlValues((prev) => ({
-				...(prev ?? {}),
-				[name]: next.allSelected ? ALL_SELECTED : next.value,
-			}));
-		},
-		[dashboardId, setVariableValue, setUrlValues],
-	);
-
-	return { variables, dependencyData, selection, setSelection };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/variableDependencies.ts

@@ -1,199 +0,0 @@
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-
-/**
- * Inter-variable dependency graph for runtime selection. A QUERY variable
- * "depends on" another variable when its query text references that variable
- * (`{{.name}}`, `{{name}}`, `$name`, `[[name]]`). When a variable's value
- * changes, its dependent QUERY variables must refetch. Ported from the V1
- * dashboard-variables runtime; operates on the V2 flat variable model.
- */
-
-export type VariableGraph = Record<string, string[]>;
-
-export interface VariableDependencyData {
-	/** Topological order of variables (parents before children). */
-	order: string[];
-	/** Direct children (dependents) of each variable. */
-	graph: VariableGraph;
-	/** Direct parents of each variable. */
-	parentGraph: VariableGraph;
-	/** All transitive descendants of each variable (precomputed). */
-	transitiveDescendants: VariableGraph;
-	hasCycle: boolean;
-	cycleNodes?: string[];
-}
-
-/** Names of QUERY variables whose query references `variableName`. */
-function getDependents(
-	variableName: string,
-	variables: VariableFormModel[],
-): string[] {
-	return variables
-		.filter(
-			(v) =>
-				v.type === 'QUERY' &&
-				!!v.name &&
-				textContainsVariableReference(v.queryValue || '', variableName),
-		)
-		.map((v) => v.name);
-}
-
-/** variable name → its direct dependents (children). */
-export function buildDependencies(
-	variables: VariableFormModel[],
-): VariableGraph {
-	const graph: VariableGraph = {};
-	variables.forEach((v) => {
-		if (v.name) {
-			graph[v.name] = getDependents(v.name, variables);
-		}
-	});
-	return graph;
-}
-
-/** Invert a child graph into a parent graph. */
-export function buildParentGraph(graph: VariableGraph): VariableGraph {
-	const parents: VariableGraph = {};
-	Object.keys(graph).forEach((node) => {
-		parents[node] = parents[node] ?? [];
-	});
-	Object.entries(graph).forEach(([node, children]) => {
-		children.forEach((child) => {
-			parents[child] = parents[child] ?? [];
-			parents[child].push(node);
-		});
-	});
-	return parents;
-}
-
-function collectCyclePath(
-	graph: VariableGraph,
-	start: string,
-	end: string,
-): string[] {
-	const path: string[] = [];
-	let current = start;
-	const findParent = (node: string): string | undefined =>
-		Object.keys(graph).find((key) => graph[key]?.includes(node));
-	while (current !== end) {
-		const parent = findParent(current);
-		if (!parent) {
-			break;
-		}
-		path.push(parent);
-		current = parent;
-	}
-	return [start, ...path];
-}
-
-function detectCycle(
-	graph: VariableGraph,
-	node: string,
-	visited: Set<string>,
-	recStack: Set<string>,
-): string[] | null {
-	if (!visited.has(node)) {
-		visited.add(node);
-		recStack.add(node);
-		let cycleNodes: string[] | null = null;
-		(graph[node] || []).some((neighbor) => {
-			if (!visited.has(neighbor)) {
-				const found = detectCycle(graph, neighbor, visited, recStack);
-				if (found) {
-					cycleNodes = found;
-					return true;
-				}
-			} else if (recStack.has(neighbor)) {
-				cycleNodes = collectCyclePath(graph, node, neighbor);
-				return true;
-			}
-			return false;
-		});
-		if (cycleNodes) {
-			return cycleNodes;
-		}
-	}
-	recStack.delete(node);
-	return null;
-}
-
-/** Build the full dependency data (topo order, parents, transitive descendants, cycle info). */
-export function buildDependencyData(
-	dependencies: VariableGraph,
-): VariableDependencyData {
-	const inDegree: Record<string, number> = {};
-	const adjList: VariableGraph = {};
-
-	Object.keys(dependencies).forEach((node) => {
-		inDegree[node] = inDegree[node] ?? 0;
-		adjList[node] = adjList[node] ?? [];
-		(dependencies[node] || []).forEach((child) => {
-			inDegree[child] = inDegree[child] ?? 0;
-			inDegree[child] += 1;
-			adjList[node].push(child);
-		});
-	});
-
-	const visited = new Set<string>();
-	const recStack = new Set<string>();
-	let cycleNodes: string[] | undefined;
-	Object.keys(dependencies).some((node) => {
-		if (!visited.has(node)) {
-			const found = detectCycle(dependencies, node, visited, recStack);
-			if (found) {
-				cycleNodes = found;
-				return true;
-			}
-		}
-		return false;
-	});
-
-	// Topological sort (Kahn's algorithm).
-	const queue = Object.keys(inDegree).filter((n) => inDegree[n] === 0);
-	const order: string[] = [];
-	while (queue.length > 0) {
-		const current = queue.shift();
-		if (current === undefined) {
-			break;
-		}
-		order.push(current);
-		(adjList[current] || []).forEach((neighbor) => {
-			inDegree[neighbor] -= 1;
-			if (inDegree[neighbor] === 0) {
-				queue.push(neighbor);
-			}
-		});
-	}
-
-	const hasCycle = order.length !== Object.keys(dependencies).length;
-
-	// Transitive descendants: walk topo order in reverse.
-	const transitiveDescendants: VariableGraph = {};
-	for (let i = order.length - 1; i >= 0; i--) {
-		const node = order[i];
-		const desc = new Set<string>();
-		(adjList[node] || []).forEach((child) => {
-			desc.add(child);
-			(transitiveDescendants[child] || []).forEach((d) => desc.add(d));
-		});
-		transitiveDescendants[node] = Array.from(desc);
-	}
-
-	return {
-		order,
-		graph: adjList,
-		parentGraph: buildParentGraph(adjList),
-		transitiveDescendants,
-		hasCycle,
-		cycleNodes,
-	};
-}
-
-/** Compute the full dependency data straight from the variable list. */
-export function computeVariableDependencies(
-	variables: VariableFormModel[],
-): VariableDependencyData {
-	return buildDependencyData(buildDependencies(variables));
-}

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

@@ -9,7 +9,6 @@ import { useAppContext } from 'providers/App/App';
 import DashboardDescription from './DashboardDescription';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
 import { useDashboardStore } from './store/useDashboardStore';
-import VariablesBar from './VariablesBar/VariablesBar';
 import styles from './DashboardContainer.module.scss';
 
 interface DashboardContainerProps {
@@ -46,7 +45,6 @@ function DashboardContainer({
 					handle={fullScreenHandle}
 					refetch={refetch}
 				/>
-				<VariablesBar dashboard={dashboard} />
 				<PanelsAndSectionsLayout layouts={layouts} panels={panels} />
 			</div>
 			{/* Shared panel-type picker (V1 component): opened from any "New Panel"

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice.ts

@@ -1,55 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../../VariablesBar/selectionTypes';
-import type { DashboardStore } from '../useDashboardStore';
-
-/**
- * Runtime variable selection — the values the user picks in the variable bar.
- * Keyed by dashboardId → variable name. Frontend-only and persisted to
- * localStorage (mirrored to the URL by the bar for shareable links); it is
- * deliberately NOT part of the dashboard spec, so selecting a value never
- * patches the dashboard.
- */
-export interface VariableSelectionSlice {
-	variableValues: Record<string, VariableSelectionMap>;
-	setVariableValue: (
-		dashboardId: string,
-		name: string,
-		selection: VariableSelection,
-	) => void;
-	/** Bulk set (used to seed from URL/localStorage/defaults on load). */
-	setVariableValues: (dashboardId: string, values: VariableSelectionMap) => void;
-}
-
-export const createVariableSelectionSlice: StateCreator<
-	DashboardStore,
-	[['zustand/persist', unknown]],
-	[],
-	VariableSelectionSlice
-> = (set, get) => ({
-	variableValues: {},
-	setVariableValue: (dashboardId, name, selection): void => {
-		const { variableValues } = get();
-		set({
-			variableValues: {
-				...variableValues,
-				[dashboardId]: { ...variableValues[dashboardId], [name]: selection },
-			},
-		});
-	},
-	setVariableValues: (dashboardId, values): void => {
-		const { variableValues } = get();
-		set({
-			variableValues: { ...variableValues, [dashboardId]: values },
-		});
-	},
-});
-
-/** Selector: the selection map for a dashboard (empty if none). */
-export const selectVariableValues =
-	(dashboardId: string) =>
-	(state: DashboardStore): VariableSelectionMap =>
-		state.variableValues[dashboardId] ?? {};

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -9,36 +9,25 @@ import {
 	createCollapseSlice,
 	type CollapseSlice,
 } from './slices/collapseSlice';
-import {
-	createVariableSelectionSlice,
-	type VariableSelectionSlice,
-} from './slices/variableSelectionSlice';
 
-export type DashboardStore = EditContextSlice &
-	CollapseSlice &
-	VariableSelectionSlice;
+export type DashboardStore = EditContextSlice & CollapseSlice;
 
 /**
  * V2 dashboard session store. Holds cross-cutting client state only — never the
- * dashboard spec (that stays in react-query via useGetDashboardV2). Slices:
+ * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
  * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
  * - collapse: per-section open state (frontend-only, persisted to localStorage).
- * - variable-selection: runtime variable values (frontend-only, persisted).
  */
 export const useDashboardStore = create<DashboardStore>()(
 	persist(
 		(...a) => ({
 			...createEditContextSlice(...a),
 			...createCollapseSlice(...a),
-			...createVariableSelectionSlice(...a),
 		}),
 		{
 			name: '@signoz/dashboard-v2',
-			// Persist UI-only state (context incl. the refetch fn is transient).
-			partialize: (state) => ({
-				collapsed: state.collapsed,
-				variableValues: state.variableValues,
-			}),
+			// Persist only the collapse map — context (incl. the refetch fn) is transient.
+			partialize: (state) => ({ collapsed: state.collapsed }),
 		},
 	),
 );

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { Skeleton } from 'antd';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useGetTraceFlamegraphV3 from 'hooks/trace/useGetTraceFlamegraphV3';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
@@ -53,6 +53,9 @@ function TraceFlamegraph({
 	);
 
 	const previewFields = useTraceStore((s) => s.previewFields);
+	// Gate the fetch until prefs load, else selectFields (in the query key)
+	// repopulates and triggers a second fetch.
+	const userPrefsReady = useTraceStore((s) => s.userPreferences !== null);
 
 	// Color-by fields baseline + user-picked preview fields. De-duped by `name`,
 	// color-by entries first so their canonical metadata wins on collision.
@@ -70,17 +73,14 @@ function TraceFlamegraph({
 		data,
 		isFetching,
 		error: fetchError,
-	} = useGetTraceFlamegraph({
+	} = useGetTraceFlamegraphV3({
 		traceId,
 		selectedSpanId: selectedSpanIdForFetch,
-		limit: FLAMEGRAPH_SPAN_LIMIT,
 		selectFields: flamegraphSelectFields,
+		enabled: !!traceId && userPrefsReady,
 	});
 
-	const spans = useMemo(
-		() => data?.payload?.spans || [],
-		[data?.payload?.spans],
-	);
+	const spans = useMemo(() => data?.spans || [], [data?.spans]);
 
 	const {
 		layout,
@@ -99,8 +99,8 @@ function TraceFlamegraph({
 						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
 						onSpanClick={handleSpanClick}
 						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
+							startTime: data?.startTimestampMillis || 0,
+							endTime: data?.endTimestampMillis || 0,
 						}}
 						filteredSpanIds={filteredSpanIds}
 						isFilterActive={isFilterActive}
@@ -124,7 +124,7 @@ function TraceFlamegraph({
 		if (fetchError || workerError) {
 			return <Error error={(fetchError || workerError) as any} />;
 		}
-		if (data?.payload?.spans && data.payload.spans.length === 0) {
+		if (data?.spans && data.spans.length === 0) {
 			return <div>No data found for trace {traceId}</div>;
 		}
 		return (
@@ -134,17 +134,17 @@ function TraceFlamegraph({
 				setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
 				onSpanClick={handleSpanClick}
 				traceMetadata={{
-					startTime: data?.payload?.startTimestampMillis || 0,
-					endTime: data?.payload?.endTimestampMillis || 0,
+					startTime: data?.startTimestampMillis || 0,
+					endTime: data?.endTimestampMillis || 0,
 				}}
 				filteredSpanIds={filteredSpanIds}
 				isFilterActive={isFilterActive}
 			/>
 		);
 	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		data?.payload?.spans,
+		data?.endTimestampMillis,
+		data?.startTimestampMillis,
+		data?.spans,
 		fetchError,
 		filteredSpanIds,
 		firstSpanAtFetchLevel,

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/TraceFlamegraph.test.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useGetTraceFlamegraphV3 from 'hooks/trace/useGetTraceFlamegraphV3';
 import { AllTheProviders } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
 import { FLAMEGRAPH_SPAN_LIMIT } from '../constants';
 import TraceFlamegraph from '../TraceFlamegraph';
 
-jest.mock('hooks/trace/useGetTraceFlamegraph');
+jest.mock('hooks/trace/useGetTraceFlamegraphV3');
 
 // Short-circuit the worker so the test doesn't depend on layout computation.
 jest.mock('../hooks/useVisualLayoutWorker', () => ({
@@ -17,9 +17,8 @@ jest.mock('../hooks/useVisualLayoutWorker', () => ({
 	}),
 }));
 
-const mockUseGetTraceFlamegraph = useGetTraceFlamegraph as jest.MockedFunction<
-	typeof useGetTraceFlamegraph
->;
+const mockUseGetTraceFlamegraph =
+	useGetTraceFlamegraphV3 as jest.MockedFunction<typeof useGetTraceFlamegraphV3>;
 
 function renderFlamegraph(props: {
 	selectedSpan: SpanV3 | undefined;
@@ -45,7 +44,7 @@ describe('TraceFlamegraph - selectedSpanId pass-through', () => {
 	beforeEach(() => {
 		mockUseGetTraceFlamegraph.mockReset();
 		mockUseGetTraceFlamegraph.mockReturnValue({
-			data: { payload: { spans: [] } },
+			data: { spans: [] },
 			isFetching: false,
 			error: null,
 		} as never);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import {
 	computeVisualLayout,
@@ -14,12 +14,12 @@ function makeSpan(
 ): FlamegraphSpan {
 	return {
 		parentSpanId: '',
-		traceId: 'trace-1',
 		hasError: false,
-		serviceName: 'svc',
 		name: 'op',
 		level: 0,
 		event: [],
+		resource: {},
+		attributes: {},
 		...overrides,
 	};
 }

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 /** Minimal FlamegraphSpan for unit tests */
 export const MOCK_SPAN: FlamegraphSpan = {
@@ -6,12 +6,12 @@ export const MOCK_SPAN: FlamegraphSpan = {
 	durationNano: 50_000_000, // 50ms
 	spanId: 'span-1',
 	parentSpanId: '',
-	traceId: 'trace-1',
 	hasError: false,
-	serviceName: 'test-service',
 	name: 'test-span',
 	level: 0,
 	event: [],
+	resource: {},
+	attributes: {},
 };
 
 /** Nested spans structure for findSpanById tests */

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -65,37 +65,25 @@ describe('Presentation / Styling Utils', () => {
 	describe('getFlamegraphSpanGroupValue', () => {
 		it('returns resource[field.name] when present', () => {
 			const value = getFlamegraphSpanGroupValue(
-				{
-					serviceName: 'legacy',
-					resource: { 'service.name': 'svc-from-resource' },
-				},
+				{ resource: { 'service.name': 'svc-from-resource' } },
 				SERVICE_FIELD,
 			);
 			expect(value).toBe('svc-from-resource');
 		});
 
-		it('falls back to top-level serviceName for service.name when resource is empty', () => {
-			const value = getFlamegraphSpanGroupValue(
-				{ serviceName: 'svc-legacy', resource: {} },
-				SERVICE_FIELD,
-			);
-			expect(value).toBe('svc-legacy');
+		it('returns "unknown" for service.name when resource is empty', () => {
+			const value = getFlamegraphSpanGroupValue({ resource: {} }, SERVICE_FIELD);
+			expect(value).toBe('unknown');
 		});
 
 		it('returns "unknown" for non-service fields when resource is missing', () => {
-			const value = getFlamegraphSpanGroupValue(
-				{ serviceName: 'svc', resource: {} },
-				HOST_FIELD,
-			);
+			const value = getFlamegraphSpanGroupValue({ resource: {} }, HOST_FIELD);
 			expect(value).toBe('unknown');
 		});
 
 		it('reads host.name from resource when present', () => {
 			const value = getFlamegraphSpanGroupValue(
-				{
-					serviceName: 'svc',
-					resource: { 'host.name': 'host-1' },
-				},
+				{ resource: { 'host.name': 'host-1' } },
 				HOST_FIELD,
 			);
 			expect(value).toBe('host-1');

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -1,11 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 export interface ConnectorLine {
 	parentRow: number;
 	childRow: number;
 	timestampMs: number;
-	serviceName: string;
 	// Snapshot of the child span's resource so draw-time can resolve the
 	// `colorByField` group value without crossing the worker boundary.
 	resource?: Record<string, string>;
@@ -159,24 +158,8 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 		}
 	}
 
-	// Extract parentSpanId — the field may be missing at runtime when the API
-	// returns `references` instead.  Fall back to the first CHILD_OF reference.
 	function getParentId(span: FlamegraphSpan): string {
-		if (span.parentSpanId) {
-			return span.parentSpanId;
-		}
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const refs = (span as any).references as
-			| Array<{ spanId?: string; refType?: string }>
-			| undefined;
-		if (refs) {
-			for (const ref of refs) {
-				if (ref.refType === 'CHILD_OF' && ref.spanId) {
-					return ref.spanId;
-				}
-			}
-		}
-		return '';
+		return span.parentSpanId || '';
 	}
 
 	// Build children map and identify roots
@@ -480,7 +463,6 @@ export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
 				parentRow,
 				childRow,
 				timestampMs: child.timestamp,
-				serviceName: child.serviceName,
 				resource: child.resource,
 			});
 		}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,7 +1,7 @@
 import React, { RefObject, useCallback, useMemo, useRef } from 'react';
 import { generateColorPair } from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import { ConnectorLine } from '../computeVisualLayout';
@@ -200,7 +200,7 @@ function drawConnectorLines(args: DrawConnectorLinesArgs): void {
 		}
 
 		const groupValue = getFlamegraphSpanGroupValue(
-			{ serviceName: conn.serviceName, resource: conn.resource },
+			{ resource: conn.resource },
 			colorByField,
 		);
 		const pair = generateColorPair(groupValue);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -11,10 +11,9 @@ import {
 import { useTraceStore } from 'pages/TraceDetailsV3/stores/traceStore';
 import { RESERVED_PREVIEW_KEYS } from 'pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard';
 import { getSpanAttribute } from 'pages/TraceDetailsV3/utils';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
-import { EventRect, SpanRect } from '../types';
-import { ITraceMetadata } from '../types';
+import { EventRect, ITraceMetadata, SpanRect } from '../types';
 import {
 	getFlamegraphServiceName,
 	getFlamegraphSpanGroupValue,
@@ -200,7 +199,7 @@ export function useFlamegraphHover(
 
 			if (eventRect) {
 				const { event, span } = eventRect;
-				const eventTimeMs = event.timeUnixNano / 1e6;
+				const eventTimeMs = (event.timeUnixNano ?? 0) / 1e6;
 				setHoveredEventKey(`${span.spanId}-${event.name}-${event.timeUnixNano}`);
 				setHoveredSpanId(span.spanId);
 				setTooltipContent({
@@ -220,10 +219,10 @@ export function useFlamegraphHover(
 						return isDarkMode ? pair.color : pair.colorDark;
 					})(),
 					event: {
-						name: event.name,
+						name: event.name ?? '',
 						timeOffsetMs: eventTimeMs - span.timestamp,
-						isError: event.isError,
-						attributeMap: event.attributeMap || {},
+						isError: event.isError ?? false,
+						attributeMap: (event.attributeMap as Record<string, string>) ?? {},
 					},
 				});
 				updateCursor(canvas, eventRect.span);

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -5,7 +5,7 @@ import {
 	SetStateAction,
 	useEffect,
 } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { MIN_VISIBLE_SPAN_MS } from '../constants';
 import { ITraceMetadata } from '../types';

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { computeVisualLayout, VisualLayout } from '../computeVisualLayout';
 import { LayoutWorkerResponse } from '../visualLayoutWorkerTypes';

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/types.ts

@@ -1,5 +1,8 @@
+import {
+	SpantypesEventDTO as FlamegraphEvent,
+	SpantypesFlamegraphSpanDTO as FlamegraphSpan,
+} from 'api/generated/services/sigNoz.schemas';
 import { Dispatch, SetStateAction } from 'react';
-import { Event, FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
 
 import { VisualLayout } from './computeVisualLayout';
 
@@ -28,7 +31,7 @@ export interface SpanRect {
 }
 
 export interface EventRect {
-	event: Event;
+	event: FlamegraphEvent;
 	span: FlamegraphSpan;
 	cx: number;
 	cy: number;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -7,7 +7,7 @@ import {
 	generateColorPair,
 	RESERVED_ERROR,
 } from 'pages/TraceDetailsV3/utils/generateColorPair';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import {
@@ -74,34 +74,25 @@ export function getFlamegraphRowMetrics(
 
 /**
  * Resolve the displayed service.name for a flamegraph span. Used by tooltips
- * (service identity, independent of the active colour-by field). Prefers
- * `resource['service.name']` with legacy top-level `serviceName` fallback.
+ * (service identity, independent of the active colour-by field). Reads
+ * `resource['service.name']`.
  */
 export function getFlamegraphServiceName(
-	span: Pick<FlamegraphSpan, 'serviceName' | 'resource' | 'attributes'>,
+	span: Partial<Pick<FlamegraphSpan, 'resource' | 'attributes'>>,
 ): string {
-	return getSpanAttribute(span, 'service.name') || span.serviceName || '';
+	return getSpanAttribute(span, 'service.name') || '';
 }
 
 /**
  * Resolve the value used to bucket a flamegraph span by colour for the given
- * field. Prefers `resource[field.name]` (new contract from `selectFields`).
- * For `service.name`, falls back to the legacy top-level `serviceName` when
- * resource is empty (backward-compat with backends that haven't shipped
- * `selectFields` yet). For other fields, falls back to `'unknown'`.
+ * field. Prefers `resource[field.name]` (contract from `selectFields`), falling
+ * back to `'unknown'`.
  */
 export function getFlamegraphSpanGroupValue(
-	span: Pick<FlamegraphSpan, 'serviceName' | 'resource' | 'attributes'>,
+	span: Partial<Pick<FlamegraphSpan, 'resource' | 'attributes'>>,
 	field: TelemetryFieldKey,
 ): string {
-	const fromAttribute = getSpanAttribute(span, field.name);
-	if (fromAttribute) {
-		return fromAttribute;
-	}
-	if (field.name === 'service.name') {
-		return span.serviceName || 'unknown';
-	}
-	return 'unknown';
+	return getSpanAttribute(span, field.name) || 'unknown';
 }
 
 interface GetSpanColorArgs {
@@ -296,7 +287,7 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 			return;
 		}
 
-		const eventTimeMs = event.timeUnixNano / 1e6;
+		const eventTimeMs = (event.timeUnixNano ?? 0) / 1e6;
 		const eventOffsetPercent =
 			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
 		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
@@ -306,7 +297,11 @@ export function drawSpanBar(args: DrawSpanBarArgs): void {
 		// Event dots derive from the effective bar color so they track the
 		// light/dark variant the bar is rendered with.
 		const parentBarColor = isDarkMode ? color : colorDark;
-		const dotColor = getEventDotColor(parentBarColor, event.isError, isDarkMode);
+		const dotColor = getEventDotColor(
+			parentBarColor,
+			event.isError ?? false,
+			isDarkMode,
+		);
 		const eventKey = `${span.spanId}-${event.name}-${event.timeUnixNano}`;
 		const isEventHovered = hoveredEventKey === eventKey;
 		const dotSize = isEventHovered

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayoutWorkerTypes.ts

@@ -1,4 +1,4 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+import { SpantypesFlamegraphSpanDTO as FlamegraphSpan } from 'api/generated/services/sigNoz.schemas';
 
 import { VisualLayout } from './computeVisualLayout';
 

frontend/src/providers/Timezone.tsx

@@ -19,17 +19,14 @@ import {
 } from 'components/CustomTimePicker/timezoneUtils';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import useTimezoneFormatter, {
-	TimestampInput,
+	FormatTimezoneAdjustedTimestamp,
 } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 
 export interface TimezoneContextType {
 	timezone: Timezone;
 	browserTimezone: Timezone;
 	updateTimezone: (timezone: Timezone) => void;
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string;
+	formatTimezoneAdjustedTimestamp: FormatTimezoneAdjustedTimestamp;
 	isAdaptationEnabled: boolean;
 	setIsAdaptationEnabled: Dispatch<SetStateAction<boolean>>;
 }

frontend/vite.config.ts

@@ -82,6 +82,11 @@ export default defineConfig(({ mode }): UserConfig => {
 	];
 
 	if (env.VITE_SENTRY_AUTH_TOKEN) {
+		if (!env.VITE_SENTRY_ORG || !env.VITE_SENTRY_PROJECT_ID) {
+			throw new Error(
+				'VITE_SENTRY_ORG and VITE_SENTRY_PROJECT_ID must be defined when VITE_SENTRY_AUTH_TOKEN is present.',
+			);
+		}
 		// Refuse to upload sourcemaps without an explicit version.
 		if (!env.VITE_VERSION) {
 			throw new Error(

pkg/modules/inframonitoring/implinframonitoring/module.go

@@ -10,7 +10,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/inframonitoringtypes"
+	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -48,6 +50,8 @@ func NewModule(
 }
 
 func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableHosts) (*inframonitoringtypes.Hosts, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListHosts")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -161,6 +165,8 @@ func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframon
 }
 
 func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostablePods) (*inframonitoringtypes.Pods, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListPods")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -244,6 +250,8 @@ func (m *module) ListPods(ctx context.Context, orgID valuer.UUID, req *inframoni
 }
 
 func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNodes) (*inframonitoringtypes.Nodes, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListNodes")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -332,6 +340,8 @@ func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframon
 }
 
 func (m *module) ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableNamespaces) (*inframonitoringtypes.Namespaces, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListNamespaces")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -414,6 +424,8 @@ func (m *module) ListNamespaces(ctx context.Context, orgID valuer.UUID, req *inf
 }
 
 func (m *module) ListClusters(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableClusters) (*inframonitoringtypes.Clusters, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListClusters")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -503,6 +515,8 @@ func (m *module) ListClusters(ctx context.Context, orgID valuer.UUID, req *infra
 }
 
 func (m *module) ListVolumes(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableVolumes) (*inframonitoringtypes.Volumes, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListVolumes")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -586,6 +600,8 @@ func (m *module) ListVolumes(ctx context.Context, orgID valuer.UUID, req *infram
 }
 
 func (m *module) ListDeployments(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableDeployments) (*inframonitoringtypes.Deployments, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListDeployments")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -674,6 +690,8 @@ func (m *module) ListDeployments(ctx context.Context, orgID valuer.UUID, req *in
 }
 
 func (m *module) ListStatefulSets(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableStatefulSets) (*inframonitoringtypes.StatefulSets, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListStatefulSets")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -764,6 +782,8 @@ func (m *module) ListStatefulSets(ctx context.Context, orgID valuer.UUID, req *i
 }
 
 func (m *module) ListJobs(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableJobs) (*inframonitoringtypes.Jobs, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListJobs")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -854,6 +874,8 @@ func (m *module) ListJobs(ctx context.Context, orgID valuer.UUID, req *inframoni
 }
 
 func (m *module) ListDaemonSets(ctx context.Context, orgID valuer.UUID, req *inframonitoringtypes.PostableDaemonSets) (*inframonitoringtypes.DaemonSets, error) {
+	ctx = m.withInfraMonitoringContext(ctx, "ListDaemonSets")
+
 	if err := req.Validate(); err != nil {
 		return nil, err
 	}
@@ -942,3 +964,12 @@ func (m *module) ListDaemonSets(ctx context.Context, orgID valuer.UUID, req *inf
 
 	return resp, nil
 }
+
+func (m *module) withInfraMonitoringContext(ctx context.Context, functionName string) context.Context {
+	comments := map[string]string{
+		instrumentationtypes.TelemetrySignal:  telemetrytypes.SignalMetrics.StringValue(),
+		instrumentationtypes.CodeNamespace:    "infra-monitoring",
+		instrumentationtypes.CodeFunctionName: functionName,
+	}
+	return ctxtypes.NewContextWithCommentVals(ctx, comments)
+}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -182,7 +182,7 @@ func (m *module) getFullFlamegraph(ctx context.Context, traceID string, summary
 		return nil, spantypes.ErrTraceNotFound
 	}
 	flamegraphTrace := spantypes.NewFlamegraphTraceFromStorable(fullSpans, selectFields)
-	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start.UnixMilli(), summary.End.UnixMilli(), false), nil
+	return spantypes.NewGettableFlamegraphTrace(flamegraphTrace.GetAllLevels(), summary.Start, summary.End, false), nil
 }
 
 // getWindowedFlamegraph returns a window of a max levels and max sampled spans per level around the selected span.
@@ -209,10 +209,6 @@ func (m *module) getWindowedFlamegraph(ctx context.Context, traceID, selectedSpa
 		return nil, err
 	}
 
-	return spantypes.NewGettableFlamegraphTrace(
-		flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields),
-		summary.Start.UnixMilli(),
-		summary.End.UnixMilli(),
-		true,
-	), nil
+	enrichedSpans := flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans, selectFields)
+	return spantypes.NewGettableFlamegraphTrace(enrichedSpans, summary.Start, summary.End, true), nil
 }

pkg/querier/consume.go

@@ -62,7 +62,7 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 	numericColsCount := 0
 	for i, ct := range colTypes {
 		slots[i] = reflect.New(ct.ScanType()).Interface()
-		if numericKind(ct.ScanType().Kind()) {
+		if isNumericKind(ct.ScanType()) {
 			numericColsCount++
 		}
 	}
@@ -270,8 +270,14 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 	}, nil
 }
 
-func numericKind(k reflect.Kind) bool {
-	switch k {
+func isNumericKind(t reflect.Type) bool {
+	if t == nil {
+		return false
+	}
+	for t.Kind() == reflect.Ptr || t.Kind() == reflect.UnsafePointer {
+		t = t.Elem()
+	}
+	switch t.Kind() {
 	case reflect.Float32, reflect.Float64,
 		reflect.Int, reflect.Int8, reflect.Int16, reflect.Int32, reflect.Int64,
 		reflect.Uint, reflect.Uint8, reflect.Uint16, reflect.Uint32, reflect.Uint64:
@@ -290,7 +296,13 @@ func readAsScalar(rows driver.Rows, queryName string) (*qbtypes.ScalarData, erro
 	var aggIndex int64
 	for i, name := range colNames {
 		colType := qbtypes.ColumnTypeGroup
-		if aggRe.MatchString(name) {
+		// Builder queries aliases aggregation columns as __result_N (always numeric) and wraps group-by keys with toString (always string);
+		// Raw ClickHouse queries may use any aliases.
+		// Handling Builder queries, If name like __result_N -> aggregation, otherwise group-by column
+		// Handling Raw ClickHouse queries, If type is numeric -> aggregation, otherwise group-by column
+		// NOTE: For clickhouse queries, its wrong to assume that numeric columns are always aggregations, user might be grouping by on integer status_code.
+		// However, we are fine with this for now. If need arises, simplest way would be to solve this on the frontend side by asking user a mapping of column names to column types.
+		if aggRe.MatchString(name) || isNumericKind(colTypes[i].ScanType()) {
 			colType = qbtypes.ColumnTypeAggregation
 		}
 		cd[i] = &qbtypes.ColumnDescriptor{

pkg/types/spantypes/flamegraph_span.go

@@ -1,6 +1,8 @@
 package spantypes
 
 import (
+	"time"
+
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
@@ -37,11 +39,17 @@ type GettableFlamegraphTrace struct {
 	HasMore              bool                `json:"hasMore" required:"true"`
 }
 
-func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, startMs, endMs int64, hasMore bool) *GettableFlamegraphTrace {
+func NewGettableFlamegraphTrace(spans [][]*FlamegraphSpan, start, end time.Time, hasMore bool) *GettableFlamegraphTrace {
+	// convert timestamp to millisecond since client expect that
+	for _, level := range spans {
+		for _, span := range level {
+			span.Timestamp /= 1_000_000
+		}
+	}
 	return &GettableFlamegraphTrace{
 		Spans:                spans,
-		StartTimestampMillis: startMs,
-		EndTimestampMillis:   endMs,
+		StartTimestampMillis: start.UnixMilli(),
+		EndTimestampMillis:   end.UnixMilli(),
 		HasMore:              hasMore,
 	}
 }

tests/integration/tests/dashboard/03_v2_dashboard.py

@@ -9,6 +9,28 @@ from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.types import Operation, SigNoz
 
 BASE_URL = "/api/v2/dashboards"
+# v1 list returns every dashboard regardless of schema. v2 list converts each row
+# to the perses schema and 501s if any stored dashboard isn't perses-schema, so
+# listing for cleanup against a shared DB must go through v1.
+V1_BASE_URL = "/api/v1/dashboards"
+
+
+def _wipe_all_dashboards(signoz: SigNoz, token: str) -> None:
+    response = requests.get(
+        signoz.self.host_configs["8080"].get(V1_BASE_URL),
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.OK, response.text
+    for dashboard in response.json()["data"]:
+        metadata = (dashboard.get("data") or {}).get("metadata") or {}
+        base = BASE_URL if metadata.get("schemaVersion") == "v6" else V1_BASE_URL
+        del_res = requests.delete(
+            signoz.self.host_configs["8080"].get(f"{base}/{dashboard['id']}"),
+            headers={"Authorization": f"Bearer {token}"},
+            timeout=5,
+        )
+        assert del_res.status_code == HTTPStatus.NO_CONTENT, del_res.text
 
 
 # ─── failure cases (create no dashboards) ────────────────────────────────────
@@ -258,18 +280,7 @@ def test_dashboard_v2_lifecycle(  # pylint: disable=too-many-locals,too-many-sta
     # runs, so start from a clean slate: delete every dashboard (which also clears
     # pins via the delete cascade). This test then owns the whole dashboard space
     # and asserts on global counts.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     dashboard_requests = [
         (
@@ -687,18 +698,7 @@ def test_dashboard_v2_pin_limit(
 
     # Wipe the dashboard space (see lifecycle) so the per-user pin cap this test
     # asserts against starts empty — deleting dashboards clears their pins.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     ids: list[str] = []
     for i in range(max_pinned + 1):
@@ -785,18 +785,7 @@ def test_dashboard_v2_like_escaping(
 
     # Wipe the dashboard space (see lifecycle) so the filter assertions run
     # against only the dashboards this test creates.
-    existing = requests.get(
-        signoz.self.host_configs["8080"].get(BASE_URL),
-        params={"limit": 200},
-        headers={"Authorization": f"Bearer {token}"},
-        timeout=5,
-    ).json()["data"]["dashboards"]
-    for dashboard in existing:
-        requests.delete(
-            signoz.self.host_configs["8080"].get(f"{BASE_URL}/{dashboard['id']}"),
-            headers={"Authorization": f"Bearer {token}"},
-            timeout=5,
-        )
+    _wipe_all_dashboards(signoz, token)
 
     dashboard_requests = [
         ("esc-pct", "Cost 50% Report"),

tests/integration/tests/querier/17_clickhouse_queries.py

@@ -0,0 +1,74 @@
+"""
+Integration tests for raw ClickHouse SQL queries in the querier.
+"""
+
+from collections.abc import Callable
+from datetime import UTC, datetime, timedelta
+from http import HTTPStatus
+
+from fixtures import querier, types
+from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
+
+
+def test_clickhouse_scalar_numeric_result_alias_classified_as_aggregation(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+) -> None:
+    """A numeric column aliased ``__result_0`` is classified as an aggregation."""
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    response = querier.make_query_request(
+        signoz,
+        token,
+        int((now - timedelta(hours=1)).timestamp() * 1000),
+        int(now.timestamp() * 1000),
+        [
+            {
+                "type": "clickhouse_sql",
+                "spec": {
+                    "name": "A",
+                    "query": "SELECT toFloat64(1.5) AS `__result_0`",
+                    "disabled": False,
+                },
+            }
+        ],
+        request_type=querier.RequestType.SCALAR,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["status"] == "success"
+
+    columns = querier.get_scalar_columns(response.json())
+    assert len(columns) == 1
+    assert columns[0]["name"] == "__result_0"
+    assert columns[0]["columnType"] == "aggregation"
+    assert columns[0]["aggregationIndex"] == 0
+
+    response = querier.make_query_request(
+        signoz,
+        token,
+        int((now - timedelta(hours=1)).timestamp() * 1000),
+        int(now.timestamp() * 1000),
+        [
+            {
+                "type": "clickhouse_sql",
+                "spec": {
+                    "name": "A",
+                    "query": "SELECT toNullable(toFloat64(1.5)) AS value",
+                    "disabled": False,
+                },
+            }
+        ],
+        request_type=querier.RequestType.SCALAR,
+    )
+
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["status"] == "success"
+
+    columns = querier.get_scalar_columns(response.json())
+    assert len(columns) == 1
+    assert columns[0]["name"] == "value"
+    assert columns[0]["columnType"] == "aggregation"
+    assert columns[0]["aggregationIndex"] == 0