chore(storybook): survey component usage from the story shots scripts

feat(storybook): add open-dropdown stories across the pages that use one
fix(storybook): read the service map tags type from its new home
2026-09-22 03:10:41 +01:00 · 2026-09-21 16:35:59 -03:00 · 2026-09-21 15:47:29 -03: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
730 changed files with 44237 additions and 16342 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/.claude/skills/storybook-visual-diff/SKILL.md
+++ b/.claude/skills/storybook-visual-diff/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: storybook-visual-diff
-description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.
+description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Also surveys where a component is used across the UI, ringing each instance in red and collecting every one into a single contact sheet. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, find which pages a change affects, or show every place a component appears.
 ---

 # Storybook visual diff
@@ -22,7 +22,7 @@ says, take it and do not ask again; ask only for what is genuinely missing, in

 | To settle | Ask | Options |
 | --- | --- | --- |
-| Job | "What should this run produce?" | shoot only · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
+| Job | "What should this run produce?" | shoot only · survey where a component is used (§4) · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
 | Scope | "Which stories?" | offer 2-3 concrete selections read off `index.json` (a page, a `--title` prefix, everything), never open-ended |
 | Themes | "Which themes?" | dark · dark + light |
 | Read-out | "How should the diff read?" | `green` (changed pixels over the after shot) · `green-parallel` (before \| after \| diff, side by side) · `red` · `red-parallel` · `none` (keep both runs, do not diff) |
@@ -39,6 +39,7 @@ The job decides which loop below to run:
 | Job | Loop |
 | --- | --- |
 | **shoot only** | §1, §2, stop. Report the paths. No diff, no second run. |
+| **usage survey** | §1, §4, stop. One run, no diff: the question is where a component appears, not what moved. |
 | **baseline first** | the full loop, stopping after step 2 to hand the change back. The user makes it, then continue at step 4. |
 | **change already in the tree** | the tree *is* the after state. `git stash` (or check out the base commit) to shoot the before, restore, shoot the after. Confirm the working tree is clean enough to stash before touching it, and restore it even if a capture fails. |
 | **branch vs branch** | shoot the current branch, then `git switch <base>` in place (stash first if the tree is dirty), restart the dev server, shoot again, switch back and unstash. Restart matters: HMR does not survive a whole-branch swap cleanly. Get the tree back to where it started even if a capture fails. |
@@ -122,6 +123,8 @@ node scripts/story-shots.mjs .story-shots/baseline \
 | `--clock <iso\|live>` | wall clock the page reads, passed to the preview as `?storyClock`; `live` unfreezes it |
 | `--motion` | keep animations and transitions running (sets the `motion` global to `live`) |
 | `--ignore <selector>` | hide matching elements, on top of `[data-shot-ignore]` and `[data-chromatic="ignore"]` |
+| `--highlight <selector>` | also write `<id>--highlight.png`, every match ringed in red with 6px of padding |
+| `--crop <selector>` | also write one `crops/<id>--<n>.png` per match, and montage the theme's crops into `crops.png` |
 | `--flat` | write `<out>/<id>.png`, no theme directory |
 | `--no-caption` | leave the caption band off the shots |
 | `--list` | print the matched stories and exit |
@@ -129,8 +132,9 @@ node scripts/story-shots.mjs .story-shots/baseline \
 Files land at `<out>/<theme>/<story-id>.png`, next to a `shots.json` recording
 what each shot is (id, title, name, theme, `ok`/`busy`, the caption's height in
 rows) and how the run was configured (args, clock, width, height, grow, motion,
-settle, ignore). Keep the flags identical between the two runs or the diff pairs
-nothing.
+settle, ignore, highlight, crop). Keep the flags identical between the two runs
+or the diff pairs nothing. `--highlight` and `--crop` write extra files beside
+the shots; §4 is what they are for.

 Every shot carries the caption band described below, so a single screenshot says
 what it is on its own. `--no-caption` leaves it off, and so does a machine
@@ -208,10 +212,75 @@ pixelmatch's `includeAA: false`. So the script implements that comparison:
 A pair whose shots are different sizes is compared over the overlap, and every
 row and column that exists in only one of them counts as changed.

-Pairing is by `<theme>/<story-id>.png`, so a story that exists on only one side
-(new on the feature branch, renamed, retitled) has nothing to pair with and is
-skipped silently. On a branch-vs-branch run, compare the two runs' file lists
-before reading the numbers.
+Pairing is by `<theme>/<story-id>.png`. A file that exists on one side only (a
+story added on the feature branch, renamed, retitled, or one whose capture
+failed) has nothing to compare against. It is not skipped: the side that has the
+shot is written out, captioned `missing previous` or `missing current`, and every
+one of its pixels counts as changed, so it sorts to the top of the report and is
+printed with that note. In the parallel modes the run that does not have it gets
+a placeholder tile saying so, in the theme's own colours, so the montage keeps
+its three tiles. Without this a whole component going missing reads as a clean
+run.
+
+## 4. Surveying where a component is used
+
+A different question from a diff: not *what moved*, but *where does this
+component appear and what does each instance look like*. One run answers it.
+
+```bash
+node scripts/story-shots.mjs .story-shots/button-group --port 6007 --theme dark,light \
+  --highlight '.ant-btn-group, div[role="group"][class*="button-group"]' \
+  --crop '.ant-btn-group, div[role="group"][class*="button-group"]' \
+  --stories pages-home--default,pages-alerts-history--default,...
+```
+
+Four things come out, per theme:
+
+- `<theme>/<id>.png` — the page as it is.
+- `<theme>/<id>--highlight.png` — the same page with every instance ringed in
+  red. This is what says *where on the page*, which a crop cannot.
+- `<theme>/crops/<id>--<n>.png` — each instance on its own.
+- `<theme>/crops.png` — every crop of that theme in one labelled contact sheet.
+
+The sheet is the useful artifact. Twelve instances across nine pages is one
+image to read, not twelve files to open in turn, and the label under each says
+which story it came from.
+
+### Finding the selector and the stories
+
+1. **Grep the source for the import, not the tag.** `Button.Group` and
+   `ButtonGroup` are two different components in this repo: antd's, and
+   `@signozhq/ui/button`'s. A survey that greps one misses the other.
+2. **Read the rendered markup, not the JSX.** `--crop` takes a CSS selector
+   against the DOM. antd's group is `.ant-btn-group`; the design-system one is a
+   `div[role="group"]` whose class is a hashed CSS module, hence
+   `[class*="button-group"]`. Open the built component under
+   `node_modules/@signozhq/ui/dist/` when the class is not obvious.
+3. **Map each source file to the story that renders it.** Follow the consumers:
+   a container renders inside a page, and the page's story is the one to shoot.
+   A component behind a drawer or a tab needs the story whose `args` open it
+   (`--args drawer:endpoint-stats`), not the page default.
+4. **Let the run itself confirm the mapping.** Each story logs `N cropped`. A
+   `0 cropped` line means that story never reaches the state, so swap the story
+   rather than the selector.
+
+### What a zero means
+
+- **`0 cropped` on a story** — the component is not on that page in that state.
+  Wrong story, or the state is behind an interaction the story has no `play`
+  for. A modal nobody opens cannot be surveyed; say so instead of shooting the
+  page it sits behind.
+- **An instance in the source with no crop** — a container whose children are
+  all conditional renders as a 0x0 box. Both `--crop` and `--highlight` skip
+  anything under 1px, since there is nothing on screen to ring. That is a
+  finding about the component, not a failure of the run: it is in the tree and
+  invisible.
+
+A story logged `viewport-sized content, stopped chasing Npx` is shot back at
+`--height` with its own scrollbar, and what is below the fold there is laid out
+but never painted. The crops of such a story are taken at the chased height
+instead, so they are not the black rectangles the page shot would give; the
+`--highlight` shot still shows only what fits the viewport.

 ## What makes a shot reproducible

@@ -292,3 +361,6 @@ for `--ignore` when a region cannot be settled.
 - **Stories behind a hover, drawer or modal** only render what their `play`
  reaches. If a state is missing from the shot, the story needs the `play`, not
  the script.
+- **The caption's temporary file is written beside the shot**, not in the system
+  temp directory. `/tmp` is often a different filesystem, and the rename back
+  over the shot then fails with `EXDEV: cross-device link not permitted`.
--- a/.github/workflows/integrationci.yaml
+++ b/.github/workflows/integrationci.yaml
@@ -67,7 +67,6 @@ jobs:
          - semconvfamilies
          - serviceaccount
          - spanmapper
-          - tracedetail
          - querier_json_body
          - querier_skip_resource_fingerprint
          - ttl
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -341,7 +341,7 @@ gateway:
 ##################### Tokenizer #####################
 tokenizer:
  # Specifies the tokenizer provider to use.
-  provider: jwt
+  provider: opaque
  lifetime:
    # The duration for which a user can be idle before being required to authenticate.
    idle: 168h
--- 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
@@ -9439,29 +9623,6 @@ components:
      required:
      - aggregations
      type: object
-    SpantypesGettableTraceSummary:
-      properties:
-        ai:
-          $ref: '#/components/schemas/SpantypesTraceAISummary'
-        endTimestampMillis:
-          minimum: 0
-          type: integer
-        hasMissingSpans:
-          type: boolean
-        rootServiceEntryPoint:
-          type: string
-        rootServiceName:
-          type: string
-        startTimestampMillis:
-          minimum: 0
-          type: integer
-        totalErrorSpansCount:
-          minimum: 0
-          type: integer
-        totalSpansCount:
-          minimum: 0
-          type: integer
-      type: object
    SpantypesGettableWaterfallTrace:
      properties:
        endTimestampMillis:
@@ -9644,6 +9805,8 @@ components:
          type: string
        name:
          type: string
+        origin:
+          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
        updatedAt:
          format: date-time
          type: string
@@ -9656,6 +9819,7 @@ components:
      - fieldContext
      - config
      - enabled
+      - origin
      type: object
    SpantypesSpanMapperConfig:
      properties:
@@ -9684,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:
@@ -9733,6 +9924,7 @@ components:
      - context
      - operation
      - priority
+      - enabled
      type: object
    SpantypesSpanMapperTestSpan:
      properties:
@@ -9745,32 +9937,6 @@ components:
          nullable: true
          type: object
      type: object
-    SpantypesTraceAISummary:
-      properties:
-        tokens:
-          $ref: '#/components/schemas/SpantypesTraceAITokens'
-        totalCost:
-          nullable: true
-          type: number
-      type: object
-    SpantypesTraceAITokens:
-      properties:
-        cacheRead:
-          minimum: 0
-          type: integer
-        cacheWrite:
-          minimum: 0
-          type: integer
-        input:
-          minimum: 0
-          type: integer
-        output:
-          minimum: 0
-          type: integer
-        reasoning:
-          minimum: 0
-          type: integer
-      type: object
    SpantypesUpdatableSpanMapper:
      properties:
        config:
@@ -11009,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
@@ -11061,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
@@ -11118,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
@@ -11163,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
@@ -11231,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
@@ -11280,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
@@ -11338,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
@@ -11413,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
@@ -11467,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
@@ -11524,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
@@ -11577,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
@@ -11629,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
@@ -11687,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
@@ -15509,66 +15679,6 @@ paths:
      summary: Get aggregations for a trace
      tags:
      - tracedetail
-  /api/v1/traces/{traceID}/summary:
-    get:
-      deprecated: false
-      description: Returns the trace-level fields of the waterfall (time range, root,
-        span counts, missing spans) and, when the trace has gen_ai spans, its token
-        and cost totals. Computed in one aggregate query.
-      operationId: GetTraceSummary
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SpantypesGettableTraceSummary'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get summary for a trace
-      tags:
-      - tracedetail
  /api/v1/user/me:
    get:
      deprecated: true
@@ -20351,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/docs/contributing/go/dslfilteringtosql.md
+++ b/docs/contributing/go/dslfilteringtosql.md
@@ -0,0 +1,181 @@
+# DSL Filtering to SQL
+
+To support search on any entity's list page (dashboards, alert rules, ...), use [pkg/parser/filterquery/sqlcompiler](/pkg/parser/filterquery/sqlcompiler/compiler.go). It compiles a filter DSL string into a WHERE clause for the relational store: `?`-placeholder SQL plus bind arguments, ready for bun on both SQLite and Postgres. This doc explains what the compiler already does and what an adopting module supplies: a `FieldResolver` that says which keys exist and what each maps to.
+
+The dashboards list is the adopter today; the alert rules list revamp is adopting it next.
+
+## What is the DSL?
+
+A few queries, from simple to full:
+
+```
+payment
+status = active AND name CONTAINS cpu
+(labels.team IN ('infra', 'platform') OR labels.env EXISTS) AND created_at > '2025-01-01T00:00:00Z'
+"name = something"
+```
+
+- `payment` is free text: a bare token with no key, matched as a substring wherever the module decides (name, description, ...).
+- `status = active AND name CONTAINS cpu` is two comparisons of the shape `key OP value`. The `AND` is optional; adjacent terms are an implicit `AND`.
+- The third query shows grouping and precedence: parentheses > `NOT` > `AND` > `OR`. Values are bare tokens or quoted strings; `IN` accepts `in(...)` and `[...]` forms.
+- `"name = something"` is quoted, so it is free text for that exact phrase instead of a `name = something` comparison. Quoting is the escape hatch for a phrase that looks like DSL.
+
+The grammar lives at [grammar/FilterQuery.g4](/grammar/FilterQuery.g4) (see its `comparison` rule for the full operator list), with the ANTLR-generated parser in [pkg/parser/filterquery/grammar](/pkg/parser/filterquery/grammar). It is the same grammar the telemetry search bars use, so the query language feels identical everywhere.
+
+## What does the framework already cover?
+
+```go
+compiled, errs := sqlcompiler.Compile(query, formatter, resolver)
+
+type Compiled struct {
+	SQL  string
+	Args []any
+}
+```
+
+`Compile` returns either a non-nil `*Compiled` or a list of human-readable errors. `Compiled.SQL` is the WHERE clause with `?` placeholders and `Compiled.Args` holds the bind arguments in placeholder order; the store passes both to bun. An empty query compiles to an empty `Compiled`; callers gate on `IsEmpty()`, not nil. The package handles:
+
+- Parsing, with syntax errors collected at line/column positions instead of failing on the first one.
+- The boolean tree: `AND`/`OR`/`NOT`, parentheses, implicit `AND`, and pruning of empty conditions.
+- Operator extraction, including inversion of `NOT LIKE`, `NOT IN`, `NOT EXISTS` and friends.
+- Typed value extraction with accumulated errors: the user sees every problem in the query at once.
+- Argument binding through go-sqlbuilder; no value is ever interpolated into the SQL text.
+
+The resolver is called once per term and builds each predicate with helpers the compiler provides (next section).
+
+## When do I write a FieldResolver?
+
+Whenever a module adopts the DSL for its list page. The resolver is the per-module policy and the only code you write:
+
+```go
+type FieldResolver interface {
+	ResolveComparison(v *Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string
+	ResolveFreeText(v *Visitor, value string) string
+}
+```
+
+- `ResolveComparison` is called once per `key OP value` term. It decides whether the key exists and which column expression it maps to, and returns the SQL predicate for the term.
+- `ResolveFreeText` is called for a bare or quoted keyless token. It returns a predicate matching the token across whatever the module considers searchable (name, description, tags, ...).
+- Both report a bad key, operator or value with `v.AddError(...)` and return `""`. Never panic, never fail fast; the compile fails at the end with all accumulated errors.
+
+The `*Visitor` passed in provides everything needed to build predicates. Use these instead of hand-building SQL or managing arguments yourself:
+
+| On the `Visitor` | Use |
+| --- | --- |
+| `Sb` | the compile's root `SelectBuilder`; predicates and their arguments attach to it |
+| `Formatter` | dialect-portable column expressions (`JSONExtractString`, `LowerExpression`) valid on both SQLite and Postgres |
+| `BuildStringOperation` | `=`, `!=`, `LIKE`/`ILIKE`, `CONTAINS`, `IN` on a string column; escapes `%`/`_` for `CONTAINS`, rejects patterns ending in a dangling backslash, lowers both sides for `ILIKE` so SQLite and Postgres agree |
+| `BuildTimestampComparison` | equality, ranges and `BETWEEN` on RFC3339 timestamps |
+| `BuildBoolComparison` | `= true/false` |
+| `BuildFreeTextContains` | case-insensitive substring match, `COALESCE`d so `NOT (...)` does not drop rows where the column is NULL |
+| `ExtractSingleStringValue`, `ExtractStringValueList` | typed value extraction when building a custom predicate |
+| `AddError` | report a problem; errors accumulate |
+
+In the simplest case, keys map straight to columns and the resolver is a switch. The doc's running example, an imaginary `sample_entity` table:
+
+```go
+func (r sampleEntityFieldResolver) ResolveComparison(v *sqlcompiler.Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string {
+	switch key {
+	case "created_by":
+		return v.BuildStringOperation(v.Sb, ctx, operation, "sample_entity.created_by", key)
+	case "created_at":
+		return v.BuildTimestampComparison(ctx, operation, "sample_entity.created_at")
+	case "locked":
+		return v.BuildBoolComparison(ctx, operation, "sample_entity.locked")
+	}
+	v.AddError("unknown key %q", key)
+	return ""
+}
+
+func (sampleEntityFieldResolver) ResolveFreeText(v *sqlcompiler.Visitor, value string) string {
+	return v.BuildFreeTextContains(v.Sb, "sample_entity.name", value)
+}
+```
+
+### Special cases
+
+Each entity decides its own key policy. The sections below grow the `sample_entity` resolver; the full real-world adopter to read alongside is dashboards' resolver, [pkg/modules/dashboard/impldashboard/listfilter_resolver.go](/pkg/modules/dashboard/impldashboard/listfilter_resolver.go).
+
+#### Reserved and non-reserved keys
+
+A resolver splits the key space in two:
+
+- Reserved keys are properties the entity defines for all its instances: every `sample_entity` has a `name`, `created_by`, `created_at` and `locked`, so those keys are claimed up front and always mean that property. The list API can advertise the set (dashboards and rules return `reservedKeywords`) so frontend suggestions never go stale.
+- Every other key is non-reserved: things users attach to individual instances as they want. For `sample_entity` those are labels, so `team = infra` matches only the instances a user labeled `team: infra` (built out under [Relation tables](#relation-tables)). Dashboards exposes tags the same way, and an entity is free to back this with any other per-instance construct. An entity with nothing user-attached rejects unknown keys with `v.AddError`, as the resolver above does.
+
+So the first thing `ResolveComparison` does is route the key:
+
+```go
+if allowedOperations, isReserved := ReservedOps[key]; isReserved {
+	return r.resolveReservedKey(v, ctx, operation, key, allowedOperations)
+}
+return r.buildLabelComparison(v, ctx, operation, key)
+```
+
+#### Operator allowlists
+
+Not every operator makes sense on every key, reserved or not (`name BETWEEN ...` does not). Declare what each accepts and check before building. `sample_entity` pairs each reserved key with its allowed operators:
+
+```go
+var ReservedOps = map[string]map[qbtypesv5.FilterOperator]struct{}{
+	"name":       stringSearchOps(),
+	"created_at": numericRangeOps(),
+	"locked":     boolOps(),
+}
+
+if _, allowed := allowedOperations[operation]; !allowed {
+	v.AddError("operator %s is not allowed for key %q", sqlcompiler.OperationName(operation), key)
+	return ""
+}
+```
+
+Non-reserved keys get allowlists too, usually one shared list since they are all shaped alike: a label lookup is a string match, so `created_at > '2025-01-01T00:00:00Z'` is fine but `team > infra` is rejected with an `AddError`. Dashboards' real instances of both are `ReservedOps` and `TagKeyOps` in [pkg/types/dashboardtypes](/pkg/types/dashboardtypes/list_filter.go).
+
+#### JSON columns
+
+Suppose `sample_entity` keeps `name` inside a `data` JSON column instead of a plain column. The resolver then builds the column expression with `v.Formatter.JSONExtractString`, which renders correctly on both dialects, and `name CONTAINS cpu` compiles (SQLite flavor) to:
+
+```sql
+json_extract("sample_entity"."data", '$.name') LIKE ? ESCAPE '\'
+-- args: ["%cpu%"]
+```
+
+Dashboards stores name and description this way inside `dashboard.data`.
+
+#### Relation tables
+
+The label policy from above: say `sample_entity` labels live in `label`/`label_relation` join tables, so a label term becomes an `EXISTS` subquery. Build it on a fresh `sqlbuilder.SelectBuilder` and pass that builder into `BuildStringOperation`, so its arguments thread through the compile. `team = infra` compiles to:
+
+```sql
+EXISTS (SELECT 1 FROM label_relation lr JOIN label l ON l.id = lr.label_id
+	WHERE lr.entity_id = sample_entity.id
+	AND LOWER(l.key) = LOWER(?) AND l.value = ?)
+-- args: ["team", "infra"]
+```
+
+For a negative operator (`team != infra`), build the positive predicate and toggle `NotExists` on the outer builder, so rows without the label at all also match. Dashboards' tags follow this exact pattern over the shared `tag`/`tag_relation` tables.
+
+## How to wire it in?
+
+Give the module a thin `Compile` wrapper that maps the error list onto the module's error code:
+
+```go
+func Compile(query string, formatter sqlstore.SQLFormatter) (*sqlcompiler.Compiled, error) {
+	compiled, errs := sqlcompiler.Compile(query, formatter, sampleEntityFieldResolver{})
+	if len(errs) > 0 {
+		return nil, errors.NewInvalidInputf(sampleentitytypes.ErrCodeSampleEntityListFilterInvalid,
+			"invalid filter query: %s", strings.Join(errs, "; "))
+	}
+	return compiled, nil
+}
+```
+
+Dashboards' real wrapper is [pkg/modules/dashboard/impldashboard/listfilter.go](/pkg/modules/dashboard/impldashboard/listfilter.go).
+
+The store then appends `compiled.SQL` with `compiled.Args` to its list query when `!compiled.IsEmpty()`.
+
+## Caveats
+
+- This compiler is for the relational store only. Telemetry filters are a different pipeline; they stay on querybuilder's ClickHouse visitor.
+- A `key REGEXP value` term parses, but no predicate builder implements it: `BuildStringOperation` rejects it with an error, since SQLite has no portable `REGEXP` (Postgres spells it `~`). A resolver may implement it itself for a dialect it controls.
+- `has(...)` function calls and `search(...)` from the telemetry grammar are not implemented; they fall through to `ResolveFreeText` as literal text.
--- a/docs/contributing/go/provider.md
+++ b/docs/contributing/go/provider.md
@@ -17,7 +17,7 @@ For example, the [prometheus](/pkg/prometheus) provider delivers a prometheus en

 - `pkg/prometheus/prometheus.go` - Interface definition
 - `pkg/prometheus/config.go` - Configuration
- `pkg/prometheus/clickhouseprometheus/provider.go` - Clickhouse-powered implementation
+- `pkg/prometheus/clickhouseprometheusv2/provider.go` - Clickhouse-powered implementation
 - `pkg/prometheus/prometheustest/provider.go` - Mock implementation

 ## How to wire it up?
--- a/docs/contributing/go/readme.md
+++ b/docs/contributing/go/readme.md
@@ -21,4 +21,5 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
+- [DSL Filtering to SQL](dslfilteringtosql.md) - Compiling the list filter DSL to relational-store WHERE clauses
 - [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`
--- a/docs/contributing/prometheus.md
+++ b/docs/contributing/prometheus.md
@@ -9,15 +9,16 @@ change breaks an invariant, flag it and discuss it first.

 ---

-## Why a second provider
+## Why the provider looks like this

-The v1 provider (`pkg/prometheus/clickhouseprometheus`) serves the promql
-engine through the remote-read protobuf adapter. It fetches every raw sample
-of a query's union window. It serializes all of them and gives them to the
-engine. The cost follows the ingested data, not the question. This is how a
-dashboard of PromQL panels can take an instance down.
+The removed v1 provider served the promql engine through the remote-read
+protobuf adapter. It fetched every raw sample of a query's union window,
+serialized all of them, and gave them to the engine. The cost followed the
+ingested data, not the question. This is how a dashboard of PromQL panels
+could take an instance down. v2 replaced it after a byte-level parity
+rollout, and v1 was then deleted.

-In v2, each query runs in one of two ways. The classifier decides per query:
+Each query runs in one of two ways. The classifier decides per query:

 - **Transpiled**: ClickHouse evaluates the query. Only final (or near-final)
  per-group grid arrays come back. The statements use the
@@ -30,7 +31,7 @@ In v2, each query runs in one of two ways. The classifier decides per query:
 lost user. A construct that cannot reproduce engine semantics exactly falls
 back. It does not approximate.** The conformance suite
 (`tests/integration/tests/promqlconformance/`) replays Prometheus' own test
-corpus against both providers. It is the arbiter. The classification golden
+corpus against the provider. It is the arbiter. The classification golden
 (`testdata/classification_golden.json`) freezes the route of each corpus
 expression. The rest of this document is the PromQL-to-SQL story. That
 mapping is where correctness is won or lost.
@@ -263,7 +264,8 @@ per-thread partials scaled memory with the thread count. The slide then
 combines each slot's at-most-W bucket partials by direct aggregation
 (`arraySum(arraySlice(...))`). Window sums are added the way the engine adds
 them. There is no prefix-sum differencing: its large-minus-large
-cancellation would drift past the shadow tolerance on counter-sized values.
+cancellation would drift past the conformance tolerance on counter-sized
+values.
 This is correct per slot because the bucket union is the exact window
 multiset, and avg/min/max/sum/count are order-insensitive on a multiset
 (sum/avg up to summation order; see the float caveat above). A slot with
@@ -333,7 +335,7 @@ can carry them.
 ## The engine path

 Queries that do not transpile run in the stock engine over this package's
-`storage.Querier`. This is still not the v1 path. Samples are fetched per
+`storage.Querier`. Samples are fetched per
 selector with the engine's per-selector hints, not the query-wide union
 window. So `foo / foo offset 1d` reads two narrow windows, not the widest
 one twice. Instant selectors of subquery-free queries fetch only the last
@@ -367,9 +369,9 @@ same predicates as a shard-local semi-join, not a GLOBAL broadcast of the
 matched set. The temporality filter on every samples statement is a
 semantic no-op: the matched fingerprints already come from those
 temporalities. It engages the leading samples primary-key column.
-Delta-temporality series stay invisible to PromQL here, exactly as in v1.
-The rollout gate is parity with v1. To make Delta visible is its own change
-with its own semantics to design. A Delta stream fed to `rate()`
+Delta-temporality series stay invisible to PromQL here, as they were before
+v2. To make Delta visible is its own change with its own semantics to
+design. A Delta stream fed to `rate()`
 as-if-cumulative would be wrong, not just new.

 ## Observability
--- a/ee/query-service/rules/manager_test.go
+++ b/ee/query-service/rules/manager_test.go
@@ -160,7 +160,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 			triggeredTestAlerts := []map[*alertmanagertypes.PostableAlert][]string{}

 			// Variable to store promProvider for cleanup
-			var promProvider *prometheustest.Provider
+			var promProvider prometheus.Prometheus

 			// Create manager using test factory with hooks
 			mgr := rules.NewTestManager(t, &rules.TestManagerOptions{
@@ -185,76 +185,29 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 				TelemetryStoreHook: func(store telemetrystore.TelemetryStore) {
 					mockStore := store.(*telemetrystoretest.Provider)

-					// Set up Prometheus-specific mock data
-					// Fingerprint columns for Prometheus queries
-					fingerprintCols := []cmock.ColumnType{
-						{Name: "fingerprint", Type: "UInt64"},
-						{Name: "any(labels)", Type: "String"},
-					}
-
-					// Samples columns for Prometheus queries
-					samplesCols := []cmock.ColumnType{
-						{Name: "metric_name", Type: "String"},
-						{Name: "fingerprint", Type: "UInt64"},
-						{Name: "unix_milli", Type: "Int64"},
-						{Name: "value", Type: "Float64"},
-						{Name: "flags", Type: "UInt32"},
-					}
-
-					// Calculate query time range similar to Prometheus rule tests
-					// TestNotification uses time.Now().UTC() for evaluation
-					// We calculate the query window based on current time to match what the actual evaluation will use
+					// Grid the TestNotification eval computes over (see
+					// Timestamps on base_rule); nil args match any window.
 					evalTime := baseTime
 					evalWindowMs := int64(5 * 60 * 1000) // 5 minutes in ms
-					evalTimeMs := evalTime.UnixMilli()
-					queryStart := ((evalTimeMs-2*evalWindowMs)/60000)*60000 + 1 // truncate to minute + 1ms
-					queryEnd := (evalTimeMs / 60000) * 60000                    // truncate to minute
+					gridEnd := (evalTime.UnixMilli() / 60000) * 60000
+					gridStart := gridEnd - evalWindowMs

-					// Create fingerprint data
-					fingerprint := uint64(12345)
-					labelsJSON := `{"__name__":"test_metric"}`
-					fingerprintData := [][]interface{}{
-						{fingerprint, labelsJSON},
-					}
-					fingerprintRows := cmock.NewRows(fingerprintCols, fingerprintData)
-
-					// Create samples data from test case values, calculating timestamps relative to baseTime
-					validSamplesData := make([][]interface{}, 0)
+					tsList := make([]int64, 0, len(tc.Values))
+					vList := make([]float64, 0, len(tc.Values))
 					for _, v := range tc.Values {
 						// Skip NaN and Inf values in the samples data
 						if math.IsNaN(v.Value) || math.IsInf(v.Value, 0) {
 							continue
 						}
-						// Calculate timestamp relative to baseTime
-						sampleTimestamp := baseTime.Add(v.Offset).UnixMilli()
-						validSamplesData = append(validSamplesData, []interface{}{
-							"test_metric",
-							fingerprint,
-							sampleTimestamp,
-							v.Value,
-							uint32(0), // flags - 0 means normal value
-						})
+						tsList = append(tsList, baseTime.Add(v.Offset).UnixMilli())
+						vList = append(vList, v.Value)
 					}
-					samplesRows := cmock.NewRows(samplesCols, validSamplesData)
+					grid := prometheustest.LastSampleGrid(tsList, vList, gridStart, gridEnd, 60_000, 300_000)

 					mock := mockStore.Mock()
-
-					// Mock the fingerprint query (for Prometheus label matching)
-					// args: $1=metric_name (the __name__ matcher maps onto the column)
-					mock.ExpectQuery("SELECT fingerprint, any").
-						WithArgs("test_metric").
-						WillReturnRows(fingerprintRows)
-
-					// Mock the samples query (for Prometheus metric data)
-					// args: metric_name IN (discovered names), subquery metric_name, start, end
-					mock.ExpectQuery("SELECT metric_name, fingerprint, unix_milli").
-						WithArgs(
-							"test_metric",
-							"test_metric",
-							queryStart,
-							queryEnd,
-						).
-						WillReturnRows(samplesRows)
+					mock.ExpectQuery("SELECT gkey").
+						WithArgs("test_metric", nil, nil, "test_metric", nil, nil).
+						WillReturnRows(cmock.NewRows(prometheustest.GridCols, [][]any{{`[["__name__","test_metric"]]`, grid}}))

 					// Create Prometheus provider for this test
 					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
@@ -289,7 +242,6 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 				assert.Empty(t, triggeredTestAlerts)
 			}

-			promProvider.Close()
 		})
 	}
 }
--- 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/story-shots-caption.mjs
+++ b/frontend/scripts/story-shots-caption.mjs
@@ -15,6 +15,8 @@ export const CONFIG_KEYS = [
 	'motion',
 	'settle',
 	'ignore',
+	'highlight',
+	'crop',
 ];

 let tools;
--- a/frontend/scripts/story-shots-diff.mjs
+++ b/frontend/scripts/story-shots-diff.mjs
@@ -1,8 +1,7 @@
 #!/usr/bin/env node
-import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { mkdir, readdir, readFile, rm, writeFile } from 'node:fs/promises';
 import { parseArgs } from 'node:util';
 import path from 'node:path';
-import os from 'node:os';

 import {
 	bodyFont,
@@ -18,7 +17,8 @@ import {

 /**
 * Pairs the PNGs of two story-shots.mjs runs by relative path and reports what
- * moved, per pair, largest first.
+ * moved, per pair, largest first. A shot only one run has is reported too,
+ * labelled with the side it is missing from and counted as changed in full.
 *
 * The comparison is Chromatic's: a pixel counts as changed when its YIQ
 * distance from the baseline pixel is over `threshold` of the largest distance
@@ -55,7 +55,8 @@ if (opts.help || !baseDir || !afterDir || !MODES.has(opts.mode)) {
  --tint <#rrggbb>       override the mode's highlight colour
  --no-caption           do not stamp the story and the run settings on top

-Prints "<changed pixels>  <relative path>", largest first. Needs ImageMagick.`);
+Prints "<changed pixels>  <relative path>", largest first; a shot only one run
+has is printed as "(missing previous)" or "(missing current)". Needs ImageMagick.`);
 	process.exit(opts.help ? 0 : 1);
 }

@@ -325,6 +326,11 @@ const shotOf = (run, rel) =>

 const captionOf = (run, rel) => shotOf(run, rel)?.caption ?? 0;

+/** What the shot was shot in, falling back to the directory it sits in. */
+const themeOf = (rel) =>
+	(shotOf(afterRun, rel) ?? shotOf(baseRun, rel))?.theme ??
+	rel.split(path.sep)[0];
+
 /** ImageMagick's inline crop, so a tile shows the shot without its caption. */
 const withoutCaption = (file, { width, height }, top) =>
 	top > 0 ? `${file}[${width}x${height}+0+${top}]` : file;
@@ -369,20 +375,156 @@ const pngs = async (dir, prefix = '') => {
 const results = [];
 await mkdir(outDir, { recursive: true });

-for (const rel of (await pngs(baseDir)).sort()) {
+/** The half-built tiles, under the output directory so nothing is left elsewhere. */
+const scratch = Object.fromEntries(
+	['body', 'diff', 'shot', 'missing'].map((name) => [
+		name,
+		path.join(outDir, `.story-shots-${process.pid}-${name}.png`),
+	]),
+);
+
+/** One labelled tile of a parallel montage. */
+const tile = (label, file, background) => [
+	'(',
+	`label:${literal(label)}`,
+	file,
+	'-gravity',
+	'center',
+	'-append',
+	'-bordercolor',
+	background,
+	'-border',
+	'12',
+	')',
+];
+
+/** The tiles side by side under one caption. */
+const montage = ({
+	tiles,
+	width,
+	background,
+	foreground,
+	caption,
+	target,
+	theme,
+}) => {
+	magick([
+		'-background',
+		background,
+		'-fill',
+		foreground,
+		...bodyFont(),
+		'-pointsize',
+		// The tiles end up side by side, so they are read at the montage's width.
+		String(Math.round(pointsize(width * 3) * 0.62)),
+		...tiles.flat(),
+		'-gravity',
+		'north',
+		'+append',
+		caption.length ? scratch.body : target,
+	]);
+	if (caption.length) {
+		stamp({ lines: caption, from: scratch.body, to: target, theme });
+	}
+};
+
+/**
+ * A tile standing in for a shot the run does not have, sized like the one it
+ * does. The gutter's colours are the theme's own inverted, so they go back the
+ * other way here and the tile reads as a shot rather than as a hole.
+ */
+const placeholder = (
+	file,
+	{ width, height },
+	text,
+	{ background, foreground },
+) =>
+	magick([
+		'-size',
+		`${width}x${height}`,
+		'-background',
+		foreground,
+		'-fill',
+		background,
+		'-gravity',
+		'center',
+		...bodyFont(),
+		'-pointsize',
+		String(pointsize(width * 3)),
+		`label:${literal(text)}`,
+		file,
+	]);
+
+const [baseFiles, afterFiles] = await Promise.all([
+	pngs(baseDir),
+	pngs(afterDir),
+]);
+const inBase = new Set(baseFiles);
+const inAfter = new Set(afterFiles);
+
+for (const rel of [...new Set([...baseFiles, ...afterFiles])].sort((a, b) =>
+	a.localeCompare(b),
+)) {
 	const afterFile = path.join(afterDir, rel);
-	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
-	let after;
-	try {
-		after = readRgba(afterFile, captionOf(afterRun, rel));
-	} catch {
-		console.error(`missing in after: ${rel}`);
+	const target = path.join(outDir, rel);
+	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
+
+	// A story added, removed or renamed since the baseline has nothing to
+	// compare against, so the side that does have it is written out under the
+	// label of the side that does not, and every one of its pixels counts.
+	if (!inBase.has(rel) || !inAfter.has(rel)) {
+		const gone = inAfter.has(rel) ? 'previous' : 'current';
+		const held = gone === 'previous' ? 'current' : 'previous';
+		const run = gone === 'previous' ? afterRun : baseRun;
+		const image = readRgba(
+			gone === 'previous' ? afterFile : path.join(baseDir, rel),
+			captionOf(run, rel),
+		);
+		const theme = themeOf(rel);
+		const colors = palette(theme);
+		const caption = captionLines(rel, [`missing ${gone}`]);
+
+		if (opts.mode.endsWith('-parallel')) {
+			// The montage keeps its three tiles: the run that has the shot shows it,
+			// and the run that does not, like the diff, says so in its place. There
+			// is nothing to compare, so nothing is tinted.
+			await writeRgba(image, scratch.shot);
+			placeholder(scratch.missing, image, `missing ${gone}`, colors);
+
+			const sides = {
+				[held]: tile(sideLabel(held, run), scratch.shot, colors.background),
+				[gone]: tile(
+					sideLabel(gone, gone === 'previous' ? baseRun : afterRun),
+					scratch.missing,
+					colors.background,
+				),
+			};
+			montage({
+				tiles: [
+					sides.previous,
+					sides.current,
+					tile('diff', scratch.missing, colors.background),
+				],
+				width: image.width,
+				...colors,
+				caption,
+				target,
+				theme,
+			});
+		} else {
+			await writeRgba(image, caption.length ? scratch.body : target);
+			if (caption.length) {
+				stamp({ lines: caption, from: scratch.body, to: target, theme });
+			}
+		}
+
+		results.push([image.width * image.height, rel, `missing ${gone}`]);
 		continue;
 	}

-	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
+	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
+	const after = readRgba(afterFile, captionOf(afterRun, rel));
 	const diff = diffPair(base, after, opts.mode);
-	const target = path.join(outDir, rel);
 	const parallel = opts.mode.endsWith('-parallel');
 	// With no tiles to label, a run's own settings go in the caption instead.
 	const caption = captionLines(
@@ -391,70 +533,54 @@ for (const rel of (await pngs(baseDir)).sort()) {
 			? []
 			: [sideLabel('previous', baseRun), sideLabel('current', afterRun)],
 	);
-	const diffFile = path.join(os.tmpdir(), `story-shots-${process.pid}.png`);
-	const body = path.join(os.tmpdir(), `story-shots-${process.pid}-body.png`);

 	// The gutter is the opposite of the theme's own background, so the tiles and
 	// the caption keep an edge instead of bleeding into it.
-	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
-	const theme = shot?.theme ?? rel.split(path.sep)[0];
+	const theme = themeOf(rel);
 	const { background, foreground } = palette(theme);

 	if (parallel) {
-		await writeRgba(diff, diffFile);
-		const tile = (label, file) => [
-			'(',
-			`label:${literal(label)}`,
-			file,
-			'-gravity',
-			'center',
-			'-append',
-			'-bordercolor',
+		await writeRgba(diff, scratch.diff);
+		montage({
+			tiles: [
+				tile(
+					sideLabel('previous', baseRun),
+					withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
+					background,
+				),
+				tile(
+					sideLabel('current', afterRun),
+					withoutCaption(afterFile, after, captionOf(afterRun, rel)),
+					background,
+				),
+				tile('diff', scratch.diff, background),
+			],
+			width: after.width,
 			background,
-			'-border',
-			'12',
-			')',
-		];
-		magick([
-			'-background',
-			background,
-			'-fill',
 			foreground,
-			...bodyFont(),
-			'-pointsize',
-			// The tiles end up side by side, so they are read at the montage's width.
-			String(Math.round(pointsize(after.width * 3) * 0.62)),
-			...tile(
-				sideLabel('previous', baseRun),
-				withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
-			),
-			...tile(
-				sideLabel('current', afterRun),
-				withoutCaption(afterFile, after, captionOf(afterRun, rel)),
-			),
-			...tile('diff', diffFile),
-			'-gravity',
-			'north',
-			'+append',
-			caption.length ? body : target,
-		]);
-		if (caption.length) {
-			stamp({ lines: caption, from: body, to: target, theme });
-		}
+			caption,
+			target,
+			theme,
+		});
 	} else {
-		await writeRgba(diff, caption.length ? body : target);
+		await writeRgba(diff, caption.length ? scratch.body : target);
 		if (caption.length) {
-			stamp({ lines: caption, from: body, to: target, theme });
+			stamp({ lines: caption, from: scratch.body, to: target, theme });
 		}
 	}

 	results.push([diff.changed, rel]);
 }

+await Promise.all(
+	Object.values(scratch).map((file) => rm(file, { force: true })),
+);
+
 results
 	.sort((a, b) => b[0] - a[0])
-	.forEach(([changed, rel]) =>
-		console.log(`${String(changed).padStart(10)}  ${rel}`),
-	);
+	.forEach(([changed, rel, note]) => {
+		const suffix = note ? `  (${note})` : '';
+		console.log(`${String(changed).padStart(10)}  ${rel}${suffix}`);
+	});

 console.error(`diffs in ${outDir}`);
--- a/frontend/scripts/story-shots.mjs
+++ b/frontend/scripts/story-shots.mjs
@@ -1,15 +1,19 @@
 #!/usr/bin/env node
 import { spawnSync } from 'node:child_process';
-import { mkdir, rename, writeFile } from 'node:fs/promises';
+import { renameSync, rmSync } from 'node:fs';
+import { mkdir, writeFile } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { parseArgs } from 'node:util';
 import { pathToFileURL } from 'node:url';
 import path from 'node:path';
-import os from 'node:os';

 import {
+	bodyFont,
 	CONFIG_KEYS,
 	hasMagick,
+	literal,
+	magick,
+	palette,
 	settingsLine,
 	stamp,
 } from './story-shots-caption.mjs';
@@ -39,6 +43,8 @@ const { values: opts, positionals } = parseArgs({
 		clock: { type: 'string', default: FROZEN_CLOCK },
 		motion: { type: 'boolean', default: false },
 		ignore: { type: 'string', multiple: true, default: [] },
+		highlight: { type: 'string', multiple: true, default: [] },
+		crop: { type: 'string', multiple: true, default: [] },
 		flat: { type: 'boolean', default: false },
 		'no-caption': { type: 'boolean', default: false },
 		list: { type: 'boolean', default: false },
@@ -72,6 +78,10 @@ if (opts.help || (!outDir && !opts.list)) {
  --clock <iso|live>  wall clock the page reads (default ${FROZEN_CLOCK})
  --motion            keep animations and transitions running
  --ignore <selector> hide matching elements, on top of [data-shot-ignore]
+  --highlight <selector>
+                      also shoot <id>--highlight.png, every match ringed in red
+  --crop <selector>   also write one <id>--<n>.png per match under <theme>/crops,
+                      and montage them into <theme>/crops.png
  --flat              write <out>/<id>.png instead of <out>/<theme>/<id>.png
  --no-caption        do not stamp the story and the run settings on the shot
  --list              print the matched stories and exit
@@ -135,10 +145,17 @@ if (!stories.length) {
 	process.exit(1);
 }

-const ignoreSelectors = opts.ignore
-	.flatMap((value) => value.split(','))
-	.map((value) => value.trim())
-	.filter(Boolean);
+/** A repeatable, comma-separated flag read as one CSS selector list. */
+const selectorList = (values) =>
+	values
+		.flatMap((value) => value.split(','))
+		.map((value) => value.trim())
+		.filter(Boolean)
+		.join(', ');
+
+const ignoreSelectors = selectorList(opts.ignore);
+const highlightSelector = selectorList(opts.highlight);
+const cropSelector = selectorList(opts.crop);

 if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
 	console.error(`--clock: not a date: ${opts.clock}`);
@@ -152,13 +169,12 @@ if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
 * their bottom - is done by the preview itself, so a Chromatic build and a shot
 * from here see the same page.
 */
-const ignoreCss = (
-	ignore,
-) => `[data-shot-ignore], [data-chromatic='ignore']${ignore
-	.map((selector) => `, ${selector}`)
-	.join('')} {
+const ignoreCss = (ignore) => {
+	const extra = ignore ? `, ${ignore}` : '';
+	return `[data-shot-ignore], [data-chromatic='ignore']${extra} {
 	visibility: hidden !important;
 }`;
+};

 /**
 * Playwright is not a frontend dependency: it lives in `tests/e2e`, or globally,
@@ -248,7 +264,9 @@ const runConfig = {
 	grow: opts.grow,
 	motion: opts.motion ? 'live' : 'still',
 	settle: opts.settle,
-	ignore: ignoreSelectors.join(', '),
+	ignore: ignoreSelectors,
+	highlight: highlightSelector,
+	crop: cropSelector,
 };

 const captioning = !opts['no-caption'] && hasMagick();
@@ -261,6 +279,8 @@ const configLine = settingsLine(runConfig, CONFIG_KEYS);

 for (const theme of themes.length ? themes : [null]) {
 	const dir = opts.flat ? outDir : path.join(outDir, theme ?? 'default');
+	const cropDir = path.join(dir, 'crops');
+	const crops = [];
 	await mkdir(dir, { recursive: true });
 	if (theme) {
 		console.log(`\n[${theme}]`);
@@ -295,6 +315,9 @@ for (const theme of themes.length ? themes : [null]) {
 		// the viewport, kept only to flag the story in the log.
 		let chasing = 0;

+		// What the story's line in the log says beyond ok/busy.
+		const notes = [];
+
 		const url = new URL(`${base}/iframe.html`);
 		url.searchParams.set('viewMode', 'story');
 		url.searchParams.set('id', story.id);
@@ -447,47 +470,160 @@ for (const theme of themes.length ? themes : [null]) {
 				shot = next;
 			}

-			const file = path.join(dir, `${story.id}.png`);
-			await writeFile(file, shot);
+			/**
+			 * The band goes on the shot itself so a single screenshot says what it
+			 * is, and its height is returned so a diff can take it back off. The
+			 * temporary is written beside the shot rather than in the system temp
+			 * directory: those are often separate filesystems, and a rename across
+			 * one fails with EXDEV.
+			 */
+			const caption = (target, lines) => {
+				if (!captioning) {
+					return 0;
+				}

-			// The band goes on the shot itself so a single screenshot says what it
-			// is, and its height is recorded so a diff can take it back off.
-			let caption = 0;
-			if (captioning) {
 				const temporary = path.join(
-					os.tmpdir(),
-					`story-shots-caption-${process.pid}.png`,
+					path.dirname(target),
+					`.caption-${process.pid}.png`,
 				);
-				caption = stamp({
+				const rows = stamp({
 					lines: [
 						`${story.title}/${story.name}`,
 						[story.id, theme ?? 'default', stable ? '' : '(busy)']
 							.filter(Boolean)
 							.join('  '),
-						configLine,
+						...lines,
 					].filter(Boolean),
-					from: file,
+					from: target,
 					to: temporary,
 					theme: theme ?? 'dark',
 				});
-				await rename(temporary, file);
+				renameSync(temporary, target);
+				return rows;
+			};
+
+			const file = path.join(dir, `${story.id}.png`);
+			await writeFile(file, shot);
+
+			const record = (relative, caption) =>
+				shots.push({
+					file: path.posix.join(opts.flat ? '' : (theme ?? 'default'), relative),
+					id: story.id,
+					title: story.title,
+					name: story.name,
+					theme: theme ?? 'default',
+					status: stable ? 'ok' : 'busy',
+					caption,
+				});
+
+			record(`${story.id}.png`, caption(file, [configLine]));
+
+			// The crops are taken before anything is drawn over the page, so a
+			// component's own shot carries no ring and no label: the montage at the
+			// end of the theme is what names them.
+			if (cropSelector) {
+				await mkdir(cropDir, { recursive: true });
+
+				// A page that sizes itself in `vh` was shot back at `--height` with
+				// its own scrollbar, and what is below the fold there is laid out but
+				// never painted: cropping it gives a black rectangle. The crops alone
+				// are taken at the height the rounds had reached, which is where the
+				// page does paint.
+				if (chasing) {
+					await page.setViewportSize({
+						width: Number(opts.width),
+						height: chasing,
+					});
+					await page.waitForTimeout(Number(opts.settle));
+				}
+
+				const matches = page.locator(cropSelector);
+				let kept = 0;
+				for (let index = 0; index < (await matches.count()); index += 1) {
+					const element = matches.nth(index);
+					// A group whose children are all conditional renders as a 0x0 box.
+					// It has no counterpart on screen, so there is nothing to crop.
+					const box = await element.boundingBox();
+					if (!box || box.width < 1 || box.height < 1) {
+						continue;
+					}
+
+					kept += 1;
+					const relative = `${story.id}--${kept}.png`;
+					// The scroll that brings an element into view needs a frame before
+					// the crop, or the region comes back unpainted.
+					await element.scrollIntoViewIfNeeded({ timeout: 15_000 });
+					await page.waitForTimeout(250);
+					await element.screenshot({
+						path: path.join(cropDir, relative),
+						timeout: 15_000,
+					});
+					crops.push({
+						file: path.join(cropDir, relative),
+						label: `${story.title}/${story.name}  #${kept}`,
+					});
+					record(path.posix.join('crops', relative), 0);
+				}
+				notes.push(`${kept} cropped`);
+
+				if (chasing) {
+					await page.setViewportSize({
+						width: Number(opts.width),
+						height: Number(opts.height),
+					});
+					await page.waitForTimeout(Number(opts.settle));
+				}
 			}

-			shots.push({
-				file: path.posix.join(
-					opts.flat ? '' : (theme ?? 'default'),
-					`${story.id}.png`,
-				),
-				id: story.id,
-				title: story.title,
-				name: story.name,
-				theme: theme ?? 'default',
-				status: stable ? 'ok' : 'busy',
-				caption,
-			});
+			if (highlightSelector) {
+				const ringed = await page.evaluate(
+					([selector, padding]) => {
+						const layer = document.createElement('div');
+						// The shot is viewport-sized, so the rings are placed in viewport
+						// coordinates and survive a page that stayed scrollable.
+						layer.style.cssText =
+							'position:fixed;inset:0;pointer-events:none;z-index:2147483647';
+						let drawn = 0;
+						for (const element of document.querySelectorAll(selector)) {
+							const box = element.getBoundingClientRect();
+							if (box.width < 1 || box.height < 1) {
+								continue;
+							}
+
+							drawn += 1;
+							const ring = document.createElement('div');
+							ring.style.cssText = `position:fixed;box-sizing:border-box;border:3px solid #ff003a;border-radius:4px;left:${
+								box.left - padding
+							}px;top:${box.top - padding}px;width:${
+								box.width + padding * 2
+							}px;height:${box.height + padding * 2}px`;
+							layer.append(ring);
+						}
+						document.documentElement.append(layer);
+						window.__storyShotsHighlight = layer;
+						return drawn;
+					},
+					[highlightSelector, 6],
+				);
+
+				const highlighted = path.join(dir, `${story.id}--highlight.png`);
+				await writeFile(highlighted, await page.screenshot());
+				record(
+					`${story.id}--highlight.png`,
+					caption(highlighted, [`${ringed} highlighted`, configLine]),
+				);
+				notes.push(`${ringed} highlighted`);
+				await page.evaluate(() => {
+					window.__storyShotsHighlight?.remove();
+					delete window.__storyShotsHighlight;
+				});
+			}
+			if (chasing) {
+				notes.push(`viewport-sized content, stopped chasing ${chasing}px`);
+			}
 			console.log(
 				`  ${stable ? 'ok  ' : 'busy'} ${story.id}${
-					chasing ? ` (viewport-sized content, stopped chasing ${chasing}px)` : ''
+					notes.length ? ` (${notes.join(', ')})` : ''
 				}`,
 			);
 		} catch (error) {
@@ -497,6 +633,52 @@ for (const theme of themes.length ? themes : [null]) {
 			await context.close();
 		}
 	}
+
+	// One image of every crop the theme produced, labelled with the story it came
+	// from. A component that appears on eight pages is a survey rather than eight
+	// screenshots to open one after another.
+	if (crops.length && captioning) {
+		const sheet = path.join(dir, 'crops.png');
+		const { background, foreground } = palette(theme ?? 'dark');
+
+		// `montage -label` sizes every tile to the widest *image*, so a label
+		// longer than its crop runs under the next one. Each crop is composed with
+		// its own label first, which sizes the tile to whichever of the two is
+		// wider, and the sheet is then a montage of finished tiles.
+		const tiles = crops.map(({ file, label }, index) => {
+			const tile = path.join(cropDir, `.tile-${index}.png`);
+			magick([
+				'-background',
+				background,
+				'-fill',
+				foreground,
+				...bodyFont(),
+				'-pointsize',
+				'16',
+				file,
+				`label:${literal(label)}`,
+				'-gravity',
+				'center',
+				'-append',
+				tile,
+			]);
+			return tile;
+		});
+
+		magick([
+			'montage',
+			'-background',
+			background,
+			'-tile',
+			'2x',
+			'-geometry',
+			'+16+16',
+			...tiles,
+			sheet,
+		]);
+		tiles.forEach((tile) => rmSync(tile, { force: true }));
+		console.log(`  ${crops.length} crops -> ${sheet}`);
+	}
 }

 await browser.close();
--- 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
@@ -10884,78 +11109,6 @@ export interface SpantypesGettableTraceAggregationsDTO {
 	aggregations: SpantypesSpanAggregationResultDTO[];
 }

-export interface SpantypesTraceAITokensDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	cacheRead?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	cacheWrite?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	input?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	output?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	reasoning?: number;
-}
-
-export interface SpantypesTraceAISummaryDTO {
-	tokens?: SpantypesTraceAITokensDTO;
-	/**
-	 * @type number,null
-	 */
-	totalCost?: number | null;
-}
-
-export interface SpantypesGettableTraceSummaryDTO {
-	ai?: SpantypesTraceAISummaryDTO;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	endTimestampMillis?: number;
-	/**
-	 * @type boolean
-	 */
-	hasMissingSpans?: boolean;
-	/**
-	 * @type string
-	 */
-	rootServiceEntryPoint?: string;
-	/**
-	 * @type string
-	 */
-	rootServiceName?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	startTimestampMillis?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalErrorSpansCount?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalSpansCount?: number;
-}
-
 export interface SpantypesOtelSpanRefDTO {
 	/**
 	 * @type string
@@ -12667,17 +12820,6 @@ export type GetTraceAggregations200 = {
 	status: string;
 };

-export type GetTraceSummaryPathParameters = {
-	traceID: string;
-};
-export type GetTraceSummary200 = {
-	data: SpantypesGettableTraceSummaryDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListUserPreferences200 = {
 	/**
 	 * @type array
@@ -13477,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/generated/services/tracedetail/index.ts
+++ b/frontend/src/api/generated/services/tracedetail/index.ts
@@ -4,17 +4,11 @@
 * * regenerate with 'pnpm generate:api'
 * SigNoz
 */
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import type {
-	InvalidateOptions,
 	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
 } from 'react-query';

 import type {
@@ -22,8 +16,6 @@ import type {
 	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
-	GetTraceSummary200,
-	GetTraceSummaryPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
@@ -35,26 +27,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';

-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
 * Computes span aggregations grouped by requested field.
 * @summary Get aggregations for a trace
@@ -155,108 +127,6 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
-/**
- * Returns the trace-level fields of the waterfall (time range, root, span counts, missing spans) and, when the trace has gen_ai spans, its token and cost totals. Computed in one aggregate query.
- * @summary Get summary for a trace
- */
-export const getTraceSummary = (
-	{ traceID }: GetTraceSummaryPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetTraceSummary200>({
-		url: `/api/v1/traces/${traceID}/summary`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetTraceSummaryQueryKey = ({
-	traceID,
-}: GetTraceSummaryPathParameters) => {
-	return [`/api/v1/traces/${traceID}/summary`] as const;
-};
-
-export const getGetTraceSummaryQueryOptions = <
-	TData = Awaited<ReturnType<typeof getTraceSummary>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ traceID }: GetTraceSummaryPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getTraceSummary>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetTraceSummaryQueryKey({ traceID });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getTraceSummary>>> = ({
-		signal,
-	}) => getTraceSummary({ traceID }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: traceID !== null && traceID !== undefined,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getTraceSummary>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetTraceSummaryQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getTraceSummary>>
->;
-export type GetTraceSummaryQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get summary for a trace
- */
-
-export function useGetTraceSummary<
-	TData = Awaited<ReturnType<typeof getTraceSummary>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ traceID }: GetTraceSummaryPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getTraceSummary>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetTraceSummaryQueryOptions({ traceID }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return withQueryKey(query, queryOptions.queryKey);
-}
-
-/**
- * @summary Get summary for a trace
- */
-export const invalidateGetTraceSummary = async (
-	queryClient: QueryClient,
-	{ traceID }: GetTraceSummaryPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetTraceSummaryQueryKey({ traceID }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
 * Returns the flamegraph view of spans for a given trace ID.
 * @summary Get flamegraph view for a trace
--- 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/InputWithLabel/InputWithLabel.tsx
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.tsx
@@ -17,6 +17,7 @@ function InputWithLabel({
 	onChange,
 	className,
 	closeIcon,
+	disabled,
 }: {
 	label: string;
 	initialValue?: string | number | null;
@@ -27,6 +28,7 @@ function InputWithLabel({
 	onChange: (value: string) => void;
 	className?: string;
 	closeIcon?: React.ReactNode;
+	disabled?: boolean;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
@@ -53,6 +55,7 @@ function InputWithLabel({
 				type={type}
 				value={inputValue}
 				onChange={handleChange}
+				disabled={disabled}
 				name={label.toLowerCase()}
 				data-testid={`input-${label}`}
 			/>
--- 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/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
@@ -1,11 +1,18 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

+import { QueryBuilderField } from './queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderField,
+} from './queryBuilderFields.utils';
 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import { clearPreviousQuery } from './QueryV2/previousQuery.utils';
 import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
@@ -14,12 +21,18 @@ import TraceOperator from './QueryV2/TraceOperator/TraceOperator';

 import './QueryBuilderV2.styles.scss';

+// Raw rows come from logs or spans; metrics only exist aggregated.
+const RAW_QUERY_SIGNALS = [
+	TelemetrytypesSignalDTO.logs,
+	TelemetrytypesSignalDTO.traces,
+];
+
 export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	config,
 	panelType: newPanelType,
-	filterConfigs = {},
-	queryComponents,
-	isListViewPanel = false,
+	fieldsConfig,
+	allowedDataSources,
+	isRawQuery = false,
 	showOnlyWhereClause = false,
 	showTraceOperator = false,
 	version,
@@ -71,55 +84,48 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		};
 	}, []);

-	const isMultiQueryAllowed = useMemo(
-		() => !isListViewPanel || showTraceOperator,
-		[showTraceOperator, isListViewPanel],
+	const resolvedConfig = useMemo(
+		() =>
+			mergeQueryBuilderFieldsConfig(
+				isRawQuery ? RAW_QUERY_FIELDS : undefined,
+				fieldsConfig,
+			),
+		[isRawQuery, fieldsConfig],
 	);

-	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] =
-		useMemo(() => {
-			const config: QueryBuilderProps['filterConfigs'] = {
-				stepInterval: { isHidden: true, isDisabled: true },
-				having: { isHidden: true, isDisabled: true },
-				filters: {
-					customKey: 'body',
-					customOp: OPERATORS.CONTAINS,
-				},
-			};
+	const additionalQueries = useMemo(
+		() =>
+			resolveQueryBuilderField(
+				QueryBuilderField.AdditionalQueries,
+				resolvedConfig,
+			),
+		[resolvedConfig],
+	);

-			return config;
-		}, []);
+	const formula = useMemo(
+		() => resolveQueryBuilderField(QueryBuilderField.Formula, resolvedConfig),
+		[resolvedConfig],
+	);

-	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] =
-		useMemo(() => {
-			const config: QueryBuilderProps['filterConfigs'] = {
-				stepInterval: { isHidden: true, isDisabled: true },
-				having: { isHidden: true, isDisabled: true },
-				limit: { isHidden: true, isDisabled: true },
-				filters: {
-					customKey: 'body',
-					customOp: OPERATORS.CONTAINS,
-				},
-			};
+	const isMultiQueryAllowed = useMemo(
+		() => !additionalQueries.hidden && (!isRawQuery || showTraceOperator),
+		[additionalQueries.hidden, showTraceOperator, isRawQuery],
+	);

-			return config;
-		}, []);
+	const queryDataSources = useMemo(
+		() => allowedDataSources ?? (isRawQuery ? RAW_QUERY_SIGNALS : undefined),
+		[allowedDataSources, isRawQuery],
+	);

-	const queryFilterConfigs = useMemo(() => {
-		if (isListViewPanel) {
-			return currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
-				? listViewTracesFilterConfigs
-				: listViewLogFilterConfigs;
-		}
-
-		return filterConfigs;
-	}, [
-		isListViewPanel,
-		filterConfigs,
-		currentQuery.builder.queryData,
-		listViewLogFilterConfigs,
-		listViewTracesFilterConfigs,
-	]);
+	// What the editor renders. A single-query builder edits the first query alone, so
+	// the query list beside it must not advertise ones there is no way to reach.
+	const renderedQueries = useMemo(
+		() =>
+			isMultiQueryAllowed
+				? currentQuery.builder.queryData
+				: currentQuery.builder.queryData.slice(0, 1),
+		[isMultiQueryAllowed, currentQuery.builder.queryData],
+	);

 	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
 		if (
@@ -145,31 +151,46 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);

-	const shouldShowFooter = useMemo(
-		() =>
-			(!showOnlyWhereClause && !isListViewPanel) ||
-			(currentDataSource === DataSource.TRACES && showTraceOperator),
-		[isListViewPanel, showTraceOperator, showOnlyWhereClause, currentDataSource],
-	);
-
 	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isListViewPanel) || showTraceOperator,
-		[isListViewPanel, showOnlyWhereClause, showTraceOperator],
+		() => (!showOnlyWhereClause && !isRawQuery) || showTraceOperator,
+		[isRawQuery, showOnlyWhereClause, showTraceOperator],
 	);

 	const showFormula = useMemo(() => {
+		if (formula.hidden) {
+			return false;
+		}
+
 		if (currentDataSource === DataSource.TRACES) {
-			return !isListViewPanel;
+			return !isRawQuery;
 		}

 		return true;
-	}, [isListViewPanel, currentDataSource]);
+	}, [formula.hidden, isRawQuery, currentDataSource]);

 	const showAddTraceOperator = useMemo(
 		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);

+	// Nothing left to add means no footer at all, rather than an empty bar under the
+	// last query.
+	const shouldShowFooter = useMemo(
+		() =>
+			(!additionalQueries.hidden || showFormula || showAddTraceOperator) &&
+			((!showOnlyWhereClause && !isRawQuery) ||
+				(currentDataSource === DataSource.TRACES && showTraceOperator)),
+		[
+			additionalQueries.hidden,
+			showFormula,
+			showAddTraceOperator,
+			isRawQuery,
+			showTraceOperator,
+			showOnlyWhereClause,
+			currentDataSource,
+		],
+	);
+
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLDivElement>): void => {
 			const target = e.target as HTMLElement | null;
@@ -199,8 +220,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							key={currentQuery.builder.queryData[0].queryName}
 							index={0}
 							query={currentQuery.builder.queryData[0]}
-							filterConfigs={queryFilterConfigs}
-							queryComponents={queryComponents}
+							fieldsConfig={fieldsConfig}
+							allowedDataSources={queryDataSources}
 							isMultiQueryAllowed={isMultiQueryAllowed}
 							showTraceOperator={showTraceOperator}
 							hasTraceOperator={hasTraceOperator}
@@ -208,7 +229,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							isAvailableToDisable={false}
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
-							isListViewPanel={isListViewPanel}
+							isRawQuery={isRawQuery}
 							signalSource={currentQuery.builder.queryData[0].source as 'meter' | ''}
 							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 							signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -216,14 +237,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							savePreviousQuery={savePreviousQuery}
 						/>
 					) : (
-						currentQuery.builder.queryData.map((query, index) => (
+						renderedQueries.map((query, index) => (
 							<QueryV2
 								ref={containerRef}
 								key={query.queryName}
 								index={index}
 								query={query}
-								filterConfigs={queryFilterConfigs}
-								queryComponents={queryComponents}
+								fieldsConfig={fieldsConfig}
+								allowedDataSources={queryDataSources}
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
@@ -231,7 +252,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
-								isListViewPanel={isListViewPanel}
+								isRawQuery={isRawQuery}
 								signalSource={query.source as 'meter' | ''}
 								onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 								signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -251,14 +272,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({

 									return (
 										<div key={formula.queryName} className="qb-formula">
-											<Formula
-												filterConfigs={filterConfigs}
-												query={query}
-												formula={formula}
-												index={index}
-												isAdditionalFilterEnable={false}
-												isQBV2
-											/>
+											<Formula query={query} formula={formula} index={index} isQBV2 />
 										</div>
 									);
 								})}
@@ -267,8 +281,13 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({

 					{shouldShowFooter && (
 						<QueryFooter
+							showAddQuery={!additionalQueries.hidden}
 							showAddFormula={showFormula}
+							isAddFormulaDisabled={formula.disabled}
+							addFormulaDisabledReason={formula.reason}
 							addNewBuilderQuery={addNewBuilderQuery}
+							isAddQueryDisabled={additionalQueries.disabled}
+							addQueryDisabledReason={additionalQueries.reason}
 							addNewFormula={addNewFormula}
 							addTraceOperator={addTraceOperator}
 							showAddTraceOperator={showAddTraceOperator}
@@ -277,7 +296,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({

 					{hasTraceOperator && (
 						<TraceOperator
-							isListViewPanel={isListViewPanel}
+							isRawQuery={isRawQuery}
+							fieldsConfig={resolvedConfig}
 							traceOperator={traceOperator as IBuilderTraceOperator}
 						/>
 					)}
@@ -285,7 +305,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({

 				{showQueryList && (
 					<div className="query-names-section">
-						{currentQuery.builder.queryData.map((query) => (
+						{renderedQueries.map((query) => (
 							<div key={query.queryName} className="query-name">
 								{query.queryName}
 							</div>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -23,6 +23,11 @@
 		align-items: center;
 		justify-content: center;
 		gap: var(--margin-2);
+
+		&--disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
 	}
 }

--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
+import cx from 'classnames';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -14,6 +15,16 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';

+import {
+	QueryBuilderField,
+	QueryBuilderFieldsConfig,
+} from '../../queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderFields,
+} from '../../queryBuilderFields.utils';
+
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';

@@ -22,34 +33,37 @@ import './QueryAddOns.styles.scss';
 interface AddOn {
 	icon: React.ReactNode;
 	label: string;
-	key: string;
+	key: QueryBuilderField;
 	description?: string;
 	docLink?: string;
 }

-const ADD_ONS_KEYS = {
-	GROUP_BY: 'group_by',
-	HAVING: 'having',
-	ORDER_BY: 'order_by',
-	LIMIT: 'limit',
-	LEGEND_FORMAT: 'legend_format',
-	REDUCE_TO: 'reduce_to',
+/** Fields the add-on bar does not own: each has its own control elsewhere in the query. */
+type NonAddOnField =
+	| QueryBuilderField.Aggregation
+	| QueryBuilderField.StepInterval
+	| QueryBuilderField.Functions
+	| QueryBuilderField.Formula
+	| QueryBuilderField.AdditionalQueries;
+
+// Omit rather than Partial, so a field added to the enum has to be placed on one side.
+const ADD_ONS_KEYS_TO_QUERY_PATH: Omit<
+	Record<QueryBuilderField, string>,
+	NonAddOnField
+> = {
+	[QueryBuilderField.GroupBy]: 'groupBy',
+	[QueryBuilderField.Having]: 'having.expression',
+	[QueryBuilderField.OrderBy]: 'orderBy',
+	[QueryBuilderField.Limit]: 'limit',
+	[QueryBuilderField.Legend]: 'legend',
+	[QueryBuilderField.ReduceTo]: 'reduceTo',
 };

-const ADD_ONS_KEYS_TO_QUERY_PATH = {
-	[ADD_ONS_KEYS.GROUP_BY]: 'groupBy',
-	[ADD_ONS_KEYS.HAVING]: 'having.expression',
-	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
-	[ADD_ONS_KEYS.LIMIT]: 'limit',
-	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
-	[ADD_ONS_KEYS.REDUCE_TO]: 'reduceTo',
-};
-
-const ADD_ONS = [
+const ADD_ONS: AddOn[] = [
 	{
 		icon: <BarChart size={14} />,
 		label: 'Group By',
-		key: ADD_ONS_KEYS.GROUP_BY,
+		key: QueryBuilderField.GroupBy,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
 		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
@@ -57,7 +71,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
-		key: ADD_ONS_KEYS.HAVING,
+		key: QueryBuilderField.Having,
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
@@ -66,7 +80,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
-		key: ADD_ONS_KEYS.ORDER_BY,
+		key: QueryBuilderField.OrderBy,
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
@@ -75,7 +89,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
-		key: ADD_ONS_KEYS.LIMIT,
+		key: QueryBuilderField.Limit,
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
@@ -84,7 +98,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
-		key: ADD_ONS_KEYS.LEGEND_FORMAT,
+		key: QueryBuilderField.Legend,
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
@@ -92,10 +106,10 @@ const ADD_ONS = [
 	},
 ];

-const REDUCE_TO = {
+const REDUCE_TO: AddOn = {
 	icon: <ScrollText size={14} />,
 	label: 'Reduce to',
-	key: ADD_ONS_KEYS.REDUCE_TO,
+	key: QueryBuilderField.ReduceTo,
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
@@ -154,26 +168,26 @@ function TooltipContent({
 function QueryAddOns({
 	query,
 	version,
-	isListViewPanel,
+	isRawQuery,
 	showReduceTo,
 	panelType,
 	index,
+	fieldsConfig,
 	isForTraceOperator = false,
 }: {
 	query: IBuilderQuery;
 	version: string;
-	isListViewPanel: boolean;
+	isRawQuery: boolean;
 	showReduceTo: boolean;
 	panelType: PANEL_TYPES | null;
 	index: number;
+	fieldsConfig?: QueryBuilderFieldsConfig;
 	isForTraceOperator?: boolean;
 }): JSX.Element {
-	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
-
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);

 	const initializedRef = useRef(false);
-	const prevAvailableKeysRef = useRef<Set<string> | null>(null);
+	const prevAvailableKeysRef = useRef<Set<QueryBuilderField> | null>(null);

 	const { handleChangeQueryData } = useQueryOperations({
 		index,
@@ -184,40 +198,62 @@ function QueryAddOns({

 	const { handleSetQueryData } = useQueryBuilder();

-	useEffect(() => {
-		if (isListViewPanel) {
-			setAddOns([]);
+	const supportedAddOns = useMemo((): AddOn[] => {
+		let addOns: AddOn[];

-			setSelectedViews([
-				ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
-			]);
-
-			return;
-		}
-
-		let filteredAddOns: AddOn[];
 		if (panelType === PANEL_TYPES.VALUE) {
-			// Filter out all add-ons except legend format
-			filteredAddOns = ADD_ONS.filter(
-				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
-			);
+			addOns = ADD_ONS.filter((addOn) => addOn.key === QueryBuilderField.Legend);
+		} else if (query.dataSource === DataSource.METRICS) {
+			// Group by for metrics is offered by MetricsAggregateSection instead.
+			addOns = ADD_ONS.filter((addOn) => addOn.key !== QueryBuilderField.GroupBy);
 		} else {
-			filteredAddOns = Object.values(ADD_ONS);
-
-			if (query.dataSource === DataSource.METRICS) {
-				// Filter out group_by for metrics data source (handled in MetricsAggregateSection)
-				filteredAddOns = filteredAddOns.filter(
-					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
-				);
-			}
+			addOns = [...ADD_ONS];
 		}

-		if (showReduceTo) {
-			filteredAddOns = [...filteredAddOns, REDUCE_TO];
-		}
-		setAddOns(filteredAddOns);
+		return showReduceTo ? [...addOns, REDUCE_TO] : addOns;
+	}, [panelType, query.dataSource, showReduceTo]);

-		const availableAddOnKeys = new Set(filteredAddOns.map((a) => a.key));
+	const resolvedFields = useMemo(
+		() =>
+			resolveQueryBuilderFields(
+				supportedAddOns.map((addOn) => addOn.key),
+				mergeQueryBuilderFieldsConfig(
+					isRawQuery ? RAW_QUERY_FIELDS : undefined,
+					fieldsConfig,
+				),
+			),
+		[supportedAddOns, fieldsConfig, isRawQuery],
+	);
+
+	const offeredAddOns = useMemo(
+		() =>
+			supportedAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.hidden),
+		[supportedAddOns, resolvedFields],
+	);
+
+	const pinnedAddOns = useMemo(
+		() => offeredAddOns.filter((addOn) => resolvedFields.get(addOn.key)?.pinned),
+		[offeredAddOns, resolvedFields],
+	);
+
+	const togglableAddOns = useMemo(
+		() => offeredAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.pinned),
+		[offeredAddOns, resolvedFields],
+	);
+
+	const isPinned = useCallback(
+		(key: QueryBuilderField): boolean => Boolean(resolvedFields.get(key)?.pinned),
+		[resolvedFields],
+	);
+
+	const isDisabled = useCallback(
+		(key: QueryBuilderField): boolean =>
+			Boolean(resolvedFields.get(key)?.disabled),
+		[resolvedFields],
+	);
+
+	useEffect(() => {
+		const availableAddOnKeys = new Set(offeredAddOns.map((a) => a.key));
 		const previousKeys = prevAvailableKeysRef.current;
 		const hasAvailabilityItemsChanged =
 			previousKeys !== null &&
@@ -231,27 +267,39 @@ function QueryAddOns({
 			const activeAddOnKeys = new Set(
 				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
 					.filter(([, path]) => hasValue(get(query, path)))
-					.map(([key]) => key),
+					.map(([key]) => key as QueryBuilderField),
 			);

-			// Initial seeding from query values on mount
+			// Initial seeding from query values on mount. A disabled field never opens.
 			setSelectedViews(
-				filteredAddOns.filter(
-					(addOn) =>
-						activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
-				),
+				offeredAddOns.filter((addOn) => {
+					const resolved = resolvedFields.get(addOn.key);
+
+					return (
+						resolved?.pinned ||
+						(activeAddOnKeys.has(addOn.key) && !resolved?.disabled)
+					);
+				}),
 			);
 			return;
 		}

-		setSelectedViews((prev) =>
-			prev.filter((view) =>
-				filteredAddOns.some((addOn) => addOn.key === view.key),
-			),
-		);
-	}, [panelType, isListViewPanel, query, showReduceTo]);
+		setSelectedViews((prev) => {
+			const kept = prev.filter((view) => availableAddOnKeys.has(view.key));
+
+			const reopenedPinned = pinnedAddOns.filter(
+				(addOn) => !kept.some((view) => view.key === addOn.key),
+			);
+
+			return [...kept, ...reopenedPinned];
+		});
+	}, [offeredAddOns, pinnedAddOns, query]);

 	const handleOptionClick = (clickedAddOn: AddOn): void => {
+		if (isDisabled(clickedAddOn.key)) {
+			return;
+		}
+
 		const isAlreadySelected = selectedViews.some(
 			(view) => view.key === clickedAddOn.key,
 		);
@@ -265,7 +313,7 @@ function QueryAddOns({
 			// and existing group-by keys, prefill the legend using all group-by keys.
 			// This keeps existing custom legends intact and only helps seed a sensible default.
 			if (
-				clickedAddOn.key === ADD_ONS_KEYS.LEGEND_FORMAT &&
+				clickedAddOn.key === QueryBuilderField.Legend &&
 				isEmpty(query?.legend) &&
 				Array.isArray(query.groupBy) &&
 				query.groupBy.length > 0
@@ -310,9 +358,16 @@ function QueryAddOns({
 		[handleSetQueryData, index, query],
 	);

-	const handleRemoveView = useCallback((key: string): void => {
-		setSelectedViews((prev) => prev.filter((view) => view.key !== key));
-	}, []);
+	const handleRemoveView = useCallback(
+		(key: QueryBuilderField): void => {
+			if (isPinned(key)) {
+				return;
+			}
+
+			setSelectedViews((prev) => prev.filter((view) => view.key !== key));
+		},
+		[isPinned],
+	);

 	const handleChangeQueryLegend = useCallback(
 		(value: string) => {
@@ -341,7 +396,7 @@ function QueryAddOns({
 		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
-					{selectedViews.find((view) => view.key === 'group_by') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.GroupBy) && (
 						<div className="add-on-content" data-testid="group-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -369,15 +424,17 @@ function QueryAddOns({
 										onChange={handleChangeGroupByKeys}
 									/>
 								</div>
-								<Button
-									className="close-btn periscope-btn ghost"
-									icon={<ChevronUp size={16} />}
-									onClick={(): void => handleRemoveView('group_by')}
-								/>
+								{!isPinned(QueryBuilderField.GroupBy) && (
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
+										onClick={(): void => handleRemoveView(QueryBuilderField.GroupBy)}
+									/>
+								)}
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === 'having') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.Having) && (
 						<div className="add-on-content" data-testid="having-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -397,11 +454,7 @@ function QueryAddOns({
 								</Tooltip>
 								<div className="input">
 									<HavingFilter
-										onClose={(): void => {
-											setSelectedViews((prev) =>
-												prev.filter((view) => view.key !== 'having'),
-											);
-										}}
+										onClose={(): void => handleRemoveView(QueryBuilderField.Having)}
 										onChange={handleChangeHaving}
 										queryData={query}
 									/>
@@ -409,7 +462,7 @@ function QueryAddOns({
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === 'limit') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.Limit) && (
 						<div className="add-on-content" data-testid="limit-content">
 							<InputWithLabel
 								label="Limit"
@@ -417,16 +470,12 @@ function QueryAddOns({
 								onChange={handleChangeLimit}
 								initialValue={query?.limit ?? undefined}
 								placeholder="Enter limit"
-								onClose={(): void => {
-									setSelectedViews((prev) =>
-										prev.filter((view) => view.key !== 'limit'),
-									);
-								}}
+								onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === 'order_by') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.OrderBy) && (
 						<div className="add-on-content" data-testid="order-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -449,22 +498,22 @@ function QueryAddOns({
 										entityVersion={version}
 										query={query}
 										onChange={handleChangeOrderByKeys}
-										isListViewPanel={isListViewPanel}
+										isRawQuery={isRawQuery}
 										isNewQueryV2
 									/>
 								</div>
-								{!isListViewPanel && (
+								{!isPinned(QueryBuilderField.OrderBy) && (
 									<Button
 										className="close-btn periscope-btn ghost"
 										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView('order_by')}
+										onClick={(): void => handleRemoveView(QueryBuilderField.OrderBy)}
 									/>
 								)}
 							</div>
 						</div>
 					)}

-					{selectedViews.find((view) => view.key === 'reduce_to') &&
+					{selectedViews.find((view) => view.key === QueryBuilderField.ReduceTo) &&
 						showReduceTo && (
 							<div className="add-on-content" data-testid="reduce-to-content">
 								<div className="periscope-input-with-label">
@@ -487,27 +536,25 @@ function QueryAddOns({
 										<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
 									</div>

-									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView('reduce_to')}
-									/>
+									{!isPinned(QueryBuilderField.ReduceTo) && (
+										<Button
+											className="close-btn periscope-btn ghost"
+											icon={<ChevronUp size={16} />}
+											onClick={(): void => handleRemoveView(QueryBuilderField.ReduceTo)}
+										/>
+									)}
 								</div>
 							</div>
 						)}

-					{selectedViews.find((view) => view.key === 'legend_format') && (
+					{selectedViews.find((view) => view.key === QueryBuilderField.Legend) && (
 						<div className="add-on-content" data-testid="legend-format-content">
 							<InputWithLabel
 								label="Legend format"
 								placeholder="Write legend format"
 								onChange={handleChangeQueryLegend}
 								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
-								onClose={(): void => {
-									setSelectedViews((prev) =>
-										prev.filter((view) => view.key !== 'legend_format'),
-									);
-								}}
+								onClose={(): void => handleRemoveView(QueryBuilderField.Legend)}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
@@ -520,42 +567,49 @@ function QueryAddOns({
 				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}
 				onChange={(newKeys: string[]): void => {
-					const oldKeys = selectedViews.map((view) => view.key);
+					const oldKeys: string[] = selectedViews.map((view) => view.key);
 					const toggledKey =
-						newKeys.find((k) => !oldKeys.includes(k)) ??
-						oldKeys.find((k) => !newKeys.includes(k));
+						newKeys.find((key) => !oldKeys.includes(key)) ??
+						oldKeys.find((key) => !newKeys.includes(key));
 					if (!toggledKey) {
 						return;
 					}
-					const clickedAddOn = addOns.find((a) => a.key === toggledKey);
+					const clickedAddOn = togglableAddOns.find((a) => a.key === toggledKey);
 					if (clickedAddOn) {
 						handleOptionClick(clickedAddOn);
 					}
 				}}
-				items={addOns.map((addOn) => ({
-					value: addOn.key,
-					label: (
-						<Tooltip
-							title={
-								<TooltipContent
-									label={addOn.label}
-									description={addOn.description}
-									docLink={addOn.docLink}
-								/>
-							}
-							placement="top"
-							mouseEnterDelay={0.5}
-						>
-							<span
-								className="add-on-tab-title"
-								data-testid={`query-add-on-${addOn.key}`}
+				items={togglableAddOns.map((addOn) => {
+					const resolved = resolvedFields.get(addOn.key);
+
+					return {
+						value: addOn.key,
+						label: (
+							<Tooltip
+								title={
+									<TooltipContent
+										label={addOn.label}
+										description={resolved?.reason ?? addOn.description}
+										docLink={resolved?.disabled ? undefined : addOn.docLink}
+									/>
+								}
+								placement="top"
+								mouseEnterDelay={0.5}
 							>
-								{addOn.icon}
-								{addOn.label}
-							</span>
-						</Tooltip>
-					),
-				}))}
+								<span
+									className={cx('add-on-tab-title', {
+										'add-on-tab-title--disabled': resolved?.disabled,
+									})}
+									aria-disabled={resolved?.disabled}
+									data-testid={`query-add-on-${addOn.key}`}
+								>
+									{addOn.icon}
+									{addOn.label}
+								</span>
+							</Tooltip>
+						),
+					};
+				})}
 			/>
 		</div>
 	);
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
@@ -8,6 +8,12 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

+import {
+	QueryBuilderField,
+	QueryBuilderFieldsConfig,
+} from '../../queryBuilderFields.types';
+import { resolveQueryBuilderField } from '../../queryBuilderFields.utils';
+
 import QueryAggregationSelect from './QueryAggregationSelect';

 import './QueryAggregation.styles.scss';
@@ -18,24 +24,32 @@ function QueryAggregationOptions({
 	onAggregationIntervalChange,
 	onChange,
 	queryData,
+	fieldsConfig,
 }: {
 	dataSource: DataSource;
 	panelType?: string;
 	onAggregationIntervalChange: (value: number) => void;
 	onChange?: (value: string) => void;
 	queryData: IBuilderQuery | IBuilderTraceOperator;
+	fieldsConfig?: QueryBuilderFieldsConfig;
 }): JSX.Element {
-	const showAggregationInterval = useMemo(() => {
+	const stepInterval = useMemo(() => {
 		if (panelType === PANEL_TYPES.VALUE) {
-			return false;
+			return { hidden: true, disabled: false, reason: undefined };
 		}

-		if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) {
-			return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE);
+		const isNonMetricSource =
+			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
+
+		if (
+			isNonMetricSource &&
+			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
+		) {
+			return { hidden: true, disabled: false, reason: undefined };
 		}

-		return true;
-	}, [dataSource, panelType]);
+		return resolveQueryBuilderField(QueryBuilderField.StepInterval, fieldsConfig);
+	}, [dataSource, panelType, fieldsConfig]);

 	const handleAggregationIntervalChange = (value: string): void => {
 		onAggregationIntervalChange(Number(value));
@@ -57,22 +71,24 @@ function QueryAggregationOptions({
 					}
 				/>

-				{showAggregationInterval && (
+				{!stepInterval.hidden && (
 					<div className="query-aggregation-interval">
 						<Tooltip
 							title={
-								<div>
-									Set the time interval for aggregation
-									<br />
-									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
-										target="_blank"
-										rel="noopener noreferrer"
-										style={{ color: '#1890ff', textDecoration: 'underline' }}
-									>
-										Learn about step intervals
-									</a>
-								</div>
+								stepInterval.reason ?? (
+									<div>
+										Set the time interval for aggregation
+										<br />
+										<a
+											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+											target="_blank"
+											rel="noopener noreferrer"
+											style={{ color: '#1890ff', textDecoration: 'underline' }}
+										>
+											Learn about step intervals
+										</a>
+									</div>
+								)
 							}
 							placement="top"
 						>
@@ -92,6 +108,7 @@ function QueryAggregationOptions({
 								placeholder="Auto"
 								type="number"
 								onChange={handleAggregationIntervalChange}
+								disabled={stepInterval.disabled}
 								labelAfter
 							/>
 						</div>
@@ -105,6 +122,7 @@ function QueryAggregationOptions({
 QueryAggregationOptions.defaultProps = {
 	panelType: null,
 	onChange: undefined,
+	fieldsConfig: undefined,
 };

 export default QueryAggregationOptions;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx
@@ -17,13 +17,13 @@ function TraceOperatorSection({
 	const { currentQuery, panelType } = useQueryBuilder();

 	const showTraceOperatorWarning = useMemo(() => {
-		const isListViewPanel =
+		const isRawQueryPanel =
 			panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
 		const hasMultipleQueries = currentQuery.builder.queryData.length > 1;
 		const hasTraceOperator =
 			currentQuery.builder.queryTraceOperator &&
 			currentQuery.builder.queryTraceOperator.length > 0;
-		return isListViewPanel && hasMultipleQueries && !hasTraceOperator;
+		return isRawQueryPanel && hasMultipleQueries && !hasTraceOperator;
 	}, [
 		currentQuery?.builder?.queryData,
 		currentQuery?.builder?.queryTraceOperator,
@@ -77,50 +77,74 @@ export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
 	addTraceOperator,
+	showAddQuery = true,
 	showAddFormula = true,
 	showAddTraceOperator = false,
+	isAddQueryDisabled = false,
+	addQueryDisabledReason,
+	isAddFormulaDisabled = false,
+	addFormulaDisabledReason,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
 	addTraceOperator?: () => void;
 	showAddTraceOperator: boolean;
+	showAddQuery?: boolean;
 	showAddFormula?: boolean;
+	isAddQueryDisabled?: boolean;
+	addQueryDisabledReason?: string;
+	isAddFormulaDisabled?: boolean;
+	addFormulaDisabledReason?: string;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
 			<div className="qb-footer-container">
-				<div className="qb-add-new-query">
-					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
-						<Button
-							className="add-new-query-button periscope-btn "
-							icon={<Plus size={16} />}
-							onClick={addNewBuilderQuery}
-						/>
-					</Tooltip>
-				</div>
+				{showAddQuery && (
+					<div className="qb-add-new-query">
+						<Tooltip
+							title={
+								addQueryDisabledReason ?? (
+									<div style={{ textAlign: 'center' }}>Add New Query</div>
+								)
+							}
+						>
+							<Button
+								className="add-new-query-button periscope-btn "
+								data-testid="add-new-query-button"
+								icon={<Plus size={16} />}
+								onClick={addNewBuilderQuery}
+								disabled={isAddQueryDisabled}
+							/>
+						</Tooltip>
+					</div>
+				)}

 				{showAddFormula && (
 					<div className="qb-add-formula">
 						<Tooltip
 							title={
-								<div style={{ textAlign: 'center' }}>
-									Add New Formula
-									<Typography.Link
-										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
-										target="_blank"
-										style={{ textDecoration: 'underline' }}
-									>
-										{' '}
-										<br />
-										Learn more
-									</Typography.Link>
-								</div>
+								addFormulaDisabledReason ?? (
+									<div style={{ textAlign: 'center' }}>
+										Add New Formula
+										<Typography.Link
+											href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+											target="_blank"
+											style={{ textDecoration: 'underline' }}
+										>
+											{' '}
+											<br />
+											Learn more
+										</Typography.Link>
+									</div>
+								)
 							}
 						>
 							<Button
 								className="add-formula-button periscope-btn "
+								data-testid="add-formula-button"
 								icon={<Sigma size={16} />}
 								onClick={addNewFormula}
+								disabled={isAddFormulaDisabled}
 							>
 								Add Formula
 							</Button>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -20,6 +20,13 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';

+import { QueryBuilderField } from '../queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderField,
+} from '../queryBuilderFields.utils';
+
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -31,8 +38,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 		index,
 		queryVariant,
 		query,
-		filterConfigs,
-		isListViewPanel = false,
+		isRawQuery = false,
 		showTraceOperator = false,
 		hasTraceOperator = false,
 		version,
@@ -43,6 +49,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 		signalSourceChangeEnabled = false,
 		queriesCount = 1,
 		savePreviousQuery = false,
+		fieldsConfig,
+		allowedDataSources,
 	}: QueryProps & {
 		onSignalSourceChange: (value: string) => void;
 		signalSourceChangeEnabled: boolean;
@@ -53,7 +61,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 ): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();

-	const showFunctions = query?.functions?.length > 0;
+	const hasQueryFunctions = query?.functions?.length > 0;
 	const { dataSource, builderQueryType } = query;

 	const [isCollapsed, setIsCollapsed] = useState(false);
@@ -66,8 +74,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	} = useQueryOperations({
 		index,
 		query,
-		filterConfigs,
-		isListViewPanel,
+		isRawQuery,
 		entityVersion: version,
 		savePreviousQuery,
 	});
@@ -99,14 +106,31 @@ export const QueryV2 = forwardRef(function QueryV2(
 		[dataSource, builderQueryType],
 	);

+	const resolvedConfig = useMemo(
+		() =>
+			mergeQueryBuilderFieldsConfig(
+				isRawQuery ? RAW_QUERY_FIELDS : undefined,
+				fieldsConfig,
+			),
+		[isRawQuery, fieldsConfig],
+	);
+
+	const aggregation = useMemo(
+		() => resolveQueryBuilderField(QueryBuilderField.Aggregation, resolvedConfig),
+		[resolvedConfig],
+	);
+
+	const functions = useMemo(
+		() => resolveQueryBuilderField(QueryBuilderField.Functions, resolvedConfig),
+		[resolvedConfig],
+	);
+
 	const showInlineQuerySearch = useMemo(() => {
 		if (!showTraceOperator) {
 			return false;
 		}
-		return (
-			dataSource === DataSource.TRACES && (hasTraceOperator || isListViewPanel)
-		);
-	}, [hasTraceOperator, isListViewPanel, showTraceOperator, dataSource]);
+		return dataSource === DataSource.TRACES && (hasTraceOperator || isRawQuery);
+	}, [hasTraceOperator, isRawQuery, showTraceOperator, dataSource]);

 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
@@ -149,12 +173,15 @@ export const QueryV2 = forwardRef(function QueryV2(
 									hasTraceOperator={hasTraceOperator}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
-										(version && version === ENTITY_VERSION_V4) ||
-										query.dataSource === DataSource.LOGS ||
-										query.dataSource === DataSource.METRICS ||
-										showFunctions ||
-										false
+										!functions.hidden &&
+										((version && version === ENTITY_VERSION_V4) ||
+											query.dataSource === DataSource.LOGS ||
+											query.dataSource === DataSource.METRICS ||
+											hasQueryFunctions ||
+											false)
 									}
+									areFunctionsDisabled={functions.disabled}
+									functionsDisabledReason={functions.reason}
 									isCollapsed={isCollapsed}
 									showTraceOperator={showTraceOperator}
 									entityType="query"
@@ -167,7 +194,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
 									showDeleteButton={false}
 									showCloneOption={false}
-									isListViewPanel={isListViewPanel}
+									isRawQuery={isRawQuery}
+									allowedDataSources={allowedDataSources}
 									index={index}
 									queryVariant={queryVariant}
 									onChangeDataSource={handleChangeDataSource}
@@ -267,7 +295,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 						</div>

 						{!showOnlyWhereClause &&
-							!isListViewPanel &&
+							!aggregation.hidden &&
 							!(hasTraceOperator && dataSource === DataSource.TRACES) &&
 							dataSource !== DataSource.METRICS && (
 								<QueryAggregation
@@ -277,6 +305,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onAggregationIntervalChange={handleChangeAggregateEvery}
 									onChange={handleChangeAggregation}
 									queryData={query}
+									fieldsConfig={fieldsConfig}
 								/>
 							)}

@@ -297,9 +326,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 									index={index}
 									query={query}
 									version="v3"
-									isListViewPanel={isListViewPanel}
+									isRawQuery={isRawQuery}
 									showReduceTo={showReduceTo}
 									panelType={panelType}
+									fieldsConfig={fieldsConfig}
 								/>
 							)}
 					</div>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx
@@ -11,6 +11,7 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

+import { QueryBuilderFieldsConfig } from '../../queryBuilderFields.types';
 import QueryAddOns from '../QueryAddOns/QueryAddOns';
 import QueryAggregation from '../QueryAggregation/QueryAggregation';
 import TraceOperatorEditor from './TraceOperatorEditor';
@@ -19,10 +20,12 @@ import './TraceOperator.styles.scss';

 export default function TraceOperator({
 	traceOperator,
-	isListViewPanel = false,
+	isRawQuery = false,
+	fieldsConfig,
 }: {
 	traceOperator: IBuilderTraceOperator;
-	isListViewPanel?: boolean;
+	isRawQuery?: boolean;
+	fieldsConfig?: QueryBuilderFieldsConfig;
 }): JSX.Element {
 	const { panelType, removeTraceOperator } = useQueryBuilder();
 	const { handleChangeQueryData } = useQueryOperations({
@@ -58,12 +61,12 @@ export default function TraceOperator({
 	);

 	return (
-		<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
+		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(
 						'qb-trace-operator-label-with-input',
-						!isListViewPanel && 'qb-trace-operator-arrow',
+						!isRawQuery && 'qb-trace-operator-arrow',
 					)}
 				>
 					<Typography.Text className="label">Trace Operator</Typography.Text>
@@ -76,9 +79,9 @@ export default function TraceOperator({
 					</div>
 				</div>

-				{!isListViewPanel && (
+				{!isRawQuery && (
 					<div className="qb-trace-operator-aggregation-container">
-						<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
+						<div className={cx(!isRawQuery && 'qb-trace-operator-arrow')}>
 							<QueryAggregation
 								dataSource={DataSource.TRACES}
 								key={`query-search-${traceOperator.queryName}`}
@@ -86,12 +89,13 @@ export default function TraceOperator({
 								onAggregationIntervalChange={handleChangeAggregateEvery}
 								onChange={handleChangeAggregation}
 								queryData={traceOperator}
+								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 						<div
 							className={cx(
 								'qb-trace-operator-add-ons-container',
-								!isListViewPanel && 'qb-trace-operator-arrow',
+								!isRawQuery && 'qb-trace-operator-arrow',
 							)}
 						>
 							<QueryAddOns
@@ -99,9 +103,10 @@ export default function TraceOperator({
 								query={traceOperator}
 								version="v3"
 								isForTraceOperator
-								isListViewPanel={false}
+								isRawQuery={false}
 								showReduceTo={false}
 								panelType={panelType}
+								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 					</div>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
@@ -142,7 +142,6 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			isMetricsDataSource: false,
 			operators: [],
 			spaceAggregationOptions: [],
-			listOfAdditionalFilters: [],
 			handleChangeOperator: jest.fn(),
 			handleSpaceAggregationChange: jest.fn(),
 			handleChangeAggregatorAttribute: jest.fn(),
@@ -152,7 +151,6 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 				jest.fn() as unknown as ReturnType<UseQueryOperations>['handleChangeQueryData'],
 			handleChangeFormulaData: jest.fn(),
 			handleQueryFunctionsUpdates: handleQueryFunctionsUpdatesMock,
-			listOfAdditionalFormulaFilters: [],
 		});
 	});

--- a/frontend/src/components/QueryBuilderV2/tests/QueryAddOns.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/tests/QueryAddOns.test.tsx
@@ -95,7 +95,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.VALUE}
 				index={0}
@@ -119,7 +119,7 @@ describe('QueryAddOns', () => {
 					groupBy: ['service.name'],
 				})}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -135,7 +135,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isListViewPanel
+				isRawQuery
 				showReduceTo={false}
 				panelType={PANEL_TYPES.LIST}
 				index={0}
@@ -151,7 +151,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ limit: 5 })}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -176,7 +176,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -195,7 +195,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -211,7 +211,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ reduceTo: ReduceOperators.SUM })}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -234,7 +234,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -286,7 +286,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -314,7 +314,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isListViewPanel={false}
+				isRawQuery={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
--- a/frontend/src/components/QueryBuilderV2/tests/QueryFooter.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/tests/QueryFooter.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from 'tests/test-utils';
+
+import QueryFooter from '../QueryV2/QueryFooter/QueryFooter';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): {
+		currentQuery: { builder: { queryData: unknown[] } };
+		panelType: string;
+	} => ({
+		currentQuery: { builder: { queryData: [] } },
+		panelType: 'time_series',
+	}),
+}));
+
+const noop = (): void => {};
+
+describe('QueryFooter', () => {
+	it('offers both buttons by default', () => {
+		render(
+			<QueryFooter
+				addNewBuilderQuery={noop}
+				addNewFormula={noop}
+				showAddTraceOperator={false}
+			/>,
+		);
+
+		expect(screen.getByTestId('add-new-query-button')).toBeInTheDocument();
+		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
+	});
+
+	// A kind whose request takes a single query (Heatmap) hides the button outright
+	// rather than disabling it — a query it adds is one the builder cannot render.
+	it('drops the Add New Query button when the caller withholds it', () => {
+		render(
+			<QueryFooter
+				addNewBuilderQuery={noop}
+				addNewFormula={noop}
+				showAddQuery={false}
+				showAddTraceOperator={false}
+			/>,
+		);
+
+		expect(screen.queryByTestId('add-new-query-button')).not.toBeInTheDocument();
+		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
+	});
+});
--- a/frontend/src/components/QueryBuilderV2/tests/queryBuilderFields.utils.test.ts
+++ b/frontend/src/components/QueryBuilderV2/tests/queryBuilderFields.utils.test.ts
@@ -0,0 +1,140 @@
+import { QueryBuilderField } from '../queryBuilderFields.types';
+import {
+	mergeQueryBuilderFieldsConfig,
+	RAW_QUERY_FIELDS,
+	resolveQueryBuilderField,
+	resolveQueryBuilderFields,
+} from '../queryBuilderFields.utils';
+
+const SUPPORTED = [
+	QueryBuilderField.GroupBy,
+	QueryBuilderField.Having,
+	QueryBuilderField.OrderBy,
+	QueryBuilderField.Limit,
+	QueryBuilderField.Legend,
+];
+
+describe('resolveQueryBuilderField', () => {
+	it('leaves an unconfigured field available', () => {
+		expect(resolveQueryBuilderField(QueryBuilderField.Having)).toStrictEqual({
+			hidden: false,
+			disabled: false,
+			pinned: false,
+		});
+	});
+
+	it('hides a field configured hidden', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
+			[QueryBuilderField.Having]: { state: 'hidden' },
+		});
+
+		expect(resolved.hidden).toBe(true);
+		expect(resolved.disabled).toBe(false);
+	});
+
+	it('carries the reason through on a disabled field', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
+			[QueryBuilderField.Having]: {
+				state: 'disabled',
+				reason: 'Having filters aggregated results.',
+			},
+		});
+
+		expect(resolved).toStrictEqual({
+			hidden: false,
+			disabled: true,
+			reason: 'Having filters aggregated results.',
+			pinned: false,
+		});
+	});
+
+	it('pins a field configured pinned', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.OrderBy, {
+			[QueryBuilderField.OrderBy]: { state: 'pinned' },
+		});
+
+		expect(resolved.pinned).toBe(true);
+		expect(resolved.hidden).toBe(false);
+	});
+
+	it('only ever resolves one state at a time', () => {
+		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
+			[QueryBuilderField.Limit]: { state: 'disabled', reason: 'why' },
+		});
+
+		expect([resolved.hidden, resolved.disabled, resolved.pinned]).toStrictEqual([
+			false,
+			true,
+			false,
+		]);
+	});
+});
+
+describe('resolveQueryBuilderFields', () => {
+	it('resolves every supported field and nothing else', () => {
+		const resolved = resolveQueryBuilderFields(SUPPORTED);
+
+		expect([...resolved.keys()]).toStrictEqual(SUPPORTED);
+	});
+
+	it('cannot widen beyond what the builder supports', () => {
+		const resolved = resolveQueryBuilderFields([QueryBuilderField.Legend], {
+			[QueryBuilderField.ReduceTo]: { state: 'pinned' },
+		});
+
+		expect(resolved.has(QueryBuilderField.ReduceTo)).toBe(false);
+	});
+});
+
+describe('mergeQueryBuilderFieldsConfig', () => {
+	it('returns the override when there is no baseline', () => {
+		const override = { [QueryBuilderField.Limit]: { state: 'hidden' } } as const;
+
+		expect(mergeQueryBuilderFieldsConfig(undefined, override)).toBe(override);
+	});
+
+	it('returns the baseline when there is no override', () => {
+		expect(mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, undefined)).toBe(
+			RAW_QUERY_FIELDS,
+		);
+	});
+
+	it('lets the override win per field, leaving the rest of the baseline intact', () => {
+		const merged = mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, {
+			[QueryBuilderField.Having]: { state: 'disabled', reason: 'no aggregation' },
+		});
+
+		expect(merged?.[QueryBuilderField.Having]).toStrictEqual({
+			state: 'disabled',
+			reason: 'no aggregation',
+		});
+		expect(merged?.[QueryBuilderField.GroupBy]).toStrictEqual({
+			state: 'hidden',
+		});
+		expect(merged?.[QueryBuilderField.OrderBy]).toStrictEqual({
+			state: 'pinned',
+		});
+	});
+});
+
+describe('RAW_QUERY_FIELDS', () => {
+	it('reduces an aggregate surface to a pinned order by', () => {
+		const resolved = resolveQueryBuilderFields(SUPPORTED, RAW_QUERY_FIELDS);
+
+		const visible = [...resolved.entries()]
+			.filter(([, field]) => !field.hidden)
+			.map(([key]) => key);
+
+		expect(visible).toStrictEqual([QueryBuilderField.OrderBy]);
+		expect(resolved.get(QueryBuilderField.OrderBy)?.pinned).toBe(true);
+	});
+
+	it('leaves additional queries alone, so trace matching still allows several', () => {
+		expect(
+			resolveQueryBuilderField(
+				QueryBuilderField.AdditionalQueries,
+				RAW_QUERY_FIELDS,
+			).hidden,
+		).toBe(false);
+	});
+});
--- a/frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts
+++ b/frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts
@@ -0,0 +1,36 @@
+/**
+ * Everything the query builder can surface.
+ *
+ * The per-query values double as the add-on identities the builder renders
+ * (`data-testid="query-add-on-<value>"`), so they are part of the DOM contract and must
+ * not be renamed to match the member names.
+ */
+export enum QueryBuilderField {
+	// Per query
+	Aggregation = 'aggregation',
+	StepInterval = 'step_interval',
+	Functions = 'functions',
+	GroupBy = 'group_by',
+	Having = 'having',
+	OrderBy = 'order_by',
+	Limit = 'limit',
+	Legend = 'legend_format',
+	ReduceTo = 'reduce_to',
+	// Builder level
+	Formula = 'formula',
+	AdditionalQueries = 'additional_queries',
+}
+
+/** `reason` is required on `disabled`: an inert control the user can see has to explain itself. */
+export type QueryBuilderFieldRule =
+	| { state: 'hidden' }
+	| { state: 'disabled'; reason: string }
+	| { state: 'pinned' };
+
+/**
+ * A caller's narrowing of the builder's surface. The builder works out which fields suit
+ * the current data source and panel type first; this can only take away from that set.
+ */
+export type QueryBuilderFieldsConfig = Partial<
+	Record<QueryBuilderField, QueryBuilderFieldRule>
+>;
--- a/frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts
+++ b/frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts
@@ -0,0 +1,92 @@
+import {
+	QueryBuilderField,
+	QueryBuilderFieldRule,
+	QueryBuilderFieldsConfig,
+} from './queryBuilderFields.types';
+
+export interface ResolvedQueryBuilderField {
+	hidden: boolean;
+	disabled: boolean;
+	reason?: string;
+	/** Rendered open, not dismissable, and kept out of the add-on toggle bar. */
+	pinned: boolean;
+}
+
+const AVAILABLE: ResolvedQueryBuilderField = {
+	hidden: false,
+	disabled: false,
+	pinned: false,
+};
+
+function fromRule(rule: QueryBuilderFieldRule): ResolvedQueryBuilderField {
+	switch (rule.state) {
+		case 'hidden':
+			return { hidden: true, disabled: false, pinned: false };
+		case 'disabled':
+			return {
+				hidden: false,
+				disabled: true,
+				reason: rule.reason,
+				pinned: false,
+			};
+		case 'pinned':
+			return { hidden: false, disabled: false, pinned: true };
+		default:
+			return AVAILABLE;
+	}
+}
+
+export function resolveQueryBuilderField(
+	field: QueryBuilderField,
+	config?: QueryBuilderFieldsConfig,
+): ResolvedQueryBuilderField {
+	const rule = config?.[field];
+
+	return rule ? fromRule(rule) : AVAILABLE;
+}
+
+/**
+ * Fields absent from `supported` are hidden whatever the config says, so a config can
+ * only ever take away.
+ */
+export function resolveQueryBuilderFields(
+	supported: readonly QueryBuilderField[],
+	config?: QueryBuilderFieldsConfig,
+): Map<QueryBuilderField, ResolvedQueryBuilderField> {
+	return new Map(
+		supported.map((field) => [field, resolveQueryBuilderField(field, config)]),
+	);
+}
+
+/**
+ * The surface a raw-row builder starts from, layered under a caller's own config.
+ * `AdditionalQueries` is deliberately absent — a raw trace builder still takes several
+ * queries when trace matching is on. Omit rather than Partial, so a field added to the
+ * enum has to be placed on one side.
+ */
+export const RAW_QUERY_FIELDS: Omit<
+	Record<QueryBuilderField, QueryBuilderFieldRule>,
+	QueryBuilderField.AdditionalQueries
+> = {
+	[QueryBuilderField.Aggregation]: { state: 'hidden' },
+	[QueryBuilderField.StepInterval]: { state: 'hidden' },
+	[QueryBuilderField.Functions]: { state: 'hidden' },
+	[QueryBuilderField.GroupBy]: { state: 'hidden' },
+	[QueryBuilderField.Having]: { state: 'hidden' },
+	[QueryBuilderField.Limit]: { state: 'hidden' },
+	[QueryBuilderField.Legend]: { state: 'hidden' },
+	[QueryBuilderField.ReduceTo]: { state: 'hidden' },
+	[QueryBuilderField.Formula]: { state: 'hidden' },
+	[QueryBuilderField.OrderBy]: { state: 'pinned' },
+};
+
+export function mergeQueryBuilderFieldsConfig(
+	baseline: QueryBuilderFieldsConfig | undefined,
+	override: QueryBuilderFieldsConfig | undefined,
+): QueryBuilderFieldsConfig | undefined {
+	if (!baseline) {
+		return override;
+	}
+
+	return override ? { ...baseline, ...override } : baseline;
+}
--- 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
@@ -32,7 +32,6 @@ import {
 	MeterAggregateOperator,
 	MetricAggregateOperator,
 	NumberOperators,
-	QueryAdditionalFilter,
 	QueryBuilderData,
 	ReduceOperators,
 	StringOperators,
@@ -104,43 +103,6 @@ export const metricsSpaceAggregationOperatorsByType = {
 	ExponentialHistogram: metricsHistogramSpaceAggregateOperatorOptions,
 };

-export const mapOfQueryFilters: Record<DataSource, QueryAdditionalFilter[]> = {
-	metrics: [
-		{ text: 'Aggregation interval', field: 'stepInterval' },
-		{ text: 'Having', field: 'having' },
-	],
-	logs: [
-		{ text: 'Order by', field: 'orderBy' },
-		{ text: 'Limit', field: 'limit' },
-		{ text: 'Having', field: 'having' },
-		{ text: 'Aggregation interval', field: 'stepInterval' },
-	],
-	traces: [
-		{ text: 'Order by', field: 'orderBy' },
-		{ text: 'Limit', field: 'limit' },
-		{ text: 'Having', field: 'having' },
-		{ text: 'Aggregation interval', field: 'stepInterval' },
-	],
-};
-
-const commonFormulaFilters: QueryAdditionalFilter[] = [
-	{
-		text: 'Having',
-		field: 'having',
-	},
-	{ text: 'Order by', field: 'orderBy' },
-	{ text: 'Limit', field: 'limit' },
-];
-
-export const mapOfFormulaToFilters: Record<
-	DataSource,
-	QueryAdditionalFilter[]
-> = {
-	metrics: commonFormulaFilters,
-	logs: commonFormulaFilters,
-	traces: commonFormulaFilters,
-};
-
 export const REDUCE_TO_VALUES: SelectOption<ReduceOperators, string>[] = [
 	{ value: ReduceOperators.LAST, label: 'Latest of values in timeframe' },
 	{ value: ReduceOperators.SUM, label: 'Sum of values in timeframe' },
@@ -374,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/CustomDomainSettings/CustomDomainSettings.tsx
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
@@ -207,7 +207,12 @@ export default function CustomDomainSettings(): JSX.Element {
 					>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
-								<Button variant="link" color="none" disabled={isFetchingHosts}>
+								<Button
+									variant="link"
+									color="none"
+									data-testid="custom-domain-menu-trigger"
+									disabled={isFetchingHosts}
+								>
 									<Link2 size={12} />
 									<span>{stripProtocol(activeHost?.url ?? '')}</span>
 									<ChevronDown size={12} />
--- a/frontend/src/container/Download/Download.tsx
+++ b/frontend/src/container/Download/Download.tsx
@@ -71,6 +71,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 		<DropdownMenuSimple menu={menu}>
 			<Button
 				className="download-button"
+				data-testid="download-menu-trigger"
 				loading={isLoading || isDownloading}
 				size="small"
 				type="link"
--- 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/Show More
+++ b/Show More