feat(services): show the service count in the bottom strip

The page passes the values rather than the strip node fetching them, since the
trace query key includes the selected span and a self-fetching node would issue
a request on every span click. Header counts stay as is.

.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/contributing/go/handler.md

@@ -179,7 +179,6 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
-- **Stability**: Maturity marker (`handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`) emitted as the `x-stability` extension on every operation. Unset is emitted as `stable`.
 
 The generic handler:
 

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/AppRoutes/index.tsx

@@ -12,13 +12,14 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
-import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -58,7 +59,6 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
-		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,6 +66,8 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
+	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -253,7 +255,9 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
+		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
+			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -263,71 +267,32 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname]);
+	}, [pathname, isSavedViewEnabled]);
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	// Identity for the Pylon widget. Whether this user gets Pylon at all is
+	// `useChatSupport`'s call — this only fills in who they are.
 	useEffect(() => {
-		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
-		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
-		// to something went wrong which would ideally need a reload.
-		if (
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo
-		) {
-			let isChatSupportEnabled = false;
-			let isPremiumSupportEnabled = false;
-			if (featureFlags && featureFlags.length > 0) {
-				isChatSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
-						?.active || false;
-
-				isPremiumSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
-						?.active || false;
-			}
-			const showAddCreditCardModal =
-				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
-
-			if (
-				isLoggedInState &&
-				isChatSupportEnabled &&
-				!showAddCreditCardModal &&
-				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				window.signozBootData?.settings?.pylon?.enabled
-			) {
-				const email = user.email || '';
-				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-				let emailHash = '';
-
-				if (email && secret) {
-					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-				}
-
-				window.pylon = {
-					chat_settings: {
-						app_id: window.signozBootData?.settings?.pylon?.appId,
-						email: user.email,
-						name: user.displayName || user.email,
-						email_hash: emailHash,
-					},
-				};
-			}
+		if (chatSupport !== ChatSupportState.Pylon) {
+			return;
 		}
-	}, [
-		isLoggedInState,
-		user,
-		pathname,
-		trialInfo?.trialConvertedToSubscription,
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		activeLicense,
-		trialInfo,
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-	]);
+
+		const email = user.email || '';
+		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+		let emailHash = '';
+
+		if (email && secret) {
+			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+		}
+
+		window.pylon = {
+			chat_settings: {
+				app_id: window.signozBootData?.settings?.pylon?.appId,
+				email: user.email,
+				name: user.displayName || user.email,
+				email_hash: emailHash,
+			},
+		};
+	}, [chatSupport, user]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

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/AddCreditCardModal/AddCreditCardModal.tsx

@@ -0,0 +1,103 @@
+import { useMutation } from 'react-query';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+
+interface AddCreditCardModalProps {
+	open: boolean;
+	onClose: () => void;
+	onAddCreditCard?: () => void;
+}
+
+/**
+ * Shown to trial users who have not added a card, in place of chat support.
+ * Submitting creates the subscription and opens the returned billing URL.
+ */
+function AddCreditCardModal({
+	open,
+	onClose,
+	onAddCreditCard,
+}: AddCreditCardModalProps): JSX.Element {
+	const { notifications } = useNotifications();
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
+	);
+
+	const handleAddCreditCard = (): void => {
+		onAddCreditCard?.();
+		updateCreditCard({ url: getBaseUrl() });
+	};
+
+	return (
+		<Modal
+			className="add-credit-card-modal"
+			title={<span className="title">Add Credit Card for Chat Support</span>}
+			open={open}
+			closable
+			onCancel={onClose}
+			destroyOnClose
+			footer={[
+				<Button
+					key="cancel"
+					onClick={onClose}
+					className="cancel-btn"
+					icon={<X size={16} />}
+				>
+					Cancel
+				</Button>,
+				<AuthZTooltip
+					key="submit"
+					checks={[SubscriptionCreatePermission]}
+					withPortal={false}
+				>
+					<Button
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
+					>
+						Add Credit Card
+					</Button>
+				</AuthZTooltip>,
+			]}
+		>
+			<Typography.Text className="add-credit-card-text">
+				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
+				Add a credit card to access SigNoz chat support to your workspace.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
+
+export default AddCreditCardModal;

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,63 +1,15 @@
 import { useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
+import { MessageSquareText } from '@signozhq/icons';
 
 export default function ChatSupportGateway(): JSX.Element {
-	const { notifications } = useNotifications();
-
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
 	const { pathname } = useLocation();
 
-	const handleAddCreditCard = (): void => {
-		logEvent('Add Credit card modal: Clicked', {
-			source: `chat support icon`,
-			page: pathname,
-		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
-	};
-
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -76,47 +28,16 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
 		</>
 	);
 }

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/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,22 +1,14 @@
 import { useMemo, useState } from 'react';
-import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Button, Tooltip } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp, CreditCard, X } from '@signozhq/icons';
+import { CircleHelp } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -41,7 +33,6 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -119,43 +110,12 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
-
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -175,47 +135,11 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={handleAddCreditCard}
+			/>
 		</div>
 	) : null;
 }

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/AllError/StripInfo/StripInfo.tsx

@@ -0,0 +1,12 @@
+import StripTypography from 'container/BottomStrip/components/StripTypography/StripTypography';
+import { pluralize } from 'utils/pluralize';
+
+interface StripInfoProps {
+	count: number;
+}
+
+function StripInfo({ count }: StripInfoProps): JSX.Element {
+	return <StripTypography>{pluralize(count, 'exception')}</StripTypography>;
+}
+
+export default StripInfo;

frontend/src/container/AllError/StripInfo/__tests__/StripInfo.test.tsx

@@ -0,0 +1,23 @@
+import { render } from 'tests/test-utils';
+
+import StripInfo from '../StripInfo';
+
+describe('StripInfo', () => {
+	it('shows how many exceptions matched', () => {
+		const { getByText } = render(<StripInfo count={42} />);
+
+		expect(getByText('42 exceptions')).toBeInTheDocument();
+	});
+
+	it('says exception, not exceptions, when there is one', () => {
+		const { getByText } = render(<StripInfo count={1} />);
+
+		expect(getByText('1 exception')).toBeInTheDocument();
+	});
+
+	it('shows zero when nothing matched', () => {
+		const { getByText } = render(<StripInfo count={0} />);
+
+		expect(getByText('0 exceptions')).toBeInTheDocument();
+	});
+});

frontend/src/container/AllError/index.tsx

@@ -14,6 +14,9 @@ import { FilterConfirmProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
+import { useBottomStripLeft } from 'container/BottomStrip/useBottomStripLeft';
+
+import StripInfo from './StripInfo/StripInfo';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -160,6 +163,11 @@ function AllErrors(): JSX.Element {
 			},
 		]);
 
+	const exceptionCount = errorCountResponse.data?.payload ?? 0;
+	useBottomStripLeft(
+		useMemo(() => <StripInfo count={exceptionCount} />, [exceptionCount]),
+	);
+
 	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
 	useEffect(() => {
 		setIsFetching(isFetching);

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 && (
@@ -878,7 +885,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{showAddCreditCardModal && <ChatSupportGateway />}
+				{showAddCreditCardModal && !isSavedViewEnabled && <ChatSupportGateway />}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

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/AskNoz/AskNoz.module.scss

@@ -0,0 +1,36 @@
+.askNoz {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.badge {
+	flex-shrink: 0;
+	display: inline-flex;
+	line-height: 0;
+	color: var(--accent-primary);
+}
+
+.pulseDot {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 0;
+	animation: askNozDotPulse 1.5s ease-in-out infinite;
+	transform: scale(0.8);
+	margin-right: -12px;
+}
+
+@keyframes askNozDotPulse {
+	0%,
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	50% {
+		opacity: 0.35;
+		transform: scale(0.82);
+	}
+}

frontend/src/container/BottomStrip/AskNoz/AskNoz.tsx

@@ -0,0 +1,76 @@
+import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
+import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
+import {
+	openAIAssistant,
+	useAIAssistantStore,
+} from 'container/AIAssistant/store/useAIAssistantStore';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import ROUTES from 'constants/routes';
+import { Dot } from '@signozhq/icons';
+
+import styles from './AskNoz.module.scss';
+
+/**
+ * Opens the Noz drawer, matching the header entry it replaces. Cmd+K opens the
+ * modal instead; this is deliberately the drawer.
+ *
+ * Carries the header's pending badge: when Noz is blocked on the user
+ * (`awaiting_approval` / `awaiting_clarification`) a dot pulses. Without it,
+ * hiding the header button would remove a notification rather than move it.
+ */
+function AskNoz(): JSX.Element | null {
+	const { pathname } = useLocation();
+	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
+	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);
+	const pendingUserInputCount = useAIAssistantStore(
+		selectPendingUserInputStreamCount,
+	);
+
+	// Noz is already on screen in the modal, so the "needs you" dot would be noise.
+	const showPendingBadge = pendingUserInputCount > 0 && !isModalOpen;
+
+	// The drawer does not render on the Noz full page, so the button would be inert.
+	const isAIAssistantPage = pathname.startsWith(ROUTES.AI_ASSISTANT_BASE);
+
+	if (!isAIAssistantEnabled || isDrawerOpen || isAIAssistantPage) {
+		return null;
+	}
+
+	return (
+		<div className={styles.askNoz} data-testid="bottom-strip-ask-noz">
+			{showPendingBadge && (
+				<span className={styles.badge} aria-hidden>
+					<span className={styles.pulseDot}>
+						<Dot size={36} />
+					</span>
+				</span>
+			)}
+			<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					className="noz-wave"
+					prefix={<Noz size={16} />}
+					onClick={(): void => openAIAssistant()}
+					aria-label={
+						showPendingBadge
+							? `Ask Noz, ${pendingUserInputCount} ${
+									pendingUserInputCount === 1 ? 'action needs' : 'actions need'
+								} your response`
+							: 'Ask Noz'
+					}
+				>
+					Ask Noz
+				</Button>
+			</TooltipSimple>
+		</div>
+	);
+}
+
+export default AskNoz;

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

@@ -0,0 +1,133 @@
+import { fireEvent } from '@testing-library/react';
+import { openAIAssistant } from 'container/AIAssistant/store/useAIAssistantStore';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { render } from 'tests/test-utils';
+
+import AskNoz from '../AskNoz';
+
+jest.mock('hooks/useIsAIAssistantEnabled');
+jest.mock('container/AIAssistant/store/useAIAssistantStore', () => ({
+	openAIAssistant: jest.fn(),
+	useAIAssistantStore: jest.fn(),
+}));
+
+const mockEnabled = useIsAIAssistantEnabled as jest.MockedFunction<
+	typeof useIsAIAssistantEnabled
+>;
+const mockOpen = openAIAssistant as jest.MockedFunction<typeof openAIAssistant>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const { useAIAssistantStore } = jest.requireMock(
+	'container/AIAssistant/store/useAIAssistantStore',
+) as { useAIAssistantStore: jest.Mock };
+
+/** The component reads the store through three separate selector calls. */
+function mockStore({
+	isDrawerOpen = false,
+	isModalOpen = false,
+	pendingCount = 0,
+}: {
+	isDrawerOpen?: boolean;
+	isModalOpen?: boolean;
+	pendingCount?: number;
+} = {}): void {
+	const state = { isDrawerOpen, isModalOpen, streams: {} };
+	useAIAssistantStore.mockImplementation((selector: (s: unknown) => unknown) => {
+		const picked = selector(state);
+		// `selectPendingUserInputStreamCount` walks `streams`, which is empty here,
+		// so stand in the count we want to assert against.
+		return typeof picked === 'number' ? pendingCount : picked;
+	});
+}
+
+// `TooltipSimple` replaces its trigger's props, so the testId lives on the
+// wrapper and the button itself is reached by role — there is only ever one.
+const SLOT = 'bottom-strip-ask-noz';
+
+describe('AskNoz', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockEnabled.mockReturnValue(true);
+		mockStore();
+	});
+
+	describe('visibility', () => {
+		it('renders when the assistant is enabled', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toBeInTheDocument();
+		});
+
+		it('renders nothing when the assistant is disabled', () => {
+			mockEnabled.mockReturnValue(false);
+
+			const { queryByTestId } = render(<AskNoz />);
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+
+		it('renders nothing while the drawer is open', () => {
+			mockStore({ isDrawerOpen: true });
+
+			const { queryByTestId } = render(<AskNoz />);
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+
+		it('renders nothing on the Noz full page, where the drawer does not mount', () => {
+			const { queryByTestId } = render(<AskNoz />, undefined, {
+				initialRoute: '/ai-assistant/some-conversation-id',
+			});
+
+			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('what it does', () => {
+		it('opens the drawer on click', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			fireEvent.click(getByRole('button'));
+
+			expect(mockOpen).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('pending badge', () => {
+		it('announces the count when Noz is waiting on the user', () => {
+			mockStore({ pendingCount: 2 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute(
+				'aria-label',
+				'Ask Noz, 2 actions need your response',
+			);
+		});
+
+		it('uses the singular for one pending action', () => {
+			mockStore({ pendingCount: 1 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute(
+				'aria-label',
+				'Ask Noz, 1 action needs your response',
+			);
+		});
+
+		it('stays quiet when nothing is pending', () => {
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
+		});
+
+		it('stays quiet while the modal is open, Noz is already on screen', () => {
+			mockStore({ isModalOpen: true, pendingCount: 3 });
+
+			const { getByRole } = render(<AskNoz />);
+
+			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
+		});
+	});
+});

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

@@ -0,0 +1,46 @@
+.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);
+
+	--button-font-size: 12px;
+
+	// 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: 8px;
+	min-width: 0;
+}
+
+.left {
+	cursor: default;
+}
+
+// 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/LeftSlot/LeftSlot.tsx

@@ -0,0 +1,29 @@
+import * as Sentry from '@sentry/react';
+import { useAppContext } from 'providers/App/App';
+
+import StripTypography from '../components/StripTypography/StripTypography';
+import { useBottomStripStore } from '../store/useBottomStripStore';
+
+function LeftSlot(): JSX.Element | null {
+	const { versionData } = useAppContext();
+	const left = useBottomStripStore((state) => state.left);
+	const ownerId = useBottomStripStore((state) => state.ownerId);
+	const version = versionData?.version?.trim();
+	const versionNode = version ? (
+		<StripTypography>{version}</StripTypography>
+	) : null;
+
+	if (!left) {
+		return versionNode;
+	}
+
+	return (
+		// Keyed so a page whose node threw does not leave the boundary latched on
+		// the fallback for every page after it.
+		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
+			{left}
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default LeftSlot;

frontend/src/container/BottomStrip/SupportButton/SupportButton.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { MessageSquareText } from '@signozhq/icons';
+
+function SupportButton(): JSX.Element | null {
+	const chatSupport = useChatSupport();
+	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
+		useState(false);
+
+	if (chatSupport === ChatSupportState.Unavailable) {
+		return null;
+	}
+
+	const handleClick = (): void => {
+		if (chatSupport === ChatSupportState.NeedsCard) {
+			setIsAddCreditCardModalOpen(true);
+			return;
+		}
+		window.Pylon?.('show');
+	};
+
+	return (
+		<>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				prefix={<MessageSquareText size={16} />}
+				onClick={handleClick}
+				testId="bottom-strip-support"
+			>
+				Support
+			</Button>
+
+			<AddCreditCardModal
+				open={isAddCreditCardModalOpen}
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+			/>
+		</>
+	);
+}
+
+export default SupportButton;

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

@@ -0,0 +1,81 @@
+import { fireEvent } from '@testing-library/react';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
+import { render } from 'tests/test-utils';
+
+import SupportButton from '../SupportButton';
+
+jest.mock('hooks/useChatSupport', () => ({
+	...jest.requireActual('hooks/useChatSupport'),
+	useChatSupport: jest.fn(),
+}));
+
+const mockChatSupport = useChatSupport as jest.MockedFunction<
+	typeof useChatSupport
+>;
+
+const BUTTON = 'bottom-strip-support';
+const MODAL_TITLE = 'Add Credit Card for Chat Support';
+
+describe('SupportButton', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		window.Pylon = jest.fn() as never;
+	});
+
+	describe('when Pylon is available', () => {
+		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.Pylon));
+
+		it('shows the button', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			expect(getByTestId(BUTTON)).toBeInTheDocument();
+		});
+
+		it('opens the Pylon widget on click', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(window.Pylon).toHaveBeenCalledWith('show');
+		});
+
+		it('does not open the credit card modal', () => {
+			const { getByTestId, queryByText } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(queryByText(MODAL_TITLE)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('when the user needs a card', () => {
+		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.NeedsCard));
+
+		it('shows the same button', () => {
+			const { getByTestId } = render(<SupportButton />);
+
+			expect(getByTestId(BUTTON)).toBeInTheDocument();
+		});
+
+		it('opens the credit card modal on click, not Pylon', () => {
+			const { getByTestId, getByText } = render(<SupportButton />);
+
+			fireEvent.click(getByTestId(BUTTON));
+
+			expect(getByText(MODAL_TITLE)).toBeInTheDocument();
+			expect(window.Pylon).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('when support is unavailable', () => {
+		beforeEach(() =>
+			mockChatSupport.mockReturnValue(ChatSupportState.Unavailable),
+		);
+
+		it('renders nothing at all', () => {
+			const { queryByTestId } = render(<SupportButton />);
+
+			expect(queryByTestId(BUTTON)).not.toBeInTheDocument();
+		});
+	});
+});

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

@@ -0,0 +1,165 @@
+import { type ReactNode, useState } from 'react';
+import { fireEvent } from '@testing-library/react';
+import { render } from 'tests/test-utils';
+import { Info } from 'types/api/v1/version/get';
+
+import BottomStrip, {
+	BOTTOM_STRIP_HEIGHT,
+	BOTTOM_STRIP_HEIGHT_VAR,
+	BOTTOM_STRIP_ON_CLASS,
+} from '..';
+import { useBottomStripStore } from '../store/useBottomStripStore';
+import { useBottomStripLeft } from '../useBottomStripLeft';
+
+/** Stands in for a page that puts something on the left of the strip. */
+function Page({ children }: { children: ReactNode }): null {
+	useBottomStripLeft(children);
+	return null;
+}
+
+/** A page whose value changes without needing `rerender`. */
+function ChangingPage(): JSX.Element {
+	const [count, setCount] = useState(600);
+
+	useBottomStripLeft(`${count} traces`);
+
+	return (
+		<button type="button" onClick={(): void => setCount(42)}>
+			change
+		</button>
+	);
+}
+
+/** A page node that blows up while the strip renders it. */
+function Boom(): JSX.Element {
+	throw new Error('bad left node');
+}
+
+const VERSION = 'v0.134.67';
+const versionData: Info = { version: VERSION, ee: 'Y', setupCompleted: true };
+const withVersion = { appContextOverrides: { versionData } };
+
+describe('BottomStrip', () => {
+	// The store is module level, so it outlives each test.
+	beforeEach(() => {
+		useBottomStripStore.setState({ left: null, ownerId: null });
+	});
+
+	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 { getByText } = render(<BottomStrip />, undefined, {
+				appContextOverrides: {
+					versionData: { version, ee: 'Y', setupCompleted: true },
+				},
+			});
+
+			expect(getByText(version)).toBeInTheDocument();
+		},
+	);
+
+	it('renders the strip without a version when none is available', () => {
+		const { getByTestId } = render(<BottomStrip />, undefined, {
+			appContextOverrides: { versionData: null },
+		});
+
+		const strip = getByTestId('bottom-strip');
+
+		expect(strip).toBeInTheDocument();
+		expect(strip).toHaveTextContent('');
+	});
+
+	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
+	// re-renders the original tree. These drive change through state and through
+	// separate trees instead, which the module-level store lets them share.
+	describe('left slot', () => {
+		it('shows what the page put there instead of the version', () => {
+			render(<Page>600 traces</Page>);
+			const { getByText, queryByText } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByText('600 traces')).toBeInTheDocument();
+			expect(queryByText(VERSION)).not.toBeInTheDocument();
+		});
+
+		it('falls back to the version once the page is gone', () => {
+			const page = render(<Page>600 traces</Page>);
+			const { getByText } = render(<BottomStrip />, undefined, withVersion);
+
+			page.unmount();
+
+			expect(getByText(VERSION)).toBeInTheDocument();
+		});
+
+		it('updates when the page changes what it shows', () => {
+			render(<ChangingPage />);
+			const { getByText, getByRole } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByText('600 traces')).toBeInTheDocument();
+
+			fireEvent.click(getByRole('button', { name: 'change' }));
+
+			expect(getByText('42 traces')).toBeInTheDocument();
+		});
+
+		it('falls back to the version when the page node throws', () => {
+			// React logs the caught error, which is noise here.
+			const consoleError = jest
+				.spyOn(console, 'error')
+				.mockImplementation(() => {});
+
+			render(
+				<Page>
+					<Boom />
+				</Page>,
+			);
+			const { getByTestId, getByText } = render(
+				<BottomStrip />,
+				undefined,
+				withVersion,
+			);
+
+			expect(getByTestId('bottom-strip')).toBeInTheDocument();
+			expect(getByText(VERSION)).toBeInTheDocument();
+
+			consoleError.mockRestore();
+		});
+
+		it('keeps the new page value when the old page unmounts after it', () => {
+			// Navigation order: the next page mounts before the last one unmounts,
+			// so without the owner guard the outgoing page wipes the incoming value.
+			const pageA = render(<Page>page A</Page>);
+			render(<Page>page B</Page>);
+			const { getByText } = render(<BottomStrip />, undefined, withVersion);
+
+			pageA.unmount();
+
+			expect(getByText('page B')).toBeInTheDocument();
+		});
+	});
+});

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

@@ -0,0 +1,15 @@
+.separator {
+	flex-shrink: 0;
+	width: 1px;
+	height: 14px;
+	background: var(--l2-border);
+}
+
+// Strip items hide themselves by rendering null, which would otherwise leave a
+// separator dangling at an edge or two of them side by side. Collapsing them
+// here keeps the call sites free of visibility plumbing.
+.separator:first-child,
+.separator:last-child,
+.separator + .separator {
+	display: none;
+}

frontend/src/container/BottomStrip/components/StripSeparator/StripSeparator.tsx

@@ -0,0 +1,7 @@
+import styles from './StripSeparator.module.scss';
+
+function StripSeparator(): JSX.Element {
+	return <span className={styles.separator} aria-hidden />;
+}
+
+export default StripSeparator;

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

@@ -0,0 +1,10 @@
+.stripTypography {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+
+	color: var(--l2-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './StripTypography.module.scss';
+
+interface StripTypographyProps {
+	children: ReactNode;
+	/** Leading icon, aligned and spaced for you. Same shape as `Button`'s. */
+	prefix?: ReactNode;
+	className?: string;
+}
+
+/**
+ * Everything the strip renders goes through this: the version, a plain count, or
+ * an icon with a key and value. It owns the strip's type and alignment and
+ * nothing else — how a consumer colours its own content is theirs.
+ */
+function StripTypography({
+	children,
+	prefix,
+	className,
+}: StripTypographyProps): JSX.Element {
+	return (
+		<span className={cx(styles.stripTypography, className)}>
+			{prefix}
+			<Typography.Text as="span">{children}</Typography.Text>
+		</span>
+	);
+}
+
+StripTypography.defaultProps = { prefix: undefined, className: undefined };
+
+export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -0,0 +1,43 @@
+import { useLayoutEffect } from 'react';
+
+import AskNoz from './AskNoz/AskNoz';
+import LeftSlot from './LeftSlot/LeftSlot';
+import StripSeparator from './components/StripSeparator/StripSeparator';
+import SupportButton from './SupportButton/SupportButton';
+
+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 {
+	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}>
+				<LeftSlot />
+			</div>
+			<div className={styles.right}>
+				<AskNoz />
+				<StripSeparator />
+				<SupportButton />
+			</div>
+		</div>
+	);
+}
+
+export default BottomStrip;

frontend/src/container/BottomStrip/store/useBottomStripStore.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { create } from 'zustand';
+
+interface BottomStripState {
+	/** What the strip shows on the left, or null to fall back to the version. */
+	left: ReactNode | null;
+	/** Which page owns the current value — see `clearLeft`. */
+	ownerId: string | null;
+	setLeft: (ownerId: string, left: ReactNode) => void;
+	clearLeft: (ownerId: string) => void;
+}
+
+export const useBottomStripStore = create<BottomStripState>()((set, get) => ({
+	left: null,
+	ownerId: null,
+	setLeft: (ownerId, left): void => set({ left, ownerId }),
+	// Only the current owner may clear. On a plain route swap React runs the old
+	// page's cleanup before the new page's effect, so this is moot, but two
+	// consumers can be mounted at once (a page under a drawer): the one that set
+	// last owns the slot, and the other unmounting must not wipe it.
+	clearLeft: (ownerId): void => {
+		if (get().ownerId === ownerId) {
+			set({ left: null, ownerId: null });
+		}
+	},
+}));

frontend/src/container/BottomStrip/useBottomStripLeft.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, useEffect, useId } from 'react';
+
+import { useBottomStripStore } from './store/useBottomStripStore';
+
+/**
+ * Puts `node` on the left of the bottom strip for as long as the calling page is
+ * mounted. Pass null to show nothing and let the version through.
+ *
+ * There is no refresh API by design: a page that refetches re-renders, which
+ * produces a new node, which re-runs this effect. Wrap the node in `useMemo`
+ * keyed on the values it shows, or the store is written on every render.
+ */
+export function useBottomStripLeft(node: ReactNode | null): void {
+	const ownerId = useId();
+	const setLeft = useBottomStripStore((state) => state.setLeft);
+	const clearLeft = useBottomStripStore((state) => state.clearLeft);
+
+	useEffect(() => {
+		setLeft(ownerId, node);
+
+		return (): void => clearLeft(ownerId);
+	}, [node, ownerId, setLeft, clearLeft]);
+}

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/Home/Home.styles.scss

@@ -1,7 +1,6 @@
 .home-container {
 	display: flex;
 	flex-direction: column;
-	min-height: 100vh;
 	overflow-y: auto;
 	height: 100%;
 	width: 100%;