docs(storybook): add the visual diff skill

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

@@ -0,0 +1,95 @@
+---
+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.
+
+## 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/`.
+- **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__/`.
+- **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
+- [ ] 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,167 @@
+# 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 meta = {
+	title: 'Pages/Services',
+	component: Services,
+	decorators: [withAppLayout],
+	...storyMocks(servicesMocks, { route: ROUTES.APPLICATION }),
+} 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.
+
+## 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,110 @@
+# 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` → `pages-services`, plus the
+story export in kebab-case. Render one story on its own:
+
+```
+http://localhost:6006/iframe.html?id=pages-services--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 |

.claude/skills/storybook-visual-diff/SKILL.md

@@ -0,0 +1,294 @@
+---
+name: storybook-visual-diff
+description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.
+---
+
+# Storybook visual diff
+
+Two scripts under `frontend/scripts`:
+
+- `story-shots.mjs` — screenshots stories off a running Storybook dev server.
+- `story-shots-diff.mjs` — pixel-diffs two runs and paints what moved.
+
+Output goes to `frontend/.story-shots/` (gitignored), one directory per run.
+
+## 0. Settle what is being compared, first
+
+A diff is only worth taking when the two runs straddle something. Run twice over
+the same tree and the answer is zero, or the noise floor: true, and useless.
+So before starting a server, pin down four things. Whatever the prompt already
+says, take it and do not ask again; ask only for what is genuinely missing, in
+**one** `AskUserQuestion` call.
+
+| To settle | Ask | Options |
+| --- | --- | --- |
+| Job | "What should this run produce?" | shoot only · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
+| Scope | "Which stories?" | offer 2-3 concrete selections read off `index.json` (a page, a `--title` prefix, everything), never open-ended |
+| Themes | "Which themes?" | dark · dark + light |
+| Read-out | "How should the diff read?" | `green` (changed pixels over the after shot) · `green-parallel` (before \| after \| diff, side by side) · `red` · `red-parallel` · `none` (keep both runs, do not diff) |
+
+Skip a row when the prompt answers it, and skip the whole call when the prompt
+answers all of it ("shoot the pods tooltips in both themes" needs no question).
+Skip Read-out too whenever the job is *shoot only*, and take `none` for what it
+says: shoot both sides, report both paths, run no comparison. When the prompt
+says nothing at all, ask; a silent guess here burns ~6 min per sweep on the
+wrong stories.
+
+The job decides which loop below to run:
+
+| Job | Loop |
+| --- | --- |
+| **shoot only** | §1, §2, stop. Report the paths. No diff, no second run. |
+| **baseline first** | the full loop, stopping after step 2 to hand the change back. The user makes it, then continue at step 4. |
+| **change already in the tree** | the tree *is* the after state. `git stash` (or check out the base commit) to shoot the before, restore, shoot the after. Confirm the working tree is clean enough to stash before touching it, and restore it even if a capture fails. |
+| **branch vs branch** | shoot the current branch, then `git switch <base>` in place (stash first if the tree is dirty), restart the dev server, shoot again, switch back and unstash. Restart matters: HMR does not survive a whole-branch swap cleanly. Get the tree back to where it started even if a capture fails. |
+| **noise floor** | two runs, same tree, diff. The number is the harness's floor, not a finding. |
+| **config vs config** | same tree, two runs that differ only in flags: `--args`, `--clock`, `--width`, `--theme`, `--motion`. Filenames stay identical, so the pairs line up and the caption names what changed. |
+
+## The loop
+
+1. Capture the baseline **before touching anything**.
+2. Capture it a second time and diff the two. That is the noise floor: anything
+   it reports is what the harness cannot hold still, and no conclusion about the
+   change may rest on those stories. Cheap on a handful of stories, ~6 min per
+   32, so on a wide sweep run it over the two or three stories the change is
+   aimed at instead of all of them.
+3. Make the change.
+4. Capture again into a third directory.
+5. Diff, then read the tinted shot of the largest movers to judge the change.
+
+## 1. One dev server, on a free port
+
+`storybook dev` keys its Vite dep cache off the config dir, so two servers on the
+same `-c` serve mismatched prebundles and every story dies with `Invalid hook
+call`. Check what is already up first — port 6006 is often another repo's
+Storybook, and its `index.json` then indexes the wrong stories:
+
+```bash
+for port in 6006 6007; do
+  curl -s -m 2 "http://localhost:$port/index.json" | head -c 60 && echo "  <- $port"
+done
+```
+
+Start the SigNoz one on a free port, from the repo's own binary so no package
+manager shim is in the way:
+
+```bash
+cd frontend
+nohup ./node_modules/.bin/storybook dev -p 6007 --no-open --quiet \
+  > "${TMPDIR:-/tmp}/signoz-storybook.log" 2>&1 &
+```
+
+It is ready when `curl -s localhost:6007/index.json` returns JSON whose
+`entries` hold SigNoz story ids.
+
+## 2. Capture
+
+Playwright is not a frontend dependency. The script finds it in `tests/e2e`
+(`pnpm -C tests/e2e install`, `@playwright/test` is enough) or in a global
+install, and launches Playwright's own chromium, falling back to an installed
+Chrome. Two escape hatches when that is not what a machine has:
+
+```bash
+export PLAYWRIGHT_MODULE=/path/to/playwright   # a different install
+export CHROME_PATH=/path/to/chrome             # a specific browser binary
+```
+
+Then pick the stories. `--list` prints the selection without shooting anything:
+
+```bash
+# every tooltip story of every page
+node scripts/story-shots.mjs .story-shots/baseline \
+  --port 6007 --title Pages/ --name tooltip --theme dark
+
+# a handful of stories by id or by title/name substring, both themes
+node scripts/story-shots.mjs .story-shots/baseline \
+  --port 6007 --stories pages-noz,dashboards/detail --theme dark,light
+```
+
+| Flag | Meaning |
+| --- | --- |
+| `--stories <match>` | id or `Title/Name` substring, repeatable or comma-separated. Omit for every story. |
+| `--title <prefix>` | only titles starting with the prefix (`Pages/`, `Components/`) |
+| `--name <match>` | only story names containing the match |
+| `--theme dark,light` | one pass per theme; omit for the story's own default (dark) |
+| `--args <k:v;k2:v2>` | arg overrides, Storybook's own `?args=` syntax, repeatable. A dotted value is dropped by Storybook itself, so map it to a slug inside the story's mocks |
+| `--port` | dev server port, or `$SB_PORT` |
+| `--width <px>` | the only fixed dimension, default 1680 |
+| `--height <px>` | shortest the viewport may be, default 1200 |
+| `--max-height <px>` | tallest it may grow to, default 8000 |
+| `--grow <what>` | `scrollers` (default) grows the viewport until the page's own scrollers fit, `document` only follows the document height, `none` keeps `--height` |
+| `--settle <ms>` | wait after the page goes quiet, default 1500 |
+| `--clock <iso\|live>` | wall clock the page reads, passed to the preview as `?storyClock`; `live` unfreezes it |
+| `--motion` | keep animations and transitions running (sets the `motion` global to `live`) |
+| `--ignore <selector>` | hide matching elements, on top of `[data-shot-ignore]` and `[data-chromatic="ignore"]` |
+| `--flat` | write `<out>/<id>.png`, no theme directory |
+| `--no-caption` | leave the caption band off the shots |
+| `--list` | print the matched stories and exit |
+
+Files land at `<out>/<theme>/<story-id>.png`, next to a `shots.json` recording
+what each shot is (id, title, name, theme, `ok`/`busy`, the caption's height in
+rows) and how the run was configured (args, clock, width, height, grow, motion,
+settle, ignore). Keep the flags identical between the two runs or the diff pairs
+nothing.
+
+Every shot carries the caption band described below, so a single screenshot says
+what it is on its own. `--no-caption` leaves it off, and so does a machine
+without ImageMagick (with a warning). The band never changes the shot's width
+(long text wraps rather than widening the canvas) and its height is recorded, so
+the diff crops it back off and never reports one caption against another. Two
+runs whose captions are different heights still diff to zero. A story that never held still for two
+identical frames is logged `busy` instead of `ok` — treat its diff as suspect.
+
+Dark alone is enough while iterating on the harness; add `light` for the run you
+report.
+
+## 3. Diff
+
+```bash
+node scripts/story-shots-diff.mjs .story-shots/baseline .story-shots/capped .story-shots/diff
+```
+
+Prints `<changed pixels>  <theme>/<story>.png`, largest first, and writes one
+image per pair. Needs ImageMagick for PNG encode/decode (7's `magick`, or 6's
+`convert`/`identify`/`montage`); the comparison itself is in the script.
+
+| Flag | Meaning |
+| --- | --- |
+| `--mode green` | default. The after shot with the changed pixels painted over it, exactly the pixels that changed. What Chromatic shows. |
+| `--mode green-parallel` | `previous \| current \| diff` in one image, each tile labelled above it, on a gutter inverted from the theme. The diff tile is the `green` one, so the after shot stays readable underneath. |
+| `--mode red` | the after shot faded to 10%, changed pixels in red. A pixelmatch-style diff, easiest to read when the change is a thin edge. |
+| `--mode red-parallel` | the same three tiles, with the `red` diff. Best when the change is a thin edge that the unfaded shot would swallow. |
+| `--threshold <0..1>` | how far a pixel must move to count. Default 0.063, Chromatic's `diffThreshold`. |
+| `--include-aa` | count antialiasing changes too. Off by default, as in Chromatic. |
+| `--tint <#rrggbb>` | override the mode's colour. |
+| `--no-caption` | drop the caption band. |
+
+### The caption
+
+Both scripts stamp a band on top of what they write: `story-shots.mjs` on each
+shot, from the story and the run's own settings; `story-shots-diff.mjs` on each
+diff, read out of the two runs' `shots.json`. It carries the story's
+`Title/Name`, then its id, theme and `busy` flag, then the settings both runs
+shared, each reading `key:value`. Whatever the two runs did **differently** goes
+on the side it belongs to: under `previous` and `current` on the parallel tiles,
+on two lines of the band otherwise. So a pair that differs only in `--args` says
+so on its face, which is what makes several shots of one story tellable apart.
+
+The shots' own bands are cropped off before comparing and before going into the
+tiles, so nothing in the output is a diff of a caption. Type size follows the
+image width, so it stays readable with the whole image viewed at fit-to-width;
+the heading is set in an installed sans and the detail lines in a mono, falling
+back to ImageMagick's default when neither is on the machine. Without a manifest
+the band falls back to the file path, and a directory of captioned shots whose
+`shots.json` is missing has nothing to crop by, so its captions do land in the
+diff. Keep `shots.json` next to the shots.
+
+### How the comparison works
+
+Chromatic's own capture and diff run server-side — `chromatic-cli` uploads a
+built Storybook and contains no capture or comparison code at all. What is public
+is the parameter contract, and the numbers in it say what the comparison is:
+`diffThreshold` defaults to `0.063` on a 0-1 scale, which is pixelmatch's
+`threshold`, and `diffIncludeAntiAliasing` defaults to false, which is
+pixelmatch's `includeAA: false`. So the script implements that comparison:
+
+1. Both PNGs are read as raw RGBA through `magick … RGBA:-`.
+2. Per pixel, the squared YIQ distance between the two colours (weights
+   `0.5053 / 0.299 / 0.1957`), compared against `35215 * threshold²` — 35215 is
+   the largest distance two 8-bit colours can have. Chroma is included, so a
+   colour swap at equal brightness still counts.
+3. A pixel over the threshold is dropped when it is only antialiasing: it is the
+   darkest or lightest of its eight neighbours, and the other image has a pixel
+   around there doing the same job. This is what keeps a subpixel glyph edge from
+   reading as a change.
+4. What survives is painted at full opacity, one output pixel per changed input
+   pixel. No dilation, no blobs — a one-pixel shift shows as a one-pixel line.
+
+A pair whose shots are different sizes is compared over the overlap, and every
+row and column that exists in only one of them counts as changed.
+
+Pairing is by `<theme>/<story-id>.png`, so a story that exists on only one side
+(new on the feature branch, renamed, retitled) has nothing to pair with and is
+skipped silently. On a branch-vs-branch run, compare the two runs' file lists
+before reading the numbers.
+
+## What makes a shot reproducible
+
+Most of it is in the preview, not in the script, so a Chromatic build in the
+cloud shoots the same page: `.storybook/preview-head.html` freezes the clock,
+and `settleForCapture` (the preview's `afterEach`, which runs after `play`)
+parks the animations and snaps the bottom-pinned lists. The script drives the
+rest:
+
+- **Storybook's own render phase is the readiness signal.** It waits for
+  `window.__STORYBOOK_PREVIEW__.storyRenders[].phase === 'finished'`, which is
+  reached only after the loaders, the decorators and the story's `play` are done.
+  A DOM check cannot see a `play` still running. (Storybook 10 spells the final
+  phase `finished`, not `completed`.)
+- **Network quiescence, not `networkidle`.** react-query retries and msw keep
+  requests going after load, and a few stories hang a request by design, so the
+  wait is "no request for 600ms", capped at 15s.
+- **The clock is frozen** (`2026-06-15T12:00:00Z`), by the preview itself. Chart windows, `4 mins ago`
+  labels and trial countdowns all derive from `now`; a live clock alone moved
+  8000 pixels on the dashboards list and redrew every chart axis.
+- **Animations are parked on their last frame** by `html.sb-still`, a
+  zero-length single iteration with `forwards` fill, plus `prefers-reduced-
+  motion`. The Motion toolbar item (`still` by default) turns it off. An infinite
+  spinner is otherwise caught at a random angle.
+- **`document.fonts.ready`**, because text reflows when a face lands late.
+- **Lists pinned to their bottom are snapped onto it**, once by the preview and
+  again by the script after the page goes quiet. A virtuoso list settles a
+  few pixels short of the end depending on the order its items were measured in.
+- **Two identical frames in a row**, because what a page is still waiting on is
+  often not observable from outside it.
+- **`[data-shot-ignore]`, `[data-chromatic="ignore"]` and `--ignore <selector>`**
+  hide a region that cannot be held still; Chromatic excludes the same attribute
+  from its comparison.
+- **The width is the only fixed dimension.** Chromatic's `viewports` are widths;
+  the height follows the page. `src/styles.scss` pins `html, body, #root` to
+  `height: 100%; overflow: hidden`, so the document never outgrows the viewport
+  and its height says nothing: what overflows are the shell's inner scrollers.
+  `--grow scrollers`, the default, grows the viewport until the tallest in-flow
+  scroller fits, so nothing is cut off and no scrollbar is left in the shot (the
+  dashboards list goes to 2226px in one round). Popups are skipped — they are out
+  of the flow, and a tall dropdown would otherwise drag the shot to a height
+  nothing on the page needs. A page that sizes a panel in `vh` grows its own
+  content as the viewport grows, so no height ever fits it and the rounds only
+  chase — `.alert-chart-container` is `57vh`, which puts Create Alert's fixed
+  point at 4344px with an empty band on top. Those pages are shot at `--height`
+  with their own scrollbar, which is what they look like in a browser, and the
+  log says `(viewport-sized content, stopped chasing Npx)`.
+
+With all of that, 29 of the 32 page tooltip stories are byte-identical across
+runs. The three that are not, and why:
+
+| Story | Residual | Cause |
+| --- | --- | --- |
+| `kubernetes-pods--tooltips-in-options-panel` | ~13k px | 24 tooltips held open in an overlapping cluster; they portal to `body` in mount order, and the drawer's own tooltips mount before or after the list's depending on when their data lands, so overlapping tooltips stack differently. Panel geometry itself is stable. |
+| `settings-role-editor--tooltips-in-json-editor` | ~2.5k px | monaco re-measures and lands one pixel off. |
+| `traces-trace-details--tooltips` | ~800 px | same class, one row of the waterfall. |
+
+Each is bimodal — two stable arrangements — so the same number reappears run
+after run. Diff a story against itself before believing its number, and reach
+for `--ignore` when a region cannot be settled.
+
+## Gotchas
+
+- **Zero pixels is a real answer.** A story whose tooltips are all short is
+  unaffected by a tooltip rule; it is not a broken capture.
+- **The selector matters more than the rule.** A global rule on
+  `[data-slot='…']` only reaches design-system components. antd's own tooltips
+  (`.ant-tooltip-inner`, e.g. the Create Alert help popups) are untouched, which
+  is why some stories show no diff at all.
+- **Global style overrides need `!important`.** `src/styles.scss` loads before
+  the design system injects its CSS-module styles at runtime, so a plain rule on
+  a `[data-slot='…']` element loses. A component-level `!important` of the same
+  specificity still wins over it — `PanelStatusPopover.module.scss` keeps its own
+  `max-width: 520px !important`.
+- **A fresh context per story** is why a full sweep takes ~6 min for 32 stories.
+  Reusing one page loses the msw service worker re-registration race and stories
+  start failing after a few navigations.
+- **Stories behind a hover, drawer or modal** only render what their `play`
+  reaches. If a state is missing from the shot, the story needs the `play`, not
+  the script.

.gitattributes

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

.github/CODEOWNERS

@@ -152,29 +152,39 @@ go.mod @therealpandey
 
 ## Dashboard Types
 
-/frontend/src/types/api/dashboard/ @SigNoz/pulse-frontend
-/frontend/src/types/api/widgets/ @SigNoz/pulse-frontend
+/frontend/src/api/types/dashboard/ @SigNoz/pulse-frontend
 
-## Widget Card
+## Dashboard List
 
-/frontend/src/container/WidgetCard/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
+/frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
+
+# Dashboard Widget Page
+
+/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
+
+## Dashboard Page
+
+/frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
+/frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
+/frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
+/frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
 
 ## Dashboard Libs + Components
 
 /frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
-/frontend/src/lib/visualization/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
 /frontend/src/components/NewSelect/ @SigNoz/pulse-frontend
 
-## Dashboard Pages
-
-/frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
-/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
+## Dashboard V2
+/frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
 
 ## Infrastructure Monitoring
 /frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend

cmd/authz.go

@@ -97,7 +97,6 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,

cmd/community/server.go

@@ -44,8 +44,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/subscription"
-	"github.com/SigNoz/signoz/pkg/subscription/noopsubscription"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
@@ -89,9 +87,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ sqlstore.SQLStore, _ zeus.Zeus, _ organization.Getter, _ analytics.Analytics) factory.ProviderFactory[licensing.Licensing, licensing.Config] {
 			return nooplicensing.NewFactory()
 		},
-		func(_ zeus.Zeus, _ licensing.Licensing) subscription.Subscription {
-			return noopsubscription.New()
-		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
 		signoz.NewWebProviderFactories(config.Global),

cmd/enterprise/server.go

@@ -28,7 +28,6 @@ import (
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	eerules "github.com/SigNoz/signoz/ee/query-service/rules"
-	"github.com/SigNoz/signoz/ee/subscription/httpsubscription"
 	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
@@ -61,7 +60,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/subscription"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
@@ -105,9 +103,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(sqlstore sqlstore.SQLStore, zeus zeus.Zeus, orgGetter organization.Getter, analytics analytics.Analytics) factory.ProviderFactory[licensing.Licensing, licensing.Config] {
 			return httplicensing.NewProviderFactory(sqlstore, zeus, orgGetter, analytics)
 		},
-		func(zeus zeus.Zeus, licensing licensing.Licensing) subscription.Subscription {
-			return httpsubscription.New(zeus, licensing)
-		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
 		signoz.NewWebProviderFactories(config.Global),

conf/example.yaml

@@ -397,6 +397,7 @@ identn:
     # headers to use for tokenizer identN resolver
     headers:
       - Authorization
+      - Sec-WebSocket-Protocol
   apikey:
     # toggle apikey identN
     enabled: true

docs/api/openapi.yml

@@ -25,379 +25,6 @@ components:
       - data
       - orgId
       type: object
-    AlertmanagertypesChannelConfig:
-      discriminator:
-        mapping:
-          email: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig'
-          googlechat: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig'
-          incidentio: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
-          jira: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
-          jsmops: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
-          msteams: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig'
-          opsgenie: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
-          pagerduty: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
-          slack: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
-          webhook: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
-        propertyName: kind
-      oneOf:
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
-      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig:
-      properties:
-        kind:
-          enum:
-          - email
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelEmailConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfig:
-      properties:
-        kind:
-          enum:
-          - googlechat
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelGoogleChatConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig:
-      properties:
-        kind:
-          enum:
-          - incidentio
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelIncidentIOConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig:
-      properties:
-        kind:
-          enum:
-          - jsmops
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelJSMOpsConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig:
-      properties:
-        kind:
-          enum:
-          - jira
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelJiraConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfig:
-      properties:
-        kind:
-          enum:
-          - msteams
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelMSTeamsConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig:
-      properties:
-        kind:
-          enum:
-          - opsgenie
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelOpsgenieConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig:
-      properties:
-        kind:
-          enum:
-          - pagerduty
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelPagerdutyConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig:
-      properties:
-        kind:
-          enum:
-          - slack
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelSlackConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig:
-      properties:
-        kind:
-          enum:
-          - webhook
-          type: string
-        spec:
-          $ref: '#/components/schemas/AlertmanagertypesChannelWebhookConfig'
-      required:
-      - kind
-      - spec
-      type: object
-    AlertmanagertypesChannelEmailConfig:
-      properties:
-        headers:
-          additionalProperties:
-            type: string
-          type: object
-        html:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        to:
-          type: string
-      required:
-      - to
-      type: object
-    AlertmanagertypesChannelGoogleChatConfig:
-      properties:
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-        webhookUrl:
-          type: string
-      required:
-      - webhookUrl
-      type: object
-    AlertmanagertypesChannelIncidentIOConfig:
-      properties:
-        description:
-          type: string
-        metadata:
-          additionalProperties:
-            type: string
-          type: object
-        sendResolved:
-          nullable: true
-          type: boolean
-        title:
-          type: string
-        token:
-          type: string
-        url:
-          type: string
-      required:
-      - url
-      - token
-      type: object
-    AlertmanagertypesChannelJSMOpsConfig:
-      properties:
-        apiKey:
-          type: string
-        description:
-          type: string
-        message:
-          type: string
-        priority:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        tags:
-          type: string
-      required:
-      - apiKey
-      type: object
-    AlertmanagertypesChannelJiraConfig:
-      properties:
-        apiToken:
-          type: string
-        customFields:
-          additionalProperties: {}
-          type: object
-        description:
-          type: string
-        email:
-          type: string
-        issueType:
-          type: string
-        labels:
-          items:
-            type: string
-          type: array
-        priority:
-          type: string
-        project:
-          type: string
-        reopenDuration:
-          type: string
-        reopenTransition:
-          type: string
-        resolveTransition:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        site:
-          type: string
-        summary:
-          type: string
-        wontFixResolution:
-          type: string
-      required:
-      - site
-      - project
-      - issueType
-      - email
-      - apiToken
-      type: object
-    AlertmanagertypesChannelKind:
-      enum:
-      - slack
-      - email
-      - webhook
-      - pagerduty
-      - opsgenie
-      - msteams
-      - googlechat
-      - jira
-      - jsmops
-      - incidentio
-      type: string
-    AlertmanagertypesChannelMSTeamsConfig:
-      properties:
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-        webhookUrl:
-          type: string
-      required:
-      - webhookUrl
-      type: object
-    AlertmanagertypesChannelOpsgenieConfig:
-      properties:
-        apiKey:
-          type: string
-        apiUrl:
-          type: string
-        description:
-          type: string
-        details:
-          additionalProperties:
-            type: string
-          type: object
-        message:
-          type: string
-        priority:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        source:
-          type: string
-      required:
-      - apiKey
-      type: object
-    AlertmanagertypesChannelPagerdutyConfig:
-      properties:
-        class:
-          type: string
-        client:
-          type: string
-        clientUrl:
-          type: string
-        component:
-          type: string
-        description:
-          type: string
-        details:
-          additionalProperties:
-            type: string
-          type: object
-        group:
-          type: string
-        routingKey:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        severity:
-          type: string
-        source:
-          type: string
-        url:
-          type: string
-      required:
-      - routingKey
-      type: object
-    AlertmanagertypesChannelSlackConfig:
-      properties:
-        apiUrl:
-          type: string
-        channel:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        text:
-          type: string
-        title:
-          type: string
-      required:
-      - apiUrl
-      type: object
-    AlertmanagertypesChannelWebhookConfig:
-      properties:
-        bearerToken:
-          type: string
-        password:
-          type: string
-        sendResolved:
-          nullable: true
-          type: boolean
-        url:
-          type: string
-        username:
-          type: string
-      required:
-      - url
-      type: object
     AlertmanagertypesDeprecatedGettableAlert:
       properties:
         annotations:
@@ -427,30 +54,6 @@ components:
       - rule
       - policy
       type: string
-    AlertmanagertypesGettableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-        createdAt:
-          format: date-time
-          type: string
-        displayName:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - name
-      - displayName
-      - config
-      - id
-      - createdAt
-      - updatedAt
-      type: object
     AlertmanagertypesGettableRoutePolicy:
       properties:
         channels:
@@ -753,19 +356,6 @@ components:
       required:
       - name
       type: object
-    AlertmanagertypesPostableNotificationChannel:
-      properties:
-        config:
-          $ref: '#/components/schemas/AlertmanagertypesChannelConfig'
-        displayName:
-          type: string
-        generateName:
-          type: boolean
-        name:
-          type: string
-      required:
-      - config
-      type: object
     AlertmanagertypesPostablePlannedMaintenance:
       properties:
         alertIds:
@@ -9627,116 +9217,6 @@ components:
       required:
       - references
       type: object
-    SubscriptiontypesGettableSubscription:
-      properties:
-        redirectURL:
-          type: string
-      required:
-      - redirectURL
-      type: object
-    SubscriptiontypesGettableSubscriptionUsage:
-      properties:
-        billingPeriodEnd:
-          format: int64
-          type: integer
-        billingPeriodStart:
-          format: int64
-          type: integer
-        details:
-          $ref: '#/components/schemas/SubscriptiontypesSubscriptionUsageDetails'
-        discount:
-          format: double
-          type: number
-        subscriptionStatus:
-          type: string
-      type: object
-    SubscriptiontypesPostableSubscription:
-      properties:
-        url:
-          type: string
-      required:
-      - url
-      type: object
-    SubscriptiontypesSubscriptionUsageBreakdown:
-      properties:
-        dayWiseBreakdown:
-          $ref: '#/components/schemas/SubscriptiontypesSubscriptionUsageDayWiseBreakdown'
-        tiers:
-          items:
-            $ref: '#/components/schemas/SubscriptiontypesSubscriptionUsageTier'
-          nullable: true
-          type: array
-        type:
-          type: string
-        unit:
-          type: string
-      type: object
-    SubscriptiontypesSubscriptionUsageDayWiseBreakdown:
-      properties:
-        breakdown:
-          items:
-            $ref: '#/components/schemas/SubscriptiontypesSubscriptionUsageDayWiseData'
-          nullable: true
-          type: array
-        type:
-          type: string
-      type: object
-    SubscriptiontypesSubscriptionUsageDayWiseData:
-      properties:
-        count:
-          format: double
-          type: number
-        quantity:
-          format: double
-          type: number
-        size:
-          format: double
-          type: number
-        timestamp:
-          format: int64
-          type: integer
-        total:
-          format: double
-          type: number
-        unitPrice:
-          format: double
-          type: number
-      type: object
-    SubscriptiontypesSubscriptionUsageDetails:
-      properties:
-        baseFee:
-          format: double
-          type: number
-        billTotal:
-          format: double
-          type: number
-        breakdown:
-          items:
-            $ref: '#/components/schemas/SubscriptiontypesSubscriptionUsageBreakdown'
-          nullable: true
-          type: array
-        total:
-          format: double
-          type: number
-      type: object
-    SubscriptiontypesSubscriptionUsageTier:
-      properties:
-        quantity:
-          format: double
-          type: number
-        tierCost:
-          format: double
-          type: number
-        tierEnd:
-          format: int64
-          type: integer
-        tierStart:
-          format: int64
-          type: integer
-        unitPrice:
-          format: double
-          type: number
-      type: object
     TagtypesGettableTag:
       properties:
         key:
@@ -14961,197 +14441,6 @@ paths:
       summary: Get stats
       tags:
       - stats
-  /api/v1/subscriptions:
-    get:
-      deprecated: false
-      description: This endpoint gets the organization's subscription along with its
-        usage and billing details.
-      operationId: GetSubscription
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SubscriptiontypesGettableSubscriptionUsage'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - subscription:read
-      - tokenizer:
-        - subscription:read
-      summary: Get the subscription.
-      tags:
-      - subscriptions
-    post:
-      deprecated: false
-      description: This endpoint creates a subscription for the organization.
-      operationId: CreateSubscription
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/SubscriptiontypesPostableSubscription'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SubscriptiontypesGettableSubscription'
-                  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
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - subscription:create
-      - tokenizer:
-        - subscription:create
-      summary: Create a subscription.
-      tags:
-      - subscriptions
-    put:
-      deprecated: false
-      description: This endpoint updates the organization's subscription.
-      operationId: UpdateSubscription
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/SubscriptiontypesPostableSubscription'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SubscriptiontypesGettableSubscription'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - subscription:list
-        - subscription:update
-      - tokenizer:
-        - subscription:list
-        - subscription:update
-      summary: Update the subscription.
-      tags:
-      - subscriptions
   /api/v1/testChannel:
     post:
       deprecated: true
@@ -19719,69 +19008,6 @@ paths:
       summary: Get metrics treemap
       tags:
       - metrics
-  /api/v2/notification_channels:
-    post:
-      deprecated: false
-      description: This endpoint creates a notification channel
-      operationId: CreateNotificationChannel
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AlertmanagertypesPostableNotificationChannel'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AlertmanagertypesGettableNotificationChannel'
-                  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
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - notification-channel:create
-      - tokenizer:
-        - notification-channel:create
-      summary: Create notification channel
-      tags:
-      - channels
   /api/v2/orgs/me:
     get:
       deprecated: false

ee/licensing/httplicensing/api.go

@@ -0,0 +1,85 @@
+package httplicensing
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/licensetypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type licensingAPI struct {
+	licensing licensing.Licensing
+}
+
+func NewLicensingAPI(licensing licensing.Licensing) licensing.API {
+	return &licensingAPI{licensing: licensing}
+}
+
+func (api *licensingAPI) Checkout(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
+		return
+	}
+
+	req := new(licensetypes.PostableSubscription)
+	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	gettableSubscription, err := api.licensing.Checkout(ctx, orgID, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusCreated, gettableSubscription)
+}
+
+func (api *licensingAPI) Portal(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
+		return
+	}
+
+	req := new(licensetypes.PostableSubscription)
+	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	gettableSubscription, err := api.licensing.Portal(ctx, orgID, req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusCreated, gettableSubscription)
+}

ee/licensing/httplicensing/provider.go

@@ -2,9 +2,12 @@ package httplicensing
 
 import (
 	"context"
+	"encoding/json"
 	"log/slog"
 	"time"
 
+	"github.com/tidwall/gjson"
+
 	"github.com/SigNoz/signoz/ee/licensing/licensingstore/sqllicensingstore"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -225,6 +228,47 @@ func (provider *provider) Refresh(ctx context.Context, organizationID valuer.UUI
 	return nil
 }
 
+func (provider *provider) Checkout(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
+	activeLicense, err := provider.GetActive(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	body, err := json.Marshal(postableSubscription)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal checkout payload")
+	}
+
+	response, err := provider.zeus.GetCheckoutURL(ctx, activeLicense.Key, body)
+	if err != nil {
+		if errors.Ast(err, errors.TypeAlreadyExists) {
+			return nil, errors.WithAdditionalf(err, "checkout has already been completed for this account. Please click 'Refresh Status' to sync your subscription")
+		}
+		return nil, err
+	}
+
+	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
+}
+
+func (provider *provider) Portal(ctx context.Context, organizationID valuer.UUID, postableSubscription *licensetypes.PostableSubscription) (*licensetypes.GettableSubscription, error) {
+	activeLicense, err := provider.GetActive(ctx, organizationID)
+	if err != nil {
+		return nil, err
+	}
+
+	body, err := json.Marshal(postableSubscription)
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal portal payload")
+	}
+
+	response, err := provider.zeus.GetPortalURL(ctx, activeLicense.Key, body)
+	if err != nil {
+		return nil, err
+	}
+
+	return &licensetypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
+}
+
 func (provider *provider) GetFeatureFlags(ctx context.Context, organizationID valuer.UUID) ([]*licensetypes.Feature, error) {
 	license, err := provider.GetActive(ctx, organizationID)
 	if err != nil {

ee/query-service/app/api/api.go

@@ -4,6 +4,7 @@ import (
 	"net/http"
 	"time"
 
+	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
@@ -41,6 +42,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		IntegrationsController:        opts.IntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
+		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		Signoz:                        signoz,
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
 	}, config)
@@ -70,6 +72,10 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
 
+	router.HandleFunc("/api/v1/checkout", am.AdminAccess(ah.LicensingAPI.Checkout)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/portal", am.AdminAccess(ah.LicensingAPI.Portal)).Methods(http.MethodPost)
+
 	// v4
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 

ee/query-service/app/api/license.go

@@ -0,0 +1,76 @@
+package api
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+
+	"github.com/SigNoz/signoz/ee/query-service/model"
+)
+
+type DayWiseBreakdown struct {
+	Type      string        `json:"type"`
+	Breakdown []DayWiseData `json:"breakdown"`
+}
+
+type DayWiseData struct {
+	Timestamp int64   `json:"timestamp"`
+	Count     float64 `json:"count"`
+	Size      float64 `json:"size"`
+	UnitPrice float64 `json:"unitPrice"`
+	Quantity  float64 `json:"quantity"`
+	Total     float64 `json:"total"`
+}
+
+type tierBreakdown struct {
+	UnitPrice float64 `json:"unitPrice"`
+	Quantity  float64 `json:"quantity"`
+	TierStart int64   `json:"tierStart"`
+	TierEnd   int64   `json:"tierEnd"`
+	TierCost  float64 `json:"tierCost"`
+}
+
+type usageResponse struct {
+	Type             string           `json:"type"`
+	Unit             string           `json:"unit"`
+	Tiers            []tierBreakdown  `json:"tiers"`
+	DayWiseBreakdown DayWiseBreakdown `json:"dayWiseBreakdown"`
+}
+
+type details struct {
+	Total     float64         `json:"total"`
+	Breakdown []usageResponse `json:"breakdown"`
+	BaseFee   float64         `json:"baseFee"`
+	BillTotal float64         `json:"billTotal"`
+}
+
+type billingData struct {
+	BillingPeriodStart int64   `json:"billingPeriodStart"`
+	BillingPeriodEnd   int64   `json:"billingPeriodEnd"`
+	Details            details `json:"details"`
+	Discount           float64 `json:"discount"`
+	SubscriptionStatus string  `json:"subscriptionStatus"`
+}
+
+func (ah *APIHandler) getBilling(w http.ResponseWriter, r *http.Request) {
+	licenseKey := r.URL.Query().Get("licenseKey")
+
+	if licenseKey == "" {
+		RespondError(w, model.BadRequest(fmt.Errorf("license key is required")), nil)
+		return
+	}
+
+	data, err := ah.Signoz.Zeus.GetMeters(r.Context(), licenseKey)
+	if err != nil {
+		RespondError(w, model.InternalError(err), nil)
+		return
+	}
+
+	var billing billingData
+	if err := json.Unmarshal(data, &billing); err != nil {
+		RespondError(w, model.InternalError(err), nil)
+		return
+	}
+
+	ah.Respond(w, billing)
+}

ee/query-service/app/server.go

@@ -184,6 +184,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
+	apiHandler.RegisterWebSocketPaths(r, am)
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.RegisterTraceFunnelsRoutes(r, am)
@@ -196,7 +197,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
 	})
 
 	handler := c.Handler(r)

ee/subscription/httpsubscription/provider.go

@@ -1,95 +0,0 @@
-package httpsubscription
-
-import (
-	"context"
-	"encoding/json"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/licensing"
-	"github.com/SigNoz/signoz/pkg/subscription"
-	"github.com/SigNoz/signoz/pkg/types/subscriptiontypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/SigNoz/signoz/pkg/zeus"
-	"github.com/tidwall/gjson"
-)
-
-const upstreamTimeout = 10 * time.Second
-
-type provider struct {
-	zeus      zeus.Zeus
-	licensing licensing.Licensing
-}
-
-func New(zeus zeus.Zeus, licensing licensing.Licensing) subscription.Subscription {
-	return &provider{
-		zeus:      zeus,
-		licensing: licensing,
-	}
-}
-
-func (provider *provider) Create(ctx context.Context, organizationID valuer.UUID, postableSubscription *subscriptiontypes.PostableSubscription) (*subscriptiontypes.GettableSubscription, error) {
-	ctx, cancel := context.WithTimeout(ctx, upstreamTimeout)
-	defer cancel()
-
-	license, err := provider.licensing.GetActive(ctx, organizationID)
-	if err != nil {
-		return nil, err
-	}
-
-	body, err := json.Marshal(postableSubscription)
-	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal subscription payload")
-	}
-
-	response, err := provider.zeus.GetCheckoutURL(ctx, license.Key, body)
-	if err != nil {
-		if errors.Ast(err, errors.TypeAlreadyExists) {
-			return nil, errors.WithAdditionalf(err, "checkout has already been completed for this account. Please click 'Refresh Status' to sync your subscription")
-		}
-		return nil, err
-	}
-
-	return &subscriptiontypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
-}
-
-func (provider *provider) Update(ctx context.Context, organizationID valuer.UUID, postableSubscription *subscriptiontypes.PostableSubscription) (*subscriptiontypes.GettableSubscription, error) {
-	ctx, cancel := context.WithTimeout(ctx, upstreamTimeout)
-	defer cancel()
-
-	license, err := provider.licensing.GetActive(ctx, organizationID)
-	if err != nil {
-		return nil, err
-	}
-
-	body, err := json.Marshal(postableSubscription)
-	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to marshal subscription payload")
-	}
-
-	response, err := provider.zeus.GetPortalURL(ctx, license.Key, body)
-	if err != nil {
-		return nil, err
-	}
-
-	return &subscriptiontypes.GettableSubscription{RedirectURL: gjson.GetBytes(response, "url").String()}, nil
-}
-
-func (provider *provider) Get(ctx context.Context, organizationID valuer.UUID) (*subscriptiontypes.GettableSubscriptionUsage, error) {
-	license, err := provider.licensing.GetActive(ctx, organizationID)
-	if err != nil {
-		return nil, err
-	}
-
-	data, err := provider.zeus.GetMeters(ctx, license.Key)
-	if err != nil {
-		return nil, err
-	}
-
-	usage, err := subscriptiontypes.NewGettableSubscriptionUsage(data)
-	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInternal, zeus.ErrCodeResponseMalformed, "failed to unmarshal subscription usage")
-	}
-
-	return usage, nil
-}

frontend/.gitignore

@@ -28,4 +28,11 @@ 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
+
+# Storybook screenshot sweeps (scripts/story-shots.mjs)
+/.story-shots/

frontend/.oxlintrc.json

@@ -323,10 +323,9 @@
             "name": "react",
             "importNames": [
               "createContext",
-              "useContext",
-              "useSyncExternalStore"
+              "useContext"
             ],
-            "message": "[State mgmt] React Context and hand-rolled external stores are deprecated. Migrate shared state to Zustand."
+            "message": "[State mgmt] React Context is deprecated. Migrate shared state to Zustand."
           },
           {
             "name": "immer",
@@ -566,16 +565,27 @@
       }
     },
     {
-      // Root dashboard pages own the fetch lifecycle; useDashboardFetchRequired wraps it.
+      // Root V2 pages own the dashboard fetch lifecycle; useDashboardFetchRequired wraps it.
       // Everywhere else must use useDashboardFetchRequired().
       "files": [
-        "src/pages/DashboardPage/DashboardPage.tsx",
-        "src/pages/DashboardPage/PanelEditorPage/PanelEditorPage.tsx",
-        "src/pages/DashboardPage/DashboardContainer/hooks/useDashboardFetchRequired.ts"
+        "src/pages/DashboardPageV2/DashboardPageV2.tsx",
+        "src/pages/DashboardPageV2/PanelEditorPage/PanelEditorPage.tsx",
+        "src/pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired.ts"
       ],
       "rules": {
         "signoz/no-dashboard-fetch-outside-root": "off"
       }
+    },
+    {
+      // Dev-tooling CLIs: stdout is their output, and they carry ported pixel/heap
+      // algorithms that read worse when split up.
+      "files": [
+        "scripts/**"
+      ],
+      "rules": {
+        "no-console": "off",
+        "sonarjs/cognitive-complexity": "off"
+      }
     }
   ]
 }

frontend/.storybook/main.ts

@@ -0,0 +1,89 @@
+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: __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/**/*.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'],
+	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,
+			plugins,
+			resolve: {
+				...viteConfig.resolve,
+				alias: [...mockAliases, ...normalizedAlias],
+			},
+		};
+	},
+};
+
+export default config;

frontend/.storybook/modes.ts

@@ -0,0 +1,10 @@
+/**
+ * Chromatic modes: one snapshot per entry, per story. The globals in a mode are
+ * Storybook's own, so `theme` is the toolbar's theme and the story renders the
+ * way it does locally. The width matches `scripts/story-shots.mjs` (`--width`),
+ * so a cloud snapshot and a local shot frame the same page.
+ */
+export const allModes = {
+	dark: { theme: 'dark', viewport: { width: 1680, height: 1200 } },
+	light: { theme: 'light', viewport: { width: 1680, height: 1200 } },
+} as const;

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,133 @@
+import type { Preview } from '@storybook/react-vite';
+import type { SetupWorker } from 'msw';
+import { setupWorker } from 'msw';
+
+import { settleForCapture } from '../src/storybook/visual/settleForCapture';
+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 { allModes } from './modes';
+
+import '../src/ReactI18';
+
+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 },
+		// One cloud snapshot per theme, for every story. A mode carries Storybook
+		// globals, so `theme` here is the same toolbar global the app reads out of
+		// localStorage. Widths are Chromatic's only real dimension, as they are
+		// locally: the app shell sizes itself to the viewport, so the height is the
+		// one it is given.
+		chromatic: { modes: allModes },
+	},
+	globalTypes: {
+		theme: {
+			description: 'SigNoz color scheme',
+			toolbar: {
+				title: 'Theme',
+				icon: 'paintbrush',
+				items: [
+					{ value: 'dark', title: 'Dark' },
+					{ value: 'light', title: 'Light' },
+				],
+				dynamicTitle: true,
+			},
+		},
+		motion: {
+			description:
+				'Park every animation on its last frame once the story has settled. Still is what both capture stacks shoot; Live is for watching a transition.',
+			toolbar: {
+				title: 'Motion',
+				icon: 'play',
+				items: [
+					{ value: 'still', title: 'Still' },
+					{ value: 'live', title: 'Live' },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	initialGlobals: { theme: 'dark', motion: 'still' },
+	// 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();
+	},
+	// After `play`, which is the moment both capture stacks shoot at.
+	afterEach: settleForCapture,
+};
+
+export default preview;

frontend/.storybook/public/mockServiceWorker.js

@@ -0,0 +1,303 @@
+/* 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') || ''
+
+  // Bypass server-sent events.
+  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/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",
@@ -158,6 +160,9 @@
     "@commitlint/config-conventional": "20.4.4",
     "@jest/globals": "30.4.1",
     "@jest/types": "30.2.0",
+    "@storybook/addon-a11y": "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 +208,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",

frontend/scripts/story-shots-caption.mjs

@@ -0,0 +1,167 @@
+import { spawnSync } from 'node:child_process';
+
+/**
+ * The caption band both story-shots.mjs and story-shots-diff.mjs stamp on their
+ * output, and the ImageMagick plumbing under it. A shot records the band's
+ * height in `shots.json` so the diff can crop it back off before comparing:
+ * otherwise two runs whose captions differ would report the caption as a change.
+ */
+export const CONFIG_KEYS = [
+	'args',
+	'clock',
+	'width',
+	'height',
+	'grow',
+	'motion',
+	'settle',
+	'ignore',
+];
+
+let tools;
+
+const detect = () =>
+	(tools ??= {
+		seven: spawnSync('magick', ['-version']).status === 0,
+		six: spawnSync('convert', ['-version']).status === 0,
+	});
+
+export const hasMagick = () => {
+	const { seven, six } = detect();
+	return seven || six;
+};
+
+export const requireMagick = () => {
+	if (hasMagick()) {
+		return;
+	}
+	console.error(
+		'ImageMagick not found. Install it (brew install imagemagick, apt install imagemagick).',
+	);
+	process.exit(1);
+};
+
+export const magick = (args, input) => {
+	// ImageMagick 6 has no `magick`: its tools are separate binaries.
+	const [command, ...rest] = detect().seven
+		? ['magick', ...args]
+		: ['identify', 'montage'].includes(args[0])
+			? args
+			: ['convert', ...args];
+	const result = spawnSync(command, rest, {
+		input,
+		maxBuffer: 1024 * 1024 * 1024,
+	});
+	if (result.status !== 0) {
+		throw new Error(`${command} ${rest.join(' ')}: ${result.stderr}`);
+	}
+	return result.stdout;
+};
+
+/**
+ * ImageMagick's built-in default is a serif that reads as a book, not as a
+ * screenshot label, so the band asks for what is installed: a sans for the
+ * heading, a mono for the lines that carry ids, args and numbers. An
+ * unrecognised name is fatal to `convert`, hence the check against the list it
+ * reports; a machine with none of them keeps the default.
+ */
+const FONTS = {
+	heading: [
+		'Helvetica-Bold',
+		'DejaVu-Sans-Bold',
+		'Liberation-Sans-Bold',
+		'Arial-Bold',
+		'Noto-Sans-Bold',
+		'DejaVu-Sans',
+		'Liberation-Sans',
+	],
+	body: [
+		'Menlo',
+		'DejaVu-Sans-Mono',
+		'Liberation-Mono',
+		'JetBrainsMono-NF-Regular',
+		'Courier',
+	],
+};
+
+let installed;
+
+const fontArgs = (role) => {
+	installed ??= new Set(
+		[
+			...magick(['-list', 'font'])
+				.toString()
+				.matchAll(/^\s*Font:\s*(\S+)/gm),
+		].map(([, name]) => name),
+	);
+	const font = FONTS[role].find((name) => installed.has(name));
+	return font ? ['-font', font] : [];
+};
+
+/** Readable at fit-to-width, whatever the image is. */
+export const pointsize = (width) =>
+	Math.min(Math.max(Math.round(width / 45), 24), 140);
+
+// `label:` expands ImageMagick's own escapes and reads a file when the text
+// starts with @, so story names and arg values go through neither.
+export const bodyFont = () => fontArgs('body');
+
+export const literal = (text) => text.replaceAll('%', '%%').replace(/^@/, ' @');
+
+/** The gutter is the opposite of the theme, so the band keeps an edge. */
+export const palette = (theme) =>
+	theme === 'light'
+		? { background: '#101014', foreground: '#f4f4f5' }
+		: { background: '#f4f4f5', foreground: '#101014' };
+
+export const settingsLine = (config, keys = CONFIG_KEYS) =>
+	keys
+		.filter((key) => config?.[key])
+		.map((key) => `${key}:${config[key]}`)
+		.join('  ');
+
+const heightOf = (file) => Number(magick(['identify', '-format', '%h', file]));
+
+/**
+ * Writes `from` to `to` with `lines` above it, and returns how many rows that
+ * added — which is what a reader has to crop off to get the original back, so
+ * the band must never change the width. Each line is a `caption:` at the
+ * image's own width, wrapping instead of widening the canvas: a run whose
+ * caption is longer must still produce a shot the next run's shot pairs with.
+ * Type size follows the width, since a three-tile montage of 1680px shots is
+ * over 5000px wide and is read at fit-to-width.
+ */
+export const stamp = ({ lines, from, to, theme }) => {
+	const { background, foreground } = palette(theme);
+	const width = Number(magick(['identify', '-format', '%w', from]));
+	const heading = pointsize(width);
+	const before = heightOf(from);
+	const spacer = [
+		'-size',
+		`${width}x${Math.round(heading * 0.4)}`,
+		`xc:${background}`,
+	];
+
+	magick([
+		'-background',
+		background,
+		'-fill',
+		foreground,
+		'-gravity',
+		'center',
+		...spacer,
+		...lines.flatMap((line, index) => [
+			...fontArgs(index ? 'body' : 'heading'),
+			'-size',
+			`${width}x`,
+			'-pointsize',
+			String(index ? Math.round(heading * 0.62) : heading),
+			`caption:${literal(line)}`,
+		]),
+		...spacer,
+		from,
+		'-append',
+		to,
+	]);
+
+	return heightOf(to) - before;
+};

frontend/scripts/story-shots-diff.mjs

@@ -0,0 +1,460 @@
+#!/usr/bin/env node
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import { parseArgs } from 'node:util';
+import path from 'node:path';
+import os from 'node:os';
+
+import {
+	bodyFont,
+	CONFIG_KEYS,
+	literal,
+	magick,
+	palette,
+	pointsize,
+	requireMagick,
+	settingsLine,
+	stamp,
+} from './story-shots-caption.mjs';
+
+/**
+ * Pairs the PNGs of two story-shots.mjs runs by relative path and reports what
+ * moved, per pair, largest first.
+ *
+ * The comparison is Chromatic's: a pixel counts as changed when its YIQ
+ * distance from the baseline pixel is over `threshold` of the largest distance
+ * two colours can have, and pixels that are only antialiasing around an
+ * otherwise identical edge do not count. `threshold` is their `diffThreshold`
+ * and its default is theirs too.
+ */
+const MAX_YIQ_DELTA = 35_215;
+
+const { values: opts, positionals } = parseArgs({
+	allowPositionals: true,
+	options: {
+		mode: { type: 'string', default: 'green' },
+		threshold: { type: 'string', default: '0.063' },
+		'include-aa': { type: 'boolean', default: false },
+		tint: { type: 'string', default: '' },
+		'no-caption': { type: 'boolean', default: false },
+		help: { type: 'boolean', short: 'h', default: false },
+	},
+});
+
+const [baseDir, afterDir, outArg] = positionals;
+const MODES = new Set(['green', 'green-parallel', 'red', 'red-parallel']);
+
+if (opts.help || !baseDir || !afterDir || !MODES.has(opts.mode)) {
+	console.log(`usage: node scripts/story-shots-diff.mjs <baseline-dir> <after-dir> [diff-dir]
+
+  --mode green           the after shot, changed pixels painted over it (default)
+  --mode green-parallel  previous | current | green diff, side by side and labelled
+  --mode red             the after shot faded out, changed pixels painted red
+  --mode red-parallel    previous | current | red diff, side by side and labelled
+  --threshold <0..1>     YIQ distance a pixel must move to count (default 0.063)
+  --include-aa           count antialiasing changes too (default: ignore them)
+  --tint <#rrggbb>       override the mode's highlight colour
+  --no-caption           do not stamp the story and the run settings on top
+
+Prints "<changed pixels>  <relative path>", largest first. Needs ImageMagick.`);
+	process.exit(opts.help ? 0 : 1);
+}
+
+const outDir = outArg ?? path.join(path.dirname(baseDir), 'diff');
+const threshold = Number(opts.threshold);
+const maxDelta = MAX_YIQ_DELTA * threshold * threshold;
+const highlight = hexToRgb(
+	opts.tint || (opts.mode.startsWith('green') ? '#00e05a' : '#ff003a'),
+);
+
+function hexToRgb(hex) {
+	const value = Number.parseInt(hex.replace('#', ''), 16);
+	return [(value >> 16) & 255, (value >> 8) & 255, value & 255];
+}
+
+requireMagick();
+
+/**
+ * `top` rows are dropped: story-shots.mjs stamps a caption on its shots and
+ * records how tall it is, and a caption is not part of what the two runs are
+ * being compared on.
+ */
+const readRgba = (file, top = 0) => {
+	const [width, height] = magick(['identify', '-format', '%w %h', file])
+		.toString()
+		.split(' ')
+		.map(Number);
+	const data = magick([file, '-depth', '8', 'RGBA:-']);
+	return top > 0 && top < height
+		? { width, height: height - top, data: data.subarray(top * width * 4) }
+		: { width, height, data };
+};
+
+const writeRgba = ({ width, height, data }, file) =>
+	writeFile(
+		file,
+		magick(
+			['-depth', '8', '-size', `${width}x${height}`, 'RGBA:-', 'png:-'],
+			data,
+		),
+	);
+
+/* The pixelmatch colour maths, which is what Chromatic's threshold is scaled to. */
+const y = (r, g, b) => r * 0.29889531 + g * 0.58662247 + b * 0.11448223;
+const i = (r, g, b) => r * 0.59597799 - g * 0.2741761 - b * 0.32180189;
+const q = (r, g, b) => r * 0.21147017 - g * 0.52261711 + b * 0.31114694;
+
+/** Squared YIQ distance, signed by which pixel is brighter. */
+const colorDelta = (a, b, posA, posB, yOnly = false) => {
+	let r1 = a[posA];
+	let g1 = a[posA + 1];
+	let b1 = a[posA + 2];
+	const a1 = a[posA + 3];
+	let r2 = b[posB];
+	let g2 = b[posB + 1];
+	let b2 = b[posB + 2];
+	const a2 = b[posB + 3];
+
+	if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) {
+		return 0;
+	}
+
+	// Anything translucent is composited over the same mid grey in both images,
+	// so a difference in alpha alone still registers.
+	if (a1 < 255) {
+		const alpha = a1 / 255;
+		r1 = r1 * alpha + 255 * (1 - alpha) * 0.5;
+		g1 = g1 * alpha + 255 * (1 - alpha) * 0.5;
+		b1 = b1 * alpha + 255 * (1 - alpha) * 0.5;
+	}
+	if (a2 < 255) {
+		const alpha = a2 / 255;
+		r2 = r2 * alpha + 255 * (1 - alpha) * 0.5;
+		g2 = g2 * alpha + 255 * (1 - alpha) * 0.5;
+		b2 = b2 * alpha + 255 * (1 - alpha) * 0.5;
+	}
+
+	const deltaY = y(r1, g1, b1) - y(r2, g2, b2);
+	if (yOnly) {
+		return deltaY;
+	}
+
+	const deltaI = i(r1, g1, b1) - i(r2, g2, b2);
+	const deltaQ = q(r1, g1, b1) - q(r2, g2, b2);
+	return (
+		0.5053 * deltaY * deltaY + 0.299 * deltaI * deltaI + 0.1957 * deltaQ * deltaQ
+	);
+};
+
+/**
+ * True when the pixel sits on an edge that is drawn one subpixel over rather
+ * than moved: it is the darkest or lightest of its neighbours in one image, and
+ * the other image has a pixel around there doing the same job.
+ */
+const antialiased = (a, x1, y1, width, height, b) => {
+	const x0 = Math.max(x1 - 1, 0);
+	const y0 = Math.max(y1 - 1, 0);
+	const x2 = Math.min(x1 + 1, width - 1);
+	const y2 = Math.min(y1 + 1, height - 1);
+	const pos = (y1 * width + x1) * 4;
+	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+	let min = 0;
+	let max = 0;
+	let minX = 0;
+	let minY = 0;
+	let maxX = 0;
+	let maxY = 0;
+
+	for (let x = x0; x <= x2; x += 1) {
+		for (let yy = y0; yy <= y2; yy += 1) {
+			if (x === x1 && yy === y1) {
+				continue;
+			}
+
+			const delta = colorDelta(a, a, pos, (yy * width + x) * 4, true);
+			if (delta === 0) {
+				zeroes += 1;
+				if (zeroes > 2) {
+					return false;
+				}
+			} else if (delta < min) {
+				min = delta;
+				minX = x;
+				minY = yy;
+			} else if (delta > max) {
+				max = delta;
+				maxX = x;
+				maxY = yy;
+			}
+		}
+	}
+
+	if (min === 0 || max === 0) {
+		return false;
+	}
+
+	return (
+		(hasManySiblings(a, minX, minY, width, height) &&
+			hasManySiblings(b, minX, minY, width, height)) ||
+		(hasManySiblings(a, maxX, maxY, width, height) &&
+			hasManySiblings(b, maxX, maxY, width, height))
+	);
+};
+
+/** Whether the pixel has at least three identical neighbours. */
+const hasManySiblings = (img, x1, y1, width, height) => {
+	const x0 = Math.max(x1 - 1, 0);
+	const y0 = Math.max(y1 - 1, 0);
+	const x2 = Math.min(x1 + 1, width - 1);
+	const y2 = Math.min(y1 + 1, height - 1);
+	const pos = (y1 * width + x1) * 4;
+	let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+
+	for (let x = x0; x <= x2; x += 1) {
+		for (let yy = y0; yy <= y2; yy += 1) {
+			if (x === x1 && yy === y1) {
+				continue;
+			}
+
+			const other = (yy * width + x) * 4;
+			if (
+				img[pos] === img[other] &&
+				img[pos + 1] === img[other + 1] &&
+				img[pos + 2] === img[other + 2] &&
+				img[pos + 3] === img[other + 3]
+			) {
+				zeroes += 1;
+				if (zeroes > 2) {
+					return true;
+				}
+			}
+		}
+	}
+
+	return false;
+};
+
+/**
+ * The changed pixels of the pair, painted over the after shot. The `red` modes
+ * fade the shot out first, the way a pixelmatch diff reads; the `green` ones
+ * leave it alone, the way Chromatic's does.
+ */
+const diffPair = (base, after, mode) => {
+	const width = Math.min(base.width, after.width);
+	const height = Math.min(base.height, after.height);
+	const out = Buffer.from(after.data);
+	const fade = !mode.startsWith('green');
+	let changed = 0;
+
+	if (fade) {
+		for (let pos = 0; pos < out.length; pos += 4) {
+			const grey = y(out[pos], out[pos + 1], out[pos + 2]);
+			const value = 255 + (grey - 255) * 0.1;
+			out[pos] = value;
+			out[pos + 1] = value;
+			out[pos + 2] = value;
+			out[pos + 3] = 255;
+		}
+	}
+
+	for (let row = 0; row < height; row += 1) {
+		for (let column = 0; column < width; column += 1) {
+			const basePos = (row * base.width + column) * 4;
+			const afterPos = (row * after.width + column) * 4;
+			const delta = colorDelta(base.data, after.data, basePos, afterPos);
+			if (Math.abs(delta) <= maxDelta) {
+				continue;
+			}
+			if (
+				!opts['include-aa'] &&
+				(antialiased(base.data, column, row, base.width, base.height, after.data) ||
+					antialiased(after.data, column, row, after.width, after.height, base.data))
+			) {
+				continue;
+			}
+
+			changed += 1;
+			out[afterPos] = highlight[0];
+			out[afterPos + 1] = highlight[1];
+			out[afterPos + 2] = highlight[2];
+			out[afterPos + 3] = 255;
+		}
+	}
+
+	// A shot that grew or shrank has no counterpart for the extra rows and
+	// columns, so all of them are a change.
+	const extra =
+		after.width * after.height -
+		width * height +
+		(base.width * base.height - width * height);
+
+	return {
+		data: out,
+		width: after.width,
+		height: after.height,
+		changed: changed + extra,
+	};
+};
+
+/**
+ * What each run was and how it was configured, from the `shots.json`
+ * story-shots.mjs leaves beside its output. A run shot before that existed, or
+ * a directory assembled by hand, simply gets no caption.
+ */
+const manifest = async (dir) => {
+	try {
+		return JSON.parse(await readFile(path.join(dir, 'shots.json'), 'utf8'));
+	} catch {
+		return null;
+	}
+};
+
+const [baseRun, afterRun] = await Promise.all([
+	manifest(baseDir),
+	manifest(afterDir),
+]);
+
+/** The settings the two runs disagree on: what a difference in the shots may be. */
+const changedKeys = CONFIG_KEYS.filter(
+	(key) => (baseRun?.config?.[key] ?? '') !== (afterRun?.config?.[key] ?? ''),
+);
+
+const settings = (run, keys) => settingsLine(run?.config, keys);
+
+const shotOf = (run, rel) =>
+	run?.shots?.find((shot) => shot.file === rel.split(path.sep).join('/'));
+
+const captionOf = (run, rel) => shotOf(run, rel)?.caption ?? 0;
+
+/** ImageMagick's inline crop, so a tile shows the shot without its caption. */
+const withoutCaption = (file, { width, height }, top) =>
+	top > 0 ? `${file}[${width}x${height}+0+${top}]` : file;
+
+/** Story, then the settings both runs shared. One line each, widest font first. */
+const header = (rel) => {
+	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
+	const shared = settings(
+		afterRun,
+		CONFIG_KEYS.filter((key) => !changedKeys.includes(key)),
+	);
+	return [
+		shot ? `${shot.title}/${shot.name}` : rel.replace(/\.png$/, ''),
+		[shot?.id ?? '', shot?.theme ?? '', shot?.status === 'busy' ? '(busy)' : '']
+			.filter(Boolean)
+			.join('  '),
+		shared,
+	].filter(Boolean);
+};
+
+/** A tile's own line: which side it is, and where its run differed. */
+const sideLabel = (side, run) =>
+	[side, settings(run, changedKeys)].filter(Boolean).join('   ');
+
+const captionLines = (rel, lines) =>
+	opts['no-caption'] ? [] : [...header(rel), ...lines].filter(Boolean);
+
+const pngs = async (dir, prefix = '') => {
+	const entries = await readdir(path.join(dir, prefix), { withFileTypes: true });
+	const files = [];
+	for (const entry of entries) {
+		const rel = path.join(prefix, entry.name);
+		if (entry.isDirectory()) {
+			files.push(...(await pngs(dir, rel)));
+		} else if (entry.name.endsWith('.png')) {
+			files.push(rel);
+		}
+	}
+	return files;
+};
+
+const results = [];
+await mkdir(outDir, { recursive: true });
+
+for (const rel of (await pngs(baseDir)).sort()) {
+	const afterFile = path.join(afterDir, rel);
+	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
+	let after;
+	try {
+		after = readRgba(afterFile, captionOf(afterRun, rel));
+	} catch {
+		console.error(`missing in after: ${rel}`);
+		continue;
+	}
+
+	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
+	const diff = diffPair(base, after, opts.mode);
+	const target = path.join(outDir, rel);
+	const parallel = opts.mode.endsWith('-parallel');
+	// With no tiles to label, a run's own settings go in the caption instead.
+	const caption = captionLines(
+		rel,
+		parallel || !changedKeys.length
+			? []
+			: [sideLabel('previous', baseRun), sideLabel('current', afterRun)],
+	);
+	const diffFile = path.join(os.tmpdir(), `story-shots-${process.pid}.png`);
+	const body = path.join(os.tmpdir(), `story-shots-${process.pid}-body.png`);
+
+	// The gutter is the opposite of the theme's own background, so the tiles and
+	// the caption keep an edge instead of bleeding into it.
+	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
+	const theme = shot?.theme ?? rel.split(path.sep)[0];
+	const { background, foreground } = palette(theme);
+
+	if (parallel) {
+		await writeRgba(diff, diffFile);
+		const tile = (label, file) => [
+			'(',
+			`label:${literal(label)}`,
+			file,
+			'-gravity',
+			'center',
+			'-append',
+			'-bordercolor',
+			background,
+			'-border',
+			'12',
+			')',
+		];
+		magick([
+			'-background',
+			background,
+			'-fill',
+			foreground,
+			...bodyFont(),
+			'-pointsize',
+			// The tiles end up side by side, so they are read at the montage's width.
+			String(Math.round(pointsize(after.width * 3) * 0.62)),
+			...tile(
+				sideLabel('previous', baseRun),
+				withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
+			),
+			...tile(
+				sideLabel('current', afterRun),
+				withoutCaption(afterFile, after, captionOf(afterRun, rel)),
+			),
+			...tile('diff', diffFile),
+			'-gravity',
+			'north',
+			'+append',
+			caption.length ? body : target,
+		]);
+		if (caption.length) {
+			stamp({ lines: caption, from: body, to: target, theme });
+		}
+	} else {
+		await writeRgba(diff, caption.length ? body : target);
+		if (caption.length) {
+			stamp({ lines: caption, from: body, to: target, theme });
+		}
+	}
+
+	results.push([diff.changed, rel]);
+}
+
+results
+	.sort((a, b) => b[0] - a[0])
+	.forEach(([changed, rel]) =>
+		console.log(`${String(changed).padStart(10)}  ${rel}`),
+	);
+
+console.error(`diffs in ${outDir}`);

frontend/scripts/story-shots.mjs

@@ -0,0 +1,514 @@
+#!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
+import { mkdir, rename, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { parseArgs } from 'node:util';
+import { pathToFileURL } from 'node:url';
+import path from 'node:path';
+import os from 'node:os';
+
+import {
+	CONFIG_KEYS,
+	hasMagick,
+	settingsLine,
+	stamp,
+} from './story-shots-caption.mjs';
+
+/**
+ * The wall clock every shot is taken at, passed to the preview as `storyClock`.
+ * `.storybook/preview-head.html` freezes the same instant by itself, so a
+ * Chromatic build reads the clock this run does.
+ */
+const FROZEN_CLOCK = '2026-06-15T12:00:00.000Z';
+
+const { values: opts, positionals } = parseArgs({
+	allowPositionals: true,
+	options: {
+		out: { type: 'string', short: 'o' },
+		stories: { type: 'string', multiple: true, default: [] },
+		title: { type: 'string', default: '' },
+		name: { type: 'string', default: '' },
+		theme: { type: 'string', multiple: true, default: [] },
+		args: { type: 'string', multiple: true, default: [] },
+		port: { type: 'string', default: process.env.SB_PORT ?? '6006' },
+		width: { type: 'string', default: '1680' },
+		height: { type: 'string', default: '1200' },
+		'max-height': { type: 'string', default: '8000' },
+		grow: { type: 'string', default: 'scrollers' },
+		settle: { type: 'string', default: '1500' },
+		clock: { type: 'string', default: FROZEN_CLOCK },
+		motion: { type: 'boolean', default: false },
+		ignore: { type: 'string', multiple: true, default: [] },
+		flat: { type: 'boolean', default: false },
+		'no-caption': { type: 'boolean', default: false },
+		list: { type: 'boolean', default: false },
+		help: { type: 'boolean', short: 'h', default: false },
+	},
+});
+
+const outDir = opts.out ?? positionals[0];
+const themes = opts.theme.flatMap((value) => value.split(',')).filter(Boolean);
+const storyArgs = opts.args.filter(Boolean).join(';');
+
+if (opts.help || (!outDir && !opts.list)) {
+	console.log(`usage: node scripts/story-shots.mjs <out-dir> [options]
+
+  --stories <match>   only stories whose id or title/name path contains <match>
+                      (repeatable, comma-separated; default: every story)
+  --title <prefix>    only stories whose title starts with <prefix>
+  --name <match>      only stories whose name contains <match>
+  --theme <themes>    themes to shoot, e.g. dark,light (default: story default)
+  --args <k:v;k2:v2>  arg overrides, storybook's own ?args= syntax (repeatable).
+                      A value containing a dot is dropped by storybook itself
+  --port <port>       storybook dev server port (default 6006, or $SB_PORT)
+  --width <px>        viewport width, the only fixed dimension (default 1680)
+  --height <px>       shortest the viewport may be (default 1200)
+  --max-height <px>   tallest the viewport may grow to (default 8000)
+  --grow <what>       scrollers (default) grows the viewport until the page's
+                      own scrollers fit, document only follows the document
+                      height (a no-op on any page with the app shell), none
+                      keeps --height
+  --settle <ms>       wait after the page goes quiet (default 1500)
+  --clock <iso|live>  wall clock the page reads (default ${FROZEN_CLOCK})
+  --motion            keep animations and transitions running
+  --ignore <selector> hide matching elements, on top of [data-shot-ignore]
+  --flat              write <out>/<id>.png instead of <out>/<theme>/<id>.png
+  --no-caption        do not stamp the story and the run settings on the shot
+  --list              print the matched stories and exit
+
+Screenshots land in <out-dir>/<theme>/<story-id>.png, alongside a shots.json
+recording what each shot is, how the run was configured, and how tall the
+caption on it is. story-shots-diff.mjs reads that to crop the caption off before
+comparing, so two runs never diff their own captions.
+
+Captioning needs ImageMagick; without it the shots are written bare.
+
+Playwright is looked up in tests/e2e, then in the global install; override with
+PLAYWRIGHT_MODULE. The browser is playwright's own chromium, else an installed
+Chrome; override with CHROME_PATH.`);
+	process.exit(opts.help ? 0 : 1);
+}
+
+const base = `http://localhost:${opts.port}`;
+
+// `index.json` carries raw control characters from story jsdoc, so it is read as
+// text rather than piped through anything that revalidates it.
+const index = JSON.parse(await (await fetch(`${base}/index.json`)).text());
+
+const matches = opts.stories
+	.flatMap((value) => value.split(','))
+	.filter(Boolean);
+
+const stories = Object.values(index.entries)
+	.filter((entry) => {
+		if (entry.type !== 'story') {
+			return false;
+		}
+		if (opts.title && !entry.title.startsWith(opts.title)) {
+			return false;
+		}
+		if (
+			opts.name &&
+			!entry.name.toLowerCase().includes(opts.name.toLowerCase())
+		) {
+			return false;
+		}
+		if (!matches.length) {
+			return true;
+		}
+
+		const haystack = `${entry.id} ${entry.title}/${entry.name}`.toLowerCase();
+		return matches.some((match) => haystack.includes(match.toLowerCase()));
+	})
+	.sort((a, b) => a.id.localeCompare(b.id));
+
+if (opts.list) {
+	stories.forEach((story) =>
+		console.log(`${story.id}\t${story.title}/${story.name}`),
+	);
+	console.log(`${stories.length} stories`);
+	process.exit(0);
+}
+
+if (!stories.length) {
+	console.error('no story matched');
+	process.exit(1);
+}
+
+const ignoreSelectors = opts.ignore
+	.flatMap((value) => value.split(','))
+	.map((value) => value.trim())
+	.filter(Boolean);
+
+if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
+	console.error(`--clock: not a date: ${opts.clock}`);
+	process.exit(1);
+}
+
+/**
+ * `[data-shot-ignore]` and `--ignore` hide what cannot be settled, the local
+ * half of Chromatic's `data-chromatic="ignore"`. Everything else the shot needs
+ * held still - the frozen clock, the parked animations, the lists snapped onto
+ * their bottom - is done by the preview itself, so a Chromatic build and a shot
+ * from here see the same page.
+ */
+const ignoreCss = (
+	ignore,
+) => `[data-shot-ignore], [data-chromatic='ignore']${ignore
+	.map((selector) => `, ${selector}`)
+	.join('')} {
+	visibility: hidden !important;
+}`;
+
+/**
+ * Playwright is not a frontend dependency: it lives in `tests/e2e`, or globally,
+ * or wherever `$PLAYWRIGHT_MODULE` points. `@playwright/test` re-exports
+ * `chromium`, so an e2e install alone is enough.
+ */
+const resolvePlaywright = () => {
+	const specifiers = process.env.PLAYWRIGHT_MODULE
+		? [process.env.PLAYWRIGHT_MODULE]
+		: ['playwright', '@playwright/test'];
+
+	const find = (roots) => {
+		for (const specifier of specifiers) {
+			for (const root of roots) {
+				try {
+					return createRequire(path.join(root, '-')).resolve(specifier);
+				} catch {
+					/* next candidate */
+				}
+			}
+		}
+		return null;
+	};
+
+	const local = find([
+		import.meta.dirname,
+		path.resolve(import.meta.dirname, '../../tests/e2e'),
+	]);
+	if (local) {
+		return local;
+	}
+
+	// `npm root -g` prints the global node_modules; resolution starts a level up.
+	const globalRoot = spawnSync('npm', ['root', '-g'], { encoding: 'utf8' });
+	const global =
+		globalRoot.status === 0 && find([path.dirname(globalRoot.stdout.trim())]);
+	if (global) {
+		return global;
+	}
+
+	console.error(
+		'playwright not found. Install it (pnpm -C tests/e2e install, or npm i -g playwright) or set PLAYWRIGHT_MODULE.',
+	);
+	return process.exit(1);
+};
+
+const pwModule = await import(pathToFileURL(resolvePlaywright()).href);
+const pw = pwModule.chromium ? pwModule : pwModule.default;
+
+console.log(
+	`${stories.length} stories x ${themes.length || 1} theme(s) -> ${outDir}`,
+);
+
+/**
+ * A playwright install carries no browser of its own, and the revision it wants
+ * is often not the one that was downloaded, so an installed Chrome is the
+ * fallback before giving up.
+ */
+const launch = async () => {
+	if (process.env.CHROME_PATH) {
+		return pw.chromium.launch({ executablePath: process.env.CHROME_PATH });
+	}
+	try {
+		return await pw.chromium.launch();
+	} catch (error) {
+		try {
+			return await pw.chromium.launch({ channel: 'chrome' });
+		} catch {
+			console.error(
+				`${error.message.split('\n')[0]}\nRun 'playwright install chromium' or set CHROME_PATH to a browser binary.`,
+			);
+			return process.exit(1);
+		}
+	}
+};
+
+const browser = await launch();
+
+const failures = [];
+const shots = [];
+
+const runConfig = {
+	args: storyArgs,
+	clock: opts.clock,
+	width: opts.width,
+	height: opts.height,
+	grow: opts.grow,
+	motion: opts.motion ? 'live' : 'still',
+	settle: opts.settle,
+	ignore: ignoreSelectors.join(', '),
+};
+
+const captioning = !opts['no-caption'] && hasMagick();
+
+if (!opts['no-caption'] && !captioning) {
+	console.error('ImageMagick not found: shots are written without a caption.');
+}
+
+const configLine = settingsLine(runConfig, CONFIG_KEYS);
+
+for (const theme of themes.length ? themes : [null]) {
+	const dir = opts.flat ? outDir : path.join(outDir, theme ?? 'default');
+	await mkdir(dir, { recursive: true });
+	if (theme) {
+		console.log(`\n[${theme}]`);
+	}
+
+	for (const story of stories) {
+		// A context per story: reusing one page loses the msw worker
+		// re-registration race after a few navigations and the story then dies on
+		// a missing worker.
+		const context = await browser.newContext({
+			viewport: { width: Number(opts.width), height: Number(opts.height) },
+			reducedMotion: opts.motion ? 'no-preference' : 'reduce',
+		});
+		const page = await context.newPage();
+
+		// react-query retries and msw both keep requests going long after load, so
+		// the settle waits on the page being quiet rather than on a fixed delay.
+		let inFlight = 0;
+		let lastActivity = Date.now();
+		page.on('request', () => {
+			inFlight += 1;
+			lastActivity = Date.now();
+		});
+		const done = () => {
+			inFlight = Math.max(inFlight - 1, 0);
+			lastActivity = Date.now();
+		};
+		page.on('requestfinished', done);
+		page.on('requestfailed', done);
+
+		// The height the rounds had reached when the page turned out to grow with
+		// the viewport, kept only to flag the story in the log.
+		let chasing = 0;
+
+		const url = new URL(`${base}/iframe.html`);
+		url.searchParams.set('viewMode', 'story');
+		url.searchParams.set('id', story.id);
+		// The preview owns the clock and the motion state, so both are asked for in
+		// the URL rather than injected here: a Chromatic build gets the defaults.
+		url.searchParams.set('storyClock', opts.clock);
+		const globals = [theme && `theme:${theme}`, opts.motion && 'motion:live']
+			.filter(Boolean)
+			.join(';');
+		if (globals) {
+			url.searchParams.set('globals', globals);
+		}
+		if (storyArgs) {
+			url.searchParams.set('args', storyArgs);
+		}
+
+		try {
+			await page.goto(url.href, { waitUntil: 'domcontentloaded' });
+
+			// Storybook's own render phase is the readiness signal: it reaches
+			// `finished` only once the loaders, the decorators and the story's `play`
+			// are all done, which a DOM check cannot see. The dev server transforms
+			// each page module on first visit, so this is the slow wait.
+			await page.waitForFunction(
+				() =>
+					(window.__STORYBOOK_PREVIEW__?.storyRenders ?? []).some((render) =>
+						['finished', 'errored', 'aborted'].includes(render.phase),
+					) || document.body.classList.contains('sb-show-errordisplay'),
+				undefined,
+				{ timeout: 120_000 },
+			);
+
+			await page.addStyleTag({ content: ignoreCss(ignoreSelectors) });
+			if (!opts.motion) {
+				// Videos and GIFs are parked on their first frame, as Chromatic does.
+				await page.evaluate(() =>
+					document.querySelectorAll('video').forEach((video) => video.pause?.()),
+				);
+			}
+
+			// Text reflows when a webfont lands, so the shot waits for the faces the
+			// page asked for. Some stories keep a request open by design, hence the
+			// cap on the quiet wait rather than a plain networkidle.
+			await page.evaluate(() => document.fonts.ready);
+			const quietUntil = Date.now() + 15_000;
+			while (
+				Date.now() < quietUntil &&
+				(inFlight > 0 || Date.now() - lastActivity < 600)
+			) {
+				await page.waitForTimeout(200);
+			}
+			await page.waitForTimeout(Number(opts.settle));
+
+			// The width is the fixed dimension and the height follows the page, the
+			// way a Chromatic viewport does. `src/styles.scss` pins
+			// `html, body, #root` to `height: 100%; overflow: hidden`, so the
+			// document can never outgrow the viewport and its height says nothing
+			// about what is on the page: what overflows are the shell's inner
+			// scrollers. `scrollers` grows the viewport until the tallest of those
+			// fits, so nothing is cut off and no scrollbar is left in the shot.
+			// Growing changes the layout, hence the rounds. A page that sizes a panel
+			// in `vh` grows its own content as the viewport grows, so no height ever
+			// fits it and the rounds only chase: `.alert-chart-container` is `57vh`,
+			// which puts Create Alert's fixed point at 4344px with an empty band on
+			// top. Such a page is shot at `--height` with its own scrollbar instead,
+			// which is what it looks like in a browser.
+			if (opts.grow !== 'none') {
+				const maximum = Number(opts['max-height']);
+				const requested = Number(opts.height);
+				let height = requested;
+				let fits = false;
+				for (let round = 0; round < 3 && !fits; round += 1) {
+					const needed = Math.min(
+						maximum,
+						await page.evaluate((withScrollers) => {
+							const document_ = Math.max(
+								document.documentElement.scrollHeight,
+								document.body.scrollHeight,
+							);
+							if (!withScrollers) {
+								return document_;
+							}
+
+							// Popups are skipped: they are out of the flow, and a tall
+							// dropdown or tooltip would otherwise drag the shot to a
+							// height nothing on the page itself needs.
+							const inFlow = (element) => {
+								for (
+									let node = element;
+									node && node !== document.documentElement;
+									node = node.parentElement
+								) {
+									const { position } = getComputedStyle(node);
+									if (position === 'fixed' || position === 'absolute') {
+										return false;
+									}
+								}
+								return true;
+							};
+
+							return [...document.querySelectorAll('*')].reduce((tallest, element) => {
+								const { overflowY } = getComputedStyle(element);
+								if (
+									!['auto', 'scroll', 'overlay'].includes(overflowY) ||
+									element.scrollHeight - element.clientHeight <= 1 ||
+									!inFlow(element)
+								) {
+									return tallest;
+								}
+
+								const box = element.getBoundingClientRect();
+								const above = box.top + window.scrollY;
+								const below = Math.max(0, document_ - (box.bottom + window.scrollY));
+								return Math.max(tallest, above + element.scrollHeight + below);
+							}, document_);
+						}, opts.grow === 'scrollers'),
+					);
+					fits = needed <= height;
+					if (fits) {
+						break;
+					}
+
+					height = needed;
+					await page.setViewportSize({ width: Number(opts.width), height });
+					await page.waitForTimeout(Number(opts.settle));
+				}
+
+				if (!fits && height !== requested) {
+					chasing = height;
+					height = requested;
+					await page.setViewportSize({ width: Number(opts.width), height });
+					await page.waitForTimeout(Number(opts.settle));
+				}
+			}
+
+			// The preview snapped its bottom-pinned lists at `afterEach`, before the
+			// page went quiet; a virtuoso list is usually still measuring then.
+			await page.evaluate(() => window.__signozSnapPinnedScrollers?.());
+
+			// A page that is still moving — a list scrolling itself to the bottom, a
+			// monaco editor re-measuring, a tooltip being repositioned — is shot
+			// twice in a row until two frames come back identical, since what the
+			// page is waiting on is not observable from here.
+			let shot = await page.screenshot();
+			let stable = false;
+			for (let attempt = 0; attempt < 8 && !stable; attempt += 1) {
+				await page.waitForTimeout(400);
+				const next = await page.screenshot();
+				stable = next.equals(shot);
+				shot = next;
+			}
+
+			const file = path.join(dir, `${story.id}.png`);
+			await writeFile(file, shot);
+
+			// The band goes on the shot itself so a single screenshot says what it
+			// is, and its height is recorded so a diff can take it back off.
+			let caption = 0;
+			if (captioning) {
+				const temporary = path.join(
+					os.tmpdir(),
+					`story-shots-caption-${process.pid}.png`,
+				);
+				caption = stamp({
+					lines: [
+						`${story.title}/${story.name}`,
+						[story.id, theme ?? 'default', stable ? '' : '(busy)']
+							.filter(Boolean)
+							.join('  '),
+						configLine,
+					].filter(Boolean),
+					from: file,
+					to: temporary,
+					theme: theme ?? 'dark',
+				});
+				await rename(temporary, file);
+			}
+
+			shots.push({
+				file: path.posix.join(
+					opts.flat ? '' : (theme ?? 'default'),
+					`${story.id}.png`,
+				),
+				id: story.id,
+				title: story.title,
+				name: story.name,
+				theme: theme ?? 'default',
+				status: stable ? 'ok' : 'busy',
+				caption,
+			});
+			console.log(
+				`  ${stable ? 'ok  ' : 'busy'} ${story.id}${
+					chasing ? ` (viewport-sized content, stopped chasing ${chasing}px)` : ''
+				}`,
+			);
+		} catch (error) {
+			failures.push(`${theme ?? 'default'}/${story.id}`);
+			console.log(`  FAIL ${story.id}: ${error.message.split('\n')[0]}`);
+		} finally {
+			await context.close();
+		}
+	}
+}
+
+await browser.close();
+
+// The diff script captions its output from this, so the run's own settings sit
+// next to the shots they produced rather than only in the shell history.
+await writeFile(
+	path.join(outDir, 'shots.json'),
+	`${JSON.stringify({ config: runConfig, shots }, null, '\t')}\n`,
+);
+
+if (failures.length) {
+	console.error(`\n${failures.length} failed: ${failures.join(', ')}`);
+	process.exit(1);
+}

frontend/src/AppRoutes/Private.tsx

@@ -169,12 +169,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	// Check for workspace blocked (trial expired)
 	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
 		const isRouteEnabledForWorkspaceBlockedState =
-			pathname === ROUTES.SETTINGS ||
-			pathname === ROUTES.BILLING ||
-			(isAdmin &&
-				(pathname === ROUTES.ORG_SETTINGS ||
-					pathname === ROUTES.MEMBERS_SETTINGS ||
-					pathname === ROUTES.MY_SETTINGS));
+			isAdmin &&
+			(pathname === ROUTES.SETTINGS ||
+				pathname === ROUTES.ORG_SETTINGS ||
+				pathname === ROUTES.MEMBERS_SETTINGS ||
+				pathname === ROUTES.BILLING ||
+				pathname === ROUTES.MY_SETTINGS);
 
 		if (
 			pathname !== ROUTES.WORKSPACE_LOCKED &&

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -739,7 +739,7 @@ describe('PrivateRoute', () => {
 			assertStaysOnRoute(ROUTES.MY_SETTINGS);
 		});
 
-		it('should allow VIEWER to access /settings when workspace is blocked', () => {
+		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -752,10 +752,10 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
-		it('should allow VIEWER to access /settings/billing when workspace is blocked', () => {
+		it('should redirect VIEWER to workspace locked when trying to access billing', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.BILLING,
 				appContext: {
@@ -768,7 +768,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.BILLING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should redirect VIEWER to workspace locked when trying to access org-settings', async () => {
@@ -819,7 +819,7 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
-		it('should allow EDITOR to access /settings when workspace is blocked', () => {
+		it('should redirect EDITOR to workspace locked when trying to access settings', async () => {
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
 				appContext: {
@@ -832,7 +832,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});
 
-			assertStaysOnRoute(ROUTES.SETTINGS);
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
 		});
 
 		it('should not redirect when already on workspace locked page', () => {
@@ -1626,7 +1626,6 @@ describe('PrivateRoute', () => {
 				path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
 				deniedRoles: DENIED_ROLES,
 			},
-			BILLING: { path: ROUTES.BILLING, deniedRoles: DENIED_ROLES },
 		};
 
 		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(

frontend/src/AppRoutes/pageComponents.ts

@@ -94,18 +94,23 @@ export const OnboardingV2 = Loadable(
 export const DashboardsListPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPage'
+			/* webpackChunkName: "DashboardsListPage" */ 'pages/DashboardsListPageV2'
 		),
 );
 
 export const DashboardPage = Loadable(
-	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPage'),
+	() => import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardPageV2'),
+);
+
+export const DashboardWidget = Loadable(
+	() =>
+		import(/* webpackChunkName: "DashboardWidgetPage" */ 'pages/DashboardWidget'),
 );
 
 export const DashboardPanelEditorPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPage/PanelEditorPage/PanelEditorPage'
+			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPageV2/PanelEditorPage/PanelEditorPage'
 		),
 );
 

frontend/src/AppRoutes/routes.ts

@@ -13,6 +13,7 @@ import {
 	DashboardPage,
 	DashboardPanelEditorPage,
 	DashboardsListPage,
+	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
 	ForgotPassword,
@@ -182,6 +183,13 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
+	{
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+		component: DashboardWidget,
+		isPrivate: true,
+		key: 'DASHBOARD_WIDGET',
+	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
 		exact: true,

frontend/src/api/billing/getUsage.ts

@@ -0,0 +1,59 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+export interface DayBreakdownEntry {
+	timestamp: number;
+	total: number;
+	quantity: number;
+	count: number;
+	size: number;
+}
+
+export interface TierEntry {
+	quantity: number;
+	unitPrice: number;
+	tierCost: number;
+}
+
+export interface BreakdownEntry {
+	type: string;
+	unit: string;
+	dayWiseBreakdown: {
+		breakdown: DayBreakdownEntry[];
+	};
+	tiers?: TierEntry[];
+}
+
+export interface UsageResponsePayloadProps {
+	billingPeriodStart: number;
+	billingPeriodEnd: number;
+	details: {
+		total: number;
+		baseFee: number;
+		breakdown: BreakdownEntry[];
+		billTotal: number;
+	};
+	discount: number;
+	subscriptionStatus?: string;
+}
+
+const getUsage = async (
+	licenseKey: string,
+): Promise<SuccessResponse<UsageResponsePayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(`/billing?licenseKey=${licenseKey}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getUsage;

frontend/src/api/dashboard/public/getPublicDashboardData.ts

@@ -0,0 +1,27 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetPublicDashboardDataProps, PayloadProps,PublicDashboardDataProps } from 'types/api/dashboard/public/get';
+
+/**
+ * @deprecated Use the generated `useGetPublicDashboardData` hook (or `getPublicDashboardData` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getPublicDashboardData = async (props: GetPublicDashboardDataProps): Promise<SuccessResponseV2<PublicDashboardDataProps>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/public/dashboards/${props.id}`);
+        
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPublicDashboardData;

frontend/src/api/dashboard/public/getPublicDashboardWidgetData.ts

@@ -0,0 +1,34 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { MetricRangePayloadV5 } from 'api/v5/v5';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { GetPublicDashboardWidgetDataProps } from 'types/api/dashboard/public/getWidgetData';
+
+
+/**
+ * @deprecated Use the generated `useGetPublicDashboardWidgetQueryRange` hook (or `getPublicDashboardWidgetQueryRange` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
+const getPublicDashboardWidgetData = async (props: GetPublicDashboardWidgetDataProps): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
+	try {
+		const response = await axios.get(`/public/dashboards/${props.id}/widgets/${props.index}/query_range`, {
+			params: {
+				startTime: props.startTime,
+				endTime: props.endTime,
+			},
+		});
+        
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getPublicDashboardWidgetData;

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

@@ -19,10 +19,8 @@ import type {
 
 import type {
 	AlertmanagertypesPostableChannelDTO,
-	AlertmanagertypesPostableNotificationChannelDTO,
 	AlertmanagertypesReceiverDTO,
 	CreateChannel201,
-	CreateNotificationChannel201,
 	DeleteChannelByIDPathParameters,
 	GetChannelByID200,
 	GetChannelByIDPathParameters,
@@ -649,87 +647,3 @@ export const useTestChannelDeprecated = <
 > => {
 	return useMutation(getTestChannelDeprecatedMutationOptions(options));
 };
-/**
- * This endpoint creates a notification channel
- * @summary Create notification channel
- */
-export const createNotificationChannel = (
-	alertmanagertypesPostableNotificationChannelDTO?: BodyType<AlertmanagertypesPostableNotificationChannelDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateNotificationChannel201>({
-		url: `/api/v2/notification_channels`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesPostableNotificationChannelDTO,
-		signal,
-	});
-};
-
-export const getCreateNotificationChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-	TContext
-> => {
-	const mutationKey = ['createNotificationChannel'];
-	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 createNotificationChannel>>,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createNotificationChannel(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateNotificationChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createNotificationChannel>>
->;
-export type CreateNotificationChannelMutationBody =
-	| BodyType<AlertmanagertypesPostableNotificationChannelDTO>
-	| undefined;
-export type CreateNotificationChannelMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create notification channel
- */
-export const useCreateNotificationChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createNotificationChannel>>,
-		TError,
-		{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createNotificationChannel>>,
-	TError,
-	{ data?: BodyType<AlertmanagertypesPostableNotificationChannelDTO> },
-	TContext
-> => {
-	return useMutation(getCreateNotificationChannelMutationOptions(options));
-};

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

@@ -37,476 +37,6 @@ export interface AlertmanagertypesChannelDTO {
 	updatedAt?: string;
 }
 
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind {
-	slack = 'slack',
-}
-export interface AlertmanagertypesChannelSlackConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiUrl: string;
-	/**
-	 * @type string
-	 */
-	channel?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO {
-	/**
-	 * @enum slack
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind;
-	spec: AlertmanagertypesChannelSlackConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
-	email = 'email',
-}
-export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelEmailConfigDTO {
-	/**
-	 * @type object
-	 */
-	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
-	/**
-	 * @type string
-	 */
-	html?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	to: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTO {
-	/**
-	 * @enum email
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind;
-	spec: AlertmanagertypesChannelEmailConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTOKind {
-	webhook = 'webhook',
-}
-export interface AlertmanagertypesChannelWebhookConfigDTO {
-	/**
-	 * @type string
-	 */
-	bearerToken?: string;
-	/**
-	 * @type string
-	 */
-	password?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	url: string;
-	/**
-	 * @type string
-	 */
-	username?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTO {
-	/**
-	 * @enum webhook
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTOKind;
-	spec: AlertmanagertypesChannelWebhookConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
-	pagerduty = 'pagerduty',
-}
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelPagerdutyConfigDTO {
-	/**
-	 * @type string
-	 */
-	class?: string;
-	/**
-	 * @type string
-	 */
-	client?: string;
-	/**
-	 * @type string
-	 */
-	clientUrl?: string;
-	/**
-	 * @type string
-	 */
-	component?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
-	/**
-	 * @type string
-	 */
-	group?: string;
-	/**
-	 * @type string
-	 */
-	routingKey: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	severity?: string;
-	/**
-	 * @type string
-	 */
-	source?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTO {
-	/**
-	 * @enum pagerduty
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind;
-	spec: AlertmanagertypesChannelPagerdutyConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
-	opsgenie = 'opsgenie',
-}
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelOpsgenieConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiKey: string;
-	/**
-	 * @type string
-	 */
-	apiUrl?: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
-	/**
-	 * @type string
-	 */
-	message?: string;
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	source?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTO {
-	/**
-	 * @enum opsgenie
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind;
-	spec: AlertmanagertypesChannelOpsgenieConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTOKind {
-	msteams = 'msteams',
-}
-export interface AlertmanagertypesChannelMSTeamsConfigDTO {
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	webhookUrl: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTO {
-	/**
-	 * @enum msteams
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTOKind;
-	spec: AlertmanagertypesChannelMSTeamsConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTOKind {
-	googlechat = 'googlechat',
-}
-export interface AlertmanagertypesChannelGoogleChatConfigDTO {
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	text?: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	webhookUrl: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTO {
-	/**
-	 * @enum googlechat
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTOKind;
-	spec: AlertmanagertypesChannelGoogleChatConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
-	jira = 'jira',
-}
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
-	[key: string]: unknown;
-};
-
-export interface AlertmanagertypesChannelJiraConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiToken: string;
-	/**
-	 * @type object
-	 */
-	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	email: string;
-	/**
-	 * @type string
-	 */
-	issueType: string;
-	/**
-	 * @type array
-	 */
-	labels?: string[];
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type string
-	 */
-	project: string;
-	/**
-	 * @type string
-	 */
-	reopenDuration?: string;
-	/**
-	 * @type string
-	 */
-	reopenTransition?: string;
-	/**
-	 * @type string
-	 */
-	resolveTransition?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	site: string;
-	/**
-	 * @type string
-	 */
-	summary?: string;
-	/**
-	 * @type string
-	 */
-	wontFixResolution?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTO {
-	/**
-	 * @enum jira
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind;
-	spec: AlertmanagertypesChannelJiraConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTOKind {
-	jsmops = 'jsmops',
-}
-export interface AlertmanagertypesChannelJSMOpsConfigDTO {
-	/**
-	 * @type string
-	 */
-	apiKey: string;
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	message?: string;
-	/**
-	 * @type string
-	 */
-	priority?: string;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	tags?: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO {
-	/**
-	 * @enum jsmops
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTOKind;
-	spec: AlertmanagertypesChannelJSMOpsConfigDTO;
-}
-
-export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
-	incidentio = 'incidentio',
-}
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
-	[key: string]: string;
-};
-
-export interface AlertmanagertypesChannelIncidentIOConfigDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type object
-	 */
-	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
-	/**
-	 * @type boolean,null
-	 */
-	sendResolved?: boolean | null;
-	/**
-	 * @type string
-	 */
-	title?: string;
-	/**
-	 * @type string
-	 */
-	token: string;
-	/**
-	 * @type string
-	 */
-	url: string;
-}
-
-export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO {
-	/**
-	 * @enum incidentio
-	 * @type string
-	 */
-	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind;
-	spec: AlertmanagertypesChannelIncidentIOConfigDTO;
-}
-
-export type AlertmanagertypesChannelConfigDTO =
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelMSTeamsConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO;
-
-export enum AlertmanagertypesChannelKindDTO {
-	slack = 'slack',
-	email = 'email',
-	webhook = 'webhook',
-	pagerduty = 'pagerduty',
-	opsgenie = 'opsgenie',
-	msteams = 'msteams',
-	googlechat = 'googlechat',
-	jira = 'jira',
-	jsmops = 'jsmops',
-	incidentio = 'incidentio',
-}
 export interface ModelLabelSetDTO {
 	[key: string]: string;
 }
@@ -558,32 +88,6 @@ export enum AlertmanagertypesExpressionKindDTO {
 	rule = 'rule',
 	policy = 'policy',
 }
-export interface AlertmanagertypesGettableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	displayName: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
 export interface AlertmanagertypesGettableRoutePolicyDTO {
 	/**
 	 * @type array,null
@@ -2244,22 +1748,6 @@ export type AlertmanagertypesPostableChannelDTO = unknown & {
 	wechat_configs?: ConfigWechatConfigDTO[];
 };
 
-export interface AlertmanagertypesPostableNotificationChannelDTO {
-	config: AlertmanagertypesChannelConfigDTO;
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type boolean
-	 */
-	generateName?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
 export interface AlertmanagertypesPostablePlannedMaintenanceDTO {
 	/**
 	 * @type array,null
@@ -11034,153 +10522,6 @@ export interface SpantypesUpdatableSpanMapperGroupDTO {
 	name?: string | null;
 }
 
-export interface SubscriptiontypesGettableSubscriptionDTO {
-	/**
-	 * @type string
-	 */
-	redirectURL: string;
-}
-
-export interface SubscriptiontypesSubscriptionUsageDayWiseDataDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	count?: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	quantity?: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	size?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	timestamp?: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	total?: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	unitPrice?: number;
-}
-
-export interface SubscriptiontypesSubscriptionUsageDayWiseBreakdownDTO {
-	/**
-	 * @type array,null
-	 */
-	breakdown?: SubscriptiontypesSubscriptionUsageDayWiseDataDTO[] | null;
-	/**
-	 * @type string
-	 */
-	type?: string;
-}
-
-export interface SubscriptiontypesSubscriptionUsageTierDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	quantity?: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	tierCost?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	tierEnd?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	tierStart?: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	unitPrice?: number;
-}
-
-export interface SubscriptiontypesSubscriptionUsageBreakdownDTO {
-	dayWiseBreakdown?: SubscriptiontypesSubscriptionUsageDayWiseBreakdownDTO;
-	/**
-	 * @type array,null
-	 */
-	tiers?: SubscriptiontypesSubscriptionUsageTierDTO[] | null;
-	/**
-	 * @type string
-	 */
-	type?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
-export interface SubscriptiontypesSubscriptionUsageDetailsDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	baseFee?: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	billTotal?: number;
-	/**
-	 * @type array,null
-	 */
-	breakdown?: SubscriptiontypesSubscriptionUsageBreakdownDTO[] | null;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	total?: number;
-}
-
-export interface SubscriptiontypesGettableSubscriptionUsageDTO {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	billingPeriodEnd?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	billingPeriodStart?: number;
-	details?: SubscriptiontypesSubscriptionUsageDetailsDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	discount?: number;
-	/**
-	 * @type string
-	 */
-	subscriptionStatus?: string;
-}
-
-export interface SubscriptiontypesPostableSubscriptionDTO {
-	/**
-	 * @type string
-	 */
-	url: string;
-}
-
 export type TelemetrytypesGettableFieldKeysDTOKeysAnyOf = {
 	[key: string]: TelemetrytypesTelemetryFieldKeyDTO[];
 };
@@ -12399,30 +11740,6 @@ export type GetStats200 = {
 	status: string;
 };
 
-export type GetSubscription200 = {
-	data: SubscriptiontypesGettableSubscriptionUsageDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateSubscription201 = {
-	data: SubscriptiontypesGettableSubscriptionDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateSubscription200 = {
-	data: SubscriptiontypesGettableSubscriptionDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetTraceAggregationsPathParameters = {
 	traceID: string;
 };
@@ -13162,14 +12479,6 @@ export type GetMetricsTreemap200 = {
 	status: string;
 };
 
-export type CreateNotificationChannel201 = {
-	data: AlertmanagertypesGettableNotificationChannelDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetMyOrganization200 = {
 	data: TypesOrganizationDTO;
 	/**

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

@@ -1,280 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'pnpm generate:api'
- * SigNoz
- */
-import { useMutation, useQuery } from 'react-query';
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-
-import type {
-	CreateSubscription201,
-	GetSubscription200,
-	RenderErrorResponseDTO,
-	SubscriptiontypesPostableSubscriptionDTO,
-	UpdateSubscription200,
-} from '../sigNoz.schemas';
-
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
-
-/**
- * This endpoint gets the organization's subscription along with its usage and billing details.
- * @summary Get the subscription.
- */
-export const getSubscription = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetSubscription200>({
-		url: `/api/v1/subscriptions`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetSubscriptionQueryKey = () => {
-	return [`/api/v1/subscriptions`] as const;
-};
-
-export const getGetSubscriptionQueryOptions = <
-	TData = Awaited<ReturnType<typeof getSubscription>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getSubscription>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetSubscriptionQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getSubscription>>> = ({
-		signal,
-	}) => getSubscription(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getSubscription>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetSubscriptionQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getSubscription>>
->;
-export type GetSubscriptionQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get the subscription.
- */
-
-export function useGetSubscription<
-	TData = Awaited<ReturnType<typeof getSubscription>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getSubscription>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetSubscriptionQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get the subscription.
- */
-export const invalidateGetSubscription = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetSubscriptionQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates a subscription for the organization.
- * @summary Create a subscription.
- */
-export const createSubscription = (
-	subscriptiontypesPostableSubscriptionDTO?: BodyType<SubscriptiontypesPostableSubscriptionDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateSubscription201>({
-		url: `/api/v1/subscriptions`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: subscriptiontypesPostableSubscriptionDTO,
-		signal,
-	});
-};
-
-export const getCreateSubscriptionMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createSubscription>>,
-		TError,
-		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createSubscription>>,
-	TError,
-	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-	TContext
-> => {
-	const mutationKey = ['createSubscription'];
-	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 createSubscription>>,
-		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createSubscription(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateSubscriptionMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createSubscription>>
->;
-export type CreateSubscriptionMutationBody =
-	| BodyType<SubscriptiontypesPostableSubscriptionDTO>
-	| undefined;
-export type CreateSubscriptionMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create a subscription.
- */
-export const useCreateSubscription = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createSubscription>>,
-		TError,
-		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createSubscription>>,
-	TError,
-	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-	TContext
-> => {
-	return useMutation(getCreateSubscriptionMutationOptions(options));
-};
-/**
- * This endpoint updates the organization's subscription.
- * @summary Update the subscription.
- */
-export const updateSubscription = (
-	subscriptiontypesPostableSubscriptionDTO?: BodyType<SubscriptiontypesPostableSubscriptionDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateSubscription200>({
-		url: `/api/v1/subscriptions`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: subscriptiontypesPostableSubscriptionDTO,
-		signal,
-	});
-};
-
-export const getUpdateSubscriptionMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateSubscription>>,
-		TError,
-		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateSubscription>>,
-	TError,
-	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-	TContext
-> => {
-	const mutationKey = ['updateSubscription'];
-	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 updateSubscription>>,
-		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return updateSubscription(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateSubscriptionMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateSubscription>>
->;
-export type UpdateSubscriptionMutationBody =
-	| BodyType<SubscriptiontypesPostableSubscriptionDTO>
-	| undefined;
-export type UpdateSubscriptionMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update the subscription.
- */
-export const useUpdateSubscription = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateSubscription>>,
-		TError,
-		{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateSubscription>>,
-	TError,
-	{ data?: BodyType<SubscriptiontypesPostableSubscriptionDTO> },
-	TContext
-> => {
-	return useMutation(getUpdateSubscriptionMutationOptions(options));
-};

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/quickFilters/getCustomFilters';
+
+const getCustomFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	const { signal } = props;
+	try {
+		const response = await axios.get(`/orgs/me/filters/${signal}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getCustomFilters;

frontend/src/api/quickFilters/updateCustomFilters.ts

@@ -0,0 +1,13 @@
+import axios from 'api';
+import { AxiosError } from 'axios';
+import { SuccessResponse } from 'types/api';
+import { UpdateCustomFiltersProps } from 'types/api/quickFilters/updateCustomFilters';
+
+const updateCustomFiltersAPI = async (
+	props: UpdateCustomFiltersProps,
+): Promise<SuccessResponse<void> | AxiosError> =>
+	axios.put(`/orgs/me/filters`, {
+		...props.data,
+	});
+
+export default updateCustomFiltersAPI;

frontend/src/api/v1/checkout/create.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	CheckoutRequestPayloadProps,
+	CheckoutSuccessPayloadProps,
+	PayloadProps,
+} from 'types/api/billing/checkout';
+
+const updateCreditCardApi = async (
+	props: CheckoutRequestPayloadProps,
+): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/checkout', {
+			url: props.url,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default updateCreditCardApi;

frontend/src/api/v1/dashboards/id/get.ts

@@ -0,0 +1,20 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/get';
+import { Dashboard } from 'types/api/dashboard/getAll';
+
+const get = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}`);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default get;

frontend/src/api/v1/dashboards/id/update.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { PayloadProps, Props } from 'types/api/dashboard/update';
+
+const update = async (props: Props): Promise<SuccessResponseV2<Dashboard>> => {
+	try {
+		const response = await axios.put<PayloadProps>(`/dashboards/${props.id}`, {
+			...props.data,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default update;

frontend/src/api/v1/portal/create.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	CheckoutRequestPayloadProps,
+	CheckoutSuccessPayloadProps,
+	PayloadProps,
+} from 'types/api/billing/checkout';
+
+const manageCreditCardApi = async (
+	props: CheckoutRequestPayloadProps,
+): Promise<SuccessResponseV2<CheckoutSuccessPayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/portal', {
+			url: props.url,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default manageCreditCardApi;

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -2,10 +2,8 @@ import { cloneDeep, isEmpty } from 'lodash-es';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
 import {
-	BuilderQuery,
 	DistributionData,
 	MetricRangePayloadV5,
-	QueryEnvelope,
 	QueryRangeRequestV5,
 	RawData,
 	ScalarData,
@@ -13,11 +11,6 @@ import {
 } from 'types/api/v5/queryRange';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
-const isBuilderQueryEnvelope = (
-	envelope: QueryEnvelope,
-): envelope is QueryEnvelope & { spec: BuilderQuery } =>
-	envelope.type === 'builder_query' || envelope.type === 'builder_ai_query';
-
 function getColName(
 	col: ScalarData['columns'][number],
 	legendMap: Record<string, string>,
@@ -416,19 +409,21 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries?.filter(isBuilderQueryEnvelope).reduce(
-			(acc, query) => {
-				if (
-					isBuilderQueryEnvelope(query) &&
-					'aggregations' in query.spec &&
-					query.spec.name
-				) {
-					acc[query.spec.name] = query.spec.aggregations;
-				}
-				return acc;
-			},
-			{} as Record<string, any>,
-		) || {};
+		params?.compositeQuery?.queries
+			?.filter((query) => query.type === 'builder_query')
+			.reduce(
+				(acc, query) => {
+					if (
+						query.type === 'builder_query' &&
+						'aggregations' in query.spec &&
+						query.spec.name
+					) {
+						acc[query.spec.name] = query.spec.aggregations;
+					}
+					return acc;
+				},
+				{} as Record<string, any>,
+			) || {};
 
 	// clickhouse_sql queries have no aggregation metadata; their value columns
 	// are named/keyed by the real SQL alias the response carries (see getColId).

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -14,7 +14,6 @@ import {
 	QueryBuilderFormula as V5QueryBuilderFormula,
 	QueryEnvelope,
 	QueryRangePayloadV5,
-	RequestType,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -936,41 +935,3 @@ describe('convertBuilderQueriesToV5 having normalization', () => {
 		});
 	});
 });
-
-describe('convertBuilderQueriesToV5 builder query type', () => {
-	const buildEnvelope = (
-		builderQueryType: IBuilderQuery['builderQueryType'],
-		requestType: RequestType,
-	): QueryEnvelope => {
-		const [envelope] = convertBuilderQueriesToV5(
-			{
-				A: {
-					dataSource: DataSource.TRACES,
-					queryName: 'A',
-					builderQueryType,
-				} as unknown as IBuilderQuery,
-			},
-			requestType,
-		);
-		return envelope;
-	};
-
-	it.each<[RequestType]>([
-		['trace'],
-		['raw'],
-		['time_series'],
-		['scalar'],
-		['distribution'],
-	])('sends builder_ai_query for the %s request type', (requestType) => {
-		expect(buildEnvelope('builder_ai_query', requestType).type).toBe(
-			'builder_ai_query',
-		);
-	});
-
-	it.each<[string, IBuilderQuery['builderQueryType']]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('sends builder_query for %s', (_label, builderQueryType) => {
-		expect(buildEnvelope(builderQueryType, 'trace').type).toBe('builder_query');
-	});
-});

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -6,7 +6,6 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty } from 'lodash-es';
-import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -365,7 +364,7 @@ export function convertBuilderQueriesToV5(
 			}
 
 			return {
-				type: queryData.builderQueryType ?? 'builder_query',
+				type: 'builder_query' as QueryType,
 				spec,
 			};
 		},
@@ -546,22 +545,20 @@ function reduceQueriesToObject(queryArray: any[]): {
 /**
  * Prepares V5 query range payload from GetQueryResultsProps
  */
-export const prepareQueryRangePayloadV5 = (
-	{
-		query,
-		globalSelectedInterval,
-		graphType,
-		selectedTime,
-		tableParams,
-		variables = {},
-		start: startTime,
-		end: endTime,
-		formatForWeb,
-		originalGraphType,
-		fillGaps,
-	}: GetQueryResultsProps,
-	dynamicVariables: DynamicVariableSuggestion[] = [],
-): PrepareQueryRangePayloadV5Result => {
+export const prepareQueryRangePayloadV5 = ({
+	query,
+	globalSelectedInterval,
+	graphType,
+	selectedTime,
+	tableParams,
+	variables = {},
+	start: startTime,
+	end: endTime,
+	formatForWeb,
+	originalGraphType,
+	fillGaps,
+	dynamicVariables,
+}: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
 	let legendMap: Record<string, string> = {};
 	const requestType = mapPanelTypeToRequestType(graphType);
 	let queries: QueryEnvelope[] = [];
@@ -674,9 +671,9 @@ export const prepareQueryRangePayloadV5 = (
 			(acc, [key, value]) => {
 				acc[key] = {
 					value,
-					type: dynamicVariables.some((v) => v.name === key)
-						? ('dynamic' as VariableType)
-						: undefined,
+					type: dynamicVariables
+						?.find((v) => v.name === key)
+						?.type?.toLowerCase() as VariableType,
 				};
 				return acc;
 			},

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -8,7 +8,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { X } from '@signozhq/icons';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -5,16 +5,16 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,15 +5,15 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { UpdateTimeInterval } from 'store/actions';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { Card } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { CardContainer } from 'container/WidgetCard/styles';
+import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import { AppState } from 'store/reducers';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -1,7 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -6,9 +6,9 @@ import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ViewMenuAction } from 'container/WidgetCard/config';
-import GridCard from 'container/WidgetCard/Card';
-import { Card } from 'container/WidgetCard/styles';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
 import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -8,7 +8,7 @@ import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuidv4 } from 'uuid';

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -4,9 +4,10 @@ import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import useUpdatedQuery from 'container/WidgetCard/hooks/useResolveQuery';
+import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
@@ -79,6 +80,7 @@ export function useNavigateToExplorer(): (
 	);
 
 	const { getUpdatedQuery } = useUpdatedQuery();
+	const { dashboardData } = useDashboardStore();
 	const { notifications } = useNotifications();
 
 	return useCallback(
@@ -110,6 +112,7 @@ export function useNavigateToExplorer(): (
 						panelTypes: PANEL_TYPES.TIME_SERIES,
 						timePreferance: 'GLOBAL_TIME',
 					},
+					dashboardData,
 				})
 					.then((query) => {
 						preparedQuery = query;
@@ -133,6 +136,13 @@ export function useNavigateToExplorer(): (
 
 			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
-		[prepareQuery, minTime, maxTime, getUpdatedQuery, notifications],
+		[
+			prepareQuery,
+			minTime,
+			maxTime,
+			getUpdatedQuery,
+			dashboardData,
+			notifications,
+		],
 	);
 }

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -4,12 +4,11 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import { SuccessResponseV2 } from 'types/api';
+import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -19,7 +18,9 @@ export default function ChatSupportGateway(): JSX.Element {
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -37,7 +38,7 @@ export default function ChatSupportGateway(): JSX.Element {
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -93,23 +94,18 @@ export default function ChatSupportGateway(): JSX.Element {
 					>
 						Cancel
 					</Button>,
-					<AuthZTooltip
+					<Button
 						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
 					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
+						Add Credit Card
+					</Button>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/Graph/index.tsx

@@ -28,7 +28,7 @@ import {
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { generateGridTitle } from 'utils/generateGridTitle';
+import { generateGridTitle } from 'container/GridPanelSwitch/utils';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -4,17 +4,16 @@ import { useLocation } from 'react-router-dom';
 import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
 import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import { SuccessResponseV2 } from 'types/api';
+import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -119,7 +118,9 @@ function LaunchChatSupport({
 		}
 	};
 
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -137,7 +138,7 @@ function LaunchChatSupport({
 	};
 
 	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
+		updateCreditCardApi,
 		{
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
@@ -192,23 +193,18 @@ function LaunchChatSupport({
 					>
 						Cancel
 					</Button>,
-					<AuthZTooltip
+					<Button
 						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
 					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
+						Add Credit Card
+					</Button>,
 				]}
 			>
 				<Typography.Text className="add-credit-card-text">

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -16,6 +16,8 @@ import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
 import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
@@ -25,7 +27,7 @@ import {
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
 } from 'constants/antlrQueryConstants';
-import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
+import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
@@ -52,12 +54,6 @@ import {
 	SUGGESTION_FETCH_DEBOUNCE_MS,
 	SUGGESTIONS_SECTION,
 } from './constants';
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-	SuggestedFieldKey,
-	SuggestedFieldKeysByName,
-} from './fieldSuggestions';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -262,11 +258,16 @@ function QuerySearch({
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
 
-	const dashboardDynamicVariables = useDynamicVariableSuggestions();
+	const dashboardDynamicVariables = useDashboardVariablesByType(
+		'DYNAMIC',
+		'values',
+	);
 
 	// Add back the generateOptions function and useEffect
-	const generateOptions = (keys: SuggestedFieldKeysByName): any[] =>
-		Object.values(keys).flatMap((items: SuggestedFieldKey[]) =>
+	const generateOptions = (keys: {
+		[key: string]: QueryKeyDataSuggestionsProps[];
+	}): any[] =>
+		Object.values(keys).flatMap((items: QueryKeyDataSuggestionsProps[]) =>
 			items.map(({ name, fieldDataType, fieldContext }) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
@@ -319,9 +320,8 @@ function QuerySearch({
 
 			lastFetchedKeyRef.current = searchText || '';
 
-			const response = await fetchFieldKeysForQuery({
-				builderQueryType: queryData.builderQueryType,
-				dataSource,
+			const response = await getKeySuggestions({
+				signal: dataSource,
 				searchText: searchText || '',
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
@@ -363,7 +363,6 @@ function QuerySearch({
 			hardcodedAttributeKeys,
 			showFilterSuggestionsWithoutMetric,
 			metricNamespace,
-			queryData.builderQueryType,
 		],
 	);
 
@@ -497,11 +496,10 @@ function QuerySearch({
 			try {
 				const values = valueSuggestionsOverride
 					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await fetchFieldValuesForQuery({
-							builderQueryType: queryData.builderQueryType,
-							dataSource,
+					: await getValueSuggestions({
 							key,
 							searchText: sanitizedSearchText,
+							signal: dataSource,
 							signalSource: signalSource as 'meter' | '',
 							metricName: debouncedMetricName ?? undefined,
 						}).then((response) => {
@@ -606,7 +604,6 @@ function QuerySearch({
 			signalSource,
 			toggleSuggestions,
 			valueSuggestionsOverride,
-			queryData.builderQueryType,
 		],
 	);
 
@@ -1191,8 +1188,8 @@ function QuerySearch({
 			);
 
 			// Add dynamic variables suggestions for the current key
-			const variableName = dashboardDynamicVariables.find(
-				(variable) => variable.attribute === keyName,
+			const variableName = dashboardDynamicVariables?.find(
+				(variable) => variable?.dynamicVariablesAttribute === keyName,
 			)?.name;
 
 			if (variableName) {

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/fieldSuggestions.test.ts

@@ -1,215 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { DataSource } from 'types/common/queryBuilder';
-
-import {
-	fetchFieldKeysForQuery,
-	fetchFieldValuesForQuery,
-} from '../fieldSuggestions';
-
-jest.mock('api/generated/services/ai-observability', () => ({
-	getAIObservabilityFieldsKeys: jest.fn(),
-	getAIObservabilityFieldsValues: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getKeySuggestions', () => ({
-	getKeySuggestions: jest.fn(),
-}));
-
-jest.mock('api/querySuggestions/getValueSuggestion', () => ({
-	getValueSuggestions: jest.fn(),
-}));
-
-const mockedAIKeys = getAIObservabilityFieldsKeys as jest.MockedFunction<
-	typeof getAIObservabilityFieldsKeys
->;
-const mockedGenericKeys = getKeySuggestions as jest.MockedFunction<
-	typeof getKeySuggestions
->;
-const mockedAIValues = getAIObservabilityFieldsValues as jest.MockedFunction<
-	typeof getAIObservabilityFieldsValues
->;
-const mockedGenericValues = getValueSuggestions as jest.MockedFunction<
-	typeof getValueSuggestions
->;
-
-const aiValuesResponse = (
-	values: { stringValues?: string[]; numberValues?: number[] } | null,
-	complete = true,
-): Awaited<ReturnType<typeof getAIObservabilityFieldsValues>> =>
-	({
-		status: 'success',
-		data: { complete, values },
-	}) as Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>;
-
-describe('fetchFieldKeysForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: {
-				complete: true,
-				keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-			},
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const keys = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: 'llm',
-		});
-
-		expect(mockedAIKeys).toHaveBeenCalledWith({ searchText: 'llm' });
-		expect(mockedGenericKeys).not.toHaveBeenCalled();
-		expect(keys.data.data).toStrictEqual({
-			complete: true,
-			keys: { llm_call_count: [{ name: 'llm_call_count' }] },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		mockedGenericKeys.mockResolvedValue({
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as Awaited<ReturnType<typeof getKeySuggestions>>);
-
-		await fetchFieldKeysForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			searchText: 'svc',
-		});
-
-		expect(mockedAIKeys).not.toHaveBeenCalled();
-		expect(mockedGenericKeys).toHaveBeenCalledWith(
-			expect.objectContaining({ signal: DataSource.TRACES, searchText: 'svc' }),
-		);
-	});
-
-	it('normalizes a null ai_observability keys payload to an empty map', async () => {
-		mockedAIKeys.mockResolvedValue({
-			status: 'success',
-			data: { complete: false, keys: null },
-		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
-
-		const response = await fetchFieldKeysForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			searchText: '',
-		});
-
-		expect(response.data.data).toStrictEqual({ complete: false, keys: {} });
-	});
-
-	it('passes the generic response through untouched', async () => {
-		const genericResponse = {
-			data: { status: 'success', data: { complete: true, keys: {} } },
-		} as unknown as Awaited<ReturnType<typeof getKeySuggestions>>;
-		mockedGenericKeys.mockResolvedValue(genericResponse);
-
-		await expect(
-			fetchFieldKeysForQuery({
-				builderQueryType: 'builder_query',
-				dataSource: DataSource.TRACES,
-				searchText: '',
-			}),
-		).resolves.toBe(genericResponse);
-	});
-});
-
-describe('fetchFieldValuesForQuery', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
-		mockedAIValues.mockResolvedValue(
-			aiValuesResponse({ stringValues: ['gpt-4o'], numberValues: [] }),
-		);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'gen_ai.request.model',
-			searchText: 'gpt',
-		});
-
-		expect(mockedGenericValues).not.toHaveBeenCalled();
-		expect(response).toStrictEqual({
-			data: {
-				data: {
-					complete: true,
-					values: { stringValues: ['gpt-4o'], numberValues: [] },
-				},
-			},
-		});
-	});
-
-	it('forwards the key as the name the endpoint expects', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse({}));
-
-		await fetchFieldValuesForQuery({
-			builderQueryType: 'builder_ai_query',
-			dataSource: DataSource.TRACES,
-			key: 'total_tokens',
-			searchText: '',
-		});
-
-		expect(mockedAIValues).toHaveBeenCalledWith({
-			name: 'total_tokens',
-			searchText: '',
-		});
-	});
-
-	it('wraps the ai_observability payload in the envelope the call site unwraps', async () => {
-		mockedAIValues.mockResolvedValue(aiValuesResponse(null, false));
-
-		await expect(
-			fetchFieldValuesForQuery({
-				builderQueryType: 'builder_ai_query',
-				dataSource: DataSource.TRACES,
-				key: 'llm_call_count',
-				searchText: '',
-			}),
-		).resolves.toStrictEqual({
-			data: { data: { complete: false, values: null } },
-		});
-	});
-
-	it.each<[string, 'builder_query' | undefined]>([
-		['an unmarked query', undefined],
-		['an explicitly generic query', 'builder_query'],
-	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
-		const genericResponse = {
-			data: {
-				data: { complete: false, values: { stringValues: ['frontend'] } },
-			},
-		} as unknown as Awaited<ReturnType<typeof getValueSuggestions>>;
-		mockedGenericValues.mockResolvedValue(genericResponse);
-
-		const response = await fetchFieldValuesForQuery({
-			builderQueryType,
-			dataSource: DataSource.TRACES,
-			key: 'service.name',
-			searchText: 'front',
-		});
-
-		expect(mockedAIValues).not.toHaveBeenCalled();
-		expect(mockedGenericValues).toHaveBeenCalledWith(
-			expect.objectContaining({
-				signal: DataSource.TRACES,
-				key: 'service.name',
-				searchText: 'front',
-			}),
-		);
-		expect(response).toBe(genericResponse);
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/fieldSuggestions.ts

@@ -1,111 +0,0 @@
-import {
-	getAIObservabilityFieldsKeys,
-	getAIObservabilityFieldsValues,
-} from 'api/generated/services/ai-observability';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-export interface SuggestedFieldKey {
-	name: string;
-	fieldContext?: string;
-	fieldDataType?: string;
-}
-
-export type SuggestedFieldKeysByName = Record<string, SuggestedFieldKey[]>;
-
-export interface SuggestedFieldKeysPayload {
-	complete: boolean;
-	keys: SuggestedFieldKeysByName;
-}
-
-export interface SuggestedFieldKeysResponse {
-	data: { data?: SuggestedFieldKeysPayload };
-}
-
-export interface SuggestedFieldValuesPayload {
-	complete?: boolean;
-	values?: {
-		stringValues?: string[] | null;
-		numberValues?: number[] | null;
-	} | null;
-}
-
-export interface SuggestedFieldValuesResponse {
-	data: { data?: SuggestedFieldValuesPayload };
-}
-
-interface FetchFieldKeysParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-	metricNamespace?: string;
-}
-
-interface FetchFieldValuesParams {
-	builderQueryType: IBuilderQuery['builderQueryType'];
-	dataSource: DataSource;
-	key: string;
-	searchText: string;
-	metricName?: string;
-	signalSource?: 'meter' | '';
-}
-
-export const fetchFieldKeysForQuery = async ({
-	builderQueryType,
-	dataSource,
-	searchText,
-	metricName,
-	signalSource,
-	metricNamespace,
-}: FetchFieldKeysParams): Promise<SuggestedFieldKeysResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsKeys({ searchText });
-
-		return {
-			data: {
-				data: response.data
-					? { complete: response.data.complete, keys: response.data.keys ?? {} }
-					: undefined,
-			},
-		};
-	}
-
-	return getKeySuggestions({
-		signal: dataSource,
-		searchText,
-		metricName,
-		signalSource,
-		metricNamespace,
-	});
-};
-
-export const fetchFieldValuesForQuery = async ({
-	builderQueryType,
-	dataSource,
-	key,
-	searchText,
-	metricName,
-	signalSource,
-}: FetchFieldValuesParams): Promise<SuggestedFieldValuesResponse> => {
-	if (builderQueryType === 'builder_ai_query') {
-		const response = await getAIObservabilityFieldsValues({
-			name: key,
-			searchText,
-		});
-
-		return { data: { data: response.data } };
-	}
-
-	// getValueSuggestions' declared response type does not match what the endpoint returns.
-	return getValueSuggestions({
-		signal: dataSource,
-		key,
-		searchText,
-		signalSource,
-		metricName,
-	}) as unknown as Promise<SuggestedFieldValuesResponse>;
-};

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -54,7 +54,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	const { cloneQuery, panelType } = useQueryBuilder();
 
 	const showFunctions = query?.functions?.length > 0;
-	const { dataSource, builderQueryType } = query;
+	const { dataSource } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -94,9 +94,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 	);
 
 	const showSpanScopeSelector = useMemo(
-		() =>
-			dataSource === DataSource.TRACES && builderQueryType !== 'builder_ai_query',
-		[dataSource, builderQueryType],
+		() => dataSource === DataSource.TRACES,
+		[dataSource],
 	);
 
 	const showInlineQuerySearch = useMemo(() => {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.contextSuggestions.test.tsx

@@ -17,6 +17,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 // Shrink the suggestion-fetch debounce (300ms in prod) so these integration
 // tests aren't paced by it; coalescing semantics stay intact.
 jest.mock('../QuerySearch/constants', () => ({

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -21,6 +21,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {
@@ -146,16 +152,15 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			/>,
 		);
 
-		// Wait for the mount fetch specifically. A debounced fetch from an earlier test
-		// can still land after mockClear(), so waiting on "any call" would let this
-		// assert against that one instead and make the result order-dependent.
-		await waitFor(
-			() =>
-				expect(mockedGetKeysOnMount).toHaveBeenCalledWith(
-					expect.objectContaining({ signal: DataSource.LOGS, searchText: '' }),
-				),
-			{ timeout: 2000 },
-		);
+		// Wait for debounced API call (300ms debounce + some buffer)
+		await waitFor(() => expect(mockedGetKeysOnMount).toHaveBeenCalled(), {
+			timeout: 2000,
+		});
+
+		const lastArgs = mockedGetKeysOnMount.mock.calls[
+			mockedGetKeysOnMount.mock.calls.length - 1
+		]?.[0] as { signal: unknown; searchText: string };
+		expect(lastArgs).toMatchObject({ signal: DataSource.LOGS, searchText: '' });
 	});
 
 	it('calls provided onRun on Mod-Enter', async () => {

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/RecentSearches.test.tsx

@@ -31,6 +31,12 @@ jest.mock('hooks/useDarkMode', () => ({
 	useIsDarkMode: (): boolean => false,
 }));
 
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
 jest.mock('api/querySuggestions/getKeySuggestions', () => ({
 	getKeySuggestions: jest.fn().mockResolvedValue({
 		data: { data: { keys: {} } },

frontend/src/components/QueryBuilderV2/utils.ts

@@ -525,34 +525,6 @@ export const convertFiltersToExpressionWithExistingQuery = (
 	};
 };
 
-/**
- * Canonical name for a comparison's operator, limited to the equality and
- * membership forms. Every other shape (LIKE, BETWEEN, EXISTS, CONTAINS, REGEXP,
- * the ordering operators) returns undefined, so an operator-restricted removal
- * leaves it in place.
- *
- * The ANTLR4 runtime returns null for an absent token or rule despite the
- * non-nullable TypeScript signatures.
- */
-const getComparisonOperator = (ctx: ComparisonContext): string | undefined => {
-	if ((ctx.inClause() as unknown) !== null) {
-		return 'in';
-	}
-	if ((ctx.notInClause() as unknown) !== null) {
-		return 'not in';
-	}
-	if ((ctx.EQUALS() as unknown) !== null) {
-		return '=';
-	}
-	if (
-		(ctx.NOT_EQUALS() as unknown) !== null ||
-		(ctx.NEQ() as unknown) !== null
-	) {
-		return '!=';
-	}
-	return undefined;
-};
-
 /**
  * Removes clauses for specified keys from a filter query expression.
  *
@@ -570,16 +542,12 @@ const getComparisonOperator = (ctx: ComparisonContext): string | undefined => {
  *   - `true`: removes only the first clause whose value contains any `$`.
  *   - `string` (e.g. `"$service.name"`): removes only the clause whose value exactly
  *     matches that string — preferred when the specific variable reference is known.
- * @param operatorsToRemove - When given, restricts removal to clauses whose operator
- *   is in this set (`=`, `!=`, `in`, `not in`); every other clause on the key is kept.
- *   Omit to remove a matching key's clauses whatever their operator.
  * @returns The rewritten expression, or an empty string if all clauses were removed.
  */
 export const removeKeysFromExpression = (
 	expression: string,
 	keysToRemove: string[],
 	removeOnlyVariableExpressions: string | boolean = false,
-	operatorsToRemove?: string[],
 ): string => {
 	if (!keysToRemove || keysToRemove.length === 0) {
 		return expression;
@@ -589,9 +557,6 @@ export const removeKeysFromExpression = (
 	}
 
 	const keysSet = new Set(keysToRemove.map((k) => k.trim().toLowerCase()));
-	const operatorsSet = operatorsToRemove
-		? new Set(operatorsToRemove.map((op) => op.trim().toLowerCase()))
-		: null;
 	// Tracks keys for which a variable expression has already been removed.
 	// Having multiple $-value clauses for the same key is invalid; we remove at most one.
 	const removedVariableKeys = new Set<string>();
@@ -693,13 +658,6 @@ export const removeKeysFromExpression = (
 			return src(ctx);
 		}
 
-		if (operatorsSet) {
-			const operator = getComparisonOperator(ctx);
-			if (!operator || !operatorsSet.has(operator)) {
-				return src(ctx);
-			}
-		}
-
 		if (removeOnlyVariableExpressions) {
 			// Scope the value check to value nodes only — not the full comparison text —
 			// so a key that contains '$' does not trigger removal when the value is a

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

@@ -1,526 +0,0 @@
-import {
-	convertFiltersToExpression,
-	convertFiltersToExpressionWithExistingQuery,
-} from 'components/QueryBuilderV2/utils';
-import { QuickFiltersSource } from 'components/QuickFilters/types';
-import {
-	Query,
-	TagFilter,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	applyCheckboxToggle,
-	clearFilterFromQuery,
-	deriveCheckboxState,
-	getNotInOperator,
-} from './checkboxFilterQuery';
-import { CheckedState } from '../../types';
-import { SectionType } from './v2/itemRules';
-
-const KEY = 'service.name';
-
-/**
- * Mini test framework
- * -------------------
- * `filters.items` is the source of truth the checkbox algebra mutates.
- * `filter.expression` is the derived value the backend actually reads, and it is
- * authoritatively rebuilt from the items on every URL round trip
- * (`useGetCompositeQueryParam` -> `convertFiltersToExpressionWithExistingQuery`).
- * That rebuild is additive, so `applyCheckboxToggle` re-derives its own clauses
- * into the expression itself: otherwise the round trip resurrects a clause the
- * toggle removed, or appends a duplicate of one it replaced.
- *
- * So a case does not assert the intermediate expression the toggle emits. It
- * asserts the pair that has to stay consistent:
- *   - `items`      : exact structured clauses after the toggle
- *   - `expression` : the expression AFTER the round trip, which is what ships
- *
- * `runToggle` runs the real reducer, then feeds its output through the real
- * converter to get the shipped expression.
- */
-
-type SimpleItem = {
-	key: string;
-	op: string;
-	value: TagFilterItem['value'];
-};
-
-function toTagItem(item: SimpleItem, idx: number): TagFilterItem {
-	return {
-		id: `id-${idx}`,
-		key: { key: item.key, type: 'tag' } as TagFilterItem['key'],
-		op: item.op,
-		value: item.value,
-	};
-}
-
-// Serialises items into an expression (via the app's own converter) so a case's
-// starting state is self-consistent (items and expression agree), the way it
-// would be in the app after a prior round trip.
-const serializeItems = (items: SimpleItem[]): string =>
-	convertFiltersToExpression({ items: items.map(toTagItem), op: 'AND' })
-		.expression;
-
-function buildQuery(items: SimpleItem[], expression: string): Query {
-	return {
-		builder: {
-			queryData: [
-				{
-					filters: { items: items.map(toTagItem), op: 'AND' },
-					filter: { expression },
-				},
-			],
-		},
-	} as unknown as Query;
-}
-
-// Simulates the URL round trip: rebuild the shipped expression from the items,
-// reconciled against whatever expression the toggle left behind. Trimmed to
-// absorb a converter quirk that leaves a trailing space when it widens an
-// operator in place (e.g. `=` -> `IN`).
-function roundTripExpression(
-	items: TagFilterItem[],
-	emittedExpression: string,
-): string {
-	const filters: TagFilter = { items, op: 'AND' };
-	const { filter } = convertFiltersToExpressionWithExistingQuery(
-		filters,
-		emittedExpression,
-	);
-	return (filter?.expression ?? '').trim();
-}
-
-interface ToggleAction {
-	value: string;
-	checked: boolean;
-	isOnlyOrAllClicked?: boolean;
-	previousState?: CheckedState;
-	sectionType?: SectionType;
-	source?: QuickFiltersSource;
-	attributeValues?: string[];
-}
-
-interface ToggleCase {
-	name: string;
-	initial?: { items?: SimpleItem[]; expression?: string };
-	action: ToggleAction;
-	expected: { items: SimpleItem[]; expression: string };
-}
-
-function runToggle(c: ToggleCase): { items: SimpleItem[]; expression: string } {
-	const initialItems = c.initial?.items ?? [];
-	const initialExpression =
-		c.initial?.expression ?? serializeItems(initialItems);
-
-	const result = applyCheckboxToggle({
-		currentQuery: buildQuery(initialItems, initialExpression),
-		activeQueryIndex: 0,
-		filter: { attributeKey: { key: KEY, type: 'tag' } } as never,
-		source: c.action.source ?? QuickFiltersSource.LOGS_EXPLORER,
-		attributeValues: c.action.attributeValues ?? ['a', 'b', 'c'],
-		value: c.action.value,
-		checked: c.action.checked,
-		isOnlyOrAllClicked: c.action.isOnlyOrAllClicked ?? false,
-		previousState: c.action.previousState,
-		sectionType: c.action.sectionType,
-	});
-
-	const active = result.builder.queryData[0];
-	const items = active?.filters?.items ?? [];
-	return {
-		items: items.map((item) => ({
-			key: item.key?.key ?? '',
-			op: item.op,
-			value: item.value,
-		})),
-		expression: roundTripExpression(items, active?.filter?.expression ?? ''),
-	};
-}
-
-// Flat list. Every row asserts both the structured items and the shipped
-// (round-tripped) expression, which must stay in sync.
-const TOGGLE_CASES: ToggleCase[] = [
-	{
-		name: 'no clause, checked -> IN',
-		action: { value: 'a', checked: true },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: 'a' }],
-			expression: `service.name in ['a']`,
-		},
-	},
-	{
-		name: 'no clause, unchecked -> NOT IN',
-		action: { value: 'a', checked: false },
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: 'a' }],
-			expression: `service.name not in ['a']`,
-		},
-	},
-	{
-		name: 'no clause, unchecked on infra -> not in',
-		action: {
-			value: 'a',
-			checked: false,
-			source: QuickFiltersSource.INFRA_MONITORING,
-		},
-		// `nin` is what the source asks for, but re-deriving the expression
-		// normalises it. Nothing observes the difference: both infra pages send
-		// `filter.expression` and never `filters.items`.
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: 'a' }],
-			expression: `service.name not in ['a']`,
-		},
-	},
-	{
-		name: 'IN, check another value -> appended',
-		initial: { items: [{ key: KEY, op: 'in', value: ['a'] }] },
-		action: { value: 'b', checked: true },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
-			expression: `service.name in ['a', 'b']`,
-		},
-	},
-	{
-		name: 'IN, check when value is scalar -> promoted to array',
-		initial: { items: [{ key: KEY, op: 'in', value: 'a' }] },
-		action: { value: 'b', checked: true },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
-			expression: `service.name in ['a', 'b']`,
-		},
-	},
-	{
-		name: 'IN, uncheck one of many -> filtered out',
-		initial: { items: [{ key: KEY, op: 'in', value: ['a', 'b'] }] },
-		action: { value: 'a', checked: false },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: ['b'] }],
-			expression: `service.name in ['b']`,
-		},
-	},
-	{
-		name: 'IN, uncheck last value in array -> clause gone',
-		initial: { items: [{ key: KEY, op: 'in', value: ['a'] }] },
-		action: { value: 'a', checked: false },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: 'IN, uncheck scalar value -> clause gone',
-		initial: { items: [{ key: KEY, op: 'in', value: 'a' }] },
-		action: { value: 'a', checked: false },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: 'IN, uncheck in RELATED section -> replaced by NOT IN for that value',
-		initial: { items: [{ key: KEY, op: 'in', value: ['a', 'b'] }] },
-		action: { value: 'a', checked: false, sectionType: SectionType.RELATED },
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: 'a' }],
-			expression: `service.name not in ['a']`,
-		},
-	},
-	{
-		name: 'NOT IN, was unchecked then checked -> replaced by IN for that value',
-		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
-		action: { value: 'b', checked: true, previousState: 'unchecked' },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: 'b' }],
-			expression: `service.name in ['b']`,
-		},
-	},
-	{
-		name: 'NOT IN, re-checking an excluded value clears it, not flips it to IN',
-		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
-		action: { value: 'a', checked: true, previousState: 'unchecked' },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: 'NOT IN, re-checking one of several excluded values keeps the rest',
-		initial: { items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }] },
-		action: { value: 'a', checked: true, previousState: 'unchecked' },
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: ['b'] }],
-			expression: `service.name not in ['b']`,
-		},
-	},
-	{
-		name: 'NOT IN, exclude another value -> appended',
-		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
-		action: { value: 'b', checked: false },
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
-			expression: `service.name not in ['a', 'b']`,
-		},
-	},
-	{
-		name: 'NOT IN, exclude when scalar -> promoted to array',
-		initial: { items: [{ key: KEY, op: 'not in', value: 'a' }] },
-		action: { value: 'b', checked: false },
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
-			expression: `service.name not in ['a', 'b']`,
-		},
-	},
-	{
-		name: 'NOT IN, check an excluded value -> removed from array',
-		initial: { items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }] },
-		action: { value: 'a', checked: true },
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: ['b'] }],
-			expression: `service.name not in ['b']`,
-		},
-	},
-	{
-		name: 'NOT IN, check last excluded value in array -> clause gone',
-		initial: { items: [{ key: KEY, op: 'not in', value: ['a'] }] },
-		action: { value: 'a', checked: true },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: 'NOT IN, check excluded scalar value -> clause gone',
-		initial: { items: [{ key: KEY, op: 'not in', value: 'a' }] },
-		action: { value: 'a', checked: true },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: '= check another value -> promoted to IN array',
-		initial: { items: [{ key: KEY, op: '=', value: 'a' }] },
-		action: { value: 'b', checked: true },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
-			expression: `service.name in ['a', 'b']`,
-		},
-	},
-	{
-		name: '= uncheck -> clause gone',
-		initial: { items: [{ key: KEY, op: '=', value: 'a' }] },
-		action: { value: 'a', checked: false },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: '!= exclude another value -> promoted to NOT IN array',
-		initial: { items: [{ key: KEY, op: '!=', value: 'a' }] },
-		action: { value: 'b', checked: false },
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
-			expression: `service.name not in ['a', 'b']`,
-		},
-	},
-	{
-		name: '!= exclude another value on infra -> not in array',
-		initial: { items: [{ key: KEY, op: '!=', value: 'a' }] },
-		action: {
-			value: 'b',
-			checked: false,
-			source: QuickFiltersSource.INFRA_MONITORING,
-		},
-		expected: {
-			items: [{ key: KEY, op: 'not in', value: ['a', 'b'] }],
-			expression: `service.name not in ['a', 'b']`,
-		},
-	},
-	{
-		name: '!= check -> clause gone',
-		initial: { items: [{ key: KEY, op: '!=', value: 'a' }] },
-		action: { value: 'a', checked: true },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: 'Only with no clause -> IN scalar',
-		action: { value: 'a', checked: true, isOnlyOrAllClicked: true },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: 'a' }],
-			expression: `service.name in ['a']`,
-		},
-	},
-	{
-		name: 'Only replaces a multi-value IN with a single value',
-		initial: { items: [{ key: KEY, op: 'in', value: ['a', 'b'] }] },
-		action: { value: 'a', checked: true, isOnlyOrAllClicked: true },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: 'a' }],
-			expression: `service.name in ['a']`,
-		},
-	},
-	{
-		name: 'All (clicking the sole selected value) -> clause gone',
-		initial: { items: [{ key: KEY, op: 'in', value: ['a'] }] },
-		action: { value: 'a', checked: true, isOnlyOrAllClicked: true },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: 'dropping the last clause keeps other keys in the expression',
-		initial: {
-			items: [{ key: KEY, op: 'in', value: 'a' }],
-			expression: `${KEY} = 'a' AND http.method = 'GET'`,
-		},
-		action: { value: 'a', checked: false },
-		// The seeded items omit the http.method clause the expression carries;
-		// re-deriving reconciles it back, which is why items is not empty here.
-		expected: {
-			items: [{ key: 'http.method', op: '=', value: 'GET' }],
-			expression: `http.method = 'GET'`,
-		},
-	},
-	{
-		name: 'dropping the last clause strips the prefixed spelling too',
-		initial: {
-			items: [{ key: 'resource.service.name', op: 'in', value: 'a' }],
-			expression: `resource.service.name = 'a'`,
-		},
-		action: { value: 'a', checked: false },
-		expected: { items: [], expression: '' },
-	},
-	{
-		name: 'removing the value must keep a free-form clause on the same key',
-		initial: {
-			items: [{ key: KEY, op: '=', value: 'a' }],
-			expression: `${KEY} = 'a' AND ${KEY} CONTAINS 'keepme'`,
-		},
-		action: { value: 'a', checked: false },
-		expected: {
-			items: [{ key: KEY, op: 'contains', value: 'keepme' }],
-			expression: `service.name CONTAINS 'keepme'`,
-		},
-	},
-	{
-		name: 'a second clause on the same key must not survive an add',
-		initial: {
-			items: [{ key: KEY, op: 'in', value: ['a'] }],
-			expression: `${KEY} IN ['a'] AND ${KEY} != 'z'`,
-		},
-		action: { value: 'b', checked: true },
-		expected: {
-			items: [{ key: KEY, op: 'in', value: ['a', 'b'] }],
-			expression: `service.name in ['a', 'b']`,
-		},
-	},
-];
-
-describe('applyCheckboxToggle (items + shipped expression stay in sync)', () => {
-	it.each(TOGGLE_CASES)('$name', (c) => {
-		const got = runToggle(c);
-		expect(got.items).toStrictEqual(c.expected.items);
-		expect(got.expression).toBe(c.expected.expression);
-	});
-});
-
-describe('getNotInOperator', () => {
-	it('returns short "nin" for infra monitoring', () => {
-		expect(getNotInOperator(QuickFiltersSource.INFRA_MONITORING)).toBe('nin');
-	});
-
-	it('returns long "not in" for other sources', () => {
-		expect(getNotInOperator(QuickFiltersSource.LOGS_EXPLORER)).toBe('not in');
-		expect(getNotInOperator(QuickFiltersSource.TRACES_EXPLORER)).toBe('not in');
-	});
-});
-
-describe('deriveCheckboxState', () => {
-	const attributeValues = ['a', 'b', 'c'];
-
-	const state = (items: TagFilterItem[] | undefined): Record<string, boolean> =>
-		deriveCheckboxState({ attributeValues, filterItems: items, filterKey: KEY });
-
-	it('no clause for key -> everything checked', () => {
-		expect(state([])).toStrictEqual({ a: true, b: true, c: true });
-		expect(state(undefined)).toStrictEqual({ a: true, b: true, c: true });
-	});
-
-	it('unrelated clause only -> everything checked', () => {
-		expect(
-			state([toTagItem({ key: 'other', op: 'in', value: ['a'] }, 0)]),
-		).toStrictEqual({ a: true, b: true, c: true });
-	});
-
-	it('IN [list] -> only listed values checked', () => {
-		expect(
-			state([toTagItem({ key: KEY, op: 'in', value: ['a', 'c'] }, 0)]),
-		).toStrictEqual({ a: true, b: false, c: true });
-	});
-
-	it('= "value" -> only that value checked', () => {
-		expect(
-			state([toTagItem({ key: KEY, op: '=', value: 'b' }, 0)]),
-		).toStrictEqual({ a: false, b: true, c: false });
-	});
-
-	it('NOT IN [list] -> everything except excluded checked', () => {
-		expect(
-			state([toTagItem({ key: KEY, op: 'not in', value: ['a'] }, 0)]),
-		).toStrictEqual({ a: false, b: true, c: true });
-	});
-
-	it('!= "value" -> everything except that value checked', () => {
-		expect(
-			state([toTagItem({ key: KEY, op: '!=', value: 'b' }, 0)]),
-		).toStrictEqual({ a: true, b: false, c: true });
-	});
-
-	it('matches by base key across context prefixes', () => {
-		expect(
-			state([
-				toTagItem({ key: 'resource.service.name', op: 'in', value: ['a'] }, 0),
-			]),
-		).toStrictEqual({ a: true, b: false, c: false });
-	});
-
-	it('coerces boolean / number values to string keys', () => {
-		expect(
-			deriveCheckboxState({
-				attributeValues: ['true', '42'],
-				filterItems: [toTagItem({ key: KEY, op: '=', value: true }, 0)],
-				filterKey: KEY,
-			}),
-		).toStrictEqual({ true: true, '42': false });
-	});
-});
-
-describe('clearFilterFromQuery', () => {
-	it('removes the key from items and expression at the active index only', () => {
-		const query = {
-			builder: {
-				queryData: [
-					{
-						filters: {
-							items: [
-								toTagItem({ key: KEY, op: 'in', value: ['a'] }, 0),
-								toTagItem({ key: 'http.method', op: '=', value: 'GET' }, 1),
-							],
-							op: 'AND',
-						},
-						filter: { expression: `${KEY} = 'a' AND http.method = 'GET'` },
-					},
-					{
-						filters: {
-							items: [toTagItem({ key: KEY, op: 'in', value: ['a'] }, 2)],
-							op: 'AND',
-						},
-						filter: { expression: `${KEY} = 'a'` },
-					},
-				],
-			},
-		} as unknown as Query;
-
-		const result = clearFilterFromQuery({
-			currentQuery: query,
-			filter: { attributeKey: { key: KEY, type: 'tag' } } as never,
-			activeQueryIndex: 0,
-		});
-
-		const active = result.builder.queryData[0];
-		expect(active.filters?.items).toStrictEqual([
-			expect.objectContaining({
-				key: expect.objectContaining({ key: 'http.method' }),
-			}),
-		]);
-		expect(active.filter?.expression).toBe(`http.method = 'GET'`);
-
-		// Other queries keep both halves: stripping their expression while leaving
-		// their items alone only churned a clause the round trip put straight back.
-		const other = result.builder.queryData[1];
-		expect(other.filters?.items).toHaveLength(1);
-		expect(other.filter?.expression).toBe(`${KEY} = 'a'`);
-	});
-});

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

@@ -1,8 +1,5 @@
 /* eslint-disable sonarjs/no-identical-functions */
-import {
-	convertFiltersToExpressionWithExistingQuery,
-	removeKeysFromExpression,
-} from 'components/QueryBuilderV2/utils';
+import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
@@ -13,33 +10,13 @@ import { cloneDeep, isArray } from 'lodash-es';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-import { getKeySpellings, isKeyMatch } from './utils';
+import { isKeyMatch } from './utils';
 import { CheckedState } from '../../types';
 import { SectionType } from './v2/itemRules';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
 
-// The operators this algebra emits, and so the only ones it may rewrite out of an
-// expression. A hand-written clause on the same key (CONTAINS, EXISTS, a range) is
-// none of its business and has to survive a toggle.
-const MANAGED_OPERATORS = [OPERATORS['='], OPERATORS['!='], 'in', 'not in'];
-
-/**
- * Drops this filter's own clauses for `key` from `expression`, leaving every other
- * key and any clause the checkbox does not manage untouched. Matches all context
- * prefixes, since `isKeyMatch` treats `service.name` and `resource.service.name` as
- * the same filter but expression rewrites match keys literally.
- */
-function removeManagedClauses(expression: string, key: string): string {
-	return removeKeysFromExpression(
-		expression,
-		getKeySpellings(key),
-		false,
-		MANAGED_OPERATORS,
-	);
-}
-
 // Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
 const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
 
@@ -125,8 +102,8 @@ export function deriveCheckboxState({
 }
 
 /**
- * Returns a new query with this filter's clauses for the attribute key removed from
- * the active query, both from the structured filter items and the raw expression.
+ * Returns a new query with every clause for this attribute key removed, both
+ * from the structured filter items and the raw filter expression.
  */
 export function clearFilterFromQuery({
 	currentQuery,
@@ -141,28 +118,24 @@ export function clearFilterFromQuery({
 		...currentQuery,
 		builder: {
 			...currentQuery.builder,
-			queryData: currentQuery.builder.queryData.map((item, idx) => {
-				if (idx !== activeQueryIndex) {
-					return item;
-				}
-				return {
-					...item,
-					filter: {
-						expression: removeManagedClauses(
-							item.filter?.expression ?? '',
-							filter.attributeKey.key,
-						),
-					},
-					filters: {
-						...item.filters,
-						items:
-							item.filters?.items?.filter(
-								(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
-							) || [],
-						op: item.filters?.op || 'AND',
-					},
-				};
-			}),
+			queryData: currentQuery.builder.queryData.map((item, idx) => ({
+				...item,
+				filter: {
+					expression: removeKeysFromExpression(item.filter?.expression ?? '', [
+						filter.attributeKey.key,
+					]),
+				},
+				filters: {
+					...item.filters,
+					items:
+						idx === activeQueryIndex
+							? item.filters?.items?.filter(
+									(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+								) || []
+							: [...(item.filters?.items || [])],
+					op: item.filters?.op || 'AND',
+				},
+			})),
 		},
 	};
 }
@@ -221,6 +194,12 @@ export function applyCheckboxToggle({
 			(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
 		);
 
+		if (query.filter?.expression) {
+			query.filter.expression = removeKeysFromExpression(query.filter.expression, [
+				filter.attributeKey.key,
+			]);
+		}
+
 		if (isOnlyOrAll === 'Only') {
 			const newFilterItem: TagFilterItem = {
 				id: uuid(),
@@ -288,6 +267,12 @@ export function applyCheckboxToggle({
 									}
 									return item;
 								});
+								if (query.filter?.expression) {
+									query.filter.expression = removeKeysFromExpression(
+										query.filter.expression,
+										[filter.attributeKey.key],
+									);
+								}
 							} else if (isArray(currentFilter.value)) {
 								// if we are removing some value when the running operator is IN we filter.
 								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
@@ -324,10 +309,9 @@ export function applyCheckboxToggle({
 							? currentFilter.value.includes(value)
 							: currentFilter.value === value;
 
-						// When clicking an unchecked value that is not itself excluded, the user
-						// wants to SELECT it: replace the NOT IN filter with IN [value]. A value
-						// that IS in the exclusion list falls through to the removal branch below.
-						if (previousState === 'unchecked' && checked && !isValueInFilter) {
+						// When clicking unchecked "Other" item, user wants to SELECT it
+						// Replace NOT IN filter with IN [value]
+						if (previousState === 'unchecked' && checked) {
 							const newFilter: TagFilterItem = {
 								id: uuid(),
 								op: getOperatorValue(OPERATORS.IN),
@@ -340,6 +324,12 @@ export function applyCheckboxToggle({
 								}
 								return item;
 							});
+							if (query.filter?.expression) {
+								query.filter.expression = removeKeysFromExpression(
+									query.filter.expression,
+									[filter.attributeKey.key],
+								);
+							}
 						} else if (!checked || !isValueInFilter) {
 							// Add to NOT IN when:
 							// - checked=false (user explicitly unchecked to exclude)
@@ -379,6 +369,12 @@ export function applyCheckboxToggle({
 									query.filters.items = query.filters.items.filter(
 										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
+									if (query.filter?.expression) {
+										query.filter.expression = removeKeysFromExpression(
+											query.filter.expression,
+											[filter.attributeKey.key],
+										);
+									}
 								} else {
 									query.filters.items = query.filters.items.map((item) => {
 										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
@@ -388,6 +384,16 @@ export function applyCheckboxToggle({
 									});
 								}
 							} else {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value === value ? null : currentFilter.value,
+								};
+								if (newFilter.value === null && query.filter?.expression) {
+									query.filter.expression = removeKeysFromExpression(
+										query.filter.expression,
+										[filter.attributeKey.key],
+									);
+								}
 								query.filters.items = query.filters.items.filter(
 									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
@@ -450,18 +456,6 @@ export function applyCheckboxToggle({
 		}
 	}
 
-	if (query) {
-		const synced = convertFiltersToExpressionWithExistingQuery(
-			query.filters ?? { items: [], op: 'AND' },
-			removeManagedClauses(
-				query.filter?.expression ?? '',
-				filter.attributeKey.key,
-			),
-		);
-		query.filter = synced.filter;
-		query.filters = synced.filters;
-	}
-
 	return {
 		...currentQuery,
 		builder: {

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

@@ -39,16 +39,3 @@ export function isKeyMatch(
 ): boolean {
 	return getKeyWithoutPrefix(itemKey) === getKeyWithoutPrefix(filterKey);
 }
-
-/**
- * Every spelling of a key that `isKeyMatch` treats as equal: the base name plus
- * each context-prefixed form. Expression rewrites match keys literally, so they
- * need the whole list where the items side only needs `isKeyMatch`.
- */
-export function getKeySpellings(key: string | undefined): string[] {
-	const base = getKeyWithoutPrefix(key);
-	if (!base) {
-		return [];
-	}
-	return [base, ...FIELD_CONTEXT_PREFIXES.map((prefix) => `${prefix}.${base}`)];
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -22,10 +22,7 @@ interface UseFieldValuesReturn {
 	isFetching: boolean;
 }
 
-export const DATA_SOURCE_TO_SIGNAL: Record<
-	DataSource,
-	TelemetrytypesSignalDTO
-> = {
+const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
 	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
 	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
 	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -17,7 +17,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 function SortableFilter({
 	filter,
@@ -25,13 +25,13 @@ function SortableFilter({
 	allowDrag,
 	allowRemove,
 }: {
-	filter: TelemetryFieldKey;
-	onRemove: (filter: TelemetryFieldKey) => void;
+	filter: FilterType;
+	onRemove: (filter: FilterType) => void;
 	allowDrag: boolean;
 	allowRemove: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: filter.key as string });
+		useSortable({ id: filter.key });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -46,14 +46,14 @@ function SortableFilter({
 		>
 			<div {...attributes} {...listeners} className="drag-handle">
 				{allowDrag && <GripVertical size={16} />}
-				{filter.name}
+				{filter.key}
 			</div>
 			{allowRemove && (
 				<Button
 					className="remove-filter-btn periscope-btn"
 					size="small"
 					onClick={(): void => {
-						onRemove(filter);
+						onRemove(filter as FilterType);
 					}}
 				>
 					Remove
@@ -69,8 +69,8 @@ function AddedFilters({
 	setAddedFilters,
 }: {
 	inputValue: string;
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 }): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
@@ -90,12 +90,12 @@ function AddedFilters({
 	const filteredAddedFilters = useMemo(
 		() =>
 			addedFilters.filter((filter) =>
-				filter.name.toLowerCase().includes(inputValue.toLowerCase()),
+				filter.key.toLowerCase().includes(inputValue.toLowerCase()),
 			),
 		[addedFilters, inputValue],
 	);
 
-	const handleRemoveFilter = (filter: TelemetryFieldKey): void => {
+	const handleRemoveFilter = (filter: FilterType): void => {
 		setAddedFilters((prev) => prev.filter((f) => f.key !== filter.key));
 	};
 
@@ -116,7 +116,7 @@ function AddedFilters({
 							<div className="no-values-found">No values found</div>
 						) : (
 							<SortableContext
-								items={addedFilters.map((f) => f.key as string)}
+								items={addedFilters.map((f) => f.key)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -1,17 +1,17 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
-import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DATA_SOURCE_TO_SIGNAL } from 'components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import {
-	FieldContext,
-	FieldDataType,
-	TelemetryFieldKey,
-} from 'types/api/v5/queryRange';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { DataSource } from 'types/common/queryBuilder';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -37,48 +37,106 @@ function OtherFilters({
 }: {
 	signal: SignalType | undefined;
 	inputValue: string;
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 }): JSX.Element {
-	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
-
-	const { data, isFetching } = useGetFieldsKeys(
-		{
-			searchText: inputValue,
-			signal: signal
-				? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-				: undefined,
-			source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
-		},
-		{ query: { enabled: !!signal } },
+	const isLogDataSource = useMemo(
+		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
+		[signal],
+	);
+	const isMeterDataSource = useMemo(
+		() => signal && signal === SignalType.METER_EXPLORER,
+		[signal],
 	);
 
-	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data?.keys ?? {}).flat();
-		// Normalize: synthesize the composite `key` once so downstream reads (dedupe,
-		// add, render) can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
-			name: attr.name,
-			signal: attr.signal as TelemetryFieldKey['signal'],
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.fieldDataType as FieldDataType,
-			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
-		}));
-
-		const addedKeys = new Set(
-			addedFilters.map((filter) =>
-				buildCompositeKey(filter.name, filter.fieldContext, filter.fieldDataType),
-			),
+	const { data: suggestionsData, isFetching: isFetchingSuggestions } =
+		useGetAttributeSuggestions(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				filters: {} as TagFilter,
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isLogDataSource,
+			},
 		);
-		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
-	}, [data, addedFilters]);
 
-	const handleAddFilter = (filter: TelemetryFieldKey): void => {
-		setAddedFilters((prev) => [...prev, filter]);
+	const { data: aggregateKeysData, isFetching: isFetchingAggregateKeys } =
+		useGetAggregateKeys(
+			{
+				searchText: inputValue,
+				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				aggregateOperator: 'noop',
+				aggregateAttribute: '',
+				tagType: '',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && !isLogDataSource && !isMeterDataSource,
+			},
+		);
+
+	const { data: fieldKeysData, isLoading: isLoadingFieldKeys } =
+		useGetQueryKeySuggestions(
+			{
+				searchText: inputValue,
+				signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+				signalSource: 'meter',
+			},
+			{
+				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+				enabled: !!signal && isMeterDataSource,
+			},
+		);
+
+	const otherFilters = useMemo(() => {
+		let filterAttributes;
+		if (isLogDataSource) {
+			filterAttributes = suggestionsData?.payload?.attributes || [];
+		} else if (isMeterDataSource) {
+			const fieldKeys: QueryKeyDataSuggestionsProps[] = Object.values(
+				fieldKeysData?.data?.data?.keys || {},
+			)?.flat();
+			filterAttributes = fieldKeys.map(
+				(attr) =>
+					({
+						key: attr.name,
+						dataType: attr.fieldDataType,
+						type: attr.fieldContext,
+						signal: attr.signal,
+					}) as BaseAutocompleteData,
+			);
+		} else {
+			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
+		}
+		return filterAttributes?.filter(
+			(attr) => !addedFilters.some((filter) => filter.key === attr.key),
+		);
+	}, [
+		suggestionsData,
+		aggregateKeysData,
+		addedFilters,
+		isLogDataSource,
+		fieldKeysData,
+		isMeterDataSource,
+	]);
+
+	const handleAddFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => [
+			...prev,
+			{
+				key: filter.key,
+				dataType: filter.dataType,
+				type: filter.type,
+			},
+		]);
 	};
 
 	const renderFilters = (): React.ReactNode => {
-		if (isFetching) {
+		const isLoading =
+			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
+		if (isLoading) {
 			return <OtherFiltersSkeleton />;
 		}
 		if (!otherFilters?.length) {
@@ -87,11 +145,11 @@ function OtherFilters({
 
 		return otherFilters.map((filter) => (
 			<div key={filter.key} className="qf-filter-item other-filters-item">
-				<div className="qf-filter-key">{filter.name}</div>
+				<div className="qf-filter-key">{filter.key}</div>
 				<Button
 					className="add-filter-btn periscope-btn"
 					size="small"
-					onClick={(): void => handleAddFilter(filter)}
+					onClick={(): void => handleAddFilter(filter as FilterType)}
 				>
 					Add
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,7 +1,8 @@
+import { useMemo } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { SignalType } from '../types';
 import AddedFilters from './AddedFilters';
@@ -18,7 +19,7 @@ function QuickFiltersSettings({
 }: {
 	signal: SignalType | undefined;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 }): JSX.Element {
 	const {
@@ -27,7 +28,6 @@ function QuickFiltersSettings({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		handleInputChange,
@@ -39,6 +39,18 @@ function QuickFiltersSettings({
 		signal,
 	});
 
+	const hasUnsavedChanges = useMemo(
+		() =>
+			// check if both arrays have the same length and same order of elements
+			!(
+				addedFilters.length === customFilters.length &&
+				addedFilters.every(
+					(filter, index) => filter.key === customFilters[index].key,
+				)
+			),
+		[addedFilters, customFilters],
+	);
+
 	return (
 		<>
 			<div className="qf-header">

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -1,31 +1,27 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useUpdateQuickFilters } from 'api/generated/services/quick-filter';
+import { useCallback, useState } from 'react';
+import { useMutation } from 'react-query';
 import logEvent from 'api/common/logEvent';
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import updateCustomFiltersAPI from 'api/quickFilters/updateCustomFilters';
+import axios, { AxiosError } from 'axios';
 import { SignalType } from 'components/QuickFilters/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 	signal?: SignalType;
 }
 
 interface UseQuickFilterSettingsReturn {
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 	handleSettingsClose: () => void;
 	handleDiscardChanges: () => void;
 	handleSaveChanges: () => void;
-	hasUnsavedChanges: boolean;
 	isUpdatingCustomFilters: boolean;
 	inputValue: string;
 	setInputValue: React.Dispatch<React.SetStateAction<string>>;
@@ -41,43 +37,27 @@ const useQuickFilterSettings = ({
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
-	const normalizedCustomFilters = useMemo<TelemetryFieldKey[]>(
-		() =>
-			customFilters.map((filter) => ({
-				...filter,
-				key: buildCompositeKey(
-					filter.name,
-					filter.fieldContext,
-					filter.fieldDataType,
-				),
-			})),
-		[customFilters],
-	);
-	const [addedFilters, setAddedFilters] = useState<TelemetryFieldKey[]>(
-		normalizedCustomFilters,
-	);
+	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
 	const { notifications } = useNotifications();
 
 	const { mutate: updateCustomFilters, isLoading: isUpdatingCustomFilters } =
-		useUpdateQuickFilters({
-			mutation: {
-				onSuccess: () => {
-					setIsSettingsOpen(false);
-					refetchCustomFilters();
-					void logEvent('Quick Filters Settings: changes saved', {
-						addedFilters,
-					});
-					notifications.success({
-						message: 'Quick filters updated successfully',
-						placement: 'bottomRight',
-					});
-				},
-				onError: (error) => {
-					notifications.error({
-						message: error.message || SOMETHING_WENT_WRONG,
-						placement: 'bottomRight',
-					});
-				},
+		useMutation(updateCustomFiltersAPI, {
+			onSuccess: () => {
+				setIsSettingsOpen(false);
+				refetchCustomFilters();
+				logEvent('Quick Filters Settings: changes saved', {
+					addedFilters,
+				});
+				notifications.success({
+					message: 'Quick filters updated successfully',
+					placement: 'bottomRight',
+				});
+			},
+			onError: (error: AxiosError) => {
+				notifications.error({
+					message: axios.isAxiosError(error) ? error.message : SOMETHING_WENT_WRONG,
+					placement: 'bottomRight',
+				});
 			},
 		});
 	const debouncedUpdate = useDebouncedFn((value) => {
@@ -98,32 +78,19 @@ const useQuickFilterSettings = ({
 	}, [setIsSettingsOpen]);
 
 	const handleDiscardChanges = useCallback((): void => {
-		setAddedFilters(normalizedCustomFilters);
-	}, [normalizedCustomFilters, setAddedFilters]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				addedFilters.length === normalizedCustomFilters.length &&
-				addedFilters.every(
-					(filter, index) => filter.key === normalizedCustomFilters[index].key,
-				)
-			),
-		[addedFilters, normalizedCustomFilters],
-	);
+		setAddedFilters(customFilters);
+	}, [customFilters, setAddedFilters]);
 
 	const handleSaveChanges = useCallback((): void => {
 		if (signal) {
 			updateCustomFilters({
-				pathParams: { source: signal },
 				data: {
-					// Send only the stored TelemetryFieldKey fields; the composite `key`
-					// is UI-only.
 					filters: addedFilters.map((filter) => ({
-						name: filter.name,
-						fieldContext: filter.fieldContext as TelemetrytypesFieldContextDTO,
-						fieldDataType: filter.fieldDataType as TelemetrytypesFieldDataTypeDTO,
+						key: filter.key,
+						datatype: filter.dataType,
+						type: filter.type,
 					})),
+					signal,
 				},
 			});
 		}
@@ -135,7 +102,6 @@ const useQuickFilterSettings = ({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		setInputValue,

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import { useGetQuickFilters } from 'api/generated/services/quick-filter';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { useQuery } from 'react-query';
+import getCustomFilters from 'api/quickFilters/getCustomFilters';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { IQuickFiltersConfig, SignalType } from '../types';
 import { getFilterConfig } from '../utils';
@@ -11,7 +13,7 @@ interface UseFilterConfigProps {
 }
 interface UseFilterConfigReturn {
 	filterConfig: IQuickFiltersConfig[];
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	isCustomFiltersLoading: boolean;
 	isDynamicFilters: boolean;
 	refetchCustomFilters: () => void;
@@ -23,16 +25,17 @@ const useFilterConfig = ({
 }: UseFilterConfigProps): UseFilterConfigReturn => {
 	const {
 		isFetching: isCustomFiltersLoading,
-		data,
+		data: customFilters = [],
 		refetch,
-	} = useGetQuickFilters(
-		{ source: signal ?? '' },
-		{ query: { enabled: !!signal } },
-	);
-
-	const customFilters = useMemo<TelemetryFieldKey[]>(
-		() => (data?.data?.filters ?? []) as TelemetryFieldKey[],
-		[data],
+	} = useQuery<FilterType[], Error>(
+		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
+		async () => {
+			const res = await getCustomFilters({ signal: signal || '' });
+			return 'payload' in res && res.payload?.filters ? res.payload.filters : [];
+		},
+		{
+			enabled: !!signal,
+		},
 	);
 
 	const isDynamicFilters = useMemo(

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -11,7 +11,7 @@ import {
 } from 'mocks-server/__mockdata__/customQuickFilters';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import '@testing-library/jest-dom';
 
@@ -34,9 +34,9 @@ const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
-const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const saveQuickFiltersURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const quickFiltersSuggestionsURL = `${BASE_URL}/api/v1/fields/keys`;
+const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
+const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
+const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
 const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
 const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
@@ -338,63 +338,6 @@ describe('Quick Filters with custom filters', () => {
 		);
 	});
 
-	it('keeps same-name fields with different context as distinct entries', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		server.use(
-			rest.get(quickFiltersSuggestionsURL, (_req, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							complete: true,
-							keys: {
-								level: [
-									{
-										name: 'level',
-										fieldContext: 'attribute',
-										fieldDataType: 'string',
-										signal: 'logs',
-									},
-									{
-										name: 'level',
-										fieldContext: 'span',
-										fieldDataType: 'string',
-										signal: 'logs',
-									},
-								],
-							},
-						},
-					}),
-				),
-			),
-		);
-
-		render(<TestQuickFilters signal={SIGNAL} />);
-		await screen.findByText(FILTER_SERVICE_NAME);
-
-		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
-
-		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
-		// Both `level` variants are shown despite sharing a name.
-		await waitFor(() =>
-			expect(within(otherSection).getAllByText('level')).toHaveLength(2),
-		);
-
-		// Adding one variant removes only that one; the other stays.
-		const firstLevel = within(otherSection).getAllByText('level')[0];
-		const addButton = firstLevel.parentElement?.querySelector('button');
-		await user.click(addButton as HTMLButtonElement);
-
-		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
-		await waitFor(() => {
-			expect(within(addedSection).getAllByText('level')).toHaveLength(1);
-			expect(within(otherSection).getAllByText('level')).toHaveLength(1);
-		});
-	});
-
 	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -513,10 +456,12 @@ describe('Quick Filters with custom filters', () => {
 		});
 
 		const requestBody = putHandler.mock.calls[0][0];
-		expect(requestBody.filters).not.toContainEqual(
-			expect.objectContaining({ name: FILTER_OS_DESCRIPTION }),
+		expect(requestBody.filters).toStrictEqual(
+			expect.arrayContaining([
+				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
+			]),
 		);
-		expect(requestBody.filters).toHaveLength(10);
+		expect(requestBody.signal).toBe(SIGNAL);
 	});
 
 	it('should render duration slider for duration_nono filter', async () => {
@@ -667,9 +612,9 @@ describe('Quick Filters refetch behavior', () => {
 				filters: [
 					...(quickFiltersListResponse.data.filters ?? []),
 					{
-						name: 'new.custom.filter',
-						fieldDataType: 'string',
-						fieldContext: 'resource',
+						key: 'new.custom.filter',
+						dataType: 'string',
+						type: 'resource',
 					} as const,
 				],
 			},

frontend/src/components/QuickFilters/utils.tsx

@@ -1,7 +1,5 @@
-import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { fieldDataTypeToDataType } from 'utils/fieldDataType';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { FiltersType, IQuickFiltersConfig, SignalType } from './types';
 
@@ -14,19 +12,6 @@ const FILTER_TYPE_MAP: Record<string, FiltersType> = {
 	duration_nano: FiltersType.DURATION,
 };
 
-// The map below exists only for the old v3 attribute-values fetch
-// (useCheckboxFilterValues), the sole reader of attributeKey.dataType/type.
-// Once the values fetch moves to fields/values, remove this and reduce
-// attributeKey to { id, key }.
-
-const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
-	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
-	[TelemetrytypesFieldContextDTO.resource]: 'resource',
-};
-
-const mapFieldContext = (fieldContext?: string): string =>
-	(fieldContext && FIELD_CONTEXT_TO_ATTRIBUTE_TYPE[fieldContext]) || '';
-
 const getFilterName = (str: string): string => {
 	if (FILTER_TITLE_MAP[str]) {
 		return FILTER_TITLE_MAP[str];
@@ -41,16 +26,16 @@ const getFilterName = (str: string): string => {
 		.join(' ');
 };
 
-const getFilterType = (att: TelemetryFieldKey): FiltersType => {
-	if (FILTER_TYPE_MAP[att.name]) {
-		return FILTER_TYPE_MAP[att.name];
+const getFilterType = (att: FilterType): FiltersType => {
+	if (FILTER_TYPE_MAP[att.key]) {
+		return FILTER_TYPE_MAP[att.key];
 	}
 	return FiltersType.CHECKBOX;
 };
 
 export const getFilterConfig = (
 	signal?: SignalType,
-	customFilters?: TelemetryFieldKey[],
+	customFilters?: FilterType[],
 	config?: IQuickFiltersConfig[],
 ): IQuickFiltersConfig[] => {
 	if (!customFilters?.length || !signal) {
@@ -61,13 +46,13 @@ export const getFilterConfig = (
 		(att, index) =>
 			({
 				type: getFilterType(att),
-				title: getFilterName(att.name),
+				title: getFilterName(att.key),
 				dataSource: SIGNAL_DATA_SOURCE_MAP[signal],
 				attributeKey: {
-					id: att.name,
-					key: att.name,
-					dataType: fieldDataTypeToDataType(att.fieldDataType),
-					type: mapFieldContext(att.fieldContext),
+					id: att.key,
+					key: att.key,
+					dataType: att.dataType,
+					type: att.type,
 				},
 				defaultOpen: index < 2,
 			}) as IQuickFiltersConfig,

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -4,18 +4,14 @@ import { refreshLicense } from 'api/generated/services/licenses';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { buildLicenseUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/license.permissions';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({
 	type,
 	className,
-	withPortal,
 }: {
 	type?: 'button' | 'text' | 'tooltip';
 	className?: string;
-	withPortal?: false;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicense, activeLicenseRefetch } = useAppContext();
@@ -40,25 +36,17 @@ function RefreshPaymentStatus({
 	};
 
 	const button = (
-		<AuthZTooltip
-			checks={
-				activeLicense ? [buildLicenseUpdatePermission(activeLicense.id)] : []
-			}
-			enabled={!!activeLicense}
-			withPortal={withPortal}
+		<Button
+			variant="link"
+			color={type === 'text' ? 'none' : 'secondary'}
+			size="md"
+			className={className}
+			onClick={handleRefreshPaymentStatus}
+			prefix={<RefreshCcw size={14} />}
+			loading={isLoading}
 		>
-			<Button
-				variant="link"
-				color={type === 'text' ? 'none' : 'secondary'}
-				size="md"
-				className={className}
-				onClick={handleRefreshPaymentStatus}
-				prefix={<RefreshCcw size={14} />}
-				loading={isLoading}
-			>
-				{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-			</Button>
-		</AuthZTooltip>
+			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+		</Button>
 	);
 
 	return (
@@ -74,7 +62,6 @@ function RefreshPaymentStatus({
 RefreshPaymentStatus.defaultProps = {
 	type: 'button',
 	className: undefined,
-	withPortal: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@signozhq/ui/typography';
-import { timeItems } from 'constants/timePreference';
+import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({
 	key: item.enum,

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -6,7 +6,7 @@ import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
-} from 'constants/timePreference';
+} from 'container/NewWidget/RightContainer/timeItems';
 
 import { menuItems } from './config';
 

frontend/src/components/ValueGraph/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleAlert } from '@signozhq/icons';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
 

frontend/src/components/ValueGraph/utils.ts

@@ -1,5 +1,5 @@
-import { evaluateThresholdWithConvertedValue } from 'container/WidgetCard/Panels/TablePanel/utils';
-import { ThresholdProps } from 'types/api/widgets/threshold';
+import { evaluateThresholdWithConvertedValue } from 'container/GridTableComponent/utils';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 function doesValueSatisfyThreshold(
 	rawValue: number,

frontend/src/constants/panelTypes.ts

@@ -1,6 +1,6 @@
 import Uplot from 'components/Uplot';
-import GridTableComponent from 'container/WidgetCard/Panels/TablePanel';
-import GridValueComponent from 'container/WidgetCard/Panels/ValuePanel';
+import GridTableComponent from 'container/GridTableComponent';
+import GridValueComponent from 'container/GridValueComponent';
 import LogsPanelComponent from 'container/LogsPanelTable/LogsPanelComponent';
 import TracesTableComponent from 'container/TracesTableComponent/TracesTableComponent';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/constants/queryBuilder.ts

@@ -348,19 +348,6 @@ export const initialQueryMeterWithType: Query = {
 	},
 };
 
-export const initialQueryAIWithType: Query = {
-	...initialQueryWithType,
-	builder: {
-		...initialQueryWithType.builder,
-		queryData: [
-			{
-				...initialQueryBuilderFormValuesMap.traces,
-				builderQueryType: 'builder_ai_query',
-			},
-		],
-	},
-};
-
 export const operatorsByTypes: Record<LocalDataType, string[]> = {
 	string: Object.values(StringOperators),
 	number: Object.values(NumberOperators),

frontend/src/constants/reactQueryKeys.ts

@@ -15,6 +15,7 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_DASHBOARDS: 'GET_ALL_DASHBOARDS',
 	GET_TRIGGERED_ALERTS: 'GET_TRIGGERED_ALERTS',
 	DASHBOARD_BY_ID: 'DASHBOARD_BY_ID',
+	GET_BILLING_USAGE: 'GET_BILLING_USAGE',
 	GET_FEATURES_FLAGS: 'GET_FEATURES_FLAGS',
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',

frontend/src/constants/routes.ts

@@ -16,6 +16,7 @@ const ROUTES = {
 	APPLICATION: '/services',
 	ALL_DASHBOARD: '/dashboard',
 	DASHBOARD: '/dashboard/:dashboardId',
+	DASHBOARD_WIDGET: '/dashboard/:dashboardId/:widgetId',
 	DASHBOARD_PANEL_EDITOR: '/dashboard/:dashboardId/panel/:panelId',
 	EDIT_ALERTS: '/alerts/edit',
 	LIST_ALL_ALERT: '/alerts',

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -2,7 +2,7 @@ import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { AlertListTabs } from 'pages/AlertList/types';
-import { NEW_PANEL_ID } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
+import { NEW_PANEL_ID } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute';
 import { matchPath } from 'react-router-dom';
 
 /**

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx

@@ -6,7 +6,7 @@ import {
 	getAllEndpointsWidgetData,
 	getGroupByFiltersFromGroupByValues,
 } from 'container/ApiMonitoring/utils';
-import GridCard from 'container/WidgetCard/Card';
+import GridCard from 'container/GridCardLayout/GridCard';
 import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { isEqual } from 'lodash-es';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/MetricOverTimeGraph.tsx

@@ -1,7 +1,7 @@
 import { Card } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import GridCard from 'container/WidgetCard/Card';
-import { Widgets } from 'types/api/widgets/widget';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Widgets } from 'types/api/dashboard/getAll';
 
 function MetricOverTimeGraph({
 	widget,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -11,10 +11,10 @@ import {
 	getStatusCodeBarChartWidgetData,
 	statusCodeWidgetInfo,
 } from 'container/ApiMonitoring/utils';
-import BarChart from 'lib/visualization/charts/BarChart/BarChart';
-import { handleGraphClick } from 'container/WidgetCard/Card/utils';
-import { useGraphClickToShowButton } from 'container/WidgetCard/hooks/useGraphClickToShowButton';
-import useNavigateToExplorerPages from 'container/WidgetCard/hooks/useNavigateToExplorerPages';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
+import { useGraphClickToShowButton } from 'container/GridCardLayout/useGraphClickToShowButton';
+import useNavigateToExplorerPages from 'container/GridCardLayout/useNavigateToExplorerPages';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -23,7 +23,7 @@ import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import ErrorState from './ErrorState';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -1,7 +1,7 @@
 import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { buildBaseConfig } from 'lib/visualization/panels/utils/baseConfigBuilder';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';

frontend/src/container/ApiMonitoring/__tests__/AllEndPoints.test.tsx

@@ -17,7 +17,7 @@ jest.mock('container/ApiMonitoring/utils', () => ({
 	getGroupByFiltersFromGroupByValues: jest.fn(),
 }));
 
-jest.mock('container/WidgetCard/Card', () => ({
+jest.mock('container/GridCardLayout/GridCard', () => ({
 	__esModule: true,
 	default: jest.fn().mockImplementation(({ customOnRowClick }) => (
 		<div data-testid="grid-card-mock">

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -21,12 +21,15 @@ interface MockQueryResult {
 }
 
 // Mocks
-jest.mock('lib/visualization/charts/BarChart/BarChart', () => ({
-	__esModule: true,
-	default: jest
-		.fn()
-		.mockImplementation(() => <div data-testid="bar-chart-mock" />),
-}));
+jest.mock(
+	'container/DashboardContainer/visualization/charts/BarChart/BarChart',
+	() => ({
+		__esModule: true,
+		default: jest
+			.fn()
+			.mockImplementation(() => <div data-testid="bar-chart-mock" />),
+	}),
+);
 
 jest.mock('components/CeleryTask/useGetGraphCustomSeries', () => ({
 	useGetGraphCustomSeries: (): { getCustomSeries: jest.Mock } => ({
@@ -40,7 +43,7 @@ jest.mock('components/CeleryTask/useNavigateToExplorer', () => ({
 	}),
 }));
 
-jest.mock('container/WidgetCard/hooks/useGraphClickToShowButton', () => ({
+jest.mock('container/GridCardLayout/useGraphClickToShowButton', () => ({
 	useGraphClickToShowButton: (): {
 		componentClick: boolean;
 		htmlRef: HTMLElement | null;
@@ -50,7 +53,7 @@ jest.mock('container/WidgetCard/hooks/useGraphClickToShowButton', () => ({
 	}),
 }));
 
-jest.mock('container/WidgetCard/hooks/useNavigateToExplorerPages', () => ({
+jest.mock('container/GridCardLayout/useNavigateToExplorerPages', () => ({
 	__esModule: true,
 	default: (): { navigateToExplorerPages: jest.Mock } => ({
 		navigateToExplorerPages: jest.fn(),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -10,7 +10,7 @@ import {
 } from 'components/QuickFilters/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { GraphClickMetaData } from 'container/WidgetCard/hooks/useNavigateToExplorerPages';
+import { GraphClickMetaData } from 'container/GridCardLayout/useNavigateToExplorerPages';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { convertNanoToMilliseconds } from 'container/MetricsExplorer/Summary/utils';
 import dayjs from 'dayjs';
@@ -18,7 +18,7 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { cloneDeep } from 'lodash-es';
 import { ArrowUpDown, ChevronDown, ChevronRight, Info } from '@signozhq/icons';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
-import { Widgets } from 'types/api/widgets/widget';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import {
 	BaseAutocompleteData,

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

@@ -184,11 +184,6 @@
 		text-decoration-thickness: 2px;
 		text-underline-offset: 2px;
 	}
-
-	&[disabled] {
-		opacity: 0.6;
-		text-decoration: none;
-	}
 }
 
 .workspace-restricted-banner,

frontend/src/container/AppLayout/index.tsx

@@ -20,8 +20,7 @@ import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getChangelogByVersion from 'api/changelog/getChangelogByVersion';
 import logEvent from 'api/common/logEvent';
-import { updateSubscription } from 'api/generated/services/subscriptions';
-import type { UpdateSubscription200 } from 'api/generated/services/sigNoz.schemas';
+import manageCreditCardApi from 'api/v1/portal/create';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import getUserVersion from 'api/v1/version/get';
 import getUserLatestVersion from 'api/v1/version/getLatestVersion';
@@ -31,8 +30,6 @@ import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionManagePermissions } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { MIN_ACCOUNT_AGE_FOR_CHANGELOG } from 'constants/changelog';
 import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
@@ -66,7 +63,8 @@ import {
 	UPDATE_LATEST_VERSION,
 	UPDATE_LATEST_VERSION_ERROR,
 } from 'types/actions/app';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
+import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import {
 	ChangelogSchema,
 	DeploymentType,
@@ -79,6 +77,7 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
+import { USER_ROLES } from 'types/roles';
 import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
@@ -167,7 +166,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		return Math.abs(currentDate.diff(userCreationDate, 'day'));
 	}, [user.createdAt]);
 
-	const handleBillingOnSuccess = (data: UpdateSubscription200): void => {
+	const handleBillingOnSuccess = (
+		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
+	): void => {
 		if (data?.data?.redirectURL) {
 			const newTab = document.createElement('a');
 			newTab.href = data.data.redirectURL;
@@ -185,7 +186,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	};
 
 	const { mutate: manageCreditCard, isLoading: isLoadingManageBilling } =
-		useMutation(updateSubscription, {
+		useMutation(manageCreditCardApi, {
 			onSuccess: (data) => {
 				handleBillingOnSuccess(data);
 			},
@@ -468,8 +469,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [isLoggedIn]);
 
 	const handleUpgrade = useCallback((): void => {
-		history.push(ROUTES.BILLING);
-	}, []);
+		if (user.role === USER_ROLES.ADMIN) {
+			history.push(ROUTES.BILLING);
+		}
+	}, [user.role]);
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
@@ -583,21 +586,25 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					<div>
 						Our systems are taking longer than expected for your trial workspace.
 						Please{' '}
-						<span>
-							<a
-								className="upgrade-link"
-								onClick={(): void => {
-									notifications.destroy('slow-api-warning');
+						{user.role === USER_ROLES.ADMIN ? (
+							<span>
+								<a
+									className="upgrade-link"
+									onClick={(): void => {
+										notifications.destroy('slow-api-warning');
 
-									logEvent(`Slow API Banner: Upgrade clicked`, {});
+										logEvent(`Slow API Banner: Upgrade clicked`, {});
 
-									handleUpgrade();
-								}}
-							>
-								upgrade
-							</a>
-							your workspace for a smoother experience.
-						</span>
+										handleUpgrade();
+									}}
+								>
+									upgrade
+								</a>
+								your workspace for a smoother experience.
+							</span>
+						) : (
+							'contact your administrator for upgrading to a paid plan for a smoother experience.'
+						)}
 					</div>
 				),
 				duration: 60000,
@@ -787,18 +794,22 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 							<div className="trial-expiry-banner">
 								You are in free trial period. Your free trial will end on{' '}
 								<span>{getFormattedDate(trialInfo?.trialEnd || Date.now())}.</span>
-								<span>
-									{' '}
-									Please{' '}
-									<a className="upgrade-link" onClick={handleUpgrade}>
-										upgrade
-									</a>
-									to continue using SigNoz features.
-									<span className="refresh-payment-status">
+								{user.role === USER_ROLES.ADMIN ? (
+									<span>
 										{' '}
-										| Already upgraded? <RefreshPaymentStatus type="text" />
+										Please{' '}
+										<a className="upgrade-link" onClick={handleUpgrade}>
+											upgrade
+										</a>
+										to continue using SigNoz features.
+										<span className="refresh-payment-status">
+											{' '}
+											| Already upgraded? <RefreshPaymentStatus type="text" />
+										</span>
 									</span>
-								</span>
+								) : (
+									'Please contact your administrator for upgrading to a paid plan.'
+								)}
 							</div>
 						)}
 
@@ -815,20 +826,22 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 									)}
 									.
 								</span>
-								<span>
-									{' '}
-									Please{' '}
-									<AuthZTooltip checks={SubscriptionManagePermissions}>
+								{user.role === USER_ROLES.ADMIN ? (
+									<span>
+										{' '}
+										Please{' '}
 										<a className="upgrade-link" onClick={handleFailedPayment}>
 											pay the bill
 										</a>
-									</AuthZTooltip>
-									to continue using SigNoz features.
-									<span className="refresh-payment-status">
-										{' '}
-										| Already paid? <RefreshPaymentStatus type="text" />
+										to continue using SigNoz features.
+										<span className="refresh-payment-status">
+											{' '}
+											| Already paid? <RefreshPaymentStatus type="text" />
+										</span>
 									</span>
-								</span>
+								) : (
+									' Please contact your administrator to pay the bill.'
+								)}
 							</div>
 						)}
 					</div>