fix(storybook): read the service map tags type from its new home

chore(storybook): drop the sidebar order entries for the removed legacy explorers
revert(logs): remove the legacy explorer story
2026-09-21 19:00:42 +01:00 · 2026-09-21 13:50:22 -03:00 · 2026-09-21 13:49:40 -03:00 · 2026-09-21 13:49:40 -03:00 · 2026-09-21 13:49:40 -03:00 · 2026-09-21 13:49:35 -03:00
583 changed files with 41631 additions and 10914 deletions
--- a/.claude/skills/signoz-page-story/SKILL.md
+++ b/.claude/skills/signoz-page-story/SKILL.md
@@ -26,6 +26,135 @@ process on top of it.
 5. **Verify in the browser**: [references/verify.md](references/verify.md). Never
   report the story as done without it.

+## Where it lands in the sidebar
+
+The sidebar mirrors the app's own side nav (`container/SideNav/menuItems.tsx`), so
+a page sits where someone would click it in the product. Four things decide that,
+and all four are part of writing the story, not a follow-up.
+
+**Title.** `Pages/<Area>/<Page>`, where `<Area>` is the nav section and `<Page>`
+is the label the nav gives it.
+
+- The leaf is the product's label, never the component's name: `MetricsExplorer`
+  is `Metrics/Explorer`, `MeterExplorer` is `Metering/Cost Meter`,
+  `AIAssistantPage` is `Noz`.
+- Never repeat the area in the leaf: `Alerts/Rules`, not `Alerts/AlertRules`.
+- A leaf never shares its name with a sibling folder. The folder wins and the
+  page becomes `List`, or `Overview` for a tab strip: `Services/List` beside
+  `Services/Detail`.
+- Title Case with spaces. No camelCase, no kebab.
+- Four levels is the floor to stay under: `Pages/Alerts/Channels/New` is as deep
+  as it goes.
+- Pages nobody navigates to on purpose go under `Pages/System` (`Status`,
+  `Unauthorized`, `Workspace Locked`), and the pre-session pages under
+  `Pages/Auth`.
+- A page whose permission stories earn their own folder becomes one:
+  `Pages/Settings/Billing/Overview` beside `Pages/Settings/Billing/Authz`. See
+  **Permission stories** below.
+
+**Order.** The `storySort.order` literal in `.storybook/preview.tsx` carries the
+order for every level. A new page in an existing area is appended to that area's
+array, in the order the product lists it; a new area goes where the side nav
+puts it. Storybook parses the order out of the file statically, so it has to
+stay an inline literal. Missing entries fall to the end of their level rather
+than disappearing, so a forgotten edit is a page at the bottom of its area, not
+a broken sidebar.
+
+**Tags.** Declared on the meta, right under `title`, and what the sidebar's tag
+filter answers questions with. Only these:
+
+| Tag | When |
+| --- | --- |
+| `authz` | The page gates UI on permission checks through `lib/authz` (`AuthZButton`, `AuthZGuard`, `useAuthZ`). Both the page's file and its `Authz` file carry it. |
+| `role-gated` | The page still branches on the legacy role (`user.role`, `hasEditPermission`) and has no authz check. |
+| `beta` | `isBeta` on its nav entry. Drop the tag when the product drops the badge. |
+| `legacy` | Superseded by another page but still routed. The doc comment names the page to start from instead. |
+| `play` | The story file has a `play` function, so at least one state is reached by an interaction. |
+
+`autodocs` comes from `preview.tsx` and is never written on a meta.
+
+**Doc comment on the meta.** What the page is, in the page's own terms, then a
+blank line, then the route:
+
+```tsx
+const pageStory = storyMocks(logsExplorerMocks, {
+	route: explorerRoute('explorer'),
+	layout: 'app',
+});
+
+/**
+ * The logs explorer: the query builder, the list, the frequency chart and the log
+ * detail drawer, with quick filters and saved views beside them.
+ *
+ * Route: `/logs/logs-explorer`.
+ */
+const meta = {
+	title: 'Pages/Logs/Explorer',
+	tags: ['play'],
+	component: LogsModulePage,
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<LogsExplorerArgs>;
+```
+
+The `pageStory` const and the trailing `parameters` line are what make the doc
+comment safe. The comment compiles to a `parameters` property that the csf plugin
+appends after the spread, so a meta that spreads `storyMocks(...)` and stops
+there loses `parameters.signoz` and renders the page against the global handlers
+alone: every one of the page's endpoints misses. Restating `parameters` as a
+literal gives the plugin something to merge into. `resolveStory` logs the
+combination that says it happened, so the console names it rather than leaving it
+to be found by reading the page.
+
+It is the description on the page's Docs page, which is the only place a reader
+who is not in the code finds out what the page is for. Two or three sentences:
+what it shows, what drives it, and the gating worth knowing about (`Gated on
+authz permissions`, `follows the legacy editor role`). A control-driven route
+says so instead of a path: ``Route: `/metrics-explorer/*`, the tab control picks
+which``.
+
+## Permission stories
+
+A page that gates UI on `lib/authz` keeps its permission states in a folder of
+their own, so the page's own file stays about the page and the sidebar answers
+"what does this permission do" in one place.
+
+**Layout.** A second story file at `stories/authz/<Page>.authz.stories.tsx`,
+titled `Pages/<Area>/<Page>/Authz`, which turns the page into a folder: its own
+file is retitled `Pages/<Area>/<Page>/Overview`, and `.storybook/preview.tsx`
+gains the sub-order (`'Billing', ['Overview', 'Authz']`). Both files carry the
+`authz` tag and share the page's one mocks module, which the authz file imports
+as `../<Page>.stories.mocks`. It declares no controls and no mock data of its
+own: a permission story that needs a new response is a control the page's mocks
+were missing.
+
+**One story per permission the page reads**, named for what is gone: `NoRead`,
+`NoList`, `NoUpdate`, `NoCreate`, `NoDelete`. Then the combinations the page
+itself distinguishes, and only those: `NoManage` where two permissions gate one
+button, `ReadOnly` where everything but reading is denied, `NoSubscriptionAccess`
+where none of the resource's permissions are held, and `CheckFailed` for
+`authzState: 'error'`, which is the page's fail-open path rather than a denial.
+
+**Revoke, never allow-list.** Each story is a full grant minus what its name
+says: `args: { revoked: ['read:subscription'] }`. The `Revoked` control subtracts
+from the preset, so the story stays "an admin missing one permission" as the
+catalogue grows, and the diff against the page's `Default` is the one permission.
+Rebuilding the allow-list by hand drifts the moment a resource is added.
+
+**Never a role preset in this folder.** `access: 'viewer'` moves the legacy role,
+the side nav and every other resource's permissions at the same time, so the
+story no longer shows what its name claims. A persona is a story on the page's
+own file, and only when the product has that persona.
+
+**Pair the revocation with the state that renders the gated control.** A button
+that only exists on a trial needs the plan too:
+`args: { plan: 'on-trial', revoked: ['create:subscription'] }`. A permission
+whose denial changes nothing on screen gets no story: say so in the PR.
+
+Verify these by their disabled states, not their text. The page reads the same
+either way, so a story that is wrong looks right: read `disabled` off the buttons
+the permission gates, and check the denial callout is there or gone.
+
 ## Rules

 - **Default is the loaded page.** `export const Default: Story = {}` with no args,
@@ -50,7 +179,29 @@ process on top of it.
 - **File layout**: every story file for a page lives under
  `src/pages/<Page>/stories/`: `<Page>.stories.tsx`, `<Page>.stories.mocks.tsx`,
  payload builders in `stories/__story_mockdata__/<page>.ts`. Nothing
-  page-specific in `src/storybook/controls/`.
+  page-specific in `src/storybook/controls/`. A page that is a tab strip over
+  several routes gets one story file per tab, in its own folder under the module
+  page (`LogsModulePage/Pipelines/stories/Pipelines.stories.tsx`), each with its
+  own mocks and `__story_mockdata__/`; the builders more than one tab needs stay
+  in the module page's own `stories/__story_mockdata__/`
+  (`AlertList/stories/__story_mockdata__/alerts.ts`), which a tab reaches as
+  `../../stories/__story_mockdata__/alerts`. Every one of them renders the module page, so the tab
+  strip is there, and the `route` its mocks return decides which tab is open.
+  A page's permission stories go one level further down, in
+  `stories/authz/<Page>.authz.stories.tsx`, on the page's own mocks: see
+  **Permission stories**.
+- **A state only a click reaches is a story with a `play` function**, not a
+  control: a drawer, a modal, an edit mode the page holds in component state.
+  Drive it with `userEvent` and the queries from `storybook/test`, take the first
+  of a repeated row action, and wait on the state's own text. The page fetches
+  before it renders a row, so the finder needs a timeout past the 1s default. A
+  state the app drops again on its own, such as one keyed on an array identity
+  that a refetch replaces, does not get a story: it would not survive being
+  looked at. A *sequence* of such states, a wizard's steps or a
+  questionnaire's pages, is still a control: declare the steps in the mocks
+  module and walk them from a `play` on the meta that destructures `mount`, which
+  is what makes Storybook replay it on an arg change. See
+  [references/controls.md](references/controls.md).
 - **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file
  under a `__story_mockdata__/` open with this banner, above the imports:

@@ -74,6 +225,13 @@ process on top of it.
  writing a response shape inline, check if a builder exists; if not and the
  shape will repeat, add it there. Page-specific builders stay in the page's
  `__story_mockdata__/`.
+- **The story's own doc comment is per state.** Every `export const` gets one:
+  what that state shows, not how it is built. It renders in the States list on
+  the page's Docs page, so `Undocumented.` there is a story nobody described.
+- **Story names come from a fixed vocabulary** where one fits: `Default`,
+  `Viewer`, `Empty`, `Loading`, `Error`. Page-specific states get page-specific
+  names (`NoIngestion`, `Unlicensed`), never a second spelling of one of those
+  (`ViewerAccess`, `NonAdmin`).
 - **No comment is the default.** Write one only for what the code cannot show:
  a shape the backend dictates, an app bug the mock reproduces, an ordering or
  cap the page depends on, a workaround and the reason for it. Never restate a
@@ -85,6 +243,16 @@ process on top of it.
 ## Done means

 - [ ] `Default` shows the page with data, checked in dark and light
+- [ ] title follows the sidebar rules, tags declared, and the page's entry added
+      to the `storySort.order` literal in `.storybook/preview.tsx`
+- [ ] the meta carries its doc comment with the `Route:` line, the meta restates
+      `parameters: { ...pageStory.parameters }` after the spread, and every story
+      export carries its own doc comment
+- [ ] the page's Docs page renders: description, controls table, and one row per
+      state with no `Undocumented.`
+- [ ] a page tagged `authz` has its `Authz` folder: one story per permission it
+      reads, each reached by `revoked`, none of them a role preset, and each one
+      checked by the `disabled` state of what the permission gates
 - [ ] the mocks module and every `__story_mockdata__` file carry the AI-owned banner
 - [ ] every control flipped once, its effect seen on screen
 - [ ] console clean: no `[storybook] no msw handler`, no 501, no msw unhandled
--- a/.claude/skills/signoz-page-story/references/controls.md
+++ b/.claude/skills/signoz-page-story/references/controls.md
@@ -128,20 +128,83 @@ export const servicesMocks = defineStoryMocks({
 // src/pages/Services/stories/Services.stories.tsx
 type ServicesArgs = PageStoryArgs<typeof servicesMocks>;

+const pageStory = storyMocks(servicesMocks, {
+	route: ROUTES.APPLICATION,
+	layout: 'app',
+});
+
+/**
+ * Every instrumented service with its p99, error rate and throughput.
+ *
+ * Route: `/services`.
+ */
 const meta = {
-	title: 'Pages/Services',
+	title: 'Pages/Services/List',
 	component: Services,
-	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION, layout: 'app' }),
+	...pageStory,
+	parameters: { ...pageStory.parameters },
 } satisfies Meta<ServicesArgs>;
 ```

 `PageStoryArgs` folds in the global controls, so a story's `args` can set
 `access`, `dataState` or `banner` next to the page's own knobs and stay typed.

+## A step the page keeps in component state
+
+A wizard's step, a questionnaire's page, a picker's next question: the page holds
+it in `useState` and nothing in the URL says which one is open. It is still a
+control. Declare the steps in the mocks module and drive them from a `play` on
+the **meta**, so every story of the page inherits the walk and only sets `args`:
+
+```tsx
+// <Page>.stories.mocks.tsx
+export const SETUP_STEPS = ['pick-source', 'pick-framework', 'configure'] as const;
+export type SetupStep = (typeof SETUP_STEPS)[number];
+
+controls: {
+	step: choiceControl<SetupStep>('Setup step', { group: SETUP, options: SETUP_STEPS, value: 'pick-source' }),
+},
+```
+
+```tsx
+// <Page>.stories.tsx
+const meta = {
+	play: async ({ mount, args, canvasElement }): Promise<void> => {
+		await mount();
+		await advanceToSetupStep(canvasElement, args.step);
+	},
+	...storyMocks(pageMocks),
+} satisfies Meta<PageArgs>;
+
+export const Configure: Story = { args: { step: 'configure' } };
+```
+
+**Destructuring `mount` is what makes it a control.** Storybook re-runs a play
+function on an arg change only for a story whose play asks to be remounted
+(`usesMount`); otherwise it re-renders the tree the previous walk left behind and
+the panel looks broken. With `mount` destructured, the story renders when `play`
+calls it, and every arg change replays the walk from a fresh mount.
+
+The walk itself:
+
+- one `answer` function per step, in an array indexed the same as the step list,
+  so reaching step *n* is `answers.slice(0, STEPS.indexOf(step))`;
+- answer each step with the least its Next button accepts, and prefer a "do this
+  later" over filling a slider;
+- run them sequentially (`reduce` over a promise), since each answer is what
+  renders the step the next one reads;
+- bail out when the page did not start where the walk expects, such as a source
+  deep-linked past the questions. Check for the first step's own text rather than
+  reading another control's value.
+
+An endpoint that only settles the transition between two steps (the profile a
+questionnaire saves before its last page) takes a plain resolver, or the Data
+control on `loading` strands the walk halfway.
+
 ## Not a control

 - Anything the global controls already cover: banner, side nav, data state,
-  access preset, permissions, check state.
+  access preset, granted permissions, revoked permissions, check state.
 - A knob whose effect nobody can see on the page. Delete it or find the widget it
  was supposed to drive.
 - A raw payload as an object control. Controls carry intent (`5 dashboards`,
@@ -155,9 +218,12 @@ const meta = {
 Default to a control. Write a story when the state is worth a link:

 - the fresh workspace, because that is what a new user sees
- the restricted user, when permissions visibly change the page
 - a page-defining mode (a tab, a category) that has its own layout

+A permission that visibly changes the page is a story too, but it goes in the
+page's `Authz` folder, one per permission, turned with the `Revoked` control.
+See **Permission stories** in SKILL.md.
+
 Combinations of controls do not need stories, which is what the panel is for.

 Each story gets one prose doc comment: what it shows, in the page's own terms.
--- a/.claude/skills/signoz-page-story/references/verify.md
+++ b/.claude/skills/signoz-page-story/references/verify.md
@@ -12,11 +12,12 @@ cd frontend && pnpm storybook --ci --quiet   # :6006, background it
 A newly added `.stories.tsx` takes a few seconds to appear in `index.json` on an
 already-running server; an empty first poll is not a broken `stories` glob.

-Story ids come from the meta title: `Pages/Services` → `pages-services`, plus the
-story export in kebab-case. Render one story on its own:
+Story ids come from the meta title: `Pages/Services/List` →
+`pages-services-list`, plus the story export in kebab-case. Render one story on
+its own:

 ```
-http://localhost:6006/iframe.html?id=pages-services--default&viewMode=story
+http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
 ```

 ## Flip controls from the URL
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -171,6 +171,14 @@ components:
      - kind
      - spec
      type: object
+    AlertmanagertypesChannelDefect:
+      enum:
+      - none
+      - missing_type
+      - multiple_notifiers
+      - unsupported_notifier
+      - unrepresentable
+      type: string
    AlertmanagertypesChannelEmailConfig:
      properties:
        headers:
@@ -384,13 +392,83 @@ components:
      required:
      - routingKey
      type: object
+    AlertmanagertypesChannelRepair:
+      properties:
+        action:
+          $ref: '#/components/schemas/AlertmanagertypesChannelRepairAction'
+        applied:
+          type: boolean
+        blockers:
+          items:
+            type: string
+          type: array
+        channels:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesListedNotificationChannel'
+          nullable: true
+          type: array
+        defect:
+          $ref: '#/components/schemas/AlertmanagertypesChannelDefect'
+        detail:
+          type: string
+        id:
+          type: string
+      required:
+      - id
+      - defect
+      - action
+      - applied
+      type: object
+    AlertmanagertypesChannelRepairAction:
+      enum:
+      - none
+      - retype
+      - split
+      - delete
+      type: string
+    AlertmanagertypesChannelSlackAction:
+      properties:
+        confirm:
+          $ref: '#/components/schemas/AlertmanagertypesChannelSlackConfirmation'
+        name:
+          type: string
+        style:
+          type: string
+        text:
+          type: string
+        type:
+          type: string
+        url:
+          type: string
+        value:
+          type: string
+      required:
+      - type
+      - text
+      type: object
    AlertmanagertypesChannelSlackConfig:
      properties:
+        actions:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
+          type: array
        apiUrl:
          format: password
          type: string
        channel:
          type: string
+        color:
+          type: string
+        fallback:
+          type: string
+        fields:
+          items:
+            $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
+          type: array
+        footer:
+          type: string
+        pretext:
+          type: string
        sendResolved:
          nullable: true
          type: boolean
@@ -398,9 +476,37 @@ components:
          type: string
        title:
          type: string
+        titleLink:
+          type: string
      required:
      - apiUrl
      type: object
+    AlertmanagertypesChannelSlackConfirmation:
+      properties:
+        dismissText:
+          type: string
+        okText:
+          type: string
+        text:
+          type: string
+        title:
+          type: string
+      required:
+      - text
+      type: object
+    AlertmanagertypesChannelSlackField:
+      properties:
+        short:
+          nullable: true
+          type: boolean
+        title:
+          type: string
+        value:
+          type: string
+      required:
+      - title
+      - value
+      type: object
    AlertmanagertypesChannelWebhookConfig:
      properties:
        bearerToken:
@@ -969,6 +1075,11 @@ components:
      - duration
      - repeatType
      type: object
+    AlertmanagertypesRepairChannelParams:
+      properties:
+        apply:
+          type: boolean
+      type: object
    AlertmanagertypesRepeatOn:
      enum:
      - sunday
@@ -3210,6 +3321,53 @@ components:
        repeatVariable:
          type: string
      type: object
+    DashboardtypesAreaChartAppearance:
+      properties:
+        fillMode:
+          $ref: '#/components/schemas/DashboardtypesAreaFillMode'
+        fillOpacity:
+          $ref: '#/components/schemas/DashboardtypesFillOpacity'
+        lineInterpolation:
+          $ref: '#/components/schemas/DashboardtypesLineInterpolation'
+        lineStyle:
+          $ref: '#/components/schemas/DashboardtypesLineStyle'
+        showPoints:
+          type: boolean
+        spanGaps:
+          $ref: '#/components/schemas/DashboardtypesSpanGaps'
+      type: object
+    DashboardtypesAreaChartPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesAreaChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesAreaChartVisualization'
+      type: object
+    DashboardtypesAreaChartVisualization:
+      properties:
+        fillSpans:
+          type: boolean
+        stack:
+          $ref: '#/components/schemas/DashboardtypesStackMode'
+        timePreference:
+          $ref: '#/components/schemas/DashboardtypesTimePreference'
+      type: object
+    DashboardtypesAreaFillMode:
+      enum:
+      - solid
+      - gradient
+      type: string
    DashboardtypesAxes:
      properties:
        isLogScale:
@@ -3441,6 +3599,11 @@ components:
      - gradient
      - none
      type: string
+    DashboardtypesFillOpacity:
+      maximum: 1
+      minimum: 0
+      nullable: true
+      type: number
    DashboardtypesGettableDashboardV2:
      properties:
        createdAt:
@@ -3903,6 +4066,7 @@ components:
    DashboardtypesPanelPlugin:
      discriminator:
        mapping:
+          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
          signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
          signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
          signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
@@ -3915,6 +4079,7 @@ components:
      oneOf:
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
@@ -3926,6 +4091,7 @@ components:
      enum:
      - signoz/TimeSeriesPanel
      - signoz/BarChartPanel
+      - signoz/AreaChartPanel
      - signoz/NumberPanel
      - signoz/PieChartPanel
      - signoz/TablePanel
@@ -3933,6 +4099,18 @@ components:
      - signoz/ListPanel
      - signoz/TextPanel
      type: string
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AreaChartPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
      properties:
        kind:
@@ -4263,6 +4441,12 @@ components:
            are connected.
          type: boolean
      type: object
+    DashboardtypesStackMode:
+      enum:
+      - none
+      - normal
+      - percent
+      type: string
    DashboardtypesStorableDashboardData:
      additionalProperties: {}
      type: object
@@ -9621,6 +9805,8 @@ components:
          type: string
        name:
          type: string
+        origin:
+          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
        updatedAt:
          format: date-time
          type: string
@@ -9633,6 +9819,7 @@ components:
      - fieldContext
      - config
      - enabled
+      - origin
      type: object
    SpantypesSpanMapperConfig:
      properties:
@@ -9661,48 +9848,75 @@ components:
          type: string
        orgId:
          type: string
+        origin:
+          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
        updatedAt:
          format: date-time
          type: string
        updatedBy:
          type: string
+        version:
+          type: integer
      required:
      - id
      - orgId
      - name
      - condition
      - enabled
+      - origin
+      - version
      type: object
    SpantypesSpanMapperGroupCondition:
      nullable: true
      properties:
        attributes:
          items:
-            type: string
+            $ref: '#/components/schemas/SpantypesSpanMapperGroupConditionKey'
          nullable: true
          type: array
        resource:
          items:
-            type: string
+            $ref: '#/components/schemas/SpantypesSpanMapperGroupConditionKey'
          nullable: true
          type: array
      required:
      - attributes
      - resource
      type: object
+    SpantypesSpanMapperGroupConditionKey:
+      properties:
+        enabled:
+          type: boolean
+        origin:
+          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
+        value:
+          type: string
+      required:
+      - value
+      - enabled
+      type: object
    SpantypesSpanMapperOperation:
      enum:
      - move
      - copy
      type: string
+    SpantypesSpanMapperOrigin:
+      enum:
+      - user
+      - system
+      type: string
    SpantypesSpanMapperSource:
      properties:
        context:
          $ref: '#/components/schemas/SpantypesFieldContext'
+        enabled:
+          type: boolean
        key:
          type: string
        operation:
          $ref: '#/components/schemas/SpantypesSpanMapperOperation'
+        origin:
+          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
        priority:
          type: integer
      required:
@@ -9710,6 +9924,7 @@ components:
      - context
      - operation
      - priority
+      - enabled
      type: object
    SpantypesSpanMapperTestSpan:
      properties:
@@ -10960,9 +11175,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - VIEWER
+        - cloud-integration:read
      - tokenizer:
-        - VIEWER
+        - cloud-integration:read
      summary: Agent check-in
      tags:
      - cloudintegration
@@ -11012,9 +11227,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:list
      - tokenizer:
-        - ADMIN
+        - cloud-integration:list
      summary: List accounts
      tags:
      - cloudintegration
@@ -11069,9 +11284,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:create
      - tokenizer:
-        - ADMIN
+        - cloud-integration:create
      summary: Create account
      tags:
      - cloudintegration
@@ -11114,9 +11329,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:delete
      - tokenizer:
-        - ADMIN
+        - cloud-integration:delete
      summary: Disconnect account
      tags:
      - cloudintegration
@@ -11182,9 +11397,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:read
      - tokenizer:
-        - ADMIN
+        - cloud-integration:read
      summary: Get account
      tags:
      - cloudintegration
@@ -11231,9 +11446,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:update
      - tokenizer:
-        - ADMIN
+        - cloud-integration:update
      summary: Update account
      tags:
      - cloudintegration
@@ -11289,9 +11504,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:list
      - tokenizer:
-        - ADMIN
+        - cloud-integration:list
      summary: List account services metadata
      tags:
      - cloudintegration
@@ -11364,9 +11579,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:read
      - tokenizer:
-        - ADMIN
+        - cloud-integration:read
      summary: Get service for account
      tags:
      - cloudintegration
@@ -11418,9 +11633,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - cloud-integration:update
      - tokenizer:
-        - ADMIN
+        - cloud-integration:update
      summary: Update service
      tags:
      - cloudintegration
@@ -11475,9 +11690,9 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - VIEWER
+        - cloud-integration:read
      - tokenizer:
-        - VIEWER
+        - cloud-integration:read
      summary: Agent check-in
      tags:
      - cloudintegration
@@ -11528,9 +11743,17 @@ paths:
          description: Internal Server Error
      security:
      - api_key:
-        - ADMIN
+        - ingestion-key:create
+        - serviceaccount:create
+        - factor-api-key:create
+        - serviceaccount:attach
+        - role:attach
      - tokenizer:
-        - ADMIN
+        - ingestion-key:create
+        - serviceaccount:create
+        - factor-api-key:create
+        - serviceaccount:attach
+        - role:attach
      summary: Get connection credentials
      tags:
      - cloudintegration
@@ -11580,10 +11803,8 @@ paths:
                $ref: '#/components/schemas/RenderErrorResponse'
          description: Internal Server Error
      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
+      - api_key: []
+      - tokenizer: []
      summary: List services metadata
      tags:
      - cloudintegration
@@ -11638,10 +11859,8 @@ paths:
                $ref: '#/components/schemas/RenderErrorResponse'
          description: Internal Server Error
      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
+      - api_key: []
+      - tokenizer: []
      summary: Get service
      tags:
      - cloudintegration
@@ -20242,6 +20461,85 @@ paths:
      summary: Update notification channel
      tags:
      - channels
+  /api/v2/notification_channels/{id}/repair:
+    post:
+      deprecated: false
+      description: 'This endpoint diagnoses a stored channel that the v2 API cannot
+        read and applies the fitting action: a channel carrying several notifier configurations
+        is split into one channel per configuration, keeping this ID for the first;
+        a channel whose notifier kind v2 does not model is deleted; a channel with
+        an empty stored type has it rewritten from its data. A delete is refused while
+        a routing policy still names the channel. Nothing is written unless apply=true;
+        by default the response only shows what would happen.'
+      operationId: RepairNotificationChannel
+      parameters:
+      - in: query
+        name: apply
+        schema:
+          type: boolean
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/AlertmanagertypesRepairChannelParams'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/AlertmanagertypesChannelRepair'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - notification-channel:update
+      - tokenizer:
+        - notification-channel:update
+      summary: Repair notification channel
+      tags:
+      - channels
  /api/v2/notification_channels/test:
    post:
      deprecated: false
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -295,6 +295,8 @@
    // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
    "signoz/no-dashboard-fetch-outside-root": "error",
    // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
+    "signoz/no-msw-in-story-file": "error",
+    // Bans msw imports in *.stories.tsx; handlers/mock data belong in the sibling .stories.mocks.tsx
    "no-restricted-globals": [
      "error",
      {
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -27,12 +27,22 @@ const mockAliases = [
 		find: /^(?:src\/)?api\/common\/logEvent$/,
 		replacement: `${srcPath}/storybook/mocks/logEvent.mock.ts`,
 	},
+	{
+		// jest: not replaced, the suite mounts a mock store per test.
+		find: /^(?:src\/)?store$/,
+		replacement: `${srcPath}/storybook/mocks/store.mock.ts`,
+	},
 	{
 		// jest: __mocks__/env.ts, which leaves `baseURL` empty because jsdom already
 		// resolves a relative `/api/...` against `http://localhost`.
 		find: /^(?:src\/)?constants\/env$/,
 		replacement: `${srcPath}/storybook/mocks/env.mock.ts`,
 	},
+	{
+		// jest: not replaced, a test opens the one tooltip it is about.
+		find: /^@signozhq\/ui\/tooltip$/,
+		replacement: `${srcPath}/storybook/mocks/tooltip.mock.tsx`,
+	},
 ];

 /**
@@ -55,12 +65,12 @@ const isExcluded = (plugin: PluginOption): boolean =>

 const config: StorybookConfig = {
 	framework: '@storybook/react-vite',
-	stories: ['../src/**/*.stories.@(ts|tsx)'],
+	stories: ['../src/storybook/docs/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
 	// `../public` carries the fonts, icons and i18n bundles the app expects at
 	// the root; `./public` carries the msw worker, which must not ship in a
 	// production build.
 	staticDirs: ['../public', './public'],
-	addons: ['@storybook/addon-a11y'],
+	addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
 	core: { disableTelemetry: true },
 	viteFinal: async (viteConfig) => {
 		const plugins = (viteConfig.plugins ?? [])
@@ -77,6 +87,14 @@ const config: StorybookConfig = {

 		return {
 			...viteConfig,
+			build: {
+				...viteConfig.build,
+				// `vite.config.ts` sets this for the app; Storybook's builder replaces
+				// `build` wholesale, which leaves rolldown-vite on its default
+				// lightningcss. That one rejects `:global()` in a plain stylesheet, which
+				// the app has, and the static build dies in CSS minification.
+				cssMinify: 'esbuild',
+			},
 			plugins,
 			resolve: {
 				...viteConfig.resolve,
--- a/frontend/.storybook/preview-head.html
+++ b/frontend/.storybook/preview-head.html
@@ -6,6 +6,17 @@
 -->
 <link rel="stylesheet" href="storybook-fonts.css" />

+<!--
+	Third-party frames are the one thing msw cannot answer: a cross-origin iframe
+	navigates outside the service worker's scope, so the YouTube embeds and the
+	docs pane in onboarding reach the real network. Same intent as the boot data
+	below, enforced by the browser instead.
+-->
+<meta
+	http-equiv="Content-Security-Policy"
+	content="frame-src 'self' blob: data:"
+/>
+
 <link rel="stylesheet" href="css/uPlot.min.css" />

 <script>
@@ -24,3 +35,38 @@
 		},
 	};
 </script>
+
+<script>
+	// The wall clock every story reads. Chart windows, `4 mins ago` labels and
+	// trial countdowns all derive from `now`, and Chromatic does not freeze the
+	// clock, so a live one redraws every chart axis between two builds of the
+	// same code. `performance.now` and the timers keep running, so anything
+	// waiting on a timeout still resolves. `?storyClock=live`, or an ISO
+	// instant, overrides it.
+	//
+	// `new Date()` is the frozen instant, which is what the app renders from.
+	// `Date.now()` runs on from it instead, because it is also what code measures
+	// elapsed time with: `lodash.debounce` compares two `Date.now()` readings to
+	// decide its trailing call is due, so a frozen one re-arms its timer forever
+	// and every debounced input in the app (the onboarding catalogue search, the
+	// pipelines search, the log filter) silently stops filtering.
+	(() => {
+		const asked = new URLSearchParams(window.location.search).get('storyClock');
+		if (asked === 'live') return;
+
+		const frozen = Date.parse(asked || '2026-06-15T12:00:00.000Z');
+		if (Number.isNaN(frozen)) return;
+
+		const RealDate = Date;
+		const started = performance.now();
+		class FrozenDate extends RealDate {
+			constructor(...args) {
+				super(...(args.length ? args : [frozen]));
+			}
+			static now() {
+				return frozen + (performance.now() - started);
+			}
+		}
+		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
+	})();
+</script>
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -3,6 +3,8 @@ import type { SetupWorker } from 'msw';
 import { setupWorker } from 'msw';

 import { settleForCapture } from '../src/storybook/visual/settleForCapture';
+import PageDocs from '../src/storybook/docs/PageDocs';
+import ThemedDocsContainer from '../src/storybook/docs/ThemedDocsContainer';
 import { withProviders } from '../src/storybook/decorators/withProviders';
 import { globalMocks } from '../src/storybook/globals';
 import { resetStoryHistory } from '../src/storybook/navigation/containment';
@@ -13,7 +15,12 @@ import {
 } from '../src/storybook/runtime/resolveStory';
 import { allModes } from './modes';

-import '../src/ReactI18';
+import i18n from '../src/ReactI18';
+
+// `src/index.tsx` does this at boot: without it `@monaco-editor/react` falls back
+// to its loader default and pulls Monaco from cdn.jsdelivr.net, which msw does
+// not report because the requests look like static assets.
+import '../src/lib/monaco/setup';

 import '../src/styles.scss';

@@ -63,10 +70,127 @@ const { worker, ready } = (holder.__signozStorybookWorker ??=
 		};
 	})());

+/**
+ * `t()` answers with the key until the namespace's JSON has landed, and a `play`
+ * that clicks as soon as the story renders is quick enough to catch it: the
+ * channel form's "Channel name is mandatory" arrives as `channel_name_required`.
+ * Every namespace under `public/locales/en` is loaded once, ahead of the first
+ * story.
+ */
+const translationsReady = i18n.loadNamespaces(
+	Object.keys(import.meta.glob('../public/locales/en/*.json')).map((path) =>
+		path.slice(path.lastIndexOf('/') + 1, -'.json'.length),
+	),
+);
+
 const preview: Preview = {
 	parameters: {
 		layout: 'fullscreen',
 		controls: { expanded: true },
+		// The sidebar order, mirroring the app's own side nav
+		// (`container/SideNav/menuItems.tsx`), so a page sits where someone would
+		// click it in the product. Storybook's default is the order the story files
+		// happen to be globbed in, which puts `src/modules` first. Anything missing
+		// from a level lands after the entries listed for it, in file order, so a new
+		// story shows up at the end of its area rather than disappearing. Stories
+		// inside a file are never listed, so they keep the order they are declared
+		// in, `Default` first. Storybook parses this out of the file, so it has to
+		// stay an inline literal.
+		options: {
+			storySort: {
+				order: [
+					'Docs',
+					'Pages',
+					[
+						'Home',
+						'Alerts',
+						[
+							'Rules',
+							'Triggered',
+							'Overview',
+							'History',
+							'Create',
+							'Edit',
+							'Planned Downtime',
+							'Routing Policies',
+							'Channels',
+							['List', 'New', 'Edit'],
+						],
+						'Dashboards',
+						['List', 'Detail', 'Panel Editor', 'Public'],
+						'Services',
+						['List', 'Detail', 'Top Level Operations', 'Service Map'],
+						'Logs',
+						['Explorer', 'Live Tail', 'Saved Views', 'Pipelines', 'Settings'],
+						'Traces',
+						['Explorer', 'Trace Details', 'Funnel Details'],
+						'Metrics',
+						['Explorer'],
+						'Infrastructure',
+						[
+							'Overview',
+							'Kubernetes',
+							[
+								'Clusters',
+								'Nodes',
+								'Namespaces',
+								'Pods',
+								'Deployments',
+								'DaemonSets',
+								'StatefulSets',
+								'Jobs',
+								'Volumes',
+							],
+						],
+						'Integrations',
+						['List', 'Details', 'Cloud Account'],
+						'Exceptions',
+						['List', 'Detail'],
+						'External APIs',
+						'AI Observability',
+						['Overview', 'Explorer', 'Model Pricing', 'Attribute Mapping'],
+						'Noz',
+						'Metering',
+						['Cost Meter', 'Usage Explorer'],
+						'Messaging Queues',
+						['Overview', 'Kafka', 'Kafka Detail', 'Celery'],
+						'Onboarding',
+						['Questionnaire', 'Add Data Source'],
+						'Settings',
+						[
+							'Workspace',
+							'Account',
+							'Billing',
+							['Overview', 'Authz'],
+							'MCP Server',
+							'Roles',
+							'Role Details',
+							'Role Editor',
+							'Members',
+							'Service Accounts',
+							'Ingestion',
+							'Single Sign-on',
+							'Keyboard Shortcuts',
+						],
+						'Auth',
+						['Login', 'Sign Up', 'Forgot Password', 'Reset Password'],
+						'System',
+						[
+							'Status',
+							'Support',
+							'License',
+							'Not Found',
+							'Unauthorized',
+							'Error Fallback',
+							'Workspace Locked',
+							'Workspace Suspended',
+							'Workspace Access Restricted',
+						],
+					],
+				],
+			},
+		},
+		docs: { page: PageDocs, container: ThemedDocsContainer },
 		// One cloud snapshot per theme, for every story. A mode carries Storybook
 		// globals, so `theme` here is the same toolbar global the app reads out of
 		// localStorage. Widths are Chromatic's only real dimension, as they are
@@ -74,6 +198,9 @@ const preview: Preview = {
 		// one it is given.
 		chromatic: { modes: allModes },
 	},
+	// Every page story gets a docs page: the descriptions on the meta and on each
+	// story are the page's documentation, and without this they render nowhere.
+	tags: ['autodocs'],
 	globalTypes: {
 		theme: {
 			description: 'SigNoz color scheme',
@@ -119,12 +246,21 @@ const preview: Preview = {
 			world.apply();
 			world.install(worker);

-			await ready;
+			await Promise.all([ready, translationsReady]);
 		},
 	],
 	beforeEach: () => {
 		clearBlockedNavigations();
 		resetStoryHistory();
+
+		// The runner clears its console/network buffer before it navigates, so
+		// anything the outgoing story still has in flight would be reported
+		// against this one. Stamping the moment this story starts gives the runner
+		// a line to discard those by. `Date.now()` is faked for the stories, so
+		// this reads the one clock the runner's own timestamps share.
+		document.body.dataset.signozStoryStartedAt = String(
+			performance.timeOrigin + performance.now(),
+		);
 	},
 	// After `play`, which is the moment both capture stacks shoot at.
 	afterEach: settleForCapture,
--- a/frontend/.storybook/public/mockServiceWorker.js
+++ b/frontend/.storybook/public/mockServiceWorker.js
@@ -88,10 +88,16 @@ self.addEventListener('fetch', function (event) {
  const { request } = event
  const accept = request.headers.get('accept') || ''

-  // Bypass server-sent events.
-  if (accept.includes('text/event-stream')) {
-    return
-  }
+  // msw bypasses server-sent events here, because it answers a request in one
+  // piece and has no stream to hand back. A story is not a live connection
+  // either: it wants the backlog a page renders, and one response carries that
+  // fine. Left bypassed, `/api/v3/logs/livetail` reaches the real network and
+  // the live tail story is a spinner over ERR_CONNECTION_REFUSED. Restore the
+  // bypass and re-check `Pages/Logs/Live Tail` if msw regenerates this file.
+  //
+  // if (accept.includes('text/event-stream')) {
+  //   return
+  // }

  // Bypass navigation requests.
  if (request.mode === 'navigate') {
--- a/frontend/.storybook/test-runner.ts
+++ b/frontend/.storybook/test-runner.ts
@@ -25,7 +25,23 @@ const IGNORED_MESSAGES = [
 	/violates the following Content Security Policy directive/,
 ];

-const messagesByPage = new WeakMap<Page, string[]>();
+interface CapturedMessage {
+	at: number;
+	text: string;
+}
+
+const messagesByPage = new WeakMap<Page, CapturedMessage[]>();
+
+/**
+ * When the story under test started rendering, stamped by the preview's
+ * `beforeEach`. Messages captured before it belong to the previous story: the
+ * runner clears this buffer ahead of the navigation, so whatever that story
+ * still had in flight lands here.
+ */
+const storyStartedAt = (page: Page): Promise<number> =>
+	page
+		.evaluate(() => Number(document.body.dataset.signozStoryStartedAt ?? 0))
+		.catch(() => 0);

 /**
 * Only `console.error` fails a story. `console.warn` is dev-time advice from
@@ -43,14 +59,14 @@ const config: TestRunnerConfig = {
 			return;
 		}

-		const messages: string[] = [];
+		const messages: CapturedMessage[] = [];
 		messagesByPage.set(page, messages);
 		page.on('console', (message) => {
 			if (
 				message.type() === 'error' &&
 				!IGNORED_MESSAGES.some((pattern) => pattern.test(message.text()))
 			) {
-				messages.push(`[error] ${message.text()}`);
+				messages.push({ at: Date.now(), text: `[error] ${message.text()}` });
 			}
 		});
 		// The console message alone ("Failed to load resource") doesn't name the
@@ -58,12 +74,23 @@ const config: TestRunnerConfig = {
 		// actionable instead of just a status code.
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
-				messages.push(`[response] ${response.status()} ${response.url()}`);
+				messages.push({
+					at: Date.now(),
+					text: `[response] ${response.status()} ${response.url()}`,
+				});
 			}
 		});
 	},
 	async postVisit(page, context): Promise<void> {
-		const messages = messagesByPage.get(page) ?? [];
+		const captured = messagesByPage.get(page) ?? [];
+		if (captured.length === 0) {
+			return;
+		}
+
+		const startedAt = await storyStartedAt(page);
+		const messages = captured
+			.filter((message) => message.at >= startedAt)
+			.map((message) => message.text);
 		if (messages.length === 0) {
 			return;
 		}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -162,6 +162,7 @@
    "@jest/globals": "30.4.1",
    "@jest/types": "30.2.0",
    "@storybook/addon-a11y": "10.5.9",
+    "@storybook/addon-docs": "10.5.9",
    "@storybook/react-vite": "10.5.9",
    "@storybook/test-runner": "0.24.5",
    "@testing-library/dom": "8.20.0",
--- a/frontend/plugins/rules/no-msw-in-story-file.mjs
+++ b/frontend/plugins/rules/no-msw-in-story-file.mjs
@@ -0,0 +1,41 @@
+/**
+ * Rule: no-msw-in-story-file
+ *
+ * A `.stories.tsx` file is the human-facing surface: it must not carry msw
+ * handlers or response payloads. Those belong in the sibling
+ * `<Page>.stories.mocks.tsx` module (and its `__story_mockdata__` builders).
+ *
+ * This rule flags any import from `msw` inside a `*.stories.tsx` file. It
+ * does not match `*.stories.mocks.tsx`, which is where msw imports belong.
+ */
+
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow importing from msw inside a .stories.tsx file; move handlers/mock data to the sibling .stories.mocks.tsx module',
+			category: 'Storybook',
+		},
+		schema: [],
+		messages: {
+			noMsw:
+				'Do not import from msw in a .stories.tsx file. Move the handler and its mock data to the sibling <Page>.stories.mocks.tsx module (and __story_mockdata__ for builders).',
+		},
+	},
+
+	create(context) {
+		const filename = context.filename || '';
+		if (!filename.endsWith('.stories.tsx')) {
+			return {};
+		}
+
+		return {
+			ImportDeclaration(node) {
+				if (node.source.value === 'msw') {
+					context.report({ node, messageId: 'noMsw' });
+				}
+			},
+		};
+	},
+};
--- a/frontend/plugins/signoz.mjs
+++ b/frontend/plugins/signoz.mjs
@@ -15,6 +15,7 @@ import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
 import noReturnTextNodes from './rules/no-return-text-nodes.mjs';
+import noMswInStoryFile from './rules/no-msw-in-story-file.mjs';

 export default {
 	meta: {
@@ -31,5 +32,6 @@ export default {
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,
 		'no-return-text-nodes': noReturnTextNodes,
+		'no-msw-in-story-file': noMswInStoryFile,
 	},
 };
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -363,6 +363,9 @@ importers:
      '@storybook/addon-a11y':
        specifier: 10.5.9
        version: 10.5.9(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
+      '@storybook/addon-docs':
+        specifier: 10.5.9
+        version: 10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
      '@storybook/react-vite':
        specifier: 10.5.9
        version: 10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(esbuild@0.28.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))(typescript@5.9.3)
@@ -2184,6 +2187,12 @@ packages:
  '@marijn/find-cluster-break@1.0.2':
    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}

+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
  '@monaco-editor/loader@1.7.0':
    resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}

@@ -3766,6 +3775,15 @@ packages:
    peerDependencies:
      storybook: ^10.5.9

+  '@storybook/addon-docs@10.5.9':
+    resolution: {integrity: sha512-8sFsMkZYrrdqCLdV+hnwTwDF7RaBsBPRwl4wfc8ve9Q/7Yhi5REe/Xjvd8x1yn6fBPPw9tnID9dx6Agdnr81fw==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.5.9
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@storybook/builder-vite@10.5.9':
    resolution: {integrity: sha512-Zg4JbGQiHFPGlFJ9HM+XPgzKmU/RFPCymhohVRJhBBYfmgaQgz0flWWzscseCDpl638MNd8/r/H+nwuoBgSYDg==}
    peerDependencies:
@@ -4189,6 +4207,9 @@ packages:
  '@types/mdast@4.0.3':
    resolution: {integrity: sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==}

+  '@types/mdx@2.0.14':
+    resolution: {integrity: sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==}
+
  '@types/ms@0.7.31':
    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}

@@ -12199,6 +12220,12 @@ snapshots:

  '@marijn/find-cluster-break@1.0.2': {}

+  '@mdx-js/react@3.1.1(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      '@types/mdx': 2.0.14
+      '@types/react': 18.0.26
+      react: 18.2.0
+
  '@monaco-editor/loader@1.7.0':
    dependencies:
      state-local: 1.0.7
@@ -13619,6 +13646,25 @@ snapshots:
      axe-core: 4.13.0
      storybook: 10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0)

+  '@storybook/addon-docs@10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))':
+    dependencies:
+      '@mdx-js/react': 3.1.1(@types/react@18.0.26)(react@18.2.0)
+      '@storybook/csf-plugin': 10.5.9(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
+      '@storybook/icons': 2.1.0(react@18.2.0)
+      '@storybook/react-dom-shim': 10.5.9(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      storybook: 10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0)
+      ts-dedent: 2.3.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+    transitivePeerDependencies:
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+
  '@storybook/builder-vite@10.5.9(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))':
    dependencies:
      '@storybook/csf-plugin': 10.5.9(esbuild@0.28.1)(rolldown-vite@7.3.1(@types/node@16.18.25)(esbuild@0.28.1)(jiti@2.6.1)(less@4.9.0)(sass@1.97.3)(stylus@0.62.0)(terser@5.46.2)(yaml@2.9.1))(storybook@10.5.9(@types/react@18.0.26)(prettier@3.8.3)(react@18.2.0))
@@ -14064,6 +14110,8 @@ snapshots:
    dependencies:
      '@types/unist': 3.0.2

+  '@types/mdx@2.0.14': {}
+
  '@types/ms@0.7.31': {}

  '@types/node@16.18.25': {}
--- a/frontend/public/locales/en-GB/titles.json
+++ b/frontend/public/locales/en-GB/titles.json
@@ -4,7 +4,6 @@
 	"GET_STARTED": "SigNoz | Get Started",
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",
-	"TRACE": "SigNoz | Trace",
 	"HOME": "SigNoz | Home",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
@@ -56,7 +55,6 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
-	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
--- a/frontend/public/locales/en/titles.json
+++ b/frontend/public/locales/en/titles.json
@@ -14,7 +14,6 @@
 	"GET_STARTED_AZURE_MONITORING": "SigNoz | Get Started | AZURE",
 	"GET_STARTED": "SigNoz | Get Started with SigNoz Cloud",
 	"GET_STARTED_WITH_CLOUD": "SigNoz | Get Started with SigNoz Cloud",
-	"TRACE": "SigNoz | Trace",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
 	"SETTINGS": "SigNoz | Settings",
@@ -79,7 +78,6 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
-	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"ROLE_CREATE": "SigNoz | Create Role",
--- a/frontend/scripts/test-storybook.sh
+++ b/frontend/scripts/test-storybook.sh
@@ -28,4 +28,4 @@ until curl -sf http://127.0.0.1:6006/index.json >/dev/null 2>&1; do
 	sleep 1
 done

-pnpm exec test-storybook --ci --maxWorkers=2 "$@"
+pnpm exec test-storybook --ci --maxWorkers=2 --testTimeout 30000 "$@"
--- a/frontend/src/AppRoutes/tests/Private.test.tsx
+++ b/frontend/src/AppRoutes/tests/Private.test.tsx
@@ -1588,15 +1588,10 @@ describe('PrivateRoute', () => {
 				deniedRoles: DENIED_ROLES,
 			},
 			TRACES_EXPLORER: { path: ROUTES.TRACES_EXPLORER, deniedRoles: DENIED_ROLES },
-			TRACE: { path: ROUTES.TRACE, deniedRoles: DENIED_ROLES },
 			TRACE_DETAIL: {
 				path: ROUTES.TRACE_DETAIL.replace(':id', 'trace-id-1'),
 				deniedRoles: DENIED_ROLES,
 			},
-			TRACE_DETAIL_OLD: {
-				path: ROUTES.TRACE_DETAIL_OLD.replace(':id', 'trace-id-1'),
-				deniedRoles: DENIED_ROLES,
-			},
 			// LOGS and LOGS_EXPLORER share a path - matchPath resolves it to whichever
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -53,17 +53,6 @@ export const TracesFunnelDetails = Loadable(
 		),
 );

-export const TraceFilter = Loadable(
-	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
-);
-
-export const TraceDetailOldRedirect = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetailOldRedirect" */ 'pages/TraceDetailOldRedirect/index'
-		),
-);
-
 export const TraceDetailV3 = Loadable(
 	() =>
 		import(
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -47,9 +47,7 @@ import {
 	SomethingWentWrong,
 	StatusPage,
 	SupportPage,
-	TraceDetailOldRedirect,
 	TraceDetailV3,
-	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
 	TracesFunnels,
@@ -132,14 +130,6 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
-	// Legacy /trace-old/:id redirects to the current /trace/:id view.
-	{
-		path: ROUTES.TRACE_DETAIL_OLD,
-		exact: true,
-		component: TraceDetailOldRedirect,
-		isPrivate: true,
-		key: 'TRACE_DETAIL_OLD',
-	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -224,13 +214,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
-	{
-		path: ROUTES.TRACE,
-		exact: true,
-		component: TraceFilter,
-		isPrivate: true,
-		key: 'TRACE',
-	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
 		exact: true,
--- a/frontend/src/api/generated/services/channels/index.ts
+++ b/frontend/src/api/generated/services/channels/index.ts
@@ -21,6 +21,7 @@ import type {
 	AlertmanagertypesPostableChannelDTO,
 	AlertmanagertypesPostableNotificationChannelDTO,
 	AlertmanagertypesReceiverDTO,
+	AlertmanagertypesRepairChannelParamsDTO,
 	AlertmanagertypesTestableNotificationChannelDTO,
 	AlertmanagertypesUpdatableNotificationChannelDTO,
 	CreateChannel201,
@@ -35,6 +36,9 @@ import type {
 	ListNotificationChannels200,
 	ListNotificationChannelsParams,
 	RenderErrorResponseDTO,
+	RepairNotificationChannel200,
+	RepairNotificationChannelParams,
+	RepairNotificationChannelPathParameters,
 	UpdateChannelByIDPathParameters,
 	UpdateNotificationChannel200,
 	UpdateNotificationChannelPathParameters,
@@ -1144,6 +1148,113 @@ export const useUpdateNotificationChannel = <
 > => {
 	return useMutation(getUpdateNotificationChannelMutationOptions(options));
 };
+/**
+ * This endpoint diagnoses a stored channel that the v2 API cannot read and applies the fitting action: a channel carrying several notifier configurations is split into one channel per configuration, keeping this ID for the first; a channel whose notifier kind v2 does not model is deleted; a channel with an empty stored type has it rewritten from its data. A delete is refused while a routing policy still names the channel. Nothing is written unless apply=true; by default the response only shows what would happen.
+ * @summary Repair notification channel
+ */
+export const repairNotificationChannel = (
+	{ id }: RepairNotificationChannelPathParameters,
+	alertmanagertypesRepairChannelParamsDTO?: BodyType<AlertmanagertypesRepairChannelParamsDTO>,
+	params?: RepairNotificationChannelParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<RepairNotificationChannel200>({
+		url: `/api/v2/notification_channels/${id}/repair`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: alertmanagertypesRepairChannelParamsDTO,
+		params,
+		signal,
+	});
+};
+
+export const getRepairNotificationChannelMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof repairNotificationChannel>>,
+		TError,
+		{
+			pathParams: RepairNotificationChannelPathParameters;
+			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+			params?: RepairNotificationChannelParams;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof repairNotificationChannel>>,
+	TError,
+	{
+		pathParams: RepairNotificationChannelPathParameters;
+		data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+		params?: RepairNotificationChannelParams;
+	},
+	TContext
+> => {
+	const mutationKey = ['repairNotificationChannel'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof repairNotificationChannel>>,
+		{
+			pathParams: RepairNotificationChannelPathParameters;
+			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+			params?: RepairNotificationChannelParams;
+		}
+	> = (props) => {
+		const { pathParams, data, params } = props ?? {};
+
+		return repairNotificationChannel(pathParams, data, params);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type RepairNotificationChannelMutationResult = NonNullable<
+	Awaited<ReturnType<typeof repairNotificationChannel>>
+>;
+export type RepairNotificationChannelMutationBody =
+	| BodyType<AlertmanagertypesRepairChannelParamsDTO>
+	| undefined;
+export type RepairNotificationChannelMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Repair notification channel
+ */
+export const useRepairNotificationChannel = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof repairNotificationChannel>>,
+		TError,
+		{
+			pathParams: RepairNotificationChannelPathParameters;
+			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+			params?: RepairNotificationChannelParams;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof repairNotificationChannel>>,
+	TError,
+	{
+		pathParams: RepairNotificationChannelPathParameters;
+		data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
+		params?: RepairNotificationChannelParams;
+	},
+	TContext
+> => {
+	return useMutation(getRepairNotificationChannelMutationOptions(options));
+};
 /**
 * This endpoint sends a test notification for the configuration in the request body. The channel need not exist and nothing is persisted, so the body carries a configuration only.
 * @summary Test notification channel
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -40,7 +40,73 @@ export interface AlertmanagertypesChannelDTO {
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind {
 	slack = 'slack',
 }
+export interface AlertmanagertypesChannelSlackConfirmationDTO {
+	/**
+	 * @type string
+	 */
+	dismissText?: string;
+	/**
+	 * @type string
+	 */
+	okText?: string;
+	/**
+	 * @type string
+	 */
+	text: string;
+	/**
+	 * @type string
+	 */
+	title?: string;
+}
+
+export interface AlertmanagertypesChannelSlackActionDTO {
+	confirm?: AlertmanagertypesChannelSlackConfirmationDTO;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	style?: string;
+	/**
+	 * @type string
+	 */
+	text: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 */
+	url?: string;
+	/**
+	 * @type string
+	 */
+	value?: string;
+}
+
+export interface AlertmanagertypesChannelSlackFieldDTO {
+	/**
+	 * @type boolean,null
+	 */
+	short?: boolean | null;
+	/**
+	 * @type string
+	 */
+	title: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
 export interface AlertmanagertypesChannelSlackConfigDTO {
+	/**
+	 * @type array
+	 */
+	actions?: AlertmanagertypesChannelSlackActionDTO[];
 	/**
 	 * @type string
 	 * @format password
@@ -50,6 +116,26 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 * @type string
 	 */
 	channel?: string;
+	/**
+	 * @type string
+	 */
+	color?: string;
+	/**
+	 * @type string
+	 */
+	fallback?: string;
+	/**
+	 * @type array
+	 */
+	fields?: AlertmanagertypesChannelSlackFieldDTO[];
+	/**
+	 * @type string
+	 */
+	footer?: string;
+	/**
+	 * @type string
+	 */
+	pretext?: string;
 	/**
 	 * @type boolean,null
 	 */
@@ -62,6 +148,10 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 * @type string
 	 */
 	title?: string;
+	/**
+	 * @type string
+	 */
+	titleLink?: string;
 }

 export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO {
@@ -506,6 +596,13 @@ export type AlertmanagertypesChannelConfigDTO =
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO;

+export enum AlertmanagertypesChannelDefectDTO {
+	none = 'none',
+	missing_type = 'missing_type',
+	multiple_notifiers = 'multiple_notifiers',
+	unsupported_notifier = 'unsupported_notifier',
+	unrepresentable = 'unrepresentable',
+}
 export enum AlertmanagertypesChannelKindDTO {
 	slack = 'slack',
 	email = 'email',
@@ -527,6 +624,63 @@ export enum AlertmanagertypesChannelListSortDTO {
 	created_at = 'created_at',
 	name = 'name',
 }
+export enum AlertmanagertypesChannelRepairActionDTO {
+	none = 'none',
+	retype = 'retype',
+	split = 'split',
+	delete = 'delete',
+}
+export interface AlertmanagertypesListedNotificationChannelDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt: string;
+	/**
+	 * @type string
+	 */
+	displayName: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	kind: AlertmanagertypesChannelKindDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt: string;
+}
+
+export interface AlertmanagertypesChannelRepairDTO {
+	action: AlertmanagertypesChannelRepairActionDTO;
+	/**
+	 * @type boolean
+	 */
+	applied: boolean;
+	/**
+	 * @type array
+	 */
+	blockers?: string[];
+	/**
+	 * @type array,null
+	 */
+	channels?: AlertmanagertypesListedNotificationChannelDTO[] | null;
+	defect: AlertmanagertypesChannelDefectDTO;
+	/**
+	 * @type string
+	 */
+	detail?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+}
+
 export interface ModelLabelSetDTO {
 	[key: string]: string;
 }
@@ -1020,32 +1174,6 @@ export interface AlertmanagertypesJiraReceiverConfigDTO {
 	wont_fix_resolution?: string;
 }

-export interface AlertmanagertypesListedNotificationChannelDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	displayName: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: AlertmanagertypesChannelKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
 export interface AlertmanagertypesListableNotificationChannelDTO {
 	/**
 	 * @type array
@@ -2449,6 +2577,13 @@ export interface AlertmanagertypesReceiverDTO {
 	wechat_configs?: ConfigWechatConfigDTO[];
 }

+export interface AlertmanagertypesRepairChannelParamsDTO {
+	/**
+	 * @type boolean
+	 */
+	apply?: boolean;
+}
+
 export interface AlertmanagertypesTestableNotificationChannelDTO {
 	config: AlertmanagertypesChannelConfigDTO;
 }
@@ -4009,6 +4144,52 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }

+export enum DashboardtypesAreaFillModeDTO {
+	solid = 'solid',
+	gradient = 'gradient',
+}
+/**
+ * @minimum 0
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesFillOpacityDTO = number | null;
+
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
+export interface DashboardtypesAreaChartAppearanceDTO {
+	fillMode?: DashboardtypesAreaFillModeDTO;
+	fillOpacity?: DashboardtypesFillOpacityDTO | null;
+	lineInterpolation?: DashboardtypesLineInterpolationDTO;
+	lineStyle?: DashboardtypesLineStyleDTO;
+	/**
+	 * @type boolean
+	 */
+	showPoints?: boolean;
+	spanGaps?: DashboardtypesSpanGapsDTO;
+}
+
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -4086,6 +4267,11 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	value: number;
 }

+export enum DashboardtypesStackModeDTO {
+	none = 'none',
+	normal = 'normal',
+	percent = 'percent',
+}
 export enum DashboardtypesTimePreferenceDTO {
 	global_time = 'global_time',
 	last_5_min = 'last_5_min',
@@ -4098,6 +4284,27 @@ export enum DashboardtypesTimePreferenceDTO {
 	last_1_week = 'last_1_week',
 	last_1_month = 'last_1_month',
 }
+export interface DashboardtypesAreaChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	stack?: DashboardtypesStackModeDTO;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesAreaChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesAreaChartVisualizationDTO;
+}
+
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -4795,29 +5002,6 @@ export enum DashboardtypesFillModeDTO {
 	gradient = 'gradient',
 	none = 'none',
 }
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
 export interface DashboardtypesTimeSeriesChartAppearanceDTO {
 	fillMode?: DashboardtypesFillModeDTO;
 	lineInterpolation?: DashboardtypesLineInterpolationDTO;
@@ -4870,6 +5054,18 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBarChartPanelSpecDTO;
 }

+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind {
+	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
+}
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO {
+	/**
+	 * @enum signoz/AreaChartPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind;
+	spec: DashboardtypesAreaChartPanelSpecDTO;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTOKind {
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 }
@@ -5075,6 +5271,7 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
@@ -5999,6 +6196,7 @@ export interface DashboardtypesListableDashboardViewDTO {
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
+	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 	'signoz/PieChartPanel' = 'signoz/PieChartPanel',
 	'signoz/TablePanel' = 'signoz/TablePanel',
@@ -10682,6 +10880,22 @@ export interface SpantypesGettableFlamegraphTraceDTO {
 	startTimestampMillis: number;
 }

+export enum SpantypesSpanMapperOriginDTO {
+	user = 'user',
+	system = 'system',
+}
+export interface SpantypesSpanMapperGroupConditionKeyDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+	origin?: SpantypesSpanMapperOriginDTO;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
 /**
 * @nullable
 */
@@ -10689,11 +10903,11 @@ export type SpantypesSpanMapperGroupConditionDTO = {
 	/**
 	 * @type array,null
 	 */
-	attributes: string[] | null;
+	attributes: SpantypesSpanMapperGroupConditionKeyDTO[] | null;
 	/**
 	 * @type array,null
 	 */
-	resource: string[] | null;
+	resource: SpantypesSpanMapperGroupConditionKeyDTO[] | null;
 } | null;

 export interface SpantypesSpanMapperGroupDTO {
@@ -10723,6 +10937,7 @@ export interface SpantypesSpanMapperGroupDTO {
 	 * @type string
 	 */
 	orgId: string;
+	origin: SpantypesSpanMapperOriginDTO;
 	/**
 	 * @type string
 	 * @format date-time
@@ -10732,6 +10947,10 @@ export interface SpantypesSpanMapperGroupDTO {
 	 * @type string
 	 */
 	updatedBy?: string;
+	/**
+	 * @type integer
+	 */
+	version: number;
 }

 export interface SpantypesGettableSpanMapperGroupsDTO {
@@ -10789,11 +11008,16 @@ export enum SpantypesSpanMapperOperationDTO {
 }
 export interface SpantypesSpanMapperSourceDTO {
 	context: SpantypesFieldContextDTO;
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
 	/**
 	 * @type string
 	 */
 	key: string;
 	operation: SpantypesSpanMapperOperationDTO;
+	origin?: SpantypesSpanMapperOriginDTO;
 	/**
 	 * @type integer
 	 */
@@ -10835,6 +11059,7 @@ export interface SpantypesSpanMapperDTO {
 	 * @type string
 	 */
 	name: string;
+	origin: SpantypesSpanMapperOriginDTO;
 	/**
 	 * @type string
 	 * @format date-time
@@ -13394,6 +13619,25 @@ export type UpdateNotificationChannel200 = {
 	status: string;
 };

+export type RepairNotificationChannelPathParameters = {
+	id: string;
+};
+export type RepairNotificationChannelParams = {
+	/**
+	 * @type boolean
+	 * @description undefined
+	 */
+	apply?: boolean;
+};
+
+export type RepairNotificationChannel200 = {
+	data: AlertmanagertypesChannelRepairDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetMyOrganization200 = {
 	data: TypesOrganizationDTO;
 	/**
--- a/frontend/src/api/querySuggestions/types.ts
+++ b/frontend/src/api/querySuggestions/types.ts
@@ -1,21 +1,15 @@
 import type {
 	GetAIObservabilityFieldsKeys200,
 	GetAIObservabilityFieldsValues200,
-	GetAIObservabilityFieldsKeysParams,
-	GetAIObservabilityFieldsValuesParams,
 	GetFieldsKeys200,
 	GetFieldsKeysParams,
 	GetFieldsValues200,
 	GetFieldsValuesParams,
 } from 'api/generated/services/sigNoz.schemas';

-export type FieldKeysConfig =
-	| GetFieldsKeysParams
-	| GetAIObservabilityFieldsKeysParams;
+export type FieldKeysConfig = GetFieldsKeysParams;

-export type FieldValuesConfig =
-	| GetFieldsValuesParams
-	| GetAIObservabilityFieldsValuesParams;
+export type FieldValuesConfig = GetFieldsValuesParams;

 export type FieldKeysConfigProp = Omit<
 	FieldKeysConfig,
--- a/frontend/src/api/trace/getFilters.ts
+++ b/frontend/src/api/trace/getFilters.ts
@@ -1,49 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import omitBy from 'lodash-es/omitBy';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/trace/getFilters';
-
-const getFilters = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const duration =
-			omitBy(props.other, (_, key) => !key.startsWith('duration')) || [];
-
-		const nonDuration = omitBy(props.other, (_, key) =>
-			key.startsWith('duration'),
-		);
-
-		const exclude: string[] = [];
-
-		props.isFilterExclude.forEach((value, key) => {
-			if (value) {
-				exclude.push(key);
-			}
-		});
-
-		const response = await axios.post<PayloadProps>(`/getSpanFilters`, {
-			start: props.start,
-			end: props.end,
-			getFilters: props.getFilters,
-			...nonDuration,
-			maxDuration: String((duration.duration || [])[0] || ''),
-			minDuration: String((duration.duration || [])[1] || ''),
-			exclude,
-			spanKind: props.spanKind,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getFilters;
--- a/frontend/src/api/trace/getSpans.ts
+++ b/frontend/src/api/trace/getSpans.ts
@@ -1,62 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import omitBy from 'lodash-es/omitBy';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/trace/getSpans';
-
-const getSpans = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: `${e.Key}.(string)`,
-			Operator: e.Operator,
-			StringValues: e.StringValues,
-			NumberValues: e.NumberValues,
-			BoolValues: e.BoolValues,
-		}));
-
-		const exclude: string[] = [];
-
-		props.isFilterExclude.forEach((value, key) => {
-			if (value) {
-				exclude.push(key);
-			}
-		});
-
-		const other = Object.fromEntries(props.selectedFilter);
-
-		const duration = omitBy(other, (_, key) => !key.startsWith('duration')) || [];
-
-		const nonDuration = omitBy(other, (_, key) => key.startsWith('duration'));
-
-		const response = await axios.post<PayloadProps>(
-			`/getFilteredSpans/aggregates`,
-			{
-				start: String(props.start),
-				end: String(props.end),
-				function: props.function,
-				groupBy: props.groupBy === 'none' ? '' : props.groupBy,
-				step: props.step,
-				tags: updatedSelectedTags,
-				...nonDuration,
-				maxDuration: String((duration.duration || [])[0] || ''),
-				minDuration: String((duration.duration || [])[1] || ''),
-				exclude,
-				spanKind: props.spanKind,
-			},
-		);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getSpans;
--- a/frontend/src/api/trace/getSpansAggregate.ts
+++ b/frontend/src/api/trace/getSpansAggregate.ts
@@ -1,65 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import omitBy from 'lodash-es/omitBy';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/trace/getSpanAggregate';
-import { TraceFilterEnum } from 'types/reducer/trace';
-
-const getSpanAggregate = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const preProps = {
-			start: String(props.start),
-			end: String(props.end),
-			limit: props.limit,
-			offset: props.offset,
-			order: props.order,
-			orderParam: props.orderParam,
-		};
-
-		const exclude: TraceFilterEnum[] = [];
-
-		props.isFilterExclude.forEach((value, key) => {
-			if (value) {
-				exclude.push(key);
-			}
-		});
-
-		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: `${e.Key}.(string)`,
-			Operator: e.Operator,
-			StringValues: e.StringValues,
-			NumberValues: e.NumberValues,
-			BoolValues: e.BoolValues,
-		}));
-
-		const other = Object.fromEntries(props.selectedFilter);
-
-		const duration = omitBy(other, (_, key) => !key.startsWith('duration')) || [];
-
-		const nonDuration = omitBy(other, (_, key) => key.startsWith('duration'));
-
-		const response = await axios.post<PayloadProps>(`/getFilteredSpans`, {
-			...preProps,
-			tags: updatedSelectedTags,
-			...nonDuration,
-			maxDuration: String((duration.duration || [])[0] || ''),
-			minDuration: String((duration.duration || [])[1] || ''),
-			exclude,
-			spanKind: props.spanKind,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getSpanAggregate;
--- a/frontend/src/api/trace/getTagFilter.ts
+++ b/frontend/src/api/trace/getTagFilter.ts
@@ -1,49 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { omitBy } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/trace/getTagFilters';
-import { TraceFilterEnum } from 'types/reducer/trace';
-
-const getTagFilters = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const duration =
-			omitBy(props.other, (_, key) => !key.startsWith('duration')) || [];
-
-		const exclude: TraceFilterEnum[] = [];
-
-		props.isFilterExclude.forEach((value, key) => {
-			if (value) {
-				exclude.push(key);
-			}
-		});
-
-		const nonDuration = omitBy(props.other, (_, key) =>
-			key.startsWith('duration'),
-		);
-
-		const response = await axios.post<PayloadProps>(`/getTagFilters`, {
-			start: String(props.start),
-			end: String(props.end),
-			...nonDuration,
-			maxDuration: String((duration.duration || [])[0] || ''),
-			minDuration: String((duration.duration || [])[1] || ''),
-			exclude,
-			spanKind: props.spanKind,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getTagFilters;
--- a/frontend/src/api/trace/getTagValue.ts
+++ b/frontend/src/api/trace/getTagValue.ts
@@ -1,31 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/trace/getTagValue';
-
-const getTagValue = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.post<PayloadProps>(`/getTagValues`, {
-			start: props.start.toString(),
-			end: props.end.toString(),
-			tagKey: {
-				Key: props.tagKey.Key,
-				Type: props.tagKey.Type,
-			},
-			spanKind: props.spanKind,
-		});
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getTagValue;
--- a/frontend/src/components/CustomTimePicker/stories/CustomTimePicker.stories.tsx
+++ b/frontend/src/components/CustomTimePicker/stories/CustomTimePicker.stories.tsx
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import dayjs from 'dayjs';
+import { screen, userEvent } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import CustomTimePicker from '../CustomTimePicker';
+
+const minTime = dayjs('2025-01-15T11:00:00Z').valueOf() * 1_000_000;
+const maxTime = dayjs('2025-01-15T12:00:00Z').valueOf() * 1_000_000;
+
+function TimePickerFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+	const [selectedTime, setSelectedTime] = useState('1h');
+
+	return (
+		<CustomTimePicker
+			isModalTimeSelection
+			items={[
+				{ label: 'Last 15 minutes', value: '15m' },
+				{ label: 'Last 1 hour', value: '1h' },
+				{ label: 'Last 6 hours', value: '6h' },
+				{ label: 'Custom', value: 'custom' },
+			]}
+			maxTime={maxTime}
+			minTime={minTime}
+			newPopover
+			open={open}
+			onCustomDateHandler={(): void => undefined}
+			onError={(): void => undefined}
+			onSelect={(value): void => setSelectedTime(value)}
+			onValidCustomDateChange={(): void => undefined}
+			selectedTime={selectedTime}
+			selectedValue="15 Jan 2025 11:00:00 - 15 Jan 2025 12:00:00"
+			setOpen={setOpen}
+		/>
+	);
+}
+
+const meta = {
+	title: 'Components/Custom Time Picker',
+	component: TimePickerFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+} satisfies Meta<typeof TimePickerFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Interaction: the time-range menu is open with its relative-range choices. */
+export const TimeRangeMenuOpen: Story = {
+	play: async (): Promise<void> => {
+		await userEvent.click(await screen.findByRole('textbox'));
+		await screen.findByText('RELATIVE TIMES');
+	},
+};
+
+/** Interaction: the timezone menu is reached through the real time-range footer. */
+export const TimezoneMenuOpen: Story = {
+	play: async (): Promise<void> => {
+		await userEvent.click(await screen.findByRole('textbox'));
+		await userEvent.click(
+			await screen.findByRole('button', { name: 'Change Timezone' }),
+		);
+		await screen.findByPlaceholderText('Search timezones...');
+	},
+};
--- a/frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.mocks.tsx
+++ b/frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.mocks.tsx
@@ -0,0 +1,28 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { rest } from 'msw';
+
+import { fieldKeysResponse } from '@/storybook/msw/__story_mockdata__/fields';
+
+export const fieldSuggestionsHandlers = [
+	rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(
+				fieldKeysResponse(['service.name', 'body'], {
+					signal: TelemetrytypesSignalDTO.logs,
+				}),
+			),
+		),
+	),
+];
+
+export const noFieldSuggestionsHandlers = [
+	rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json(fieldKeysResponse([]))),
+	),
+];
--- a/frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.tsx
+++ b/frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.tsx
@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { screen, userEvent } from 'storybook/test';
+import { DataSource } from 'types/common/queryBuilder';
+
+import FieldsSelector from '../FieldsSelector';
+import {
+	fieldSuggestionsHandlers,
+	noFieldSuggestionsHandlers,
+} from './FieldsSelector.stories.mocks';
+
+const meta = {
+	title: 'Components/Fields Selector',
+	component: FieldsSelector,
+	tags: ['play'],
+	args: {
+		allowCustomFields: true,
+		defaultPosition: { x: 40, y: 40 },
+		fields: [
+			{
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				name: 'timestamp',
+				signal: 'logs',
+			},
+		],
+		height: 560,
+		isOpen: true,
+		onClose: (): void => undefined,
+		onFieldsChange: (): void => undefined,
+		signal: DataSource.LOGS,
+		title: 'Edit log columns',
+		width: 420,
+	},
+	parameters: {
+		msw: {
+			handlers: fieldSuggestionsHandlers,
+		},
+	},
+} satisfies Meta<typeof FieldsSelector>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Open: the draggable field editor shows its selected and available columns. */
+export const Open: Story = {};
+
+/** Mutation: adding a suggested field exposes the real unsaved-change footer. */
+export const UnsavedChanges: Story = {
+	play: async (): Promise<void> => {
+		// One Add per suggested field, so the first row's is the one clicked.
+		const [addField] = await screen.findAllByRole('button', { name: 'Add' });
+
+		await userEvent.click(addField);
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
+};
+
+/** Empty: the suggestion request succeeds with no columns to add. */
+export const NoResults: Story = {
+	parameters: {
+		msw: {
+			handlers: noFieldSuggestionsHandlers,
+		},
+	},
+};
+
+/** Limit: available columns cannot be added once the configured maximum is reached. */
+export const MaximumFields: Story = {
+	args: {
+		fields: [
+			{
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				name: 'timestamp',
+				signal: 'logs',
+			},
+			{
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				name: 'severity_text',
+				signal: 'logs',
+			},
+		],
+		maxFields: 2,
+	},
+};
+
+/** Required: mandatory fields remain present without removal controls. */
+export const RequiredFields: Story = {
+	args: {
+		fields: [
+			{
+				fieldContext: 'resource',
+				fieldDataType: 'string',
+				name: 'service.name',
+				signal: 'logs',
+			},
+		],
+		requiredFields: ['resource:service.name:string'],
+	},
+};
--- a/frontend/src/components/NewSelect/stories/NewSelect.stories.tsx
+++ b/frontend/src/components/NewSelect/stories/NewSelect.stories.tsx
@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { screen, userEvent } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+import type { GlobalMockArgs } from '@/storybook/globals';
+
+import { CustomMultiSelect, CustomSelect } from '../index';
+
+const options = [
+	{ label: 'Checkout', value: 'checkout' },
+	{ label: 'Frontend', value: 'frontend' },
+	{ label: 'Payments', value: 'payments' },
+	{ label: 'Search', value: 'search' },
+];
+
+const longOptions = Array.from({ length: 24 }, (_, index) => ({
+	label: `Service ${String(index + 1).padStart(2, '0')}`,
+	value: `service-${index + 1}`,
+}));
+
+const meta = {
+	title: 'Components/New Select',
+	component: CustomSelect,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 360 })],
+	args: {
+		'aria-label': 'Service',
+		options,
+		placeholder: 'Select a service',
+	},
+} satisfies Meta<typeof CustomSelect>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TooltipsStory = StoryObj<GlobalMockArgs>;
+
+/** Interaction: the body-portal menu is open for stacking and clipping review. */
+export const PortalOpen: Story = {
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByRole('listbox');
+	},
+};
+
+/** Density: a long result list keeps the menu scrollable. */
+export const LongResults: Story = {
+	args: { options: longOptions },
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('Service 24');
+	},
+};
+
+/** Empty: the select reports its supported no-data state. */
+export const NoResults: Story = {
+	args: { noDataMessage: 'No services found', options: [] },
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('No services found');
+	},
+};
+
+/** Loading: the open menu keeps its in-progress refresh feedback visible. */
+export const Loading: Story = {
+	args: {
+		loading: true,
+		options: [],
+	},
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('Refreshing values...');
+	},
+};
+
+/** Error: a retryable failed request remains visible in the open menu. */
+export const Error: Story = {
+	args: {
+		errorMessage: 'Could not load services',
+		onRetry: (): void => undefined,
+		options: [],
+	},
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByText('Could not load services');
+	},
+};
+
+/** Selection: selected and unavailable options are distinguishable before choosing. */
+export const SelectedDisabled: Story = {
+	args: {
+		options: [
+			{ label: 'Checkout', value: 'checkout' },
+			{ disabled: true, label: 'Legacy billing', value: 'legacy-billing' },
+			{ label: 'Payments', value: 'payments' },
+		],
+		value: 'checkout',
+	},
+	play: async (): Promise<void> => {
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'Service' }),
+		);
+		await screen.findByRole('option', { name: 'Legacy billing' });
+	},
+};
+
+/** Overflow: a multi-select preserves its selected values when its trigger is constrained. */
+export const MultiValueOverflow: Story = {
+	render: (): JSX.Element => (
+		<div style={{ maxWidth: 280 }}>
+			<CustomMultiSelect
+				aria-label="Services"
+				maxTagCount={2}
+				options={longOptions}
+				value={['service-1', 'service-2', 'service-3', 'service-4']}
+			/>
+		</div>
+	),
+};
+
+const LONG_LABEL_OPTION = {
+	label:
+		'checkout-service.production-eu-central-1.svc.cluster.local:8080/v1/orders/{orderId}/payment-authorisation',
+	value: 'checkout-payment-authorisation',
+};
+
+/**
+ * Every tooltip the select renders, held open: the selected chip revealing the
+ * option label it was cut from. Nothing bounds that label, so the chip is given
+ * one long enough to need the reveal.
+ */
+export const Tooltips: TooltipsStory = {
+	args: { tooltipsOpen: true },
+	render: (): JSX.Element => (
+		<div style={{ maxWidth: 280 }}>
+			<CustomMultiSelect
+				aria-label="Services"
+				maxTagCount={1}
+				maxTagTextLength={14}
+				options={[LONG_LABEL_OPTION, ...options]}
+				value={[LONG_LABEL_OPTION.value]}
+			/>
+		</div>
+	),
+};
--- a/frontend/src/components/NotFound/stories/NotFound.stories.mocks.tsx
+++ b/frontend/src/components/NotFound/stories/NotFound.stories.mocks.tsx
@@ -0,0 +1,15 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+/**
+ * The catch-all has no route of its own: it answers for whatever pathname the
+ * `Switch` ran out of routes for, and it calls nothing.
+ */
+export const notFoundMocks = defineStoryMocks({
+	controls: {},
+	config: () => ({ route: '/no-such-page' }),
+});
--- a/frontend/src/components/NotFound/stories/NotFound.stories.tsx
+++ b/frontend/src/components/NotFound/stories/NotFound.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+
+import NotFound from '../index';
+import { notFoundMocks } from './NotFound.stories.mocks';
+
+type NotFoundArgs = PageStoryArgs<typeof notFoundMocks>;
+
+/**
+ * The catch-all route mounts it with no props, and its `defaultProps` is what
+ * keeps the component itself from typing as one that takes the story's args.
+ */
+function CatchAllPage(): JSX.Element {
+	return <NotFound />;
+}
+
+const pageStory = storyMocks(notFoundMocks, { layout: 'app' });
+
+/**
+ * The shell around a pathname no route matched: the side nav stays, the content
+ * area carries the 404.
+ *
+ * Route: any unmatched path.
+ */
+const meta = {
+	title: 'Pages/System/Not Found',
+	component: CatchAllPage,
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<NotFoundArgs>;
+
+export default meta;
+
+type Story = StoryObj<NotFoundArgs>;
+
+/**
+ * What the app shows for a pathname no route matched, inside the shell: the
+ * side nav is still there, and the way back is the home button.
+ */
+export const Default: Story = {};
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -15,7 +15,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import CheckboxFilterHeader from './CheckboxFilterHeader';
 import CheckboxValueRow from './CheckboxValueRow';
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import useActiveQueryIndex from './useActiveQueryIndex';
+import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import useCheckboxDisclosure from './useCheckboxDisclosure';
 import useCheckboxFilterActions from './useCheckboxFilterActions';
 import useCheckboxFilterState from './useCheckboxFilterState';
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx
@@ -56,6 +56,57 @@ export function mockFieldsValuesAPI(response: {
 	);
 }

+/**
+ * Records every request the AI observability values endpoint receives, so a test
+ * can assert both the routing and the query params it was called with.
+ */
+export function mockAIObservabilityFieldsValuesAPI(response: {
+	relatedValues?: (string | null)[];
+	stringValues?: (string | null)[];
+	numberValues?: (number | null)[];
+}): { requests: URLSearchParams[] } {
+	const requests: URLSearchParams[] = [];
+
+	server.use(
+		rest.get(
+			'http://localhost/api/v1/ai_observability/fields/values',
+			(req, res, ctx) => {
+				requests.push(req.url.searchParams);
+
+				return res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							values: {
+								relatedValues: response.relatedValues ?? [],
+								stringValues: response.stringValues ?? [],
+								numberValues: response.numberValues ?? [],
+							},
+						},
+					}),
+				);
+			},
+		),
+	);
+
+	return { requests };
+}
+
+/** Fails the test if the signal-wide values endpoint is hit at all. */
+export function forbidFieldsValuesAPI(): { called: boolean } {
+	const state = { called: false };
+
+	server.use(
+		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) => {
+			state.called = true;
+			return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+		}),
+	);
+
+	return state;
+}
+
 export function mockFieldsValuesAPILoading(): void {
 	server.use(
 		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx
@@ -16,7 +16,7 @@ import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

 import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
-import useActiveQueryIndex from '../useActiveQueryIndex';
+import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import useCheckboxDisclosure from '../useCheckboxDisclosure';
 import useCheckboxFilterActions from '../useCheckboxFilterActions';
 import useCheckboxFilterState from '../useCheckboxFilterState';
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/tests/CheckboxFilterV2.aiObservability.test.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/tests/CheckboxFilterV2.aiObservability.test.tsx
@@ -0,0 +1,81 @@
+import { screen, waitFor } from '@testing-library/react';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../../types';
+
+import CheckboxFilterV2 from '../CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	forbidFieldsValuesAPI,
+	mockAIObservabilityFieldsValuesAPI,
+	mockFieldsValuesAPI,
+	setupServer,
+} from '../CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - AI observability routing', () => {
+	it('reads values from the AI observability endpoint and never the signal-wide one', async () => {
+		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
+			stringValues: ['openai', 'anthropic'],
+		});
+		const fieldsEndpoint = forbidFieldsValuesAPI();
+
+		render(
+			<CheckboxFilterV2
+				filter={DEFAULT_FILTER}
+				source={QuickFiltersSource.AI_OBSERVABILITY}
+				useFieldApis={DEFAULT_USE_FIELD_APIS}
+			/>,
+		);
+
+		await expect(screen.findByText('openai')).resolves.toBeInTheDocument();
+		expect(screen.getByText('anthropic')).toBeInTheDocument();
+		expect(fieldsEndpoint.called).toBe(false);
+		expect(aiEndpoint.requests).toHaveLength(1);
+	});
+
+	it('forwards the filter key and the time range to the AI observability endpoint', async () => {
+		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
+			stringValues: ['openai'],
+		});
+
+		render(
+			<CheckboxFilterV2
+				filter={DEFAULT_FILTER}
+				source={QuickFiltersSource.AI_OBSERVABILITY}
+				useFieldApis={DEFAULT_USE_FIELD_APIS}
+			/>,
+		);
+
+		await screen.findByText('openai');
+
+		const params = aiEndpoint.requests[0];
+		expect(params.get('name')).toBe(DEFAULT_FILTER.attributeKey.key);
+		expect(params.get('startUnixMilli')).toBe(
+			String(DEFAULT_USE_FIELD_APIS.startUnixMilli),
+		);
+		expect(params.get('endUnixMilli')).toBe(
+			String(DEFAULT_USE_FIELD_APIS.endUnixMilli),
+		);
+	});
+
+	it('keeps non-AI sources on the signal-wide endpoint', async () => {
+		mockFieldsValuesAPI({ stringValues: ['production'] });
+		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
+			stringValues: ['should-not-be-used'],
+		});
+
+		render(
+			<CheckboxFilterV2
+				filter={DEFAULT_FILTER}
+				source={QuickFiltersSource.TRACES_EXPLORER}
+				useFieldApis={DEFAULT_USE_FIELD_APIS}
+			/>,
+		);
+
+		await expect(screen.findByText('production')).resolves.toBeInTheDocument();
+		await waitFor(() => expect(aiEndpoint.requests).toHaveLength(0));
+	});
+});
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx
@@ -1,11 +1,12 @@
 import { useMemo } from 'react';
-import { useGetFieldsValues } from 'api/generated/services/fields';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { FieldValuesConfig } from 'api/querySuggestions/types';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
+import { useFieldValuesSuggestion } from 'hooks/querySuggestions/useFieldValuesSuggestion';
+import { BuilderQueryType } from 'types/api/v5/queryRange';
 import { DATA_SOURCE_TO_SIGNAL } from 'types/common/queryBuilder';

 interface UseFieldValuesProps {
@@ -42,32 +43,43 @@ export function useFieldValues({
 	endUnixMilli,
 	enabled,
 }: UseFieldValuesProps): UseFieldValuesReturn {
-	const { data, isLoading, isFetching } = useGetFieldsValues(
-		{
-			signal: filter.dataSource
-				? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
-				: undefined,
-			name: filter.attributeKey.key,
-			searchText,
-			existingQuery,
-			metricNamespace,
-			source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
-			startUnixMilli,
-			// This field does not affect the backend but I wanted to keep it here
-			// in case we add the support in the future
-			endUnixMilli,
-		},
-		{
-			query: {
-				enabled,
-				cacheTime: FIELD_API_CACHE_TIME,
-				keepPreviousData: true,
-			},
-		},
-	);
+	const isAIObservability = source === QuickFiltersSource.AI_OBSERVABILITY;
+
+	const builderQueryType: BuilderQueryType | undefined = isAIObservability
+		? 'builder_ai_query'
+		: undefined;
+
+	// The AI values endpoint is already gen_ai-scoped: no signal, no source.
+	const fieldValuesConfig: FieldValuesConfig = isAIObservability
+		? {
+				name: filter.attributeKey.key,
+				searchText,
+				existingQuery,
+				startUnixMilli,
+				endUnixMilli,
+			}
+		: {
+				signal: filter.dataSource
+					? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
+					: undefined,
+				name: filter.attributeKey.key,
+				searchText,
+				existingQuery,
+				metricNamespace,
+				source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
+				startUnixMilli,
+				// This field does not affect the backend but I wanted to keep it here
+				// in case we add the support in the future
+				endUnixMilli,
+			};
+
+	const {
+		data: values,
+		isLoading,
+		isFetching,
+	} = useFieldValuesSuggestion(fieldValuesConfig, builderQueryType, { enabled });

 	const relatedValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
 		if (!values) {
 			return [];
 		}
@@ -78,10 +90,9 @@ export function useFieldValues({
 					value !== null && value !== undefined && value !== '',
 			) || []
 		);
-	}, [data]);
+	}, [values]);

 	const allValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
 		if (!values) {
 			return [];
 		}
@@ -101,7 +112,7 @@ export function useFieldValues({
 				.map((value) => value.toString()) || [];

 		return [...stringValues, ...numberValues, ...boolValues];
-	}, [data]);
+	}, [values]);

 	return { relatedValues, allValues, isLoading, isFetching };
 }
--- a/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx
@@ -1,36 +1,32 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Collapse } from 'antd';
 import { Undo2 } from '@signozhq/icons';
+import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { getMs } from 'utils/timeUtils';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
-import { DurationSection } from 'pages/TracesExplorer/Filter/DurationSection';
 import {
 	AllTraceFilterKeys,
 	AllTraceFilterKeyValue,
-	HandleRunProps,
 	traceFilterKeys,
-	unionTagFilterItems,
-} from 'pages/TracesExplorer/Filter/filterUtils';
+} from 'constants/traceFilterKeys';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';

 import { clearFilterFromQuery } from '../shared/filterQuery';
 import { SectionActionButton } from '../shared/SectionActionButton/SectionActionButton';
+import { DurationSection } from './DurationSection';
+import { FilterType, HandleRunProps, unionTagFilterItems } from './utils';

 import './Duration.styles.scss';

-export type FilterType = Record<
-	AllTraceFilterKeys,
-	{ values: string[] | string; keys: BaseAutocompleteData }
->;
+export type { FilterType };

 function Duration({
 	filter,
@@ -39,7 +35,7 @@ function Duration({
 }: {
 	filter: IQuickFiltersConfig;
 	onFilterChange?: (query: Query) => void;
-	source?: QuickFiltersSource;
+	source: QuickFiltersSource;
 }): JSX.Element {
 	const [selectedFilters, setSelectedFilters] =
 		useState<
@@ -52,26 +48,11 @@ function Duration({
 		filter.defaultOpen ? 'durationNano' : '',
 	]);

-	const {
-		currentQuery,
-		redirectWithQueryBuilderData,
-		lastUsedQuery,
-		panelType,
-	} = useQueryBuilder();
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();

 	const compositeQuery = useGetCompositeQueryParam();

-	const isListView = panelType === PANEL_TYPES.LIST;
-	// In ListView mode, use index 0 for most sources; for TRACES_EXPLORER, use lastUsedQuery
-	// Otherwise use lastUsedQuery for non-ListView modes
-	const activeQueryIndex = useMemo(() => {
-		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
-				? lastUsedQuery || 0
-				: 0;
-		}
-		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
+	const activeQueryIndex = useActiveQueryIndex(source);

 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const syncSelectedFilters = useMemo((): FilterType => {
--- a/frontend/src/components/QuickFilters/FilterRenderers/Duration/DurationSection.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Duration/DurationSection.tsx
@@ -9,10 +9,12 @@ import {
 } from 'react';
 import { Input } from 'antd';
 import { Slider } from '@signozhq/ui/slider';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { getMs } from 'utils/timeUtils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';

-import { addFilter, FilterType, traceFilterKeys } from './filterUtils';
+import { traceFilterKeys } from 'constants/traceFilterKeys';
+
+import { addFilter, FilterType } from './utils';

 interface DurationProps {
 	selectedFilters: FilterType | undefined;
--- a/frontend/src/components/QuickFilters/FilterRenderers/Duration/utils.ts
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Duration/utils.ts
@@ -0,0 +1,101 @@
+import { Dispatch, SetStateAction } from 'react';
+import { AllTraceFilterKeys } from 'constants/traceFilterKeys';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+
+export type FilterType = Record<
+	AllTraceFilterKeys,
+	{ values: string[] | string; keys: BaseAutocompleteData }
+>;
+
+export interface HandleRunProps {
+	resetAll?: boolean;
+	clearByType?: AllTraceFilterKeys;
+}
+
+function convertToStringArr(value: string | string[] | undefined): string[] {
+	if (value) {
+		if (typeof value === 'string') {
+			return [value];
+		}
+		return value;
+	}
+	return [];
+}
+
+export const addFilter = (
+	filterType: AllTraceFilterKeys,
+	value: string,
+	setSelectedFilters: Dispatch<
+		SetStateAction<
+			| Record<
+					AllTraceFilterKeys,
+					{ values: string[] | string; keys: BaseAutocompleteData }
+			  >
+			| undefined
+		>
+	>,
+	keys: BaseAutocompleteData,
+): void => {
+	setSelectedFilters((prevFilters) => {
+		const isDuration = [
+			'durationNanoMax',
+			'durationNanoMin',
+			'durationNano',
+		].includes(filterType);
+
+		// Convert value to string array
+		const valueArray = convertToStringArr(value);
+
+		// If previous filters are undefined, initialize them
+		if (!prevFilters) {
+			return {
+				[filterType]: { values: isDuration ? value : valueArray, keys },
+			} as unknown as FilterType;
+		}
+
+		// If the filter type doesn't exist, initialize it
+		if (!prevFilters[filterType]?.values.length) {
+			return {
+				...prevFilters,
+				[filterType]: { values: isDuration ? value : valueArray, keys },
+			};
+		}
+
+		// If the value already exists, don't add it again
+		if (convertToStringArr(prevFilters[filterType].values).includes(value)) {
+			return prevFilters;
+		}
+
+		// Otherwise, add the value to the existing array
+		return {
+			...prevFilters,
+			[filterType]: {
+				values: isDuration
+					? value
+					: [...convertToStringArr(prevFilters[filterType].values), value],
+				keys,
+			},
+		};
+	});
+};
+
+/** Merges two filter lists; later items win on the same key + operator. */
+export function unionTagFilterItems(
+	items1: TagFilterItem[],
+	items2: TagFilterItem[],
+): TagFilterItem[] {
+	const unionMap = new Map<string, TagFilterItem>();
+
+	items1?.forEach((item) => {
+		const keyOp = `${item?.key?.key}_${item?.op}`;
+		unionMap.set(keyOp, item);
+	});
+
+	items2?.forEach((item) => {
+		const keyOp = `${item?.key?.key}_${item?.op}`;
+		unionMap.set(keyOp, item);
+	});
+
+	return Array.from(unionMap?.values());
+}
--- a/frontend/src/components/QuickFilters/QuickFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFilters.tsx
@@ -35,6 +35,7 @@ import { isFunction } from 'lodash-es';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
+import useActiveQueryIndex from './hooks/useActiveQueryIndex';
 import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
@@ -113,14 +114,13 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	const shouldShowDropdownInListView =
 		isListView && source === QuickFiltersSource.TRACES_EXPLORER;

-	const activeQueryIndex = useMemo(() => {
-		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
-				? lastUsedQuery || 0
-				: 0;
-		}
-		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
+	// AI observability builds a single query in the row-level views, so there is
+	// no query for the selector to switch between.
+	const isAIObservabilityRowView =
+		source === QuickFiltersSource.AI_OBSERVABILITY &&
+		(isListView || panelType === PANEL_TYPES.TRACE);
+
+	const activeQueryIndex = useActiveQueryIndex(source);

 	// clear all the filters for the query which is in sync with filters
 	const handleReset = (): void => {
@@ -167,9 +167,10 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;

 	// In ListView, always show the 0th query's name; otherwise use the active query's name
-	const displayedQueryName = isListView
-		? showQueryName && currentQuery.builder.queryData?.[0]?.queryName
-		: lastQueryName;
+	const displayedQueryName =
+		isListView || isAIObservabilityRowView
+			? showQueryName && currentQuery.builder.queryData?.[0]?.queryName
+			: lastQueryName;

 	const handleQueryChange = (value: number): void => {
 		setLastUsedQuery(value);
@@ -182,7 +183,9 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
-			{queryOptions.length > 1 && (!isListView || shouldShowDropdownInListView) ? (
+			{queryOptions.length > 1 &&
+			!isAIObservabilityRowView &&
+			(!isListView || shouldShowDropdownInListView) ? (
 				<Combobox open={open} onOpenChange={setOpen}>
 					<ComboboxTrigger
 						placeholder="Select a query"
@@ -318,6 +321,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							return (
 								<Duration
 									key={filter.attributeKey.key}
+									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
+import { FieldKeysConfig } from 'api/querySuggestions/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
+import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
 import {
+	BuilderQueryType,
 	FieldContext,
 	FieldDataType,
 	TelemetryFieldKey,
@@ -41,23 +43,31 @@ function OtherFilters({
 	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
 }): JSX.Element {
 	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
+	const isAIObservability = signal === SignalType.AI_OBSERVABILITY;

-	const { data, isFetching } = useGetFieldsKeys(
-		{
-			searchText: inputValue,
-			signal: signal
-				? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-				: undefined,
-			source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
-		},
-		{ query: { enabled: !!signal } },
+	const builderQueryType: BuilderQueryType | undefined = isAIObservability
+		? 'builder_ai_query'
+		: undefined;
+
+	const fieldKeysConfig: FieldKeysConfig = isAIObservability
+		? { searchText: inputValue }
+		: {
+				searchText: inputValue,
+				signal: signal
+					? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
+					: undefined,
+				source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
+			};
+
+	const { data: fetchedKeys, isFetching } = useFieldKeysSuggestion(
+		fieldKeysConfig,
+		builderQueryType,
 	);

 	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data?.keys ?? {}).flat();
 		// Normalize: synthesize the composite `key` once so downstream reads (dedupe,
 		// add, render) can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
+		const suggestions: TelemetryFieldKey[] = (fetchedKeys ?? []).map((attr) => ({
 			name: attr.name,
 			signal: attr.signal as TelemetryFieldKey['signal'],
 			fieldContext: attr.fieldContext as FieldContext,
@@ -71,7 +81,7 @@ function OtherFilters({
 			),
 		);
 		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
-	}, [data, addedFilters]);
+	}, [fetchedKeys, addedFilters]);

 	const handleAddFilter = (filter: TelemetryFieldKey): void => {
 		setAddedFilters((prev) => [...prev, filter]);
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/tests/OtherFilters.test.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/tests/OtherFilters.test.tsx
@@ -0,0 +1,81 @@
+import { screen, waitFor } from '@testing-library/react';
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render } from 'tests/test-utils';
+
+import { SignalType } from '../../types';
+import OtherFilters from '../OtherFilters';
+
+const BASE_URL = ENVIRONMENT.baseURL;
+const FIELDS_KEYS_URL = `${BASE_URL}/api/v1/fields/keys`;
+const AI_KEYS_URL = `${BASE_URL}/api/v1/ai_observability/fields/keys`;
+
+function keysResponse(name: string): Record<string, unknown> {
+	return {
+		status: 'success',
+		data: {
+			complete: true,
+			keys: {
+				[name]: [{ name, fieldContext: 'attribute', fieldDataType: 'string' }],
+			},
+		},
+	};
+}
+
+describe('OtherFilters - AI observability keys', () => {
+	let fieldsKeysCalled: boolean;
+	let aiKeysParams: URLSearchParams | undefined;
+
+	beforeEach(() => {
+		fieldsKeysCalled = false;
+		aiKeysParams = undefined;
+
+		server.use(
+			rest.get(FIELDS_KEYS_URL, (_, res, ctx) => {
+				fieldsKeysCalled = true;
+				return res(ctx.status(200), ctx.json(keysResponse('http.route')));
+			}),
+			rest.get(AI_KEYS_URL, (req, res, ctx) => {
+				aiKeysParams = req.url.searchParams;
+				return res(ctx.status(200), ctx.json(keysResponse('gen_ai.request.model')));
+			}),
+		);
+	});
+
+	function renderOtherFilters(signal: SignalType): void {
+		render(
+			<OtherFilters
+				signal={signal}
+				inputValue=""
+				addedFilters={[]}
+				setAddedFilters={jest.fn()}
+			/>,
+		);
+	}
+
+	it('reads AI observability keys from their own endpoint', async () => {
+		renderOtherFilters(SignalType.AI_OBSERVABILITY);
+
+		await expect(
+			screen.findByText('gen_ai.request.model'),
+		).resolves.toBeInTheDocument();
+		expect(fieldsKeysCalled).toBe(false);
+	});
+
+	it('does not narrow the AI keys by fieldContext', async () => {
+		renderOtherFilters(SignalType.AI_OBSERVABILITY);
+
+		// A `trace` context would return only the computed per-trace aggregates,
+		// which cannot be filtered on.
+		await waitFor(() => expect(aiKeysParams).toBeDefined());
+		expect(aiKeysParams?.get('fieldContext')).toBeNull();
+	});
+
+	it('keeps other signals on the signal-wide keys endpoint', async () => {
+		renderOtherFilters(SignalType.TRACES);
+
+		await expect(screen.findByText('http.route')).resolves.toBeInTheDocument();
+		await waitFor(() => expect(aiKeysParams).toBeUndefined());
+	});
+});
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/constants.ts
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/constants.ts
@@ -7,4 +7,5 @@ export const SIGNAL_DATA_SOURCE_MAP = {
 	[SignalType.EXCEPTIONS]: DataSource.TRACES,
 	[SignalType.API_MONITORING]: DataSource.TRACES,
 	[SignalType.METER_EXPLORER]: DataSource.METRICS,
+	[SignalType.AI_OBSERVABILITY]: DataSource.TRACES,
 };
--- a/frontend/src/components/QuickFilters/hooks/tests/useActiveQueryIndex.test.ts
+++ b/frontend/src/components/QuickFilters/hooks/tests/useActiveQueryIndex.test.ts
@@ -0,0 +1,81 @@
+import { renderHook } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+
+import { QuickFiltersSource } from '../../types';
+import useActiveQueryIndex from '../useActiveQueryIndex';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+
+const LAST_USED_QUERY = 2;
+
+function mockQueryBuilder(panelType: PANEL_TYPES): void {
+	(useQueryBuilder as jest.Mock).mockReturnValue({
+		lastUsedQuery: LAST_USED_QUERY,
+		panelType,
+	});
+}
+
+describe('useActiveQueryIndex', () => {
+	describe('AI observability builds a single query in the row-level views', () => {
+		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
+			'drives the first query in %s',
+			(panelType) => {
+				mockQueryBuilder(panelType);
+
+				const { result } = renderHook(() =>
+					useActiveQueryIndex(QuickFiltersSource.AI_OBSERVABILITY),
+				);
+
+				expect(result.current).toBe(0);
+			},
+		);
+
+		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
+			'follows the last used query in %s',
+			(panelType) => {
+				mockQueryBuilder(panelType);
+
+				const { result } = renderHook(() =>
+					useActiveQueryIndex(QuickFiltersSource.AI_OBSERVABILITY),
+				);
+
+				expect(result.current).toBe(LAST_USED_QUERY);
+			},
+		);
+	});
+
+	describe('other sources are unchanged', () => {
+		it('lets the traces explorer track the last used query in list view', () => {
+			mockQueryBuilder(PANEL_TYPES.LIST);
+
+			const { result } = renderHook(() =>
+				useActiveQueryIndex(QuickFiltersSource.TRACES_EXPLORER),
+			);
+
+			expect(result.current).toBe(LAST_USED_QUERY);
+		});
+
+		it('pins single-query sources to the first query in list view', () => {
+			mockQueryBuilder(PANEL_TYPES.LIST);
+
+			const { result } = renderHook(() =>
+				useActiveQueryIndex(QuickFiltersSource.INFRA_MONITORING),
+			);
+
+			expect(result.current).toBe(0);
+		});
+
+		it('tracks the last used query outside list view', () => {
+			mockQueryBuilder(PANEL_TYPES.TIME_SERIES);
+
+			const { result } = renderHook(() =>
+				useActiveQueryIndex(QuickFiltersSource.LOGS_EXPLORER),
+			);
+
+			expect(result.current).toBe(LAST_USED_QUERY);
+		});
+	});
+});
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useActiveQueryIndex.ts
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useActiveQueryIndex.ts
@@ -15,13 +15,21 @@ function useActiveQueryIndex(source: QuickFiltersSource): number {
 	const isListView = panelType === PANEL_TYPES.LIST;

 	return useMemo(() => {
+		// AI observability builds a single query in the row-level views, so its
+		// filters always drive the first one there.
+		if (source === QuickFiltersSource.AI_OBSERVABILITY) {
+			return isListView || panelType === PANEL_TYPES.TRACE
+				? 0
+				: lastUsedQuery || 0;
+		}
+
 		if (isListView) {
 			return source === QuickFiltersSource.TRACES_EXPLORER
 				? lastUsedQuery || 0
 				: 0;
 		}
 		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
+	}, [isListView, panelType, source, lastUsedQuery]);
 }

 export default useActiveQueryIndex;
--- a/frontend/src/components/QuickFilters/stories/QuickFilters.stories.mocks.tsx
+++ b/frontend/src/components/QuickFilters/stories/QuickFilters.stories.mocks.tsx
@@ -0,0 +1,126 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import {
+	QuickfiltertypesSourceDTO,
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { rest, type RequestHandler } from 'msw';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { attributeValuesResponse } from '@/storybook/msw/__story_mockdata__/attributes';
+import { fieldKeysResponse } from '@/storybook/msw/__story_mockdata__/fields';
+import { quickFiltersResponse } from '@/storybook/msw/__story_mockdata__/quickFilters';
+
+import { FiltersType } from '../types';
+
+const customFilters = [
+	{
+		name: 'service.name',
+		fieldDataType: TelemetrytypesFieldDataTypeDTO.string,
+		fieldContext: TelemetrytypesFieldContextDTO.resource,
+	},
+	{
+		name: 'deployment.environment',
+		fieldDataType: TelemetrytypesFieldDataTypeDTO.string,
+		fieldContext: TelemetrytypesFieldContextDTO.resource,
+	},
+];
+
+export const queryBuilder = {
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					filter: { expression: '' },
+					filters: { items: [], op: 'AND' },
+					queryName: 'Logs query',
+				},
+			],
+		},
+	},
+	lastUsedQuery: 0,
+	panelType: 'graph',
+	redirectWithQueryBuilderData: (): void => undefined,
+	setLastUsedQuery: (): void => undefined,
+};
+
+export const checkboxConfig = [
+	{
+		attributeKey: {
+			dataType: DataTypes.String,
+			key: 'service.name',
+			type: 'resource',
+		},
+		defaultOpen: true,
+		title: 'Service name',
+		type: FiltersType.CHECKBOX,
+	},
+];
+
+export const attributeValuesHandler = (
+	values: readonly string[],
+): RequestHandler =>
+	rest.get(
+		'http://localhost/api/v3/autocomplete/attribute_values',
+		(_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(attributeValuesResponse(values))),
+	);
+
+export const handlers = [
+	rest.get('http://localhost/api/v2/quick_filters/logs', (_req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(
+				quickFiltersResponse(QuickfiltertypesSourceDTO.logs, customFilters),
+			),
+		),
+	),
+	rest.get('http://localhost/api/v1/fields/keys', (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json(fieldKeysResponse(['k8s.namespace.name']))),
+	),
+	attributeValuesHandler(['checkout', 'frontend', 'payments']),
+];
+
+export const loadingFiltersHandlers = [
+	rest.get('http://localhost/api/v2/quick_filters/logs', (_req, res, ctx) =>
+		res(ctx.delay('infinite')),
+	),
+];
+
+export const LONG_FILTER_VALUES = [
+	'checkout-service.production-eu-central-1.svc.cluster.local',
+	'payments-authorisation-worker.production-us-east-2.svc.cluster.local',
+	'catalog-availability-projector.staging-ap-south-1.svc.cluster.local',
+];
+
+export const selectedServiceQueryBuilder = {
+	...queryBuilder,
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					filter: { expression: '' },
+					filters: {
+						items: [
+							{
+								key: {
+									dataType: DataTypes.String,
+									key: 'service.name',
+									type: 'resource',
+								},
+								op: 'in',
+								value: ['checkout', 'payments'],
+							},
+						],
+						op: 'AND',
+					},
+					queryName: 'Logs query',
+				},
+			],
+		},
+	},
+};
--- a/frontend/src/components/QuickFilters/stories/QuickFilters.stories.tsx
+++ b/frontend/src/components/QuickFilters/stories/QuickFilters.stories.tsx
@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ComponentProps, ComponentType } from 'react';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+import type { GlobalMockArgs } from '@/storybook/globals';
+
+import QuickFilters from '../QuickFilters';
+import {
+	attributeValuesHandler,
+	checkboxConfig,
+	handlers,
+	LONG_FILTER_VALUES,
+	loadingFiltersHandlers,
+	queryBuilder,
+	selectedServiceQueryBuilder,
+} from './QuickFilters.stories.mocks';
+import { QuickFiltersSource, SignalType } from '../types';
+
+const meta = {
+	title: 'Components/Quick Filters',
+	// `QuickFilters.defaultProps` declares `onFilterChange: null` against a prop
+	// typed as an optional function, so the component does not satisfy
+	// `ComponentType` as written. The defaults are load-bearing for the jest
+	// suite, hence the cast rather than a change to them.
+	component: QuickFilters as unknown as ComponentType<
+		ComponentProps<typeof QuickFilters>
+	>,
+	tags: ['play'],
+	// The rail the explorers give it (`Explorer.styles.scss`, `.filter`).
+	decorators: [withCanvas({ width: 260 })],
+	args: {
+		config: checkboxConfig,
+		handleFilterVisibilityChange: (): void => undefined,
+		signal: SignalType.LOGS,
+		source: QuickFiltersSource.LOGS_EXPLORER,
+	},
+	parameters: {
+		msw: { handlers },
+		signoz: { queryBuilder },
+	},
+} satisfies Meta<typeof QuickFilters>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TooltipsStory = StoryObj<
+	ComponentProps<typeof QuickFilters> & GlobalMockArgs
+>;
+
+/**
+ * The settings control renders disabled while its permission check is in
+ * flight and is swapped for the enabled one once the check answers, so it is
+ * looked up again on every attempt; a click on the disabled one is dropped in
+ * silence.
+ */
+const settingsControl = (canvasElement: HTMLElement): Promise<HTMLElement> =>
+	waitFor(() => {
+		const control = within(canvasElement).getByTestId('settings-icon-container');
+
+		expect(control).toBeEnabled();
+
+		return control;
+	});
+
+/** Interaction: the settings panel is opened through the admin settings control. */
+export const SettingsOpen: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(await settingsControl(canvasElement));
+		await screen.findByText('Edit quick filters');
+	},
+};
+
+/** Mutation: changing the settings list reveals the fixed save and discard footer. */
+export const SettingsDirtyFooter: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(await settingsControl(canvasElement));
+		await userEvent.click(await screen.findByRole('button', { name: 'Add' }));
+		await screen.findByRole('button', { name: 'Save changes' });
+	},
+};
+
+/** Loading: dynamic filters are intentionally left pending to display the panel skeleton. */
+export const LoadingFilters: Story = {
+	parameters: {
+		msw: {
+			handlers: loadingFiltersHandlers,
+		},
+	},
+};
+
+/** Empty: a loaded quick-filter configuration with no filters has no result rows. */
+export const NoResults: Story = {
+	args: { config: [], signal: undefined },
+};
+
+/** Selection: an expanded checkbox shows the actual selected service values. */
+export const SelectedExpandedCheckbox: Story = {
+	args: { signal: undefined },
+	parameters: {
+		signoz: {
+			queryBuilder: selectedServiceQueryBuilder,
+		},
+	},
+};
+
+/**
+ * Every tooltip the panel renders, held open: the reveal on each truncated
+ * filter value. Nothing bounds those values, so the panel is answered with
+ * service names long enough to be cut. The Service name filter carries them, so
+ * the signal that would add the workspace's own dynamic filters is left off.
+ */
+export const Tooltips: TooltipsStory = {
+	args: { signal: undefined, tooltipsOpen: true },
+	parameters: {
+		msw: { handlers: [attributeValuesHandler(LONG_FILTER_VALUES), ...handlers] },
+	},
+};
--- a/frontend/src/components/QuickFilters/types.ts
+++ b/frontend/src/components/QuickFilters/types.ts
@@ -24,6 +24,7 @@ export enum SignalType {
 	API_MONITORING = 'api_monitoring',
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
+	AI_OBSERVABILITY = 'ai_observability',
 }

 /**
@@ -69,6 +70,7 @@ export enum QuickFiltersSource {
 	API_MONITORING = 'api-monitoring',
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
+	AI_OBSERVABILITY = 'ai-observability',
 }

 /**
--- a/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
+++ b/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { CustomSelect } from '../../NewSelect';
+import SignozModal from '../SignozModal';
+
+function ModalFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button data-testid="open-signoz-modal" onClick={(): void => setOpen(true)}>
+				Open modal
+			</Button>
+			<SignozModal
+				footer={null}
+				open={open}
+				onCancel={(): void => setOpen(false)}
+				title="Create saved view"
+			>
+				<CustomSelect
+					aria-label="View scope"
+					options={[
+						{ label: 'This workspace', value: 'workspace' },
+						{ label: 'My views', value: 'personal' },
+					]}
+					placeholder="Select a scope"
+				/>
+			</SignozModal>
+		</>
+	);
+}
+
+const meta = {
+	title: 'Components/Signoz Modal',
+	component: ModalFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+} satisfies Meta<typeof ModalFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Interaction: the modal and its nested body-portal select are both genuinely open. */
+export const OpenWithNestedSelect: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const trigger = within(canvasElement).getByTestId('open-signoz-modal');
+
+		await userEvent.click(trigger);
+		await screen.findByRole('dialog', { name: 'Create saved view' });
+		await userEvent.keyboard('{Escape}');
+		await waitFor(() => expect(trigger).toHaveFocus());
+		await userEvent.click(trigger);
+		await userEvent.click(
+			await screen.findByRole('combobox', { name: 'View scope' }),
+		);
+		await screen.findByRole('listbox');
+	},
+};
--- a/frontend/src/components/TableV3/TableV3.tsx
+++ b/frontend/src/components/TableV3/TableV3.tsx
@@ -71,7 +71,7 @@ interface ITableConfig {
 		instance: Virtualizer<HTMLDivElement, Element>,
 	) => void;
 }
-interface ITableV3Props<T> {
+export interface ITableV3Props<T> {
 	columns: ColumnDef<T, any>[];
 	data: T[];
 	config: ITableConfig;
@@ -201,5 +201,5 @@ export function TableV3<T>(props: ITableV3Props<T>): JSX.Element {

 TableV3.defaultProps = {
 	customClassName: '',
-	virtualiserRef: null,
+	virtualiserRef: undefined,
 };
--- a/frontend/src/components/TableV3/stories/TableV3.stories.tsx
+++ b/frontend/src/components/TableV3/stories/TableV3.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import type { ITableV3Props } from '../TableV3';
+import { TableV3 } from '../TableV3';
+
+type TraceRow = {
+	id: string;
+	traceId: string;
+	service: string;
+	duration: string;
+	status: string;
+};
+
+const columns: ColumnDef<TraceRow>[] = [
+	{ accessorKey: 'traceId', header: 'Trace ID', size: 280 },
+	{ accessorKey: 'service', header: 'Service', size: 220 },
+	{ accessorKey: 'duration', header: 'Duration', size: 140 },
+	{ accessorKey: 'status', header: 'Status', size: 160 },
+];
+
+const rows: TraceRow[] = Array.from({ length: 40 }, (_, index) => ({
+	id: `trace-${index + 1}`,
+	traceId: `c0ffee${String(index + 1).padStart(10, '0')}7f4a9d1c`,
+	service: index % 2 === 0 ? 'checkout-service' : 'catalog-service',
+	duration: `${80 + index * 6} ms`,
+	status: index % 5 === 0 ? 'Error' : 'OK',
+}));
+
+const meta = {
+	title: 'Components/Table V3',
+	component: TableV3,
+	decorators: [withCanvas({ height: 360, maxWidth: 640, overflow: 'auto' })],
+	args: {
+		columns,
+		config: { defaultColumnMinSize: 120, defaultColumnMaxSize: 400 },
+		data: rows,
+		setColumnWidths: (): void => undefined,
+	},
+} satisfies Meta<ITableV3Props<TraceRow>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Density and overflow: the virtualized table's wide, resizable column layout. */
+export const WideVirtualizedDataset: Story = {};
+
+/** Data: the table's native no-row layout, with headers retained for structural review. */
+export const EmptyDataset: Story = {
+	args: { data: [] },
+};
--- a/frontend/src/components/TanStackTableView/stories/TanStackTableView.stories.tsx
+++ b/frontend/src/components/TanStackTableView/stories/TanStackTableView.stories.tsx
@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Color } from '@signozhq/design-tokens';
+import { Ellipsis } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { GroupedStatusCounts } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
+import type { StatusCountItem } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
+import { ValidateColumnValueWrapper } from 'container/InfraMonitoringK8sV2/components/ValidateColumnValueWrapper';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { expect, screen, userEvent, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+import type { GlobalMockArgs } from '@/storybook/globals';
+
+import TanStackTable from '../index';
+import type { TableColumnDef, TanStackTableProps } from '../types';
+
+type ServiceRow = {
+	id: string;
+	service: string;
+	endpoint: string;
+	latency: string;
+	owner: string;
+};
+
+const rows: ServiceRow[] = [
+	{
+		id: 'checkout',
+		service: 'checkout-service',
+		endpoint: 'POST /api/v1/checkout',
+		latency: '184 ms',
+		owner: 'Payments platform',
+	},
+	{
+		id: 'catalog',
+		service: 'catalog-service',
+		endpoint: 'GET /api/v2/products/{productId}/availability',
+		latency: '96 ms',
+		owner: 'Storefront experience',
+	},
+	{
+		id: 'identity',
+		service: 'identity-service',
+		endpoint: 'POST /api/v1/session/refresh',
+		latency: '242 ms',
+		owner: 'Identity and access management',
+	},
+];
+
+const columns: TableColumnDef<ServiceRow>[] = [
+	{
+		id: 'service',
+		header: 'Service',
+		accessorKey: 'service',
+		pin: 'left',
+		width: { fixed: 180 },
+		enableSort: true,
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text>{String(value)}</TanStackTable.Text>
+		),
+	},
+	{
+		id: 'endpoint',
+		header: 'Endpoint',
+		accessorKey: 'endpoint',
+		width: { fixed: 320 },
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text title={String(value)}>
+				{String(value)}
+			</TanStackTable.Text>
+		),
+	},
+	{
+		id: 'latency',
+		header: 'P95 latency',
+		accessorKey: 'latency',
+		width: { fixed: 140 },
+		enableSort: true,
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text>{String(value)}</TanStackTable.Text>
+		),
+	},
+	{
+		id: 'owner',
+		header: 'Owner',
+		accessorKey: 'owner',
+		width: { fixed: 240 },
+		cell: ({ value }): JSX.Element => (
+			<TanStackTable.Text>{String(value)}</TanStackTable.Text>
+		),
+	},
+];
+
+const rowActions = (): JSX.Element => (
+	<DropdownMenuSimple
+		align="end"
+		menu={{
+			items: [
+				{ key: 'open', label: 'Open service details' },
+				{ key: 'copy', label: 'Copy service link' },
+			],
+		}}
+	>
+		<Button
+			aria-label="Service actions"
+			color="secondary"
+			size="icon"
+			variant="outlined"
+		>
+			<Ellipsis size={16} />
+		</Button>
+	</DropdownMenuSimple>
+);
+
+const meta = {
+	title: 'Components/TanStack Table View',
+	component: TanStackTable,
+	tags: ['play'],
+	decorators: [withCanvas({ height: 360, maxWidth: 640 })],
+	args: {
+		columns,
+		data: rows,
+		disableVirtualScroll: true,
+		getRowKey: (row): string => row.id,
+	},
+} satisfies Meta<TanStackTableProps<ServiceRow>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type TooltipsStory = StoryObj<GlobalMockArgs>;
+
+/** Data and overflow: pinned columns, clipped long cells, and a horizontal scroll surface. */
+export const HorizontalOverflow: Story = {
+	args: { testId: 'tanstack-table' },
+};
+
+/** Data: a page-sized result with the shared pagination controls and total count. */
+export const Pagination: Story = {
+	args: {
+		pagination: { total: 42, defaultLimit: 10, showTotalCount: true },
+	},
+};
+
+/** Data: the supported empty result keeps the table structure without a fabricated empty state. */
+export const Empty: Story = {
+	args: { data: [], testId: 'tanstack-empty-table' },
+};
+
+/** Data: the table's real skeleton rows shown while the first page is loading. */
+export const Loading: Story = {
+	args: { data: [], isLoading: true, skeletonRowCount: 5 },
+};
+
+/** Interaction: opens a row action menu rendered through the shared portal. */
+export const RowActionsMenu: Story = {
+	args: { renderRowActions: rowActions, testId: 'tanstack-actions-table' },
+	play: async ({ canvasElement }): Promise<void> => {
+		const firstRow = within(canvasElement).getByTestId('tanstack-actions-table');
+
+		await userEvent.hover(firstRow.querySelector('tbody tr') as HTMLElement);
+		await userEvent.click(
+			await within(firstRow).findByLabelText('Service actions'),
+		);
+		await expect(
+			await screen.findByRole('menuitem', { name: 'Open service details' }),
+		).toBeVisible();
+	},
+};
+
+const RESTART_COUNTS: StatusCountItem[] = [
+	{
+		label: 'Restarts in the last 24 hours',
+		value: 37,
+		color: Color.BG_CHERRY_500,
+		breakdown: [
+			{ label: 'CrashLoopBackOff', value: 14 },
+			{ label: 'OOMKilled', value: 11 },
+			{ label: 'Liveness probe failed', value: 6 },
+			{ label: 'Readiness probe failed', value: 4 },
+			{ label: 'Image pull backoff', value: 2 },
+		],
+	},
+];
+
+const tooltipColumns: TableColumnDef<ServiceRow>[] = [
+	columns[0],
+	{
+		id: 'cpuRequest',
+		header: 'CPU request',
+		width: { fixed: 140 },
+		cell: ({ rowId }): JSX.Element => (
+			<ValidateColumnValueWrapper
+				attribute="CPU request"
+				entity={InfraMonitoringEntity.PODS}
+				rowId={rowId}
+				value={-1}
+			>
+				<TanStackTable.Text>0.5</TanStackTable.Text>
+			</ValidateColumnValueWrapper>
+		),
+	},
+	{
+		id: 'restarts',
+		header: 'Restarts',
+		width: { fixed: 140 },
+		cell: ({ rowId }): JSX.Element => (
+			<GroupedStatusCounts items={RESTART_COUNTS} rowId={rowId} />
+		),
+	},
+];
+
+/**
+ * Both tooltips a hovered row carries, held open: the plain sentence explaining
+ * a missing value, and the status breakdown, which is elements rather than text
+ * and grows a row per reason. Neither is rendered until the row is hovered, so
+ * the play hovers the first one and the control holds what it uncovered.
+ */
+export const Tooltips: TooltipsStory = {
+	args: { tooltipsOpen: true },
+	render: (): JSX.Element => (
+		<TanStackTable
+			columns={tooltipColumns}
+			data={rows}
+			disableVirtualScroll
+			getRowKey={(row): string => row.id}
+			testId="tanstack-tooltips-table"
+		/>
+	),
+	play: async ({ canvasElement }): Promise<void> => {
+		const table = within(canvasElement).getByTestId('tanstack-tooltips-table');
+
+		await userEvent.hover(table.querySelector('tbody tr') as HTMLElement);
+		// Both tooltips are rendered by the hovered row, so this is what says the
+		// control has something to hold open.
+		await screen.findByText('Restarts in the last 24 hours');
+	},
+};
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -41,7 +41,6 @@ export enum LOCALSTORAGE {
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
-	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
--- a/frontend/src/constants/panelTypes.ts
+++ b/frontend/src/constants/panelTypes.ts
@@ -29,6 +29,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
+		[PANEL_TYPES.AREA]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -336,6 +336,7 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
+	AREA = 'area',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	TEXT = 'text',
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -109,6 +109,9 @@ export const REACT_QUERY_KEY = {
 	// Field Keys Suggestion Query Keys
 	FIELD_KEYS_SUGGESTION: 'FIELD_KEYS_SUGGESTION',

+	// Field Values Suggestion Query Keys
+	FIELD_VALUES_SUGGESTION: 'FIELD_VALUES_SUGGESTION',
+
 	// AI Assistant Query Keys
 	AI_ASSISTANT_EMPTY_STATE_CHIPS: 'AI_ASSISTANT_EMPTY_STATE_CHIPS',
 } as const;
--- a/frontend/src/constants/resourceAttributes.ts
+++ b/frontend/src/constants/resourceAttributes.ts
@@ -1,4 +1,4 @@
-import { OperatorValues } from 'types/reducer/trace';
+import { OperatorValues } from 'hooks/useResourceAttribute/types';

 export const OperatorConversions: Array<{
 	label: string;
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -6,9 +6,8 @@ const ROUTES = {
 	SERVICE_METRICS: '/services/:servicename',
 	SERVICE_TOP_LEVEL_OPERATIONS: '/services/:servicename/top-level-operations',
 	SERVICE_MAP: '/service-map',
-	TRACE: '/trace',
+	TRACE_BASE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
-	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED_WITH_CLOUD: '/get-started-with-signoz-cloud',
--- a/frontend/src/constants/traceFilterKeys.ts
+++ b/frontend/src/constants/traceFilterKeys.ts
@@ -0,0 +1,124 @@
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+/** Trace attribute key -> label shown in quick filters, the options menu and APM "view traces" links. */
+export const AllTraceFilterKeyValue: Record<string, string> = {
+	durationNanoMin: 'Duration',
+	durationNano: 'Duration',
+	duration_nano: 'Duration',
+	durationNanoMax: 'Duration',
+	'deployment.environment': 'Environment',
+	hasError: 'Status',
+	has_error: 'Status',
+	serviceName: 'Service Name',
+	'service.name': 'service.name',
+	name: 'Operation / Name',
+	rpcMethod: 'RPC Method',
+	'rpc.method': 'RPC Method',
+	responseStatusCode: 'Status Code',
+	response_status_code: 'Status Code',
+	httpHost: 'HTTP Host',
+	http_host: 'HTTP Host',
+	httpMethod: 'HTTP Method',
+	http_method: 'HTTP Method',
+	httpRoute: 'HTTP Route',
+	'http.route': 'HTTP Route',
+	httpUrl: 'HTTP URL',
+	[SPAN_ATTRIBUTES.HTTP_URL]: 'HTTP URL',
+	traceID: 'Trace ID',
+	trace_id: 'Trace ID',
+} as const;
+
+export type AllTraceFilterKeys = keyof typeof AllTraceFilterKeyValue;
+
+export const traceFilterKeys: Record<AllTraceFilterKeys, BaseAutocompleteData> =
+	{
+		durationNano: {
+			key: 'durationNano',
+			dataType: DataTypes.Float64,
+			type: 'tag',
+			id: 'durationNano--float64--tag--true',
+		},
+		hasError: {
+			key: 'hasError',
+			dataType: DataTypes.bool,
+			type: 'tag',
+			id: 'hasError--bool--tag--true',
+		},
+		serviceName: {
+			key: 'serviceName',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'serviceName--string--tag--true',
+		},
+
+		'deployment.environment': {
+			key: 'deployment.environment',
+			dataType: DataTypes.String,
+			type: 'resource',
+			id: 'deployment.environment--string--resource--false',
+		},
+		name: {
+			key: 'name',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'name--string--tag--true',
+		},
+		rpcMethod: {
+			key: 'rpcMethod',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'rpcMethod--string--tag--true',
+		},
+		responseStatusCode: {
+			key: 'responseStatusCode',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'responseStatusCode--string--tag--true',
+		},
+		httpHost: {
+			key: 'httpHost',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'httpHost--string--tag--true',
+		},
+		httpMethod: {
+			key: 'httpMethod',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'httpMethod--string--tag--true',
+		},
+		httpRoute: {
+			key: 'httpRoute',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'httpRoute--string--tag--true',
+		},
+		httpUrl: {
+			key: 'httpUrl',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'httpUrl--string--tag--true',
+		},
+		traceID: {
+			key: 'traceID',
+			dataType: DataTypes.String,
+			type: 'tag',
+			id: 'traceID--string--tag--true',
+		},
+		durationNanoMin: {
+			key: 'durationNanoMin',
+			dataType: DataTypes.Float64,
+			type: 'tag',
+			id: 'durationNanoMin--float64--tag--true',
+		},
+		durationNanoMax: {
+			key: 'durationNanoMax',
+			dataType: DataTypes.Float64,
+			type: 'tag',
+			id: 'durationNanoMax--float64--tag--true',
+		},
+	} as const;
--- a/frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx
+++ b/frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx
@@ -450,6 +450,12 @@ export default function ChatInput({
 			return;
 		}
 		el.style.height = 'auto';
+		// A hidden composer (a closed drawer, a story swapping in) measures 0.
+		// Leaving the height on `auto` keeps the `rows` fallback until there is
+		// something real to measure, instead of pinning the field shut.
+		if (el.scrollHeight === 0) {
+			return;
+		}
 		el.style.height = `${Math.min(el.scrollHeight, TEXTAREA_MAX_HEIGHT_PX)}px`;
 	}, [text]);

--- a/frontend/src/container/GantChart/GantChart.styles.scss
+++ b/frontend/src/container/GantChart/GantChart.styles.scss
@@ -1,16 +0,0 @@
-.span-container {
-	.spanDetails {
-		position: absolute;
-		height: 50px;
-		padding: 8px;
-		min-width: 150px;
-		background: lightcyan;
-		color: black;
-		bottom: 24px;
-		left: 0;
-
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-}
--- a/frontend/src/container/GantChart/Span/index.tsx
+++ b/frontend/src/container/GantChart/Span/index.tsx
@@ -1,96 +0,0 @@
-import { useEffect } from 'react';
-import { Popover } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useTimezone } from 'providers/Timezone';
-import { toFixed } from 'utils/toFixed';
-
-import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
-
-import '../GantChart.styles.scss';
-
-interface SpanLengthProps {
-	globalStart: number;
-	startTime: number;
-	name: string;
-	width: string;
-	leftOffset: string;
-	bgColor: string;
-	inMsCount: number;
-}
-
-function Span(props: SpanLengthProps): JSX.Element {
-	const { width, leftOffset, bgColor, inMsCount, startTime, name, globalStart } =
-		props;
-	const isDarkMode = useIsDarkMode();
-	const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
-
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		document.documentElement.scrollTop = document.documentElement.clientHeight;
-		document.documentElement.scrollLeft = document.documentElement.clientWidth;
-	}, []);
-
-	const getContent = (): JSX.Element => {
-		const timeStamp = dayjs(startTime)
-			.tz(timezone.value)
-			.format(DATE_TIME_FORMATS.TIME_UTC_MS);
-		const startTimeInMs = startTime - globalStart;
-		return (
-			<div>
-				<Typography.Text style={{ marginBottom: '8px' }}>
-					{' '}
-					Duration : {inMsCount}
-				</Typography.Text>
-				<br />
-				<Typography.Text style={{ marginBottom: '8px' }}>
-					Start Time: {startTimeInMs}ms [{timeStamp}]{' '}
-				</Typography.Text>
-			</div>
-		);
-	};
-
-	return (
-		<SpanWrapper className="span-container">
-			<SpanLine
-				className="spanLine"
-				isDarkMode={isDarkMode}
-				bgColor={bgColor}
-				leftOffset={leftOffset}
-				width={width}
-			/>
-
-			<div>
-				<Popover
-					style={{
-						left: `${leftOffset}%`,
-					}}
-					title={name}
-					content={getContent()}
-					trigger="hover"
-					placement="left"
-					autoAdjustOverflow
-				>
-					<SpanBorder
-						className="spanTrack"
-						isDarkMode={isDarkMode}
-						bgColor={bgColor}
-						leftOffset={leftOffset}
-						width={width}
-					/>
-				</Popover>
-			</div>
-
-			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
-				time,
-				2,
-			)} ${timeUnitName}`}</SpanText>
-		</SpanWrapper>
-	);
-}
-
-export default Span;
--- a/frontend/src/container/GantChart/Span/styles.ts
+++ b/frontend/src/container/GantChart/Span/styles.ts
@@ -1,52 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import styled from 'styled-components';
-
-interface Props {
-	width: string;
-	leftOffset: string;
-	bgColor: string;
-	isDarkMode: boolean;
-}
-
-export const SpanLine = styled.div<Props>`
-	width: ${({ leftOffset }): string => `${leftOffset}%`};
-	height: 0px;
-	border-bottom: 0.1px solid
-		${({ isDarkMode }): string => (isDarkMode ? '#303030' : '#c0c0c0')};
-	top: 50%;
-	position: absolute;
-`;
-
-export const SpanBorder = styled.div<Props>`
-	background: ${({ bgColor }): string => bgColor};
-	border-radius: 5px;
-	height: 0.625rem;
-	width: ${({ width }): string => `${width}%`};
-	left: ${({ leftOffset }): string => `${leftOffset}%`};
-	top: 35%;
-	position: absolute;
-`;
-
-export const SpanWrapper = styled.div`
-	display: flex;
-	width: 100%;
-	flex-direction: row;
-	align-items: center;
-	position: relative;
-	z-index: 2;
-	min-height: 2rem;
-`;
-interface SpanTextProps extends Pick<Props, 'leftOffset'> {
-	isDarkMode: boolean;
-}
-
-export const SpanText = styled(Typography.Text)<SpanTextProps>`
-	&&& {
-		left: ${({ leftOffset }): string => `${leftOffset}%`};
-		top: 65%;
-		position: absolute;
-		width: max-content;
-		color: ${({ isDarkMode }): string => (isDarkMode ? '#ACACAC' : '#666')};
-		font-size: 0.75rem;
-	}
-`;
--- a/frontend/src/container/GantChart/SpanName/index.tsx
+++ b/frontend/src/container/GantChart/SpanName/index.tsx
@@ -1,22 +0,0 @@
-import { Container, Service, Span, SpanWrapper } from './styles';
-
-function SpanNameComponent({
-	name,
-	serviceName,
-}: SpanNameComponentProps): JSX.Element {
-	return (
-		<Container title={`${name} ${serviceName}`}>
-			<SpanWrapper>
-				<Span truncate={1}>{name}</Span>
-				<Service truncate={1}>{serviceName}</Service>
-			</SpanWrapper>
-		</Container>
-	);
-}
-
-interface SpanNameComponentProps {
-	name: string;
-	serviceName: string;
-}
-
-export default SpanNameComponent;
--- a/frontend/src/container/GantChart/SpanName/styles.ts
+++ b/frontend/src/container/GantChart/SpanName/styles.ts
@@ -1,41 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import styled from 'styled-components';
-
-export const Span = styled(Typography.Text)`
-	&&& {
-		font-size: 0.75rem;
-		margin: 0;
-		/* border-bottom: 1px solid grey; */
-	}
-`;
-
-export const Service = styled(Typography.Text)`
-	&&& {
-		color: #acacac;
-		font-size: 0.75rem;
-	}
-`;
-
-export const SpanWrapper = styled.div`
-	display: flex;
-	flex-direction: column;
-	margin-left: 0.625rem;
-	width: 10rem;
-`;
-
-export const SpanConnector = styled.div`
-	width: 37px;
-	border: 1px solid #303030;
-	height: 0;
-`;
-
-export const Container = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-`;
-
-export const SpanName = styled.div`
-	width: fit-content;
-	border-bottom: 1px solid black;
-`;
--- a/frontend/src/container/GantChart/Trace/index.tsx
+++ b/frontend/src/container/GantChart/Trace/index.tsx
@@ -1,233 +0,0 @@
-import {
-	Dispatch,
-	MouseEventHandler,
-	SetStateAction,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import { Col } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { StyledCol, StyledRow } from 'components/Styled';
-import {
-	IIntervalUnit,
-	SPAN_DETAILS_LEFT_COL_WIDTH,
-} from 'container/TraceDetail/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ITraceTree } from 'types/api/trace/getTraceItem';
-
-import { ITraceMetaData } from '..';
-import Span from '../Span';
-import SpanName from '../SpanName';
-import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils';
-import {
-	CardComponent,
-	CardContainer,
-	CaretContainer,
-	HoverCard,
-	styles,
-	Wrapper,
-} from './styles';
-import { getIconStyles } from './utils';
-
-function Trace(props: TraceProps): JSX.Element {
-	const {
-		name,
-		activeHoverId,
-		setActiveHoverId,
-		globalSpread,
-		globalStart,
-		serviceName,
-		startTime,
-		value,
-		serviceColour,
-		id,
-		setActiveSelectedId,
-		activeSelectedId,
-		level,
-		activeSpanPath,
-		isExpandAll,
-		intervalUnit,
-		children,
-		isMissing,
-	} = props;
-
-	const isDarkMode = useIsDarkMode();
-
-	const [isOpen, setOpen] = useState<boolean>(activeSpanPath[level] === id);
-
-	const localTreeExpandInteraction = useRef<boolean | 0>(0); // Boolean is for the state of the expansion whereas the number i.e. 0 is for skipping the user interaction.
-
-	useEffect(() => {
-		if (localTreeExpandInteraction.current !== 0) {
-			setOpen(localTreeExpandInteraction.current);
-			localTreeExpandInteraction.current = 0;
-		} else if (!isOpen) {
-			setOpen(activeSpanPath[level] === id);
-		}
-	}, [activeSpanPath, isOpen, id, level]);
-
-	useEffect(() => {
-		if (isExpandAll) {
-			setOpen(isExpandAll);
-		} else {
-			setOpen(activeSpanPath[level] === id);
-		}
-	}, [isExpandAll, activeSpanPath, id, level]);
-
-	const isOnlyChild = children.length === 1;
-	const [top, setTop] = useState<number>(0);
-
-	const ref = useRef<HTMLUListElement>(null);
-
-	useEffect(() => {
-		if (activeSelectedId === id) {
-			ref.current?.scrollIntoView({
-				block: 'nearest',
-				behavior: 'auto',
-				inline: 'nearest',
-			});
-		}
-	}, [activeSelectedId, id]);
-
-	const onMouseEnterHandler = (): void => {
-		setActiveHoverId(id);
-		if (ref.current) {
-			const { top } = getTopLeftFromBody(ref.current);
-			setTop(top);
-		}
-	};
-
-	const onMouseLeaveHandler = (): void => {
-		setActiveHoverId('');
-	};
-
-	const onClick = (): void => {
-		setActiveSelectedId(id);
-	};
-
-	const onClickTreeExpansion: MouseEventHandler<HTMLDivElement> = (
-		event,
-	): void => {
-		event.stopPropagation();
-		setOpen((state) => {
-			localTreeExpandInteraction.current = !isOpen;
-			return !state;
-		});
-	};
-	const { totalSpans } = getMetaDataFromSpanTree(props);
-
-	const inMsCount = value;
-	const nodeLeftOffset = ((startTime - globalStart) * 1e2) / globalSpread;
-	const width = (value * 1e2) / (globalSpread * 1e6);
-	const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 48;
-
-	const iconStyles = useMemo(() => getIconStyles(), []);
-
-	const icon = useMemo(
-		() =>
-			isOpen ? (
-				<ChevronDown size="md" style={iconStyles} />
-			) : (
-				<ChevronRight size="md" style={iconStyles} />
-			),
-		[isOpen, iconStyles],
-	);
-
-	return (
-		<Wrapper
-			onMouseEnter={onMouseEnterHandler}
-			onMouseLeave={onMouseLeaveHandler}
-			isOnlyChild={isOnlyChild}
-			ref={ref}
-			isDarkMode={isDarkMode}
-		>
-			<HoverCard
-				top={top}
-				isHovered={activeHoverId === id}
-				isSelected={activeSelectedId === id}
-				isDarkMode={isDarkMode}
-			/>
-
-			<CardContainer isMissing={isMissing} onClick={onClick}>
-				<StyledCol flex={`${panelWidth}px`} styledclass={[styles.overFlowHidden]}>
-					<StyledRow styledclass={[styles.flexNoWrap]}>
-						<Col>
-							{totalSpans !== 1 && (
-								<CardComponent
-									isOnlyChild={isOnlyChild}
-									isDarkMode={isDarkMode}
-									onClick={onClickTreeExpansion}
-								>
-									<Typography style={{ wordBreak: 'normal' }}>{totalSpans}</Typography>
-									<CaretContainer>{icon}</CaretContainer>
-								</CardComponent>
-							)}
-						</Col>
-						<Col>
-							<SpanName name={name} serviceName={serviceName} />
-						</Col>
-					</StyledRow>
-				</StyledCol>
-				<Col flex="1">
-					<Span
-						globalStart={globalStart}
-						startTime={startTime}
-						name={name}
-						leftOffset={nodeLeftOffset.toString()}
-						width={width.toString()}
-						bgColor={serviceColour}
-						inMsCount={inMsCount / 1e6}
-					/>
-				</Col>
-			</CardContainer>
-
-			{isOpen && (
-				<>
-					{children.map((child) => (
-						<Trace
-							key={child.id}
-							activeHoverId={activeHoverId}
-							setActiveHoverId={setActiveHoverId}
-							{...child}
-							globalSpread={globalSpread}
-							globalStart={globalStart}
-							setActiveSelectedId={setActiveSelectedId}
-							activeSelectedId={activeSelectedId}
-							level={level + 1}
-							activeSpanPath={activeSpanPath}
-							isExpandAll={isExpandAll}
-							intervalUnit={intervalUnit}
-							isMissing={child.isMissing}
-						/>
-					))}
-				</>
-			)}
-		</Wrapper>
-	);
-}
-
-Trace.defaultProps = {
-	isMissing: false,
-};
-
-interface ITraceGlobal {
-	globalSpread: ITraceMetaData['spread'];
-	globalStart: ITraceMetaData['globalStart'];
-}
-
-interface TraceProps extends ITraceTree, ITraceGlobal {
-	activeHoverId: string;
-	setActiveHoverId: Dispatch<SetStateAction<string>>;
-	setActiveSelectedId: Dispatch<SetStateAction<string>>;
-	activeSelectedId: string;
-	level: number;
-	activeSpanPath: string[];
-	isExpandAll: boolean;
-	intervalUnit: IIntervalUnit;
-	isMissing?: boolean;
-}
-
-export default Trace;
--- a/frontend/src/container/GantChart/Trace/styles.ts
+++ b/frontend/src/container/GantChart/Trace/styles.ts
@@ -1,113 +0,0 @@
-import { volcano } from '@ant-design/colors';
-import styled, {
-	css,
-	DefaultTheme,
-	ThemedCssFunction,
-} from 'styled-components';
-
-interface Props {
-	isOnlyChild: boolean;
-}
-
-export const Wrapper = styled.ul<Props>`
-	display: flex;
-	flex-direction: column;
-	padding-bottom: 0.5rem;
-	padding-top: 0.5rem;
-	position: relative;
-	z-index: 1;
-	ul {
-		border-left: ${({ isOnlyChild }): StyledCSS =>
-			isOnlyChild && 'none'} !important;
-
-		${({ isOnlyChild }): StyledCSS =>
-			isOnlyChild &&
-			css`
-				&:before {
-					border-left: 1px solid #434343;
-					display: inline-block;
-					content: '';
-					height: 54px;
-					position: absolute;
-					left: 0;
-					top: -35px;
-				}
-			`}
-	}
-`;
-
-export const CardContainer = styled.li<{ isMissing?: boolean }>`
-	display: flex;
-	width: 100%;
-	cursor: pointer;
-	border-radius: 0.25rem;
-	z-index: 2;
-	${({ isMissing }): string =>
-		isMissing ? `border: 1px dashed ${volcano[6]} !important;` : ''}
-`;
-
-interface Props {
-	isDarkMode: boolean;
-}
-
-export type StyledCSS =
-	| ReturnType<ThemedCssFunction<DefaultTheme>>
-	| string
-	| false
-	| undefined;
-
-export const CardComponent = styled.div<Props>`
-	border: 1px solid
-		${({ isDarkMode }): StyledCSS => (isDarkMode ? '#434343' : '#333')};
-	box-sizing: border-box;
-	border-radius: 2px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 1px 8px;
-	background: ${({ isDarkMode }): StyledCSS =>
-		isDarkMode ? '#1d1d1d' : '#ddd'};
-	height: 22px;
-`;
-
-export const CaretContainer = styled.span`
-	margin-left: 0.304rem;
-`;
-
-interface HoverCardProps {
-	isHovered: boolean;
-	isSelected: boolean;
-	top: number;
-	isDarkMode: boolean;
-}
-
-export const HoverCard = styled.div<HoverCardProps>`
-	display: ${({ isSelected, isHovered }): string =>
-		isSelected || isHovered ? 'block' : 'none'};
-	width: 200%;
-	background-color: ${({ isHovered, isDarkMode }): string => {
-		if (isHovered) {
-			return isDarkMode ? '#262626' : '#ddd';
-		}
-		return isDarkMode ? '#4f4f4f' : '#bbb';
-	}};
-	position: absolute;
-	top: 0;
-	left: -100%;
-	right: 0;
-	height: 3rem;
-	opacity: 0.5;
-`;
-
-const flexNoWrap = css`
-	flex-wrap: nowrap;
-`;
-
-const overFlowHidden = css`
-	overflow: hidden;
-`;
-
-export const styles = {
-	flexNoWrap,
-	overFlowHidden,
-};
--- a/frontend/src/container/GantChart/Trace/utils.ts
+++ b/frontend/src/container/GantChart/Trace/utils.ts
@@ -1,3 +0,0 @@
-export const getIconStyles = (): Record<string, string> => ({
-	color: 'var(--l1-foreground)',
-});
--- a/frontend/src/container/GantChart/index.tsx
+++ b/frontend/src/container/GantChart/index.tsx
@@ -1,91 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { SquareMinus, SquarePlus } from '@signozhq/icons';
-import { IIntervalUnit } from 'container/TraceDetail/utils';
-import { ITraceTree } from 'types/api/trace/getTraceItem';
-
-import { CardContainer, CardWrapper, CollapseButton } from './styles';
-import Trace from './Trace';
-import { getSpanPath } from './utils';
-
-function GanttChart(props: GanttChartProps): JSX.Element {
-	const {
-		data,
-		traceMetaData,
-		activeHoverId,
-		setActiveHoverId,
-		activeSelectedId,
-		setActiveSelectedId,
-		spanId,
-		intervalUnit,
-	} = props;
-
-	const { globalStart, spread: globalSpread } = traceMetaData;
-
-	const [isExpandAll, setIsExpandAll] = useState<boolean>(false);
-	const [activeSpanPath, setActiveSpanPath] = useState<string[]>([]);
-
-	useEffect(() => {
-		setActiveSpanPath(getSpanPath(data, spanId));
-	}, [spanId, data]);
-
-	useEffect(() => {
-		setActiveSpanPath(getSpanPath(data, activeSelectedId));
-	}, [activeSelectedId, data]);
-
-	const handleCollapse = (): void => {
-		setIsExpandAll((prev) => !prev);
-	};
-	return (
-		<CardContainer>
-			<CollapseButton
-				onClick={handleCollapse}
-				title={isExpandAll ? 'Collapse All' : 'Expand All'}
-			>
-				{isExpandAll ? (
-					<SquareMinus size={16} style={{ color: 'var(--accent-primary)' }} />
-				) : (
-					<SquarePlus size={16} style={{ color: 'var(--accent-primary)' }} />
-				)}
-			</CollapseButton>
-			<CardWrapper>
-				<Trace
-					activeHoverId={activeHoverId}
-					activeSpanPath={activeSpanPath}
-					setActiveHoverId={setActiveHoverId}
-					key={data.id}
-					{...{
-						...data,
-						globalSpread,
-						globalStart,
-						setActiveSelectedId,
-						activeSelectedId,
-					}}
-					level={0}
-					isExpandAll={isExpandAll}
-					intervalUnit={intervalUnit}
-				/>
-			</CardWrapper>
-		</CardContainer>
-	);
-}
-
-export interface ITraceMetaData {
-	globalEnd: number;
-	globalStart: number;
-	levels: number;
-	spread: number;
-	totalSpans: number;
-}
-
-export interface GanttChartProps {
-	data: ITraceTree;
-	traceMetaData: ITraceMetaData;
-	activeSelectedId: string;
-	activeHoverId: string;
-	setActiveHoverId: Dispatch<SetStateAction<string>>;
-	setActiveSelectedId: Dispatch<SetStateAction<string>>;
-	spanId: string;
-	intervalUnit: IIntervalUnit;
-}
-
-export default GanttChart;
--- a/frontend/src/container/GantChart/styles.ts
+++ b/frontend/src/container/GantChart/styles.ts
@@ -1,48 +0,0 @@
-import styled from 'styled-components';
-
-export const Wrapper = styled.ul`
-	padding-left: 0;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-
-	ul {
-		list-style: none;
-		border-left: 1px solid #434343;
-		padding-left: 1rem;
-		width: 100%;
-		margin: 0px;
-	}
-
-	ul li {
-		position: relative;
-
-		&:before {
-			position: absolute;
-			left: -1rem;
-			top: 10px;
-			content: '';
-			height: 1px;
-			width: 1rem;
-			background-color: #434343;
-		}
-	}
-`;
-
-export const CardWrapper = styled.div`
-	display: flex;
-	width: 100%;
-	margin-left: 1rem;
-	margin-top: 1.5rem;
-`;
-
-export const CardContainer = styled.li`
-	display: flex;
-	width: 100%;
-	position: relative;
-`;
-
-export const CollapseButton = styled.div`
-	position: absolute;
-	top: 0;
-`;
--- a/frontend/src/container/GantChart/utils.ts
+++ b/frontend/src/container/GantChart/utils.ts
@@ -1,203 +0,0 @@
-import { set } from 'lodash-es';
-import { ITraceForest, ITraceTree } from 'types/api/trace/getTraceItem';
-
-interface GetTraceMetaData {
-	globalStart: number;
-	globalEnd: number;
-	spread: number;
-	totalSpans: number;
-	levels: number;
-}
-export const getMetaDataFromSpanTree = (
-	treeData: ITraceTree,
-): GetTraceMetaData => {
-	let globalStart = Number.POSITIVE_INFINITY;
-	let globalEnd = Number.NEGATIVE_INFINITY;
-	let totalSpans = 0;
-	let levels = 1;
-	const traverse = (treeNode: ITraceTree, level = 0): void => {
-		if (!treeNode) {
-			return;
-		}
-		totalSpans += 1;
-		levels = Math.max(levels, level);
-		const { startTime } = treeNode;
-		const endTime = startTime + treeNode.value;
-		globalStart = Math.min(globalStart, startTime);
-		globalEnd = Math.max(globalEnd, endTime);
-
-		treeNode.children.forEach((childNode) => {
-			traverse(childNode, level + 1);
-		});
-	};
-	traverse(treeData, 1);
-
-	globalStart *= 1e6;
-	globalEnd *= 1e6;
-
-	return {
-		globalStart,
-		globalEnd,
-		spread: globalEnd - globalStart,
-		totalSpans,
-		levels,
-	};
-};
-
-export function getTopLeftFromBody(elem: HTMLElement): {
-	top: number;
-	left: number;
-} {
-	const box = elem.getBoundingClientRect();
-
-	const { body } = document;
-	const docEl = document.documentElement;
-
-	const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
-	const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
-	const clientTop = docEl.clientTop || body.clientTop || 0;
-	const clientLeft = docEl.clientLeft || body.clientLeft || 0;
-
-	const top = box.top + scrollTop - clientTop;
-	const left = box.left + scrollLeft - clientLeft;
-
-	return { top: Math.round(top), left: Math.round(left) };
-}
-
-export const getNodeById = (
-	searchingId: string,
-	treesData: ITraceForest | undefined,
-): ITraceForest => {
-	const newtreeData: ITraceForest = {} as ITraceForest;
-
-	const traverse = (
-		treeNode: ITraceTree,
-		setCallBack: (arg0: ITraceTree) => void,
-		level = 0,
-	): void => {
-		if (!treeNode) {
-			return;
-		}
-
-		if (searchingId === treeNode.id) {
-			setCallBack(treeNode);
-		}
-
-		treeNode.children.forEach((childNode) => {
-			traverse(childNode, setCallBack, level + 1);
-		});
-	};
-
-	const spanTreeSetCallback = (
-		path: (keyof ITraceForest)[],
-		value: ITraceTree,
-	): ITraceForest => set(newtreeData, path, [value]);
-
-	if (treesData?.spanTree) {
-		treesData.spanTree.forEach((tree) => {
-			traverse(tree, (value) => spanTreeSetCallback(['spanTree'], value), 1);
-		});
-	}
-
-	if (treesData?.missingSpanTree) {
-		treesData.missingSpanTree.forEach((tree) => {
-			traverse(
-				tree,
-				(value) => spanTreeSetCallback(['missingSpanTree'], value),
-				1,
-			);
-		});
-	}
-
-	return newtreeData;
-};
-
-const getSpanWithoutChildren = (
-	span: ITraceTree,
-): Omit<ITraceTree, 'children'> => ({
-	id: span.id,
-	name: span.name,
-	parent: span.parent,
-	serviceColour: span.serviceColour,
-	serviceName: span.serviceName,
-	startTime: span.startTime,
-	tags: span.tags,
-	time: span.time,
-	value: span.value,
-	event: span.event,
-	hasError: span.hasError,
-	spanKind: span.spanKind,
-	statusCodeString: span.statusCodeString,
-	statusMessage: span.statusMessage,
-});
-
-export const isSpanPresentInSearchString = (
-	searchedString: string,
-	tree: ITraceTree,
-): boolean => {
-	const parsedTree = getSpanWithoutChildren(tree);
-
-	const stringifyTree = JSON.stringify(parsedTree);
-
-	return stringifyTree.includes(searchedString);
-};
-
-export const isSpanPresent = (
-	tree: ITraceTree,
-	searchedKey: string,
-): ITraceTree[] => {
-	const foundNode: ITraceTree[] = [];
-
-	const traverse = (
-		treeNode: ITraceTree,
-		level = 0,
-		foundNode: ITraceTree[],
-	): void => {
-		if (!treeNode) {
-			return;
-		}
-
-		const isPresent = isSpanPresentInSearchString(searchedKey, treeNode);
-
-		if (isPresent) {
-			foundNode.push(treeNode);
-		}
-
-		treeNode.children.forEach((childNode) => {
-			traverse(childNode, level + 1, foundNode);
-		});
-	};
-	traverse(tree, 1, foundNode);
-
-	return foundNode;
-};
-
-export const getSpanPath = (tree: ITraceTree, spanId: string): string[] => {
-	const spanPath: string[] = [];
-
-	const traverse = (treeNode: ITraceTree): boolean => {
-		if (!treeNode) {
-			return false;
-		}
-
-		spanPath.push(treeNode.id);
-
-		if (spanId === treeNode.id) {
-			return true;
-		}
-
-		let foundInChild = false;
-		treeNode.children.forEach((childNode) => {
-			if (traverse(childNode)) {
-				foundInChild = true;
-			}
-		});
-		if (!foundInChild) {
-			spanPath.pop();
-		}
-		return foundInChild;
-	};
-	traverse(tree);
-	return spanPath;
-};
--- a/frontend/src/container/Home/Services/ServiceMetrics.tsx
+++ b/frontend/src/container/Home/Services/ServiceMetrics.tsx
@@ -28,7 +28,7 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { Tags } from 'types/reducer/trace';
+import { Tags } from 'hooks/useResourceAttribute/types';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
--- a/frontend/src/container/InfraMonitoringHostsV2/constants.tsx
+++ b/frontend/src/container/InfraMonitoringHostsV2/constants.tsx
@@ -82,7 +82,7 @@ export function getHostMetricsQueryPayload(
 	start: number,
 	end: number,
 ): ReturnType<typeof getHostQueryPayload> {
-	return getHostQueryPayload(host.hostName, start, end, true);
+	return getHostQueryPayload(host.hostName, start, end);
 }

 export { hostWidgetInfo };
--- a/frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/traceListColumns.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/traceListColumns.tsx
@@ -3,7 +3,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import { TextNoData } from '../../components/TextNoData';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { getMs } from 'utils/timeUtils';
 import {
 	BlockLink,
 	getTraceLink,
--- a/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/tests/AttributeMappingsTab.test.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/tests/AttributeMappingsTab.test.tsx
@@ -333,6 +333,7 @@ describe('AttributeMappingsTab (integration)', () => {
 						context: FieldContext.attribute,
 						operation: MapperOperation.copy,
 						priority,
+						enabled: true,
 					})),
 				},
 			}),
--- a/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/ConditionsTooltip.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/ConditionsTooltip.tsx
@@ -1,10 +1,12 @@
 import { Typography } from '@signozhq/ui/typography';

+import { ConditionKey } from 'container/LLMObservability/AttributeMapping/types';
+
 import styles from './ConditionsTooltip.module.scss';

 interface ConditionsTooltipProps {
-	attributes: string[];
-	resource: string[];
+	attributes: ConditionKey[];
+	resource: ConditionKey[];
 }

 function ConditionsTooltip({
@@ -33,8 +35,8 @@ function ConditionsTooltip({
 					</Typography.Text>
 					<div className={styles.keyList}>
 						{attributes.map((key) => (
-							<code key={key} className={styles.key}>
-								{key}
+							<code key={`${key.origin}-${key.value}`} className={styles.key}>
+								{key.value}
 							</code>
 						))}
 					</div>
@@ -47,8 +49,8 @@ function ConditionsTooltip({
 					</Typography.Text>
 					<div className={styles.keyList}>
 						{resource.map((key) => (
-							<code key={key} className={styles.key}>
-								{key}
+							<code key={`${key.origin}-${key.value}`} className={styles.key}>
+								{key.value}
 							</code>
 						))}
 					</div>
--- a/frontend/src/container/LLMObservability/AttributeMapping/tests/fixtures.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/tests/fixtures.ts
@@ -3,6 +3,7 @@ import {
 	SpantypesSpanMapperDTO as Mapper,
 	SpantypesSpanMapperGroupDTO as MapperGroup,
 	SpantypesSpanMapperOperationDTO as MapperOperation,
+	SpantypesSpanMapperOriginDTO as MapperOrigin,
 	SpantypesSpanMapperTestSpanDTO as TestSpan,
 } from 'api/generated/services/sigNoz.schemas';

@@ -21,9 +22,15 @@ export function makeGroup(overrides: Partial<MapperGroup> = {}): MapperGroup {
 		orgId: 'org-1',
 		name: 'demo',
 		enabled: true,
+		origin: MapperOrigin.user,
+		version: 0,
 		condition: {
-			attributes: ['ai.embeddings'],
-			resource: ['cloud.account.id'],
+			attributes: [
+				{ value: 'ai.embeddings', enabled: true, origin: MapperOrigin.user },
+			],
+			resource: [
+				{ value: 'cloud.account.id', enabled: true, origin: MapperOrigin.user },
+			],
 		},
 		...overrides,
 	};
@@ -35,6 +42,7 @@ export function makeMapper(overrides: Partial<Mapper> = {}): Mapper {
 		groupId: 'group-1',
 		name: 'gen_ai.request.model',
 		enabled: true,
+		origin: MapperOrigin.user,
 		fieldContext: FieldContext.attribute,
 		config: {
 			sources: [
@@ -43,12 +51,16 @@ export function makeMapper(overrides: Partial<Mapper> = {}): Mapper {
 					context: FieldContext.attribute,
 					operation: MapperOperation.copy,
 					priority: 2,
+					enabled: true,
+					origin: MapperOrigin.user,
 				},
 				{
 					key: 'llm.model',
 					context: FieldContext.attribute,
 					operation: MapperOperation.move,
 					priority: 1,
+					enabled: true,
+					origin: MapperOrigin.user,
 				},
 			],
 		},
@@ -85,8 +97,12 @@ export const mockGroups: MapperGroup[] = [
 		id: 'group-1',
 		name: 'demo',
 		condition: {
-			attributes: ['ai.embeddings'],
-			resource: ['cloud.account.id'],
+			attributes: [
+				{ value: 'ai.embeddings', enabled: true, origin: MapperOrigin.user },
+			],
+			resource: [
+				{ value: 'cloud.account.id', enabled: true, origin: MapperOrigin.user },
+			],
 		},
 	}),
 	makeGroup({
--- a/frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/components/ConditionKeyList/ConditionKeyList.tsx
+++ b/frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/components/ConditionKeyList/ConditionKeyList.tsx
@@ -1,19 +1,23 @@
 import { Button } from '@signozhq/ui/button';
 import { Plus, X } from '@signozhq/icons';

-import { FieldContextValue } from 'container/LLMObservability/AttributeMapping/types';
+import {
+	ConditionKey,
+	FieldContextValue,
+} from 'container/LLMObservability/AttributeMapping/types';
+import { createConditionKey } from 'container/LLMObservability/AttributeMapping/utils';
 import KeySearchInput from '../../../KeySearchInput/KeySearchInput';
 import styles from './ConditionKeyList.module.scss';

 interface ConditionKeyListProps {
 	label: string;
 	labelHint?: string;
-	keys: string[];
+	keys: ConditionKey[];
 	placeholder: string;
 	addLabel: string;
 	testIdPrefix: string;
 	fieldContext: FieldContextValue;
-	onChange: (keys: string[]) => void;
+	onChange: (keys: ConditionKey[]) => void;
 }

 function ConditionKeyList({
@@ -27,11 +31,11 @@ function ConditionKeyList({
 	onChange,
 }: ConditionKeyListProps): JSX.Element {
 	const updateKey = (index: number, value: string): void => {
-		onChange(keys.map((key, i) => (i === index ? value : key)));
+		onChange(keys.map((key, i) => (i === index ? { ...key, value } : key)));
 	};

 	const addKey = (): void => {
-		onChange([...keys, '']);
+		onChange([...keys, createConditionKey()]);
 	};

 	const removeKey = (index: number): void => {
@@ -53,7 +57,7 @@ function ConditionKeyList({
 							<KeySearchInput
 								className={styles.keyInput}
 								placeholder={placeholder}
-								value={key}
+								value={key.value}
 								fieldContext={fieldContext}
 								onChange={(next): void => updateKey(index, next)}
 								testId={`${testIdPrefix}-${index}`}
--- a/frontend/src/container/LLMObservability/AttributeMapping/saveDraft.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/saveDraft.ts
@@ -42,7 +42,9 @@ function sourcesEqual(a: SourceConfig[], b: SourceConfig[]): boolean {
 			(source, index) =>
 				source.key === b[index].key &&
 				source.context === b[index].context &&
-				source.operation === b[index].operation,
+				source.operation === b[index].operation &&
+				source.enabled === b[index].enabled &&
+				source.origin === b[index].origin,
 		)
 	);
 }
--- a/frontend/src/container/LLMObservability/AttributeMapping/types.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/types.ts
@@ -1,8 +1,11 @@
 import {
 	SpantypesFieldContextDTO,
 	SpantypesSpanMapperDTO,
+	SpantypesSpanMapperGroupConditionKeyDTO,
 	SpantypesSpanMapperGroupDTO,
 	SpantypesSpanMapperOperationDTO,
+	SpantypesSpanMapperOriginDTO,
+	SpantypesSpanMapperSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';

 export type MapperGroup = SpantypesSpanMapperGroupDTO;
@@ -11,21 +14,23 @@ export const FieldContext = SpantypesFieldContextDTO;
 export type FieldContextValue = SpantypesFieldContextDTO;
 export const MapperOperation = SpantypesSpanMapperOperationDTO;
 export type MapperOperationValue = SpantypesSpanMapperOperationDTO;
+export const MapperOrigin = SpantypesSpanMapperOriginDTO;
+export type MapperOriginValue = SpantypesSpanMapperOriginDTO;
+
+export type ConditionKey = SpantypesSpanMapperGroupConditionKeyDTO;

 export type MapperDraftMode = 'add' | 'edit';

-export interface SourceConfig {
-	key: string;
-	context: SpantypesFieldContextDTO;
-	operation: SpantypesSpanMapperOperationDTO;
-}
+// `priority` is left out: it is derived from list order when the draft is
+// serialized.
+export type SourceConfig = Omit<SpantypesSpanMapperSourceDTO, 'priority'>;

 // Editable form state for a mapper. `sources` is ordered highest priority
 // first; `fieldContext` is where the standardized target is written.
 export interface MapperDraft {
 	id: string | null;
 	name: string;
-	fieldContext: SpantypesFieldContextDTO;
+	fieldContext: FieldContextValue;
 	sources: SourceConfig[];
 	enabled: boolean;
 }
@@ -33,26 +38,20 @@ export interface MapperDraft {
 export interface GroupDraft {
 	id: string | null;
 	name: string;
-	attributes: string[];
-	resource: string[];
+	attributes: ConditionKey[];
+	resource: ConditionKey[];
 	enabled: boolean;
 }

-export interface DraftMapper {
+// The editor tree identifies rows by `localId` so unsaved ones are addressable;
+// `serverId` is null until the row has been persisted.
+export type DraftMapper = Omit<MapperDraft, 'id'> & {
 	localId: string;
 	serverId: string | null;
-	name: string;
-	fieldContext: SpantypesFieldContextDTO;
-	sources: SourceConfig[];
-	enabled: boolean;
-}
+};

-export interface DraftGroup {
+export type DraftGroup = Omit<GroupDraft, 'id'> & {
 	localId: string;
 	serverId: string | null;
-	name: string;
-	attributes: string[];
-	resource: string[];
-	enabled: boolean;
 	mappers: DraftMapper[];
-}
+};
--- a/frontend/src/container/LLMObservability/AttributeMapping/utils.ts
+++ b/frontend/src/container/LLMObservability/AttributeMapping/utils.ts
@@ -1,12 +1,14 @@
 import {
 	SpantypesPostableSpanMapperDTO,
 	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesSpanMapperGroupConditionKeyDTO,
 	SpantypesUpdatableSpanMapperDTO,
 	SpantypesUpdatableSpanMapperGroupDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { v4 as uuid } from 'uuid';

 import {
+	ConditionKey,
 	DraftGroup,
 	DraftMapper,
 	FieldContext,
@@ -15,6 +17,7 @@ import {
 	MapperDraft,
 	MapperGroup,
 	MapperOperation,
+	MapperOrigin,
 	SourceConfig,
 } from './types';

@@ -24,20 +27,36 @@ function genLocalId(prefix: 'group' | 'mapper'): string {
 	return `local-${prefix}-${uuid()}`;
 }

-// Trimmed, de-duplicated, non-empty keys preserving input order.
-function cleanKeys(keys: string[]): string[] {
+export function createConditionKey(value = ''): ConditionKey {
+	return { value, enabled: true, origin: MapperOrigin.user };
+}
+
+// Trimmed, de-duplicated, non-empty keys preserving input order. A shipped and
+// a user key may share a value, so the origin is part of the identity.
+function cleanKeys(keys: ConditionKey[]): ConditionKey[] {
 	const seen = new Set<string>();
-	const result: string[] = [];
+	const result: ConditionKey[] = [];
 	keys.forEach((raw) => {
-		const key = raw.trim();
-		if (key && !seen.has(key)) {
-			seen.add(key);
-			result.push(key);
+		const value = raw.value.trim();
+		const dedupeKey = `${raw.origin}:${value}`;
+		if (value && !seen.has(dedupeKey)) {
+			seen.add(dedupeKey);
+			result.push({ ...raw, value });
 		}
 	});
 	return result;
 }

+function fromConditionKeys(
+	keys: SpantypesSpanMapperGroupConditionKeyDTO[] | null | undefined,
+): ConditionKey[] {
+	return (keys ?? []).map((key) => ({
+		value: key.value,
+		enabled: key.enabled,
+		origin: key.origin ?? MapperOrigin.user,
+	}));
+}
+
 // Source configs for a mapper, highest priority first (first match wins at
 // evaluation time).
 function getMapperSources(mapper: Mapper): SourceConfig[] {
@@ -48,6 +67,8 @@ function getMapperSources(mapper: Mapper): SourceConfig[] {
 			key: source.key,
 			context: source.context,
 			operation: source.operation,
+			enabled: source.enabled,
+			origin: source.origin ?? MapperOrigin.user,
 		}));
 }

@@ -56,6 +77,8 @@ export function createEmptySource(): SourceConfig {
 		key: '',
 		context: FieldContext.attribute,
 		operation: MapperOperation.copy,
+		enabled: true,
+		origin: MapperOrigin.user,
 	};
 }

@@ -72,7 +95,7 @@ function getCleanSources(draft: MapperDraft): SourceConfig[] {
 	const result: SourceConfig[] = [];
 	draft.sources.forEach((source) => {
 		const key = source.key.trim();
-		const dedupeKey = `${source.context}:${key}`;
+		const dedupeKey = `${source.origin}:${source.context}:${key}`;
 		if (key && !seen.has(dedupeKey)) {
 			seen.add(dedupeKey);
 			result.push({ ...source, key });
@@ -95,6 +118,8 @@ function buildSources(
 		context: source.context,
 		operation: source.operation,
 		priority: sources.length - index,
+		enabled: source.enabled,
+		origin: source.origin,
 	}));
 }

@@ -123,7 +148,7 @@ export function buildUpdatableMapper(
 export const EMPTY_GROUP_DRAFT: GroupDraft = {
 	id: null,
 	name: '',
-	attributes: [''],
+	attributes: [createConditionKey()],
 	resource: [],
 	enabled: true,
 };
@@ -170,8 +195,8 @@ export function buildDraftGroup(
 		localId: group.id,
 		serverId: group.id,
 		name: group.name,
-		attributes: group.condition?.attributes ?? [],
-		resource: group.condition?.resource ?? [],
+		attributes: fromConditionKeys(group.condition?.attributes),
+		resource: fromConditionKeys(group.condition?.resource),
 		enabled: group.enabled,
 		mappers: mappers.map(buildDraftMapper),
 	};
@@ -182,7 +207,8 @@ export function groupDraftFromNode(group: DraftGroup): GroupDraft {
 	return {
 		id: group.localId,
 		name: group.name,
-		attributes: group.attributes.length > 0 ? group.attributes : [''],
+		attributes:
+			group.attributes.length > 0 ? group.attributes : [createConditionKey()],
 		resource: group.resource,
 		enabled: group.enabled,
 	};
--- a/frontend/src/container/LLMObservability/Explorer/Explorer.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/Explorer.tsx
@@ -8,18 +8,13 @@ import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
-import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
-import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -28,7 +23,6 @@ import {
 	useHandleExplorerTabChange,
 } from 'hooks/useHandleExplorerTabChange';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
@@ -37,7 +31,7 @@ import {
 	tracesChangeViewAction,
 	tracesRunQueryAction,
 	tracesSaveViewAction,
-} from 'pages/TracesExplorer/aiActions';
+} from './aiActions';
 import { Warning } from 'types/api';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -45,12 +39,10 @@ import {
 	explorerViewToPanelType,
 	getExplorerViewFromUrl,
 } from 'utils/explorerUtils';
-import { v4 } from 'uuid';

-import { TOOLBAR_VIEWS } from './constants';
-import { getExportQueryData, getQueryByPanelType } from './explorerUtils';
+import LeftToolbarActions from '../ToolbarActions/LeftToolbarActions';
+import { DEFAULT_PANEL_TYPE, TOOLBAR_VIEWS } from './constants';
 import ListView from './ListView/ListView';
-import { defaultSelectedColumns } from './ListView/configs';
 import QuerySection from './QuerySection/QuerySection';
 import TableView from './TableView/TableView';
 import TimeSeriesView from './TimeSeriesView/TimeSeriesView';
@@ -60,7 +52,6 @@ import './Explorer.styles.scss';

 function Explorer(): JSX.Element {
 	const {
-		panelType,
 		updateAllQueriesOperators,
 		handleRunQuery,
 		stagedQuery,
@@ -72,20 +63,12 @@ function Explorer(): JSX.Element {

 	const isAIAssistantEnabled = useIsAIAssistantEnabled();

-	const { options } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'noop',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
 	const [searchParams] = useSearchParams();
 	const queryClient = useQueryClient();
 	const listQueryKeyRef = useRef<any>();

 	// Get panel type from URL
-	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const panelTypesFromUrl = useGetPanelTypesQueryParam(DEFAULT_PANEL_TYPE);
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
 	const [isCancelled, setIsCancelled] = useState(false);

@@ -112,19 +95,24 @@ function Explorer(): JSX.Element {
 	const [warning, setWarning] = useState<Warning | undefined>();
 	const [isOpen, setOpen] = useState<boolean>(true);

+	const { startUnixMilli, endUnixMilli } = useSignalFieldApis();
+	// existingQuery is left unset so related values auto-extract from the current query
+	const quickFiltersFieldApis = useMemo(
+		() => ({ startUnixMilli, endUnixMilli }),
+		[startUnixMilli, endUnixMilli],
+	);
+
 	const defaultQuery = useMemo(
 		(): Query =>
 			updateAllQueriesOperators(
 				initialQueryAIWithType,
-				PANEL_TYPES.LIST,
+				DEFAULT_PANEL_TYPE,
 				DataSource.TRACES,
 			),
 		[updateAllQueriesOperators],
 	);

 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
-	const { safeNavigate } = useSafeNavigate();
-	const getExportToDashboardLink = useGetExportToDashboardLink();

 	const handleChangeSelectedView = useCallback(
 		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
@@ -139,7 +127,7 @@ function Explorer(): JSX.Element {
 		},
 		[handleExplorerTabChange, handleSetConfig],
 	);
-
+	//TODO: check if we need to enable AI Assistant page actions on LLM o11y
 	// ─── AI Assistant page actions (only when license feature is on) ───────────
 	const aiActions = useMemo(
 		() =>
@@ -179,59 +167,6 @@ function Explorer(): JSX.Element {
 	usePageActions('traces-explorer', aiActions);
 	// ───────────────────────────────────────────────────────────────────────────

-	const exportDefaultQuery = useMemo(
-		() =>
-			getQueryByPanelType(
-				stagedQuery || initialQueryAIWithType,
-				panelType || PANEL_TYPES.LIST,
-			),
-		[stagedQuery, panelType],
-	);
-
-	const handleExport = useCallback(
-		(dashboard: ExportDashboard | null, isNewDashboard?: boolean): void => {
-			if (!dashboard || !panelType) {
-				return;
-			}
-
-			const panelTypeParam = AVAILABLE_EXPORT_PANEL_TYPES.includes(panelType)
-				? panelType
-				: PANEL_TYPES.TIME_SERIES;
-
-			const widgetId = v4();
-
-			const query = getExportQueryData(
-				exportDefaultQuery,
-				panelTypeParam,
-				options,
-			);
-
-			logEvent('Traces Explorer: Add to dashboard successful', {
-				panelType,
-				isNewDashboard,
-				dashboardName: dashboard?.title,
-			});
-
-			const dashboardEditView = getExportToDashboardLink({
-				query,
-				panelType: panelTypeParam,
-				dashboardId: dashboard.id,
-				widgetId,
-			});
-
-			if (dashboardEditView) {
-				safeNavigate(dashboardEditView);
-			}
-		},
-		[
-			exportDefaultQuery,
-			panelType,
-			safeNavigate,
-			options,
-			getExportToDashboardLink,
-		],
-	);
-
 	useShareBuilderUrl({ defaultValue: defaultQuery });

 	const logEventCalledRef = useRef(false);
@@ -260,8 +195,9 @@ function Explorer(): JSX.Element {
 				<Card className="filter" hidden={!isOpen}>
 					<QuickFilters
 						className="qf-traces-explorer"
-						source={QuickFiltersSource.TRACES_EXPLORER}
-						signal={SignalType.TRACES}
+						source={QuickFiltersSource.AI_OBSERVABILITY}
+						signal={SignalType.AI_OBSERVABILITY}
+						useFieldApis={quickFiltersFieldApis}
 						handleFilterVisibilityChange={(): void => {
 							setOpen(!isOpen);
 						}}
@@ -354,14 +290,6 @@ function Explorer(): JSX.Element {
 							</div>
 						)}
 					</div>
-
-					<ExplorerOptionWrapper
-						disabled={!stagedQuery}
-						query={exportDefaultQuery}
-						sourcepage={DataSource.TRACES}
-						onExport={handleExport}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
 				</div>
 			</div>
 		</Sentry.ErrorBoundary>
--- a/frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx
@@ -12,25 +12,17 @@ import { QueryKey } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import logEvent from 'api/common/logEvent';
-import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import {
-	getTraceLink,
-	transformSpanRows,
-} from 'container/TracesExplorer/ListView/utils';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
+import { getTraceLink, transformSpanRows } from './utils';
+import { getFieldColumn, TracesTableRow } from '../TracesTable/getFieldColumn';
+import TracesTable from '../TracesTable/TracesTable';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
@@ -42,6 +34,7 @@ import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';

+import TraceExplorerControls from '../Controls';
 import { getListViewQuery } from '../explorerUtils';
 import {
 	defaultSelectedColumns,
@@ -79,14 +72,6 @@ function ListView({
 		loading: timeRangeUpdateLoading,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);

-	const { options, config } = useOptionsMenu({
-		dataSource: DataSource.TRACES,
-		aggregateOperator: 'count',
-		initialOptions: {
-			selectColumns: defaultSelectedColumns,
-		},
-	});
-
 	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
 		QueryParams.pagination,
 	);
@@ -98,19 +83,6 @@ function ListView({
 		[stagedQuery, orderBy],
 	);

-	// Stable sorted-name signature for the queryKey.
-	// - Drag updates selectColumns; raw queryKey would churn on reorder.
-	// - Trace API fetches only listed columns → add/remove must refetch.
-	// - Sorted-name signature: stable on reorder, changes on add/remove.
-	const selectColumnsSignature = useMemo(
-		() =>
-			(options?.selectColumns ?? [])
-				.map((c) => c.name)
-				.sort()
-				.join(','),
-		[options?.selectColumns],
-	);
-
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -120,7 +92,6 @@ function ListView({
 			stagedQuery,
 			panelType,
 			paginationConfig,
-			selectColumnsSignature,
 			orderBy,
 		],
 		[
@@ -128,7 +99,6 @@ function ListView({
 			panelType,
 			globalSelectedTime,
 			paginationConfig,
-			selectColumnsSignature,
 			maxTime,
 			minTime,
 			orderBy,
@@ -150,7 +120,7 @@ function ListView({
 			},
 			tableParams: {
 				pagination: paginationConfig,
-				selectColumns: options?.selectColumns,
+				selectColumns: defaultSelectedColumns,
 			},
 		},
 		ENTITY_VERSION_V5,
@@ -158,10 +128,7 @@ function ListView({
 			queryKey,
 			enabled:
 				// don't make api call while the time range state in redux is loading
-				!timeRangeUpdateLoading &&
-				!!stagedQuery &&
-				panelType === PANEL_TYPES.LIST &&
-				!!options?.selectColumns?.length,
+				!timeRangeUpdateLoading && !!stagedQuery && panelType === PANEL_TYPES.LIST,
 		},
 	);

@@ -186,28 +153,20 @@ function ListView({
 		[queryTableDataResult],
 	);

-	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
-		const fields = [
-			TIMESTAMP_FIELD,
-			...(options?.selectColumns ?? []).filter(
-				(field) => field.name !== TIMESTAMP_FIELD.name,
+	// TODO(ai-explorer): static columns until the preferences framework lands.
+	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(
+		() =>
+			[TIMESTAMP_FIELD, ...defaultSelectedColumns].map((field) =>
+				getFieldColumn(field),
 			),
-		];
-		return fields.map((field) => getFieldColumn(field));
-	}, [options?.selectColumns]);
+		[],
+	);

 	const rows = useMemo(
 		() => transformSpanRows(queryTableData),
 		[queryTableData],
 	);

-	const handleColumnOrderChange = useCallback(
-		(reordered: TableColumnDef<TracesTableRow>[]): void => {
-			config?.addColumn?.onReorder(reordered.map((column) => column.id));
-		},
-		[config],
-	);
-
 	const handleOrderChange = useCallback((value: string) => {
 		setOrderBy(value);
 	}, []);
@@ -235,15 +194,9 @@ function ListView({
 					/>
 				</div>

-				<DownloadOptionsMenu
-					dataSource={DataSource.TRACES}
-					selectedColumns={options?.selectColumns}
-				/>
-
 				<TraceExplorerControls
 					isLoading={isFetching}
 					totalCount={rows.length}
-					config={config}
 					perPageOptions={PER_PAGE_OPTIONS}
 				/>
 			</div>
@@ -251,6 +204,8 @@ function ListView({
 			<TracesTable
 				data={rows}
 				columns={columns}
+				columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_LIST_COLUMNS}
+				respectColumnOrder
 				panelType="LIST"
 				getRowHref={getTraceLink}
 				isLoading={isLoading}
@@ -258,8 +213,6 @@ function ListView({
 				isError={isError}
 				error={error}
 				isFilterApplied={isFilterApplied}
-				onColumnOrderChange={handleColumnOrderChange}
-				onColumnRemove={config?.addColumn?.onRemove}
 			/>
 		</div>
 	);
--- a/frontend/src/container/LLMObservability/Explorer/ListView/configs.ts
+++ b/frontend/src/container/LLMObservability/Explorer/ListView/configs.ts
@@ -1,19 +1,41 @@
 import type { TelemetryFieldKey } from 'api/v5/v5';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';

-export const defaultSelectedColumns: string[] = [
-	'service.name',
-	'name',
-	'duration_nano',
-	'http_method',
-	'response_status_code',
-	'timestamp',
-];
-
-export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
-
 // Pinned timestamp column
+// The list query returns timestamp, trace_id and span_id whether or not they are selected.
 export const TIMESTAMP_FIELD = {
 	name: 'timestamp',
 	fieldContext: 'span',
 } as TelemetryFieldKey;
+
+export const defaultSelectedColumns: TelemetryFieldKey[] = [
+	{
+		name: 'service.name',
+		signal: 'traces',
+		fieldContext: 'resource',
+		fieldDataType: 'string',
+	},
+	{
+		name: 'name',
+		signal: 'traces',
+		fieldContext: 'span',
+		fieldDataType: 'string',
+	},
+	{
+		name: 'duration_nano',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+	{
+		name: 'http_method',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+	{
+		name: 'response_status_code',
+		signal: 'traces',
+		fieldContext: 'span',
+	},
+];
+
+export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
--- a/frontend/src/container/LLMObservability/Explorer/ListView/utils.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/ListView/utils.tsx
@@ -1,47 +1,9 @@
-import { Link } from 'react-router-dom';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { TelemetryFieldKey } from 'api/v5/v5';
 import type { TracesTableRow } from '../TracesTable/getFieldColumn';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { generatePath } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-import { formUrlParams } from 'container/TraceDetail/utils';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { ILog } from 'types/api/logs/log';
+import { formUrlParams } from 'utils/traceUtils';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';

-export function BlockLink({
-	children,
-	to,
-	openInNewTab,
-}: {
-	children: React.ReactNode;
-	to: string;
-	openInNewTab: boolean;
-}): any {
-	// Display block to make the whole cell clickable
-	return (
-		<Link
-			to={to}
-			style={{ display: 'block' }}
-			target={openInNewTab ? '_blank' : '_self'}
-		>
-			{children}
-		</Link>
-	);
-}
-
-export const transformDataWithDate = (
-	data: QueryDataV3[],
-): Omit<ILog, 'timestamp'>[] =>
-	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
-	[];
-
 export const getTraceLink = (record: Record<string, unknown>): string => {
 	function readId(value: unknown): string {
 		if (typeof value === 'string' || typeof value === 'number') {
@@ -53,102 +15,17 @@ export const getTraceLink = (record: Record<string, unknown>): string => {
 	const traceId = readId(record.traceID) || readId(record.trace_id);
 	const spanId = readId(record.spanID) || readId(record.span_id);

-	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
+	if (!traceId) {
+		return '';
+	}
+
+	return `${generatePath(ROUTES.TRACE_DETAIL, { id: traceId })}${formUrlParams({
 		spanId,
 		levelUp: 0,
 		levelDown: 0,
 	})}`;
 };

-export const getListColumns = (
-	selectedColumns: TelemetryFieldKey[],
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string | number,
-): ColumnsType<RowData> => {
-	const initialColumns: ColumnsType<RowData> = [
-		{
-			dataIndex: 'date',
-			key: 'date',
-			title: 'Timestamp',
-			width: 145,
-			render: (value, item): JSX.Element => {
-				const date =
-					typeof value === 'string'
-						? formatTimezoneAdjustedTimestamp(
-								value,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							)
-						: formatTimezoneAdjustedTimestamp(
-								value / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return (
-					<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-						<Typography.Text>{date}</Typography.Text>
-					</BlockLink>
-				);
-			},
-		},
-	];
-
-	const columns: ColumnsType<RowData> =
-		selectedColumns.map((props) => {
-			const name = props?.name || (props as any)?.key;
-			const fieldContext = props?.fieldContext || (props as any)?.type;
-			return {
-				title: name,
-				dataIndex: name,
-				key: buildCompositeKey(name, fieldContext),
-				width: 145,
-				render: (value, item): JSX.Element => {
-					if (value === '') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>N/A</Typography>
-							</BlockLink>
-						);
-					}
-
-					if (
-						name === 'httpMethod' ||
-						name === 'responseStatusCode' ||
-						name === 'response_status_code' ||
-						name === 'http_method'
-					) {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Badge data-testid={name} color="sakura" variant="outline">
-									{value}
-								</Badge>
-							</BlockLink>
-						);
-					}
-
-					if (name === 'durationNano' || name === 'duration_nano') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>{getMs(value)}ms</Typography>
-							</BlockLink>
-						);
-					}
-
-					return (
-						<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-							<Typography data-testid={name}>
-								<LineClampedText text={value} lines={3} />
-							</Typography>
-						</BlockLink>
-					);
-				},
-				responsive: ['md'],
-			};
-		}) || [];
-
-	return [...initialColumns, ...columns];
-};
-
 // Reshapes the query-range list payload into table rows. `id` mirrors span_id so
 // TanStack sees genuine row changes on orderBy toggles instead of falling back to
 // positional ids; `timestamp` is lifted from the wrapping ListItem.
--- a/frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx
@@ -4,8 +4,10 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';

+import { DEFAULT_PANEL_TYPE } from '../constants';
+
 function QuerySection(): JSX.Element {
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
+	const panelTypes = useGetPanelTypesQueryParam(DEFAULT_PANEL_TYPE);

 	const isRawQuery = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
--- a/frontend/src/container/LLMObservability/Explorer/TableView/TableView.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TableView/TableView.tsx
@@ -107,7 +107,7 @@ function TableView({
 						dataSource={DataSource.TRACES}
 						data={data}
 						query={stagedQuery || initialQueriesMap.traces}
-						fileName="traces-table"
+						fileName="ai-traces-table"
 					/>
 				</div>
 			)}
--- a/frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TimeSeriesView/TimeSeriesView.tsx
@@ -126,6 +126,7 @@ function TimeSeriesViewContainer({
 				dataSource={dataSource}
 				setWarning={setWarning}
 				allowExport
+				exportFileName="ai-traces-timeseries"
 			/>
 		</div>
 	);
--- a/frontend/src/container/LLMObservability/Explorer/TracesTable/FieldCell.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TracesTable/FieldCell.tsx
@@ -3,7 +3,7 @@ import { Badge } from '@signozhq/ui/badge';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import { getMs } from 'utils/timeUtils';
 import { useTimezone } from 'providers/Timezone';

 import {
--- a/frontend/src/container/LLMObservability/Explorer/TracesTable/TracesTable.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TracesTable/TracesTable.tsx
@@ -55,6 +55,9 @@ function TracesTable({
 	const isDataAbsent =
 		!isLoading && !isFetching && !isError && data.length === 0;

+	// Rows can land before the field keys, and mounting then renders a partial column set.
+	const canMountTable = !isError && !isLoading && data.length !== 0;
+
 	const handleRowClick = useCallback(
 		(row: TracesTableRow): void => {
 			history.push(getRowHref(row));
@@ -83,7 +86,7 @@ function TracesTable({
 				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
 			)}

-			{!isError && data.length !== 0 && (
+			{canMountTable && (
 				<div className={styles.tableWrapper}>
 					<TanStackTable<TracesTableRow>
 						data={data}
--- a/frontend/src/container/LLMObservability/Explorer/TracesTable/tests/TracesTable.test.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TracesTable/tests/TracesTable.test.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { useColumnStore } from 'components/TanStackTableView/useColumnStore';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import { buildTraceViewColumns } from '../../TracesView/configs';
+import TracesTable from '../TracesTable';
+
+const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
+const PERSISTED_KEY = `@signoz/table-columns/${STORAGE_KEY}`;
+
+const ROWS = [{ id: 't1', trace_id: 'abc', 'service.name': 'checkout' }];
+
+const COLUMNS = buildTraceViewColumns([
+	{ name: 'trace_id' },
+	{ name: 'service.name', fieldContext: 'resource' },
+	{ name: 'start_time' },
+]);
+
+function RaceHarness(): JSX.Element {
+	const [columnsReady, setColumnsReady] = useState(false);
+
+	return (
+		<>
+			<button type="button" onClick={(): void => setColumnsReady(true)}>
+				columns-ready
+			</button>
+			<TracesTable
+				data={ROWS}
+				columns={columnsReady ? COLUMNS : []}
+				columnStorageKey={STORAGE_KEY}
+				respectColumnOrder
+				panelType="TRACE"
+				getRowHref={(): string => '/trace/abc'}
+				isLoading={!columnsReady}
+				isFetching={false}
+				isError={false}
+				error={null}
+				isFilterApplied={false}
+			/>
+		</>
+	);
+}
+
+const persistedState = (): { hiddenColumnIds: string[] } | null => {
+	const raw = localStorage.getItem(PERSISTED_KEY);
+	return raw ? (JSON.parse(raw) as { hiddenColumnIds: string[] }) : null;
+};
+
+describe('TracesTable column-init race', () => {
+	beforeEach(() => {
+		useColumnStore.setState({ tables: {} });
+		localStorage.clear();
+	});
+
+	it('does not persist empty defaults when rows land before columns', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<RaceHarness />);
+
+		expect(screen.getByText(/pending_data_placeholder/i)).toBeInTheDocument();
+		expect(screen.queryByRole('table')).not.toBeInTheDocument();
+		expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+		expect(persistedState()).toBeNull();
+
+		await user.click(screen.getByRole('button', { name: 'columns-ready' }));
+
+		await expect(screen.findByRole('table')).resolves.toBeInTheDocument();
+		expect(screen.getByText('trace_id')).toBeInTheDocument();
+		expect(screen.queryByText('start_time')).not.toBeInTheDocument();
+		expect(persistedState()?.hiddenColumnIds).toStrictEqual(['start_time']);
+	});
+});
--- a/frontend/src/container/LLMObservability/Explorer/TracesTable/constants.ts
+++ b/frontend/src/container/LLMObservability/Explorer/TracesTable/constants.ts
@@ -1,6 +1,13 @@
 // Field-name allowlists that drive signal-specific cell rendering. Both legacy
 // camelCase and snake_case variants are listed because the API has shipped both.
-export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
+
+// start/end/last_activity_time come from the per-trace query, unlike span timestamp.
+export const TIMESTAMP_FIELD_NAMES = new Set([
+	'timestamp',
+	'start_time',
+	'end_time',
+	'last_activity_time',
+]);

 export const STATUS_FIELD_NAMES = new Set([
 	'httpMethod',
@@ -13,6 +20,12 @@ export const STATUS_FIELD_NAMES = new Set([
 	'http.response.status_code',
 ]);

-export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
+// trace_/max_llm_duration_nano are trace-level durations the per-trace query computes.
+export const DURATION_FIELD_NAMES = new Set([
+	'durationNano',
+	'duration_nano',
+	'trace_duration_nano',
+	'max_llm_duration_nano',
+]);

 export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);
--- a/frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx
@@ -67,6 +67,7 @@ function TracesView({
 		onFieldsChange,
 		requiredFields,
 		isLoading: isColumnsLoading,
+		canPersistColumns,
 	} = useTraceViewColumns();

 	const {
@@ -168,9 +169,22 @@ function TracesView({
 		setOrderBy(value);
 	}, []);

+	// Without the full column set there is no pool to pick from, so the control is dropped.
 	const fieldsSelectorConfig = useMemo(
-		() => ({ fieldsSelector: { value: selectedFields, onFieldsChange } }),
-		[selectedFields, onFieldsChange],
+		() =>
+			canPersistColumns
+				? { fieldsSelector: { value: selectedFields, onFieldsChange } }
+				: null,
+		[canPersistColumns, selectedFields, onFieldsChange],
+	);
+
+	// Rendering the pool unfiltered would surface columns the defaults keep hidden.
+	const tableColumns = useMemo(
+		() =>
+			canPersistColumns
+				? columns
+				: columns.filter((column) => column.defaultVisibility !== false),
+		[canPersistColumns, columns],
 	);

 	return (
@@ -207,8 +221,12 @@ function TracesView({

 			<TracesTable
 				data={rows}
-				columns={columns}
-				columnStorageKey={LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS}
+				columns={tableColumns}
+				columnStorageKey={
+					canPersistColumns
+						? LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS
+						: undefined
+				}
 				respectColumnOrder
 				panelType="TRACE"
 				getRowHref={getTraceLink}
--- a/frontend/src/container/LLMObservability/Explorer/TracesView/tests/TracesView.test.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TracesView/tests/TracesView.test.tsx
@@ -0,0 +1,190 @@
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useColumnStore } from 'components/TanStackTableView/useColumnStore';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
+
+import TracesView from '../TracesView';
+
+const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
+const PERSISTED_KEY = `@signoz/table-columns/${STORAGE_KEY}`;
+const QUERY_RANGE_URL = `${ENVIRONMENT.baseURL}/api/v5/query_range`;
+const FIELD_KEYS_URL = `${ENVIRONMENT.baseURL}/api/v1/ai_observability/fields/keys`;
+
+const OPTIONS_TRIGGER = 'options_menu.options';
+
+const ROWS = [
+	{
+		timestamp: '2024-07-19T08:39:58.735245Z',
+		data: {
+			'service.name': 'checkout',
+			root_span_name: 'HTTP GET',
+			trace_duration_nano: 55306000,
+			span_count: 8,
+			trace_id: '0000000000000000344ded1387b08a7e',
+		},
+	},
+];
+
+const mockRows = (): void => {
+	server.use(
+		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					data: {
+						type: 'trace',
+						data: { results: [{ queryName: 'A', rows: ROWS }] },
+					},
+				}),
+			),
+		),
+	);
+};
+
+const mockFieldKeys = (names: string[]): void => {
+	server.use(
+		rest.get(FIELD_KEYS_URL, (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						complete: true,
+						keys: Object.fromEntries(
+							names.map((name) => [
+								name,
+								[
+									{
+										name,
+										fieldContext: TelemetrytypesFieldContextDTO.trace,
+										fieldDataType: TelemetrytypesFieldDataTypeDTO.float64,
+									},
+								],
+							]),
+						),
+					},
+				}),
+			),
+		),
+	);
+};
+
+const mockFieldKeysFailure = (): void => {
+	server.use(
+		rest.get(FIELD_KEYS_URL, (_req, res, ctx) =>
+			res(ctx.status(500), ctx.json({ status: 'error' })),
+		),
+	);
+};
+
+const persistedState = (): { hiddenColumnIds: string[] } | null => {
+	const raw = localStorage.getItem(PERSISTED_KEY);
+	return raw ? (JSON.parse(raw) as { hiddenColumnIds: string[] }) : null;
+};
+
+const renderTracesView = (): ReturnType<typeof render> =>
+	render(
+		<TracesView
+			isFilterApplied={false}
+			setWarning={jest.fn()}
+			setIsLoadingQueries={jest.fn()}
+		/>,
+		{},
+		{
+			initialRoute: '/llm-observability/traces',
+			queryBuilderOverrides: {
+				panelType: PANEL_TYPES.TRACE,
+				stagedQuery: initialQueryAIWithType,
+				currentQuery: initialQueryAIWithType,
+			} as never,
+		},
+	);
+
+describe('TracesView column persistence', () => {
+	beforeEach(() => {
+		useColumnStore.setState({ tables: {} });
+		localStorage.clear();
+		mockRows();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	// Rows are virtualised, so a mounted table stands in for "rows arrived".
+	const findTable = (): Promise<HTMLElement> => screen.findByRole('table');
+
+	it('seeds the persisted defaults once the field keys arrive', async () => {
+		mockFieldKeys(['llm_call_count', 'tool_call_count']);
+		renderTracesView();
+
+		await findTable();
+
+		await waitFor(() => {
+			expect(persistedState()?.hiddenColumnIds).toStrictEqual([
+				'start_time',
+				'end_time',
+				'error_count',
+				'input',
+				'output',
+				'trace:tool_call_count:float64',
+			]);
+		});
+		expect(screen.getByText(OPTIONS_TRIGGER)).toBeInTheDocument();
+		expect(screen.getByText('llm_call_count')).toBeInTheDocument();
+	});
+
+	it('persists nothing when the field keys fail', async () => {
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+		expect(persistedState()).toBeNull();
+	});
+
+	it('drops the column picker when the field keys fail', async () => {
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(screen.queryByText(OPTIONS_TRIGGER)).not.toBeInTheDocument();
+	});
+
+	it('renders only the default-visible columns when the field keys fail', async () => {
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(screen.getByText('root_span_name')).toBeInTheDocument();
+		expect(screen.getByText('trace_id')).toBeInTheDocument();
+		expect(screen.queryByText('input')).not.toBeInTheDocument();
+		expect(screen.queryByText('output')).not.toBeInTheDocument();
+	});
+
+	it('leaves an existing selection untouched while the field keys fail', async () => {
+		const existing = {
+			hiddenColumnIds: ['trace:tool_call_count:float64', 'input', 'output'],
+			columnOrder: ['trace_id', 'resource:service.name'],
+			columnSizing: {},
+		};
+		localStorage.setItem(PERSISTED_KEY, JSON.stringify(existing));
+
+		mockFieldKeysFailure();
+		renderTracesView();
+
+		await findTable();
+
+		expect(persistedState()).toStrictEqual(existing);
+	});
+});
--- a/frontend/src/container/LLMObservability/Explorer/TracesView/tests/useTraceViewColumns.test.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TracesView/tests/useTraceViewColumns.test.tsx
@@ -149,6 +149,62 @@ describe('useTraceViewColumns', () => {
 		);
 	});

+	describe('when the keys fetch fails', () => {
+		beforeEach(() => {
+			server.use(
+				rest.get(
+					`${ENVIRONMENT.baseURL}/api/v1/ai_observability/fields/keys`,
+					(_req, res, ctx) => res(ctx.status(500), ctx.json({ status: 'error' })),
+				),
+			);
+		});
+
+		it('does not persist defaults', async () => {
+			await renderColumns();
+
+			expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+			expect(
+				localStorage.getItem(`@signoz/table-columns/${STORAGE_KEY}`),
+			).toBeNull();
+		});
+
+		it('reports the column state as not persistable', async () => {
+			const { result } = await renderColumns();
+
+			expect(result.current.canPersistColumns).toBe(false);
+		});
+
+		it('ignores a selection change instead of persisting a partial set', async () => {
+			const { result } = await renderColumns();
+
+			act(() => {
+				result.current.onFieldsChange([{ name: 'trace_id' }]);
+			});
+
+			expect(useColumnStore.getState().tables[STORAGE_KEY]).toBeUndefined();
+		});
+
+		it('seeds the defaults once a later fetch succeeds', async () => {
+			const { unmount } = await renderColumns();
+			unmount();
+
+			mockAggregateKeys(AGGREGATE_KEYS);
+			const { result } = await renderColumns();
+
+			expect(result.current.canPersistColumns).toBe(true);
+			expect(fieldNames(result.current.selectedFields)).toStrictEqual([
+				'service.name',
+				'root_span_name',
+				'trace_duration_nano',
+				'span_count',
+				'trace_id',
+				'llm_call_count',
+				'total_tokens',
+				'estimated_total_cost',
+			]);
+		});
+	});
+
 	it('hides the columns dropped from the selection', async () => {
 		const { result } = await renderColumns();

--- a/frontend/src/container/LLMObservability/Explorer/TracesView/configs.tsx
+++ b/frontend/src/container/LLMObservability/Explorer/TracesView/configs.tsx
@@ -8,7 +8,7 @@ export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 /** Always visible: it is the row's link to the trace. */
 export const TRACE_ID_COLUMN_ID = 'trace_id';

-/** Everything else starts hidden, including any aggregate the endpoint adds later. */
+/** Everything else starts hidden; only applied at first init, since the store persists hidden ids. */
 const DEFAULT_VISIBLE_FIELDS = new Set([
 	'service.name',
 	'root_span_name',
--- a/frontend/src/container/LLMObservability/Explorer/TracesView/useTraceViewColumns.ts
+++ b/frontend/src/container/LLMObservability/Explorer/TracesView/useTraceViewColumns.ts
@@ -35,11 +35,17 @@ interface UseTraceViewColumns {
 	onFieldsChange: (next: TelemetryFieldKey[]) => void;
 	requiredFields: readonly string[];
 	isLoading: boolean;
+	/** False until the keys fetch lands; a partial set must not reach the persisted store. */
+	canPersistColumns: boolean;
 }

 // TODO(ai-explorer): browser-local only, unlike the list views' `?options=` columns.
 export function useTraceViewColumns(): UseTraceViewColumns {
-	const { data: fetchedFields = [], isFetched } = useFieldKeysSuggestion(
+	const {
+		data: fetchedFields = [],
+		isFetched,
+		isSuccess,
+	} = useFieldKeysSuggestion(
 		{
 			...TRACE_VIEW_FIELD_KEYS,
 			signal: DATA_SOURCE_TO_SIGNAL[DataSource.TRACES],
@@ -60,10 +66,10 @@ export function useTraceViewColumns(): UseTraceViewColumns {

 	// Defaults from a partial column set would persist as the user's own choice.
 	useEffect(() => {
-		if (isFetched) {
+		if (isSuccess) {
 			initializeFromDefaults(STORAGE_KEY, columns);
 		}
-	}, [isFetched, columns]);
+	}, [isSuccess, columns]);

 	const hiddenColumnIds = useHiddenColumnIds(STORAGE_KEY);
 	const columnOrder = useColumnOrder(STORAGE_KEY);
@@ -83,6 +89,10 @@ export function useTraceViewColumns(): UseTraceViewColumns {

 	const onFieldsChange = useCallback(
 		(next: TelemetryFieldKey[]): void => {
+			if (!isSuccess) {
+				return;
+			}
+
 			const keptIds = new Set(next.map(columnIdOf));

 			columns.forEach((column) => {
@@ -96,7 +106,7 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 			// Columns missing from the order sort last, so the visible ones suffice.
 			setColumnOrder(STORAGE_KEY, next.map(columnIdOf));
 		},
-		[columns],
+		[columns, isSuccess],
 	);

 	return {
@@ -105,5 +115,6 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 		onFieldsChange,
 		requiredFields: [TRACE_ID_COLUMN_ID],
 		isLoading: !isFetched,
+		canPersistColumns: isSuccess,
 	};
 }
--- a/Show More
+++ b/Show More