Merge branch 'qf-scroll-layout' into bottom-strip-shell

Mounts a 24px strip at the bottom of the app under the same gate as the side
nav, behind the SAVED_VIEW_ENABLED localStorage flag shared with saved views.
Shows the build version on the left for now; the per-page left slot and the
right side actions come in later tickets.

To give the strip a stable box, `.app-content` becomes a column flex and
`LayoutContent` takes the height left over instead of `height: 100%`. Fixed
bottom elements read `--bottom-strip-height`, which only exists while the strip
is mounted, so with the flag off every offset falls back to where it is today.

Hides nothing. Each later ticket hides the piece it replaces.

.claude/skills/signoz-page-story/SKILL.md

@@ -26,135 +26,6 @@ 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,
@@ -179,29 +50,7 @@ the permission gates, and check the denial callout is there or gone.
 - **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/`. 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).
+  page-specific in `src/storybook/controls/`.
 - **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:
 
@@ -225,13 +74,6 @@ the permission gates, and check the denial callout is there or gone.
   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
@@ -243,16 +85,6 @@ the permission gates, and check the denial callout is there or gone.
 ## 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

.claude/skills/signoz-page-story/references/controls.md

@@ -128,83 +128,20 @@ 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/List',
+	title: 'Pages/Services',
 	component: Services,
-	...pageStory,
-	parameters: { ...pageStory.parameters },
+	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION, layout: 'app' }),
 } 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, granted permissions, revoked permissions, check state.
+  access preset, 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`,
@@ -218,12 +155,9 @@ control on `loading` strands the walk halfway.
 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.

.claude/skills/signoz-page-story/references/verify.md

@@ -12,12 +12,11 @@ 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/List` →
-`pages-services-list`, plus the story export in kebab-case. Render one story on
-its own:
+Story ids come from the meta title: `Pages/Services` → `pages-services`, plus the
+story export in kebab-case. Render one story on its own:
 
 ```
-http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
+http://localhost:6006/iframe.html?id=pages-services--default&viewMode=story
 ```
 
 ## Flip controls from the URL

.github/CODEOWNERS

@@ -280,9 +280,3 @@ go.mod @therealpandey
 /frontend/src/components/MessagingQueues/ @SigNoz/events-frontend
 /frontend/src/components/MessagingQueueHealthCheck/ @SigNoz/events-frontend
 /frontend/src/hooks/messagingQueue/ @SigNoz/events-frontend
-
-## Storybook
-/frontend/.storybook/ @H4ad
-/frontend/src/storybook/ @H4ad
-/.claude/skills/signoz-page-story/ @H4ad
-/.claude/skills/storybook-visual-diff/ @H4ad

.github/workflows/integrationci.yaml

@@ -47,7 +47,6 @@ jobs:
           - dashboard
           - ingestionkeys
           - inframonitoring
-          - llmpricingrules
           - logspipelines
           - passwordauthn
           - preference

docs/api/openapi.yml

@@ -12772,8 +12772,9 @@ paths:
     put:
       deprecated: false
       description: Single write endpoint used by both the user and the Zeus sync job.
-        Rules without isOverride are matched by sourceId and override rows (is_override=true)
-        are skipped. Rules with isOverride are matched by id and inserted when new.
+        Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true)
+        are fully preserved when the request does not provide isOverride; only synced_at
+        is stamped.
       operationId: CreateOrUpdateLLMPricingRules
       requestBody:
         content:

frontend/.claude/skills/scaffold-feature/SKILL.md

@@ -1,127 +0,0 @@
----
-name: scaffold-feature
-description: Scaffold the co-located feature structure in frontend/src. Use when creating a new page, feature, view (tab), or component folder, when a feature needs a shell with tabs, or when moving existing code out of src/container into src/pages. Generates the full folder tree (components/hooks/store/types/utils/constants/__tests__/README) and registers the page's routes with one command.
----
-
-# Scaffold a feature
-
-The frontend is moving to a co-located layout (Bulletproof React / FSD): everything a
-feature owns lives in the feature's folder. Read `references/layout.md` for the full
-target structure and the rules about what may live where.
-
-**Never hand-create these folders.** Run the generator so every feature comes out
-identical, then fill it in.
-
-## Command
-
-```bash
-pnpm scaffold page <Name> [options]        # a page/feature under src/pages
-pnpm scaffold component <Name> [options]   # a component folder
-```
-
-| Option | Applies to | Effect |
-| --- | --- | --- |
-| `--views A,B,C` | `page` | Makes the page a shell with tab switching and generates one view folder per name. |
-| `--parent <path>` | `component` | Parent, relative to `src` (default `components`). A feature path like `pages/Traces/Explorer` nests the component under that feature's `components/`. |
-| `--full` | `component` | Also adds `components/`, `hooks/`, `store/`, `types.ts`, `utils.ts`, `constants.ts`, `README.md` for a component that owns children. |
-| `--no-tests` | both | Skips `__tests__/`. |
-| `--dry-run` | both | Prints what would be written, writes nothing. |
-| `--force` | both | Overwrites files that already exist (off by default; existing entries are reported as skipped). |
-
-Folder names keep the casing you type, with the first letter forced up, so
-`LLMObservability` stays `LLMObservability` rather than being re-cased. Separated names
-collapse to PascalCase: `api-monitoring` and `api monitoring` both give
-`pages/ApiMonitoring`. Test ids, headings, tab paths and constants are all derived from
-that folder name — `TracesFunnels` gives `traces-funnels-page`, `Traces Funnels` and
-`TRACES_FUNNELS_TABS`.
-
-## What you get
-
-```
-pages/ApiMonitoring/
-  index.tsx                       # the page component
-  ApiMonitoring.module.scss
-  components/  hooks/  store/     # empty, ready for the first file
-  types.ts  utils.ts  constants.ts
-  __tests__/ApiMonitoring.test.tsx
-  README.md
-```
-
-With `--views`, the root becomes a `RouteTab` shell and each view gets the tree above. The
-shell mirrors the Logs and Traces root pages: `constants.tsx` exports one `TabRoutes` per
-view (icon from `@signozhq/icons`, label, `ROUTES` key, view component), `index.tsx` composes
-them into the tab bar, the SCSS module carries the tab-bar overrides, and the test asserts one
-tab per view plus the active view. Tab icons come from a small name map in `scaffold.mjs`
-(`Explorer`, `Funnels`, `Pipelines`, `Views`, `SavedViews`); other names get a neutral icon
-to replace.
-
-## Examples
-
-```bash
-pnpm scaffold page ApiMonitoring                                    # leaf page, no shell
-pnpm scaffold page Traces --views Explorer,Funnels,Views            # shell + 3 views
-pnpm scaffold page Traces/Explorer                                  # one more view under an existing shell
-pnpm scaffold component DataTable                                   # global, src/components/DataTable
-pnpm scaffold component QueryBar --parent pages/Traces/Explorer     # feature-local component
-```
-
-## Route registration
-
-`page` also registers the routes, so the page is reachable as soon as it is generated:
-
-| File | What is added |
-| --- | --- |
-| `src/constants/routes.ts` | One key per path: `API_MONITORING: '/api-monitoring'` for a leaf page; `TRACES_BASE` plus `TRACES_EXPLORER`, `TRACES_FUNNELS`, … for a shell. |
-| `src/utils/permission/index.ts` | A `routePermission` entry per new key, open to `ADMIN`, `EDITOR` and `VIEWER`. Tighten it if the page is admin-only. |
-| `src/AppRoutes/pageComponents.ts` | A `Loadable` export named `<Page>Page` pointing at `pages/<Page>`. |
-| `src/AppRoutes/routes.ts` | The import plus one private, exact route per path. For a shell the base path and every tab path render the shell; the shell redirects the base path to its first tab and `RouteTab` picks the tab otherwise. |
-| `src/container/TopNav/DateTimeSelectionV2/constants.ts` | Every new path in `routesToSkip`, so the global time-range picker stays hidden until the page opts in. |
-
-Existing keys, exports and entries are left alone, so re-running is safe. An existing key or
-export that points somewhere else is a naming collision and the run stops before writing
-anything. `--dry-run` lists
-the edits without making them. `page Traces/Explorer` registers `TRACES_EXPLORER` pointing
-at the `Traces` shell; wiring the new tab into the shell's `constants.tsx` and `index.tsx`
-is still by hand. The generator never adds a SideNav item; do that in
-`src/container/SideNav/menuItems.tsx` when the page needs one.
-
-## After generating
-
-1. **Review the route registration** (pages only) and add the SideNav entry if the page
-   needs one. For a view added under an existing shell, add its `TabRoutes` export to the
-   shell's `constants.tsx` and include it in the `routes` array in the shell's `index.tsx`.
-2. **Delete the placeholders you don't need** — empty `types.ts` / `utils.ts` /
-   `constants.ts`, and any of `components/`, `hooks/`, `store/` the feature won't use.
-   Those three folders are created empty; git only picks them up once they hold a file.
-3. **Fill the README** — the generated file has the prompts; a feature folder without a
-   filled-in README is not done.
-4. **Follow the repo rules while filling it in**: `@signozhq/ui` + `@signozhq/icons` only,
-   CSS Modules (`docs/css-modules-guide.md`), React Query for server state (prefer
-   `api/generated` hooks), nuqs for URL state, Zustand for client state, `data-testid` on
-   every interactive element.
-5. **Verify** before reporting done:
-   ```bash
-   pnpm tsgo --noEmit
-   pnpm oxlint src/pages/<Feature>
-   pnpm jest src/pages/<Feature>
-   ```
-   `pnpm tsgo --noEmit` is the authority. A running dev server can show errors such as
-   `Property 'X_BASE' does not exist` or `has no exported member 'XPage'` right after
-   generation. Its type-checker notices new files but, on some machines, not in-place edits
-   to existing ones, and the generator edits the shared files in place. If tsgo is clean,
-   restart `pnpm dev`.
-
-## Editing the templates
-
-Templates live in `templates/` — `feature/`, `shell/`, `component/` and
-`component-extras/` (the `--full` additions). Every template file ends in `.tmpl`, which
-keeps TypeScript, lint and your editor from reading them as source; the generator strips
-that suffix on the way out, so `index.tsx.tmpl` becomes `index.tsx`. Tokens are
-substituted in both file names and contents: `__Pascal__`, `__kebab__`, `__camel__`,
-`__CONST__`, `__Title__`. The shell templates additionally take tokens the generator builds
-from `--views`: `__ICON_IMPORTS__`, `__VIEW_IMPORTS__`, `__TAB_EXPORTS__`, `__TAB_NAMES__`,
-`__BASE_ROUTE__`, `__FIRST_TAB__`, `__FIRST_VIEW_TESTID__` and `__TAB_ASSERTIONS__`. Tab icons come from
-`TAB_ICONS` and the empty folders from `FEATURE_DIRS`, both in `scaffold.mjs`. Name and
-route derivations live in `lib.mjs`; run `node --test .claude/skills/scaffold-feature/scaffold.test.mjs`
-after changing them. Change these, not the generated
-output, when the team's conventions move.

frontend/.claude/skills/scaffold-feature/lib.mjs

@@ -1,77 +0,0 @@
-const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-
-// Folder names keep the casing the author typed — only the first letter is forced
-// up — so acronyms like `LLMObservability` survive. Separated names
-// (`api-monitoring`, `api monitoring`) collapse to PascalCase.
-export function toDirName(value) {
-	const name = value.trim().replace(/[^a-zA-Z0-9\-_ ]/g, '');
-	if (!name) {
-		throw new Error(`"${value}" has no usable name characters`);
-	}
-	return /[-_\s]/.test(name)
-		? name
-				.split(/[-_\s]+/)
-				.filter(Boolean)
-				.map(capitalize)
-				.join('')
-		: capitalize(name);
-}
-
-const splitHumps = (name, separator) =>
-	name
-		.replace(/([a-z0-9])([A-Z])/g, `$1${separator}$2`)
-		.replace(/([A-Z]+)([A-Z][a-z])/g, `$1${separator}$2`);
-
-export const toKebab = (value) => splitHumps(toDirName(value), '-').toLowerCase();
-export const toTitle = (value) => splitHumps(toDirName(value), ' ');
-export const toConst = (value) => toKebab(value).replace(/-/g, '_').toUpperCase();
-export const toCamel = (value) => {
-	const dir = toDirName(value);
-	return dir.charAt(0).toLowerCase() + dir.slice(1);
-};
-
-export function tokensFor(name) {
-	return {
-		__Pascal__: toDirName(name),
-		__kebab__: toKebab(name),
-		__camel__: toCamel(name),
-		__CONST__: toConst(name),
-		__Title__: toTitle(name),
-	};
-}
-
-export function substitute(text, tokens) {
-	return Object.entries(tokens).reduce(
-		(acc, [token, value]) => acc.split(token).join(value),
-		text,
-	);
-}
-
-export const routeKey = (segments, view) =>
-	[...segments, ...(view ? [view] : [])].map(toConst).join('_');
-export const routePath = (segments, view) =>
-	`/${[...segments, ...(view ? [view] : [])].map(toKebab).join('/')}`;
-
-// Every path under a shell renders the shell itself (RouteTab picks the tab, the base path
-// redirects to the first tab), so the page component is always the first segment.
-export function routeSpec(segments, views) {
-	const shell = segments[0];
-	const component = {
-		name: `${shell}Page`,
-		importPath: `pages/${shell}`,
-		chunk: `${toTitle(shell)} Page`,
-	};
-	if (views.length) {
-		const tabs = views.map((view) => ({
-			key: routeKey(segments, view),
-			path: routePath(segments, view),
-		}));
-		const keys = [
-			{ key: `${routeKey(segments)}_BASE`, path: routePath(segments) },
-			...tabs,
-		];
-		return { component, keys, routed: keys.map(({ key }) => key) };
-	}
-	const key = routeKey(segments);
-	return { component, keys: [{ key, path: routePath(segments) }], routed: [key] };
-}

frontend/.claude/skills/scaffold-feature/references/layout.md

@@ -1,102 +0,0 @@
-# Frontend layout
-
-Target structure for `frontend/src`. Inspired by Bulletproof React and Feature-Sliced
-Design: a feature owns its components, hooks, state, types and tests, and nothing outside
-the feature folder reaches into it.
-
-```
-src/
-  app/                    # bootstrap: routing, global styles/theme
-  pages/
-    Traces/               # has a shell
-      index.tsx           # shell — tab switching only
-      constants.tsx       # tab definitions
-      Explorer/           # a view
-        index.tsx         # view entry — composition, no business logic
-        components/
-          QueryBar/       # same shape as a global component, nests further as needed
-            QueryBar.tsx
-            QueryBar.module.scss
-            components/
-            hooks/
-            __tests__/
-        hooks/            # feature hooks + React Query wrappers over api/generated
-        store/            # Zustand stores for feature-local client state
-        types.ts
-        utils.ts
-        constants.ts
-        __tests__/
-        README.md
-      Funnels/
-      Views/
-    ApiMonitoring/        # no shell — same shape, one level up
-      index.tsx
-      components/
-      hooks/
-      store/
-      types.ts
-      utils.ts
-      constants.ts
-      __tests__/
-      README.md
-  components/             # cross-feature components, same internal shape as above
-    DataTable/
-      DataTable.tsx
-      DataTable.module.scss
-      components/
-      hooks/
-      store/
-      types.ts
-      utils.ts
-      constants.ts
-      __tests__/
-      README.md
-  lib/
-  utils/
-  types/
-  constants/
-  store/                  # app-wide client state only
-  i18n/
-  api/
-    generated/            # Orval output — never edited by hand
-    client/               # axios instances, interceptors, error handlers
-  index.tsx
-```
-
-## Rules
-
-- **Folder names are PascalCase**, spelled the way the feature is spelled in the product
-  (`ApiMonitoring`, `LLMObservability`). This holds for shells, views and components alike.
-- **A page folder is the unit of ownership.** Anything used by exactly one feature lives
-  inside it, however deeply nested. Promote to `src/components` / `src/utils` / `src/hooks`
-  only when a second feature needs it.
-- **`index.tsx` is the entry**, and it composes. Business logic goes to `hooks/`, data
-  shaping to `utils.ts`, state to `store/`.
-- **Nested components repeat the same shape.** A component folder may hold its own
-  `components/`, `hooks/`, `store/`, `types.ts`, `utils.ts`, `constants.ts`, `__tests__/`.
-  Nest as deep as ownership actually goes; don't flatten a component that owns children.
-- **Shell vs no shell.** A page with tabs gets a shell `index.tsx` whose only job is tab
-  switching, plus one folder per view. A page without tabs is just the feature folder.
-- **Tests.** Feature-root tests in `__tests__/`; a component's tests next to the component
-  (its own `__tests__/`). Never reach across features in a test.
-- **No barrel files.** A page's `index.tsx` is the route entry (a component), not a
-  re-export hub. Import components by their own path.
-- **File size.** Split past ~300 LOC: extract components, and behaviour into
-  `use<Component>Callbacks`-style hooks. More than ~3 type declarations in a file means a
-  `types.ts`, and more than ~3 in `types.ts` means a `types/` folder.
-- **Styling.** CSS Modules (`<Name>.module.scss`) next to the component — see
-  `docs/css-modules-guide.md`. Semantic tokens only.
-- **State.** Server → React Query (prefer `api/generated` hooks); URL → nuqs; client →
-  Zustand, one store per file, always with a selector. No Redux or Context for new code.
-
-## Migrating existing code
-
-Most feature code still lives in `src/container` and `src/modules`, with a thin wrapper in
-`src/pages`. When touching one of those features:
-
-1. Scaffold the target with `pnpm scaffold page <Name>` (see `../SKILL.md`).
-2. Move files in, one concern per commit — components, then hooks, then state.
-3. Update importers; keep `src/container/<Feature>` deleted, not re-exported. A shim
-   directory is how the old layout survives.
-4. Do the dead-code pass first: unused props, exports, imports and debug logs go before the
-   move, in their own commit.

frontend/.claude/skills/scaffold-feature/scaffold.mjs

@@ -1,606 +0,0 @@
-#!/usr/bin/env node
-import {
-	existsSync,
-	mkdirSync,
-	readdirSync,
-	readFileSync,
-	statSync,
-	writeFileSync,
-} from 'node:fs';
-import { dirname, join, relative, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import {
-	routeKey,
-	routeSpec,
-	substitute,
-	toCamel,
-	toDirName,
-	toKebab,
-	toTitle,
-	tokensFor,
-} from './lib.mjs';
-
-const SKILL_DIR = dirname(fileURLToPath(import.meta.url));
-const TEMPLATES = join(SKILL_DIR, 'templates');
-const FRONTEND = resolve(SKILL_DIR, '..', '..', '..');
-const SRC = join(FRONTEND, 'src');
-
-const ROUTE_FILES = {
-	routes: join(SRC, 'constants', 'routes.ts'),
-	permission: join(SRC, 'utils', 'permission', 'index.ts'),
-	pageComponents: join(SRC, 'AppRoutes', 'pageComponents.ts'),
-	appRoutes: join(SRC, 'AppRoutes', 'routes.ts'),
-	topNav: join(SRC, 'container', 'TopNav', 'DateTimeSelectionV2', 'constants.ts'),
-};
-const ROUTE_ROLES = "['ADMIN', 'EDITOR', 'VIEWER']";
-// Port is fixed in vite.config.ts; the base path comes from VITE_BASE_PATH like vite does.
-const DEV_SERVER_ORIGIN = 'http://localhost:3301';
-
-function devServerUrl(path) {
-	const base = process.env.VITE_BASE_PATH ?? envFileValue('VITE_BASE_PATH') ?? '/';
-	return `${DEV_SERVER_ORIGIN}${base.replace(/\/+$/, '')}${path}`;
-}
-
-function envFileValue(name) {
-	const envFile = join(FRONTEND, '.env');
-	if (!existsSync(envFile)) {
-		return undefined;
-	}
-	const match = readFileSync(envFile, 'utf8').match(
-		new RegExp(`^\\s*${name}\\s*=\\s*["']?([^"'\\n#]*)`, 'm'),
-	);
-	return match?.[1].trim() || undefined;
-}
-
-// Created empty, so the folder exists before it has a file to justify it.
-const FEATURE_DIRS = ['components', 'hooks', 'store'];
-
-const USAGE = `usage:
-  pnpm scaffold page <Name> [--views A,B,C] [--no-tests] [--dry-run] [--force]
-  pnpm scaffold component <Name> [--parent <path>] [--full] [--no-tests] [--dry-run] [--force]
-
-examples:
-  pnpm scaffold page ApiMonitoring
-  pnpm scaffold page Traces --views Explorer,Funnels,Views
-  pnpm scaffold page Traces/Explorer
-  pnpm scaffold component DataTable
-  pnpm scaffold component QueryBar --parent pages/Traces/Explorer`;
-
-function fail(message) {
-	process.stderr.write(`error: ${message}\n\n${USAGE}\n`);
-	process.exit(1);
-}
-
-function expandEquals(argv) {
-	return argv.flatMap((arg) =>
-		arg.startsWith('--') && arg.includes('=')
-			? [arg.slice(0, arg.indexOf('=')), arg.slice(arg.indexOf('=') + 1)]
-			: [arg],
-	);
-}
-
-function parseArgs(argv) {
-	const flags = {
-		views: [],
-		parent: 'components',
-		full: false,
-		tests: true,
-		dryRun: false,
-		force: false,
-	};
-	const positional = [];
-	const provided = new Set();
-
-	for (let i = 0; i < argv.length; i += 1) {
-		const arg = argv[i];
-		provided.add(arg);
-		if (arg === '--views' || arg === '--parent') {
-			const value = argv[i + 1];
-			if (!value || value.startsWith('--')) {
-				fail(`${arg} needs a value`);
-			}
-			if (arg === '--views') {
-				flags.views = value
-					.split(',')
-					.map((view) => view.trim())
-					.filter(Boolean);
-				if (!flags.views.length) {
-					fail('--views needs at least one name');
-				}
-			} else {
-				flags.parent = value;
-			}
-			i += 1;
-		} else if (arg === '--full') {
-			flags.full = true;
-		} else if (arg === '--no-tests') {
-			flags.tests = false;
-		} else if (arg === '--dry-run') {
-			flags.dryRun = true;
-		} else if (arg === '--force') {
-			flags.force = true;
-		} else if (arg === '-h' || arg === '--help') {
-			process.stdout.write(`${USAGE}\n`);
-			process.exit(0);
-		} else if (arg.startsWith('-')) {
-			fail(`unknown option: ${arg}`);
-		} else {
-			positional.push(arg);
-		}
-	}
-
-	return { positional, flags, provided };
-}
-
-const created = [];
-const skipped = [];
-let targetExisted = false;
-let pagePath = '';
-
-function writeFile(target, contents, flags) {
-	const rel = relative(FRONTEND, target);
-	if (existsSync(target) && !flags.force) {
-		skipped.push(rel);
-		return;
-	}
-	if (!flags.dryRun) {
-		mkdirSync(dirname(target), { recursive: true });
-		writeFileSync(target, contents);
-	}
-	created.push(rel);
-}
-
-function createDirs(targetDir, dirs, flags) {
-	for (const dir of dirs) {
-		const target = join(targetDir, dir);
-		const rel = `${relative(FRONTEND, target)}/`;
-		if (existsSync(target)) {
-			skipped.push(rel);
-			continue;
-		}
-		if (!flags.dryRun) {
-			mkdirSync(target, { recursive: true });
-		}
-		created.push(rel);
-	}
-}
-
-// Template files carry a `.tmpl` suffix so no TypeScript, lint or editor tooling
-// treats them as source; the suffix is dropped on the way out.
-function renderTree(templateDir, targetDir, tokens, flags) {
-	for (const entry of readdirSync(templateDir).sort()) {
-		const from = join(templateDir, entry);
-		const name = substitute(entry.replace(/\.tmpl$/, ''), tokens);
-		if (statSync(from).isDirectory()) {
-			if (!flags.tests && name === '__tests__') {
-				continue;
-			}
-			renderTree(from, join(targetDir, name), tokens, flags);
-		} else {
-			writeFile(
-				join(targetDir, name),
-				substitute(readFileSync(from, 'utf8'), tokens),
-				flags,
-			);
-		}
-	}
-}
-
-// Icons for tab names the product already uses; anything else gets a neutral one.
-const TAB_ICONS = {
-	Explorer: 'Compass',
-	Funnels: 'Cone',
-	Pipelines: 'Workflow',
-	SavedViews: 'TowerControl',
-	Views: 'TowerControl',
-};
-const DEFAULT_TAB_ICON = 'LayoutPanelTop';
-
-const tabIcon = (view) => TAB_ICONS[toDirName(view)] ?? DEFAULT_TAB_ICON;
-const tabName = (view) => `${toCamel(view)}Tab`;
-
-function shellTokens(segments, views) {
-	const icons = [...new Set(views.map(tabIcon))].sort((a, b) => a.localeCompare(b));
-	const viewImports = views
-		.map((view) => `import ${toDirName(view)} from './${toDirName(view)}';`)
-		.join('\n');
-	const tabExports = views
-		.map((view) => {
-			const route = `ROUTES.${routeKey(segments, view)}`;
-			return [
-				`export const ${tabName(view)}: TabRoutes = {`,
-				`\tComponent: ${toDirName(view)},`,
-				'\tname: (',
-				'\t\t<div className={styles.tabItem}>',
-				`\t\t\t<${tabIcon(view)} size={16} /> ${toTitle(view)}`,
-				'\t\t</div>',
-				'\t),',
-				`\troute: ${route},`,
-				`\tkey: ${route},`,
-				'};',
-			].join('\n');
-		})
-		.join('\n\n');
-	const tabAssertions = views
-		.map(
-			(view) =>
-				`\t\texpect(screen.getByRole('tab', { name: '${toTitle(view)}' })).toBeInTheDocument();\n`,
-		)
-		.join('');
-	return {
-		__ICON_IMPORTS__: `import { ${icons.join(', ')} } from '@signozhq/icons';`,
-		__VIEW_IMPORTS__: viewImports,
-		__TAB_EXPORTS__: `${tabExports}\n`,
-		__TAB_NAMES__: views.map(tabName).join(', '),
-		__BASE_ROUTE__: `ROUTES.${routeKey(segments)}_BASE`,
-		__FIRST_TAB__: tabName(views[0]),
-		__FIRST_VIEW_TESTID__: `${toKebab(views[0])}-page`,
-		__TAB_ASSERTIONS__: tabAssertions,
-	};
-}
-
-const edited = [];
-
-function insertBefore(source, anchor, text, rel, from = 0) {
-	const index = source.indexOf(anchor, from);
-	if (index === -1) {
-		fail(`could not find \`${anchor.trim()}\` in ${rel}`);
-	}
-	return source.slice(0, index) + text + source.slice(index);
-}
-
-const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-// An existing key or export is only reused when it already means what the generator
-// would have written; anything else is a naming collision and stops the run before
-// any shared file is touched.
-function assertSame(rel, what, existing, expected) {
-	if (existing !== expected) {
-		fail(
-			`${what} already exists in ${rel} as ${existing}, expected ${expected} — ` +
-				'pick another name',
-		);
-	}
-}
-
-function planRoutes({ component, keys, routed }) {
-	return [
-		{
-			file: ROUTE_FILES.routes,
-			transform: (source, rel) => {
-				const added = keys.filter(({ key, path }) => {
-					const match = source.match(new RegExp(`\\n\\t${key}: '([^']*)',`));
-					if (match) {
-						assertSame(rel, `ROUTES.${key}`, `'${match[1]}'`, `'${path}'`);
-					}
-					return !match;
-				});
-				const text = added.map(({ key, path }) => `\n\t${key}: '${path}',`).join('');
-				return {
-					source: insertBefore(source, '\n} as const;', text, rel),
-					added: added.map(({ key }) => key),
-				};
-			},
-		},
-		{
-			file: ROUTE_FILES.permission,
-			transform: (source, rel) => {
-				const start = source.indexOf('export const routePermission');
-				if (start === -1) {
-					fail(`could not find \`routePermission\` in ${rel}`);
-				}
-				const added = keys
-					.map(({ key }) => key)
-					.filter((key) => !source.includes(`\n\t${key}: `));
-				const text = added.map((key) => `\n\t${key}: ${ROUTE_ROLES},`).join('');
-				return { source: insertBefore(source, '\n};', text, rel, start), added };
-			},
-		},
-		{
-			file: ROUTE_FILES.pageComponents,
-			transform: (source, rel) => {
-				const existing = source.match(
-					new RegExp(`export const ${component.name} = Loadable\\([\\s\\S]*?'([^']+)'`),
-				);
-				if (existing) {
-					assertSame(rel, component.name, `'${existing[1]}'`, `'${component.importPath}'`);
-					return { source, added: [] };
-				}
-				const text =
-					`\nexport const ${component.name} = Loadable(\n` +
-					`\t() => import(/* webpackChunkName: "${component.chunk}" */ '${component.importPath}'),\n);\n`;
-				return {
-					source: source.replace(/\n*$/, '\n') + text,
-					added: [component.name],
-				};
-			},
-		},
-		{
-			file: ROUTE_FILES.appRoutes,
-			transform: (source, rel) => {
-				const added = [];
-				let next = source;
-
-				const importEnd = next.indexOf("} from './pageComponents';");
-				const importStart = next.lastIndexOf('import {', importEnd);
-				if (importEnd === -1 || importStart === -1) {
-					fail(`could not find the pageComponents import in ${rel}`);
-				}
-				const names = next
-					.slice(importStart + 'import {'.length, importEnd)
-					.split(',')
-					.map((name) => name.trim())
-					.filter(Boolean);
-				if (!names.includes(component.name)) {
-					const lower = component.name.toLowerCase();
-					const at = names.findIndex((name) => name.toLowerCase() > lower);
-					names.splice(at === -1 ? names.length : at, 0, component.name);
-					next =
-						next.slice(0, importStart) +
-						`import {\n\t${names.join(',\n\t')},\n` +
-						next.slice(importEnd);
-					added.push(`import ${component.name}`);
-				}
-
-				const arrayStart = next.indexOf('const routes: AppRoutes[] = [');
-				if (arrayStart === -1) {
-					fail(`could not find \`const routes: AppRoutes[]\` in ${rel}`);
-				}
-				const missing = routed.filter((key) => {
-					const match = next.match(
-						new RegExp(`component: (\\w+),\\n\\t\\tkey: '${escapeRegExp(key)}',`),
-					);
-					if (match) {
-						assertSame(rel, `route ${key}`, match[1], component.name);
-					}
-					return !match;
-				});
-				const entries = missing
-					.map((key) =>
-						[
-							'\n\t{',
-							`\t\tpath: ROUTES.${key},`,
-							'\t\texact: true,',
-							`\t\tcomponent: ${component.name},`,
-							`\t\tkey: '${key}',`,
-							'\t\tisPrivate: true,',
-							'\t},',
-						].join('\n'),
-					)
-					.join('');
-				next = insertBefore(next, '\n];', entries, rel, arrayStart);
-				added.push(...missing);
-
-				return { source: next, added };
-			},
-		},
-		{
-			file: ROUTE_FILES.topNav,
-			transform: (source, rel) => {
-				const start = source.indexOf('export const routesToSkip = [');
-				if (start === -1) {
-					fail(`could not find \`routesToSkip\` in ${rel}`);
-				}
-				const end = source.indexOf('\n];', start);
-				const block = source.slice(start, end);
-				const added = routed.filter((key) => !block.includes(`ROUTES.${key},`));
-				const text = added.map((key) => `\n\tROUTES.${key},`).join('');
-				return { source: insertBefore(source, '\n];', text, rel, start), added };
-			},
-		},
-	];
-}
-
-// Every shared file is read and validated before any is written, so a failed anchor or
-// a naming collision leaves the tree untouched.
-function planRouteEdits(spec) {
-	return planRoutes(spec).map(({ file, transform }) => {
-		const rel = relative(FRONTEND, file);
-		if (!existsSync(file)) {
-			fail(`shared file not found: ${rel}`);
-		}
-		const { source, added } = transform(readFileSync(file, 'utf8'), rel);
-		return { file, rel, source, added };
-	});
-}
-
-function commitRouteEdits(pending, flags) {
-	for (const { file, rel, source, added } of pending) {
-		if (!added.length) {
-			continue;
-		}
-		if (!flags.dryRun) {
-			writeFileSync(file, source);
-		}
-		edited.push({ rel, added });
-	}
-}
-
-function scaffoldFeature(targetDir, name, flags) {
-	renderTree(join(TEMPLATES, 'feature'), targetDir, tokensFor(name), flags);
-	createDirs(targetDir, FEATURE_DIRS, flags);
-}
-
-function scaffoldPage(name, flags) {
-	const segments = name.split('/').filter(Boolean).map(toDirName);
-	if (!segments.length) {
-		fail('page needs a name');
-	}
-
-	const viewDirs = flags.views.map(toDirName);
-	const duplicate = viewDirs.find((dir, index) => viewDirs.indexOf(dir) !== index);
-	if (duplicate) {
-		fail(`duplicate view: ${duplicate}`);
-	}
-
-	const targetDir = join(SRC, 'pages', ...segments);
-	const leaf = segments[segments.length - 1];
-	targetExisted = existsSync(targetDir);
-	// Shared files land before the page folder so a watching type-checker never sees a
-	// page that references ROUTES keys that do not exist yet.
-	const spec = routeSpec(segments, flags.views);
-	commitRouteEdits(planRouteEdits(spec), flags);
-	pagePath = spec.keys[0].path;
-
-	if (flags.views.length) {
-		renderTree(
-			join(TEMPLATES, 'shell'),
-			targetDir,
-			{ ...tokensFor(leaf), ...shellTokens(segments, flags.views) },
-			flags,
-		);
-		for (const view of flags.views) {
-			scaffoldFeature(join(targetDir, toDirName(view)), view, flags);
-		}
-	} else {
-		scaffoldFeature(targetDir, leaf, flags);
-	}
-
-	return targetDir;
-}
-
-function resolveParent(parent) {
-	const segments = parent
-		.replace(/^src\//, '')
-		.replace(/\/components\/?$/, '')
-		.split('/')
-		.filter(Boolean);
-	if (segments[0] === 'pages') {
-		return ['pages', ...segments.slice(1).map(toDirName)];
-	}
-	return segments;
-}
-
-function scaffoldComponent(name, flags) {
-	const tokens = tokensFor(name);
-	const parent = resolveParent(flags.parent);
-	const isGlobal = parent.length === 1 && parent[0] === 'components';
-	const componentsDir = isGlobal
-		? join(SRC, 'components')
-		: join(SRC, ...parent, 'components');
-
-	if (relative(SRC, componentsDir).startsWith('..')) {
-		fail(`--parent must stay inside src: ${flags.parent}`);
-	}
-	if (parent[0] === 'pages' && parent.length < 2) {
-		fail('a component under pages/ needs a feature: --parent pages/<Feature>');
-	}
-	if (!isGlobal && !existsSync(join(SRC, ...parent))) {
-		fail(`parent does not exist: src/${parent.join('/')}`);
-	}
-
-	const targetDir = join(componentsDir, tokens.__Pascal__);
-	targetExisted = existsSync(targetDir);
-
-	renderTree(join(TEMPLATES, 'component'), targetDir, tokens, flags);
-	if (flags.full) {
-		renderTree(join(TEMPLATES, 'component-extras'), targetDir, tokens, flags);
-		createDirs(targetDir, FEATURE_DIRS, flags);
-	}
-
-	return targetDir;
-}
-
-function report(kind, targetDir, flags) {
-	const rel = relative(FRONTEND, targetDir);
-	const verb = flags.dryRun ? 'would create' : 'created';
-	const segments = rel.split('/').slice(2);
-	const isNestedView = kind === 'page' && segments.length > 1 && !flags.views.length;
-	const leafName = segments[segments.length - 1];
-
-	if (targetExisted) {
-		process.stdout.write(
-			`\nwarning: ${rel} already existed — only missing entries were added\n`,
-		);
-	}
-
-	process.stdout.write(`\n${verb} ${created.length} entr(ies) in ${rel}\n`);
-	for (const entry of created) {
-		process.stdout.write(`  + ${entry}\n`);
-	}
-
-	if (skipped.length) {
-		process.stdout.write(
-			`\nskipped ${skipped.length} existing entr(ies) — pass --force to overwrite files\n`,
-		);
-		for (const entry of skipped) {
-			process.stdout.write(`  = ${entry}\n`);
-		}
-	}
-
-	if (edited.length) {
-		const editVerb = flags.dryRun ? 'would edit' : 'edited';
-		process.stdout.write(`\n${editVerb} ${edited.length} shared file(s)\n`);
-		for (const { rel, added } of edited) {
-			const additions = added.map((entry) => `+${entry}`).join(', ');
-			process.stdout.write(`  ~ ${rel}: ${additions}\n`);
-		}
-	}
-
-	const steps =
-		kind === 'page'
-			? [
-					'review the route registration (constants/routes.ts, utils/permission, AppRoutes/pageComponents.ts, AppRoutes/routes.ts, TopNav routesToSkip) and add a SideNav entry in container/SideNav/menuItems.tsx if the page needs one',
-					...(isNestedView
-						? [
-								`add a tab export for ${leafName} in the shell's constants.tsx and include it in the routes array in the shell's index.tsx`,
-							]
-						: []),
-					'delete the placeholders you do not need (empty types/utils/constants, unused folders)',
-					'fill in README.md',
-					`verify: pnpm tsgo --noEmit && pnpm oxlint ${rel} && pnpm jest ${rel}`,
-				]
-			: [
-					'delete the placeholders you do not need (empty types/utils/constants, unused folders)',
-					`verify: pnpm tsgo --noEmit && pnpm oxlint ${rel} && pnpm jest ${rel}`,
-				];
-
-	if (pagePath) {
-		process.stdout.write(`\nopen: ${devServerUrl(pagePath)}\n`);
-	}
-
-	process.stdout.write('\nnext:\n');
-	steps.forEach((step, index) => {
-		process.stdout.write(`  ${index + 1}. ${step}\n`);
-	});
-	process.stdout.write(
-		'\nnote: git does not track empty folders — components/, hooks/ and store/ only\n' +
-			'show up in a commit once they hold a file.\n',
-	);
-}
-
-const { positional, flags, provided } = parseArgs(expandEquals(process.argv.slice(2)));
-const [kind, name] = positional;
-
-if (!kind || !name) {
-	fail('a command and a name are required');
-}
-if (positional.length > 2) {
-	fail(`unexpected argument: ${positional[2]}`);
-}
-
-function rejectFlags(unsupported) {
-	for (const flag of unsupported) {
-		if (provided.has(flag)) {
-			fail(`${flag} does not apply to \`${kind}\``);
-		}
-	}
-}
-
-let targetDir;
-try {
-	if (kind === 'page') {
-		rejectFlags(['--parent', '--full']);
-		targetDir = scaffoldPage(name, flags);
-	} else if (kind === 'component') {
-		rejectFlags(['--views']);
-		targetDir = scaffoldComponent(name, flags);
-	} else {
-		fail(`unknown command: ${kind}`);
-	}
-} catch (error) {
-	fail(error.message);
-}
-
-report(kind, targetDir, flags);

frontend/.claude/skills/scaffold-feature/scaffold.test.mjs

@@ -1,95 +0,0 @@
-import assert from 'node:assert/strict';
-import { describe, it } from 'node:test';
-
-import {
-	routeKey,
-	routePath,
-	routeSpec,
-	substitute,
-	toCamel,
-	toConst,
-	toDirName,
-	toKebab,
-	toTitle,
-	tokensFor,
-} from './lib.mjs';
-
-describe('names', () => {
-	it('keeps typed casing and forces the first letter up', () => {
-		assert.equal(toDirName('LLMObservability'), 'LLMObservability');
-		assert.equal(toDirName('apiMonitoring'), 'ApiMonitoring');
-	});
-
-	it('collapses separated names to PascalCase', () => {
-		assert.equal(toDirName('api-monitoring'), 'ApiMonitoring');
-		assert.equal(toDirName('api monitoring'), 'ApiMonitoring');
-		assert.equal(toDirName('saved_views'), 'SavedViews');
-	});
-
-	it('derives kebab, title, const and camel forms, splitting acronyms', () => {
-		assert.deepEqual(tokensFor('LLMObservability'), {
-			__Pascal__: 'LLMObservability',
-			__kebab__: 'llm-observability',
-			__camel__: 'lLMObservability',
-			__CONST__: 'LLM_OBSERVABILITY',
-			__Title__: 'LLM Observability',
-		});
-		assert.equal(toKebab('SavedViews'), 'saved-views');
-		assert.equal(toTitle('SavedViews'), 'Saved Views');
-		assert.equal(toConst('SavedViews'), 'SAVED_VIEWS');
-		assert.equal(toCamel('SavedViews'), 'savedViews');
-	});
-
-	it('rejects names with no usable characters', () => {
-		assert.throws(() => toDirName('***'), /no usable name characters/);
-	});
-});
-
-describe('substitute', () => {
-	it('replaces every occurrence of every token, in file names and contents', () => {
-		const tokens = tokensFor('ApiMonitoring');
-		assert.equal(substitute('__Pascal__.module.scss', tokens), 'ApiMonitoring.module.scss');
-		assert.equal(
-			substitute('__kebab__-page / __kebab__-shell / __Title__', tokens),
-			'api-monitoring-page / api-monitoring-shell / Api Monitoring',
-		);
-	});
-});
-
-describe('routes', () => {
-	it('builds keys and paths from every segment plus the view', () => {
-		assert.equal(routeKey(['Traces'], 'SavedViews'), 'TRACES_SAVED_VIEWS');
-		assert.equal(routePath(['Traces'], 'SavedViews'), '/traces/saved-views');
-		assert.equal(routeKey(['Traces', 'Explorer']), 'TRACES_EXPLORER');
-		assert.equal(routePath(['Traces', 'Explorer']), '/traces/explorer');
-	});
-
-	it('routes a leaf page under a single key', () => {
-		assert.deepEqual(routeSpec(['ApiMonitoring'], []), {
-			component: {
-				name: 'ApiMonitoringPage',
-				importPath: 'pages/ApiMonitoring',
-				chunk: 'Api Monitoring Page',
-			},
-			keys: [{ key: 'API_MONITORING', path: '/api-monitoring' }],
-			routed: ['API_MONITORING'],
-		});
-	});
-
-	it('routes a shell under a base key plus one key per view, all to the shell', () => {
-		const spec = routeSpec(['Traces'], ['Explorer', 'Funnels']);
-		assert.equal(spec.component.name, 'TracesPage');
-		assert.deepEqual(spec.keys, [
-			{ key: 'TRACES_BASE', path: '/traces' },
-			{ key: 'TRACES_EXPLORER', path: '/traces/explorer' },
-			{ key: 'TRACES_FUNNELS', path: '/traces/funnels' },
-		]);
-		assert.deepEqual(spec.routed, ['TRACES_BASE', 'TRACES_EXPLORER', 'TRACES_FUNNELS']);
-	});
-
-	it('points a view added under an existing shell at the shell component', () => {
-		const spec = routeSpec(['Traces', 'Explorer'], []);
-		assert.equal(spec.component.importPath, 'pages/Traces');
-		assert.deepEqual(spec.keys, [{ key: 'TRACES_EXPLORER', path: '/traces/explorer' }]);
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/component-extras/README.md.tmpl

@@ -1,21 +0,0 @@
-# __Pascal__
-
-<!-- What this component renders, and the features that use it. -->
-
-## API
-
-<!-- Props, and the behaviour each one controls. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `__Pascal__.tsx` | The component. |
-| `__Pascal__.module.scss` | Styles. |
-| `components/` | Child components this one owns. |
-| `hooks/` | Behaviour extracted out of the component. |
-| `store/` | Zustand stores this component owns. |
-| `types.ts` | Types shared inside this folder. |
-| `utils.ts` | Pure helpers. |
-| `constants.ts` | Constants. |
-| `__tests__/` | Tests. |

frontend/.claude/skills/scaffold-feature/templates/component/__Pascal__.module.scss.tmpl

@@ -1,4 +0,0 @@
-.__camel__ {
-	display: flex;
-	color: var(--l1-foreground);
-}

frontend/.claude/skills/scaffold-feature/templates/component/__Pascal__.tsx.tmpl

@@ -1,7 +0,0 @@
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	return <div className={styles.__camel__} data-testid="__kebab__" />;
-}
-
-export default __Pascal__;

frontend/.claude/skills/scaffold-feature/templates/component/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,11 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import __Pascal__ from '../__Pascal__';
-
-describe('__Pascal__', () => {
-	it('renders', () => {
-		render(<__Pascal__ />);
-
-		expect(screen.getByTestId('__kebab__')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/feature/README.md.tmpl

@@ -1,28 +0,0 @@
-# __Title__
-
-<!-- One paragraph: what this feature does, who uses it, and where it is reachable from. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `index.tsx` | Feature entry. Composition only — no business logic. |
-| `components/` | Feature-local components, nested as `components/<Name>/`. |
-| `hooks/` | Feature hooks, including React Query wrappers over `api/generated`. |
-| `store/` | Zustand stores for feature-local client state. |
-| `types.ts` | Shared feature types. Split into `types/` past ~3 declarations. |
-| `utils.ts` | Pure helpers. |
-| `constants.ts` | Feature constants. |
-| `__tests__/` | Feature-root tests. Component tests live with the component. |
-
-## Data
-
-<!-- Endpoints this feature reads/writes, and the hooks that wrap them. -->
-
-## State
-
-<!-- What lives in the URL (nuqs), what lives in React Query, what lives in store/. -->
-
-## Routing
-
-<!-- Route key in constants/routes.ts, lazy import in AppRoutes/pageComponents.ts, entry in AppRoutes/routes.ts. -->

frontend/.claude/skills/scaffold-feature/templates/feature/__Pascal__.module.scss.tmpl

@@ -1,12 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-	padding: var(--spacing-4);
-	background: var(--l1-background);
-}
-
-.title {
-	color: var(--l1-foreground);
-	font-size: var(--font-size-lg);
-}

frontend/.claude/skills/scaffold-feature/templates/feature/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,11 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import __Pascal__ from '../index';
-
-describe('__Pascal__', () => {
-	it('renders the page', () => {
-		render(<__Pascal__ />);
-
-		expect(screen.getByTestId('__kebab__-page')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/feature/index.tsx.tmpl

@@ -1,11 +0,0 @@
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	return (
-		<section className={styles.container} data-testid="__kebab__-page">
-			<h1 className={styles.title}>__Title__</h1>
-		</section>
-	);
-}
-
-export default __Pascal__;

frontend/.claude/skills/scaffold-feature/templates/shell/README.md.tmpl

@@ -1,20 +0,0 @@
-# __Title__
-
-<!-- One paragraph: what this section of the product is, and what each tab is for. -->
-
-## Structure
-
-| Path | Purpose |
-| --- | --- |
-| `index.tsx` | Shell. Tab switching only — no feature logic. |
-| `constants.tsx` | One `TabRoutes` export per tab: icon, label, route and the view it renders. |
-| `<View>/` | One folder per tab, each a self-contained feature. |
-
-## Routing
-
-Every path is registered in `src/constants/routes.ts`, `src/utils/permission/index.ts`,
-`src/AppRoutes/routes.ts` and the `routesToSkip` list in
-`src/container/TopNav/DateTimeSelectionV2/constants.ts`, all rendering this shell through the
-lazy import in `src/AppRoutes/pageComponents.ts`. The base path redirects to the first tab;
-`RouteTab` picks the tab from the current path. Adding a tab means a new `ROUTES` key, a
-route entry, a permission entry, a `routesToSkip` entry and a `TabRoutes` export here.

frontend/.claude/skills/scaffold-feature/templates/shell/__Pascal__.module.scss.tmpl

@@ -1,21 +0,0 @@
-.shell {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-
-	:global(.ant-tabs-nav) {
-		padding: 0 var(--spacing-8);
-		margin-bottom: 0;
-
-		&::before {
-			border-bottom: 1px solid var(--l1-border) !important;
-		}
-	}
-}
-
-.tabItem {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-}

frontend/.claude/skills/scaffold-feature/templates/shell/__tests__/__Pascal__.test.tsx.tmpl

@@ -1,25 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import ROUTES from 'constants/routes';
-
-import { __FIRST_TAB__ } from '../constants';
-import __Pascal__ from '../index';
-
-describe('__Pascal__', () => {
-	it('renders one tab per view', () => {
-		render(<__Pascal__ />, undefined, { initialRoute: __FIRST_TAB__.route });
-
-		expect(screen.getByTestId('__kebab__-shell')).toBeInTheDocument();
-__TAB_ASSERTIONS__	});
-
-	it('renders the view for the active tab', () => {
-		render(<__Pascal__ />, undefined, { initialRoute: __FIRST_TAB__.route });
-
-		expect(screen.getByTestId('__FIRST_VIEW_TESTID__')).toBeInTheDocument();
-	});
-
-	it('redirects the base path to the first tab', () => {
-		render(<__Pascal__ />, undefined, { initialRoute: __BASE_ROUTE__ });
-
-		expect(screen.getByTestId('__FIRST_VIEW_TESTID__')).toBeInTheDocument();
-	});
-});

frontend/.claude/skills/scaffold-feature/templates/shell/constants.tsx.tmpl

@@ -1,9 +0,0 @@
-import { TabRoutes } from 'components/RouteTab/types';
-import ROUTES from 'constants/routes';
-__ICON_IMPORTS__
-
-__VIEW_IMPORTS__
-
-import styles from './__Pascal__.module.scss';
-
-__TAB_EXPORTS__

frontend/.claude/skills/scaffold-feature/templates/shell/index.tsx.tmpl

@@ -1,32 +0,0 @@
-import { matchPath, Redirect, useLocation } from 'react-router-dom';
-import RouteTab from 'components/RouteTab';
-import { TabRoutes } from 'components/RouteTab/types';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-
-import { __TAB_NAMES__ } from './constants';
-
-import styles from './__Pascal__.module.scss';
-
-function __Pascal__(): JSX.Element {
-	const { pathname } = useLocation();
-
-	const routes: TabRoutes[] = [__TAB_NAMES__];
-
-	if (matchPath(pathname, { path: __BASE_ROUTE__, exact: true })) {
-		return <Redirect to={routes[0].route} />;
-	}
-
-	return (
-		<div className={styles.shell} data-testid="__kebab__-shell">
-			<RouteTab
-				routes={routes}
-				activeKey={pathname}
-				history={history}
-				showRightSection={false}
-			/>
-		</div>
-	);
-}
-
-export default __Pascal__;

frontend/.oxlintrc.json

@@ -295,8 +295,6 @@
     // 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",
       {

frontend/.storybook/main.ts

@@ -27,22 +27,12 @@ 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`,
-	},
 ];
 
 /**
@@ -65,12 +55,12 @@ const isExcluded = (plugin: PluginOption): boolean =>
 
 const config: StorybookConfig = {
 	framework: '@storybook/react-vite',
-	stories: ['../src/storybook/docs/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+	stories: ['../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', '@storybook/addon-docs'],
+	addons: ['@storybook/addon-a11y'],
 	core: { disableTelemetry: true },
 	viteFinal: async (viteConfig) => {
 		const plugins = (viteConfig.plugins ?? [])
@@ -87,14 +77,6 @@ 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,

frontend/.storybook/preview-head.html

@@ -6,17 +6,6 @@
 -->
 <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>
@@ -35,38 +24,3 @@
 		},
 	};
 </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>

frontend/.storybook/preview.tsx

@@ -3,8 +3,6 @@ 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';
@@ -15,12 +13,7 @@ import {
 } from '../src/storybook/runtime/resolveStory';
 import { allModes } from './modes';
 
-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/ReactI18';
 
 import '../src/styles.scss';
 
@@ -70,127 +63,10 @@ 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
@@ -198,9 +74,6 @@ 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',
@@ -246,21 +119,12 @@ const preview: Preview = {
 			world.apply();
 			world.install(worker);
 
-			await Promise.all([ready, translationsReady]);
+			await ready;
 		},
 	],
 	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,

frontend/.storybook/public/mockServiceWorker.js

@@ -88,16 +88,10 @@ self.addEventListener('fetch', function (event) {
   const { request } = event
   const accept = request.headers.get('accept') || ''
 
-  // 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 server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {

frontend/.storybook/test-runner.ts

@@ -25,23 +25,7 @@ const IGNORED_MESSAGES = [
 	/violates the following Content Security Policy directive/,
 ];
 
-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);
+const messagesByPage = new WeakMap<Page, string[]>();
 
 /**
  * Only `console.error` fails a story. `console.warn` is dev-time advice from
@@ -59,14 +43,14 @@ const config: TestRunnerConfig = {
 			return;
 		}
 
-		const messages: CapturedMessage[] = [];
+		const messages: string[] = [];
 		messagesByPage.set(page, messages);
 		page.on('console', (message) => {
 			if (
 				message.type() === 'error' &&
 				!IGNORED_MESSAGES.some((pattern) => pattern.test(message.text()))
 			) {
-				messages.push({ at: Date.now(), text: `[error] ${message.text()}` });
+				messages.push(`[error] ${message.text()}`);
 			}
 		});
 		// The console message alone ("Failed to load resource") doesn't name the
@@ -74,23 +58,12 @@ const config: TestRunnerConfig = {
 		// actionable instead of just a status code.
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
-				messages.push({
-					at: Date.now(),
-					text: `[response] ${response.status()} ${response.url()}`,
-				});
+				messages.push(`[response] ${response.status()} ${response.url()}`);
 			}
 		});
 	},
 	async postVisit(page, context): Promise<void> {
-		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);
+		const messages = messagesByPage.get(page) ?? [];
 		if (messages.length === 0) {
 			return;
 		}

frontend/package.json

@@ -10,7 +10,6 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o storybook-static",
     "test:storybook": "bash scripts/test-storybook.sh",
-    "scaffold": "node .claude/skills/scaffold-feature/scaffold.mjs",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
@@ -163,7 +162,6 @@
     "@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",

frontend/plugins/rules/no-msw-in-story-file.mjs

@@ -1,41 +0,0 @@
-/**
- * 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' });
-				}
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -15,7 +15,6 @@ 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: {
@@ -32,6 +31,5 @@ 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,
 	},
 };

frontend/pnpm-lock.yaml

@@ -363,9 +363,6 @@ 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)
@@ -2187,12 +2184,6 @@ 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==}
 
@@ -3775,15 +3766,6 @@ 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:
@@ -4207,9 +4189,6 @@ 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==}
 
@@ -12220,12 +12199,6 @@ 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
@@ -13646,25 +13619,6 @@ 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))
@@ -14110,8 +14064,6 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.2
 
-  '@types/mdx@2.0.14': {}
-
   '@types/ms@0.7.31': {}
 
   '@types/node@16.18.25': {}

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 --testTimeout 30000 "$@"
+pnpm exec test-storybook --ci --maxWorkers=2 "$@"

frontend/src/api/generated/services/llmpricingrules/index.ts

@@ -150,7 +150,7 @@ export const invalidateListLLMPricingRules = async (
 };
 
 /**
- * Single write endpoint used by both the user and the Zeus sync job. Rules without isOverride are matched by sourceId and override rows (is_override=true) are skipped. Rules with isOverride are matched by id and inserted when new.
+ * Single write endpoint used by both the user and the Zeus sync job. Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true) are fully preserved when the request does not provide isOverride; only synced_at is stamped.
  * @summary Create or update pricing rules
  */
 export const createOrUpdateLLMPricingRules = (

frontend/src/components/CustomTimePicker/stories/CustomTimePicker.stories.tsx

@@ -1,69 +0,0 @@
-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...');
-	},
-};

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

@@ -1,28 +0,0 @@
-/**
- * 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([]))),
-	),
-];

frontend/src/components/FieldsSelector/stories/FieldsSelector.stories.tsx

@@ -1,102 +0,0 @@
-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'],
-	},
-};

frontend/src/components/NewSelect/__test__/CustomSelect.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 import CustomSelect from '../CustomSelect';
 
@@ -204,21 +203,4 @@ describe('CustomSelect Component', () => {
 		// Check onChange was called
 		expect(handleChange).toHaveBeenCalled();
 	});
-	it('tells the consumer its search was cleared when the dropdown closes', async () => {
-		// The component clears its own search text on close. A consumer running a
-		// server-side search needs to hear that, or its results outlive the dropdown.
-		const onSearch = jest.fn();
-		const user = userEvent.setup();
-		render(<CustomSelect options={mockOptions} onSearch={onSearch} />);
-
-		const selectElement = screen.getByRole('combobox');
-		await user.click(selectElement);
-		await user.type(selectElement, 'opt');
-
-		expect(onSearch).toHaveBeenLastCalledWith('opt');
-
-		await user.keyboard('{Escape}');
-
-		expect(onSearch).toHaveBeenLastCalledWith('');
-	});
 });

frontend/src/components/NewSelect/stories/NewSelect.stories.tsx

@@ -1,156 +0,0 @@
-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>
-	),
-};

frontend/src/components/NewSelect/styles.scss

@@ -258,10 +258,6 @@ $custom-border-color: #2c3044;
 		overflow: hidden;
 
 		.group-label {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
@@ -446,7 +442,7 @@ $custom-border-color: #2c3044;
 		.group-label {
 			display: flex;
 			align-items: center;
-			gap: 4px;
+			justify-content: space-between;
 
 			font-weight: 500;
 			padding: 4px 12px;

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

@@ -1,15 +0,0 @@
-/**
- * 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' }),
-});

frontend/src/components/NotFound/stories/NotFound.stories.tsx

@@ -1,42 +0,0 @@
-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 = {};

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

@@ -2,6 +2,8 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
+	flex: 1;
+	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -0,0 +1,33 @@
+// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
+// only hand height down; each pane below owns its own scroll.
+.layout {
+	display: flex;
+	flex: 1;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
+}
+
+// Positioned so overlays (settings drawer) paint above the content pane
+// without changing this pane's layout width.
+.filters {
+	width: 280px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	position: relative;
+	overflow: visible;
+	z-index: 2;
+}
+
+// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
+// `height: 100%`), which owns the scrolling.
+.content {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode } from 'react';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import QuickFilters from '../QuickFilters';
+
+import styles from './QuickFiltersLayout.module.scss';
+
+// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
+type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
+	typeof QuickFilters,
+	ComponentProps<typeof QuickFilters>
+>;
+
+export interface QuickFiltersLayoutProps {
+	quickFilterProps: QuickFiltersElementProps;
+	showFilters: boolean;
+	className?: string;
+	contentClassName?: string;
+	testId?: string;
+	children: ReactNode;
+}
+
+function QuickFiltersLayout({
+	quickFilterProps,
+	showFilters,
+	className,
+	contentClassName,
+	testId,
+	children,
+}: QuickFiltersLayoutProps): JSX.Element {
+	return (
+		<div className={cx(styles.layout, className)} data-testid={testId}>
+			{showFilters && (
+				<aside
+					className={styles.filters}
+					data-testid="quick-filters-layout-filters"
+				>
+					<QuickFilters {...quickFilterProps} />
+				</aside>
+			)}
+			<section
+				className={cx(styles.content, contentClassName)}
+				data-testid="quick-filters-layout-content"
+			>
+				<OverlayScrollbar>
+					<div>{children}</div>
+				</OverlayScrollbar>
+			</section>
+		</div>
+	);
+}
+
+export default QuickFiltersLayout;

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../types';
+import QuickFiltersLayout from '../QuickFiltersLayout';
+
+jest.mock('../QuickFiltersLayout.module.scss', () => ({
+	__esModule: true,
+	default: {
+		layout: 'layout',
+		filters: 'filters',
+		content: 'content',
+	},
+}));
+
+jest.mock('../../QuickFilters', () => ({
+	__esModule: true,
+	default: ({ source }: { source: string }): JSX.Element => (
+		<div data-testid="quick-filters">{source}</div>
+	),
+}));
+
+const quickFilterProps = {
+	source: QuickFiltersSource.TRACES_EXPLORER,
+	handleFilterVisibilityChange: jest.fn(),
+};
+
+describe('QuickFiltersLayout', () => {
+	it('renders QuickFilters with the given props inside the filters pane', () => {
+		render(
+			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
+		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
+		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
+			QuickFiltersSource.TRACES_EXPLORER,
+		);
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
+			'content',
+		);
+	});
+
+	it('does not render the filters pane when showFilters is false', () => {
+		render(
+			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
+	});
+
+	it('merges classNames onto the root and content panes', () => {
+		render(
+			<QuickFiltersLayout
+				showFilters
+				quickFilterProps={quickFilterProps}
+				className="page-root"
+				contentClassName="page-content"
+				testId="page"
+			>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const root = screen.getByTestId('page');
+		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
+			'content',
+			'page-content',
+		);
+	});
+});

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

@@ -6,27 +6,12 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
+	height: 100%;
 	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
 
-	&.qf-logs-explorer {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-exceptions {
-		height: 100vh;
-	}
-
-	&.qf-api-monitoring {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-traces-explorer {
-		height: calc(100vh - 45px);
-	}
-
 	&.hidden {
 		width: 0;
 	}

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

@@ -1,126 +0,0 @@
-/**
- * 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',
-				},
-			],
-		},
-	},
-};

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

@@ -1,119 +0,0 @@
-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] },
-	},
-};

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -0,0 +1,38 @@
+// Hands the parent's height down to the active pane and lets the pane scroll
+// its own content, so TopNav and the tab bar stay put. Child combinators only
+// (nested Tabs must not be caught).
+.routeTab {
+	flex: 1;
+	min-height: 0;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) {
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active)
+	> :global(.overlay-scrollbar) {
+	flex: 1;
+	min-height: 0;
+}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,6 +5,11 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
+jest.mock('./RouteTab.module.scss', () => ({
+	__esModule: true,
+	default: { routeTab: 'routeTab' },
+}));
+
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -74,6 +79,36 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
+	it('applies the layout class alongside a custom className', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab
+					history={history}
+					routes={testRoutes}
+					activeKey="Tab1"
+					className="custom-tabs"
+				/>
+			</Router>,
+		);
+		expect(container.querySelector('.ant-tabs')).toHaveClass(
+			'routeTab',
+			'custom-tabs',
+		);
+	});
+
+	it('renders the active tab content inside an overlay scrollbar', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(
+			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
+		).toHaveTextContent('Dummy Component 1');
+	});
+
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,20 +5,32 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
+import styles from './RouteTab.module.scss';
+
 interface Params {
 	[key: string]: string;
 }
 
+/**
+ * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
+ * stays put. Mounted as the page root the pane is bounded to the viewport; inside
+ * a plain block wrapper the scroller is inert and the page scrolls as usual.
+ * Pane content that needs a bounded box must size itself with `height: 100%`
+ * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
+ */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
+	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -50,11 +62,16 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: <Component />,
+		children: (
+			<OverlayScrollbar>
+				<Component />
+			</OverlayScrollbar>
+		),
 	}));
 
 	return (
 		<Tabs
+			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/components/SignozModal/stories/SignozModal.stories.tsx

@@ -1,64 +0,0 @@
-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');
-	},
-};

frontend/src/components/TableV3/TableV3.tsx

@@ -71,7 +71,7 @@ interface ITableConfig {
 		instance: Virtualizer<HTMLDivElement, Element>,
 	) => void;
 }
-export interface ITableV3Props<T> {
+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: undefined,
+	virtualiserRef: null,
 };

frontend/src/components/TableV3/stories/TableV3.stories.tsx

@@ -1,54 +0,0 @@
-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: [] },
-};

frontend/src/components/TanStackTableView/stories/TanStackTableView.stories.tsx

@@ -1,239 +0,0 @@
-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');
-	},
-};

frontend/src/constants/localStorage.ts

@@ -47,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

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

@@ -450,12 +450,6 @@ 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]);
 

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

@@ -1,23 +1,15 @@
-.api-monitoring-page {
-	display: flex;
-	height: 100%;
+.api-monitoring-explorer {
+	.api-quick-filters-header {
+		padding: 12px;
+		border-bottom: 1px solid var(--l1-border);
+		border-right: 1px solid var(--l1-border);
 
-	.api-quick-filter-left-section {
-		width: 0%;
-		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: 6px;
 
-		.api-quick-filters-header {
-			padding: 12px;
-			border-bottom: 1px solid var(--l1-border);
-			border-right: 1px solid var(--l1-border);
-
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			font-size: 14px;
-			line-height: 18px;
-		}
+		font-size: 14px;
+		line-height: 18px;
 	}
 
 	.api-module-right-section {
@@ -161,16 +153,6 @@
 			}
 		}
 	}
-
-	&.filter-visible {
-		.api-quick-filter-left-section {
-			width: 260px;
-		}
-
-		.api-module-right-section {
-			width: calc(100% - 260px);
-		}
-	}
 }
 
 .no-filtered-domains-message-container {

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

@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -20,20 +19,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className={cx('api-monitoring-page', 'filter-visible')}>
-				<section className="api-quick-filter-left-section">
-					<QuickFilters
-						className="qf-api-monitoring"
-						source={QuickFiltersSource.API_MONITORING}
-						signal={SignalType.API_MONITORING}
-						showFilterCollapse={false}
-						showQueryName={false}
-						handleFilterVisibilityChange={(): void => {}}
-						useFieldApis={quickFilterFieldApis}
-					/>
-				</section>
+			<QuickFiltersLayout
+				className="api-monitoring-explorer"
+				showFilters
+				quickFilterProps={{
+					className: 'qf-api-monitoring',
+					source: QuickFiltersSource.API_MONITORING,
+					signal: SignalType.API_MONITORING,
+					showFilterCollapse: false,
+					showQueryName: false,
+					handleFilterVisibilityChange: (): void => {},
+					useFieldApis: quickFilterFieldApis,
+				}}
+			>
 				<DomainList />
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -53,6 +53,10 @@
 		z-index: 0;
 		background: var(--l1-background);
 
+		// Column so the bottom strip sits under the scrolling content, not inside it.
+		display: flex;
+		flex-direction: column;
+
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -70,7 +74,9 @@
 
 .chat-support-gateway {
 	position: fixed;
-	bottom: 20px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: calc(20px + var(--bottom-strip-height, 0px));
 	right: 20px;
 	z-index: 1000;
 

frontend/src/container/AppLayout/index.tsx

@@ -43,6 +43,7 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
+import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -51,6 +52,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -402,6 +404,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
+	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -868,6 +871,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
+
+						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
+							<BottomStrip />
+						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (

frontend/src/container/AppLayout/styles.ts

@@ -12,8 +12,12 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;
 
+// Takes the height left in `.app-content` after the bottom strip.
+// `min-height: 0` is not needed right now, overlayscrollbars already sets
+// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	height: 100%;
+	flex: 1;
+	min-height: 0;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -0,0 +1,40 @@
+.strip {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+
+	flex-shrink: 0;
+	height: var(--bottom-strip-height);
+	padding: 0 12px;
+
+	background: var(--l2-background);
+	border-top: 1px solid var(--l2-border);
+
+	// font styles
+	font-family: var(--font-family-sf-mono, monospace);
+	font-size: 13px;
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-none);
+
+	// Above page content, below the body-portalled overlays that are meant to
+	// cover the strip.
+	position: relative;
+	z-index: 1;
+}
+
+.left,
+.right {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-width: 0;
+}
+
+// Temporary placeholder for the left slot. Replaced later.
+.version {
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/src/container/BottomStrip/__tests__/BottomStrip.test.tsx

@@ -0,0 +1,49 @@
+import { render } from 'tests/test-utils';
+
+import BottomStrip, {
+	BOTTOM_STRIP_HEIGHT,
+	BOTTOM_STRIP_HEIGHT_VAR,
+	BOTTOM_STRIP_ON_CLASS,
+} from '..';
+
+describe('BottomStrip', () => {
+	it('publishes the body class and height property while mounted', () => {
+		const { unmount } = render(<BottomStrip />);
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		unmount();
+
+		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
+		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
+			'',
+		);
+	});
+
+	// The string is whatever the Go build injected, so it is rendered untouched —
+	// same as SideNav. Release tags carry the "v", local builds do not.
+	it.each([['v0.134.67'], ['main-64f1c2a']])(
+		'renders the build version %p exactly as given',
+		(version) => {
+			const { getByTestId } = render(<BottomStrip />, undefined, {
+				appContextOverrides: {
+					versionData: { version, ee: 'Y', setupCompleted: true },
+				},
+			});
+
+			expect(getByTestId('bottom-strip-version')).toHaveTextContent(version);
+		},
+	);
+
+	it('renders the strip without a version when none is available', () => {
+		const { getByTestId, queryByTestId } = render(<BottomStrip />, undefined, {
+			appContextOverrides: { versionData: null },
+		});
+
+		expect(getByTestId('bottom-strip')).toBeInTheDocument();
+		expect(queryByTestId('bottom-strip-version')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/BottomStrip/index.tsx

@@ -0,0 +1,42 @@
+import { useLayoutEffect } from 'react';
+import { useAppContext } from 'providers/App/App';
+
+import styles from './BottomStrip.module.scss';
+
+export const BOTTOM_STRIP_HEIGHT = 24;
+
+export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
+export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
+
+function BottomStrip(): JSX.Element {
+	const { versionData } = useAppContext();
+	const version = versionData?.version?.trim();
+
+	useLayoutEffect(() => {
+		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
+		document.body.style.setProperty(
+			BOTTOM_STRIP_HEIGHT_VAR,
+			`${BOTTOM_STRIP_HEIGHT}px`,
+		);
+
+		return (): void => {
+			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
+			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
+		};
+	}, []);
+
+	return (
+		<div className={styles.strip} data-testid="bottom-strip">
+			<div className={styles.left}>
+				{version && (
+					<span className={styles.version} data-testid="bottom-strip-version">
+						{version}
+					</span>
+				)}
+			</div>
+			<div className={styles.right} />
+		</div>
+	);
+}
+
+export default BottomStrip;

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -1,6 +1,8 @@
 .create-alert-v2-footer {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -207,12 +207,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
-								<Button
-									variant="link"
-									color="none"
-									data-testid="custom-domain-menu-trigger"
-									disabled={isFetchingHosts}
-								>
+								<Button variant="link" color="none" disabled={isFetchingHosts}>
 									<Link2 size={12} />
 									<span>{stripProtocol(activeHost?.url ?? '')}</span>
 									<ChevronDown size={12} />

frontend/src/container/Download/Download.tsx

@@ -71,7 +71,6 @@ 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"

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,6 +1,8 @@
 .explorer-options-container {
 	position: fixed;
-	bottom: 0px;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -1,6 +1,8 @@
 .explorer-option-droppable-container {
 	position: fixed;
-	bottom: 0;
+	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
+	// UI belongs in the bounded layout, not in another offset here.
+	bottom: var(--bottom-strip-height, 0px);
 	width: -webkit-fill-available;
 	height: 24px;
 	display: flex;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.module.scss

@@ -1,6 +1,7 @@
 .tableWrapper {
 	display: flex;
 	flex-direction: column;
+	gap: var(--spacing-4);
 }
 
 .toolbar {

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -2,10 +2,11 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--spacing-8);
 
-	:global(.ant-tabs-tabpane) {
-		padding: var(--spacing-0) var(--spacing-8);
-	}
+	--tabs-content-padding: 0;
+	--tabs-text-color: var(--l1-foreground);
+	--tabs-active-text-color: var(--l1-foreground);
 }
 
 .pageError {

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -1,8 +1,9 @@
 import { useCallback } from 'react';
-import { Tabs } from 'antd';
+import { Divider } from '@signozhq/ui/divider';
+import { Tabs } from '@signozhq/ui/tabs';
 import { useConfirmableAction } from 'hooks/useConfirmableAction';
 
-import AttributeMappingActions from './components/AttributeMappingActions/AttributeMappingActions';
+import AttributeMappingHeader from './components/AttributeMappingHeader/AttributeMappingHeader';
 import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
 import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
@@ -58,23 +59,24 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			className={styles.llmObservabilityAttributeMapping}
 			data-testid="llm-observability-attribute-mapping-page"
 		>
+			<AttributeMappingHeader
+				isDirty={editor.isDirty}
+				isSaving={editor.isSaving}
+				onDiscard={discardConfirm.request}
+				onSave={editor.save}
+			/>
+
 			{editor.saveError && (
 				<div className={styles.pageError} role="alert">
 					{editor.saveError}
 				</div>
 			)}
+			<Divider />
 
 			<Tabs
-				defaultActiveKey={MAPPINGS_TAB_KEY}
+				testId="attribute-mapping-tabs"
+				defaultValue={MAPPINGS_TAB_KEY}
 				items={tabItems}
-				tabBarExtraContent={
-					<AttributeMappingActions
-						isDirty={editor.isDirty}
-						isSaving={editor.isSaving}
-						onDiscard={discardConfirm.request}
-						onSave={editor.save}
-					/>
-				}
 			/>
 			{groupDrawer.isOpen && (
 				<GroupFormDrawer

frontend/src/container/LLMObservability/AttributeMapping/TestTab/__tests__/TestTab.test.tsx

@@ -63,26 +63,6 @@ const EDITED_SPAN_JSON = `{
   }
 }`;
 
-const SPAN_WITH_EXTRA_KEY_JSON = `{
-  "attributes": {
-    "input.value": "What is quantum computing?"
-  },
-  "resource": {
-    "service.name": "llm-gateway"
-  },
-  "demo": {
-    "name": "demo"
-  }
-}`;
-
-const EXTRA_KEY_RESULT_SPAN = {
-	attributes: {
-		'input.value': 'What is quantum computing?',
-		[MAPPED_ATTRIBUTE_KEY]: 'What is quantum computing?',
-	},
-	resource: { 'service.name': 'llm-gateway' },
-};
-
 const SPAN_INPUT_KEY = LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN;
 
 describe('TestTab — sample-span flow', () => {
@@ -124,47 +104,6 @@ describe('TestTab — sample-span flow', () => {
 		expect(screen.queryByTestId('test-error')).not.toBeInTheDocument();
 	});
 
-	it('trims extra top-level keys and sends only the envelope', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let body: { spans?: { attributes?: Record<string, unknown> }[] } | undefined;
-		server.use(
-			rest.post(TEST_ENDPOINT, async (req, res, ctx) => {
-				body = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(makeTestResponse([EXTRA_KEY_RESULT_SPAN])),
-				);
-			}),
-		);
-
-		render(<LLMObservabilityAttributeMapping />);
-
-		await user.click(screen.getByRole('tab', { name: 'Test' }));
-		const runBtn = await screen.findByTestId('run-test-button');
-
-		await user.clear(screen.getByTestId('monaco'));
-		await user.paste(SPAN_WITH_EXTRA_KEY_JSON);
-
-		await waitFor(() =>
-			expect(screen.getByTestId('monaco')).toHaveValue(SPAN_WITH_EXTRA_KEY_JSON),
-		);
-		expect(screen.queryByTestId('test-input-error')).not.toBeInTheDocument();
-
-		await user.click(runBtn);
-
-		await expect(
-			screen.findByTestId('test-results'),
-		).resolves.toBeInTheDocument();
-		expect(body?.spans?.[0]?.attributes).toStrictEqual({
-			'input.value': 'What is quantum computing?',
-		});
-		expect(screen.getByTestId('test-result-0-attributes')).toHaveTextContent(
-			MAPPED_ATTRIBUTE_KEY,
-		);
-		expect(screen.getByTestId('test-result-0-resource')).toBeInTheDocument();
-		expect(screen.getByText('populated')).toBeInTheDocument();
-	});
-
 	it('surfaces a backend error and renders no results', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		server.use(

frontend/src/container/LLMObservability/AttributeMapping/TestTab/__tests__/testPayload.test.ts

@@ -1,51 +0,0 @@
-import { parseSpanInput } from '../testPayload';
-
-describe('parseSpanInput', () => {
-	it('reads the envelope and trims extra top-level keys', () => {
-		const span = parseSpanInput(`{
-			"attributes": { "llm.model_name": "gpt-4o" },
-			"resource": { "service.name": "llm-gateway" },
-			"demo": { "name": "demo" }
-		}`);
-
-		expect(span.attributes).toStrictEqual({ 'llm.model_name': 'gpt-4o' });
-		expect(span.resource).toStrictEqual({ 'service.name': 'llm-gateway' });
-	});
-
-	it('reads a clean envelope', () => {
-		const span = parseSpanInput(`{
-			"attributes": { "llm.model_name": "gpt-4o" },
-			"resource": { "service.name": "llm-gateway" }
-		}`);
-
-		expect(span.attributes).toStrictEqual({ 'llm.model_name': 'gpt-4o' });
-		expect(span.resource).toStrictEqual({ 'service.name': 'llm-gateway' });
-	});
-
-	it('treats an envelope-less object as a bare attribute map', () => {
-		const span = parseSpanInput('{ "llm.model_name": "gpt-4o", "demo": "x" }');
-
-		expect(span.attributes).toStrictEqual({
-			'llm.model_name': 'gpt-4o',
-			demo: 'x',
-		});
-		expect(span.resource).toStrictEqual({});
-	});
-
-	it('drops an envelope key that is not an object', () => {
-		const span = parseSpanInput(
-			'{ "attributes": { "llm.provider": "openai" }, "resource": "oops" }',
-		);
-
-		expect(span.attributes).toStrictEqual({ 'llm.provider': 'openai' });
-		expect(span.resource).toStrictEqual({});
-	});
-
-	it.each([
-		['   ', 'Paste a JSON span object to run the test.'],
-		['{ "a": }', 'Invalid JSON — check for trailing commas or missing quotes.'],
-		['[1, 2]', 'Span must be a JSON object of attribute key-value pairs.'],
-	])('rejects %p', (input, message) => {
-		expect(() => parseSpanInput(input)).toThrow(message);
-	});
-});

frontend/src/container/LLMObservability/AttributeMapping/TestTab/testPayload.ts

@@ -51,9 +51,13 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
 	return value !== null && typeof value === 'object' && !Array.isArray(value);
 }
 
-// Any other top-level key (a real span carries name, spanId, kind...) is trimmed.
 function isSpanEnvelope(parsed: Record<string, unknown>): boolean {
-	return isPlainObject(parsed.attributes) || isPlainObject(parsed.resource);
+	const keys = Object.keys(parsed);
+	return (
+		keys.length > 0 &&
+		keys.every((key) => key === 'attributes' || key === 'resource') &&
+		(isPlainObject(parsed.attributes) || isPlainObject(parsed.resource))
+	);
 }
 
 export function parseSpanInput(input: string): SpantypesSpanMapperTestSpanDTO {

frontend/src/container/LLMObservability/AttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -72,15 +72,20 @@ describe('LLMObservabilityAttributeMapping', () => {
 		const attributeMappingsTab = screen.getByRole('tab', {
 			name: 'Attribute Mappings',
 		});
-		expect(attributeMappingsTab).toHaveAttribute('aria-selected', 'true');
+		expect(attributeMappingsTab).toHaveAttribute('data-state', 'active');
 		await expect(
 			screen.findByTestId('attribute-mappings-tab'),
 		).resolves.toBeInTheDocument();
 	});
 
-	it('renders no Save/Discard while pristine', () => {
+	it('renders the header with its description and no Save/Discard while pristine', () => {
 		render(<LLMObservabilityAttributeMapping />);
 
+		expect(
+			screen.getByText(
+				'Configure source-to-target attribute remapping for LLM traces',
+			),
+		).toBeInTheDocument();
 		// The actions only appear once there are staged changes.
 		expect(screen.queryByTestId('save-changes-btn')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
@@ -119,11 +124,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 
 		await user.click(screen.getByRole('tab', { name: 'Attribute Mappings' }));
 		await screen.findByTestId('attribute-mappings-tab');
-		// antd keeps a visited pane mounted and marks it aria-hidden, rather than
-		// unmounting it the way the previous tabs did.
-		expect(
-			screen.getByTestId('span-json-editor').closest('[role="tabpanel"]'),
-		).toHaveAttribute('aria-hidden', 'true');
+		expect(screen.queryByTestId('span-json-editor')).not.toBeInTheDocument();
 
 		await user.click(screen.getByRole('tab', { name: 'Test' }));
 

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingActions/AttributeMappingActions.module.scss

@@ -1,10 +0,0 @@
-.actions {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.unsavedChanges {
-	font-size: var(--periscope-font-size-base);
-	color: var(--accent-amber);
-}

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingActions/AttributeMappingActions.tsx

@@ -1,53 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-
-import { useCanManageAttributeMapping } from '../../hooks/useCanManageAttributeMapping';
-import styles from './AttributeMappingActions.module.scss';
-
-interface AttributeMappingActionsProps {
-	isDirty: boolean;
-	isSaving: boolean;
-	onDiscard: () => void;
-	onSave: () => void;
-}
-
-function AttributeMappingActions({
-	isDirty,
-	isSaving,
-	onDiscard,
-	onSave,
-}: AttributeMappingActionsProps): JSX.Element | null {
-	const canManage = useCanManageAttributeMapping();
-
-	if (!canManage || !isDirty) {
-		return null;
-	}
-
-	return (
-		<div className={styles.actions}>
-			<span className={styles.unsavedChanges} data-testid="unsaved-changes">
-				Unsaved changes
-			</span>
-			<Button
-				variant="outlined"
-				color="secondary"
-				onClick={onDiscard}
-				disabled={isSaving}
-				testId="discard-changes-btn"
-			>
-				Discard
-			</Button>
-			<Button
-				variant="solid"
-				color="primary"
-				onClick={onSave}
-				loading={isSaving}
-				disabled={isSaving}
-				testId="save-changes-btn"
-			>
-				{isSaving ? 'Saving…' : 'Save changes'}
-			</Button>
-		</div>
-	);
-}
-
-export default AttributeMappingActions;

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss

@@ -0,0 +1,18 @@
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	margin-left: var(--spacing-2);
+	margin-top: var(--spacing-4);
+}
+
+.pageHeaderActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-6);
+}
+
+.unsavedChanges {
+	font-size: var(--periscope-font-size-base);
+	color: var(--accent-amber);
+}

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+
+import { useCanManageAttributeMapping } from '../../hooks/useCanManageAttributeMapping';
+import styles from './AttributeMappingHeader.module.scss';
+
+interface AttributeMappingHeaderProps {
+	isDirty: boolean;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function AttributeMappingHeader({
+	isDirty,
+	isSaving,
+	onDiscard,
+	onSave,
+}: AttributeMappingHeaderProps): JSX.Element {
+	const canManage = useCanManageAttributeMapping();
+	return (
+		<header className={styles.pageHeader}>
+			<Typography.Text as="p" size="base" color="muted">
+				Configure source-to-target attribute remapping for LLM traces
+			</Typography.Text>
+			{canManage && isDirty && (
+				<div className={styles.pageHeaderActions}>
+					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
+						Unsaved changes
+					</span>
+					<Button
+						variant="outlined"
+						color="secondary"
+						onClick={onDiscard}
+						disabled={isSaving}
+						testId="discard-changes-btn"
+					>
+						Discard
+					</Button>
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={onSave}
+						loading={isSaving}
+						disabled={isSaving}
+						testId="save-changes-btn"
+					>
+						{isSaving ? 'Saving…' : 'Save changes'}
+					</Button>
+				</div>
+			)}
+		</header>
+	);
+}
+
+export default AttributeMappingHeader;

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/GroupFormDrawer.module.scss

@@ -1,7 +1,4 @@
 .groupForm {
-	--input-foreground: var(--l1-foreground);
-	--input-placeholder-color: var(--l3-foreground);
-
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-10);
@@ -21,8 +18,11 @@
 }
 
 .groupFormLabel {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-semibold);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--l3-foreground);
 }
 
 .groupFormHint {

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/components/ConditionKeyList/ConditionKeyList.module.scss

@@ -5,12 +5,17 @@
 }
 
 .label {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-semibold);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--l3-foreground);
 }
 
 .labelHint {
-	color: var(--l3-foreground);
+	font-weight: var(--font-weight-normal);
+	text-transform: none;
+	letter-spacing: normal;
 }
 
 .keys {

frontend/src/container/LLMObservability/AttributeMapping/components/MapperFormDrawer/MapperFormDrawer.module.scss

@@ -1,6 +1,4 @@
 .form {
-	--input-foreground: var(--l1-foreground);
-	--input-placeholder-color: var(--l3-foreground);
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-10);
@@ -14,12 +12,17 @@
 }
 
 .label {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-semibold);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--l3-foreground);
 }
 
 .labelHint {
-	color: var(--l3-foreground);
+	font-weight: var(--font-weight-normal);
+	text-transform: none;
+	letter-spacing: normal;
 }
 
 .hint {

frontend/src/container/LLMObservability/Explorer/Explorer.styles.scss

@@ -65,8 +65,6 @@
 }
 
 .trace-explorer-page {
-	display: flex;
-
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -75,32 +73,8 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
-	.filter {
-		width: 260px;
-		height: 100%;
-		min-height: 100vh;
-
-		border-right: 0px;
-		border: 1px solid var(--l1-border);
-		background-color: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-			width: 258px;
-		}
-	}
-
 	.trace-explorer {
-		width: 100%;
 		background: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-		}
-
 		border-color: var(--l1-border);
 	}
-	.trace-explorer.filters-expanded {
-		width: calc(100% - 260px);
-	}
 }

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -2,12 +2,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -188,26 +186,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div
+			<QuickFiltersLayout
 				className="trace-explorer-page"
-				data-testid="llm-observability-explorer"
+				testId="llm-observability-explorer"
+				showFilters={isOpen}
+				quickFilterProps={{
+					className: 'qf-traces-explorer',
+					source: QuickFiltersSource.AI_OBSERVABILITY,
+					signal: SignalType.AI_OBSERVABILITY,
+					useFieldApis: quickFiltersFieldApis,
+					handleFilterVisibilityChange: (): void => {
+						setOpen(!isOpen);
+					},
+				}}
 			>
-				<Card className="filter" hidden={!isOpen}>
-					<QuickFilters
-						className="qf-traces-explorer"
-						source={QuickFiltersSource.AI_OBSERVABILITY}
-						signal={SignalType.AI_OBSERVABILITY}
-						useFieldApis={quickFiltersFieldApis}
-						handleFilterVisibilityChange={(): void => {
-							setOpen(!isOpen);
-						}}
-					/>
-				</Card>
-				<div
-					className={cx('trace-explorer', {
-						'filters-expanded': isOpen,
-					})}
-				>
+				<div className="trace-explorer">
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -291,7 +284,7 @@ function Explorer(): JSX.Element {
 						)}
 					</div>
 				</div>
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/LLMObservability/Explorer/TracesTable/__tests__/TracesTable.test.tsx

@@ -11,12 +11,10 @@ const PERSISTED_KEY = `@signoz/table-columns/${STORAGE_KEY}`;
 
 const ROWS = [{ id: 't1', trace_id: 'abc', 'service.name': 'checkout' }];
 
-// An aggregate outside the default order starts hidden, so the persisted
-// defaults are observable.
 const COLUMNS = buildTraceViewColumns([
 	{ name: 'trace_id' },
 	{ name: 'service.name', fieldContext: 'resource' },
-	{ name: 'unlisted_aggregate' },
+	{ name: 'start_time' },
 ]);
 
 function RaceHarness(): JSX.Element {
@@ -68,9 +66,7 @@ describe('TracesTable column-init race', () => {
 
 		await expect(screen.findByRole('table')).resolves.toBeInTheDocument();
 		expect(screen.getByText('trace_id')).toBeInTheDocument();
-		expect(screen.queryByText('unlisted_aggregate')).not.toBeInTheDocument();
-		expect(persistedState()?.hiddenColumnIds).toStrictEqual([
-			'unlisted_aggregate',
-		]);
+		expect(screen.queryByText('start_time')).not.toBeInTheDocument();
+		expect(persistedState()?.hiddenColumnIds).toStrictEqual(['start_time']);
 	});
 });

frontend/src/container/LLMObservability/Explorer/TracesView/__tests__/TracesView.test.tsx

@@ -128,7 +128,14 @@ describe('TracesView column persistence', () => {
 		await findTable();
 
 		await waitFor(() => {
-			expect(persistedState()?.hiddenColumnIds).toStrictEqual([]);
+			expect(persistedState()?.hiddenColumnIds).toStrictEqual([
+				'start_time',
+				'end_time',
+				'error_count',
+				'input',
+				'output',
+				'trace:tool_call_count:float64',
+			]);
 		});
 		expect(screen.getByText(OPTIONS_TRIGGER)).toBeInTheDocument();
 		expect(screen.getByText('llm_call_count')).toBeInTheDocument();
@@ -153,7 +160,7 @@ describe('TracesView column persistence', () => {
 		expect(screen.queryByText(OPTIONS_TRIGGER)).not.toBeInTheDocument();
 	});
 
-	it('renders the display-only columns when the field keys fail', async () => {
+	it('renders only the default-visible columns when the field keys fail', async () => {
 		mockFieldKeysFailure();
 		renderTracesView();
 
@@ -161,8 +168,8 @@ describe('TracesView column persistence', () => {
 
 		expect(screen.getByText('root_span_name')).toBeInTheDocument();
 		expect(screen.getByText('trace_id')).toBeInTheDocument();
-		expect(screen.getByText('input')).toBeInTheDocument();
-		expect(screen.queryByText('llm_call_count')).not.toBeInTheDocument();
+		expect(screen.queryByText('input')).not.toBeInTheDocument();
+		expect(screen.queryByText('output')).not.toBeInTheDocument();
 	});
 
 	it('leaves an existing selection untouched while the field keys fail', async () => {

frontend/src/container/LLMObservability/Explorer/TracesView/__tests__/useTraceViewColumns.test.tsx

@@ -109,24 +109,17 @@ describe('useTraceViewColumns', () => {
 		const { result } = await renderColumns();
 
 		expect(columnNames(result.current.columns)).toStrictEqual([
-			'trace_id',
 			'service.name',
 			'root_span_name',
-			'estimated_total_cost',
 			'trace_duration_nano',
 			'span_count',
-			'total_tokens',
-			'input_tokens',
-			'output_tokens',
-			'distinct_tool_count',
-			'llm_call_count',
-			'tool_call_count',
+			'trace_id',
 			'start_time',
 			'end_time',
 			'error_count',
 			'input',
 			'output',
-			'max_llm_duration_nano',
+			...AGGREGATE_KEYS,
 		]);
 	});
 
@@ -134,24 +127,14 @@ describe('useTraceViewColumns', () => {
 		const { result } = await renderColumns();
 
 		expect(fieldNames(result.current.selectedFields)).toStrictEqual([
-			'trace_id',
 			'service.name',
 			'root_span_name',
-			'estimated_total_cost',
 			'trace_duration_nano',
 			'span_count',
-			'total_tokens',
-			'input_tokens',
-			'output_tokens',
-			'distinct_tool_count',
+			'trace_id',
 			'llm_call_count',
-			'tool_call_count',
-			'start_time',
-			'end_time',
-			'error_count',
-			'input',
-			'output',
-			'max_llm_duration_nano',
+			'total_tokens',
+			'estimated_total_cost',
 		]);
 	});
 
@@ -210,24 +193,14 @@ describe('useTraceViewColumns', () => {
 
 			expect(result.current.canPersistColumns).toBe(true);
 			expect(fieldNames(result.current.selectedFields)).toStrictEqual([
-				'trace_id',
 				'service.name',
 				'root_span_name',
-				'estimated_total_cost',
 				'trace_duration_nano',
 				'span_count',
-				'total_tokens',
-				'input_tokens',
-				'output_tokens',
-				'distinct_tool_count',
+				'trace_id',
 				'llm_call_count',
-				'tool_call_count',
-				'start_time',
-				'end_time',
-				'error_count',
-				'input',
-				'output',
-				'max_llm_duration_nano',
+				'total_tokens',
+				'estimated_total_cost',
 			]);
 		});
 	});

frontend/src/container/LLMObservability/Explorer/TracesView/configs.tsx

@@ -5,43 +5,20 @@ import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-/** Always present: it is the row's link to the trace, but it can be reordered. */
+/** Always visible: it is the row's link to the trace. */
 export const TRACE_ID_COLUMN_ID = 'trace_id';
 
-/** Fallback order, until the user drags a column; unlisted fields keep the order the keys endpoint returns them in. */
-const DEFAULT_COLUMN_ORDER = [
-	TRACE_ID_COLUMN_ID,
+/** Everything else starts hidden; only applied at first init, since the store persists hidden ids. */
+const DEFAULT_VISIBLE_FIELDS = new Set([
 	'service.name',
 	'root_span_name',
-	'estimated_total_cost',
 	'trace_duration_nano',
 	'span_count',
-	'total_tokens',
-	'input_tokens',
-	'output_tokens',
-	'distinct_tool_count',
 	'llm_call_count',
-	'tool_call_count',
-	'start_time',
-	'end_time',
-	'error_count',
-	'input',
-	'output',
-	'max_llm_duration_nano',
-];
-
-const orderRank = (field: TelemetryFieldKey): number => {
-	const index = DEFAULT_COLUMN_ORDER.indexOf(field.name);
-	return index === -1 ? Number.MAX_SAFE_INTEGER : index;
-};
-
-export const sortByDefaultOrder = (
-	fields: TelemetryFieldKey[],
-): TelemetryFieldKey[] =>
-	[...fields].sort((a, b) => orderRank(a) - orderRank(b));
-
-/** Anything the keys endpoint adds beyond the ordered set starts hidden; only applied at first init, since the store persists hidden ids. */
-const DEFAULT_VISIBLE_FIELDS = new Set(DEFAULT_COLUMN_ORDER);
+	'total_tokens',
+	'estimated_total_cost',
+	TRACE_ID_COLUMN_ID,
+]);
 
 export const buildTraceViewColumns = (
 	fields: TelemetryFieldKey[],
@@ -50,7 +27,7 @@ export const buildTraceViewColumns = (
 		...getFieldColumn(field),
 		defaultVisibility: DEFAULT_VISIBLE_FIELDS.has(field.name),
 		// The shared column builder pins anything in TIMESTAMP_FIELD_NAMES; these stay movable.
-		enableMove: true,
+		enableMove: field.name !== TRACE_ID_COLUMN_ID,
 		enableRemove: field.name !== TRACE_ID_COLUMN_ID,
 		canBeHidden: field.name !== TRACE_ID_COLUMN_ID,
 	}));

frontend/src/container/LLMObservability/Explorer/TracesView/useTraceViewColumns.ts

@@ -21,11 +21,7 @@ import {
 	TRACE_VIEW_COLUMN_EXTRA_FIELDS,
 	TRACE_VIEW_FIELD_KEYS,
 } from '../constants';
-import {
-	buildTraceViewColumns,
-	sortByDefaultOrder,
-	TRACE_ID_COLUMN_ID,
-} from './configs';
+import { buildTraceViewColumns, TRACE_ID_COLUMN_ID } from './configs';
 
 const STORAGE_KEY = LOCALSTORAGE.AI_OBSERVABILITY_TRACE_VIEW_COLUMNS;
 
@@ -59,10 +55,7 @@ export function useTraceViewColumns(): UseTraceViewColumns {
 	);
 
 	const availableFields = useMemo(
-		() =>
-			sortByDefaultOrder(
-				mergeExtraFields(TRACE_VIEW_COLUMN_EXTRA_FIELDS, fetchedFields),
-			),
+		() => mergeExtraFields(TRACE_VIEW_COLUMN_EXTRA_FIELDS, fetchedFields),
 		[fetchedFields],
 	);