Merge branch 'main' into fix/clickhouse-sql-mistakes-invalid-input

Assisted-by: Claude Opus 5.5

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

@@ -1,7 +1,7 @@
 ---
 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
+description: Use this agent to convert a SigNoz E2E test plan into Playwright spec files under `tests/e2e/tests/<feature>/`, adding or extending the feature's driver under `tests/e2e/drivers/`. 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/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, Write, Edit, 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
 ---
@@ -10,17 +10,23 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
 
 # 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).
+- **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/search.spec.ts`, not `dashboards/list/dashboards-list-search.spec.ts`.
+- **Drivers first.** New specs import `test`, `expect` and constants from one driver module in [tests/e2e/drivers/](../../tests/e2e/drivers/) and receive the feature's driver as a fixture. A spec never passes `page` around.
   ```ts
-  import { test, expect } from '../../fixtures/auth';
+  import { expect, PATH, test } from '../../drivers/routing';
 
-  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('TC-09 RouteTab switches the url', async ({ routing }) => {
+    await routing.goto(PATH.metricsSummary);
+    await expect(routing.activeRouteTab(PATH.metricsSummary)).toBeVisible();
   });
   ```
-- **Extended fixtures:** For features needing complex setup (seeded data, API calls, cleanup), import from domain-specific fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the full pattern.
+  - A driver is a function closing over the page that returns `Locator` getters and async actions. Actions wait inside themselves (e.g. `run()` pairs the click with `waitForResponse(/query_range/)`), so specs don't.
+  - `driver(name, build, dispose?)` in `drivers/kit.ts` makes it a test-scoped fixture on `authedPage`; `dispose` deletes what it seeded. `seeded(name, open, close)` makes a worker-scoped seed.
+  - Layers compose: `withNewPanel(withEditor(panelsTest))`. Extend the closest existing driver instead of starting a parallel one.
+  - When no driver covers the feature, add `drivers/<feature>.ts` with the spec. Locators live in the driver, not the spec. `drivers/` is AI-owned: keep the banner, and change a driver only alongside a spec that needs it.
+  - Read [tests/e2e/tests/dashboards/editor/query.spec.ts](../../tests/e2e/tests/dashboards/editor/query.spec.ts) and [drivers/panel-editor.ts](../../tests/e2e/drivers/panel-editor.ts) for the canonical shape.
+- **Plain auth fixture** only for a spec no driver fits: import `test` and `expect` from `'../../fixtures/auth'` (never `@playwright/test`) and use the `authedPage` fixture (the admin, the only user the bootstrap seeds).
+- **Extended fixtures:** older suites import domain fixtures that extend `auth`. See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md).
   - `fixtures/alerts/alert-rules` — worker-scoped rule list + test-scoped rule factory
   - `fixtures/alerts/alert-history` — extends alert-rules, adds history fixtures (waits on ruler evaluation)
   ```ts
@@ -31,15 +37,18 @@ You are the Playwright Test Generator for the SigNoz frontend. You take a plan w
   import { test, expect } from '../../../fixtures/alerts/alert-history';
   ```
 - **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.
+- **Self-contained state.** The bootstrap creates a fresh stack with **zero** dashboards / alerts / etc. — never assume pre-existing resources. Cleanup shapes, in order of preference:
+  - **A driver's `dispose`** — the driver tracks what it seeded and deletes it after the test (`dashboards.seed(...)` in `drivers/dashboards.ts`). The spec has no cleanup code.
+  - **A worker-scoped `seeded(...)` layer** — read-only data shared by a worker's tests.
+  - **Per-test `try / finally`** or **suite-level `afterAll` with an id registry** — specs without a driver. Suite hooks can't see `authedPage`; use `newAdminContext(browser)` from `helpers/auth.ts`.
+- **Golden telemetry is pre-seeded.** `bootstrap/global.setup.ts` loads logs, traces and metrics over the last 6h (constants in `GOLDEN`, `helpers/dashboard-spec.ts`). Query within ≤ 6h and assert structure (series, rows, request payload), never exact counts: per-test seeds from parallel workers land in the same tenant. Seed missing shapes through the seeder with unique service names (`helpers/alerts/seeding.ts`).
+- **Reuse helpers from `tests/e2e/helpers/`** inside drivers. Don't reinvent:
+  - [`helpers/common.ts`](../../tests/e2e/helpers/common.ts) — `authToken`, `watchConsole`, `collectRequests`, `requestUrl`, `seederUrl`.
+  - [`helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) — `newAdminContext(browser)`.
+  - [`helpers/query-range-mock.ts`](../../tests/e2e/helpers/query-range-mock.ts) — `query_range` mocks for error / no-data / warning / loading states only; install before `goto`.
+- **Seed via API when the UI flow is multi-step or brittle**, through the driver (`dashboards.seed`, `seedAndOpen`, `seedAndEdit`). `page.request.*` does **not** auto-attach `Authorization`; drivers add `authToken(page)`.
+- **Static payloads live in [tests/e2e/testdata/](../../tests/e2e/testdata/)** (`dashboards/panels.ts`, `traces/large-trace.json`).
+- **Resource names:** short and descriptive, no timestamps. Where parallel workers share a list, add a random suffix as `uniqueName` in `drivers/dashboard-list.ts` does.
 - **Serial mode** when tests in a file mutate the same list page:
   ```ts
   test.describe.configure({ mode: 'serial' });
@@ -64,13 +73,14 @@ For each scenario in the plan:
    - 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`).
+   - **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/search.spec.ts`, not `dashboards/list/dashboards-list-search.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).
+   - **Imports** from the feature's driver module (or `../../fixtures/auth` when none fits). **Do not** import from `@playwright/test` directly.
+   - **Cleanup** through the driver's `dispose`; `try / finally` only without a driver.
+   - **Move recorded locators and waits into the driver.** The log gives raw `page.*` calls; the spec should read as driver actions.
 
 # Quality bar — what to write, what to skip
 
@@ -88,81 +98,57 @@ When you cut, merge, or renumber TCs vs the plan, note it in your final summary.
 For a plan section:
 
 ```markdown
-### 1. Page Load
+### 1. Search
 
-#### TC-01 page chrome and core controls render
+#### TC-01 searching by name writes the query to the URL and lists the match
+**Preconditions:** one dashboard with a unique name (seed via the `dashboards` driver).
 **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.
+1. Open the dashboards list.
+2. Search `name CONTAINS '<name>'`.
+**Expected:** the `query` URL param carries the search; only the seeded dashboard is listed.
 ```
 
-You produce (suite-level shape, preferred for files with multiple scenarios):
+You produce:
 
 ```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';
+// tests/e2e/tests/dashboards/list/search.spec.ts
 import {
-  authToken,
-  createDashboardViaApi,
-  deleteDashboardViaApi,
-  gotoDashboardsList,
-} from '../../helpers/dashboards';
+  expect,
+  listDashboard,
+  nameContains,
+  test,
+  uniqueName,
+} from '../../../drivers/dashboard-list';
 
-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 ({
+test.describe('Dashboards — list search', () => {
+  test('TC-01 searching by name writes the query to the URL and lists the match', async ({
     authedPage: page,
+    dashboards,
+    dashboardList,
   }) => {
-    await seed(page, 'list-chrome');
+    const name = uniqueName('search');
+    await dashboards.seed(listDashboard(name));
+    await dashboardList.open();
 
-    await gotoDashboardsList(page);
+    await dashboardList.runSearch(nameContains(name));
 
-    await expect(page).toHaveTitle('SigNoz | All Dashboards');
-    await expect(
-      page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-    ).toBeVisible();
+    expect(new URL(page.url()).searchParams.get('query')).toBe(
+      nameContains(name),
+    );
+    await expect(dashboardList.rows()).toHaveText([name]);
   });
 });
 ```
 
-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.
+Note: no cleanup code (the `dashboards` driver deletes its seed), no raw locators (they live in `drivers/dashboard-list.ts`), and no `// 1. …` step narration. 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.
+- **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, inside the driver action.
 - **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.
+- **Monaco editor swallows Escape.** Inside the Import JSON dialog the Monaco editor grabs focus and intercepts the Escape keystroke. Click the modal title first to blur Monaco; `dashboardList.dismissWithEscape()` does this.
+- **Empty zero-state hides controls.** With no dashboards in the workspace, the list controls and `new-dashboard-cta` are absent. Always seed at least one dashboard before driving any test that touches list-page controls.
 
 # Quality bar
 

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

@@ -1,6 +1,6 @@
 ---
 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>
+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/search.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
@@ -27,11 +27,11 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
    - `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.
+   - **Selector drift** — the app changed `data-testid` or text. Fix the locator where it lives: in the driver under `tests/e2e/drivers/` when the spec uses one, so every spec sharing it heals at once. 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 — inside the driver action when there is one.
+   - **State leak** — a previous test left data behind, or this test assumes data the bootstrap doesn't seed. Seed through the driver (its `dispose` cleans up) or via API with `try / finally`. The bootstrap creates a fresh stack with **zero** dashboards / alerts and only the golden telemetry; parallel per-test seeds share the tenant, so an exact-count assertion on telemetry is a test bug — assert structure instead.
    - **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.
+5. **Fix.** Edit the spec or its driver. Preserve TC-NN titles, the driver / `authedPage` fixtures, cleanup, and serial mode if present. A driver change must keep every other spec importing it green — run them too. 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
@@ -41,14 +41,13 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
 
 # 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.
+- **Reuse drivers and helpers before adding new code.** [`tests/e2e/drivers/`](../../tests/e2e/drivers/) holds the per-feature seed, cleanup, navigation and action methods (`kit.ts` explains `driver` / `seeded`); [`helpers/common.ts`](../../tests/e2e/helpers/common.ts) and [`helpers/auth.ts`](../../tests/e2e/helpers/auth.ts) the plain plumbing. Prefer them over re-inlining auth/login/POST code 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.
+- **Action-icon rows below the fold.** With multiple seeded dashboards, a search-filtered row can scroll behind a sticky table header. Add `scrollIntoViewIfNeeded` before the click, in the driver action.
 - **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.
+- **The list pages render zero-state when the workspace is empty.** List controls and the `new-dashboard-cta` testid are absent in zero-state. A timeout on those usually means the workspace was empty — seed first via `dashboards.seed(...)`.
+- **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/common.ts` and pass `Authorization: Bearer <token>`. Never re-implement login.
 - **Extended fixtures.** Domain-specific fixtures extend `auth` and add seeded data. Alerts uses `fixtures/alerts/alert-rules` (worker-scoped rule list, test-scoped factory) and `fixtures/alerts/alert-history` (extends alert-rules, waits on ruler evaluation). See [docs/contributing/tests/e2e.md](../../docs/contributing/tests/e2e.md) for the pattern. When a test fails on missing data, check if it imports the wrong fixture level.
 - **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.

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

@@ -20,8 +20,10 @@ You will:
    - 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.
+   - [tests/e2e/drivers/](../../tests/e2e/drivers/) holds one driver per feature (e.g. `dashboards.ts`, `dashboard-list.ts`, `panel-editor.ts`, `routing.ts`, `channels.ts`). A driver is a fixture exposing the feature's locators and actions, including API seeding that cleans itself up (`dashboards.seed(...)`). When one covers the feature, write steps in terms of its actions by name so the generator reuses them. When none does, say so: the generator adds one.
+   - [tests/e2e/helpers/](../../tests/e2e/helpers/) holds plain helpers: `common.ts` (`authToken`, `watchConsole`, `collectRequests`, `seederUrl`), `auth.ts` (`newAdminContext`), `query-range-mock.ts` (mock `query_range` for error, no-data, warning and loading states only).
+   - **Telemetry is pre-seeded.** `bootstrap/global.setup.ts` loads a golden OTel-demo dataset (logs, traces, metrics over the last 6h; constants in `GOLDEN` in `helpers/dashboard-spec.ts`). Plans that query data use a window ≤ 6h and assert structure, not exact counts. Data the golden set lacks is seeded per test through the seeder (`helpers/alerts/seeding.ts` shows how).
+   - [tests/e2e/testdata/](../../tests/e2e/testdata/) holds static payloads (`dashboards/panels.ts`, `traces/large-trace.json`) — note in the plan if a scenario benefits from one.
 
 3. **Navigate and explore**
    - Invoke `planner_setup_page` once before any other browser tool.
@@ -39,7 +41,7 @@ You will:
 
    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).
+   - Preconditions (what state the test expects — note that the bootstrap creates a fresh stack with **zero dashboards / alerts / etc.** (only the golden telemetry), so plans must seed their own resources).
    - Step-by-step user actions.
    - Expected outcomes per step.
    - Cleanup notes (what gets created and how to remove it — usually via API).
@@ -64,7 +66,7 @@ The dashboards list page (`/dashboard`) lists all dashboards in the workspace. F
 - 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.
+**Bootstrap state:** the pytest harness creates a fresh stack with no pre-seeded dashboards. Every test seeds its own through the `dashboards` driver (`dashboards.seed(...)`, deleted when the test ends).
 
 **Known limitations:**
 - Ascending sort is not yet implemented — repeated clicks on the sort button keep `order=descend`.
@@ -87,7 +89,7 @@ The dashboards list page (`/dashboard`) lists all dashboards in the workspace. F
 - 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>`.
+**Cleanup:** none in the spec — the `dashboards` driver deletes what it seeded.
 
 #### TC-02 ...
 </example-spec>
@@ -95,7 +97,7 @@ The dashboards list page (`/dashboard`) lists all dashboards in the workspace. F
 **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.
+- Each scenario must own its preconditions and cleanup. **Do not invent cross-file global fixtures** — they break parallel-by-file execution. Prefer a driver's self-cleaning seed (`dispose`) or worker-scoped `seeded(...)` layer; without a driver, suite-level `beforeAll` / `afterAll` within one spec file or per-test `try / finally` both work.
 - 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.

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

@@ -14,7 +14,7 @@ Grep recipes, run against the page's directories:
 | endpoint URLs | the api module's `axios.get\|post` |
 | endpoint URLs behind a generated hook | the hook lives in `src/api/generated/services/<name>/index.ts` and the URL only appears in the fetcher body: `rg 'url: \`' src/api/generated/services/<name>/` |
 | url state | `useUrlQuery\|useUrlQueryData\|useUrlSearchState\|useQueryState\|QueryParams\.` |
-| navigation | `useSafeNavigate\|history.push\|<Link` |
+| navigation | `useSafeNavigate\|useAppNavigate\|navigate\|<AppLink` |
 | permissions | `useAuthZ\|AuthZGuard\|AuthZButton\|hasEditPermission\|routePermission` |
 | flags and prefs | `useFeatureFlag\|FeatureKeys\.\|USER_PREFERENCES\.\|userPreferences` |
 | empty and error branches | `isLoading\|isError\|isFetching\|length === 0\|!data` |

docs/api/openapi.yml

@@ -11389,8 +11389,7 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec. Required when schemaVersion
-            is v2alpha1; derived from evalWindow and frequency for v1.
+          description: The evaluation window, as a kind and spec.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11406,8 +11405,7 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour. Required when
-            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
+          description: Grouping, re-notification and routing behaviour.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11420,26 +11418,30 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder queries
-            and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
+            queries and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: 'The rule payload schema: v1 (the default when omitted) uses
-            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
-            and notificationSettings.'
+          description: The rule payload schema.
+          enum:
+          - v2alpha1
           type: string
         source:
+          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
         version:
-          description: The query payload version. Only v5 is accepted and it is filled
-            in when omitted.
+          deprecated: true
+          description: The query payload version. Nothing reads it.
           type: string
       required:
       - alert
       - alertType
       - ruleType
       - condition
+      - evaluation
+      - schemaVersion
+      - notificationSettings
       type: object
     RuletypesPostableRuleView:
       properties:
@@ -11528,8 +11530,7 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec. Required when schemaVersion
-            is v2alpha1; derived from evalWindow and frequency for v1.
+          description: The evaluation window, as a kind and spec.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11548,8 +11549,7 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour. Required when
-            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
+          description: Grouping, re-notification and routing behaviour.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11562,14 +11562,15 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder queries
-            and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
+            queries and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: 'The rule payload schema: v1 (the default when omitted) uses
-            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
-            and notificationSettings.'
+          description: The rule payload schema.
+          enum:
+          - v2alpha1
           type: string
         source:
+          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
@@ -11584,8 +11585,8 @@ components:
         updatedBy:
           type: string
         version:
-          description: The query payload version. Only v5 is accepted and it is filled
-            in when omitted.
+          deprecated: true
+          description: The query payload version. Nothing reads it.
           type: string
       required:
       - id
@@ -11594,6 +11595,9 @@ components:
       - alertType
       - ruleType
       - condition
+      - evaluation
+      - schemaVersion
+      - notificationSettings
       type: object
     RuletypesRuleCondition:
       properties:
@@ -11643,8 +11647,7 @@ components:
             against, hourly, daily or weekly.'
         selectedQueryName:
           description: The name of the query whose result is evaluated, such as A
-            or F1. Must match a query in compositeQuery. When omitted, F1 is used
-            if present, otherwise the enabled query with the highest name.
+            or F1. Must match a query in compositeQuery.
           type: string
         target:
           description: 'schemaVersion v1 only: the value compared against, in targetUnit.
@@ -11660,10 +11663,11 @@ components:
         thresholds:
           allOf:
           - $ref: '#/components/schemas/RuletypesRuleThresholdData'
-          description: The thresholds to evaluate, as a kind and spec. Required when
-            schemaVersion is v2alpha1; derived from op, target and matchType for v1.
+          description: The thresholds to evaluate, as a kind and spec.
       required:
       - compositeQuery
+      - selectedQueryName
+      - thresholds
       type: object
     RuletypesRuleThresholdData:
       discriminator:
@@ -16692,9 +16696,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - route-policy:list
       - tokenizer:
-        - VIEWER
+        - route-policy:list
       summary: List route policies
       tags:
       - routepolicies
@@ -16749,9 +16753,13 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - route-policy:create
+        - route-policy:attach
+        - notification-channel:attach
       - tokenizer:
-        - ADMIN
+        - route-policy:create
+        - route-policy:attach
+        - notification-channel:attach
       summary: Create route policy
       tags:
       - routepolicies
@@ -16796,9 +16804,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - route-policy:delete
       - tokenizer:
-        - ADMIN
+        - route-policy:delete
       summary: Delete route policy
       tags:
       - routepolicies
@@ -16854,9 +16862,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - route-policy:read
       - tokenizer:
-        - VIEWER
+        - route-policy:read
       summary: Get route policy by ID
       tags:
       - routepolicies
@@ -16923,9 +16931,17 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - route-policy:update
+        - route-policy:attach
+        - route-policy:detach
+        - notification-channel:attach
+        - notification-channel:detach
       - tokenizer:
-        - ADMIN
+        - route-policy:update
+        - route-policy:attach
+        - route-policy:detach
+        - notification-channel:attach
+        - notification-channel:detach
       summary: Update route policy
       tags:
       - routepolicies
@@ -25312,13 +25328,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Anomaly rules are not yet supported under schemaVersion
-                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
-                  in the `anomaly` function with daily seasonality SigNoz compares
-                  each point against the forecast for that time of day. Fires when
-                  the anomaly score stays below the threshold for the entire window;
-                  `requireMinPoints` guards against noisy intervals.
-                summary: Metric anomaly rule (v1 only)
+                description: Wraps a builder query in the `anomaly` function with
+                  daily seasonality, so SigNoz compares each point against the forecast
+                  for that time of day. The threshold is compared against the signed
+                  anomaly score, so `below` with a target of -2 fires when an abrupt
+                  drop holds for the entire window; `requireMinPoints` guards against
+                  noisy intervals.
+                summary: Metric anomaly rule
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -25353,22 +25369,36 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
-                    matchType: all_the_times
-                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    target: 2
+                    thresholds:
+                      kind: basic
+                      spec:
+                      - channels:
+                        - slack-ingestion
+                        matchType: all_the_times
+                        name: warning
+                        op: below
+                        target: -2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evalWindow: 24h
-                  frequency: 3h
+                  evaluation:
+                    kind: rolling
+                    spec:
+                      evalWindow: 24h
+                      frequency: 3h
                   labels:
                     severity: warning
-                  preferredChannels:
-                  - slack-ingestion
+                  notificationSettings:
+                    renotify:
+                      alertStates:
+                      - firing
+                      enabled: true
+                      interval: 4h
                   ruleType: anomaly_rule
+                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -26264,13 +26294,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Anomaly rules are not yet supported under schemaVersion
-                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
-                  in the `anomaly` function with daily seasonality SigNoz compares
-                  each point against the forecast for that time of day. Fires when
-                  the anomaly score stays below the threshold for the entire window;
-                  `requireMinPoints` guards against noisy intervals.
-                summary: Metric anomaly rule (v1 only)
+                description: Wraps a builder query in the `anomaly` function with
+                  daily seasonality, so SigNoz compares each point against the forecast
+                  for that time of day. The threshold is compared against the signed
+                  anomaly score, so `below` with a target of -2 fires when an abrupt
+                  drop holds for the entire window; `requireMinPoints` guards against
+                  noisy intervals.
+                summary: Metric anomaly rule
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -26305,22 +26335,36 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
-                    matchType: all_the_times
-                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    target: 2
+                    thresholds:
+                      kind: basic
+                      spec:
+                      - channels:
+                        - slack-ingestion
+                        matchType: all_the_times
+                        name: warning
+                        op: below
+                        target: -2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evalWindow: 24h
-                  frequency: 3h
+                  evaluation:
+                    kind: rolling
+                    spec:
+                      evalWindow: 24h
+                      frequency: 3h
                   labels:
                     severity: warning
-                  preferredChannels:
-                  - slack-ingestion
+                  notificationSettings:
+                    renotify:
+                      alertStates:
+                      - firing
+                      enabled: true
+                      interval: 4h
                   ruleType: anomaly_rule
+                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -27117,13 +27161,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Anomaly rules are not yet supported under schemaVersion
-                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
-                  in the `anomaly` function with daily seasonality SigNoz compares
-                  each point against the forecast for that time of day. Fires when
-                  the anomaly score stays below the threshold for the entire window;
-                  `requireMinPoints` guards against noisy intervals.
-                summary: Metric anomaly rule (v1 only)
+                description: Wraps a builder query in the `anomaly` function with
+                  daily seasonality, so SigNoz compares each point against the forecast
+                  for that time of day. The threshold is compared against the signed
+                  anomaly score, so `below` with a target of -2 fires when an abrupt
+                  drop holds for the entire window; `requireMinPoints` guards against
+                  noisy intervals.
+                summary: Metric anomaly rule
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -27158,22 +27202,36 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
-                    matchType: all_the_times
-                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    target: 2
+                    thresholds:
+                      kind: basic
+                      spec:
+                      - channels:
+                        - slack-ingestion
+                        matchType: all_the_times
+                        name: warning
+                        op: below
+                        target: -2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evalWindow: 24h
-                  frequency: 3h
+                  evaluation:
+                    kind: rolling
+                    spec:
+                      evalWindow: 24h
+                      frequency: 3h
                   labels:
                     severity: warning
-                  preferredChannels:
-                  - slack-ingestion
+                  notificationSettings:
+                    renotify:
+                      alertStates:
+                      - firing
+                      enabled: true
+                      interval: 4h
                   ruleType: anomaly_rule
+                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -28676,13 +28734,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Anomaly rules are not yet supported under schemaVersion
-                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
-                  in the `anomaly` function with daily seasonality SigNoz compares
-                  each point against the forecast for that time of day. Fires when
-                  the anomaly score stays below the threshold for the entire window;
-                  `requireMinPoints` guards against noisy intervals.
-                summary: Metric anomaly rule (v1 only)
+                description: Wraps a builder query in the `anomaly` function with
+                  daily seasonality, so SigNoz compares each point against the forecast
+                  for that time of day. The threshold is compared against the signed
+                  anomaly score, so `below` with a target of -2 fires when an abrupt
+                  drop holds for the entire window; `requireMinPoints` guards against
+                  noisy intervals.
+                summary: Metric anomaly rule
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -28717,22 +28775,36 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
-                    matchType: all_the_times
-                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    target: 2
+                    thresholds:
+                      kind: basic
+                      spec:
+                      - channels:
+                        - slack-ingestion
+                        matchType: all_the_times
+                        name: warning
+                        op: below
+                        target: -2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evalWindow: 24h
-                  frequency: 3h
+                  evaluation:
+                    kind: rolling
+                    spec:
+                      evalWindow: 24h
+                      frequency: 3h
                   labels:
                     severity: warning
-                  preferredChannels:
-                  - slack-ingestion
+                  notificationSettings:
+                    renotify:
+                      alertStates:
+                      - firing
+                      enabled: true
+                      interval: 4h
                   ruleType: anomaly_rule
+                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL

docs/contributing/tests/e2e.md

@@ -173,9 +173,10 @@ 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 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.
+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. Patterns, in order of preference:
+    - **Driver `dispose`** — the driver tracks what it seeded and deletes it after the test, so the spec has no cleanup code. See `dashboards.seed(...)` in `tests/e2e/drivers/dashboards.ts`.
+    - **Per-test seed + cleanup in `try / finally`** — small specs without a driver, where each test owns its data.
+    - **Suite-level seed + `afterAll` teardown** — larger specs without a driver. One `test.afterAll(...)` deletes everything the suite seeded. See `tests/e2e/tests/llm-o11y/llm-pricing.spec.ts`. `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(

frontend/.husky/commit-msg

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 cd frontend && pnpm run commitlint --edit $1
 
 branch="$(git rev-parse --abbrev-ref HEAD)"

frontend/.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 cd frontend && pnpm lint-staged

frontend/.oxlintrc.json

@@ -294,6 +294,8 @@
     // Forces useDashboardFetchRequired() outside the root V2 pages (allowlisted in overrides below)
     "signoz/no-msw-in-story-file": "error",
     // Bans msw imports in *.stories.tsx; handlers/mock data belong in the sibling .stories.mocks.tsx
+    "signoz/no-direct-react-router-import": "error",
+    // Steers call sites to the src/lib/router facade (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -589,6 +591,23 @@
       "rules": {
         "no-redeclare": "off"
       }
+    },
+    {
+      // The react-router allowlist: the facade itself, the route table, `useSafeNavigate`,
+      // the history singleton and the test and story router mounts. Test files are
+      // deliberately absent: they render at a route or use tests/router-mocks.
+      "files": [
+        "src/lib/router/**",
+        "src/AppRoutes/**",
+        "src/hooks/useSafeNavigate.ts",
+        "src/lib/history.ts",
+        "src/tests/router.tsx",
+        "src/storybook/providers/StorybookProviders.tsx",
+        "src/storybook/renderAtRoute.tsx"
+      ],
+      "rules": {
+        "signoz/no-direct-react-router-import": "off"
+      }
     }
   ]
 }

frontend/i18-generate-hash.cjs

@@ -1,6 +1,6 @@
 const crypto = require('crypto');
 const fs = require('fs');
-const glob = require('glob');
+const path = require('path');
 
 function generateChecksum(str, algorithm, encoding) {
 	return crypto
@@ -9,12 +9,17 @@ function generateChecksum(str, algorithm, encoding) {
 		.digest(encoding || 'hex');
 }
 
+const localesDir = 'public/locales';
 const result = {};
 
-glob.sync(`public/locales/**/*.json`).forEach((path) => {
-	const [_, lang] = path.split('public/locales');
-	const content = fs.readFileSync(path, { encoding: 'utf-8' });
-	result[lang.replace('.json', '')] = generateChecksum(content);
-});
+fs
+	.readdirSync(localesDir, { recursive: true, withFileTypes: true })
+	.filter((entry) => entry.isFile() && entry.name.endsWith('.json'))
+	.forEach((entry) => {
+		const file = path.join(entry.parentPath, entry.name);
+		const content = fs.readFileSync(file, { encoding: 'utf-8' });
+		const key = path.relative(localesDir, file).replace(/\.json$/, '');
+		result[`/${key}`] = generateChecksum(content);
+	});
 
 fs.writeFileSync('./i18n-translations-hash.json', JSON.stringify(result));

frontend/package.json

@@ -24,8 +24,8 @@
     "jest": "jest",
     "jest:coverage": "jest --coverage",
     "jest:watch": "jest --watch",
-    "postinstall": "pnpm i18n:generate-hash && (is-ci || pnpm husky:configure)  && node scripts/update-registry.cjs",
-    "husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
+    "postinstall": "pnpm i18n:generate-hash && ([ -n \"$CI\" ] || pnpm husky:configure) && node scripts/update-registry.cjs",
+    "husky:configure": "cd .. && husky frontend/.husky",
     "commitlint": "commitlint --edit $1",
     "test": "jest",
     "test:changedsince": "jest --changedSince=main --coverage --silent",
@@ -100,10 +100,8 @@
     "overlayscrollbars-react": "^0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
-    "rc-select": "14.10.0",
     "react": "18.2.0",
     "react-addons-update": "15.6.3",
-    "react-beautiful-dnd": "13.1.1",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
@@ -137,7 +135,6 @@
     "uplot": "1.6.31",
     "uuid": "14.0.1",
     "vite": "npm:rolldown-vite@7.3.1",
-    "vite-plugin-html": "3.2.2",
     "zod": "4.3.6",
     "zustand": "5.0.11"
   },
@@ -178,11 +175,10 @@
     "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^16.10.3",
+    "@types/node": "^22.20.5",
     "@types/papaparse": "5.3.7",
     "@types/react": "18.0.26",
     "@types/react-addons-update": "0.14.21",
-    "@types/react-beautiful-dnd": "13.1.8",
     "@types/react-dom": "18.0.10",
     "@types/react-grid-layout": "^1.1.2",
     "@types/react-redux": "^7.1.11",
@@ -192,12 +188,9 @@
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/uuid": "^8.3.1",
     "@typescript/native-preview": "7.0.0-dev.20260430.1",
     "eslint-plugin-sonarjs": "4.0.2",
-    "glob": "^13.0.6",
-    "husky": "^7.0.4",
-    "is-ci": "^3.0.1",
+    "husky": "^9.1.7",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "^7.2.0",
     "json-schema-to-typescript": "^15.0.4",

frontend/plugins/__tests__/no-direct-react-router-import.test.mjs

@@ -0,0 +1,126 @@
+import { ruleTester } from './rule-tester.mjs';
+
+const FACADE = 'src/lib/router facade';
+const HISTORY = 'lib/history singleton';
+const MOCK = 'tests/router-mocks helpers';
+
+await ruleTester({
+	rule: 'no-direct-react-router-import',
+	valid: [
+		{
+			name: 'facade import',
+			code: "import { useAppNavigate } from 'lib/router/useAppNavigate';",
+		},
+		{
+			name:
+				'the history package itself is a version-bump concern, not a facade one',
+			code: "import { createBrowserHistory } from 'history';",
+		},
+		{
+			name: 'unrelated module whose name contains history',
+			code: "import { useHistoryPanel } from 'container/HistoryPanel';",
+		},
+		{
+			name: 'mocking a facade module',
+			code: "jest.mock('lib/router/navigation');",
+		},
+		{
+			name: 'jest call that does not name a module',
+			code: 'jest.fn();',
+		},
+		{
+			name: 'require of an unrelated module',
+			code: "const x = require('lib/dashboardVariables');",
+		},
+		{
+			name: 'export without a source',
+			code: 'const a = 1;\nexport { a };',
+		},
+	],
+	invalid: [
+		{
+			name: 'jest.mock of react-router-dom',
+			code: "jest.mock('react-router-dom', () => ({}));",
+			errors: [{ message: MOCK, line: 1, column: 11 }],
+		},
+		{
+			name: 'jest.requireActual of react-router-dom',
+			code: "const actual = jest.requireActual('react-router-dom');",
+			errors: [{ message: MOCK }],
+		},
+		{
+			name: 'jest.mock of lib/history',
+			code: "jest.mock('lib/history');",
+			errors: [{ message: MOCK }],
+		},
+		{
+			name: 'jest.doMock of react-router-dom-v5-compat',
+			code: "jest.doMock('react-router-dom-v5-compat');",
+			errors: [{ message: MOCK }],
+		},
+		{
+			name: 'react-router-dom named import',
+			code: "import { useHistory } from 'react-router-dom';",
+			errors: [{ message: FACADE, line: 1, column: 28 }],
+		},
+		{
+			name: 'react-router named import',
+			code: "import { useLocation } from 'react-router';",
+			errors: [{ message: FACADE }],
+		},
+		{
+			name: 'react-router-dom type-only import',
+			code: "import type { RouteProps } from 'react-router-dom';",
+			errors: [{ message: FACADE }],
+		},
+		{
+			name: 'react-router-dom-v5-compat',
+			code: "import { useNavigate } from 'react-router-dom-v5-compat';",
+			errors: [{ message: 'compat package is an implementation detail' }],
+		},
+		{
+			name: 'lib/history default import',
+			code: "import history from 'lib/history';",
+			errors: [{ message: HISTORY }],
+		},
+		{
+			name: 'lib/history through the @/ alias',
+			code: "import history from '@/lib/history';",
+			errors: [{ message: HISTORY }],
+		},
+		{
+			name: 'jest.mock of lib/history through the @/ alias',
+			code: "jest.mock('@/lib/history');",
+			errors: [{ message: MOCK }],
+		},
+		{
+			name: 'lib/history require',
+			code: "const history = require('lib/history').default;",
+			errors: [{ message: HISTORY }],
+		},
+		{
+			name: 'dynamic import',
+			code: "const mod = await import('react-router-dom');",
+			errors: [{ message: FACADE }],
+		},
+		{
+			name: 're-export',
+			code: "export { Link } from 'react-router-dom';",
+			errors: [{ message: FACADE }],
+		},
+		{
+			name: 'export all',
+			code: "export * from 'react-router-dom';",
+			errors: [{ message: FACADE }],
+		},
+		{
+			name: 'one report per import statement',
+			code:
+				"import { Link } from 'react-router-dom';\nimport history from 'lib/history';",
+			errors: [
+				{ message: FACADE, line: 1 },
+				{ message: HISTORY, line: 2 },
+			],
+		},
+	],
+});

frontend/plugins/rules/no-direct-react-router-import.mjs

@@ -0,0 +1,123 @@
+/**
+ * Rule: no-direct-react-router-import
+ *
+ * Every router concern goes through the `src/lib/router/*` facade, so a router
+ * upgrade is a change to one directory instead of ~300 call sites. This rule
+ * keeps new call sites, and test mocks, from reaching past it.
+ *
+ * `history` (the package) is deliberately not flagged: it is a transitive concern of
+ * the version bump, not something the facade replaces.
+ *
+ * The allowlist (the facade itself, the route table, `useSafeNavigate`, the history
+ * singleton and the test and story router mounts) is applied via overrides in
+ * .oxlintrc.json, not here, so the file list stays visible next to the severity.
+ */
+
+import path from 'node:path';
+
+const HISTORY_MODULE_SUFFIX = path.join('src', 'lib', 'history');
+
+const JEST_MODULE_METHODS = new Set([
+	'mock',
+	'doMock',
+	'unmock',
+	'dontMock',
+	'setMock',
+	'requireActual',
+	'requireMock',
+	'createMockFromModule',
+]);
+
+const MESSAGE_IDS = {
+	'react-router': 'v5Router',
+	'react-router-dom': 'v5Router',
+	'react-router-dom-v5-compat': 'v6Compat',
+	'lib/history': 'historySingleton',
+	'@/lib/history': 'historySingleton',
+};
+
+/** Resolves `./history` / `../history` so files inside src/lib count too. */
+function isHistoryModule(specifier, filename) {
+	if (!specifier.startsWith('.') || !filename) {
+		return false;
+	}
+	const resolved = path.resolve(path.dirname(filename), specifier);
+	return (
+		resolved.endsWith(HISTORY_MODULE_SUFFIX) ||
+		resolved.endsWith(`${HISTORY_MODULE_SUFFIX}.ts`)
+	);
+}
+
+function messageIdFor(specifier, filename) {
+	if (MESSAGE_IDS[specifier] !== undefined) {
+		return MESSAGE_IDS[specifier];
+	}
+	return isHistoryModule(specifier, filename) ? 'historySingleton' : null;
+}
+
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow direct react-router / lib/history imports; import from src/lib/router instead',
+			category: 'React Router migration',
+		},
+		schema: [],
+		messages: {
+			v5Router:
+				'Do not import react-router-dom directly. Use the src/lib/router facade (useAppNavigate, useAppLocation, useAppParams, AppLink, Redirect, matchRoute) so a router upgrade stays contained.',
+			v6Compat:
+				'Do not import react-router-dom-v5-compat directly. Use the src/lib/router facade instead; the compat package is an implementation detail of the migration and disappears with it.',
+			historySingleton:
+				'Do not import the lib/history singleton. Use the helpers in src/lib/router/navigation.ts, or useAppNavigate() to follow the nearest router. history loses basename handling once the router owns it.',
+			mock:
+				'Do not mock the router directly. Render at a route with tests/test-utils, or spy on the facade with the tests/router-mocks helpers.',
+		},
+	},
+
+	create(context) {
+		const report = (sourceNode, overrideMessageId) => {
+			if (
+				sourceNode === null ||
+				sourceNode === undefined ||
+				typeof sourceNode.value !== 'string'
+			) {
+				return;
+			}
+			const messageId = messageIdFor(sourceNode.value, context.filename);
+			if (messageId !== null) {
+				context.report({
+					node: sourceNode,
+					messageId: overrideMessageId ?? messageId,
+				});
+			}
+		};
+
+		return {
+			ImportDeclaration: (node) => report(node.source),
+			ImportExpression: (node) => report(node.source),
+			ExportAllDeclaration: (node) => report(node.source),
+			ExportNamedDeclaration: (node) => report(node.source),
+			CallExpression(node) {
+				const { callee } = node;
+				if (
+					(callee.type === 'Identifier' && callee.name === 'require') ||
+					callee.type === 'Import'
+				) {
+					report(node.arguments[0]);
+					return;
+				}
+				if (
+					callee.type === 'MemberExpression' &&
+					callee.object.type === 'Identifier' &&
+					callee.object.name === 'jest' &&
+					callee.property.type === 'Identifier' &&
+					JEST_MODULE_METHODS.has(callee.property.name)
+				) {
+					report(node.arguments[0], 'mock');
+				}
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -16,6 +16,7 @@ import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
 import noReturnTextNodes from './rules/no-return-text-nodes.mjs';
 import noMswInStoryFile from './rules/no-msw-in-story-file.mjs';
+import noDirectReactRouterImport from './rules/no-direct-react-router-import.mjs';
 
 export default {
 	meta: {
@@ -33,5 +34,6 @@ export default {
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,
 		'no-return-text-nodes': noReturnTextNodes,
 		'no-msw-in-story-file': noMswInStoryFile,
+		'no-direct-react-router-import': noDirectReactRouterImport,
 	},
 };

frontend/pnpm-workspace.yaml

@@ -86,6 +86,13 @@ overrides:
  #      typescript-plugin-css-modules > postcss-load-config@3 (^1.10.2)
  # remove: blocked — babel-plugin-macros 3.1.0 (latest) still uses cosmiconfig@7
  yaml@>=1.0.0 <1.10.3: '>=1.10.3 <2'
+ # via: jest (@jest/core, @jest/console, jest-config) declares @types/node '*',
+ #      which kept 16.18.25 next to the direct ^22
+ # remove: once `pnpm dedupe` passes trustPolicy and leaves one @types/node
+ '@types/node': '$@types/node'
 trustPolicy: no-downgrade
 trustPolicyExclude:
  - 'semver@6.3.1 || 5.7.2'
+ # via: @types/node@22 (undici-types ~6.21.0, no provenance)
+ # remove: upgrade @types/node to >=24 (undici-types 7.x has provenance)
+ - 'undici-types@6.21.0'

frontend/src/AppRoutes/__tests__/sentryFilters.test.ts

@@ -0,0 +1,140 @@
+import type { ErrorEvent, StackFrame } from '@sentry/react';
+
+import {
+	hasNoAppFrames,
+	isExternalIntegrationError,
+	SENTRY_IGNORE_ERRORS,
+} from '../sentryFilters';
+
+const APP_BUNDLE = 'https://example.us.signoz.cloud/assets/index-B3QqK3ie.js';
+
+function eventWithFrames(...filenames: string[]): ErrorEvent {
+	return {
+		type: undefined,
+		exception: {
+			values: [
+				{
+					type: 'TypeError',
+					value: 'Failed to fetch',
+					stacktrace: {
+						frames: filenames.map((filename) => ({ filename, lineno: 1, colno: 1 })),
+					},
+				},
+			],
+		},
+	};
+}
+
+describe('isExternalIntegrationError', () => {
+	it.each([
+		[
+			'PostHog recorder',
+			'https://us-assets.i.posthog.com/static/posthog-recorder.js?v=1.298.0',
+		],
+		[
+			'Pylon widget',
+			'https://widget.usepylon.com/widget/00000000-0000-0000-0000-000000000000',
+		],
+		['Appcues', 'https://fast.appcues.com/123456.js'],
+	])('drops an error with a %s frame', (_, url) => {
+		expect(isExternalIntegrationError(eventWithFrames(APP_BUNDLE, url))).toBe(
+			true,
+		);
+	});
+
+	it('drops it when the top frame is our bundle', () => {
+		expect(
+			isExternalIntegrationError(
+				eventWithFrames(
+					'https://us-assets.i.posthog.com/static/posthog-recorder.js?v=1.298.0',
+					'<anonymous>',
+					APP_BUNDLE,
+				),
+			),
+		).toBe(true);
+	});
+
+	it('keeps an error from our bundle only', () => {
+		expect(
+			isExternalIntegrationError(eventWithFrames(APP_BUNDLE, '<anonymous>')),
+		).toBe(false);
+	});
+
+	it('keeps an error from a host that only contains an integration name', () => {
+		expect(
+			isExternalIntegrationError(
+				eventWithFrames(
+					'https://posthog.example.com/app.js',
+					'https://notusepylon.com/widget.js',
+				),
+			),
+		).toBe(false);
+	});
+
+	it('keeps an error without a stack trace', () => {
+		expect(isExternalIntegrationError({ type: undefined })).toBe(false);
+	});
+});
+
+describe('hasNoAppFrames', () => {
+	const PAGE_URL = 'https://example.us.signoz.cloud/dashboard/01a081e1';
+
+	function eventWithStackFrames(frames: StackFrame[]): ErrorEvent {
+		return {
+			type: undefined,
+			exception: {
+				values: [{ type: 'SyntaxError', stacktrace: { frames } }],
+			},
+		};
+	}
+
+	it('drops a script appended to the page', () => {
+		expect(
+			hasNoAppFrames(
+				eventWithStackFrames([
+					{ filename: PAGE_URL, lineno: 1, colno: 30, function: 'global code' },
+					{ filename: '[native code]', function: 'eval' },
+					{ filename: '[native code]', function: 'append' },
+				]),
+			),
+		).toBe(true);
+	});
+
+	it('drops a browser extension error', () => {
+		expect(
+			hasNoAppFrames(
+				eventWithStackFrames([
+					{ filename: 'chrome-extension://abc/content.js', lineno: 4, colno: 12 },
+				]),
+			),
+		).toBe(true);
+	});
+
+	it('keeps an error with a frame from our bundle', () => {
+		expect(hasNoAppFrames(eventWithFrames(PAGE_URL, APP_BUNDLE))).toBe(false);
+	});
+
+	it('keeps an error without a stack trace', () => {
+		expect(hasNoAppFrames({ type: undefined })).toBe(false);
+	});
+
+	it('keeps an error whose frames have no position', () => {
+		expect(
+			hasNoAppFrames(
+				eventWithStackFrames([{ filename: '[native code]', function: 'eval' }]),
+			),
+		).toBe(false);
+	});
+});
+
+describe('SENTRY_IGNORE_ERRORS', () => {
+	it('ignores the bundled PostHog recorder load failure', () => {
+		expect(
+			SENTRY_IGNORE_ERRORS.some((pattern) =>
+				pattern.test(
+					'Error: Called on script loaded before session recording is available',
+				),
+			),
+		).toBe(true);
+	});
+});

frontend/src/AppRoutes/index.tsx

@@ -22,6 +22,7 @@ import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
+import { IS_PROD } from 'lib/env';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
@@ -37,6 +38,11 @@ import defaultRoutes, {
 	LIST_LICENSES,
 	SUPPORT_ROUTE,
 } from './routes';
+import {
+	hasNoAppFrames,
+	isExternalIntegrationError,
+	SENTRY_IGNORE_ERRORS,
+} from './sentryFilters';
 
 const appRouter = (children: ReactNode): ReactNode => (
 	<Router history={history}>
@@ -310,16 +316,7 @@ function App(): JSX.Element {
 					tunnel: window.signozBootData.settings.sentry.tunnel,
 					environment: process.env.ENVIRONMENT,
 					release: process.env.VERSION,
-					// A tab that outlived a deploy requests hashed assets the new build no longer
-					// has. `lazyRetry` recovers by reloading once, so this class is not worth
-					// reporting. The stylesheet message is Vite's own; the module ones are the
-					// same failure worded differently by Chromium, Firefox and Safari.
-					ignoreErrors: [
-						/Unable to preload CSS for/,
-						/Failed to fetch dynamically imported module/,
-						/error loading dynamically imported module/,
-						/Importing a module script failed/,
-					],
+					ignoreErrors: SENTRY_IGNORE_ERRORS,
 					integrations: [
 						// Kept for the `transaction` tag used in routing, even though
 						// tracing is disabled. Ref: https://github.com/SigNoz/platform-pod/issues/2393#issuecomment-4603658055
@@ -354,6 +351,15 @@ function App(): JSX.Element {
 							return null;
 						}
 
+						if (isExternalIntegrationError(event)) {
+							return null;
+						}
+
+						// Dev serves source from /src/, so every frame would look foreign there.
+						if (IS_PROD && hasNoAppFrames(event)) {
+							return null;
+						}
+
 						const sessionReplayUrl = posthog.get_session_replay_url?.({
 							withTimestamp: true,
 						});

frontend/src/AppRoutes/sentryFilters.ts

@@ -0,0 +1,49 @@
+import type { ErrorEvent } from '@sentry/react';
+
+export const SENTRY_IGNORE_ERRORS = [
+	// A tab that outlived a deploy requests hashed assets the new build no longer
+	// has. `lazyRetry` recovers by reloading once, so this class is not worth
+	// reporting. The stylesheet message is Vite's own; the module ones are the
+	// same failure worded differently by Chromium, Firefox and Safari.
+	/Unable to preload CSS for/,
+	/Failed to fetch dynamically imported module/,
+	/error loading dynamically imported module/,
+	/Importing a module script failed/,
+	// Thrown by the bundled posthog-js when its recorder script fails to load, so
+	// its frames point at our own bundle and the URL check below misses it.
+	/Called on script loaded before session recording is available/,
+];
+
+const APP_ASSETS_PATH = '/assets/';
+
+// Frames without a position are `[native code]`, which says nothing about the
+// script that threw.
+export function hasNoAppFrames(event: ErrorEvent): boolean {
+	const frames = (event.exception?.values ?? [])
+		.flatMap((exception) => exception.stacktrace?.frames ?? [])
+		.filter(
+			(frame) => frame.filename && (frame.lineno != null || frame.colno != null),
+		);
+
+	return (
+		frames.length > 0 &&
+		!frames.some((frame) => frame.filename?.includes(APP_ASSETS_PATH))
+	);
+}
+
+// PostHog's lazy recorder, the Pylon widget and Appcues.
+const EXTERNAL_SCRIPT_URLS = [
+	/^https?:\/\/[^/]+\.posthog\.com\//,
+	/^https?:\/\/(?:[^/]+\.)?usepylon\.com\//,
+	/^https?:\/\/(?:[^/]+\.)?appcues\.(?:com|net)\//,
+];
+
+// Checks every frame, not only the top one: a failed fetch from the recorder
+// tops out in Sentry's own fetch wrapper, which is bundled with the app.
+export function isExternalIntegrationError(event: ErrorEvent): boolean {
+	return (event.exception?.values ?? []).some((exception) =>
+		(exception.stacktrace?.frames ?? []).some((frame) =>
+			EXTERNAL_SCRIPT_URLS.some((url) => url.test(frame.filename ?? '')),
+		),
+	);
+}

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

@@ -12584,6 +12584,12 @@ export type RuletypesPostableRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesPostableRuleDTOLabels = { [key: string]: string };
 
+/**
+ * The rule payload schema.
+ */
+export enum RuletypesPostableRuleDTOSchemaVersion {
+	v2alpha1 = 'v2alpha1',
+}
 export enum RuletypesSeasonalityDTO {
 	hourly = 'hourly',
 	daily = 'daily',
@@ -12660,9 +12666,9 @@ export interface RuletypesRuleConditionDTO {
 	seasonality?: RuletypesSeasonalityDTO;
 	/**
 	 * @type string
-	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery. When omitted, F1 is used if present, otherwise the enabled query with the highest name.
+	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery.
 	 */
-	selectedQueryName?: string;
+	selectedQueryName: string;
 	/**
 	 * @type number,null
 	 * @format double
@@ -12675,9 +12681,9 @@ export interface RuletypesRuleConditionDTO {
 	 */
 	targetUnit?: string;
 	/**
-	 * @description The thresholds to evaluate, as a kind and spec. Required when schemaVersion is v2alpha1; derived from op, target and matchType for v1.
+	 * @description The thresholds to evaluate, as a kind and spec.
 	 */
-	thresholds?: RuletypesRuleThresholdDataDTO;
+	thresholds: RuletypesRuleThresholdDataDTO;
 }
 
 export interface RuletypesPostableRuleDTO {
@@ -12715,9 +12721,9 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
+	 * @description The evaluation window, as a kind and spec.
 	 */
-	evaluation?: RuletypesEvaluationEnvelopeDTO;
+	evaluation: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -12729,23 +12735,24 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	labels?: RuletypesPostableRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
+	 * @description Grouping, re-notification and routing behaviour.
 	 */
-	notificationSettings?: RuletypesNotificationSettingsDTO;
+	notificationSettings: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
+	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
+	 * @description The rule payload schema.
 	 */
-	schemaVersion?: string;
+	schemaVersion: RuletypesPostableRuleDTOSchemaVersion;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -12753,7 +12760,7 @@ export interface RuletypesPostableRuleDTO {
 	source?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
+	 * @description The query payload version. Nothing reads it.
 	 */
 	version?: string;
 }
@@ -12776,6 +12783,12 @@ export type RuletypesRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesRuleDTOLabels = { [key: string]: string };
 
+/**
+ * The rule payload schema.
+ */
+export enum RuletypesRuleDTOSchemaVersion {
+	v2alpha1 = 'v2alpha1',
+}
 export interface RuletypesRuleDTO {
 	/**
 	 * @type string
@@ -12820,9 +12833,9 @@ export interface RuletypesRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
+	 * @description The evaluation window, as a kind and spec.
 	 */
-	evaluation?: RuletypesEvaluationEnvelopeDTO;
+	evaluation: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -12839,23 +12852,24 @@ export interface RuletypesRuleDTO {
 	 */
 	labels?: RuletypesRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
+	 * @description Grouping, re-notification and routing behaviour.
 	 */
-	notificationSettings?: RuletypesNotificationSettingsDTO;
+	notificationSettings: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
+	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
+	 * @description The rule payload schema.
 	 */
-	schemaVersion?: string;
+	schemaVersion: RuletypesRuleDTOSchemaVersion;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -12876,7 +12890,7 @@ export interface RuletypesRuleDTO {
 	updatedBy?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
+	 * @description The query payload version. Nothing reads it.
 	 */
 	version?: string;
 }

frontend/src/api/utils.ts

@@ -1,7 +1,7 @@
 import deleteLocalStorageKey from 'api/browser/localstorage/remove';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 
 import deleteSession from './v2/sessions/delete';
 
@@ -21,5 +21,5 @@ export const Logout = async (): Promise<void> => {
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
-	history.push(ROUTES.LOGIN);
+	navigate(ROUTES.LOGIN);
 };

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
 import { Row, Select, Spin } from 'antd';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
@@ -35,8 +36,7 @@ export function FilterSelect({
 		useCeleryFilterOptions(filterType);
 
 	const urlQuery = useUrlQuery();
-	const history = useHistory();
-	const location = useLocation();
+	const location = useAppLocation();
 
 	// Add state to track the current search input
 	const [searchValue, setSearchValue] = useState<string>('');
@@ -66,7 +66,7 @@ export function FilterSelect({
 				setQueryParamsFromOptions(
 					value as string[],
 					urlQuery,
-					history,
+					navigate,
 					location,
 					queryParam,
 				);
@@ -77,7 +77,6 @@ export function FilterSelect({
 			handleSearch,
 			shouldSetQueryParams,
 			urlQuery,
-			history,
 			location,
 			queryParam,
 			onChange,

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

@@ -1,5 +1,6 @@
-import { useHistory, useLocation } from 'react-router-dom';
 import { Select, Spin } from 'antd';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Typography } from '@signozhq/ui/typography';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
@@ -16,8 +17,7 @@ import './CeleryTaskConfigOptions.styles.scss';
 function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } =
 		useCeleryFilterOptions('celery.task_name');
-	const history = useHistory();
-	const location = useLocation();
+	const location = useAppLocation();
 
 	const urlQuery = useUrlQuery();
 
@@ -52,7 +52,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 						setQueryParamsFromOptions(
 							value,
 							urlQuery,
-							history,
+							navigate,
 							location,
 							QueryParams.taskName,
 						);

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

@@ -1,8 +1,9 @@
 import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/WidgetCard/config';
@@ -50,8 +51,7 @@ function CeleryTaskBar({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const history = useHistory();
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -68,13 +68,13 @@ function CeleryTaskBar({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			navigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery],
 	);
 
 	const [barState, setBarState] = useState<CeleryTaskState>(CeleryTaskState.All);

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

@@ -1,8 +1,9 @@
 import { useCallback, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/WidgetCard/config';
@@ -54,8 +55,7 @@ function CeleryTaskGraph({
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 	analyticsEvent?: string;
 }): JSX.Element {
-	const history = useHistory();
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -83,13 +83,13 @@ function CeleryTaskGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			navigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery],
 	);
 
 	return (

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

@@ -1,8 +1,9 @@
 import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { Col, Row } from 'antd';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -48,8 +49,7 @@ function CeleryTaskLatencyGraph({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const history = useHistory();
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
@@ -80,13 +80,13 @@ function CeleryTaskLatencyGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			navigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery],
 	);
 
 	const selectedFilters = useMemo(

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,5 +1,5 @@
 import { QueryParams } from 'constants/query';
-import { History, Location } from 'history';
+import type { AppLocation, NavigateFn } from 'lib/router/types';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
 import { Widgets } from 'types/api/widgets/widget';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -17,13 +17,13 @@ export function getValuesFromQueryParams(
 export function setQueryParamsFromOptions(
 	value: string[],
 	urlQuery: URLSearchParams,
-	history: History<unknown>,
-	location: Location<unknown>,
+	navigate: NavigateFn,
+	location: AppLocation,
 	queryParams: QueryParams,
 ): void {
 	urlQuery.set(queryParams, value.join(','));
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-	history.replace(generatedUrl);
+	navigate(generatedUrl, { replace: true });
 }
 
 export function getFiltersFromQueryParams(

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

@@ -1,20 +1,12 @@
 import { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import dayjs from 'dayjs';
+import { mockAppLocation } from 'tests/router-mocks';
 import * as timeUtils from 'utils/timeUtils';
 
 import CustomTimePicker from './CustomTimePicker';
 
-jest.mock('react-router-dom', () => {
-	const actual = jest.requireActual('react-router-dom');
-
-	return {
-		...actual,
-		useLocation: jest.fn().mockReturnValue({
-			pathname: '/test-path',
-		}),
-	};
-});
+mockAppLocation({ pathname: '/test-path' });
 
 jest.mock('react-redux', () => ({
 	...jest.requireActual('react-redux'),

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Button } from '@signozhq/ui/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
@@ -109,7 +109,7 @@ function CustomTimePicker({
 	const [inputErrorDetails, setInputErrorDetails] = useState<
 		TimeRangeValidationResult['errorDetails'] | null
 	>(null);
-	const location = useLocation();
+	const location = useAppLocation();
 
 	const inputRef = useRef<InputRef>(null);
 	const initialInputValueOnOpenRef = useRef<string>('');

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -114,7 +114,7 @@ function CustomTimePickerPopoverContent({
 	customDateTimeInputStatus = CustomTimePickerInputStatus.UNSET,
 	inputErrorDetails,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 
 	const isLogsExplorerPage = useMemo(
 		() => pathname === ROUTES.LOGS_EXPLORER,

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { QueryParams } from 'constants/query';
+import { mockAppLocation } from 'tests/router-mocks';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import CustomTimePicker from '../CustomTimePicker';
@@ -59,10 +60,6 @@ jest.mock('providers/Timezone', () => ({
 	}),
 }));
 
-jest.mock('react-router-dom', () => ({
-	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
-}));
-
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
 const now = Date.now();
 const defaultProps = {
@@ -85,6 +82,7 @@ describe('CustomTimePicker - zoom out button', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+		mockAppLocation({ pathname: '/logs-explorer' });
 	});
 
 	afterEach(() => {

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
@@ -11,7 +11,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');
 	const [feedback, setFeedback] = useState('');
-	const location = useLocation();
+	const location = useAppLocation();
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const [isLoading, setIsLoading] = useState(false);
 

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
@@ -39,7 +39,7 @@ function HeaderRightSection({
 	enableFeedback,
 	shareModalExtraOption,
 }: HeaderRightSectionProps): JSX.Element | null {
-	const location = useLocation();
+	const location = useAppLocation();
 
 	const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
 	const [openShareURLModal, setOpenShareURLModal] = useState(false);

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { matchRoute } from 'lib/router/matchRoute';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
@@ -41,7 +42,7 @@ interface ShareURLModalProps {
 
 function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const urlQuery = useUrlQuery();
-	const location = useLocation();
+	const location = useAppLocation();
 	const { selectedTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -75,7 +76,7 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const isRouteToBeSharedWithTime = useMemo(
 		() =>
 			routesToBeSharedWithTime.some((route) =>
-				matchPath(location.pathname, { path: route, exact: true }),
+				matchRoute(location.pathname, route, { exact: true }),
 			),
 		[location.pathname],
 	);

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,5 +1,5 @@
 // Mock dependencies before imports
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -9,9 +9,8 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: jest.fn(),
+jest.mock('lib/router/useAppLocation', () => ({
+	useAppLocation: jest.fn(),
 }));
 
 jest.mock('@signozhq/ui/sonner', () => ({
@@ -30,7 +29,7 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
-const mockUseLocation = useLocation as jest.Mock;
+const mockUseAppLocation = useAppLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
 const mockToast = toast as jest.Mocked<typeof toast>;
@@ -45,7 +44,7 @@ describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		logEventMock.mockReturnValue(Promise.resolve() as never);
-		mockUseLocation.mockReturnValue(mockLocation);
+		mockUseAppLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
 		});

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

@@ -1,5 +1,5 @@
 // Mock dependencies before imports
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { logEventMock } from '__tests__/logEventMock';
@@ -7,9 +7,8 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: jest.fn(),
+jest.mock('lib/router/useAppLocation', () => ({
+	useAppLocation: jest.fn(),
 }));
 
 jest.mock('../FeedbackModal', () => ({
@@ -45,7 +44,7 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
-const mockUseLocation = useLocation as jest.Mock;
+const mockUseAppLocation = useAppLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
 const defaultProps = {
@@ -61,7 +60,7 @@ const mockLocation = {
 describe('HeaderRightSection', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockUseLocation.mockReturnValue(mockLocation);
+		mockUseAppLocation.mockReturnValue(mockLocation);
 		// Default to licensed user (Enterprise or Cloud)
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: true,

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -1,7 +1,8 @@
 // Mock dependencies before imports
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { matchRoute } from 'lib/router/matchRoute';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -12,10 +13,12 @@ import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: jest.fn(),
-	matchPath: jest.fn(),
+jest.mock('lib/router/useAppLocation', () => ({
+	useAppLocation: jest.fn(),
+}));
+
+jest.mock('lib/router/matchRoute', () => ({
+	matchRoute: jest.fn(),
 }));
 
 jest.mock('hooks/useUrlQuery', () => ({
@@ -48,12 +51,12 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
-const mockUseLocation = useLocation as jest.Mock;
+const mockUseAppLocation = useAppLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
 const mockGetMinMax = GetMinMax as jest.Mock;
 const mockUseCopyToClipboard = useCopyToClipboard as jest.Mock;
-const mockMatchPath = matchPath as jest.Mock;
+const mockMatchRoute = matchRoute as jest.Mock;
 
 const mockUrlQuery = {
 	get: jest.fn(),
@@ -71,7 +74,7 @@ describe('ShareURLModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 
-		mockUseLocation.mockReturnValue({
+		mockUseAppLocation.mockReturnValue({
 			pathname: TEST_PATH,
 		});
 
@@ -88,7 +91,7 @@ describe('ShareURLModal', () => {
 
 		mockUseCopyToClipboard.mockReturnValue([null, mockHandleCopyToClipboard]);
 
-		mockMatchPath.mockReturnValue(false);
+		mockMatchRoute.mockReturnValue(null);
 
 		// Reset URL query mocks - all return null by default
 		mockUrlQuery.get.mockReturnValue(null);
@@ -126,7 +129,7 @@ describe('ShareURLModal', () => {
 	});
 
 	it('should show absolute time toggle when on time-enabled route', () => {
-		mockMatchPath.mockReturnValue(true); // Simulate being on a route that supports time
+		mockMatchRoute.mockReturnValue({}); // Simulate being on a route that supports time
 
 		render(<ShareURLModal />);
 
@@ -146,7 +149,7 @@ describe('ShareURLModal', () => {
 
 	it('should toggle absolute time switch', async () => {
 		const user = userEvent.setup();
-		mockMatchPath.mockReturnValue(true);
+		mockMatchRoute.mockReturnValue({});
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min', // Non-custom time should enable absolute time by default
 		});
@@ -169,7 +172,7 @@ describe('ShareURLModal', () => {
 		// Invalid - missing start and end time for custom
 		mockUrlQuery.get.mockReturnValue(null);
 
-		mockMatchPath.mockReturnValue(true);
+		mockMatchRoute.mockReturnValue({});
 
 		render(<ShareURLModal />);
 
@@ -181,7 +184,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with absolute time for non-custom time', async () => {
 		const user = userEvent.setup();
-		mockMatchPath.mockReturnValue(true);
+		mockMatchRoute.mockReturnValue({});
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min',
 		});
@@ -200,7 +203,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with custom time parameters', async () => {
 		const user = userEvent.setup();
-		mockMatchPath.mockReturnValue(true);
+		mockMatchRoute.mockReturnValue({});
 		mockUseSelector.mockReturnValue({
 			selectedTime: 'custom',
 		});
@@ -228,7 +231,7 @@ describe('ShareURLModal', () => {
 
 	it('should process URL with relative time when absolute time is disabled', async () => {
 		const user = userEvent.setup();
-		mockMatchPath.mockReturnValue(true);
+		mockMatchRoute.mockReturnValue({});
 		mockUseSelector.mockReturnValue({
 			selectedTime: '5min',
 		});
@@ -249,12 +252,12 @@ describe('ShareURLModal', () => {
 
 	it('should handle routes that should be shared with time', async () => {
 		const user = userEvent.setup();
-		mockUseLocation.mockReturnValue({
+		mockUseAppLocation.mockReturnValue({
 			pathname: ROUTES.LOGS_EXPLORER,
 		});
 
-		mockMatchPath.mockImplementation(
-			(pathname: string, options: any) => options.path === ROUTES.LOGS_EXPLORER,
+		mockMatchRoute.mockImplementation((pathname: string, route: string) =>
+			route === ROUTES.LOGS_EXPLORER ? {} : null,
 		);
 
 		render(<ShareURLModal />);

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Button, Tooltip } from 'antd';
 import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
@@ -43,7 +43,7 @@ function LaunchChatSupport({
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
 
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 
 	const isChatSupportEnabled = useMemo(() => {
 		if (!isFetchingFeatureFlags && (featureFlags || featureFlagsFetchError)) {

frontend/src/components/LogDetail/LogHighlights/TraceIdField.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { AppLink } from 'lib/router/AppLink';
 
 import styles from './LogHighlights.module.scss';
 
@@ -8,7 +8,7 @@ interface TraceIdFieldProps {
 
 function TraceIdField({ traceId }: TraceIdFieldProps): JSX.Element {
 	return (
-		<Link
+		<AppLink
 			to={{ pathname: `/trace/${traceId}` }}
 			target="_blank"
 			rel="noreferrer"
@@ -16,7 +16,7 @@ function TraceIdField({ traceId }: TraceIdFieldProps): JSX.Element {
 			title={traceId}
 		>
 			{traceId}
-		</Link>
+		</AppLink>
 	);
 }
 

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,6 +1,5 @@
 import { Typography } from '@signozhq/ui/typography';
 import { ReactNode, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 import {
 	OctagonAlert,
 	Bolt,
@@ -14,7 +13,7 @@ import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { History } from 'history';
+import { navigate } from 'lib/router/navigation';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import {
 	KAFKA_SETUP_DOC_LINK,
@@ -45,7 +44,6 @@ export enum AttributesFilters {
 function ErrorTitleAndKey({
 	title,
 	parentTitle,
-	history,
 	isCloudUserVal,
 	errorMsg,
 	isLeaf,
@@ -53,7 +51,6 @@ function ErrorTitleAndKey({
 	title: string;
 	parentTitle: string;
 	isCloudUserVal: boolean;
-	history: History<unknown>;
 	errorMsg?: string;
 	isLeaf?: boolean;
 }): TreeDataNode {
@@ -75,7 +72,7 @@ function ErrorTitleAndKey({
 		}
 
 		if (isCloudUserVal && !!link) {
-			history.push(link);
+			navigate(link);
 		} else {
 			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
@@ -149,7 +146,6 @@ function generateTreeDataNodes(
 	response: OnboardingStatusResponse['data'],
 	parentTitle: string,
 	isCloudUserVal: boolean,
-	history: History<unknown>,
 ): TreeDataNode[] {
 	return response
 		.map((item) => {
@@ -162,7 +158,6 @@ function generateTreeDataNodes(
 						title: item.attribute,
 						errorMsg: item.error_message || '',
 						parentTitle,
-						history,
 						isCloudUserVal,
 					});
 				}
@@ -185,7 +180,6 @@ function AttributeCheckList({
 		setFilter(value);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const history = useHistory();
 
 	useEffect(() => {
 		const filteredData = onboardingStatusResponses.map((response) => {
@@ -195,7 +189,6 @@ function AttributeCheckList({
 					errorMsg: response.errorMsg,
 					isLeaf: true,
 					parentTitle: response.title,
-					history,
 					isCloudUserVal,
 				});
 			}
@@ -213,7 +206,6 @@ function AttributeCheckList({
 					filteredData,
 					response.title,
 					isCloudUserVal,
-					history,
 				),
 			};
 		});

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,7 +18,7 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Select } from 'antd';
+import { Button, type RefSelectProps, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
@@ -26,7 +26,6 @@ import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import TruncatedTooltip from './TruncatedTooltip';
@@ -84,7 +83,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
-	const selectRef = useRef<BaseSelectRef>(null);
+	const selectRef = useRef<RefSelectProps>(null);
 	const [activeIndex, setActiveIndex] = useState<number>(-1);
 	const [activeChipIndex, setActiveChipIndex] = useState<number>(-1); // For tracking active chip/tag
 	const [selectionStart, setSelectionStart] = useState<number>(-1);

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,13 +16,12 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Select } from 'antd';
+import { type RefSelectProps, Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import TruncatedTooltip from './TruncatedTooltip';
@@ -75,7 +74,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	const isDarkMode = useIsDarkMode();
 
 	// Refs for element access and scroll behavior
-	const selectRef = useRef<BaseSelectRef>(null);
+	const selectRef = useRef<RefSelectProps>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	// Flag to track if dropdown just opened

frontend/src/components/NotFound/NotFound.test.tsx

@@ -1,19 +1,19 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import store from 'store';
+import { TestRouter } from 'tests/router';
 
 import NotFound from './index';
 
 describe('Not Found page test', () => {
 	it('should render Not Found page without errors', () => {
 		const { asFragment } = render(
-			<MemoryRouter>
+			<TestRouter>
 				<Provider store={store}>
 					<NotFound />
 				</Provider>
-			</MemoryRouter>,
+			</TestRouter>,
 		);
 		expect(asFragment()).toMatchSnapshot();
 	});

frontend/src/components/NotFound/styles.ts

@@ -1,7 +1,7 @@
-import { Link } from 'react-router-dom';
+import { AppLink } from 'lib/router/AppLink';
 import styled from 'styled-components';
 
-export const Button = styled(Link)`
+export const Button = styled(AppLink)`
 	border: 2px solid #2f80ed;
 	box-sizing: border-box;
 	border-radius: 10px;

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

@@ -129,6 +129,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										onChange={handleChangeOperator}
 										operators={operators}
 										className="metrics-operators-select"
+										data-testid="metrics-time-aggregation"
 									/>
 								</div>
 							</div>
@@ -192,7 +193,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										AGGREGATE ACROSS TIME SERIES
 									</div>
 								</Tooltip>
-								<div className="metrics-aggregation-section-content-item-value">
+								<div
+									className="metrics-aggregation-section-content-item-value"
+									data-testid="metrics-space-aggregation"
+								>
 									<SpaceAggregationOptions
 										panelType={panelType}
 										key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}
@@ -229,7 +233,10 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 				<div className="metrics-space-aggregation-section">
 					<div className="metrics-aggregation-section-content">
 						<div className="metrics-aggregation-section-content-item">
-							<div className="metrics-aggregation-section-content-item-value">
+							<div
+								className="metrics-aggregation-section-content-item-value"
+								data-testid="metrics-space-aggregation"
+							>
 								<SpaceAggregationOptions
 									panelType={panelType}
 									key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}

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

@@ -332,6 +332,7 @@ function HavingFilter({
 					value={input}
 					onChange={handleChange}
 					theme={isDarkMode ? copilot : githubLight}
+					data-testid="having-editor"
 					className="having-filter-select-editor"
 					width="100%"
 					extensions={[

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

@@ -615,6 +615,7 @@ function QueryAggregationSelect({
 					setInput(value);
 					onChange?.(value);
 				}}
+				data-testid="query-aggregation-editor"
 				className={`query-aggregation-select-editor ${
 					validationError ? 'error' : ''
 				}`}

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

@@ -1607,6 +1607,7 @@ function QuerySearch({
 					onChange={handleChange}
 					onUpdate={handleUpdate}
 					onCreateEditor={handleEditorCreate}
+					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1680,6 +1681,7 @@ function QuerySearch({
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,
 						})}
+						data-testid="query-validation-status"
 					>
 						<Popover
 							placement="bottomRight"

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

@@ -183,6 +183,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 		<div
 			className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}
 			ref={ref}
+			data-testid={`query-${query.queryName}`}
 		>
 			<div className="qb-content-section">
 				{(!showOnlyWhereClause || showTraceOperator) && (
@@ -246,6 +247,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							{isMultiQueryAllowed && (
 								<Dropdown
 									items={queryActionItems}
+									testId="query-actions"
 									nativeButton={false}
 									align="end"
 									side="bottom"

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

@@ -61,7 +61,10 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
+		<div
+			className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}
+			data-testid="trace-operator"
+		>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(

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

@@ -378,6 +378,7 @@ function TraceOperatorEditor({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
+					data-testid="trace-operator-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,

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

@@ -1,5 +1,4 @@
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import { navigate } from 'lib/router/navigation';
 import { fireEvent, render, screen } from 'tests/test-utils';
 
 import RouteTab from './index';
@@ -10,6 +9,11 @@ jest.mock('./RouteTab.module.scss', () => ({
 	default: { routeTab: 'routeTab' },
 }));
 
+jest.mock('lib/router/navigation', () => ({
+	...jest.requireActual('lib/router/navigation'),
+	navigate: jest.fn(),
+}));
+
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -33,63 +37,39 @@ const testRoutes: RouteTabProps['routes'] = [
 ];
 
 describe('RouteTab component', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
 	it('renders correctly', () => {
-		const history = createMemoryHistory();
-		render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
+		render(<RouteTab routes={testRoutes} activeKey="Tab1" />);
 		expect(screen.getByRole('tab', { name: 'Tab1' })).toBeInTheDocument();
 		expect(screen.getByRole('tab', { name: 'Tab2' })).toBeInTheDocument();
 	});
 
 	it('renders correct number of tabs', () => {
-		const history = createMemoryHistory();
-		render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
+		render(<RouteTab routes={testRoutes} activeKey="Tab1" />);
 		const tabs = screen.getAllByRole('tab');
 		expect(tabs).toHaveLength(testRoutes.length);
 	});
 
 	it('sets provided activeKey as active tab', () => {
-		const history = createMemoryHistory();
-		render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab2" />
-			</Router>,
-		);
+		render(<RouteTab routes={testRoutes} activeKey="Tab2" />);
 		expect(
 			screen.getByRole('tab', { name: 'Tab2', selected: true }),
 		).toBeInTheDocument();
 	});
 
 	it('navigates to correct route on tab click', () => {
-		const history = createMemoryHistory();
-		render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
-		expect(history.location.pathname).toBe('/');
+		render(<RouteTab routes={testRoutes} activeKey="Tab1" />);
+		expect(navigate).not.toHaveBeenCalled();
 		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
-		expect(history.location.pathname).toBe('/tab2');
+		expect(navigate).toHaveBeenCalledWith('/tab2');
 	});
 
 	it('applies the layout class alongside a custom className', () => {
-		const history = createMemoryHistory();
 		const { container } = render(
-			<Router history={history}>
-				<RouteTab
-					history={history}
-					routes={testRoutes}
-					activeKey="Tab1"
-					className="custom-tabs"
-				/>
-			</Router>,
+			<RouteTab routes={testRoutes} activeKey="Tab1" className="custom-tabs" />,
 		);
 		expect(container.querySelector('.ant-tabs')).toHaveClass(
 			'routeTab',
@@ -98,11 +78,8 @@ describe('RouteTab component', () => {
 	});
 
 	it('renders the active tab content inside an overlay scrollbar', () => {
-		const history = createMemoryHistory();
 		const { container } = render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
+			<RouteTab routes={testRoutes} activeKey="Tab1" />,
 		);
 		expect(
 			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
@@ -111,16 +88,12 @@ describe('RouteTab component', () => {
 
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
-		const history = createMemoryHistory();
 		render(
-			<Router history={history}>
-				<RouteTab
-					routes={testRoutes}
-					activeKey="Tab1"
-					onChangeHandler={onChangeHandler}
-					history={history}
-				/>
-			</Router>,
+			<RouteTab
+				routes={testRoutes}
+				activeKey="Tab1"
+				onChangeHandler={onChangeHandler}
+			/>,
 		);
 		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(onChangeHandler).toHaveBeenCalled();

frontend/src/components/RouteTab/index.tsx

@@ -1,13 +1,12 @@
-import {
-	generatePath,
-	matchPath,
-	useLocation,
-	useParams,
-} from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
 import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { buildRoutePath } from 'lib/router/buildRoutePath';
+import { matchRoute } from 'lib/router/matchRoute';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { useAppParams } from 'lib/router/useAppParams';
 
 import { RouteTabProps } from './types';
 
@@ -28,21 +27,17 @@ function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
-	history,
 	showRightSection,
 	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
-	const params = useParams<Params>();
-	const location = useLocation();
+	const params = useAppParams<Params>();
+	const location = useAppLocation();
 
 	// Find the matching route for the current pathname
 	const currentRoute = routes.find((route) => {
 		const routePath = route.route.split('?')[0];
-		return matchPath(location.pathname, {
-			path: routePath,
-			exact: true,
-		});
+		return matchRoute(location.pathname, routePath, { exact: true });
 	});
 
 	const onChange = (activeRoute: string): void => {
@@ -53,8 +48,7 @@ function RouteTab({
 		const selectedRoute = routes.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
-			const resolvedRoute = generatePath(selectedRoute.route, params);
-			history.push(resolvedRoute);
+			navigate(buildRoutePath(selectedRoute.route, params));
 		}
 	};
 

frontend/src/components/RouteTab/types.ts

@@ -1,6 +1,5 @@
 import { ComponentType } from 'react';
 import { TabsProps } from 'antd';
-import { History } from 'history';
 
 export type TabRoutes = {
 	name: React.ReactNode;
@@ -13,6 +12,5 @@ export interface RouteTabProps {
 	routes: TabRoutes[];
 	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: (key: string) => void;
-	history: History<unknown>;
 	showRightSection: boolean;
 }

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -3,7 +3,7 @@
  */
 // ---- Mocks (must run BEFORE importing the component) ----
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import '@testing-library/jest-dom/extend-expect';
@@ -24,61 +24,12 @@ afterAll(() => {
 	delete (HTMLElement.prototype as any).scrollIntoView;
 });
 
-// mock history.push / replace / go / location
-jest.mock('lib/history', () => {
-	const location = { pathname: '/', search: '', hash: '' };
+jest.mock('lib/router/navigation', () => ({
+	...jest.requireActual('lib/router/navigation'),
+	navigate: jest.fn(),
+}));
 
-	const stack: { pathname: string; search: string }[] = [
-		{ pathname: '/', search: '' },
-	];
-
-	const push = jest.fn((path: string) => {
-		const [rawPath, rawQuery] = path.split('?');
-		const pathname = rawPath || '/';
-		const search = path.includes('?') ? `?${rawQuery || ''}` : '';
-
-		location.pathname = pathname;
-		location.search = search;
-
-		stack.push({ pathname, search });
-		return undefined;
-	});
-
-	const replace = jest.fn((path: string) => {
-		const [rawPath, rawQuery] = path.split('?');
-		const pathname = rawPath || '/';
-		const search = path.includes('?') ? `?${rawQuery || ''}` : '';
-
-		location.pathname = pathname;
-		location.search = search;
-
-		if (stack.length > 0) {
-			stack[stack.length - 1] = { pathname, search };
-		} else {
-			stack.push({ pathname, search });
-		}
-		return undefined;
-	});
-
-	const listen = jest.fn();
-	const go = jest.fn((n: number) => {
-		if (n < 0 && stack.length > 1) {
-			stack.pop();
-		}
-		const top = stack[stack.length - 1] || { pathname: '/', search: '' };
-		location.pathname = top.pathname;
-		location.search = top.search;
-	});
-
-	return {
-		push,
-		replace,
-		listen,
-		go,
-		location,
-		__stack: stack,
-	};
-});
+const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
 
 // Mock ResizeObserver for Jest/jsdom
 class ResizeObserver {
@@ -159,14 +110,14 @@ describe('CmdKPalette', () => {
 		expect(screen.getByText('Switch to Dark Mode')).toBeInTheDocument();
 	});
 
-	it('clicking a navigation item calls history.push with correct route', async () => {
+	it('clicking a navigation item navigates to the correct route', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const homeItem = screen.getByText(HOME_LABEL);
 		await user.click(homeItem);
 
-		expect(history.push).toHaveBeenCalledWith(ROUTES.HOME);
+		expect(mockNavigate).toHaveBeenCalledWith(ROUTES.HOME);
 	});
 
 	it('role-based filtering (basic smoke)', () => {

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import cx from 'classnames';
-import { useLocation } from 'react-router-dom';
 import {
 	CommandDialog,
 	CommandEmpty,
@@ -23,7 +22,8 @@ import {
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { IS_DEV } from 'lib/env';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { ROLES as UserRole } from 'types/roles';
 
 import { createShortcutActions } from '../../constants/shortcutActions';
@@ -77,7 +77,7 @@ export function CmdKPalette({
 	const { open, setOpen } = useCmdK();
 
 	const { setAutoSwitch, setTheme, theme } = useThemeMode();
-	const location = useLocation();
+	const location = useAppLocation();
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const startNewConversation = useAIAssistantStore(
 		(s) => s.startNewConversation,
@@ -120,7 +120,7 @@ export function CmdKPalette({
 	}
 
 	function onClickHandler(key: string): void {
-		history.push(key);
+		navigate(key);
 	}
 
 	const handleOpenAIAssistant = (): void => {

frontend/src/container/AIAssistant/AIAssistantDrawer/AIAssistantDrawer.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
+import { navigate } from 'lib/router/navigation';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { Drawer } from 'antd';
 import ROUTES from 'constants/routes';
@@ -12,8 +12,6 @@ import { useAIAssistantStore } from '../store/useAIAssistantStore';
 import { VariantContext } from '../VariantContext';
 
 export default function AIAssistantDrawer(): JSX.Element {
-	const history = useHistory();
-
 	const isDrawerOpen = useAIAssistantStore((s) => s.isDrawerOpen);
 	const activeConversationId = useAIAssistantStore(
 		(s) => s.activeConversationId,
@@ -28,10 +26,10 @@ export default function AIAssistantDrawer(): JSX.Element {
 			return;
 		}
 		closeDrawer();
-		history.push(
+		navigate(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
 		);
-	}, [activeConversationId, closeDrawer, history]);
+	}, [activeConversationId, closeDrawer]);
 
 	const handleNewConversation = useCallback(() => {
 		startNewConversation();

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Minus, Plus, X } from '@signozhq/icons';
@@ -31,8 +32,7 @@ import styles from './AIAssistantModal.module.scss';
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function AIAssistantModal(): JSX.Element | null {
-	const history = useHistory();
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const [showHistory, setShowHistory] = useState(false);
 
 	const isOpen = useAIAssistantStore((s) => s.isModalOpen);
@@ -94,11 +94,11 @@ export default function AIAssistantModal(): JSX.Element | null {
 		// Router state tells AIAssistantPage to skip its mount-time Opened fire:
 		// the assistant was already open in the modal, so this is a surface
 		// switch, not a new open.
-		history.push(
+		navigate(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
-			{ fromInApp: true },
+			{ state: { fromInApp: true } },
 		);
-	}, [activeConversationId, closeModal, history]);
+	}, [activeConversationId, closeModal]);
 
 	const handleNew = useCallback(() => {
 		void logEvent(AIAssistantEvents.NewChatClicked, {

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
+import { matchRoute } from 'lib/router/matchRoute';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Plus, X } from '@signozhq/icons';
@@ -21,13 +23,11 @@ const AI_ASSISTANT_PANEL_OPEN_CLASS = 'ai-assistant-panel-open';
 const AI_ASSISTANT_PANEL_WIDTH_VAR = '--ai-assistant-panel-width';
 
 export default function AIAssistantPanel(): JSX.Element | null {
-	const history = useHistory();
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const [showHistory, setShowHistory] = useState(false);
 
 	const isOpen = useAIAssistantStore((s) => s.isDrawerOpen);
-	const isFullScreenPage = !!matchPath(pathname, {
-		path: ROUTES.AI_ASSISTANT,
+	const isFullScreenPage = !!matchRoute(pathname, ROUTES.AI_ASSISTANT, {
 		exact: true,
 	});
 	const activeConversationId = useAIAssistantStore(
@@ -47,11 +47,11 @@ export default function AIAssistantPanel(): JSX.Element | null {
 		// Router state tells AIAssistantPage to skip its mount-time Opened fire:
 		// the assistant was already open in the drawer, so this is a surface
 		// switch, not a new open.
-		history.push(
+		navigate(
 			ROUTES.AI_ASSISTANT.replace(':conversationId', activeConversationId),
-			{ fromInApp: true },
+			{ state: { fromInApp: true } },
 		);
-	}, [activeConversationId, closeDrawer, history]);
+	}, [activeConversationId, closeDrawer]);
 
 	const handleNew = useCallback(() => {
 		void logEvent(AIAssistantEvents.NewChatClicked, {

frontend/src/container/AIAssistant/ConversationView/ConversationView.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import cx from 'classnames';
+import { useAppLocation } from 'lib/router/useAppLocation';
 
 import logEvent from 'api/common/logEvent';
 
@@ -26,7 +26,7 @@ export default function ConversationView({
 }: ConversationViewProps): JSX.Element {
 	const variant = useVariant();
 	const isCompact = variant === 'panel';
-	const location = useLocation();
+	const location = useAppLocation();
 
 	const conversation = useAIAssistantStore(
 		(s) => s.conversations[conversationId],

frontend/src/container/AIAssistant/ConversationView/__tests__/ConversationView.test.tsx

@@ -1,9 +1,8 @@
-import { MemoryRouter } from 'react-router-dom';
-// eslint-disable-next-line no-restricted-imports
 import { fireEvent, render } from '@testing-library/react';
 import { MessageContext } from 'api/ai-assistant/chat';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
 import { VariantContext } from 'container/AIAssistant/VariantContext';
+import { TestRouter } from 'tests/router';
 
 const CHIP_ID = 'recent-errors';
 const CHIP_TEXT = 'Show me recent errors';
@@ -87,11 +86,11 @@ function renderView(variant: 'panel' | 'page' | 'modal'): {
 	getByTestId: (id: string) => HTMLElement;
 } {
 	return render(
-		<MemoryRouter initialEntries={['/dashboard/dashboard-123']}>
+		<TestRouter initialRoute="/dashboard/dashboard-123">
 			<VariantContext.Provider value={variant}>
 				<ConversationView conversationId={CONVERSATION_ID} />
 			</VariantContext.Provider>
-		</MemoryRouter>,
+		</TestRouter>,
 	);
 }
 

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -147,6 +147,28 @@ describe('getAutoContexts', () => {
 				metadata: { page: 'alert_list' },
 			},
 		]);
+
+		expect(
+			getAutoContexts(ROUTES.LIST_ALL_ALERT, '?tab=RoutingPolicies'),
+		).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: null,
+				metadata: { page: 'alert_list' },
+			},
+		]);
+
+		expect(
+			getAutoContexts(ROUTES.LIST_ALL_ALERT, '?tab=PlannedDowntime'),
+		).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'alert',
+				resourceId: null,
+				metadata: { page: 'alert_list' },
+			},
+		]);
 	});
 
 	it('returns dashboard detail context on dashboard page', () => {

frontend/src/container/AIAssistant/__tests__/resolvePageType.test.ts

@@ -58,6 +58,12 @@ describe('resolvePageType', () => {
 		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=Configuration')).toBe(
 			PageTypeDTO.alert_list,
 		);
+		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=RoutingPolicies')).toBe(
+			PageTypeDTO.alert_list,
+		);
+		expect(resolvePageType(ROUTES.LIST_ALL_ALERT, '?tab=PlannedDowntime')).toBe(
+			PageTypeDTO.alert_list,
+		);
 	});
 
 	it('returns log_detail when logs explorer has activeLogId', () => {

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

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
-import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { matchRoute } from 'lib/router/matchRoute';
+import { navigate } from 'lib/router/navigation';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
@@ -213,20 +215,11 @@ function signalMatchesPathname(
 ): boolean {
 	switch (signal) {
 		case ApplyFilterSignalDTO.logs:
-			return Boolean(
-				matchPath(pathname, { path: ROUTES.LOGS_EXPLORER, exact: false }),
-			);
+			return Boolean(matchRoute(pathname, ROUTES.LOGS_EXPLORER));
 		case ApplyFilterSignalDTO.traces:
-			return Boolean(
-				matchPath(pathname, { path: ROUTES.TRACES_EXPLORER, exact: false }),
-			);
+			return Boolean(matchRoute(pathname, ROUTES.TRACES_EXPLORER));
 		case ApplyFilterSignalDTO.metrics:
-			return Boolean(
-				matchPath(pathname, {
-					path: ROUTES.METRICS_EXPLORER_EXPLORER,
-					exact: false,
-				}),
-			);
+			return Boolean(matchRoute(pathname, ROUTES.METRICS_EXPLORER_EXPLORER));
 		default:
 			return false;
 	}
@@ -275,7 +268,6 @@ function explorerRouteForSignal(signal: ApplyFilterSignalDTO): string | null {
 }
 
 interface ApplyFilterDeps {
-	history: ReturnType<typeof useHistory>;
 	pathname: string;
 	redirectWithQueryBuilderData: ReturnType<
 		typeof useQueryBuilder
@@ -317,8 +309,8 @@ function withDerivedFilterExpressions(query: Query): Query {
  *     page-action recipe — calling redirect alone is not sufficient because
  *     the URL→state effect runs after the next render and the editor binds
  *     to `filter.expression`, not `filters.items`.
- *   - Off-page: use `history.push` so the landing explorer initializes from
- *     the new URL on mount.
+ *   - Off-page: `navigate()` so the landing explorer initializes from the
+ *     new URL on mount.
  */
 function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 	// eslint-disable-next-line no-console
@@ -360,9 +352,9 @@ function applyFilter(action: MessageActionDTO, deps: ApplyFilterDeps): void {
 		return;
 	}
 	// eslint-disable-next-line no-console
-	console.log('[apply_filter] off-page → history.push', base);
+	console.log('[apply_filter] off-page → navigate', base);
 	const encoded = encodeURIComponent(JSON.stringify(normalized));
-	deps.history.push(`${base}?${QueryParams.compositeQuery}=${encoded}`);
+	navigate(`${base}?${QueryParams.compositeQuery}=${encoded}`);
 }
 
 /** Picks the right rollback API call for a given action kind. */
@@ -391,8 +383,7 @@ export default function ActionsSection({
 	actions,
 	messageId,
 }: ActionsSectionProps): JSX.Element | null {
-	const history = useHistory();
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const sendMessage = useAIAssistantStore((s) => s.sendMessage);
 	const { threadId, page, mode } = useAIAssistantAnalyticsContext();
 	const { redirectWithQueryBuilderData, handleSetQueryData } = useQueryBuilder();
@@ -424,19 +415,12 @@ export default function ActionsSection({
 			}
 			autoAppliedFilterKeys.add(key);
 			applyFilter(action, {
-				history,
 				pathname,
 				redirectWithQueryBuilderData,
 				handleSetQueryData,
 			});
 		});
-	}, [
-		actions,
-		pathname,
-		history,
-		redirectWithQueryBuilderData,
-		handleSetQueryData,
-	]);
+	}, [actions, pathname, redirectWithQueryBuilderData, handleSetQueryData]);
 
 	if (actions.length === 0) {
 		return null;
@@ -456,11 +440,7 @@ export default function ActionsSection({
 		}
 		setResult(key, { state: 'loading' });
 		try {
-			await openSavedViewByKey(
-				resourceId,
-				resolveSavedViewSourceHint(action),
-				history,
-			);
+			await openSavedViewByKey(resourceId, resolveSavedViewSourceHint(action));
 			void logEvent(AIAssistantEvents.ResourceOpened, {
 				threadId,
 				messageId,
@@ -515,7 +495,7 @@ export default function ActionsSection({
 			targetModule: targetModuleForResource(resourceType),
 			resourceId,
 		});
-		history.push(path);
+		navigate(path);
 	};
 
 	const handleClick = (key: string, action: MessageActionDTO): void => {
@@ -576,7 +556,6 @@ export default function ActionsSection({
 					});
 				}
 				applyFilter(action, {
-					history,
 					pathname,
 					redirectWithQueryBuilderData,
 					handleSetQueryData,

frontend/src/container/AIAssistant/components/ActionsSection/utils/__tests__/openSavedView.test.ts

@@ -16,10 +16,10 @@ import {
 	SavedviewtypesSourceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
+import { navigate } from 'lib/router/navigation';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { DataSource } from 'types/common/queryBuilder';
-import type { History } from 'history';
 
 import {
 	buildExplorerNavigationUrl,
@@ -39,6 +39,9 @@ import {
 import { resourceRoute, ResourceType } from '../resourceRoute';
 
 jest.mock('api/generated/services/saved-view');
+jest.mock('lib/router/navigation', () => ({
+	navigate: jest.fn(),
+}));
 
 jest.mock(
 	'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi',
@@ -60,6 +63,7 @@ const mockedListSavedViews = listSavedViews as jest.MockedFunction<
 const mockedGetSavedView = getSavedView as jest.MockedFunction<
 	typeof getSavedView
 >;
+const mockedNavigate = navigate as jest.MockedFunction<typeof navigate>;
 
 function makeView(
 	id: string,
@@ -246,15 +250,17 @@ describe('buildExplorerNavigationUrl', () => {
 });
 
 describe('openSavedView', () => {
-	it('navigates with history.push and view query params', () => {
-		const push = jest.fn();
-		const history = { push } as unknown as History;
+	beforeEach(() => {
+		mockedNavigate.mockClear();
+	});
+
+	it('navigates with the view query params', () => {
 		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
 
-		openSavedView(view, history);
+		openSavedView(view);
 
-		expect(push).toHaveBeenCalledTimes(1);
-		const pushedUrl = push.mock.calls[0][0] as string;
+		expect(mockedNavigate).toHaveBeenCalledTimes(1);
+		const pushedUrl = mockedNavigate.mock.calls[0][0] as string;
 		expect(pushedUrl).toContain(ROUTES.LOGS_EXPLORER);
 		const params = new URLSearchParams(pushedUrl.split('?')[1]);
 		expect(params.get(QueryParams.viewKey)).toBe('"view-logs"');
@@ -266,18 +272,14 @@ describe('openSavedView', () => {
 		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
 		delete view.source;
 
-		expect(() =>
-			openSavedView(view, { push: jest.fn() } as unknown as History),
-		).toThrow('Unsupported saved view source');
+		expect(() => openSavedView(view)).toThrow('Unsupported saved view source');
 	});
 
 	it('throws when the view has no queries', () => {
 		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
 		view.spec.queries = [];
 
-		expect(() =>
-			openSavedView(view, { push: jest.fn() } as unknown as History),
-		).toThrow('Saved view is missing query data');
+		expect(() => openSavedView(view)).toThrow('Saved view is missing query data');
 	});
 });
 
@@ -285,44 +287,39 @@ describe('openSavedViewByKey', () => {
 	beforeEach(() => {
 		mockedListSavedViews.mockReset();
 		mockedGetSavedView.mockReset();
+		mockedNavigate.mockClear();
 	});
 
 	it('prefers the direct view lookup endpoint', async () => {
 		const view = makeView('view-logs', SavedviewtypesSourceDTO.logs);
 		mockedGetSavedView.mockResolvedValueOnce(mockViewByIdResponse(view));
-		const push = jest.fn();
-		const history = { push } as unknown as History;
 
-		await openSavedViewByKey('view-logs', DataSource.LOGS, history);
+		await openSavedViewByKey('view-logs', DataSource.LOGS);
 
 		expect(mockedGetSavedView).toHaveBeenCalledWith({ id: 'view-logs' });
 		expect(mockedListSavedViews).not.toHaveBeenCalled();
-		expect(push).toHaveBeenCalled();
+		expect(mockedNavigate).toHaveBeenCalled();
 	});
 
 	it('falls back to list probing when direct lookup fails', async () => {
 		const view = makeView('view-traces', SavedviewtypesSourceDTO.traces);
 		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
 		mockedListSavedViews.mockResolvedValueOnce(mockViewsResponse([view]));
-		const push = jest.fn();
-		const history = { push } as unknown as History;
 
-		await openSavedViewByKey('view-traces', DataSource.TRACES, history);
+		await openSavedViewByKey('view-traces', DataSource.TRACES);
 
 		expect(mockedListSavedViews).toHaveBeenCalledWith({
 			source: SavedviewtypesSourceDTO.traces,
 		});
-		expect(push).toHaveBeenCalled();
+		expect(mockedNavigate).toHaveBeenCalled();
 	});
 
 	it('throws when the saved view does not exist', async () => {
 		mockedGetSavedView.mockRejectedValueOnce(new Error('not found'));
 		mockedListSavedViews.mockResolvedValue(mockViewsResponse([]));
 
-		await expect(
-			openSavedViewByKey('missing', DataSource.LOGS, {
-				push: jest.fn(),
-			} as unknown as History),
-		).rejects.toThrow('Saved view not found');
+		await expect(openSavedViewByKey('missing', DataSource.LOGS)).rejects.toThrow(
+			'Saved view not found',
+		);
 	});
 });

frontend/src/container/AIAssistant/components/ActionsSection/utils/openSavedView.ts

@@ -10,9 +10,9 @@ import { findSavedView } from 'container/SavedViews/utils/findSavedView';
 import { getSavedViewQuery } from 'container/SavedViews/utils/getSavedViewQuery';
 import { toSavedViewSource } from 'container/SavedViews/utils/toSavedViewSource';
 import { SOURCEPAGE_VS_ROUTES } from 'container/SavedViews/constants';
+import { navigate } from 'lib/router/navigation';
 import { DataSource } from 'types/common/queryBuilder';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { History } from 'history';
 
 type SavedViewSourceHint = SavedViewSourcePage;
 
@@ -92,10 +92,7 @@ export function buildExplorerNavigationUrl(
 	return `${route}?${params.toString()}`;
 }
 
-export function openSavedView(
-	view: SavedviewtypesSavedViewDTO,
-	history: History,
-): void {
+export function openSavedView(view: SavedviewtypesSavedViewDTO): void {
 	const route = view.source ? explorerRouteForSourcePage(view.source) : null;
 	if (!route) {
 		throw new Error('Unsupported saved view source');
@@ -110,14 +107,13 @@ export function openSavedView(
 		[QueryParams.panelTypes]: view.spec.panelType as unknown as PANEL_TYPES,
 		[QueryParams.viewKey]: view.id,
 	});
-	history.push(url);
+	navigate(url);
 }
 
 export async function openSavedViewByKey(
 	viewKey: string,
 	sourceHint: SavedViewSourceHint | null | undefined,
-	history: History,
 ): Promise<void> {
 	const view = await loadSavedView(viewKey, sourceHint);
-	openSavedView(view, history);
+	openSavedView(view);
 }

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

@@ -298,7 +298,8 @@ export default function ChatInput({
 		(value: string, caret: number) => {
 			const beforeCaret = value.slice(0, caret);
 			const atIndex = beforeCaret.lastIndexOf('@');
-			if (atIndex < 0) {
+			// `@` only triggers at a word start, so words containing `@` stay plain text.
+			if (atIndex < 0 || /\S/.test(beforeCaret.charAt(atIndex - 1))) {
 				setIsContextPickerOpen(false);
 				setMentionRange(null);
 				return;

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.mention.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import ChatInput from '../ChatInput';
+
+function getComposer(): HTMLTextAreaElement {
+	return screen.getByPlaceholderText(/Ask anything/i) as HTMLTextAreaElement;
+}
+
+describe('ChatInput — @ mention trigger', () => {
+	it('opens the context picker when @ starts a word', async () => {
+		render(<ChatInput onSend={jest.fn()} />);
+
+		await userEvent.type(getComposer(), 'check @');
+
+		await expect(
+			screen.findByPlaceholderText(/search dashboards/i),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('keeps typing an email without opening the context picker', async () => {
+		render(<ChatInput onSend={jest.fn()} />);
+
+		await userEvent.type(getComposer(), 'mail user@example.com');
+
+		expect(getComposer()).toHaveValue('mail user@example.com');
+		expect(
+			screen.queryByPlaceholderText(/search dashboards/i),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -1,9 +1,9 @@
 import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { matchRoute } from 'lib/router/matchRoute';
 import { AlertListTabs } from 'pages/AlertList/types';
 import { NEW_PANEL_ID } from 'pages/DashboardPage/DashboardContainer/PanelEditor/newPanelRoute';
-import { matchPath } from 'react-router-dom';
 
 /**
  * Resolves the page the user is currently on into structured `MessageContext`
@@ -33,9 +33,10 @@ export function getAutoContexts(
 
 	// Panel editor (V2). `panel/new` has no widget id yet and the schema requires
 	// a non-empty `panel_edit.widgetId`, so it reports `panel_create` instead.
-	const panelEditorMatch = matchPath<{ dashboardId: string; panelId: string }>(
+	const panelEditorMatch = matchRoute<'dashboardId' | 'panelId'>(
 		pathname,
-		{ path: ROUTES.DASHBOARD_PANEL_EDITOR, exact: true },
+		ROUTES.DASHBOARD_PANEL_EDITOR,
+		{ exact: true },
 	);
 	if (panelEditorMatch) {
 		const { dashboardId, panelId } = panelEditorMatch.params;
@@ -55,8 +56,7 @@ export function getAutoContexts(
 	// Dashboard detail — `/dashboard/:dashboardId`. The `expandedWidgetId`
 	// query param signals the panel-fullscreen overlay; otherwise it's the
 	// plain dashboard view.
-	const dashboardMatch = matchPath<{ dashboardId: string }>(pathname, {
-		path: ROUTES.DASHBOARD,
+	const dashboardMatch = matchRoute<'dashboardId'>(pathname, ROUTES.DASHBOARD, {
 		exact: true,
 	});
 	if (dashboardMatch) {
@@ -89,7 +89,7 @@ export function getAutoContexts(
 	}
 
 	// Dashboard list — `/dashboard`.
-	if (matchPath(pathname, { path: ROUTES.ALL_DASHBOARD, exact: true })) {
+	if (matchRoute(pathname, ROUTES.ALL_DASHBOARD, { exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -106,8 +106,8 @@ export function getAutoContexts(
 	// or `/alerts/history?ruleId=…`. Mirrors dashboard_detail: resourceId is the
 	// rule id and shared metadata carries the URL time range when present.
 	if (
-		matchPath(pathname, { path: ROUTES.ALERT_OVERVIEW, exact: true }) ||
-		matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })
+		matchRoute(pathname, ROUTES.ALERT_OVERVIEW, { exact: true }) ||
+		matchRoute(pathname, ROUTES.ALERT_HISTORY, { exact: true })
 	) {
 		const ruleId = params.get(QueryParams.ruleId);
 		if (ruleId) {
@@ -129,7 +129,7 @@ export function getAutoContexts(
 	// Alert edit — `/alerts/edit?ruleId=…`. The form syncs its query-builder
 	// state to the URL (`useShareBuilderUrl`), so shared metadata carries the
 	// alert's query + time range, mirroring the dashboard panel editor.
-	if (matchPath(pathname, { path: ROUTES.EDIT_ALERTS, exact: true })) {
+	if (matchRoute(pathname, ROUTES.EDIT_ALERTS, { exact: true })) {
 		const ruleId = params.get(QueryParams.ruleId);
 		if (ruleId) {
 			return [
@@ -145,7 +145,7 @@ export function getAutoContexts(
 
 	// Alert new — `/alerts/new`. No rule id yet (draft), but the query-builder
 	// state is on the URL, so shared metadata carries the in-progress query.
-	if (matchPath(pathname, { path: ROUTES.ALERTS_NEW, exact: true })) {
+	if (matchRoute(pathname, ROUTES.ALERTS_NEW, { exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -157,7 +157,7 @@ export function getAutoContexts(
 	}
 
 	// Triggered-alerts index — `/alerts/history` without a rule id.
-	if (matchPath(pathname, { path: ROUTES.ALERT_HISTORY, exact: true })) {
+	if (matchRoute(pathname, ROUTES.ALERT_HISTORY, { exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -172,7 +172,7 @@ export function getAutoContexts(
 	}
 
 	// Alerts index — `/alerts` with tab query param (defaults to Alert Rules).
-	if (matchPath(pathname, { path: ROUTES.LIST_ALL_ALERT, exact: true })) {
+	if (matchRoute(pathname, ROUTES.LIST_ALL_ALERT, { exact: true })) {
 		const page = resolveAlertsIndexPage(params.get(QueryParams.tab));
 		return [
 			{
@@ -191,10 +191,10 @@ export function getAutoContexts(
 
 	// Service detail (covers sub-routes like top-level-operations) —
 	// `/services/:servicename[/...]`.
-	const serviceMatch = matchPath<{ servicename: string }>(pathname, {
-		path: ROUTES.SERVICE_METRICS,
-		exact: false,
-	});
+	const serviceMatch = matchRoute<'servicename'>(
+		pathname,
+		ROUTES.SERVICE_METRICS,
+	);
 	if (serviceMatch?.params.servicename) {
 		return [
 			{
@@ -210,7 +210,7 @@ export function getAutoContexts(
 	}
 
 	// Services list — `/services`.
-	if (matchPath(pathname, { path: ROUTES.APPLICATION, exact: true })) {
+	if (matchRoute(pathname, ROUTES.APPLICATION, { exact: true })) {
 		return [
 			{
 				source: 'auto',
@@ -226,7 +226,7 @@ export function getAutoContexts(
 
 	// ── Logs ──────────────────────────────────────────────────────────────────
 
-	if (matchPath(pathname, { path: ROUTES.LOGS_EXPLORER, exact: false })) {
+	if (matchRoute(pathname, ROUTES.LOGS_EXPLORER)) {
 		const activeLogId = params.get(QueryParams.activeLogId);
 		// `?activeLogId=…` indicates a log-detail panel is open. Per the
 		// schema, log_detail requires payload fields (timestamp, service,
@@ -251,8 +251,7 @@ export function getAutoContexts(
 
 	// Trace detail — `/trace/:id`. Treated as a detail-as-metadata page
 	// (resourceId null, `traceId` lives in metadata).
-	const traceMatch = matchPath<{ id: string }>(pathname, {
-		path: ROUTES.TRACE_DETAIL,
+	const traceMatch = matchRoute<'id'>(pathname, ROUTES.TRACE_DETAIL, {
 		exact: true,
 	});
 	if (traceMatch?.params.id) {
@@ -272,7 +271,7 @@ export function getAutoContexts(
 		];
 	}
 
-	if (matchPath(pathname, { path: ROUTES.TRACES_EXPLORER, exact: false })) {
+	if (matchRoute(pathname, ROUTES.TRACES_EXPLORER)) {
 		return [
 			{
 				source: 'auto',
@@ -289,9 +288,7 @@ export function getAutoContexts(
 	// ── Metrics ───────────────────────────────────────────────────────────────
 
 	// Metrics explorer — `/metrics-explorer` and sub-routes (summary, explorer).
-	if (
-		matchPath(pathname, { path: ROUTES.METRICS_EXPLORER_BASE, exact: false })
-	) {
+	if (matchRoute(pathname, ROUTES.METRICS_EXPLORER_BASE)) {
 		return [
 			{
 				source: 'auto',

frontend/src/container/AIAssistant/hooks/useAIAssistantAnalyticsContext.ts

@@ -1,6 +1,6 @@
-import { matchPath, useLocation } from 'react-router-dom';
-
 import ROUTES from 'constants/routes';
+import { matchRoute } from 'lib/router/matchRoute';
+import { useAppLocation } from 'lib/router/useAppLocation';
 
 import { useAIAssistantStore } from '../store/useAIAssistantStore';
 import { useVariant } from '../VariantContext';
@@ -28,7 +28,7 @@ const ROUTE_TEMPLATES = Object.values(ROUTES).sort(
 
 export function normalizePage(pathname: string): string {
 	for (const template of ROUTE_TEMPLATES) {
-		if (matchPath(pathname, { path: template, exact: true })) {
+		if (matchRoute(pathname, template, { exact: true })) {
 			return template;
 		}
 	}
@@ -46,7 +46,7 @@ export function normalizePage(pathname: string): string {
 export function useAIAssistantAnalyticsContext(
 	conversationId?: string,
 ): AIAssistantAnalyticsContext {
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const variant = useVariant();
 	const threadId = useAIAssistantStore((s) => {
 		const id = conversationId ?? s.activeConversationId;

frontend/src/container/AIAssistant/resolvePageType.ts

@@ -1,7 +1,7 @@
 import { PageTypeDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { matchPath } from 'react-router-dom';
+import { matchRoute } from 'lib/router/matchRoute';
 
 import { getAutoContexts } from './getAutoContexts';
 
@@ -45,15 +45,10 @@ export function resolvePageType(
 	// Pseudo-pages with no attachable resource: resolved straight from the
 	// route. They deliberately emit no auto-context chip (see `getAutoContexts`),
 	// so they can't be derived from `metadata.page` like the pages below.
-	if (matchPath(pathname, { path: ROUTES.HOME, exact: true })) {
+	if (matchRoute(pathname, ROUTES.HOME, { exact: true })) {
 		return PageTypeDTO.homepage;
 	}
-	if (
-		matchPath(pathname, {
-			path: ROUTES.INFRASTRUCTURE_MONITORING_BASE,
-			exact: false,
-		})
-	) {
+	if (matchRoute(pathname, ROUTES.INFRASTRUCTURE_MONITORING_BASE)) {
 		return PageTypeDTO.infra_entity_detail;
 	}
 

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { AppLink } from 'lib/router/AppLink';
 import { Color } from '@signozhq/design-tokens';
 import { Popover } from 'antd';
 import LogsIcon from 'assets/AlertHistory/LogsIcon';
@@ -26,7 +26,7 @@ function PopoverContent({
 	return (
 		<div className="contributor-row-popover-buttons">
 			{!!relatedLogsLink && (
-				<Link
+				<AppLink
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
 					data-testid="alert-popover-view-logs"
@@ -35,10 +35,10 @@ function PopoverContent({
 						<LogsIcon />
 					</div>
 					<div className="text">View Logs</div>
-				</Link>
+				</AppLink>
 			)}
 			{!!relatedTracesLink && (
-				<Link
+				<AppLink
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
 					data-testid="alert-popover-view-traces"
@@ -50,7 +50,7 @@ function PopoverContent({
 						/>
 					</div>
 					<div className="text">View Traces</div>
-				</Link>
+				</AppLink>
 			)}
 		</div>
 	);

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -1,9 +1,9 @@
 import { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import history from 'lib/history';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { navigate } from 'lib/router/navigation';
 import { ArrowRight } from '@signozhq/icons';
 
 import TopContributorsContent from './TopContributorsContent';
@@ -16,7 +16,7 @@ function TopContributorsCard({
 	topContributorsData,
 	totalCurrentTriggers,
 }: TopContributorsCardProps): JSX.Element {
-	const { search } = useLocation();
+	const { search } = useAppLocation();
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const viewAllTopContributorsParam = searchParams.get('viewAllTopContributors');
@@ -43,7 +43,7 @@ function TopContributorsCard({
 
 			return newState;
 		});
-		history.push({ search: searchParams.toString() });
+		navigate({ search: searchParams.toString() });
 	};
 
 	return (

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -7,7 +7,7 @@ import { QueryParams } from 'constants/query';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
 import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
@@ -103,7 +103,7 @@ function HorizontalTimelineGraph({
 								urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 								urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 
-								history.push({
+								navigate({
 									search: urlQuery.toString(),
 								});
 							}

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { TimelineFilter, TimelineTab } from 'container/AlertHistory/types';
-import history from 'lib/history';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { navigate } from 'lib/router/navigation';
 import { Info } from '@signozhq/icons';
 import Tabs2 from 'periscope/components/Tabs2';
 
@@ -42,7 +42,7 @@ function TimelineTabs(): JSX.Element {
 }
 
 function TimelineFilters(): JSX.Element {
-	const { search } = useLocation();
+	const { search } = useAppLocation();
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const initialSelectedTab = useMemo(
@@ -52,7 +52,7 @@ function TimelineFilters(): JSX.Element {
 
 	const handleFilter = (value: TimelineFilter): void => {
 		searchParams.set('timelineFilter', value);
-		history.push({ search: searchParams.toString() });
+		navigate({ search: searchParams.toString() });
 	};
 
 	const tabs = [

frontend/src/container/AllError/index.tsx

@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Link, useLocation } from 'react-router-dom';
+import { AppLink } from 'lib/router/AppLink';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Button, Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
 import { Search } from '@signozhq/icons';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
@@ -28,7 +29,7 @@ import {
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import { isUndefined } from 'lodash-es';
 import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
@@ -67,7 +68,7 @@ function AllErrors(): JSX.Element {
 	const { maxTime, minTime, loading } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const params = useUrlQuery();
 	const { t } = useTranslation(['common']);
 	const {
@@ -228,7 +229,9 @@ function AllErrors(): JSX.Element {
 					queryParams.serviceName = serviceFilterValue;
 				}
 
-				history.replace(`${pathname}?${createQueryParams(queryParams)}`);
+				navigate(`${pathname}?${createQueryParams(queryParams)}`, {
+					replace: true,
+				});
 				confirm();
 			},
 		[
@@ -336,13 +339,13 @@ function AllErrors(): JSX.Element {
 			...getFilter(onExceptionTypeFilter, 'Search By Exception', 'exceptionType'),
 			render: (value, record): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
-					<Link
+					<AppLink
 						to={`${ROUTES.ERROR_DETAIL}?groupId=${
 							record.groupID
 						}&timestamp=${getNanoSeconds(record.lastSeen)}`}
 					>
 						{value}
-					</Link>
+					</AppLink>
 				</Tooltip>
 			),
 			sorter: true,
@@ -438,7 +441,7 @@ function AllErrors(): JSX.Element {
 					exceptionType: getFilterString(params.get(urlKey.exceptionType)),
 				});
 				const compositeQuery = params.get(urlKey.compositeQuery) || '';
-				history.replace(
+				navigate(
 					`${pathname}?${createQueryParams({
 						order: updatedOrder,
 						offset: (current - 1) * pageSize,
@@ -448,6 +451,7 @@ function AllErrors(): JSX.Element {
 						serviceName,
 						compositeQuery,
 					})}`,
+					{ replace: true },
 				);
 			}
 		},

frontend/src/container/AllError/tests/AllError.test.tsx

@@ -1,6 +1,5 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider, useSelector } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ENVIRONMENT } from 'constants/env';
 import { server } from 'mocks-server/server';
@@ -8,6 +7,7 @@ import { rest } from 'msw';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
+import { TestRouter } from 'tests/router';
 
 import '@testing-library/jest-dom';
 
@@ -55,9 +55,9 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 	},
 } as any);
 
-function Exceptions({ initUrl }: { initUrl?: string[] }): JSX.Element {
+function Exceptions({ initUrl }: { initUrl?: string }): JSX.Element {
 	return (
-		<MemoryRouter initialEntries={initUrl ?? ['/exceptions']}>
+		<TestRouter initialRoute={initUrl ?? '/exceptions'}>
 			<TimezoneProvider>
 				<Provider store={store}>
 					<MockQueryClientProvider>
@@ -65,12 +65,12 @@ function Exceptions({ initUrl }: { initUrl?: string[] }): JSX.Element {
 					</MockQueryClientProvider>
 				</Provider>
 			</TimezoneProvider>
-		</MemoryRouter>
+		</TestRouter>
 	);
 }
 
 Exceptions.defaultProps = {
-	initUrl: ['/exceptions'],
+	initUrl: '/exceptions',
 };
 
 const BASE_URL = ENVIRONMENT.baseURL;
@@ -130,7 +130,7 @@ describe('Exceptions - All Errors', () => {
 	});
 
 	it('should call useQueries with exact composite query object', async () => {
-		render(<Exceptions initUrl={[INIT_URL_WITH_COMMON_QUERY]} />);
+		render(<Exceptions initUrl={INIT_URL_WITH_COMMON_QUERY} />);
 		await screen.findByText(/redis timeout/i);
 		expect(postListErrorsSpy).toHaveBeenCalledWith(
 			expect.objectContaining({
@@ -143,11 +143,7 @@ describe('Exceptions - All Errors', () => {
 		it('should navigate to page 2 when pageSize=100 and clicking next', async () => {
 			// Arrange: start with pageSize=100 and offset=0
 			render(
-				<Exceptions
-					initUrl={[
-						`/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName`,
-					]}
-				/>,
+				<Exceptions initUrl="/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName" />,
 			);
 
 			// Wait for initial load
@@ -171,11 +167,7 @@ describe('Exceptions - All Errors', () => {
 		it('initializes current page from URL (offset/pageSize)', async () => {
 			// offset=100, pageSize=100 => current page should be 2
 			render(
-				<Exceptions
-					initUrl={[
-						`/exceptions?pageSize=100&offset=100&order=ascending&orderParam=serviceName`,
-					]}
-				/>,
+				<Exceptions initUrl="/exceptions?pageSize=100&offset=100&order=ascending&orderParam=serviceName" />,
 			);
 			await screen.findByText(/redis timeout/i);
 			const activeItem = document.querySelector('.ant-pagination-item-active');
@@ -188,11 +180,7 @@ describe('Exceptions - All Errors', () => {
 		it('clicking a numbered page updates offset correctly', async () => {
 			// pageSize=100, click page 3 => offset = 200
 			render(
-				<Exceptions
-					initUrl={[
-						`/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName`,
-					]}
-				/>,
+				<Exceptions initUrl="/exceptions?pageSize=100&offset=0&order=ascending&orderParam=serviceName" />,
 			);
 			await screen.findByText(/redis timeout/i);
 			const page3Item = screen.getByTitle('3');

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

@@ -4,16 +4,14 @@ import {
 	getApiMonitoringParams,
 	setApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
+import { mockNavigate } from 'tests/router-mocks';
 
-// Mock react-router-dom hooks
-jest.mock('react-router-dom', () => {
-	const originalModule = jest.requireActual('react-router-dom');
-	return {
-		...originalModule,
-		useLocation: jest.fn(),
-		useHistory: jest.fn(),
-	};
-});
+const navigateSpy = mockNavigate();
+
+function navigatedSearch(): string | undefined {
+	const [to] = navigateSpy.mock.calls[0];
+	return typeof to === 'string' ? to : to.search;
+}
 
 describe('API Monitoring Query Params', () => {
 	describe('getApiMonitoringParams', () => {
@@ -58,25 +56,21 @@ describe('API Monitoring Query Params', () => {
 
 	describe('setApiMonitoringParams', () => {
 		it('updates URL with new params (push mode)', () => {
-			const history = {
-				push: jest.fn(),
-				replace: jest.fn(),
-			};
 			const search = '';
 			const newParams: Partial<ApiMonitoringParams> = {
 				showIP: false,
 				selectedDomain: 'updated-domain',
 			};
 
-			setApiMonitoringParams(newParams, search, history as any, false);
+			setApiMonitoringParams(newParams, search, false);
 
-			expect(history.push).toHaveBeenCalledWith({
-				search: expect.stringContaining('apiMonitoringParams'),
-			});
-			expect(history.replace).not.toHaveBeenCalled();
+			expect(navigateSpy).toHaveBeenCalledWith(
+				{ search: expect.stringContaining('apiMonitoringParams') },
+				{ replace: false },
+			);
 
 			// Verify that the search string contains the expected encoded params
-			const searchArg = history.push.mock.calls[0][0].search;
+			const searchArg = navigatedSearch();
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),
@@ -88,30 +82,21 @@ describe('API Monitoring Query Params', () => {
 		});
 
 		it('updates URL with new params (replace mode)', () => {
-			const history = {
-				push: jest.fn(),
-				replace: jest.fn(),
-			};
 			const search = '';
 			const newParams: Partial<ApiMonitoringParams> = {
 				showIP: false,
 				selectedDomain: 'updated-domain',
 			};
 
-			setApiMonitoringParams(newParams, search, history as any, true);
+			setApiMonitoringParams(newParams, search, true);
 
-			expect(history.replace).toHaveBeenCalledWith({
-				search: expect.stringContaining('apiMonitoringParams'),
-			});
-			expect(history.push).not.toHaveBeenCalled();
+			expect(navigateSpy).toHaveBeenCalledWith(
+				{ search: expect.stringContaining('apiMonitoringParams') },
+				{ replace: true },
+			);
 		});
 
 		it('merges new params with existing params', () => {
-			const history = {
-				push: jest.fn(),
-				replace: jest.fn(),
-			};
-
 			// Start with some existing params
 			const existingParams: Partial<ApiMonitoringParams> = {
 				showIP: true,
@@ -132,10 +117,10 @@ describe('API Monitoring Query Params', () => {
 				selectedEndPointName: '/api/test',
 			};
 
-			setApiMonitoringParams(newParams, search, history as any, false);
+			setApiMonitoringParams(newParams, search, false);
 
 			// Verify merged params
-			const searchArg = history.push.mock.calls[0][0].search;
+			const searchArg = navigatedSearch();
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),
@@ -161,27 +146,7 @@ describe('API Monitoring Query Params', () => {
 				state: null,
 			};
 
-			// Create mock history object
-			const history = {
-				push: jest.fn((args) => {
-					// Simulate updating the location search
-					location.search = args.search;
-				}),
-				replace: jest.fn((args) => {
-					location.search = args.search;
-				}),
-				length: 1,
-				location,
-			};
-
-			// Set up mocks for useLocation and useHistory
-			const useLocationMock = jest.requireMock('react-router-dom').useLocation;
-			const useHistoryMock = jest.requireMock('react-router-dom').useHistory;
-
-			useLocationMock.mockReturnValue(location);
-			useHistoryMock.mockReturnValue(history);
-
-			return { location, history };
+			return { location };
 		};
 
 		it('retrieves URL params correctly from location', () => {
@@ -207,7 +172,7 @@ describe('API Monitoring Query Params', () => {
 		});
 
 		it('updates URL correctly with new params', () => {
-			const { location, history } = mockUseLocationAndHistory();
+			const { location } = mockUseLocationAndHistory();
 
 			const newParams: Partial<ApiMonitoringParams> = {
 				selectedDomain: 'new-domain',
@@ -215,13 +180,14 @@ describe('API Monitoring Query Params', () => {
 			};
 
 			// Manually execute the core logic of the hook's setParams function
-			setApiMonitoringParams(newParams, location.search, history as any);
+			setApiMonitoringParams(newParams, location.search);
 
-			expect(history.push).toHaveBeenCalledWith({
-				search: expect.stringContaining('apiMonitoringParams'),
-			});
+			expect(navigateSpy).toHaveBeenCalledWith(
+				{ search: expect.stringContaining('apiMonitoringParams') },
+				{ replace: false },
+			);
 
-			const searchArg = history.push.mock.calls[0][0].search;
+			const searchArg = navigatedSearch();
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),
@@ -247,20 +213,16 @@ describe('API Monitoring Query Params', () => {
 			const initialSearch = `?${urlParams.toString()}`;
 
 			// Set up mocks
-			const { location, history } = mockUseLocationAndHistory(initialSearch);
+			const { location } = mockUseLocationAndHistory(initialSearch);
 
 			// Manually execute the core logic
-			setApiMonitoringParams(
-				{ selectedView: 'new-view' },
-				location.search,
-				history as any,
-			);
+			setApiMonitoringParams({ selectedView: 'new-view' }, location.search);
 
 			// Verify history was updated
-			expect(history.push).toHaveBeenCalled();
+			expect(navigateSpy).toHaveBeenCalled();
 
 			// Parse the new query params from the URL
-			const searchArg = history.push.mock.calls[0][0].search;
+			const searchArg = navigatedSearch();
 			const params = new URLSearchParams(searchArg);
 			const decoded = JSON.parse(
 				decodeURIComponent(params.get('apiMonitoringParams') || ''),

frontend/src/container/ApiMonitoring/queryParams.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { navigate } from 'lib/router/navigation';
 
 // --- Types for all API Monitoring query params ---
 export interface ApiMonitoringParams {
@@ -55,7 +56,6 @@ export function getApiMonitoringParams(search: string): ApiMonitoringParams {
 export function setApiMonitoringParams(
 	newParams: Partial<ApiMonitoringParams>,
 	search: string,
-	history: ReturnType<typeof useHistory>,
 	replace = false,
 ): void {
 	const urlParams = new URLSearchParams(search);
@@ -63,11 +63,7 @@ export function setApiMonitoringParams(
 	const merged = { ...current, ...newParams };
 	urlParams.set(PARAM_KEY, encodeParams(merged));
 	const newSearch = `?${urlParams.toString()}`;
-	if (replace) {
-		history.replace({ search: newSearch });
-	} else {
-		history.push({ search: newSearch });
-	}
+	navigate({ search: newSearch }, { replace });
 }
 
 // --- React hook to use query params in a component ---
@@ -75,15 +71,14 @@ export function useApiMonitoringParams(): [
 	ApiMonitoringParams,
 	(newParams: Partial<ApiMonitoringParams>, replace?: boolean) => void,
 ] {
-	const location = useLocation();
-	const history = useHistory();
+	const location = useAppLocation();
 	const params = getApiMonitoringParams(location.search);
 
 	const setParams = useCallback(
 		(newParams: Partial<ApiMonitoringParams>, replace = false) => {
-			setApiMonitoringParams(newParams, location.search, history, replace);
+			setApiMonitoringParams(newParams, location.search, replace);
 		},
-		[location.search, history],
+		[location.search],
 	);
 
 	return [params, setParams];

frontend/src/container/AppLayout/index.tsx

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import * as Sentry from '@sentry/react';
 import { Toaster } from '@signozhq/ui/sonner';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
@@ -51,7 +51,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
 import useTabVisibility from 'hooks/useTabFocus';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useAppContext } from 'providers/App/App';
@@ -190,7 +190,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const isDarkMode = useIsDarkMode();
 
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const { t } = useTranslation(['titles']);
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
@@ -464,7 +464,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [isLoggedIn]);
 
 	const handleUpgrade = useCallback((): void => {
-		history.push(ROUTES.BILLING);
+		navigate(ROUTES.BILLING);
 	}, []);
 
 	const handleFailedPayment = useCallback((): void => {

frontend/src/container/BillingContainer/CancelSubscriptionBanner.test.tsx

@@ -9,8 +9,7 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 
 jest.mock('utils/basePath', () => ({
-	getBasePath: (): string => '/',
-	withBasePath: (path: string): string => path,
+	...jest.requireActual('utils/basePath'),
 	getAbsoluteUrl: (path: string): string => `https://test.signoz.io${path}`,
 	getBaseUrl: (): string => 'https://test.signoz.io',
 }));

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

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
@@ -16,6 +15,7 @@ import {
 	useAIAssistantStore,
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import ROUTES from 'constants/routes';
 import { Dot } from '@signozhq/icons';
 
@@ -30,7 +30,7 @@ import styles from './AskNoz.module.scss';
  * hiding the header button would remove a notification rather than move it.
  */
 function AskNoz(): JSX.Element | null {
-	const { pathname } = useLocation();
+	const { pathname } = useAppLocation();
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
 	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -6,18 +6,6 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_TO_TITLE, ALERT_TYPE_URL_MAP } from './constants';
 
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: '',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
 jest
 	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
 	.mockReturnValue({

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -1,4 +1,3 @@
-import { MemoryRouter, Route } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
 import CreateAlertPage from 'pages/CreateAlert';
@@ -7,27 +6,6 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_URL_MAP } from './constants';
 
-// The setup guide button only exists in the classic form.
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string; search: string } => ({
-		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALERTS_NEW}`,
-		search: 'ruleType=anomaly_rule&showClassicCreateAlertsPage=true',
-	}),
-}));
-
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: 'ruleType=anomaly_rule&showClassicCreateAlertsPage=true',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({
@@ -59,13 +37,10 @@ describe('Anomaly Alert Documentation Redirection', () => {
 	});
 
 	it('should handle anomaly alert documentation redirection correctly', () => {
-		const { getByRole } = render(
-			<MemoryRouter initialEntries={['/alerts/new']}>
-				<Route path={ROUTES.ALERTS_NEW}>
-					<CreateAlertPage />
-				</Route>
-			</MemoryRouter>,
-		);
+		// The setup guide button only exists in the classic form.
+		const { getByRole } = render(<CreateAlertPage />, undefined, {
+			initialRoute: `${ROUTES.ALERTS_NEW}?ruleType=anomaly_rule&showClassicCreateAlertsPage=true`,
+		});
 
 		const alertType = AlertTypes.ANOMALY_BASED_ALERT;
 

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

@@ -16,18 +16,6 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import CreateAlertRule from '../index';
 
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: '',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
 jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
 	__esModule: true,
 	default: function MockDateTimeSelector(): JSX.Element {

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { TestRouter } from 'tests/router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 
@@ -129,13 +129,13 @@ const createTestQueryClient = (): QueryClient =>
 const renderAlertThreshold = (): ReturnType<typeof render> => {
 	const queryClient = createTestQueryClient();
 	return render(
-		<MemoryRouter>
+		<TestRouter>
 			<QueryClientProvider client={queryClient}>
 				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 					<AlertThreshold {...mockProps} />
 				</CreateAlertProvider>
 			</QueryClientProvider>
-		</MemoryRouter>,
+		</TestRouter>,
 	);
 };
 

frontend/src/container/CreateAlertV2/CreateAlertHeader/__tests__/CreateAlertHeader.test.tsx

@@ -4,6 +4,7 @@ import ROUTES from 'constants/routes';
 import { defaultPostableAlertRuleV2 } from 'container/CreateAlertV2/constants';
 import { getCreateAlertLocalStateFromAlertDef } from 'container/CreateAlertV2/utils';
 import * as useSafeNavigateHook from 'hooks/useSafeNavigate';
+import { mockAppLocation } from 'tests/router-mocks';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import * as rulesHook from '../../../../api/generated/services/rules';
@@ -42,12 +43,7 @@ jest.mock('uplot', () => {
 	};
 });
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { search: string } => ({
-		search: '',
-	}),
-}));
+mockAppLocation({ search: '' });
 
 const ENTER_ALERT_RULE_NAME_PLACEHOLDER = 'Enter alert rule name';
 

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -41,7 +41,7 @@ function ChartPreview({
 
 	const yAxisUnit = alertState.yAxisUnit || '';
 
-	const location = useLocation();
+	const location = useAppLocation();
 	const yAxisUnitFromURL = new URLSearchParams(location.search).get(
 		QueryParams.yAxisUnit,
 	);

frontend/src/container/CreateAlertV2/QuerySection/__tests__/ChartPreview.test.tsx

@@ -1,7 +1,6 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
@@ -10,6 +9,7 @@ import {
 } from 'container/CreateAlertV2/context/constants';
 import { buildInitialAlertDef } from 'container/CreateAlertV2/context/utils';
 import store from 'store';
+import { TestRouter } from 'tests/router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { EQueryType } from 'types/common/dashboard';
 
@@ -130,11 +130,11 @@ const renderChartPreview = (): ReturnType<typeof render> =>
 	render(
 		<Provider store={store}>
 			<QueryClientProvider client={queryClient}>
-				<MemoryRouter>
+				<TestRouter>
 					<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 						<ChartPreview alertDef={mockAlertDef} />
 					</CreateAlertProvider>
-				</MemoryRouter>
+				</TestRouter>
 			</QueryClientProvider>
 		</Provider>,
 	);

frontend/src/container/CreateAlertV2/QuerySection/__tests__/QuerySection.test.tsx

@@ -1,7 +1,6 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { QueryParams } from 'constants/query';
@@ -11,6 +10,7 @@ import {
 } from 'constants/queryBuilder';
 import { AlertDetectionTypes } from 'container/FormAlertRules';
 import store from 'store';
+import { TestRouter } from 'tests/router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
@@ -133,11 +133,11 @@ const renderQuerySection = (search = ''): ReturnType<typeof render> =>
 	render(
 		<Provider store={store}>
 			<QueryClientProvider client={queryClient}>
-				<MemoryRouter initialEntries={[`/alerts/new${search}`]}>
+				<TestRouter initialRoute={`/alerts/new${search}`}>
 					<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
 						<QuerySection />
 					</CreateAlertProvider>
-				</MemoryRouter>
+				</TestRouter>
 			</QueryClientProvider>
 		</Provider>,
 	);
@@ -427,11 +427,11 @@ describe('QuerySection', () => {
 		render(
 			<Provider store={store}>
 				<QueryClientProvider client={queryClient}>
-					<MemoryRouter>
+					<TestRouter>
 						<CreateAlertProvider initialAlertType={AlertTypes.LOGS_BASED_ALERT}>
 							<QuerySection />
 						</CreateAlertProvider>
-					</MemoryRouter>
+					</TestRouter>
 				</QueryClientProvider>
 			</Provider>,
 		);
@@ -481,11 +481,11 @@ describe('QuerySection', () => {
 		render(
 			<Provider store={store}>
 				<QueryClientProvider client={queryClient}>
-					<MemoryRouter>
+					<TestRouter>
 						<CreateAlertProvider initialAlertType={AlertTypes.TRACES_BASED_ALERT}>
 							<QuerySection />
 						</CreateAlertProvider>
-					</MemoryRouter>
+					</TestRouter>
 				</QueryClientProvider>
 			</Provider>,
 		);

frontend/src/container/CreateAlertV2/context/__tests__/CreateAlertProvider.prefill.test.tsx

@@ -1,4 +1,4 @@
-import { useHistory } from 'react-router-dom';
+import { navigate } from 'lib/router/navigation';
 import { render, screen, userEvent } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
@@ -125,12 +125,11 @@ function SearchMutator({
 }: {
 	to?: string;
 }): JSX.Element {
-	const routerHistory = useHistory();
 	return (
 		<button
 			type="button"
 			data-testid="mutate-search"
-			onClick={(): void => routerHistory.replace(to)}
+			onClick={(): void => navigate(to, { replace: true })}
 		>
 			change search
 		</button>

frontend/src/container/CreateAlertV2/context/index.tsx

@@ -10,7 +10,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import {
 	useCreateRule,
 	useTestRule,
@@ -129,7 +129,7 @@ export function CreateAlertProvider(
 		[setCreateAlertState],
 	);
 
-	const location = useLocation();
+	const location = useAppLocation();
 	const queryParams = new URLSearchParams(location.search);
 	const ruleNameFromURL = queryParams.get(QueryParams.ruleName);
 	const yAxisUnitFromURL = queryParams.get(QueryParams.yAxisUnit);

frontend/src/container/ErrorDetails/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Button, Space } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
@@ -13,7 +13,7 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getNanoSeconds } from 'container/AllError/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import { isUndefined } from 'lodash-es';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useTimezone } from 'providers/Timezone';
@@ -29,7 +29,7 @@ import './styles.scss';
 function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 	const { idPayload } = props;
 	const { t } = useTranslation(['errorDetails', 'common']);
-	const { search, pathname } = useLocation();
+	const { search, pathname } = useAppLocation();
 
 	const params = useMemo(() => new URLSearchParams(search), [search]);
 
@@ -100,7 +100,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				errorId: id,
 			};
 
-			history.replace(`${pathname}?${createQueryParams(queryParams)}`);
+			navigate(`${pathname}?${createQueryParams(queryParams)}`, { replace: true });
 		} catch (error) {
 			notifications.error({
 				message: t('something_went_wrong'),
@@ -126,7 +126,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 		if (isModifierKeyPressed(event)) {
 			openInNewTab(path);
 		} else {
-			history.push(path);
+			navigate(path);
 		}
 	};
 

frontend/src/container/ExplorerActions/CreateAlertButton.tsx

@@ -1,9 +1,9 @@
-import { useHistory } from 'react-router-dom';
 import { ConciergeBell } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useAppNavigate } from 'lib/router/useAppNavigate';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -22,7 +22,7 @@ function CreateAlertButton({
 	sourcepage: DataSource;
 	isOneChartPerQuery?: boolean;
 }): JSX.Element {
-	const history = useHistory();
+	const navigate = useAppNavigate();
 	const { panelType } = useQueryBuilder();
 
 	const createAlert = (): void => {
@@ -33,7 +33,7 @@ function CreateAlertButton({
 			EXPLORER_ACTION_EVENTS[sourcepage].createAlert,
 			getExplorerActionEventPayload({ sourcepage, panelType, isOneChartPerQuery }),
 		);
-		history.push(getCreateAlertLink({ query, panelType }));
+		navigate(getCreateAlertLink({ query, panelType }));
 	};
 
 	return isOneChartPerQuery ? (

frontend/src/container/ExplorerActions/__tests__/CreateAlertButton.test.tsx

@@ -1,4 +1,3 @@
-import { useHistory } from 'react-router-dom';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -9,16 +8,13 @@ import {
 } from 'container/LogsExplorerViews/explorerUtils';
 import { getQueryByPanelType as getTracesQueryByPanelType } from 'container/TracesExplorer/explorerUtils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { mockAppNavigate } from 'tests/router-mocks';
 import { render, screen, userEvent } from 'tests/test-utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import CreateAlertButton from '../CreateAlertButton';
 
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useHistory: jest.fn(),
-}));
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
@@ -27,8 +23,7 @@ jest.mock('api/common/logEvent', () => ({
 	default: jest.fn(() => Promise.resolve()),
 }));
 
-const mockPush = jest.fn();
-const mockedUseHistory = jest.mocked(useHistory);
+const mockedNavigate = mockAppNavigate();
 const mockedUseQueryBuilder = jest.mocked(useQueryBuilder);
 const mockedLogEvent = jest.mocked(logEvent);
 
@@ -61,8 +56,8 @@ function stagedQuery(
 }
 
 function pushedQuery(): Query {
-	expect(mockPush).toHaveBeenCalledTimes(1);
-	const [path, search] = (mockPush.mock.calls[0][0] as string).split('?');
+	expect(mockedNavigate).toHaveBeenCalledTimes(1);
+	const [path, search] = (mockedNavigate.mock.calls[0][0] as string).split('?');
 	expect(path).toBe(ROUTES.ALERTS_NEW);
 	const raw = new URLSearchParams(search).get(QueryParams.compositeQuery);
 	return JSON.parse(raw as string);
@@ -86,11 +81,8 @@ async function clickCreateAlert(
 
 describe('CreateAlertButton', () => {
 	beforeEach(() => {
-		mockPush.mockReset();
+		mockedNavigate.mockReset();
 		mockedLogEvent.mockClear();
-		mockedUseHistory.mockReturnValue({ push: mockPush } as unknown as ReturnType<
-			typeof useHistory
-		>);
 	});
 
 	it('is disabled and does nothing without a query', async () => {
@@ -100,7 +92,7 @@ describe('CreateAlertButton', () => {
 			'aria-disabled',
 			'true',
 		);
-		expect(mockPush).not.toHaveBeenCalled();
+		expect(mockedNavigate).not.toHaveBeenCalled();
 	});
 
 	it("logs the explorer's own create alert event", async () => {

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

@@ -1,5 +1,5 @@
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import {
 	createErrorResponse,
 	handleInternalServerError,
@@ -12,19 +12,12 @@ import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
 import ForgotPassword, { ForgotPasswordRouteState } from '../index';
 
 // Mock dependencies
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: {
-			search: '',
-		},
-	},
+jest.mock('lib/router/navigation', () => ({
+	...jest.requireActual('lib/router/navigation'),
+	navigate: jest.fn(),
 }));
 
-const mockHistoryPush = history.push as jest.MockedFunction<
-	typeof history.push
->;
+const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
 
 const FORGOT_PASSWORD_ENDPOINT = '*/api/v2/factor_password/forgot';
 
@@ -236,7 +229,7 @@ describe('ForgotPassword Component', () => {
 			const backToLoginButton = screen.getByTestId('back-to-login');
 			await user.click(backToLoginButton);
 
-			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+			expect(mockNavigate).toHaveBeenCalledWith(ROUTES.LOGIN);
 		});
 	});
 
@@ -328,7 +321,7 @@ describe('ForgotPassword Component', () => {
 			const backButton = screen.getByTestId('forgot-password-back');
 			await user.click(backButton);
 
-			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+			expect(mockNavigate).toHaveBeenCalledWith(ROUTES.LOGIN);
 		});
 	});
 

frontend/src/container/ForgotPassword/index.tsx

@@ -7,7 +7,7 @@ import { ErrorResponseHandlerForGeneratedAPIs } from 'api/ErrorResponseHandlerFo
 import { useForgotPassword } from 'api/generated/services/users';
 import AuthError from 'components/AuthError/AuthError';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import APIError from 'types/api/error';
 import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
 import { getBaseUrl } from 'utils/basePath';
@@ -108,7 +108,7 @@ function ForgotPassword({
 	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);
 
 	const handleBackToLogin = useCallback((): void => {
-		history.push(ROUTES.LOGIN);
+		navigate(ROUTES.LOGIN);
 	}, []);
 
 	// Success screen

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
@@ -28,7 +28,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
-import history from 'lib/history';
+import { navigate } from 'lib/router/navigation';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { isEmpty } from 'lodash-es';
 import { useIsAnomalyDetectionAvailable } from 'container/CreateAlertV2/useIsAnomalyDetectionAvailable';
@@ -223,7 +223,7 @@ function ChartPreview({
 
 	const isDarkMode = useIsDarkMode();
 	const urlQuery = useUrlQuery();
-	const location = useLocation();
+	const location = useAppLocation();
 
 	const optionName =
 		getFormatNameByOptionId(alertDef?.condition.targetUnit || '') || '';
@@ -245,7 +245,7 @@ function ChartPreview({
 			urlQuery.set(QueryParams.startTime, minTime.toString());
 			urlQuery.set(QueryParams.endTime, maxTime.toString());
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			navigate(generatedUrl);
 		},
 		[dispatch, location.pathname, urlQuery],
 	);

frontend/src/container/FormAlertRules/__tests__/usePrefillAlertConditions.test.ts

@@ -15,7 +15,7 @@ const TEST_MAPPINGS = {
 	},
 };
 
-jest.mock('react-router-dom-v5-compat', () => {
+jest.mock('lib/router/useAppLocation', () => {
 	const mockThreshold1 = {
 		index: '0d11f426-a02e-48da-867c-b79c6ef1ff06',
 		isEditEnabled: false,
@@ -43,8 +43,7 @@ jest.mock('react-router-dom-v5-compat', () => {
 		thresholdValue: 900,
 	};
 	return {
-		...jest.requireActual('react-router-dom-v5-compat'),
-		useLocation: jest.fn().mockReturnValue({
+		useAppLocation: jest.fn().mockReturnValue({
 			state: {
 				thresholds: [mockThreshold1, mockThreshold2],
 			},

frontend/src/container/FormAlertRules/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { BellDot, CircleAlert, ExternalLink, Save } from '@signozhq/icons';
 import { Button, FormInstance, SelectProps } from 'antd';
 import { ConfirmDialog } from '@signozhq/ui/dialog';
@@ -107,7 +107,7 @@ function FormAlertRules({
 	>((state) => state.globalTime);
 
 	const urlQuery = useUrlQuery();
-	const location = useLocation();
+	const location = useAppLocation();
 	const queryParams = new URLSearchParams(location.search);
 
 	const dataSource = useMemo(