fix: address comments

* feat(authz): add resource-level FGA and attach permissions for service accounts

- Add CheckAll middleware (AND of OR groups) for multi-resource authz checks
- Switch SA role routes (SetRole, DeleteRole) to VerbAttach on ResourceServiceAccount
- Add RoleAttachSelectors on SA module for role-level VerbAttach resolution
- DeleteRole uses CheckAll (both checks at middleware from URL params)
- SetRole uses Check (entity) at middleware + module-level role attach check
- Add migration 078 to backfill FGA tuples for existing organizations
- Add authz contributing guide (docs/contributing/go/authz.md)
- Regenerate OpenAPI spec with scoped security schemes

* feat(authz): fix openapi spec

* feat(authz): add attach permissions to migration

* feat(authz): role details page fixes

* fix(openapi): openapi changes for attach

* fix(openapi): openapi changes for attach

* fix(types): move types to middleware to remove http import from types

* test(integration): add integration tests

* test(integration): fix test lint and remove contributing guide

* feat(authz): revert role details changes

* feat(authz): move selectors to handler

* feat(authz): better naming for authz service and authz middleware

* feat(authz): better naming for authz service and authz middleware

.claude/agents/playwright-test-generator.md

@@ -0,0 +1,163 @@
+---
+name: playwright-test-generator
+description: Use this agent to convert a SigNoz E2E test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Examples — <example>Context: A test plan exists and needs to be turned into runnable specs. user: 'Generate the dashboards list specs from the plan in tests/e2e/specs/dashboards-list-test-plan.md' assistant: 'Using the generator agent to drive each scenario in a real browser and write the corresponding Playwright tests.'</example>
+tools: Glob, Grep, Read, Bash, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test
+model: sonnet
+color: blue
+---
+
+You are the Playwright Test Generator for the SigNoz frontend. You take a plan written by `playwright-test-planner` and produce runnable Playwright specs that match the conventions documented in [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md). **Read that doc first.** Adhere to it.
+
+# Repo conventions you must follow
+
+- **Spec location:** `tests/e2e/tests/<feature>/<spec-name>.spec.ts`. One file per resource; cross-resource concerns get their own file. Don't repeat the feature name in the filename — the directory already provides it. `dashboards/list.spec.ts`, not `dashboards/dashboards-list.spec.ts`.
+- **Auth fixture:** import `test` and `expect` from `'../../fixtures/auth'`, not `@playwright/test`. Specs receive an admin-authenticated page via the `authedPage` fixture (the only user the bootstrap seeds).
+  ```ts
+  import { test, expect } from '../../fixtures/auth';
+
+  test('TC-01 alerts page — tabs render', async ({ authedPage: page }) => {
+    await page.goto('/alerts');
+    await expect(page.getByRole('tab', { name: /alert rules/i })).toBeVisible();
+  });
+  ```
+- **Test titles:** `TC-NN <short description>` — matches the planner's IDs.
+- **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two cleanup shapes are valid; pick based on the spec size:
+  - **Per-test `try / finally`** — small specs (~ <10 scenarios) where each test owns its data.
+  - **Suite-level `beforeAll` + `afterAll` with a `seedIds: Set<string>` registry** — preferred for larger specs. Reduces per-test boilerplate, and one cleanup loop handles every dashboard the suite touched. See [tests/e2e/tests/dashboards/list.spec.ts](../../tests/e2e/tests/dashboards/list.spec.ts) for the canonical shape.
+- **Reuse helpers from `tests/e2e/helpers/`.** Don't reinvent. The current set:
+  - [`helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) — `newAdminContext(browser)` for `beforeAll` / `afterAll` (the `authedPage` fixture is test-scoped and not visible to suite hooks).
+  - [`helpers/dashboards.ts`](../../tests/e2e/helpers/dashboards.ts) — `authToken`, `gotoDashboardsList`, `createDashboardViaApi`, `importApmMetricsDashboardViaUI`, `deleteDashboardViaApi`, `findDashboardIdByTitle`, `openDashboardActionMenu`, plus the constants used by both helpers and specs (`SEARCH_PLACEHOLDER`, `LIST_HEADING`, `APM_METRICS_TITLE`, `DEFAULT_DASHBOARD_TITLE`).
+- **Seed via API when the UI flow is multi-step or brittle.** Implementation lives in `createDashboardViaApi` — use it. `page.request.*` does **not** auto-attach `Authorization`; the helpers handle that for you. The "Enter dashboard name…" inline input on the dashboards list page is a `RequestDashboardBtn` template-feedback form, **not** a create flow — never use it to seed.
+- **Reusable JSON fixtures live in [tests/e2e/fixtures/](../../tests/e2e/fixtures/).** `apm-metrics.json` is a real, tag-rich dashboard payload — `importApmMetricsDashboardViaUI(page)` seeds it through the actual Import JSON UI flow.
+- **Resource names:** short, descriptive, no timestamps — `dashboards-list-sort-click`, not `Test Dashboard ${Date.now()}`. Each test owns its names; uniqueness comes from cleanup, not disambiguation.
+- **Serial mode** when tests in a file mutate the same list page:
+  ```ts
+  test.describe.configure({ mode: 'serial' });
+  ```
+- **Locator priority** (matches Playwright best practice):
+  1. `data-testid` (preferred — these are stable, app-author-provided handles)
+  2. `getByRole('button', { name: 'Submit' })`
+  3. `getByLabel('Email')`, `getByPlaceholder(...)`, `getByText(...)`
+  4. CSS / `locator('.ant-…')` — last resort
+- **Never commit `test.only`.** CI runs with `forbidOnly: true`.
+- **No `page.waitForTimeout(ms)`** — always prefer `await expect(locator).toBe…()`.
+
+# Your workflow
+
+For each scenario in the plan:
+
+1. **Read the plan.** Use `Read` to load `tests/e2e/specs/<feature>-test-plan.md` (or the path the user gave). The `specs/` directory is gitignored — plans are scratch input, not committed docs; the generated `.spec.ts` is the source of truth. Lock onto the TC-NN you're generating.
+2. **Set up the page.** Call `generator_setup_page` once per scenario before any browser tool. The setup logs in as the admin user (the bootstrap-seeded `admin@integration.test`).
+3. **Drive the scenario manually.** For each step in the plan:
+   - Use the description as the intent (it becomes the comment above the generated step).
+   - Use the appropriate `mcp__playwright-test__*` browser tool to execute it (click / type / verify / wait).
+   - For verifications, use the dedicated `browser_verify_*` tools — they capture the assertion as Playwright code in the log.
+4. **Read the log.** Call `generator_read_log` immediately after the last step. Don't intersperse other tool calls.
+5. **Write the spec.** Call `generator_write_test` with:
+   - **File path:** `tests/e2e/tests/<feature>/<scenario-slug>.spec.ts` — fs-friendly slug from the scenario title. Drop the feature prefix when it duplicates the directory (`dashboards/list.spec.ts`, not `dashboards/dashboards-list.spec.ts`).
+   - **Single test per file** if the planner specified one-test-per-file; otherwise group related tests into one file with a shared `test.describe('<Feature>', () => { … })`.
+   - **`describe` block** matches the top-level plan section.
+   - **Title** matches `TC-NN <description>` exactly.
+   - **Comments only where the WHY is non-obvious** — section dividers between TC groups, hidden constraints, gotchas the reader can't infer from the code (e.g. "Monaco swallows Escape — click the title to blur first"). **Do not narrate steps** by pasting the plan's bullets back as `// 1. Navigate…` `// 2. Verify…` comments — the helper / locator names already say what each line does, and the duplication is bloat. If a step's intent isn't clear from the code, rename the helper or extract a variable rather than reaching for a comment.
+   - **Imports** from `../../fixtures/auth`. **Do not** import from `@playwright/test` directly.
+   - **Try / finally** cleanup using the API (delete the resources you seeded).
+
+# Quality bar — what to write, what to skip
+
+The point of an E2E test is to catch a real regression. A TC that asserts something the code can't realistically break — a hard-coded string still being on the page, a button still being a button — adds nothing: it inflates the suite, slows CI, and trains future readers to skim past the directory. Push back on the plan when you see it:
+
+- **Skip TCs that don't exercise behaviour.** "Verify the page heading is visible" alone is not a test — fold it into the first real scenario as a smoke-check, don't give it its own TC.
+- **Collapse near-duplicates.** Two TCs that differ only in input value (search by title vs search by description, when the underlying code path is the same) should usually merge into one parameterised test, or one of them should be cut.
+- **Prefer one assertion-rich test over three thin ones.** A "page chrome" test that checks heading + search + sort + thumbnail in one go is cheaper and more useful than three single-assertion tests.
+- **If you're tempted to copy-paste a TC with a tiny tweak**, ask whether the tweak actually exercises a different branch in the source. If not, drop it.
+
+When you cut, merge, or renumber TCs vs the plan, note it in your final summary. The plan and the QA checklist (`tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`) both live downstream of the spec — flag that the user should re-run the planner so plan + checklist re-derive from the current `.spec.ts`. Don't silently skip.
+
+# Example output
+
+For a plan section:
+
+```markdown
+### 1. Page Load
+
+#### TC-01 page chrome and core controls render
+**Steps:**
+1. Navigate to `/dashboard`
+2. Verify the page title is "SigNoz | All Dashboards"
+3. Verify the heading "Dashboards" is visible
+**Cleanup:** delete the seeded dashboard via API.
+```
+
+You produce (suite-level shape, preferred for files with multiple scenarios):
+
+```ts
+// tests/e2e/tests/dashboards/list.spec.ts
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../fixtures/auth';
+import { newAdminContext } from '../../helpers/auth';
+import {
+  authToken,
+  createDashboardViaApi,
+  deleteDashboardViaApi,
+  gotoDashboardsList,
+} from '../../helpers/dashboards';
+
+test.describe.configure({ mode: 'serial' });
+
+const seedIds = new Set<string>();
+
+async function seed(page: Page, title: string): Promise<string> {
+  const id = await createDashboardViaApi(page, title);
+  seedIds.add(id);
+  return id;
+}
+
+test.afterAll(async ({ browser }) => {
+  if (seedIds.size === 0) return;
+  const ctx = await newAdminContext(browser);
+  const page = await ctx.newPage();
+  try {
+    const token = await authToken(page);
+    for (const id of [...seedIds]) {
+      await deleteDashboardViaApi(ctx.request, id, token);
+      seedIds.delete(id);
+    }
+  } finally {
+    await ctx.close();
+  }
+});
+
+test.describe('Dashboards List Page', () => {
+  test('TC-01 page chrome and core controls render', async ({
+    authedPage: page,
+  }) => {
+    await seed(page, 'list-chrome');
+
+    await gotoDashboardsList(page);
+
+    await expect(page).toHaveTitle('SigNoz | All Dashboards');
+    await expect(
+      page.getByRole('heading', { name: 'Dashboards', level: 1 }),
+    ).toBeVisible();
+  });
+});
+```
+
+Note how the example carries no `// 1. …` `// 2. …` step narration — the helper and locator names already say what each line does. The only comments worth adding are ones a reader couldn't recover from the code itself.
+
+# Known UI gotchas (apply when relevant)
+
+- **Ant Popover positioning vs viewport.** Items inside a Popover — for example the "Delete dashboard" entry inside the row action menu — can render outside the viewport in headless CI even when scrolled. `click({ force: true })` skips actionability checks but Playwright still requires the click coordinates to land inside the viewport. Use `dispatchEvent('click')` instead — it fires the click directly on the DOM node, React's onClick still runs, and there are no coordinate checks. Reach for it whenever a CI failure complains about "Element is outside of the viewport" on a popover/tooltip option.
+- **Sticky-header rows below the fold.** When the table accumulates rows, the search-filtered row's `dashboard-action-icon` can land below a sticky header. Always `await actionIcon.scrollIntoViewIfNeeded()` before clicking. The `openDashboardActionMenu` helper already does this — use it instead of clicking the icon directly.
+- **React Query mutations vs navigation.** UI delete clicks fire an async DELETE through React Query. Navigating away before the mutation completes cancels it. Pair the click with `page.waitForResponse((r) => r.request().method() === 'DELETE' && /\/dashboards\//.test(r.url()))` and `await expect(dialog).not.toBeVisible()` before the next `page.goto(...)`.
+- **Monaco editor swallows Escape.** Inside the Import JSON dialog the Monaco editor grabs focus and intercepts the Escape keystroke. Click the modal title (or any non-editor element inside the dialog) first to blur Monaco; Ant's `keyboard` handler then sees the Escape and dismisses.
+- **Empty zero-state hides controls.** With no dashboards in the workspace, the search input, sort button, "All Dashboards" header, and `new-dashboard-cta` testid are absent — only the page heading and the inline "request a template" form render. Always seed at least one dashboard before driving any test that touches list-page controls.
+
+# Quality bar
+
+- Every test runs end-to-end against a fresh stack. If you can't run it green from a fresh `test_setup`, it's not done.
+- Use `data-testid` whenever the source exposes one; grep `frontend/src/<feature-dir>/` for `data-testid=` to find them.
+- If a step depends on UI behaviour you can't verify (e.g. clipboard, downloads), use the matching Playwright primitive (`page.waitForEvent('download')`, `page.context().grantPermissions(...)` — note `page.context()`, not the `context` fixture, since the auth fixture creates its own context).
+- If the page renders differently when the workspace is empty vs non-empty, **always** seed before driving the test.
+- Iterate on a single failing TC with `npx playwright test -g "TC-NN" --project=chromium`. Use `--last-failed` after a multi-failure run to replay only what failed.

.claude/agents/playwright-test-healer.md

@@ -0,0 +1,63 @@
+---
+name: playwright-test-healer
+description: Use this agent to debug and fix failing SigNoz E2E Playwright tests. Examples — <example>Context: A spec is red. user: 'tests/e2e/tests/dashboards/list.spec.ts is failing, fix it' assistant: 'Using the healer agent to debug each failing scenario and adjust the spec.'</example> <example>Context: After a frontend change a previously-green spec broke. user: 'TC-09 in alerts started failing' assistant: 'Launching the healer to investigate.'</example>
+tools: Glob, Grep, Read, Write, Edit, Bash, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_generate_locator, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_snapshot, mcp__playwright-test__test_debug, mcp__playwright-test__test_list, mcp__playwright-test__test_run
+model: sonnet
+color: red
+---
+
+You are the Playwright Test Healer for the SigNoz E2E suite. You debug and fix red specs with a methodical approach. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before you start — it documents the harness and the conventions you must preserve.
+
+# Preconditions
+
+The E2E backend stack must be up. If `tests/e2e/.env.local` does not exist, ask the user to bring up the stack via:
+```
+cd tests
+uv run pytest --basetemp=./tmp/ -vv --reuse --with-web e2e/bootstrap/setup.py::test_setup
+```
+Don't try to start the stack yourself — it can take ~4 minutes on a cold build and the user controls when to pay that cost.
+
+# Workflow
+
+1. **Inventory.** `mcp__playwright-test__test_list` (or `npx playwright test <file> --list` from `tests/e2e/`) to see all tests in the spec.
+2. **Initial run.** `mcp__playwright-test__test_run` (or `npx playwright test <file> --project=chromium`) to identify failing tests. Don't run all browsers — chromium first.
+3. **Per failing test, debug.** Use `mcp__playwright-test__test_debug` to attach. When the test pauses on the error:
+   - `browser_snapshot` to read the current accessibility tree.
+   - `browser_console_messages` for client-side errors.
+   - `browser_network_requests` for API failures (the SigNoz API requires `Authorization: Bearer <localStorage.AUTH_TOKEN>`; 401s usually mean the test bypassed the fixture).
+   - `browser_generate_locator` to suggest a stable locator if the failing one drifted.
+4. **Root-cause.** Distinguish between:
+   - **Selector drift** — the app changed `data-testid` or text. Fix the locator. Prefer `data-testid` (grep `frontend/src/<feature-dir>/` for the new one).
+   - **Timing** — the test races a load. Replace `waitForTimeout` with `await expect(locator).toBe…()` or `page.waitForResponse(...)` on the triggering action.
+   - **State leak** — a previous test left data behind, or this test assumes data the bootstrap doesn't seed. Ensure the test seeds via API and cleans up in `try / finally`. The bootstrap creates a fresh stack with **zero** dashboards / alerts.
+   - **Genuine app bug** — the app is broken, not the test. Mark the test with `test.fixme(...)` and add a one-line `// known: <description>` comment. Don't silently change the assertion to make it pass.
+5. **Fix.** Edit the spec. Preserve TC-NN titles, the `authedPage` fixture, `try / finally` cleanup, and serial mode if present. If you renumber, retitle, or `test.fixme(...)` any TC, flag it in your final summary so the user can re-run the planner — the plan and the QA checklist (`tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`) re-derive from the current `.spec.ts` and will otherwise drift.
+6. **Re-run only the fixed test** before moving to the next failure. Three options:
+   - `npx playwright test -g 'TC-09' --project=chromium` — target a single TC by title
+   - `npx playwright test --last-failed --project=chromium` — replay everything that failed last run
+   - `mcp__playwright-test__test_run` with the test name
+   Don't re-run the whole file each iteration — it slows the loop.
+7. **Iterate** until the file is green. If a test stays red after high-confidence fixes, mark it `test.fixme(...)` with a comment and move on rather than spinning indefinitely.
+
+# Repo-specific signals
+
+- **Reuse helpers before adding new code.** [`tests/e2e/helpers/dashboards.ts`](../../tests/e2e/helpers/dashboards.ts) and [`tests/e2e/helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) already export the API-seed, cleanup, navigation, and action-menu helpers most fixes need. Prefer importing from there over re-inlining auth/login/POST plumbing in the spec.
+- **Ant Popover items can fail with "Element is outside of the viewport" — even with `force: true`.** `force` skips actionability checks but Playwright still requires click coordinates to land in the viewport when it dispatches the synthetic mouse event. The robust fix is `tooltip.getByText('…').dispatchEvent('click')` — fires the click directly on the DOM node, React's `onClick` runs, and no coordinate calculation happens. Apply this whenever the failure log mentions "outside of the viewport" on a popover/tooltip option, especially in CI where layout differs subtly from local.
+- **Action-icon rows below the fold.** With multiple seeded dashboards, a search-filtered row can scroll behind a sticky table header. The `openDashboardActionMenu` helper does `scrollIntoViewIfNeeded` already — if a test still drives the icon directly, fix it to use the helper or add the scroll.
+- **React Query mutations vs page.goto.** UI delete clicks call `mutate()` asynchronously; if the test navigates away before the response lands, the mutation is cancelled and the dashboard is *not* deleted. Wait for the DELETE response and the dialog dismissal explicitly: `page.waitForResponse((r) => r.request().method() === 'DELETE' && /\/dashboards\//.test(r.url()))` plus `await expect(dialog).not.toBeVisible()`.
+- **Monaco editor swallows Escape inside the Import JSON dialog.** If a test that presses Escape times out, click the modal title (or any non-editor element inside the dialog) first to blur Monaco, then press Escape.
+- **The list pages render zero-state when the workspace is empty.** Many locators (search input, sort button, `new-dashboard-cta` testid, "All Dashboards" header) are absent in zero-state. A 30s timeout on those usually means the workspace was empty — seed first via `createDashboardViaApi`.
+- **The "Enter dashboard name…" inline field is a `RequestDashboardBtn` (template-request feedback form), not a create flow.** Tests that try to use it to create a named dashboard will silently no-op. The only UI create paths are the "New dashboard" dropdown → "Create dashboard" (default name "Sample Title", see `DEFAULT_DASHBOARD_TITLE`) or "Import JSON".
+- **Auth.** `tests/e2e/fixtures/auth.ts` logs in once per worker and caches `storageState` (cookies + localStorage with `AUTH_TOKEN`). For API-driven seeding/cleanup, use `authToken(page)` from `helpers/dashboards.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
+- **Ant Design popovers** (sort menu, action menu) are click-toggle. The trigger element is often an inline `<svg>` with a `data-testid` — clicking it opens the popover; clicking it again closes. After selecting an option, the popover auto-closes. If a test interacts with the popover twice, wait for the menu items to be visible explicitly between toggles.
+- **Artifacts.** Every failed test writes to `tests/e2e/artifacts/results/<test-slug>/` — the `error-context.md` accessibility snapshot is the fastest way to see what the page actually looked like when it failed.
+- **Type-check.** After edits, run `npx tsc --noEmit -p tests/e2e/tsconfig.json` if it succeeds, or rely on `npx playwright test --list` to validate the spec parses.
+
+# Hard rules
+
+- **Never wait for `networkidle`.** It's flaky and discouraged.
+- **Never use `page.waitForTimeout(ms)`.** Always express the wait as `await expect(locator).toBeVisible()` or similar.
+- **Never weaken an assertion just to make a test pass.** If the underlying behavior is broken, mark `test.fixme(...)` with a comment.
+- **Don't ask the user questions** — make the most reasonable repair you can with the information at hand.
+- **Don't rewrite passing tests** while fixing a failing one. Surgical edits only.
+- **Never commit `test.only`** — CI fails on `forbidOnly: true`.

.claude/agents/playwright-test-planner.md

@@ -0,0 +1,104 @@
+---
+name: playwright-test-planner
+description: Use this agent to create a comprehensive E2E test plan for a SigNoz frontend feature. Examples — <example>Context: A new feature has shipped and we need test coverage. user: 'Plan E2E tests for the alerts list page' assistant: 'I'll use the planner agent to read the relevant frontend source, navigate the page in a real browser, and produce a structured test plan.' <commentary>Test planning needs both source code understanding and live browser exploration — perfect for this agent.</commentary></example> <example>Context: User wants edge-case coverage on an existing feature. user: 'What scenarios are we missing for dashboard variables?' assistant: 'Launching the planner agent to map flows and identify gaps.'</example>
+tools: Glob, Grep, Read, Write, Bash, mcp__playwright-test__browser_click, mcp__playwright-test__browser_close, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_navigate_back, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_take_screenshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_wait_for, mcp__playwright-test__planner_setup_page
+model: sonnet
+color: green
+---
+
+You are an expert E2E test planner for the SigNoz frontend, working inside the SigNoz monorepo. Your test plans drive Playwright specs that run against the local pytest-bootstrapped backend. Read [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) before planning — it documents the harness, the `authedPage` fixture, the TC-NN naming convention, and the self-contained-state principle that every plan you write must respect.
+
+You will:
+
+1. **Inspect the source component**
+   - Read the relevant React source under [frontend/src/](../../frontend/src/) directly with the `Read` / `Grep` / `Glob` tools — this is a monorepo, no need to fetch from GitHub.
+   - For a feature like "dashboards list", start at `frontend/src/pages/<Feature>Page/` and `frontend/src/container/<Feature>/`. Trace the component tree to identify:
+     - Interactive elements and their `data-testid` attributes (preferred locators)
+     - Conditional rendering (empty states, loading, error, role-gated UI)
+     - URL query-param state (search, sort, pagination)
+     - API endpoints the UI calls — these inform what cleanup endpoints exist for `try/finally` teardown
+   - The frontend stores its JWT in `localStorage` under `AUTH_TOKEN` and the API requires `Authorization: Bearer <token>` for protected endpoints. Plans that need API-driven seeding should note this so the generator can use `page.request.*`.
+
+2. **Check what's already wired up.**
+   - [tests/e2e/helpers/dashboards.ts](../../tests/e2e/helpers/dashboards.ts) and [tests/e2e/helpers/auth.ts](../../tests/e2e/helpers/auth.ts) hold reusable helpers (`createDashboardViaApi`, `gotoDashboardsList`, `openDashboardActionMenu`, `newAdminContext`, `importApmMetricsDashboardViaUI`, etc.). When the plan touches dashboards, reference these by name in the steps so the generator can reuse them rather than reinvent.
+   - [tests/e2e/fixtures/apm-metrics.json](../../tests/e2e/fixtures/apm-metrics.json) is a real-world dashboard payload (rich tags, panels, description) suitable as a seed fixture — note in the plan if a scenario benefits from it.
+
+3. **Navigate and explore**
+   - Invoke `planner_setup_page` once before any other browser tool.
+   - Use `browser_snapshot` to read the page's accessibility tree. **Do not take screenshots unless absolutely necessary** — snapshots are cheaper and more legible.
+   - Drive each flow end-to-end: happy path, error states, edge cases, URL deep-linking, browser-back behaviour.
+
+4. **Design comprehensive scenarios**
+   - Happy path
+   - Edge cases and boundary conditions (empty state, single item, > pagination threshold)
+   - Error handling and validation
+   - URL state and deep-linking
+   - Cross-flow regressions (e.g. searching while paginated)
+
+5. **Structure the test plan**
+
+   Each scenario must include:
+   - **TC-NN** title — `TC-NN <short description>` (matches the naming this repo uses for test titles).
+   - Preconditions (what state the test expects — note that the bootstrap creates a fresh stack with **zero dashboards / alerts / etc.**, so plans must seed their own data).
+   - Step-by-step user actions.
+   - Expected outcomes per step.
+   - Cleanup notes (what gets created and how to remove it — usually via API).
+
+6. **Save the plan and the checklist**
+   - **Plan:** `tests/e2e/specs/<feature>/<feature>-test-plan.md`. **`tests/e2e/specs/` is gitignored** — plans are scratch artifacts: working input for the generator, regenerable, not committed. Don't treat them as durable documentation. The committed tests are the source of truth.
+   - **Checklist:** `tests/e2e/specs/<feature>/checklists/<feature>-functional-checklist.md`. A manual-verification runbook that mirrors the TC list one-to-one (one checkbox per TC) for QA hand-off. Same gitignore, same scratch status.
+   - **The checklist must stay in sync with the TCs.** When you regenerate the plan, regenerate the checklist alongside it — they share TC IDs and titles, and the checklist ordering must match. If the existing spec under `tests/e2e/tests/<feature>/` has more / fewer / different TCs than the prior plan, the spec is authoritative: re-derive plan and checklist from it.
+   - **On re-runs against an evolved feature:** read the existing `.spec.ts` files first. Treat the committed tests as ground truth; produce a plan and checklist that reflect *what is currently in the spec*, not what the prior plan said. This is how the planner handles TC additions, deletions, merges, and renumbering performed by the generator or healer.
+   - Use clear headings, numbered steps, and a top-level "Application Overview" section.
+   - At the top of the plan, list any pre-existing limitations (e.g. "ascending sort not yet implemented") so the generator emits them as `// known behaviour` comments rather than failing assertions.
+
+<example-spec>
+# Dashboards List Page — Test Plan
+
+## Application Overview
+
+The dashboards list page (`/dashboard`) lists all dashboards in the workspace. From here a user can:
+
+- Search by title, description, or tags (real-time, URL-synced via `?search=`)
+- Sort by last-updated (URL-synced via `?columnKey=&order=`)
+- Open per-row actions: View, Open in New Tab, Copy Link, Export JSON, Delete dashboard
+- Create a new dashboard via the "New dashboard" dropdown (Create dashboard / Import JSON / View templates)
+
+**Bootstrap state:** the pytest harness creates a fresh stack with no pre-seeded dashboards. Every test must seed its own data. The "Enter dashboard name…" inline input is a "request a new template" feedback form — **not** a create flow. The only UI create path is the dropdown.
+
+**Known limitations:**
+- Ascending sort is not yet implemented — repeated clicks on the sort button keep `order=descend`.
+- Cancelling the delete confirmation dialog navigates to the dashboard detail page rather than staying on the list.
+
+## Test Scenarios
+
+### 1. Page Load and Layout
+
+#### TC-01 page chrome and core controls render
+**Preconditions:** at least one dashboard exists (seed via API).
+
+**Steps:**
+1. Navigate to `/dashboard`.
+2. Verify URL is `/dashboard` (no query params).
+3. Verify the page heading "Dashboards" (level 1) is visible.
+4. ...
+
+**Expected:**
+- All Dashboards section header rendered.
+- Search input, sort button, and at least one dashboard thumbnail visible.
+
+**Cleanup:** delete the seeded dashboard via `DELETE /api/v1/dashboards/<id>`.
+
+#### TC-02 ...
+</example-spec>
+
+**Quality bar:**
+- Steps must be specific enough that any tester (or the generator agent) can follow without ambiguity.
+- Include negative scenarios — empty state, no-match search, validation errors.
+- Each scenario must own its preconditions and cleanup. **Do not invent cross-file global fixtures** — they break parallel-by-file execution. Suite-level `beforeAll` / `afterAll` *within* a single spec file is fine and is the preferred shape for files with > ~10 scenarios; per-test `try / finally` is fine for smaller specs.
+- Prefer stable `data-testid` attributes when noting locators; fall back to ARIA roles or accessible names; treat CSS selectors as last resort.
+- **Don't pad coverage.** Every TC must catch a regression that would actually ship if the test were missing — a real branch in the source, a real user-visible failure mode. A TC that asserts a hard-coded string is still rendered, or that a button is still a button, adds nothing but maintenance cost: it inflates the suite, slows CI, and trains readers to skim past the directory. Before writing a scenario, ask "what code change would break this?" — if the only answer is "deleting the literal under test," cut it or fold it into a richer scenario as one assertion among many.
+- **Collapse near-duplicates.** Two TCs that differ only in input value (search by title vs search by description, when the underlying code path is the same) should merge into one parameterised scenario unless each input genuinely exercises a distinct branch. Prefer one assertion-rich TC over three thin ones.
+- **Smoke-checks aren't TCs.** "Heading is visible" belongs as the first assertion inside a real scenario, not as its own numbered case.
+
+**Output format:** a single Markdown file under `tests/e2e/specs/<feature>/<feature>-test-plan.md` (gitignored scratch path) ready to hand to the generator agent. The file is regenerable; once the spec is written, the plan can be discarded.

.dockerignore

@@ -7,4 +7,8 @@ deploy
 sample-apps
 
 # frontend
-node_modules
+**/node_modules
+
+# local env files (tracked example.env templates are unaffected)
+**/.env
+**/.env.*

.github/CODEOWNERS

@@ -107,6 +107,7 @@ go.mod @therealpandey
 /pkg/modules/organization/ @therealpandey
 /pkg/modules/authdomain/ @therealpandey
 /pkg/modules/role/ @therealpandey
+/pkg/types/coretypes/ @therealpandey @vikrantgupta25
 
 # IdentN Owners
 

.github/workflows/goci.yaml

@@ -102,3 +102,20 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate openapi
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)
+  authz:
+    if: |
+      github.event_name == 'merge_group' ||
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: go-install
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.24"
+      - name: generate-authz
+        run: |
+          go run cmd/enterprise/*.go generate authz
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in authz permissions. Run go run cmd/enterprise/*.go generate authz locally and commit."; exit 1)

.github/workflows/jsci.yaml

@@ -63,46 +63,6 @@ jobs:
         uses: actions/checkout@v4
       - name: run
         run: bash frontend/scripts/validate-md-languages.sh
-  authz:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v5
-      - name: node-install
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: deps-install
-        working-directory: ./frontend
-        run: |
-          yarn install
-      - name: uv-install
-        uses: astral-sh/setup-uv@v5
-      - name: uv-deps
-        working-directory: ./tests/integration
-        run: |
-          uv sync
-      - name: setup-test
-        run: |
-          make py-test-setup
-      - name: generate
-        working-directory: ./frontend
-        run: |
-          yarn generate:permissions-type
-      - name: teardown-test
-        if: always()
-        run: |
-          make py-test-teardown
-      - name: validate
-        run: |
-          if ! git diff --exit-code frontend/src/hooks/useAuthZ/permissions.type.ts; then
-            echo "::error::frontend/src/hooks/useAuthZ/permissions.type.ts is out of date. Please run the generator locally and commit the changes: npm run generate:permissions-type (from the frontend directory)"
-            exit 1
-          fi
   openapi:
     if: |
       github.event_name == 'merge_group' ||

cmd/authz.go

@@ -0,0 +1,118 @@
+package cmd
+
+import (
+	"bytes"
+	"context"
+	"os"
+	"sort"
+	"text/template"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/spf13/cobra"
+)
+
+const permissionsTypePath = "frontend/src/hooks/useAuthZ/permissions.type.ts"
+
+var permissionsTypeTemplate = template.Must(template.New("permissions").Parse(
+	`// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz
+export default {
+	status: 'success',
+	data: {
+		resources: [
+{{- range .Resources }}
+			{
+				kind: '{{ .Kind }}',
+				type: '{{ .Type }}',
+			},
+{{- end }}
+		],
+		relations: {
+{{- range .Relations }}
+			{{ .Verb }}: [{{ range $i, $t := .Types }}{{ if $i }}, {{ end }}'{{ $t }}'{{ end }}],
+{{- end }}
+		},
+	},
+} as const;
+`))
+
+type permissionsTypeRelation struct {
+	Verb  string
+	Types []string
+}
+
+type permissionsTypeResource struct {
+	Kind string
+	Type string
+}
+
+type permissionsTypeData struct {
+	Resources []permissionsTypeResource
+	Relations []permissionsTypeRelation
+}
+
+func registerGenerateAuthz(parentCmd *cobra.Command) {
+	authzCmd := &cobra.Command{
+		Use:   "authz",
+		Short: "Generate authz permissions for the frontend",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return runGenerateAuthz(currCmd.Context())
+		},
+	}
+
+	parentCmd.AddCommand(authzCmd)
+}
+
+func runGenerateAuthz(_ context.Context) error {
+	registry := coretypes.NewRegistry()
+
+	allowedResources := map[string]bool{
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():              true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesServiceAccount).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                        true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourcesRole).String():           true,
+	}
+
+	allowedTypes := map[string]bool{}
+
+	refs := registry.ResourceRefs()
+	resources := make([]permissionsTypeResource, 0, len(refs))
+	for _, ref := range refs {
+		if !allowedResources[ref.String()] {
+			continue
+		}
+		allowedTypes[ref.Type.StringValue()] = true
+		resources = append(resources, permissionsTypeResource{
+			Kind: ref.Kind.String(),
+			Type: ref.Type.StringValue(),
+		})
+	}
+
+	typesByVerb := registry.TypesByVerb()
+	verbs := make([]coretypes.Verb, 0, len(typesByVerb))
+	for verb := range typesByVerb {
+		verbs = append(verbs, verb)
+	}
+	sort.Slice(verbs, func(i, j int) bool { return verbs[i].StringValue() < verbs[j].StringValue() })
+
+	relations := make([]permissionsTypeRelation, 0, len(verbs))
+	for _, verb := range verbs {
+		types := make([]string, 0, len(typesByVerb[verb]))
+		for _, t := range typesByVerb[verb] {
+			if !allowedTypes[t.StringValue()] {
+				continue
+			}
+			types = append(types, t.StringValue())
+		}
+		relations = append(relations, permissionsTypeRelation{
+			Verb:  verb.StringValue(),
+			Types: types,
+		})
+	}
+
+	var buf bytes.Buffer
+	if err := permissionsTypeTemplate.Execute(&buf, permissionsTypeData{Resources: resources, Relations: relations}); err != nil {
+		return err
+	}
+
+	return os.WriteFile(permissionsTypePath, buf.Bytes(), 0o600)
+}

cmd/community/server.go

@@ -92,13 +92,13 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete, _ dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, _ licensing.Licensing, _ []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
 			if err != nil {
 				return nil, err
 			}
 
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, authtypes.NewRegistry()), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)

cmd/enterprise/server.go

@@ -137,12 +137,12 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return authNs, nil
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, dashboardModule dashboard.Module) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
-			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore, config authz.Config, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete) (factory.ProviderFactory[authz.AuthZ, authz.Config], error) {
+			openfgaDataStore, err := openfgaserver.NewSQLStore(sqlstore, config)
 			if err != nil {
 				return nil, err
 			}
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, dashboardModule), nil
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, onBeforeRoleDelete, authtypes.NewRegistry()), nil
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)

cmd/generate.go

@@ -16,6 +16,7 @@ func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
 	}
 
 	registerGenerateOpenAPI(generateCmd)
+	registerGenerateAuthz(generateCmd)
 
 	parentCmd.AddCommand(generateCmd)
 }

conf/example.yaml

@@ -13,6 +13,8 @@ global:
   ingestion_url: <unset>
   # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.
   # mcp_url: <unset>
+  # the url of the SigNoz AI Assistant server. when unset, the AI Assistant is hidden in the frontend.
+  # ai_assistant_url: <unset>
 
 ##################### Version #####################
 version:
@@ -426,4 +428,4 @@ authz:
   provider: openfga
   openfga:
     # maximum tuples allowed per openfga write operation.
-    max_tuples_per_write: 100
+    max_tuples_per_write: 300

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.1
+    image: signoz/signoz:v0.122.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.1
+    image: signoz/signoz:v0.122.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.1}
+    image: signoz/signoz:${VERSION:-v0.122.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.1}
+    image: signoz/signoz:${VERSION:-v0.122.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/contributing/tests/e2e.md

@@ -81,23 +81,52 @@ tests/
     ├── .env.local             # generated by bootstrap/setup.py (gitignored)
     ├── bootstrap/
     │   └── setup.py           # test_setup / test_teardown — pytest lifecycle
-    ├── fixtures/
-    │   └── auth.ts            # authedPage Playwright fixture + per-worker storageState cache
+    ├── fixtures/              # Playwright test fixtures (test.extend) only
+    │   └── auth.ts
+    ├── helpers/               # function helpers + the constants they share with tests
+    │   ├── auth.ts
+    │   └── dashboards.ts
+    ├── testdata/              # static data files (JSON) used by helpers and tests
+    │   └── apm-metrics.json   # (example)
     ├── tests/                 # Playwright .spec.ts files, one dir per feature area
     │   └── alerts/
-    │       └── alerts.spec.ts
+    │       └── alerts.spec.ts # (example)
     └── artifacts/             # per-run output (gitignored)
         ├── html/              # HTML reporter output
         ├── json/              # JSON reporter output
         └── results/           # per-test traces / screenshots / videos on failure
 ```
 
+### `fixtures/` vs `helpers/` — what goes where
+
+These two folders look similar but mean different things:
+
+- **`fixtures/`** holds *Playwright test fixtures* (created via `test.extend({...})`). By the canonical definition, a fixture is "a consistent, predefined set of data, objects, or environmental conditions used to ensure tests run in a stable state" — i.e. setup/teardown that runs *automatically* around each test or worker. `auth.ts` matches: it extends Playwright's `test` with an `authedPage` that's logged-in before every test runs and torn down after. If the only thing in this folder ever is `auth.ts`, that's fine — fixtures are a deliberately small surface.
+- **`helpers/`** holds plain function helpers that you call *explicitly* from a test or hook — they don't extend Playwright's `test`. This covers both behaviour helpers (e.g. `gotoDashboardsList(page)`) and the constants those helpers and the tests both refer to (e.g. `SEARCH_PLACEHOLDER`). Constants live next to the helpers that use them so a single import line in a test covers both.
+- **`testdata/`** holds static data files (typically JSON / YAML) consumed by the helpers — for example, `apm-metrics.json`, a real dashboard payload uploaded through the UI by an importer helper.
+
+Rule of thumb: if it's a `test.extend` fixture, put it in `fixtures/`. If it's a function you call explicitly (or a constant the function uses), put it in `helpers/`. If it's a static file the helpers read, put it in `testdata/`.
+
 Each spec follows these principles:
 
 1. **Directory per feature**: `tests/e2e/tests/<feature>/*.spec.ts`. Cross-resource junction concerns (e.g. cascade-delete) go in their own file, not packed into one giant spec.
 2. **Test titles use `TC-NN`**: `test('TC-01 alerts page — tabs render', ...)`. Preserves ordering at a glance and maps to external coverage tracking.
 3. **UI-first**: drive flows through the UI. Playwright traces capture every BE request/response the UI triggers, so asserting on UI outcomes implicitly validates BE contracts. Reach for direct `page.request.*` only when the test's *purpose* is asserting a response contract (use `page.waitForResponse` on a UI click) or when a specific UI step is structurally flaky (e.g. Ant DatePicker calendar-cell indices) — and even then try UI first.
-4. **Self-contained state**: each spec creates what it needs and cleans up in `try/finally`. No global pre-seeding fixtures.
+4. **Self-contained state**: each spec seeds its own data and cleans up at suite teardown. The pytest harness creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing data. Two patterns work:
+    - **Per-test seed + cleanup in `try / finally`** — small specs where each test owns its data.
+    - **Suite-level seed + `afterAll` teardown** — preferred for larger specs. Each `createDashboard(...)` call adds the resulting ID to a module-level `Set<string>`, and one `test.afterAll(...)` deletes everything in the set. See `tests/e2e/tests/dashboards/list.spec.ts` for the full pattern. `test.beforeAll` / `test.afterAll` cannot use `authedPage` directly (it's test-scoped); use `newAdminContext(browser)` from `helpers/auth.ts` instead — it performs one fresh login per suite hook.
+5. **Seed via API when the UI flow is multi-step or brittle.** The frontend stores its JWT in `localStorage` under `AUTH_TOKEN`; `page.request.*` inherits the auth fixture's storage state. A typical pattern:
+    ```ts
+    const token = await page.evaluate(
+      () => (globalThis as any).localStorage.getItem('AUTH_TOKEN') || '',
+    );
+    await page.request.post('/api/v1/dashboards', {
+      data: { title: 'my-name', uploadedGrafana: false },
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    ```
+    This is faster and more reliable than a multi-step UI seed. Reach for the UI flow only when the test's *purpose* is asserting that flow.
+6. **Reusable static data lives in `tests/e2e/testdata/`.** For example, `apm-metrics.json` is a real dashboard payload that `importApmMetricsDashboardViaUI` (in `helpers/dashboards.ts`) uploads through the actual Import JSON UI flow to seed a richly-tagged dashboard for search/list tests.
 
 ## How to write an E2E test?
 
@@ -155,13 +184,23 @@ test('TC-02 alerts list — create, toggle, delete', async ({ authedPage: page }
 
 ### Locator priority
 
-1. `getByRole('button', { name: 'Submit' })`
-2. `getByLabel('Email')`
-3. `getByPlaceholder('...')`
-4. `getByText('...')`
-5. `getByTestId('...')`
+1. `getByTestId('...')` — preferred when the source exposes one. Stable, app-author-provided handle that survives copy-edits.
+2. `getByRole('button', { name: 'Submit' })`
+3. `getByLabel('Email')`
+4. `getByPlaceholder('...')`
+5. `getByText('...')`
 6. `locator('.ant-select')` — last resort (Ant Design dropdowns often have no semantic alternative)
 
+## Agents
+
+Three Claude agents in `.claude/agents/` accelerate writing and maintaining E2E specs:
+
+- **`playwright-test-planner`** — explores a feature in a real browser plus the local frontend source and writes a test plan as a scratch markdown file (under `tests/e2e/specs/`, which is gitignored — plans are working artifacts for the generator, not committed docs).
+- **`playwright-test-generator`** — converts a test plan into Playwright spec files under `tests/e2e/tests/<feature>/`. Drives each scenario through MCP browser tools and emits TC-NN-titled tests using the `authedPage` fixture and the API-seed pattern.
+- **`playwright-test-healer`** — runs failing specs, debugs them with snapshots / console / network introspection, and edits the spec to fix selector drift, timing, or state-leak issues.
+
+The agents rely on the Playwright-test MCP server (`mcp__playwright-test__*` tools). Configure it in your Claude MCP settings; the permission allowlist lives in [.claude/settings.local.json](../../../.claude/settings.local.json).
+
 ## How to run E2E tests?
 
 ### Running All Tests

ee/authz/openfgaauthz/provider.go

@@ -2,7 +2,6 @@ package openfgaauthz
 
 import (
 	"context"
-	"slices"
 
 	"github.com/SigNoz/signoz/ee/authz/openfgaserver"
 	"github.com/SigNoz/signoz/pkg/authz"
@@ -13,6 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
@@ -25,19 +25,19 @@ type provider struct {
 	openfgaServer      *openfgaserver.Server
 	licensing          licensing.Licensing
 	store              authtypes.RoleStore
-	registry           []authz.RegisterTypeable
+	registry           *authtypes.Registry
 	settings           factory.ScopedProviderSettings
 	onBeforeRoleDelete []authz.OnBeforeRoleDelete
 }
 
-func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("openfga"), func(ctx context.Context, ps factory.ProviderSettings, config authz.Config) (authz.AuthZ, error) {
 		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, openfgaDataStore, licensing, onBeforeRoleDelete, registry)
 	})
 }
 
-func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
-	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore)
+func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, openfgaDataStore storage.OpenFGADatastore, licensing licensing.Licensing, onBeforeRoleDelete []authz.OnBeforeRoleDelete, registry *authtypes.Registry) (authz.AuthZ, error) {
+	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema, openfgaDataStore, registry)
 	pkgAuthzService, err := pkgOpenfgaAuthzProvider.New(ctx, settings, config)
 	if err != nil {
 		return nil, err
@@ -74,11 +74,11 @@ func (provider *provider) Stop(ctx context.Context) error {
 	return provider.openfgaServer.Stop(ctx)
 }
 
-func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreation(ctx, claims, orgID, relation, typeable, selectors, roleSelectors)
 }
 
-func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, roleSelectors []coretypes.Selector) error {
 	return provider.openfgaServer.CheckWithTupleCreationWithoutClaims(ctx, orgID, relation, typeable, selectors, roleSelectors)
 }
 
@@ -108,7 +108,7 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
+func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
 	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
 }
 
@@ -159,16 +159,10 @@ func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.U
 func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
 	tuples := make([]*openfgav1.TupleKey, 0)
 
-	grantTuples, err := provider.getManagedRoleGrantTuples(orgID, userID)
-	if err != nil {
-		return err
-	}
+	grantTuples := provider.getManagedRoleGrantTuples(orgID, userID)
 	tuples = append(tuples, grantTuples...)
 
-	managedRoleTuples, err := provider.getManagedRoleTransactionTuples(orgID)
-	if err != nil {
-		return err
-	}
+	managedRoleTuples := provider.getManagedRoleTransactionTuples(orgID)
 	tuples = append(tuples, managedRoleTuples...)
 
 	return provider.Write(ctx, tuples, nil)
@@ -208,21 +202,7 @@ func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, ro
 	return role, nil
 }
 
-func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource {
-	resources := make([]*authtypes.Resource, 0)
-	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-		}
-	}
-	for _, typeable := range provider.MustGetTypeables() {
-		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-	}
-
-	return resources
-}
-
-func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
+func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*coretypes.Object, error) {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -233,16 +213,16 @@ func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id
 		return nil, err
 	}
 
-	objects := make([]*authtypes.Object, 0)
-	for _, objectType := range provider.getUniqueTypes() {
-		if !slices.Contains(authtypes.TypeableRelations[objectType], relation) {
+	objects := make([]*coretypes.Object, 0)
+	for _, objectType := range provider.registry.Types() {
+		if coretypes.ErrIfVerbNotValidForType(relation.Verb, objectType) != nil {
 			continue
 		}
 
 		resourceObjects, err := provider.
 			ListObjects(
 				ctx,
-				authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.Name, orgID, &authtypes.RelationAssignee),
+				authtypes.MustNewSubject(coretypes.NewResourceRole(), storableRole.Name, orgID, &coretypes.VerbAssignee),
 				relation,
 				objectType,
 			)
@@ -265,7 +245,7 @@ func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *au
 	return provider.store.Update(ctx, orgID, role)
 }
 
-func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
+func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*coretypes.Object) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -318,84 +298,63 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }
 
-func (provider *provider) MustGetTypeables() []authtypes.Typeable {
-	return []authtypes.Typeable{authtypes.TypeableRole, authtypes.TypeableResourcesRoles}
-}
-
-func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := []*openfgav1.TupleKey{}
 
 	// Grant the admin role to the user
-	adminSubject := authtypes.MustNewSubject(authtypes.TypeableUser, userID.String(), orgID, nil)
-	adminTuple, err := authtypes.TypeableRole.Tuples(
+	adminSubject := authtypes.MustNewSubject(coretypes.NewResourceUser(), userID.String(), orgID, nil)
+	adminTuple := authtypes.NewTuples(
+		coretypes.NewResourceRole(),
 		adminSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAdminRoleName),
-		},
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAdminRoleName)},
 		orgID,
 	)
-	if err != nil {
-		return nil, err
-	}
 	tuples = append(tuples, adminTuple...)
 
 	// Grant the admin role to the anonymous user
-	anonymousSubject := authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
-	anonymousTuple, err := authtypes.TypeableRole.Tuples(
+	anonymousSubject := authtypes.MustNewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
+	anonymousTuple := authtypes.NewTuples(
+		coretypes.NewResourceRole(),
 		anonymousSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, authtypes.SigNozAnonymousRoleName),
-		},
+		authtypes.Relation{Verb: coretypes.VerbAssignee},
+		[]coretypes.Selector{coretypes.TypeRole.MustSelector(authtypes.SigNozAnonymousRoleName)},
 		orgID,
 	)
-	if err != nil {
-		return nil, err
-	}
 	tuples = append(tuples, anonymousTuple...)
 
-	return tuples, nil
+	return tuples
 }
 
-func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	transactionsByRole := make(map[string][]*authtypes.Transaction)
-	for _, register := range provider.registry {
-		for roleName, txns := range register.MustGetManagedRoleTransactions() {
-			transactionsByRole[roleName] = append(transactionsByRole[roleName], txns...)
-		}
-	}
-
+func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := make([]*openfgav1.TupleKey, 0)
-	for roleName, transactions := range transactionsByRole {
+	for roleName, transactions := range provider.registry.ManagedRoleTransactions() {
 		for _, txn := range transactions {
-			typeable := authtypes.MustNewTypeableFromType(txn.Object.Resource.Type, txn.Object.Resource.Name)
-			txnTuples, err := typeable.Tuples(
+			resource := coretypes.MustNewResourceFromTypeAndKind(txn.Object.Resource.Type, txn.Object.Resource.Kind)
+			txnTuples := authtypes.NewTuples(
+				resource,
 				authtypes.MustNewSubject(
-					authtypes.TypeableRole,
+					coretypes.NewResourceRole(),
 					roleName,
 					orgID,
-					&authtypes.RelationAssignee,
+					&coretypes.VerbAssignee,
 				),
 				txn.Relation,
-				[]authtypes.Selector{txn.Object.Selector},
+				[]coretypes.Selector{txn.Object.Selector},
 				orgID,
 			)
-			if err != nil {
-				return nil, err
-			}
 			tuples = append(tuples, txnTuples...)
 		}
 	}
 
-	return tuples, nil
+	return tuples
 }
 
 func (provider *provider) deleteTuples(ctx context.Context, roleName string, orgID valuer.UUID) error {
-	subject := authtypes.MustNewSubject(authtypes.TypeableRole, roleName, orgID, &authtypes.RelationAssignee)
+	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
 
 	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.getUniqueTypes() {
+	for _, objectType := range provider.registry.Types() {
 		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
 			User:   subject,
 			Object: objectType.StringValue() + ":",
@@ -424,28 +383,3 @@ func (provider *provider) deleteTuples(ctx context.Context, roleName string, org
 
 	return nil
 }
-
-func (provider *provider) getUniqueTypes() []authtypes.Type {
-	seen := make(map[string]struct{})
-	uniqueTypes := make([]authtypes.Type, 0)
-	for _, register := range provider.registry {
-		for _, typeable := range register.MustGetTypeables() {
-			typeKey := typeable.Type().StringValue()
-			if _, ok := seen[typeKey]; ok {
-				continue
-			}
-			seen[typeKey] = struct{}{}
-			uniqueTypes = append(uniqueTypes, typeable.Type())
-		}
-	}
-	for _, typeable := range provider.MustGetTypeables() {
-		typeKey := typeable.Type().StringValue()
-		if _, ok := seen[typeKey]; ok {
-			continue
-		}
-		seen[typeKey] = struct{}{}
-		uniqueTypes = append(uniqueTypes, typeable.Type())
-	}
-
-	return uniqueTypes
-}

ee/authz/openfgaschema/base.fga

@@ -1,6 +1,6 @@
 module base
 
-type organisation 
+type organization 
   relations
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
@@ -10,12 +10,14 @@ type user
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
     define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]
 
-type serviceaccount 
+type serviceaccount
   relations
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
-    define delete: [user, serviceaccount, role#assignee]  
+    define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]
 
 type anonymous
 
@@ -26,6 +28,7 @@ type role
     define read: [user, serviceaccount, role#assignee]
     define update: [user, serviceaccount, role#assignee]
     define delete: [user, serviceaccount, role#assignee]
+    define attach: [user, serviceaccount, role#assignee]
 
 type metaresources
   relations

ee/authz/openfgaserver/server.go

@@ -7,6 +7,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 )
@@ -33,18 +34,18 @@ func (server *Server) Stop(ctx context.Context) error {
 	return server.pkgAuthzService.Stop(ctx)
 }
 
-func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
 	subject := ""
 	switch claims.Principal {
 	case authtypes.PrincipalUser:
-		user, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
+		user, err := authtypes.NewSubject(coretypes.NewResourceUser(), claims.UserID, orgID, nil)
 		if err != nil {
 			return err
 		}
 
 		subject = user
 	case authtypes.PrincipalServiceAccount:
-		serviceAccount, err := authtypes.NewSubject(authtypes.TypeableServiceAccount, claims.ServiceAccountID, orgID, nil)
+		serviceAccount, err := authtypes.NewSubject(coretypes.NewResourceServiceAccount(), claims.ServiceAccountID, orgID, nil)
 		if err != nil {
 			return err
 		}
@@ -52,10 +53,7 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 		subject = serviceAccount
 	}
 
-	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
+	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)
 
 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -76,16 +74,13 @@ func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtyp
 	return errors.Newf(errors.TypeForbidden, authtypes.ErrCodeAuthZForbidden, "subjects are not authorized for requested access")
 }
 
-func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
+func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable coretypes.Resource, selectors []coretypes.Selector, _ []coretypes.Selector) error {
+	subject, err := authtypes.NewSubject(coretypes.NewResourceAnonymous(), coretypes.AnonymousUser.String(), orgID, nil)
 	if err != nil {
 		return err
 	}
 
-	tupleSlice, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
+	tupleSlice := authtypes.NewTuples(typeable, subject, relation, selectors, orgID)
 
 	tuples := make(map[string]*openfgav1.TupleKey, len(tupleSlice))
 	for idx, tuple := range tupleSlice {
@@ -110,7 +105,7 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
+func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
 	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
 }
 

ee/authz/openfgaserver/sqlstore.go

@@ -2,6 +2,7 @@ package openfgaserver
 
 import (
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
+	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/openfga/openfga/pkg/storage"
@@ -10,11 +11,11 @@ import (
 	"github.com/openfga/openfga/pkg/storage/sqlite"
 )
 
-func NewSQLStore(store sqlstore.SQLStore) (storage.OpenFGADatastore, error) {
+func NewSQLStore(store sqlstore.SQLStore, config authz.Config) (storage.OpenFGADatastore, error) {
 	switch store.BunDB().Dialect().Name().String() {
 	case "sqlite":
 		return sqlite.NewWithDB(store.SQLDB(), &sqlcommon.Config{
-			MaxTuplesPerWriteField: 100,
+			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
 			MaxTypesPerModelField:  100,
 		})
 	case "pg":
@@ -24,7 +25,7 @@ func NewSQLStore(store sqlstore.SQLStore) (storage.OpenFGADatastore, error) {
 		}
 
 		return postgres.NewWithDB(pgStore.Pool(), nil, &sqlcommon.Config{
-			MaxTuplesPerWriteField: 100,
+			MaxTuplesPerWriteField: config.OpenFGA.MaxTuplesPerWrite,
 			MaxTypesPerModelField:  100,
 		})
 	}

ee/modules/dashboard/impldashboard/module.go

@@ -14,7 +14,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
 	"github.com/SigNoz/signoz/pkg/types/instrumentationtypes"
@@ -88,7 +88,7 @@ func (module *module) GetDashboardByPublicID(ctx context.Context, id valuer.UUID
 	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
 }
 
-func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]authtypes.Selector, valuer.UUID, error) {
+func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
 	orgIDs := make([]string, len(orgs))
 	for idx, org := range orgs {
 		orgIDs[idx] = org.ID.StringValue()
@@ -99,9 +99,9 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 		return nil, valuer.UUID{}, err
 	}
 
-	return []authtypes.Selector{
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, id.StringValue()),
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, authtypes.WildCardSelectorString),
+	return []coretypes.Selector{
+		coretypes.TypeMetaResource.MustSelector(id.StringValue()),
+		coretypes.TypeMetaResource.MustSelector(coretypes.WildCardSelectorString),
 	}, storableDashboard.OrgID, nil
 }
 
@@ -143,7 +143,7 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 	}
 
 	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		err := module.deletePublic(ctx, orgID, id)
+		err := module.store.DeletePublic(ctx, id.String())
 		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 			return err
 		}
@@ -216,29 +216,3 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }
-
-func (module *module) MustGetTypeables() []authtypes.Typeable {
-	return module.pkgDashboardModule.MustGetTypeables()
-}
-
-func (module *module) MustGetManagedRoleTransactions() map[string][]*authtypes.Transaction {
-	return map[string][]*authtypes.Transaction{
-		authtypes.SigNozAnonymousRoleName: {
-			{
-				ID:       valuer.GenerateUUID(),
-				Relation: authtypes.RelationRead,
-				Object: *authtypes.MustNewObject(
-					authtypes.Resource{
-						Type: authtypes.TypeMetaResource,
-						Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-					},
-					authtypes.MustNewSelector(authtypes.TypeMetaResource, "*"),
-				),
-			},
-		},
-	}
-}
-
-func (module *module) deletePublic(ctx context.Context, _ valuer.UUID, dashboardID valuer.UUID) error {
-	return module.store.DeletePublic(ctx, dashboardID.StringValue())
-}

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

@@ -6,6 +6,8 @@ import (
 	"io"
 	"net/http"
 
+	"log/slog"
+
 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
@@ -15,7 +17,6 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"log/slog"
 )
 
 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
@@ -137,4 +138,3 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 		aH.QueryRangeV4(w, r)
 	}
 }
-

ee/query-service/app/server.go

@@ -42,8 +42,8 @@ import (
 
 // Server runs HTTP, Mux and a grpc server
 type Server struct {
-	config      signoz.Config
-	signoz      *signoz.SigNoz
+	config signoz.Config
+	signoz *signoz.SigNoz
 
 	// public http router
 	httpConn     net.Listener
@@ -148,7 +148,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	s := &Server{
 		config:             config,
-		signoz:       signoz,
+		signoz:             signoz,
 		httpHostPort:       baseconst.HTTPHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
@@ -317,4 +317,3 @@ func (s *Server) Stop(ctx context.Context) error {
 
 	return nil
 }
-

frontend/.oxfmtrc.json

@@ -23,6 +23,11 @@
     "**/*.md",
     "**/*.json",
     "src/parser/**",
-    "src/TraceOperator/parser/**"
+    "src/TraceOperator/parser/**",
+    ".claude",
+    ".opencode",
+    "dist",
+    "playwright-report",
+    ".temp_cache"
   ]
 }

frontend/.oxlintrc.json

@@ -289,6 +289,8 @@
     // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
     "signoz/no-raw-absolute-path": "error",
     // Prevents window.open(path), window.location.origin + path, window.location.href = path
+    "signoz/no-antd-components": "error",
+    // Prevents the usage of specific antd components in favor of our lib
     "no-restricted-globals": [
       "error",
       {

frontend/__mocks__/uplotMock.ts

@@ -1,53 +1,51 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 // Mock for uplot library used in tests
-import { type Mock, vi } from 'vitest';
-
 export interface MockUPlotInstance {
-	setData: Mock;
-	setSize: Mock;
-	destroy: Mock;
-	redraw: Mock;
-	setSeries: Mock;
+	setData: jest.Mock;
+	setSize: jest.Mock;
+	destroy: jest.Mock;
+	redraw: jest.Mock;
+	setSeries: jest.Mock;
 }
 
 export interface MockUPlotPaths {
-	spline: Mock;
-	bars: Mock;
-	linear: Mock;
-	stepped: Mock;
+	spline: jest.Mock;
+	bars: jest.Mock;
+	linear: jest.Mock;
+	stepped: jest.Mock;
 }
 
 // Create mock instance methods
 const createMockUPlotInstance = (): MockUPlotInstance => ({
-	setData: vi.fn(),
-	setSize: vi.fn(),
-	destroy: vi.fn(),
-	redraw: vi.fn(),
-	setSeries: vi.fn(),
+	setData: jest.fn(),
+	setSize: jest.fn(),
+	destroy: jest.fn(),
+	redraw: jest.fn(),
+	setSeries: jest.fn(),
 });
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
-const createMockPathBuilder = (name: string): Mock =>
-	vi.fn(() => ({
+const createMockPathBuilder = (name: string): jest.Mock =>
+	jest.fn(() => ({
 		name, // To test if the correct pathBuilder is used
-		stroke: vi.fn(),
-		fill: vi.fn(),
-		clip: vi.fn(),
+		stroke: jest.fn(),
+		fill: jest.fn(),
+		clip: jest.fn(),
 	}));
 
 // Create mock paths - linear, spline, stepped needed by UPlotSeriesBuilder.getPathBuilder
 const mockPaths = {
-	spline: vi.fn(() => createMockPathBuilder('spline')),
-	bars: vi.fn(() => createMockPathBuilder('bars')),
-	linear: vi.fn(() => createMockPathBuilder('linear')),
-	stepped: vi.fn((opts?: { align?: number }) =>
+	spline: jest.fn(() => createMockPathBuilder('spline')),
+	bars: jest.fn(() => createMockPathBuilder('bars')),
+	linear: jest.fn(() => createMockPathBuilder('linear')),
+	stepped: jest.fn((opts?: { align?: number }) =>
 		createMockPathBuilder(`stepped-(${opts?.align ?? 0})`),
 	),
 };
 
 // Mock static methods
-const mockTzDate = vi.fn(
+const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
 

frontend/__mocks__/useSafeNavigate.ts

@@ -1,6 +1,4 @@
 // Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
-import { type MockedFunction, vi } from 'vitest';
-
 interface SafeNavigateOptions {
 	replace?: boolean;
 	state?: unknown;
@@ -16,15 +14,15 @@ interface SafeNavigateTo {
 type SafeNavigateToType = string | SafeNavigateTo;
 
 interface UseSafeNavigateReturn {
-	safeNavigate: MockedFunction<
+	safeNavigate: jest.MockedFunction<
 		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
 	>;
 }
 
 export const useSafeNavigate = (): UseSafeNavigateReturn => ({
-	safeNavigate: vi.fn(
+	safeNavigate: jest.fn(
 		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
-	) as MockedFunction<
+	) as jest.MockedFunction<
 		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
 	>,
 });

frontend/jest.config.ts

@@ -28,7 +28,7 @@ const config: Config.InitialOptions = {
 			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
-		'^@signozhq/(?!ui$)([^/]+)$':
+		'^@signozhq/(?!ui(?:/|$))([^/]+)$':
 			'<rootDir>/node_modules/@signozhq/$1/dist/$1.js',
 	},
 	extensionsToTreatAsEsm: ['.ts'],

frontend/package.json

@@ -15,15 +15,15 @@
     "lint:generated": "oxlint ./src/api/generated --fix",
     "lint:fix": "oxlint ./src --fix",
     "lint:styles": "stylelint \"src/**/*.scss\"",
-    "postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.cjs && patch-package",
+    "jest": "jest",
+    "jest:coverage": "jest --coverage",
+    "jest:watch": "jest --watch",
+    "postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.cjs",
     "husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
     "commitlint": "commitlint --edit $1",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "test:changedsince": "vitest run --changed HEAD~1 --coverage",
-    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh",
-    "generate:permissions-type": "node scripts/generate-permissions-type.cjs"
+    "test": "jest",
+    "test:changedsince": "jest --changedSince=main --coverage --silent",
+    "generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -50,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.12",
+    "@signozhq/ui": "0.0.18",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -120,10 +120,12 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
+    "react-json-tree": "^0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
+    "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",
@@ -170,7 +172,7 @@
     "@commitlint/config-conventional": "^20.4.2",
     "@faker-js/faker": "9.3.0",
     "@jest/globals": "30.2.0",
-    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
     "@types/color": "^3.0.3",
@@ -198,11 +200,9 @@
     "@types/styled-components": "^5.1.4",
     "@types/uuid": "^8.3.1",
     "@typescript/native-preview": "7.0.0-dev.20260421.2",
-    "@vitest/coverage-v8": "4.1.5",
     "autoprefixer": "10.4.19",
     "babel-plugin-styled-components": "^1.12.0",
     "eslint-plugin-sonarjs": "4.0.2",
-    "happy-dom": "20.9.0",
     "husky": "^7.0.4",
     "imagemin": "^8.0.1",
     "imagemin-svgo": "^10.0.1",
@@ -217,7 +217,6 @@
     "oxfmt": "0.47.0",
     "oxlint": "1.62.0",
     "oxlint-tsgolint": "0.22.1",
-    "patch-package": "8.0.1",
     "portfinder-sync": "^0.0.2",
     "postcss": "8.5.6",
     "postcss-scss": "4.0.9",
@@ -234,18 +233,20 @@
     "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
+    "use-sync-external-store": "1.6.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-image-optimizer": "2.0.3",
-    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.5"
+    "vite-tsconfig-paths": "6.1.1"
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": [
-      "oxlint --fix --quiet",
-      "oxfmt --write",
       "sh -c tsgo --noEmit"
     ],
+    "*.(js|jsx|ts|tsx|scss|css)": [
+      "oxlint --fix --quiet --no-error-on-unmatched-pattern",
+      "oxfmt --write"
+    ],
     "*.(scss|css)": [
       "stylelint"
     ]

frontend/patches/@mswjs+interceptors+0.17.10.patch

@@ -1,46 +0,0 @@
-diff --git a/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/XMLHttpRequestOverride.js b/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/XMLHttpRequestOverride.js
-index 2480e76..67208c4 100644
---- a/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/XMLHttpRequestOverride.js
-+++ b/node_modules/@mswjs/interceptors/lib/interceptors/XMLHttpRequest/XMLHttpRequestOverride.js
-@@ -345,7 +345,14 @@ var createXMLHttpRequestOverride = function (options) {
-                 });
-             };
-             XMLHttpRequestOverride.prototype.abort = function () {
--                this.log('abort');
-+                if (typeof this.log === 'function') {
-+                    this.log('abort');
-+                }
-+                if (typeof this.setReadyState !== 'function' ||
-+                    typeof this.trigger !== 'function' ||
-+                    typeof this.readyState !== 'number') {
-+                    return;
-+                }
-                 if (this.readyState > this.UNSENT && this.readyState < this.DONE) {
-                     this.setReadyState(this.UNSENT);
-                     this.trigger('abort');
-@@ -459,14 +466,17 @@ var createXMLHttpRequestOverride = function (options) {
-                     }
-                     finally { if (e_2) throw e_2.error; }
-                 }
--                request.onabort = this.abort;
--                request.onerror = this.onerror;
--                request.ontimeout = this.ontimeout;
--                request.onload = this.onload;
--                request.onloadstart = this.onloadstart;
--                request.onloadend = this.onloadend;
--                request.onprogress = this.onprogress;
--                request.onreadystatechange = this.onreadystatechange;
-+                request.abort = this.abort.bind(this);
-+                request.onabort = this.abort.bind(this);
-+                request.onerror = this.onerror ? this.onerror.bind(this) : null;
-+                request.ontimeout = this.ontimeout ? this.ontimeout.bind(this) : null;
-+                request.onload = this.onload ? this.onload.bind(this) : null;
-+                request.onloadstart = this.onloadstart ? this.onloadstart.bind(this) : null;
-+                request.onloadend = this.onloadend ? this.onloadend.bind(this) : null;
-+                request.onprogress = this.onprogress ? this.onprogress.bind(this) : null;
-+                request.onreadystatechange = this.onreadystatechange
-+                    ? this.onreadystatechange.bind(this)
-+                    : null;
-             };
-             /**
-              * Propagates the mock XMLHttpRequest instance listeners

frontend/plugins/rules/no-antd-components.mjs

@@ -0,0 +1,66 @@
+/**
+ * Rule: no-antd-components
+ *
+ * Prevents importing specific components from antd.
+ *
+ * This rule catches patterns like:
+ *   import { Typography } from 'antd'
+ *   import { Typography, Button } from 'antd'
+ *   import Typography from 'antd/es/typography'
+ *   import { Text } from 'antd/es/typography'
+ *
+ * Add components to BANNED_COMPONENTS to ban them.
+ * Key should be PascalCase component name, will match lowercase path too.
+ */
+
+const BANNED_COMPONENTS = {
+	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+};
+
+export default {
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				const source = node.source.value;
+
+				// Check direct antd import: import { Typography } from 'antd'
+				if (source === 'antd') {
+					for (const specifier of node.specifiers) {
+						if (specifier.type !== 'ImportSpecifier') {
+							continue;
+						}
+
+						const importedName = specifier.imported.name;
+						const message = BANNED_COMPONENTS[importedName];
+
+						if (message) {
+							context.report({
+								node: specifier,
+								message: `Do not import '${importedName}' from antd. ${message}`,
+							});
+						}
+					}
+					return;
+				}
+
+				// Check antd/es/<component> import: import Typography from 'antd/es/typography'
+				const match = source.match(/^antd\/es\/([^/]+)/);
+				if (!match) {
+					return;
+				}
+
+				const pathComponent = match[1].toLowerCase();
+
+				for (const [componentName, message] of Object.entries(BANNED_COMPONENTS)) {
+					if (pathComponent === componentName.toLowerCase()) {
+						context.report({
+							node,
+							message: `Do not import from '${source}'. ${message}`,
+						});
+						break;
+					}
+				}
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -9,6 +9,7 @@ import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
+import noAntdComponents from './rules/no-antd-components.mjs';
 
 export default {
 	meta: {
@@ -19,5 +20,6 @@ export default {
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
 		'no-raw-absolute-path': noRawAbsolutePath,
+		'no-antd-components': noAntdComponents,
 	},
 };

frontend/scripts/generate-permissions-type.cjs

@@ -1,199 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const axios = require('axios');
-
-const PERMISSIONS_TYPE_FILE = path.join(
-	__dirname,
-	'../src/hooks/useAuthZ/permissions.type.ts',
-);
-
-const SIGNOZ_INTEGRATION_IMAGE = 'signoz:integration';
-const LOCAL_BACKEND_URL = 'http://localhost:8080';
-
-function log(message) {
-	console.log(`[generate-permissions-type] ${message}`);
-}
-
-function getBackendUrlFromDocker() {
-	try {
-		const output = execSync(
-			`docker ps --filter "ancestor=${SIGNOZ_INTEGRATION_IMAGE}" --format "{{.Ports}}"`,
-			{ encoding: 'utf8', stdio: ['pipe', 'pipe', 'pipe'] },
-		).trim();
-
-		if (!output) {
-			return null;
-		}
-
-		const portMatch = output.match(/0\.0\.0\.0:(\d+)->8080\/tcp/);
-		if (portMatch) {
-			return `http://localhost:${portMatch[1]}`;
-		}
-
-		const ipv6Match = output.match(/:::(\d+)->8080\/tcp/);
-		if (ipv6Match) {
-			return `http://localhost:${ipv6Match[1]}`;
-		}
-	} catch (err) {
-		log(`Warning: Could not get port from docker: ${err.message}`);
-	}
-	return null;
-}
-
-async function checkBackendHealth(url, maxAttempts = 3, delayMs = 1000) {
-	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-		try {
-			await axios.get(`${url}/api/v1/health`, {
-				timeout: 5000,
-				validateStatus: (status) => status === 200,
-			});
-			return true;
-		} catch (err) {
-			if (attempt < maxAttempts) {
-				await new Promise((r) => setTimeout(r, delayMs));
-			}
-		}
-	}
-	return false;
-}
-
-async function discoverBackendUrl() {
-	const dockerUrl = getBackendUrlFromDocker();
-	if (dockerUrl) {
-		log(`Found ${SIGNOZ_INTEGRATION_IMAGE} container, trying ${dockerUrl}...`);
-		if (await checkBackendHealth(dockerUrl)) {
-			log(`Backend found at ${dockerUrl} (from py-test-setup)`);
-			return dockerUrl;
-		}
-		log(`Backend at ${dockerUrl} is not responding`);
-	}
-
-	log(`Trying local backend at ${LOCAL_BACKEND_URL}...`);
-	if (await checkBackendHealth(LOCAL_BACKEND_URL)) {
-		log(`Backend found at ${LOCAL_BACKEND_URL}`);
-		return LOCAL_BACKEND_URL;
-	}
-
-	return null;
-}
-
-async function fetchResources(backendUrl) {
-	log('Fetching resources from API...');
-	const resourcesUrl = `${backendUrl}/api/v1/authz/resources`;
-
-	const { data: response } = await axios.get(resourcesUrl);
-
-	return response;
-}
-
-function transformResponse(apiResponse) {
-	if (!apiResponse.data) {
-		throw new Error('Invalid API response: missing data field');
-	}
-
-	const { resources, relations } = apiResponse.data;
-
-	return {
-		status: apiResponse.status || 'success',
-		data: {
-			resources: resources,
-			relations: relations,
-		},
-	};
-}
-
-function generateTypeScriptFile(data) {
-	const resourcesStr = data.data.resources
-		.map(
-			(r) =>
-				`\t\t\t{\n\t\t\t\tname: '${r.name}',\n\t\t\t\ttype: '${r.type}',\n\t\t\t},`,
-		)
-		.join('\n');
-
-	const relationsStr = Object.entries(data.data.relations)
-		.map(
-			([type, relations]) =>
-				`\t\t\t${type}: [${relations.map((r) => `'${r}'`).join(', ')}],`,
-		)
-		.join('\n');
-
-	return `// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY scripts/generate-permissions-type
-export default {
-\tstatus: '${data.status}',
-\tdata: {
-\t\tresources: [
-${resourcesStr}
-\t\t],
-\t\trelations: {
-${relationsStr}
-\t\t},
-\t},
-} as const;
-`;
-}
-
-async function main() {
-	try {
-		log('Starting permissions type generation...');
-
-		const backendUrl = await discoverBackendUrl();
-
-		if (!backendUrl) {
-			console.error('\n' + '='.repeat(80));
-			console.error('ERROR: No running SigNoz backend found!');
-			console.error('='.repeat(80));
-			console.error(
-				'\nThe permissions type generator requires a running SigNoz backend.',
-			);
-			console.error('\nFor local development, start the backend with:');
-			console.error('  make go-run-enterprise');
-			console.error(
-				'\nFor CI or integration testing, start the test environment with:',
-			);
-			console.error('  make py-test-setup');
-			console.error(
-				'\nIf running in CI and seeing this error, check that the py-test-setup',
-			);
-			console.error('step completed successfully before this step runs.');
-			console.error('='.repeat(80) + '\n');
-			process.exit(1);
-		}
-
-		log('Fetching resources...');
-		const apiResponse = await fetchResources(backendUrl);
-
-		log('Transforming response...');
-		const transformed = transformResponse(apiResponse);
-
-		log('Generating TypeScript file...');
-		const content = generateTypeScriptFile(transformed);
-
-		log(`Writing to ${PERMISSIONS_TYPE_FILE}...`);
-		fs.writeFileSync(PERMISSIONS_TYPE_FILE, content, 'utf8');
-
-		const rootDir = path.join(__dirname, '../..');
-		const relativePath = path.relative(
-			path.join(rootDir, 'frontend'),
-			PERMISSIONS_TYPE_FILE,
-		);
-		log('Linting generated file...');
-		execSync(`cd frontend && yarn oxlint ${relativePath}`, {
-			cwd: rootDir,
-			stdio: 'inherit',
-		});
-
-		log('Successfully generated permissions.type.ts');
-	} catch (error) {
-		log(`Error: ${error.message}`);
-		process.exit(1);
-	}
-}
-
-if (require.main === module) {
-	main();
-}
-
-module.exports = { main };

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

@@ -1,4 +1,3 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter, Route, Switch, useLocation } from 'react-router-dom';
@@ -23,13 +22,13 @@ import { ROLES, USER_ROLES } from 'types/roles';
 import PrivateRoute from '../Private';
 
 // Mock localStorage APIs
-const mockLocalStorage = vi.hoisted((): Record<string, string> => ({}));
-vi.mock('api/browser/localstorage/get', () => ({
+const mockLocalStorage: Record<string, string> = {};
+jest.mock('api/browser/localstorage/get', () => ({
 	__esModule: true,
 	default: (key: string): string | null => mockLocalStorage[key] || null,
 }));
 
-vi.mock('api/browser/localstorage/set', () => ({
+jest.mock('api/browser/localstorage/set', () => ({
 	__esModule: true,
 	default: (key: string, value: string): void => {
 		mockLocalStorage[key] = value;
@@ -37,29 +36,27 @@ vi.mock('api/browser/localstorage/set', () => ({
 }));
 
 // Mock useGetTenantLicense hook
-const mockTenantLicense = vi.hoisted(() => ({ isCloudUser: true }));
-vi.mock('hooks/useGetTenantLicense', () => ({
+let mockIsCloudUser = true;
+jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: (): {
 		isCloudUser: boolean;
 		isEnterpriseSelfHostedUser: boolean;
 		isCommunityUser: boolean;
 		isCommunityEnterpriseUser: boolean;
 	} => ({
-		isCloudUser: mockTenantLicense.isCloudUser,
-		isEnterpriseSelfHostedUser: !mockTenantLicense.isCloudUser,
+		isCloudUser: mockIsCloudUser,
+		isEnterpriseSelfHostedUser: !mockIsCloudUser,
 		isCommunityUser: false,
 		isCommunityEnterpriseUser: false,
 	}),
 }));
 
 // Mock react-query for users fetch
-const mockUsers = vi.hoisted((): { data: { email: string }[] } => ({
-	data: [],
-}));
-vi.mock('api/generated/services/users', async () => ({
-	...(await vi.importActual('api/generated/services/users')),
-	useListUsers: vi.fn(() => ({
-		data: { data: mockUsers.data },
+let mockUsersData: { email: string }[] = [];
+jest.mock('api/generated/services/users', () => ({
+	...jest.requireActual('api/generated/services/users'),
+	useListUsers: jest.fn(() => ({
+		data: { data: mockUsersData },
 		isFetching: false,
 	})),
 }));
@@ -179,13 +176,13 @@ function createMockAppContext(
 		orgPreferencesFetchError: null,
 		changelog: null,
 		showChangelogModal: false,
-		activeLicenseRefetch: vi.fn(),
-		updateUser: vi.fn(),
-		updateOrgPreferences: vi.fn(),
-		updateUserPreferenceInContext: vi.fn(),
-		updateOrg: vi.fn(),
-		updateChangelog: vi.fn(),
-		toggleChangelogModal: vi.fn(),
+		activeLicenseRefetch: jest.fn(),
+		updateUser: jest.fn(),
+		updateOrgPreferences: jest.fn(),
+		updateUserPreferenceInContext: jest.fn(),
+		updateOrg: jest.fn(),
+		updateChangelog: jest.fn(),
+		toggleChangelogModal: jest.fn(),
 		versionData: { version: '1.0.0', ee: 'Y', setupCompleted: true },
 		hasEditPermission: true,
 		...overrides,
@@ -205,7 +202,7 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 		isCloudUser = true,
 	} = options;
 
-	mockTenantLicense.isCloudUser = isCloudUser;
+	mockIsCloudUser = isCloudUser;
 
 	const contextValue = createMockAppContext(appContext);
 
@@ -248,11 +245,11 @@ function assertRendersChildren(): void {
 
 describe('PrivateRoute', () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
+		jest.clearAllMocks();
 		queryClient.clear();
 		Object.keys(mockLocalStorage).forEach((key) => delete mockLocalStorage[key]);
-		mockTenantLicense.isCloudUser = true;
-		mockUsers.data = [];
+		mockIsCloudUser = true;
+		mockUsersData = [];
 	});
 
 	describe('Old Routes Handling', () => {
@@ -1017,7 +1014,7 @@ describe('PrivateRoute', () => {
 	describe('Onboarding Flow (Cloud Users)', () => {
 		it('should redirect to onboarding when first user has not completed onboarding', async () => {
 			// Set up exactly one user (not admin@signoz.cloud) to trigger first user check
-			mockUsers.data = [{ email: 'test@example.com' }];
+			mockUsersData = [{ email: 'test@example.com' }];
 
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1056,7 +1053,7 @@ describe('PrivateRoute', () => {
 		it('should not redirect to onboarding when onboarding is already complete', async () => {
 			// Set up first user condition - this ensures the ONLY reason we don't redirect
 			// is because isOnboardingComplete is true
-			mockUsers.data = [{ email: 'test@example.com' }];
+			mockUsersData = [{ email: 'test@example.com' }];
 
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1127,7 +1124,7 @@ describe('PrivateRoute', () => {
 		it('should not redirect to onboarding when workspace is blocked and accessing billing', async () => {
 			// This tests the scenario where admin tries to access billing to fix payment
 			// while workspace is blocked and onboarding is not complete
-			mockUsers.data = [{ email: 'test@example.com' }];
+			mockUsersData = [{ email: 'test@example.com' }];
 
 			renderPrivateRoute({
 				initialRoute: ROUTES.BILLING,
@@ -1152,7 +1149,7 @@ describe('PrivateRoute', () => {
 		});
 
 		it('should not redirect to onboarding when workspace is blocked and accessing settings', async () => {
-			mockUsers.data = [{ email: 'test@example.com' }];
+			mockUsersData = [{ email: 'test@example.com' }];
 
 			renderPrivateRoute({
 				initialRoute: ROUTES.SETTINGS,
@@ -1176,7 +1173,7 @@ describe('PrivateRoute', () => {
 		});
 
 		it('should not redirect to onboarding when workspace is suspended (DEFAULTED)', async () => {
-			mockUsers.data = [{ email: 'test@example.com' }];
+			mockUsersData = [{ email: 'test@example.com' }];
 
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1203,7 +1200,7 @@ describe('PrivateRoute', () => {
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (TERMINATED)', async () => {
-			mockUsers.data = [{ email: 'test@example.com' }];
+			mockUsersData = [{ email: 'test@example.com' }];
 
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,
@@ -1230,7 +1227,7 @@ describe('PrivateRoute', () => {
 		});
 
 		it('should not redirect to onboarding when workspace is access restricted (EXPIRED)', async () => {
-			mockUsers.data = [{ email: 'test@example.com' }];
+			mockUsersData = [{ email: 'test@example.com' }];
 
 			renderPrivateRoute({
 				initialRoute: ROUTES.HOME,

frontend/src/AppRoutes/index.tsx

@@ -327,6 +327,11 @@ function App(): JSX.Element {
 					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
 					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
 					beforeSend(event) {
+						// Drop the event if its level is 'warning' or 'info'
+						if (event.level === 'warning' || event.level === 'info') {
+							return null;
+						}
+
 						const sessionReplayUrl = posthog.get_session_replay_url?.({
 							withTimestamp: true,
 						});

frontend/src/AppRoutes/pageComponents.ts

@@ -65,6 +65,13 @@ export const TraceDetail = Loadable(
 		),
 );
 
+export const TraceDetailV3 = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
+		),
+);
+
 export const UsageExplorerPage = Loadable(
 	() => import(/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -48,6 +48,7 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
+	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -138,6 +139,9 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
+	// V3 trace details is gated until release: /trace serves V2 (public),
+	// /trace-old serves V3 (URL-only access). Flip the two `component`
+	// values back to release V3.
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -145,6 +149,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
+	{
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+		component: TraceDetailV3,
+		isPrivate: true,
+		key: 'TRACE_DETAIL_OLD',
+	},
 	{
 		path: ROUTES.SETTINGS,
 		exact: false,

frontend/src/api/browser/localstorage/__tests__/get.test.ts

@@ -1,23 +1,22 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
 /**
  * localstorage/get — lazy migration tests.
  *
- * basePath is memoized at module init, so each test re-imports the module with
- * a fresh DOM state via vi.resetModules and dynamic import.
+ * basePath is memoized at module init, so each describe block re-imports the
+ * module with a fresh DOM state via jest.isolateModules.
  */
 
 type GetModule = typeof import('../get');
 
-async function loadGetModule(href: string): Promise<GetModule> {
+function loadGetModule(href: string): GetModule {
 	const base = document.createElement('base');
 	base.setAttribute('href', href);
 	document.head.append(base);
 
-	vi.resetModules();
-	const mod = await import('../get');
-	base.remove();
-
+	let mod!: GetModule;
+	jest.isolateModules(() => {
+		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+		mod = require('../get');
+	});
 	return mod;
 }
 
@@ -29,19 +28,19 @@ afterEach(() => {
 });
 
 describe('get — root path "/"', () => {
-	it('reads the bare key', async () => {
-		const { default: get } = await loadGetModule('/');
+	it('reads the bare key', () => {
+		const { default: get } = loadGetModule('/');
 		localStorage.setItem('AUTH_TOKEN', 'tok');
 		expect(get('AUTH_TOKEN')).toBe('tok');
 	});
 
-	it('returns null when key is absent', async () => {
-		const { default: get } = await loadGetModule('/');
+	it('returns null when key is absent', () => {
+		const { default: get } = loadGetModule('/');
 		expect(get('MISSING')).toBeNull();
 	});
 
-	it('does NOT promote bare keys (no-op at root)', async () => {
-		const { default: get } = await loadGetModule('/');
+	it('does NOT promote bare keys (no-op at root)', () => {
+		const { default: get } = loadGetModule('/');
 		localStorage.setItem('THEME', 'light');
 		get('THEME');
 		// bare key must still be present — no migration at root
@@ -50,19 +49,19 @@ describe('get — root path "/"', () => {
 });
 
 describe('get — prefixed path "/signoz/"', () => {
-	it('reads an already-scoped key directly', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('reads an already-scoped key directly', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		localStorage.setItem('/signoz/AUTH_TOKEN', 'scoped-tok');
 		expect(get('AUTH_TOKEN')).toBe('scoped-tok');
 	});
 
-	it('returns null when neither scoped nor bare key exists', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('returns null when neither scoped nor bare key exists', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		expect(get('MISSING')).toBeNull();
 	});
 
-	it('lazy-migrates bare key to scoped key on first read', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('lazy-migrates bare key to scoped key on first read', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		localStorage.setItem('AUTH_TOKEN', 'old-tok');
 
 		const result = get('AUTH_TOKEN');
@@ -72,8 +71,8 @@ describe('get — prefixed path "/signoz/"', () => {
 		expect(localStorage.getItem('AUTH_TOKEN')).toBeNull();
 	});
 
-	it('scoped key takes precedence over bare key', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('scoped key takes precedence over bare key', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		localStorage.setItem('AUTH_TOKEN', 'bare-tok');
 		localStorage.setItem('/signoz/AUTH_TOKEN', 'scoped-tok');
 
@@ -82,8 +81,8 @@ describe('get — prefixed path "/signoz/"', () => {
 		expect(localStorage.getItem('AUTH_TOKEN')).toBe('bare-tok');
 	});
 
-	it('subsequent reads after migration use scoped key (no double-write)', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('subsequent reads after migration use scoped key (no double-write)', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		localStorage.setItem('THEME', 'dark');
 
 		get('THEME'); // triggers migration
@@ -95,15 +94,31 @@ describe('get — prefixed path "/signoz/"', () => {
 });
 
 describe('get — two-prefix isolation', () => {
-	it('/signoz/ and /testing/ do not share migrated values', async () => {
+	it('/signoz/ and /testing/ do not share migrated values', () => {
 		localStorage.setItem('THEME', 'light');
 
-		const { default: getSignoz } = await loadGetModule('/signoz/');
+		const base1 = document.createElement('base');
+		base1.setAttribute('href', '/signoz/');
+		document.head.append(base1);
+		let getSignoz!: GetModule['default'];
+		jest.isolateModules(() => {
+			// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+			getSignoz = require('../get').default;
+		});
+		base1.remove();
 
 		// migrate bare → /signoz/THEME
 		getSignoz('THEME');
 
-		const { default: getTesting } = await loadGetModule('/testing/');
+		const base2 = document.createElement('base');
+		base2.setAttribute('href', '/testing/');
+		document.head.append(base2);
+		let getTesting!: GetModule['default'];
+		jest.isolateModules(() => {
+			// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+			getTesting = require('../get').default;
+		});
+		base2.remove();
 
 		// /testing/ prefix: bare key already gone, scoped key does not exist
 		expect(getTesting('THEME')).toBeNull();

frontend/src/api/browser/sessionstorage/__tests__/get.test.ts

@@ -1,5 +1,3 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
 /**
  * sessionstorage/get — lazy migration tests.
  * Mirrors the localStorage get tests; same logic, different storage.
@@ -7,13 +5,17 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 type GetModule = typeof import('../get');
 
-async function loadGetModule(href: string): Promise<GetModule> {
+function loadGetModule(href: string): GetModule {
 	const base = document.createElement('base');
 	base.setAttribute('href', href);
 	document.head.append(base);
 
-	vi.resetModules();
-	return import('../get');
+	let mod!: GetModule;
+	jest.isolateModules(() => {
+		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+		mod = require('../get');
+	});
+	return mod;
 }
 
 afterEach(() => {
@@ -24,19 +26,19 @@ afterEach(() => {
 });
 
 describe('get — root path "/"', () => {
-	it('reads the bare key', async () => {
-		const { default: get } = await loadGetModule('/');
+	it('reads the bare key', () => {
+		const { default: get } = loadGetModule('/');
 		sessionStorage.setItem('retry-lazy-refreshed', 'true');
 		expect(get('retry-lazy-refreshed')).toBe('true');
 	});
 
-	it('returns null when key is absent', async () => {
-		const { default: get } = await loadGetModule('/');
+	it('returns null when key is absent', () => {
+		const { default: get } = loadGetModule('/');
 		expect(get('MISSING')).toBeNull();
 	});
 
-	it('does NOT promote bare keys at root', async () => {
-		const { default: get } = await loadGetModule('/');
+	it('does NOT promote bare keys at root', () => {
+		const { default: get } = loadGetModule('/');
 		sessionStorage.setItem('retry-lazy-refreshed', 'true');
 		get('retry-lazy-refreshed');
 		expect(sessionStorage.getItem('retry-lazy-refreshed')).toBe('true');
@@ -44,19 +46,19 @@ describe('get — root path "/"', () => {
 });
 
 describe('get — prefixed path "/signoz/"', () => {
-	it('reads an already-scoped key directly', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('reads an already-scoped key directly', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		sessionStorage.setItem('/signoz/retry-lazy-refreshed', 'true');
 		expect(get('retry-lazy-refreshed')).toBe('true');
 	});
 
-	it('returns null when neither scoped nor bare key exists', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('returns null when neither scoped nor bare key exists', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		expect(get('MISSING')).toBeNull();
 	});
 
-	it('lazy-migrates bare key to scoped key on first read', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('lazy-migrates bare key to scoped key on first read', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		sessionStorage.setItem('retry-lazy-refreshed', 'true');
 
 		const result = get('retry-lazy-refreshed');
@@ -66,8 +68,8 @@ describe('get — prefixed path "/signoz/"', () => {
 		expect(sessionStorage.getItem('retry-lazy-refreshed')).toBeNull();
 	});
 
-	it('scoped key takes precedence over bare key', async () => {
-		const { default: get } = await loadGetModule('/signoz/');
+	it('scoped key takes precedence over bare key', () => {
+		const { default: get } = loadGetModule('/signoz/');
 		sessionStorage.setItem('retry-lazy-refreshed', 'bare');
 		sessionStorage.setItem('/signoz/retry-lazy-refreshed', 'scoped');
 

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -1,18 +1,15 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 import axios from 'api';
 
 import { getFieldKeys } from '../getFieldKeys';
 
 // Mock the API instance
-vi.mock('api', () => ({
-	default: {
-		get: vi.fn(),
-	},
+jest.mock('api', () => ({
+	get: jest.fn(),
 }));
 
 describe('getFieldKeys API', () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
+		jest.clearAllMocks();
 	});
 
 	const mockSuccessResponse = {
@@ -31,7 +28,7 @@ describe('getFieldKeys API', () => {
 
 	it('should call API with correct parameters when no args provided', async () => {
 		// Mock successful API response
-		vi.mocked(axios.get).mockResolvedValueOnce(mockSuccessResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
 
 		// Call function with no parameters
 		await getFieldKeys();
@@ -44,7 +41,7 @@ describe('getFieldKeys API', () => {
 
 	it('should call API with signal parameter when provided', async () => {
 		// Mock successful API response
-		vi.mocked(axios.get).mockResolvedValueOnce(mockSuccessResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
 
 		// Call function with signal parameter
 		await getFieldKeys('traces');
@@ -57,7 +54,7 @@ describe('getFieldKeys API', () => {
 
 	it('should call API with name parameter when provided', async () => {
 		// Mock successful API response
-		vi.mocked(axios.get).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -79,7 +76,7 @@ describe('getFieldKeys API', () => {
 
 	it('should call API with both signal and name when provided', async () => {
 		// Mock successful API response
-		vi.mocked(axios.get).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -101,7 +98,7 @@ describe('getFieldKeys API', () => {
 
 	it('should return properly formatted response', async () => {
 		// Mock API to return our response
-		vi.mocked(axios.get).mockResolvedValueOnce(mockSuccessResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
 
 		// Call the function
 		const result = await getFieldKeys('traces');

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -1,23 +1,20 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 import axios from 'api';
 
 import { getFieldValues } from '../getFieldValues';
 
 // Mock the API instance
-vi.mock('api', () => ({
-	default: {
-		get: vi.fn(),
-	},
+jest.mock('api', () => ({
+	get: jest.fn(),
 }));
 
 describe('getFieldValues API', () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
+		jest.clearAllMocks();
 	});
 
 	it('should call the API with correct parameters (no options)', async () => {
 		// Mock API response
-		vi.mocked(axios.get).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -41,7 +38,7 @@ describe('getFieldValues API', () => {
 
 	it('should call the API with signal parameter', async () => {
 		// Mock API response
-		vi.mocked(axios.get).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -65,7 +62,7 @@ describe('getFieldValues API', () => {
 
 	it('should call the API with name parameter', async () => {
 		// Mock API response
-		vi.mocked(axios.get).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -89,7 +86,7 @@ describe('getFieldValues API', () => {
 
 	it('should call the API with value parameter', async () => {
 		// Mock API response
-		vi.mocked(axios.get).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -113,7 +110,7 @@ describe('getFieldValues API', () => {
 
 	it('should call the API with time range parameters', async () => {
 		// Mock API response
-		vi.mocked(axios.get).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -165,7 +162,7 @@ describe('getFieldValues API', () => {
 			},
 		};
 
-		vi.mocked(axios.get).mockResolvedValueOnce(mockResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockResponse);
 
 		// Call the function
 		const result = await getFieldValues('traces', 'mixed.values');
@@ -196,7 +193,7 @@ describe('getFieldValues API', () => {
 		};
 
 		// Mock API to return our response
-		vi.mocked(axios.get).mockResolvedValueOnce(mockApiResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
 
 		// Call the function
 		const result = await getFieldValues('traces', 'service.name');

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

@@ -19,9 +19,11 @@ import type {
 
 import type {
 	AuthtypesPostableAuthDomainDTO,
-	AuthtypesUpdateableAuthDomainDTO,
-	CreateAuthDomain200,
+	AuthtypesUpdatableAuthDomainDTO,
+	CreateAuthDomain201,
 	DeleteAuthDomainPathParameters,
+	GetAuthDomain200,
+	GetAuthDomainPathParameters,
 	ListAuthDomains200,
 	RenderErrorResponseDTO,
 	UpdateAuthDomainPathParameters,
@@ -124,7 +126,7 @@ export const createAuthDomain = (
 	authtypesPostableAuthDomainDTO: BodyType<AuthtypesPostableAuthDomainDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<CreateAuthDomain200>({
+	return GeneratedAPIInstance<CreateAuthDomain201>({
 		url: `/api/v1/domains`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
@@ -277,19 +279,122 @@ export const useDeleteAuthDomain = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint returns an auth domain by ID
+ * @summary Get auth domain by ID
+ */
+export const getAuthDomain = (
+	{ id }: GetAuthDomainPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAuthDomain200>({
+		url: `/api/v1/domains/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAuthDomainQueryKey = ({
+	id,
+}: GetAuthDomainPathParameters) => {
+	return [`/api/v1/domains/${id}`] as const;
+};
+
+export const getGetAuthDomainQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAuthDomain>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetAuthDomainPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAuthDomain>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetAuthDomainQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getAuthDomain>>> = ({
+		signal,
+	}) => getAuthDomain({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getAuthDomain>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAuthDomainQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAuthDomain>>
+>;
+export type GetAuthDomainQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get auth domain by ID
+ */
+
+export function useGetAuthDomain<
+	TData = Awaited<ReturnType<typeof getAuthDomain>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetAuthDomainPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAuthDomain>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAuthDomainQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get auth domain by ID
+ */
+export const invalidateGetAuthDomain = async (
+	queryClient: QueryClient,
+	{ id }: GetAuthDomainPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAuthDomainQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates an auth domain
  * @summary Update auth domain
  */
 export const updateAuthDomain = (
 	{ id }: UpdateAuthDomainPathParameters,
-	authtypesUpdateableAuthDomainDTO: BodyType<AuthtypesUpdateableAuthDomainDTO>,
+	authtypesUpdatableAuthDomainDTO: BodyType<AuthtypesUpdatableAuthDomainDTO>,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/domains/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
-		data: authtypesUpdateableAuthDomainDTO,
+		data: authtypesUpdatableAuthDomainDTO,
 	});
 };
 
@@ -302,7 +407,7 @@ export const getUpdateAuthDomainMutationOptions = <
 		TError,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		},
 		TContext
 	>;
@@ -311,7 +416,7 @@ export const getUpdateAuthDomainMutationOptions = <
 	TError,
 	{
 		pathParams: UpdateAuthDomainPathParameters;
-		data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+		data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 	},
 	TContext
 > => {
@@ -328,7 +433,7 @@ export const getUpdateAuthDomainMutationOptions = <
 		Awaited<ReturnType<typeof updateAuthDomain>>,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -343,7 +448,7 @@ export type UpdateAuthDomainMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateAuthDomain>>
 >;
 export type UpdateAuthDomainMutationBody =
-	BodyType<AuthtypesUpdateableAuthDomainDTO>;
+	BodyType<AuthtypesUpdatableAuthDomainDTO>;
 export type UpdateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -358,7 +463,7 @@ export const useUpdateAuthDomain = <
 		TError,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		},
 		TContext
 	>;
@@ -367,7 +472,7 @@ export const useUpdateAuthDomain = <
 	TError,
 	{
 		pathParams: UpdateAuthDomainPathParameters;
-		data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+		data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 	},
 	TContext
 > => {

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

@@ -4,23 +4,16 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
+import { useMutation } from 'react-query';
 import type {
-	InvalidateOptions,
 	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
 	UseMutationOptions,
 	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
 } from 'react-query';
 
 import type {
 	AuthtypesTransactionDTO,
 	AuthzCheck200,
-	AuthzResources200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
@@ -110,88 +103,3 @@ export const useAuthzCheck = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * Gets all the available resources
- * @summary Get resources
- */
-export const authzResources = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<AuthzResources200>({
-		url: `/api/v1/authz/resources`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getAuthzResourcesQueryKey = () => {
-	return [`/api/v1/authz/resources`] as const;
-};
-
-export const getAuthzResourcesQueryOptions = <
-	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getAuthzResourcesQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof authzResources>>> = ({
-		signal,
-	}) => authzResources(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type AuthzResourcesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof authzResources>>
->;
-export type AuthzResourcesQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get resources
- */
-
-export function useAuthzResources<
-	TData = Awaited<ReturnType<typeof authzResources>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof authzResources>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getAuthzResourcesQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get resources
- */
-export const invalidateAuthzResources = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getAuthzResourcesQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -18,6 +18,7 @@ import type {
 } from 'react-query';
 
 import type {
+	AlertmanagertypesPostableChannelDTO,
 	ConfigReceiverDTO,
 	CreateChannel201,
 	DeleteChannelByIDPathParameters,
@@ -122,14 +123,14 @@ export const invalidateListChannels = async (
  * @summary Create notification channel
  */
 export const createChannel = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
+	alertmanagertypesPostableChannelDTO: BodyType<AlertmanagertypesPostableChannelDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateChannel201>({
 		url: `/api/v1/channels`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
+		data: alertmanagertypesPostableChannelDTO,
 		signal,
 	});
 };
@@ -141,13 +142,13 @@ export const getCreateChannelMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
+	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 	TContext
 > => {
 	const mutationKey = ['createChannel'];
@@ -161,7 +162,7 @@ export const getCreateChannelMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createChannel>>,
-		{ data: BodyType<ConfigReceiverDTO> }
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -174,7 +175,8 @@ export const getCreateChannelMutationOptions = <
 export type CreateChannelMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createChannel>>
 >;
-export type CreateChannelMutationBody = BodyType<ConfigReceiverDTO>;
+export type CreateChannelMutationBody =
+	BodyType<AlertmanagertypesPostableChannelDTO>;
 export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -187,13 +189,13 @@ export const useCreateChannel = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
+	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 	TContext
 > => {
 	const mutationOptions = getCreateChannelMutationOptions(options);

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

@@ -13,8 +13,10 @@ import type {
 
 import type {
 	InframonitoringtypesPostableHostsDTO,
+	InframonitoringtypesPostableNodesDTO,
 	InframonitoringtypesPostablePodsDTO,
 	ListHosts200,
+	ListNodes200,
 	ListPods200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -107,7 +109,91 @@ export const useListHosts = <
 	return useMutation(mutationOptions);
 };
 /**
- * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts: pendingPodCount, runningPodCount, succeededPodCount, failedPodCount, unknownPodCount derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes nodes with key metrics: CPU usage, CPU allocatable, memory working set, memory allocatable, per-group nodeCountsByReadiness ({ ready, notReady } from each node's latest k8s.node.condition_ready in the window) and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } for pods scheduled on the listed nodes). Each node includes metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is 'list' for the default k8s.node.name grouping (each row is one node with its current condition string: ready / not_ready / no_data) or 'grouped_list' for custom groupBy keys (each row aggregates nodes in the group; condition stays no_data). Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1 as a sentinel when no data is available for that field.
+ * @summary List Nodes for Infra Monitoring
+ */
+export const listNodes = (
+	inframonitoringtypesPostableNodesDTO: BodyType<InframonitoringtypesPostableNodesDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListNodes200>({
+		url: `/api/v2/infra_monitoring/nodes`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: inframonitoringtypesPostableNodesDTO,
+		signal,
+	});
+};
+
+export const getListNodesMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof listNodes>>,
+		TError,
+		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof listNodes>>,
+	TError,
+	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+	TContext
+> => {
+	const mutationKey = ['listNodes'];
+	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 listNodes>>,
+		{ data: BodyType<InframonitoringtypesPostableNodesDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return listNodes(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ListNodesMutationResult = NonNullable<
+	Awaited<ReturnType<typeof listNodes>>
+>;
+export type ListNodesMutationBody =
+	BodyType<InframonitoringtypesPostableNodesDTO>;
+export type ListNodesMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List Nodes for Infra Monitoring
+ */
+export const useListNodes = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof listNodes>>,
+		TError,
+		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof listNodes>>,
+	TError,
+	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
+	TContext
+> => {
+	const mutationOptions = getListNodesMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown/no_data), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts under podCountsByPhase: { pending, running, succeeded, failed, unknown } derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
  * @summary List Pods for Infra Monitoring
  */
 export const listPods = (

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

@@ -18,9 +18,9 @@ import type {
 } from 'react-query';
 
 import type {
-	AuthtypesPatchableObjectsDTO,
 	AuthtypesPatchableRoleDTO,
 	AuthtypesPostableRoleDTO,
+	CoretypesPatchableObjectsDTO,
 	CreateRole201,
 	DeleteRolePathParameters,
 	GetObjects200,
@@ -571,13 +571,13 @@ export const invalidateGetObjects = async (
  */
 export const patchObjects = (
 	{ id, relation }: PatchObjectsPathParameters,
-	authtypesPatchableObjectsDTO: BodyType<AuthtypesPatchableObjectsDTO>,
+	coretypesPatchableObjectsDTO: BodyType<CoretypesPatchableObjectsDTO>,
 ) => {
 	return GeneratedAPIInstance<string>({
 		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
 		method: 'PATCH',
 		headers: { 'Content-Type': 'application/json' },
-		data: authtypesPatchableObjectsDTO,
+		data: coretypesPatchableObjectsDTO,
 	});
 };
 
@@ -590,7 +590,7 @@ export const getPatchObjectsMutationOptions = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -599,7 +599,7 @@ export const getPatchObjectsMutationOptions = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<AuthtypesPatchableObjectsDTO>;
+		data: BodyType<CoretypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {
@@ -616,7 +616,7 @@ export const getPatchObjectsMutationOptions = <
 		Awaited<ReturnType<typeof patchObjects>>,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -630,7 +630,7 @@ export const getPatchObjectsMutationOptions = <
 export type PatchObjectsMutationResult = NonNullable<
 	Awaited<ReturnType<typeof patchObjects>>
 >;
-export type PatchObjectsMutationBody = BodyType<AuthtypesPatchableObjectsDTO>;
+export type PatchObjectsMutationBody = BodyType<CoretypesPatchableObjectsDTO>;
 export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -645,7 +645,7 @@ export const usePatchObjects = <
 		TError,
 		{
 			pathParams: PatchObjectsPathParameters;
-			data: BodyType<AuthtypesPatchableObjectsDTO>;
+			data: BodyType<CoretypesPatchableObjectsDTO>;
 		},
 		TContext
 	>;
@@ -654,7 +654,7 @@ export const usePatchObjects = <
 	TError,
 	{
 		pathParams: PatchObjectsPathParameters;
-		data: BodyType<AuthtypesPatchableObjectsDTO>;
+		data: BodyType<CoretypesPatchableObjectsDTO>;
 	},
 	TContext
 > => {

frontend/src/api/index.ts

@@ -15,7 +15,6 @@ import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
-import { retryRequestAfterAuth } from 'api/interceptors';
 import { Logout } from './utils';
 
 const RESPONSE_TIMEOUT_THRESHOLD = 5000; // 5 seconds
@@ -130,10 +129,13 @@ export const interceptorRejected = async (
 					afterLogin(response.data.accessToken, response.data.refreshToken, true);
 
 					try {
-						const reResponse = await retryRequestAfterAuth(
-							value.config,
-							response.data.accessToken,
-						);
+						const reResponse = await axios({
+							...value.config,
+							headers: {
+								...value.config.headers,
+								Authorization: `Bearer ${response.data.accessToken}`,
+							},
+						});
 
 						return await Promise.resolve(reResponse);
 					} catch (error) {

frontend/src/api/interceptors.test.ts

@@ -1,65 +1,46 @@
-import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import axios, { AxiosHeaders, AxiosResponse } from 'axios';
 
-const { retryRequestMock, postRotateMock } = vi.hoisted(() => ({
-	retryRequestMock: vi.fn(),
-	postRotateMock: vi.fn(() =>
+import { interceptorRejected } from './index';
+
+jest.mock('api/browser/localstorage/get', () => ({
+	__esModule: true,
+	default: jest.fn(() => 'mock-token'),
+}));
+
+jest.mock('api/v2/sessions/rotate/post', () => ({
+	__esModule: true,
+	default: jest.fn(() =>
 		Promise.resolve({
 			data: { accessToken: 'new-token', refreshToken: 'new-refresh' },
 		}),
 	),
 }));
 
-vi.mock('api/interceptors', () => ({
+jest.mock('AppRoutes/utils', () => ({
 	__esModule: true,
-	retryRequestAfterAuth: retryRequestMock,
+	default: jest.fn(),
 }));
 
-vi.mock('api/browser/localstorage/get', () => ({
-	__esModule: true,
-	default: vi.fn(() => 'mock-token'),
-}));
+jest.mock('axios', () => {
+	const actualAxios = jest.requireActual('axios');
+	const mockAxios = jest.fn().mockResolvedValue({ data: 'success' });
 
-vi.mock('api/v2/sessions/rotate/post', () => ({
-	__esModule: true,
-	default: postRotateMock,
-}));
-
-vi.mock('AppRoutes/utils', () => ({
-	__esModule: true,
-	default: vi.fn(),
-}));
-
-vi.mock('axios', async () => {
-	const actual = await vi.importActual<typeof import('axios')>('axios');
 	return {
-		...actual,
-		default: Object.assign(actual.default, {
-			isAxiosError: vi.fn(() => true),
+		...actualAxios,
+		default: Object.assign(mockAxios, {
+			...actualAxios.default,
+			isAxiosError: jest.fn().mockReturnValue(true),
+			create: actualAxios.create,
 		}),
 		__esModule: true,
 	};
 });
 
 describe('interceptorRejected', () => {
-	let interceptorRejected: (value: AxiosResponse) => Promise<AxiosResponse>;
-
-	beforeAll(async () => {
-		vi.resetModules();
-		const mod = await import('./index');
-		interceptorRejected = mod.interceptorRejected;
-	});
-
 	beforeEach(() => {
-		vi.clearAllMocks();
-		retryRequestMock.mockResolvedValue({
-			data: 'success',
-		} as unknown as AxiosResponse<{ data: string }>);
-		(
-			axios.isAxiosError as unknown as {
-				mockReturnValue: (value: boolean) => void;
-			}
-		).mockReturnValue(true);
+		jest.clearAllMocks();
+		(axios as unknown as jest.Mock).mockResolvedValue({ data: 'success' });
+		(axios.isAxiosError as unknown as jest.Mock).mockReturnValue(true);
 	});
 
 	it('should preserve array payload structure when retrying a 401 request', async () => {
@@ -94,12 +75,11 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		expect(retryRequestMock).toHaveBeenCalledTimes(1);
-		const retryCallConfig = retryRequestMock.mock.calls[0][0];
-		expect(Array.isArray(JSON.parse(retryCallConfig.data as string))).toBe(true);
-		expect(JSON.parse(retryCallConfig.data as string)).toStrictEqual(
-			arrayPayload,
-		);
+		const mockAxiosFn = axios as unknown as jest.Mock;
+		expect(mockAxiosFn.mock.calls).toHaveLength(1);
+		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
+		expect(Array.isArray(JSON.parse(retryCallConfig.data))).toBe(true);
+		expect(JSON.parse(retryCallConfig.data)).toStrictEqual(arrayPayload);
 	});
 
 	it('should preserve object payload structure when retrying a 401 request', async () => {
@@ -131,11 +111,10 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		expect(retryRequestMock).toHaveBeenCalledTimes(1);
-		const retryCallConfig = retryRequestMock.mock.calls[0][0];
-		expect(JSON.parse(retryCallConfig.data as string)).toStrictEqual(
-			objectPayload,
-		);
+		const mockAxiosFn = axios as unknown as jest.Mock;
+		expect(mockAxiosFn.mock.calls).toHaveLength(1);
+		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
+		expect(JSON.parse(retryCallConfig.data)).toStrictEqual(objectPayload);
 	});
 
 	it('should handle undefined data gracefully when retrying', async () => {
@@ -165,8 +144,9 @@ describe('interceptorRejected', () => {
 			// Expected to reject after retry
 		}
 
-		expect(retryRequestMock).toHaveBeenCalledTimes(1);
-		const retryCallConfig = retryRequestMock.mock.calls[0][0];
+		const mockAxiosFn = axios as unknown as jest.Mock;
+		expect(mockAxiosFn.mock.calls).toHaveLength(1);
+		const retryCallConfig = mockAxiosFn.mock.calls[0][0];
 		expect(retryCallConfig.data).toBeUndefined();
 	});
 });

frontend/src/api/interceptors.ts

@@ -1,17 +0,0 @@
-import axios, {
-	AxiosHeaders,
-	AxiosResponse,
-	InternalAxiosRequestConfig,
-} from 'axios';
-
-export async function retryRequestAfterAuth(
-	valueConfig: InternalAxiosRequestConfig,
-	accessToken: string,
-): Promise<AxiosResponse> {
-	const headers = new AxiosHeaders(valueConfig.headers);
-	headers.set('Authorization', `Bearer ${accessToken}`);
-	return axios({
-		...valueConfig,
-		headers,
-	});
-}

frontend/src/api/trace/getTraceV3.tsx

@@ -0,0 +1,72 @@
+import { ApiV3Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
+	SpanV3,
+} from 'types/api/trace/getTraceV3';
+
+const getTraceV3 = async (
+	props: GetTraceV3PayloadProps,
+): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+	let uncollapsedSpans = [...props.uncollapsedSpans];
+	if (!props.isSelectedSpanIDUnCollapsed) {
+		uncollapsedSpans = uncollapsedSpans.filter(
+			(node) => node !== props.selectedSpanId,
+		);
+	} else if (
+		props.selectedSpanId &&
+		!uncollapsedSpans.includes(props.selectedSpanId)
+	) {
+		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
+		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
+		uncollapsedSpans.push(props.selectedSpanId);
+	}
+	const postData: GetTraceV3PayloadProps = {
+		...props,
+		uncollapsedSpans,
+		limit: 10000,
+	};
+	const response = await axios.post<GetTraceV3SuccessResponse>(
+		`/traces/${props.traceId}/waterfall`,
+		omit(postData, 'traceId'),
+	);
+
+	// V3 API wraps response in { status, data }
+	const rawPayload = (response.data as any).data || response.data;
+
+	// Derive 'service.name' from resource for convenience — only derived field
+	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
+		...span,
+		'service.name': span.resource?.['service.name'] || '',
+	}));
+
+	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
+	// Convert by using the first span's timestamp as the base if there's a mismatch.
+	let { startTimestampMillis, endTimestampMillis } = rawPayload;
+	if (
+		spans.length > 0 &&
+		spans[0].timestamp > 0 &&
+		startTimestampMillis < spans[0].timestamp / 10
+	) {
+		const durationMillis = endTimestampMillis - startTimestampMillis;
+		startTimestampMillis = spans[0].timestamp;
+		endTimestampMillis = startTimestampMillis + durationMillis;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: {
+			...rawPayload,
+			spans,
+			startTimestampMillis,
+			endTimestampMillis,
+		},
+	};
+};
+
+export default getTraceV3;

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

@@ -1,4 +1,3 @@
-import { describe, expect, it } from 'vitest';
 import { SuccessResponse } from 'types/api';
 import {
 	MetricRangePayloadV5,

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

@@ -1,7 +1,5 @@
-import { describe, expect, it, vi } from 'vitest';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderFormula,
@@ -22,9 +20,9 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import { prepareQueryRangePayloadV5 } from './prepareQueryRangePayloadV5';
 
-vi.mock('lib/getStartEndRangeTime', () => ({
+jest.mock('lib/getStartEndRangeTime', () => ({
 	__esModule: true,
-	default: vi.fn(() => ({ start: '100', end: '200' })),
+	default: jest.fn(() => ({ start: '100', end: '200' })),
 }));
 
 describe('prepareQueryRangePayloadV5', () => {
@@ -517,7 +515,9 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 
 	it('maps groupBy, order, having, aggregations and filter for logs builder query', () => {
-		vi.mocked(getStartEndRangeTime).mockReturnValueOnce({
+		const getStartEndRangeTime = jest.requireMock('lib/getStartEndRangeTime')
+			.default as jest.Mock;
+		getStartEndRangeTime.mockReturnValueOnce({
 			start: '1754623641',
 			end: '1754645241',
 		});

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';

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

@@ -1,16 +1,15 @@
 import { render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import getLocal from '../../../api/browser/localstorage/get';
 import AppLoading from '../AppLoading';
 
-vi.mock('../../../api/browser/localstorage/get', () => ({
+jest.mock('../../../api/browser/localstorage/get', () => ({
 	__esModule: true,
-	default: vi.fn(),
+	default: jest.fn(),
 }));
 
 // Access the mocked function
-const mockGet = vi.mocked(getLocal);
+const mockGet = getLocal as unknown as jest.Mock;
 
 describe('AppLoading', () => {
 	const SIGNOZ_TEXT = 'SigNoz';
@@ -19,12 +18,12 @@ describe('AppLoading', () => {
 	const CONTAINER_SELECTOR = '.app-loading-container';
 
 	beforeEach(() => {
-		vi.clearAllMocks();
+		jest.clearAllMocks();
 	});
 
 	it('should render loading screen with dark theme by default', () => {
 		// Mock localStorage to return dark theme (or undefined for default)
-		mockGet.mockReturnValue(null);
+		mockGet.mockReturnValue(undefined);
 
 		render(<AppLoading />);
 
@@ -41,17 +40,14 @@ describe('AppLoading', () => {
 
 	it('should have proper structure and content', () => {
 		// Mock localStorage to return dark theme
-		mockGet.mockReturnValue(null);
+		mockGet.mockReturnValue(undefined);
 
 		render(<AppLoading />);
 
 		// Check for brand logo
 		const logo = screen.getByAltText(SIGNOZ_TEXT);
 		expect(logo).toBeInTheDocument();
-		expect(logo).toHaveAttribute(
-			'src',
-			expect.stringContaining('data:image/svg+xml'),
-		);
+		expect(logo).toHaveAttribute('src', 'test-file-stub');
 
 		// Check for brand title
 		const title = screen.getByText(SIGNOZ_TEXT);

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/ui/button';
 import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -14,8 +14,8 @@ import {
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,5 +1,6 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { Select, Spin, Typography } from 'antd';
+import { Select, Spin } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Divider, Drawer, Typography } from 'antd';
+import { Divider, Drawer } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';

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

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Card, Typography } from 'antd';
+import { Card } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/ChangelogModal/__test__/ChangelogModal.test.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import { fireEvent, render, screen } from '@testing-library/react';
+import { USER_PREFERENCES } from 'constants/userPreferences';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import {
 	ChangelogSchema,
 	DeploymentType,
 } from 'types/api/changelog/getChangelogByVersion';
-import { describe, expect, it, vi } from 'vitest';
 
 import ChangelogModal from '../ChangelogModal';
 
@@ -37,25 +37,27 @@ const mockChangelog: ChangelogSchema = {
 };
 
 // Mock react-markdown to just render children as plain text
-vi.mock('react-markdown', () => ({
-	default: function ReactMarkdown({ children }: any) {
-		return <div>{children}</div>;
-	},
-}));
+jest.mock(
+	'react-markdown',
+	() =>
+		function ReactMarkdown({ children }: any) {
+			return <div>{children}</div>;
+		},
+);
 // mock useAppContext
-vi.mock('providers/App/App', () => ({
-	useAppContext: vi.fn(() => ({
-		updateUserPreferenceInContext: vi.fn(),
+jest.mock('providers/App/App', () => ({
+	useAppContext: jest.fn(() => ({
+		updateUserPreferenceInContext: jest.fn(),
 		userPreferences: [
 			{
-				name: 'last_seen_changelog_version',
+				name: USER_PREFERENCES.LAST_SEEN_CHANGELOG_VERSION,
 				value: 'v1.0.0',
 			},
 		],
 	})),
 }));
 
-function renderChangelog(onClose: () => void = vi.fn()): void {
+function renderChangelog(onClose: () => void = jest.fn()): void {
 	render(
 		<MockQueryClientProvider>
 			<ChangelogModal changelog={mockChangelog} onClose={onClose} />
@@ -76,14 +78,14 @@ describe('ChangelogModal', () => {
 	});
 
 	it('calls onClose when Skip for now is clicked', () => {
-		const onClose = vi.fn();
+		const onClose = jest.fn();
 		renderChangelog(onClose);
 		fireEvent.click(screen.getByText('Skip for now'));
 		expect(onClose).toHaveBeenCalled();
 	});
 
 	it('opens migration docs when Update my workspace is clicked', () => {
-		window.open = vi.fn();
+		window.open = jest.fn();
 		renderChangelog();
 		fireEvent.click(screen.getByText('Update my workspace'));
 		expect(window.open).toHaveBeenCalledWith(
@@ -98,7 +100,7 @@ describe('ChangelogModal', () => {
 		const scrollBtn = screen.getByTestId('scroll-more-btn');
 		const contentDiv = screen.getByTestId('changelog-content');
 		if (contentDiv) {
-			contentDiv.scrollTo = vi.fn();
+			contentDiv.scrollTo = jest.fn();
 		}
 		fireEvent.click(scrollBtn);
 		if (contentDiv) {

frontend/src/components/ChangelogModal/__test__/ChangelogRenderer.test.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
 import {
 	ChangelogSchema,
 	DeploymentType,
@@ -10,11 +9,13 @@ import {
 import ChangelogRenderer from '../components/ChangelogRenderer';
 
 // Mock react-markdown to just render children as plain text
-vi.mock('react-markdown', () => ({
-	default: function ReactMarkdown({ children }: any) {
-		return <div>{children}</div>;
-	},
-}));
+jest.mock(
+	'react-markdown',
+	() =>
+		function ReactMarkdown({ children }: any) {
+			return <div>{children}</div>;
+		},
+);
 
 const mockChangelog: ChangelogSchema = {
 	id: 1,

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Typography } from 'antd';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -554,10 +554,9 @@ function ClientSideQBSearch(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
-							ellipsis
 							$isInNin={isInNin}
-							disabled={isDisabled}
 							$isEnabled={!!searchValue}
+							$disabled={isDisabled}
 							onClick={(): void => {
 								if (!isDisabled) {
 									tagEditHandler(value);

frontend/src/components/CodeBlock/CodeBlock.test.tsx

@@ -1,40 +1,16 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import type { ReactNode } from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import CodeBlock from './CodeBlock';
 
-const { mockCopyToClipboard } = vi.hoisted(() => ({
-	mockCopyToClipboard: vi.fn(),
-}));
+const mockCopyToClipboard = jest.fn();
 
-vi.mock('react-use', () => ({
+jest.mock('react-use', () => ({
 	useCopyToClipboard: (): [unknown, (text: string) => void] => [
 		undefined,
 		mockCopyToClipboard,
 	],
 }));
 
-vi.mock('@signozhq/icons', () => ({
-	Check: (): null => null,
-	Copy: (): null => null,
-}));
-
-vi.mock('@signozhq/ui', async () => {
-	const React = await vi.importActual<typeof import('react')>('react');
-
-	return {
-		Button: ({
-			prefix,
-			...props
-		}: {
-			prefix?: ReactNode;
-			[key: string]: unknown;
-		}): ReturnType<typeof React.createElement> =>
-			React.createElement('button', props, prefix),
-	};
-});
-
 describe('CodeBlock', () => {
 	beforeEach(() => {
 		mockCopyToClipboard.mockReset();
@@ -57,7 +33,7 @@ describe('CodeBlock', () => {
 	});
 
 	it('copies code and triggers callback', async () => {
-		const onCopy = vi.fn();
+		const onCopy = jest.fn();
 		render(<CodeBlock code="SELECT * FROM logs;" onCopy={onCopy} />);
 
 		fireEvent.click(screen.getByRole('button', { name: /copy code/i }));

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/ui/button';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,13 +1,10 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
-import {
-	Button,
-	DialogFooter,
-	DialogWrapper,
-	Input,
-	toast,
-} from '@signozhq/ui';
+import { Button } from '@signozhq/ui/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
+import { Input } from '@signozhq/ui/input';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,

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

@@ -1,49 +1,28 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui/sonner';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import {
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	waitForElementToBeRemoved,
+} from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-vi.mock('@signozhq/icons', () => ({
-	X: ({ size: _size }: any): JSX.Element => <span aria-hidden="true" />,
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
-vi.mock('@signozhq/ui', () => ({
-	Button: ({
-		children,
-		loading: _loading,
-		variant: _variant,
-		color: _color,
-		...props
-	}: any): JSX.Element => <button {...props}>{children}</button>,
-	DialogFooter: ({ children, ...props }: any): JSX.Element => (
-		<div {...props}>{children}</div>
-	),
-	DialogWrapper: ({ title, open, children }: any): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-			</div>
-		) : null,
-	Input: (props: any): JSX.Element => <input {...props} />,
-	toast: { success: vi.fn(), error: vi.fn() },
-}));
+const mockToast = jest.mocked(toast);
 
-vi.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: ReturnType<typeof vi.fn> } => ({
-		safeNavigate: vi.fn(),
-	}),
-}));
-
-const mockToast = vi.mocked(toast);
-
-const showErrorModal = vi.hoisted(() => vi.fn());
-vi.mock('providers/ErrorModalProvider', async () => ({
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
 	__esModule: true,
-	...(await vi.importActual('providers/ErrorModalProvider')),
-	useErrorModal: vi.fn(() => ({
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
 		showErrorModal,
 		isErrorModalVisible: false,
 	})),
@@ -61,7 +40,7 @@ function renderModal(): ReturnType<typeof render> {
 
 describe('CreateServiceAccountModal', () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
+		jest.clearAllMocks();
 		server.use(
 			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json({ status: 'success', data: {} })),
@@ -147,16 +126,12 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByRole('dialog', {
+		const dialog = await screen.findByRole('dialog', {
 			name: /New Service Account/i,
 		});
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /New Service Account/i }),
-			).not.toBeInTheDocument();
-		});
+		await waitForElementToBeRemoved(dialog);
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@signozhq/ui';
+import { Calendar } from '@signozhq/ui/calendar';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -1,37 +1,36 @@
 import { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import dayjs from 'dayjs';
-import { describe, expect, it, vi } from 'vitest';
 import * as timeUtils from 'utils/timeUtils';
 
 import CustomTimePicker from './CustomTimePicker';
 
-vi.mock('react-router-dom', async () => {
-	const actual = await vi.importActual('react-router-dom');
+jest.mock('react-router-dom', () => {
+	const actual = jest.requireActual('react-router-dom');
 
 	return {
 		...actual,
-		useLocation: vi.fn().mockReturnValue({
+		useLocation: jest.fn().mockReturnValue({
 			pathname: '/test-path',
 		}),
 	};
 });
 
-vi.mock('react-redux', async () => ({
-	...(await vi.importActual('react-redux')),
-	useDispatch: vi.fn(() => vi.fn()),
-	useSelector: vi.fn(() => ({
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useDispatch: jest.fn(() => jest.fn()),
+	useSelector: jest.fn(() => ({
 		minTime: 0,
 		maxTime: Date.now(),
 	})),
 }));
 
-vi.mock('providers/Timezone', async () => {
-	const actual = await vi.importActual('providers/Timezone');
+jest.mock('providers/Timezone', () => {
+	const actual = jest.requireActual('providers/Timezone');
 
 	return {
 		...actual,
-		useTimezone: vi.fn().mockReturnValue({
+		useTimezone: jest.fn().mockReturnValue({
 			timezone: {
 				value: 'UTC',
 				offset: '+00:00',
@@ -46,30 +45,6 @@ vi.mock('providers/Timezone', async () => {
 	};
 });
 
-vi.mock('@signozhq/ui', () => ({
-	Button: ({
-		children,
-		prefix,
-		variant: _variant,
-		color: _color,
-		...props
-	}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-		prefix?: React.ReactNode;
-		variant?: string;
-		color?: string;
-	}): JSX.Element => (
-		<button type="button" {...props}>
-			{prefix}
-			{children}
-		</button>
-	),
-	Calendar: (): JSX.Element => <div data-testid="mock-calendar" />,
-}));
-
-vi.mock('hooks/useZoomOut', () => ({
-	useZoomOut: vi.fn(() => vi.fn()),
-}));
-
 interface WrapperProps {
 	initialValue?: string;
 	showLiveLogs?: boolean;
@@ -148,8 +123,8 @@ describe('CustomTimePicker', () => {
 	});
 
 	it('applies valid shorthand on Enter', () => {
-		const onValid = vi.fn();
-		const onError = vi.fn();
+		const onValid = jest.fn();
+		const onError = jest.fn();
 
 		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
 
@@ -166,9 +141,9 @@ describe('CustomTimePicker', () => {
 	});
 
 	it('sets error and updates custom time status for invalid shorthand exceeding max allowed window', () => {
-		const onValid = vi.fn();
-		const onError = vi.fn();
-		const onCustomTimeStatusUpdate = vi.fn();
+		const onValid = jest.fn();
+		const onError = jest.fn();
+		const onCustomTimeStatusUpdate = jest.fn();
 
 		render(
 			<Wrapper
@@ -191,8 +166,8 @@ describe('CustomTimePicker', () => {
 	});
 
 	it('treats close after change like pressing Enter (blur + chevron)', () => {
-		const onValid = vi.fn();
-		const onError = vi.fn();
+		const onValid = jest.fn();
+		const onError = jest.fn();
 
 		render(<Wrapper onValidCustomDateChange={onValid} onError={onError} />);
 
@@ -216,8 +191,8 @@ describe('CustomTimePicker', () => {
 	});
 
 	it('applies epoch start/end range on Enter via onCustomDateHandler', () => {
-		const onCustomDateHandler = vi.fn();
-		const onError = vi.fn();
+		const onCustomDateHandler = jest.fn();
+		const onError = jest.fn();
 
 		render(
 			<Wrapper onCustomDateHandler={onCustomDateHandler} onError={onError} />,
@@ -238,9 +213,9 @@ describe('CustomTimePicker', () => {
 	});
 
 	it('uses validateTimeRange result for generic formatted ranges (valid case)', () => {
-		const validateTimeRangeSpy = vi.spyOn(timeUtils, 'validateTimeRange');
-		const onCustomDateHandler = vi.fn();
-		const onError = vi.fn();
+		const validateTimeRangeSpy = jest.spyOn(timeUtils, 'validateTimeRange');
+		const onCustomDateHandler = jest.fn();
+		const onError = jest.fn();
 
 		validateTimeRangeSpy.mockReturnValue({
 			isValid: true,
@@ -269,9 +244,9 @@ describe('CustomTimePicker', () => {
 	});
 
 	it('uses validateTimeRange result for generic formatted ranges (invalid case)', () => {
-		const validateTimeRangeSpy = vi.spyOn(timeUtils, 'validateTimeRange');
-		const onValid = vi.fn();
-		const onError = vi.fn();
+		const validateTimeRangeSpy = jest.spyOn(timeUtils, 'validateTimeRange');
+		const onValid = jest.fn();
+		const onError = jest.fn();
 
 		validateTimeRangeSpy.mockReturnValue({
 			isValid: false,

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/ui/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -2,33 +2,23 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { QueryParams } from 'constants/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import type { Mock } from 'vitest';
 
 import CustomTimePicker from '../CustomTimePicker';
 
-const {
-	MS_PER_MIN,
-	NOW_MS,
-	mockDispatch,
-	mockSafeNavigate,
-	mockUrlQueryDelete,
-	mockUrlQuerySet,
-} = vi.hoisted(() => ({
-	MS_PER_MIN: 60 * 1000,
-	NOW_MS: 1705312800000,
-	mockDispatch: vi.fn(),
-	mockSafeNavigate: vi.fn(),
-	mockUrlQueryDelete: vi.fn(),
-	mockUrlQuerySet: vi.fn(),
-}));
+const MS_PER_MIN = 60 * 1000;
+const NOW_MS = 1705312800000;
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
 
 interface MockAppState {
 	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
 }
 
-vi.mock('react-redux', () => ({
-	useDispatch: (): Mock => mockDispatch,
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
 	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
 		const mockState: MockAppState = {
 			globalTime: {
@@ -40,8 +30,8 @@ vi.mock('react-redux', () => ({
 	},
 }));
 
-vi.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: Mock } => ({
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
 		safeNavigate: mockSafeNavigate,
 	}),
 }));
@@ -53,7 +43,7 @@ interface MockUrlQuery {
 	toString: () => string;
 }
 
-vi.mock('hooks/useUrlQuery', () => ({
+jest.mock('hooks/useUrlQuery', () => ({
 	__esModule: true,
 	default: (): MockUrlQuery => ({
 		delete: mockUrlQueryDelete,
@@ -63,46 +53,26 @@ vi.mock('hooks/useUrlQuery', () => ({
 	}),
 }));
 
-vi.mock('providers/Timezone', () => ({
+jest.mock('providers/Timezone', () => ({
 	useTimezone: (): { timezone: { value: string; offset: string } } => ({
 		timezone: { value: 'UTC', offset: 'UTC' },
 	}),
 }));
 
-vi.mock('react-router-dom', () => ({
+jest.mock('react-router-dom', () => ({
 	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
 }));
 
-vi.mock('@signozhq/ui', () => ({
-	Button: ({
-		children,
-		prefix,
-		variant: _variant,
-		color: _color,
-		...props
-	}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-		prefix?: React.ReactNode;
-		variant?: string;
-		color?: string;
-	}): JSX.Element => (
-		<button type="button" {...props}>
-			{prefix}
-			{children}
-		</button>
-	),
-	Calendar: (): JSX.Element => <div data-testid="mock-calendar" />,
-}));
-
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
 const now = Date.now();
 const defaultProps = {
-	onSelect: vi.fn(),
-	onError: vi.fn(),
+	onSelect: jest.fn(),
+	onError: jest.fn(),
 	selectedValue: '15m',
 	selectedTime: '15m',
-	onValidCustomDateChange: vi.fn(),
+	onValidCustomDateChange: jest.fn(),
 	open: false,
-	setOpen: vi.fn(),
+	setOpen: jest.fn(),
 	items: [
 		{ value: '15m', label: 'Last 15 minutes' },
 		{ value: '1h', label: 'Last 1 hour' },
@@ -113,12 +83,12 @@ const defaultProps = {
 
 describe('CustomTimePicker - zoom out button', () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
-		vi.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+		jest.clearAllMocks();
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
 	});
 
 	afterEach(() => {
-		vi.restoreAllMocks();
+		jest.restoreAllMocks();
 	});
 
 	it('should render zoom out button when showLiveLogs is false', () => {

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -0,0 +1,37 @@
+.details-header {
+	// ghost + secondary missing hover bg token in @signozhq/button
+	--button-ghost-hover-background: var(--l3-background);
+
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 0 12px;
+	border-bottom: 1px solid var(--l1-border);
+	height: 36px;
+	background: var(--l2-background);
+
+	&__title {
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--l1-foreground);
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex-shrink: 0;
+	}
+
+	&__nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { X } from '@signozhq/icons';
+
+import './DetailsHeader.styles.scss';
+
+export interface HeaderAction {
+	key: string;
+	component: ReactNode; // check later if we can use direct btn itself or not.
+}
+
+export interface DetailsHeaderProps {
+	title: string;
+	onClose: () => void;
+	actions?: HeaderAction[];
+	closePosition?: 'left' | 'right';
+	className?: string;
+}
+
+function DetailsHeader({
+	title,
+	onClose,
+	actions,
+	closePosition = 'right',
+	className,
+}: DetailsHeaderProps): JSX.Element {
+	const closeButton = (
+		<Button
+			variant="ghost"
+			size="icon"
+			color="secondary"
+			onClick={onClose}
+			aria-label="Close"
+			prefix={<X size={14} />}
+		></Button>
+	);
+
+	return (
+		<div className={`details-header ${className || ''}`}>
+			{closePosition === 'left' && closeButton}
+
+			<span className="details-header__title">{title}</span>
+
+			{actions && (
+				<div className="details-header__actions">
+					{actions.map((action) => (
+						<div key={action.key}>{action.component}</div>
+					))}
+				</div>
+			)}
+
+			{closePosition === 'right' && closeButton}
+		</div>
+	);
+}
+
+export default DetailsHeader;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -0,0 +1,7 @@
+.details-panel-drawer {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -0,0 +1,35 @@
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+
+import './DetailsPanelDrawer.styles.scss';
+
+interface DetailsPanelDrawerProps {
+	isOpen: boolean;
+	onClose: () => void;
+	children: React.ReactNode;
+	className?: string;
+}
+
+function DetailsPanelDrawer({
+	isOpen,
+	onClose,
+	children,
+	className,
+}: DetailsPanelDrawerProps): JSX.Element {
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			showOverlay={false}
+			className={`details-panel-drawer ${className || ''}`}
+		>
+			<div className="details-panel-drawer__body">{children}</div>
+		</DrawerWrapper>
+	);
+}
+
+export default DetailsPanelDrawer;

frontend/src/components/DetailsPanel/index.ts

@@ -0,0 +1,8 @@
+export type {
+	DetailsHeaderProps,
+	HeaderAction,
+} from './DetailsHeader/DetailsHeader';
+export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
+export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
+export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
+export { default as useDetailsPanel } from './useDetailsPanel';

frontend/src/components/DetailsPanel/types.ts

@@ -0,0 +1,10 @@
+export interface DetailsPanelState {
+	isOpen: boolean;
+	open: () => void;
+	close: () => void;
+}
+
+export interface UseDetailsPanelOptions {
+	entityId: string | undefined;
+	onClose?: () => void;
+}

frontend/src/components/DetailsPanel/useDetailsPanel.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DetailsPanelState, UseDetailsPanelOptions } from './types';
+
+function useDetailsPanel({
+	entityId,
+	onClose,
+}: UseDetailsPanelOptions): DetailsPanelState {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const prevEntityIdRef = useRef<string>('');
+
+	useEffect(() => {
+		const currentId = entityId || '';
+		if (currentId && currentId !== prevEntityIdRef.current) {
+			setIsOpen(true);
+		}
+		prevEntityIdRef.current = currentId;
+	}, [entityId]);
+
+	const open = useCallback(() => setIsOpen(true), []);
+	const close = useCallback(() => {
+		setIsOpen(false);
+		onClose?.();
+	}, [onClose]);
+
+	return { isOpen, open, close };
+}
+
+export default useDetailsPanel;

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -1,6 +1,3 @@
-import type { Mock } from 'vitest';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
@@ -16,28 +13,25 @@ import '@testing-library/jest-dom';
 import { DownloadFormats, DownloadRowCounts } from './constants';
 import DownloadOptionsMenu from './DownloadOptionsMenu';
 
-const { mockDownloadExportData, mockUseQueryBuilder } = vi.hoisted(() => ({
-	mockDownloadExportData: vi.fn().mockResolvedValue(undefined),
-	mockUseQueryBuilder: vi.fn(),
-}));
-
-vi.mock('api/v1/download/downloadExportData', () => ({
+const mockDownloadExportData = jest.fn().mockResolvedValue(undefined);
+jest.mock('api/v1/download/downloadExportData', () => ({
 	downloadExportData: (...args: any[]): any => mockDownloadExportData(...args),
 	default: (...args: any[]): any => mockDownloadExportData(...args),
 }));
 
-vi.mock('antd', async () => {
-	const actual = await vi.importActual<typeof import('antd')>('antd');
+jest.mock('antd', () => {
+	const actual = jest.requireActual('antd');
 	return {
 		...actual,
 		message: {
-			success: vi.fn(),
-			error: vi.fn(),
+			success: jest.fn(),
+			error: jest.fn(),
 		},
 	};
 });
 
-vi.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+const mockUseQueryBuilder = jest.fn();
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): any => mockUseQueryBuilder(),
 }));
 
@@ -101,8 +95,8 @@ describe.each([
 
 	beforeEach(() => {
 		mockDownloadExportData.mockReset().mockResolvedValue(undefined);
-		(message.success as Mock).mockReset();
-		(message.error as Mock).mockReset();
+		(message.success as jest.Mock).mockReset();
+		(message.error as jest.Mock).mockReset();
 		mockUseQueryBuilder.mockReturnValue({
 			stagedQuery: createMockStagedQuery(dataSource),
 		});
@@ -313,11 +307,7 @@ describe.each([
 		fireEvent.click(screen.getByText('Export'));
 
 		expect(screen.getByTestId(testId)).toBeDisabled();
-		await waitFor(() => {
-			expect(screen.getByRole('dialog').closest('.ant-popover')).toHaveStyle({
-				pointerEvents: 'none',
-			});
-		});
+		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
 		resolveDownload!();
 
@@ -333,7 +323,7 @@ describe('DownloadOptionsMenu for traces with queryTraceOperator', () => {
 
 	beforeEach(() => {
 		mockDownloadExportData.mockReset().mockResolvedValue(undefined);
-		(message.success as Mock).mockReset();
+		(message.success as jest.Mock).mockReset();
 	});
 
 	it('applies limit and clears groupBy on queryTraceOperator entries', async () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Radio, Tooltip, Typography } from 'antd';
+import { Button, Popover, Radio, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, DownloadIcon, Loader2 } from 'lucide-react';

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

@@ -1,28 +1,27 @@
 import { render } from '@testing-library/react';
 import { Table } from 'antd';
-import { beforeAll, describe, expect, it, vi } from 'vitest';
 
 import DraggableTableRow from '..';
 
 beforeAll(() => {
 	Object.defineProperty(window, 'matchMedia', {
 		writable: true,
-		value: vi.fn().mockImplementation((query) => ({
+		value: jest.fn().mockImplementation((query) => ({
 			matches: false,
 			media: query,
 			onchange: null,
-			addListener: vi.fn(),
-			removeListener: vi.fn(),
-			addEventListener: vi.fn(),
-			removeEventListener: vi.fn(),
-			dispatchEvent: vi.fn(),
+			addListener: jest.fn(),
+			removeListener: jest.fn(),
+			addEventListener: jest.fn(),
+			removeEventListener: jest.fn(),
+			dispatchEvent: jest.fn(),
 		})),
 	});
 });
 
-vi.mock('react-dnd', () => ({
-	useDrop: vi.fn().mockImplementation(() => [vi.fn(), vi.fn(), vi.fn()]),
-	useDrag: vi.fn().mockImplementation(() => [vi.fn(), vi.fn(), vi.fn()]),
+jest.mock('react-dnd', () => ({
+	useDrop: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
+	useDrag: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
 }));
 
 describe('DraggableTableRow Snapshot test', () => {

frontend/src/components/DraggableTableRow/tests/__snapshots__/DraggableTableRow.test.tsx.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`DraggableTableRow Snapshot test > should render DraggableTableRow 1`] = `
+exports[`DraggableTableRow Snapshot test should render DraggableTableRow 1`] = `
 <DocumentFragment>
   <div
     class="ant-table-wrapper css-dev-only-do-not-override-2i2tap"

frontend/src/components/DraggableTableRow/tests/utils.test.ts

@@ -1,16 +1,14 @@
-import { describe, expect, it, vi } from 'vitest';
-
 import { dragHandler, dropHandler } from '../utils';
 
-vi.mock('react-dnd', () => ({
-	useDrop: vi.fn().mockImplementation(() => [vi.fn(), vi.fn(), vi.fn()]),
-	useDrag: vi.fn().mockImplementation(() => [vi.fn(), vi.fn(), vi.fn()]),
+jest.mock('react-dnd', () => ({
+	useDrop: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
+	useDrag: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
 }));
 
 describe('Utils testing of DraggableTableRow component', () => {
 	it('Should dropHandler return true', () => {
 		const monitor = {
-			isOver: vi.fn().mockReturnValueOnce(true),
+			isOver: jest.fn().mockReturnValueOnce(true),
 		} as never;
 		const dropDataTruthy = dropHandler(monitor);
 
@@ -19,7 +17,7 @@ describe('Utils testing of DraggableTableRow component', () => {
 
 	it('Should dropHandler return false', () => {
 		const monitor = {
-			isOver: vi.fn().mockReturnValueOnce(false),
+			isOver: jest.fn().mockReturnValueOnce(false),
 		} as never;
 		const dropDataFalsy = dropHandler(monitor);
 
@@ -28,7 +26,7 @@ describe('Utils testing of DraggableTableRow component', () => {
 
 	it('Should dragHandler return true', () => {
 		const monitor = {
-			isDragging: vi.fn().mockReturnValueOnce(true),
+			isDragging: jest.fn().mockReturnValueOnce(true),
 		} as never;
 		const dragDataTruthy = dragHandler(monitor);
 
@@ -37,7 +35,7 @@ describe('Utils testing of DraggableTableRow component', () => {
 
 	it('Should dragHandler return false', () => {
 		const monitor = {
-			isDragging: vi.fn().mockReturnValueOnce(false),
+			isDragging: jest.fn().mockReturnValueOnce(false),
 		} as never;
 		const dragDataFalsy = dragHandler(monitor);
 

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,5 +1,6 @@
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 
 interface DeleteMemberDialogProps {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
-import { Badge, Button, DrawerWrapper, Input, toast } from '@signozhq/ui';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { toast } from '@signozhq/ui/sonner';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,5 +1,6 @@
 import { Check, Copy } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
 
 interface ResetLinkDialogProps {
 	open: boolean;

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

@@ -1,9 +1,6 @@
-import type { ChangeEventHandler, ReactNode } from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import type { Mock } from 'vitest';
-import { toast } from '@signozhq/ui';
+import type { ReactNode } from 'react';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import { useListRoles } from 'api/generated/services/role';
 import {
 	useCreateResetPasswordToken,
 	useDeleteUser,
@@ -18,138 +15,96 @@ import {
 	listRolesSuccessResponse,
 	managedRoles,
 } from 'mocks-server/__mockdata__/roles';
+import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
-vi.mock('api/generated/services/role', async () => {
-	const actual = await vi.importActual<
-		typeof import('api/generated/services/role')
-	>('api/generated/services/role');
-	return {
-		...actual,
-		useListRoles: vi.fn(),
-	};
-});
-
-vi.mock('api/generated/services/users', () => ({
-	useDeleteUser: vi.fn(),
-	useGetUser: vi.fn(),
-	useUpdateUser: vi.fn(),
-	useUpdateMyUserV2: vi.fn(),
-	useSetRoleByUserID: vi.fn(),
-	useGetResetPasswordToken: vi.fn(),
-	useCreateResetPasswordToken: vi.fn(),
+jest.mock('api/generated/services/users', () => ({
+	useDeleteUser: jest.fn(),
+	useGetUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	useUpdateMyUserV2: jest.fn(),
+	useSetRoleByUserID: jest.fn(),
+	useGetResetPasswordToken: jest.fn(),
+	useCreateResetPasswordToken: jest.fn(),
 }));
 
-vi.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
-	convertToApiError: vi.fn(),
+jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
+	convertToApiError: jest.fn(),
 }));
 
-vi.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): Mock => vi.fn(),
+jest.mock('@signozhq/ui/drawer', () => ({
+	...jest.requireActual('@signozhq/ui/drawer'),
+	DrawerWrapper: ({
+		children,
+		footer,
+		open,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null =>
+		open ? (
+			<div>
+				{children}
+				{footer}
+			</div>
+		) : null,
 }));
 
-vi.mock('@signozhq/ui', async () => {
-	const React = await vi.importActual<typeof import('react')>('react');
+jest.mock('@signozhq/ui/dialog', () => ({
+	...jest.requireActual('@signozhq/ui/dialog'),
+	DialogWrapper: ({
+		children,
+		footer,
+		open,
+		title,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+		title?: string;
+	}): JSX.Element | null =>
+		open ? (
+			<div role="dialog" aria-label={title}>
+				{children}
+				{footer}
+			</div>
+		) : null,
+	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
 
-	return {
-		Badge: ({ children }: { children?: ReactNode }): JSX.Element =>
-			React.createElement('span', null, children),
-		Button: ({
-			children,
-			disabled,
-			onClick,
-			prefix,
-		}: {
-			children?: ReactNode;
-			disabled?: boolean;
-			onClick?: () => void;
-			prefix?: ReactNode;
-		}): JSX.Element =>
-			React.createElement('button', { disabled, onClick }, prefix, children),
-		DrawerWrapper: ({
-			children,
-			footer,
-			open,
-		}: {
-			children?: ReactNode;
-			footer?: ReactNode;
-			open: boolean;
-		}): JSX.Element | null =>
-			open ? React.createElement('div', null, children, footer) : null,
-		DialogWrapper: ({
-			children,
-			footer,
-			open,
-			title,
-		}: {
-			children?: ReactNode;
-			footer?: ReactNode;
-			open: boolean;
-			title?: string;
-		}): JSX.Element | null =>
-			open
-				? React.createElement(
-						'div',
-						{ role: 'dialog', 'aria-label': title },
-						children,
-						footer,
-					)
-				: null,
-		DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element =>
-			React.createElement('div', null, children),
-		Input: ({
-			disabled,
-			id,
-			onChange,
-			placeholder,
-			value,
-		}: {
-			disabled?: boolean;
-			id?: string;
-			onChange?: ChangeEventHandler<HTMLInputElement>;
-			placeholder?: string;
-			value?: string;
-		}): JSX.Element =>
-			React.createElement('input', {
-				disabled,
-				id,
-				onChange,
-				placeholder,
-				value,
-			}),
-		toast: {
-			success: vi.fn(),
-			error: vi.fn(),
-		},
-	};
-});
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
 
-const { mockCopyToClipboard, mockCopyState, showErrorModal } = vi.hoisted(
-	() => ({
-		mockCopyToClipboard: vi.fn(),
-		mockCopyState: { value: undefined, error: undefined },
-		showErrorModal: vi.fn(),
-	}),
-);
+const mockCopyToClipboard = jest.fn();
+const mockCopyState = { value: undefined, error: undefined };
 
-vi.mock('react-use', () => ({
+jest.mock('react-use', () => ({
 	useCopyToClipboard: (): [typeof mockCopyState, typeof mockCopyToClipboard] => [
 		mockCopyState,
 		mockCopyToClipboard,
 	],
 }));
 
-const mockDeleteMutate = vi.fn();
-const mockCreateTokenMutateAsync = vi.fn();
+const ROLES_ENDPOINT = '*/api/v1/roles';
 
-vi.mock('providers/ErrorModalProvider', async () => ({
+const mockDeleteMutate = jest.fn();
+const mockCreateTokenMutateAsync = jest.fn();
+
+const showErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
 	__esModule: true,
-	...(await vi.importActual<typeof import('providers/ErrorModalProvider')>(
-		'providers/ErrorModalProvider',
-	)),
-	useErrorModal: vi.fn(() => ({
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
 		showErrorModal,
 		isErrorModalVisible: false,
 	})),
@@ -208,8 +163,8 @@ function renderDrawer(
 		<EditMemberDrawer
 			member={activeMember}
 			open
-			onClose={vi.fn()}
-			onComplete={vi.fn()}
+			onClose={jest.fn()}
+			onComplete={jest.fn()}
 			{...props}
 		/>,
 	);
@@ -217,43 +172,38 @@ function renderDrawer(
 
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
+		jest.clearAllMocks();
 		mockCopyState.value = undefined;
 		mockCopyState.error = undefined;
 		showErrorModal.mockClear();
-		(useListRoles as Mock).mockReturnValue({
-			data: listRolesSuccessResponse,
-			isLoading: false,
-			isError: false,
-			error: null,
-			refetch: vi.fn(),
-			isFetching: false,
-			isSuccess: true,
-			status: 'success',
-		});
-		(useGetUser as Mock).mockReturnValue({
+		server.use(
+			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+		(useGetUser as jest.Mock).mockReturnValue({
 			data: mockFetchedUser,
 			isLoading: false,
-			refetch: vi.fn(),
+			refetch: jest.fn(),
 		});
-		(useUpdateUser as Mock).mockReturnValue({
-			mutateAsync: vi.fn().mockResolvedValue({}),
+		(useUpdateUser as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
-		(useUpdateMyUserV2 as Mock).mockReturnValue({
-			mutateAsync: vi.fn().mockResolvedValue({}),
+		(useUpdateMyUserV2 as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
-		(useSetRoleByUserID as Mock).mockReturnValue({
-			mutateAsync: vi.fn().mockResolvedValue({}),
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
-		(useDeleteUser as Mock).mockReturnValue({
+		(useDeleteUser as jest.Mock).mockReturnValue({
 			mutate: mockDeleteMutate,
 			isLoading: false,
 		});
 		// Token query: valid token for invited members
-		(useGetResetPasswordToken as Mock).mockReturnValue({
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
 			data: {
 				data: {
 					token: 'invite-tok-valid',
@@ -273,18 +223,20 @@ describe('EditMemberDrawer', () => {
 				expiresAt: new Date(Date.now() + 86400000).toISOString(),
 			},
 		});
-		(useCreateResetPasswordToken as Mock).mockReturnValue({
+		(useCreateResetPasswordToken as jest.Mock).mockReturnValue({
 			mutateAsync: mockCreateTokenMutateAsync,
 			isLoading: false,
 		});
 	});
 
-	it('renders active member details and disables Save when form is not dirty', async () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders active member details and disables Save when form is not dirty', () => {
 		renderDrawer();
 
-		await expect(
-			screen.findByDisplayValue('Alice Smith'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByDisplayValue('Alice Smith')).toBeInTheDocument();
 		expect(screen.getByText('alice@signoz.io')).toBeInTheDocument();
 		expect(screen.getByText('ACTIVE')).toBeInTheDocument();
 		expect(
@@ -293,11 +245,11 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('enables Save after editing name and calls updateUser on confirm', async () => {
-		const onComplete = vi.fn();
+		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockMutateAsync = vi.fn().mockResolvedValue({});
+		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useUpdateUser as Mock).mockReturnValue({
+		(useUpdateUser as jest.Mock).mockReturnValue({
 			mutateAsync: mockMutateAsync,
 			isLoading: false,
 		});
@@ -323,7 +275,7 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('does not close the drawer after a successful save', async () => {
-		const onClose = vi.fn();
+		const onClose = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		renderDrawer({ onClose });
@@ -345,18 +297,18 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('selecting a different role calls setRole with the new role name', async () => {
-		const onComplete = vi.fn();
+		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockSet = vi.fn().mockResolvedValue({});
+		const mockSet = jest.fn().mockResolvedValue({});
 
-		(useSetRoleByUserID as Mock).mockReturnValue({
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
 			mutateAsync: mockSet,
 			isLoading: false,
 		});
 
 		renderDrawer({ onComplete });
 
-		await screen.findByTitle('signoz-admin');
+		// Open the roles dropdown and select signoz-editor
 		await user.click(screen.getByLabelText('Roles'));
 		await user.click(await screen.findByTitle('signoz-editor'));
 
@@ -374,18 +326,18 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('does not call removeRole when the role is changed', async () => {
-		const onComplete = vi.fn();
+		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockSet = vi.fn().mockResolvedValue({});
+		const mockSet = jest.fn().mockResolvedValue({});
 
-		(useSetRoleByUserID as Mock).mockReturnValue({
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
 			mutateAsync: mockSet,
 			isLoading: false,
 		});
 
 		renderDrawer({ onComplete });
 
-		await screen.findByTitle('signoz-admin');
+		// Switch from signoz-admin to signoz-viewer using single-select
 		await user.click(screen.getByLabelText('Roles'));
 		await user.click(await screen.findByTitle('signoz-viewer'));
 
@@ -403,10 +355,10 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('shows delete confirm dialog and calls deleteUser for active members', async () => {
-		const onComplete = vi.fn();
+		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		(useDeleteUser as Mock).mockImplementation((options) => ({
+		(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 			mutate: mockDeleteMutate.mockImplementation(() => {
 				options?.mutation?.onSuccess?.();
 			}),
@@ -449,7 +401,7 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('shows "Regenerate Invite Link" when token is expired', () => {
-		(useGetResetPasswordToken as Mock).mockReturnValue({
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
 			data: {
 				data: {
 					token: 'old-tok',
@@ -469,7 +421,7 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('shows "Generate Invite Link" when no token exists', () => {
-		(useGetResetPasswordToken as Mock).mockReturnValue({
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
 			data: undefined,
 			isLoading: false,
 			isError: true,
@@ -483,10 +435,10 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('calls deleteUser after confirming revoke invite for invited members', async () => {
-		const onComplete = vi.fn();
+		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-		(useDeleteUser as Mock).mockImplementation((options) => ({
+		(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 			mutate: mockDeleteMutate.mockImplementation(() => {
 				options?.mutation?.onSuccess?.();
 			}),
@@ -513,11 +465,11 @@ describe('EditMemberDrawer', () => {
 	});
 
 	it('calls updateUser when saving name change for an invited member', async () => {
-		const onComplete = vi.fn();
+		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockMutateAsync = vi.fn().mockResolvedValue({});
+		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useGetUser as Mock).mockReturnValue({
+		(useGetUser as jest.Mock).mockReturnValue({
 			data: {
 				data: {
 					...mockFetchedUser.data,
@@ -533,9 +485,9 @@ describe('EditMemberDrawer', () => {
 				},
 			},
 			isLoading: false,
-			refetch: vi.fn(),
+			refetch: jest.fn(),
 		});
-		(useUpdateUser as Mock).mockReturnValue({
+		(useUpdateUser as jest.Mock).mockReturnValue({
 			mutateAsync: mockMutateAsync,
 			isLoading: false,
 		});
@@ -560,7 +512,7 @@ describe('EditMemberDrawer', () => {
 	});
 
 	describe('error handling', () => {
-		const mockConvertToApiError = vi.mocked(convertToApiError);
+		const mockConvertToApiError = jest.mocked(convertToApiError);
 
 		beforeEach(() => {
 			mockConvertToApiError.mockReturnValue({
@@ -571,8 +523,8 @@ describe('EditMemberDrawer', () => {
 		it('shows SaveErrorItem when updateUser fails for name change', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-			(useUpdateUser as Mock).mockReturnValue({
-				mutateAsync: vi.fn().mockRejectedValue(new Error('server error')),
+			(useUpdateUser as jest.Mock).mockReturnValue({
+				mutateAsync: jest.fn().mockRejectedValue(new Error('server error')),
 				isLoading: false,
 			});
 
@@ -596,7 +548,7 @@ describe('EditMemberDrawer', () => {
 		it('shows API error message when deleteUser fails for active member', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-			(useDeleteUser as Mock).mockImplementation((options) => ({
+			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 				mutate: mockDeleteMutate.mockImplementation(() => {
 					options?.mutation?.onError?.({});
 				}),
@@ -627,7 +579,7 @@ describe('EditMemberDrawer', () => {
 		it('shows API error message when deleteUser fails for invited member', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
-			(useDeleteUser as Mock).mockImplementation((options) => ({
+			(useDeleteUser as jest.Mock).mockImplementation((options) => ({
 				mutate: mockDeleteMutate.mockImplementation(() => {
 					options?.mutation?.onError?.({});
 				}),
@@ -690,10 +642,10 @@ describe('EditMemberDrawer', () => {
 
 	describe('root user', () => {
 		beforeEach(() => {
-			(useGetUser as Mock).mockReturnValue({
+			(useGetUser as jest.Mock).mockReturnValue({
 				data: rootMockFetchedUser,
 				isLoading: false,
-				refetch: vi.fn(),
+				refetch: jest.fn(),
 			});
 		});
 
@@ -773,7 +725,7 @@ describe('EditMemberDrawer', () => {
 
 		it('copies the link to clipboard and shows "Copied!" on the button', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const mockToast = vi.mocked(toast);
+			const mockToast = jest.mocked(toast);
 
 			renderDrawer();
 

frontend/src/components/Editor/Editor.test.tsx

@@ -1,39 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { describe, expect, it, vi } from 'vitest';
-import type { Mock } from 'vitest';
 
 import Editor from './index';
 
-vi.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: vi.fn(),
-}));
-
-vi.mock('@monaco-editor/react', () => ({
-	default: ({ height }: { height?: string }): JSX.Element => (
-		<section
-			style={{
-				display: 'flex',
-				position: 'relative',
-				textAlign: 'initial',
-				width: '100%',
-				height,
-			}}
-		>
-			<div
-				style={{
-					display: 'flex',
-					height: '100%',
-					width: '100%',
-					justifyContent: 'center',
-					alignItems: 'center',
-				}}
-			>
-				Loading...
-			</div>
-			<div style={{ width: '100%', display: 'none' }} />
-		</section>
-	),
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn(),
 }));
 
 describe('Editor', () => {
@@ -63,7 +34,7 @@ describe('Editor', () => {
 	});
 
 	it('renders with dark mode theme', () => {
-		(useIsDarkMode as Mock).mockImplementation(() => true);
+		(useIsDarkMode as jest.Mock).mockImplementation(() => true);
 
 		const { container } = render(<Editor value="dark mode text" />);
 
@@ -71,7 +42,7 @@ describe('Editor', () => {
 	});
 
 	it('renders with light mode theme', () => {
-		(useIsDarkMode as Mock).mockImplementation(() => false);
+		(useIsDarkMode as jest.Mock).mockImplementation(() => false);
 
 		const { container } = render(<Editor value="light mode text" />);
 

frontend/src/components/Editor/__snapshots__/Editor.test.tsx.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Editor > renders correctly with custom props 1`] = `
+exports[`Editor renders correctly with custom props 1`] = `
 <div>
   <section
     style="display: flex; position: relative; text-align: initial; width: 100%; height: 50vh;"
@@ -17,7 +17,7 @@ exports[`Editor > renders correctly with custom props 1`] = `
 </div>
 `;
 
-exports[`Editor > renders correctly with default props 1`] = `
+exports[`Editor renders correctly with default props 1`] = `
 <div>
   <section
     style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
@@ -34,7 +34,7 @@ exports[`Editor > renders correctly with default props 1`] = `
 </div>
 `;
 
-exports[`Editor > renders with dark mode theme 1`] = `
+exports[`Editor renders with dark mode theme 1`] = `
 <div>
   <section
     style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
@@ -51,7 +51,7 @@ exports[`Editor > renders with dark mode theme 1`] = `
 </div>
 `;
 
-exports[`Editor > renders with light mode theme 1`] = `
+exports[`Editor renders with light mode theme 1`] = `
 <div>
   <section
     style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"

frontend/src/components/ErrorBoundaryHOC/__tests__/withErrorBoundary.test.tsx

@@ -1,22 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import {
-	afterAll,
-	beforeAll,
-	beforeEach,
-	describe,
-	expect,
-	it,
-	vi,
-} from 'vitest';
 
 import withErrorBoundary, {
 	WithErrorBoundaryOptions,
 } from '../withErrorBoundary';
 
 // Mock dependencies before imports
-vi.mock('@sentry/react', async () => {
-	const ReactMock = await vi.importActual<typeof import('react')>('react');
+jest.mock('@sentry/react', () => {
+	const ReactMock = jest.requireActual('react');
 
 	class MockErrorBoundary extends ReactMock.Component<
 		{
@@ -43,8 +34,8 @@ vi.mock('@sentry/react', async () => {
 			const { beforeCapture, onError } = this.props;
 			if (beforeCapture) {
 				const mockScope = {
-					setTag: vi.fn(),
-					setLevel: vi.fn(),
+					setTag: jest.fn(),
+					setLevel: jest.fn(),
 				};
 				beforeCapture(mockScope);
 			}
@@ -73,11 +64,15 @@ vi.mock('@sentry/react', async () => {
 	};
 });
 
-vi.mock('../../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback', () => ({
-	default: function MockErrorBoundaryFallback(): JSX.Element {
-		return <div data-testid="default-error-fallback">Default Error Fallback</div>;
-	},
-}));
+jest.mock(
+	'../../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback',
+	() =>
+		function MockErrorBoundaryFallback(): JSX.Element {
+			return (
+				<div data-testid="default-error-fallback">Default Error Fallback</div>
+			);
+		},
+);
 
 // Test component that can throw errors
 interface TestComponentProps {
@@ -110,7 +105,7 @@ describe('withErrorBoundary', () => {
 	// Suppress console errors for cleaner test output
 	const originalError = console.error;
 	beforeAll(() => {
-		console.error = vi.fn();
+		console.error = jest.fn();
 	});
 
 	afterAll(() => {
@@ -118,7 +113,7 @@ describe('withErrorBoundary', () => {
 	});
 
 	beforeEach(() => {
-		vi.clearAllMocks();
+		jest.clearAllMocks();
 	});
 
 	it('should wrap component with ErrorBoundary and render successfully', () => {
@@ -167,7 +162,7 @@ describe('withErrorBoundary', () => {
 
 	it('should call custom error handler when error occurs', () => {
 		// Arrange
-		const mockErrorHandler = vi.fn();
+		const mockErrorHandler = jest.fn();
 		const options: WithErrorBoundaryOptions = {
 			onError: mockErrorHandler,
 		};

frontend/src/components/ErrorModal/ErrorModal.test.tsx

@@ -1,26 +1,19 @@
-import { describe, expect, it, vi } from 'vitest';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import APIError from 'types/api/error';
 
 import ErrorModal from './ErrorModal';
 
 // Mock the query client to return version data
-const mockVersionData = vi.hoisted(() => ({
+const mockVersionData = {
 	payload: {
 		ee: 'Y',
 		version: '1.0.0',
 	},
-}));
-vi.mock('react-query', async () => ({
-	...(await vi.importActual('react-query')),
+};
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
 	useQueryClient: (): { getQueryData: () => typeof mockVersionData } => ({
-		getQueryData: vi.fn(() => mockVersionData),
-	}),
-}));
-
-vi.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: ReturnType<typeof vi.fn> } => ({
-		safeNavigate: vi.fn(),
+		getQueryData: jest.fn(() => mockVersionData),
 	}),
 }));
 const mockError: APIError = new APIError({
@@ -38,7 +31,7 @@ const mockError: APIError = new APIError({
 });
 describe('ErrorModal Component', () => {
 	it('should render the modal when open is true', () => {
-		render(<ErrorModal error={mockError} open onClose={vi.fn()} />);
+		render(<ErrorModal error={mockError} open onClose={jest.fn()} />);
 
 		// Check if the error message is displayed
 		expect(screen.getByText('An error occurred')).toBeInTheDocument();
@@ -48,14 +41,14 @@ describe('ErrorModal Component', () => {
 	});
 
 	it('should not render the modal when open is false', () => {
-		render(<ErrorModal error={mockError} open={false} onClose={vi.fn()} />);
+		render(<ErrorModal error={mockError} open={false} onClose={jest.fn()} />);
 
 		// Check that the modal content is not in the document
 		expect(screen.queryByText('An error occurred')).not.toBeInTheDocument();
 	});
 
 	it('should call onClose when the close button is clicked', async () => {
-		const onCloseMock = vi.fn();
+		const onCloseMock = jest.fn();
 		render(<ErrorModal error={mockError} open onClose={onCloseMock} />);
 
 		// Click the close button
@@ -68,14 +61,14 @@ describe('ErrorModal Component', () => {
 	});
 
 	it('should display version data if available', async () => {
-		render(<ErrorModal error={mockError} open onClose={vi.fn()} />);
+		render(<ErrorModal error={mockError} open onClose={jest.fn()} />);
 
 		// Check if the version data is displayed
 		expect(screen.getByText('ENTERPRISE')).toBeInTheDocument();
 		expect(screen.getByText('1.0.0')).toBeInTheDocument();
 	});
 	it('should render the messages count badge when there are multiple errors', () => {
-		render(<ErrorModal error={mockError} open onClose={vi.fn()} />);
+		render(<ErrorModal error={mockError} open onClose={jest.fn()} />);
 
 		// Check if the messages count badge is displayed
 		expect(screen.getByText('MESSAGES')).toBeInTheDocument();
@@ -89,7 +82,7 @@ describe('ErrorModal Component', () => {
 	});
 
 	it('should render the open docs button when URL is provided', async () => {
-		render(<ErrorModal error={mockError} open onClose={vi.fn()} />);
+		render(<ErrorModal error={mockError} open onClose={jest.fn()} />);
 
 		// Check if the open docs button is displayed
 		const openDocsButton = screen.getByTestId('error-docs-button');
@@ -102,7 +95,7 @@ describe('ErrorModal Component', () => {
 	});
 
 	it('should not display scroll for more if there are less than 10 messages', () => {
-		render(<ErrorModal error={mockError} open onClose={vi.fn()} />);
+		render(<ErrorModal error={mockError} open onClose={jest.fn()} />);
 
 		expect(screen.queryByText('Scroll for more')).not.toBeInTheDocument();
 	});
@@ -120,7 +113,7 @@ describe('ErrorModal Component', () => {
 			},
 		});
 
-		render(<ErrorModal error={longError} open onClose={vi.fn()} />);
+		render(<ErrorModal error={longError} open onClose={jest.fn()} />);
 
 		// Check if the scroll hint is displayed
 		expect(screen.getByText('Scroll for more')).toBeInTheDocument();
@@ -132,7 +125,7 @@ it('should render the trigger component if provided', () => {
 		<ErrorModal
 			error={mockError}
 			triggerComponent={mockTrigger}
-			onClose={vi.fn()}
+			onClose={jest.fn()}
 		/>,
 	);
 
@@ -146,7 +139,7 @@ it('should open the modal when the trigger component is clicked', async () => {
 		<ErrorModal
 			error={mockError}
 			triggerComponent={mockTrigger}
-			onClose={vi.fn()}
+			onClose={jest.fn()}
 		/>,
 	);
 
@@ -160,14 +153,14 @@ it('should open the modal when the trigger component is clicked', async () => {
 });
 
 it('should render the default trigger tag if no trigger component is provided', () => {
-	render(<ErrorModal error={mockError} onClose={vi.fn()} />);
+	render(<ErrorModal error={mockError} onClose={jest.fn()} />);
 
 	// Check if the default trigger tag is rendered
 	expect(screen.getByText('error')).toBeInTheDocument();
 });
 
 it('should close the modal when the onCancel event is triggered', async () => {
-	const onCloseMock = vi.fn();
+	const onCloseMock = jest.fn();
 	render(<ErrorModal error={mockError} onClose={onCloseMock} />);
 
 	// Click the trigger component
@@ -186,7 +179,9 @@ it('should close the modal when the onCancel event is triggered', async () => {
 	expect(onCloseMock).toHaveBeenCalledTimes(1);
 
 	await waitFor(() => {
+		// check if the modal is not visible
 		const modal = document.getElementsByClassName('ant-modal');
-		expect(modal[0]).toHaveClass('ant-zoom-leave');
+		const style = window.getComputedStyle(modal[0]);
+		expect(style.display).toBe('none');
 	});
 });

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -15,8 +15,8 @@ import {
 	Row,
 	Select,
 	Space,
-	Typography,
 } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip, Typography } from 'antd';
+import { Col, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
@@ -81,7 +82,7 @@ function MenuItemGenerator({
 						</Tooltip>
 					</Row>
 					<Row>
-						<Typography.Text type="secondary">Created by {createdBy}</Typography.Text>
+						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
 					</Row>
 				</Col>
 				<Col span={2}>

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input, Typography } from 'antd';
+import { Card, Form, Input } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -3,63 +3,57 @@ import ROUTES from 'constants/routes';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import { DataSource } from 'types/common/queryBuilder';
-import { describe, expect, it, vi } from 'vitest';
 
 import { viewMockData } from '../__mock__/viewData';
 import ExplorerCard from '../ExplorerCard';
 
-const historyReplace = vi.hoisted(() => vi.fn());
+const historyReplace = jest.fn();
 
-vi.mock('react-router-dom', async () => {
-	const actual =
-		await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
-
-	return {
-		...actual,
-		useLocation: (): { pathname: string } => ({
-			pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
-		}),
-		useHistory: (): any => ({
-			...actual.useHistory(),
-			replace: historyReplace,
-		}),
-	};
-});
-
-vi.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: vi.fn(),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
+	}),
+	useHistory: (): any => ({
+		...jest.requireActual('react-router-dom').useHistory(),
+		replace: historyReplace,
 	}),
 }));
 
-vi.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
-	useGetPanelTypesQueryParam: vi.fn(() => 'mockedPanelType'),
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
 }));
 
-vi.mock('hooks/saveViews/useGetAllViews', () => ({
-	useGetAllViews: vi.fn(() => ({
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
+}));
+
+jest.mock('hooks/saveViews/useGetAllViews', () => ({
+	useGetAllViews: jest.fn(() => ({
 		data: { data: { data: viewMockData } },
 		isLoading: false,
 		error: null,
 		isRefetching: false,
-		refetch: vi.fn(),
+		refetch: jest.fn(),
 	})),
 }));
 
-vi.mock('hooks/saveViews/useUpdateView', () => ({
-	useUpdateView: vi.fn(() => ({
-		mutateAsync: vi.fn(),
+jest.mock('hooks/saveViews/useUpdateView', () => ({
+	useUpdateView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
 	})),
 }));
 
-vi.mock('hooks/saveViews/useDeleteView', () => ({
-	useDeleteView: vi.fn(() => ({
-		mutateAsync: vi.fn(),
+jest.mock('hooks/saveViews/useDeleteView', () => ({
+	useDeleteView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
 	})),
 }));
 
 // Mock usePreferenceSync
-vi.mock('providers/preferences/sync/usePreferenceSync', () => ({
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
 	usePreferenceSync: (): any => ({
 		preferences: {
 			columns: [],
@@ -72,8 +66,8 @@ vi.mock('providers/preferences/sync/usePreferenceSync', () => ({
 		},
 		loading: false,
 		error: null,
-		updateColumns: vi.fn(),
-		updateFormatting: vi.fn(),
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
 	}),
 }));
 

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -2,22 +2,21 @@ import { render, screen } from '@testing-library/react';
 import ROUTES from 'constants/routes';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import { DataSource } from 'types/common/queryBuilder';
-import { describe, expect, it, vi } from 'vitest';
 
 import { viewMockData } from '../__mock__/viewData';
 import MenuItemGenerator from '../MenuItemGenerator';
 
-vi.mock('react-router-dom', async () => ({
-	...(await vi.importActual('react-router-dom')),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
 	}),
 }));
 
-vi.mock('antd', async () => ({
-	...(await vi.importActual('antd')),
-	useForm: vi.fn().mockReturnValue({
-		onFinish: vi.fn(),
+jest.mock('antd', () => ({
+	...jest.requireActual('antd'),
+	useForm: jest.fn().mockReturnValue({
+		onFinish: jest.fn(),
 	}),
 }));
 
@@ -30,7 +29,7 @@ describe('MenuItemGenerator', () => {
 					viewKey={viewMockData[0].id}
 					createdBy={viewMockData[0].createdBy}
 					uuid={viewMockData[0].id}
-					refetchAllView={vi.fn()}
+					refetchAllView={jest.fn()}
 					viewData={viewMockData}
 					sourcePage={DataSource.TRACES}
 				/>
@@ -48,7 +47,7 @@ describe('MenuItemGenerator', () => {
 					viewKey={viewMockData[0].id}
 					createdBy={viewMockData[0].createdBy}
 					uuid={viewMockData[0].id}
-					refetchAllView={vi.fn()}
+					refetchAllView={jest.fn()}
 					viewData={viewMockData}
 					sourcePage={DataSource.TRACES}
 				/>

frontend/src/components/ExplorerCard/test/SaveViewWithName.test.tsx

@@ -1,16 +1,14 @@
-import { describe, expect, it, vi } from 'vitest';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { fireEvent, render } from '@testing-library/react';
+import ROUTES from 'constants/routes';
 import { DataSource } from 'types/common/queryBuilder';
 
 import SaveViewWithName from '../SaveViewWithName';
 
-vi.mock('react-router-dom', async () => ({
-	...(await vi.importActual<typeof import('react-router-dom')>(
-		'react-router-dom',
-	)),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
-		pathname: `${process.env.FRONTEND_API_ENDPOINT}/services/`,
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
 	}),
 }));
 
@@ -22,13 +20,13 @@ const queryClient = new QueryClient({
 	},
 });
 
-vi.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
-	useGetPanelTypesQueryParam: vi.fn(() => 'mockedPanelType'),
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({
+	useGetPanelTypesQueryParam: jest.fn(() => 'mockedPanelType'),
 }));
 
-vi.mock('hooks/saveViews/useSaveView', () => ({
-	useSaveView: vi.fn(() => ({
-		mutateAsync: vi.fn(),
+jest.mock('hooks/saveViews/useSaveView', () => ({
+	useSaveView: jest.fn(() => ({
+		mutateAsync: jest.fn(),
 	})),
 }));
 
@@ -38,8 +36,8 @@ describe('SaveViewWithName', () => {
 			<QueryClientProvider client={queryClient}>
 				<SaveViewWithName
 					sourcePage={DataSource.TRACES}
-					handlePopOverClose={vi.fn()}
-					refetchAllView={vi.fn()}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
 				/>
 			</QueryClientProvider>,
 		);
@@ -52,8 +50,8 @@ describe('SaveViewWithName', () => {
 			<QueryClientProvider client={queryClient}>
 				<SaveViewWithName
 					sourcePage={DataSource.TRACES}
-					handlePopOverClose={vi.fn()}
-					refetchAllView={vi.fn()}
+					handlePopOverClose={jest.fn()}
+					refetchAllView={jest.fn()}
 				/>
 			</QueryClientProvider>,
 		);