test(explorer): add e2e coverage for the list order-by

Covers the two reported bugs, back navigation on traces and a deep link on logs, and the two paths that unit tests cannot reach: the URL round trip and the clear between the LLM raw tabs. The order-by control gets a data-testid. Its four mount points share no other hook, since the LLM trace view styles it with a CSS module.
test(logs-explorer): cover the list query rebuild on an order change
2026-10-15 22:50:48 +01:00 · 2026-10-14 15:44:07 +05:30 · 2026-10-14 15:43:52 +05:30
1044 changed files with 13920 additions and 20096 deletions
--- a/.claude/rules/pytest.md
+++ b/.claude/rules/pytest.md
@@ -17,4 +17,3 @@ For the Python integration suite under `tests/`. Setup, running, and suite layou
 - **snake_case parametrize ids.** `ids=["fill_gaps", "fill_zero"]`, not camelCase.
 - **Name suite files with the two-digit prefix (`NN_*.py`).** `pyproject.toml` restricts collection to `[0-9][0-9]_*.py` (plus the bootstrap `setup.py` / `run.py`) — a file that doesn't match is silently never collected.
 - **Always run pytest from `tests/`.** `--import-mode=importlib` is what allows same-basename files across suites (`querier/01_logs.py` vs `rawexportdata/01_logs.py`), but it disables pytest's implicit `sys.path` injection — `import fixtures` only resolves via `pythonpath = ["."]` from that rootdir.
- **After changing any `.py` file, run `make py-fmt` and `make py-lint`** from the repo root and fix what they report.
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -1,219 +1,5 @@
 components:
  schemas:
-    AiobservabilitytypesBlobPart:
-      properties:
-        content:
-          type: string
-        mime_type:
-          nullable: true
-          type: string
-        modality:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - modality
-      - content
-      type: object
-    AiobservabilitytypesChatMessage:
-      properties:
-        name:
-          nullable: true
-          type: string
-        parts:
-          $ref: '#/components/schemas/AiobservabilitytypesParts'
-        role:
-          type: string
-      required:
-      - role
-      - parts
-      type: object
-    AiobservabilitytypesCompactionPart:
-      properties:
-        content:
-          nullable: true
-          type: string
-        id:
-          nullable: true
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      type: object
-    AiobservabilitytypesFilePart:
-      properties:
-        file_id:
-          type: string
-        mime_type:
-          nullable: true
-          type: string
-        modality:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - modality
-      - file_id
-      type: object
-    AiobservabilitytypesGenericPart:
-      additionalProperties: {}
-      type: object
-    AiobservabilitytypesGenericServerToolCall:
-      additionalProperties: {}
-      type: object
-    AiobservabilitytypesGenericServerToolCallResponse:
-      additionalProperties: {}
-      type: object
-    AiobservabilitytypesInputMessages:
-      items:
-        $ref: '#/components/schemas/AiobservabilitytypesChatMessage'
-      type: array
-    AiobservabilitytypesOutputMessage:
-      properties:
-        finish_reason:
-          nullable: true
-          type: string
-        name:
-          nullable: true
-          type: string
-        parts:
-          $ref: '#/components/schemas/AiobservabilitytypesParts'
-        role:
-          type: string
-      required:
-      - role
-      - parts
-      type: object
-    AiobservabilitytypesOutputMessages:
-      items:
-        $ref: '#/components/schemas/AiobservabilitytypesOutputMessage'
-      type: array
-    AiobservabilitytypesPart:
-      discriminator:
-        mapping:
-          blob: '#/components/schemas/AiobservabilitytypesBlobPart'
-          compaction: '#/components/schemas/AiobservabilitytypesCompactionPart'
-          file: '#/components/schemas/AiobservabilitytypesFilePart'
-          reasoning: '#/components/schemas/AiobservabilitytypesReasoningPart'
-          server_tool_call: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
-          server_tool_call_response: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
-          text: '#/components/schemas/AiobservabilitytypesTextPart'
-          tool_call: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
-          tool_call_response: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
-          uri: '#/components/schemas/AiobservabilitytypesUriPart'
-        propertyName: type
-      oneOf:
-      - $ref: '#/components/schemas/AiobservabilitytypesTextPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
-      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
-      - $ref: '#/components/schemas/AiobservabilitytypesBlobPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesFilePart'
-      - $ref: '#/components/schemas/AiobservabilitytypesUriPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesReasoningPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesCompactionPart'
-      - $ref: '#/components/schemas/AiobservabilitytypesGenericPart'
-      type: object
-    AiobservabilitytypesParts:
-      items:
-        $ref: '#/components/schemas/AiobservabilitytypesPart'
-      type: array
-    AiobservabilitytypesReasoningPart:
-      properties:
-        content:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - content
-      type: object
-    AiobservabilitytypesServerToolCallPart:
-      properties:
-        id:
-          nullable: true
-          type: string
-        name:
-          type: string
-        server_tool_call:
-          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCall'
-        type:
-          type: string
-      required:
-      - type
-      - name
-      - server_tool_call
-      type: object
-    AiobservabilitytypesServerToolCallResponsePart:
-      properties:
-        id:
-          nullable: true
-          type: string
-        server_tool_call_response:
-          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCallResponse'
-        type:
-          type: string
-      required:
-      - type
-      - server_tool_call_response
-      type: object
-    AiobservabilitytypesTextPart:
-      properties:
-        content:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - content
-      type: object
-    AiobservabilitytypesToolCallRequestPart:
-      properties:
-        arguments: {}
-        id:
-          nullable: true
-          type: string
-        name:
-          type: string
-        type:
-          type: string
-      required:
-      - type
-      - name
-      type: object
-    AiobservabilitytypesToolCallResponsePart:
-      properties:
-        id:
-          nullable: true
-          type: string
-        response:
-          nullable: true
-        type:
-          type: string
-      required:
-      - type
-      - response
-      type: object
-    AiobservabilitytypesUriPart:
-      properties:
-        mime_type:
-          nullable: true
-          type: string
-        modality:
-          type: string
-        type:
-          type: string
-        uri:
-          type: string
-      required:
-      - type
-      - modality
-      - uri
-      type: object
    AlertmanagertypesChannel:
      properties:
        createdAt:
@@ -3581,69 +3367,6 @@ components:
        repeatVariable:
          type: string
      type: object
-    DashboardtypesAIBuilderQuerySpec:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
-          nullable: true
-          type: array
-        bucketOptions:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
-        cursor:
-          type: string
-        disabled:
-          type: boolean
-        filter:
-          $ref: '#/components/schemas/Querybuildertypesv5Filter'
-        functions:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5Function'
-          nullable: true
-          type: array
-        groupBy:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
-          type: array
-        having:
-          $ref: '#/components/schemas/Querybuildertypesv5Having'
-        legend:
-          type: string
-        limit:
-          type: integer
-        limitBy:
-          $ref: '#/components/schemas/Querybuildertypesv5LimitBy'
-        name:
-          type: string
-        offset:
-          type: integer
-        order:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
-          type: array
-        secondaryAggregations:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
-          nullable: true
-          type: array
-        selectFields:
-          items:
-            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
-          type: array
-        signal:
-          enum:
-          - traces
-          type: string
-        source:
-          $ref: '#/components/schemas/TelemetrytypesSource'
-        stepInterval:
-          $ref: '#/components/schemas/Querybuildertypesv5Step'
-      required:
-      - signal
-      type: object
    DashboardtypesAreaChartAppearance:
      properties:
        fillMode:
@@ -4697,7 +4420,6 @@ components:
    DashboardtypesQueryPlugin:
      discriminator:
        mapping:
-          signoz/AIBuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
          signoz/BuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
          signoz/ClickHouseSQL: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
          signoz/CompositeQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
@@ -4707,7 +4429,6 @@ components:
        propertyName: kind
      oneOf:
      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
-      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormula'
      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
@@ -4717,25 +4438,12 @@ components:
    DashboardtypesQueryPluginKind:
      enum:
      - signoz/BuilderQuery
-      - signoz/AIBuilderQuery
      - signoz/CompositeQuery
      - signoz/Formula
      - signoz/PromQLQuery
      - signoz/ClickHouseSQL
      - signoz/TraceOperator
      type: string
-    DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec:
-      properties:
-        kind:
-          enum:
-          - signoz/AIBuilderQuery
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesAIBuilderQuerySpec'
-      required:
-      - kind
-      - spec
-      type: object
    DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec:
      properties:
        kind:
@@ -10517,14 +10225,6 @@ components:
          items:
            $ref: '#/components/schemas/SpantypesEvent'
          type: array
-        formattedInput:
-          $ref: '#/components/schemas/AiobservabilitytypesInputMessages'
-        formattedOutput:
-          $ref: '#/components/schemas/AiobservabilitytypesOutputMessages'
-        formatterWarnings:
-          items:
-            type: string
-          type: array
        has_error:
          type: boolean
        kind_string:
@@ -10567,9 +10267,6 @@ components:
      - attributes
      - events
      - references
-      - formattedInput
-      - formattedOutput
-      - formatterWarnings
      type: object
    SpantypesTraceAISummary:
      properties:
@@ -10650,14 +10347,6 @@ components:
        flags:
          minimum: 0
          type: integer
-        formattedInput:
-          $ref: '#/components/schemas/AiobservabilitytypesInputMessages'
-        formattedOutput:
-          $ref: '#/components/schemas/AiobservabilitytypesOutputMessages'
-        formatterWarnings:
-          items:
-            type: string
-          type: array
        has_children:
          type: boolean
        has_error:
@@ -16445,12 +16134,9 @@ paths:
  /api/v1/traces/{traceID}/thread:
    get:
      deprecated: false
-      description: Returns the gen_ai spans of a trace, model calls, tool calls and
-        agent spans, in timestamp order. The messages a span carries are decoded into
-        formattedInput and formattedOutput, with formatterWarnings holding what the
-        converter could not resolve; a span without messages has both empty. Pass
-        nextCursor as after or prevCursor as before to page, or spanId to open the
-        page around a span.
+      description: Returns the spans carrying gen_ai input or output messages in timestamp
+        order. Pass nextCursor as after or prevCursor as before to page, or spanId
+        to open the page around a span.
      operationId: GetTraceThread
      parameters:
      - description: Page size, at most 100. 0 means 20.
@@ -28594,9 +28280,7 @@ paths:
      deprecated: false
      description: Returns the waterfall view of spans including all spans if total
        spans are under a limit, a max count otherwise. Aggregations are dropped compared
-        to v3. A span carrying gen_ai input or output messages also has them decoded
-        into formattedInput and formattedOutput, with formatterWarnings holding what
-        the converter could not resolve.
+        to v3
      operationId: GetWaterfallV4
      parameters:
      - in: path
--- a/docs/contributing/go/readme.md
+++ b/docs/contributing/go/readme.md
@@ -20,7 +20,6 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Provider](provider.md) - Dependency injection and provider patterns
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
- [Span Mapper](spanmapper.md) - Provenance of the shipped span mapper definitions and what is left unmapped
 - [SQL](sql.md) - Database and SQL patterns
 - [DSL Filtering to SQL](dslfilteringtosql.md) - Compiling the list filter DSL to relational-store WHERE clauses
 - [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`
--- a/docs/contributing/go/spanmapper.md
+++ b/docs/contributing/go/spanmapper.md
@@ -1,62 +0,0 @@
-# Span Mapper
-
-Where each source key in the shipped definitions under `pkg/modules/spanmapper/implspanmapper/fs/definitions/` comes from. A group runs on spans with an attribute key containing one of its condition substrings; sources are tried by priority and the first present wins; an existing target is never overwritten. Bump `version` on every change.
-
-## gen_ai.llm
-
-Condition: `model`, `llm.input_messages` (OpenInference sets `llm.model_name` from the response, so a failed call has no model key).
-
-| Source | Emitted by |
-|---|---|
-| `llm.model_name`, `llm.provider`, `llm.system`, `llm.token_count.prompt`, `llm.token_count.completion`, `llm.token_count.prompt_details.cache_read`, `llm.token_count.prompt_details.cache_write`, `llm.token_count.completion_details.reasoning`, `llm.finish_reason`, `input.value`, `output.value`, `embedding.model_name`, `reranker.model_name`, `openinference.span.kind` | OpenInference |
-| `llm.request.model`, `llm.response.model`, `llm.vendor`, `llm.usage.prompt_tokens`, `llm.usage.completion_tokens`, `llm.response.finish_reason`, `llm.response.stop_reason` | OpenLLMetry before the `gen_ai` rename |
-| `gen_ai.system`, `gen_ai.usage.prompt_tokens`, `gen_ai.usage.completion_tokens`, `gen_ai.usage.cache_read_input_tokens`, `gen_ai.usage.cache_creation_input_tokens`, `gen_ai.usage.reasoning_tokens`, `gen_ai.prompt`, `gen_ai.completion`, `llm.request.type`, `traceloop.span.kind` | OpenLLMetry, LiteLLM, CrewAI, Mistral, LangSmith, OpenRouter gateway |
-| `gen_ai.usage.cache_write.input_tokens` | OTel semconv draft spelling, Codex |
-| `gen_ai.response.finish_reason`, `gen_ai.usage.prompt_token_details.cached_read_tokens`, `gen_ai.usage.completion_token_details.reasoning_tokens` | Bifrost gateway |
-| `gen_ai.usage.input_tokens.cached` | OpenRouter gateway |
-| `gen_ai.response.model`, last source for the request model | vLLM, which writes only the response model |
-| `ai.model.id`, `ai.model.provider`, `ai.response.model`, `ai.response.finishReason`, `ai.prompt.messages`, `ai.response.text`, `ai.response.toolCalls`, `ai.usage.promptTokens`, `ai.usage.completionTokens` | Vercel AI SDK v4, Mastra |
-| `ai.usage.inputTokens`, `ai.usage.outputTokens`, `ai.usage.cachedInputTokens`, `ai.usage.reasoningTokens` | Vercel AI SDK v5 |
-| `langfuse.observation.model.name`, `langfuse.session.id` | Langfuse SDK v3 |
-| `session.id` | OpenInference, Langfuse, Claude Code |
-| `gen_ai.client.session_id` | opentelemetry-hooks runner (Cursor, Copilot, Claude Code hooks) |
-| `model`, `input_tokens`, `output_tokens`, `cache_read_tokens`, `cache_creation_tokens` | Claude Code `claude_code.llm_request` spans ([docs](https://code.claude.com/docs/en/monitoring-usage#span-attributes)) |
-
-## gen_ai.tool
-
-Condition: `tool.name` (OpenInference), `ai.toolCall.` (Vercel, Mastra), `tool_call_args`, `tool_response` (Google ADK), `tool_use_id` (Claude Code, opentelemetry-hooks). Not `tool_name`: Codex records it on the model call span.
-
-| Source | Emitted by |
-|---|---|
-| `tool.name`, `tool.id`, `tool.description`, `input.value`, `output.value`, `openinference.span.kind` | OpenInference |
-| `ai.toolCall.name`, `ai.toolCall.id`, `ai.toolCall.args`, `ai.toolCall.result` | Vercel AI SDK, Mastra |
-| `traceloop.entity.input`, `traceloop.entity.output`, `traceloop.span.kind`, `llm.request.type` | OpenLLMetry |
-| `gcp.vertex.agent.tool_call_args`, `gcp.vertex.agent.tool_response` | Google ADK |
-| `tool_name` | Claude Code `claude_code.tool` spans |
-| `gen_ai.client.tool_name`, `gen_ai.client.tool_use_id` | opentelemetry-hooks runner (Cursor, Copilot, Claude Code hooks) |
-
-## gen_ai.agent
-
-Condition: `agent`.
-
-| Source | Emitted by |
-|---|---|
-| `agent.name`, `agent.id`, `agent.description`, `openinference.span.kind` | OpenInference; `agent.id` and `agent.description` seen in no capture |
-| `agent_name`, `final_result` | Pydantic AI |
-| `crewai.agent.role`, `crewai.agent.id` | CrewAI |
-| `traceloop.span.kind`, `llm.request.type` | OpenLLMetry |
-| `agent_id` | Claude Code |
-
-## Coverage of documented integrations
-
-Every integration under [signoz.io/docs/llm-observability](https://signoz.io/docs/llm-observability/) was checked by looking at the instrumentation its page installs and the keys that instrumentation writes.
-
- Most pages install OpenInference or OpenLLMetry, or an SDK that writes OTel GenAI semconv itself (OpenAI, OpenAI Agents, Pydantic AI, AutoGen, Microsoft Agent Framework, Semantic Kernel, Copilot Chat, LiteLLM, OpenRouter). Their keys are the rows above.
- Three write their own keys and have their own rows: Claude Code and Claude Agent SDK, Cursor through opentelemetry-hooks, vLLM (response model only).
- Codex cannot be priced by renaming: `model` sits on the sampling function spans, `gen_ai.usage.*` on the child `handle_responses` span, `conversation.id` on the `codex.sampling` phase span, never together on one span.
-
-To check a new integration, capture a trace and look for a model, usage, tool or messages key that no row above lists.
-
-## Left unmapped on purpose
-
-LiteLLM `llm.openai.messages` and `llm.openai.choices` (debug echo of the parent span's messages, Python repr). Total tokens and vendor cost keys (no target; the pricing processor owns cost). `ai.response.msToFirstChunk` and `gen_ai.latency.time_to_first_token` (milliseconds and seconds under one target).
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -25,7 +25,6 @@ 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/docs/authz-guide.md
+++ b/frontend/docs/authz-guide.md
@@ -41,12 +41,6 @@ These hold for every page. The per-pattern sections below only add to them.
   `create` on API Keys, so blocking the outer container would hide work they are allowed to do.
 7. **Verbs not covered here** (`attach`, `detach`, `assignee`) behave like `delete`: gate the control that triggers
   them, not the surrounding content.
-8. **Expose the selector.** A role is scoped to a resource by pasting its selector into the role editor, so every
-   resource a role can be scoped to shows that selector with a copy control on its detail view or drawer. The selector
-   is whatever the editor accepts for the resource (dashboard ID, service account ID, role name, ...), listed per
-   resource in [permissions.config.ts](../src/container/RolesSettings/permissions.config.ts). It is already known from
-   the row or URL, so it stays visible and copyable without `read`. Reference: the ID field in
-   [ServiceAccountDrawer/OverviewTab.tsx](../src/components/ServiceAccountDrawer/OverviewTab.tsx).

 ## Page patterns

@@ -142,8 +136,6 @@ Use the existing components. Create a new one only if none fit.
 - [ ] Am I gating a shared component rather than a page or section?
  - If so, it must stay functional with no permission. Example: the Query Builder works without field suggestions when
    the user cannot read them.
- [ ] Does the page expose the resource's selector with a copy control (rule 8)?
-  - The expected format is the `selectorPlaceholder` for the resource in `permissions.config.ts`.

 ## Testing

--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -41,20 +41,6 @@ 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
@@ -49,13 +49,12 @@
    "@dnd-kit/sortable": "8.0.0",
    "@dnd-kit/utilities": "3.2.2",
    "@grafana/data": "^11.6.15",
-    "@lezer/highlight": "1.2.1",
    "@monaco-editor/react": "^4.7.0",
    "@sentry/react": "10.57.0",
    "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.2.1",
+    "@signozhq/design-tokens": "2.1.6",
    "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.2.0",
+    "@signozhq/ui": "0.1.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
@@ -62,9 +62,6 @@ importers:
      '@grafana/data':
        specifier: ^11.6.15
        version: 11.6.15(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@lezer/highlight':
-        specifier: 1.2.1
-        version: 1.2.1
      '@monaco-editor/react':
        specifier: ^4.7.0
        version: 4.7.0(monaco-editor@0.55.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -75,14 +72,14 @@ importers:
        specifier: 5.3.0
        version: 5.3.0
      '@signozhq/design-tokens':
-        specifier: 2.2.1
-        version: 2.2.1
+        specifier: 2.1.6
+        version: 2.1.6
      '@signozhq/icons':
        specifier: 0.4.0
        version: 0.4.0
      '@signozhq/ui':
-        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)
+        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)
      '@tanstack/react-table':
        specifier: 8.21.3
        version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1287,33 +1284,6 @@ 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==}

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

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

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

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

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

  '@gerrit0/mini-shiki@3.23.0':
    resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
@@ -2950,6 +2920,19 @@ 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:
@@ -2963,6 +2946,15 @@ 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:
@@ -3016,6 +3008,19 @@ 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:
@@ -3043,6 +3048,15 @@ 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:
@@ -3052,6 +3066,19 @@ 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:
@@ -3117,6 +3144,19 @@ 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:
@@ -3182,6 +3222,15 @@ 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:
@@ -3191,6 +3240,19 @@ 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:
@@ -3204,6 +3266,45 @@ 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:
@@ -3240,6 +3341,15 @@ 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:
@@ -3611,14 +3721,14 @@ packages:
  '@sideway/pinpoint@2.0.0':
    resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}

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

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

-  '@signozhq/ui@0.2.0':
-    resolution: {integrity: sha512-j20ldiOkR150ON0BCDhlq6fXGoPN++7w6e4t2HtM2XMM4buJO7aHzPzNKvDRZ2UUf/LGPULPAW8w6sg6gUVHyw==}
+  '@signozhq/ui@0.1.0':
+    resolution: {integrity: sha512-FjqmQhz+WtpGl29gPGZey5YwNe4p++TCyX4jaGUhAgvlBGRmxmAKW0lFRrSOYTPbgFL5UaDCW0wR62aiGHZ+FA==}
    peerDependencies:
      '@signozhq/icons': 0.3.0
      react: ^18.2.0
@@ -8410,11 +8520,6 @@ 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'}
@@ -8802,9 +8907,6 @@ 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==}

@@ -11052,31 +11154,6 @@ 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': {}
@@ -11521,22 +11598,22 @@ snapshots:
      '@eslint/core': 1.2.1
      levn: 0.4.1

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

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

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

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

  '@gerrit0/mini-shiki@3.23.0':
    dependencies:
@@ -12686,6 +12763,21 @@ 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)
@@ -12698,6 +12790,12 @@ 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
@@ -12752,6 +12850,21 @@ 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
@@ -12773,6 +12886,13 @@ 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)
@@ -12780,6 +12900,32 @@ 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
@@ -12805,7 +12951,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.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.0.4(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)
@@ -12849,6 +12995,15 @@ 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)
@@ -12944,6 +13099,13 @@ 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)
@@ -12951,6 +13113,20 @@ 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
@@ -12967,6 +13143,53 @@ 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
@@ -12995,6 +13218,12 @@ 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
@@ -13043,14 +13272,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.29.2
+      '@babel/runtime': 7.28.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.29.2
+      '@babel/runtime': 7.28.2

  '@rc-component/mutate-observer@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
    dependencies:
@@ -13062,7 +13291,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.29.2
+      '@babel/runtime': 7.28.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
@@ -13330,15 +13559,16 @@ snapshots:

  '@sideway/pinpoint@2.0.0': {}

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

  '@signozhq/icons@0.4.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)':
+  '@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)':
    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)
@@ -13346,7 +13576,11 @@ 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)
@@ -13360,19 +13594,16 @@ 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
@@ -14898,10 +15129,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.5(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@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.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-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)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
    transitivePeerDependencies:
@@ -19046,10 +19277,6 @@ 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
@@ -19535,8 +19762,6 @@ snapshots:

  requires-port@1.0.0: {}

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

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

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

  run-applescript@7.1.0: {}

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

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

  unplugin@2.3.11:
--- a/frontend/src/api/ErrorResponseHandler.ts
+++ b/frontend/src/api/ErrorResponseHandler.ts
@@ -41,16 +41,17 @@ 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
@@ -1,22 +0,0 @@
-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/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -4,264 +4,6 @@
 * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
-export enum AiobservabilitytypesBlobPartDTOType {
-	blob = 'blob',
-}
-export interface AiobservabilitytypesBlobPartDTO {
-	/**
-	 * @type string
-	 */
-	content: string;
-	/**
-	 * @type string,null
-	 */
-	mime_type?: string | null;
-	/**
-	 * @type string
-	 */
-	modality: string;
-	/**
-	 * @type string
-	 * @enum blob
-	 */
-	type: AiobservabilitytypesBlobPartDTOType;
-}
-
-export enum AiobservabilitytypesTextPartDTOType {
-	text = 'text',
-}
-export interface AiobservabilitytypesTextPartDTO {
-	/**
-	 * @type string
-	 */
-	content: string;
-	/**
-	 * @type string
-	 * @enum text
-	 */
-	type: AiobservabilitytypesTextPartDTOType;
-}
-
-export enum AiobservabilitytypesToolCallRequestPartDTOType {
-	tool_call = 'tool_call',
-}
-export interface AiobservabilitytypesToolCallRequestPartDTO {
-	arguments?: unknown;
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @enum tool_call
-	 */
-	type: AiobservabilitytypesToolCallRequestPartDTOType;
-}
-
-export enum AiobservabilitytypesToolCallResponsePartDTOType {
-	tool_call_response = 'tool_call_response',
-}
-export type AiobservabilitytypesToolCallResponsePartDTOResponse =
-	| unknown
-	| null;
-
-export interface AiobservabilitytypesToolCallResponsePartDTO {
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @nullable true
-	 */
-	response: AiobservabilitytypesToolCallResponsePartDTOResponse;
-	/**
-	 * @type string
-	 * @enum tool_call_response
-	 */
-	type: AiobservabilitytypesToolCallResponsePartDTOType;
-}
-
-export interface AiobservabilitytypesGenericServerToolCallDTO {
-	[key: string]: unknown;
-}
-
-export enum AiobservabilitytypesServerToolCallPartDTOType {
-	server_tool_call = 'server_tool_call',
-}
-export interface AiobservabilitytypesServerToolCallPartDTO {
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @type string
-	 */
-	name: string;
-	server_tool_call: AiobservabilitytypesGenericServerToolCallDTO;
-	/**
-	 * @type string
-	 * @enum server_tool_call
-	 */
-	type: AiobservabilitytypesServerToolCallPartDTOType;
-}
-
-export interface AiobservabilitytypesGenericServerToolCallResponseDTO {
-	[key: string]: unknown;
-}
-
-export enum AiobservabilitytypesServerToolCallResponsePartDTOType {
-	server_tool_call_response = 'server_tool_call_response',
-}
-export interface AiobservabilitytypesServerToolCallResponsePartDTO {
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	server_tool_call_response: AiobservabilitytypesGenericServerToolCallResponseDTO;
-	/**
-	 * @type string
-	 * @enum server_tool_call_response
-	 */
-	type: AiobservabilitytypesServerToolCallResponsePartDTOType;
-}
-
-export enum AiobservabilitytypesFilePartDTOType {
-	file = 'file',
-}
-export interface AiobservabilitytypesFilePartDTO {
-	/**
-	 * @type string
-	 */
-	file_id: string;
-	/**
-	 * @type string,null
-	 */
-	mime_type?: string | null;
-	/**
-	 * @type string
-	 */
-	modality: string;
-	/**
-	 * @type string
-	 * @enum file
-	 */
-	type: AiobservabilitytypesFilePartDTOType;
-}
-
-export enum AiobservabilitytypesUriPartDTOType {
-	uri = 'uri',
-}
-export interface AiobservabilitytypesUriPartDTO {
-	/**
-	 * @type string,null
-	 */
-	mime_type?: string | null;
-	/**
-	 * @type string
-	 */
-	modality: string;
-	/**
-	 * @type string
-	 * @enum uri
-	 */
-	type: AiobservabilitytypesUriPartDTOType;
-	/**
-	 * @type string
-	 */
-	uri: string;
-}
-
-export enum AiobservabilitytypesReasoningPartDTOType {
-	reasoning = 'reasoning',
-}
-export interface AiobservabilitytypesReasoningPartDTO {
-	/**
-	 * @type string
-	 */
-	content: string;
-	/**
-	 * @type string
-	 * @enum reasoning
-	 */
-	type: AiobservabilitytypesReasoningPartDTOType;
-}
-
-export enum AiobservabilitytypesCompactionPartDTOType {
-	compaction = 'compaction',
-}
-export interface AiobservabilitytypesCompactionPartDTO {
-	/**
-	 * @type string,null
-	 */
-	content?: string | null;
-	/**
-	 * @type string,null
-	 */
-	id?: string | null;
-	/**
-	 * @type string
-	 * @enum compaction
-	 */
-	type: AiobservabilitytypesCompactionPartDTOType;
-}
-
-export interface AiobservabilitytypesGenericPartDTO {
-	[key: string]: unknown;
-}
-
-export type AiobservabilitytypesPartDTO =
-	| AiobservabilitytypesTextPartDTO
-	| AiobservabilitytypesToolCallRequestPartDTO
-	| AiobservabilitytypesToolCallResponsePartDTO
-	| AiobservabilitytypesServerToolCallPartDTO
-	| AiobservabilitytypesServerToolCallResponsePartDTO
-	| AiobservabilitytypesBlobPartDTO
-	| AiobservabilitytypesFilePartDTO
-	| AiobservabilitytypesUriPartDTO
-	| AiobservabilitytypesReasoningPartDTO
-	| AiobservabilitytypesCompactionPartDTO
-	| AiobservabilitytypesGenericPartDTO;
-
-export type AiobservabilitytypesPartsDTO = AiobservabilitytypesPartDTO[];
-
-export interface AiobservabilitytypesChatMessageDTO {
-	/**
-	 * @type string,null
-	 */
-	name?: string | null;
-	parts: AiobservabilitytypesPartsDTO;
-	/**
-	 * @type string
-	 */
-	role: string;
-}
-
-export type AiobservabilitytypesInputMessagesDTO =
-	AiobservabilitytypesChatMessageDTO[];
-
-export interface AiobservabilitytypesOutputMessageDTO {
-	/**
-	 * @type string,null
-	 */
-	finish_reason?: string | null;
-	/**
-	 * @type string,null
-	 */
-	name?: string | null;
-	parts: AiobservabilitytypesPartsDTO;
-	/**
-	 * @type string
-	 */
-	role: string;
-}
-
-export type AiobservabilitytypesOutputMessagesDTO =
-	AiobservabilitytypesOutputMessageDTO[];
-
 export interface AlertmanagertypesChannelDTO {
 	/**
 	 * @type string
@@ -4469,10 +4211,195 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }

-export enum DashboardtypesAIBuilderQuerySpecDTOSignal {
-	traces = 'traces',
+export enum DashboardtypesAreaFillModeDTO {
+	solid = 'solid',
+	gradient = 'gradient',
 }
-export interface Querybuildertypesv5TraceAggregationDTO {
+/**
+ * @minimum 0
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesFillOpacityDTO = number | null;
+
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
+export interface DashboardtypesAreaChartAppearanceDTO {
+	fillMode?: DashboardtypesAreaFillModeDTO;
+	fillOpacity?: DashboardtypesFillOpacityDTO | null;
+	lineInterpolation?: DashboardtypesLineInterpolationDTO;
+	lineStyle?: DashboardtypesLineStyleDTO;
+	/**
+	 * @type boolean
+	 */
+	showPoints?: boolean;
+	spanGaps?: DashboardtypesSpanGapsDTO;
+}
+
+export interface DashboardtypesAxesDTO {
+	/**
+	 * @type boolean
+	 */
+	isLogScale?: boolean;
+	/**
+	 * @type number,null
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 */
+	softMin?: number | null;
+}
+
+export enum DashboardtypesPrecisionOptionDTO {
+	NUMBER_0 = '0',
+	NUMBER_1 = '1',
+	NUMBER_2 = '2',
+	NUMBER_3 = '3',
+	NUMBER_4 = '4',
+	full = 'full',
+}
+export interface DashboardtypesPanelFormattingDTO {
+	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+}
+
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+}
+export enum DashboardtypesLegendPositionDTO {
+	bottom = 'bottom',
+	right = 'right',
+}
+export type DashboardtypesLegendDTOCustomColorsAnyOf = {
+	[key: string]: string;
+};
+
+/**
+ * @nullable
+ */
+export type DashboardtypesLegendDTOCustomColors =
+	DashboardtypesLegendDTOCustomColorsAnyOf | null;
+
+export interface DashboardtypesLegendDTO {
+	/**
+	 * @type object,null
+	 */
+	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
+	position?: DashboardtypesLegendPositionDTO;
+}
+
+export interface DashboardtypesThresholdWithLabelDTO {
+	/**
+	 * @type string
+	 */
+	color: string;
+	/**
+	 * @type string
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	value: number;
+}
+
+export enum DashboardtypesStackModeDTO {
+	none = 'none',
+	normal = 'normal',
+	percent = 'percent',
+}
+export enum DashboardtypesTimePreferenceDTO {
+	global_time = 'global_time',
+	last_5_min = 'last_5_min',
+	last_15_min = 'last_15_min',
+	last_30_min = 'last_30_min',
+	last_1_hr = 'last_1_hr',
+	last_6_hr = 'last_6_hr',
+	last_1_day = 'last_1_day',
+	last_3_days = 'last_3_days',
+	last_1_week = 'last_1_week',
+	last_1_month = 'last_1_month',
+}
+export interface DashboardtypesAreaChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	stack?: DashboardtypesStackModeDTO;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesAreaChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesAreaChartVisualizationDTO;
+}
+
+export interface DashboardtypesBarChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	/**
+	 * @type boolean
+	 */
+	stackedBarChart?: boolean;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesBarChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesBarChartVisualizationDTO;
+}
+
+export interface DashboardtypesBasicVisualizationDTO {
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface Querybuildertypesv5LogAggregationDTO {
 	/**
 	 * @type string
 	 */
@@ -4711,274 +4638,13 @@ export interface TelemetrytypesTelemetryFieldKeyDTO {
 	unit?: string;
 }

+export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
+	logs = 'logs',
+}
 export enum TelemetrytypesSourceDTO {
 	meter = 'meter',
 	'' = '',
 }
-export interface DashboardtypesAIBuilderQuerySpecDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
-	/**
-	 * @type string
-	 */
-	cursor?: string;
-	/**
-	 * @type boolean
-	 */
-	disabled?: boolean;
-	filter?: Querybuildertypesv5FilterDTO;
-	/**
-	 * @type array,null
-	 */
-	functions?: Querybuildertypesv5FunctionDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
-	having?: Querybuildertypesv5HavingDTO;
-	/**
-	 * @type string
-	 */
-	legend?: string;
-	/**
-	 * @type integer
-	 */
-	limit?: number;
-	limitBy?: Querybuildertypesv5LimitByDTO;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 */
-	offset?: number;
-	/**
-	 * @type array,null
-	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
-	/**
-	 * @enum traces
-	 * @type string
-	 */
-	signal: DashboardtypesAIBuilderQuerySpecDTOSignal;
-	source?: TelemetrytypesSourceDTO;
-	stepInterval?: Querybuildertypesv5StepDTO;
-}
-
-export enum DashboardtypesAreaFillModeDTO {
-	solid = 'solid',
-	gradient = 'gradient',
-}
-/**
- * @minimum 0
- * @maximum 1
- * @nullable
- */
-export type DashboardtypesFillOpacityDTO = number | null;
-
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
-export interface DashboardtypesAreaChartAppearanceDTO {
-	fillMode?: DashboardtypesAreaFillModeDTO;
-	fillOpacity?: DashboardtypesFillOpacityDTO | null;
-	lineInterpolation?: DashboardtypesLineInterpolationDTO;
-	lineStyle?: DashboardtypesLineStyleDTO;
-	/**
-	 * @type boolean
-	 */
-	showPoints?: boolean;
-	spanGaps?: DashboardtypesSpanGapsDTO;
-}
-
-export interface DashboardtypesAxesDTO {
-	/**
-	 * @type boolean
-	 */
-	isLogScale?: boolean;
-	/**
-	 * @type number,null
-	 */
-	softMax?: number | null;
-	/**
-	 * @type number,null
-	 */
-	softMin?: number | null;
-}
-
-export enum DashboardtypesPrecisionOptionDTO {
-	NUMBER_0 = '0',
-	NUMBER_1 = '1',
-	NUMBER_2 = '2',
-	NUMBER_3 = '3',
-	NUMBER_4 = '4',
-	full = 'full',
-}
-export interface DashboardtypesPanelFormattingDTO {
-	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
-export enum DashboardtypesLegendModeDTO {
-	list = 'list',
-}
-export enum DashboardtypesLegendPositionDTO {
-	bottom = 'bottom',
-	right = 'right',
-}
-export type DashboardtypesLegendDTOCustomColorsAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type DashboardtypesLegendDTOCustomColors =
-	DashboardtypesLegendDTOCustomColorsAnyOf | null;
-
-export interface DashboardtypesLegendDTO {
-	/**
-	 * @type object,null
-	 */
-	customColors?: DashboardtypesLegendDTOCustomColors;
-	mode?: DashboardtypesLegendModeDTO;
-	position?: DashboardtypesLegendPositionDTO;
-}
-
-export interface DashboardtypesThresholdWithLabelDTO {
-	/**
-	 * @type string
-	 */
-	color: string;
-	/**
-	 * @type string
-	 */
-	label?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	value: number;
-}
-
-export enum DashboardtypesStackModeDTO {
-	none = 'none',
-	normal = 'normal',
-	percent = 'percent',
-}
-export enum DashboardtypesTimePreferenceDTO {
-	global_time = 'global_time',
-	last_5_min = 'last_5_min',
-	last_15_min = 'last_15_min',
-	last_30_min = 'last_30_min',
-	last_1_hr = 'last_1_hr',
-	last_6_hr = 'last_6_hr',
-	last_1_day = 'last_1_day',
-	last_3_days = 'last_3_days',
-	last_1_week = 'last_1_week',
-	last_1_month = 'last_1_month',
-}
-export interface DashboardtypesAreaChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	stack?: DashboardtypesStackModeDTO;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesAreaChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesAreaChartVisualizationDTO;
-}
-
-export interface DashboardtypesBarChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	stackedBarChart?: boolean;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesBarChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesBarChartVisualizationDTO;
-}
-
-export interface DashboardtypesBasicVisualizationDTO {
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface Querybuildertypesv5LogAggregationDTO {
-	/**
-	 * @type string
-	 */
-	alias?: string;
-	/**
-	 * @type string
-	 */
-	expression?: string;
-}
-
-export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
-	logs = 'logs',
-}
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO {
 	/**
 	 * @type array,null
@@ -5169,6 +4835,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	stepInterval?: Querybuildertypesv5StepDTO;
 }

+export interface Querybuildertypesv5TraceAggregationDTO {
+	/**
+	 * @type string
+	 */
+	alias?: string;
+	/**
+	 * @type string
+	 */
+	expression?: string;
+}
+
 export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTOSignal {
 	traces = 'traces',
 }
@@ -5727,18 +5404,6 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBuilderQuerySpecDTO;
 }

-export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind {
-	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
-}
-export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO {
-	/**
-	 * @enum signoz/AIBuilderQuery
-	 * @type string
-	 */
-	kind: DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind;
-	spec: DashboardtypesAIBuilderQuerySpecDTO;
-}
-
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTOKind {
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 }
@@ -6030,7 +5695,6 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQu

 export type DashboardtypesQueryPluginDTO =
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTO
-	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormulaDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQueryDTO
@@ -6709,7 +6373,6 @@ export interface DashboardtypesPostablePublicDashboardDTO {

 export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
-	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 	'signoz/Formula' = 'signoz/Formula',
 	'signoz/PromQLQuery' = 'signoz/PromQLQuery',
@@ -11789,12 +11452,6 @@ export interface SpantypesThreadSpanDTO {
 	 * @type array
 	 */
 	events: SpantypesEventDTO[];
-	formattedInput: AiobservabilitytypesInputMessagesDTO;
-	formattedOutput: AiobservabilitytypesOutputMessagesDTO;
-	/**
-	 * @type array
-	 */
-	formatterWarnings: string[];
 	/**
 	 * @type boolean
 	 */
@@ -11910,12 +11567,6 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @minimum 0
 	 */
 	flags?: number;
-	formattedInput?: AiobservabilitytypesInputMessagesDTO;
-	formattedOutput?: AiobservabilitytypesOutputMessagesDTO;
-	/**
-	 * @type array
-	 */
-	formatterWarnings?: string[];
 	/**
 	 * @type boolean
 	 */
--- a/frontend/src/api/generated/services/tracedetail/index.ts
+++ b/frontend/src/api/generated/services/tracedetail/index.ts
@@ -261,7 +261,7 @@ export const invalidateGetTraceSummary = async (
 };

 /**
- * Returns the gen_ai spans of a trace, model calls, tool calls and agent spans, in timestamp order. The messages a span carries are decoded into formattedInput and formattedOutput, with formatterWarnings holding what the converter could not resolve; a span without messages has both empty. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
+ * Returns the spans carrying gen_ai input or output messages in timestamp order. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
 * @summary Get thread view for a trace
 */
 export const getTraceThread = (
@@ -475,7 +475,7 @@ export const useGetFlamegraph = <
 	return useMutation(getGetFlamegraphMutationOptions(options));
 };
 /**
- * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3. A span carrying gen_ai input or output messages also has them decoded into formattedInput and formattedOutput, with formatterWarnings holding what the converter could not resolve.
+ * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3
 * @summary Get waterfall view for a trace
 */
 export const getWaterfallV4 = (
--- a/frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx
+++ b/frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx
@@ -17,10 +17,7 @@ function ModalFixture(): JSX.Element {
 	return (
 		<>
 			<Button
-				variant="solid"
-				color="primary"
-				size="md"
-				testId="open-add-credit-card"
+				data-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,10 +8,6 @@
 	: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,5 +1,9 @@
-.itemLast {
-	color: var(--button-secondary-label);
-	font-size: var(--button-font-size, var(--periscope-font-size-base));
-	line-height: var(--button-size-line-height, 16px);
+.item {
+	--button-padding: 0;
+	--button-font-size: var(--periscope-font-size-base);
+}
+
+.itemLast {
+	color: var(--muted-foreground);
+	font-size: var(--periscope-font-size-base);
 }
--- a/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
+++ b/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
@@ -26,9 +26,9 @@ function BreadcrumbItem({

 	return (
 		<Button
-			size="md"
-			variant="link"
+			variant="ghost"
 			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,23 +34,21 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
-					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					testId="error-contact-support-button"
+					data-testid="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="error-refresh-button"
+						data-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,32 +1,20 @@
 .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;
-	}
 }

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

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

 .overflowTrigger {
@@ -34,6 +22,11 @@
 	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,14 +1,13 @@
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { act, render, screen } from '@testing-library/react';

 import LabelColumn from './LabelColumn';

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

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

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

-// 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;
+function triggerResize(width: number): void {
+	if (resizeCallback) {
+		act(() => {
+			resizeCallback?.(
+				[{ contentRect: { width } } as ResizeObserverEntry],
+				{} as ResizeObserver,
+			);
 		});
-	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(() => {
@@ -40,14 +31,13 @@ beforeAll(() => {
 });

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

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

 describe('LabelColumn', () => {
@@ -64,10 +54,13 @@ 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();
@@ -100,37 +93,19 @@ describe('LabelColumn', () => {
 		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
 	});

-	it('should update the overflow count when the container resizes', () => {
+	it('should show overflow badge with remaining count when container is narrow', () => {
 		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} />);

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

-	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');
+		// Overflow badge shows +3 (remaining labels)
+		const overflowBadge = screen.getByTestId('label-overflow-badge');
+		expect(overflowBadge).toBeInTheDocument();
+		expect(overflowBadge).toHaveTextContent('+3');
 	});

 	it('should render empty when no labels provided', () => {
@@ -151,9 +126,11 @@ 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,19 +1,35 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import { useLayoutEffect, useRef, useState } from 'react';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';

 import LabelTag from './LabelTag';

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

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

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

-	useLayoutEffect(() => {
+	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(() => {
 		const container = containerRef.current;
 		if (!container) {
 			return;
 		}

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

-			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);
-		measure();
+
+		if (container.clientWidth > 0) {
+			setMaxVisibleCount(calculateMaxVisible(container.clientWidth));
+		}

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

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

 	return (
 		<div
@@ -61,23 +100,24 @@ function LabelColumn({
 			className={styles.labelColumn}
 			data-testid="label-column"
 		>
-			{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,
-					})}
-				/>
+			{visibleLabels.map((label) => (
+				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
 			))}
 			{remainingLabels.length > 0 && (
-				<Tooltip
-					side="bottom"
-					align="end"
-					title={
+				<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">
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -100,14 +140,8 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					}
-				>
-					<span>
-						<Badge color={color} variant="outlined" testId="label-overflow-badge">
-							+{remainingLabels.length}
-						</Badge>
-					</span>
-				</Tooltip>
+					</TooltipContent>
+				</TooltipRoot>
 			)}
 		</div>
 	);
--- a/frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss
+++ b/frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss
@@ -1,3 +1,11 @@
+.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,24 +1,35 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';

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

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

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

 	return (
-		<Tooltip
-			title={
+		<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>
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -43,19 +66,8 @@ function LabelTag({
 						<Copy size={12} />
 					</button>
 				</div>
-			}
-		>
-			<span className={className}>
-				<Badge
-					textTransform="none"
-					color={color ?? 'secondary'}
-					variant="outlined"
-					testId={`label-tag-${label}`}
-				>
-					<span className={styles.labelValue}>{displayText}</span>
-				</Badge>
-			</span>
-		</Tooltip>
+			</TooltipContent>
+		</TooltipRoot>
 	);
 }

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

-/**
- * 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,
+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,
 	);
-	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,23 +30,21 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						testId="no-results-clear-button"
+						data-testid="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="no-results-refresh-button"
+						data-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 { BadgeColorType } from '@signozhq/ui/badge';
+import type { BadgeColor } 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, BadgeColorType> = {
-	critical: 'danger',
-	error: 'danger',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
+	critical: 'error',
+	error: 'error',
 	warning: 'warning',
 	info: 'primary',
 };
--- a/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
@@ -33,3 +33,36 @@
 	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
-				size="md"
+				className="auth-header-help-button"
 				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 				variant="solid"
-				color="secondary"
+				color="none"
 			>
 				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 { Pill } from '@signozhq/ui/pill';
+import { Badge } from '@signozhq/ui/badge';
 import Input from 'components/Input';

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

 			{inputVisible && (
--- a/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss
+++ b/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss
@@ -39,3 +39,9 @@
 		}
 	}
 }
+
+.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 { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';

 import './CloudServiceDataCollected.styles.scss';

@@ -88,15 +88,23 @@ function CloudServiceDataCollected({
 						<BarChart size={14} />
 						Metrics
 						{metricsInfoTooltip && (
-							<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"
+							<TooltipProvider>
+								<TooltipSimple
+									title={metricsInfoTooltip}
+									side="top"
+									tooltipContentProps={{
+										className: 'cloud-service-data-collected-table-tooltip',
+									}}
 								>
-									<Info size={12} />
-								</span>
-							</Tooltip>
+									<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>
 						)}
 					</div>
 					<Table
--- a/frontend/src/components/CodeBlock/CodeBlock.module.scss
+++ b/frontend/src/components/CodeBlock/CodeBlock.module.scss
@@ -2,13 +2,6 @@
 	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,7 +2,6 @@ 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';
@@ -53,20 +52,16 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<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>
+				<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 }}
+				/>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -134,27 +134,26 @@ function CreateServiceAccountModal(): JSX.Element {

 			<DialogFooter className="create-sa-modal__footer">
 				<Button
-					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					testId="create-sa-cancel-btn"
-					prefix={<X size={12} />}
+					data-testid="create-sa-cancel-btn"
 				>
+					<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}
-					testId="create-sa-submit-btn"
+					data-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,7 +5,6 @@ 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';
@@ -61,10 +60,7 @@ describe('CreateServiceAccountModal', () => {
 		await screen.findByTestId('create-sa-name-input');

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

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

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

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

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

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

 		await waitFor(() => {
@@ -112,40 +102,6 @@ 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 });

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

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

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

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

 		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,6 +4,30 @@
 	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 ? undefined : 'Zoom out'}>
+				<Tooltip
+					title={
+						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
+					}
+				>
 					<Button
-						disabledTooltip="Zoom out time range is limited to 1 month"
-						size="md"
+						className="zoom-out-btn"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						testId="zoom-out-btn"
-						icon
-						aria-label="Zoom out"
+						data-testid="zoom-out-btn"
+						prefix={<ZoomOut size={14} />}
 						variant="solid"
-						color="secondary"
-					>
-						<ZoomOut size={14} />
-					</Button>
+						color="none"
+					/>
 				</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).toHaveAttribute('aria-disabled', 'true');
+		expect(zoomOutBtn).toBeDisabled();
 	});
 });
--- a/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
+++ b/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
@@ -27,14 +27,12 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="sm"
-			icon
+			size="icon"
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-		>
-			<X size={14} />
-		</Button>
+			prefix={<X size={14} />}
+		></Button>
 	);

 	return (
--- a/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss
+++ b/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss
@@ -42,5 +42,12 @@
 			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,16 +308,13 @@ describe.each([

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

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

 		resolveDownload!();

 		await waitFor(() => {
-			expect(screen.getByTestId(testId)).not.toHaveAttribute(
-				'aria-disabled',
-				'true',
-			);
+			expect(screen.getByTestId(testId)).not.toBeDisabled();
 		});
 	});
 });
--- 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 } from '@signozhq/ui/radio-group';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -69,15 +69,10 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup
-						color="primary"
-						value={exportFormat}
-						onChange={setExportFormat}
-						items={[
-							{ value: DownloadFormats.CSV, label: 'csv' },
-							{ value: DownloadFormats.JSONL, label: 'jsonl' },
-						]}
-					/>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
+						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>

 				<div className="horizontal-line" />
@@ -85,15 +80,19 @@ 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))}
-						items={[
-							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
-							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
-							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
-						]}
-					/>
+					>
+						<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>
 				</div>

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

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

 	const footer = (
 		<>
-			<Button
-				size="md"
-				variant="solid"
-				color="secondary"
-				onClick={onClose}
-				prefix={<X size={12} />}
-			>
+			<Button variant="solid" color="secondary" onClick={onClose}>
+				<X size={12} />
 				Cancel
 			</Button>
 			<Button
-				size="md"
 				variant="solid"
-				color="danger"
+				color="destructive"
+				disabled={isDeleting}
 				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,6 +90,7 @@
 			font-weight: var(--uppercase-small-500-font-weight);
 			line-height: 100%;
 			letter-spacing: 0.44px;
+			text-transform: uppercase;
 		}
 	}

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

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

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

 	&__link-text-wrap {
@@ -217,4 +220,8 @@
 		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,12 +519,7 @@ function EditMemberDrawer({
 									localRoles.map((roleId) => {
 										const role = availableRoles.find((r) => r.id === roleId);
 										return (
-											<Badge
-												textTransform="none"
-												variant="solid"
-												key={roleId}
-												color="secondary"
-											>
+											<Badge key={roleId} color="vanilla">
 												{role?.name ?? roleId}
 											</Badge>
 										);
@@ -564,15 +559,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="success" variant="outlined">
+						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
 					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="danger" variant="outlined">
+						<Badge color="cherry" variant="outline">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="warning" variant="outlined">
+						<Badge color="amber" variant="outline">
 							INVITED
 						</Badge>
 					)}
@@ -580,16 +575,12 @@ function EditMemberDrawer({

 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge textTransform="none" variant="solid" color="secondary">
-						{formatTimestamp(member?.joinedOn)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
 				</div>
 				{!isInvited && (
 					<div className="edit-member-drawer__meta-item">
 						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge textTransform="none" variant="solid" color="secondary">
-							{formatTimestamp(member?.updatedAt)}
-						</Badge>
+						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
 					</div>
 				)}
 			</div>
@@ -620,59 +611,55 @@ function EditMemberDrawer({
 			{!isDeleted && (
 				<>
 					<div className="edit-member-drawer__footer-left">
-						<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>
+						<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>

 						<div className="edit-member-drawer__footer-divider" />
-						<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>
+						<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>
 					</div>

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

 						<Button
-							disabledTooltip={isRootUser ? ROOT_USER_TOOLTIP : 'No changes to save'}
-							size="md"
 							variant="solid"
 							color="primary"
-							disabled={!isDirty || isRootUser}
+							disabled={!isDirty || isSaving || 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 }),
-		).toHaveAttribute('aria-disabled', 'true');
+		).toBeDisabled();
 	});

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

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

 		await user.click(saveBtn);

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

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

 		await waitFor(() => {
@@ -327,9 +323,7 @@ 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.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 		await user.click(saveBtn);

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

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

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

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

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

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

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

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

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

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

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

 		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 variant="solid" color="danger">
+					<Badge color="error">
 						<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 { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -137,15 +137,16 @@ function ExplorerCard({
 		);
 	};

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

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

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

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

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

-		> [data-slot='button'] {
+		.removeBtn,
+		.addBtn {
 			opacity: 1;
 		}
 	}
@@ -141,6 +137,14 @@
 	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,7 +173,6 @@ function FieldsSelectorContent({
 				{hasUnsavedChanges && (
 					<div className={styles.footer}>
 						<Button
-							size="md"
 							variant="outlined"
 							color="secondary"
 							onClick={handleDiscard}
@@ -182,7 +181,6 @@ 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,6 +138,7 @@ 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 { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -102,12 +102,10 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroup
-					variant="outlined"
-					color="secondary"
-					size="sm"
+				<ToggleGroupSimple
 					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,8 +1,7 @@
 .header-right-section-container {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-8);
-	padding-right: var(--spacing-8);
+	gap: 8px;
 }

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

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

-		.tab-icon {
-			width: 6px;
-			height: 6px;
+		.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);
+			}
 		}

-		.feedback-tab {
-			background-color: var(--danger-background);
+		.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);
+			}
 		}

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

-		.feature-tab {
-			background-color: var(--primary-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);
+					}
+				}
+			}
 		}
 	}

--- 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 { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
 import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
@@ -113,26 +113,24 @@ function HeaderRightSection({
 						</span>
 					) : null}

-					<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>
+					<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>
 				</div>
 			)}

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

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

@@ -203,15 +196,12 @@ function HeaderRightSection({
 					onOpenChange={handleOpenShareURLModalChange}
 				>
 					<Button
-						color="primary"
-						variant="link"
-						size="md"
-						icon
+						variant="ghost"
+						size="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,9 +149,6 @@ 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 => {
@@ -176,8 +173,6 @@ 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 button should be active
-		const feedbackButton = screen.getByRole('button', { name: 'Feedback' });
-		expect(feedbackButton).toHaveAttribute('aria-pressed', 'true');
+		// Initially, feedback radio should be active
+		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
+		expect(feedbackRadio).toBeChecked();

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

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

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

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

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

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

 		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 button is reset to default (Feedback button)
-		const feedbackButton = screen.getByRole('button', { name: 'Feedback' });
-		expect(feedbackButton).toHaveAttribute('aria-pressed', 'true');
+		// Verify active radio is reset to default (Feedback radio)
+		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
+		expect(feedbackRadio).toBeChecked();
 	});
 });
--- 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')).toHaveAttribute('aria-disabled', 'true');
+		expect(screen.getByRole('switch')).toBeDisabled();
 	});

 	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,32 +1,44 @@
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';

-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';
-}
+type BadgeColor =
+	| 'vanilla'
+	| 'robin'
+	| 'forest'
+	| 'amber'
+	| 'sienna'
+	| 'cherry'
+	| 'sakura'
+	| 'aqua';

 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);

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

 	return (
-		<Badge color={color} variant="outlined" testId={testId}>
+		<Badge
+			color={color}
+			variant="outline"
+			data-testid={testId}
+			className={className}
+		>
 			{statusCode}
 		</Badge>
 	);
--- a/frontend/src/components/InviteMembers/InviteMembers.tsx
+++ b/frontend/src/components/InviteMembers/InviteMembers.tsx
@@ -119,13 +119,11 @@ function InviteMembers({
 							<div className={styles.cellAction}>
 								{canRemoveRow && (
 									<Button
-										size="md"
-										variant="solid"
-										color="danger"
+										variant="ghost"
+										color="destructive"
 										onClick={(): void => removeRow(row.id)}
 										aria-label="Remove row"
-										testId={`invite-remove-${row.id}`}
-										icon
+										data-testid={`invite-remove-${row.id}`}
 									>
 										<Trash2 size={12} />
 									</Button>
@@ -138,12 +136,11 @@ function InviteMembers({
 				{showAddButton && (
 					<div className={styles.addRow}>
 						<Button
-							size="md"
 							variant="dashed"
 							color="secondary"
 							prefix={<Plus size={12} />}
 							onClick={addRow}
-							testId="invite-add-row"
+							data-testid="invite-add-row"
 						>
 							Add another
 						</Button>
--- a/frontend/src/components/LogDetail/LogDetails.styles.scss
+++ b/frontend/src/components/LogDetail/LogDetails.styles.scss
@@ -161,14 +161,37 @@
 		}
 	}

-	.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);
+	.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);
+				}
+			}
+		}
 	}

 	.search-input {
@@ -219,4 +242,42 @@
 		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,6 +6,14 @@
 	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 { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
 import { toast } from '@signozhq/ui/sonner';
@@ -23,6 +23,8 @@ import { useCopyToClipboard } from 'react-use';

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

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

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

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

 				<div className={styles.arrows}>
-					<Tooltip
-						title={isPrevDisabled ? undefined : 'Move to previous log'}
+					<TooltipSimple
+						title="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"
-							icon
-							aria-label="Move to previous log"
+							prefix={<ChevronUp size={14} />}
 							disabled={isPrevDisabled}
 							onClick={onNavigatePrev}
-							testId="log-details-header-prev"
-						>
-							<ChevronUp size={14} />
-						</Button>
-					</Tooltip>
-					<Tooltip
-						title={isNextDisabled ? undefined : 'Move to next log'}
+							data-testid="log-details-header-prev"
+						/>
+					</TooltipSimple>
+					<TooltipSimple
+						title="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"
-							icon
-							aria-label="Move to next log"
+							prefix={<ChevronDown size={14} />}
 							disabled={isNextDisabled}
 							onClick={onNavigateNext}
-							testId="log-details-header-next"
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</Tooltip>
+							data-testid="log-details-header-next"
+						/>
+					</TooltipSimple>
 				</div>
 			</div>
 		</div>
--- a/frontend/src/components/LogDetail/LogHighlights/LogHighlights.module.scss
+++ b/frontend/src/components/LogDetail/LogHighlights/LogHighlights.module.scss
@@ -12,6 +12,13 @@
 	}
 }

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

 .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, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge, BadgeColor } 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, BadgeColorType> = {
-	[LogType.TRACE]: 'success',
-	[LogType.DEBUG]: 'info',
-	[LogType.INFO]: 'primary',
-	[LogType.WARN]: 'warning',
-	[LogType.ERROR]: 'danger',
-	[LogType.FATAL]: 'highlight-danger',
+const SEVERITY_COLOR: Record<string, BadgeColor> = {
+	[LogType.TRACE]: 'forest',
+	[LogType.DEBUG]: 'aqua',
+	[LogType.INFO]: 'robin',
+	[LogType.WARN]: 'amber',
+	[LogType.ERROR]: 'cherry',
+	[LogType.FATAL]: 'sakura',
 };

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

 const valueBadge = (
 	value: string,
-	options?: { prefix?: ReactNode; color?: BadgeColorType },
+	options?: { prefix?: ReactNode; color?: BadgeColor },
 ): ReactNode => (
-	<Badge
-		variant="solid"
-		color={options?.color ?? 'secondary'}
-		textTransform="none"
-	>
+	<Badge color={options?.color ?? 'vanilla'} className={styles.valueBadge}>
 		{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,18 +129,6 @@ 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() });

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

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

 		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 { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -87,8 +87,7 @@ 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-base-ui-portal]')
+				target.closest('[data-radix-popper-content-wrapper]')
 			) {
 				return;
 			}
@@ -318,12 +317,9 @@ function LogDetailInner({
 					<div className="log-detail-drawer__section-divider" />

 					<div className="tabs-and-search">
-						<ToggleGroup
-							variant="outlined"
-							color="secondary"
-							size="sm"
+						<ToggleGroupSimple
 							type="single"
-							testId="log-detail-views-tabs"
+							className="views-tabs"
 							onChange={handleModeChange}
 							value={selectedView}
 							items={[
@@ -369,12 +365,9 @@ function LogDetailInner({
 										variant="link"
 										color="secondary"
 										size="sm"
-										icon
-										aria-label="Show Filters"
+										prefix={<Filter size="lg" />}
 										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 { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
 	Bold,
 	CodeXml,
@@ -11,17 +11,16 @@ import {
 	Type,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } 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, ReactElement> = {
+const COMMAND_ICONS: Record<string, ReactNode> = {
 	heading: <Heading size={14} />,
 	bold: <Bold size={14} />,
 	italic: <Italic size={14} />,
@@ -62,22 +61,20 @@ function EditorToolbar({
 			<span className={styles.toolbarDivider} />
 			<div className={styles.commands}>
 				{commands.map((command) => (
-					<Tooltip key={command.id} title={disabled ? undefined : command.label}>
+					<TooltipSimple key={command.id} title={command.label}>
 						<Button
-							disabledTooltip={READ_ONLY_TOOLTIP}
 							type="button"
 							variant="ghost"
 							color="secondary"
-							size="sm"
-							icon
+							size="icon"
 							disabled={disabled}
 							aria-label={command.label}
-							testId={`markdown-command-${command.id}`}
+							data-testid={`markdown-command-${command.id}`}
 							onClick={(): void => onRunCommand(command)}
 						>
 							{COMMAND_ICONS[command.id]}
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				))}
 			</div>
 			<div className={styles.toolbarEnd}>
--- a/frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx
+++ b/frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx
@@ -1,9 +1,8 @@
 import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign } from '@signozhq/icons';
+import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Dropdown, type DropdownActionItemType } from '@signozhq/ui/dropdown';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';

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

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

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

--- a/frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss
+++ b/frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss
@@ -74,10 +74,27 @@
 	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,10 +15,9 @@ function MarkdownHelp(): JSX.Element {
 					type="button"
 					variant="ghost"
 					color="secondary"
-					size="sm"
-					icon
+					size="icon"
 					aria-label="Markdown syntax help"
-					testId="markdown-help-trigger"
+					data-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,14 +256,8 @@ describe('MarkdownEditor', () => {
 			/>,
 		);

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

 	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,8 +1,6 @@
 // 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,6 +95,7 @@
 			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="success" variant="outlined">
+			<Badge color="forest" variant="outline">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status === MemberStatus.Deleted) {
 		return (
-			<Badge color="danger" variant="outlined">
+			<Badge color="cherry" variant="outline">
 				DELETED
 			</Badge>
 		);
@@ -70,17 +70,13 @@ function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {

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

-	return (
-		<Badge variant="solid" color="secondary">
-			⎯
-		</Badge>
-	);
+	return <Badge color="vanilla">⎯</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 { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -764,14 +764,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							tabIndex={isActive ? 0 : -1}
 						>
 							<Checkbox
-								color="primary"
 								value={isSelected}
-								width="100%"
-								onChange={(): void => {
-									handleItemSelection('checkbox');
-									setActiveChipIndex(-1);
-									setActiveIndex(-1);
-								}}
+								className="option-checkbox"
+								onClick={(e): void => selectFromButton(e, 'checkbox')}
 							>
 								<div className="option-content">
 									<span ref={textRef} className="option-label-text">
@@ -1609,7 +1604,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 						>
 							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox color="primary" value={allOptionsSelected} width="100%">
+								<Checkbox value={allOptionsSelected} className="option-checkbox">
 									<div className="option-content">
 										<div className="all-option-text">ALL</div>
 									</div>
@@ -1988,9 +1983,13 @@ 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 (
-					<Tooltip side="top" title={findOptionLabelText(options, value)}>
+					<TooltipSimple
+						side="top"
+						delayDuration={300}
+						title={findOptionLabelText(options, value)}
+					>
 						{tag}
-					</Tooltip>
+					</TooltipSimple>
 				);
 			}

@@ -2026,51 +2025,56 @@ 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.
-		<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,
+		<TooltipProvider>
+			<div
+				className={cx('custom-multiselect-wrapper', {
+					'all-selected': allOptionShown || 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>
+			>
+				{(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>
 	);
 };

--- a/frontend/src/components/NewSelect/CustomSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomSelect.tsx
@@ -16,6 +16,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';
@@ -739,33 +740,36 @@ const CustomSelect: React.FC<CustomSelectProps> = ({

 	// ===== Component Rendering =====
 	return (
-		<Select
-			ref={selectRef}
-			className={cx('custom-select', className)}
-			placeholder={placeholder}
-			showSearch
-			filterOption={false}
-			onSearch={handleSearch}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
-			open={isOpen}
-			options={optionsWithHighlight}
-			defaultActiveFirstOption={defaultActiveFirstOption}
-			popupMatchSelectWidth={popupMatchSelectWidth}
-			allowClear={allowClear ? { clearIcon } : false}
-			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-			dropdownRender={customDropdownRender}
-			menuItemSelectedIcon={null}
-			popupClassName={cx('custom-select-dropdown-container', popupClassName)}
-			listHeight={300}
-			placement={placement}
-			optionFilterProp="label"
-			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-			onKeyDown={handleKeyDown}
-			{...rest}
-		/>
+		// Self-provided so label tooltips work wherever this select is rendered.
+		<TooltipProvider>
+			<Select
+				ref={selectRef}
+				className={cx('custom-select', className)}
+				placeholder={placeholder}
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={value}
+				onChange={onChange}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				options={optionsWithHighlight}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={popupMatchSelectWidth}
+				allowClear={allowClear ? { clearIcon } : false}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-select-dropdown-container', popupClassName)}
+				listHeight={300}
+				placement={placement}
+				optionFilterProp="label"
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				{...rest}
+			/>
+		</TooltipProvider>
 	);
 };

--- a/frontend/src/components/NewSelect/TruncatedTooltip.module.scss
+++ b/frontend/src/components/NewSelect/TruncatedTooltip.module.scss
@@ -0,0 +1,4 @@
+// Above the antd select popup it is shown from.
+.tooltipContent {
+	--tooltip-z-index: 2100;
+}
--- a/frontend/src/components/NewSelect/TruncatedTooltip.tsx
+++ b/frontend/src/components/NewSelect/TruncatedTooltip.tsx
@@ -1,17 +1,11 @@
-import {
-	cloneElement,
-	FocusEvent,
-	PointerEvent,
-	ReactElement,
-	RefObject,
-	useRef,
-	useState,
-} from 'react';
-import { Tooltip, TooltipProps } from '@signozhq/ui/tooltip';
+import { ReactElement, RefObject, useRef, useState } from 'react';
+import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+
+import styles from './TruncatedTooltip.module.scss';

 interface TruncatedTooltipProps {
 	title: string;
-	side?: TooltipProps['side'];
+	side?: TooltipSimpleProps['side'];
 	/** Renders the trigger; attach the ref to the element that may truncate. */
 	children: (textRef: RefObject<HTMLSpanElement>) => ReactElement;
 }
@@ -22,28 +16,25 @@ function TruncatedTooltip({
 	children,
 }: TruncatedTooltipProps): JSX.Element {
 	const textRef = useRef<HTMLSpanElement>(null);
-	const [truncated, setTruncated] = useState(false);
+	const [open, setOpen] = useState(false);

-	const measure = (): void => {
+	const handleOpenChange = (next: boolean): void => {
 		const el = textRef.current;
-		setTruncated(!!el && el.scrollWidth > el.clientWidth);
+		setOpen(next && !!el && el.scrollWidth > el.clientWidth);
 	};

-	const trigger = children(textRef);
-
 	return (
-		<Tooltip title={truncated ? title : undefined} side={side}>
-			{cloneElement(trigger, {
-				onPointerEnter: (event: PointerEvent<HTMLElement>): void => {
-					measure();
-					trigger.props.onPointerEnter?.(event);
-				},
-				onFocus: (event: FocusEvent<HTMLElement>): void => {
-					measure();
-					trigger.props.onFocus?.(event);
-				},
-			})}
-		</Tooltip>
+		<TooltipSimple
+			title={title}
+			side={side}
+			arrow
+			delayDuration={300}
+			open={open}
+			onOpenChange={handleOpenChange}
+			tooltipContentProps={{ className: styles.tooltipContent }}
+		>
+			{children(textRef)}
+		</TooltipSimple>
 	);
 }

--- a/frontend/src/components/NewSelect/test/CustomMultiSelect.tagTooltip.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomMultiSelect.tagTooltip.test.tsx
@@ -1,5 +1,6 @@
 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';

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

 function renderSelect(): void {
 	render(
-		<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}`}
+			/>
+		</TooltipProvider>,
 	);
 }

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

 import TruncatedTooltip from '../TruncatedTooltip';

@@ -14,13 +15,15 @@ function renderRow(scrollWidth: number, clientWidth: number): void {
 		.mockReturnValue(clientWidth);

 	render(
-		<TruncatedTooltip title={LABEL}>
-			{(textRef): JSX.Element => (
-				<div data-testid="row">
-					<span ref={textRef}>{LABEL}</span>
-				</div>
-			)}
-		</TruncatedTooltip>,
+		<TooltipProvider>
+			<TruncatedTooltip title={LABEL}>
+				{(textRef): JSX.Element => (
+					<div data-testid="row">
+						<span ref={textRef}>{LABEL}</span>
+					</div>
+				)}
+			</TruncatedTooltip>
+		</TooltipProvider>,
 	);
 }

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

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

-		.option-content {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			width: 100%;
+			// 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-label-text {
+			// @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 {
 				flex: 1 1 auto;
 				min-width: 0;
-				margin-bottom: 0;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
 			}

-			.option-badge {
+			.all-option-text {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+			}
+
+			.option-content {
+				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;
-				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;
+				line-height: 1;
+				box-shadow: none;
 			}

-			.option-badge {
-				display: none;
-			}
-		}
-
-		.option-content:hover {
 			.only-btn {
-				display: flex;
+				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 {
-				display: none;
+				padding: 0 6px;
+				border: none;
+				background-color: transparent;
+				color: var(--l2-foreground);
+				cursor: pointer;
 			}

-			.option-badge {
-				display: none;
+			// 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;
+				}
 			}
 		}
 	}
--- a/frontend/src/components/OrderBy/ListViewOrderBy.tsx
+++ b/frontend/src/components/OrderBy/ListViewOrderBy.tsx
@@ -104,6 +104,7 @@ function ListViewOrderBy({

 	return (
 		<Select
+			data-testid="list-view-order-by"
 			showSearch
 			value={value}
 			onChange={onChange}
--- a/frontend/src/components/OverflowValuesTooltip/OverflowValuesTooltip.tsx
+++ b/frontend/src/components/OverflowValuesTooltip/OverflowValuesTooltip.tsx
@@ -1,5 +1,7 @@
-import { Tooltip } from '@signozhq/ui/tooltip';
-import TooltipScrollArea from 'components/TooltipScrollArea/TooltipScrollArea';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import TooltipScrollArea, {
+	TOOLTIP_SCROLL_CONTENT_CLASS,
+} from 'components/TooltipScrollArea/TooltipScrollArea';

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

@@ -17,8 +19,10 @@ function OverflowValuesTooltip({
 	values,
 }: OverflowValuesTooltipProps): JSX.Element {
 	return (
-		<Tooltip
+		<TooltipSimple
 			side="top"
+			delayDuration={300}
+			tooltipContentProps={{ className: TOOLTIP_SCROLL_CONTENT_CLASS }}
 			title={
 				<TooltipScrollArea>
 					<ul className={styles.overflowValues}>
@@ -32,7 +36,7 @@ function OverflowValuesTooltip({
 			{/* rc-select copies this node into the overflow wrapper's `title`; an empty
 			    one keeps the browser's own "[object Object]" tooltip out of the way. */}
 			<span title="">+{values.length}</span>
-		</Tooltip>
+		</TooltipSimple>
 	);
 }

--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -513,4 +513,8 @@
 			color: var(--l2-foreground) !important;
 		}
 	}
+
+	.query-actions-dropdown {
+		cursor: pointer;
+	}
 }
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
@@ -4,11 +4,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { getBuilderVariant } from 'lib/query/queryMode';
-import {
-	BuilderVariant,
-	IBuilderTraceOperator,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

 import { QueryBuilderField } from './queryBuilderFields.types';
@@ -64,16 +60,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[config],
 	);

-	const isAIQuery =
-		getBuilderVariant(currentQuery.builder) === BuilderVariant.AI;
-
 	useEffect(() => {
 		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
-			// AI queries are traces-only; BAR must not force metrics on them.
-			if (isAIQuery) {
-				handleSetConfig(newPanelType, DataSource.TRACES);
-				return;
-			}
 			if (newPanelType === PANEL_TYPES.BAR) {
 				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
 				return;
@@ -86,20 +74,15 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		initialDataSource,
 		currentDataSource,
 		newPanelType,
-		isAIQuery,
 	]);

 	useEffect(() => {
 		// always clear on mount and unmount to avoid stale data
-		// hosts opting into savePreviousQuery own the clear, as they may remount this builder mid-edit
-		if (savePreviousQuery) {
-			return undefined;
-		}
 		clearPreviousQuery();
 		return (): void => {
 			clearPreviousQuery();
 		};
-	}, [savePreviousQuery]);
+	}, []);

 	const resolvedConfig = useMemo(
 		() =>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx
@@ -10,13 +10,6 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';

 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
-import {
-	QueryBuilderField,
-	type QueryBuilderFieldsConfig,
-} from '../../queryBuilderFields.types';
-import { resolveQueryBuilderField } from '../../queryBuilderFields.utils';
-
-import { BUILT_IN_PLACEHOLDERS } from './constants';

 import './MetricsAggregateSection.styles.scss';

@@ -25,18 +18,15 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 	index,
 	version,
 	panelType,
-	fieldsConfig,
+	signalSource = '',
 }: {
 	query: IBuilderQuery;
 	index: number;
 	version: string;
 	panelType: PANEL_TYPES | null;
-	fieldsConfig?: QueryBuilderFieldsConfig;
+	signalSource: string;
 }): JSX.Element {
 	const { setAggregationOptions } = useQueryBuilderV2Context();
-	const placeholderOf = (key: keyof typeof BUILT_IN_PLACEHOLDERS): string =>
-		resolveQueryBuilderField(key, fieldsConfig).placeholder ??
-		BUILT_IN_PLACEHOLDERS[key];
 	const {
 		operators,
 		spaceAggregationOptions,
@@ -164,7 +154,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										<InputWithLabel
 											onChange={handleChangeAggregateEvery}
 											label="Seconds"
-											placeholder={placeholderOf(QueryBuilderField.StepInterval)}
+											placeholder="Auto"
 											labelAfter
 											initialValue={query?.stepInterval ?? null}
 										/>
@@ -216,7 +206,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										disabled={!queryAggregation.metricName}
 										query={query}
 										onChange={handleChangeGroupByKeys}
-										placeholder={placeholderOf(QueryBuilderField.GroupBy)}
+										signalSource={signalSource}
 									/>
 								</div>
 							</div>
@@ -253,7 +243,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 									disabled={!queryAggregation.metricName}
 									query={query}
 									onChange={handleChangeGroupByKeys}
-									placeholder={placeholderOf(QueryBuilderField.GroupBy)}
+									signalSource={signalSource}
 								/>
 							</div>
 						</div>
@@ -287,7 +277,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 								<InputWithLabel
 									onChange={handleChangeAggregateEvery}
 									label="Seconds"
-									placeholder={placeholderOf(QueryBuilderField.StepInterval)}
+									placeholder="Auto"
 									labelAfter
 									initialValue={query?.stepInterval ?? null}
 									className="histogram-every-input"
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/constants.ts
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/constants.ts
@@ -1,9 +0,0 @@
-import { QueryBuilderField } from '../../queryBuilderFields.types';
-import { STEP_INTERVAL_PLACEHOLDER } from '../../queryBuilderFields.utils';
-import { ADD_ON_DEFINITIONS } from '../QueryAddOns/constants';
-
-export const BUILT_IN_PLACEHOLDERS = {
-	[QueryBuilderField.StepInterval]: STEP_INTERVAL_PLACEHOLDER,
-	[QueryBuilderField.GroupBy]:
-		ADD_ON_DEFINITIONS[QueryBuilderField.GroupBy].placeholder,
-} as const;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss
@@ -4,28 +4,27 @@
 * `--query-builder-v2-*` surface the selects above this row already paint on.
 */
 .bucketOptions {
-	--toggle-group-border-radius: var(--radius-1);
-	--toggle-group-button-block-size: calc(
-		36px - 2 * var(--toggle-group-border-width, 1px)
-	);
-	--toggle-group-button-font-size: 13px;
-	--toggle-group-button-padding-inline: var(--spacing-6);
+	--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-outlined-background: var(
+	--toggle-group-secondary-bg: var(
 		--query-builder-v2-toggle-group-background-color,
 		var(--l1-background-hover)
 	);
-	--toggle-group-border: var(
+	--toggle-group-secondary-border: var(
 		--query-builder-v2-toggle-group-border-color,
 		var(--l2-border)
 	);
-	--toggle-group-secondary-outlined-background-active: var(
+	--toggle-group-secondary-active-bg: var(
 		--query-builder-v2-toggle-group-active-background-color,
 		var(--l1-background)
 	);
-	--toggle-group-secondary-outlined-background-hover: var(
+	--toggle-group-secondary-bg-hover: var(
 		--query-builder-v2-toggle-group-background-color-hover,
 		var(--l2-background)
 	);
@@ -56,10 +55,6 @@
 	flex-wrap: wrap;
 	align-items: center;
 	gap: var(--spacing-8);
-
-	> [data-slot='button'] {
-		margin-left: auto;
-	}
 }

 /** One label paired with its control, at the same 10px rhythm as the aggregate rows. */
@@ -139,3 +134,9 @@
 	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
@@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import { InputNumber } from '@signozhq/ui/input-number';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { ChevronUp, Info } from '@signozhq/icons';
 import {
 	Querybuildertypesv5BucketOptionsDTO,
@@ -177,10 +177,7 @@ function BucketOptions({
 			<div className={styles.controls}>
 				<div className={styles.field}>
 					<span className={styles.label}>Bucket by</span>
-					<ToggleGroup
-						variant="outlined"
-						color="secondary"
-						size="sm"
+					<ToggleGroupSimple
 						type="single"
 						value={kind}
 						items={kindItems}
@@ -192,10 +189,7 @@ function BucketOptions({
 				{kind === Querybuildertypesv5BucketsKindDTO.log && (
 					<div className={styles.field}>
 						<span className={styles.label}>Scale</span>
-						<ToggleGroup
-							variant="outlined"
-							color="secondary"
-							size="sm"
+						<ToggleGroupSimple
 							type="single"
 							value={String(logScale)}
 							items={scaleItems}
@@ -239,14 +233,13 @@ function BucketOptions({
 					<Button
 						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Close bucket options"
+						className={styles.closeButton}
+						prefix={<ChevronUp size={16} />}
 						onClick={onClose}
-						testId="bucket-options-close"
-					>
-						<ChevronUp size={16} />
-					</Button>
+						data-testid="bucket-options-close"
+					/>
 				)}
 			</div>

--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx
@@ -88,12 +88,10 @@ function HavingFilter({
 	onClose,
 	onChange,
 	queryData,
-	placeholder = 'Type Having query like count() > 10 ...',
 }: {
 	onClose: () => void;
 	onChange: (value: string) => void;
 	queryData: IBuilderQuery;
-	placeholder?: string;
 }): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { getAggregationOptions } = useQueryBuilderV2Context();
@@ -347,7 +345,7 @@ function HavingFilter({
 							},
 						]),
 					]}
-					placeholder={placeholder}
+					placeholder="Type Having query like count() > 10 ..."
 					basicSetup={{
 						lineNumbers: false,
 						autocompletion: true,
--- 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-outlined-background: var(
+	--toggle-group-secondary-bg: var(
 		--query-builder-v2-toggle-group-background-color,
 		var(--l1-background-hover)
 	);
-	--toggle-group-border: var(
+	--toggle-group-secondary-border: var(
 		--query-builder-v2-toggle-group-border-color,
 		var(--l2-border)
 	);
-	--toggle-group-secondary-outlined-background-active: var(
+	--toggle-group-secondary-active-bg: var(
 		--query-builder-v2-toggle-group-active-background-color,
 		var(--l1-background)
 	);
-	--toggle-group-secondary-outlined-background-hover: var(
+	--toggle-group-secondary-bg-hover: var(
 		--query-builder-v2-toggle-group-background-color-hover,
 		var(--l2-background)
 	);
@@ -36,6 +36,51 @@
 	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;
@@ -298,29 +343,8 @@
 			font-size: 12px !important;
 		}

-		// Not select search inputs: they would grow the select past 36px.
-		.input-with-label input {
+		input {
 			min-height: 36px;
 		}
-
-		.input-with-label,
-		.periscope-input-with-label {
-			min-height: 36px;
-
-			.label {
-				min-width: 80px;
-			}
-
-			// `ghost` strips the border.
-			.close-btn.periscope-btn {
-				border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-				background: var(--input-with-label-background-color, var(--l2-background));
-			}
-		}
-
-		.periscope-input-with-label .input .ant-select-selection-placeholder {
-			color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-			font-size: 12px;
-		}
 	}
 }
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -1,17 +1,22 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
-import { Tooltip, TooltipProvider } from '@signozhq/ui/tooltip';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ATTRIBUTE_TYPES, 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 { ChevronUp } from '@signozhq/icons';
+import {
+	BarChart,
+	ChevronUp,
+	ExternalLink,
+	Grid3X3,
+	ScrollText,
+} from '@signozhq/icons';
 import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
@@ -29,21 +34,162 @@ import {

 import BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
-import {
-	ADD_ON_DEFINITIONS,
-	ADD_ON_TOOLTIP_DELAY_MS,
-	BASE_ADD_ONS,
-	BUCKET_OPTIONS,
-	HISTOGRAM_ATTRIBUTE_TYPES,
-	type InputAddOnField,
-	REDUCE_TO,
-} from './constants';
-import TooltipContent from './TooltipContent';
-import type { AddOn } from './types';
-import { buildDefaultLegendFromGroupBy, hasValue } from './utils';
+import { buildDefaultLegendFromGroupBy } from './utils';

 import './QueryAddOns.styles.scss';

+interface AddOn {
+	icon: React.ReactNode;
+	label: string;
+	key: QueryBuilderField;
+	description?: string;
+	docLink?: string;
+}
+
+/** Fields the add-on bar does not own: each has its own control elsewhere in the query. */
+type NonAddOnField =
+	| QueryBuilderField.Aggregation
+	| QueryBuilderField.StepInterval
+	| QueryBuilderField.Functions
+	| QueryBuilderField.Formula
+	| QueryBuilderField.AdditionalQueries;
+
+// Omit rather than Partial, so a field added to the enum has to be placed on one side.
+const ADD_ONS_KEYS_TO_QUERY_PATH: Omit<
+	Record<QueryBuilderField, string>,
+	NonAddOnField
+> = {
+	[QueryBuilderField.GroupBy]: 'groupBy',
+	[QueryBuilderField.Having]: 'having.expression',
+	[QueryBuilderField.OrderBy]: 'orderBy',
+	[QueryBuilderField.Limit]: 'limit',
+	[QueryBuilderField.Legend]: 'legend',
+	[QueryBuilderField.ReduceTo]: 'reduceTo',
+	[QueryBuilderField.BucketOptions]: 'bucketOptions',
+};
+
+const ADD_ONS: AddOn[] = [
+	{
+		icon: <BarChart size={14} />,
+		label: 'Group By',
+		key: QueryBuilderField.GroupBy,
+		description:
+			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
+		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Having',
+		key: QueryBuilderField.Having,
+		description:
+			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
+		docLink:
+			'https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Order By',
+		key: QueryBuilderField.OrderBy,
+		description:
+			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
+		docLink:
+			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Limit',
+		key: QueryBuilderField.Limit,
+		description:
+			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
+		docLink:
+			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Legend format',
+		key: QueryBuilderField.Legend,
+		description:
+			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
+		docLink:
+			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
+	},
+];
+
+const REDUCE_TO: AddOn = {
+	icon: <ScrollText size={14} />,
+	label: 'Reduce to',
+	key: QueryBuilderField.ReduceTo,
+	description:
+		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
+	docLink:
+		'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);
+
+// Custom tooltip content component
+function TooltipContent({
+	label,
+	description,
+	docLink,
+}: {
+	label: string;
+	description?: string;
+	docLink?: string;
+}): JSX.Element {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				gap: '8px',
+				maxWidth: '300px',
+			}}
+		>
+			<strong style={{ fontSize: '14px' }}>{label}</strong>
+			{description && (
+				<span style={{ fontSize: '12px', lineHeight: '1.5' }}>{description}</span>
+			)}
+			{docLink && (
+				<a
+					href={docLink}
+					target="_blank"
+					rel="noopener noreferrer"
+					onClick={(e): void => e.stopPropagation()}
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: '4px',
+						color: '#4096ff',
+						fontSize: '12px',
+						marginTop: '4px',
+					}}
+				>
+					Learn more
+					<ExternalLink size={12} />
+				</a>
+			)}
+		</div>
+	);
+}
+
 function QueryAddOns({
 	query,
 	version,
@@ -81,16 +227,12 @@ function QueryAddOns({
 		let addOns: AddOn[];

 		if (panelType === PANEL_TYPES.VALUE) {
-			addOns = BASE_ADD_ONS.filter(
-				(addOn) => addOn.key === QueryBuilderField.Legend,
-			);
+			addOns = ADD_ONS.filter((addOn) => addOn.key === QueryBuilderField.Legend);
 		} else if (query.dataSource === DataSource.METRICS) {
 			// Group by for metrics is offered by MetricsAggregateSection instead.
-			addOns = BASE_ADD_ONS.filter(
-				(addOn) => addOn.key !== QueryBuilderField.GroupBy,
-			);
+			addOns = ADD_ONS.filter((addOn) => addOn.key !== QueryBuilderField.GroupBy);
 		} else {
-			addOns = [...BASE_ADD_ONS];
+			addOns = [...ADD_ONS];
 		}

 		if (showReduceTo) {
@@ -146,12 +288,6 @@ function QueryAddOns({
 		[resolvedFields],
 	);

-	const placeholderOf = useCallback(
-		(key: InputAddOnField): string =>
-			resolvedFields.get(key)?.placeholder ?? ADD_ON_DEFINITIONS[key].placeholder,
-		[resolvedFields],
-	);
-
 	const isDisabled = useCallback(
 		(key: QueryBuilderField): boolean =>
 			Boolean(resolvedFields.get(key)?.disabled),
@@ -170,6 +306,12 @@ function QueryAddOns({
 		if (!initializedRef.current || hasAvailabilityItemsChanged) {
 			initializedRef.current = true;

+			const activeAddOnKeys = new Set(
+				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
+					.filter(([, path]) => hasValue(get(query, path)))
+					.map(([key]) => key as QueryBuilderField),
+			);
+
 			// Initial seeding from query values on mount. A disabled field never opens.
 			setSelectedViews(
 				offeredAddOns.filter((addOn) => {
@@ -177,7 +319,7 @@ function QueryAddOns({

 					return (
 						resolved?.pinned ||
-						(hasValue(get(query, addOn.queryPath)) && !resolved?.disabled)
+						(activeAddOnKeys.has(addOn.key) && !resolved?.disabled)
 					);
 				}),
 			);
@@ -300,236 +442,238 @@ function QueryAddOns({
 	);

 	return (
-		<TooltipProvider delay={ADD_ON_TOOLTIP_DELAY_MS}>
-			<div className="query-add-ons" data-testid="query-add-ons">
-				{selectedViews.length > 0 && (
-					<div className="selected-add-ons-content">
-						{selectedViews.find((view) => view.key === QueryBuilderField.GroupBy) && (
-							<div className="add-on-content" data-testid="group-by-content">
-								<div className="periscope-input-with-label">
-									<Tooltip
-										title={
-											<TooltipContent
-												label="Group By"
-												description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
-												docLink="https://signoz.io/docs/querying/aggregation-grouping/#grouping"
-											/>
-										}
-									>
-										<div className="label" style={{ cursor: 'help' }}>
-											Group By
-										</div>
-									</Tooltip>
-									<div className="input">
-										<GroupByFilter
-											disabled={
-												query.dataSource === DataSource.METRICS &&
-												!(query.aggregations?.[0] as MetricAggregation)?.metricName
-											}
-											query={query}
-											onChange={handleChangeGroupByKeys}
-											placeholder={placeholderOf(QueryBuilderField.GroupBy)}
-										/>
-									</div>
-									{!isPinned(QueryBuilderField.GroupBy) && (
-										<Button
-											className="close-btn periscope-btn ghost"
-											icon={<ChevronUp size={16} />}
-											onClick={(): void => handleRemoveView(QueryBuilderField.GroupBy)}
-										/>
-									)}
-								</div>
-							</div>
-						)}
-						{selectedViews.find((view) => view.key === QueryBuilderField.Having) && (
-							<div className="add-on-content" data-testid="having-content">
-								<div className="periscope-input-with-label">
-									<Tooltip
-										title={
-											<TooltipContent
-												label="Having"
-												description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
-												docLink="https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having"
-											/>
-										}
-									>
-										<div className="label" style={{ cursor: 'help' }}>
-											Having
-										</div>
-									</Tooltip>
-									<div className="input">
-										<HavingFilter
-											onClose={(): void => handleRemoveView(QueryBuilderField.Having)}
-											onChange={handleChangeHaving}
-											queryData={query}
-											placeholder={placeholderOf(QueryBuilderField.Having)}
-										/>
-									</div>
-								</div>
-							</div>
-						)}
-						{selectedViews.find((view) => view.key === QueryBuilderField.Limit) && (
-							<div className="add-on-content" data-testid="limit-content">
-								<InputWithLabel
-									label="Limit"
-									type="number"
-									onChange={handleChangeLimit}
-									initialValue={query?.limit ?? undefined}
-									placeholder={placeholderOf(QueryBuilderField.Limit)}
-									onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
-									closeIcon={<ChevronUp size={16} />}
-								/>
-							</div>
-						)}
-						{selectedViews.find((view) => view.key === QueryBuilderField.OrderBy) && (
-							<div className="add-on-content" data-testid="order-by-content">
-								<div className="periscope-input-with-label">
-									<Tooltip
-										title={
-											<TooltipContent
-												label="Order By"
-												description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
-												docLink="https://signoz.io/docs/querying/result-manipulation/#sorting--limiting"
-											/>
-										}
-									>
-										<div className="label" style={{ cursor: 'help' }}>
-											Order By
-										</div>
-									</Tooltip>
-									<div className="input">
-										<OrderByFilter
-											entityVersion={version}
-											query={query}
-											onChange={handleChangeOrderByKeys}
-											isRawQuery={isRawQuery}
-											isNewQueryV2
-											placeholder={placeholderOf(QueryBuilderField.OrderBy)}
-										/>
-									</div>
-									{!isPinned(QueryBuilderField.OrderBy) && (
-										<Button
-											className="close-btn periscope-btn ghost"
-											icon={<ChevronUp size={16} />}
-											onClick={(): void => handleRemoveView(QueryBuilderField.OrderBy)}
-										/>
-									)}
-								</div>
-							</div>
-						)}
-
-						{selectedViews.find((view) => view.key === QueryBuilderField.ReduceTo) &&
-							showReduceTo && (
-								<div className="add-on-content" data-testid="reduce-to-content">
-									<div className="periscope-input-with-label">
-										<Tooltip
-											title={
-												<TooltipContent
-													label="Reduce to"
-													description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-													docLink="https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation"
-												/>
-											}
-										>
-											<div className="label" style={{ cursor: 'help' }}>
-												Reduce to
-											</div>
-										</Tooltip>
-										<div className="input">
-											<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
-										</div>
-
-										{!isPinned(QueryBuilderField.ReduceTo) && (
-											<Button
-												className="close-btn periscope-btn ghost"
-												icon={<ChevronUp size={16} />}
-												onClick={(): void => handleRemoveView(QueryBuilderField.ReduceTo)}
-											/>
-										)}
-									</div>
-								</div>
-							)}
-
-						{selectedViews.find((view) => view.key === QueryBuilderField.Legend) && (
-							<div className="add-on-content" data-testid="legend-format-content">
-								<InputWithLabel
-									label="Legend format"
-									placeholder={placeholderOf(QueryBuilderField.Legend)}
-									onChange={handleChangeQueryLegend}
-									initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
-									onClose={(): void => handleRemoveView(QueryBuilderField.Legend)}
-									closeIcon={<ChevronUp size={16} />}
-								/>
-							</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>
-				)}
-
-				<ToggleGroup
-					variant="outlined"
-					color="secondary"
-					size="sm"
-					type="multiple"
-					allowClear
-					value={selectedViews.map((view) => view.key)}
-					onChange={(newKeys: string[]): void => {
-						const oldKeys: string[] = selectedViews.map((view) => view.key);
-						const toggledKey =
-							newKeys.find((key) => !oldKeys.includes(key)) ??
-							oldKeys.find((key) => !newKeys.includes(key));
-						if (!toggledKey) {
-							return;
-						}
-						const clickedAddOn = togglableAddOns.find((a) => a.key === toggledKey);
-						if (clickedAddOn) {
-							handleOptionClick(clickedAddOn);
-						}
-					}}
-					items={togglableAddOns.map((addOn) => {
-						const resolved = resolvedFields.get(addOn.key);
-
-						return {
-							value: addOn.key,
-							label: (
+		<div className="query-add-ons" data-testid="query-add-ons">
+			{selectedViews.length > 0 && (
+				<div className="selected-add-ons-content">
+					{selectedViews.find((view) => view.key === QueryBuilderField.GroupBy) && (
+						<div className="add-on-content" data-testid="group-by-content">
+							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
 										<TooltipContent
-											label={addOn.label}
-											description={resolved?.reason ?? addOn.description}
-											docLink={resolved?.disabled ? undefined : addOn.docLink}
+											label="Group By"
+											description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
+											docLink="https://signoz.io/docs/querying/aggregation-grouping/#grouping"
 										/>
 									}
+									placement="top"
+									mouseEnterDelay={0.5}
 								>
-									<span
-										className={cx('add-on-tab-title', {
-											'add-on-tab-title--disabled': resolved?.disabled,
-										})}
-										aria-disabled={resolved?.disabled}
-										data-testid={`query-add-on-${addOn.key}`}
-									>
-										{addOn.icon}
-										{addOn.label}
-									</span>
+									<div className="label" style={{ cursor: 'help' }}>
+										Group By
+									</div>
 								</Tooltip>
-							),
-						};
-					})}
-				/>
-			</div>
-		</TooltipProvider>
+								<div className="input">
+									<GroupByFilter
+										disabled={
+											query.dataSource === DataSource.METRICS &&
+											!(query.aggregations?.[0] as MetricAggregation)?.metricName
+										}
+										query={query}
+										onChange={handleChangeGroupByKeys}
+									/>
+								</div>
+								{!isPinned(QueryBuilderField.GroupBy) && (
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
+										onClick={(): void => handleRemoveView(QueryBuilderField.GroupBy)}
+									/>
+								)}
+							</div>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === QueryBuilderField.Having) && (
+						<div className="add-on-content" data-testid="having-content">
+							<div className="periscope-input-with-label">
+								<Tooltip
+									title={
+										<TooltipContent
+											label="Having"
+											description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
+											docLink="https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having"
+										/>
+									}
+									placement="top"
+									mouseEnterDelay={0.5}
+								>
+									<div className="label" style={{ cursor: 'help' }}>
+										Having
+									</div>
+								</Tooltip>
+								<div className="input">
+									<HavingFilter
+										onClose={(): void => handleRemoveView(QueryBuilderField.Having)}
+										onChange={handleChangeHaving}
+										queryData={query}
+									/>
+								</div>
+							</div>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === QueryBuilderField.Limit) && (
+						<div className="add-on-content" data-testid="limit-content">
+							<InputWithLabel
+								label="Limit"
+								type="number"
+								onChange={handleChangeLimit}
+								initialValue={query?.limit ?? undefined}
+								placeholder="Enter limit"
+								onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
+								closeIcon={<ChevronUp size={16} />}
+							/>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === QueryBuilderField.OrderBy) && (
+						<div className="add-on-content" data-testid="order-by-content">
+							<div className="periscope-input-with-label">
+								<Tooltip
+									title={
+										<TooltipContent
+											label="Order By"
+											description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
+											docLink="https://signoz.io/docs/querying/result-manipulation/#sorting--limiting"
+										/>
+									}
+									placement="top"
+									mouseEnterDelay={0.5}
+								>
+									<div className="label" style={{ cursor: 'help' }}>
+										Order By
+									</div>
+								</Tooltip>
+								<div className="input">
+									<OrderByFilter
+										entityVersion={version}
+										query={query}
+										onChange={handleChangeOrderByKeys}
+										isRawQuery={isRawQuery}
+										isNewQueryV2
+									/>
+								</div>
+								{!isPinned(QueryBuilderField.OrderBy) && (
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
+										onClick={(): void => handleRemoveView(QueryBuilderField.OrderBy)}
+									/>
+								)}
+							</div>
+						</div>
+					)}
+
+					{selectedViews.find((view) => view.key === QueryBuilderField.ReduceTo) &&
+						showReduceTo && (
+							<div className="add-on-content" data-testid="reduce-to-content">
+								<div className="periscope-input-with-label">
+									<Tooltip
+										title={
+											<TooltipContent
+												label="Reduce to"
+												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation"
+											/>
+										}
+										placement="top"
+										mouseEnterDelay={0.5}
+									>
+										<div className="label" style={{ cursor: 'help' }}>
+											Reduce to
+										</div>
+									</Tooltip>
+									<div className="input">
+										<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
+									</div>
+
+									{!isPinned(QueryBuilderField.ReduceTo) && (
+										<Button
+											className="close-btn periscope-btn ghost"
+											icon={<ChevronUp size={16} />}
+											onClick={(): void => handleRemoveView(QueryBuilderField.ReduceTo)}
+										/>
+									)}
+								</div>
+							</div>
+						)}
+
+					{selectedViews.find((view) => view.key === QueryBuilderField.Legend) && (
+						<div className="add-on-content" data-testid="legend-format-content">
+							<InputWithLabel
+								label="Legend format"
+								placeholder="Write legend format"
+								onChange={handleChangeQueryLegend}
+								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
+								onClose={(): void => handleRemoveView(QueryBuilderField.Legend)}
+								closeIcon={<ChevronUp size={16} />}
+							/>
+						</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
+				type="multiple"
+				className="add-ons-tabs"
+				value={selectedViews.map((view) => view.key)}
+				onChange={(newKeys: string[]): void => {
+					const oldKeys: string[] = selectedViews.map((view) => view.key);
+					const toggledKey =
+						newKeys.find((key) => !oldKeys.includes(key)) ??
+						oldKeys.find((key) => !newKeys.includes(key));
+					if (!toggledKey) {
+						return;
+					}
+					const clickedAddOn = togglableAddOns.find((a) => a.key === toggledKey);
+					if (clickedAddOn) {
+						handleOptionClick(clickedAddOn);
+					}
+				}}
+				items={togglableAddOns.map((addOn) => {
+					const resolved = resolvedFields.get(addOn.key);
+
+					return {
+						value: addOn.key,
+						label: (
+							<Tooltip
+								title={
+									<TooltipContent
+										label={addOn.label}
+										description={resolved?.reason ?? addOn.description}
+										docLink={resolved?.disabled ? undefined : addOn.docLink}
+									/>
+								}
+								placement="top"
+								mouseEnterDelay={0.5}
+							>
+								<span
+									className={cx('add-on-tab-title', {
+										'add-on-tab-title--disabled': resolved?.disabled,
+									})}
+									aria-disabled={resolved?.disabled}
+									data-testid={`query-add-on-${addOn.key}`}
+								>
+									{addOn.icon}
+									{addOn.label}
+								</span>
+							</Tooltip>
+						),
+					};
+				})}
+			/>
+		</div>
 	);
 }

--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/TooltipContent.module.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/TooltipContent.module.scss
@@ -1,24 +0,0 @@
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	max-width: 300px;
-}
-
-.label {
-	font-size: var(--font-size-sm);
-}
-
-.description {
-	font-size: var(--font-size-xs);
-	line-height: var(--line-height-normal);
-}
-
-.docLink {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	margin-top: var(--spacing-2);
-	color: var(--accent-primary);
-	font-size: var(--font-size-xs);
-}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/TooltipContent.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/TooltipContent.tsx
@@ -1,33 +0,0 @@
-import { ExternalLink } from '@signozhq/icons';
-
-import styles from './TooltipContent.module.scss';
-
-// Custom tooltip content component
-export default function TooltipContent({
-	label,
-	description,
-	docLink,
-}: {
-	label: string;
-	description?: string;
-	docLink?: string;
-}): JSX.Element {
-	return (
-		<div className={styles.content}>
-			<strong className={styles.label}>{label}</strong>
-			{description && <span className={styles.description}>{description}</span>}
-			{docLink && (
-				<a
-					href={docLink}
-					target="_blank"
-					rel="noopener noreferrer"
-					onClick={(e): void => e.stopPropagation()}
-					className={styles.docLink}
-				>
-					Learn more
-					<ExternalLink size={12} />
-				</a>
-			)}
-		</div>
-	);
-}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/constants.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/constants.tsx
@@ -1,117 +0,0 @@
-import { BarChart, Grid3X3, ScrollText } from '@signozhq/icons';
-import { ATTRIBUTE_TYPES } from 'constants/queryBuilder';
-
-import { QueryBuilderField } from '../../queryBuilderFields.types';
-
-import type { AddOn, AddOnDefinition, AddOnField } from './types';
-
-export const ADD_ON_TOOLTIP_DELAY_MS = 500;
-
-// A Record, so a field added to the enum has to be placed here or in `NonAddOnField`.
-export const ADD_ON_DEFINITIONS = {
-	[QueryBuilderField.GroupBy]: {
-		input: true,
-		icon: <BarChart size={14} />,
-		label: 'Group By',
-		queryPath: 'groupBy',
-		placeholder: 'Everything (no breakdown)',
-		description:
-			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
-		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
-	},
-	[QueryBuilderField.Having]: {
-		input: true,
-		icon: <ScrollText size={14} />,
-		label: 'Having',
-		queryPath: 'having.expression',
-		placeholder: 'Type Having query like count() > 10 ...',
-		description:
-			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
-		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having',
-	},
-	[QueryBuilderField.OrderBy]: {
-		input: true,
-		icon: <ScrollText size={14} />,
-		label: 'Order By',
-		queryPath: 'orderBy',
-		placeholder: 'Select fields to order by',
-		description:
-			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
-		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
-	},
-	[QueryBuilderField.Limit]: {
-		input: true,
-		icon: <ScrollText size={14} />,
-		label: 'Limit',
-		queryPath: 'limit',
-		placeholder: 'Enter limit',
-		description:
-			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
-		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
-	},
-	[QueryBuilderField.Legend]: {
-		input: true,
-		icon: <ScrollText size={14} />,
-		label: 'Legend format',
-		queryPath: 'legend',
-		placeholder: 'Write legend format',
-		description:
-			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
-		docLink:
-			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
-	},
-	[QueryBuilderField.ReduceTo]: {
-		input: false,
-		icon: <ScrollText size={14} />,
-		label: 'Reduce to',
-		queryPath: 'reduceTo',
-		description:
-			'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
-		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
-	},
-	[QueryBuilderField.BucketOptions]: {
-		input: false,
-		icon: <Grid3X3 size={14} />,
-		label: 'Bucket by',
-		queryPath: '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/',
-	},
-} as const satisfies Record<AddOnField, AddOnDefinition>;
-
-export type InputAddOnField = {
-	[K in AddOnField]: (typeof ADD_ON_DEFINITIONS)[K] extends { input: true }
-		? K
-		: never;
-}[AddOnField];
-
-const toAddOn = (key: AddOnField): AddOn => ({
-	key,
-	...ADD_ON_DEFINITIONS[key],
-});
-
-export const BASE_ADD_ONS = (
-	[
-		QueryBuilderField.GroupBy,
-		QueryBuilderField.Having,
-		QueryBuilderField.OrderBy,
-		QueryBuilderField.Limit,
-		QueryBuilderField.Legend,
-	] as const satisfies readonly AddOnField[]
-).map(toAddOn);
-
-export const REDUCE_TO = toAddOn(QueryBuilderField.ReduceTo);
-
-// 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.
-export const HISTOGRAM_ATTRIBUTE_TYPES = new Set<string>([
-	ATTRIBUTE_TYPES.HISTOGRAM,
-	ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM,
-]);
-
-export const BUCKET_OPTIONS = toAddOn(QueryBuilderField.BucketOptions);
--- a/Show More
+++ b/Show More