fixup! feat(integrations): adopt reworked @signozhq/ui components

fixup! feat(llm-observability): adopt reworked @signozhq/ui components
fixup! feat(settings): adopt reworked @signozhq/ui components
2026-10-07 10:40:42 +01:00 · 2026-10-06 15:06:37 -03:00 · 2026-10-06 15:06:32 -03:00 · 2026-10-01 15:00:58 -03:00 · 2026-10-01 12:02:15 -03:00 · 2026-10-01 12:02:15 -03:00
1265 changed files with 15583 additions and 40780 deletions
--- a/.github/workflows/goci.yaml
+++ b/.github/workflows/goci.yaml
@@ -67,7 +67,7 @@ jobs:
        with:
          go-version: "1.24"
      - name: check-semconv-generated-files
-        run: make semconv-check
+        run: go run ./scripts/semconv -check
  build:
    if: |
      github.event_name == 'merge_group' ||
--- a/4
+++ b/4
@@ -262,10 +262,6 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 semconv-generate: ## Regenerate semantic-convention families for Go and TypeScript
 	@go run ./scripts/semconv

-.PHONY: semconv-check
-semconv-check: ## Fail if the generated semantic-convention files are stale
-	@go run ./scripts/semconv -check
-
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -3425,13 +3425,6 @@ components:
          nullable: true
          type: number
      type: object
-    DashboardtypesAxisScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
    DashboardtypesBarChartPanelSpec:
      properties:
        axes:
@@ -3738,84 +3731,6 @@ components:
        hide:
          type: boolean
      type: object
-    DashboardtypesHeatmapAxes:
-      properties:
-        "y":
-          $ref: '#/components/schemas/DashboardtypesHeatmapAxis'
-      type: object
-    DashboardtypesHeatmapAxis:
-      properties:
-        scale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
-      type: object
-    DashboardtypesHeatmapChartAppearance:
-      properties:
-        colors:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
-      type: object
-    DashboardtypesHeatmapColorMode:
-      enum:
-      - palette
-      - opacity
-      type: string
-    DashboardtypesHeatmapColorScale:
-      enum:
-      - log
-      - sqrt
-      - linear
-      type: string
-    DashboardtypesHeatmapColors:
-      properties:
-        fill:
-          type: string
-        maxCount:
-          nullable: true
-          type: number
-        minCount:
-          nullable: true
-          type: number
-        mode:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
-        palette:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
-        scale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
-        steps:
-          type: integer
-      type: object
-    DashboardtypesHeatmapPalette:
-      enum:
-      - ice
-      - moss
-      - rust
-      - graphite
-      - ember
-      - lagoon
-      - orchid
-      - verdant
-      - lava
-      - beacon
-      type: string
-    DashboardtypesHeatmapPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesHeatmapYScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
    DashboardtypesHistogramBuckets:
      properties:
        bucketCount:
@@ -4169,12 +4084,10 @@ components:
        mapping:
          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
          signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
          signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
          signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
          signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
          signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
-          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
          signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
          signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
          signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4189,8 +4102,6 @@ components:
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
      type: object
    DashboardtypesPanelPluginKind:
      enum:
@@ -4203,8 +4114,6 @@ components:
      - signoz/HistogramPanel
      - signoz/ListPanel
      - signoz/TextPanel
-      - signoz/HeatmapPanel
-      - signoz/ScatterPlotPanel
      type: string
    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
      properties:
@@ -4230,18 +4139,6 @@ components:
      - kind
      - spec
      type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/HeatmapPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
      properties:
        kind:
@@ -4290,18 +4187,6 @@ components:
      - kind
      - spec
      type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/ScatterPlotPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
      properties:
        kind:
@@ -4381,16 +4266,6 @@ components:
        visualization:
          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
      type: object
-    DashboardtypesPointDiameter:
-      maximum: 40
-      minimum: 2
-      nullable: true
-      type: integer
-    DashboardtypesPointOpacity:
-      maximum: 1
-      minimum: 0.1
-      nullable: true
-      type: number
    DashboardtypesPostableDashboardV2:
      properties:
        generateName:
@@ -4564,87 +4439,6 @@ components:
      required:
      - queryValue
      type: object
-    DashboardtypesScatterPlotAxes:
-      properties:
-        x:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
-        "y":
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
-      type: object
-    DashboardtypesScatterPlotAxis:
-      properties:
-        label:
-          description: Axis title. Empty draws none.
-          type: string
-        scale:
-          $ref: '#/components/schemas/DashboardtypesAxisScale'
-        softMax:
-          nullable: true
-          type: number
-        softMin:
-          nullable: true
-          type: number
-      type: object
-    DashboardtypesScatterPlotChartAppearance:
-      properties:
-        points:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
-      type: object
-    DashboardtypesScatterPlotDimensions:
-      properties:
-        color:
-          description: Group-by label names (e.g. k8s.namespace.name) whose combined
-            values colour dots and drive the legend. Empty colours by every group-by
-            label.
-          items:
-            type: string
-          nullable: true
-          type: array
-        size:
-          description: Value column key that scales dot size. Empty draws every dot
-            at the default size.
-          type: string
-        x:
-          description: Value column key (queryName, or queryName.expression for a
-            multi-aggregation query) plotted on the x axis. Empty uses the first value
-            column.
-          type: string
-        "y":
-          description: Value column key plotted on the y axis. Empty uses the second
-            value column.
-          type: string
-      type: object
-    DashboardtypesScatterPlotPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
-        dimensions:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesTableFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        thresholds:
-          items:
-            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
-          nullable: true
-          type: array
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesScatterPlotPoints:
-      properties:
-        maxSize:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-        minSize:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-        opacity:
-          $ref: '#/components/schemas/DashboardtypesPointOpacity'
-        size:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-      type: object
    DashboardtypesSource:
      enum:
      - user
@@ -9247,15 +9041,6 @@ components:
      - alertType
      - ruleType
      type: object
-    RuletypesListableRuleViews:
-      properties:
-        views:
-          items:
-            $ref: '#/components/schemas/RuletypesRuleView'
-          type: array
-      required:
-      - views
-      type: object
    RuletypesListableRules:
      properties:
        labels:
@@ -9353,16 +9138,6 @@ components:
      - ruleType
      - condition
      type: object
-    RuletypesPostableRuleView:
-      properties:
-        data:
-          $ref: '#/components/schemas/RuletypesRuleViewData'
-        name:
-          type: string
-      required:
-      - name
-      - data
-      type: object
    RuletypesQueryType:
      enum:
      - builder
@@ -9501,45 +9276,6 @@ components:
      - promql_rule
      - anomaly_rule
      type: string
-    RuletypesRuleView:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        data:
-          $ref: '#/components/schemas/RuletypesRuleViewData'
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - data
-      - orgId
-      type: object
-    RuletypesRuleViewData:
-      properties:
-        order:
-          $ref: '#/components/schemas/RuletypesListOrder'
-        query:
-          type: string
-        sort:
-          $ref: '#/components/schemas/RuletypesListSort'
-        states:
-          items:
-            type: string
-          type: array
-        version:
-          type: string
-      required:
-      - version
-      type: object
    RuletypesScheduleType:
      enum:
      - hourly
@@ -21457,235 +21193,6 @@ paths:
      tags:
      - users
      x-signoz-stability: alpha
-  /api/v2/rule_views:
-    get:
-      deprecated: false
-      description: Returns every saved view in the calling user's org. Saved views
-        are shared org-wide.
-      operationId: ListRuleViews
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/RuletypesListableRuleViews'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List rule saved views
-      tags:
-      - rules
-      x-signoz-stability: alpha
-    post:
-      deprecated: false
-      description: Persists the calling user's rule listing state (query, states,
-        sort, order) as a named, reusable view shared across the org.
-      operationId: CreateRuleView
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/RuletypesPostableRuleView'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/RuletypesRuleView'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Create rule saved view
-      tags:
-      - rules
-      x-signoz-stability: alpha
-  /api/v2/rule_views/{id}:
-    delete:
-      deprecated: false
-      description: Removes a saved view. Saved views are shared org-wide. Deleting
-        a non-existent view returns 404.
-      operationId: DeleteRuleView
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Delete rule saved view
-      tags:
-      - rules
-      x-signoz-stability: alpha
-    put:
-      deprecated: false
-      description: Replaces a saved view's name and data. Saved views are shared org-wide.
-      operationId: UpdateRuleView
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/RuletypesPostableRuleView'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/RuletypesRuleView'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Update rule saved view
-      tags:
-      - rules
-      x-signoz-stability: alpha
  /api/v2/rules:
    get:
      deprecated: true
--- a/docs/contributing/query-range.md
+++ b/docs/contributing/query-range.md
@@ -84,9 +84,9 @@ A storage answers four questions and nothing else:
 | WhenAbsent | Absent row reads | Positive filter | Raw select | Multi-candidate column | Field keys |
 |---|---|---|---|---|---|
 | `AlwaysPresent` | a real value | no guard | no guard | no branch, ends the candidate list | table columns |
-| `AbsentIsSentinel` | `''`, 0, false, and that is not a value | exists guard | exists guard | presence branch | map attributes, cast JSON paths, string families of such members |
+| `AbsentIsSentinel` | `''`, 0, false, and that is not a value | exists guard | exists guard | presence branch | map attributes, cast JSON paths, string families |
 | `AbsentIsNull` | NULL | no guard | no guard | presence branch | multi-era folds, body JSON paths, numeric families |
-| `AbsentIsValue` | `''`, and that is the keyless contract | no guard | no guard | no presence branch | metrics labels, rule state history labels, and families of such members |
+| `AbsentIsValue` | `''`, and that is the keyless contract | no guard | no guard | no presence branch | metrics labels, rule state history labels |

 ### The generic layer

@@ -109,7 +109,7 @@ The functions, from the outside in:
 | `RejectsBodyFunction(traits, operator)` | Runs before resolution. A storage without body functions (`has`, `hasAny`, `hasAll`, `hasToken`, `search`) errors. The fingerprint side of a split skips the term, because the main query evaluates it. After resolution, `Condition` errors when `has`, `hasAny`, `hasAll`, or `hasToken` lands on a map-backed key (resource, attribute, scope), before the split can drop it. |
 | `SharedCondition(...)` | The `Compile` of every storage without its own condition language: `LogicalRead`, the shared data-type collision cast, `OperatorCondition`, then the guard rule. |
 | `OperatorCondition(...)` | The operator switch over an already cast read. A storage with its own cast policy composes with it. |
-| `LogicalRead(...)` | The only place family expressions are built. A single-member field reads through its member. A family merges the member reads, current member first: `COALESCE(NULLIF(m1, ''), NULLIF(m2, ''), '')` for strings, `multiIf` with a NULL tail for numbers. It ORs the member presence tests. A row without any member reads what the tail of the merge reads. When every member reads its sentinel as a value, so does the family. A member with a value map reads through `TransformRead`. `NOT EXISTS` is the read's `Absence`, the storage's own negated form. |
+| `LogicalRead(...)` | The only place family expressions are built. A single-member field reads through its member. A family merges the member reads, current member first: `COALESCE(NULLIF(m1, ''), NULLIF(m2, ''), '')` for strings, `multiIf` with a NULL tail for numbers. It ORs the member presence tests. A row without any member reads what the tail of the merge reads. A member with a value map reads through `TransformRead`. `NOT EXISTS` is the read's `Absence`, the storage's own negated form. |

 ### A resolved key

--- a/frontend/.storybook/preview-head.html
+++ b/frontend/.storybook/preview-head.html
@@ -70,3 +70,49 @@
 		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
 	})();
 </script>
+
+<script>
+	// Storybook has no microphone. Chromium's recognizer asks for one and for
+	// Google's speech service, and the `not-allowed` or `network` it reports makes
+	// the assistant hide its mic for the rest of the tab. This one starts
+	// listening at once and hears only what a story passes to `hear`.
+	(() => {
+		class StorySpeechRecognition extends EventTarget {
+			static listening = null;
+			lang = 'en-US';
+			continuous = false;
+			interimResults = false;
+			onstart = null;
+			onresult = null;
+			onerror = null;
+			onend = null;
+
+			start() {
+				StorySpeechRecognition.listening = this;
+				setTimeout(() => this.onstart?.());
+			}
+
+			stop() {
+				if (StorySpeechRecognition.listening === this) {
+					StorySpeechRecognition.listening = null;
+				}
+				setTimeout(() => this.onend?.());
+			}
+
+			abort() {
+				this.stop();
+			}
+
+			/** An interim result: the words so far, still listening. */
+			hear(transcript) {
+				const result = Object.assign([{ transcript, confidence: 1 }], {
+					isFinal: false,
+				});
+				this.onresult?.({ resultIndex: 0, results: [result] });
+			}
+		}
+
+		window.SpeechRecognition = StorySpeechRecognition;
+		window.webkitSpeechRecognition = StorySpeechRecognition;
+	})();
+</script>
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -122,7 +122,21 @@ const preview: Preview = {
 							['List', 'New', 'Edit'],
 						],
 						'Dashboards',
-						['List', 'Detail', 'Panel Editor', 'Public'],
+						[
+							'List',
+							'Detail',
+							[
+								'Overview',
+								'Settings',
+								'Variables',
+								'New Variable',
+								'Edit Variable',
+								'Authz',
+							],
+							'Panel Editor',
+							['Overview', 'Chart Options', 'Thresholds and Links'],
+							'Public',
+						],
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',
--- a/frontend/.storybook/test-runner.ts
+++ b/frontend/.storybook/test-runner.ts
@@ -23,6 +23,13 @@ const IGNORED_MESSAGES = [
 	// (YouTube embeds, the docs pane) so they hit the real network instead of
 	// an unanswered msw request; the block is the point, not a bug.
 	/violates the following Content Security Policy directive/,
+	// The filter editor's ANTLR parser reports every syntax error through
+	// `console.error` (`line 1:14 missing ...`), so each partial expression
+	// typed into it logs one; the editor shows the same errors on screen.
+	/^line \d+:\d+ /,
+	// Chromium's echo of a 4xx/5xx response, which the `[response]` entry below
+	// already reports with its URL and the time its request left.
+	/^Failed to load resource: the server responded with a status of /,
 ];

 interface CapturedMessage {
@@ -86,7 +93,9 @@ const config: TestRunnerConfig = {
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
 				messages.push({
-					at: Date.now(),
+					// The browser's clock, when the request left: a busy runner receives
+					// the outgoing story's responses after the next story has started.
+					at: response.request().timing().startTime,
 					text: `[response] ${response.status()} ${response.url()}`,
 				});
 			}
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -25,6 +25,7 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
  - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
+- Before styling a `@signozhq/ui` component, check its props in `node_modules/@signozhq/ui/dist/<component>/*.d.ts` for `className`/`style` support; some omit them. Avoid overriding the component's CSS vars unless explicitly needed.
 - When writing code that could need authorization checks, read ./src/lib/authz/README.md

 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
--- a/frontend/mocks/uplotMock.ts
+++ b/frontend/mocks/uplotMock.ts
@@ -2,8 +2,6 @@

 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
-	/** Consumers read `root.parentElement` to detect a re-mounted container. */
-	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -19,20 +17,13 @@ export interface MockUPlotPaths {
 }

 // Create mock instance methods
-const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
-	const root = document.createElement('div');
-	// Real uPlot mounts its root inside the target; without it a re-render reads
-	// `root.parentElement` off undefined and throws.
-	target?.appendChild(root);
-	return {
-		root,
-		setData: jest.fn(),
-		setSize: jest.fn(),
-		destroy: jest.fn(),
-		redraw: jest.fn(),
-		setSeries: jest.fn(),
-	};
-};
+const createMockUPlotInstance = (): MockUPlotInstance => ({
+	setData: jest.fn(),
+	setSize: jest.fn(),
+	destroy: jest.fn(),
+	redraw: jest.fn(),
+	setSeries: jest.fn(),
+});

 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -57,23 +48,19 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
-const mockOrient = jest.fn();

 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	target: HTMLElement,
+	_target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance(target);
+	return createMockUPlotInstance();
 }

 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-MockUPlot.orient = mockOrient;
-// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
-MockUPlot.pxRatio = 1;

 // Export the constructor as default
 export default MockUPlot;
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -41,6 +41,20 @@ if (!HTMLElement.prototype.releasePointerCapture) {
 	HTMLElement.prototype.releasePointerCapture = function (): void {};
 }

+// jsdom has no PointerEvent; Base UI Switch constructs one on click.
+if (typeof window.PointerEvent === 'undefined') {
+	class PointerEventMock extends MouseEvent {
+		pointerId: number;
+		pointerType: string;
+		constructor(type: string, init: PointerEventInit = {}) {
+			super(type, init);
+			this.pointerId = init.pointerId ?? 0;
+			this.pointerType = init.pointerType ?? '';
+		}
+	}
+	(window as any).PointerEvent = PointerEventMock;
+}
+
 if (typeof window.IntersectionObserver === 'undefined') {
 	class IntersectionObserverMock {
 		observe(): void {}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,9 +52,9 @@
    "@monaco-editor/react": "^4.7.0",
    "@sentry/react": "10.57.0",
    "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.6",
+    "@signozhq/design-tokens": "2.2.1",
    "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.1.0",
+    "@signozhq/ui": "0.2.0",
    "@tanstack/react-table": "8.21.3",
    "@tanstack/react-virtual": "3.13.22",
    "@uiw/codemirror-theme-copilot": "4.23.11",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -72,14 +72,14 @@ importers:
        specifier: 5.3.0
        version: 5.3.0
      '@signozhq/design-tokens':
-        specifier: 2.1.6
-        version: 2.1.6
+        specifier: 2.2.1
+        version: 2.2.1
      '@signozhq/icons':
        specifier: 0.4.0
        version: 0.4.0
      '@signozhq/ui':
-        specifier: 0.1.0
-        version: 0.1.0(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
+        specifier: 0.2.0
+        version: 0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
      '@tanstack/react-table':
        specifier: 8.21.3
        version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1284,6 +1284,33 @@ packages:
    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
    engines: {node: '>=6.9.0'}

+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@bcoe/v8-coverage@0.2.3':
    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}

@@ -1726,20 +1753,20 @@ packages:
    resolution: {integrity: sha512-rZAP3aVgB9ds9KOeUSL+zZ21hPmo8dh6fnIFwRQj5EAZl9gzR7wxYbYXYysAM8CTqGmUGyp2S4kUdV17MnGuWQ==}
    engines: {node: ^20.19.0 || ^22.13.0 || >=24}

-  '@floating-ui/core@1.5.2':
-    resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==}
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}

-  '@floating-ui/dom@1.5.3':
-    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}

-  '@floating-ui/react-dom@2.0.4':
-    resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==}
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
    peerDependencies:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'

-  '@floating-ui/utils@0.1.6':
-    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}

  '@gerrit0/mini-shiki@3.23.0':
    resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
@@ -2920,19 +2947,6 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-checkbox@1.3.11':
-    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
  '@radix-ui/react-collection@1.1.15':
    resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
    peerDependencies:
@@ -2946,15 +2960,6 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
  '@radix-ui/react-compose-refs@1.1.5':
    resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
    peerDependencies:
@@ -3008,19 +3013,6 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-dropdown-menu@2.1.24':
-    resolution: {integrity: sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
  '@radix-ui/react-focus-guards@1.1.6':
    resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
    peerDependencies:
@@ -3048,15 +3040,6 @@ packages:
    peerDependencies:
      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc

-  '@radix-ui/react-id@1.1.1':
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
  '@radix-ui/react-id@1.1.4':
    resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
    peerDependencies:
@@ -3066,19 +3049,6 @@ packages:
      '@types/react':
        optional: true

-  '@radix-ui/react-menu@2.1.24':
-    resolution: {integrity: sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
  '@radix-ui/react-popover@1.1.23':
    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
    peerDependencies:
@@ -3144,19 +3114,6 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-primitive@2.1.4':
-    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
  '@radix-ui/react-progress@1.1.16':
    resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
    peerDependencies:
@@ -3222,15 +3179,6 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-slot@1.2.4':
-    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
  '@radix-ui/react-slot@1.3.3':
    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
    peerDependencies:
@@ -3240,19 +3188,6 @@ packages:
      '@types/react':
        optional: true

-  '@radix-ui/react-switch@1.3.7':
-    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
  '@radix-ui/react-tabs@1.1.21':
    resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
    peerDependencies:
@@ -3266,45 +3201,6 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-toggle-group@1.1.19':
-    resolution: {integrity: sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toggle@1.1.18':
-    resolution: {integrity: sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.2.16':
-    resolution: {integrity: sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
  '@radix-ui/react-use-callback-ref@1.1.4':
    resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
    peerDependencies:
@@ -3341,15 +3237,6 @@ packages:
      '@types/react':
        optional: true

-  '@radix-ui/react-use-layout-effect@1.1.1':
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
  '@radix-ui/react-use-layout-effect@1.1.4':
    resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
    peerDependencies:
@@ -3721,14 +3608,14 @@ packages:
  '@sideway/pinpoint@2.0.0':
    resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}

-  '@signozhq/design-tokens@2.1.6':
-    resolution: {integrity: sha512-n0cH4TRS1Xj7BR38HGiwIBDekIOAnDgl2JyYmAyUvws0L1nlE0txSHO5NiOBJ22Dm8uMva0v5/rOHxpKsGQbsw==}
+  '@signozhq/design-tokens@2.2.1':
+    resolution: {integrity: sha512-ulf6lhWUP6qxqsyemQySUMfOIKRvefvZ5rBRv+wlhOpPfYPk3uatPmPkKEhAjISpX8f9g1Gg8wgRZxUCysf20Q==}

  '@signozhq/icons@0.4.0':
    resolution: {integrity: sha512-QctNvNPlQlsefFdIVmSy/P/7a1IcQ3IryKP0KPMqtoqew3q89FGUmFa5IfEJ7Z3CHhtG1zaXwBKqP72QkLyA3g==}

-  '@signozhq/ui@0.1.0':
-    resolution: {integrity: sha512-FjqmQhz+WtpGl29gPGZey5YwNe4p++TCyX4jaGUhAgvlBGRmxmAKW0lFRrSOYTPbgFL5UaDCW0wR62aiGHZ+FA==}
+  '@signozhq/ui@0.2.0':
+    resolution: {integrity: sha512-j20ldiOkR150ON0BCDhlq6fXGoPN++7w6e4t2HtM2XMM4buJO7aHzPzNKvDRZ2UUf/LGPULPAW8w6sg6gUVHyw==}
    peerDependencies:
      '@signozhq/icons': 0.3.0
      react: ^18.2.0
@@ -8520,6 +8407,11 @@ packages:
      react: ^16.8.5 || ^17.0.0 || ^18.0.0
      react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0

+  react-compiler-runtime@1.0.0:
+    resolution: {integrity: sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental
+
  react-day-picker@9.9.0:
    resolution: {integrity: sha512-NtkJbuX6cl/VaGNb3sVVhmMA6LSMnL5G3xNL+61IyoZj0mUZFWTg4hmj7PHjIQ8MXN9dHWhUHFoJWG6y60DKSg==}
    engines: {node: '>=18'}
@@ -8907,6 +8799,9 @@ packages:
  requires-port@1.0.0:
    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}

+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
+
  reserved-words@0.1.2:
    resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==}

@@ -11154,6 +11049,31 @@ snapshots:
      '@babel/helper-string-parser': 7.29.7
      '@babel/helper-validator-identifier': 7.29.7

+  '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@base-ui/utils': 0.3.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/utils': 0.2.12
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      use-sync-external-store: 1.6.0(react@18.2.0)
+    optionalDependencies:
+      '@date-fns/tz': 1.4.1
+      '@types/react': 18.0.26
+      date-fns: 4.1.0
+
+  '@base-ui/utils@0.3.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.29.2
+      '@floating-ui/utils': 0.2.12
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      reselect: 5.3.0
+      use-sync-external-store: 1.6.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+
  '@bcoe/v8-coverage@0.2.3': {}

  '@braintree/sanitize-url@7.0.1': {}
@@ -11598,22 +11518,22 @@ snapshots:
      '@eslint/core': 1.2.1
      levn: 0.4.1

-  '@floating-ui/core@1.5.2':
+  '@floating-ui/core@1.8.0':
    dependencies:
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/utils': 0.2.12

-  '@floating-ui/dom@1.5.3':
+  '@floating-ui/dom@1.8.0':
    dependencies:
-      '@floating-ui/core': 1.5.2
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12

-  '@floating-ui/react-dom@2.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@floating-ui/react-dom@2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
-      '@floating-ui/dom': 1.5.3
+      '@floating-ui/dom': 1.8.0
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)

-  '@floating-ui/utils@0.1.6': {}
+  '@floating-ui/utils@0.2.12': {}

  '@gerrit0/mini-shiki@3.23.0':
    dependencies:
@@ -12763,21 +12683,6 @@ snapshots:
      '@types/react': 18.0.26
      '@types/react-dom': 18.0.10

-  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
  '@radix-ui/react-collection@1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
@@ -12790,12 +12695,6 @@ snapshots:
      '@types/react': 18.0.26
      '@types/react-dom': 18.0.10

-  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
  '@radix-ui/react-compose-refs@1.1.5(@types/react@18.0.26)(react@18.2.0)':
    dependencies:
      react: 18.2.0
@@ -12850,21 +12749,6 @@ snapshots:
      '@types/react': 18.0.26
      '@types/react-dom': 18.0.10

-  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
  '@radix-ui/react-focus-guards@1.1.6(@types/react@18.0.26)(react@18.2.0)':
    dependencies:
      react: 18.2.0
@@ -12886,13 +12770,6 @@ snapshots:
    dependencies:
      react: 18.2.0

-  '@radix-ui/react-id@1.1.1(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
  '@radix-ui/react-id@1.1.4(@types/react@18.0.26)(react@18.2.0)':
    dependencies:
      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@18.0.26)(react@18.2.0)
@@ -12900,32 +12777,6 @@ snapshots:
    optionalDependencies:
      '@types/react': 18.0.26

-  '@radix-ui/react-menu@2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      aria-hidden: 1.2.6
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.7.2(@types/react@18.0.26)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
  '@radix-ui/react-popover@1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
      '@radix-ui/primitive': 1.1.7
@@ -12951,7 +12802,7 @@ snapshots:

  '@radix-ui/react-popper@1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
-      '@floating-ui/react-dom': 2.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
@@ -12995,15 +12846,6 @@ snapshots:
      '@types/react': 18.0.26
      '@types/react-dom': 18.0.10

-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
  '@radix-ui/react-progress@1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
@@ -13099,13 +12941,6 @@ snapshots:
      '@types/react': 18.0.26
      '@types/react-dom': 18.0.10

-  '@radix-ui/react-slot@1.2.4(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
  '@radix-ui/react-slot@1.3.3(@types/react@18.0.26)(react@18.2.0)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
@@ -13113,20 +12948,6 @@ snapshots:
    optionalDependencies:
      '@types/react': 18.0.26

-  '@radix-ui/react-switch@1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
  '@radix-ui/react-tabs@1.1.21(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
      '@radix-ui/primitive': 1.1.7
@@ -13143,53 +12964,6 @@ snapshots:
      '@types/react': 18.0.26
      '@types/react-dom': 18.0.10

-  '@radix-ui/react-toggle-group@1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
-  '@radix-ui/react-toggle@1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
-  '@radix-ui/react-tooltip@1.2.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-      '@types/react-dom': 18.0.10
-
  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@18.0.26)(react@18.2.0)':
    dependencies:
      react: 18.2.0
@@ -13218,12 +12992,6 @@ snapshots:
    optionalDependencies:
      '@types/react': 18.0.26

-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.0.26)(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.0.26
-
  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@18.0.26)(react@18.2.0)':
    dependencies:
      react: 18.2.0
@@ -13272,14 +13040,14 @@ snapshots:

  '@rc-component/context@1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
      rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)

  '@rc-component/mini-decimal@1.0.1':
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2

  '@rc-component/mutate-observer@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
@@ -13291,7 +13059,7 @@ snapshots:

  '@rc-component/portal@1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
      classnames: 2.3.2
      rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      react: 18.2.0
@@ -13559,16 +13327,15 @@ snapshots:

  '@sideway/pinpoint@2.0.0': {}

-  '@signozhq/design-tokens@2.1.6': {}
+  '@signozhq/design-tokens@2.2.1': {}

  '@signozhq/icons@0.4.0': {}

-  '@signozhq/ui@0.1.0(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
    dependencies:
+      '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@chenglou/pretext': 0.0.8
-      '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-icons': 1.3.2(react@18.2.0)
      '@radix-ui/react-popover': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-progress': 1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -13576,11 +13343,7 @@ snapshots:
      '@radix-ui/react-select': 2.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-slider': 1.4.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-switch': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@radix-ui/react-tabs': 1.1.21(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@signozhq/icons': 0.4.0
      '@tanstack/react-table': 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@tanstack/react-virtual': 3.14.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -13594,16 +13357,19 @@ snapshots:
      next-themes: 0.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      nuqs: 2.9.6(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
      react: 18.2.0
+      react-compiler-runtime: 1.0.0(react@18.2.0)
      react-day-picker: 9.9.0(react@18.2.0)
      react-dom: 18.2.0(react@18.2.0)
      react-resizable-panels: 4.12.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      sonner: 2.0.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
    transitivePeerDependencies:
+      - '@date-fns/tz'
      - '@emotion/is-prop-valid'
      - '@remix-run/react'
      - '@tanstack/react-router'
      - '@types/react'
      - '@types/react-dom'
+      - date-fns
      - next
      - react-router
      - react-router-dom
@@ -15129,10 +14895,10 @@ snapshots:

  cmdk@1.1.1(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
    transitivePeerDependencies:
@@ -19277,6 +19043,10 @@ snapshots:
    transitivePeerDependencies:
      - react-native

+  react-compiler-runtime@1.0.0(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+
  react-day-picker@9.9.0(react@18.2.0):
    dependencies:
      '@date-fns/tz': 1.4.1
@@ -19762,6 +19532,8 @@ snapshots:

  requires-port@1.0.0: {}

+  reselect@5.3.0: {}
+
  reserved-words@0.1.2: {}

  resize-observer-polyfill@1.5.1: {}
@@ -19867,7 +19639,7 @@ snapshots:

  rtl-css-js@1.16.1:
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2

  run-applescript@7.1.0: {}

@@ -20679,7 +20451,7 @@ snapshots:

  unload@2.2.0:
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
      detect-node: 2.1.0

  unplugin@2.3.11:
--- a/frontend/scripts/story-shots.mjs
+++ b/frontend/scripts/story-shots.mjs
@@ -417,7 +417,7 @@ for (const theme of themes.length ? themes : [null]) {
 						break;
 					}

-					height = Math.ceil(needed);
+					height = needed;
 					await page.setViewportSize({ width: Number(opts.width), height });
 					await page.waitForTimeout(Number(opts.settle));
 				}
--- a/frontend/src/api/ErrorResponseHandler.ts
+++ b/frontend/src/api/ErrorResponseHandler.ts
@@ -41,17 +41,16 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 			message: data?.error,
 		};
 	}
+	// Avoid logging error when the request was just cancelled for whatever reason
+	if (isCancel(error)) {
+		return {
+			statusCode: 500,
+			payload: null,
+			error: 'Something went wrong',
+			message: null,
+		};
+	}
 	if (request) {
-		// Avoid logging error when the request was just cancelled for whatever reason
-		if (isCancel(error)) {
-			return {
-				statusCode: 500,
-				payload: null,
-				error: 'Something went wrong',
-				message: null,
-			};
-		}
-
 		// client never received a response, or request never left
 		console.error('client never received a response, or request never left');

--- a/frontend/src/api/tests/ErrorResponseHandler.test.ts
+++ b/frontend/src/api/tests/ErrorResponseHandler.test.ts
@@ -0,0 +1,22 @@
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError, CanceledError } from 'axios';
+
+describe('ErrorResponseHandler', () => {
+	// axios aborts a request whose signal fired before it was sent without ever
+	// creating one, so the error carries neither `response` nor `request`.
+	it('treats a request cancelled before it was sent as a cancellation', () => {
+		const consoleError = jest
+			.spyOn(console, 'error')
+			.mockImplementation(() => undefined);
+
+		expect(ErrorResponseHandler(new CanceledError() as AxiosError)).toEqual({
+			statusCode: 500,
+			payload: null,
+			error: 'Something went wrong',
+			message: null,
+		});
+		expect(consoleError).not.toHaveBeenCalled();
+
+		consoleError.mockRestore();
+	});
+});
--- a/frontend/src/api/generated/services/rules/index.ts
+++ b/frontend/src/api/generated/services/rules/index.ts
@@ -19,9 +19,7 @@ import type {

 import type {
 	CreateRule201,
-	CreateRuleView201,
 	DeleteRuleByIDPathParameters,
-	DeleteRuleViewPathParameters,
 	GetRuleByID200,
 	GetRuleByIDPathParameters,
 	GetRuleHistoryFilterKeys200,
@@ -42,7 +40,6 @@ import type {
 	GetRuleHistoryTopContributors200,
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
-	ListRuleViews200,
 	ListRules200,
 	ListRulesV3200,
 	ListRulesV3Params,
@@ -50,11 +47,8 @@ import type {
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
 	RuletypesPostableRuleDTO,
-	RuletypesPostableRuleViewDTO,
 	TestRule200,
 	UpdateRuleByIDPathParameters,
-	UpdateRuleView200,
-	UpdateRuleViewPathParameters,
 } from '../sigNoz.schemas';

 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -80,351 +74,6 @@ const withQueryKey = <T extends object, K>(
 	return result;
 };

-/**
- * Returns every saved view in the calling user's org. Saved views are shared org-wide.
- * @summary List rule saved views
- */
-export const listRuleViews = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<ListRuleViews200>({
-		url: `/api/v2/rule_views`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getListRuleViewsQueryKey = () => {
-	return [`/api/v2/rule_views`] as const;
-};
-
-export const getListRuleViewsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listRuleViews>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listRuleViews>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListRuleViewsQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRuleViews>>> = ({
-		signal,
-	}) => listRuleViews(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listRuleViews>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListRuleViewsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listRuleViews>>
->;
-export type ListRuleViewsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List rule saved views
- */
-
-export function useListRuleViews<
-	TData = Awaited<ReturnType<typeof listRuleViews>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof listRuleViews>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListRuleViewsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary List rule saved views
- */
-export const invalidateListRuleViews = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListRuleViewsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Persists the calling user's rule listing state (query, states, sort, order) as a named, reusable view shared across the org.
- * @summary Create rule saved view
- */
-export const createRuleView = (
-	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateRuleView201>({
-		url: `/api/v2/rule_views`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostableRuleViewDTO,
-		signal,
-	});
-};
-
-export const getCreateRuleViewMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRuleView>>,
-		TError,
-		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createRuleView>>,
-	TError,
-	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
-	TContext
-> => {
-	const mutationKey = ['createRuleView'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createRuleView>>,
-		{ data?: BodyType<RuletypesPostableRuleViewDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createRuleView(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateRuleViewMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createRuleView>>
->;
-export type CreateRuleViewMutationBody =
-	| BodyType<RuletypesPostableRuleViewDTO>
-	| undefined;
-export type CreateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create rule saved view
- */
-export const useCreateRuleView = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createRuleView>>,
-		TError,
-		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createRuleView>>,
-	TError,
-	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
-	TContext
-> => {
-	return useMutation(getCreateRuleViewMutationOptions(options));
-};
-/**
- * Removes a saved view. Saved views are shared org-wide. Deleting a non-existent view returns 404.
- * @summary Delete rule saved view
- */
-export const deleteRuleView = (
-	{ id }: DeleteRuleViewPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/rule_views/${id}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteRuleViewMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRuleView>>,
-		TError,
-		{ pathParams: DeleteRuleViewPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteRuleView>>,
-	TError,
-	{ pathParams: DeleteRuleViewPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteRuleView'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteRuleView>>,
-		{ pathParams: DeleteRuleViewPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteRuleView(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteRuleViewMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteRuleView>>
->;
-
-export type DeleteRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete rule saved view
- */
-export const useDeleteRuleView = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteRuleView>>,
-		TError,
-		{ pathParams: DeleteRuleViewPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteRuleView>>,
-	TError,
-	{ pathParams: DeleteRuleViewPathParameters },
-	TContext
-> => {
-	return useMutation(getDeleteRuleViewMutationOptions(options));
-};
-/**
- * Replaces a saved view's name and data. Saved views are shared org-wide.
- * @summary Update rule saved view
- */
-export const updateRuleView = (
-	{ id }: UpdateRuleViewPathParameters,
-	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateRuleView200>({
-		url: `/api/v2/rule_views/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: ruletypesPostableRuleViewDTO,
-		signal,
-	});
-};
-
-export const getUpdateRuleViewMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRuleView>>,
-		TError,
-		{
-			pathParams: UpdateRuleViewPathParameters;
-			data?: BodyType<RuletypesPostableRuleViewDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateRuleView>>,
-	TError,
-	{
-		pathParams: UpdateRuleViewPathParameters;
-		data?: BodyType<RuletypesPostableRuleViewDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateRuleView'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateRuleView>>,
-		{
-			pathParams: UpdateRuleViewPathParameters;
-			data?: BodyType<RuletypesPostableRuleViewDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateRuleView(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateRuleViewMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateRuleView>>
->;
-export type UpdateRuleViewMutationBody =
-	| BodyType<RuletypesPostableRuleViewDTO>
-	| undefined;
-export type UpdateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update rule saved view
- */
-export const useUpdateRuleView = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateRuleView>>,
-		TError,
-		{
-			pathParams: UpdateRuleViewPathParameters;
-			data?: BodyType<RuletypesPostableRuleViewDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateRuleView>>,
-	TError,
-	{
-		pathParams: UpdateRuleViewPathParameters;
-		data?: BodyType<RuletypesPostableRuleViewDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateRuleViewMutationOptions(options));
-};
 /**
 * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
 * @deprecated
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -4372,12 +4372,6 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }

-export enum DashboardtypesAxisScaleDTO {
-	auto = 'auto',
-	linear = 'linear',
-	log = 'log',
-	symlog = 'symlog',
-}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -5297,182 +5291,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesTextPanelSpecDTO;
 }

-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
-}
-export enum DashboardtypesHeatmapYScaleDTO {
-	auto = 'auto',
-	linear = 'linear',
-	log = 'log',
-	symlog = 'symlog',
-}
-export interface DashboardtypesHeatmapAxisDTO {
-	scale?: DashboardtypesHeatmapYScaleDTO;
-}
-
-export interface DashboardtypesHeatmapAxesDTO {
-	y?: DashboardtypesHeatmapAxisDTO;
-}
-
-export enum DashboardtypesHeatmapColorModeDTO {
-	palette = 'palette',
-	opacity = 'opacity',
-}
-export enum DashboardtypesHeatmapPaletteDTO {
-	ice = 'ice',
-	moss = 'moss',
-	rust = 'rust',
-	graphite = 'graphite',
-	ember = 'ember',
-	lagoon = 'lagoon',
-	orchid = 'orchid',
-	verdant = 'verdant',
-	lava = 'lava',
-	beacon = 'beacon',
-}
-export enum DashboardtypesHeatmapColorScaleDTO {
-	log = 'log',
-	sqrt = 'sqrt',
-	linear = 'linear',
-}
-export interface DashboardtypesHeatmapColorsDTO {
-	/**
-	 * @type string
-	 */
-	fill?: string;
-	/**
-	 * @type number,null
-	 */
-	maxCount?: number | null;
-	/**
-	 * @type number,null
-	 */
-	minCount?: number | null;
-	mode?: DashboardtypesHeatmapColorModeDTO;
-	palette?: DashboardtypesHeatmapPaletteDTO;
-	scale?: DashboardtypesHeatmapColorScaleDTO;
-	/**
-	 * @type integer
-	 */
-	steps?: number;
-}
-
-export interface DashboardtypesHeatmapChartAppearanceDTO {
-	colors?: DashboardtypesHeatmapColorsDTO;
-}
-
-export interface DashboardtypesHeatmapPanelSpecDTO {
-	axes?: DashboardtypesHeatmapAxesDTO;
-	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	visualization?: DashboardtypesBasicVisualizationDTO;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
-	/**
-	 * @enum signoz/HeatmapPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
-	spec: DashboardtypesHeatmapPanelSpecDTO;
-}
-
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind {
-	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
-}
-export interface DashboardtypesScatterPlotAxisDTO {
-	/**
-	 * @type string
-	 * @description Axis title. Empty draws none.
-	 */
-	label?: string;
-	scale?: DashboardtypesAxisScaleDTO;
-	/**
-	 * @type number,null
-	 */
-	softMax?: number | null;
-	/**
-	 * @type number,null
-	 */
-	softMin?: number | null;
-}
-
-export interface DashboardtypesScatterPlotAxesDTO {
-	x?: DashboardtypesScatterPlotAxisDTO;
-	y?: DashboardtypesScatterPlotAxisDTO;
-}
-
-/**
- * @minimum 2
- * @maximum 40
- * @nullable
- */
-export type DashboardtypesPointDiameterDTO = number | null;
-
-/**
- * @minimum 0.1
- * @maximum 1
- * @nullable
- */
-export type DashboardtypesPointOpacityDTO = number | null;
-
-export interface DashboardtypesScatterPlotPointsDTO {
-	maxSize?: DashboardtypesPointDiameterDTO | null;
-	minSize?: DashboardtypesPointDiameterDTO | null;
-	opacity?: DashboardtypesPointOpacityDTO | null;
-	size?: DashboardtypesPointDiameterDTO | null;
-}
-
-export interface DashboardtypesScatterPlotChartAppearanceDTO {
-	points?: DashboardtypesScatterPlotPointsDTO;
-}
-
-export interface DashboardtypesScatterPlotDimensionsDTO {
-	/**
-	 * @type array,null
-	 * @description Group-by label names (e.g. k8s.namespace.name) whose combined values colour dots and drive the legend. Empty colours by every group-by label.
-	 */
-	color?: string[] | null;
-	/**
-	 * @type string
-	 * @description Value column key that scales dot size. Empty draws every dot at the default size.
-	 */
-	size?: string;
-	/**
-	 * @type string
-	 * @description Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty uses the first value column.
-	 */
-	x?: string;
-	/**
-	 * @type string
-	 * @description Value column key plotted on the y axis. Empty uses the second value column.
-	 */
-	y?: string;
-}
-
-export interface DashboardtypesScatterPlotPanelSpecDTO {
-	axes?: DashboardtypesScatterPlotAxesDTO;
-	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
-	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
-	formatting?: DashboardtypesTableFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesBasicVisualizationDTO;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
-	/**
-	 * @enum signoz/ScatterPlotPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
-	spec: DashboardtypesScatterPlotPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5482,9 +5300,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;

 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6410,8 +6226,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
-	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
 }
 /**
 * @nullable
@@ -10514,56 +10328,6 @@ export interface RuletypesListableRuleDTO {
 	updatedBy?: string;
 }

-export interface RuletypesRuleViewDataDTO {
-	order?: RuletypesListOrderDTO;
-	/**
-	 * @type string
-	 */
-	query?: string;
-	sort?: RuletypesListSortDTO;
-	/**
-	 * @type array
-	 */
-	states?: string[];
-	/**
-	 * @type string
-	 */
-	version: string;
-}
-
-export interface RuletypesRuleViewDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	data: RuletypesRuleViewDataDTO;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
-export interface RuletypesListableRuleViewsDTO {
-	/**
-	 * @type array
-	 */
-	views: RuletypesRuleViewDTO[];
-}
-
 export interface RuletypesListableRulesDTO {
 	/**
 	 * @type array
@@ -10732,14 +10496,6 @@ export interface RuletypesPostableRuleDTO {
 	version?: string;
 }

-export interface RuletypesPostableRuleViewDTO {
-	data: RuletypesRuleViewDataDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
 export type RuletypesRuleDTOAnnotations = { [key: string]: string };

 export type RuletypesRuleDTOLabels = { [key: string]: string };
@@ -14027,36 +13783,6 @@ export type GetUsersByRoleID200 = {
 	status: string;
 };

-export type ListRuleViews200 = {
-	data: RuletypesListableRuleViewsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateRuleView201 = {
-	data: RuletypesRuleViewDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteRuleViewPathParameters = {
-	id: string;
-};
-export type UpdateRuleViewPathParameters = {
-	id: string;
-};
-export type UpdateRuleView200 = {
-	data: RuletypesRuleViewDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListRules200 = {
 	/**
 	 * @type array
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
@@ -21,7 +21,6 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';

 import {
 	convertBuilderQueriesToV5,
-	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';

@@ -905,12 +904,6 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 });

-describe('mapPanelTypeToRequestType', () => {
-	it('sends a scatter plot as scalar, like a table', () => {
-		expect(mapPanelTypeToRequestType(PANEL_TYPES.SCATTER)).toBe('scalar');
-	});
-});
-
 describe('convertBuilderQueriesToV5 having normalization', () => {
 	const buildSpec = (having: unknown): MetricBuilderQuery => {
 		const [envelope] = convertBuilderQueriesToV5(
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
@@ -51,7 +51,6 @@ export function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
 		case PANEL_TYPES.BAR:
 			return 'time_series';
 		case PANEL_TYPES.TABLE:
-		case PANEL_TYPES.SCATTER:
 		case PANEL_TYPES.PIE:
 		case PANEL_TYPES.VALUE:
 			return 'scalar';
@@ -199,7 +198,6 @@ function createBaseSpec(
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: normalizeHaving(queryData.having),
-		bucketOptions: queryData.bucketOptions,
 		functions: isEmpty(queryData.functions)
 			? undefined
 			: queryData.functions.map((func: QueryFunction): QueryFunction => {
@@ -279,7 +277,6 @@ export function createAggregation(
 		queryData.dataSource === DataSource.METRICS &&
 		panelType &&
 		(panelType === PANEL_TYPES.TABLE ||
-			panelType === PANEL_TYPES.SCATTER ||
 			panelType === PANEL_TYPES.PIE ||
 			panelType === PANEL_TYPES.VALUE);

--- a/frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx
+++ b/frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx
@@ -17,7 +17,10 @@ function ModalFixture(): JSX.Element {
 	return (
 		<>
 			<Button
-				data-testid="open-add-credit-card"
+				variant="solid"
+				color="primary"
+				size="md"
+				testId="open-add-credit-card"
 				onClick={(): void => setOpen(true)}
 			>
 				Contact support
--- a/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss
+++ b/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss
@@ -8,6 +8,10 @@
 	:global(.ant-breadcrumb-separator) {
 		color: var(--muted-foreground);
 	}
+
+	[data-slot='button'] {
+		padding: 0px;
+	}
 }

 .divider {
--- a/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss
+++ b/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss
@@ -1,9 +1,5 @@
-.item {
-	--button-padding: 0;
-	--button-font-size: var(--periscope-font-size-base);
-}
-
 .itemLast {
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-base);
+	color: var(--button-secondary-label);
+	font-size: var(--button-font-size, var(--periscope-font-size-base));
+	line-height: var(--button-size-line-height, 16px);
 }
--- a/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
+++ b/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
@@ -26,9 +26,9 @@ function BreadcrumbItem({

 	return (
 		<Button
-			variant="ghost"
+			size="md"
+			variant="link"
 			color="secondary"
-			className={styles.item}
 			onClick={(e: React.MouseEvent): void => {
 				if (!('route' in props) || !props.route) {
 					return;
--- a/frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx
+++ b/frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx
@@ -34,21 +34,23 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
+					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					data-testid="error-contact-support-button"
+					testId="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="error-refresh-button"
+						testId="error-refresh-button"
 					>
 						Refresh
 					</Button>
--- a/frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss
+++ b/frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss
@@ -1,20 +1,32 @@
 .labelColumn {
+	// Badges fill their wrapper; the wrapper, as the flex item, owns the cap.
+	--badge-max-width: 100%;
+
+	position: relative;
 	display: flex;
 	gap: 4px;
 	align-items: center;
 	overflow: hidden;
 	max-width: 100%;
 	width: 100%;
+
+	> * {
+		flex-shrink: 0;
+		max-width: 180px;
+	}
 }

-.labelBadge {
-	cursor: default;
-	font-size: 12px;
+// Kept mounted so its width can still be measured.
+.overflowed {
+	position: absolute;
+	visibility: hidden;
+	pointer-events: none;
+}

-	--badge-display: inline;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
+// The only visible label truncates instead of pushing `+N` out of view.
+.labelColumn > .shrinkable {
+	flex-shrink: 1;
+	min-width: 0;
 }

 .overflowTrigger {
@@ -22,11 +34,6 @@
 	cursor: pointer;
 }

-.overflowBadge {
-	cursor: pointer;
-	font-size: 12px;
-}
-
 .labelPopover {
 	display: flex;
 	flex-direction: column;
--- a/frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx
+++ b/frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx
@@ -1,13 +1,14 @@
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { act, render, screen } from '@testing-library/react';

 import LabelColumn from './LabelColumn';

-let resizeCallback: ResizeObserverCallback | null = null;
+const BADGE_WIDTH = 60;
+
+let resizeCallbacks: ResizeObserverCallback[] = [];

 class MockResizeObserver {
 	constructor(callback: ResizeObserverCallback) {
-		resizeCallback = callback;
+		resizeCallbacks.push(callback);
 	}

 	observe = jest.fn();
@@ -15,15 +16,23 @@ class MockResizeObserver {
 	disconnect = jest.fn();
 }

-function triggerResize(width: number): void {
-	if (resizeCallback) {
-		act(() => {
-			resizeCallback?.(
-				[{ contentRect: { width } } as ResizeObserverEntry],
-				{} as ResizeObserver,
-			);
+// jsdom has no layout: every badge measures BADGE_WIDTH, the column `containerWidth`.
+function mockLayout(containerWidth: number): void {
+	jest
+		.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+		.mockImplementation(function getClientWidth(this: HTMLElement) {
+			return this.dataset.testid === 'label-column' ? containerWidth : 0;
 		});
-	}
+	jest
+		.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+		.mockReturnValue({ width: BADGE_WIDTH } as DOMRect);
+}
+
+function triggerResize(containerWidth: number): void {
+	mockLayout(containerWidth);
+	act(() => {
+		resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
+	});
 }

 beforeAll(() => {
@@ -31,13 +40,14 @@ beforeAll(() => {
 });

 afterEach(() => {
-	resizeCallback = null;
+	resizeCallbacks = [];
+	jest.restoreAllMocks();
 });

 function renderWithProviders(
 	ui: React.ReactElement,
 ): ReturnType<typeof render> {
-	return render(<TooltipProvider>{ui}</TooltipProvider>);
+	return render(ui);
 }

 describe('LabelColumn', () => {
@@ -54,13 +64,10 @@ describe('LabelColumn', () => {
 	it('should truncate labels and show +N badge when container is narrow', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];

+		// 3 badges (180px) + overflow reserve (40px)
+		mockLayout(220);
 		renderWithProviders(<LabelColumn labels={labels} />);

-		// Simulate narrow container that fits ~3 badges
-		// Badge widths: env=37, service=65, region=58, team=44, owner=51, version=65
-		// 220px available = 3 badges (160px) + gaps (8px) + overflow (44px)
-		triggerResize(220);
-
 		// First 3 visible
 		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
 		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
@@ -93,19 +100,37 @@ describe('LabelColumn', () => {
 		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
 	});

-	it('should show overflow badge with remaining count when container is narrow', () => {
+	it('should update the overflow count when the container resizes', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];

+		mockLayout(220);
+		renderWithProviders(<LabelColumn labels={labels} />);
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
+
+		// 2 badges (120px) + overflow reserve (40px)
+		triggerResize(160);
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+4');
+
+		triggerResize(1000);
+		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
+	});
+
+	it('should skip the overflow reserve when every label fits', () => {
+		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
+
+		mockLayout(labels.length * BADGE_WIDTH);
 		renderWithProviders(<LabelColumn labels={labels} />);

-		// Simulate narrow container to trigger overflow (shows 3 labels)
-		// 220px fits first 3 badges before overflow
-		triggerResize(220);
+		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
+	});

-		// Overflow badge shows +3 (remaining labels)
-		const overflowBadge = screen.getByTestId('label-overflow-badge');
-		expect(overflowBadge).toBeInTheDocument();
-		expect(overflowBadge).toHaveTextContent('+3');
+	it('should keep one label visible when even that one does not fit', () => {
+		const labels = ['env', 'service'];
+
+		mockLayout(50);
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+1');
 	});

 	it('should render empty when no labels provided', () => {
@@ -126,11 +151,9 @@ describe('LabelColumn', () => {
 	it('should show all labels when container is wide enough', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];

+		mockLayout(1000);
 		renderWithProviders(<LabelColumn labels={labels} />);

-		// Simulate wide container
-		triggerResize(1000);
-
 		// All labels visible
 		labels.forEach((label) => {
 			expect(screen.getByTestId(`label-tag-${label}`)).toBeInTheDocument();
--- a/frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx
+++ b/frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx
@@ -1,35 +1,19 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import cx from 'classnames';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';

 import LabelTag from './LabelTag';

 import styles from './LabelColumn.module.scss';
-import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
+import { getVisibleCount } from './utils';

 export interface LabelColumnProps {
 	labels: string[];
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: { [key: string]: string };
 }

@@ -39,60 +23,37 @@ function LabelColumn({
 	color = 'primary',
 }: LabelColumnProps): JSX.Element {
 	const containerRef = useRef<HTMLDivElement>(null);
-	const [maxVisibleCount, setMaxVisibleCount] = useState(labels.length);
+	const [visibleCount, setVisibleCount] = useState(labels.length);
 	const [, copyToClipboard] = useCopyToClipboard();

-	const calculateMaxVisible = useCallback(
-		(width: number): number => {
-			if (width <= 0) {
-				return 1;
-			}
-
-			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
-			let usedWidth = 0;
-			let count = 0;
-
-			for (const label of labels) {
-				const badgeWidth = estimateBadgeWidth(label, value?.[label]) + BADGE_GAP;
-				if (usedWidth + badgeWidth > availableWidth && count > 0) {
-					break;
-				}
-				usedWidth += badgeWidth;
-				count++;
-			}
-
-			return Math.max(1, count);
-		},
-		[labels, value],
-	);
-
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const container = containerRef.current;
 		if (!container) {
 			return;
 		}

-		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			if (entry && entry.contentRect.width > 0) {
-				setMaxVisibleCount(calculateMaxVisible(entry.contentRect.width));
+		const measure = (): void => {
+			const available = container.clientWidth;
+			if (available <= 0) {
+				return;
 			}
-		});

+			const widths = Array.from(container.children)
+				.slice(0, labels.length)
+				.map((item) => item.getBoundingClientRect().width);
+			const gap = parseFloat(getComputedStyle(container).columnGap) || 0;
+
+			setVisibleCount(getVisibleCount(widths, available, gap));
+		};
+
+		const observer = new ResizeObserver(measure);
 		observer.observe(container);
-
-		if (container.clientWidth > 0) {
-			setMaxVisibleCount(calculateMaxVisible(container.clientWidth));
-		}
+		measure();

 		return (): void => observer.disconnect();
-	}, [calculateMaxVisible]);
+	}, [labels, value]);

-	const needsOverflow = labels.length > maxVisibleCount;
-	const visibleLabels = needsOverflow
-		? labels.slice(0, maxVisibleCount)
-		: labels;
-	const remainingLabels = needsOverflow ? labels.slice(maxVisibleCount) : [];
+	const remainingLabels = labels.slice(visibleCount);

 	return (
 		<div
@@ -100,24 +61,23 @@ function LabelColumn({
 			className={styles.labelColumn}
 			data-testid="label-column"
 		>
-			{visibleLabels.map((label) => (
-				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
+			{labels.map((label, index) => (
+				<LabelTag
+					key={label}
+					label={label}
+					color={color}
+					value={value?.[label]}
+					className={cx({
+						[styles.overflowed]: index >= visibleCount,
+						[styles.shrinkable]: index === 0 && visibleCount === 1,
+					})}
+				/>
 			))}
 			{remainingLabels.length > 0 && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span>
-							<Badge
-								color={color}
-								className={styles.overflowBadge}
-								variant="outline"
-								data-testid="label-overflow-badge"
-							>
-								+{remainingLabels.length}
-							</Badge>
-						</span>
-					</TooltipTrigger>
-					<TooltipContent side="bottom" align="end">
+				<Tooltip
+					side="bottom"
+					align="end"
+					title={
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -140,8 +100,14 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					</TooltipContent>
-				</TooltipRoot>
+					}
+				>
+					<span>
+						<Badge color={color} variant="outlined" testId="label-overflow-badge">
+							+{remainingLabels.length}
+						</Badge>
+					</span>
+				</Tooltip>
 			)}
 		</div>
 	);
--- a/frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss
+++ b/frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss
@@ -1,11 +1,3 @@
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
-}
-
 .labelValue {
 	text-overflow: ellipsis;
 	overflow: hidden;
--- a/frontend/src/components/Alerts/LabelColumn/LabelTag.tsx
+++ b/frontend/src/components/Alerts/LabelColumn/LabelTag.tsx
@@ -1,35 +1,24 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';

 import styles from './LabelTag.module.scss';

 export interface LabelTagProps {
 	label: string;
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: string;
+	className?: string;
 }

-function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
+function LabelTag({
+	label,
+	value,
+	color,
+	className,
+}: LabelTagProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 	const displayText = value ? `${label}: ${value}` : label;
 	const searchFormat = value ? `${label} ${value}` : label;
@@ -41,20 +30,8 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 	};

 	return (
-		<TooltipRoot>
-			<TooltipTrigger asChild>
-				<span>
-					<Badge
-						color={color}
-						className={styles.labelBadge}
-						variant="outline"
-						data-testid={`label-tag-${label}`}
-					>
-						<span className={styles.labelValue}>{displayText}</span>
-					</Badge>
-				</span>
-			</TooltipTrigger>
-			<TooltipContent>
+		<Tooltip
+			title={
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -66,8 +43,19 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 						<Copy size={12} />
 					</button>
 				</div>
-			</TooltipContent>
-		</TooltipRoot>
+			}
+		>
+			<span className={className}>
+				<Badge
+					textTransform="none"
+					color={color ?? 'secondary'}
+					variant="outlined"
+					testId={`label-tag-${label}`}
+				>
+					<span className={styles.labelValue}>{displayText}</span>
+				</Badge>
+			</span>
+		</Tooltip>
 	);
 }

--- a/frontend/src/components/Alerts/LabelColumn/utils.ts
+++ b/frontend/src/components/Alerts/LabelColumn/utils.ts
@@ -1,14 +1,33 @@
-export const BADGE_GAP = 4;
 export const OVERFLOW_BADGE_WIDTH = 40;

-export const BADGE_MAX_WIDTH = 180;
-export const BADGE_PADDING = 16;
-export const CHAR_WIDTH = 7;
-
-export function estimateBadgeWidth(label: string, value?: string): number {
-	const displayText = value ? `${label}: ${value}` : label;
-	return Math.min(
-		displayText.length * CHAR_WIDTH + BADGE_PADDING,
-		BADGE_MAX_WIDTH,
+/**
+ * How many leading labels fit in `available` px, reserving room for the `+N` badge
+ * whenever some are left out. At least one label is always shown.
+ */
+export function getVisibleCount(
+	widths: number[],
+	available: number,
+	gap: number,
+): number {
+	const total = widths.reduce(
+		(sum, width, index) => sum + width + (index > 0 ? gap : 0),
+		0,
 	);
+	if (total <= available) {
+		return widths.length;
+	}
+
+	const limit = available - OVERFLOW_BADGE_WIDTH - gap;
+	let used = 0;
+	let count = 0;
+
+	for (const width of widths) {
+		used += width + (count > 0 ? gap : 0);
+		if (used > limit) {
+			break;
+		}
+		count++;
+	}
+
+	return Math.max(1, count);
 }
--- a/frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx
+++ b/frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx
@@ -30,21 +30,23 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						data-testid="no-results-clear-button"
+						testId="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="no-results-refresh-button"
+						testId="no-results-refresh-button"
 					>
 						Refresh
 					</Button>
--- a/frontend/src/components/Alerts/constants.ts
+++ b/frontend/src/components/Alerts/constants.ts
@@ -1,4 +1,4 @@
-import type { BadgeColor } from '@signozhq/ui/badge';
+import type { BadgeColorType } from '@signozhq/ui/badge';

 export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
 export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
@@ -24,9 +24,9 @@ export const SEVERITY_COLORS: Record<string, string> = {
 	info: 'var(--bg-robin-500)',
 };

-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
-	critical: 'error',
-	error: 'error',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColorType> = {
+	critical: 'danger',
+	error: 'danger',
 	warning: 'warning',
 	info: 'primary',
 };
--- a/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
@@ -33,36 +33,3 @@
 	color: var(--l1-foreground);
 	white-space: nowrap;
 }
-
-.auth-header-help-button {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	height: 32px;
-	padding: 10px 16px;
-	background: var(--l2-background);
-	color: var(--l2-foreground);
-	border: none;
-	border-radius: 2px;
-	cursor: pointer;
-	transition: opacity 0.2s ease;
-
-	span {
-		font-family: var(--font-family-inter, Inter, sans-serif);
-		font-size: 11px;
-		font-weight: 500;
-		line-height: 1;
-		color: var(--l2-foreground);
-		text-align: center;
-	}
-
-	svg {
-		flex-shrink: 0;
-		color: var(--l2-foreground);
-	}
-
-	&:hover {
-		opacity: 0.8;
-	}
-}
--- a/frontend/src/components/AuthPageContainer/AuthHeader.tsx
+++ b/frontend/src/components/AuthPageContainer/AuthHeader.tsx
@@ -22,11 +22,11 @@ function AuthHeader(): JSX.Element {
 				<span className="auth-header-logo-text">SigNoz</span>
 			</div>
 			<Button
-				className="auth-header-help-button"
+				size="md"
 				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 				variant="solid"
-				color="none"
+				color="secondary"
 			>
 				Get Help
 			</Button>
--- a/frontend/src/components/Badges/Badges.tsx
+++ b/frontend/src/components/Badges/Badges.tsx
@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
 import { Button, Flex } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Pill } from '@signozhq/ui/pill';
 import Input from 'components/Input';

 import './Badges.styles.scss';
@@ -47,18 +47,13 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Badge
+				<Pill.Closeable
+					textTransform="none"
 					key={tag}
-					color="vanilla"
-					style={{ userSelect: 'none' }}
-					closable
-					onClose={(e): void => {
-						e.preventDefault();
-						handleClose(tag);
-					}}
+					onClose={() => handleClose(tag)}
 				>
 					{tag}
-				</Badge>
+				</Pill.Closeable>
 			))}

 			{inputVisible && (
--- a/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss
+++ b/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss
@@ -39,9 +39,3 @@
 		}
 	}
 }
-
-.cloud-service-data-collected-table-tooltip {
-	max-width: 280px;
-	white-space: normal;
-	word-break: break-word;
-}
--- a/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx
+++ b/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx
@@ -4,7 +4,7 @@ import {
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { BarChart, Info, ScrollText } from '@signozhq/icons';
-import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';

 import './CloudServiceDataCollected.styles.scss';

@@ -88,23 +88,15 @@ function CloudServiceDataCollected({
 						<BarChart size={14} />
 						Metrics
 						{metricsInfoTooltip && (
-							<TooltipProvider>
-								<TooltipSimple
-									title={metricsInfoTooltip}
-									side="top"
-									tooltipContentProps={{
-										className: 'cloud-service-data-collected-table-tooltip',
-									}}
+							<Tooltip title={metricsInfoTooltip} side="top">
+								<span
+									className="cloud-service-data-collected-table-heading-info"
+									aria-label="About the metrics listed below"
+									data-testid="data-collected-metrics-info"
 								>
-									<span
-										className="cloud-service-data-collected-table-heading-info"
-										aria-label="About the metrics listed below"
-										data-testid="data-collected-metrics-info"
-									>
-										<Info size={12} />
-									</span>
-								</TooltipSimple>
-							</TooltipProvider>
+									<Info size={12} />
+								</span>
+							</Tooltip>
 						)}
 					</div>
 					<Table
--- a/frontend/src/components/CodeBlock/CodeBlock.module.scss
+++ b/frontend/src/components/CodeBlock/CodeBlock.module.scss
@@ -2,6 +2,13 @@
 	position: relative;
 }

+.copyButton {
+	position: absolute;
+	right: 8px;
+	top: 8px;
+	z-index: 1;
+}
+
 .codeBlockSyntaxHighlighter {
 	background-color: var(--l2-background) !important;
 	border-radius: 4px !important;
--- a/frontend/src/components/CodeBlock/CodeBlock.tsx
+++ b/frontend/src/components/CodeBlock/CodeBlock.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';
@@ -52,16 +53,20 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					onClick={handleCopy}
-					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
-					aria-label="Copy code"
-					title={isCopied ? 'Copied' : 'Copy'}
-					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
-				/>
+				<div className={styles.copyButton}>
+					<Tooltip title={isCopied ? 'Copied' : 'Copy'}>
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="sm"
+							icon
+							onClick={handleCopy}
+							aria-label="Copy code"
+						>
+							{isCopied ? <Check size={14} /> : <Copy size={14} />}
+						</Button>
+					</Tooltip>
+				</div>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -134,26 +134,27 @@ function CreateServiceAccountModal(): JSX.Element {

 			<DialogFooter className="create-sa-modal__footer">
 				<Button
+					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					data-testid="create-sa-cancel-btn"
+					testId="create-sa-cancel-btn"
+					prefix={<X size={12} />}
 				>
-					<X size={12} />
 					Cancel
 				</Button>

 				<AuthZButton
+					size="md"
 					checks={[SACreatePermission]}
-					withPortal={false}
 					type="submit"
 					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
-					data-testid="create-sa-submit-btn"
+					testId="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>
--- a/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
@@ -5,6 +5,7 @@ import {
 } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { submitImplicitly } from 'tests/submitImplicitly';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';

 import CreateServiceAccountModal from '../CreateServiceAccountModal';
@@ -60,7 +61,10 @@ describe('CreateServiceAccountModal', () => {
 		await screen.findByTestId('create-sa-name-input');

 		await waitFor(() =>
-			expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled(),
+			expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
+				'aria-disabled',
+				'true',
+			),
 		);
 	});

@@ -72,10 +76,14 @@ describe('CreateServiceAccountModal', () => {
 		const submitBtn = await screen.findByTestId('create-sa-submit-btn');

 		await user.type(nameInput, 'test');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);

 		await user.clear(nameInput);
-		await waitFor(() => expect(submitBtn).toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).toHaveAttribute('aria-disabled', 'true'),
+		);
 	});

 	it('successful submit shows toast.success and closes modal', async () => {
@@ -86,7 +94,9 @@ describe('CreateServiceAccountModal', () => {
 		await user.type(nameInput, 'Deploy Bot');

 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(submitBtn);

 		await waitFor(() => {
@@ -102,6 +112,40 @@ describe('CreateServiceAccountModal', () => {
 		});
 	});

+	it('pressing Enter again while creating sends one request', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let requests = 0;
+		server.use(
+			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) => {
+				requests += 1;
+				return res(
+					ctx.delay(100),
+					ctx.status(201),
+					ctx.json({ status: 'success', data: {} }),
+				);
+			}),
+		);
+		renderModal();
+
+		const nameInput = await screen.findByTestId<HTMLInputElement>(
+			'create-sa-name-input',
+		);
+		await user.type(nameInput, 'Deploy Bot');
+		const submitBtn = screen.getByTestId('create-sa-submit-btn');
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
+
+		submitImplicitly(nameInput);
+		await waitFor(() => expect(submitBtn).toHaveAttribute('aria-busy', 'true'));
+		submitImplicitly(nameInput);
+
+		await waitFor(() => {
+			expect(mockToast.success).toHaveBeenCalled();
+		});
+		expect(requests).toBe(1);
+	});
+
 	it('shows toast.error on API error and keeps modal open', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });

@@ -120,7 +164,9 @@ describe('CreateServiceAccountModal', () => {
 		await user.type(nameInput, 'Dupe Bot');

 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(submitBtn);

 		await waitFor(() => {
@@ -180,7 +226,10 @@ describe('CreateServiceAccountModal', () => {
 		).resolves.toBeInTheDocument();

 		// The footer lives outside the guard: submit is gated, Cancel still works.
-		expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled();
+		expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);

 		await user.click(screen.getByTestId('create-sa-cancel-btn'));

--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
@@ -4,30 +4,6 @@
 	align-items: center;
 	gap: 4px;

-	.zoom-out-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: var(--secondary-foreground);
-		background-color: var(--secondary-background);
-		border: 1px solid var(--secondary-border);
-		border-radius: 2px;
-		box-shadow: none;
-		padding: 10px;
-		height: 33px;
-
-		&:hover:not(:disabled) {
-			color: var(--primary-foreground);
-			background: var(--primary-background);
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
-
 	.timeSelection-input {
 		&:hover {
 			border-color: var(--l1-border) !important;
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
@@ -650,20 +650,20 @@ function CustomTimePicker({
 				</Popover>
 			</Tooltip>
 			{!showLiveLogs && !isModalTimeSelection && (
-				<Tooltip
-					title={
-						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
-					}
-				>
+				<Tooltip title={zoomOutDisabled ? undefined : 'Zoom out'}>
 					<Button
-						className="zoom-out-btn"
+						disabledTooltip="Zoom out time range is limited to 1 month"
+						size="md"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						data-testid="zoom-out-btn"
-						prefix={<ZoomOut size={14} />}
+						testId="zoom-out-btn"
+						icon
+						aria-label="Zoom out"
 						variant="solid"
-						color="none"
-					/>
+						color="secondary"
+					>
+						<ZoomOut size={14} />
+					</Button>
 				</Tooltip>
 			)}
 		</div>
--- a/frontend/src/components/CustomTimePicker/tests/customTimePickerZoomOut.test.tsx
+++ b/frontend/src/components/CustomTimePicker/tests/customTimePickerZoomOut.test.tsx
@@ -164,6 +164,6 @@ describe('CustomTimePicker - zoom out button', () => {
 		);

 		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		expect(zoomOutBtn).toBeDisabled();
+		expect(zoomOutBtn).toHaveAttribute('aria-disabled', 'true');
 	});
 });
--- a/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
+++ b/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
@@ -27,12 +27,14 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="icon"
+			size="sm"
+			icon
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-			prefix={<X size={14} />}
-		></Button>
+		>
+			<X size={14} />
+		</Button>
 	);

 	return (
--- a/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss
+++ b/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss
@@ -42,12 +42,5 @@
 			height: 1px;
 			background: var(--l1-border);
 		}
-
-		.export-button {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
 	}
 }
--- a/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx
+++ b/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx
@@ -308,13 +308,16 @@ describe.each([

 		fireEvent.click(screen.getByText('Export'));

-		expect(screen.getByTestId(testId)).toBeDisabled();
+		expect(screen.getByTestId(testId)).toHaveAttribute('aria-disabled', 'true');
 		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();

 		resolveDownload!();

 		await waitFor(() => {
-			expect(screen.getByTestId(testId)).not.toBeDisabled();
+			expect(screen.getByTestId(testId)).not.toHaveAttribute(
+				'aria-disabled',
+				'true',
+			);
 		});
 	});
 });
--- a/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx
+++ b/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Popover, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { RadioGroup } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -69,10 +69,15 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
-						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<RadioGroup
+						color="primary"
+						value={exportFormat}
+						onChange={setExportFormat}
+						items={[
+							{ value: DownloadFormats.CSV, label: 'csv' },
+							{ value: DownloadFormats.JSONL, label: 'jsonl' },
+						]}
+					/>
 				</div>

 				<div className="horizontal-line" />
@@ -80,19 +85,15 @@ export default function DownloadOptionsMenu({
 				<div className="row-limit">
 					<Typography.Text className="title">Number of Rows</Typography.Text>
 					<RadioGroup
+						color="primary"
 						value={String(rowLimit)}
 						onChange={(value): void => setRowLimit(Number(value))}
-					>
-						<RadioGroupItem value={String(DownloadRowCounts.TEN_K)}>
-							10k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.THIRTY_K)}>
-							30k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.FIFTY_K)}>
-							50k
-						</RadioGroupItem>
-					</RadioGroup>
+						items={[
+							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
+							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
+							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
+						]}
+					/>
 				</div>

 				{dataSource !== DataSource.TRACES && (
@@ -101,12 +102,15 @@ export default function DownloadOptionsMenu({

 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
-								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
-								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
-									Selected
-								</RadioGroupItem>
-							</RadioGroup>
+							<RadioGroup
+								color="primary"
+								value={columnsScope}
+								onChange={setColumnsScope}
+								items={[
+									{ value: DownloadColumnsScopes.ALL, label: 'All' },
+									{ value: DownloadColumnsScopes.SELECTED, label: 'Selected' },
+								]}
+							/>
 						</div>
 					</>
 				)}
@@ -115,9 +119,9 @@ export default function DownloadOptionsMenu({
 					variant="solid"
 					color="primary"
 					prefix={<Download size={16} />}
+					size="md"
+					width="100%"
 					onClick={handleExport}
-					className="export-button"
-					disabled={isDownloading}
 					loading={isDownloading}
 				>
 					Export
@@ -148,13 +152,14 @@ export default function DownloadOptionsMenu({
 				<Button
 					variant="ghost"
 					color="secondary"
-					size="icon"
-					prefix={<Download size={14} />}
+					size="sm"
+					icon
 					aria-label="Download"
-					data-testid={`periscope-btn-download-${dataSource}`}
-					disabled={isDownloading}
+					testId={`periscope-btn-download-${dataSource}`}
 					loading={isDownloading}
-				/>
+				>
+					<Download size={14} />
+				</Button>
 			</Tooltip>
 		</Popover>
 	);
--- a/frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx
+++ b/frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx
@@ -38,18 +38,23 @@ function DeleteMemberDialog({

 	const footer = (
 		<>
-			<Button variant="solid" color="secondary" onClick={onClose}>
-				<X size={12} />
+			<Button
+				size="md"
+				variant="solid"
+				color="secondary"
+				onClick={onClose}
+				prefix={<X size={12} />}
+			>
 				Cancel
 			</Button>
 			<Button
+				size="md"
 				variant="solid"
-				color="destructive"
-				disabled={isDeleting}
+				color="danger"
 				onClick={onConfirm}
 				loading={isDeleting}
+				prefix={<Trash2 size={12} />}
 			>
-				<Trash2 size={12} />
 				{isDeleting ? 'Processing...' : title}
 			</Button>
 		</>
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss
@@ -90,7 +90,6 @@
 			font-weight: var(--uppercase-small-500-font-weight);
 			line-height: 100%;
 			letter-spacing: 0.44px;
-			text-transform: uppercase;
 		}
 	}

@@ -113,6 +112,7 @@
 	&__footer-left {
 		display: flex;
 		align-items: center;
+		gap: var(--spacing-4);
 	}

 	&__footer-right {
@@ -128,10 +128,6 @@
 		flex-shrink: 0;
 	}

-	&__tooltip-wrapper {
-		display: inline-flex;
-	}
-
 	&__footer-btn {
 		display: inline-flex;
 		align-items: center;
@@ -200,6 +196,7 @@
 		background: var(--l2-background);
 		border: 1px solid var(--l1-border);
 		border-radius: 2px;
+		padding-right: var(--spacing-4);
 	}

 	&__link-text-wrap {
@@ -220,8 +217,4 @@
 		line-height: var(--line-height-18);
 		letter-spacing: -0.07px;
 	}
-
-	&__copy-btn {
-		border-left: 1px solid var(--l1-border);
-	}
 }
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
@@ -519,7 +519,12 @@ function EditMemberDrawer({
 									localRoles.map((roleId) => {
 										const role = availableRoles.find((r) => r.id === roleId);
 										return (
-											<Badge key={roleId} color="vanilla">
+											<Badge
+												textTransform="none"
+												variant="solid"
+												key={roleId}
+												color="secondary"
+											>
 												{role?.name ?? roleId}
 											</Badge>
 										);
@@ -559,15 +564,15 @@ function EditMemberDrawer({
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">Status</span>
 					{member?.status === MemberStatus.Active ? (
-						<Badge color="forest" variant="outline">
+						<Badge color="success" variant="outlined">
 							ACTIVE
 						</Badge>
 					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="cherry" variant="outline">
+						<Badge color="danger" variant="outlined">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="amber" variant="outline">
+						<Badge color="warning" variant="outlined">
 							INVITED
 						</Badge>
 					)}
@@ -575,12 +580,16 @@ function EditMemberDrawer({

 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
+					<Badge textTransform="none" variant="solid" color="secondary">
+						{formatTimestamp(member?.joinedOn)}
+					</Badge>
 				</div>
 				{!isInvited && (
 					<div className="edit-member-drawer__meta-item">
 						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
+						<Badge textTransform="none" variant="solid" color="secondary">
+							{formatTimestamp(member?.updatedAt)}
+						</Badge>
 					</div>
 				)}
 			</div>
@@ -611,55 +620,59 @@ function EditMemberDrawer({
 			{!isDeleted && (
 				<>
 					<div className="edit-member-drawer__footer-left">
-						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									onClick={(): void => setShowDeleteConfirm(true)}
-									disabled={isRootUser || isSelf}
-									variant="link"
-									color="destructive"
-								>
-									<Trash2 size={12} />
-									{isInvited ? 'Revoke Invite' : 'Delete Member'}
-								</Button>
-							</span>
-						</Tooltip>
+						<Button
+							disabledTooltip={getDeleteTooltip(isRootUser, isSelf)}
+							size="md"
+							onClick={(): void => setShowDeleteConfirm(true)}
+							disabled={isRootUser || isSelf}
+							variant="link"
+							color="danger"
+							prefix={<Trash2 size={12} />}
+						>
+							{isInvited ? 'Revoke Invite' : 'Delete Member'}
+						</Button>

 						<div className="edit-member-drawer__footer-divider" />
-						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-									variant="link"
-									color="warning"
-								>
-									<RefreshCw size={12} />
-									{isGeneratingLink
-										? 'Generating...'
-										: isInvited
-											? getInviteButtonLabel(
-													isLoadingTokenStatus,
-													existingToken,
-													isTokenExpired,
-													tokenNotFound,
-												)
-											: 'Generate Password Reset Link'}
-								</Button>
-							</span>
-						</Tooltip>
+						<Button
+							disabledTooltip={ROOT_USER_TOOLTIP}
+							size="md"
+							onClick={handleGenerateResetLink}
+							disabled={isRootUser}
+							loading={isGeneratingLink || isLoadingTokenStatus}
+							variant="link"
+							color="warning"
+							prefix={<RefreshCw size={12} />}
+						>
+							{isGeneratingLink
+								? 'Generating...'
+								: isInvited
+									? getInviteButtonLabel(
+											isLoadingTokenStatus,
+											existingToken,
+											isTokenExpired,
+											tokenNotFound,
+										)
+									: 'Generate Password Reset Link'}
+						</Button>
 					</div>

 					<div className="edit-member-drawer__footer-right">
-						<Button variant="outlined" color="secondary" onClick={handleClose}>
-							<X size={14} />
+						<Button
+							size="md"
+							variant="outlined"
+							color="secondary"
+							onClick={handleClose}
+							prefix={<X size={14} />}
+						>
 							Cancel
 						</Button>

 						<Button
+							disabledTooltip={isRootUser ? ROOT_USER_TOOLTIP : 'No changes to save'}
+							size="md"
 							variant="solid"
 							color="primary"
-							disabled={!isDirty || isSaving || isRootUser}
+							disabled={!isDirty || isRootUser}
 							onClick={handleSave}
 							loading={isSaving}
 						>
--- a/frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx
+++ b/frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx
@@ -45,11 +45,11 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
+						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}
 						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
-						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}
 					</Button>
--- a/frontend/src/components/EditMemberDrawer/tests/EditMemberDrawer.test.tsx
+++ b/frontend/src/components/EditMemberDrawer/tests/EditMemberDrawer.test.tsx
@@ -251,7 +251,7 @@ describe('EditMemberDrawer', () => {
 		expect(screen.getByText('ACTIVE')).toBeInTheDocument();
 		expect(
 			screen.getByRole('button', { name: /save member details/i }),
-		).toBeDisabled();
+		).toHaveAttribute('aria-disabled', 'true');
 	});

 	it('enables Save after editing name and calls updateUser on confirm', async () => {
@@ -271,7 +271,9 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Alice Updated');

 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);

 		await user.click(saveBtn);

@@ -295,7 +297,9 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Alice Updated');

 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);

 		await waitFor(() => {
@@ -323,7 +327,9 @@ describe('EditMemberDrawer', () => {
 		await user.click(await screen.findByTitle('signoz-editor'));

 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);

 		await waitFor(() => {
@@ -349,7 +355,9 @@ describe('EditMemberDrawer', () => {
 		await user.click(removeBtn);

 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);

 		await waitFor(() => {
@@ -505,7 +513,9 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Bob Updated');

 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);

 		await waitFor(() => {
@@ -541,7 +551,9 @@ describe('EditMemberDrawer', () => {
 			await user.type(nameInput, 'Alice Updated');

 			const saveBtn = screen.getByRole('button', { name: /save member details/i });
-			await waitFor(() => expect(saveBtn).not.toBeDisabled());
+			await waitFor(() =>
+				expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+			);
 			await user.click(saveBtn);

 			await waitFor(() => {
@@ -619,7 +631,7 @@ describe('EditMemberDrawer', () => {
 			renderDrawer({ member: selfMember });
 			expect(
 				screen.getByRole('button', { name: /delete member/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});

 		it('does not open delete confirm dialog when Delete is clicked while disabled (isSelf)', async () => {
@@ -642,7 +654,7 @@ describe('EditMemberDrawer', () => {
 			renderDrawer({ member: selfMember });
 			expect(
 				screen.getByRole('button', { name: /generate password reset link/i }),
-			).not.toBeDisabled();
+			).not.toHaveAttribute('aria-disabled', 'true');
 		});
 	});

@@ -664,21 +676,21 @@ describe('EditMemberDrawer', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /delete member/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});

 		it('disables Reset Link button for root user', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /generate password reset link/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});

 		it('disables Save button for root user', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /save member details/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});

 		it('does not open delete confirm dialog when Delete is clicked while disabled (root)', async () => {
--- a/frontend/src/components/ErrorModal/ErrorModal.tsx
+++ b/frontend/src/components/ErrorModal/ErrorModal.tsx
@@ -53,7 +53,7 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge color="error">
+					<Badge variant="solid" color="danger">
 						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
 					</Badge>
 				</span>
--- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx
+++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -137,16 +137,15 @@ function ExplorerCard({
 		);
 	};

-	const moreOptionMenu: MenuProps = {
-		items: [
-			{
-				key: 'delete',
-				label: <Typography.Text strong>Delete</Typography.Text>,
-				onClick: onDeleteHandler,
-				icon: <Trash2 size="md" />,
-			},
-		],
-	};
+	const moreOptionItems: DropdownItemType[] = [
+		{
+			type: 'item',
+			value: 'delete',
+			label: <Typography.Text strong>Delete</Typography.Text>,
+			onClick: onDeleteHandler,
+			prefix: <Trash2 size="md" />,
+		},
+	];

 	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
@@ -230,9 +229,14 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<DropdownMenuSimple menu={moreOptionMenu}>
+									<Dropdown
+										items={moreOptionItems}
+										nativeButton
+										align="end"
+										side="bottom"
+									>
 										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
-									</DropdownMenuSimple>
+									</Dropdown>
 								)}
 							</Space>
 						</OffSetCol>
--- a/frontend/src/components/ExportMenu/ExportMenu.styles.scss
+++ b/frontend/src/components/ExportMenu/ExportMenu.styles.scss
@@ -26,8 +26,4 @@
 			font-size: var(--periscope-font-size-base);
 		}
 	}
-
-	.export-button {
-		width: 100%;
-	}
 }
--- a/frontend/src/components/ExportMenu/ExportMenu.tsx
+++ b/frontend/src/components/ExportMenu/ExportMenu.tsx
@@ -1,8 +1,8 @@
 import { Download } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { RadioGroup } from '@signozhq/ui/radio-group';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	ClientExportData,
@@ -51,36 +51,41 @@ export default function ExportMenu({

 	return (
 		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-			<TooltipSimple title="Download">
+			<Tooltip title="Download">
 				<PopoverTrigger asChild>
 					<Button
 						variant="ghost"
 						color="secondary"
-						size="icon"
+						size="sm"
+						icon
 						aria-label="Download"
-						data-testid={`export-menu-${dataSource}`}
-						disabled={isExporting}
+						testId={`export-menu-${dataSource}`}
 						loading={isExporting}
 					>
 						<Download size={14} />
 					</Button>
 				</PopoverTrigger>
-			</TooltipSimple>
+			</Tooltip>
 			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
-						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<RadioGroup
+						color="primary"
+						value={exportFormat}
+						onChange={setExportFormat}
+						items={[
+							{ value: ExportFormat.Csv, label: 'csv' },
+							{ value: ExportFormat.Jsonl, label: 'jsonl' },
+						]}
+					/>
 				</div>

 				<Button
+					size="md"
 					variant="solid"
 					color="primary"
-					className="export-button"
+					width="100%"
 					onClick={handleExport}
-					disabled={isExporting}
 					loading={isExporting}
 					prefix={<Download size={16} />}
 				>
--- a/frontend/src/components/ExportMenu/tests/ExportMenu.test.tsx
+++ b/frontend/src/components/ExportMenu/tests/ExportMenu.test.tsx
@@ -80,6 +80,6 @@ describe('ExportMenu', () => {
 		mockIsExporting = true;
 		renderMenu();

-		expect(screen.getByTestId(TEST_ID)).toBeDisabled();
+		expect(screen.getByTestId(TEST_ID)).toHaveAttribute('aria-disabled', 'true');
 	});
 });
--- a/frontend/src/components/FieldsSelector/AddedFields.tsx
+++ b/frontend/src/components/FieldsSelector/AddedFields.tsx
@@ -57,9 +57,8 @@ function SortableField({
 			</div>
 			{!isRequired && (
 				<Button
-					className={cx(styles.removeBtn, 'periscope-btn')}
-					variant="outlined"
-					color="destructive"
+					variant="solid"
+					color="danger"
 					size="sm"
 					onClick={(): void => onRemove(field)}
 				>
--- a/frontend/src/components/FieldsSelector/FieldsSelector.module.scss
+++ b/frontend/src/components/FieldsSelector/FieldsSelector.module.scss
@@ -98,11 +98,15 @@
 	user-select: none;
 	font-size: 13px;

+	> [data-slot='button'] {
+		opacity: 0;
+		transition: opacity 0.15s ease-in-out;
+	}
+
 	&:hover {
 		background-color: var(--l2-background);

-		.removeBtn,
-		.addBtn {
+		> [data-slot='button'] {
 			opacity: 1;
 		}
 	}
@@ -137,14 +141,6 @@
 	height: 32px;
 }

-.removeBtn,
-.addBtn {
-	padding: 4px 10px;
-	opacity: 0;
-	transition: opacity 0.15s ease-in-out;
-	flex-shrink: 0;
-}
-
 .footer {
 	display: flex;
 	gap: 12px;
--- a/frontend/src/components/FieldsSelector/FieldsSelector.tsx
+++ b/frontend/src/components/FieldsSelector/FieldsSelector.tsx
@@ -173,6 +173,7 @@ function FieldsSelectorContent({
 				{hasUnsavedChanges && (
 					<div className={styles.footer}>
 						<Button
+							size="md"
 							variant="outlined"
 							color="secondary"
 							onClick={handleDiscard}
@@ -181,6 +182,7 @@ function FieldsSelectorContent({
 							Discard
 						</Button>
 						<Button
+							size="md"
 							variant="solid"
 							color="primary"
 							onClick={handleSave}
--- a/frontend/src/components/FieldsSelector/OtherFields.tsx
+++ b/frontend/src/components/FieldsSelector/OtherFields.tsx
@@ -138,7 +138,6 @@ function OtherFields({
 									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
-											className={cx(styles.addBtn, 'periscope-btn')}
 											variant="outlined"
 											color="secondary"
 											size="sm"
--- a/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
+++ b/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -102,10 +102,12 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroupSimple
+				<ToggleGroup
+					variant="outlined"
+					color="secondary"
+					size="sm"
 					type="single"
 					value={activeTab}
-					className="feedback-modal-tabs"
 					onChange={setActiveTab}
 					items={items}
 				/>
--- a/frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss
+++ b/frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss
@@ -1,7 +1,8 @@
 .header-right-section-container {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--spacing-8);
+	padding-right: var(--spacing-8);
 }

 .header-ai-assistant-btn-container {
@@ -121,78 +122,26 @@
 }

 .feedback-modal-container {
-	.feedback-modal-tabs {
-		width: 100%;
+	.feedback-modal-tab-label {
 		display: flex;
+		align-items: center;
+		gap: 8px;

-		.ant-radio-button-wrapper {
-			flex: 1;
-			margin: 0px !important;
-
-			border: 1px solid var(--l1-border);
-
-			&:before {
-				display: none;
-			}
-
-			.ant-radio-button-checked {
-				background-color: var(--l3-background);
-			}
+		.tab-icon {
+			width: 6px;
+			height: 6px;
 		}

-		.feedback-modal-tab-label {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-
-			.tab-icon {
-				width: 6px;
-				height: 6px;
-			}
-
-			.feedback-tab {
-				background-color: var(--danger-background);
-			}
-
-			.bug-tab {
-				background-color: var(--warning-background);
-			}
-
-			.feature-tab {
-				background-color: var(--primary-background);
-			}
+		.feedback-tab {
+			background-color: var(--danger-background);
 		}

-		.ant-tabs-nav-list {
-			.ant-tabs-tab {
-				padding: 6px 16px;
+		.bug-tab {
+			background-color: var(--warning-background);
+		}

-				border-radius: 2px;
-				background: var(--l2-background);
-				box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-				border: 1px solid var(--l1-border);
-
-				margin: 0 !important;
-
-				.ant-tabs-tab-btn {
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 166.667% */
-					letter-spacing: -0.06px;
-				}
-
-				&-active {
-					background: var(--l3-background);
-					color: var(--l1-foreground);
-
-					border-bottom: none !important;
-
-					.ant-tabs-tab-btn {
-						color: var(--l1-foreground);
-					}
-				}
-			}
+		.feature-tab {
+			background-color: var(--primary-background);
 		}
 	}

--- a/frontend/src/components/HeaderRightSection/HeaderRightSection.tsx
+++ b/frontend/src/components/HeaderRightSection/HeaderRightSection.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
 import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
@@ -113,24 +113,26 @@ function HeaderRightSection({
 						</span>
 					) : null}

-					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
-						<Button
-							variant="solid"
-							color="secondary"
-							className="noz-wave"
-							onClick={handleOpenAIAssistant}
-							aria-label={
-								showHeaderPendingBadge
-									? pendingUserInputCount === 1
-										? 'Open Noz, 1 action needs your response'
-										: `Open Noz, ${pendingUserInputCount} actions need your response`
-									: 'Open Noz'
-							}
-							prefix={<Noz size={20} />}
-						>
-							<Typography.Text>Noz</Typography.Text>
-						</Button>
-					</TooltipSimple>
+					<span className="noz-wave">
+						<Tooltip title={NOZ_TOOLTIP_TITLE}>
+							<Button
+								size="md"
+								variant="ghost"
+								color="secondary"
+								onClick={handleOpenAIAssistant}
+								aria-label={
+									showHeaderPendingBadge
+										? pendingUserInputCount === 1
+											? 'Open Noz, 1 action needs your response'
+											: `Open Noz, ${pendingUserInputCount} actions need your response`
+										: 'Open Noz'
+								}
+								prefix={<Noz size={20} />}
+							>
+								<Typography.Text>Noz</Typography.Text>
+							</Button>
+						</Tooltip>
+					</span>
 				</div>
 			)}

@@ -147,13 +149,15 @@ function HeaderRightSection({
 					onOpenChange={handleOpenFeedbackModalChange}
 				>
 					<Button
-						variant="ghost"
-						size="icon"
-						className="share-feedback-btn"
+						color="primary"
+						variant="link"
+						size="md"
+						icon
 						aria-label="Feedback"
-						prefix={<SquarePen size={14} />}
 						onClick={handleOpenFeedbackModal}
-					/>
+					>
+						<SquarePen size={14} />
+					</Button>
 				</Popover>
 			)}

@@ -170,16 +174,19 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
-						variant="ghost"
-						size="icon"
+						color="primary"
+						variant="link"
+						size="md"
+						icon
 						aria-label="Announcements"
-						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
-					/>
+					>
+						<Inbox size={14} />
+					</Button>
 				</Popover>
 			)}

@@ -196,12 +203,15 @@ function HeaderRightSection({
 					onOpenChange={handleOpenShareURLModalChange}
 				>
 					<Button
-						variant="ghost"
-						size="icon"
+						color="primary"
+						variant="link"
+						size="md"
+						icon
 						aria-label="Share"
-						prefix={<Globe size={14} />}
 						onClick={handleOpenShareURLModal}
-					/>
+					>
+						<Globe size={14} />
+					</Button>
 				</Popover>
 			)}
 		</div>
--- a/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
+++ b/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
@@ -149,6 +149,9 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
+								color="primary"
+								textPlacement="right"
+								disabledTooltip="Please select / enter valid relative time to toggle."
 								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
 								onChange={(): void => {
@@ -173,6 +176,8 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 					</Typography.Text>
 					<div className="absolute-relative-time-toggler">
 						<Switch
+							color="primary"
+							textPlacement="right"
 							value={enableExtraOption}
 							onChange={(): void => setEnableExtraOption((prev) => !prev)}
 						/>
--- a/frontend/src/components/HeaderRightSection/tests/FeedbackModal.test.tsx
+++ b/frontend/src/components/HeaderRightSection/tests/FeedbackModal.test.tsx
@@ -69,23 +69,23 @@ describe('FeedbackModal', () => {
 		const user = userEvent.setup();
 		render(<FeedbackModal onClose={mockOnClose} />);

-		// Initially, feedback radio should be active
-		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
-		expect(feedbackRadio).toBeChecked();
+		// Initially, feedback button should be active
+		const feedbackButton = screen.getByRole('button', { name: 'Feedback' });
+		expect(feedbackButton).toHaveAttribute('aria-pressed', 'true');

 		const bugTab = screen.getByText('Report a bug');
 		await user.click(bugTab);

-		// Bug radio should now be active
-		const bugRadio = screen.getByRole('radio', { name: 'Report a bug' });
-		expect(bugRadio).toBeChecked();
+		// Bug button should now be active
+		const bugButton = screen.getByRole('button', { name: 'Report a bug' });
+		expect(bugButton).toHaveAttribute('aria-pressed', 'true');

 		const featureTab = screen.getByText('Feature request');
 		await user.click(featureTab);

-		// Feature radio should now be active
-		const featureRadio = screen.getByRole('radio', { name: 'Feature request' });
-		expect(featureRadio).toBeChecked();
+		// Feature button should now be active
+		const featureButton = screen.getByRole('button', { name: 'Feature request' });
+		expect(featureButton).toHaveAttribute('aria-pressed', 'true');
 	});

 	it('should update feedback text when typing in textarea', async () => {
@@ -133,9 +133,9 @@ describe('FeedbackModal', () => {
 		const bugTab = screen.getByText('Report a bug');
 		await user.click(bugTab);

-		// Verify bug report radio is now active
-		const bugRadio = screen.getByRole('radio', { name: 'Report a bug' });
-		expect(bugRadio).toBeChecked();
+		// Verify bug report button is now active
+		const bugButton = screen.getByRole('button', { name: 'Report a bug' });
+		expect(bugButton).toHaveAttribute('aria-pressed', 'true');

 		const textarea = screen.getByPlaceholderText('Write your feedback here...');
 		const submitButton = screen.getByRole('button', { name: /submit/i });
@@ -166,9 +166,9 @@ describe('FeedbackModal', () => {
 		const featureTab = screen.getByText('Feature request');
 		await user.click(featureTab);

-		// Verify feature request radio is now active
-		const featureRadio = screen.getByRole('radio', { name: 'Feature request' });
-		expect(featureRadio).toBeChecked();
+		// Verify feature request button is now active
+		const featureButton = screen.getByRole('button', { name: 'Feature request' });
+		expect(featureButton).toHaveAttribute('aria-pressed', 'true');

 		const textarea = screen.getByPlaceholderText('Write your feedback here...');
 		const submitButton = screen.getByRole('button', { name: /submit/i });
@@ -262,8 +262,8 @@ describe('FeedbackModal', () => {
 		);
 		expect(newTextArea).toHaveValue(''); // Should be empty

-		// Verify active radio is reset to default (Feedback radio)
-		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
-		expect(feedbackRadio).toBeChecked();
+		// Verify active button is reset to default (Feedback button)
+		const feedbackButton = screen.getByRole('button', { name: 'Feedback' });
+		expect(feedbackButton).toHaveAttribute('aria-pressed', 'true');
 	});
 });
--- a/frontend/src/components/HeaderRightSection/tests/ShareURLModal.test.tsx
+++ b/frontend/src/components/HeaderRightSection/tests/ShareURLModal.test.tsx
@@ -176,7 +176,7 @@ describe('ShareURLModal', () => {
 		expect(
 			screen.getByText('Please select / enter valid relative time to toggle.'),
 		).toBeInTheDocument();
-		expect(screen.getByRole('switch')).toBeDisabled();
+		expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true');
 	});

 	it('should process URL with absolute time for non-custom time', async () => {
--- a/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
+++ b/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
@@ -1,44 +1,32 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';

-type BadgeColor =
-	| 'vanilla'
-	| 'robin'
-	| 'forest'
-	| 'amber'
-	| 'sienna'
-	| 'cherry'
-	| 'sakura'
-	| 'aqua';
+function getStatusCodeColor(statusCode: number): BadgeColorType {
+	if (statusCode >= 200 && statusCode < 300) {
+		return 'success';
+	}
+	if (statusCode >= 300 && statusCode < 400) {
+		return 'primary';
+	}
+	if (statusCode >= 400 && statusCode < 500) {
+		return 'warning';
+	}
+	if (statusCode >= 500) {
+		return 'danger';
+	}
+	if (statusCode >= 100 && statusCode < 200) {
+		return 'secondary';
+	}
+	return 'primary';
+}

 interface HttpStatusBadgeProps {
 	statusCode: string | number;
 	testId?: string;
-	className?: string;
-}
-
-function getStatusCodeColor(statusCode: number): BadgeColor {
-	if (statusCode >= 200 && statusCode < 300) {
-		return 'forest'; // Success - green
-	}
-	if (statusCode >= 300 && statusCode < 400) {
-		return 'robin'; // Redirect - blue
-	}
-	if (statusCode >= 400 && statusCode < 500) {
-		return 'amber'; // Client error - amber
-	}
-	if (statusCode >= 500) {
-		return 'cherry'; // Server error - red
-	}
-	if (statusCode >= 100 && statusCode < 200) {
-		return 'vanilla'; // Informational - neutral
-	}
-	return 'robin'; // Default fallback
 }

 function HttpStatusBadge({
 	statusCode,
 	testId,
-	className,
 }: HttpStatusBadgeProps): JSX.Element | null {
 	const numericStatusCode = Number(statusCode);

@@ -49,12 +37,7 @@ function HttpStatusBadge({
 	const color = getStatusCodeColor(numericStatusCode);

 	return (
-		<Badge
-			color={color}
-			variant="outline"
-			data-testid={testId}
-			className={className}
-		>
+		<Badge color={color} variant="outlined" testId={testId}>
 			{statusCode}
 		</Badge>
 	);
--- a/frontend/src/components/InputWithLabel/InputWithLabel.styles.scss
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.styles.scss
@@ -5,10 +5,6 @@
 	border-radius: 2px 0px 0px 2px;

 	.label {
-		// Typography.Text takes its display from this token; at its `inline` default
-		// the label blockifies as a flex item and the text rides the top of the row.
-		--typography-text-display: flex;
-
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
--- a/frontend/src/components/InviteMembers/InviteMembers.tsx
+++ b/frontend/src/components/InviteMembers/InviteMembers.tsx
@@ -119,11 +119,13 @@ function InviteMembers({
 							<div className={styles.cellAction}>
 								{canRemoveRow && (
 									<Button
-										variant="ghost"
-										color="destructive"
+										size="md"
+										variant="solid"
+										color="danger"
 										onClick={(): void => removeRow(row.id)}
 										aria-label="Remove row"
-										data-testid={`invite-remove-${row.id}`}
+										testId={`invite-remove-${row.id}`}
+										icon
 									>
 										<Trash2 size={12} />
 									</Button>
@@ -136,11 +138,12 @@ function InviteMembers({
 				{showAddButton && (
 					<div className={styles.addRow}>
 						<Button
+							size="md"
 							variant="dashed"
 							color="secondary"
 							prefix={<Plus size={12} />}
 							onClick={addRow}
-							data-testid="invite-add-row"
+							testId="invite-add-row"
 						>
 							Add another
 						</Button>
--- a/frontend/src/components/LogDetail/LogDetails.styles.scss
+++ b/frontend/src/components/LogDetail/LogDetails.styles.scss
@@ -158,37 +158,14 @@
 		}
 	}

-	.views-tabs {
-		color: var(--l2-foreground);
-
-		.view-title {
-			display: flex;
-			gap: var(--margin-2);
-			align-items: center;
-			justify-content: center;
-			font-size: var(--font-size-xs);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-		}
-
-		> button {
-			border: 1px solid var(--l1-border);
-			width: 114px;
-
-			&::before {
-				background: var(--l1-border);
-			}
-
-			&[data-state='on'] {
-				background: var(--l3-background);
-				color: var(--l1-foreground);
-				border: 1px solid var(--l1-border);
-
-				&::before {
-					background: var(--l1-border);
-				}
-			}
-		}
+	.view-title {
+		display: flex;
+		gap: var(--margin-2);
+		align-items: center;
+		justify-content: center;
+		font-size: var(--font-size-xs);
+		font-style: normal;
+		font-weight: var(--font-weight-normal);
 	}

 	.search-input {
@@ -239,42 +216,4 @@
 		align-items: center;
 		margin-left: 8px;
 	}
-
-	.log-arrow-btn {
-		padding: 0;
-		min-width: 28px;
-		height: 28px;
-		border-radius: 4px;
-		background: var(--l2-background);
-		color: var(--l2-foreground);
-		border: 1px solid var(--l1-border);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--l2-background);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--l3-background);
-		color: var(--l1-foreground);
-	}
-
-	.log-arrow-btn[disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		background: var(--l1-background);
-		color: var(--l3-foreground);
-
-		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--l3-background);
-			color: var(--l1-foreground);
-		}
-	}
 }
--- a/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.module.scss
+++ b/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.module.scss
@@ -6,14 +6,6 @@
 	gap: 8px;
 }

-.tooltipContent {
-	--tooltip-z-index: 2100;
-}
-
-.dropdownContent {
-	--dropdown-menu-content-z-index: 2100;
-}
-
 .leftSection {
 	display: flex;
 	align-items: center;
--- a/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx
+++ b/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@signozhq/ui/button';
 import { Divider } from '@signozhq/ui/divider';
-import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import { Typography } from '@signozhq/ui/typography';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
 import { toast } from '@signozhq/ui/sonner';
@@ -23,8 +23,6 @@ import { useCopyToClipboard } from 'react-use';

 import styles from './LogDetailsHeader.module.scss';

-const TOOLTIP_CONTENT_PROPS = { className: styles.tooltipContent };
-
 interface LogDetailsHeaderProps {
 	log: ILog;
 	onNavigatePrev: () => void;
@@ -53,17 +51,19 @@ function LogDetailsHeader({
 		toast.success('Copied to clipboard', { position: 'bottom-right' });
 	};

-	const menuItems = [
+	const menuItems: DropdownItemType[] = [
 		{
-			key: 'copy-log',
+			type: 'item',
+			value: 'copy-log',
 			label: 'Copy log',
-			icon: <Copy size={14} />,
+			prefix: <Copy size={14} />,
 			onClick: handleCopyLog,
 		},
 		{
-			key: 'copy-link',
+			type: 'item',
+			value: 'copy-link',
 			label: 'Copy link to log',
-			icon: <Link size={14} />,
+			prefix: <Link size={14} />,
 			onClick: (): void => onLogCopy(),
 		},
 	];
@@ -91,6 +91,7 @@ function LogDetailsHeader({
 			<div className={styles.actions}>
 				{showOpenInExplorer && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<Compass size={16} />}
@@ -100,51 +101,57 @@ function LogDetailsHeader({
 					</Button>
 				)}

-				<Dropdown
-					menu={{ items: menuItems }}
-					align="end"
-					className={styles.dropdownContent}
-					onClick={(e: MouseEvent): void => e.stopPropagation()}
-				>
+				<Dropdown items={menuItems} nativeButton align="end" side="bottom">
 					<Button
+						size="md"
 						variant="link"
 						color="secondary"
-						prefix={<Ellipsis size={16} />}
-						data-testid="log-details-header-menu"
-					/>
+						icon
+						aria-label="Log actions"
+						testId="log-details-header-menu"
+						onClick={(e: MouseEvent): void => e.stopPropagation()}
+					>
+						<Ellipsis size={16} />
+					</Button>
 				</Dropdown>

 				<div className={styles.arrows}>
-					<TooltipSimple
-						title="Move to previous log"
+					<Tooltip
+						title={isPrevDisabled ? undefined : 'Move to previous log'}
 						side="top"
-						open={isPrevDisabled ? false : undefined}
-						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
+							disabledTooltip="No previous log"
+							size="md"
 							variant="outlined"
 							color="secondary"
-							prefix={<ChevronUp size={14} />}
+							icon
+							aria-label="Move to previous log"
 							disabled={isPrevDisabled}
 							onClick={onNavigatePrev}
-							data-testid="log-details-header-prev"
-						/>
-					</TooltipSimple>
-					<TooltipSimple
-						title="Move to next log"
+							testId="log-details-header-prev"
+						>
+							<ChevronUp size={14} />
+						</Button>
+					</Tooltip>
+					<Tooltip
+						title={isNextDisabled ? undefined : 'Move to next log'}
 						side="top"
-						open={isNextDisabled ? false : undefined}
-						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
+							disabledTooltip="No next log"
+							size="md"
 							variant="outlined"
 							color="secondary"
-							prefix={<ChevronDown size={14} />}
+							icon
+							aria-label="Move to next log"
 							disabled={isNextDisabled}
 							onClick={onNavigateNext}
-							data-testid="log-details-header-next"
-						/>
-					</TooltipSimple>
+							testId="log-details-header-next"
+						>
+							<ChevronDown size={14} />
+						</Button>
+					</Tooltip>
 				</div>
 			</div>
 		</div>
--- a/frontend/src/components/LogDetail/LogHighlights/LogHighlights.module.scss
+++ b/frontend/src/components/LogDetail/LogHighlights/LogHighlights.module.scss
@@ -12,13 +12,6 @@
 	}
 }

-.valueBadge {
-	--badge-font-size: 13px;
-	box-sizing: border-box;
-	max-width: 100%;
-	min-width: 0;
-}
-
 // Truncating text inside a badge
 .badgeText {
 	min-width: 0;
@@ -29,11 +22,14 @@

 .serviceDot {
 	width: 6px;
+	min-width: 6px;
 	height: 6px;
+	min-height: 6px;
 	border-radius: 50%;
 	background: var(--accent-forest);
 	flex-shrink: 0;
 	margin-right: 4px;
+	display: inline-block;
 }

 .traceLink {
--- a/frontend/src/components/LogDetail/LogHighlights/config.tsx
+++ b/frontend/src/components/LogDetail/LogHighlights/config.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { ILog } from 'types/api/logs/log';
@@ -8,13 +8,13 @@ import styles from './LogHighlights.module.scss';
 import TraceIdField from './TraceIdField';

 // Severity badge color mirrors the LogStateIndicator bar
-const SEVERITY_COLOR: Record<string, BadgeColor> = {
-	[LogType.TRACE]: 'forest',
-	[LogType.DEBUG]: 'aqua',
-	[LogType.INFO]: 'robin',
-	[LogType.WARN]: 'amber',
-	[LogType.ERROR]: 'cherry',
-	[LogType.FATAL]: 'sakura',
+const SEVERITY_COLOR: Record<string, BadgeColorType> = {
+	[LogType.TRACE]: 'success',
+	[LogType.DEBUG]: 'info',
+	[LogType.INFO]: 'primary',
+	[LogType.WARN]: 'warning',
+	[LogType.ERROR]: 'danger',
+	[LogType.FATAL]: 'highlight-danger',
 };

 export interface LogHighlightConfig {
@@ -32,9 +32,13 @@ const getAttr = (log: ILog, key: string): string =>

 const valueBadge = (
 	value: string,
-	options?: { prefix?: ReactNode; color?: BadgeColor },
+	options?: { prefix?: ReactNode; color?: BadgeColorType },
 ): ReactNode => (
-	<Badge color={options?.color ?? 'vanilla'} className={styles.valueBadge}>
+	<Badge
+		variant="solid"
+		color={options?.color ?? 'secondary'}
+		textTransform="none"
+	>
 		{options?.prefix}
 		<span className={styles.badgeText} title={value}>
 			{value}
--- a/frontend/src/components/LogDetail/tests/LogDetail.test.tsx
+++ b/frontend/src/components/LogDetail/tests/LogDetail.test.tsx
@@ -129,6 +129,18 @@ describe('LogDetail drawer — header', () => {
 		});
 	});

+	it('keeps the drawer open when a ⋯ menu item is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const onClose = jest.fn();
+
+		renderDrawer({ onClose });
+
+		await user.click(screen.getByTestId('log-details-header-menu'));
+		await user.click(await screen.findByText('Copy log'));
+
+		expect(onClose).not.toHaveBeenCalled();
+	});
+
 	it('shows "Open in Explorer" when a handleOpenInExplorer handler is provided', () => {
 		renderDrawer({ handleOpenInExplorer: jest.fn() });

@@ -217,8 +229,14 @@ describe('LogDetail drawer — header', () => {
 		// Active log is the first one.
 		renderDrawer({ log: logs[0], logs, onNavigateLog });

-		expect(screen.getByTestId('log-details-header-prev')).toBeDisabled();
-		expect(screen.getByTestId('log-details-header-next')).toBeEnabled();
+		expect(screen.getByTestId('log-details-header-prev')).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
+		expect(screen.getByTestId('log-details-header-next')).not.toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);

 		await user.click(screen.getByTestId('log-details-header-next'));
 		expect(onNavigateLog).toHaveBeenLastCalledWith(logs[1]);
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -86,7 +86,8 @@ function LogDetailInner({
 				target.closest('.cm-tooltip-autocomplete') ||
 				target.closest('.drawer-popover') ||
 				target.closest('.query-status-popover') ||
-				target.closest('[data-radix-popper-content-wrapper]')
+				target.closest('[data-radix-popper-content-wrapper]') ||
+				target.closest('[data-base-ui-portal]')
 			) {
 				return;
 			}
@@ -315,9 +316,12 @@ function LogDetailInner({
 				<div className="log-detail-drawer__section-divider" />

 				<div className="tabs-and-search">
-					<ToggleGroupSimple
+					<ToggleGroup
+						variant="outlined"
+						color="secondary"
+						size="sm"
 						type="single"
-						className="views-tabs"
+						testId="log-detail-views-tabs"
 						onChange={handleModeChange}
 						value={selectedView}
 						items={[
@@ -363,9 +367,12 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									prefix={<Filter size="lg" />}
+									icon
+									aria-label="Show Filters"
 									onClick={handleFilterVisible}
-								/>
+								>
+									<Filter size="lg" />
+								</Button>
 							</Tooltip>
 						)}
 					</div>
--- a/frontend/src/components/MarkdownEditor/EditorToolbar.tsx
+++ b/frontend/src/components/MarkdownEditor/EditorToolbar.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import {
 	Bold,
 	CodeXml,
@@ -11,16 +11,17 @@ import {
 	Type,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';

+import { READ_ONLY_TOOLTIP } from './constants';
 import InsertVariableMenu from './InsertVariableMenu';
 import MarkdownHelp from './MarkdownHelp';
 import type { EditorCommand, EditorVariable } from './types';

 import styles from './MarkdownEditor.module.scss';

-const COMMAND_ICONS: Record<string, ReactNode> = {
+const COMMAND_ICONS: Record<string, ReactElement> = {
 	heading: <Heading size={14} />,
 	bold: <Bold size={14} />,
 	italic: <Italic size={14} />,
@@ -61,20 +62,22 @@ function EditorToolbar({
 			<span className={styles.toolbarDivider} />
 			<div className={styles.commands}>
 				{commands.map((command) => (
-					<TooltipSimple key={command.id} title={command.label}>
+					<Tooltip key={command.id} title={disabled ? undefined : command.label}>
 						<Button
+							disabledTooltip={READ_ONLY_TOOLTIP}
 							type="button"
 							variant="ghost"
 							color="secondary"
-							size="icon"
+							size="sm"
+							icon
 							disabled={disabled}
 							aria-label={command.label}
-							data-testid={`markdown-command-${command.id}`}
+							testId={`markdown-command-${command.id}`}
 							onClick={(): void => onRunCommand(command)}
 						>
 							{COMMAND_ICONS[command.id]}
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 				))}
 			</div>
 			<div className={styles.toolbarEnd}>
--- a/frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx
+++ b/frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx
@@ -1,8 +1,9 @@
 import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
+import { ChevronDown, DollarSign } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Dropdown, type DropdownActionItemType } from '@signozhq/ui/dropdown';

+import { READ_ONLY_TOOLTIP } from './constants';
 import type { EditorVariable } from './types';

 import styles from './MarkdownEditor.module.scss';
@@ -17,9 +18,10 @@ interface InsertVariableMenuProps {
 function toMenuItems(
 	variables: EditorVariable[],
 	onSelect: (name: string) => void,
-): MenuItem[] {
+): DropdownActionItemType[] {
 	return variables.map((variable) => ({
-		key: variable.name,
+		type: 'item',
+		value: variable.name,
 		label: (
 			<span
 				className={styles.variableRow}
@@ -60,15 +62,17 @@ function InsertVariableMenu({
 	}

 	return (
-		<DropdownMenuSimple
-			className={styles.variableMenu}
-			menu={{
-				items,
-				search: {
-					placeholder: 'Search variables',
-					searchIcon: <Search size={14} />,
-					onSearchChange: setSearch,
-				},
+		<Dropdown
+			items={items}
+			nativeButton
+			align="end"
+			side="bottom"
+			contentMaxWidth={320}
+			disabled={disabled}
+			disabledTooltip={READ_ONLY_TOOLTIP}
+			searchInputProps={{
+				placeholder: 'Search variables',
+				onChange: setSearch,
 			}}
 		>
 			<Button
@@ -76,15 +80,13 @@ function InsertVariableMenu({
 				variant="outlined"
 				color="secondary"
 				size="sm"
-				disabled={disabled}
 				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
 				suffix={<ChevronDown size={14} />}
-				className={styles.insertVariable}
-				data-testid="markdown-insert-variable"
+				testId="markdown-insert-variable"
 			>
 				Insert variable
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }

--- a/frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss
+++ b/frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss
@@ -74,27 +74,10 @@
 	margin-left: auto;
 }

-.insertVariable {
-	white-space: nowrap;
-}
-
 .insertVariableIcon {
 	color: var(--text-amber-400);
 }

-// The ui library's dropdown assumes a global border-box reset this app doesn't
-// have (`box-sizing` is set on `body` only and doesn't inherit): its items are
-// `width: 100%` + padding, so in the portal they lay out content-box and
-// overflow the popup by the padding — clipping the flush-right badge.
-.variableMenu,
-.variableMenu * {
-	box-sizing: border-box;
-}
-
-.variableMenu {
-	width: 320px;
-}
-
 // Shrinkable, so a clamped popup truncates the name instead of clipping the
 // badge at the content's `overflow: hidden` edge.
 .variableRow {
--- a/frontend/src/components/MarkdownEditor/MarkdownHelp.tsx
+++ b/frontend/src/components/MarkdownEditor/MarkdownHelp.tsx
@@ -15,9 +15,10 @@ function MarkdownHelp(): JSX.Element {
 					type="button"
 					variant="ghost"
 					color="secondary"
-					size="icon"
+					size="sm"
+					icon
 					aria-label="Markdown syntax help"
-					data-testid="markdown-help-trigger"
+					testId="markdown-help-trigger"
 				>
 					<CircleHelp size={14} />
 				</Button>
--- a/frontend/src/components/MarkdownEditor/tests/MarkdownEditor.test.tsx
+++ b/frontend/src/components/MarkdownEditor/tests/MarkdownEditor.test.tsx
@@ -256,8 +256,14 @@ describe('MarkdownEditor', () => {
 			/>,
 		);

-		expect(screen.getByTestId('markdown-command-bold')).toBeDisabled();
-		expect(screen.getByTestId('markdown-insert-variable')).toBeDisabled();
+		expect(screen.getByTestId('markdown-command-bold')).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
+		expect(screen.getByTestId('markdown-insert-variable')).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
 	});

 	it('hides the insert-variable control when none are available', () => {
--- a/frontend/src/components/MarkdownEditor/constants.ts
+++ b/frontend/src/components/MarkdownEditor/constants.ts
@@ -1,6 +1,8 @@
 // The body is persisted inline in the dashboard JSON, so its length is capped.
 export const MARKDOWN_MAX_LENGTH = 16000;

+export const READ_ONLY_TOOLTIP = 'The editor is read-only';
+
 /** The canonical syntax; the renderer resolves the other three too. */
 export const formatVariableToken = (name: string): string => `$${name}`;

--- a/frontend/src/components/MembersTable/MembersTable.styles.scss
+++ b/frontend/src/components/MembersTable/MembersTable.styles.scss
@@ -95,7 +95,6 @@
 			font-weight: var(--uppercase-small-500-font-weight);
 			line-height: 100%;
 			letter-spacing: 0.44px;
-			text-transform: uppercase;
 		}
 	}
 }
--- a/frontend/src/components/MembersTable/MembersTable.tsx
+++ b/frontend/src/components/MembersTable/MembersTable.tsx
@@ -55,14 +55,14 @@ function NameEmailCell({
 function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 	if (status === MemberStatus.Active) {
 		return (
-			<Badge color="forest" variant="outline">
+			<Badge color="success" variant="outlined">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status === MemberStatus.Deleted) {
 		return (
-			<Badge color="cherry" variant="outline">
+			<Badge color="danger" variant="outlined">
 				DELETED
 			</Badge>
 		);
@@ -70,13 +70,17 @@ function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {

 	if (status === MemberStatus.Invited) {
 		return (
-			<Badge color="amber" variant="outline">
+			<Badge color="warning" variant="outlined">
 				INVITED
 			</Badge>
 		);
 	}

-	return <Badge color="vanilla">⎯</Badge>;
+	return (
+		<Badge variant="solid" color="secondary">
+			⎯
+		</Badge>
+	);
 }

 function MembersEmptyState({
--- a/frontend/src/components/NewSelect/CustomMultiSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomMultiSelect.tsx
@@ -20,7 +20,7 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
-import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
@@ -758,9 +758,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					tabIndex={isActive ? 0 : -1}
 				>
 					<Checkbox
+						color="primary"
 						value={isSelected}
-						className="option-checkbox"
-						onClick={(e): void => selectFromButton(e, 'checkbox')}
+						width="100%"
+						onChange={(): void => {
+							handleItemSelection('checkbox');
+							setActiveChipIndex(-1);
+							setActiveIndex(-1);
+						}}
 					>
 						<div className="option-content">
 							<Typography.Text truncate={1} className="option-label-text">
@@ -1595,7 +1600,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 						>
 							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox value={allOptionsSelected} className="option-checkbox">
+								<Checkbox color="primary" value={allOptionsSelected} width="100%">
 									<div className="option-content">
 										<div className="all-option-text">ALL</div>
 									</div>
@@ -1973,13 +1978,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				// `label` arrives already cut to maxTagTextLength, so the reveal reads the
 				// option's own text (falling back to the raw value for freeform tags).
 				return (
-					<TooltipSimple
-						side="top"
-						delayDuration={300}
-						title={findOptionLabelText(options, value)}
-					>
+					<Tooltip side="top" title={findOptionLabelText(options, value)}>
 						{tag}
-					</TooltipSimple>
+					</Tooltip>
 				);
 			}

@@ -2015,56 +2016,51 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	return (
 		// Self-provided so the per-tag tooltips work wherever this select is rendered,
 		// without every consumer having to sit under an app-level provider.
-		<TooltipProvider>
-			<div
-				className={cx('custom-multiselect-wrapper', {
-					'all-selected': allOptionShown || isAllSelected,
+		<div
+			className={cx('custom-multiselect-wrapper', {
+				'all-selected': allOptionShown || isAllSelected,
+			})}
+		>
+			{(allOptionShown || isAllSelected) && !searchText && (
+				<div className="all-text">ALL</div>
+			)}
+			<Select
+				ref={selectRef}
+				className={cx('custom-multiselect', className, {
+					'has-selection': selectedChips.length > 0 && !isAllSelected,
+					'is-all-selected': isAllSelected,
 				})}
-			>
-				{(allOptionShown || isAllSelected) && !searchText && (
-					<div className="all-text">ALL</div>
-				)}
-				<Select
-					ref={selectRef}
-					className={cx('custom-multiselect', className, {
-						'has-selection': selectedChips.length > 0 && !isAllSelected,
-						'is-all-selected': isAllSelected,
-					})}
-					placeholder={placeholder}
-					mode="multiple"
-					showSearch
-					filterOption={false}
-					onSearch={handleSearch}
-					value={displayValue}
-					onChange={(newValue): void => {
-						handleInternalChange(newValue, false);
-					}}
-					onClear={onClearHandler}
-					onDropdownVisibleChange={handleDropdownVisibleChange}
-					open={isOpen}
-					defaultActiveFirstOption={defaultActiveFirstOption}
-					popupMatchSelectWidth={dropdownMatchSelectWidth}
-					allowClear={allowClear}
-					getPopupContainer={getPopupContainer ?? popupContainer}
-					suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-					dropdownRender={customDropdownRender}
-					menuItemSelectedIcon={null}
-					popupClassName={cx(
-						'custom-multiselect-dropdown-container',
-						popupClassName,
-					)}
-					notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-					onKeyDown={handleKeyDown}
-					tagRender={tagRender as any}
-					placement={placement}
-					listHeight={300}
-					searchValue={searchText}
-					maxTagTextLength={maxTagTextLength}
-					maxTagCount={isAllSelected ? undefined : maxTagCount}
-					{...rest}
-				/>
-			</div>
-		</TooltipProvider>
+				placeholder={placeholder}
+				mode="multiple"
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={displayValue}
+				onChange={(newValue): void => {
+					handleInternalChange(newValue, false);
+				}}
+				onClear={onClearHandler}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={dropdownMatchSelectWidth}
+				allowClear={allowClear}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				tagRender={tagRender as any}
+				placement={placement}
+				listHeight={300}
+				searchValue={searchText}
+				maxTagTextLength={maxTagTextLength}
+				maxTagCount={isAllSelected ? undefined : maxTagCount}
+				{...rest}
+			/>
+		</div>
 	);
 };

--- a/frontend/src/components/NewSelect/test/CustomMultiSelect.tagTooltip.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomMultiSelect.tagTooltip.test.tsx
@@ -1,6 +1,5 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';

 import CustomMultiSelect from '../CustomMultiSelect';

@@ -14,15 +13,13 @@ const SELECTED = ['checkout-service-prod', 'payments-service-prod'];

 function renderSelect(): void {
 	render(
-		<TooltipProvider>
-			<CustomMultiSelect
-				options={OPTIONS}
-				value={SELECTED}
-				maxTagCount={1}
-				maxTagTextLength={10}
-				maxTagPlaceholder={(omitted): string => `+${omitted.length}`}
-			/>
-		</TooltipProvider>,
+		<CustomMultiSelect
+			options={OPTIONS}
+			value={SELECTED}
+			maxTagCount={1}
+			maxTagTextLength={10}
+			maxTagPlaceholder={(omitted): string => `+${omitted.length}`}
+		/>,
 	);
 }

--- a/frontend/src/components/NewSelect/styles.scss
+++ b/frontend/src/components/NewSelect/styles.scss
@@ -498,114 +498,95 @@ $custom-border-color: #2c3044;
 			margin-bottom: 8px;
 		}

-		.option-checkbox {
+		.all-option-text {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
 			width: 100%;
-			cursor: default;
+		}

-			// The checkbox button is the only pointer target on the left; the label
-			// still toggles on click but keeps a default cursor.
-			> button {
-				cursor: pointer;
-			}
+		.option-content {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;

-			// @signozhq/ui Checkbox renders children inside a <label> that is
-			// content-sized by default. Make it fill the row (min-width: 0 lets it
-			// shrink) so the option text below can truncate instead of overflowing.
-			> label {
+			.option-label-text {
 				flex: 1 1 auto;
 				min-width: 0;
+				margin-bottom: 0;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}

-			.all-option-text {
+			.option-badge {
+				font-size: 12px;
+				padding: 2px 6px;
+				border-radius: 4px;
+				background-color: $custom-border-color;
+				color: var(--l2-foreground);
+				margin-left: 8px;
+			}
+		}
+
+		// "Only"/"All" is the primary action — a filled pill that reads as a
+		// button; "Toggle" is a secondary hint in plain text. Sized to the row's
+		// resting height so revealing them on hover never shifts it.
+		.only-btn,
+		.toggle-btn {
+			display: none;
+			align-items: center;
+			justify-content: center;
+			height: 18px;
+			min-height: 0;
+			font-size: 12px;
+			line-height: 1;
+			box-shadow: none;
+		}
+
+		.only-btn {
+			padding: 4px 8px;
+			// Black interior + a visible border so the pill stands out clearly
+			// against the near-black row when revealed on hover.
+			border: 1px solid var(--l3-border);
+			border-radius: 3px;
+			background-color: var(--bg-ink-500, #0b0c0e);
+			color: var(--l1-foreground);
+			cursor: pointer;
+		}
+
+		.toggle-btn {
+			padding: 0 6px;
+			border: none;
+			background-color: transparent;
+			color: var(--l2-foreground);
+			cursor: pointer;
+		}
+
+		// Toggle appears over the checkbox area; "Only/All" takes over the row
+		// content and hides Toggle there (higher specificity wins).
+		&:hover {
+			.toggle-btn {
 				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				width: 100%;
 			}

-			.option-content {
+			.option-badge {
+				display: none;
+			}
+		}
+
+		.option-content:hover {
+			.only-btn {
 				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				width: 100%;
-
-				.option-label-text {
-					flex: 1 1 auto;
-					min-width: 0;
-					margin-bottom: 0;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-
-				.option-badge {
-					font-size: 12px;
-					padding: 2px 6px;
-					border-radius: 4px;
-					background-color: $custom-border-color;
-					color: var(--l2-foreground);
-					margin-left: 8px;
-				}
 			}

-			// "Only"/"All" is the primary action — a filled pill that reads as a
-			// button; "Toggle" is a secondary hint in plain text. Sized to the row's
-			// resting height so revealing them on hover never shifts it.
-			.only-btn,
 			.toggle-btn {
 				display: none;
-				align-items: center;
-				justify-content: center;
-				height: 18px;
-				min-height: 0;
-				font-size: 12px;
-				line-height: 1;
-				box-shadow: none;
 			}

-			.only-btn {
-				padding: 4px 8px;
-				// Black interior + a visible border so the pill stands out clearly
-				// against the near-black row when revealed on hover.
-				border: 1px solid var(--l3-border);
-				border-radius: 3px;
-				background-color: var(--bg-ink-500, #0b0c0e);
-				color: var(--l1-foreground);
-				cursor: pointer;
-			}
-
-			.toggle-btn {
-				padding: 0 6px;
-				border: none;
-				background-color: transparent;
-				color: var(--l2-foreground);
-				cursor: pointer;
-			}
-
-			// Toggle appears over the checkbox area; "Only/All" takes over the row
-			// content and hides Toggle there (higher specificity wins).
-			&:hover {
-				.toggle-btn {
-					display: flex;
-				}
-
-				.option-badge {
-					display: none;
-				}
-			}
-
-			.option-content:hover {
-				.only-btn {
-					display: flex;
-				}
-
-				.toggle-btn {
-					display: none;
-				}
-
-				.option-badge {
-					display: none;
-				}
+			.option-badge {
+				display: none;
 			}
 		}
 	}
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -513,8 +513,4 @@
 			color: var(--l2-foreground) !important;
 		}
 	}
-
-	.query-actions-dropdown {
-		cursor: pointer;
-	}
 }
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss
@@ -1,142 +0,0 @@
-/**
- * Borrows the query builder's control metrics rather than the component defaults the
- * toggle group and number input ship with: 36px tall, 2px radius, and the
- * `--query-builder-v2-*` surface the selects above this row already paint on.
- */
-.bucketOptions {
-	--toggle-group-radius: var(--radius-1);
-	--toggle-group-item-size: 36px;
-	--toggle-group-item-font-size: 13px;
-	--toggle-group-item-padding-left: var(--spacing-6);
-	--toggle-group-item-padding-right: var(--spacing-6);
-
-	// Repeated from `.query-add-ons` rather than inherited: the section also renders on a
-	// formula, which has no add-ons ancestor to pick the toggle palette up from.
-	--toggle-group-secondary-bg: var(
-		--query-builder-v2-toggle-group-background-color,
-		var(--l1-background-hover)
-	);
-	--toggle-group-secondary-border: var(
-		--query-builder-v2-toggle-group-border-color,
-		var(--l2-border)
-	);
-	--toggle-group-secondary-active-bg: var(
-		--query-builder-v2-toggle-group-active-background-color,
-		var(--l1-background)
-	);
-	--toggle-group-secondary-bg-hover: var(
-		--query-builder-v2-toggle-group-background-color-hover,
-		var(--l2-background)
-	);
-
-	--input-height: 36px;
-	--input-font-size: 13px;
-	--input-border-radius: var(--radius-1);
-	--input-border-color: var(--query-builder-v2-border-color, var(--l2-border));
-	--input-background: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--input-foreground: var(--query-builder-v2-color, var(--l2-foreground));
-
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-
-	padding: var(--spacing-4);
-	box-sizing: border-box;
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	border-radius: var(--radius-1);
-	background: var(--query-builder-v2-background-color, var(--l2-background));
-}
-
-.controls {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-8);
-}
-
-/** One label paired with its control, at the same 10px rhythm as the aggregate rows. */
-.field {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-5);
-}
-
-.bounds {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.label {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-
-	color: var(--l3-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: var(--font-weight-medium);
-	line-height: 18px;
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	white-space: nowrap;
-}
-
-/**
- * The toggle group exposes a font-size token but no family, so each item's label carries
- * the query builder's value type itself.
- */
-.toggleLabel {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	letter-spacing: -0.07px;
-}
-
-/** Surface and metrics come from the `--input-*` tokens above; only the family has none. */
-.numberInput {
-	width: 104px;
-
-	font-family: 'Geist Mono';
-	letter-spacing: -0.07px;
-}
-
-/** Unfilled: a pill on the same row as the toggles above reads as another control,
- *  and the bounds are derived rather than set here. */
-.bound {
-	padding: var(--spacing-1) 0;
-
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-
-	color: var(--query-builder-v2-color, var(--l2-foreground));
-}
-
-.overflowBound {
-	color: var(--l3-foreground);
-}
-
-.muted {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	color: var(--l3-foreground);
-}
-
-.hintIcon {
-	flex: none;
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.closeButton {
-	margin-left: auto;
-	width: 24px;
-	height: 24px;
-}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.tsx
@@ -1,279 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Tooltip } from 'antd';
-import cx from 'classnames';
-import { Button } from '@signozhq/ui/button';
-import { InputNumber } from '@signozhq/ui/input-number';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { ChevronUp, Info } from '@signozhq/icons';
-import {
-	Querybuildertypesv5BucketOptionsDTO,
-	Querybuildertypesv5BucketsKindDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import {
-	BUCKET_KIND_HINTS,
-	BUCKET_KIND_OPTIONS,
-	DEFAULT_NUM_BUCKETS,
-	LOG_SCALE_OPTIONS,
-	MAX_NUM_BUCKETS,
-} from './constants';
-import {
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	isLinearBuckets,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	logScaleOf,
-	previewUpperBounds,
-} from './utils';
-
-import styles from './BucketOptions.module.scss';
-
-function BucketOptions({
-	bucketOptions,
-	unit,
-	onChange,
-	onClose,
-}: {
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
-	/** The panel's y-axis unit, so the previewed bounds read the way the axis will. */
-	unit?: string;
-	onChange: (next: Querybuildertypesv5BucketOptionsDTO | undefined) => void;
-	/** Omitted where the section isn't dismissable, as on a formula. */
-	onClose?: () => void;
-}): JSX.Element {
-	// A linear axis has no bounds to describe until it has a max value, so the picked
-	// kind is held here rather than read back off the emitted options: it has to survive
-	// the gap between choosing Linear and filling the field in.
-	const [kind, setKind] = useState<Querybuildertypesv5BucketsKindDTO>(() =>
-		kindOptionOf(bucketOptions),
-	);
-	const linearSpec =
-		bucketOptions && isLinearBuckets(bucketOptions)
-			? bucketOptions.spec
-			: undefined;
-	const [logScale, setLogScale] = useState<number>(() =>
-		logScaleOf(bucketOptions),
-	);
-	const [maxValue, setMaxValue] = useState<number | null>(
-		linearSpec?.maxValue ?? null,
-	);
-	const [numBuckets, setNumBuckets] = useState<number | null>(
-		linearSpec?.numBuckets ?? null,
-	);
-
-	const emitLinear = useCallback(
-		(nextMaxValue: number | null, nextNumBuckets: number | null): void => {
-			// An incomplete linear axis is sent as no axis at all rather than as a spec the
-			// request would reject.
-			if (nextMaxValue === null || nextMaxValue <= 0) {
-				onChange(undefined);
-				return;
-			}
-
-			onChange(linearBuckets(nextMaxValue, nextNumBuckets));
-		},
-		[onChange],
-	);
-
-	const handleKindChange = useCallback(
-		(value: string): void => {
-			// Radix clears the value when the active item is clicked again; a bucket axis is
-			// always one of the two, so keep the current pick instead.
-			if (!value) {
-				return;
-			}
-
-			const nextKind = value as Querybuildertypesv5BucketsKindDTO;
-			setKind(nextKind);
-
-			if (nextKind === Querybuildertypesv5BucketsKindDTO.log) {
-				onChange(logBuckets(logScale));
-			} else {
-				emitLinear(maxValue, numBuckets);
-			}
-		},
-		[emitLinear, logScale, maxValue, numBuckets, onChange],
-	);
-
-	const handleScaleChange = useCallback(
-		(value: string): void => {
-			if (!value) {
-				return;
-			}
-
-			const nextScale = Number(value);
-			setLogScale(nextScale);
-			onChange(logBuckets(nextScale));
-		},
-		[onChange],
-	);
-
-	const handleMaxValueChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setMaxValue(next);
-			emitLinear(next, numBuckets);
-		},
-		[emitLinear, numBuckets],
-	);
-
-	const handleNumBucketsChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setNumBuckets(next);
-			emitLinear(maxValue, next);
-		},
-		[emitLinear, maxValue],
-	);
-
-	// The toggle group takes a ReactNode label, which is how each item picks up the
-	// query builder's value type — the component exposes no font-family token.
-	const kindItems = useMemo(
-		() =>
-			BUCKET_KIND_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	const scaleItems = useMemo(
-		() =>
-			LOG_SCALE_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	// The kind toggle can be ahead of what has been emitted, so the preview describes
-	// the picked kind rather than the emitted options.
-	const previewedOptions = useMemo(():
-		| Querybuildertypesv5BucketOptionsDTO
-		| undefined => {
-		if (kind === Querybuildertypesv5BucketsKindDTO.log) {
-			return logBuckets(logScale);
-		}
-		if (kind === Querybuildertypesv5BucketsKindDTO.linear && maxValue !== null) {
-			return linearBuckets(maxValue, numBuckets);
-		}
-		return undefined;
-	}, [kind, logScale, maxValue, numBuckets]);
-
-	const bounds = useMemo(
-		() =>
-			kind === Querybuildertypesv5BucketsKindDTO.linear && !previewedOptions
-				? undefined
-				: previewUpperBounds(previewedOptions),
-		[kind, previewedOptions],
-	);
-
-	return (
-		<div className={styles.bucketOptions} data-testid="bucket-options">
-			<div className={styles.controls}>
-				<div className={styles.field}>
-					<span className={styles.label}>Bucket by</span>
-					<ToggleGroupSimple
-						type="single"
-						value={kind}
-						items={kindItems}
-						onChange={handleKindChange}
-						testId="bucket-options-kind"
-					/>
-				</div>
-
-				{kind === Querybuildertypesv5BucketsKindDTO.log && (
-					<div className={styles.field}>
-						<span className={styles.label}>Scale</span>
-						<ToggleGroupSimple
-							type="single"
-							value={String(logScale)}
-							items={scaleItems}
-							onChange={handleScaleChange}
-							testId="bucket-options-scale"
-						/>
-					</div>
-				)}
-
-				{kind === Querybuildertypesv5BucketsKindDTO.linear && (
-					<>
-						<div className={styles.field}>
-							<span className={styles.label}>Max value</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={0}
-								value={maxValue}
-								onChange={handleMaxValueChange}
-								placeholder="Required"
-								status={maxValue !== null && maxValue <= 0 ? 'error' : undefined}
-								data-testid="bucket-options-max-value"
-							/>
-						</div>
-						<div className={styles.field}>
-							<span className={styles.label}>Buckets</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={1}
-								max={MAX_NUM_BUCKETS}
-								precision={0}
-								value={numBuckets}
-								onChange={handleNumBucketsChange}
-								placeholder={`Default ${DEFAULT_NUM_BUCKETS}`}
-								data-testid="bucket-options-num-buckets"
-							/>
-						</div>
-					</>
-				)}
-
-				{onClose && (
-					<Button
-						color="secondary"
-						variant="ghost"
-						size="icon"
-						aria-label="Close bucket options"
-						className={styles.closeButton}
-						prefix={<ChevronUp size={16} />}
-						onClick={onClose}
-						data-testid="bucket-options-close"
-					/>
-				)}
-			</div>
-
-			<div className={styles.bounds} data-testid="bucket-options-bounds">
-				<span className={styles.label}>
-					Bounds
-					<Tooltip title={BUCKET_KIND_HINTS[kind]} placement="top">
-						<Info size={12} className={styles.hintIcon} />
-					</Tooltip>
-				</span>
-				{bounds ? (
-					<>
-						{bounds.map((bound) => (
-							<span className={styles.bound} key={bound}>
-								{formatUpperBound(bound, unit)}
-							</span>
-						))}
-						{hasBoundsBeyondPreview(previewedOptions) && (
-							<span className={styles.muted}>…</span>
-						)}
-						<span className={cx(styles.bound, styles.overflowBound)}>+Inf</span>
-					</>
-				) : (
-					<span className={styles.muted}>Set a max value to see the bounds</span>
-				)}
-			</div>
-		</div>
-	);
-}
-
-BucketOptions.defaultProps = {
-	bucketOptions: undefined,
-	unit: undefined,
-	onClose: undefined,
-};
-
-export default BucketOptions;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/tests/utils.test.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/tests/utils.test.ts
@@ -1,88 +0,0 @@
-import { MAX_LOG_SCALE } from '../constants';
-import {
-	bandsPerDoublingFromScale,
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	previewUpperBounds,
-} from '../utils';
-
-describe('bucket option scales', () => {
-	it.each([
-		[-2, 0.25],
-		[0, 1],
-		[1, 2],
-		[2, 4],
-		[3, 8],
-		[4, 16],
-	])('scale %i is %i bands per doubling', (scale, bands) => {
-		expect(bandsPerDoublingFromScale(scale)).toBe(bands);
-	});
-});
-
-describe('kindOptionOf', () => {
-	it('reads no options as log, the server default', () => {
-		expect(kindOptionOf(undefined)).toBe('log');
-	});
-
-	it('reads the kind off the options', () => {
-		expect(kindOptionOf(logBuckets(MAX_LOG_SCALE))).toBe('log');
-		expect(kindOptionOf(linearBuckets(10, null))).toBe('linear');
-	});
-});
-
-describe('previewUpperBounds', () => {
-	it('doubles at one band per doubling', () => {
-		expect(previewUpperBounds(logBuckets(0))).toStrictEqual([
-			1, 2, 4, 8, 16, 32, 64, 128,
-		]);
-	});
-
-	it('falls back to the finest log axis when no options are set', () => {
-		const bounds = previewUpperBounds(undefined);
-
-		expect(bounds).toHaveLength(8);
-		// 16 bands per doubling: the eighth bound is 2^(7/16), still short of the first doubling.
-		expect(bounds?.[7]).toBeCloseTo(2 ** (7 / 16));
-	});
-
-	it('spaces a linear axis evenly by bucket width', () => {
-		expect(previewUpperBounds(linearBuckets(100, 10))).toStrictEqual(
-			[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].slice(0, 8),
-		);
-	});
-
-	it('stops at the last bucket when the axis has fewer than the preview shows', () => {
-		expect(previewUpperBounds(linearBuckets(9, 3))).toStrictEqual([3, 6, 9]);
-	});
-
-	it('has no bounds to preview for a linear axis without a usable max value', () => {
-		expect(previewUpperBounds(linearBuckets(0, null))).toBeUndefined();
-		expect(previewUpperBounds(linearBuckets(-1, null))).toBeUndefined();
-	});
-});
-
-describe('hasBoundsBeyondPreview', () => {
-	it('is always true for a log axis, which has no top', () => {
-		expect(hasBoundsBeyondPreview(logBuckets(0))).toBe(true);
-		expect(hasBoundsBeyondPreview(undefined)).toBe(true);
-	});
-
-	it('tracks whether a linear axis runs past the preview', () => {
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 4))).toBe(false);
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 20))).toBe(true);
-	});
-});
-
-describe('formatUpperBound', () => {
-	it('reads a bound in the panel unit when one is set', () => {
-		expect(formatUpperBound(1, 'ms')).toContain('ms');
-	});
-
-	it('keeps three significant digits when unitless', () => {
-		expect(formatUpperBound(128, undefined)).toBe('128');
-		expect(formatUpperBound(2 ** (1 / 16), undefined)).toBe('1.04');
-	});
-});
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/constants.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/constants.ts
@@ -1,54 +0,0 @@
-import { Querybuildertypesv5BucketsKindDTO } from 'api/generated/services/sigNoz.schemas';
-
-/**
- * Mirrors the limits `querybuildertypesv5` validates `bucketOptions` against. The
- * builder keeps its own copy so an out-of-range axis is refused before the request
- * rather than after it.
- */
-
-/**
- * A log axis spaces bounds at 2^scale bands per doubling. MaxLogScale is the
- * resolution ClickHouse buckets at, so it is both the finest available and what an
- * absent `bucketOptions` resolves to.
- */
-export const MAX_LOG_SCALE = 4;
-
-/** One band per 16x, the coarsest axis worth rendering. */
-export const MIN_LOG_SCALE = -4;
-
-export const MAX_NUM_BUCKETS = 512;
-
-export const DEFAULT_NUM_BUCKETS = 60;
-
-/** Every scale the request accepts, coarsest first. The bounds strip below says
- *  how coarse a given one is, so the numbers stand alone. */
-export const LOG_SCALES = Array.from(
-	{ length: MAX_LOG_SCALE - MIN_LOG_SCALE + 1 },
-	(_, index) => MIN_LOG_SCALE + index,
-);
-
-/** How many leading upper bounds the bounds strip previews before eliding. */
-export const PREVIEW_BOUND_COUNT = 8;
-
-export const BUCKET_KIND_OPTIONS: {
-	value: Querybuildertypesv5BucketsKindDTO;
-	label: string;
-}[] = [
-	{ value: Querybuildertypesv5BucketsKindDTO.log, label: 'Log' },
-	{ value: Querybuildertypesv5BucketsKindDTO.linear, label: 'Linear' },
-];
-
-export const LOG_SCALE_OPTIONS = LOG_SCALES.map((scale) => ({
-	value: String(scale),
-	label: String(scale),
-}));
-
-export const BUCKET_KIND_HINTS: Record<
-	Querybuildertypesv5BucketsKindDTO,
-	string
-> = {
-	[Querybuildertypesv5BucketsKindDTO.log]:
-		'Bounds are spaced evenly on a log axis, so every band is the same height on screen and the tail stays readable. A lower scale means fewer, coarser bands; scale 4, the finest, is the default.',
-	[Querybuildertypesv5BucketsKindDTO.linear]:
-		'Bounds are spaced evenly from 0 up to the max value, so a band covers the same width wherever it sits. Everything above the max value lands in a single overflow band.',
-};
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/utils.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/utils.ts
@@ -1,120 +0,0 @@
-import {
-	Querybuildertypesv5BucketOptionsDTO,
-	Querybuildertypesv5BucketOptionsLinearDTO,
-	Querybuildertypesv5BucketOptionsLinearDTOKind,
-	Querybuildertypesv5BucketOptionsLogDTO,
-	Querybuildertypesv5BucketOptionsLogDTOKind,
-	Querybuildertypesv5BucketsKindDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-
-import {
-	DEFAULT_NUM_BUCKETS,
-	MAX_LOG_SCALE,
-	PREVIEW_BOUND_COUNT,
-} from './constants';
-
-export const isLinearBuckets = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO,
-): bucketOptions is Querybuildertypesv5BucketOptionsLinearDTO =>
-	bucketOptions.kind === Querybuildertypesv5BucketOptionsLinearDTOKind.linear;
-
-export const linearBuckets = (
-	maxValue: number,
-	numBuckets: number | null,
-): Querybuildertypesv5BucketOptionsLinearDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLinearDTOKind.linear,
-	spec: { maxValue, ...(numBuckets ? { numBuckets } : {}) },
-});
-
-export const logBuckets = (
-	scale: number,
-): Querybuildertypesv5BucketOptionsLogDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLogDTOKind.log,
-	spec: { scale },
-});
-
-/**
- * The log spec's scale, defaulted the way the server defaults it. A linear axis has
- * no scale, so it reads as the default too.
- */
-export const logScaleOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number =>
-	bucketOptions && !isLinearBuckets(bucketOptions)
-		? (bucketOptions.spec.scale ?? MAX_LOG_SCALE)
-		: MAX_LOG_SCALE;
-
-/** A log axis places `2^scale` bounds per doubling. */
-export const bandsPerDoublingFromScale = (scale: number): number => 2 ** scale;
-
-export const kindOptionOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): Querybuildertypesv5BucketsKindDTO =>
-	bucketOptions && isLinearBuckets(bucketOptions)
-		? Querybuildertypesv5BucketsKindDTO.linear
-		: Querybuildertypesv5BucketsKindDTO.log;
-
-/**
- * The leading upper bounds the axis will carry. A log axis is anchored at 1 — band
- * index 0's boundary — and a linear one at the top of its first band; both continue
- * past what the strip shows, and everything above the last one lands in the overflow
- * band the UI labels separately.
- *
- * `undefined` for a linear axis with no max value yet: without a top there is nothing
- * to divide.
- */
-export function previewUpperBounds(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number[] | undefined {
-	if (bucketOptions && isLinearBuckets(bucketOptions)) {
-		const { maxValue, numBuckets = DEFAULT_NUM_BUCKETS } = bucketOptions.spec;
-
-		if (!Number.isFinite(maxValue) || maxValue <= 0 || numBuckets <= 0) {
-			return undefined;
-		}
-
-		const width = maxValue / numBuckets;
-
-		return Array.from(
-			{ length: Math.min(numBuckets, PREVIEW_BOUND_COUNT) },
-			(_, index) => (index + 1) * width,
-		);
-	}
-
-	const bands = bandsPerDoublingFromScale(logScaleOf(bucketOptions));
-
-	return Array.from(
-		{ length: PREVIEW_BOUND_COUNT },
-		(_, index) => 2 ** (index / bands),
-	);
-}
-
-/**
- * Whether the strip elides bounds after the ones it shows. A linear axis with no more
- * buckets than the strip holds ends where the strip does.
- */
-export function hasBoundsBeyondPreview(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): boolean {
-	if (!bucketOptions || !isLinearBuckets(bucketOptions)) {
-		return true;
-	}
-
-	return (
-		(bucketOptions.spec.numBuckets ?? DEFAULT_NUM_BUCKETS) > PREVIEW_BOUND_COUNT
-	);
-}
-
-/**
- * A bound is a value on the panel's own axis, so it reads in the panel's unit when one
- * is set. Unitless, three significant digits keep the tightly spaced bounds of a fine
- * log axis distinguishable without printing the float in full.
- */
-export function formatUpperBound(bound: number, unit?: string): string {
-	if (unit) {
-		return getYAxisFormattedValue(String(bound), unit);
-	}
-
-	return Number(bound.toPrecision(3)).toString();
-}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -1,19 +1,19 @@
 .query-add-ons {
 	width: 100%;

-	--toggle-group-secondary-bg: var(
+	--toggle-group-secondary-outlined-background: var(
 		--query-builder-v2-toggle-group-background-color,
 		var(--l1-background-hover)
 	);
-	--toggle-group-secondary-border: var(
+	--toggle-group-border: var(
 		--query-builder-v2-toggle-group-border-color,
 		var(--l2-border)
 	);
-	--toggle-group-secondary-active-bg: var(
+	--toggle-group-secondary-outlined-background-active: var(
 		--query-builder-v2-toggle-group-active-background-color,
 		var(--l1-background)
 	);
-	--toggle-group-secondary-bg-hover: var(
+	--toggle-group-secondary-outlined-background-hover: var(
 		--query-builder-v2-toggle-group-background-color-hover,
 		var(--l2-background)
 	);
@@ -36,51 +36,6 @@
 	align-items: center;
 	gap: 16px;

-	.add-ons-tabs {
-		display: flex;
-		flex-wrap: wrap;
-
-		.add-on-tab-title {
-			display: flex;
-			gap: var(--margin-2);
-			align-items: center;
-			justify-content: center;
-			font-size: var(--font-size-xs);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-
-			color: var(--query-builder-v2-color, var(--l2-foreground));
-		}
-
-		> button {
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			border-left: none;
-			min-width: 120px;
-			height: 36px;
-			line-height: 36px;
-
-			&:first-child {
-				border-left: 1px solid
-					var(--query-builder-v2-border-color, var(--l2-border));
-			}
-
-			&::before {
-				background: var(--query-builder-v2-border-color, var(--l2-border));
-			}
-
-			&[data-state='on'] {
-				color: var(--text-robin-500);
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-				display: none;
-
-				&::before {
-					background: var(--query-builder-v2-border-color, var(--l2-border));
-				}
-			}
-		}
-	}
-
 	.compass-button {
 		width: 30px;
 		height: 30px;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -1,23 +1,16 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
 import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter';
 import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
-import {
-	BarChart,
-	ChevronUp,
-	ExternalLink,
-	Grid3X3,
-	ScrollText,
-} from '@signozhq/icons';
-import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
+import { BarChart, ChevronUp, ExternalLink, ScrollText } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -32,7 +25,6 @@ import {
 	resolveQueryBuilderFields,
 } from '../../queryBuilderFields.utils';

-import BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';

@@ -65,7 +57,6 @@ const ADD_ONS_KEYS_TO_QUERY_PATH: Omit<
 	[QueryBuilderField.Limit]: 'limit',
 	[QueryBuilderField.Legend]: 'legend',
 	[QueryBuilderField.ReduceTo]: 'reduceTo',
-	[QueryBuilderField.BucketOptions]: 'bucketOptions',
 };

 const ADD_ONS: AddOn[] = [
@@ -125,22 +116,6 @@ const REDUCE_TO: AddOn = {
 		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
 };

-// Offered only by a heatmap over metrics: the bucket axis is what a heatmap plots
-// against, and no other panel type sends one. A histogram brings its own buckets.
-const HISTOGRAM_ATTRIBUTE_TYPES = new Set<string>([
-	ATTRIBUTE_TYPES.HISTOGRAM,
-	ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM,
-]);
-
-const BUCKET_OPTIONS: AddOn = {
-	icon: <Grid3X3 size={14} />,
-	label: 'Bucket by',
-	key: QueryBuilderField.BucketOptions,
-	description:
-		'Choose how the bucket axis is spaced — logarithmically, so every band is the same height and the tail stays readable, or linearly up to a max value. Left to Auto, the query picks the finest log axis it can return.',
-	docLink: 'https://signoz.io/docs/userguide/query-builder-v5/',
-};
-
 const hasValue = (value: unknown): boolean =>
 	value != null && value !== '' && !(Array.isArray(value) && value.length === 0);

@@ -221,7 +196,7 @@ function QueryAddOns({
 		isForTraceOperator,
 	});

-	const { handleSetQueryData, currentQuery } = useQueryBuilder();
+	const { handleSetQueryData } = useQueryBuilder();

 	const supportedAddOns = useMemo((): AddOn[] => {
 		let addOns: AddOn[];
@@ -235,25 +210,8 @@ function QueryAddOns({
 			addOns = [...ADD_ONS];
 		}

-		if (showReduceTo) {
-			addOns = [...addOns, REDUCE_TO];
-		}
-
-		if (
-			panelType === PANEL_TYPES.HEATMAP &&
-			query.dataSource === DataSource.METRICS &&
-			!HISTOGRAM_ATTRIBUTE_TYPES.has(query.aggregateAttribute?.type ?? '')
-		) {
-			addOns = [...addOns, BUCKET_OPTIONS];
-		}
-
-		return addOns;
-	}, [
-		panelType,
-		query.dataSource,
-		query.aggregateAttribute?.type,
-		showReduceTo,
-	]);
+		return showReduceTo ? [...addOns, REDUCE_TO] : addOns;
+	}, [panelType, query.dataSource, showReduceTo]);

 	const resolvedFields = useMemo(
 		() =>
@@ -434,13 +392,6 @@ function QueryAddOns({
 		[handleChangeQueryData],
 	);

-	const handleChangeBucketOptions = useCallback(
-		(value: Querybuildertypesv5BucketOptionsDTO | undefined) => {
-			handleChangeQueryData('bucketOptions', value);
-		},
-		[handleChangeQueryData],
-	);
-
 	return (
 		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
@@ -608,25 +559,15 @@ function QueryAddOns({
 							/>
 						</div>
 					)}
-
-					{selectedViews.find(
-						(view) => view.key === QueryBuilderField.BucketOptions,
-					) && (
-						<div className="add-on-content" data-testid="bucket-options-content">
-							<BucketOptions
-								bucketOptions={query.bucketOptions}
-								unit={currentQuery.unit}
-								onChange={handleChangeBucketOptions}
-								onClose={(): void => handleRemoveView(QueryBuilderField.BucketOptions)}
-							/>
-						</div>
-					)}
 				</div>
 			)}

-			<ToggleGroupSimple
+			<ToggleGroup
+				variant="outlined"
+				color="secondary"
+				size="sm"
 				type="multiple"
-				className="add-ons-tabs"
+				allowClear
 				value={selectedViews.map((view) => view.key)}
 				onChange={(newKeys: string[]): void => {
 					const oldKeys: string[] = selectedViews.map((view) => view.key);
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
@@ -43,9 +43,7 @@ function QueryAggregationOptions({

 		if (
 			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE ||
-				panelType === PANEL_TYPES.SCATTER ||
-				panelType === PANEL_TYPES.PIE)
+			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
 		) {
 			return { hidden: true, disabled: false, reason: undefined };
 		}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -724,26 +724,62 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return <Badge color="vanilla">Unknown</Badge>;
+			return (
+				<Badge textTransform="none" variant="solid" color="secondary">
+					Unknown
+				</Badge>
+			);
 		}

 		switch (editingMode) {
 			case 'key':
-				return <Badge color="robin">Key</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="primary">
+						Key
+					</Badge>
+				);
 			case 'operator':
-				return <Badge color="sakura">Operator</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="highlight-danger">
+						Operator
+					</Badge>
+				);
 			case 'value':
-				return <Badge color="forest">Value</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="success">
+						Value
+					</Badge>
+				);
 			case 'conjunction':
-				return <Badge color="amber">Conjunction</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="warning">
+						Conjunction
+					</Badge>
+				);
 			case 'function':
-				return <Badge color="aqua">Function</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="info">
+						Function
+					</Badge>
+				);
 			case 'parenthesis':
-				return <Badge color="sakura">Parenthesis</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="highlight-danger">
+						Parenthesis
+					</Badge>
+				);
 			case 'bracketList':
-				return <Badge color="cherry">Bracket List</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="danger">
+						Bracket List
+					</Badge>
+				);
 			default:
-				return <Badge color="vanilla">Unknown</Badge>;
+				return (
+					<Badge textTransform="none" variant="solid" color="secondary">
+						Unknown
+					</Badge>
+				);
 		}
 	};

@@ -1465,27 +1501,45 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
+							Key:{' '}
+							<Badge textTransform="none" variant="solid" color="secondary">
+								{queryContext.keyToken}
+							</Badge>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
+							Operator:{' '}
+							<Badge textTransform="none" variant="solid" color="secondary">
+								{queryContext.operatorToken}
+							</Badge>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
+							Value:{' '}
+							<Badge textTransform="none" variant="solid" color="secondary">
+								{queryContext.valueToken}
+							</Badge>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
-							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
+							Current pair:{' '}
+							<Badge textTransform="none" variant="solid" color="primary">
+								{queryContext.currentPair.key}
+							</Badge>
+							<Badge textTransform="none" variant="solid" color="highlight-danger">
+								{queryContext.currentPair.operator}
+							</Badge>
 							{queryContext.currentPair.value && (
-								<Badge color="forest">{queryContext.currentPair.value}</Badge>
+								<Badge textTransform="none" variant="solid" color="success">
+									{queryContext.currentPair.value}
+								</Badge>
 							)}
 							<Badge
+								textTransform="none"
+								variant="solid"
 								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
 							>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
@@ -1495,7 +1549,9 @@ function QuerySearch({
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
 							Total pairs:{' '}
-							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
+							<Badge variant="solid" color="primary">
+								{queryContext.queryPairs.length}
+							</Badge>
 						</span>
 					)}
 				</div>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/stories/__story_mockdata__/querySearch.play.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/stories/__story_mockdata__/querySearch.play.ts
@@ -0,0 +1,229 @@
+import { EditorView } from '@codemirror/view';
+import { userEvent, waitFor, within } from 'storybook/test';
+
+/** Suggestions wait on a 300ms debounce and a fetch, past the 1s default. */
+const untilLoaded = { timeout: 15_000 };
+
+/** Throws until `found` holds something, which is what `waitFor` retries on. */
+const present = <TValue>(
+	found: TValue | null | undefined,
+	what: string,
+): TValue => {
+	if (found === null || found === undefined) {
+		throw new Error(`${what} not found`);
+	}
+
+	return found;
+};
+
+const suggestionList = (canvasElement: HTMLElement): HTMLElement | null =>
+	canvasElement.querySelector<HTMLElement>('.cm-tooltip-autocomplete');
+
+const suggestionRow = (
+	canvasElement: HTMLElement,
+	text: string,
+): HTMLElement | undefined => {
+	const list = suggestionList(canvasElement);
+
+	return list
+		? within(list)
+				.queryAllByRole('option')
+				.find((option) => option.textContent?.includes(text))
+		: undefined;
+};
+
+/** Ctrl+Space, the editor's own shortcut for asking for suggestions. */
+const requestSuggestions = (editor: HTMLElement): void => {
+	editor.dispatchEvent(
+		new KeyboardEvent('keydown', {
+			key: ' ',
+			code: 'Space',
+			ctrlKey: true,
+			bubbles: true,
+		}),
+	);
+};
+
+const currentView = (
+	canvasElement: HTMLElement,
+): { editor: HTMLElement; view: EditorView } => {
+	// An explorer renders one editor per query; the first is the one on screen.
+	const editor = present(
+		canvasElement.querySelector<HTMLElement>(
+			'.code-mirror-where-clause .cm-content',
+		),
+		'filter editor',
+	);
+
+	return {
+		editor,
+		view: present(EditorView.findFromDOM(editor), 'editor view'),
+	};
+};
+
+/**
+ * The explorers wrap the filter in `OverlayScrollbar`, which initialises when
+ * the browser is idle. Initialising moves the content, the editor with it, and
+ * focuses the editor again through the DOM, which puts the caret back at the
+ * start and swaps the suggestions for the key list. Throws until every wrapper
+ * around the filter has initialised.
+ */
+const assertScrollbarsReady = (editor: HTMLElement): void => {
+	for (
+		let wrapper = editor.closest('.overlay-scrollbar');
+		wrapper;
+		wrapper = wrapper.parentElement?.closest('.overlay-scrollbar') ?? null
+	) {
+		if (!wrapper.hasAttribute('data-overlayscrollbars')) {
+			throw new Error('scrollbars around the filter still initialising');
+		}
+	}
+};
+
+/**
+ * Waits until `text` shows in the suggestion list, asking for suggestions
+ * whenever the list is shut. Focus and typing only open it once the keys have
+ * loaded, and moving the caret never does.
+ */
+const waitForSuggestion = (
+	canvasElement: HTMLElement,
+	text: string,
+): Promise<HTMLElement> =>
+	waitFor(
+		() => {
+			const { editor } = currentView(canvasElement);
+
+			if (!suggestionList(canvasElement)) {
+				requestSuggestions(editor);
+			}
+
+			return present(suggestionRow(canvasElement, text), `suggestion "${text}"`);
+		},
+		{ ...untilLoaded, interval: 250 },
+	);
+
+/**
+ * Focuses the filter once the scrollbars around it have initialised, and waits
+ * for its suggestion list.
+ */
+const focusFilter = async (canvasElement: HTMLElement): Promise<EditorView> => {
+	await waitFor(
+		() => {
+			const { editor, view } = currentView(canvasElement);
+
+			assertScrollbarsReady(editor);
+
+			if (!view.hasFocus) {
+				view.focus();
+			}
+
+			if (!suggestionList(canvasElement)) {
+				requestSuggestions(editor);
+			}
+
+			return present(suggestionList(canvasElement), 'suggestion list');
+		},
+		{ ...untilLoaded, interval: 250 },
+	);
+
+	return currentView(canvasElement).view;
+};
+
+/** Waits for a row of the suggestion list. */
+export const findSuggestion = (
+	canvasElement: HTMLElement,
+	text: string,
+): Promise<HTMLElement> => waitForSuggestion(canvasElement, text);
+
+/** Focuses the empty filter: every key, with any recent filters above them. */
+export const openKeySuggestions = async (
+	canvasElement: HTMLElement,
+	row: string,
+): Promise<void> => {
+	await focusFilter(canvasElement);
+	await waitForSuggestion(canvasElement, row);
+};
+
+/**
+ * Focuses the filter and types onto the end of it one character at a time,
+ * each as the transaction a keystroke makes, leaving the caret at the end so
+ * the suggestion list follows what was typed. Quotes and brackets are not
+ * closed for it: type both.
+ *
+ * `userEvent.type` cannot be used: CodeMirror redraws the line as tokens are
+ * highlighted, which strands the caret `userEvent` tracks.
+ */
+export const typeFilter = async (
+	canvasElement: HTMLElement,
+	text: string,
+): Promise<void> => {
+	const view = await focusFilter(canvasElement);
+
+	for (const character of text) {
+		const at = view.state.doc.length;
+
+		view.dispatch({
+			changes: { from: at, insert: character },
+			selection: { anchor: at + character.length },
+			userEvent: 'input.type',
+		});
+	}
+};
+
+/**
+ * Types an expression, then steps the caret back inside it, before a closing
+ * bracket or parenthesis, where the suggestions are about what goes in there.
+ */
+export const typeFilterWithCaretBack = async (
+	canvasElement: HTMLElement,
+	text: string,
+	stepsBack: number,
+	row: string,
+): Promise<void> => {
+	await typeFilter(canvasElement, text);
+
+	const { view } = currentView(canvasElement);
+
+	view.dispatch({
+		selection: { anchor: view.state.doc.length - stepsBack },
+		userEvent: 'select',
+	});
+	await waitForSuggestion(canvasElement, row);
+};
+
+/**
+ * Moves focus off the filter, which is when the expression is validated and
+ * the error marker can show.
+ */
+export const blurFilter = async (canvasElement: HTMLElement): Promise<void> => {
+	await userEvent.keyboard('{Escape}');
+	await userEvent.click(canvasElement.ownerDocument.body);
+};
+
+/** Types an expression, leaves the filter and opens its validation errors. */
+export const showFilterErrors = async (
+	canvasElement: HTMLElement,
+	text: string,
+): Promise<void> => {
+	await typeFilter(canvasElement, text);
+	await blurFilter(canvasElement);
+
+	const marker = await waitFor(
+		() =>
+			present(
+				canvasElement.querySelector<HTMLElement>('.query-status-container button'),
+				'error marker',
+			),
+		untilLoaded,
+	);
+
+	await userEvent.hover(marker);
+	await waitFor(
+		() =>
+			present(
+				canvasElement.ownerDocument.querySelector('.query-validation-error'),
+				'validation error',
+			),
+		untilLoaded,
+	);
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Vinícius Lourenço	0b1e8aad6e	fixup! feat(integrations): adopt reworked @signozhq/ui components	2026-10-06 15:06:37 -03:00
Vinícius Lourenço	5685de5494	fixup! feat(llm-observability): adopt reworked @signozhq/ui components	2026-10-06 15:06:32 -03:00
Vinícius Lourenço	b21742a128	fixup! feat(settings): adopt reworked @signozhq/ui components	2026-10-01 15:00:58 -03:00
Vinícius Lourenço	843feef61d	fix(alerts): use Pill.Closeable for classic alert form labels	2026-10-01 12:02:15 -03:00
Vinícius Lourenço	6984683fd9	test(integrations): raise timeout for GCP setup drawer tests	2026-10-01 12:02:15 -03:00
Vinícius Lourenço	1407b26fbb	fix(planned-downtime): use Pill.Closeable for selected alert rules	2026-10-01 12:02:15 -03:00
Vinícius Lourenço	aed715be5c	fix(pipelines): submit the pipeline form from the Create and Update button	2026-10-01 12:02:14 -03:00
Vinícius Lourenço	8ef90b84b6	test(e2e): update selectors for reworked @signozhq/ui components	2026-10-01 12:02:14 -03:00
Vinícius Lourenço	2315a18fa4	feat(events-exceptions-apis-queues): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:14 -03:00
Vinícius Lourenço	77834e2b22	feat(events-traces): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:14 -03:00
Vinícius Lourenço	a37ee50c7d	feat(events-logs): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:14 -03:00
Vinícius Lourenço	a05baddab0	feat(pulse-infra-monitoring): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:14 -03:00
Vinícius Lourenço	099c5135db	feat(pulse-alerts): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:13 -03:00
Vinícius Lourenço	268af75098	feat(pulse-dashboards-list): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:13 -03:00
Vinícius Lourenço	a5e395120f	feat(pulse-dashboards): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:13 -03:00
Vinícius Lourenço	c4be50c5c2	feat(metrics-apm): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:13 -03:00
Vinícius Lourenço	8dd0f79f70	feat(llm-observability): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:13 -03:00
Vinícius Lourenço	86212a1b1c	feat(ai-assistant): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:13 -03:00
Vinícius Lourenço	9f580456ba	feat(integrations): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:12 -03:00
Vinícius Lourenço	6e07d9827f	feat(auth-onboarding): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:12 -03:00
Vinícius Lourenço	b146c15a97	feat(settings): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:12 -03:00
Vinícius Lourenço	738f341131	feat(navigation): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:12 -03:00
Vinícius Lourenço	fc1d81dda8	feat(query-builder): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:12 -03:00
Vinícius Lourenço	c52e41afbf	feat(shared-components): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:11 -03:00
Vinícius Lourenço	e0dc068af3	feat(members-roles-service-accounts): adopt reworked @signozhq/ui components Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:11 -03:00
Vinícius Lourenço	ee4043f42d	feat(authz): build AuthZ components on reworked @signozhq/ui Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:11 -03:00
Vinícius Lourenço	f3c4c8685a	fix(api): treat requests cancelled before dispatch as cancellations Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:11 -03:00
Vinícius Lourenço	4e7fbdbfeb	test(storybook): adopt reworked @signozhq/ui in fixtures and mocks Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:11 -03:00
Vinícius Lourenço	21e2a0bda8	chore(deps): bump @signozhq/ui to 0.2.0 and design-tokens to 2.2.1 Co-authored-by: Manika Malhotra <manika@signoz.io>	2026-10-01 12:02:11 -03:00
Vinícius Lourenço	867b958318	test(storybook): cover classic alert form label states	2026-10-01 12:00:26 -03:00
Vinícius Lourenço	088fe04a20	test(storybook): add planned downtime edit story with specific alert rules	2026-10-01 12:00:26 -03:00
Vinícius Lourenço	0002d9c5f8	test(storybook): hold Noz click-opened state past the thread remount	2026-10-01 12:00:26 -03:00
Vinícius Lourenço	c8b6e83474	test(storybook): drop the fixed pause between filter keystrokes	2026-10-01 12:00:25 -03:00
Vinícius Lourenço	5607edb302	test(storybook): find dashboard settings and panel editor controls by test id	2026-10-01 12:00:25 -03:00
Vinícius Lourenço	680ac5e88f	fix(tanstack-table): keep cells mounted when inline row callbacks change	2026-10-01 12:00:25 -03:00
Vinícius Lourenço	09f9d2f3c8	test(storybook): cover panel editor chart options, thresholds and links	2026-10-01 12:00:25 -03:00
Vinícius Lourenço	203d7a0753	test(storybook): cover dashboard settings, variables and authz states	2026-10-01 12:00:25 -03:00
Vinícius Lourenço	3ba8c9390c	fix(storybook): attribute failed responses to the story that sent them	2026-10-01 11:59:59 -03:00
Vinícius Lourenço	6cc07a4d75	test(storybook): cover Noz voice recording states	2026-10-01 11:59:58 -03:00
Vinícius Lourenço	856cd91491	test(storybook): assert the in-flight create key button is disabled	2026-10-01 11:59:58 -03:00
Vinícius Lourenço	f22196a2c0	test(storybook): cover ingestion create key validation, expiry and submit states	2026-10-01 11:59:58 -03:00
Vinícius Lourenço	0438850c45	test(storybook): cover ingestion key tag adding and added states	2026-10-01 11:59:58 -03:00
Vinícius Lourenço	2cc9421350	test(storybook): click exceptions filter suggestions as they are found	2026-10-01 11:59:58 -03:00
Vinícius Lourenço	c692297ca6	test(storybook): hold the pod filter stories at their opening height	2026-10-01 11:59:58 -03:00
Vinícius Lourenço	cc6ddd5233	test(storybook): wait for the filter's scrollbars before focusing it	2026-10-01 11:59:57 -03:00
Vinícius Lourenço	d72424d9d0	test(storybook): keep filter focused while scrollbars initialise	2026-10-01 11:59:57 -03:00
Vinícius Lourenço	bbec5691e0	test(storybook): add query builder filter interaction stories	2026-10-01 11:59:57 -03:00
Vinícius Lourenço	cf61f7b31a	test(storybook): fix interaction stories against current main	2026-10-01 11:59:57 -03:00
Vinícius Lourenço	02055934ba	test(storybook): add interaction stories for menus, drawers and selects	2026-10-01 11:59:57 -03:00