feat(system): add storybook story for the workspace suspended page

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description
- moved list view from antd `ResizeTable` to Tanstack table.
functionalities kept same.
- pulled out a reusable trace table. new shared table + per field column
builder. This is added to keep the table renderer common for both
ListView and Trace View because they do not need to be different. Trace
view will integrate this component in following stacked PR.
- two new override vars on `TanStackTableView` (header height, first
column header padding)


<!--Reference issues using `Closes #issue-number` to enable automatic
closure on merge. -->
#### Issues closed by this PR

Part of https://github.com/SigNoz/engineering-pod/issues/5052

<!--If applicable, include screenshots or screen recordings that clearly
show the behavior before the change and the result after the change. -->
#### Screenshots / Screen Recordings



https://github.com/user-attachments/assets/d3a75b38-7cf5-4ab0-a7b4-fce404a03e63



<!--Anything reviewers should keep in mind while reviewing -->
#### Additional Information
- Touches the shared `TanStackTableView` component.. two new override
vars, defaults unchanged for other tables. cc. @H4ad

<!--Please delete paragraphs that you did not use before submitting.-->

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

@@ -0,0 +1,206 @@
+---
+name: signoz-page-story
+description: Explore a SigNoz page, map the endpoints, states and query params it has, then write its Storybook page story with control-driven msw mocks that reach every state. Use when asked to create, extend or review a Storybook story for a page under frontend/src/pages, to add controls to an existing page story, or to write defineStoryMocks handlers and mock data for a page.
+---
+
+# SigNoz page stories
+
+A page story renders the real page inside the real app shell against msw, and its
+controls panel can reach every state the page has. The panel is the deliverable,
+not the story list.
+
+`frontend/src/storybook/README.md` is the API surface (providers, parameters,
+control builders, module mocks, navigation). Read it first; this skill is the
+process on top of it.
+
+## Workflow
+
+1. **Map the page**: [references/discovery.md](references/discovery.md). Produce
+   the inventory (endpoints, states, params, permissions, caps) before writing
+   code. No inventory, no story.
+2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console
+   names the endpoints step 1 missed.
+3. **Inventory to controls**: [references/controls.md](references/controls.md).
+4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's
+   mocks module.
+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`.
+
+**Order.** `src/storybook/docs/sidebarOrder.ts` 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. 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`). |
+| `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') });
+
+/**
+ * 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,
+	decorators: [withAppLayout],
+	...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``.
+
+## Rules
+
+- **Default is the loaded page.** `export const Default: Story = {}` with no args,
+  every widget carrying data. Empty, loading and failed are variants or control
+  values, never the default.
+- **A control is a knob on a response**, resolved through `handlers`, `config` or
+  `effect`. Never a component prop, never a module mock added for one story.
+- **Every branch in the inventory is reachable from the panel.** A state that
+  needs a code edit to see is a missing control.
+- **Never re-declare what every story already has**: banner, side nav, data state
+  (loaded/loading/error), access preset, permissions, check state.
+- **A variant earns a story only when it is worth linking to**: an empty
+  workspace, a viewer, a page mid-load. Everything else stays a control.
+- **Endpoints the page owns go through `response.json`**, so the Data control
+  covers loaded, loading and failed in one declaration. Endpoints the page cannot
+  render without (ingestion detection, preferences, feature payloads) take a
+  plain resolver so the shell survives the loading and error states.
+- **Query-param state starts from `route`** (`/logs?tab=explorer`). In-page param
+  navigation works inside a story; a different pathname is blocked and reported
+  by the overlay. A control for a param is worth it only when the param is a page
+  mode someone would want to flip.
+- **File layout**: `src/pages/<Page>/<Page>.stories.tsx`,
+  `src/pages/<Page>/<Page>.stories.mocks.tsx`, payload builders in
+  `src/pages/<Page>/__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/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. 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 state only a click reaches is a story with a `play` function**, not a
+  control: a drawer, a modal, an edit mode the page holds in component state.
+  Drive it with `userEvent` and the queries from `storybook/test`, take the first
+  of a repeated row action, and wait on the state's own text. The page fetches
+  before it renders a row, so the finder needs a timeout past the 1s default. A
+  state the app drops again on its own, such as one keyed on an array identity
+  that a refetch replaces, does not get a story: it would not survive being
+  looked at. A *sequence* of such states, a wizard's steps or a
+  questionnaire's pages, is still a control: declare the steps in the mocks
+  module and walk them from a `play` on the meta that destructures `mount`, which
+  is what makes Storybook replay it on an arg change. See
+  [references/controls.md](references/controls.md).
+- **The mocks are AI-owned and say so.** `<Page>.stories.mocks.tsx` and every file
+  under a `__story_mockdata__/` open with this banner, above the imports:
+
+  ```ts
+  /**
+   * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+   * Do not hand-edit: regenerate instead.
+   */
+  ```
+
+  The root `.gitattributes` marks both paths `linguist-generated=true`, so the
+  reviewer gets them collapsed and spends the attention on the rendered page. The
+  story file is the human surface and never carries the banner. A file with the
+  banner has to stay regenerable from the page alone: no page knowledge in
+  `src/storybook/`, and builders typed from `src/api/generated` where the endpoint
+  has types, so a contract change is a compile error instead of a mock that lies.
+- **Reuse fixtures** from `src/mocks-server/` and `src/tests/fixtures/` where they
+  exist. An endpoint jest needs too belongs in `src/mocks-server/handlers.ts`.
+- **Shared response builders live in `src/storybook/msw/__story_mockdata__/`**: typed
+  helpers like `queryRangeV5ScalarResponse` that multiple pages need. Before
+  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
+  name, a type, or what a builder plainly builds; if the sentence reads as the
+  signature in prose, delete it. Nothing addressed to a reviewer. The one
+  comment a story always gets is its own doc comment: what it shows, in the
+  page's own terms.
+
+## 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 `src/storybook/docs/sidebarOrder.ts`
+- [ ] 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.`
+- [ ] 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
+      request, no React warning
+- [ ] no navigation overlay on mount
+- [ ] `pnpm tsgo --noEmit`, `pnpm exec oxlint <files>`,
+      `pnpm exec oxfmt --check <files>` all clean. The repo has no
+      prettier: `pnpm exec prettier` prints a pass while exiting 254

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

@@ -0,0 +1,227 @@
+# Turning the inventory into controls
+
+Every row of the inventory becomes a control, a global control that already
+exists, or a documented reason it cannot be one.
+
+## Imports
+
+Paths written as `src/storybook/...` in prose are repo paths, not import
+specifiers. Stories import through the `@/` alias (`@/*` → `./src/*`); modules
+inside `src/storybook/` import each other relatively.
+
+| Import | From |
+| --- | --- |
+| `toggleControl`, `countControl`, `choiceControl`, `multiChoiceControl` | `../controls/controls` |
+| `defineStoryMocks`, `storyMocks` | `../controls/defineStoryMocks` |
+| `PageStoryArgs` | `../controls/resolveStoryMocks` |
+| `MockRequest`, `MockResponse` | `../controls/types` |
+| `withAppLayout` | `@/storybook/decorators/withAppLayout` |
+| the page's mocks, from the story | `./<Page>.stories.mocks` |
+| `queryRangeV5ScalarResponse`, `queryRangeV5RawResponse`, etc. | `@/storybook/msw/__story_mockdata__/queryRange` |
+
+## Which builder
+
+`src/storybook/controls/controls.ts`:
+
+| The state is | Builder |
+| --- | --- |
+| on or off (a signal ingesting, a feature present) | `toggleControl` |
+| how many rows a list has | `countControl` |
+| one of several modes (tab, visibility, plan, severity filter) | `choiceControl` |
+| a subset (steps skipped, columns shown, signals selected) | `multiChoiceControl` |
+
+Rules that come with them:
+
+- `countControl` `max` goes past what the page renders, so a story can show the
+  cap being hit. `0` is the empty state, which is why an empty list rarely needs
+  its own story. When the cap is in the *request* (`?limit=5`) rather than the
+  renderer, stop `max` at the limit: a longer response is a body the backend
+  cannot send.
+- `choiceControl` options come from a `const` array typed with
+  `(typeof X)[number]`, not from string literals scattered in the handlers.
+- Defaults describe the fully-populated page. The panel starts where `Default`
+  starts.
+- `group` is `'<Page> · <facet>'`, such as `'Services · lists'` or
+  `'Alerts · rules'`. Keep a page's knobs in two or three groups, not one per
+  control.
+- `description` only when the name does not carry the effect (what dismissing
+  does, what the cap is, which widget it feeds).
+
+## Which hook
+
+`defineStoryMocks` takes three, all optional:
+
+- `handlers(values, response)`: the page's endpoints. Everything the page owns
+  goes through `response.json`, so the global Data control turns the whole page
+  into loading or failed without a second declaration. An endpoint the page
+  cannot render at all without (ingestion detection, preferences, license
+  payloads) takes a plain `rest.get(...)` resolver instead, so the shell stays
+  visible while the rest hangs or fails.
+- `config(values)`: `SignozStoryConfig` for knobs no endpoint covers: `route`,
+  `appContext`, `reduxState`, `queryBuilder`, `theme`.
+- `effect(values)`: module-level state no provider exposes.
+
+One endpoint feeding several widgets stays one handler that reads the request.
+`response.json` hands the request to the builder and awaits it, so reading a
+query param, or a POST body, does not cost the Data control:
+
+```ts
+rest.get(
+	'http://localhost/api/v1/explorer/views',
+	response.json((req) =>
+		savedViews(values.savedViews, req.url.searchParams.get('sourcePage') ?? 'logs'),
+	),
+),
+```
+
+```ts
+rest.post(
+	'http://localhost/api/v5/query_range',
+	response.json(async (req) => {
+		const body = (await req.json()) as QueryRangeRequestV5;
+		const signal = body.compositeQuery?.queries?.[0]?.spec?.signal;
+
+		return countResponse(values[`${signal}Ingestion`] ? 4213 : 0);
+	}),
+),
+```
+
+Reach for a plain `rest.post(url, async (req, res, ctx) => …)` only when the
+endpoint has to keep answering while the Data control is on `loading` or
+`error`: detection calls the page cannot render without.
+
+## Mutations
+
+A control drives the response, so a write the page makes against state a control
+owns does not stick: the refetch answers with the control's value and the button
+appears to do nothing. Two honest options: leave it declarative and say so in
+the PR, or move the state into `effect` so the handler can read what the page
+wrote. Never fake the write by mutating a builder's module state without saying
+where the state lives.
+
+## Wiring it up
+
+```ts
+// src/pages/Services/Services.stories.mocks.tsx
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+export const servicesMocks = defineStoryMocks({
+	controls: {
+		services: countControl('Services', { group: LISTS, value: 8, max: 12 }),
+		apdex: choiceControl<ApdexState>('Apdex', {
+			group: HEALTH,
+			options: APDEX_STATES,
+			value: 'mixed',
+		}),
+	},
+	handlers: (values, response) => [
+		rest.post(
+			'http://localhost/api/v2/services',
+			response.json(() => buildServices(values.services, values.apdex)),
+		),
+	],
+});
+```
+
+```tsx
+// src/pages/Services/Services.stories.tsx
+type ServicesArgs = PageStoryArgs<typeof servicesMocks>;
+
+const pageStory = storyMocks(servicesMocks, { route: ROUTES.APPLICATION });
+
+/**
+ * Every instrumented service with its p99, error rate and throughput.
+ *
+ * Route: `/services`.
+ */
+const meta = {
+	title: 'Pages/Services/List',
+	component: Services,
+	decorators: [withAppLayout],
+	...pageStory,
+	parameters: { ...pageStory.parameters },
+} satisfies Meta<ServicesArgs>;
+```
+
+`PageStoryArgs` folds in the global controls, so a story's `args` can set
+`access`, `dataState` or `banner` next to the page's own knobs and stay typed.
+
+## A step the page keeps in component state
+
+A wizard's step, a questionnaire's page, a picker's next question: the page holds
+it in `useState` and nothing in the URL says which one is open. It is still a
+control. Declare the steps in the mocks module and drive them from a `play` on
+the **meta**, so every story of the page inherits the walk and only sets `args`:
+
+```tsx
+// <Page>.stories.mocks.tsx
+export const SETUP_STEPS = ['pick-source', 'pick-framework', 'configure'] as const;
+export type SetupStep = (typeof SETUP_STEPS)[number];
+
+controls: {
+	step: choiceControl<SetupStep>('Setup step', { group: SETUP, options: SETUP_STEPS, value: 'pick-source' }),
+},
+```
+
+```tsx
+// <Page>.stories.tsx
+const meta = {
+	play: async ({ mount, args, canvasElement }): Promise<void> => {
+		await mount();
+		await advanceToSetupStep(canvasElement, args.step);
+	},
+	...storyMocks(pageMocks),
+} satisfies Meta<PageArgs>;
+
+export const Configure: Story = { args: { step: 'configure' } };
+```
+
+**Destructuring `mount` is what makes it a control.** Storybook re-runs a play
+function on an arg change only for a story whose play asks to be remounted
+(`usesMount`); otherwise it re-renders the tree the previous walk left behind and
+the panel looks broken. With `mount` destructured, the story renders when `play`
+calls it, and every arg change replays the walk from a fresh mount.
+
+The walk itself:
+
+- one `answer` function per step, in an array indexed the same as the step list,
+  so reaching step *n* is `answers.slice(0, STEPS.indexOf(step))`;
+- answer each step with the least its Next button accepts, and prefer a "do this
+  later" over filling a slider;
+- run them sequentially (`reduce` over a promise), since each answer is what
+  renders the step the next one reads;
+- bail out when the page did not start where the walk expects, such as a source
+  deep-linked past the questions. Check for the first step's own text rather than
+  reading another control's value.
+
+An endpoint that only settles the transition between two steps (the profile a
+questionnaire saves before its last page) takes a plain resolver, or the Data
+control on `loading` strands the walk halfway.
+
+## Not a control
+
+- Anything the global controls already cover: banner, side nav, data state,
+  access preset, permissions, check state.
+- 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`,
+  `viewer`), and the builder turns intent into the payload.
+- Anything that needs a module mock or a component prop to work. If the state
+  cannot be produced from a response, config or module state, say so in the PR
+  instead of faking it.
+
+## Control or story
+
+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
+
+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.
+Everywhere else the comment rule in SKILL.md applies: write one only for what
+the code cannot show.

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

@@ -0,0 +1,64 @@
+# Mapping a page
+
+Two passes: read the code, then let the running story correct you. Write the
+inventory down: it is what the controls are derived from, and the only
+protection against a story that renders one state and calls it a page.
+
+## Pass 1: read the page
+
+Start at `src/pages/<Page>/` and follow it outward: the containers it mounts
+(`src/container/<Feature>/`), the hooks those use, the components with their own
+fetches. Stop at leaf components that take props only.
+
+Grep recipes, run against the page's directories:
+
+| Looking for | Grep |
+| --- | --- |
+| endpoints | `useQuery\|useMutation\|useInfiniteQuery`, then the `api/` module it calls |
+| endpoint URLs | the api module's `axios.get\|post` |
+| endpoint URLs behind a generated hook | the hook lives in `src/api/generated/services/<name>/index.ts` and the URL only appears in the fetcher body: `rg 'url: \`' src/api/generated/services/<name>/` |
+| url state | `useUrlQuery\|useUrlQueryData\|useUrlSearchState\|useQueryState\|QueryParams\.` |
+| navigation | `useSafeNavigate\|history.push\|<Link` |
+| permissions | `useAuthZ\|AuthZGuard\|AuthZButton\|hasEditPermission\|routePermission` |
+| flags and prefs | `useFeatureFlag\|FeatureKeys\.\|USER_PREFERENCES\.\|userPreferences` |
+| empty and error branches | `isLoading\|isError\|isFetching\|length === 0\|!data` |
+| render caps | `slice(0,\|PAGE_SIZE\|pageSize\|limit` |
+
+`src/constants/routes.ts` has the route, `src/constants/query.ts` the param names,
+`src/lib/authz/README.md` how a permission check resolves.
+
+## The inventory
+
+One table, in the story's PR or scratch notes:
+
+| Endpoint | Feeds | States it can be in |
+| --- | --- | --- |
+| `GET /api/v1/x` | the header count | populated, zero, error |
+
+Plus four short lists:
+
+- **Query params** the page reads, and what each one switches.
+- **Permission checks** the page makes, and what disappears when each is denied.
+- **Preferences and flags** that change layout (dismissed banners, onboarding
+  checklists, opt-in views).
+- **Caps**: how many rows each list renders before it truncates or paginates.
+
+A state that appears in this inventory and not in the controls panel is a bug in
+the story.
+
+## Pass 2: let it run
+
+Write the story and an empty `defineStoryMocks({ controls: {} })`, point it at the
+route, add `withAppLayout`, then open it (see verify.md). The console is the
+oracle:
+
+- `[storybook] no msw handler` or a 501 from the catch-all: an endpoint pass 1
+  missed. Add it to the inventory.
+- an msw unhandled-request warning: a request going to an origin the handlers do
+  not answer on. handlers are declared against `http://localhost`.
+- a spinner that never resolves with the Data control on `loaded`: a handler
+  whose URL does not match what the page calls.
+- the navigation overlay on mount: the page redirects, usually because `route`
+  is wrong or a guard is failing on a permission the controls have not granted.
+
+Repeat until the console is silent. Only then start declaring controls.

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

@@ -0,0 +1,111 @@
+# Verifying a page story
+
+A story is not done because it compiles. It is done when each control has been
+seen changing the page and the console is silent.
+
+## Run it
+
+```bash
+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:
+
+```
+http://localhost:6006/iframe.html?id=pages-services-list--default&viewMode=story
+```
+
+## Flip controls from the URL
+
+Args are settable in the iframe URL, so a whole sweep runs headless without
+touching the panel. Booleans go as `!true` / `!false`, numbers bare, arrays
+indexed, several separated by `;`, and the theme through `globals`:
+
+```
+&args=services:0;apdex:poor;access:viewer;dataState:loading
+&args=signals[0]:logs;signals[1]:traces
+&globals=theme:light
+```
+
+That is the cheap way to check a control does something: load with and without
+it, diff the page text.
+
+## Drive it
+
+Playwright lives in the repo's e2e workspace, so a scratch script can use it
+directly:
+
+```js
+import pw from '<repo>/tests/e2e/node_modules/playwright/index.js';
+const { chromium } = pw;
+
+const browser = await chromium.launch();
+const page = await browser.newPage();
+const problems = [];
+page.on('console', (m) => {
+	if (m.type() === 'error' || m.type() === 'warning') problems.push(m.text());
+});
+page.on('pageerror', (e) => problems.push(e.message));
+
+await page.goto(`${story}&args=services:0`, { waitUntil: 'networkidle' });
+await page.locator('body').waitFor();
+console.log((await page.locator('body').innerText()).slice(0, 1500), problems);
+await browser.close();
+```
+
+Screenshots are worth taking for `Default` in both themes
+(`&globals=theme:light`): text extraction does not catch an unstyled page.
+
+## Gates
+
+- **Console silent.** `[storybook] no msw handler`, a 501 from the catch-all, an
+  msw unhandled-request warning, a React key or state warning: assume the story
+  is wrong first. A warning that survives is sometimes the app's. Prove it by
+  turning off the control that renders the widget and watching the warning go
+  with it, and by finding the same component elsewhere doing it right. Then
+  report the app bug in the PR. Never invent a field the API does not return to
+  silence a warning.
+- **No navigation overlay on mount.** "Navigation blocked in Storybook" on load
+  means the page is trying to leave: wrong `route`, or a guard denying on a
+  permission the controls did not grant.
+- **Every control moves something.** Sweep them one at a time from the URL and
+  diff the page text. A control with no diff is either wired to nothing or aimed
+  at a widget that is not rendering. Some only show their effect after an
+  interaction, such as a tab that has to be clicked or a select that has to be
+  opened. Drive that interaction rather than calling the control unobservable.
+- **Both themes render styled.** An unstyled page means the story is not inside
+  the provider decorator, or `<body data-theme>` was lost.
+- **Roles agree.** `<body data-signoz-story-role>` and
+  `<body data-signoz-context-role>` disagreeing means the page reads a different
+  `AppContext` than the story config fills.
+- **The page's own navigation works.** Tabs, filters and pagination that write
+  query params should re-render the page in place; only leaving the page belongs
+  in the overlay.
+
+## Then the usual
+
+```bash
+pnpm tsgo --noEmit
+pnpm exec oxlint <changed files>
+pnpm exec oxfmt --check <changed files>
+```
+
+There is no prettier in this repo. `pnpm exec prettier --check` fetches something
+else, prints `Prettier: All files formatted correctly` and exits 254: a pass that is
+not one.
+
+## Common failures
+
+| Symptom | Cause |
+| --- | --- |
+| endless spinner with Data on `loaded` | handler URL does not match the call; handlers answer on `http://localhost` |
+| page renders but empty | response shape wrong; compare against the api module's type, not a guess |
+| 501 in the console | endpoint nobody mocked; the catch-all is answering |
+| new control missing from the panel | project-level control added; the tab needs a reload |
+| control flips but nothing changes | the widget is gated by something else: a permission, a flag, a preference |
+| shell disappears in `loading` | an endpoint the shell needs went through `response.json`; give it a plain resolver |

.gitattributes

@@ -1 +1,3 @@
-*.css linguist-detectable=false
+*.css linguist-detectable=false
+*.stories.mocks.tsx linguist-generated=true
+**/__story_mockdata__/** linguist-generated=true

docs/api/openapi.yml

@@ -8024,13 +8024,6 @@ components:
       - schemaVersion
       - spec
       type: object
-    ServiceaccounttypesDeprecatedPostableServiceAccountRole:
-      properties:
-        id:
-          type: string
-      required:
-      - id
-      type: object
     ServiceaccounttypesGettableFactorAPIKey:
       properties:
         createdAt:
@@ -13262,117 +13255,6 @@ paths:
       summary: Gets service account roles
       tags:
       - serviceaccount
-    post:
-      deprecated: true
-      description: This endpoint assigns a role to a service account
-      operationId: CreateServiceAccountRoleDeprecated
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesDeprecatedPostableServiceAccountRole'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesIdentifiable'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:attach
-        - role:attach
-      - tokenizer:
-        - serviceaccount:attach
-        - role:attach
-      summary: Create service account role
-      tags:
-      - serviceaccount
-  /api/v1/service_accounts/{id}/roles/{rid}:
-    delete:
-      deprecated: true
-      description: This endpoint revokes a role from service account
-      operationId: DeleteServiceAccountRoleDeprecated
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: rid
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:detach
-        - role:detach
-      - tokenizer:
-        - serviceaccount:detach
-        - role:detach
-      summary: Delete service account role
-      tags:
-      - serviceaccount
   /api/v1/service_accounts/me:
     get:
       deprecated: false
@@ -14376,9 +14258,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:list
       - tokenizer:
-        - ADMIN
+        - auth-domain:list
       summary: List all auth domains
       tags:
       - authdomains
@@ -14438,9 +14320,13 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:create
+        - auth-domain:attach
+        - role:attach
       - tokenizer:
-        - ADMIN
+        - auth-domain:create
+        - auth-domain:attach
+        - role:attach
       summary: Create auth domain
       tags:
       - authdomains
@@ -14484,9 +14370,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:delete
       - tokenizer:
-        - ADMIN
+        - auth-domain:delete
       summary: Delete auth domain
       tags:
       - authdomains
@@ -14541,9 +14427,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:read
       - tokenizer:
-        - ADMIN
+        - auth-domain:read
       summary: Get auth domain by ID
       tags:
       - authdomains
@@ -14597,9 +14483,17 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:update
+        - auth-domain:attach
+        - auth-domain:detach
+        - role:attach
+        - role:detach
       - tokenizer:
-        - ADMIN
+        - auth-domain:update
+        - auth-domain:attach
+        - auth-domain:detach
+        - role:attach
+        - role:detach
       summary: Update auth domain
       tags:
       - authdomains

frontend/.gitignore

@@ -28,4 +28,8 @@ e2e/test-plan/saved-views/
 e2e/test-plan/service-map/
 e2e/test-plan/services/
 e2e/test-plan/traces/
-e2e/test-plan/user-preferences/
+e2e/test-plan/user-preferences/
+
+# Storybook
+/storybook-static/
+debug-storybook.log

frontend/.storybook/main.ts

@@ -0,0 +1,102 @@
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import type { StorybookConfig } from '@storybook/react-vite';
+import type { Plugin, PluginOption } from 'vite';
+
+const srcPath = resolve(dirname(fileURLToPath(import.meta.url)), '../src');
+
+/**
+ * Modules replaced for every story. Same idea as `moduleNameMapper` in
+ * `jest.config.ts`: the app keeps importing its own paths, Storybook resolves
+ * them to a mock. Regexes so only exact specifiers match: `lib/history` must
+ * not catch `lib/historyUtils`.
+ *
+ * Each replacement is typed as the module it stands in for, so drift is a
+ * compile error rather than a story that fails at render. The `jest` note on
+ * each entry is where the same import lands under the other runner. The two
+ * only diverge where the runner needs them to.
+ */
+const mockAliases = [
+	{
+		// jest: not replaced, jsdom drives a real browser history.
+		find: /^(?:src\/)?lib\/history$/,
+		replacement: `${srcPath}/storybook/navigation/history.alias.ts`,
+	},
+	{
+		// jest: src/__tests__/logEventMock.ts
+		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`,
+	},
+];
+
+/**
+ * Plugins from `vite.config.ts` that either target the app's `index.html` or
+ * only pay off in a production build.
+ */
+const EXCLUDED_PLUGINS = [
+	'vite-plugin-checker',
+	'dev-base-path',
+	'dev-boot-data',
+	'vite-plugin-image-optimizer',
+	'vite-plugin-compression',
+];
+
+const isExcluded = (plugin: PluginOption): boolean =>
+	!!plugin &&
+	typeof plugin === 'object' &&
+	'name' in plugin &&
+	EXCLUDED_PLUGINS.includes((plugin as Plugin).name);
+
+const config: StorybookConfig = {
+	framework: '@storybook/react-vite',
+	stories: ['../src/storybook/docs/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
+	// `../public` carries the fonts, icons and i18n bundles the app expects at
+	// the root; `./public` carries the msw worker, which must not ship in a
+	// production build.
+	staticDirs: ['../public', './public'],
+	addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+	core: { disableTelemetry: true },
+	viteFinal: async (viteConfig) => {
+		const plugins = (viteConfig.plugins ?? [])
+			.flat(Infinity as 1)
+			.filter((plugin) => !isExcluded(plugin as PluginOption));
+
+		const existingAlias = viteConfig.resolve?.alias;
+		const normalizedAlias = Array.isArray(existingAlias)
+			? existingAlias
+			: Object.entries(existingAlias ?? {}).map(([find, replacement]) => ({
+					find,
+					replacement: replacement as string,
+				}));
+
+		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,
+				alias: [...mockAliases, ...normalizedAlias],
+			},
+		};
+	},
+};
+
+export default config;

frontend/.storybook/preview-head.html

@@ -0,0 +1,24 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+	href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+	rel="stylesheet"
+/>
+<link rel="stylesheet" href="css/uPlot.min.css" />
+
+<script>
+	// i18n's language detector would pick the browser locale (e.g. `en-US`), which
+	// /public/locales does not ship; pin it to the bundled language instead.
+	window.localStorage.setItem('i18nextLng', 'en');
+
+	// The Go backend injects this at boot; every integration it enables is off in
+	// Storybook so no third-party script loads inside the iframe.
+	window.signozBootData = {
+		settings: {
+			posthog: { enabled: false, apiHost: '', key: '', uiHost: '' },
+			appcues: { enabled: false, appId: '' },
+			sentry: { enabled: false, dsn: '', tunnel: '' },
+			pylon: { enabled: false, appId: '', identitySecret: '' },
+		},
+	};
+</script>

frontend/.storybook/preview.tsx

@@ -0,0 +1,230 @@
+import type { Preview } from '@storybook/react-vite';
+import type { SetupWorker } from 'msw';
+import { setupWorker } from 'msw';
+
+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';
+import { clearBlockedNavigations } from '../src/storybook/navigation/blockedNavigationStore';
+import {
+	resolveStory,
+	type StoryRuntimeContext,
+} from '../src/storybook/runtime/resolveStory';
+
+import '../src/ReactI18';
+
+// `src/index.tsx` does this at boot: without it `@monaco-editor/react` falls back
+// to its loader default and pulls Monaco from cdn.jsdelivr.net, which msw does
+// not report because the requests look like static assets.
+import '../src/lib/monaco/setup';
+
+import '../src/styles.scss';
+
+import '../src/storybook/storybook-root.scss';
+
+interface StorybookWorkerHolder {
+	__signozStorybookWorker?: StorybookWorker;
+}
+
+const holder = window as unknown as StorybookWorkerHolder;
+
+/**
+ * One worker per page, even if this module is re-executed by HMR. Two live
+ * workers both answer the service worker and the story gets whichever replies
+ * first.
+ */
+interface StorybookWorker {
+	worker: SetupWorker;
+	ready: Promise<unknown>;
+}
+
+const { worker, ready } = (holder.__signozStorybookWorker ??=
+	((): StorybookWorker => {
+		const instance = setupWorker();
+
+		return {
+			worker: instance,
+			ready: instance.start({
+				serviceWorker: { url: './mockServiceWorker.js' },
+				// Storybook's own traffic (index.json, HMR, telemetry) goes unhandled by
+				// design; only flag the app's API calls so a missing handler is obvious.
+				onUnhandledRequest: (request, print): void => {
+					const url = new URL(request.url.href);
+					const isStaticAsset =
+						/\.(?:woff2?|ttf|otf|css|js|map|png|jpe?g|svg|webp|ico)$/.test(
+							url.pathname,
+						);
+					const isAppRequest =
+						!isStaticAsset &&
+						(url.pathname.startsWith('/api/') || url.host !== window.location.host);
+
+					if (isAppRequest) {
+						print.warning();
+					}
+				},
+			}),
+		};
+	})());
+
+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', 'Widget Editor', 'Public'],
+						'Services',
+						['List', 'Detail', 'Top Level Operations', 'Service Map'],
+						'Logs',
+						[
+							'Explorer',
+							'Live Tail',
+							'Saved Views',
+							'Pipelines',
+							'Settings',
+							'Legacy Explorer',
+						],
+						'Traces',
+						['Explorer', 'Trace Details', 'Funnel Details', 'Legacy Explorer'],
+						'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', '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',
+							'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 },
+	},
+	// 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',
+			toolbar: {
+				title: 'Theme',
+				icon: 'paintbrush',
+				items: [
+					{ value: 'dark', title: 'Dark' },
+					{ value: 'light', title: 'Light' },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	initialGlobals: { theme: 'dark' },
+	// Controls every story carries: permissions, banners, and whether the page's
+	// own endpoints answer, hang or fail.
+	args: globalMocks.args,
+	argTypes: globalMocks.argTypes,
+	decorators: [withProviders],
+	loaders: [
+		// Runs on every render, args changes included, and ahead of the decorators:
+		// the whole story world is put in place here, so the provider tree only has
+		// to read it. Re-registering the handlers per render also means an edit to a
+		// handler module takes effect on the next render instead of leaving the
+		// worker on the set it was created with.
+		async (context): Promise<void> => {
+			const world = resolveStory(context as unknown as StoryRuntimeContext);
+
+			world.apply();
+			world.install(worker);
+
+			await ready;
+		},
+	],
+	beforeEach: () => {
+		clearBlockedNavigations();
+		resetStoryHistory();
+	},
+};
+
+export default preview;

frontend/.storybook/public/mockServiceWorker.js

@@ -0,0 +1,309 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (1.3.2).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+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 navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = Math.random().toString(16).slice(2)
+
+  event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
+      }
+
+      // At this point, any exception indicates an issue with the original request/response.
+      console.error(
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+        request.method,
+        request.url,
+        `${error.name}: ${error.message}`,
+      )
+    }),
+  )
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const clonedResponse = response.clone()
+      sendToClient(client, {
+        type: 'RESPONSE',
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: Object.fromEntries(clonedResponse.headers.entries()),
+          redirected: clonedResponse.redirected,
+        },
+      })
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+  const clonedRequest = request.clone()
+
+  function passthrough() {
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const headers = Object.fromEntries(clonedRequest.headers.entries())
+
+    // Remove MSW-specific request headers so the bypassed requests
+    // comply with the server's CORS preflight check.
+    // Operate with the headers as an object because request "Headers"
+    // are immutable.
+    delete headers['x-msw-bypass']
+
+    return fetch(clonedRequest, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  if (request.headers.get('x-msw-bypass') === 'true') {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const clientMessage = await sendToClient(client, {
+    type: 'REQUEST',
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body: await request.text(),
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  })
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+
+    case 'NETWORK_ERROR': {
+      const { name, message } = clientMessage.data
+      const networkError = new Error(message)
+      networkError.name = name
+
+      // Rejecting a "respondWith" promise emulates a network error.
+      throw networkError
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [channel.port2])
+  })
+}
+
+function sleep(timeMs) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeMs)
+  })
+}
+
+async function respondWithMock(response) {
+  await sleep(response.delay)
+  return new Response(response.body, response)
+}

frontend/README.md

@@ -88,6 +88,17 @@ pnpm test
 pnpm tsgo --noEmit
 ```
 
+## Storybook
+
+```bash
+pnpm storybook
+```
+
+Opens [http://localhost:6006](http://localhost:6006). Pages run against msw
+mocks with no backend; query-param navigation works inside a story, leaving the
+page is blocked. See [`src/storybook/README.md`](src/storybook/README.md) for the
+override surface.
+
 ## Linting
 
 ```bash

frontend/docs/storybook-page-stories-tdd.md

@@ -0,0 +1,495 @@
+# Storybook page stories
+
+> Frontend Technical Design Document
+
+---
+
+## Document Info
+
+| Field | Value |
+|-------|-------|
+| **Author** | TODO |
+| **Reviewers** | TODO |
+| **Status** | In Review |
+| **Created** | 2026-08-24 |
+| **Last Updated** | 2026-08-24 |
+| **Effort Estimate** | TODO |
+| **Owning Team** | Frontend Platform |
+| **PR** | [SigNoz/signoz#12639](https://github.com/SigNoz/signoz/pull/12639) |
+| **Issue** | SigNoz/engineering-pod#5951 |
+
+---
+
+## 1. Summary
+
+Run whole SigNoz pages in Storybook with no backend: msw answers every request,
+and the state a page is in becomes a row in the controls panel. The unit is the
+page inside its real shell, not a component in isolation, so the artifact is a
+picture of what a user sees. Phase 2 points Chromatic at that picture set and
+makes visual diffs a blocking, human-accepted check.
+
+The mocks that feed those pages are written and maintained by AI through the
+`signoz-page-story` skill. Nobody reviews them line by line, so the design is
+built around that: mocks are cheap to regenerate, typed against the app's own
+modules, and marked as generated in the diff.
+
+---
+
+## 2. Context & Problem Statement
+
+### Current state
+
+| Metric | Value |
+|--------|-------|
+| Stories in `frontend/` before this work | 0 |
+| Routes in `src/AppRoutes/routes.ts` | 71 |
+| Page directories under `src/pages/` | 60 |
+| Jest test files | 786 |
+| E2E feature suites | 10 |
+
+Every layer of the current test stack looks at something other than the page.
+Jest mounts fragments with mocked providers. E2E drives real flows but needs a
+running backend and reads assertions, not pixels. Neither answers "what does
+this page look like when the workspace is empty, the user is a viewer, and the
+license expired".
+
+### Problems
+
+- **Hidden states are unreachable.** Empty workspace, denied permission, expired
+  license, mid-load, failed request. Seeing any of them today means finding an
+  environment in that state or editing code.
+- **Visual review is manual.** A change to a shared component or a design token
+  is checked by whoever remembers which pages use it. A regression two pages
+  away from the diff ships.
+
+---
+
+## 3. Goals & Non-Goals
+
+### Goals
+
+- Render any page, in any state, with no backend and no environment.
+- Make every state a page can be in reachable from the controls panel.
+- Catch visual regressions before merge (Phase 2, Chromatic).
+- Keep mock authorship an AI task, at a cost low enough to keep adding pages.
+- A story mounts the provider tree the app mounts, not a second approximation of
+  it.
+
+### Non-Goals
+
+- **Component stories.** A page story with controls covers what a component
+  story would, in context. Component-level stories are not the pattern here.
+- **Behaviour testing.** A wrongly migrated component, a broken handler, a bad
+  request payload: that is E2E's job. A story renders, it does not assert.
+- **Replacing jest.** Stories are not reused as jest tests (no portable stories,
+  no `composeStories`).
+- **Interaction coverage.** No play functions for now (see 6.3).
+- **A published static build.** Possible later, not in scope.
+- **msw v2.** The jest suite is on msw v1; upgrading is its own project.
+
+---
+
+## 4. Requirements
+
+### Functional
+
+- A page renders inside the real `AppLayout` (side nav, top nav, banners).
+- Every endpoint the page calls is answered locally, and an unanswered one fails
+  loudly instead of hanging.
+- Loaded, loading and failed reachable for the page's own endpoints from one
+  control.
+- Access, license, banner and side nav state selectable on every story.
+- Query-param navigation (tabs, filters, pagination, time range) works inside a
+  story; leaving the page is blocked and reported.
+- Both themes render fully styled.
+
+### Non-Functional
+
+- **Isolation:** no state, cache or override bleeds between stories.
+- **Determinism:** the same story renders the same pixels on every run (Phase 2
+  prerequisite, see 6.2).
+- **Authoring cost:** a new page story is a skill run, not a project.
+- **No production impact:** nothing in `src/storybook/` or the msw worker reaches
+  the app bundle.
+
+---
+
+## 5. Success Metrics
+
+The metric is qualitative on purpose: this exists to make hidden UI states
+visible and to make small UI changes trustworthy without a manual sweep.
+
+| Metric | Baseline | Target | Measurement |
+|--------|----------|--------|-------------|
+| Pages whose states can be seen without an environment | 0 | grows every sprint, no end date | stories under `src/pages/**` |
+| States reachable per page | n/a | every branch in the page's inventory | skill's discovery inventory vs the panel |
+| Small UI change reviewed without a manual sweep | 0% | the common case | Chromatic diff accepted in the PR |
+| Regressions caught before merge | 0 | > 0 and rising | Chromatic build history |
+
+A feature change still needs a recording of the real UI. Stories cover tiny
+changes and regressions, not "does the feature work".
+
+---
+
+## 6. Proposed Design
+
+### 6.1 Architecture overview
+
+Three layers: the app's provider tree extracted so a runner can mount it, a
+story runtime that turns controls into a mocked world, and per-page mock modules
+that live with the page.
+
+Only the third layer is authored per page, and it is three files next to the
+page:
+
+```
+src/pages/<Page>/
+├── <Page>.stories.tsx           # human-owned: title, route, named variants
+├── <Page>.stories.mocks.tsx     # AI-owned: controls, handlers, config
+└── __story_mockdata__/<page>.ts # AI-owned: payload builders
+```
+
+The story file is the whole human surface. Everything else the page needs
+(providers, shell, access, msw, containment) arrives from the global decorator:
+
+```tsx
+type HomeArgs = PageStoryArgs<typeof homeMocks>;
+
+const meta = {
+	title: 'Pages/Home',
+	component: HomePage,
+	decorators: [withAppLayout],
+	...storyMocks(homeMocks, { route: ROUTES.HOME }),
+} satisfies Meta<HomeArgs>;
+
+/** Every widget carrying data. */
+export const Default: StoryObj<HomeArgs> = {};
+
+/** Fresh workspace: nothing ingested, so the welcome checklist takes over. */
+export const NoIngestion: StoryObj<HomeArgs> = {
+	args: { logsIngestion: false, tracesIngestion: false, dashboards: 0 },
+};
+```
+
+A named story exists when the state is worth linking to. Everything else is a
+control someone turns.
+
+`src/storybook/` holds the rest: the story runtime, the control builders, the
+global mock modules, the access grant, the msw stack, the navigation
+containment and the two decorators. It is infrastructure, edited when the
+mechanism changes, not when a page is added.
+
+### 6.2 Key technical decisions
+
+#### The page is the unit, not the component
+
+**Decision:** stories render pages. A component's states are reached by turning
+a control on the page that renders it.
+
+**Rationale:** a component out of context proves nothing about the page. The
+picture that matters is the one with the shell, the real spacing and the real
+data around it. It also keeps the story count near the page count instead of
+near the component count.
+
+#### Controls are knobs on responses, never props
+
+**Decision:** a control resolves through `handlers`, `config` or `effect`. A
+control change re-registers the msw handlers and remounts the story with an
+empty query cache.
+
+**Rationale:** a prop-driven control shows a state the page cannot actually be
+in. Driving the response means the page fetches, decides and renders the way it
+does in production, including its own loading and empty branches.
+
+#### Mocks are AI-owned, and marked as such
+
+**Decision:** `*.stories.mocks.tsx` and `__story_mockdata__/**` carry a
+generated banner enforced by the skill, and the root `.gitattributes` marks
+those paths `linguist-generated=true` so GitHub collapses them in the diff.
+
+```ts
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+```
+
+The folder is `__story_mockdata__`, not `__mockdata__`: `src/mocks-server/__mockdata__`
+already exists and is human-owned jest fixture data, so one glob cannot mark
+both without collapsing files nobody agreed to hand over.
+
+**Rationale:** the review target is the rendered page and the Chromatic diff. A
+reviewer reading 300 lines of payload builders is spending attention on the one
+part of the change that no human is expected to keep correct.
+
+**Consequence:** mocks must be regenerable from the page alone. Nothing
+page-specific goes into `src/storybook/`, and payload builders take their types
+from `src/api/generated` where the endpoint has them, so a contract change is a
+compile error rather than a mock that quietly lies.
+
+#### A story is one page, and stays there
+
+**Decision:** `lib/history` is aliased to a proxy over a memory history. A
+navigation that keeps the pathname (query or hash) is applied; a different
+pathname, an off-site href, `window.open` or a relative `go`/`goBack` is
+swallowed and listed in `NavigationBlockedOverlay`.
+
+**Rationale:** leaving the page unmounts the story, and following a real href
+navigates the iframe out of Storybook. Tabs, filters and pagination are
+query-param navigation, so they keep working, which is most of what a page story
+needs. Nothing is dropped silently.
+
+**Gap:** nuqs runs on its testing adapter with its own copy of the query string.
+A page that writes params through both `useQueryState` and
+`history.push({ search })` sees the two diverge inside a story.
+
+#### Determinism is a Chromatic prerequisite
+
+**Decision:** before Chromatic is turned on, mock data uses frozen dates and
+charts render from static data with animation disabled.
+
+**Rationale:** a snapshot has to be byte-identical between runs. Two live
+sources of drift today: `appShellMocks` computes trial and payment-failed dates
+from `Date.now()`, and uPlot charts animate in. Charts stay in the picture,
+they just have to be the same picture every time.
+
+#### Module aliases are typed against the real module
+
+**Decision:** three modules are replaced for every story, each annotated
+`typeof import('<real module>')`.
+
+| Module | Replacement | Why |
+|--------|-------------|-----|
+| `lib/history` | `navigation/history.alias.ts` | containment, above |
+| `api/common/logEvent` | `mocks/logEvent.mock.ts` | analytics never leave the iframe |
+| `constants/env` | `mocks/env.mock.ts` | pins the API origin the handlers answer on |
+
+**Rationale:** the annotation makes drift a compile error instead of a story that
+fails at render in whichever component imports it. Same mechanism as jest's
+`moduleNameMapper`, and each alias notes where the same import lands under jest.
+
+### 6.3 Edge cases & failure modes
+
+| Scenario | Behaviour |
+|----------|-----------|
+| Endpoint nobody mocked | catch-all logs `[storybook] no msw handler`, answers 501 |
+| Page redirects on mount | navigation overlay on load, usually a wrong `route` or a guard denying |
+| Shell disappears in `loading` | a shell endpoint went through `response.json`; it needs a plain resolver |
+| Leftover AuthZ dev override | cleared on every render unless Access is `dev-tools` |
+| A story sets a role the grant denies | impossible: `role` is derived from the grant |
+| Project-level control added | the tab needs a reload; Vite hot-updates `preview.tsx` without re-preparing open stories |
+| AuthZ dev overrides in a static build | inert, they need `IS_DEV`. Dev server only |
+| State only reachable by interaction | not covered. See below |
+
+**Play functions.** `storybook/test` is available and the module mocks are `fn()`
+spies, so a `play` could open a dropdown, click a tab or assert on `logEvent`,
+and Chromatic snapshots after `play` completes. That is the mechanism for states
+no control can reach. Not used for now: controls only, deliberately, to keep the
+authoring cost of a page at one skill run.
+
+---
+
+## 7. Alternatives considered
+
+| Option | Pros | Cons | Why not chosen |
+|--------|------|------|----------------|
+| Component stories | small, cheap, conventional | proves nothing about the page; story count tracks component count; still needs mocked providers | a page story with controls covers the same states in context |
+| Presentational `PageView` + args | no msw, no providers, no query cache; a state is one `args` object | requires splitting every page into a container and a view first; the page's own fetching, loading and empty branches are never exercised; each state is a named story, so the count grows fast | the split is a refactor of the 60 directories in `src/pages/` before the first story, and it moves the fetching the page actually does out of the picture |
+| Jest snapshot tests | already in the repo | serialised DOM is not a picture; a token or CSS change is invisible | not a visual test |
+
+### Prior art
+
+Page-level stories are an established pattern, and the teams doing it split into
+two camps over where the data comes from. The list below is what could be
+verified in public repos and docs.
+
+**The real connected page against msw**, which is what this proposal does:
+
+| Who | What they do | Where |
+|-----|--------------|-------|
+| PostHog | the closest match to this proposal, and the largest. 104 `.stories.tsx` files import `scenes/App`: the story mounts the whole app and pushes a route (`router.actions.push(urls.logs())`), so it gets the real shell, not a page in isolation. `mswDecorator` maps each endpoint to a mock at the meta level, `layout: 'fullscreen'`, `mockDate` freezes the clock, and a seeded LCG supplies the random data. Feature flags are a story parameter. Fixtures are sized past the page's cap on purpose, so pagination and the truncation banner render | [`LogsScene.stories.tsx`](https://github.com/PostHog/posthog/blob/master/products/logs/frontend/LogsScene.stories.tsx) |
+| Teleport (Gravitational) | the real page inside `TeleportProviderBasic`, with `beforeEach({ msw })` per story: `successGetUsers`, `handleGetUsers(() => delay('infinite'))` for loading, `errorGetUsers` for failed. The handlers come from `teleport/test/helpers/`, shared with the test suite. The preview starts one msw worker in a loader, clears the query cache per story, sets `retry: false`, and toggles the auth provider from an arg. 160 story files under `web/packages/teleport/src/` | [`Users.story.tsx`](https://github.com/gravitational/teleport/blob/master/web/packages/teleport/src/Users/Users.story.tsx), [`preview.tsx`](https://github.com/gravitational/teleport/blob/master/web/.storybook/preview.tsx) |
+| Metabase | msw globally through `msw-storybook-addon`, plus explicit determinism work: `METABASE_REMOVE_DELAYS`, every font forced to load before render, and the lazy echarts chunk pulled into the bundle so a snapshot cannot catch a Suspense skeleton. Visual regression through Loki | [`preview.tsx`](https://github.com/metabase/metabase/blob/master/.storybook/preview.tsx) |
+| Prefect | one msw worker in the preview, seeded from `@tests/utils/handlers`, the same handler set the tests use | [`preview.ts`](https://github.com/PrefectHQ/prefect/blob/main/ui-v2/.storybook/preview.ts) |
+| Mealdrop (Yann Braga, Storybook maintainer) | the reference project for this pattern: the real routed page, a `withDeeplink` decorator, msw handlers, `Loading` via infinite delay, `NotFound` and `Error` via 404 and 500, and `play` functions driving the interactions | [`RestaurantDetailPage.stories.tsx`](https://github.com/yannbf/mealdrop/blob/main/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx) |
+
+**The presentational split**, where a `PageView` takes the data as props and the
+fetching lives in a wrapper outside Storybook:
+
+| Who | What they do | Where |
+|-----|--------------|-------|
+| Coder | 76 `*PageView.stories.tsx` files, part of 290 story files under `site/src/pages/`. `WorkspacesPageView` alone carries 23 named stories driven by args (`CannotCreateWorkspace`, `Loading`, `NoSearchResults`, `UnhealthyWorkspace`, `InvalidPageNumber`), with providers supplied by `withAuthProvider`, `withDashboardProvider`, `withProxyProvider()`. Chromatic gates the diffs | [`WorkspacesPageView.stories.tsx`](https://github.com/coder/coder/blob/main/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx) |
+| Netlify | stories for a whole page (Team Overview) next to stories for its cards, reusing the fixture data their integration and unit tests already maintain, with Chromatic for the visual diff | [blog post](https://www.netlify.com/blog/storybook-visual-regression-testing/) |
+| BBC, The Guardian, the Storybook maintainers | named in Storybook's own guidance as teams that keep components presentational up to the screen level and put the connected logic in one wrapper component outside Storybook | [Building pages with Storybook](https://storybook.js.org/docs/writing-stories/build-pages-with-storybook) |
+
+---
+
+## 8. Trade-offs & risks
+
+### Trade-offs accepted
+
+- Mocks can lie. Nothing checks a payload against the real API at runtime.
+  Typing builders from `src/api/generated` narrows it, it does not close it.
+- Controls only. States behind an interaction are not covered until play
+  functions are adopted.
+- msw v1 pinned by the jest suite.
+- `.storybook/main.ts` carries an exclusion list of `vite.config.ts` plugins,
+  maintained by hand.
+
+### Risks
+
+| Risk | Likelihood | Impact | Mitigation |
+|------|------------|--------|------------|
+| Mock drift: story green, production broken | High | Medium | builders typed from `src/api/generated`; E2E owns the real contract; drift shows up as a Chromatic diff on the next regeneration |
+| Snapshot cost grows with pages × states × 2 themes | High | Medium | per-story `chromatic.disableSnapshot` to trim; snapshot the states worth watching |
+| Flaky diffs from non-deterministic pixels | High | Medium | frozen dates, animations off, static chart data (Phase 2 prerequisite) |
+
+---
+
+## 9. Accessibility plan
+
+`@storybook/addon-a11y` is in the addon list. It runs axe on the rendered
+story, so a page gets an a11y pass in every state its controls can reach, which
+is more than the app gets today.
+
+Informational, not a gate: the addon reports on existing pages that were never
+audited, so making it blocking would block on debt this work did not create.
+Chromatic's review check is the only blocking gate.
+
+---
+
+## 10. Performance plan
+
+- **No production impact.** `src/storybook/` and `src/harness/` are only reached
+  by stories. The msw worker is served from `.storybook/public/`, kept out of
+  `../public` so it cannot ship in a production build.
+- **Per-story cost.** A control change remounts the tree with a fresh query
+  cache, which is the point: the page refetches. Remount is keyed on theme plus
+  the resolved control values, so nothing remounts without a reason.
+- **`retry: false`** on the story query client, so a forced failure renders its
+  error state immediately instead of after three retries.
+
+---
+
+## 11. Rollout plan
+
+### Phases
+
+| Phase | Description | Status |
+|-------|-------------|--------|
+| **Phase 1: Home** | the story runtime and the `signoz-page-story` skill, proved by one page: Home | This PR |
+| **Phase 2: Chromatic** | determinism prerequisites, CI job, blocking review check, snapshot exclusions | Not started |
+| **Phase 3: Page fan-out** | more pages, gradually, one skill run each, the auth-less ones (login, signup, workspace-locked) included | Continuous |
+
+No end date. Phase 3 runs for as long as there are pages worth covering, and a
+page is added when someone is working on it.
+
+### Phase 2 detail
+
+- **Coverage:** every story, light and dark. A story can opt out with
+  `parameters.chromatic.disableSnapshot` when the cost is not worth it.
+- **Gate:** Chromatic's review check is required. It stays red until a frontend
+  reviewer accepts the diffs, so an unreviewed visual change cannot merge.
+- **Prerequisites:** frozen dates in mock data (`appShellMocks` computes banner
+  dates from `Date.now()` today), animations off, charts rendering the same
+  picture from static data.
+- **Baseline:** main.
+
+### Failure triage
+
+A red story has two causes, and they are told apart before anything is edited:
+
+1. **A real visual regression.** Fix the app.
+2. **The component changed and the mocks no longer match it.** Regenerate the
+   mocks with the skill. This is expected, routine, and not a review event.
+
+### Rollback
+
+Phase 1 is additive: nothing in the app bundle depends on it, so removing it is
+deleting directories. The two app-side changes (`AppHarness` extraction, the
+`appContextMock` fixture) stand on their own and stay. Phase 2 rolls back by
+making the Chromatic check non-required.
+
+---
+
+## 12. Testing strategy
+
+Stories are not tests, and there are no assertions in them. What guards the
+stories themselves:
+
+### Per-story gates (the skill's `verify.md`)
+
+- Console silent: no `[storybook] no msw handler`, no 501, no msw unhandled
+  request, no React warning.
+- No navigation overlay on mount.
+- Every control flipped once, with its effect seen on screen. Args are settable
+  from the iframe URL, so the sweep runs headless.
+- Both themes render styled (`<body data-theme>` present).
+- `<body data-signoz-story-role>` and `data-signoz-context-role` agree, which is
+  the tell that the page reads the `AppContext` the story filled.
+- `pnpm tsgo --noEmit`, `pnpm exec oxlint`, `pnpm exec oxfmt --check` clean.
+
+### The layers around it
+
+| Layer | What it owns |
+|-------|--------------|
+| Jest (786 files) | component and hook behaviour |
+| E2E (10 suites) | flows against a real backend, real contracts, migration correctness |
+| Page stories | what the page looks like, in every state |
+| Chromatic (Phase 2) | that it still looks like that |
+
+A component migrated wrongly is E2E's to catch, not Chromatic's. A story that
+renders a broken component still renders, and the diff only shows what moved.
+
+---
+
+## 13. Observability
+
+N/A. Nothing here runs in production. `api/common/logEvent` is replaced by a
+spy, and `preview-head.html` stubs `signozBootData` with posthog, sentry,
+appcues and pylon all off, so no third-party script loads inside the iframe.
+
+Phase 2 adds Chromatic build history, which is where the regression record
+lives.
+
+---
+
+## 14. Design system check
+
+- [x] Reuses existing components/patterns, no new UI pattern introduced
+
+Two UI surfaces are added, both Storybook-only: `NavigationBlockedOverlay`
+(lists what the page tried to navigate to) and the story controls panel, which
+is Storybook's own. `applyThemeBodyClass` puts `<body>` in the state the app
+gets from `index.html` plus `AppLayout`, including `data-theme="default"`,
+without which every `@signozhq/design-tokens` semantic token resolves to nothing
+and the page renders unstyled.
+
+---
+
+## 15. Timeline & milestones
+
+| Milestone | Status |
+|-----------|--------|
+| Phase 1: Home | This PR |
+| Phase 2: Chromatic + determinism | Not started, TODO |
+| Phase 3: page fan-out | Continuous, no end date |
+
+Effort estimate: TODO.
+
+---
+
+## 16. What would let a regression through
+
+Ranked by likelihood, since a visual test that passes wrongly is worse than one
+that fails.
+
+| # | Hazard | Mitigation |
+|---|--------|------------|
+| 1 | **Mock payload no longer matches the API.** The page renders the mock's shape happily while production gets something else. | builders typed from `src/api/generated`; E2E owns the real contract |
+| 2 | **A state exists that no control reaches.** It is never snapshotted, so it never regresses visibly. | the skill's inventory is the checklist: a branch in it and not in the panel is a bug in the story |
+| 3 | **Non-deterministic pixels.** A diff every day teaches the team to click accept. | frozen dates, animations off, static chart data |
+| 4 | **A story stops covering the page** because a widget silently stopped rendering (permission, flag, preference). | control sweep: a control with no visible effect is a finding, not a shrug |
+| 5 | **Endpoint answered by a stale layer.** A page handler that does not match the call falls through to a shared handler, which answers something plausible. | endless spinner with Data on `loaded` is the symptom |
+| 6 | **nuqs and history diverge** on a page that writes params through both. | known gap, documented; a page on one mechanism is unaffected |
+| 7 | **Snapshot exclusions accumulate** until the gate covers little. | exclusions are a reviewed edit in the story file |

frontend/jest.setup.ts

@@ -62,6 +62,40 @@ if (typeof window.ResizeObserver === 'undefined') {
 	(window as any).ResizeObserver = ResizeObserverMock;
 }
 
+if (typeof globalThis.DOMRect === 'undefined') {
+	(globalThis as any).DOMRect = class DOMRect {
+		x = 0;
+		y = 0;
+		width = 0;
+		height = 0;
+		top = 0;
+		right = 0;
+		bottom = 0;
+		left = 0;
+		constructor(x = 0, y = 0, width = 0, height = 0) {
+			this.x = x;
+			this.y = y;
+			this.width = width;
+			this.height = height;
+			this.top = y;
+			this.right = x + width;
+			this.bottom = y + height;
+			this.left = x;
+		}
+		toJSON(): any {
+			return { x: this.x, y: this.y, width: this.width, height: this.height };
+		}
+		static fromRect(rect?: {
+			x?: number;
+			y?: number;
+			width?: number;
+			height?: number;
+		}): DOMRect {
+			return new DOMRect(rect?.x, rect?.y, rect?.width, rect?.height);
+		}
+	};
+}
+
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -7,6 +7,8 @@
     "preinstall": "npx only-allow pnpm",
     "i18n:generate-hash": "node ./i18-generate-hash.cjs",
     "dev": "vite",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static",
     "build": "vite build",
     "preview": "vite preview",
     "prettify": "oxfmt",
@@ -48,9 +50,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/design-tokens": "2.1.6",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.0.23",
+    "@signozhq/ui": "0.1.0",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -158,6 +160,10 @@
     "@commitlint/config-conventional": "20.4.4",
     "@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",
+    "@testing-library/dom": "8.20.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
@@ -203,6 +209,7 @@
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
     "sharp": "0.35.0",
+    "storybook": "10.5.9",
     "stylelint": "17.7.0",
     "svgo": "4.0.2",
     "ts-jest": "29.4.9",
@@ -238,4 +245,4 @@
     "tmp@<0.2.6": ">=0.2.6 <0.3.0",
     "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

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

@@ -22,10 +22,7 @@ import type {
 	CreateServiceAccountKey201,
 	CreateServiceAccountKeyPathParameters,
 	CreateServiceAccountRole201,
-	CreateServiceAccountRoleDeprecated201,
-	CreateServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountPathParameters,
-	DeleteServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountRolePathParameters,
 	GetMyServiceAccount200,
 	GetServiceAccount200,
@@ -39,7 +36,6 @@ import type {
 	ListServiceAccounts200,
 	RenderErrorResponseDTO,
 	RevokeServiceAccountKeyPathParameters,
-	ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
 	ServiceaccounttypesPostableFactorAPIKeyDTO,
 	ServiceaccounttypesPostableServiceAccountDTO,
 	ServiceaccounttypesPostableServiceAccountRoleDTO,
@@ -1253,194 +1249,6 @@ export const invalidateGetServiceAccountRoles = async (
 	return queryClient;
 };
 
-/**
- * This endpoint assigns a role to a service account
- * @deprecated
- * @summary Create service account role
- */
-export const createServiceAccountRoleDeprecated = (
-	{ id }: CreateServiceAccountRoleDeprecatedPathParameters,
-	serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateServiceAccountRoleDeprecated201>({
-		url: `/api/v1/service_accounts/${id}/roles`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
-		signal,
-	});
-};
-
-export const getCreateServiceAccountRoleDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['createServiceAccountRoleDeprecated'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return createServiceAccountRoleDeprecated(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>
->;
-export type CreateServiceAccountRoleDeprecatedMutationBody =
-	| BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>
-	| undefined;
-export type CreateServiceAccountRoleDeprecatedMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Create service account role
- */
-export const useCreateServiceAccountRoleDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-	},
-	TContext
-> => {
-	return useMutation(
-		getCreateServiceAccountRoleDeprecatedMutationOptions(options),
-	);
-};
-/**
- * This endpoint revokes a role from service account
- * @deprecated
- * @summary Delete service account role
- */
-export const deleteServiceAccountRoleDeprecated = (
-	{ id, rid }: DeleteServiceAccountRoleDeprecatedPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/service_accounts/${id}/roles/${rid}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteServiceAccountRoleDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteServiceAccountRoleDeprecated'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteServiceAccountRoleDeprecated(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>
->;
-
-export type DeleteServiceAccountRoleDeprecatedMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Delete service account role
- */
-export const useDeleteServiceAccountRoleDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-	TContext
-> => {
-	return useMutation(
-		getDeleteServiceAccountRoleDeprecatedMutationOptions(options),
-	);
-};
 /**
  * This endpoint gets my service account
  * @summary Gets my service account

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -9092,13 +9092,6 @@ export interface SavedviewtypesUpdatableSavedViewDTO {
 	spec: SavedviewtypesSavedViewSpecDTO;
 }
 
-export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -11020,21 +11013,6 @@ export type GetServiceAccountRoles200 = {
 	status: string;
 };
 
-export type CreateServiceAccountRoleDeprecatedPathParameters = {
-	id: string;
-};
-export type CreateServiceAccountRoleDeprecated201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteServiceAccountRoleDeprecatedPathParameters = {
-	id: string;
-	rid: string;
-};
 export type GetMyServiceAccount200 = {
 	data: ServiceaccounttypesServiceAccountWithRolesDTO;
 	/**

frontend/src/assets/Logos/azure.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#0078D4" d="M22.379 23.343a1.62 1.62 0 0 0 1.536-2.14v.002L17.35 1.76A1.62 1.62 0 0 0 15.816.657H8.184A1.62 1.62 0 0 0 6.65 1.76L.086 21.204a1.62 1.62 0 0 0 1.536 2.139h4.741a1.62 1.62 0 0 0 1.535-1.103l.977-2.892 4.947 3.675c.28.208.618.32.966.32m-3.084-12.531 3.624 10.739a.54.54 0 0 1-.51.713v-.001h-.03a.54.54 0 0 1-.322-.106l-9.287-6.9h4.853m6.313 7.006c.116-.326.13-.694.007-1.058L9.79 1.76a1.722 1.722 0 0 0-.007-.02h6.034a.54.54 0 0 1 .512.366l6.562 19.445a.54.54 0 0 1-.338.684"/>
+</svg>

frontend/src/assets/Logos/dify.svg

@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>Dify</title>
+	<path d="M7.043 6.487c1.635 0 2.241-1.003 2.241-2.243S8.681 2 7.044 2C5.405 2 4.801 3.003 4.801 4.244c0 1.24.604 2.243 2.241 2.243z" fill="#03F" />
+	<path d="M14.883 6.97v1.443h-3.679v3.203h3.68v8.012H8.801V8.41h-8v3.203h4.48v8.012H0v3.203h24v-3.203h-5.6v-8.012H24V8.41h-5.6V5.206H24V2.003h-4.161a4.97 4.97 0 00-4.961 4.967h.005z" fill="#03F" />
+</svg>

frontend/src/assets/Logos/from-log-file.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill-rule:evenodd;clip-rule:evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill:#D1D5DB;fill-rule:evenodd;clip-rule:evenodd"/></svg>

frontend/src/assets/Logos/github-copilot.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#9CA3AF" d="M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02 5.937 22.02.939 18.492.078 16.997A.641.641 0 0 1 0 16.741v-2.869a.883.883 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.098 10.098 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98c2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.841.841 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256Zm-11.75-5.992h-.344a4.359 4.359 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492-1.725 0-2.989-.359-3.782-1.259a2.137 2.137 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.359 4.359 0 0 1-.355-.508Zm2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm3.313-6.185c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"/>
+</svg>

frontend/src/assets/Logos/kong.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 44.8 40" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<linearGradient id="kong-a" x1="38.204" x2="8.732" y1="18.417" y2="48.543" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-b" x1="38.107" x2="8.635" y1="18.322" y2="48.448" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-c" x1="29.439" x2="-0.033" y1="9.842" y2="39.968" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-d" x1="30.291" x2="0.819" y1="10.676" y2="40.801" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+	</defs>
+	<path d="m14.7 32.9-1.1 1.4 2.5 3.9-.3 1.8h10.6l.7-1.8-4.2-5.3z" fill="url(#kong-a)" />
+	<path d="M20.5 9.4 16.7 16l18.6 22-.5 2h8.5l1.5-7.1L24.9 9.4z" fill="url(#kong-b)" />
+	<path d="m23 4.4-1.8 3.3h4.5l7.7 9.2 4.6-3.8v-2.4l-1.6-2.2 1.2-1.2L28.4 0z" fill="url(#kong-c)" />
+	<path d="M9.1 22.9H6.6L0 31.3V40h7.1l1.3-1.6 5.5-7.1h7.9l2.4-3.7-8.6-10.2z" fill="url(#kong-d)" />
+</svg>

frontend/src/assets/Logos/neon.svg

@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+	<path d="M63 0.018v63.535L38.418 42.25v21.303H0V0l63 .018ZM7.723 55.839h22.972V25.323l24.583 21.725V7.729L7.723 7.716v48.123Z" fill="#37C38F" />
+</svg>

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.styles.scss

@@ -1,5 +0,0 @@
-.client-side-qb-search {
-	.ant-select-selection-search {
-		width: max-content !important;
-	}
-}

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -1,661 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-
-import {
-	KeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Select, Tooltip } from 'antd';
-import {
-	OPERATORS,
-	QUERY_BUILDER_OPERATORS_BY_TYPES,
-	QUERY_BUILDER_SEARCH_VALUES,
-} from 'constants/queryBuilder';
-import { CustomTagProps } from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
-import { PLACEHOLDER } from 'container/QueryBuilder/filters/QueryBuilderSearch/constant';
-import { TypographyText } from 'container/QueryBuilder/filters/QueryBuilderSearch/style';
-import {
-	checkCommaInValue,
-	getOperatorFromValue,
-	getOperatorValue,
-	getTagToken,
-	isInNInOperator,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import {
-	DropdownState,
-	ITag,
-	Option,
-} from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
-import Suggestions from 'container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
-import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
-import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
-import { ChevronDown, ChevronUp } from '@signozhq/icons';
-import type { BaseSelectRef } from 'rc-select';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { popupContainer } from 'utils/selectPopupContainer';
-import { v4 as uuid } from 'uuid';
-
-import './ClientSideQBSearch.styles.scss';
-import { Badge } from '@signozhq/ui/badge';
-
-export interface AttributeKey {
-	key: string;
-}
-
-export interface AttributeValuesMap {
-	[key: string]: AttributeValue;
-}
-
-interface ClientSideQBSearchProps {
-	filters: TagFilter;
-	onChange: (value: TagFilter) => void;
-	whereClauseConfig?: WhereClauseConfig;
-	placeholder?: string;
-	className?: string;
-	suffixIcon?: React.ReactNode;
-	attributeValuesMap?: AttributeValuesMap;
-	attributeKeys: AttributeKey[];
-}
-
-interface AttributeValue {
-	stringAttributeValues: string[] | [];
-	numberAttributeValues: number[] | [];
-	boolAttributeValues: boolean[] | [];
-}
-
-function ClientSideQBSearch(
-	props: ClientSideQBSearchProps,
-): React.ReactElement {
-	const {
-		onChange,
-		placeholder,
-		className,
-		suffixIcon,
-		whereClauseConfig,
-		attributeValuesMap,
-		attributeKeys,
-		filters,
-	} = props;
-
-	const isDarkMode = useIsDarkMode();
-
-	const selectRef = useRef<BaseSelectRef>(null);
-
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-
-	// create the tags from the initial query here, this should only be computed on the first load as post that tags and query will be always in sync.
-	const [tags, setTags] = useState<ITag[]>(filters.items as ITag[]);
-
-	// this will maintain the current state of in process filter item
-	const [currentFilterItem, setCurrentFilterItem] = useState<ITag | undefined>();
-
-	const [currentState, setCurrentState] = useState<DropdownState>(
-		DropdownState.ATTRIBUTE_KEY,
-	);
-
-	// to maintain the current running state until the tokenization happens for the tag
-	const [searchValue, setSearchValue] = useState<string>('');
-
-	const [dropdownOptions, setDropdownOptions] = useState<Option[]>([]);
-
-	const attributeValues = useMemo(() => {
-		if (currentFilterItem?.key?.key) {
-			return attributeValuesMap?.[currentFilterItem.key.key];
-		}
-		return {
-			stringAttributeValues: [],
-			numberAttributeValues: [],
-			boolAttributeValues: [],
-		};
-	}, [attributeValuesMap, currentFilterItem?.key?.key]);
-
-	const handleDropdownSelect = useCallback(
-		(value: string) => {
-			let parsedValue: BaseAutocompleteData | string;
-
-			try {
-				parsedValue = JSON.parse(value);
-			} catch {
-				parsedValue = value;
-			}
-			if (currentState === DropdownState.ATTRIBUTE_KEY) {
-				setCurrentFilterItem((prev) => ({
-					...prev,
-					key: parsedValue as BaseAutocompleteData,
-					op: '',
-					value: '',
-				}));
-				setCurrentState(DropdownState.OPERATOR);
-				setSearchValue((parsedValue as BaseAutocompleteData)?.key);
-			} else if (currentState === DropdownState.OPERATOR) {
-				if (value === OPERATORS.EXISTS || value === OPERATORS.NOT_EXISTS) {
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: value,
-							value: '',
-						} as ITag,
-					]);
-					setCurrentFilterItem(undefined);
-					setSearchValue('');
-					setCurrentState(DropdownState.ATTRIBUTE_KEY);
-				} else {
-					setCurrentFilterItem((prev) => ({
-						key: prev?.key as BaseAutocompleteData,
-						op: value as string,
-						value: '',
-					}));
-					setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-					setSearchValue(`${currentFilterItem?.key?.key} ${value}`);
-				}
-			} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-				const operatorType =
-					operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
-				const isMulti = operatorType === QUERY_BUILDER_SEARCH_VALUES.MULTIPLY;
-
-				if (isMulti) {
-					const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
-					// this condition takes care of adding the IN/NIN multi values when pressed enter on an already existing value.
-					// not the best interaction but in sync with what we have today!
-					if (tagValue.includes(String(value))) {
-						setSearchValue('');
-						setCurrentState(DropdownState.ATTRIBUTE_KEY);
-						setCurrentFilterItem(undefined);
-						setTags((prev) => [
-							...prev,
-							{
-								key: currentFilterItem?.key,
-								op: currentFilterItem?.op,
-								value: tagValue,
-							} as ITag,
-						]);
-						return;
-					}
-					// this is for adding subsequent comma seperated values
-					const newSearch = [...tagValue];
-					newSearch[newSearch.length === 0 ? 0 : newSearch.length - 1] = value;
-					const newSearchValue = newSearch.join(',');
-					setSearchValue(`${tagKey} ${tagOperator} ${newSearchValue},`);
-				} else {
-					setSearchValue('');
-					setCurrentState(DropdownState.ATTRIBUTE_KEY);
-					setCurrentFilterItem(undefined);
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: currentFilterItem?.op,
-							value,
-						} as ITag,
-					]);
-				}
-			}
-		},
-		[currentFilterItem?.key, currentFilterItem?.op, currentState, searchValue],
-	);
-
-	const handleSearch = useCallback((value: string) => {
-		setSearchValue(value);
-	}, []);
-
-	const onInputKeyDownHandler = useCallback(
-		(event: KeyboardEvent<Element>): void => {
-			if (event.key === 'Backspace' && !searchValue) {
-				event.stopPropagation();
-				setTags((prev) => prev.slice(0, -1));
-			}
-		},
-		[searchValue],
-	);
-
-	const handleOnBlur = useCallback((): void => {
-		if (searchValue) {
-			const operatorType =
-				operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
-			// if key is added and operator is not present then convert to body CONTAINS key
-			if (
-				currentFilterItem?.key &&
-				isEmpty(currentFilterItem?.op) &&
-				whereClauseConfig?.customKey === 'body' &&
-				whereClauseConfig?.customOp === OPERATORS.CONTAINS
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: {
-							key: 'body',
-							dataType: DataTypes.String,
-							type: '',
-							id: 'body--string----true',
-						},
-						op: OPERATORS.CONTAINS,
-						value: currentFilterItem?.key?.key,
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else if (
-				currentFilterItem?.op === OPERATORS.EXISTS ||
-				currentFilterItem?.op === OPERATORS.NOT_EXISTS
-			) {
-				// is exists and not exists operator is present then convert directly to tag! no need of value here
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: currentFilterItem?.op,
-						value: '',
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else if (
-				// if the current state is in sync with the kind of operator used then convert into a tag
-				validationMapper[operatorType]?.(
-					isArray(currentFilterItem?.value)
-						? currentFilterItem?.value.length || 0
-						: 1,
-				)
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key as BaseAutocompleteData,
-						op: currentFilterItem?.op as string,
-						value: currentFilterItem?.value || '',
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			}
-		}
-	}, [
-		currentFilterItem?.key,
-		currentFilterItem?.op,
-		currentFilterItem?.value,
-		searchValue,
-		whereClauseConfig?.customKey,
-		whereClauseConfig?.customOp,
-	]);
-
-	// this useEffect takes care of tokenisation based on the search state
-	useEffect(() => {
-		// if there is no search value reset to the default state
-		if (!searchValue) {
-			setCurrentFilterItem(undefined);
-			setCurrentState(DropdownState.ATTRIBUTE_KEY);
-		}
-
-		// split the current search value based on delimiters
-		const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
-
-		if (
-			// Case 1 - if key is defined but the search text doesn't match with the set key,
-			// can happen when user selects from dropdown and then deletes a few characters
-			currentFilterItem?.key &&
-			currentFilterItem?.key?.key !== tagKey.split(' ')[0]
-		) {
-			setCurrentFilterItem(undefined);
-			setCurrentState(DropdownState.ATTRIBUTE_KEY);
-		} else if (tagOperator && isEmpty(currentFilterItem?.op)) {
-			// Case 2 -> key is set and now typing for the operator
-			if (
-				tagOperator === OPERATORS.EXISTS ||
-				tagOperator === OPERATORS.NOT_EXISTS
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: tagOperator,
-						value: '',
-					} as ITag,
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else {
-				setCurrentFilterItem((prev) => ({
-					key: prev?.key as BaseAutocompleteData,
-					op: tagOperator,
-					value: '',
-				}));
-
-				setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-			}
-		} else if (
-			// Case 3 -> selected operator from dropdown and then erased a part of it
-			!isEmpty(currentFilterItem?.op) &&
-			tagOperator !== currentFilterItem?.op
-		) {
-			setCurrentFilterItem((prev) => ({
-				key: prev?.key as BaseAutocompleteData,
-				op: '',
-				value: '',
-			}));
-			setCurrentState(DropdownState.OPERATOR);
-		} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-			// Case 4 -> the final value state where we set the current filter values and the tokenisation happens on either
-			// dropdown click or blur event
-			const currentValue = {
-				key: currentFilterItem?.key as BaseAutocompleteData,
-				op: currentFilterItem?.op as string,
-				value: tagValue,
-			};
-			if (!isEqual(currentValue, currentFilterItem)) {
-				setCurrentFilterItem((prev) => ({
-					key: prev?.key as BaseAutocompleteData,
-					op: prev?.op as string,
-					value: tagValue,
-				}));
-			}
-		}
-	}, [
-		currentFilterItem,
-		currentFilterItem?.key,
-		currentFilterItem?.op,
-		searchValue,
-		currentState,
-	]);
-
-	// the useEffect takes care of setting the dropdown values correctly on change of the current state
-	useEffect(() => {
-		if (currentState === DropdownState.ATTRIBUTE_KEY) {
-			const filteredAttributeKeys = attributeKeys.filter((key) =>
-				key.key.startsWith(searchValue),
-			);
-			setDropdownOptions(
-				filteredAttributeKeys?.map(
-					(key) =>
-						({
-							label: key.key,
-							value: key,
-						}) as Option,
-				) || [],
-			);
-		}
-		if (currentState === DropdownState.OPERATOR) {
-			const keyOperator = searchValue.split(' ');
-			const partialOperator = keyOperator?.[1];
-			const strippedKey = keyOperator?.[0];
-
-			let operatorOptions;
-			if (currentFilterItem?.key?.dataType) {
-				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES[
-					currentFilterItem.key
-						.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
-				].map((operator) => ({
-					label: operator,
-					value: operator,
-				}));
-
-				if (partialOperator) {
-					operatorOptions = operatorOptions.filter((op) =>
-						op.label.startsWith(partialOperator.toLocaleUpperCase()),
-					);
-				}
-				setDropdownOptions(operatorOptions);
-			} else if (strippedKey.endsWith('[*]') && strippedKey.startsWith('body.')) {
-				operatorOptions = [OPERATORS.HAS, OPERATORS.NHAS].map((operator) => ({
-					label: operator,
-					value: operator,
-				}));
-				setDropdownOptions(operatorOptions);
-			} else {
-				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES.universal.map(
-					(operator) => ({
-						label: operator,
-						value: operator,
-					}),
-				);
-
-				if (partialOperator) {
-					operatorOptions = operatorOptions.filter((op) =>
-						op.label.startsWith(partialOperator.toLocaleUpperCase()),
-					);
-				}
-				setDropdownOptions(operatorOptions);
-			}
-		}
-
-		if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-			const values: Array<string | number | boolean> = [];
-			const { tagValue } = getTagToken(searchValue);
-			if (isArray(tagValue)) {
-				if (!isEmpty(tagValue[tagValue.length - 1])) {
-					values.push(tagValue[tagValue.length - 1]);
-				}
-			} else if (!isEmpty(tagValue)) {
-				values.push(tagValue);
-			}
-
-			const currentAttributeValues =
-				attributeValues?.stringAttributeValues ||
-				attributeValues?.numberAttributeValues ||
-				attributeValues?.boolAttributeValues ||
-				[];
-
-			values.push(...currentAttributeValues);
-
-			if (attributeValuesMap) {
-				setDropdownOptions(
-					values.map(
-						(val) =>
-							({
-								label: checkCommaInValue(String(val)),
-								value: val,
-							}) as Option,
-					),
-				);
-			} else {
-				// If attributeValuesMap is not provided, don't set dropdown options
-				setDropdownOptions([]);
-			}
-		}
-	}, [
-		attributeValues,
-		currentFilterItem?.key?.dataType,
-		currentState,
-		attributeKeys,
-		searchValue,
-		attributeValuesMap,
-	]);
-
-	useEffect(() => {
-		const filterTags: IBuilderQuery['filters'] = {
-			op: 'AND',
-			items: [],
-		};
-		tags.forEach((tag) => {
-			const computedTagValue =
-				tag.value &&
-				Array.isArray(tag.value) &&
-				tag.value[tag.value.length - 1] === ''
-					? tag.value?.slice(0, -1)
-					: (tag.value ?? '');
-			filterTags.items.push({
-				id: tag.id || uuid().slice(0, 8),
-				key: tag.key,
-				op: getOperatorValue(tag.op),
-				value: computedTagValue,
-			});
-		});
-
-		if (!isEqual(filters, filterTags)) {
-			onChange(filterTags);
-			setTags(
-				filterTags.items.map((tag) => ({
-					...tag,
-					op: getOperatorFromValue(tag.op),
-				})) as ITag[],
-			);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [tags]);
-
-	const queryTags = useMemo(
-		() => tags.map((tag) => `${tag.key.key} ${tag.op} ${tag.value}`),
-		[tags],
-	);
-
-	const onTagRender = ({
-		value,
-		closable,
-		onClose,
-	}: CustomTagProps): React.ReactElement => {
-		const { tagOperator } = getTagToken(value);
-		const isInNin = isInNInOperator(tagOperator);
-		const chipValue = isInNin
-			? value?.trim()?.replace(/,\s*$/, '')
-			: value?.trim();
-
-		const indexInQueryTags = queryTags.findIndex((qTag) => isEqual(qTag, value));
-		const tagDetails = tags[indexInQueryTags];
-
-		const onCloseHandler = (): void => {
-			onClose();
-			setSearchValue('');
-			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
-		};
-
-		const tagEditHandler = (value: string): void => {
-			setCurrentFilterItem(tagDetails);
-			setSearchValue(value);
-			setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
-		};
-
-		const isDisabled = !!searchValue;
-
-		return (
-			<span className="qb-search-bar-tokenised-tags">
-				<Badge
-					color="vanilla"
-					className={tagDetails?.key?.type || ''}
-					closable={!searchValue && closable}
-					onClose={(e): void => {
-						e.preventDefault();
-						onCloseHandler();
-					}}
-				>
-					<Tooltip title={chipValue}>
-						<TypographyText
-							$isInNin={isInNin}
-							$isEnabled={!!searchValue}
-							$disabled={isDisabled}
-							onClick={(): void => {
-								if (!isDisabled) {
-									tagEditHandler(value);
-								}
-							}}
-						>
-							{chipValue}
-						</TypographyText>
-					</Tooltip>
-				</Badge>
-			</span>
-		);
-	};
-
-	const suffixIconContent = useMemo(() => {
-		if (suffixIcon) {
-			return suffixIcon;
-		}
-		return isOpen ? (
-			<ChevronUp
-				size={14}
-				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-			/>
-		) : (
-			<ChevronDown
-				size={14}
-				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-			/>
-		);
-	}, [isDarkMode, isOpen, suffixIcon]);
-
-	return (
-		<div className="query-builder-search-v2 ">
-			<Select
-				ref={selectRef}
-				getPopupContainer={popupContainer}
-				virtual={false}
-				showSearch
-				tagRender={onTagRender}
-				transitionName=""
-				choiceTransitionName=""
-				filterOption={false}
-				open={isOpen}
-				suffixIcon={suffixIconContent}
-				onDropdownVisibleChange={setIsOpen}
-				autoClearSearchValue={false}
-				mode="multiple"
-				placeholder={placeholder}
-				value={queryTags}
-				searchValue={searchValue}
-				className={className}
-				rootClassName="query-builder-search client-side-qb-search"
-				disabled={!attributeKeys.length}
-				style={selectStyle}
-				onSearch={handleSearch}
-				onSelect={handleDropdownSelect}
-				onInputKeyDown={onInputKeyDownHandler}
-				notFoundContent={null}
-				showAction={['focus']}
-				onBlur={handleOnBlur}
-			>
-				{dropdownOptions.map((option) => {
-					let val = option.value;
-					try {
-						if (isObject(option.value)) {
-							val = JSON.stringify(option.value);
-						} else {
-							val = option.value;
-						}
-					} catch {
-						val = option.value;
-					}
-					return (
-						<Select.Option key={isObject(val) ? `select-option` : val} value={val}>
-							<Suggestions
-								label={option.label}
-								value={option.value}
-								option={currentState}
-								searchValue={searchValue}
-							/>
-						</Select.Option>
-					);
-				})}
-			</Select>
-		</div>
-	);
-}
-
-ClientSideQBSearch.defaultProps = {
-	placeholder: PLACEHOLDER,
-	className: '',
-	suffixIcon: null,
-	whereClauseConfig: {},
-	attributeValuesMap: {},
-};
-
-export default ClientSideQBSearch;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -28,6 +28,9 @@ interface FieldsSelectorProps {
 	signal: DataSource;
 	maxFields?: number;
 	requiredFields?: readonly string[];
+	// Lets users add a free-typed field which
+	// does not show up in the suggestions
+	allowCustomFields?: boolean;
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
@@ -46,6 +49,7 @@ function FieldsSelectorContent({
 	signal,
 	maxFields,
 	requiredFields,
+	allowCustomFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
@@ -67,7 +71,7 @@ function FieldsSelectorContent({
 
 	const handleInputChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim().toLowerCase();
+			const value = e.target.value.trim();
 			setInputValue(value);
 			debouncedUpdate(value);
 		},
@@ -153,6 +157,7 @@ function FieldsSelectorContent({
 					addedFields={draftFields}
 					onAdd={handleAdd}
 					isAtLimit={isAtLimit}
+					allowCustomFields={allowCustomFields}
 				/>
 
 				{hasUnsavedChanges && (
@@ -192,7 +197,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
+				key: buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -21,6 +21,7 @@ interface OtherFieldsProps {
 	addedFields: TelemetryFieldKey[];
 	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
+	allowCustomFields?: boolean;
 }
 
 function OtherFields({
@@ -29,6 +30,7 @@ function OtherFields({
 	addedFields,
 	onAdd,
 	isAtLimit,
+	allowCustomFields,
 }: OtherFieldsProps): JSX.Element {
 	const { data, isFetching } = useGetQueryKeySuggestions(
 		{
@@ -45,25 +47,45 @@ function OtherFields({
 		},
 	);
 
-	const otherFields: TelemetryFieldKey[] = useMemo(() => {
-		const suggestions = Object.values(data?.data.data.keys || {}).flat();
+	const otherFields = useMemo<TelemetryFieldKey[]>(() => {
+		const rawSuggestions = Object.values(data?.data.data.keys || {}).flat();
 		// Normalize: synthesize `key` once so downstream reads can trust it.
-		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
-			(attr) => ({
-				...attr,
-				key: buildCompositeKey(attr.name, attr.fieldContext as string),
-				signal: attr.signal as SignalType,
-				fieldContext: attr.fieldContext as FieldContext,
-				fieldDataType: attr.fieldDataType,
-			}),
-		);
+		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
+			...attr,
+			key: buildCompositeKey(attr.name, attr.fieldContext as string),
+			signal: attr.signal as SignalType,
+			fieldContext: attr.fieldContext as FieldContext,
+			fieldDataType: attr.fieldDataType,
+		}));
 		const addedIds = new Set(
-			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+			addedFields.map((f) => buildCompositeKey(f.name, f.fieldContext)),
 		);
-		return normalizedSuggestions.filter(
+		const available = suggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),
 		);
-	}, [data, addedFields]);
+
+		// Prepend the custom field when its name is not in suggestions and
+		// not already added.
+		const typed = debouncedInputValue.trim();
+		const nameMatches = (list: TelemetryFieldKey[]): boolean =>
+			list.some((f) => f.name.toLowerCase() === typed.toLowerCase());
+		const showCustom =
+			!!allowCustomFields &&
+			typed.length > 0 &&
+			!nameMatches(suggestions) &&
+			!nameMatches(addedFields);
+
+		if (!showCustom) {
+			return available;
+		}
+		const customField: TelemetryFieldKey = {
+			name: typed,
+			fieldContext: '',
+			fieldDataType: '',
+			key: buildCompositeKey(typed, ''),
+		};
+		return [customField, ...available];
+	}, [data, addedFields, allowCustomFields, debouncedInputValue]);
 
 	if (isFetching) {
 		return (

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

@@ -11,7 +11,7 @@ const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
 	signal: 'logs',
 	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
 	fieldDataType: 'string',
-	key: `${fieldContext}.${name}`,
+	key: `${fieldContext}:${name}`,
 });
 
 describe('AddedFields — requiredFields', () => {
@@ -33,7 +33,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.a', 'log.c']}
+				requiredFields={['log:a', 'log:c']}
 			/>,
 		);
 
@@ -50,7 +50,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.a']}
+				requiredFields={['log:a']}
 			/>,
 		);
 
@@ -68,7 +68,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
+				requiredFields={['log:body']}
 			/>,
 		);
 
@@ -101,11 +101,11 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
+				requiredFields={['log:body']}
 			/>,
 		);
 
-		// 'log.body' locked, 'log.body_extra' removable.
+		// 'log:body' locked, 'log:body_extra' removable.
 		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
 	});
 });

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

@@ -0,0 +1,188 @@
+import { act, fireEvent, render, screen } from 'tests/test-utils';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import FieldsSelector from '../FieldsSelector';
+
+jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+// FloatingPanel is a react-rnd/portal shell — presentation only. Render its
+// children directly so the test exercises the column-editing behavior.
+jest.mock('periscope/components/FloatingPanel', () => ({
+	FloatingPanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
+const mockSuggestions = (names: string[]): void => {
+	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
+		data: {
+			data: {
+				data: {
+					keys: {
+						attributeKeys: names.map((name) => ({
+							name,
+							signal: 'logs',
+							fieldDataType: 'string',
+							fieldContext: '',
+						})),
+					},
+				},
+			},
+		},
+		isFetching: false,
+	});
+};
+
+const field = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
+	name,
+	signal: 'logs',
+	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
+	fieldDataType: 'string',
+});
+
+const renderPanel = (
+	props: Partial<React.ComponentProps<typeof FieldsSelector>> = {},
+): { onFieldsChange: jest.Mock } => {
+	const onFieldsChange = jest.fn();
+	render(
+		<FieldsSelector
+			isOpen
+			title="Edit columns"
+			fields={props.fields ?? []}
+			onFieldsChange={onFieldsChange}
+			onClose={jest.fn()}
+			signal={DataSource.LOGS}
+			allowCustomFields
+			{...props}
+		/>,
+	);
+	return { onFieldsChange };
+};
+
+// Type into the search box and flush the 400ms debounce so OtherFields (driven
+// by the debounced value) recomputes.
+const typeSearch = (value: string): void => {
+	const input = screen.getByPlaceholderText('Search for a field...');
+	act(() => {
+		fireEvent.change(input, { target: { value } });
+	});
+	act(() => {
+		jest.advanceTimersByTime(400);
+	});
+};
+
+describe('FieldsSelector — edit columns (integration)', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		mockSuggestions([]);
+	});
+
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('adds a free-typed field end to end and saves the synthesized key', () => {
+		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
+
+		typeSearch('orderId');
+
+		// custom option surfaces in OTHER FIELDS (only Add button, no suggestions)
+		expect(screen.getByText('orderId')).toBeInTheDocument();
+
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
+		});
+
+		// moved into ADDED FIELDS → OTHER FIELDS has nothing left to offer
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+
+		// Save commits the draft
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+		});
+
+		expect(onFieldsChange).toHaveBeenCalledTimes(1);
+		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
+		expect(saved).toStrictEqual(
+			expect.arrayContaining([
+				expect.objectContaining({
+					name: 'orderId',
+					fieldContext: '',
+					fieldDataType: '',
+					key: 'orderId',
+				}),
+			]),
+		);
+	});
+
+	it('adds a suggested field: it moves from OTHER FIELDS into ADDED FIELDS', () => {
+		mockSuggestions(['service.name']);
+		const { onFieldsChange } = renderPanel({ fields: [] });
+
+		const addButton = screen.getByRole('button', { name: /^add$/i });
+		act(() => {
+			fireEvent.click(addButton);
+		});
+
+		// now removable in ADDED FIELDS, no longer offered in OTHER FIELDS
+		expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /^add$/i }),
+		).not.toBeInTheDocument();
+
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+		});
+		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
+		expect(saved.map((f) => f.name)).toContain('service.name');
+	});
+
+	it('hides the custom option when the typed name is already added', () => {
+		renderPanel({ fields: [field('orderId')] });
+
+		typeSearch('ORDERID');
+
+		// exact name already added → nothing left to offer in OTHER FIELDS
+		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('does not offer a custom option when allowCustomFields is off', () => {
+		renderPanel({ fields: [], allowCustomFields: false });
+
+		typeSearch('unknown.a.b.c');
+
+		// no custom row and nothing addable
+		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /^add$/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('discards an added field, reverting the draft', () => {
+		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
+
+		typeSearch('orderId');
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
+		});
+
+		// clear the search so the added list is not filtered
+		typeSearch('');
+
+		act(() => {
+			fireEvent.click(screen.getByRole('button', { name: /discard/i }));
+		});
+
+		expect(screen.queryByText('orderId')).not.toBeInTheDocument();
+		expect(onFieldsChange).not.toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,125 @@
+import { fireEvent, render, screen } from 'tests/test-utils';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import OtherFields from '../OtherFields';
+
+jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
+
+const mockSuggestions = (names: string[]): void => {
+	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
+		data: {
+			data: {
+				data: {
+					keys: {
+						attributeKeys: names.map((name) => ({
+							name,
+							signal: 'logs',
+							fieldDataType: 'string',
+							fieldContext: '',
+						})),
+					},
+				},
+			},
+		},
+		isFetching: false,
+	});
+};
+
+const renderOtherFields = (
+	props: Partial<React.ComponentProps<typeof OtherFields>> = {},
+): { onAdd: jest.Mock } => {
+	const onAdd = jest.fn();
+	render(
+		<OtherFields
+			signal={DataSource.LOGS}
+			debouncedInputValue=""
+			addedFields={[]}
+			onAdd={onAdd}
+			isAtLimit={false}
+			allowCustomFields
+			{...props}
+		/>,
+	);
+	return { onAdd };
+};
+
+const addedField = (name: string): TelemetryFieldKey => ({
+	name,
+	signal: 'logs',
+	fieldContext: '',
+	fieldDataType: '',
+	key: name,
+});
+
+describe('OtherFields — custom (free-typed) option', () => {
+	beforeEach(() => {
+		mockSuggestions([]);
+	});
+
+	it('shows a custom option for a typed name that is not a suggestion', () => {
+		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c' });
+
+		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
+	});
+
+	it('synthesizes the field with raw name, empty context/type, on add', () => {
+		const { onAdd } = renderOtherFields({ debouncedInputValue: 'orderId' });
+
+		fireEvent.click(screen.getByRole('button', { name: /add/i }));
+
+		expect(onAdd).toHaveBeenCalledWith({
+			name: 'orderId',
+			fieldContext: '',
+			fieldDataType: '',
+			key: 'orderId',
+		});
+	});
+
+	it('hides the custom option when an exact suggestion exists (case-insensitive)', () => {
+		mockSuggestions(['orderId']);
+		renderOtherFields({ debouncedInputValue: 'orderid' });
+
+		// the real suggestion shows, the lowercased custom name does not
+		expect(screen.getByText('orderId')).toBeInTheDocument();
+		expect(screen.queryByText('orderid')).not.toBeInTheDocument();
+	});
+
+	it('hides the custom option when the name is already added (case-insensitive)', () => {
+		renderOtherFields({
+			debouncedInputValue: 'ORDERID',
+			addedFields: [addedField('orderId')],
+		});
+
+		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('does not show the custom option when allowCustomFields is off', () => {
+		renderOtherFields({
+			debouncedInputValue: 'unknown.a.b.c',
+			allowCustomFields: false,
+		});
+
+		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('does not show the custom option for an empty input', () => {
+		renderOtherFields({ debouncedInputValue: '   ' });
+
+		expect(screen.getByText('No values found')).toBeInTheDocument();
+	});
+
+	it('shows the custom option at the field limit but hides its Add button', () => {
+		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c', isAtLimit: true });
+
+		// same as every other row at the limit: name shown, no Add button
+		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /add/i }),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -19,6 +19,7 @@ export type LogDetailProps = {
 	onScrollToLog?: (logId: string) => void;
 	handleOpenInExplorer?: MouseEventHandler;
 	getContainer?: DrawerProps['getContainer'];
+	onApplyLogFilter?: (expression: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

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

@@ -16,6 +16,7 @@ import {
 	Link,
 } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
+import { normalizeTimeToMs } from 'utils/timeUtils';
 import { ILog } from 'types/api/logs/log';
 import { MouseEvent, MouseEventHandler } from 'react';
 import { useCopyToClipboard } from 'react-use';
@@ -67,6 +68,11 @@ function LogDetailsHeader({
 		},
 	];
 
+	const rawTimestamp = log.date ?? log.timestamp;
+	const displayTimestamp = Number.isNaN(Number(rawTimestamp))
+		? rawTimestamp
+		: normalizeTimeToMs(rawTimestamp);
+
 	return (
 		<div className={styles.header} data-log-detail-ignore="true">
 			<div className={styles.leftSection}>
@@ -76,7 +82,7 @@ function LogDetailsHeader({
 					data-testid="log-details-header-timestamp"
 				>
 					{formatTimezoneAdjustedTimestamp(
-						log.date ?? log.timestamp,
+						displayTimestamp,
 						DATE_TIME_FORMATS.DASH_DATETIME,
 					)}
 				</Typography.Text>

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

@@ -91,6 +91,24 @@ describe('LogDetail drawer — header (isLogDetailsV2)', () => {
 		);
 	});
 
+	it('normalizes a nanosecond-epoch timestamp in the header', () => {
+		localStorage.setItem(LOCALSTORAGE.PREFERRED_TIMEZONE, 'UTC');
+
+		// Same instant as mockLog but as epoch nanoseconds (e.g. dashboard list panel).
+		// Must scale to ms, not render a wildly wrong date.
+		renderDrawer({
+			log: {
+				...mockLog,
+				date: '1705311930000000000',
+				timestamp: 1705311930000000000,
+			},
+		});
+
+		expect(screen.getByTestId('log-details-header-timestamp')).toHaveTextContent(
+			'Jan 15, 2024 ⎯ 09:45:30',
+		);
+	});
+
 	it('copies the log link from the ⋯ menu', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 

frontend/src/components/LogDetail/index.tsx

@@ -75,6 +75,7 @@ function LogDetailInner({
 	onScrollToLog,
 	handleOpenInExplorer,
 	getContainer,
+	onApplyLogFilter,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -519,6 +520,7 @@ function LogDetailInner({
 						selectedOptions={options}
 						listViewPanelSelectedFields={listViewPanelSelectedFields}
 						handleChangeSelectedView={handleChangeSelectedView}
+						onApplyLogFilter={onApplyLogFilter}
 					/>
 				)}
 				{!isLogDetailsV2 && selectedView === VIEW_TYPES.JSON && (

frontend/src/components/LogDetail/useIsLogDetailsV2.ts

@@ -1,9 +1,11 @@
 import ROUTES from 'constants/routes';
 import { useLocation } from 'react-router-dom';
 
-// v2 is rolled out only on the logs explorer route for now; every other surface
-// (dashboards, infra monitoring, etc.) keeps the v1 log details view.
 export function useIsLogDetailsV2(): boolean {
 	const { pathname } = useLocation();
-	return pathname === ROUTES.LOGS_EXPLORER;
+	return (
+		pathname === ROUTES.LOGS_EXPLORER ||
+		pathname.startsWith(ROUTES.INFRASTRUCTURE_MONITORING_BASE) ||
+		pathname.startsWith(`${ROUTES.ALL_DASHBOARD}/`)
+	);
 }

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -51,13 +51,13 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log.*'); contextless user fields collapse to bare name.
+		// composite IDs ('log:*'); contextless user fields collapse to bare name.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
 			'service.name',
-			'log.body',
+			'log:body',
 			'request.id',
-			'log.timestamp',
+			'log:timestamp',
 		]);
 	});
 
@@ -70,14 +70,14 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log.body'.
+		// Attribute variant is its own column, not a duplicate 'log:body'.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log.body',
-			'attribute.body',
+			'log:body',
+			'attribute:body',
 		]);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
+		expect(byId.get('log:body')?.enableRemove).toBe(false);
+		expect(byId.get('attribute:body')?.enableRemove).toBe(true);
 	});
 
 	it('applies the same distinct-column treatment to timestamp variants', () => {
@@ -91,11 +91,11 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log.timestamp',
-			'attribute.timestamp',
+			'log:timestamp',
+			'attribute:timestamp',
 		]);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
+		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('attribute:timestamp')?.enableRemove).toBe(true);
 	});
 
 	it('skips the synthetic "id" field name', () => {
@@ -127,10 +127,10 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		// body + timestamp are locked from the table-X removal pathway.
-		expect(byId.get('log.body')?.canBeHidden).toBe(false);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('log:body')?.canBeHidden).toBe(false);
+		expect(byId.get('log:body')?.enableRemove).toBe(false);
+		expect(byId.get('log:timestamp')?.canBeHidden).toBe(false);
+		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
 		// User-added fields stay removable. User field has type='' so composite
 		// collapses to bare name.
 		expect(byId.get('user_field')?.enableRemove).toBe(true);

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

@@ -0,0 +1,15 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+
+/**
+ * The catch-all has no route of its own: it answers for whatever pathname the
+ * `Switch` ran out of routes for, and it calls nothing.
+ */
+export const notFoundMocks = defineStoryMocks({
+	controls: {},
+	config: () => ({ route: '/no-such-page' }),
+});

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { storyMocks } from '@/storybook/controls/defineStoryMocks';
+import { withAppLayout } from '@/storybook/decorators/withAppLayout';
+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);
+
+/**
+ * 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,
+	decorators: [withAppLayout],
+	...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/QueryBuilderV2/utils.ts

@@ -8,7 +8,7 @@ import {
 	OPERATORS,
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import FilterQueryLexer from 'parser/FilterQueryLexer';
 import FilterQueryParser, {
 	AndExpressionContext,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -5,7 +5,7 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { cloneDeep, isArray } from 'lodash-es';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';

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

@@ -44,6 +44,13 @@
 			--tanstack-first-column-header-bg,
 			var(--tanstack-table-header-cell-bg, var(--l2-background))
 		) !important;
+		padding-left: var(
+			--tanstack-cell-header-padding-left-first-column,
+			var(
+				--tanstack-cell-header-padding-left-override,
+				var(--tanstack-cell-padding-left, 0.3rem)
+			)
+		);
 	}
 }
 

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

@@ -161,7 +161,7 @@
 .tableHeaderCell {
 	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
 		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
-	height: 36px;
+	height: var(--tanstack-table-header-height, 36px);
 	text-align: left;
 	font-size: 14px;
 	font-style: normal;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -664,6 +664,7 @@ function TanStackTableInner<TData, TItemKey = string>(
 										value={limit?.toString()}
 										defaultValue="10"
 										onChange={(value): void => {
+											value ??= '10';
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
 											if (page !== 1) {

frontend/src/components/TanStackTableView/__tests__/useRecoverFromEmptyPage.test.ts

@@ -0,0 +1,280 @@
+import { renderHook } from '@testing-library/react';
+
+import {
+	useRecoverFromEmptyPage,
+	UseRecoverFromEmptyPageParams,
+} from '../useRecoverFromEmptyPage';
+
+const REPLACE = { history: 'replace' };
+
+function renderRecovery(
+	overrides: Partial<UseRecoverFromEmptyPageParams> = {},
+): { setPage: jest.Mock; rerender: (next?: unknown) => void } {
+	const setPage = jest.fn();
+	const props: UseRecoverFromEmptyPageParams = {
+		page: 1,
+		pageSize: 10,
+		rowCount: 10,
+		total: 100,
+		isFetching: false,
+		setPage,
+		...overrides,
+	};
+
+	const { rerender } = renderHook(
+		(next: UseRecoverFromEmptyPageParams) => useRecoverFromEmptyPage(next),
+		{ initialProps: props },
+	);
+
+	return {
+		setPage,
+		rerender: (next?: unknown): void =>
+			rerender({ ...props, ...(next as Partial<UseRecoverFromEmptyPageParams>) }),
+	};
+}
+
+describe('useRecoverFromEmptyPage', () => {
+	it('leaves the page alone while it still holds rows', () => {
+		const { setPage } = renderRecovery({ page: 3, rowCount: 10 });
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('leaves the page alone on page 1 with no rows at all', () => {
+		const { setPage } = renderRecovery({ page: 1, rowCount: 0, total: 0 });
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('jumps to the last page that holds data when the page is out of range', () => {
+		const { setPage } = renderRecovery({
+			page: 7,
+			pageSize: 10,
+			rowCount: 0,
+			total: 25,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
+	});
+
+	it('replaces the history entry so the back button does not return to the empty page', () => {
+		const { setPage } = renderRecovery({ page: 4, rowCount: 0, total: 10 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('falls back to page 1 when the total is unknown', () => {
+		const { setPage } = renderRecovery({ page: 5, rowCount: 0, total: 0 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('steps back one page when the total claims the page should have data', () => {
+		// total says 100 rows exist, yet page 5 came back empty — step back rather
+		// than stall on a page the query cannot actually serve.
+		const { setPage } = renderRecovery({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(4, REPLACE);
+	});
+
+	it('clamps a page below the first one', () => {
+		const { setPage } = renderRecovery({ page: 0, rowCount: 10 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('falls back to page 1 when pageSize is zero', () => {
+		const { setPage } = renderRecovery({
+			page: 5,
+			pageSize: 0,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('waits for the request to settle before moving the user', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 3,
+			rowCount: 0,
+			total: 10,
+			isFetching: true,
+		});
+
+		expect(setPage).not.toHaveBeenCalled();
+
+		rerender({ page: 3, rowCount: 0, total: 10, isFetching: false });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('clamps a page below the first one even when the query failed', () => {
+		// A negative offset is what made the request fail (400 "offset cannot be
+		// negative"), so retrying the same page loops forever — clamp regardless.
+		const { setPage } = renderRecovery({
+			page: 0,
+			rowCount: 0,
+			total: 0,
+			isDisabled: true,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('clamps a page below the first one while the query is still in flight', () => {
+		const { setPage } = renderRecovery({
+			page: -2,
+			rowCount: 0,
+			isFetching: true,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('keeps the page when the query failed so a retry lands where the user was', () => {
+		const { setPage } = renderRecovery({
+			page: 3,
+			rowCount: 0,
+			total: 0,
+			isDisabled: true,
+		});
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('clamps a page below the first one exactly once while the request settles', () => {
+		// The clamp runs ahead of both gates, so a request settling underneath an
+		// uncorrected page must not re-issue the same history rewrite.
+		const { setPage, rerender } = renderRecovery({
+			page: 0,
+			rowCount: 0,
+			total: 0,
+			isFetching: true,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+
+		rerender({ page: 0, rowCount: 0, total: 0, isFetching: false });
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('stops correcting once the corrected page comes back with rows', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 7,
+			pageSize: 10,
+			rowCount: 0,
+			total: 25,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
+
+		// The correction lands: the query refetches, then resolves with the rows page 3 holds.
+		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 25, isFetching: true });
+		rerender({
+			page: 3,
+			pageSize: 10,
+			rowCount: 5,
+			total: 25,
+			isFetching: false,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not correct again while the same page is still being observed', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+
+		// A refetch cycle that leaves the page untouched — the correction is already in flight.
+		rerender({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+			isFetching: true,
+		});
+		rerender({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+			isFetching: false,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('gives up on step-backs and jumps to page 1 when the total keeps lying', () => {
+		// `total` claims 400 rows exist, but every page comes back empty. Walking back one
+		// page at a time would cost a request per hop, so bail out to page 1 instead.
+		const { setPage, rerender } = renderRecovery({
+			page: 40,
+			pageSize: 10,
+			rowCount: 0,
+			total: 400,
+		});
+
+		expect(setPage).toHaveBeenNthCalledWith(1, 39, REPLACE);
+
+		rerender({ page: 39, pageSize: 10, rowCount: 0, total: 400 });
+
+		expect(setPage).toHaveBeenNthCalledWith(2, 38, REPLACE);
+
+		rerender({ page: 38, pageSize: 10, rowCount: 0, total: 400 });
+
+		expect(setPage).toHaveBeenNthCalledWith(3, 1, REPLACE);
+		expect(setPage).toHaveBeenCalledTimes(3);
+	});
+
+	it('corrects again when the user returns to a page that is still empty', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 3,
+			pageSize: 10,
+			rowCount: 0,
+			total: 10,
+		});
+
+		expect(setPage).toHaveBeenNthCalledWith(1, 1, REPLACE);
+
+		rerender({ page: 1, pageSize: 10, rowCount: 10, total: 10 });
+		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 10 });
+
+		expect(setPage).toHaveBeenNthCalledWith(2, 1, REPLACE);
+	});
+
+	it('does not re-run the correction when setPage is a fresh function each render', () => {
+		// The hook reads setPage through a ref, so an inline arrow must not turn the
+		// ungated `page < 1` clamp into a per-render history rewrite.
+		const setPage = jest.fn();
+		const { rerender } = renderHook(
+			() =>
+				useRecoverFromEmptyPage({
+					page: 0,
+					pageSize: 10,
+					rowCount: 0,
+					total: 0,
+					isFetching: false,
+					setPage: (nextPage, options): void => setPage(nextPage, options),
+				}),
+			{ initialProps: undefined },
+		);
+
+		rerender(undefined);
+		rerender(undefined);
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/components/TanStackTableView/__tests__/useStableTotalCount.test.ts

@@ -0,0 +1,91 @@
+import { renderHook } from '@testing-library/react';
+
+import {
+	useStableTotalCount,
+	UseStableTotalCountParams,
+} from '../useStableTotalCount';
+
+function renderStableTotalCount(initial: UseStableTotalCountParams): {
+	result: { current: number };
+	rerender: (next: UseStableTotalCountParams) => void;
+} {
+	const { result, rerender } = renderHook(
+		(params: UseStableTotalCountParams) => useStableTotalCount(params),
+		{ initialProps: initial },
+	);
+
+	return { result, rerender };
+}
+
+describe('useStableTotalCount', () => {
+	it('reports the total once the load settles', () => {
+		const { result } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		expect(result.current).toBe(100);
+	});
+
+	it('keeps the last count while the same list refetches', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'pods' });
+
+		expect(result.current).toBe(100);
+	});
+
+	it('forgets the count when the list changes', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
+
+		expect(result.current).toBe(0);
+	});
+
+	it('reports the new list total once it arrives', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
+		rerender({ total: 25, isLoading: false, resetKey: 'nodes' });
+
+		expect(result.current).toBe(25);
+	});
+
+	it('reports zero for a list that is genuinely empty', () => {
+		const { result } = renderStableTotalCount({
+			total: 0,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		expect(result.current).toBe(0);
+	});
+
+	it('holds nothing back when no reset key is given', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: undefined,
+		});
+
+		// Without a key there is no context to compare, so the cache behaves as it
+		// always did: it survives the refetch.
+		rerender({ total: 0, isLoading: true, resetKey: undefined });
+
+		expect(result.current).toBe(100);
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -9,6 +9,7 @@ export * from './useCalculatedPageSize';
 export * from './useColumnState';
 export * from './useColumnStore';
 export * from './usePreferredPageSize.store';
+export * from './useRecoverFromEmptyPage';
 export * from './useTableParams';
 
 /**
@@ -285,6 +286,51 @@ export * from './useTableParams';
  *
  * **Pagination shows "Auto" option** when `calculatedPageSize` is passed, allowing users
  * to reset to auto-calculated size.
+ *
+ * **`setPage` accepts history options**: `setPage(page, { history: 'replace' })` rewrites the
+ * current history entry instead of pushing a new one. Use `replace` for corrections the user
+ * did not ask for — otherwise the back button walks straight back into the state that was just
+ * corrected. Only applies when the page is synced to the URL; local (non-URL) pages ignore it.
+ *
+ * @example useRecoverFromEmptyPage — send the user back to a page that has data
+ *
+ * When rows disappear underneath the current page (filters narrowed, time range moved, items
+ * deleted), the user is stranded on an empty page they cannot leave by scrolling. This hook
+ * watches the fetched result and corrects the page with `history: 'replace'`, so the back
+ * button does not return to the empty page.
+ *
+ * Correction rules:
+ * - `page < 1` → jump to page 1, even while fetching or disabled. Such a page usually maps to a
+ *   negative offset the API rejects (400 `offset cannot be negative`), so the response can never
+ *   confirm the page is empty — deferring to it would strand the user on a permanent error.
+ * - Page is empty and not page 1 → go to `min(ceil(total / pageSize), page - 1)`. When `total`
+ *   is trustworthy that lands on the last page holding data; when `total` is unknown or zero it
+ *   lands on page 1; and when `total` claims this page should have had rows it steps back a
+ *   single page. Repeated step-backs give up and jump to page 1 after the second one, so a
+ *   badly inflated `total` cannot walk the user down one request at a time.
+ * - Page has rows, or the user is already on page 1 → do nothing (an empty page 1 means there
+ *   is genuinely nothing to show).
+ *
+ * Pass `isFetching` so the hook waits for the request to settle, and `isDisabled` so a failed
+ * request is not mistaken for an empty page. Neither gate suppresses the `page < 1` clamp.
+ *
+ * ```tsx
+ * import { useRecoverFromEmptyPage, useTableParams } from 'components/TanStackTableView';
+ *
+ * const { page, limit, setPage } = useTableParams(QUERY_PARAMS, { page: 1, limit: 20 });
+ * const { data, isLoading, isFetching, isError } = useListQuery({ page, limit });
+ *
+ * useRecoverFromEmptyPage({
+ *   page,
+ *   pageSize: limit,
+ *   rowCount: data?.rows.length ?? 0,
+ *   total: data?.total ?? 0,
+ *   isFetching: isLoading || isFetching,
+ *   // Skip correction on errors — no rows there means "request failed", not "page is empty".
+ *   isDisabled: isError,
+ *   setPage,
+ * });
+ * ```
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,

frontend/src/components/TanStackTableView/useRecoverFromEmptyPage.ts

@@ -0,0 +1,107 @@
+import { useEffect, useRef } from 'react';
+
+import { SetPageOptions } from './useTableParams';
+
+const FIRST_PAGE = 1;
+const REPLACE_HISTORY: SetPageOptions = { history: 'replace' };
+
+/**
+ * How many single-page step-backs to attempt before giving up and going to page 1.
+ *
+ * A step-back only happens when `total` claims the current page should hold data but the
+ * response came back empty. Each hop costs a request, so an inflated `total` on a high page
+ * number would otherwise walk the user down one page at a time behind a spinner.
+ */
+const MAX_STEP_BACKS = 2;
+
+type Correction = {
+	from: number;
+	to: number;
+};
+
+export type UseRecoverFromEmptyPageParams = {
+	page: number;
+	pageSize: number;
+	rowCount: number;
+	total: number;
+	isFetching: boolean;
+	isDisabled?: boolean;
+	setPage: (page: number, options?: SetPageOptions) => void;
+};
+
+export function useRecoverFromEmptyPage({
+	page,
+	pageSize,
+	rowCount,
+	total,
+	isFetching,
+	isDisabled = false,
+	setPage,
+}: UseRecoverFromEmptyPageParams): void {
+	const setPageRef = useRef(setPage);
+	const lastCorrectionRef = useRef<Correction | null>(null);
+	const stepBacksRef = useRef(0);
+
+	useEffect(() => {
+		setPageRef.current = setPage;
+	});
+
+	useEffect(() => {
+		if (lastCorrectionRef.current && lastCorrectionRef.current.from !== page) {
+			lastCorrectionRef.current = null;
+		}
+
+		const correctTo = (nextPage: number): boolean => {
+			if (lastCorrectionRef.current?.to === nextPage) {
+				return false;
+			}
+
+			lastCorrectionRef.current = { from: page, to: nextPage };
+			setPageRef.current(nextPage, REPLACE_HISTORY);
+			return true;
+		};
+
+		// A page below the first one is invalid on its own terms — it usually maps to a
+		// negative offset the API rejects outright, so waiting for a response that will
+		// never arrive (or trusting a failed one) would strand the user for good.
+		if (page < FIRST_PAGE) {
+			stepBacksRef.current = 0;
+			void correctTo(FIRST_PAGE);
+			return;
+		}
+
+		if (isFetching || isDisabled) {
+			return;
+		}
+
+		// The page has data, or there is genuinely nothing to show anywhere.
+		if (rowCount > 0 || page === FIRST_PAGE) {
+			stepBacksRef.current = 0;
+			return;
+		}
+
+		const currentPage = Math.floor(page);
+		const lastPageWithData =
+			pageSize > 0 && total > 0 ? Math.ceil(total / pageSize) : FIRST_PAGE;
+		const nextPage = Math.max(
+			FIRST_PAGE,
+			Math.min(lastPageWithData, currentPage - 1),
+		);
+
+		// `total` disagrees with the response: it says this page should have rows, so the
+		// only safe move is one page back. Cap how often that repeats — every hop is a
+		// request, and a badly inflated `total` would otherwise crawl down from page 40.
+		const isStepBack = nextPage === currentPage - 1;
+
+		if (isStepBack && stepBacksRef.current >= MAX_STEP_BACKS) {
+			if (correctTo(FIRST_PAGE)) {
+				stepBacksRef.current = 0;
+			}
+			return;
+		}
+
+		if (correctTo(nextPage) && isStepBack) {
+			stepBacksRef.current += 1;
+		}
+	}, [isFetching, isDisabled, page, pageSize, rowCount, total]);
+}

frontend/src/components/TanStackTableView/useStableTotalCount.ts

@@ -0,0 +1,35 @@
+import { useRef } from 'react';
+
+export type UseStableTotalCountParams = {
+	total: number | undefined;
+	isLoading: boolean;
+	/**
+	 * Identifies the list being counted. When it changes, the cached count is
+	 * dropped so the previous list's page count cannot outlive it.
+	 */
+	resetKey: string | undefined;
+};
+
+/**
+ * Holds on to the last non-zero total so the pagination does not flash while the
+ * same list refetches, and forgets it as soon as `resetKey` moves to another list.
+ */
+export function useStableTotalCount({
+	total,
+	isLoading,
+	resetKey,
+}: UseStableTotalCountParams): number {
+	const prevTotalRef = useRef(total || 0);
+	const prevResetKeyRef = useRef(resetKey);
+
+	if (prevResetKeyRef.current !== resetKey) {
+		prevResetKeyRef.current = resetKey;
+		prevTotalRef.current = 0;
+	}
+
+	if (total && total > 0) {
+		prevTotalRef.current = total;
+	}
+
+	return isLoading ? prevTotalRef.current : total || 0;
+}

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -29,12 +29,16 @@ type Defaults = {
 	cleanupOnUnmount?: boolean;
 };
 
+export type SetPageOptions = {
+	history?: 'push' | 'replace';
+};
+
 export type TableParamsResult = {
 	page: number;
 	limit: number;
 	orderBy: SortState | null;
 	expanded: ExpandedState;
-	setPage: (p: number) => void;
+	setPage: (p: number, options?: SetPageOptions) => void;
 	setLimit: (l: number) => void;
 	setOrderBy: (s: SortState | null) => void;
 	setExpanded: (updaterOrValue: Updater<ExpandedState>) => void;
@@ -249,6 +253,17 @@ export function useTableParams(
 		[],
 	);
 
+	const setUrlPageWithOptions = useCallback(
+		(page: number, options?: SetPageOptions): void => {
+			void setUrlPage(page, options);
+		},
+		[setUrlPage],
+	);
+
+	const setLocalPageValue = useCallback((page: number): void => {
+		setLocalPage(page);
+	}, []);
+
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
 	const prevOrderByRef = useRef<string | null>(null);
 
@@ -303,7 +318,7 @@ export function useTableParams(
 		limit: useUrlForLimit ? urlLimit : localLimit,
 		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
 		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
-		setPage: useUrlForPage ? setUrlPage : setLocalPage,
+		setPage: useUrlForPage ? setUrlPageWithOptions : setLocalPageValue,
 		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimitWithPersist,
 		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
 		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,

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

@@ -450,6 +450,12 @@ export default function ChatInput({
 			return;
 		}
 		el.style.height = 'auto';
+		// A hidden composer (a closed drawer, a story swapping in) measures 0.
+		// Leaving the height on `auto` keeps the `rows` fallback until there is
+		// something real to measure, instead of pinning the field shut.
+		if (el.scrollHeight === 0) {
+			return;
+		}
 		el.style.height = `${Math.min(el.scrollHeight, TEXTAREA_MAX_HEIGHT_PX)}px`;
 	}, [text]);
 

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -5,6 +5,7 @@ import BarChart from 'container/DashboardContainer/visualization/charts/BarChart
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { StackMode } from 'lib/uPlotV2/config/types';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -131,9 +132,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 			<div ref={graphRef} className={styles.graphContainer}>
 				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 					<BarChart
+						stack={StackMode.Normal}
 						config={config}
 						data={chartData}
-						isStackedBarChart
 						legendConfig={{ position: LegendPosition.BOTTOM }}
 						customTooltip={renderBillingTooltip}
 						width={containerDimensions.width}

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -58,26 +58,17 @@ describe('prepareBillingBarConfig', () => {
 		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
 	});
 
-	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
+	it('sets padding and focus alpha for behavioral parity', () => {
 		const builder = prepareBillingBarConfig({
 			...baseProps,
 			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
 		});
 		const config = builder.getConfig();
-		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		// Stacking bands come from the chart now — see useChartStacking.
 		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
 		expect(config.focus).toStrictEqual({ alpha: 0.3 });
 	});
 
-	it('sets no bands when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toBeUndefined();
-	});
-
 	it('uses queryName as label when legend is undefined', () => {
 		const apiResponse: MetricRangePayloadProps = {
 			data: {

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -1,7 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { DrawStyle } from 'lib/uPlotV2/config/types';
 import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -63,7 +62,6 @@ export function prepareBillingBarConfig({
 		});
 	});
 
-	builder.setBands(getInitialStackedBands(results.length));
 	builder.setPadding([32, 32, 16, 16]);
 	builder.setFocus({ alpha: 0.3 });
 

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -6,25 +6,24 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
+import { StackMode } from 'lib/uPlotV2/config/types';
+
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
 	const {
 		children,
-		isStackedBarChart,
 		customTooltip,
 		config,
 		data,
+		stack = StackMode.None,
 		pinnedTooltipElement,
 		...rest
 	} = props;
 
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
+	// Written during render so it lands before UPlotChart's effect reads the config,
+	// which derives the fill bands, percent axis unit and percent range from it.
+	config.setStackMode(stack);
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -37,7 +36,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
 				canPinTooltip: rest.canPinTooltip,
 				renderTooltipFooter: rest.renderTooltipFooter,
 			};
@@ -48,7 +46,6 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.timezone,
 			rest.yAxisUnit,
 			rest.decimalPrecision,
-			isStackedBarChart,
 			rest.canPinTooltip,
 			rest.renderTooltipFooter,
 		],
@@ -58,7 +55,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 		<ChartWrapper
 			{...rest}
 			config={config}
-			data={chartData}
+			data={data}
 			customTooltip={renderTooltip}
 			pinnedTooltipElement={pinnedTooltipElement}
 		>

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -6,12 +6,15 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import UPlotChart from 'lib/uPlotV2/components/UPlotChart/UPlotChart';
+import { StackMode } from 'lib/uPlotV2/config/types';
+import { prepareAlignedData } from 'lib/uPlotV2/components/UPlotChart/utils';
 import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
 import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
 import noop from 'lodash-es/noop';
 import uPlot from 'uplot';
 
-import { ChartProps } from '../types';
+import { ChartWrapperProps } from '../types';
+import { useChartStacking } from './useChartStacking';
 
 const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 300;
@@ -39,9 +42,20 @@ export default function ChartWrapper({
 	pinnedTooltipElement,
 	tooltipPortalRoot,
 	'data-testid': testId,
-}: ChartProps): JSX.Element {
+}: ChartWrapperProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
 
+	const stack = config.getStackMode();
+	const chartData = useChartStacking({ data, config });
+
+	// Tooltips need pre-stack values, gap-processed exactly as UPlotChart processes the
+	// plot data — otherwise the cursor's index addresses a shorter array.
+	const unstackedData = useMemo(
+		() =>
+			stack === StackMode.None ? undefined : prepareAlignedData({ data, config }),
+		[data, config, stack],
+	);
+
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
 			if (!showLegend) {
@@ -61,11 +75,11 @@ export default function ChartWrapper({
 	const renderTooltipCallback = useCallback(
 		(args: TooltipRenderArgs): React.ReactNode => {
 			if (customTooltip) {
-				return customTooltip(args);
+				return customTooltip({ ...args, unstackedData });
 			}
 			return null;
 		},
-		[customTooltip],
+		[customTooltip, unstackedData],
 	);
 
 	const syncMetadata = useMemo(
@@ -91,7 +105,7 @@ export default function ChartWrapper({
 				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
 					<UPlotChart
 						config={config}
-						data={data}
+						data={chartData}
 						width={chartWidth}
 						height={chartHeight}
 						plotRef={(plot): void => {

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/__tests__/useChartStacking.test.ts

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { StackMode } from 'lib/uPlotV2/config/types';
+import uPlot from 'uplot';
+
+import { useChartStacking } from '../useChartStacking';
+
+type Hooks = Record<string, (...args: unknown[]) => void>;
+
+function createConfig(stack: StackMode): {
+	config: UPlotConfigBuilder;
+	hooks: Hooks;
+} {
+	const hooks: Hooks = {};
+	const config = {
+		getStackMode: (): StackMode => stack,
+		addHook: jest.fn((type: string, hook: (...args: unknown[]) => void) => {
+			hooks[type] = hook;
+			return jest.fn();
+		}),
+	} as unknown as UPlotConfigBuilder;
+	return { config, hooks };
+}
+
+const data = [[1], [30], [10]] as unknown as uPlot.AlignedData;
+
+describe('useChartStacking', () => {
+	it('returns the data untouched and registers nothing when the config says `none`', () => {
+		const { config } = createConfig(StackMode.None);
+		const { result } = renderHook(() => useChartStacking({ data, config }));
+
+		expect(result.current).toBe(data);
+		expect(config.addHook).not.toHaveBeenCalled();
+	});
+
+	it('treats a missing config as unstacked', () => {
+		const { result } = renderHook(() => useChartStacking({ data, config: null }));
+
+		expect(result.current).toBe(data);
+	});
+
+	it('accumulates raw values when the config declares `normal`', () => {
+		const { config } = createConfig(StackMode.Normal);
+		const { result } = renderHook(() => useChartStacking({ data, config }));
+
+		expect(result.current).toStrictEqual([[1], [40], [10]]);
+	});
+
+	it('rescales each column to its total when the config declares `percent`', () => {
+		const { config } = createConfig(StackMode.Percent);
+		const { result } = renderHook(() => useChartStacking({ data, config }));
+
+		expect(result.current).toStrictEqual([[1], [100], [25]]);
+	});
+
+	it('registers the uPlot hooks that re-stack on data and visibility changes', () => {
+		const { config } = createConfig(StackMode.Normal);
+		renderHook(() => useChartStacking({ data, config }));
+
+		expect(
+			(config.addHook as jest.Mock).mock.calls.map(([type]) => type),
+		).toStrictEqual(['setData', 'setSeries']);
+	});
+
+	it('re-stacks from the raw values when the legend hides a series', () => {
+		const { config, hooks } = createConfig(StackMode.Normal);
+		renderHook(() => useChartStacking({ data, config }));
+
+		const plot = {
+			data: [[1]],
+			series: [{}, { show: true }, { show: false }],
+			delBand: jest.fn(),
+			addBand: jest.fn(),
+			setData: jest.fn(),
+		};
+		hooks.setSeries(plot, 2, { show: false });
+
+		// The hidden series keeps its raw value and stops contributing to the total.
+		expect(plot.setData).toHaveBeenCalledWith([[1], [30], [10]]);
+		expect(plot.delBand).toHaveBeenCalledWith(null);
+	});
+
+	it('ignores a focus-only setSeries so hovering does not re-stack', () => {
+		const { config, hooks } = createConfig(StackMode.Normal);
+		renderHook(() => useChartStacking({ data, config }));
+
+		const plot = {
+			data: [[1]],
+			series: [{}, { show: true }, { show: true }],
+			delBand: jest.fn(),
+			addBand: jest.fn(),
+			setData: jest.fn(),
+		};
+		hooks.setSeries(plot, 1, { focus: true });
+
+		expect(plot.setData).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/useChartStacking.ts

@@ -0,0 +1,132 @@
+import {
+	MutableRefObject,
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from 'react';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { StackMode } from 'lib/uPlotV2/config/types';
+import { has } from 'lodash-es';
+import uPlot from 'uplot';
+
+import { stackSeries } from '../utils/stackSeriesUtils';
+
+/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
+function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
+	return !plot.series[seriesIndex]?.show;
+}
+
+function canApplyStacking(
+	unstackedData: uPlot.AlignedData | null,
+	plot: uPlot,
+	isUpdating: boolean,
+): boolean {
+	return (
+		!isUpdating &&
+		!!unstackedData &&
+		!!plot.data &&
+		unstackedData[0]?.length === plot.data[0]?.length
+	);
+}
+
+function setupStackingHooks(
+	config: UPlotConfigBuilder,
+	updateStacksInChart: (plot: uPlot) => void,
+	isUpdatingRef: MutableRefObject<boolean>,
+): () => void {
+	const onDataChange = (plot: uPlot): void => {
+		if (!isUpdatingRef.current) {
+			updateStacksInChart(plot);
+		}
+	};
+
+	const onSeriesVisibilityChange = (
+		plot: uPlot,
+		_seriesIdx: number | null,
+		opts: uPlot.Series,
+	): void => {
+		// uPlot fires setSeries for hover focus too; only visibility changes restack.
+		if (!has(opts, 'focus')) {
+			updateStacksInChart(plot);
+		}
+	};
+
+	const removeSetDataHook = config.addHook('setData', onDataChange);
+	const removeSetSeriesHook = config.addHook(
+		'setSeries',
+		onSeriesVisibilityChange,
+	);
+
+	return (): void => {
+		removeSetDataHook?.();
+		removeSetSeriesHook?.();
+	};
+}
+
+export interface UseChartStackingParams {
+	data: uPlot.AlignedData;
+	config: UPlotConfigBuilder | null;
+}
+
+/**
+ * Stacks a chart's data for the mode declared on its config, and re-stacks on data or
+ * visibility changes. The pre-stack values live in a ref because the uPlot hooks that
+ * read them run outside React's render cycle.
+ */
+export function useChartStacking({
+	data,
+	config,
+}: UseChartStackingParams): uPlot.AlignedData {
+	const stack = config?.getStackMode() ?? StackMode.None;
+	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
+	unstackedDataRef.current = stack === 'none' ? null : data;
+
+	// Guards the re-entrant setData below, which would otherwise re-trigger our own hook.
+	const isUpdatingChartRef = useRef(false);
+
+	const chartData = useMemo((): uPlot.AlignedData => {
+		if (stack === StackMode.None || !data || data.length < 2) {
+			return data;
+		}
+		const noSeriesHidden = (): boolean => false; // include all series in initial stack
+		return stackSeries(data, noSeriesHidden, stack).data;
+	}, [data, stack]);
+
+	const updateStacksInChart = useCallback(
+		(plot: uPlot): void => {
+			const unstacked = unstackedDataRef.current;
+			if (
+				!unstacked ||
+				!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
+			) {
+				return;
+			}
+
+			const shouldExcludeSeries = (idx: number): boolean =>
+				isSeriesHidden(plot, idx);
+			const { data: stacked, bands } = stackSeries(
+				unstacked,
+				shouldExcludeSeries,
+				stack,
+			);
+
+			plot.delBand(null);
+			bands.forEach((band: uPlot.Band) => plot.addBand(band));
+
+			isUpdatingChartRef.current = true;
+			plot.setData(stacked);
+			isUpdatingChartRef.current = false;
+		},
+		[stack],
+	);
+
+	useLayoutEffect(() => {
+		if (stack === StackMode.None || !config) {
+			return undefined;
+		}
+		return setupStackingHooks(config, updateStacksInChart, isUpdatingChartRef);
+	}, [stack, config, updateStacksInChart]);
+
+	return chartData;
+}

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -6,10 +6,16 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 
+import { StackMode } from 'lib/uPlotV2/config/types';
+
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, customTooltip, ...rest } = props;
+	const { children, customTooltip, stack = StackMode.None, ...rest } = props;
+
+	// Written during render so it lands before UPlotChart's effect reads the config,
+	// which derives the fill bands, percent axis unit and percent range from it.
+	rest.config.setStackMode(stack);
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -14,6 +14,7 @@ import {
 	ChartClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import type { StackMode } from 'lib/uPlotV2/config/types';
 
 interface BaseChartProps {
 	width: number;
@@ -52,27 +53,26 @@ interface UPlotChartDataProps {
 	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
 }
 
-export interface TimeSeriesChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+/** Everything the shared uPlot shell consumes; each chart's props narrow it. */
+export interface ChartWrapperProps
+	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {}
+
+export interface TimeSeriesChartProps extends ChartWrapperProps {
 	timezone?: Timezone;
+	/** How series compose. Defaults to `none`, which draws them independently. */
+	stack?: StackMode;
 }
 
-export interface HistogramChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
+export interface BarChartProps extends ChartWrapperProps {
+	timezone?: Timezone;
+	/** How series compose. Defaults to `none`, which draws them independently. */
+	stack?: StackMode;
+}
+
+export interface HistogramChartProps extends ChartWrapperProps {
 	isQueriesMerged?: boolean;
 }
 
-export interface BarChartProps
-	extends BaseChartProps, UPlotBasedChartProps, UPlotChartDataProps {
-	isStackedBarChart?: boolean;
-	timezone?: Timezone;
-}
-
-export type ChartProps =
-	| TimeSeriesChartProps
-	| BarChartProps
-	| HistogramChartProps;
-
 /**
  * One resolved pie/donut slice: a display label, its (already parsed) positive
  * numeric value, and the colour used for the arc + legend swatch.

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackSeriesUtils.test.ts

@@ -0,0 +1,158 @@
+import { AlignedData } from 'uplot';
+
+import { StackMode } from 'lib/uPlotV2/config/types';
+
+import { stackSeries } from '../stackSeriesUtils';
+
+const includeAll = (): boolean => false;
+
+// Stacking is top-down: the first series carries the column total, the last its own
+// raw value. Every expectation below reads in that order.
+describe('stackSeries', () => {
+	it('is a no-op under `none`, returning the data and no bands', () => {
+		const data: AlignedData = [[1], [30], [10]];
+
+		const { data: result, bands } = stackSeries(data, includeAll, StackMode.None);
+
+		expect(result).toBe(data);
+		expect(bands).toStrictEqual([]);
+	});
+
+	describe('normal', () => {
+		it('accumulates raw values from the bottom series upward', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[10, 20],
+				[1, 2],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
+				[1, 2],
+				[11, 22],
+				[1, 2],
+			]);
+		});
+
+		it('treats nulls as 0 without breaking the running total', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[10, null],
+				[1, 2],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Normal).data).toStrictEqual([
+				[1, 2],
+				[11, 2],
+				[1, 2],
+			]);
+		});
+
+		it('emits one band per adjacent pair of participating series', () => {
+			const data: AlignedData = [[1], [10], [5], [1]];
+
+			expect(stackSeries(data, includeAll, StackMode.Normal).bands).toStrictEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+			]);
+		});
+
+		it('copies omitted series through unstacked and skips their bands', () => {
+			const data: AlignedData = [[1], [10], [5], [1]];
+			const omitMiddle = (seriesIndex: number): boolean => seriesIndex === 2;
+
+			const { data: stacked, bands } = stackSeries(
+				data,
+				omitMiddle,
+				StackMode.Normal,
+			);
+
+			expect(stacked).toStrictEqual([[1], [11], [5], [1]]);
+			expect(bands).toStrictEqual([{ series: [1, 3] }]);
+		});
+	});
+
+	describe('percent', () => {
+		it('rescales each column to its total so the top series reads 100', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[30, 10],
+				[10, 10],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1, 2],
+				[100, 100],
+				[25, 50],
+			]);
+		});
+
+		it('normalises per column, so an identical series differs across x', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[1, 3],
+				[1, 1],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1, 2],
+				[100, 100],
+				[50, 25],
+			]);
+		});
+
+		it('excludes omitted series from the total, so the visible ones still reach 100', () => {
+			const data: AlignedData = [[1], [30], [10], [60]];
+			const omitLast = (seriesIndex: number): boolean => seriesIndex === 3;
+
+			expect(stackSeries(data, omitLast, StackMode.Percent).data).toStrictEqual([
+				[1],
+				[100],
+				[25],
+				[60],
+			]);
+		});
+
+		it('yields 0 for a column whose participating series sum to zero', () => {
+			const data: AlignedData = [
+				[1, 2],
+				[0, 5],
+				[0, 5],
+			];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1, 2],
+				[0, 100],
+				[0, 50],
+			]);
+		});
+
+		it('divides by the signed total when a column mixes signs', () => {
+			// 30 + (-10) = 20, so the shares are 150% and -50% and still sum to 100.
+			const data: AlignedData = [[1], [30], [-10]];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1],
+				[100],
+				[-50],
+			]);
+		});
+
+		it('yields 0 across a column whose signed total cancels to zero', () => {
+			const data: AlignedData = [[1], [10], [-10]];
+
+			expect(stackSeries(data, includeAll, StackMode.Percent).data).toStrictEqual([
+				[1],
+				[0],
+				[0],
+			]);
+		});
+	});
+
+	it('defaults to normal when no mode is given', () => {
+		const data: AlignedData = [[1], [30], [10]];
+
+		expect(stackSeries(data, includeAll).data).toStrictEqual(
+			stackSeries(data, includeAll, StackMode.Normal).data,
+		);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -1,117 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { getInitialStackedBands, stack } from '../stackUtils';
-
-describe('stackUtils', () => {
-	describe('stack', () => {
-		const neverOmit = (): boolean => false;
-
-		it('preserves time axis as first row', () => {
-			const data: AlignedData = [
-				[100, 200, 300],
-				[1, 2, 3],
-				[4, 5, 6],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[0]).toStrictEqual([100, 200, 300]);
-		});
-
-		it('stacks value series cumulatively (last = raw, first = total)', () => {
-			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
-			const data: AlignedData = [
-				[0, 1, 2],
-				[1, 2, 3], // series 1
-				[4, 5, 6], // series 2
-				[7, 8, 9], // series 3
-			];
-			const { data: result } = stack(data, neverOmit);
-			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
-			expect(result[1]).toStrictEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
-			expect(result[2]).toStrictEqual([11, 13, 15]); // 4+7, 5+8, 6+9
-			expect(result[3]).toStrictEqual([7, 8, 9]);
-		});
-
-		it('treats null values as 0 when stacking', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, null],
-				[null, 10],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[1]).toStrictEqual([1, 10]); // total
-			expect(result[2]).toStrictEqual([0, 10]); // last series with null→0
-		});
-
-		it('copies omitted series as-is without accumulating', () => {
-			// Omit series 2 (index 2); series 1 and 3 are stacked.
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20], // series 1
-				[100, 200], // series 2 - omitted
-				[1, 2], // series 3
-			];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { data: result } = stack(data, omitSeries2);
-			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
-			expect(result[1]).toStrictEqual([11, 22]); // 10+1, 20+2
-			expect(result[2]).toStrictEqual([100, 200]); // copied, not stacked
-			expect(result[3]).toStrictEqual([1, 2]);
-		});
-
-		it('returns bands between consecutive visible series when none omitted', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-				[3, 4],
-				[5, 6],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		});
-
-		it('returns bands only between visible series when some are omitted', () => {
-			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
-			const data: AlignedData = [[0], [1], [2], [3], [4]];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { bands } = stack(data, omitSeries2);
-			expect(bands).toStrictEqual([{ series: [1, 3] }, { series: [3, 4] }]);
-		});
-
-		it('returns empty bands when only one value series', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toStrictEqual([]);
-		});
-	});
-
-	describe('getInitialStackedBands', () => {
-		it('returns one band between each consecutive pair for seriesCount 3', () => {
-			expect(getInitialStackedBands(3)).toStrictEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('returns empty array for seriesCount 0 or 1', () => {
-			expect(getInitialStackedBands(0)).toStrictEqual([]);
-			expect(getInitialStackedBands(1)).toStrictEqual([]);
-		});
-
-		it('returns single band for seriesCount 2', () => {
-			expect(getInitialStackedBands(2)).toStrictEqual([{ series: [1, 2] }]);
-		});
-
-		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
-			const bands = getInitialStackedBands(5);
-			expect(bands).toStrictEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-				{ series: [3, 4] },
-				{ series: [4, 5] },
-			]);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,13 +1,20 @@
+import { StackMode } from 'lib/uPlotV2/config/types';
 import uPlot, { AlignedData } from 'uplot';
 
 /**
  * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
+ * When `omit(seriesIndex)` returns true, that series keeps its raw values and
+ * contributes nothing to the total. `None` is a no-op.
  */
 export function stackSeries(
 	data: AlignedData,
 	omit: (seriesIndex: number) => boolean,
+	mode: StackMode = StackMode.Normal,
 ): { data: AlignedData; bands: uPlot.Band[] } {
+	if (mode === StackMode.None) {
+		return { data, bands: [] };
+	}
+
 	const timeAxis = data[0];
 	const pointCount = timeAxis.length;
 	const valueSeriesCount = data.length - 1; // exclude time axis
@@ -17,6 +24,7 @@ export function stackSeries(
 		valueSeriesCount,
 		pointCount,
 		omit,
+		mode,
 	});
 	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
 
@@ -31,6 +39,46 @@ interface BuildStackedSeriesParams {
 	valueSeriesCount: number;
 	pointCount: number;
 	omit: (seriesIndex: number) => boolean;
+	mode: StackMode;
+}
+
+/** Per-point total. Mixed-sign columns sum signed, as "share of total" implies. */
+function columnTotals({
+	data,
+	valueSeriesCount,
+	pointCount,
+	omit,
+}: Omit<BuildStackedSeriesParams, 'mode'>): number[] {
+	const totals = Array(pointCount).fill(0) as number[];
+
+	for (let seriesIndex = 1; seriesIndex <= valueSeriesCount; seriesIndex++) {
+		if (omit(seriesIndex)) {
+			continue;
+		}
+		const rawValues = data[seriesIndex] as (number | null)[];
+		rawValues.forEach((rawValue, pointIndex) => {
+			totals[pointIndex] += rawValue == null ? 0 : Number(rawValue);
+		});
+	}
+
+	return totals;
+}
+
+/** A column whose participating series sum to 0 has no share to divide, so every slice is 0. */
+function toPercent(value: number, total: number): number {
+	return total === 0 ? 0 : (value / total) * 100;
+}
+
+/** What a raw value adds to the stack at a given point. */
+type Contribution = (value: number, pointIndex: number) => number;
+
+function contributionForMode(params: BuildStackedSeriesParams): Contribution {
+	if (params.mode !== StackMode.Percent) {
+		return (value): number => value;
+	}
+	// Resolved up front: totals span series the accumulation below has not reached yet.
+	const totals = columnTotals(params);
+	return (value, pointIndex): number => toPercent(value, totals[pointIndex]);
 }
 
 /**
@@ -42,9 +90,17 @@ function buildStackedSeries({
 	valueSeriesCount,
 	pointCount,
 	omit,
+	mode,
 }: BuildStackedSeriesParams): (number | null)[][] {
 	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
 	const cumulativeSums = Array(pointCount).fill(0) as number[];
+	const contributionOf = contributionForMode({
+		data,
+		valueSeriesCount,
+		pointCount,
+		omit,
+		mode,
+	});
 
 	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
 		const rawValues = data[seriesIndex] as (number | null)[];
@@ -54,7 +110,10 @@ function buildStackedSeries({
 		} else {
 			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
 				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
+				return (cumulativeSums[pointIndex] += contributionOf(
+					numericValue,
+					pointIndex,
+				));
 			});
 		}
 	}
@@ -101,16 +160,3 @@ function findNextVisibleSeriesIndex(
 	}
 	return -1;
 }
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stack(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -1,313 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import uPlot from 'uplot';
-
-import type { UseBarChartStackingParams } from '../useBarChartStacking';
-import { useBarChartStacking } from '../useBarChartStacking';
-
-type MockConfig = { addHook: jest.Mock };
-
-function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
-	return c as unknown as UseBarChartStackingParams['config'];
-}
-
-function createMockConfig(): {
-	config: MockConfig;
-	invokeSetData: (plot: uPlot) => void;
-	invokeSetSeries: (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	) => void;
-	removeSetData: jest.Mock;
-	removeSetSeries: jest.Mock;
-} {
-	let setDataHandler: ((plot: uPlot) => void) | null = null;
-	let setSeriesHandler:
-		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-		| null = null;
-
-	const removeSetData = jest.fn();
-	const removeSetSeries = jest.fn();
-
-	const addHook = jest.fn(
-		(
-			hookName: string,
-			handler: (plot: uPlot, ...args: unknown[]) => void,
-		): (() => void) => {
-			if (hookName === 'setData') {
-				setDataHandler = handler as (plot: uPlot) => void;
-				return removeSetData;
-			}
-			if (hookName === 'setSeries') {
-				setSeriesHandler = handler as (
-					plot: uPlot,
-					seriesIndex: number | null,
-					opts: uPlot.Series,
-				) => void;
-				return removeSetSeries;
-			}
-			return jest.fn();
-		},
-	);
-
-	const config: MockConfig = { addHook };
-
-	const invokeSetData = (plot: uPlot): void => {
-		setDataHandler?.(plot);
-	};
-
-	const invokeSetSeries = (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	): void => {
-		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
-	};
-
-	return {
-		config,
-		invokeSetData,
-		invokeSetSeries,
-		removeSetData,
-		removeSetSeries,
-	};
-}
-
-function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
-	return {
-		data: [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		],
-		series: [{ show: true }, { show: true }, { show: true }],
-		delBand: jest.fn(),
-		addBand: jest.fn(),
-		setData: jest.fn(),
-		...overrides,
-	} as unknown as uPlot;
-}
-
-describe('useBarChartStacking', () => {
-	it('returns data as-is when isStackedBarChart is false', () => {
-		const data: uPlot.AlignedData = [
-			[100, 200],
-			[1, 2],
-			[3, 4],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: null,
-			}),
-		);
-		expect(result.current).toBe(data);
-	});
-
-	it('returns data as-is when config is null and isStackedBarChart is true', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[4, 5],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		// Still returns stacked data (computed in useMemo); no hooks registered
-		expect(result.current[0]).toStrictEqual([0, 1]);
-		expect(result.current[1]).toStrictEqual([5, 7]); // stacked
-		expect(result.current[2]).toStrictEqual([4, 5]);
-	});
-
-	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-			[7, 8, 9],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current[0]).toStrictEqual([0, 1, 2]);
-		expect(result.current[1]).toStrictEqual([12, 15, 18]); // s1+s2+s3
-		expect(result.current[2]).toStrictEqual([11, 13, 15]); // s2+s3
-		expect(result.current[3]).toStrictEqual([7, 8, 9]);
-	});
-
-	it('returns data as-is when only one value series (no stacking needed)', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current).toStrictEqual(data);
-	});
-
-	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-	});
-
-	it('does not register hooks when isStackedBarChart is false', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('calls cleanup when unmounted', () => {
-		const { config, removeSetData, removeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		const { unmount } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		unmount();
-
-		expect(removeSetData).toHaveBeenCalled();
-		expect(removeSetSeries).toHaveBeenCalled();
-	});
-
-	it('re-stacks and updates plot when setData hook is invoked', () => {
-		const { config, invokeSetData } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		];
-		const plot = createMockPlot({
-			data: [
-				[0, 1, 2],
-				[5, 7, 9],
-				[4, 5, 6],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetData(plot);
-
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-		expect(plot.addBand).toHaveBeenCalled();
-		expect(plot.setData).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				[0, 1, 2],
-				expect.any(Array), // stacked row 1
-				expect.any(Array), // stacked row 2
-			]),
-		);
-	});
-
-	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[10, 20],
-			[5, 10],
-		];
-		// Plot data must match unstacked length so canApplyStacking passes
-		const plot = createMockPlot({
-			data: [
-				[0, 1],
-				[15, 30],
-				[5, 10],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetSeries(plot, 1, { show: false });
-
-		expect(plot.setData).toHaveBeenCalled();
-	});
-
-	it('does not re-stack when setSeries is called with focus option', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-		const plot = createMockPlot();
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		(plot.setData as jest.Mock).mockClear();
-		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -1,125 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stackSeries } from '../charts/utils/stackSeriesUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstackedData: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstackedData &&
-		!!plot.data &&
-		unstackedData[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	applyStackingToChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		if (!has(opts, 'focus')) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseBarChartStackingParams {
-	data: uPlot.AlignedData;
-	isStackedBarChart?: boolean;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Handles stacking for bar charts: computes initial stacked data and re-stacks
- * when data or series visibility changes (e.g. legend toggles).
- */
-export function useBarChartStacking({
-	data,
-	isStackedBarChart = false,
-	config,
-}: UseBarChartStackingParams): uPlot.AlignedData {
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
-
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stackSeries(data, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
-
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		if (
-			!unstacked ||
-			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-		) {
-			return;
-		}
-
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
-
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
-	}, [isStackedBarChart, config, applyStackingToChart]);
-
-	return chartData;
-}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -22,6 +22,7 @@ import { prepareBarPanelConfig } from './utils';
 import '../Panel.styles.scss';
 import TooltipFooter from '../components/TooltipFooter';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { StackMode } from 'lib/uPlotV2/config/types';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -147,6 +148,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<BarChart
 					key={`${syncMode}-${syncFilterMode}`}
+					stack={widget.stackedBarChart ? StackMode.Normal : StackMode.None}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -159,7 +161,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					groupByPerQuery={groupByPerQuery}
-					isStackedBarChart={widget.stackedBarChart ?? false}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/__tests__/utils.test.ts

@@ -35,20 +35,10 @@ jest.mock('lib/getLabelName', () => ({
 	),
 }));
 
-jest.mock(
-	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
-	() => ({
-		getInitialStackedBands: jest.fn().mockReturnValue([]),
-	}),
-);
-
 const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
 	.getLegend as jest.Mock;
 const getLabelNameMock = jest.requireMock('lib/getLabelName')
 	.default as jest.Mock;
-const getInitialStackedBandsMock = jest.requireMock(
-	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
-).getInitialStackedBands as jest.Mock;
 
 const createApiResponse = (
 	result: MetricRangePayloadProps['data']['result'] = [],
@@ -247,36 +237,5 @@ describe('BarPanel utils', () => {
 			}).getConfig();
 			expect(config.series?.[1]).toMatchObject({ stroke: '#ff0000' });
 		});
-
-		it('calls getInitialStackedBands when widget is stackedBarChart', () => {
-			const widget = createWidget({ stackedBarChart: true });
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [[1000, '2']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			prepareBarPanelConfig({ ...baseParams, widget, apiResponse });
-			// seriesCount = result.length + 1 = 3
-			expect(getInitialStackedBandsMock).toHaveBeenCalledWith(3);
-		});
-
-		it('does not call getInitialStackedBands for non-stacked chart', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-			prepareBarPanelConfig({ ...baseParams, apiResponse });
-			expect(getInitialStackedBandsMock).not.toHaveBeenCalled();
-		});
 	});
 });

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -1,7 +1,6 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -69,11 +68,6 @@ export function prepareBarPanelConfig({
 		return builder;
 	}
 
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-	}
-
 	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/container/ExplorerOrderBy/index.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react';
 import { Select, Spin } from 'antd';
 import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { useOrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/useOrderByFilter';
-import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
+import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/config';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { StringOperators } from 'types/common/queryBuilder';

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -139,6 +139,11 @@ export default function AlertRules({
 			encodeURIComponent(JSON.stringify(compositeQuery)),
 		);
 
+		const panelType = record.condition.compositeQuery.panelType;
+		if (panelType) {
+			params.set(QueryParams.panelTypes, panelType);
+		}
+
 		params.set(QueryParams.ruleId, record.id);
 
 		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -7,6 +7,7 @@ import TanStackTable, {
 	TableColumnDef,
 	useCalculatedPageSize,
 	useHiddenColumnIds,
+	useRecoverFromEmptyPage,
 	useTableParams,
 } from 'components/TanStackTableView';
 import { InfraMonitoringEvents } from 'constants/events';
@@ -136,6 +137,7 @@ export function K8sBaseList<
 		page: currentPage,
 		limit: currentPageSize,
 		setLimit,
+		setPage,
 	} = useTableParams(
 		{
 			page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
@@ -243,6 +245,16 @@ export function K8sBaseList<
 	const totalCount = data?.total || 0;
 	const hasFilters = !!expression?.trim();
 
+	useRecoverFromEmptyPage({
+		page: currentPage,
+		pageSize: currentPageSize,
+		rowCount: pageData.length,
+		total: totalCount,
+		isFetching: isLoading || isFetching,
+		isDisabled: isError || Boolean(data?.error),
+		setPage,
+	});
+
 	const getGroupKeyFn = useCallback(
 		(item: T) => getGroupedByMeta(item, groupBy),
 		[groupBy],

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -591,12 +591,14 @@ describe('K8sBaseList', () => {
 	});
 
 	describe('with empty data', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
 		const fetchListDataMock = jest.fn<
 			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
 			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
 		>();
 
 		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
 			fetchListDataMock.mockClear();
 			fetchListDataMock.mockResolvedValue({
 				data: [],
@@ -605,6 +607,7 @@ describe('K8sBaseList', () => {
 			});
 
 			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
 				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
@@ -625,6 +628,177 @@ describe('K8sBaseList', () => {
 				expect(fetchListDataMock).toHaveBeenCalled();
 			});
 		});
+
+		it('should not rewrite the page when already on the first page', async () => {
+			await waitFor(() => {
+				expect(fetchListDataMock).toHaveBeenCalled();
+			});
+
+			const pageUpdates = onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get('page'))
+				.filter(Boolean);
+
+			expect(pageUpdates).toHaveLength(0);
+		});
+	});
+
+	describe('with a page beyond the end of the list', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
+			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
+		>();
+
+		// 25 rows exist, so pages 1-3 serve data and page 7 of 10 comes back empty.
+		const rows: TestItem[] = Array.from({ length: 25 }, (_, index) => ({
+			id: `pod-${index + 1}`,
+		}));
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			// Offset-aware on purpose: a mock that answers empty for every offset would let
+			// the assertions pass against a page the recovery has already moved on from.
+			fetchListDataMock.mockImplementation(async ({ offset = 0, limit = 10 }) => ({
+				data: rows.slice(offset, offset + limit),
+				total: rows.length,
+				error: null,
+			}));
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: { page: '7', pageSize: '10' },
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should send the user back to the last page holding data', async () => {
+			// The rows of page 3 on screen are what proves the recovery settled there,
+			// rather than passing through on its way somewhere else.
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			const pageUpdates = onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get('page'))
+				.filter(Boolean);
+
+			expect(pageUpdates).toStrictEqual(['3']);
+		});
+
+		it('should correct the page in a single hop', async () => {
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			// Only the original out-of-range page and the corrected one are requested.
+			expect(
+				fetchListDataMock.mock.calls.map((call) => call[0].offset),
+			).toStrictEqual([60, 20]);
+		});
+
+		it('should replace the history entry instead of pushing the correction', async () => {
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === '3',
+			);
+
+			expect(pageCorrection?.[0].options.history).toBe('replace');
+		});
+	});
+
+	describe('with a page below the first one', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
+			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
+		>();
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			// page=0 turns into offset=-10, which the API rejects outright — the list
+			// can only recover by clamping the page, never by reading the response.
+			fetchListDataMock.mockImplementation(async ({ offset = 0 }) => {
+				if (offset < 0) {
+					throw new APIError({
+						httpStatusCode: 400,
+						error: {
+							code: 'invalid_input',
+							message: 'offset cannot be negative',
+							url: '',
+							errors: [],
+						},
+					});
+				}
+
+				return { data: [{ id: 'pod-1' }], total: 1, error: null };
+			});
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: { page: '0', pageSize: '10' },
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should reject the request that carried the negative offset', async () => {
+			await waitFor(() => {
+				expect(
+					fetchListDataMock.mock.calls.some((call) => call[0].offset === -10),
+				).toBe(true);
+			});
+
+			await expect(
+				fetchListDataMock.mock.results[0].value as Promise<unknown>,
+			).rejects.toThrow('offset cannot be negative');
+		});
+
+		it('should clamp the page to the first one even though the request failed', async () => {
+			await waitFor(() => {
+				expect(onUrlUpdateMock).toHaveBeenCalled();
+			});
+
+			// Page 1 is the default, so the correction drops the param rather than
+			// writing `page=1`.
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === null,
+			);
+
+			expect(pageCorrection).toBeDefined();
+			expect(pageCorrection?.[0].queryString).toBe('?pageSize=10');
+		});
+
+		it('should replace the history entry instead of pushing the correction', async () => {
+			await waitFor(() => {
+				expect(onUrlUpdateMock).toHaveBeenCalled();
+			});
+
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === null,
+			);
+
+			expect(pageCorrection?.[0].options.history).toBe('replace');
+		});
+
+		it('should refetch with a non-negative offset after clamping', async () => {
+			await waitFor(() => {
+				expect(
+					fetchListDataMock.mock.calls.some((call) => call[0].offset === 0),
+				).toBe(true);
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('pod-1')).toBeInTheDocument();
+			});
+		});
 	});
 
 	describe('with error response', () => {

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -82,6 +82,7 @@ function EntityLogsContent({
 	const { activeLog, selectedTab, handleSetActiveLog, handleCloseLogDetail } =
 		useLogDetailHandlers();
 
+	// TODO: Move away from using onAddToQuery after old drawer cleanup
 	const onAddToQuery = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string): void => {
 			handleCloseLogDetail();
@@ -104,6 +105,21 @@ function EntityLogsContent({
 		[userExpression, querySearchOnRun, handleCloseLogDetail, category],
 	);
 
+	const onApplyLogFilter = useCallback(
+		(expression: string): void => {
+			handleCloseLogDetail();
+
+			const newUser = userExpression.trim()
+				? `${userExpression} AND ${expression}`
+				: expression;
+
+			querySearchOnRun(newUser);
+
+			logInfraDrawerFilterCustomizedEvent(category, 'logs', newUser, 'logs');
+		},
+		[userExpression, querySearchOnRun, handleCloseLogDetail, category],
+	);
+
 	const {
 		logs,
 		loadMoreLogs,
@@ -328,6 +344,7 @@ function EntityLogsContent({
 						selectedTab={selectedTab}
 						onAddToQuery={onAddToQuery}
 						onClickActionItem={onAddToQuery}
+						onApplyLogFilter={onApplyLogFilter}
 						onScrollToLog={handleScrollToLog}
 						handleOpenInExplorer={(e) => handleOpenInExplorer(e, activeLog)}
 						getContainer={(): HTMLElement =>

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -47,6 +47,7 @@ import {
 	useInfraMonitoringCategory,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
+	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from './hooks';
 
@@ -67,6 +68,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setOrderBy] = useInfraMonitoringOrderBy();
 	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
+	const [, setCurrentPage] = useInfraMonitoringPageListing();
 
 	const compositeQuery = useGetCompositeQueryParam();
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -218,6 +220,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			void setSelectedCategory(key as string);
 			void setOrderBy(null);
 			void setGroupBy(null);
+			void setCurrentPage(null);
 			setSelectedItemParams(null);
 			redirectWithQueryBuilderData({
 				...currentQuery,

frontend/src/container/InfraMonitoringK8sV2/__tests__/InfraMonitoringK8s.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter as MemoryRouterV5 } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { NuqsTestingAdapter, UrlUpdateEvent } from 'nuqs/adapters/testing';
+import { AppProvider } from 'providers/App/App';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import TimezoneProvider from 'providers/Timezone';
+import store from 'store';
+
+import { K8sCategories } from '../constants';
+import InfraMonitoringK8s from '../InfraMonitoringK8s';
+
+// Quick filters fire their own field APIs and are irrelevant to pagination.
+jest.mock('components/QuickFilters/QuickFilters', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="quick-filters" />,
+}));
+
+// The list owns its own page recovery; stubbing it keeps the page param under the
+// sole control of the category handler being tested here.
+jest.mock('../Base/K8sDynamicList', () => ({
+	__esModule: true,
+	K8sDynamicList: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
+	default: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
+}));
+
+// Analytics only; jsdom lacks the Performance navigation entries it reads.
+jest.mock('lib/navigation', () => ({
+	getNavigationReferrer: (): string => 'direct',
+}));
+
+function renderPage(
+	queryParams: Record<string, string>,
+	onUrlUpdate: jest.Mock<void, [UrlUpdateEvent]>,
+): void {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	render(
+		<MemoryRouter>
+			<MemoryRouterV5>
+				<TimezoneProvider>
+					<QueryClientProvider client={queryClient}>
+						<AppProvider>
+							<Provider store={store}>
+								<NuqsTestingAdapter
+									searchParams={queryParams}
+									onUrlUpdate={onUrlUpdate}
+								>
+									<TooltipProvider>
+										<QueryBuilderProvider>
+											<InfraMonitoringK8s />
+										</QueryBuilderProvider>
+									</TooltipProvider>
+								</NuqsTestingAdapter>
+							</Provider>
+						</AppProvider>
+					</QueryClientProvider>
+				</TimezoneProvider>
+			</MemoryRouterV5>
+		</MemoryRouter>,
+	);
+}
+
+describe('InfraMonitoringK8s', () => {
+	describe('when the category changes from a page other than the first', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+
+		beforeEach(async () => {
+			onUrlUpdateMock.mockClear();
+
+			renderPage(
+				{ category: K8sCategories.PODS, page: '3', pageSize: '10' },
+				onUrlUpdateMock,
+			);
+
+			await screen.findByTestId(`category-${K8sCategories.NODES}`);
+		});
+
+		it('should drop the page so the new category starts at the first one', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
+
+			// Page 3 of pods says nothing about nodes — keeping it asks the new entity
+			// for an offset it may not have. The param is cleared rather than set to 1,
+			// since an absent page already means the first one.
+			await waitFor(() => {
+				const categorySwitch = onUrlUpdateMock.mock.calls.find(
+					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
+				);
+
+				expect(categorySwitch).toBeDefined();
+				expect(categorySwitch?.[0].searchParams.get('page')).toBeNull();
+			});
+		});
+
+		it('should keep the page size, which is not category specific', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
+
+			await waitFor(() => {
+				const categorySwitch = onUrlUpdateMock.mock.calls.find(
+					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
+				);
+
+				expect(categorySwitch?.[0].searchParams.get('pageSize')).toBe('10');
+			});
+		});
+
+		it('should leave the page alone when the same category is clicked again', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.PODS}`));
+
+			await waitFor(() => {
+				expect(screen.getByTestId('k8s-dynamic-list')).toBeInTheDocument();
+			});
+
+			const droppedPage = onUrlUpdateMock.mock.calls.some(
+				(call) => !call[0].searchParams.has('page'),
+			);
+
+			expect(droppedPage).toBe(false);
+		});
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -34,6 +34,9 @@ export const useInfraMonitoringPageListing = (): UseQueryStateReturn<
 > =>
 	useQueryState(
 		INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
+		// do not use .withDefault here, this can cause bugs when
+		// two hooks of nuqs define default twice, this is also
+		// defined at useTableParams
 		parseAsInteger.withOptions(defaultNuqsOptions),
 	);
 

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

@@ -4,9 +4,9 @@
 	gap: var(--spacing-4);
 	padding: var(--spacing-2) var(--spacing-2);
 
-	--tab-content-padding: 0;
-	--tab-text-color: var(--l1-foreground);
-	--tab-active-text-color: var(--l1-foreground);
+	--tabs-content-padding: 0;
+	--tabs-text-color: var(--l1-foreground);
+	--tabs-active-text-color: var(--l1-foreground);
 }
 
 .pageError {

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

@@ -4,8 +4,8 @@
 	height: 100%;
 	margin-top: var(--spacing-2);
 	margin-left: var(--spacing-2);
-	--tab-text-color: var(--l1-foreground);
-	--tab-active-text-color: var(--l1-foreground);
+	--tabs-text-color: var(--l1-foreground);
+	--tabs-active-text-color: var(--l1-foreground);
 	[role='tabpanel'] {
 		margin: 0;
 		padding: var(--spacing-0) var(--spacing-4);

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -2,10 +2,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
-	--tab-content-padding: 0;
+	--tabs-content-padding: 0;
 	margin-top: var(--spacing-3);
-	--tab-text-color: var(--l1-foreground);
-	--tab-active-text-color: var(--l1-foreground);
+	--tabs-text-color: var(--l1-foreground);
+	--tabs-active-text-color: var(--l1-foreground);
 }
 
 .tabLabel {

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.rowClick.test.tsx

@@ -26,7 +26,7 @@ describe('ListAlertRules — row click navigation', () => {
 		const [url] = safeNavigateMock.mock.calls[0];
 		expect(url).toContain('/alerts/overview?');
 		expect(url).toContain('ruleId=rule-1');
-		expect(url).not.toContain('panelTypes');
+		expect(url).toContain('panelTypes=graph');
 		expect(url).toContain('compositeQuery=');
 	});
 

frontend/src/container/ListAlertRules/useAlertRulesHandlers.ts

@@ -36,6 +36,11 @@ export function useAlertRulesHandlers(
 				encodeURIComponent(JSON.stringify(compositeQuery)),
 			);
 
+			const panelType = rule.condition.compositeQuery.panelType;
+			if (panelType) {
+				params.set(QueryParams.panelTypes, panelType);
+			}
+
 			params.set(QueryParams.ruleId, rule.id);
 
 			return `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -275,6 +275,7 @@ function LiveLogsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
+					allowCustomFields
 				/>
 			)}
 		</div>

frontend/src/container/LogDetailedView/Overview.tsx

@@ -41,6 +41,7 @@ interface OverviewProps {
 	selectedOptions: OptionsQuery;
 	listViewPanelSelectedFields?: IField[] | null;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	onApplyLogFilter?: (expression: string) => void;
 }
 
 type Props = OverviewProps &
@@ -55,6 +56,7 @@ function Overview({
 	selectedOptions,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
+	onApplyLogFilter,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
 	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(true);
@@ -67,6 +69,7 @@ function Overview({
 	const { actions, visibleActions } = useLogAttributeActions({
 		handleChangeSelectedView,
 		isListViewPanel,
+		onApplyLogFilter,
 	});
 
 	const isLogDetailsV2 = useIsLogDetailsV2();

frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { CircleMinus, CirclePlus, Layers, RefreshCw } from '@signozhq/icons';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -15,6 +16,7 @@ import {
 	VisibleActionsConfig,
 } from 'periscope/components/PrettyView/PrettyView';
 import { useAppContext } from 'providers/App/App';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import { LogDetailsAction } from '../constants';
 import {
@@ -27,6 +29,7 @@ import {
 interface UseLogAttributeActionsParams {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
+	onApplyLogFilter?: (expression: string) => void;
 }
 
 interface UseLogAttributeActionsResult {
@@ -50,6 +53,7 @@ const ALL_LEAF_ACTIONS = [
 export function useLogAttributeActions({
 	handleChangeSelectedView,
 	isListViewPanel = false,
+	onApplyLogFilter,
 }: UseLogAttributeActionsParams): UseLogAttributeActionsResult {
 	const { pathname } = useLocation();
 	const { stagedQuery, updateQueriesData } = useQueryBuilder();
@@ -65,9 +69,6 @@ export function useLogAttributeActions({
 
 	const filterFor = useCallback(
 		(context: FieldContext, isFilterIn: boolean): void => {
-			if (!stagedQuery) {
-				return;
-			}
 			const target = buildLogFilterTarget(
 				context.fieldKeyPath,
 				context.fieldValue,
@@ -77,6 +78,29 @@ export function useLogAttributeActions({
 				? target.filterInOperator
 				: target.filterOutOperator;
 
+			// Non-explorer surfaces (infra monitoring, etc.) apply a ready v5
+			// expression fragment to their own query.
+			if (onApplyLogFilter) {
+				const base = {
+					filters: { items: [], op: 'AND' },
+				} as unknown as IBuilderQuery;
+				const nextFilters = getFilterQueryData(
+					base,
+					target,
+					context.fieldValue,
+					operator,
+				).filters ?? { items: [], op: 'AND' };
+				const { expression } = convertFiltersToExpression(nextFilters);
+				if (expression) {
+					onApplyLogFilter(expression);
+				}
+				return;
+			}
+
+			if (!stagedQuery) {
+				return;
+			}
+
 			const updatedQuery = updateQueriesData(
 				stagedQuery,
 				'queryData',
@@ -99,6 +123,7 @@ export function useLogAttributeActions({
 			updateQueriesData,
 			viewName,
 			handleChangeSelectedView,
+			onApplyLogFilter,
 		],
 	);
 
@@ -179,20 +204,25 @@ export function useLogAttributeActions({
 			buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
 				.isRestricted;
 
+		// The using surface must provide an apply path.
+		const canApplyFilter = !!handleChangeSelectedView || !!onApplyLogFilter;
+
 		return [
 			{
 				key: LogDetailsAction.FILTER_IN,
 				label: 'Filter for value',
 				icon: <CirclePlus size={12} />,
 				onClick: (context): void => filterFor(context, true),
-				shouldHide: (_key, fieldKeyPath): boolean => isRestricted(fieldKeyPath),
+				shouldHide: (_key, fieldKeyPath): boolean =>
+					!canApplyFilter || isRestricted(fieldKeyPath),
 			},
 			{
 				key: LogDetailsAction.FILTER_OUT,
 				label: 'Filter out value',
 				icon: <CircleMinus size={12} />,
 				onClick: (context): void => filterFor(context, false),
-				shouldHide: (_key, fieldKeyPath): boolean => isRestricted(fieldKeyPath),
+				shouldHide: (_key, fieldKeyPath): boolean =>
+					!canApplyFilter || isRestricted(fieldKeyPath),
 			},
 			{
 				key: LogDetailsAction.GROUP_BY,
@@ -200,8 +230,10 @@ export function useLogAttributeActions({
 				icon: <Layers size={12} />,
 				onClick: groupBy,
 				shouldHide: (_key, fieldKeyPath): boolean =>
+					!handleChangeSelectedView ||
 					!buildLogFilterTarget(fieldKeyPath, undefined, isBodyJsonQueryEnabled)
-						.groupBySupported || isOldExplorerOrLive,
+						.groupBySupported ||
+					isOldExplorerOrLive,
 			},
 			{
 				key: LogDetailsAction.REPLACE_FILTER,
@@ -209,7 +241,9 @@ export function useLogAttributeActions({
 				icon: <RefreshCw size={12} />,
 				onClick: replaceFilter,
 				shouldHide: (_key, fieldKeyPath): boolean =>
-					isRestricted(fieldKeyPath) || isOldExplorerOrLive,
+					!handleChangeSelectedView ||
+					isRestricted(fieldKeyPath) ||
+					isOldExplorerOrLive,
 			},
 		];
 	}, [
@@ -218,6 +252,8 @@ export function useLogAttributeActions({
 		replaceFilter,
 		isBodyJsonQueryEnabled,
 		isOldExplorerOrLive,
+		handleChangeSelectedView,
+		onApplyLogFilter,
 	]);
 
 	const visibleActions = useMemo<VisibleActionsConfig>(

frontend/src/container/LogDetailedView/logAttributeActions.utils.ts

@@ -10,7 +10,7 @@ import {
 	RESTRICTED_SELECTED_FIELDS,
 } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
 import {
 	BaseAutocompleteData,

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -113,6 +113,7 @@ function LogsActionsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
+					allowCustomFields
 				/>
 			)}
 		</div>

frontend/src/container/MCPServerSettings/ClientTabs/ClientTabs.styles.scss

@@ -6,8 +6,8 @@
 	}
 
 	// Remove default tab content padding/margin — the card provides spacing.
-	--tab-content-padding: 0;
-	--tab-content-margin: var(--spacing-4) 0 0;
+	--tabs-content-padding: 0;
+	--tabs-content-margin: var(--spacing-4) 0 0;
 }
 
 .mcp-client-tabs {

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -9,6 +9,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { StackMode } from 'lib/uPlotV2/config/types';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
@@ -137,6 +138,7 @@ function TimeSeries({
 									key={`${WIDGET_ID}-${index}`}
 								>
 									<BarChart
+										stack={StackMode.Normal}
 										config={chart.config}
 										legendConfig={{
 											position: LegendPosition.BOTTOM,
@@ -144,7 +146,6 @@ function TimeSeries({
 										data={chart.chartData as uPlot.AlignedData}
 										width={containerDimensions.width}
 										height={containerDimensions.height}
-										isStackedBarChart
 										yAxisUnit={yAxisUnit || 'short'}
 										timezone={timezone}
 									/>

frontend/src/container/MeterExplorer/Explorer/configBuilder.ts

@@ -1,6 +1,5 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import {
@@ -89,9 +88,6 @@ export function buildMeterChartConfig({
 		return builder;
 	}
 
-	const seriesCount = (apiResponse.data.result.length ?? 0) + 1;
-	builder.setBands(getInitialStackedBands(seriesCount));
-
 	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -42,7 +42,7 @@ jest.mock('hooks/useDebounce', () => ({
 }));
 
 jest.mock(
-	'container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer',
+	'container/QueryBuilder/filters/OptionRenderer/OptionRenderer',
 	() => ({
 		__esModule: true,
 		default: ({ value }: { value: string }): JSX.Element => <span>{value}</span>,

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts

@@ -21,6 +21,7 @@ import azureMysqlUrl from '@/assets/Logos/azure-mysql.svg';
 import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
 import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
+import azureUrl from '@/assets/Logos/azure.svg';
 import basetenUrl from '@/assets/Logos/baseten.svg';
 import cassandraUrl from '@/assets/Logos/cassandra.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
@@ -28,6 +29,7 @@ import certManagerUrl from '@/assets/Logos/cert-manager.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
 import clickhouseUrl from '@/assets/Logos/clickhouse.svg';
 import cloudflareUrl from '@/assets/Logos/cloudflare.svg';
+import cloudnativePgUrl from '@/assets/Logos/cloudnative-pg.svg';
 import cloudwatchLogsUrl from '@/assets/Logos/cloudwatch-logs.svg';
 import cohereUrl from '@/assets/Logos/cohere.svg';
 import confluentKafkaUrl from '@/assets/Logos/confluent-kafka.svg';
@@ -39,6 +41,7 @@ import datadogUrl from '@/assets/Logos/datadog.svg';
 import dbosUrl from '@/assets/Logos/dbos.svg';
 import deepseekUrl from '@/assets/Logos/deepseek.svg';
 import denoUrl from '@/assets/Logos/deno.svg';
+import difyUrl from '@/assets/Logos/dify.svg';
 import dockerUrl from '@/assets/Logos/docker.svg';
 import documentLoadUrl from '@/assets/Logos/document-load.svg';
 import dotnetUrl from '@/assets/Logos/dotnet.svg';
@@ -70,6 +73,8 @@ import gcpCloudStorageUrl from '@/assets/Logos/gcp-cloud-storage.svg';
 import gcpComputeEngineUrl from '@/assets/Logos/gcp-compute-engine.svg';
 import gcpGkeUrl from '@/assets/Logos/gcp-gke.svg';
 import gcpVpcUrl from '@/assets/Logos/gcp-vpc.svg';
+import gcpUrl from '@/assets/Logos/gcp.svg';
+import githubCopilotUrl from '@/assets/Logos/github-copilot.svg';
 import githubUrl from '@/assets/Logos/github.svg';
 import goUrl from '@/assets/Logos/go.svg';
 import googleAdkUrl from '@/assets/Logos/google-adk.svg';
@@ -96,6 +101,8 @@ import javascriptUrl from '@/assets/Logos/javascript.svg';
 import jbossUrl from '@/assets/Logos/jboss.svg';
 import jenkinsUrl from '@/assets/Logos/jenkins.svg';
 import kafkaUrl from '@/assets/Logos/kafka.svg';
+import kedaUrl from '@/assets/Logos/keda.svg';
+import kongUrl from '@/assets/Logos/kong.svg';
 import kubernetesUrl from '@/assets/Logos/kubernetes.svg';
 import lambdaUrl from '@/assets/Logos/lambda.svg';
 import langchainUrl from '@/assets/Logos/langchain.svg';
@@ -114,6 +121,7 @@ import microsoftSqlServerUrl from '@/assets/Logos/microsoft-sql-server.svg';
 import mistralUrl from '@/assets/Logos/mistral.svg';
 import mongoUrl from '@/assets/Logos/mongo.svg';
 import n8nUrl from '@/assets/Logos/n8n.svg';
+import neonUrl from '@/assets/Logos/neon.svg';
 import newrelicUrl from '@/assets/Logos/newrelic.svg';
 import nextjsUrl from '@/assets/Logos/nextjs.svg';
 import nginxUrl from '@/assets/Logos/nginx.svg';
@@ -2859,6 +2867,25 @@ const onboardingConfigWithLinks = [
 					label: 'Traces',
 					imgUrl: lambdaUrl,
 					link: '/docs/aws-monitoring/lambda/lambda-traces/',
+					question: {
+						desc: 'Which runtime does your Lambda function use?',
+						helpText:
+							'Python, Node.js, Java, and Ruby use the OpenTelemetry auto-instrumentation layer. Go has no layer, so you add the SDK to your code.',
+						options: [
+							{
+								key: 'aws-lambda-traces-auto',
+								label: 'Python, Node.js, Java, Ruby',
+								imgUrl: lambdaUrl,
+								link: '/docs/aws-monitoring/lambda/lambda-traces/',
+							},
+							{
+								key: 'aws-lambda-traces-golang',
+								label: 'Go',
+								imgUrl: goUrl,
+								link: '/docs/aws-monitoring/lambda/lambda-traces-golang/',
+							},
+						],
+					},
 				},
 				{
 					key: 'aws-lambda-metrics',
@@ -5510,8 +5537,10 @@ const onboardingConfigWithLinks = [
 		module: 'metrics',
 		relatedSearchKeywords: [
 			'integrations',
+			'logs',
 			'metrics',
 			'supabase',
+			'supabase logs',
 			'supabase metrics',
 			'supabase monitoring',
 			'supabase observability',
@@ -5545,43 +5574,23 @@ const onboardingConfigWithLinks = [
 		label: 'Traefik',
 		imgUrl: opentelemetryUrl,
 		tags: ['infrastructure monitoring'],
-		module: 'infrastructure',
+		module: 'apm',
 		relatedSearchKeywords: [
 			'infrastructure',
 			'traefik',
-			'traefik access logs',
-			'traefik logs',
 			'traefik metrics',
 			'traefik monitoring',
 			'traefik observability',
 			'traefik tracing',
 		],
 		link: '/docs/tutorial/traefik-observability/',
-		question: {
-			desc: 'Which Traefik signals do you want to send to SigNoz?',
-			type: 'select',
-			options: [
-				{
-					key: 'traefik-metrics-traces',
-					label: 'Metrics & Traces',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/tutorial/traefik-observability/',
-				},
-				{
-					key: 'traefik-logs',
-					label: 'Access Logs',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/integrations/opentelemetry-traefik/',
-				},
-			],
-		},
 	},
 	{
 		dataSource: 'mongodb-atlas',
 		label: 'MongoDB (Atlas)',
 		imgUrl: mongoUrl,
 		tags: ['database'],
-		module: 'database',
+		module: 'metrics',
 		relatedSearchKeywords: [
 			'atlas',
 			'atlas metrics',
@@ -5600,36 +5609,15 @@ const onboardingConfigWithLinks = [
 		label: 'MySQL',
 		imgUrl: opentelemetryUrl,
 		tags: ['database'],
-		module: 'database',
+		module: 'metrics',
 		relatedSearchKeywords: [
 			'database',
 			'mysql',
-			'mysql error log',
-			'mysql logs',
 			'mysql metrics',
 			'mysql monitoring',
 			'mysql observability',
-			'mysql slow query log',
 		],
 		link: '/docs/metrics-management/mysql-metrics/',
-		question: {
-			desc: 'Which MySQL signals do you want to send to SigNoz?',
-			type: 'select',
-			options: [
-				{
-					key: 'mysql-metrics',
-					label: 'Metrics',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/metrics-management/mysql-metrics/',
-				},
-				{
-					key: 'mysql-logs',
-					label: 'Logs',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/integrations/opentelemetry-mysql/',
-				},
-			],
-		},
 	},
 	{
 		dataSource: 'jmx',
@@ -6992,5 +6980,514 @@ const onboardingConfigWithLinks = [
 		id: 'dspy',
 		link: '/docs/dspy-observability/',
 	},
+	{
+		dataSource: 'grok-build',
+		label: 'Grok Build',
+		imgUrl: grokUrl,
+		tags: ['LLM Monitoring'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'coding agent',
+			'grok build',
+			'grok build events',
+			'grok build logs',
+			'grok build metrics',
+			'grok build monitoring',
+			'grok build observability',
+			'llm',
+			'llm monitoring',
+			'metrics',
+			'monitoring',
+			'observability',
+			'otel grok build integration',
+			'terminal coding agent',
+			'token usage',
+			'xai',
+		],
+		id: 'grok-build',
+		link: '/docs/grok-build-observability/',
+	},
+	{
+		dataSource: 'neon',
+		label: 'Neon',
+		imgUrl: neonUrl,
+		tags: ['database'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'database',
+			'neon',
+			'neon database',
+			'neon db',
+			'neon logs',
+			'neon metrics',
+			'neon monitoring',
+			'neon observability',
+			'neondb',
+			'opentelemetry neon',
+			'postgres',
+			'postgresql',
+			'serverless postgres',
+		],
+		id: 'neon',
+		link: '/docs/integrations/opentelemetry-neondb/',
+	},
+	{
+		dataSource: 'dify',
+		label: 'Dify',
+		imgUrl: difyUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'ai agent',
+			'dify',
+			'dify monitoring',
+			'dify observability',
+			'dify traces',
+			'llm',
+			'llm monitoring',
+			'metrics',
+			'no code ai',
+			'observability',
+			'opentelemetry dify',
+			'traces',
+		],
+		id: 'dify',
+		link: '/docs/dify-observability/',
+	},
+	{
+		dataSource: 'firecrawl',
+		label: 'Firecrawl',
+		imgUrl: llmMonitoringUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'crawl',
+			'firecrawl',
+			'firecrawl metrics',
+			'firecrawl monitoring',
+			'firecrawl observability',
+			'firecrawl traces',
+			'llm',
+			'llm monitoring',
+			'opentelemetry firecrawl',
+			'scrape',
+			'traces',
+			'web scraping',
+		],
+		id: 'firecrawl',
+		link: '/docs/firecrawl-monitoring/',
+	},
+	{
+		dataSource: 'keda',
+		label: 'KEDA',
+		imgUrl: kedaUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'autoscaling',
+			'event driven autoscaling',
+			'keda',
+			'keda metrics',
+			'keda monitoring',
+			'kubernetes',
+			'kubernetes autoscaling',
+			'metrics',
+			'opentelemetry keda',
+			'scaled jobs',
+			'scaled objects',
+		],
+		id: 'keda',
+		link: '/docs/metrics-management/keda-metrics/',
+	},
+	{
+		dataSource: 'opentelemetry-collector-metrics',
+		label: 'OpenTelemetry Collector Metrics',
+		imgUrl: opentelemetryUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'collector health',
+			'collector internal metrics',
+			'collector metrics',
+			'metrics',
+			'opentelemetry',
+			'opentelemetry collector',
+			'otel collector',
+			'otelcol metrics',
+			'pipeline health',
+		],
+		id: 'opentelemetry-collector-metrics',
+		link: '/docs/metrics-management/opentelemetry-collector-metrics/',
+	},
+	{
+		dataSource: 'cloudnative-pg',
+		label: 'CloudNativePG',
+		imgUrl: cloudnativePgUrl,
+		tags: ['database'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'cloud native postgres',
+			'cloudnativepg',
+			'cnpg',
+			'cnpg metrics',
+			'database',
+			'kubernetes postgres',
+			'metrics',
+			'opentelemetry cloudnativepg',
+			'postgres',
+			'postgresql',
+		],
+		id: 'cloudnative-pg',
+		link: '/docs/metrics-management/opentelemetry-cloudnative-pg/',
+	},
+	{
+		dataSource: 'kong-gateway',
+		label: 'Kong Gateway',
+		imgUrl: kongUrl,
+		tags: ['infrastructure monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'api gateway',
+			'kong',
+			'kong gateway',
+			'kong logs',
+			'kong metrics',
+			'kong monitoring',
+			'kong observability',
+			'kong traces',
+			'opentelemetry kong',
+			'proxy',
+			'traces',
+		],
+		id: 'kong-gateway',
+		link: '/docs/integrations/kong-gateway/',
+	},
+	{
+		dataSource: 'github-copilot',
+		label: 'GitHub Copilot',
+		imgUrl: githubCopilotUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'coding agent',
+			'copilot',
+			'copilot chat',
+			'github copilot',
+			'github copilot metrics',
+			'github copilot monitoring',
+			'github copilot observability',
+			'github copilot traces',
+			'llm',
+			'llm monitoring',
+			'monitoring',
+			'observability',
+			'otel github copilot integration',
+			'traces',
+			'tracing',
+			'vs code',
+		],
+		id: 'github-copilot',
+		link: '/docs/github-copilot-monitoring/',
+	},
+	{
+		dataSource: 'serilog',
+		label: 'Serilog',
+		imgUrl: dotnetUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'.net',
+			'asp.net',
+			'c#',
+			'csharp',
+			'dotnet',
+			'dotnet logs',
+			'logging',
+			'logs',
+			'monitoring',
+			'observability',
+			'otel serilog integration',
+			'serilog',
+			'serilog logs',
+			'serilog sink',
+			'structured logging',
+		],
+		id: 'serilog',
+		link: '/docs/logs-management/send-logs/serilog-to-signoz/',
+	},
+	{
+		dataSource: 'gcp-integration',
+		label: 'GCP Integration',
+		imgUrl: gcpUrl,
+		tags: ['GCP'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'cloud monitoring metrics',
+			'connect gcp account',
+			'gcp',
+			'gcp integration',
+			'gcp manual setup',
+			'gcp metrics',
+			'gcp monitoring',
+			'gcp observability',
+			'gcp service account',
+			'google cloud',
+			'google cloud integration',
+			'metrics',
+			'monitoring',
+			'observability',
+			'opentelemetry collector gcp',
+		],
+		id: 'gcp-integration',
+		link: '/docs/integrations/gcp/gcp-integration/',
+	},
+	{
+		dataSource: 'azure-cosmos-db',
+		label: 'Azure Cosmos DB',
+		imgUrl: azureUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure cosmos db',
+			'azure integration',
+			'cosmos db',
+			'cosmosdb',
+			'database',
+			'metrics',
+			'monitoring',
+			'nosql',
+			'observability',
+			'one click azure',
+			'request units',
+		],
+		id: 'azure-cosmos-db',
+		link: '/integrations/azure?service=cosmosdb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-mongodb',
+		label: 'Azure MongoDB vCore',
+		imgUrl: mongoUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure mongodb',
+			'azure mongodb vcore',
+			'database',
+			'metrics',
+			'mongodb',
+			'mongodb vcore',
+			'monitoring',
+			'nosql',
+			'observability',
+			'one click azure',
+		],
+		id: 'azure-mongodb',
+		link: '/integrations/azure?service=mongodb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-postgresql-flexible-server',
+		label: 'Azure PostgreSQL Flexible Server',
+		imgUrl: postgresqlUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure postgresql',
+			'azure postgresql flexible server',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'postgres',
+			'postgresql',
+			'postgresql flexible server',
+		],
+		id: 'azure-postgresql-flexible-server',
+		link: '/integrations/azure?service=postgresqlflexibleserver',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-cache-redis',
+		label: 'Azure Cache for Redis',
+		imgUrl: redisUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure cache for redis',
+			'azure integration',
+			'azure redis',
+			'cache',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'redis',
+		],
+		id: 'azure-cache-redis',
+		link: '/integrations/azure?service=redis',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-sql-managed-instance',
+		label: 'Azure SQL Managed Instance',
+		imgUrl: azureSqlDatabaseMetricsUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure sql',
+			'azure sql managed instance',
+			'database',
+			'managed instance',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'sql server',
+		],
+		id: 'azure-sql-managed-instance',
+		link: '/integrations/azure?service=sqldatabasemi',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-cassandra-db',
+		label: 'Azure Managed Instance for Apache Cassandra',
+		imgUrl: cassandraUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'apache cassandra',
+			'azure',
+			'azure cassandra',
+			'azure integration',
+			'azure managed instance for apache cassandra',
+			'cassandra',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+		],
+		id: 'azure-cassandra-db',
+		link: '/integrations/azure?service=cassandradb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'gcp-cloud-sql-postgresql',
+		label: 'GCP Cloud SQL for PostgreSQL',
+		imgUrl: gcpCloudSqlUrl,
+		tags: ['GCP'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'cloud sql',
+			'cloud sql for postgresql',
+			'database',
+			'gcp',
+			'gcp integration',
+			'google cloud',
+			'metrics',
+			'monitoring',
+			'observability',
+			'postgres',
+			'postgresql',
+		],
+		id: 'gcp-cloud-sql-postgresql',
+		link: '/integrations/gcp?service=cloudsql_postgres',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'gcp-memorystore-redis',
+		label: 'GCP Memorystore for Redis',
+		imgUrl: redisUrl,
+		tags: ['GCP'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'cache',
+			'database',
+			'gcp',
+			'gcp integration',
+			'google cloud',
+			'memorystore',
+			'memorystore for redis',
+			'metrics',
+			'monitoring',
+			'observability',
+			'redis',
+		],
+		id: 'gcp-memorystore-redis',
+		link: '/integrations/gcp?service=memorystore_redis',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'supabase-logs',
+		label: 'Supabase Logs',
+		imgUrl: supabaseUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'database',
+			'logging',
+			'logs',
+			'postgres',
+			'postgresql',
+			'send supabase logs',
+			'supabase',
+			'supabase log drains',
+			'supabase logs',
+			'supabase observability',
+		],
+		id: 'supabase-logs',
+		link: '/docs/logs-management/send-logs/supabase-logs/',
+	},
+	{
+		dataSource: 'traefik-logs',
+		label: 'Traefik Access Logs',
+		imgUrl: opentelemetryUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'access logs',
+			'logging',
+			'logs',
+			'opentelemetry traefik',
+			'proxy',
+			'reverse proxy',
+			'traefik',
+			'traefik access logs',
+			'traefik logs',
+		],
+		id: 'traefik-logs',
+		link: '/docs/integrations/opentelemetry-traefik/',
+	},
+	{
+		dataSource: 'mysql-logs',
+		label: 'MySQL Logs',
+		imgUrl: opentelemetryUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'database',
+			'logging',
+			'logs',
+			'mysql',
+			'mysql error log',
+			'mysql general query log',
+			'mysql logs',
+			'mysql slow query log',
+			'opentelemetry mysql',
+		],
+		id: 'mysql-logs',
+		link: '/docs/integrations/opentelemetry-mysql/',
+	},
 ];
 export default onboardingConfigWithLinks;

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -296,12 +296,12 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// New order: [attribute.service.name, log.body, resource.service.name, log.timestamp]
+			// New order: [attribute:service.name, log:body, resource:service.name, log:timestamp]
 			result.current.config.addColumn?.onReorder([
-				'attribute.service.name',
-				'log.body',
-				'resource.service.name',
-				'log.timestamp',
+				'attribute:service.name',
+				'log:body',
+				'resource:service.name',
+				'log:timestamp',
 			]);
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
@@ -309,13 +309,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
+						`${c.fieldContext}:${c.name}`,
 				),
 			).toStrictEqual([
-				'attribute.service.name',
-				'log.body',
-				'resource.service.name',
-				'log.timestamp',
+				'attribute:service.name',
+				'log:body',
+				'resource:service.name',
+				'log:timestamp',
 			]);
 		});
 
@@ -329,11 +329,11 @@ describe('useOptionsMenu', () => {
 
 			result.current.config.addColumn?.onReorder([
 				'state-indicator',
-				'log.timestamp',
+				'log:timestamp',
 				'unknown.composite',
-				'log.body',
-				'resource.service.name',
-				'attribute.service.name',
+				'log:body',
+				'resource:service.name',
+				'attribute:service.name',
 			]);
 
 			const reordered = mockUpdateColumns.mock.calls[0][0];
@@ -341,13 +341,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
+						`${c.fieldContext}:${c.name}`,
 				),
 			).toStrictEqual([
-				'log.timestamp',
-				'log.body',
-				'resource.service.name',
-				'attribute.service.name',
+				'log:timestamp',
+				'log:body',
+				'resource:service.name',
+				'attribute:service.name',
 			]);
 		});
 
@@ -359,17 +359,17 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// Removing 'resource.service.name' should drop ONLY the resource variant.
-			result.current.config.addColumn?.onRemove('resource.service.name');
+			// Removing 'resource:service.name' should drop ONLY the resource variant.
+			result.current.config.addColumn?.onRemove('resource:service.name');
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
 			const remaining = mockUpdateColumns.mock.calls[0][0];
 			expect(
 				remaining.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
+						`${c.fieldContext}:${c.name}`,
 				),
-			).toStrictEqual(['log.body', 'attribute.service.name', 'log.timestamp']);
+			).toStrictEqual(['log:body', 'attribute:service.name', 'log:timestamp']);
 		});
 
 		it('removing by a non-matching composite ID is a no-op (filter returns the full list)', () => {

frontend/src/container/OptionsMenu/utils.ts

@@ -16,7 +16,7 @@ export const getOptionsFromKeys = (
 };
 
 // Composite identity for a column. Disambiguates same-name fields across
-// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
+// different fieldContexts (e.g. resource:service.name vs attribute:service.name).
 // Falls back to bare name when context is missing.
 export const buildCompositeKey = (name: string, context?: string): string =>
-	context ? `${context}.${name}` : name;
+	context ? `${context}:${name}` : name;

frontend/src/container/PanelWrapper/__tests__/__snapshots__/ValuePanelWrapper.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
     class="c0"
   >
     <p
-      class="_typography_ulrzs_1"
+      class="_typography_j4pmm_1"
       data-slot="typography"
       data-variant="text"
     />
@@ -50,7 +50,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
         class="value-text-container"
       >
         <p
-          class="_typography_ulrzs_1 value-graph-text"
+          class="_typography_j4pmm_1 value-graph-text"
           data-slot="typography"
           data-testid="value-graph-text"
           data-variant="text"
@@ -59,7 +59,7 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
           295.43
         </p>
         <p
-          class="_typography_ulrzs_1 value-graph-unit"
+          class="_typography_j4pmm_1 value-graph-unit"
           data-slot="typography"
           data-testid="value-graph-suffix-unit"
           data-variant="text"

frontend/src/container/PipelinePage/tests/__snapshots__/DragAction.test.tsx.snap

@@ -22,11 +22,11 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
     class="c0"
   >
     <div
-      class="_switch-wrapper_jbsv7_1"
+      class="_switch-wrapper_1a8sn_6"
     >
       <button
         aria-checked="true"
-        class="_switch_jbsv7_1"
+        class="_switch_1a8sn_6"
         data-color="robin"
         data-state="checked"
         id=":r0:"
@@ -35,7 +35,7 @@ exports[`PipelinePage container test should render DragAction section 1`] = `
         value="on"
       >
         <span
-          class="_switch__thumb_jbsv7_59"
+          class="_switch__thumb_1a8sn_71"
           data-state="checked"
         />
       </button>

frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap

@@ -74,7 +74,7 @@ exports[`PipelinePage container test should render PipelinePageLayout section 1`
             />
             <div>
               <p
-                class="_typography_ulrzs_1"
+                class="_typography_j4pmm_1"
                 data-slot="typography"
                 data-variant="text"
               >

frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts

@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { OrderByFilterProps } from './filters/OrderByFilter/OrderByFilter.interfaces';
 
+export type WhereClauseConfig = {
+	customKey: string;
+	customOp: string;
+};
+
 type FilterConfigs = {
 	[Key in keyof Omit<IBuilderQuery, 'filters'>]: {
 		isHidden: boolean;