Merge branch 'main' into fix/query-range-validation-gaps

Assisted-by: Claude Opus 5.5

docs/api/openapi.yml

@@ -28287,12 +28287,6 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
         "500":
           content:
             application/json:
@@ -28301,15 +28295,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:read
-        - logs-field:list
-        - traces-field:list
-        - metrics-field:list
+        - VIEWER
       - tokenizer:
-        - rule:read
-        - logs-field:list
-        - traces-field:list
-        - metrics-field:list
+        - VIEWER
       summary: Get rule history filter keys
       tags:
       - rules
@@ -28477,12 +28465,6 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
         "500":
           content:
             application/json:
@@ -28491,15 +28473,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:read
-        - logs-field:read
-        - traces-field:read
-        - metrics-field:read
+        - VIEWER
       - tokenizer:
-        - rule:read
-        - logs-field:read
-        - traces-field:read
-        - metrics-field:read
+        - VIEWER
       summary: Get rule history filter values
       tags:
       - rules
@@ -28572,9 +28548,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:read
+        - VIEWER
       - tokenizer:
-        - rule:read
+        - VIEWER
       summary: Get rule overall status timeline
       tags:
       - rules
@@ -28644,9 +28620,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:read
+        - VIEWER
       - tokenizer:
-        - rule:read
+        - VIEWER
       summary: Get rule history stats
       tags:
       - rules
@@ -28728,12 +28704,6 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
         "500":
           content:
             application/json:
@@ -28742,19 +28712,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:read
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       - tokenizer:
-        - rule:read
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       summary: Get rule history timeline
       tags:
       - rules
@@ -28819,12 +28779,6 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
         "500":
           content:
             application/json:
@@ -28833,19 +28787,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - rule:read
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       - tokenizer:
-        - rule:read
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       summary: Get top contributors to rule firing
       tags:
       - rules

frontend/.storybook/main.ts

@@ -45,8 +45,8 @@ const mockAliases = [
 	},
 	{
 		// jest: not replaced, a test asserts on the toast it fires.
-		find: /^@signozhq\/ui\/toast$/,
-		replacement: `${srcPath}/storybook/mocks/toast.mock.tsx`,
+		find: /^@signozhq\/ui\/sonner$/,
+		replacement: `${srcPath}/storybook/mocks/sonner.mock.tsx`,
 	},
 ];
 

frontend/docs/popover-migration-analysis.md

@@ -1,191 +0,0 @@
-# Popover migration analysis
-
-The new `@signozhq/ui` Popover is click-only. This note maps the current app onto that API so a later migration does not break open state, focus, or the global `.ant-popover` overrides. It does not change any call site.
-
-The component this describes lives in the design-system repo (`packages/ui/src/popover`). Storybook stories for it are `Playground`, `SaveViewForm`, `ControlledOpen`, `InsideDialog`, `MaxHeightScrolling`, and `AnchoredTypeahead`.
-
-## The API to migrate onto
-
-```tsx
-<Popover
-  nativeButton
-  side="bottom"
-  align="start"
-  trigger={<button type="button">Open</button>}
-  open={open}
-  onOpenChange={setOpen}
->
-  {content}
-</Popover>
-```
-
-| Today | New Popover |
-| --- | --- |
-| antd `children` (the trigger) | `trigger` (required) |
-| antd `content`, or Radix `<PopoverContent>` | `children` |
-| antd `trigger="click"` | the only mode; there is no `openOn` |
-| antd `trigger="hover"` | not this component; a Tooltip, or a click popover when the body is interactive |
-| `placement="bottomRight"` | `side="bottom"` `align="end"` |
-| `placement="bottomLeft"` | `side="bottom"` `align="start"` |
-| `open` / `onOpenChange` | kept; `onOpenChange` receives Base UI's reason and `details.cancel()` |
-| `defaultOpen` | removed; nothing in the app starts open |
-| `overlayClassName`, `overlayStyle`, `overlayInnerStyle`, `className` | rejected on the shell; size is `width` / `maxWidth` / `maxHeight` |
-| `getPopupContainer` | `container` |
-| `destroyTooltipOnHide` | the only behavior; the popup unmounts on close |
-| `arrow` / `showArrow` | rejected; the shell has no arrow |
-| Radix `PopoverAnchor` | `anchor`, and the trigger is still required |
-| Radix `withPortal={false}` | `container` (inside a Dialog the popup already portals into the panel) |
-| Radix `onInteractOutside` | `onOpenChange` + `details.cancel()` when `reason === 'outside-press'` |
-| `sideOffset` / `alignOffset` | not props; fixed at 4px and 0 |
-
-`nativeButton` is required. `true` when `trigger` renders a `<button>` (including `Button`). `false` for anything else.
-
-A node that renders nothing (`null`, `false`, `''`) renders the trigger alone, with no listeners and no portal.
-
-## What is in the app today
-
-Counted from `frontend/src` on this branch:
-
-- **29 files** import `Popover` from `antd`.
-- **7 files** import `Popover` from `@signozhq/ui` (the Radix wrapper this rework replaces). Those seven break as soon as the package ships, because `children` stops being the trigger.
-- **18 SCSS files** override `.ant-popover*`.
-
-antd `Dropdown` is already on `@signozhq/ui/dropdown`. antd `Tooltip` (on the order of 100 importers) is a separate migration.
-
-### antd files
-
-`src/components/CustomTimePicker/CustomTimePicker.tsx`
-`src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx`
-`src/components/ErrorPopover/ErrorPopover.tsx`
-`src/components/ExplorerCard/ExplorerCard.tsx`
-`src/components/HeaderRightSection/HeaderRightSection.tsx`
-`src/components/Logs/AddToQueryHOC.tsx`
-`src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx`
-`src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx`
-`src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx`
-`src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx`
-`src/components/TableRenderer/LabelColumn.tsx`
-`src/components/WarningPopover/WarningPopover.tsx`
-`src/container/AlertHistory/AlertPopover/AlertPopover.tsx`
-`src/container/CreateAlertV2/EvaluationSettings/EvaluationSettings.tsx`
-`src/container/Home/Home.tsx`
-`src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx`
-`src/container/MetricsExplorer/MetricDetails/AllAttributesValue.tsx`
-`src/container/MetricsExplorer/Summary/MetricNameSearch.tsx`
-`src/container/OptionsMenu/index.tsx`
-`src/container/TopNav/AutoRefreshV2/index.tsx`
-`src/pages/DashboardsListPage/components/ListHeader/ListHeader.tsx`
-`src/pages/MetricsApplication/ApDex/ApDexApplication.tsx`
-`src/pages/PublicDashboard/PublicDashboardView/PublicAutoRefresh/PublicAutoRefresh.tsx`
-`src/pages/TraceDetailsV3/SpanDetailsPanel/Events/components/AttributeWithExpandablePopover.tsx`
-`src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStepPopover.tsx`
-`src/pages/TracesFunnels/components/FunnelsList/FunnelItemPopover.tsx`
-`src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx`
-`src/periscope/components/ContextMenu/index.tsx`
-`src/periscope/components/SeeMore/SeeMore.tsx`
-
-### Existing `@signozhq/ui` popovers
-
-`src/components/ExportMenu/ExportMenu.tsx`
-`src/components/MarkdownEditor/MarkdownHelp.tsx`
-`src/components/TanStackTableView/TanStackHeaderRow.tsx`
-`src/container/AIAssistant/components/ChatInput/ChatInput.tsx`
-`src/container/ListAlertRules/components/ColumnSelector.tsx`
-`src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.tsx`
-`src/pages/DashboardsListPage/components/ViewsRail/ViewNamePopover.tsx`
-
-### SCSS that overrides `.ant-popover`
-
-`src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss`
-`src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss`
-`src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss`
-`src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss`
-`src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss`
-`src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss`
-`src/container/CreateAlertV2/EvaluationSettings/styles.scss`
-`src/container/Home/Home.styles.scss`
-`src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss`
-`src/container/MetricsExplorer/Summary/Summary.styles.scss`
-`src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss`
-`src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss`
-`src/container/WidgetCard/WidgetCard.styles.scss`
-`src/pages/DashboardsListPage/components/ListHeader/ListHeader.module.scss`
-`src/pages/TracesFunnels/TracesFunnels.styles.scss`
-`src/pages/TracesFunnels/components/FunnelsList/FunnelsList.styles.scss`
-`src/pages/TracesFunnels/components/SearchBar/SearchBar.styles.scss`
-`src/periscope/components/ContextMenu/styles.scss`
-
-Three of these are unscoped and restyle every antd popover on the page, not just their own:
-
-- `src/container/MetricsExplorer/Summary/Summary.styles.scss`
-- `src/container/CreateAlertV2/EvaluationSettings/styles.scss`
-- `src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss`
-
-Scope or delete those three before moving any nearby popover, or a migrated popup and a leftover antd popup will share rules that only one of them understands.
-
-Most of the other files repeat one recipe: padding 0, 4px radius, a 1px border, a translucent background, the arrow hidden. The new shell already has zero padding, `--radius-2`, and no arrow. Per-site size (fixed widths around 187–500px, max-width 600px, max-height 254px) becomes `width` / `maxWidth` / `maxHeight`. Do not re-apply the recipe as a `className`; the component rejects it.
-
-## What should not become this Popover
-
-**Hover descriptions.** `AddToQueryHOC`, `LabelColumn`, the three Query Builder validation popovers, `SeeMore`, and `AttributeWithExpandablePopover` open on hover. Those are Tooltips. `AttributeWithExpandablePopover` shows a value the user copies; if Tooltip cannot hold that, make it a click popover instead of keeping hover.
-
-**WarningPopover** (imported from about 10 files) is hover today and contains docs links. A tooltip cannot host those links. Either the links move out and the summary becomes a Tooltip, or the wrapper becomes a click Popover with `maxWidth` around 600.
-
-**Menus.** Funnel item and funnel step action lists, the sort lists in `ListHeader` and Traces Funnels `SearchBar`, `AutoRefreshV2` / `PublicAutoRefresh` interval lists, and `AlertPopover`'s two links are rows that close when one is picked. Those are Dropdowns. `AllAttributes` per-row actions are the same shape.
-
-**ContextMenu** (`src/periscope/components/ContextMenu/index.tsx`, imported across the dashboard drilldown) opens at chart-click coordinates. There is no trigger element. The new Popover requires `trigger`, so this stays a context menu. Do not fold the phantom span, `position: fixed` overlay, `zIndex: 10000`, or `calculatePopoverPosition.ts` into `anchor`. `anchor` is for a popover that already has a trigger and should position against something else (the typeahead input row).
-
-**Inspect charts.** `MetricsExplorer/Inspect` `GraphPopover` and `HoverPopover` are absolutely positioned cards, not antd Popover. Leave them until there is a context-menu or anchor design that matches them.
-
-**PanelStatusPopover** is a Tooltip despite the name.
-
-## What should become this Popover
-
-Click panels whose content is a form, a picker, or a composed layout:
-
-- `CustomTimePicker` — the most visible one. Controlled `open`, `container` for `getPopupContainer`, and it already unmounts on hide. It opens from both input focus and click; that logic stays in the caller, with `onOpenChange`.
-- `EvaluationSettings` / `EvaluationWindowPopover` — controlled, wide (`width` / `maxWidth`), and sitting on a global `.ant-popover` override. Migrate the override in the same change.
-- `HeaderRightSection` — three controlled forms (feedback, announcements, share).
-- `ExplorerCard` save-view form and `ViewNamePopover` — close only after the save succeeds, so `open` stays controlled. `ViewNamePopover` is already on the library and will not compile against the new props.
-- `ApDex` threshold form.
-- `Home` welcome checklist — drop the transparent-shell override; the shell is the component's.
-- `OptionsMenu`, `DownloadOptionsMenu`, `LogsFormatOptionsMenu` — click panels. `LogsFormatOptionsMenu` nests a submenu; the inner popup must be portalled, and the outer `onOpenChange` must `cancel()` an outside press that lands in the inner popup.
-- `MetricNameSearch` — controlled search panel. Scope the global padding override in `Summary.styles.scss` in the same change.
-- `AllAttributesValue` — one popover open at a time in a list. That is controlled `open` keyed by row, which the API still allows.
-- `ChatInput` context picker — already on the library; `side="top"` `align="end"` plus `width`.
-- `VariablesPopover` — already on the library. Keep `anchor` on the input row, `initialFocus={false}` so the caret stays, and `details.cancel()` when the outside press is the anchor. `withPortal={false}` becomes the default dialog `container`, not an unportalled popup.
-- `ColumnSelector`, `MarkdownHelp`, `TanStackHeaderRow`, `ExportMenu` — Radix `asChild` trigger plus content. The trigger moves to the `trigger` prop, content moves to `children`, and `className` on the shell becomes `width` / `maxWidth`.
-
-`ErrorPopover` is a thin wrapper. Re-point it at the new props and its consumer follows.
-
-## Order
-
-Before any change: screenshot every current popover, in both themes, so each call site's pattern is on record and a component swap is reviewable against it. Flag the misusages to design as they turn up — links inside hover surfaces above all. Swapping the component during migration is expected where the old call site was on the wrong one; antd call sites stay untouched until their turn.
-
-1. Scope the three global `.ant-popover` files so later migrations cannot restyle leftover antd popovers.
-2. Move the seven existing `@signozhq/ui` call sites first. They break at the package bump; the 29 antd files do not, until each one is switched.
-3. Migrate shared wrappers that are actually popovers (`ErrorPopover`, then `WarningPopover` once the links decision is made). Leave `ContextMenu` on antd until a context menu exists.
-4. Migrate click forms (`CustomTimePicker`, evaluation window, header menus, save-view, ApDex).
-5. Send hover descriptions to Tooltip and row menus to Dropdown, instead of forcing them through Popover.
-6. Delete the matching `.ant-popover` rules in the same change as each call site, so a half-migrated page is not styled twice.
-
-## Risks
-
-- **Controlled `open` is load-bearing.** Save forms close from inside the popup only when the mutation succeeds. A list keeps one popover open at a time. Dropping `open` and driving everything from `onOpenChange` alone cannot express either. Keep the controlled prop at those sites.
-- **Focus moves in.** Click popovers focus the first tabbable child. Typeaheads (`VariablesPopover`, and any filter that must keep the caret) need `initialFocus={false}`.
-- **Outside press and anchors.** A press on the anchor looks outside. Call `details.cancel()` or the typeahead closes when the user clicks the input it is anchored to.
-- **Dialogs.** Inside a Dialog or Drawer the popup portals into the panel so the focus trap can reach it. Do not set `container={document.body}` there.
-- **Z-index.** The shell starts at `--popover-z-index` (50) and lifts above the layer its trigger sits in. A Tooltip inside a row must still paint above the popup. The app ladder today is tooltip 1070, dropdown 1050, popover 1030, modal 1000. Check a truncated row tooltip inside a popover after the first real migration.
-- **Scroll locking.** Chart popovers measure the wrong box when a modal has locked scroll. This popover does not lock scroll (`modal` is rejected). Re-check Infrastructure Monitoring charts if a surrounding modal is open.
-- **`nativeButton` mismatches.** Base UI logs an error when the flag does not match the element. Every non-button trigger (a badge, a custom row, an input) needs `nativeButton={false}`.
-
-## `--popover-foreground` audit
-
-The shell reads `--popover-background`, `--popover-foreground`, `--popover-border`, and `--popover-shadow`. Those semantic values belong to the token package, not to call sites.
-
-Two legacy shadcn variables predate those hooks:
-
-- `--popover-foreground` is the foreground hook the shell uses. It should stay pointed at the same foreground as the rest of the light and dark themes (`--l1-foreground` today).
-- `--popover` (no suffix) is the old background. `--calendar-select-background` still reads it. Do not repoint `--popover` at `--popover-background` or at `surface-3` until the calendar token is audited, or date selection changes color with the popover shell.
-
-Call sites that pass antd's `color` (a gradient string on `AlertPopover`, a raw token on `SeeMore`) do not map to a prop. The shell color comes from the tokens. Content that needs its own background paints it inside `children`.

frontend/package.json

@@ -53,9 +53,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.3.0",
+    "@signozhq/design-tokens": "2.2.1",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.3.0",
+    "@signozhq/ui": "0.2.0",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/pnpm-lock.yaml

@@ -74,14 +74,14 @@ importers:
         specifier: 5.3.0
         version: 5.3.0
       '@signozhq/design-tokens':
-        specifier: 2.3.0
-        version: 2.3.0
+        specifier: 2.2.1
+        version: 2.2.1
       '@signozhq/icons':
         specifier: 0.4.0
         version: 0.4.0
       '@signozhq/ui':
-        specifier: 0.3.0
-        version: 0.3.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.2.0
+        version: 0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -2909,6 +2909,9 @@ packages:
   '@posthog/core@1.6.0':
     resolution: {integrity: sha512-Tbh8UACwbb7jFdDC7wwXHtfNzO+4wKh3VbyMHmp2UBe6w1jliJixexTJNfkqdGZm+ht3M10mcKvGGPnoZ2zLBg==}
 
+  '@radix-ui/number@1.1.3':
+    resolution: {integrity: sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==}
+
   '@radix-ui/primitive@1.1.7':
     resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
 
@@ -2925,6 +2928,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.15':
+    resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
+    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-compose-refs@1.1.5':
     resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
     peerDependencies:
@@ -2956,6 +2972,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.4':
+    resolution: {integrity: sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.19':
     resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
     peerDependencies:
@@ -3070,6 +3095,71 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-progress@1.1.16':
+    resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
+    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-radio-group@1.4.7':
+    resolution: {integrity: sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==}
+    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-roving-focus@1.1.19':
+    resolution: {integrity: sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==}
+    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-select@2.3.7':
+    resolution: {integrity: sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==}
+    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-slider@1.4.7':
+    resolution: {integrity: sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==}
+    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-slot@1.3.3':
     resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
     peerDependencies:
@@ -3079,6 +3169,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-tabs@1.1.21':
+    resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
+    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:
@@ -3106,6 +3209,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-is-hydrated@0.1.3':
+    resolution: {integrity: sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==}
+    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:
@@ -3115,6 +3227,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.4':
+    resolution: {integrity: sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==}
+    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-rect@1.1.4':
     resolution: {integrity: sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==}
     peerDependencies:
@@ -3133,6 +3254,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.11':
+    resolution: {integrity: sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ==}
+    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/rect@1.1.3':
     resolution: {integrity: sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==}
 
@@ -3451,14 +3585,14 @@ packages:
   '@sideway/pinpoint@2.0.0':
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
 
-  '@signozhq/design-tokens@2.3.0':
-    resolution: {integrity: sha512-gVTPc2uJwBsTF9VMzPghgsnv6eioK8oxzES1CLDxedxpcfwbWltuzxVPwhPuoC54E2vItDVZhR9RFI/JZ50ldw==}
+  '@signozhq/design-tokens@2.2.1':
+    resolution: {integrity: sha512-ulf6lhWUP6qxqsyemQySUMfOIKRvefvZ5rBRv+wlhOpPfYPk3uatPmPkKEhAjISpX8f9g1Gg8wgRZxUCysf20Q==}
 
   '@signozhq/icons@0.4.0':
     resolution: {integrity: sha512-QctNvNPlQlsefFdIVmSy/P/7a1IcQ3IryKP0KPMqtoqew3q89FGUmFa5IfEJ7Z3CHhtG1zaXwBKqP72QkLyA3g==}
 
-  '@signozhq/ui@0.3.0':
-    resolution: {integrity: sha512-Khzr3/YC/QACwBi1zfQwt+h88iyuIu9hm5hkcIkuCTteD9P+r13US/NN4kkbJe8IHyZXCoDkoIpmQxzbrA3/SA==}
+  '@signozhq/ui@0.2.0':
+    resolution: {integrity: sha512-j20ldiOkR150ON0BCDhlq6fXGoPN++7w6e4t2HtM2XMM4buJO7aHzPzNKvDRZ2UUf/LGPULPAW8w6sg6gUVHyw==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -4791,6 +4925,12 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
@@ -7319,6 +7459,12 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
@@ -8287,8 +8433,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-resizable-panels@4.12.2:
-    resolution: {integrity: sha512-NwY5LCo4WrxVvDh0xoMML6EMLPONP/8ckKcIdpnojxexoatZdjLiRqLJQjQK5CPkd4SYiB/2M5BVrjZBQtOO7Q==}
+  react-resizable-panels@4.12.3:
+    resolution: {integrity: sha512-GHMJWnDXui/3RX4bT+cgBP+N3N2nkwcoZATr/2xLFpqQQe7TlBrE0cGM0dUa9ceT7A90tUrSRsiqgRG+g0/2AA==}
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
@@ -8788,6 +8934,12 @@ packages:
     resolution: {integrity: sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==}
     engines: {node: '>=20'}
 
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   sort-asc@0.1.0:
     resolution: {integrity: sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==}
     engines: {node: '>=0.10.0'}
@@ -9798,7 +9950,7 @@ snapshots:
 
   '@ant-design/cssinjs@1.17.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
       '@emotion/hash': 0.8.0
       '@emotion/unitless': 0.7.5
       classnames: 2.3.2
@@ -9814,7 +9966,7 @@ snapshots:
     dependencies:
       '@ant-design/colors': 7.0.0
       '@ant-design/icons-svg': 4.3.1
-      '@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
@@ -9822,7 +9974,7 @@ snapshots:
 
   '@ant-design/react-slick@1.0.2(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       classnames: 2.3.2
       json2mq: 0.2.0
       react: 18.2.0
@@ -12346,6 +12498,8 @@ snapshots:
     dependencies:
       cross-spawn: 7.0.6
 
+  '@radix-ui/number@1.1.3': {}
+
   '@radix-ui/primitive@1.1.7': {}
 
   '@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)':
@@ -12357,6 +12511,18 @@ snapshots:
       '@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)
+      '@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-slot': 1.3.3(@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-compose-refs@1.1.5(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -12392,6 +12558,12 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
+  '@radix-ui/react-direction@1.1.4(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+
   '@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)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -12502,6 +12674,101 @@ snapshots:
       '@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)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
+  '@radix-ui/react-radio-group@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)':
+    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-direction': 1.1.4(@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-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-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-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)':
+    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-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-use-callback-ref': 1.1.4(@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-is-hydrated': 0.1.3(@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)
+      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-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)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@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-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)
+      '@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-use-previous': 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)
+      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-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)':
+    dependencies:
+      '@radix-ui/number': 1.1.3
+      '@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-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-layout-effect': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.4(@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-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)
@@ -12509,6 +12776,22 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
+  '@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
+      '@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-id': 1.1.4(@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-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-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-use-callback-ref@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -12531,12 +12814,24 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
+  '@radix-ui/react-use-is-hydrated@0.1.3(@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
     optionalDependencies:
       '@types/react': 18.0.26
 
+  '@radix-ui/react-use-previous@1.1.4(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+
   '@radix-ui/react-use-rect@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       '@radix-ui/rect': 1.1.3
@@ -12551,11 +12846,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
+  '@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)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
   '@radix-ui/rect@1.1.3': {}
 
   '@rc-component/color-picker@1.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       '@ctrl/tinycolor': 3.6.1
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -12575,7 +12879,7 @@ snapshots:
 
   '@rc-component/mutate-observer@1.1.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
       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
@@ -12591,7 +12895,7 @@ snapshots:
 
   '@rc-component/tour@1.10.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-component/portal': 1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@rc-component/trigger': 1.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
@@ -12601,7 +12905,7 @@ snapshots:
 
   '@rc-component/trigger@1.18.1(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-component/portal': 1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -12846,33 +13150,41 @@ snapshots:
 
   '@sideway/pinpoint@2.0.0': {}
 
-  '@signozhq/design-tokens@2.3.0': {}
+  '@signozhq/design-tokens@2.2.1': {}
 
   '@signozhq/icons@0.4.0': {}
 
-  '@signozhq/ui@0.3.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.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@chenglou/pretext': 0.0.8
       '@radix-ui/react-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-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)
+      '@radix-ui/react-radio-group': 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-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-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)
       '@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)
       '@types/lodash-es': 4.17.12
       clsx: 2.1.1
+      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)
       copy-text-to-clipboard: 3.2.2
       dayjs: 1.11.23
       lodash-es: 4.18.1
       motion: 11.18.2(@emotion/is-prop-valid@1.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      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.2(react-dom@18.2.0(react@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'
@@ -14122,7 +14434,7 @@ snapshots:
 
   better-xlsx@0.7.6:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       jszip: 3.10.1
       kind-of: 6.0.3
 
@@ -14159,7 +14471,7 @@ snapshots:
 
   broadcast-channel@3.7.0:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       detect-node: 2.1.0
       js-sha3: 0.8.0
       microseconds: 0.2.0
@@ -14368,6 +14680,18 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  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-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)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   co@4.6.0: {}
 
   codemirror@6.0.1:
@@ -16916,7 +17240,7 @@ snapshots:
 
   match-sorter@6.3.1:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       remove-accents: 0.4.2
 
   math-intrinsics@1.1.0: {}
@@ -17426,6 +17750,11 @@ snapshots:
 
   neo-async@2.6.2: {}
 
+  next-themes@0.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   node-addon-api@7.1.1:
     optional: true
 
@@ -18049,7 +18378,7 @@ snapshots:
 
   rc-cascader@3.20.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
       array-tree-filter: 2.1.0
       classnames: 2.3.2
       rc-select: 14.10.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18060,7 +18389,7 @@ snapshots:
 
   rc-checkbox@3.1.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
       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
@@ -18068,7 +18397,7 @@ snapshots:
 
   rc-collapse@3.7.1(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-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18077,7 +18406,7 @@ snapshots:
 
   rc-dialog@9.3.4(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-component/portal': 1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18087,7 +18416,7 @@ snapshots:
 
   rc-drawer@6.5.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
       '@rc-component/portal': 1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18097,7 +18426,7 @@ snapshots:
 
   rc-dropdown@4.1.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-component/trigger': 1.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18106,7 +18435,7 @@ snapshots:
 
   rc-field-form@1.40.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
       async-validator: 4.2.5
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
@@ -18114,7 +18443,7 @@ snapshots:
 
   rc-image@7.3.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
       '@rc-component/portal': 1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-dialog: 9.3.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18125,7 +18454,7 @@ snapshots:
 
   rc-input-number@8.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-component/mini-decimal': 1.0.1
       classnames: 2.3.2
       rc-input: 1.3.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18135,7 +18464,7 @@ snapshots:
 
   rc-input@1.3.5(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
@@ -18143,7 +18472,7 @@ snapshots:
 
   rc-mentions@2.9.1(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-component/trigger': 1.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-input: 1.3.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18155,7 +18484,7 @@ snapshots:
 
   rc-menu@9.12.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
       '@rc-component/trigger': 1.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18166,7 +18495,7 @@ snapshots:
 
   rc-motion@2.9.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
       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
@@ -18174,7 +18503,7 @@ snapshots:
 
   rc-notification@5.3.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
       classnames: 2.3.2
       rc-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18183,7 +18512,7 @@ snapshots:
 
   rc-overflow@1.3.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-resize-observer: 1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18192,7 +18521,7 @@ snapshots:
 
   rc-pagination@3.7.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
       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
@@ -18200,7 +18529,7 @@ snapshots:
 
   rc-picker@3.14.6(date-fns@4.1.0)(dayjs@1.11.20)(moment@2.30.1)(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-component/trigger': 1.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18213,7 +18542,7 @@ snapshots:
 
   rc-progress@3.5.1(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
@@ -18221,7 +18550,7 @@ snapshots:
 
   rc-rate@2.12.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
       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
@@ -18229,7 +18558,7 @@ snapshots:
 
   rc-resize-observer@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
       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
@@ -18238,7 +18567,7 @@ snapshots:
 
   rc-segmented@2.2.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-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18259,7 +18588,7 @@ snapshots:
 
   rc-slider@10.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
       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
@@ -18267,7 +18596,7 @@ snapshots:
 
   rc-steps@6.0.1(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
@@ -18275,7 +18604,7 @@ snapshots:
 
   rc-switch@4.1.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
       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
@@ -18283,7 +18612,7 @@ snapshots:
 
   rc-table@7.35.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
       '@rc-component/context': 1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       rc-resize-observer: 1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18294,7 +18623,7 @@ snapshots:
 
   rc-tabs@12.13.1(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-dropdown: 4.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-menu: 9.12.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18306,7 +18635,7 @@ snapshots:
 
   rc-textarea@1.5.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-input: 1.3.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-resize-observer: 1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18316,7 +18645,7 @@ snapshots:
 
   rc-tooltip@6.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
       '@rc-component/trigger': 1.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       classnames: 2.3.2
       react: 18.2.0
@@ -18324,7 +18653,7 @@ snapshots:
 
   rc-tree-select@5.15.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
       classnames: 2.3.2
       rc-select: 14.10.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-tree: 5.8.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18334,7 +18663,7 @@ snapshots:
 
   rc-tree@5.8.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-motion: 2.9.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18344,7 +18673,7 @@ snapshots:
 
   rc-upload@4.3.5(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
@@ -18352,14 +18681,14 @@ snapshots:
 
   rc-util@5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-is: 18.3.1
 
   rc-virtual-list@3.11.3(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-resize-observer: 1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -18585,7 +18914,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
-  react-resizable-panels@4.12.2(react-dom@18.2.0(react@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):
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -18636,7 +18965,7 @@ snapshots:
 
   react-router@5.3.4(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       history: 4.10.1
       hoist-non-react-statics: 3.3.2
       loose-envify: 1.4.0
@@ -19176,6 +19505,11 @@ snapshots:
       ansi-styles: 6.2.3
       is-fullwidth-code-point: 5.1.0
 
+  sonner@2.0.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   sort-asc@0.1.0: {}
 
   sort-desc@0.1.1: {}

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -1,9 +1,6 @@
 .breadcrumb {
 	padding: var(--spacing-4) 16px var(--spacing-2);
 
-	// The antd breadcrumb provides the item spacing.
-	--button-padding: 0;
-
 	ol {
 		align-items: center;
 	}
@@ -16,3 +13,8 @@
 		padding: 0px;
 	}
 }
+
+.divider {
+	--divider-color: var(--l1-border);
+	--divider-margin: 10px 0 16px 0;
+}

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -28,7 +28,7 @@ function AlertBreadcrumb({
 				items={breadcrumbItems}
 				data-testid={testId}
 			/>
-			{showDivider && <Divider spacing="10px 16px" />}
+			{showDivider && <Divider className={styles.divider} />}
 		</>
 	);
 }

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,6 +1,6 @@
 import { Copy } from '@signozhq/icons';
 import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
 import { useLayoutEffect, useRef, useState } from 'react';

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,6 +1,6 @@
 import { Copy } from '@signozhq/icons';
 import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';
 

frontend/src/components/BackHeader/BackHeader.module.scss

@@ -17,3 +17,8 @@
 	letter-spacing: -0.01em;
 	color: var(--l1-foreground);
 }
+
+.divider {
+	--divider-color: var(--l1-border);
+	--divider-margin: 10px 0 16px 0;
+}

frontend/src/components/BackHeader/BackHeader.tsx

@@ -44,7 +44,7 @@ function BackHeader({
 				</Button>
 				<div className={styles.title}>{title}</div>
 			</div>
-			<Divider spacing="10px 16px" />
+			<Divider className={styles.divider} />
 		</>
 	);
 }

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -56,15 +56,22 @@ function ProgressRender(item: string | number): JSX.Element {
 	const percent = Number(Number(item).toFixed(1));
 	return (
 		<div className="progress-container">
-			<div className="progress-bar">
-				<Progress
-					percent={percent}
-					showInfo
-					color={
-						percent >= 90 ? 'highlight-danger' : percent >= 60 ? 'warning' : 'success'
+			<Progress
+				percent={percent}
+				strokeLinecap="butt"
+				showInfo
+				strokeColor={((): string => {
+					const cpuPercent = percent;
+					if (cpuPercent >= 90) {
+						return Color.BG_SAKURA_500;
 					}
-				/>
-			</div>
+					if (cpuPercent >= 60) {
+						return Color.BG_AMBER_500;
+					}
+					return Color.BG_FOREST_500;
+				})()}
+				className="progress-bar"
+			/>
 		</div>
 	);
 }

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -72,7 +72,7 @@ export default function CeleryTaskDetail({
 								endTime ? `- ${formatTimestamp(endTime)}` : ''
 							}`}
 						</Typography.Text>
-						<Divider orientation="vertical" />
+						<Divider type="vertical" />
 						<Typography.Text className="subtitle">{taskData.value}</Typography.Text>
 					</div>
 				</div>

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -1,3 +1,36 @@
+.create-sa-modal {
+	max-width: 530px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--l1-foreground);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: 0;
+
+		.create-sa-modal__content {
+			padding: var(--padding-4);
+		}
+	}
+}
+
 .create-sa-form {
 	display: flex;
 	flex-direction: column;
@@ -17,6 +50,25 @@
 		}
 	}
 
+	&__input {
+		height: 32px;
+		color: var(--l1-foreground);
+		background-color: var(--l2-background);
+		border-color: var(--l1-border);
+		font-size: var(--paragraph-base-400-font-size);
+		border-radius: 2px;
+		width: 100%;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+
+		&:focus {
+			border-color: var(--primary);
+			box-shadow: none;
+		}
+	}
+
 	&__error {
 		font-size: var(--paragraph-small-400-font-size);
 		color: var(--destructive);
@@ -31,3 +83,16 @@
 		line-height: var(--paragraph-small-400-line-height);
 	}
 }
+
+.create-sa-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: var(--spacing-4);
+	flex-shrink: 0;
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -7,7 +7,7 @@ import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardCon
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
@@ -116,10 +116,11 @@ function CreateServiceAccountModal(): JSX.Element {
 									<Input
 										id="sa-name"
 										placeholder="Enter a name"
+										className="create-sa-form__input"
 										value={field.value}
 										onChange={field.onChange}
 										onBlur={field.onBlur}
-										testId="create-sa-name-input"
+										data-testid="create-sa-name-input"
 									/>
 								)}
 							/>

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

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import {
 	setupAuthzAdmin,
 	setupAuthzDenyAll,
@@ -10,9 +10,9 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 const mockToast = jest.mocked(toast);
@@ -58,7 +58,7 @@ describe('CreateServiceAccountModal', () => {
 		// The form only renders once the create check resolves, and the name field
 		// registers its `required` rule on mount, so the empty-form invalid state
 		// settles a tick later.
-		await screen.findByTestId('create-sa-name-input-field');
+		await screen.findByTestId('create-sa-name-input');
 
 		await waitFor(() =>
 			expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
@@ -72,7 +72,7 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		const submitBtn = await screen.findByTestId('create-sa-submit-btn');
 
 		await user.type(nameInput, 'test');
@@ -90,7 +90,7 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		await user.type(nameInput, 'Deploy Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
@@ -128,7 +128,7 @@ describe('CreateServiceAccountModal', () => {
 		renderModal();
 
 		const nameInput = await screen.findByTestId<HTMLInputElement>(
-			'create-sa-name-input-field',
+			'create-sa-name-input',
 		);
 		await user.type(nameInput, 'Deploy Bot');
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
@@ -160,7 +160,7 @@ describe('CreateServiceAccountModal', () => {
 
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		await user.type(nameInput, 'Dupe Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
@@ -209,9 +209,7 @@ describe('CreateServiceAccountModal', () => {
 			screen.findByText(/is not authorized to perform/i),
 		).resolves.toBeInTheDocument();
 
-		expect(
-			screen.queryByTestId('create-sa-name-input-field'),
-		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('create-sa-name-input')).not.toBeInTheDocument();
 		expect(
 			screen.getByTestId('create-service-account-modal'),
 		).toBeInTheDocument();
@@ -246,7 +244,7 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		await user.type(nameInput, 'Bot');
 		await user.clear(nameInput);
 

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -34,10 +34,34 @@ $item-spacing: 8px;
 		@include flex-center;
 		gap: 6px;
 		width: -webkit-fill-available;
+	}
 
-		// The search row draws its own padding; the inline Input hugs the text.
-		--input-height: auto;
-		--input-padding: 0;
+	&__input {
+		@include text-style-base;
+		width: 100%;
+		background: transparent;
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
+		outline: none;
+		height: auto;
+		color: var(--l1-foreground);
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+		padding: 0;
+
+		&:focus,
+		&:focus-visible,
+		&:hover {
+			border: none;
+			box-shadow: none;
+			outline: none;
+		}
+
+		&::placeholder {
+			color: var(--l2-foreground);
+		}
 	}
 
 	&__esc-key {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -65,8 +65,7 @@ function SearchBar({
 				/>
 				<Input
 					type="text"
-					variant="unstyled"
-					noFocusRing
+					className="timezone-picker__input"
 					placeholder="Search timezones..."
 					value={value}
 					onChange={(e): void => onChange(e.target.value)}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -1,4 +1,7 @@
 .details-header {
+	// ghost + secondary missing hover bg token in @signozhq/button
+	--button-ghost-hover-background: var(--l3-background);
+
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -5,7 +5,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -409,8 +409,7 @@ function EditMemberDrawer({
 				setShowResetLinkDialog(true);
 				onClose();
 			} else {
-				toast.danger('Failed to generate password reset link', {
-					action: { label: 'Dismiss' },
+				toast.error('Failed to generate password reset link', {
 					position: 'top-right',
 				});
 			}
@@ -439,7 +438,7 @@ function EditMemberDrawer({
 
 	useEffect(() => {
 		if (copyState.error) {
-			toast.danger('Failed to copy link', { action: { label: 'Dismiss' } });
+			toast.error('Failed to copy link');
 		}
 	}, [copyState.error]);
 
@@ -472,19 +471,20 @@ function EditMemberDrawer({
 				<label className="edit-member-drawer__label" htmlFor="member-name">
 					Name
 				</label>
-				<Input
-					id="member-name"
-					value={localDisplayName}
-					onChange={(e): void => {
-						setLocalDisplayName(e.target.value);
-						setSaveErrors((prev) =>
-							prev.filter((err) => err.context !== 'Name update'),
-						);
-					}}
-					placeholder="Enter name"
-					disabled={isRootUser || isDeleted}
-					disabledTooltip={isRootUser ? ROOT_USER_TOOLTIP : undefined}
-				/>
+				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+					<Input
+						id="member-name"
+						value={localDisplayName}
+						onChange={(e): void => {
+							setLocalDisplayName(e.target.value);
+							setSaveErrors((prev) =>
+								prev.filter((err) => err.context !== 'Name update'),
+							);
+						}}
+						placeholder="Enter name"
+						disabled={isRootUser || isDeleted}
+					/>
+				</Tooltip>
 			</div>
 
 			<div className="edit-member-drawer__field">

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	useCreateResetPasswordToken,
@@ -82,11 +82,11 @@ jest.mock('@signozhq/ui/dialog', () => ({
 	),
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: {
 		success: jest.fn(),
-		danger: jest.fn(),
+		error: jest.fn(),
 	},
 }));
 

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -3,7 +3,20 @@
 		width: fit-content;
 		display: flex;
 		align-items: center;
+		gap: 4px;
+		border-radius: 20px;
+		background: color-mix(in srgb, var(--danger-background) 20%, transparent);
+		padding-left: 3px;
+		padding-right: 8px;
 		cursor: pointer;
+		span {
+			color: var(--danger-background);
+			font-size: 10px;
+			font-weight: 500;
+			line-height: 20px; /* 200% */
+			letter-spacing: 0.4px;
+			text-transform: uppercase;
+		}
 	}
 	&__wrap {
 		background: linear-gradient(

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -53,13 +53,8 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge
-						variant="solid"
-						color="danger"
-						textTransform="uppercase"
-						prefix={<CircleAlert size={14} />}
-					>
-						error
+					<Badge variant="solid" color="danger">
+						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
 					</Badge>
 				</span>
 			) : (

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -1,6 +1,6 @@
 .export-menu-popover {
-	// The popover shell carries no padding of its own, so the content owns it.
-	padding: var(--spacing-8);
+	width: 240px;
+	padding: 0 12px 12px 12px;
 
 	.title {
 		display: flex;

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -1,6 +1,6 @@
 import { Download } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Popover, usePopoverHandle } from '@signozhq/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { RadioGroup } from '@signozhq/ui/radio-group';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
@@ -36,10 +36,6 @@ export default function ExportMenu({
 }: ExportMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-	// Driven by a handle rather than `trigger`: the button carries a Tooltip, and a Tooltip
-	// routes every prop it does not recognise to its own popup, so a popover's press handlers
-	// would never reach the button underneath.
-	const menu = usePopoverHandle(setIsPopoverOpen);
 
 	const { isExporting, handleExport: handleClientExport } = useClientExport({
 		data,
@@ -49,62 +45,53 @@ export default function ExportMenu({
 	});
 
 	const handleExport = useCallback((): void => {
-		menu.close();
+		setIsPopoverOpen(false);
 		handleClientExport({ format: exportFormat as ExportFormat });
-	}, [menu, exportFormat, handleClientExport]);
+	}, [exportFormat, handleClientExport]);
 
 	return (
-		<>
+		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
 			<Tooltip title="Download">
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					icon
-					aria-label="Download"
-					aria-haspopup="dialog"
-					aria-expanded={isPopoverOpen}
-					testId={`export-menu-${dataSource}`}
-					loading={isExporting}
-					onClick={(event): void => menu.showAt(event.currentTarget)}
-				>
-					<Download size={14} />
-				</Button>
-			</Tooltip>
-			<Popover
-				side="bottom"
-				align="end"
-				width={240}
-				handle={menu}
-				aria-label="Export format"
-			>
-				<div 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' },
-							]}
-						/>
-					</div>
-
+				<PopoverTrigger asChild>
 					<Button
-						size="md"
-						variant="solid"
-						color="primary"
-						width="100%"
-						onClick={handleExport}
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						icon
+						aria-label="Download"
+						testId={`export-menu-${dataSource}`}
 						loading={isExporting}
-						prefix={<Download size={16} />}
 					>
-						Export
+						<Download size={14} />
 					</Button>
+				</PopoverTrigger>
+			</Tooltip>
+			<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' },
+						]}
+					/>
 				</div>
-			</Popover>
-		</>
+
+				<Button
+					size="md"
+					variant="solid"
+					color="primary"
+					width="100%"
+					onClick={handleExport}
+					loading={isExporting}
+					prefix={<Download size={16} />}
+				>
+					Export
+				</Button>
+			</PopoverContent>
+		</Popover>
 	);
 }

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -32,15 +32,12 @@
 	}
 }
 
-// Full-bleed search bar: only top/bottom borders, square corners.
-// Per-side widths cannot be expressed via --input-border-width.
 .searchInput {
-	--input-border-radius: 0;
-
-	[data-slot='input'] {
-		border-left: none;
-		border-right: none;
-	}
+	background-color: var(--l1-background);
+	height: 40px;
+	border-radius: 0;
+	border-left: none;
+	border-right: none;
 }
 
 .section {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -140,10 +140,10 @@ function FieldsSelectorContent({
 					<X className={styles.closeIcon} size={16} onClick={onClose} />
 				</div>
 
-				<section className={styles.searchInput}>
+				<section>
 					<Input
+						className={styles.searchInput}
 						type="text"
-						size="large"
 						value={inputValue}
 						placeholder="Search for a field..."
 						onChange={handleInputChange}

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

@@ -13,9 +13,9 @@ jest.mock('hooks/querySuggestions/useFieldKeysSuggestion', () => ({
 	})),
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 // FloatingPanel is a react-rnd/portal shell — presentation only. Render its

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAppLocation } from 'lib/router/useAppLocation';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
@@ -39,8 +39,7 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 			})
 			.catch(() => {
 				console.error(`Failed to submit ${entityName}`);
-				toast.danger(`Failed to submit ${entityName}`, {
-					action: { label: 'Dismiss' },
+				toast.error(`Failed to submit ${entityName}`, {
 					position: 'top-right',
 				});
 			})

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

@@ -1,6 +1,6 @@
 // Mock dependencies before imports
 import { useAppLocation } from 'lib/router/useAppLocation';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { logEventMock } from '__tests__/logEventMock';
@@ -13,11 +13,11 @@ jest.mock('lib/router/useAppLocation', () => ({
 	useAppLocation: jest.fn(),
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: {
 		success: jest.fn(),
-		danger: jest.fn(),
+		error: jest.fn(),
 	},
 }));
 
@@ -49,7 +49,7 @@ describe('FeedbackModal', () => {
 			isCloudUser: false,
 		});
 		mockToast.success.mockClear();
-		mockToast.danger.mockClear();
+		mockToast.error.mockClear();
 	});
 
 	it('should render feedback modal with all tabs', () => {

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -4,9 +4,6 @@
 
 	border-radius: 2px 0px 0px 2px;
 
-	// The label chip and the Input share the --input-with-label-* theming
-	// contract (set by e.g. FormAlertRules, WidgetFullView) so the joined
-	// group recolors as one.
 	.label {
 		// Typography.Text takes its display from this token; at its `inline` default
 		// the label blockifies as a flex item and the text rides the top of the row.
@@ -34,40 +31,66 @@
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
+		font-weight: var(--font-weight-light);
 	}
 
 	.input {
 		flex: 1;
 		min-width: 150px;
+		font-family: 'Space Mono', monospace !important;
+
+		--input-border-radius: 0px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));
+
+		font-size: 12px !important;
+		line-height: 25px;
+
 		position: relative;
 
-		// Square corners: the input sits mid-group between label and close button.
-		--input-border-radius: 0px;
-		--input-border: var(--input-with-label-border-color, var(--l2-border));
-		--input-background: var(
-			--input-with-label-background-color,
-			var(--l2-background)
-		);
-		--input-foreground: var(--input-with-label-color, var(--l2-foreground));
-
 		&:hover,
-		&:focus-within {
+		&:focus {
+			z-index: 1;
+		}
+
+		.ant-select-selector {
+			position: relative;
+			border-radius: inherit;
+		}
+
+		.ant-select:hover .ant-select-selector,
+		.ant-select-focused .ant-select-selector {
 			z-index: 1;
 		}
 
 		&.input__has-label-after {
 			margin-left: -1px;
+
+			.ant-select-selector {
+				margin-left: -1px;
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
 		}
 
 		&.input__has-close-button {
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
 			~ .close-btn {
 				margin-left: -1px;
 			}
 		}
 
-		// The Input has no token for the native number spinners.
-		input[type='number']::-webkit-inner-spin-button,
-		input[type='number']::-webkit-outer-spin-button {
+		&::placeholder {
+			color: var(--input-with-label-color, var(--l3-foreground)) !important;
+			font-size: 12px !important;
+		}
+		&[type='number']::-webkit-inner-spin-button,
+		&[type='number']::-webkit-outer-spin-button {
 			-webkit-appearance: none;
 			-moz-appearance: none;
 			appearance: none;
@@ -91,7 +114,16 @@
 
 	&.labelAfter {
 		.input {
-			--input-border-radius: 2px 0 0 2px;
+			border-radius: 2px;
+			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+			background: var(--input-with-label-background-color, var(--l2-background));
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
 		}
 
 		.label {

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -50,23 +50,19 @@ function InputWithLabel({
 			})}
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
-			<div
+			<Input
 				className={cx('input', {
 					'input__has-label-after': !labelAfter,
 					'input__has-close-button': !!onClose,
 				})}
-			>
-				<Input
-					placeholder={placeholder}
-					type={type}
-					value={inputValue}
-					onChange={handleChange}
-					disabled={disabled}
-					disabledTooltip={undefined}
-					name={label.toLowerCase()}
-					testId={`input-${label}`}
-				/>
-			</div>
+				placeholder={placeholder}
+				type={type}
+				value={inputValue}
+				onChange={handleChange}
+				disabled={disabled}
+				name={label.toLowerCase()}
+				data-testid={`input-${label}`}
+			/>
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (
 				<Button

frontend/src/components/InviteMembers/InviteMembers.module.scss

@@ -55,12 +55,26 @@
 	flex: 1 1 0;
 	min-width: 0;
 
-	// Matches the antd RolesSelect in the same row, which is forced to the
-	// same field background below.
 	--input-background: var(
 		--invite-members-field-background,
 		var(--l2-background)
 	);
+	--input-hover-background: var(
+		--invite-members-field-background,
+		var(--l2-background)
+	);
+	--input-focus-background: var(
+		--invite-members-field-background,
+		var(--l2-background)
+	);
+	--input-disabled-background: var(
+		--invite-members-field-background,
+		var(--l2-background)
+	);
+
+	input::placeholder {
+		color: var(--l3-foreground);
+	}
 }
 
 .cellRole {

frontend/src/components/InviteMembers/InviteMembers.tsx

@@ -1,4 +1,4 @@
-import { CircleAlert, Plus, SolidCheckCircle2, Trash2 } from '@signozhq/icons';
+import { CircleAlert, Plus, Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { Input } from '@signozhq/ui/input';
@@ -97,7 +97,7 @@ function InviteMembers({
 									onChange={(e): void => updateEmail(row.id, e.target.value)}
 									name={`invite-email-${row.id}`}
 									autoComplete="email"
-									testId={`invite-email-${row.id}`}
+									data-testid={`invite-email-${row.id}`}
 								/>
 								{emailValidity[row.id] === false && row.email.trim() !== '' && (
 									<Typography.Text size="small" className={styles.errorText}>
@@ -152,62 +152,61 @@ function InviteMembers({
 			</div>
 
 			{hasValidationErrors && (
-				<div className={styles.callout}>
-					<Callout
-						color="danger"
-						size="sm"
-						icon={<CircleAlert />}
-						testId="invite-validation-error"
-					>
-						{getValidationErrorMessage()}
-					</Callout>
-				</div>
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					icon={<CircleAlert size={12} />}
+					className={styles.callout}
+					data-testid="invite-validation-error"
+				>
+					{getValidationErrorMessage()}
+				</Callout>
 			)}
 
 			{hasResults && hasFailures && (
-				<div className={styles.callout}>
-					<Callout
-						color="danger"
-						size="sm"
-						icon={<CircleAlert />}
-						testId="invite-api-error"
-					>
-						<div className={styles.results}>
-							{hasSuccesses && (
-								<Typography.Text size="small">
-									{successResults.length} invite(s) sent successfully.
-								</Typography.Text>
-							)}
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					icon={<CircleAlert size={12} />}
+					className={styles.callout}
+					data-testid="invite-api-error"
+				>
+					<div className={styles.results}>
+						{hasSuccesses && (
 							<Typography.Text size="small">
-								{failedResults.length} invite(s) failed:
+								{successResults.length} invite(s) sent successfully.
 							</Typography.Text>
-							<ul className={styles.resultsList}>
-								{failedResults.map((result) => (
-									<li key={result.email}>
-										<Typography.Text size="small">
-											{result.email}: {result.error}
-										</Typography.Text>
-									</li>
-								))}
-							</ul>
-						</div>
-					</Callout>
-				</div>
+						)}
+						<Typography.Text size="small">
+							{failedResults.length} invite(s) failed:
+						</Typography.Text>
+						<ul className={styles.resultsList}>
+							{failedResults.map((result) => (
+								<li key={result.email}>
+									<Typography.Text size="small">
+										{result.email}: {result.error}
+									</Typography.Text>
+								</li>
+							))}
+						</ul>
+					</div>
+				</Callout>
 			)}
 
 			{hasResults && !hasFailures && hasSuccesses && (
-				<div className={styles.callout}>
-					<Callout
-						color="success"
-						size="sm"
-						icon={<SolidCheckCircle2 />}
-						testId="invite-success"
-					>
-						<Typography.Text size="small">
-							{successResults.length} invite(s) sent successfully!
-						</Typography.Text>
-					</Callout>
-				</div>
+				<Callout
+					type="success"
+					size="small"
+					showIcon
+					className={styles.callout}
+					data-testid="invite-success"
+				>
+					<Typography.Text size="small">
+						{successResults.length} invite(s) sent successfully!
+					</Typography.Text>
+				</Callout>
 			)}
 
 			{renderFooter?.({

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.module.scss

@@ -12,6 +12,11 @@
 	gap: 8px;
 }
 
+.divider {
+	height: 16px;
+	margin: 0;
+}
+
 .timestamp {
 	font-family: 'Geist Mono', monospace;
 	font-size: var(--font-size-sm);

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@signozhq/ui/typography';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import {
 	ChevronDown,
@@ -76,7 +76,7 @@ function LogDetailsHeader({
 	return (
 		<div className={styles.header} data-log-detail-ignore="true">
 			<div className={styles.leftSection}>
-				<Divider orientation="vertical" height={16} spacing={0} />
+				<Divider type="vertical" className={styles.divider} />
 				<Typography.Text
 					className={styles.timestamp}
 					data-testid="log-details-header-timestamp"

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

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { render, screen, userEvent } from 'tests/test-utils';
 import { ILog } from 'types/api/logs/log';
@@ -7,8 +7,8 @@ import LogDetail from '..';
 import { VIEW_TYPES } from '../constants';
 import { LogDetailProps } from '../LogDetail.interfaces';
 
-jest.mock('@signozhq/ui/toast', () => ({
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 // DataViewer pulls in react-json-tree (ESM) + Monaco; mock it (as trace's tests

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -153,36 +153,6 @@
 						cursor: pointer;
 					}
 				}
-
-				// Stepper group: the Input sits seamlessly between the -/+
-				// periscope-btns (26px tall, l1-border).
-				.max-lines-per-row-input {
-					display: flex;
-
-					--input-height: 26px;
-					--input-border-radius: 0;
-					--input-border: var(--l1-border);
-					--input-border-width: 1px 0;
-
-					[data-testid='max-lines-per-row'] {
-						min-width: 36px;
-						width: auto;
-
-						// No Input token for text alignment.
-						input {
-							text-align: center;
-						}
-					}
-
-					.periscope-btn {
-						box-shadow: none;
-						padding: 6px 12px;
-						height: 26px;
-
-						border-radius: 0px 1px 1px 0px;
-						background: var(--l3-background);
-					}
-				}
 			}
 
 			.edit-columns-container {

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Popover, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
+import { InputNumber } from '@signozhq/ui/input-number';
 import cx from 'classnames';
 import {
 	LogViewMode,
@@ -12,8 +12,6 @@ import {
 	Check,
 	ChevronLeft,
 	ChevronRight,
-	Minus,
-	Plus,
 	SlidersVertical,
 } from '@signozhq/icons';
 
@@ -182,35 +180,20 @@ function OptionsMenu({
 							<div className="horizontal-line" />
 							<div className="max-lines-per-row">
 								<div className="title"> max lines per row </div>
-								<div className="raw-format max-lines-per-row-input">
-									<button
-										type="button"
-										className="periscope-btn"
-										aria-label="Fewer lines per row"
-										onClick={(): void => handleLinesPerRowChange(maxLinesPerRow - 1)}
-									>
-										<Minus size={12} />
-									</button>
-									<Input.Number
-										min={MIN_LINES_PER_ROW}
-										max={MAX_LINES_PER_ROW}
-										format={{ maximumFractionDigits: 0 }}
-										value={maxLinesPerRow}
-										onChange={handleLinesPerRowChange}
-										controls={false}
-										noFocusRing
-										aria-label="Max lines per row"
-										testId="max-lines-per-row"
-									/>
-									<button
-										type="button"
-										className="periscope-btn"
-										aria-label="More lines per row"
-										onClick={(): void => handleLinesPerRowChange(maxLinesPerRow + 1)}
-									>
-										<Plus size={12} />
-									</button>
-								</div>
+								<InputNumber
+									controls
+									mode="spinner"
+									size="small"
+									min={MIN_LINES_PER_ROW}
+									max={MAX_LINES_PER_ROW}
+									precision={0}
+									value={maxLinesPerRow}
+									onChange={handleLinesPerRowChange}
+									aria-label="Max lines per row"
+									decrementAriaLabel="Fewer lines per row"
+									incrementAriaLabel="More lines per row"
+									testId="max-lines-per-row"
+								/>
 							</div>
 						</>
 					)}

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

@@ -116,7 +116,7 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 		const { maxLinesOnChange, getByTestId } = setup();
 
 		// Increment max lines
-		const input = getByTestId('max-lines-per-row-field') as HTMLInputElement;
+		const input = getByTestId('max-lines-per-row') as HTMLInputElement;
 		const initial = Number(input.value);
 		fireEvent.click(screen.getByRole('button', { name: 'More lines per row' }));
 
@@ -130,7 +130,7 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 
 	it('clamps a typed max-lines value to 10', async () => {
 		const { maxLinesOnChange, getByTestId } = setup();
-		const input = getByTestId('max-lines-per-row-field') as HTMLInputElement;
+		const input = getByTestId('max-lines-per-row') as HTMLInputElement;
 		const user = userEvent.setup();
 
 		await user.clear(input);
@@ -143,7 +143,7 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 
 	it('stops max-lines at 10', async () => {
 		const { getByTestId } = setup();
-		const input = getByTestId('max-lines-per-row-field') as HTMLInputElement;
+		const input = getByTestId('max-lines-per-row') as HTMLInputElement;
 		const increment = screen.getByRole('button', { name: 'More lines per row' });
 		const user = userEvent.setup();
 

frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss

@@ -184,8 +184,8 @@
 }
 
 .helpContent {
-	// The popover shell carries no padding of its own, so the content owns it.
-	padding: var(--spacing-8);
+	width: 280px;
+	max-height: 320px;
 	overflow-y: auto;
 	@include custom-scrollbar;
 }

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -1,6 +1,6 @@
 import { CircleHelp } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Popover } from '@signozhq/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { Typography } from '@signozhq/ui/typography';
 
 import { MARKDOWN_HELP_ITEMS } from './constants';
@@ -9,14 +9,8 @@ import styles from './MarkdownEditor.module.scss';
 
 function MarkdownHelp(): JSX.Element {
 	return (
-		<Popover
-			nativeButton
-			side="bottom"
-			align="end"
-			width={280}
-			maxHeight={320}
-			aria-label="Markdown syntax"
-			trigger={
+		<Popover>
+			<PopoverTrigger asChild>
 				<Button
 					type="button"
 					variant="ghost"
@@ -28,9 +22,8 @@ function MarkdownHelp(): JSX.Element {
 				>
 					<CircleHelp size={14} />
 				</Button>
-			}
-		>
-			<div className={styles.helpContent}>
+			</PopoverTrigger>
+			<PopoverContent align="end" className={styles.helpContent}>
 				<Typography.Text className={styles.helpTitle}>
 					Markdown syntax
 				</Typography.Text>
@@ -44,7 +37,7 @@ function MarkdownHelp(): JSX.Element {
 						</div>
 					))}
 				</dl>
-			</div>
+			</PopoverContent>
 		</Popover>
 	);
 }

frontend/src/components/NoAuthBanner/NoAuthBanner.module.scss

@@ -0,0 +1,13 @@
+.banner {
+	height: var(--spacing-20);
+
+	a {
+		color: var(--callout-warning-title);
+		text-decoration: underline;
+
+		&:hover {
+			color: var(--callout-warning-title);
+			opacity: 0.8;
+		}
+	}
+}

frontend/src/components/NoAuthBanner/NoAuthBanner.tsx

@@ -1,22 +1,25 @@
-import { AlertStrip } from '@signozhq/ui/alert-strip';
+import { PersistedAnnouncementBanner } from '@signozhq/ui/announcement-banner';
+
+import styles from './NoAuthBanner.module.scss';
 
 export function NoAuthBanner(): JSX.Element {
 	return (
-		<AlertStrip.CloseablePersisted
-			color="warning"
-			side="top"
+		<PersistedAnnouncementBanner
+			type="warning"
 			storageKey="no-auth-banner-v1"
 			testId="no-auth-banner"
+			className={styles.banner}
 		>
 			Impersonation mode: authentication is disabled. Anyone with access to this
 			instance has admin privileges.{' '}
-			<AlertStrip.Link
+			<a
 				href="https://signoz.io/docs/manage/administrator-guide/configuration/impersonation-mode/"
 				target="_blank"
+				rel="noreferrer"
 			>
 				Learn more
-			</AlertStrip.Link>
-		</AlertStrip.CloseablePersisted>
+			</a>
+		</PersistedAnnouncementBanner>
 	);
 }
 

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

@@ -19,6 +19,6 @@ describe('NoAuthBanner', () => {
 		render(<NoAuthBanner />);
 		const link = screen.getByRole('link', { name: /learn more/i });
 		expect(link).toHaveAttribute('target', '_blank');
-		expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
+		expect(link).toHaveAttribute('rel', 'noreferrer');
 	});
 });

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss

@@ -102,10 +102,12 @@
 	letter-spacing: -0.07px;
 }
 
-/** Surface and metrics come from the `--input-*` tokens; the family and tracking are set here. */
-.numberField {
-	--input-font-family: 'Geist Mono';
-	--input-letter-spacing: -0.07px;
+/** Surface and metrics come from the `--input-*` tokens above; only the family has none. */
+.numberInput {
+	width: 104px;
+
+	font-family: 'Geist Mono';
+	letter-spacing: -0.07px;
 }
 
 /** Unfilled: a pill on the same row as the toggles above reads as another control,

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { Tooltip } from 'antd';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
+import { InputNumber } from '@signozhq/ui/input-number';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { ChevronUp, Info } from '@signozhq/icons';
 import {
@@ -111,17 +111,19 @@ function BucketOptions({
 	);
 
 	const handleMaxValueChange = useCallback(
-		(value: number | null): void => {
-			setMaxValue(value);
-			emitLinear(value, numBuckets);
+		(value: number | string | null): void => {
+			const next = value === null || value === '' ? null : Number(value);
+			setMaxValue(next);
+			emitLinear(next, numBuckets);
 		},
 		[emitLinear, numBuckets],
 	);
 
 	const handleNumBucketsChange = useCallback(
-		(value: number | null): void => {
-			setNumBuckets(value);
-			emitLinear(maxValue, value);
+		(value: number | string | null): void => {
+			const next = value === null || value === '' ? null : Number(value);
+			setNumBuckets(next);
+			emitLinear(maxValue, next);
 		},
 		[emitLinear, maxValue],
 	);
@@ -205,29 +207,29 @@ function BucketOptions({
 
 				{kind === Querybuildertypesv5BucketsKindDTO.linear && (
 					<>
-						<div className={cx(styles.field, styles.numberField)}>
+						<div className={styles.field}>
 							<span className={styles.label}>Max value</span>
-							<Input.Number
+							<InputNumber
+								className={styles.numberInput}
 								min={0}
 								value={maxValue}
 								onChange={handleMaxValueChange}
 								placeholder="Required"
-								status={maxValue !== null && maxValue <= 0 ? 'danger' : undefined}
-								width={104}
-								testId="bucket-options-max-value"
+								status={maxValue !== null && maxValue <= 0 ? 'error' : undefined}
+								data-testid="bucket-options-max-value"
 							/>
 						</div>
-						<div className={cx(styles.field, styles.numberField)}>
+						<div className={styles.field}>
 							<span className={styles.label}>Buckets</span>
-							<Input.Number
+							<InputNumber
+								className={styles.numberInput}
 								min={1}
 								max={MAX_NUM_BUCKETS}
-								format={{ maximumFractionDigits: 0 }}
+								precision={0}
 								value={numBuckets}
 								onChange={handleNumBucketsChange}
 								placeholder={`Default ${DEFAULT_NUM_BUCKETS}`}
-								width={104}
-								testId="bucket-options-num-buckets"
+								data-testid="bucket-options-num-buckets"
 							/>
 						</div>
 					</>

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss

@@ -65,6 +65,14 @@
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
+
+		// Meant to fix the query builder colors
+		--input-background: var(--l2-background);
+		--input-hover-background: var(--l2-background);
+		--input-focus-background: var(--l2-background);
+		--input-border-color: var(--l2-border);
+		--input-hover-border-color: var(--internal-ant-border-color-hover);
+		--input-focus-border-color: var(--internal-ant-border-color-hover);
 	}
 
 	&-aggregation-container {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -181,7 +181,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		expect(limitInput).toBeInTheDocument();
 		expect(limitInput).toHaveAttribute('type', 'number');
 		expect(limitInput).toHaveAttribute('name', 'limit');
-		expect(limitInput).toHaveAttribute('data-testid', 'input-Limit-field');
+		expect(limitInput).toHaveAttribute('data-testid', 'input-Limit');
 	});
 
 	it('Cmd+Enter on an input triggers handleRunQuery via container handler', async () => {

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -165,7 +165,7 @@ describe('QueryAddOns', () => {
 			/>,
 		);
 
-		const input = screen.getByTestId('input-Limit-field') as HTMLInputElement;
+		const input = screen.getByTestId('input-Limit') as HTMLInputElement;
 		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
 		expect(input.value).toBe('5');
 
@@ -181,8 +181,8 @@ describe('QueryAddOns', () => {
 	});
 
 	it.each([
-		[QueryBuilderField.Limit, 'input-Limit-field', 'placeholder'],
-		[QueryBuilderField.Legend, 'input-Legend format-field', 'placeholder'],
+		[QueryBuilderField.Limit, 'input-Limit', 'placeholder'],
+		[QueryBuilderField.Legend, 'input-Legend format', 'placeholder'],
 		[QueryBuilderField.GroupBy, 'groupby', 'data-placeholder'],
 		[QueryBuilderField.Having, 'having-change', 'data-placeholder'],
 		[QueryBuilderField.OrderBy, 'orderby', 'data-placeholder'],
@@ -223,7 +223,7 @@ describe('QueryAddOns', () => {
 
 		fireEvent.click(screen.getByTestId('query-add-on-limit'));
 
-		expect(screen.getByTestId('input-Limit-field')).toHaveAttribute(
+		expect(screen.getByTestId('input-Limit')).toHaveAttribute(
 			'placeholder',
 			'Enter limit',
 		);
@@ -247,9 +247,7 @@ describe('QueryAddOns', () => {
 		);
 
 		expect(screen.getByTestId('order-by-content')).toBeInTheDocument();
-		const limitInput = screen.getByTestId(
-			'input-Limit-field',
-		) as HTMLInputElement;
+		const limitInput = screen.getByTestId('input-Limit') as HTMLInputElement;
 		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
 		expect(limitInput.value).toBe('7');
 	});
@@ -579,7 +577,7 @@ describe('QueryAddOns', () => {
 			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
 
 			await user.click(screen.getByRole('button', { name: 'Linear' }));
-			await user.type(screen.getByTestId('bucket-options-max-value-field'), '500');
+			await user.type(screen.getByTestId('bucket-options-max-value'), '500');
 
 			await waitFor(() => {
 				expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -6,6 +6,14 @@
 	border-bottom: 1px solid var(--l1-border);
 }
 
+.search {
+	--input-background: var(--l2-background);
+	--input-hover-background: var(--l2-background);
+	--input-focus-background: var(--l2-background);
+	--input-border-color: var(--l2-border);
+	--input-focus-border-color: var(--l2-border);
+}
+
 .searchSpinner {
 	color: var(--l2-foreground);
 	animation: spin 0.8s linear infinite;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -19,9 +19,7 @@ import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryInd
 import { DEFAULT_VISIBLE_ITEMS_COUNT } from '../constants';
 import useCheckboxDisclosure from '../useCheckboxDisclosure';
 import useCheckboxFilterActions from '../useCheckboxFilterActions';
-import useCheckboxFilterState, {
-	FILTER_DISABLED_REASON,
-} from '../useCheckboxFilterState';
+import useCheckboxFilterState from '../useCheckboxFilterState';
 import { useFieldValues } from './useFieldValues';
 import { useExistingQuery } from './useExistingQuery';
 import { isKeyMatch } from '../utils';
@@ -210,8 +208,7 @@ export default function CheckboxFilterV2(
 								placeholder="Filter values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}
-								disabledTooltip={FILTER_DISABLED_REASON}
-								testId="checkbox-filter-search"
+								data-testid="checkbox-filter-search"
 								suffix={
 									isFetching ? (
 										<LoaderCircle

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.module.scss

@@ -37,7 +37,6 @@
 	align-items: center;
 	justify-items: end;
 
-	// Compact enough to sit inside the 24px value row.
 	--button-height: 21px;
 	--button-padding: var(--spacing-5);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -80,7 +80,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			await screen.findByTestId('checkbox-value-row-production');
 			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
 
-			const searchInput = screen.getByTestId('checkbox-filter-search-field');
+			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
 			await waitFor(() => {
@@ -198,7 +198,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			// Related values now appear in "Related" section (no badge, uses divider instead)
 			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
 
-			const searchInput = screen.getByTestId('checkbox-filter-search-field');
+			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
 			await waitFor(() => {
@@ -250,7 +250,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
-			const searchInput = screen.getByTestId('checkbox-filter-search-field');
+			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
 			await waitFor(() => {
@@ -295,7 +295,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-prod');
 
-			const searchInput = screen.getByTestId('checkbox-filter-search-field');
+			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'xyz-no-match');
 
 			await waitFor(() => {
@@ -404,7 +404,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 
 			await screen.findByTestId('checkbox-value-row-pod-a-v1');
 
-			const searchInput = screen.getByTestId('checkbox-filter-search-field');
+			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'pod-a');
 
 			// After search, both sections should still appear with filtered results
@@ -574,7 +574,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			);
 
 			await screen.findByTestId('checkbox-value-row-value-00');
-			await user.type(screen.getByTestId('checkbox-filter-search-field'), '11');
+			await user.type(screen.getByTestId('checkbox-filter-search'), '11');
 			await waitFor(() =>
 				expect(
 					screen.queryByTestId('checkbox-value-row-value-00'),
@@ -586,7 +586,7 @@ describe('CheckboxFilterV2 - interactions', () => {
 			await user.click(header);
 
 			await screen.findByTestId('checkbox-value-row-value-00');
-			expect(screen.getByTestId('checkbox-filter-search-field')).toHaveValue('');
+			expect(screen.getByTestId('checkbox-filter-search')).toHaveValue('');
 		});
 	});
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -111,7 +111,7 @@ describe('CheckboxFilterV2 - states', () => {
 
 			await screen.findByTestId('checkbox-value-row-production');
 
-			const searchInput = screen.getByTestId('checkbox-filter-search-field');
+			const searchInput = screen.getByTestId('checkbox-filter-search');
 			await user.type(searchInput, 'prod');
 
 			await waitFor(() => {

frontend/src/components/QuickFilters/FilterRenderers/Duration/DurationSection.tsx

@@ -8,7 +8,7 @@ import {
 	useState,
 } from 'react';
 import { Input } from 'antd';
-import { Slider, type SliderRangeValue } from '@signozhq/ui/slider';
+import { Slider } from '@signozhq/ui/slider';
 import { getMs } from 'utils/timeUtils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 
@@ -90,13 +90,13 @@ export function DurationSection(props: DurationProps): JSX.Element {
 		debouncedFunction(min, max);
 	};
 
-	const onRangeHandler = (value: SliderRangeValue): void => {
-		const [min, max] = value;
+	const onRangeHandler = (value: number | number[]): void => {
+		const [min, max] = value as number[];
 		updateDurationFilter(min.toString(), max.toString());
 	};
 
-	const formatTooltipValue = useCallback(
-		(value: number): string => `${value.toString()}ms`,
+	const TipComponent = useCallback(
+		(value: number) => <div>{`${value.toString()}ms`}</div>,
 		[],
 	);
 
@@ -125,14 +125,13 @@ export function DurationSection(props: DurationProps): JSX.Element {
 				/>
 			</div>
 			<div className="duration-input-slider">
-				<Slider.Range
+				<Slider
 					min={0}
 					max={100000}
-					color="primary"
-					tooltip
-					formatValue={formatTooltipValue}
+					range
+					tooltip={{ formatter: TipComponent }}
 					onChange={(value): void => {
-						const [min, max] = value;
+						const [min, max] = value as number[];
 						onRangeSliderHandler([String(min), String(max)]);
 					}}
 					onAfterChange={onRangeHandler}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -59,8 +59,7 @@
 				min-width: 70px;
 			}
 
-			// Query selector themed as the primary sync chip; the Combobox has no
-			// primary color variant.
+			.sync-tag,
 			.select-box {
 				display: flex;
 				padding: 5px 9px;
@@ -95,18 +94,6 @@
 
 			.select-box-item {
 				min-width: 60px;
-				text-transform: uppercase;
-				--combobox-trigger-background: var(--primary-background);
-				--combobox-trigger-border: color-mix(
-					in srgb,
-					var(--primary-background) 20%,
-					transparent
-				);
-				--combobox-trigger-border-hover: var(--primary-background);
-				--combobox-trigger-label: var(--primary-foreground);
-				--combobox-trigger-icon: var(--primary-foreground);
-				--combobox-trigger-icon-hover: var(--primary-foreground);
-				--combobox-trigger-min-block-size: 30px;
 			}
 		}
 

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -5,8 +5,14 @@ import {
 	RefreshCw,
 	Settings2 as SettingsIcon,
 } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Combobox, type ComboboxItemType } from '@signozhq/ui/combobox';
+import {
+	Combobox,
+	ComboboxCommand,
+	ComboboxContent,
+	ComboboxItem,
+	ComboboxList,
+	ComboboxTrigger,
+} from '@signozhq/ui/combobox';
 import { Skeleton } from 'antd';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
@@ -80,6 +86,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		redirectWithQueryBuilderData,
 		panelType,
 	} = useQueryBuilder();
+	const [open, setOpen] = useState(false);
 
 	// Sync lastUsedQuery when queries change (e.g., after deletion)
 	const validQueryIndex = useMemo(
@@ -106,16 +113,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		}));
 	}, [currentQuery?.builder?.queryData]);
 
-	const queryItems = useMemo<ComboboxItemType[]>(
-		() =>
-			queryOptions.map((option) => ({
-				type: 'item',
-				value: String(option.value),
-				label: option.label,
-			})),
-		[queryOptions],
-	);
-
 	// Show dropdown in ListView only for TRACES_EXPLORER source
 	const shouldShowDropdownInListView =
 		isListView && quickFilterSource === QuickFiltersSource.TRACES_EXPLORER;
@@ -191,28 +188,42 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 			{queryOptions.length > 1 &&
 			!isAIObservabilityRowView &&
 			(!isListView || shouldShowDropdownInListView) ? (
-				<div className="select-box">
-					<Combobox
-						aria-label="Select a query"
+				<Combobox open={open} onOpenChange={setOpen}>
+					<ComboboxTrigger
 						placeholder="Select a query"
-						searchInputProps={{ placeholder: 'Search queries' }}
-						items={queryItems}
-						value={String(validQueryIndex)}
-						onChange={(value): void => {
-							if (value !== undefined) {
-								handleQueryChange(Number(value));
-							}
-						}}
+						value={queryOptions.find((f) => f.value === validQueryIndex)?.label || ''}
+						className="select-box"
 					/>
-				</div>
+					{open && (
+						<ComboboxContent>
+							<ComboboxCommand>
+								<ComboboxList>
+									{queryOptions.map((option) => (
+										<ComboboxItem
+											key={option.value}
+											value={String(option.value)}
+											onSelect={(): void => {
+												handleQueryChange(option.value);
+												setOpen(false);
+											}}
+											isSelected={validQueryIndex === option.value}
+										>
+											{option.label}
+										</ComboboxItem>
+									))}
+								</ComboboxList>
+							</ComboboxCommand>
+						</ComboboxContent>
+					)}
+				</Combobox>
 			) : (
 				displayedQueryName && (
 					<Tooltip
 						title={`Filter currently in sync with query ${displayedQueryName}`}
 					>
-						<Badge variant="solid" color="primary" textTransform="uppercase">
+						<Typography.Text className="sync-tag">
 							{displayedQueryName}
-						</Badge>
+						</Typography.Text>
 					</Tooltip>
 				)
 			)}

frontend/src/components/QuickFilters/stories/QuickFilters.stories.mocks.tsx

@@ -98,15 +98,6 @@ export const noSavedFiltersHandler = rest.get(
 		),
 );
 
-export const noSavedTracesFiltersHandler = rest.get(
-	'http://localhost/api/v2/quick_filters/traces',
-	(_req, res, ctx) =>
-		res(
-			ctx.status(200),
-			ctx.json(quickFiltersResponse(QuickfiltertypesSourceDTO.traces, [])),
-		),
-);
-
 export const loadingFiltersHandlers = [
 	rest.get('http://localhost/api/v2/quick_filters/logs', (_req, res, ctx) =>
 		res(ctx.delay('infinite')),

frontend/src/components/QuickFilters/stories/QuickFilters.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ComponentProps, ComponentType } from 'react';
 import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { withCanvas } from '@/storybook/decorators/withCanvas';
 import type { GlobalMockArgs } from '@/storybook/globals';
@@ -17,9 +16,8 @@ import {
 	queryBuilder,
 	selectedServiceQueryBuilder,
 	noSavedFiltersHandler,
-	noSavedTracesFiltersHandler,
 } from './QuickFilters.stories.mocks';
-import { FiltersType, QuickFiltersSource } from '../types';
+import { QuickFiltersSource } from '../types';
 
 const meta = {
 	title: 'Components/Quick Filters',
@@ -60,10 +58,10 @@ type TooltipsStory = StoryObj<
  * silence.
  */
 const settingsControl = (canvasElement: HTMLElement): Promise<HTMLElement> =>
-	waitFor(async () => {
+	waitFor(() => {
 		const control = within(canvasElement).getByTestId('settings-icon-container');
 
-		await expect(control).not.toHaveAttribute('aria-disabled', 'true');
+		expect(control).not.toHaveAttribute('aria-disabled', 'true');
 
 		return control;
 	});
@@ -112,29 +110,6 @@ export const SelectedExpandedCheckbox: Story = {
 	},
 };
 
-/** The duration min/max row, which a checkbox-only config never reaches. */
-export const DurationFilter: Story = {
-	args: {
-		quickFilterSource: QuickFiltersSource.TRACES_EXPLORER,
-		config: [
-			...checkboxConfig,
-			{
-				attributeKey: {
-					dataType: DataTypes.Float64,
-					key: 'duration_nano',
-					type: '',
-				},
-				defaultOpen: true,
-				title: 'Duration',
-				type: FiltersType.DURATION,
-			},
-		],
-	},
-	parameters: {
-		msw: { handlers: [noSavedTracesFiltersHandler, ...handlers] },
-	},
-};
-
 /**
  * Every tooltip the panel renders, held open: the reveal on each truncated
  * filter value. Nothing bounds those values, so the panel is answered with

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -182,29 +182,15 @@ describe('Quick Filters', () => {
 			expect(screen.getByRole('option', { name: 'Query C' })).toBeInTheDocument();
 		});
 
-		// Select Query B with the keyboard: jsdom cannot deliver the pointer
-		// click Base UI expects, so filter through the search row and pick with
-		// Enter instead
-		await waitFor(() => {
-			expect(
-				screen.getByRole('combobox', { name: 'Search queries' }),
-			).toHaveFocus();
-		});
-		await user.keyboard('Query B');
-		await waitFor(() => {
-			expect(
-				screen.queryByRole('option', { name: 'Query A' }),
-			).not.toBeInTheDocument();
-		});
-		await user.keyboard('{ArrowDown}{Enter}');
+		// Select Query B
+		const queryBOption = screen.getByRole('option', { name: 'Query B' });
+		await user.click(queryBOption);
 
 		// Verify setLastUsedQuery was called with index 1
 		await waitFor(() => {
 			expect(setLastUsedQuery).toHaveBeenCalledWith(1);
 		});
-		// filtering and picking through the search row takes Base UI past the
-		// default 5s under jsdom
-	}, 20000);
+	});
 
 	it('should not display query dropdown in ListView', () => {
 		(useQueryBuilder as jest.Mock).mockReturnValue({

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -1,4 +1,4 @@
-import { Check, Copy, SolidInfoCircle } from '@signozhq/icons';
+import { Check, Copy } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
@@ -46,9 +46,11 @@ function KeyCreatedPhase({
 			</div>
 
 			<div className="add-key-modal__callout-wrapper">
-				<Callout color="info" size="sm" icon={<SolidInfoCircle />}>
-					Store the key securely. This is the only time it will be displayed.
-				</Callout>
+				<Callout
+					type="info"
+					showIcon
+					title="Store the key securely. This is the only time it will be displayed."
+				/>
 			</div>
 		</div>
 	);

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -53,6 +53,7 @@ function KeyFormPhase({
 							<Input
 								id="key-name"
 								placeholder="Enter key name e.g.: Service Owner"
+								className="add-key-modal__input"
 								testId="add-key-name-input"
 								{...register('keyName', {
 									required: true,

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,
@@ -119,7 +119,7 @@ function AddKeyModal(): JSX.Element {
 
 	useEffect(() => {
 		if (copyState.error) {
-			toast.danger('Failed to copy key', { action: { label: 'Dismiss' } });
+			toast.error('Failed to copy key');
 		}
 	}, [copyState.error]);
 

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -72,6 +72,7 @@ function EditKeyForm({
 					) : (
 						<Input
 							id="edit-key-name"
+							className="edit-key-modal__input"
 							placeholder="Enter key name"
 							{...register('name')}
 						/>

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -7,7 +7,7 @@ import {
 	buildSADetachPermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -9,7 +9,7 @@ import { useQueryClient } from 'react-query';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { buildSAAttachPermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import {
 	setupAuthzAdmin,
@@ -12,9 +12,9 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 const mockCopyToClipboard = jest.fn();
@@ -74,8 +74,7 @@ describe('AddKeyModal', () => {
 
 		// The form only renders once the checks resolve, so waiting for it also
 		// guarantees the button is no longer in its authz-loading state.
-		// The Input's testId lands on its frame; the native input is `-field`.
-		const nameInput = await screen.findByTestId('add-key-name-input-field');
+		const nameInput = await screen.findByTestId('add-key-name-input');
 		const createBtn = await screen.findByTestId('add-key-submit-btn');
 
 		expect(createBtn).toHaveAttribute('aria-disabled', 'true');
@@ -95,7 +94,7 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('add-key-name-input-field');
+		const nameInput = await screen.findByTestId('add-key-name-input');
 		const submitBtn = await screen.findByTestId('add-key-submit-btn');
 		await user.type(nameInput, 'Deploy Key');
 		await waitFor(() =>
@@ -119,9 +118,8 @@ describe('AddKeyModal', () => {
 		);
 		renderModal();
 
-		const nameInput = await screen.findByTestId<HTMLInputElement>(
-			'add-key-name-input-field',
-		);
+		const nameInput =
+			await screen.findByTestId<HTMLInputElement>('add-key-name-input');
 		const submitBtn = await screen.findByTestId('add-key-submit-btn');
 		await user.type(nameInput, 'Deploy Key');
 		await waitFor(() =>
@@ -141,7 +139,7 @@ describe('AddKeyModal', () => {
 
 		renderModal();
 
-		const nameInput = await screen.findByTestId('add-key-name-input-field');
+		const nameInput = await screen.findByTestId('add-key-name-input');
 		const submitBtn = await screen.findByTestId('add-key-submit-btn');
 		await user.type(nameInput, 'Deploy Key');
 		await waitFor(() =>

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	AUTHZ_CHECK_URL,
@@ -20,9 +20,9 @@ jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	}): React.ReactElement => children,
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 const mockToast = jest.mocked(toast);

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
@@ -16,9 +16,9 @@ jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	}): React.ReactElement => children,
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 const mockToast = jest.mocked(toast);

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -77,17 +77,6 @@
 			flex: none;
 		}
 	}
-
-	.sa-status-cell {
-		[data-slot='badge'] {
-			padding: var(--padding-1) var(--padding-2);
-			align-items: center;
-			font-size: var(--uppercase-small-500-font-size);
-			font-weight: var(--uppercase-small-500-font-weight);
-			line-height: 100%;
-			letter-spacing: 0.44px;
-		}
-	}
 }
 
 .sa-name-email-cell {

frontend/src/components/TagKeyValueInput/TagKeyValueInput.module.scss

@@ -18,11 +18,17 @@
 .input {
 	flex: 1;
 	min-width: 120px;
+	border: none;
+	background: transparent;
+
+	&::placeholder {
+		color: var(--l3-foreground);
+	}
 }
 
-// Wrapper around the inline chip-edit Input; width lives on the Input prop.
 .editInput {
-	--input-height: 24px;
+	width: 160px;
+	height: 24px;
 }
 
 .error {

frontend/src/components/TagKeyValueInput/TagKeyValueInput.test.tsx

@@ -9,8 +9,7 @@ type User = ReturnType<typeof userEvent.setup>;
 
 const startEditingFirstChip = async (user: User): Promise<HTMLElement> => {
 	await user.click(screen.getAllByTestId(`${TID}-chip`)[0]);
-	// The Input's testId lands on its frame; the native input is `${testId}-field`.
-	return screen.getByTestId(`${TID}-edit-field`);
+	return screen.getByTestId(`${TID}-edit`);
 };
 
 describe('TagKeyValueInput — inline chip edit', () => {
@@ -102,7 +101,7 @@ describe('TagKeyValueInput — backend-rule validation', () => {
 		const onTagsChange = jest.fn();
 		render(<TagKeyValueInput tags={[]} onTagsChange={onTagsChange} />);
 
-		const input = screen.getByTestId(`${TID}-field`);
+		const input = screen.getByTestId(TID);
 		await user.type(input, 'env:pro d{Enter}');
 
 		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -115,22 +115,21 @@ function TagKeyValueInput({
 			<div className={styles.field}>
 				{tags.map((tag, index) =>
 					index === editIndex ? (
-						<span key={tag} className={styles.editInput}>
-							<Input
-								width={160}
-								value={editValue}
-								autoFocus
-								testId={`${testId}-edit`}
-								onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-									setEditValue(e.target.value);
-									if (error) {
-										setError('');
-									}
-								}}
-								onKeyDown={handleEditKeyDown}
-								onBlur={(): void => commitEdit(true)}
-							/>
-						</span>
+						<Input
+							key={tag}
+							className={styles.editInput}
+							value={editValue}
+							autoFocus
+							testId={`${testId}-edit`}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+								setEditValue(e.target.value);
+								if (error) {
+									setError('');
+								}
+							}}
+							onKeyDown={handleEditKeyDown}
+							onBlur={(): void => commitEdit(true)}
+						/>
 					) : (
 						<Pill.Closeable
 							key={tag}
@@ -143,17 +142,14 @@ function TagKeyValueInput({
 						</Pill.Closeable>
 					),
 				)}
-				<div className={styles.input}>
-					<Input
-						variant="unstyled"
-						width="100%"
-						value={inputValue}
-						placeholder={placeholder}
-						testId={testId}
-						onChange={handleChange}
-						onKeyDown={handleKeyDown}
-					/>
-				</div>
+				<Input
+					className={styles.input}
+					value={inputValue}
+					placeholder={placeholder}
+					testId={testId}
+					onChange={handleChange}
+					onKeyDown={handleKeyDown}
+				/>
 			</div>
 			{error && (
 				<Typography className={styles.error} data-testid={`${testId}-error`}>

frontend/src/components/TanStackTableView/ColumnSelector.module.scss

@@ -1,7 +1,6 @@
 .popoverContent {
 	min-width: 180px;
-	// The popover shell carries no padding of its own, so the content owns it.
-	padding: var(--spacing-8);
+	padding: 8px;
 }
 
 .title {

frontend/src/components/TanStackTableView/ColumnSelector.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { Columns3 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
-import { Popover } from '@signozhq/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import styles from './ColumnSelector.module.scss';
 import type { TableColumnDef } from './types';
 import { hideColumn, showColumn, useHiddenColumnIds } from './useColumnStore';
@@ -38,12 +38,8 @@ function ColumnSelector<TData>({
 	};
 
 	return (
-		<Popover
-			nativeButton
-			side="bottom"
-			align="end"
-			aria-label="Toggle columns"
-			trigger={
+		<Popover>
+			<PopoverTrigger asChild>
 				<Button
 					variant="outlined"
 					size="sm"
@@ -53,9 +49,8 @@ function ColumnSelector<TData>({
 				>
 					Columns
 				</Button>
-			}
-		>
-			<div className={styles.popoverContent}>
+			</PopoverTrigger>
+			<PopoverContent align="end" className={styles.popoverContent}>
 				<div className={styles.title}>Toggle Columns</div>
 				<div className={styles.columnList}>
 					{selectableColumns.map((col) => {
@@ -75,7 +70,7 @@ function ColumnSelector<TData>({
 						);
 					})}
 				</div>
-			</div>
+			</PopoverContent>
 		</Popover>
 	);
 }

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -111,6 +111,16 @@
 	margin-left: auto;
 }
 
+.tanstackColumnActionsContent {
+	width: 140px;
+	padding: 0;
+	background: var(--tanstack-table-header-cell-bg, var(--l2-background));
+	border: 1px solid
+		var(--tanstack-table-header-cell-actions-border-color, var(--l2-border));
+	border-radius: 4px;
+	box-shadow: none;
+}
+
 .tanstackRemoveColumnAction {
 	display: flex;
 	align-items: center;

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -14,7 +14,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { useSortable } from '@dnd-kit/sortable';
-import { Popover } from '@signozhq/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import cx from 'classnames';
 
@@ -223,13 +223,8 @@ function TanStackHeaderRow<TData>({
 					</span>
 				)}
 				{isColumnRemovable && (
-					<Popover
-						nativeButton={false}
-						side="bottom"
-						align="end"
-						width={140}
-						aria-label={`Column actions for ${headerTitleAttr}`}
-						trigger={
+					<Popover>
+						<PopoverTrigger asChild>
 							<span
 								role="button"
 								aria-label={`Column actions for ${headerTitleAttr}`}
@@ -240,20 +235,25 @@ function TanStackHeaderRow<TData>({
 							>
 								<Ellipsis size="md" />
 							</span>
-						}
-					>
-						<button
-							type="button"
-							className={headerStyles.tanstackRemoveColumnAction}
-							onClick={(event): void => {
-								event.preventDefault();
-								event.stopPropagation();
-								onRemoveColumn?.(column.id);
-							}}
+						</PopoverTrigger>
+						<PopoverContent
+							align="end"
+							sideOffset={6}
+							className={headerStyles.tanstackColumnActionsContent}
 						>
-							<X size="md" className={headerStyles.tanstackRemoveColumnActionIcon} />
-							Remove column
-						</button>
+							<button
+								type="button"
+								className={headerStyles.tanstackRemoveColumnAction}
+								onClick={(event): void => {
+									event.preventDefault();
+									event.stopPropagation();
+									onRemoveColumn?.(column.id);
+								}}
+							>
+								<X size="md" className={headerStyles.tanstackRemoveColumnActionIcon} />
+								Remove column
+							</button>
+						</PopoverContent>
 					</Popover>
 				)}
 			</span>

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -17,7 +17,7 @@ import {
 	horizontalListSortingStrategy,
 	SortableContext,
 } from '@dnd-kit/sortable';
-import { Combobox } from '@signozhq/ui/combobox';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Pagination } from '@signozhq/ui/pagination';
 import type { Row } from '@tanstack/react-table';
 import {
@@ -675,16 +675,14 @@ function TanStackTableInner<TData, TItemKey = string>(
 						/>
 						{pagination.showPageSize !== false && (
 							<div className={viewStyles.paginationPageSize}>
-								<Combobox
+								<ComboboxSimple
 									testId="pagination-page-size"
-									aria-label="Rows per page"
-									placeholder="Page size"
-									searchInputProps={{ placeholder: 'Search page sizes' }}
 									value={limit?.toString()}
-									onChange={(value: string | undefined): void => {
-										const nextValue = value ?? '10';
-										setLimit(+nextValue);
-										pagination.onLimitChange?.(+nextValue);
+									defaultValue="10"
+									onChange={(value): void => {
+										value ??= '10';
+										setLimit(+value);
+										pagination.onLimitChange?.(+value);
 										if (page !== 1) {
 											setPage(1);
 											pagination.onPageChange?.(1);

frontend/src/components/TanStackTableView/TanStackTableView.module.scss

@@ -125,6 +125,7 @@
 
 .paginationPageSize {
 	width: 80px;
+	--combobox-trigger-height: 2rem;
 }
 
 .paginationTotalCount {

frontend/src/components/TanStackTableView/utils.ts

@@ -2,7 +2,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { ColumnDef } from '@tanstack/react-table';
 
 import { RowKeyData, TableColumnDef } from './types';
-import type { ComboboxItemType } from '@signozhq/ui/combobox';
+import { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 
 export const getColumnId = <TData>(column: TableColumnDef<TData>): string =>
 	column.id;
@@ -164,12 +164,11 @@ const DEFAULT_PAGE_SIZES = [10, 20, 30, 50, 100];
 
 export function buildPageSizeItems(
 	calculatedSize?: number | null,
-): ComboboxItemType[] {
-	const items: ComboboxItemType[] = [];
+): ComboboxSimpleItem[] {
+	const items: ComboboxSimpleItem[] = [];
 
 	if (calculatedSize) {
 		items.push({
-			type: 'item',
 			value: calculatedSize.toString(),
 			label: `Auto (${calculatedSize})`,
 			displayValue: calculatedSize.toString(),
@@ -179,7 +178,6 @@ export function buildPageSizeItems(
 	for (const size of DEFAULT_PAGE_SIZES) {
 		if (size !== calculatedSize) {
 			items.push({
-				type: 'item',
 				value: size.toString(),
 				label: size.toString(),
 				displayValue: size.toString(),

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -7,6 +7,14 @@
 [data-slot='dialog-content'] {
 	position: fixed;
 	z-index: 1001 !important;
+	background: var(--l1-background);
+	color: var(--l1-foreground);
+
+	/* Override the background and color of the dialog content from the theme */
+	> div {
+		background: var(--l1-background);
+		color: var(--l1-foreground);
+	}
 }
 
 .cmdk-section-heading [cmdk-group-heading] {

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -1,8 +1,13 @@
 import React, { useEffect } from 'react';
+import cx from 'classnames';
 import {
-	Command,
-	type CommandActionItemType,
-	type CommandItemType,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandShortcut,
 } from '@signozhq/ui/command';
 import logEvent from 'api/common/logEvent';
 import {
@@ -21,10 +26,7 @@ import { navigate } from 'lib/router/navigation';
 import { useAppLocation } from 'lib/router/useAppLocation';
 import { ROLES as UserRole } from 'types/roles';
 
-import {
-	type CmdAction,
-	createShortcutActions,
-} from '../../constants/shortcutActions';
+import { createShortcutActions } from '../../constants/shortcutActions';
 import { useCmdK } from '../../providers/cmdKProvider';
 
 import './cmdKPalette.scss';
@@ -56,6 +58,17 @@ const openAuthZDevModal = IS_DEV
 		}
 	: undefined;
 
+type CmdAction = {
+	id: string;
+	name: string;
+	shortcut?: string[];
+	keywords?: string;
+	section?: string;
+	icon?: React.ReactNode;
+	roles?: UserRole[];
+	perform: () => void;
+};
+
 export function CmdKPalette({
 	userRole,
 }: {
@@ -63,7 +76,7 @@ export function CmdKPalette({
 }): JSX.Element | null {
 	const { open, setOpen } = useCmdK();
 
-	const { setAutoSwitch, setTheme } = useThemeMode();
+	const { setAutoSwitch, setTheme, theme } = useThemeMode();
 	const location = useAppLocation();
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const startNewConversation = useAIAssistantStore(
@@ -133,28 +146,8 @@ export function CmdKPalette({
 		(a) => !a.roles || a.roles.includes(userRole),
 	);
 
-	const toCommandItem = (action: CmdAction): CommandActionItemType => ({
-		type: 'item',
-		value: action.id,
-		label: action.name,
-		prefix: action.icon,
-		searchMetadata: action.keywords,
-		shortcut:
-			action.shortcut && action.shortcut.length > 0
-				? action.shortcut.join(' • ')
-				: undefined,
-		onClick: (): void => {
-			// the palette closes itself after a pick, also when this throws
-			try {
-				action.perform();
-			} catch (e) {
-				console.error('Error invoking action', e);
-			}
-		},
-	});
-
 	// group permitted actions by section
-	const items: CommandItemType[] = ((): CommandItemType[] => {
+	const grouped: [string, CmdAction[]][] = ((): [string, CmdAction[]][] => {
 		const map = new Map<string, CmdAction[]>();
 
 		permitted.forEach((a) => {
@@ -168,25 +161,61 @@ export function CmdKPalette({
 			}
 		});
 
-		return Array.from(map.entries()).map(([section, sectionActions]) => ({
-			type: 'group',
-			value: section.toLowerCase().replace(/\s+/g, '-'),
-			label: section,
-			items: sectionActions.map(toCommandItem),
-		}));
+		return Array.from(map.entries());
 	})();
 
+	const handleInvoke = (action: CmdAction): void => {
+		try {
+			action.perform();
+		} catch (e) {
+			console.error('Error invoking action', e);
+		} finally {
+			setOpen(false);
+		}
+	};
+
 	return (
 		<>
-			<Command
-				label="Command palette"
+			<CommandDialog
 				open={open}
 				onOpenChange={setOpen}
-				items={items}
-				searchInputProps={{ placeholder: 'Search…' }}
-				noContent="No results"
-				testId="cmdk-palette"
-			/>
+				position="top"
+				offset={110}
+			>
+				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+				<CommandList className="cmdk-list-scroll">
+					<CommandEmpty>No results</CommandEmpty>
+					{grouped.map(([section, items]) => (
+						<CommandGroup
+							key={section}
+							heading={section}
+							className="cmdk-section-heading"
+						>
+							{items.map((it) => (
+								<CommandItem
+									key={it.id}
+									onSelect={(): void => handleInvoke(it)}
+									value={it.name}
+									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+								>
+									<span
+										className={cx(
+											'cmd-item-icon',
+											it.id === 'ai-assistant' && 'noz-icon',
+										)}
+									>
+										{it.icon}
+									</span>
+									{it.name}
+									{it.shortcut && it.shortcut.length > 0 && (
+										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+									)}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					))}
+				</CommandList>
+			</CommandDialog>
 			{IS_DEV && AuthZDevModal && (
 				<React.Suspense fallback={null}>
 					<AuthZDevModal />

frontend/src/constants/localStorage.ts

@@ -13,7 +13,6 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
 	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
 	AI_OBSERVABILITY_TRACE_VIEW_COLUMNS = 'AI_OBSERVABILITY_TRACE_VIEW_COLUMNS',
-	AI_OBSERVABILITY_PANEL_COLUMNS = 'AI_OBSERVABILITY_PANEL_COLUMNS',
 	AI_OBSERVABILITY_LIST_COLUMNS = 'AI_OBSERVABILITY_LIST_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',

frontend/src/constants/shortcutActions.tsx

@@ -26,7 +26,7 @@ export type CmdAction = {
 	shortcut?: string[];
 	keywords?: string;
 	section?: string;
-	icon?: React.ReactElement;
+	icon?: React.ReactNode;
 	roles?: ROLES[];
 	perform: () => void;
 };

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.module.scss

@@ -194,6 +194,25 @@
 	}
 }
 
+.contextPopover {
+	width: 480px !important;
+	max-width: min(92vw, 480px);
+	margin-left: 16px;
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	background: var(--l1-background);
+	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
+	padding: 8px;
+	// Clip horizontal overflow so long entity titles can't poke past the
+	// popover's right edge. Vertical overflow is handled inside
+	// `.contextPopoverEntities`.
+	overflow-x: hidden;
+
+	--popover-padding: 0;
+
+	z-index: 1000;
+}
+
 .contextPopoverContent {
 	display: grid;
 	grid-template-columns: 180px 1fr;
@@ -236,6 +255,11 @@
 	width: 90%;
 }
 
+.contextPopoverSearchInput {
+	width: 100%;
+	box-sizing: border-box;
+}
+
 .contextPopoverEntities {
 	display: flex;
 	flex-direction: column;

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -10,8 +10,8 @@ import cx from 'classnames';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { Popover, usePopoverHandle } from '@signozhq/ui/popover';
-import { toast } from '@signozhq/ui/toast';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
+import { toast } from '@signozhq/ui/sonner';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import type { UploadFile } from 'antd';
 import getSessionStorage from 'api/browser/sessionstorage/get';
@@ -254,13 +254,6 @@ export default function ChatInput({
 	const [activeContextCategory, setActiveContextCategory] =
 		useState<ContextCategory>('Dashboards');
 	const [pickerSearchQuery, setPickerSearchQuery] = useState('');
-	// The picker resets to its first category on every open and close, and the entity queries
-	// below are gated on whether it is showing.
-	const contextPicker = usePopoverHandle((open) => {
-		setIsContextPickerOpen(open);
-		setActiveContextCategory('Dashboards');
-		setPickerSearchQuery('');
-	});
 	// Refs to each category tab so we can move DOM focus to the newly-active
 	// tab on ArrowUp/ArrowDown. Without this the roving-tabindex pattern
 	// stalls: focus stays on the original button (whose closure has the old
@@ -295,7 +288,6 @@ export default function ChatInput({
 	const committedTextRef = useRef('');
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const inputRootRef = useRef<HTMLDivElement>(null);
-	const addContextRef = useRef<HTMLButtonElement>(null);
 
 	const capText = useCallback(
 		(value: string) => value.slice(0, MAX_INPUT_LENGTH),
@@ -308,24 +300,20 @@ export default function ChatInput({
 			const atIndex = beforeCaret.lastIndexOf('@');
 			// `@` only triggers at a word start, so words containing `@` stay plain text.
 			if (atIndex < 0 || /\S/.test(beforeCaret.charAt(atIndex - 1))) {
-				contextPicker.close();
+				setIsContextPickerOpen(false);
 				setMentionRange(null);
 				return;
 			}
 			const query = beforeCaret.slice(atIndex + 1);
 			if (/\s/.test(query)) {
-				contextPicker.close();
+				setIsContextPickerOpen(false);
 				setMentionRange(null);
 				return;
 			}
-			// Typed `@`, not pressed: the picker still belongs beside the button it has
-			// always hung off, so it is shown against that element rather than the caret.
-			if (addContextRef.current) {
-				contextPicker.showAt(addContextRef.current);
-			}
+			setIsContextPickerOpen(true);
 			setMentionRange({ start: atIndex, end: caret });
 		},
-		[contextPicker],
+		[],
 	);
 
 	const toggleContextSelection = useCallback(
@@ -367,7 +355,7 @@ export default function ChatInput({
 			committedTextRef.current = next;
 			setMentionRange(null);
 			setPickerSearchQuery('');
-			contextPicker.close();
+			setIsContextPickerOpen(false);
 			// Defer so React commits the new value before we place the caret.
 			requestAnimationFrame(() => {
 				const el = textareaRef.current;
@@ -514,7 +502,7 @@ export default function ChatInput({
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
 			if (e.key === 'Escape' && isContextPickerOpen) {
-				contextPicker.close();
+				setIsContextPickerOpen(false);
 				return;
 			}
 			if (e.key === 'Enter' && !e.shiftKey) {
@@ -522,7 +510,7 @@ export default function ChatInput({
 				void handleSend();
 			}
 		},
-		[handleSend, isContextPickerOpen, contextPicker],
+		[handleSend, isContextPickerOpen],
 	);
 
 	const removeFile = useCallback((uid: string) => {
@@ -604,23 +592,19 @@ export default function ChatInput({
 			});
 			if (error === 'network') {
 				markVoiceUnavailable();
-				toast.danger('Voice input unavailable in this browser', {
-					action: { label: 'Dismiss' },
+				toast.error('Voice input unavailable in this browser', {
 					description:
 						'This browser cannot reach the speech recognition service. Try Google Chrome or Microsoft Edge.',
 				});
 			} else if (error === 'not-allowed') {
 				markVoiceUnavailable();
-				toast.danger('Microphone access denied', {
-					action: { label: 'Dismiss' },
+				toast.error('Microphone access denied', {
 					description:
 						'Grant microphone permission in your browser settings to use voice input.',
 				});
 			} else if (error === 'not-supported') {
 				markVoiceUnavailable();
-				toast.danger('Voice input is not supported in this browser.', {
-					action: { label: 'Dismiss' },
-				});
+				toast.error('Voice input is not supported in this browser.');
 			}
 			// `no-speech` is benign (just silence) — don't toast or hide.
 		},
@@ -1022,146 +1006,158 @@ export default function ChatInput({
 
 			<div className={styles.footer}>
 				<div className={styles.leftActions}>
-					<Button
-						ref={addContextRef}
-						disabledTooltip={disabledTooltip}
-						variant="solid"
-						color="secondary"
-						size="md"
-						disabled={disabled}
-						prefix={<Plus size={10} />}
-						aria-haspopup="dialog"
-						aria-expanded={isContextPickerOpen}
-						onClick={(event): void => contextPicker.showAt(event.currentTarget)}
-					>
-						Add Context
-					</Button>
 					<Popover
-						side="top"
-						align="end"
-						width={480}
-						maxWidth="min(92vw, 480px)"
-						handle={contextPicker}
-						aria-label="Add context"
+						open={isContextPickerOpen}
+						onOpenChange={(open): void => {
+							setIsContextPickerOpen(open);
+							if (!open) {
+								setActiveContextCategory('Dashboards');
+								setPickerSearchQuery('');
+							}
+						}}
 					>
-						<div className={styles.contextPopoverContent}>
-							<div
-								className={styles.contextPopoverCategories}
-								role="tablist"
-								aria-orientation="vertical"
-								aria-label="Context categories"
+						<PopoverTrigger asChild>
+							<Button
+								disabledTooltip={disabledTooltip}
+								variant="solid"
+								color="secondary"
+								size="md"
+								disabled={disabled}
+								onClick={(): void => {
+									setActiveContextCategory('Dashboards');
+									setPickerSearchQuery('');
+								}}
+								prefix={<Plus size={10} />}
 							>
-								{CONTEXT_CATEGORIES.map((category) => {
-									const CategoryIcon = CONTEXT_CATEGORY_ICONS[category];
-									const isActive = activeContextCategory === category;
-									return (
-										<Button
-											key={category}
-											ref={(el): void => {
-												categoryTabRefs.current.set(category, el);
-											}}
-											type="button"
-											variant="ghost"
-											color="secondary"
-											size="sm"
-											id={`ai-context-tab-${category}`}
-											// Single stable panel id shared by every tab: only the
-											// active category's tabpanel is rendered, so per-category
-											// `aria-controls` ids would point at nonexistent nodes
-											// for the two inactive tabs. APG allows a single
-											// dynamic panel whose `aria-labelledby` swaps to the
-											// active tab.
-											aria-controls="ai-context-tabpanel"
-											// Roving tabindex: only the active tab participates in
-											// the Tab sequence; arrow keys move between tabs.
-											tabIndex={isActive ? 0 : -1}
-											aria-selected={isActive}
-											width="100%"
-											onClick={(): void => {
-												setActiveContextCategory(category);
-												setPickerSearchQuery('');
-											}}
-											onKeyDown={(e): void => handleCategoryKeyDown(e, category)}
-											prefix={<CategoryIcon size={13} />}
-										>
-											<span>{category}</span>
-										</Button>
-									);
-								})}
-							</div>
-
-							<div
-								className={styles.contextPopoverRight}
-								role="tabpanel"
-								id="ai-context-tabpanel"
-								aria-labelledby={`ai-context-tab-${activeContextCategory}`}
-							>
-								<div className={styles.contextPopoverSearch}>
-									<Input
-										type="text"
-										placeholder={`Search ${activeContextCategory.toLowerCase()}…`}
-										value={pickerSearchQuery}
-										onChange={(e): void => setPickerSearchQuery(e.target.value)}
-										prefix={<Search size={12} />}
-										// Skip the picker's roving keyboard focus — typing here
-										// shouldn't move category selection.
-										onKeyDown={(e): void => {
-											e.stopPropagation();
-										}}
-									/>
+								Add Context
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent
+							className={styles.contextPopover}
+							side="top"
+							align="end"
+							sideOffset={8}
+						>
+							<div className={styles.contextPopoverContent}>
+								<div
+									className={styles.contextPopoverCategories}
+									role="tablist"
+									aria-orientation="vertical"
+									aria-label="Context categories"
+								>
+									{CONTEXT_CATEGORIES.map((category) => {
+										const CategoryIcon = CONTEXT_CATEGORY_ICONS[category];
+										const isActive = activeContextCategory === category;
+										return (
+											<Button
+												key={category}
+												ref={(el): void => {
+													categoryTabRefs.current.set(category, el);
+												}}
+												type="button"
+												variant="ghost"
+												color="secondary"
+												size="sm"
+												id={`ai-context-tab-${category}`}
+												// Single stable panel id shared by every tab: only the
+												// active category's tabpanel is rendered, so per-category
+												// `aria-controls` ids would point at nonexistent nodes
+												// for the two inactive tabs. APG allows a single
+												// dynamic panel whose `aria-labelledby` swaps to the
+												// active tab.
+												aria-controls="ai-context-tabpanel"
+												// Roving tabindex: only the active tab participates in
+												// the Tab sequence; arrow keys move between tabs.
+												tabIndex={isActive ? 0 : -1}
+												aria-selected={isActive}
+												width="100%"
+												onClick={(): void => {
+													setActiveContextCategory(category);
+													setPickerSearchQuery('');
+												}}
+												onKeyDown={(e): void => handleCategoryKeyDown(e, category)}
+												prefix={<CategoryIcon size={13} />}
+											>
+												<span>{category}</span>
+											</Button>
+										);
+									})}
 								</div>
-								<div className={styles.contextPopoverEntities}>
-									{isActiveContextLoading ? (
-										<div className={styles.contextPopoverEmpty}>
-											Loading {activeContextCategory.toLowerCase()}...
-										</div>
-									) : isActiveContextError ? (
-										<div className={styles.contextPopoverEmpty}>
-											Failed to load {activeContextCategory.toLowerCase()}.
-										</div>
-									) : filteredContextOptions.length === 0 ? (
-										<ContextPickerEmptyState
-											category={activeContextCategory}
-											query={displayQuery}
-											onPrefill={handleContextPrefill}
+
+								<div
+									className={styles.contextPopoverRight}
+									role="tabpanel"
+									id="ai-context-tabpanel"
+									aria-labelledby={`ai-context-tab-${activeContextCategory}`}
+								>
+									<div className={styles.contextPopoverSearch}>
+										<Input
+											type="text"
+											placeholder={`Search ${activeContextCategory.toLowerCase()}…`}
+											className={styles.contextPopoverSearchInput}
+											value={pickerSearchQuery}
+											onChange={(e): void => setPickerSearchQuery(e.target.value)}
+											prefix={<Search size={12} />}
+											// Skip the picker's roving keyboard focus — typing here
+											// shouldn't move category selection.
+											onKeyDown={(e): void => {
+												e.stopPropagation();
+											}}
 										/>
-									) : (
-										filteredContextOptions.map((option, index) => {
-											const isSelected = selectedContexts.some(
-												(item) =>
-													item.category === activeContextCategory &&
-													item.entityId === option.id,
-											);
+									</div>
+									<div className={styles.contextPopoverEntities}>
+										{isActiveContextLoading ? (
+											<div className={styles.contextPopoverEmpty}>
+												Loading {activeContextCategory.toLowerCase()}...
+											</div>
+										) : isActiveContextError ? (
+											<div className={styles.contextPopoverEmpty}>
+												Failed to load {activeContextCategory.toLowerCase()}.
+											</div>
+										) : filteredContextOptions.length === 0 ? (
+											<ContextPickerEmptyState
+												category={activeContextCategory}
+												query={displayQuery}
+												onPrefill={handleContextPrefill}
+											/>
+										) : (
+											filteredContextOptions.map((option, index) => {
+												const isSelected = selectedContexts.some(
+													(item) =>
+														item.category === activeContextCategory &&
+														item.entityId === option.id,
+												);
 
-											return (
-												<Button
-													key={option.id}
-													ref={(el): void => {
-														entityRefs.current[index] = el;
-													}}
-													type="button"
-													variant="ghost"
-													color="secondary"
-													size="sm"
-													aria-pressed={isSelected}
-													width="100%"
-													onClick={(): void =>
-														toggleContextSelection(
-															activeContextCategory,
-															option.id,
-															option.value,
-														)
-													}
-													onKeyDown={(e): void => handleEntityKeyDown(e, index)}
-												>
-													{option.value}
-												</Button>
-											);
-										})
-									)}
+												return (
+													<Button
+														key={option.id}
+														ref={(el): void => {
+															entityRefs.current[index] = el;
+														}}
+														type="button"
+														variant="ghost"
+														color="secondary"
+														size="sm"
+														aria-pressed={isSelected}
+														width="100%"
+														onClick={(): void =>
+															toggleContextSelection(
+																activeContextCategory,
+																option.id,
+																option.value,
+															)
+														}
+														onKeyDown={(e): void => handleEntityKeyDown(e, index)}
+													>
+														{option.value}
+													</Button>
+												);
+											})
+										)}
+									</div>
 								</div>
 							</div>
-						</div>
+						</PopoverContent>
 					</Popover>
 				</div>
 

frontend/src/container/AIAssistant/components/ClarificationForm/ClarificationForm.module.scss

@@ -88,6 +88,7 @@
 	margin-left: 2px;
 }
 
+.input,
 .select {
 	background: var(--l2-background);
 	border: 1px solid var(--l2-border);
@@ -107,6 +108,14 @@
 	cursor: pointer;
 }
 
+// Constrain the Radix-based SelectContent popover so it never grows wider
+// than the trigger button. `--radix-select-trigger-width` is set by Radix
+// at the popper layer when `position: 'popper'` (the default).
+.selectContent {
+	width: var(--radix-select-trigger-width);
+	min-width: var(--radix-select-trigger-width);
+}
+
 .radioGroup,
 .checkboxGroup {
 	display: flex;

frontend/src/container/AIAssistant/components/ClarificationForm/ClarificationForm.tsx

@@ -3,8 +3,12 @@ import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Input } from '@signozhq/ui/input';
-import { Select } from '@signozhq/ui/select';
-import type { SelectItemType } from '@signozhq/ui/select';
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+} from '@signozhq/ui/select';
 import logEvent from 'api/common/logEvent';
 import { ClarificationFieldTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import type {
@@ -243,7 +247,10 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 	// "Other (type your own)" entry — a plain `options: null` would
 	// otherwise fall through to the bare text-input renderer).
 	if (type === ClarificationFieldTypeDTO.select && (options || allowCustom)) {
-		const handleSelectChange = (picked: string): void => {
+		const handleSelectChange = (next: string | string[]): void => {
+			// `multiple` is off → callback receives a single string. The wider
+			// `string | string[]` typing comes from the shared Select root.
+			const picked = Array.isArray(next) ? (next[0] ?? '') : next;
 			if (picked === CUSTOM_OPTION_SENTINEL) {
 				setIsCustom(true);
 				onChange(customValue);
@@ -253,23 +260,6 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 			}
 		};
 
-		const selectItems: SelectItemType[] = [
-			...(options ?? []).map(
-				(opt): SelectItemType => ({ type: 'item', value: opt, label: opt }),
-			),
-			...(allowCustom
-				? [
-						{
-							type: 'item',
-							value: CUSTOM_OPTION_SENTINEL,
-							label: CUSTOM_OPTION_LABEL,
-						} as SelectItemType,
-					]
-				: []),
-		];
-
-		const selectedValue = isCustom ? CUSTOM_OPTION_SENTINEL : String(value ?? '');
-
 		return (
 			<div className={styles.field}>
 				<label className={styles.label} htmlFor={id}>
@@ -281,16 +271,34 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 					)}
 				</label>
 				<Select
-					id={id}
-					items={selectItems}
-					placeholder="Select…"
-					aria-required={required || undefined}
-					value={selectedValue || undefined}
+					value={isCustom ? CUSTOM_OPTION_SENTINEL : String(value ?? '')}
 					onChange={handleSelectChange}
-				/>
+				>
+					<SelectTrigger
+						id={id}
+						placeholder="Select…"
+						aria-required={required || undefined}
+					/>
+					{/* Pin the dropdown width to the trigger via Radix's
+					    `--radix-select-trigger-width`; otherwise the popover
+					    sizes to its widest item and looks misaligned. */}
+					<SelectContent className={styles.selectContent}>
+						{options?.map((opt) => (
+							<SelectItem key={opt} value={opt}>
+								{opt}
+							</SelectItem>
+						))}
+						{allowCustom && (
+							<SelectItem value={CUSTOM_OPTION_SENTINEL}>
+								{CUSTOM_OPTION_LABEL}
+							</SelectItem>
+						)}
+					</SelectContent>
+				</Select>
 				{isCustom && (
 					<Input
 						type="text"
+						className={styles.input}
 						placeholder="Enter a custom value"
 						value={customValue}
 						onChange={(e): void => {
@@ -399,6 +407,7 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 				{isCustom && (
 					<Input
 						type="text"
+						className={styles.input}
 						placeholder="Enter a custom value"
 						value={customValue}
 						onChange={(e): void => updateCustomValue(e.target.value)}
@@ -422,6 +431,7 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 			<Input
 				id={id}
 				type={type === 'number' ? 'number' : 'text'}
+				className={styles.input}
 				value={String(value ?? '')}
 				aria-required={required || undefined}
 				onChange={(e): void => {

frontend/src/container/AIAssistant/components/ConversationItem/ConversationItem.module.scss

@@ -62,15 +62,16 @@
 	opacity: 0.7;
 }
 
-// Wrapper around the chromeless rename Input (variant="unstyled"); the accent
-// bottom border marks the edit state, and the --input-* tokens keep the field
-// the same size as the title row it replaces.
 .input {
 	width: 100%;
+	background: transparent;
+	border: none;
 	border-bottom: 1px solid var(--accent-primary);
-	--input-height: 20px;
-	--input-padding: 1px 0;
-	--input-font-size: 12px;
+	outline: none;
+	color: var(--l1-foreground);
+	font-size: 12px;
+	font-family: inherit;
+	padding: 1px 0;
 }
 
 .actions {

frontend/src/container/AIAssistant/components/ConversationItem/ConversationItem.tsx

@@ -5,7 +5,7 @@ import ROUTES from 'constants/routes';
 import { getAbsoluteUrl } from 'utils/basePath';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 
 import {
@@ -176,21 +176,16 @@ export default function ConversationItem({
 
 			<div className={styles.body}>
 				{isEditing ? (
-					<div className={styles.input}>
-						<Input
-							ref={inputRef}
-							// The wrapper's accent bottom border is the edit/focus
-							// treatment, so the Input renders chromeless.
-							variant="unstyled"
-							noFocusRing
-							value={editValue}
-							onChange={(e): void => setEditValue(e.target.value)}
-							onKeyDown={handleKeyDown}
-							onBlur={commitEdit}
-							onClick={(e): void => e.stopPropagation()}
-							maxLength={80}
-						/>
-					</div>
+					<Input
+						ref={inputRef}
+						className={styles.input}
+						value={editValue}
+						onChange={(e): void => setEditValue(e.target.value)}
+						onKeyDown={handleKeyDown}
+						onBlur={commitEdit}
+						onClick={(e): void => e.stopPropagation()}
+						maxLength={80}
+					/>
 				) : (
 					<>
 						<span className={styles.title} title={displayTitle}>

frontend/src/container/AIAssistant/components/ConversationsList/ConversationsList.module.scss

@@ -45,6 +45,11 @@
 	flex-shrink: 0;
 }
 
+.search {
+	width: 100%;
+	font-size: 12px;
+}
+
 .list {
 	position: relative;
 	flex: 1;

frontend/src/container/AIAssistant/components/ConversationsList/ConversationsList.tsx

@@ -193,6 +193,7 @@ export default function ConversationsList({
 					onChange={(e): void => setSearchQuery(e.target.value)}
 					placeholder="Search conversations…"
 					prefix={<Search size={12} />}
+					className={styles.search}
 				/>
 			</div>
 

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss

@@ -46,7 +46,7 @@
 		height: 80px;
 	}
 	.top-contributors-progress {
-		--progress-track-background-color: transparent;
+		--progress-background: transparent;
 	}
 
 	&__content {

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { Color } from '@signozhq/design-tokens';
 import { Table, TableColumnsType as ColumnsType } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
 import logEvent from 'api/common/logEvent';
@@ -48,13 +49,12 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div className="top-contributors-progress">
-						<Progress
-							percent={(count / totalCurrentTriggers) * 100}
-							showInfo={false}
-							color="primary"
-						/>
-					</div>
+					<Progress
+						percent={(count / totalCurrentTriggers) * 100}
+						showInfo={false}
+						strokeColor={Color.BG_ROBIN_500}
+						className="top-contributors-progress"
+					/>
 				</ConditionalAlertPopover>
 			),
 		},

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss

@@ -46,8 +46,13 @@
 	}
 
 	.title {
-		// Typography's only monospace affordance is `code`, which also draws a chip.
-		font-family: var(--font-mono);
+		color: var(--l2-foreground);
+		font-family: 'Geist Mono';
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 20px;
+		letter-spacing: -0.07px;
 	}
 
 	.radio-button {
@@ -88,13 +93,24 @@
 			}
 
 			.domain-details-metadata-label {
-				// Typography has no prop for casing.
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 18px;
+				letter-spacing: 0.44px;
 				text-transform: uppercase;
 			}
 
 			.domain-details-metadata-value {
-				// Typography's only monospace affordance is `code`, which also draws a chip.
-				font-family: var(--font-mono);
+				color: var(--l2-foreground);
+				font-family: 'Geist Mono';
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.07px;
 
 				width: 100%;
 				white-space: nowrap;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -158,16 +158,10 @@ function DomainDetails({
 			title={
 				<div className="domain-details-drawer-header">
 					<div className="domain-details-drawer-header-title">
-						<Divider orientation="vertical" />
+						<Divider type="vertical" />
 
 						{domainData?.domainName && (
-							<Typography.Text
-								size="lg"
-								weight="medium"
-								color="muted"
-								className="title"
-								testId="domain-details-title"
-							>
+							<Typography.Text className="title" testId="domain-details-title">
 								{domainData.domainName}
 							</Typography.Text>
 						)}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
+import { Color } from '@signozhq/design-tokens';
 import { Skeleton, Tooltip } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
@@ -88,47 +89,22 @@ function DomainMetrics({
 		<div className="domain-detail-drawer__endpoint" data-testid="domain-metrics">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text
-						size="sm"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						EXTERNAL API
 					</Typography.Text>
-					<Typography.Text
-						size="sm"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text
-						size="sm"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						ERROR %
 					</Typography.Text>
-					<Typography.Text
-						size="sm"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-label"
-					>
+					<Typography.Text color="muted" className="domain-details-metadata-label">
 						LAST USED
 					</Typography.Text>
 				</div>
 
 				<div className="values-row" data-testid="domain-metrics-values">
-					<Typography.Text
-						size="small"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-value"
-					>
+					<Typography.Text className="domain-details-metadata-value">
 						{isLoading || isRefetching ? (
 							<Skeleton.Button active size="small" />
 						) : (
@@ -140,12 +116,7 @@ function DomainMetrics({
 						)}
 					</Typography.Text>
 					{/* // update the tooltip as well */}
-					<Typography.Text
-						size="small"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-value"
-					>
+					<Typography.Text className="domain-details-metadata-value">
 						{isLoading || isRefetching ? (
 							<Skeleton.Button active size="small" />
 						) : (
@@ -159,44 +130,39 @@ function DomainMetrics({
 						)}
 					</Typography.Text>
 					{/* // update the tooltip as well */}
-					<Typography.Text
-						size="small"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-value error-rate"
-					>
+					<Typography.Text className="domain-details-metadata-value error-rate">
 						{isLoading || isRefetching ? (
 							<Skeleton.Button active size="small" />
 						) : (
 							<Tooltip title={formattedDomainMetricsData.errorRate}>
 								{formattedDomainMetricsData.errorRate !== '-' ? (
-									<div className="progress-bar">
-										<Progress
-											percent={Number(
+									<Progress
+										percent={Number(
+											Number(formattedDomainMetricsData.errorRate).toFixed(2),
+										)}
+										strokeLinecap="butt"
+										showInfo
+										strokeColor={((): string => {
+											const errorRatePercent = Number(
 												Number(formattedDomainMetricsData.errorRate).toFixed(2),
-											)}
-											showInfo
-											color={
-												Number(formattedDomainMetricsData.errorRate) >= 90
-													? 'highlight-danger'
-													: Number(formattedDomainMetricsData.errorRate) >= 60
-														? 'warning'
-														: 'success'
+											);
+											if (errorRatePercent >= 90) {
+												return Color.BG_SAKURA_500;
 											}
-										/>
-									</div>
+											if (errorRatePercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
 								) : (
 									'-'
 								)}
 							</Tooltip>
 						)}
 					</Typography.Text>
-					<Typography.Text
-						size="small"
-						weight="medium"
-						color="muted"
-						className="domain-details-metadata-value"
-					>
+					<Typography.Text className="domain-details-metadata-value">
 						{isLoading || isRefetching ? (
 							<Skeleton.Button active size="small" />
 						) : (