Merge branch 'main' into nv/exec-stats

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description


https://app.notion.com/p/signoz/Dividing-Cache-Buckets-into-Cells-3fcfcc6bcd19819db159d2f7322c2dd6?source=copy_link

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

Closes https://github.com/SigNoz/pulse-pod/issues/527

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

@@ -150,18 +150,6 @@ Note: no cleanup code (the `dashboards` driver deletes its seed), no raw locator
 - **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.
 
-# Timing traps
-
-Each of these passes alone and flakes under parallel CI load. Handle them inside the driver action.
-
-- **Wait for the request the action started.** A `waitForResponse` registered after the click, or matching any in-flight request, can resolve on an earlier one. Register `page.waitForRequest(...)` before the action, then await its `response()`.
-- **Let React commit before a shortcut.** A keyboard shortcut (e.g. Cmd+Enter) pressed right after typing can read the previous state. Wait two animation frames (`requestAnimationFrame` twice in `page.evaluate`) before pressing it.
-- **Typing before the first load is lost.** Pages that reset inputs when their initial data lands wipe early keystrokes. The `open` action waits for the page's first data request.
-- **A cache hit fires nothing.** When a page already fetched on an earlier edit, the next Run may be served from the React Query cache. After one Run, assert the page shows the expected result and the last request sent carries the edit. Don't wait for a fresh request that may not come, and don't click Run repeatedly: that hides a first click sending stale values.
-- **Open autocomplete explicitly.** Suggestions that appear on focus or typing arrive late under load. Trigger them (e.g. Ctrl+Space) and wait for the option.
-- **antd dropdowns render in a portal.** A Select's options are not inside the Select. Scope to that Select's own open dropdown, and assert the chosen value on `.ant-select-selection-item`.
-- **Split long scenarios.** A test chaining many reloads or edits nears the timeout under load. Split it.
-
 # Quality bar
 
 - Every test runs end-to-end against a fresh stack. If you can't run it green from a fresh `test_setup`, it's not done.

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

@@ -28,7 +28,7 @@ Don't try to start the stack yourself — it can take ~4 minutes on a cold build
    - `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 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. A test green alone but red with `CI=1` is usually one of the generator's [timing traps](playwright-test-generator.md#timing-traps).
+   - **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 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.

.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

@@ -4224,6 +4224,13 @@ components:
           nullable: true
           type: number
       type: object
+    DashboardtypesAxisScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -5250,6 +5257,7 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
+          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -5265,6 +5273,7 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -5278,6 +5287,7 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
+      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -5384,6 +5394,21 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
+      properties:
+        kind:
+          description: The panel kind.
+          enum:
+          - signoz/ScatterPlotPanel
+          type: string
+        spec:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
+          description: The options for this panel kind. {} accepts every default.
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -5494,6 +5519,16 @@ components:
           - $ref: '#/components/schemas/DashboardtypesBasicVisualization'
           description: The time range the slices are computed over.
       type: object
+    DashboardtypesPointDiameter:
+      maximum: 40
+      minimum: 2
+      nullable: true
+      type: integer
+    DashboardtypesPointOpacity:
+      maximum: 1
+      minimum: 0.1
+      nullable: true
+      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -5748,6 +5783,161 @@ components:
       required:
       - queryValue
       type: object
+    DashboardtypesScatterPlotAxes:
+      properties:
+        x:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+          description: The axis dimensions.x is plotted along.
+        "y":
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
+          description: The axis dimensions.y is plotted along.
+      type: object
+    DashboardtypesScatterPlotAxis:
+      properties:
+        label:
+          description: Axis title. Empty draws none; the tooltip still names the column.
+          type: string
+        scale:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesAxisScale'
+          description: auto (default) uses log, or symlog when values include zero
+            or negatives, when that spreads the dots clearly more than linear does;
+            otherwise linear. log cannot place a value at or below zero and leaves
+            that dot out; symlog is log-like but places it.
+        softMax:
+          description: The highest value the axis always shows; data above it still
+            extends the axis, as does a threshold on it. Null fits the data.
+          nullable: true
+          type: number
+        softMin:
+          description: The lowest value the axis always shows; data below it still
+            extends the axis, as does a threshold on it. Null fits the data. A log
+            axis ignores a bound at or below zero.
+          nullable: true
+          type: number
+      type: object
+    DashboardtypesScatterPlotChartAppearance:
+      properties:
+        points:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
+          description: Dot size and opacity.
+      type: object
+    DashboardtypesScatterPlotDimensions:
+      properties:
+        colorBy:
+          description: Group-by label names (e.g. k8s.namespace.name) whose combined
+            values color the dots and drive the legend. Empty colors by every group-by
+            label.
+          items:
+            type: string
+          nullable: true
+          type: array
+        sizeBy:
+          description: Value column key that scales each dot's area between chartAppearance.points.minSize
+            and maxSize. Empty draws every dot at chartAppearance.points.size, as
+            does a dot with no value.
+          type: string
+        x:
+          description: Value column key (queryName, or queryName.expression for a
+            multi-aggregation query) plotted on the x axis. Empty, or a key the result
+            lacks, uses the first value column.
+          type: string
+        "y":
+          description: Value column key plotted on the y axis. Empty, or a key the
+            result lacks, uses the first value column x does not use.
+          type: string
+      type: object
+    DashboardtypesScatterPlotPanelSpec:
+      properties:
+        axes:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
+          description: Title, bounds and scale of each axis.
+        chartAppearance:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
+          description: Dot drawing options.
+        dimensions:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
+          description: 'Which result columns place, size and color the dots. Each
+            dot is one row of the joined scalar result: one group.'
+        formatting:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesTableFormatting'
+          description: Per-column units and decimal precision. The x and y columns'
+            units label their axes; every bound column's unit shows in the tooltip.
+        legend:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesLegend'
+          description: Legend placement and series colors. A series is one color group,
+            labeled by its colorBy values joined with a comma, or All when nothing
+            is grouped.
+        thresholds:
+          description: Reference lines drawn at fixed values across the x or y axis.
+          items:
+            $ref: '#/components/schemas/DashboardtypesScatterPlotThreshold'
+          nullable: true
+          type: array
+        visualization:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+          description: The time range the groups are computed over.
+      type: object
+    DashboardtypesScatterPlotPoints:
+      properties:
+        maxSize:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of the largest dot when dimensions.sizeBy is set,
+            in CSS pixels from 2 to 40. Null means 24.
+        minSize:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of the smallest dot when dimensions.sizeBy is set,
+            in CSS pixels from 2 to 40. Null means 4.
+        opacity:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointOpacity'
+          description: Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+        size:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesPointDiameter'
+          description: Diameter of every dot when dimensions.sizeBy is unset, in CSS
+            pixels from 2 to 40. Null means 6.
+      type: object
+    DashboardtypesScatterPlotThreshold:
+      properties:
+        axis:
+          allOf:
+          - $ref: '#/components/schemas/DashboardtypesThresholdAxis'
+          description: 'The axis the line marks: y (default) draws it horizontally,
+            x vertically. Unit converts against that axis''s column unit, and the
+            axis extends to keep the line in view.'
+        color:
+          description: 'The CSS color of the line, for example #F1575F, which matches
+            the SigNoz red preset; CSS named colors such as red also work.'
+          type: string
+        label:
+          description: The caption shown on the line.
+          type: string
+        unit:
+          description: The unit id of value, such as ms or percent. Empty means the
+            panel's unit, or the column's unit for a table threshold. Prefer the panel's
+            unit; a different unit works only when it converts to it, such as s against
+            a panel in ms.
+          type: string
+        value:
+          description: The value the line is drawn at, in unit.
+          format: double
+          type: number
+      required:
+      - value
+      - color
+      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -5914,6 +6104,11 @@ components:
       - value
       - name
       type: object
+    DashboardtypesThresholdAxis:
+      enum:
+      - x
+      - "y"
+      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -12131,6 +12326,8 @@ components:
           additionalProperties:
             type: string
           type: object
+        scope:
+          $ref: '#/components/schemas/SpantypesScope'
         spanId:
           type: string
         timestamp:
@@ -12147,6 +12344,7 @@ components:
       - event
       - attributes
       - resource
+      - scope
       type: object
     SpantypesGettableFlamegraphTrace:
       properties:
@@ -12387,6 +12585,16 @@ components:
           nullable: true
           type: array
       type: object
+    SpantypesScope:
+      properties:
+        attributes:
+          additionalProperties: {}
+          type: object
+        name:
+          type: string
+        version:
+          type: string
+      type: object
     SpantypesSpanAggregation:
       properties:
         aggregation:
@@ -12756,6 +12964,8 @@ components:
           type: object
         response_status_code:
           type: string
+        scope:
+          $ref: '#/components/schemas/SpantypesScope'
         span_id:
           type: string
         status_code:
@@ -15064,9 +15274,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - planned-maintenance:list
       - tokenizer:
-        - VIEWER
+        - planned-maintenance:list
       summary: List downtime schedules
       tags:
       - downtimeschedules
@@ -15121,9 +15331,13 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - planned-maintenance:create
+        - planned-maintenance:attach
+        - rule:attach
       - tokenizer:
-        - EDITOR
+        - planned-maintenance:create
+        - planned-maintenance:attach
+        - rule:attach
       summary: Create downtime schedule
       tags:
       - downtimeschedules
@@ -15168,9 +15382,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - planned-maintenance:delete
       - tokenizer:
-        - EDITOR
+        - planned-maintenance:delete
       summary: Delete downtime schedule
       tags:
       - downtimeschedules
@@ -15226,9 +15440,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - planned-maintenance:read
       - tokenizer:
-        - VIEWER
+        - planned-maintenance:read
       summary: Get downtime schedule by ID
       tags:
       - downtimeschedules
@@ -15283,9 +15497,17 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - EDITOR
+        - planned-maintenance:update
+        - planned-maintenance:attach
+        - planned-maintenance:detach
+        - rule:attach
+        - rule:detach
       - tokenizer:
-        - EDITOR
+        - planned-maintenance:update
+        - planned-maintenance:attach
+        - planned-maintenance:detach
+        - rule:attach
+        - rule:detach
       summary: Update downtime schedule
       tags:
       - downtimeschedules

docs/contributing/go/spanmapper.md

@@ -17,7 +17,7 @@ Condition: `model`, `llm.input_messages` (OpenInference sets `llm.model_name` fr
 | `gen_ai.response.model`, last source for the request model | vLLM, which writes only the response model |
 | `ai.model.id`, `ai.model.provider`, `ai.response.model`, `ai.response.finishReason`, `ai.prompt.messages`, `ai.response.text`, `ai.response.toolCalls`, `ai.usage.promptTokens`, `ai.usage.completionTokens` | Vercel AI SDK v4, Mastra |
 | `ai.usage.inputTokens`, `ai.usage.outputTokens`, `ai.usage.cachedInputTokens`, `ai.usage.reasoningTokens` | Vercel AI SDK v5 |
-| `langfuse.observation.model.name`, `langfuse.session.id` | Langfuse SDK v3 |
+| `langfuse.observation.model.name`, `langfuse.observation.input`, `langfuse.observation.output`, `langfuse.observation.type`, `langfuse.session.id` | Langfuse SDK v3 (Python) and v4 (JS), LiteLLM `langfuse_otel` callback |
 | `session.id` | OpenInference, Langfuse, Claude Code |
 | `gen_ai.client.session_id` | opentelemetry-hooks runner (Cursor, Copilot, Claude Code hooks) |
 | `model`, `input_tokens`, `output_tokens`, `cache_read_tokens`, `cache_creation_tokens` | Claude Code `claude_code.llm_request` spans ([docs](https://code.claude.com/docs/en/monitoring-usage#span-attributes)) |

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/__mocks__/uplotMock.ts

@@ -57,6 +57,7 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
+const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -70,6 +71,7 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

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",
@@ -70,7 +70,7 @@
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
     "antlr4": "4.13.2",
-    "axios": "1.18.0",
+    "axios": "1.21.0",
     "babel-jest": "^29.6.4",
     "chart.js": "3.9.1",
     "chartjs-adapter-date-fns": "^2.0.0",
@@ -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/api/generated/services/sigNoz.schemas.ts

@@ -5584,6 +5584,12 @@ export interface DashboardtypesAreaChartPanelSpecDTO {
 	visualization?: DashboardtypesAreaChartVisualizationDTO;
 }
 
+export enum DashboardtypesAxisScaleDTO {
+	auto = 'auto',
+	linear = 'linear',
+	log = 'log',
+	symlog = 'symlog',
+}
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -6716,6 +6722,205 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesHeatmapPanelSpecDTO;
 }
 
+/**
+ * The panel kind.
+ */
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind {
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
+}
+export interface DashboardtypesScatterPlotAxisDTO {
+	/**
+	 * @type string
+	 * @description Axis title. Empty draws none; the tooltip still names the column.
+	 */
+	label?: string;
+	/**
+	 * @description auto (default) uses log, or symlog when values include zero or negatives, when that spreads the dots clearly more than linear does; otherwise linear. log cannot place a value at or below zero and leaves that dot out; symlog is log-like but places it.
+	 */
+	scale?: DashboardtypesAxisScaleDTO;
+	/**
+	 * @type number,null
+	 * @description The highest value the axis always shows; data above it still extends the axis, as does a threshold on it. Null fits the data.
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 * @description The lowest value the axis always shows; data below it still extends the axis, as does a threshold on it. Null fits the data. A log axis ignores a bound at or below zero.
+	 */
+	softMin?: number | null;
+}
+
+export interface DashboardtypesScatterPlotAxesDTO {
+	/**
+	 * @description The axis dimensions.x is plotted along.
+	 */
+	x?: DashboardtypesScatterPlotAxisDTO;
+	/**
+	 * @description The axis dimensions.y is plotted along.
+	 */
+	y?: DashboardtypesScatterPlotAxisDTO;
+}
+
+/**
+ * @minimum 2
+ * @maximum 40
+ * @nullable
+ */
+export type DashboardtypesPointDiameterDTO = number | null;
+
+/**
+ * @minimum 0.1
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesPointOpacityDTO = number | null;
+
+/**
+ * Diameter of the largest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 24.
+ */
+export type DashboardtypesScatterPlotPointsDTOMaxSize = DashboardtypesPointDiameterDTO | null;
+
+/**
+ * Diameter of the smallest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 4.
+ */
+export type DashboardtypesScatterPlotPointsDTOMinSize = DashboardtypesPointDiameterDTO | null;
+
+/**
+ * Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+ */
+export type DashboardtypesScatterPlotPointsDTOOpacity = DashboardtypesPointOpacityDTO | null;
+
+/**
+ * Diameter of every dot when dimensions.sizeBy is unset, in CSS pixels from 2 to 40. Null means 6.
+ */
+export type DashboardtypesScatterPlotPointsDTOSize = DashboardtypesPointDiameterDTO | null;
+
+export interface DashboardtypesScatterPlotPointsDTO {
+	/**
+	 * @description Diameter of the largest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 24.
+	 */
+	maxSize?: DashboardtypesScatterPlotPointsDTOMaxSize;
+	/**
+	 * @description Diameter of the smallest dot when dimensions.sizeBy is set, in CSS pixels from 2 to 40. Null means 4.
+	 */
+	minSize?: DashboardtypesScatterPlotPointsDTOMinSize;
+	/**
+	 * @description Fill opacity of every dot, from 0.1 to 1. Null means 0.7.
+	 */
+	opacity?: DashboardtypesScatterPlotPointsDTOOpacity;
+	/**
+	 * @description Diameter of every dot when dimensions.sizeBy is unset, in CSS pixels from 2 to 40. Null means 6.
+	 */
+	size?: DashboardtypesScatterPlotPointsDTOSize;
+}
+
+export interface DashboardtypesScatterPlotChartAppearanceDTO {
+	/**
+	 * @description Dot size and opacity.
+	 */
+	points?: DashboardtypesScatterPlotPointsDTO;
+}
+
+export interface DashboardtypesScatterPlotDimensionsDTO {
+	/**
+	 * @type array,null
+	 * @description Group-by label names (e.g. k8s.namespace.name) whose combined values color the dots and drive the legend. Empty colors by every group-by label.
+	 */
+	colorBy?: string[] | null;
+	/**
+	 * @type string
+	 * @description Value column key that scales each dot's area between chartAppearance.points.minSize and maxSize. Empty draws every dot at chartAppearance.points.size, as does a dot with no value.
+	 */
+	sizeBy?: string;
+	/**
+	 * @type string
+	 * @description Value column key (queryName, or queryName.expression for a multi-aggregation query) plotted on the x axis. Empty, or a key the result lacks, uses the first value column.
+	 */
+	x?: string;
+	/**
+	 * @type string
+	 * @description Value column key plotted on the y axis. Empty, or a key the result lacks, uses the first value column x does not use.
+	 */
+	y?: string;
+}
+
+export enum DashboardtypesThresholdAxisDTO {
+	x = 'x',
+	y = 'y',
+}
+export interface DashboardtypesScatterPlotThresholdDTO {
+	/**
+	 * @description The axis the line marks: y (default) draws it horizontally, x vertically. Unit converts against that axis's column unit, and the axis extends to keep the line in view.
+	 */
+	axis?: DashboardtypesThresholdAxisDTO;
+	/**
+	 * @type string
+	 * @description The CSS color of the line, for example #F1575F, which matches the SigNoz red preset; CSS named colors such as red also work.
+	 */
+	color: string;
+	/**
+	 * @type string
+	 * @description The caption shown on the line.
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 * @description The unit id of value, such as ms or percent. Empty means the panel's unit, or the column's unit for a table threshold. Prefer the panel's unit; a different unit works only when it converts to it, such as s against a panel in ms.
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 * @description The value the line is drawn at, in unit.
+	 */
+	value: number;
+}
+
+export interface DashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @description Title, bounds and scale of each axis.
+	 */
+	axes?: DashboardtypesScatterPlotAxesDTO;
+	/**
+	 * @description Dot drawing options.
+	 */
+	chartAppearance?: DashboardtypesScatterPlotChartAppearanceDTO;
+	/**
+	 * @description Which result columns place, size and color the dots. Each dot is one row of the joined scalar result: one group.
+	 */
+	dimensions?: DashboardtypesScatterPlotDimensionsDTO;
+	/**
+	 * @description Per-column units and decimal precision. The x and y columns' units label their axes; every bound column's unit shows in the tooltip.
+	 */
+	formatting?: DashboardtypesTableFormattingDTO;
+	/**
+	 * @description Legend placement and series colors. A series is one color group, labeled by its colorBy values joined with a comma, or All when nothing is grouped.
+	 */
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 * @description Reference lines drawn at fixed values across the x or y axis.
+	 */
+	thresholds?: DashboardtypesScatterPlotThresholdDTO[] | null;
+	/**
+	 * @description The time range the groups are computed over.
+	 */
+	visualization?: DashboardtypesBasicVisualizationDTO;
+}
+
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO {
+	/**
+	 * @enum signoz/ScatterPlotPanel
+	 * @type string
+	 * @description The panel kind.
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTOKind;
+	/**
+	 * @description The options for this panel kind. {} accepts every default.
+	 */
+	spec: DashboardtypesScatterPlotPanelSpecDTO;
+}
+
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -6726,7 +6931,8 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -8006,6 +8212,7 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
 	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
+	'signoz/ScatterPlotPanel' = 'signoz/ScatterPlotPanel',
 }
 /**
  * The RFC 6902 operations, applied in order against the dashboard's postable shape.
@@ -13264,6 +13471,23 @@ export type SpantypesFlamegraphSpanDTOAttributes = { [key: string]: unknown };
 
 export type SpantypesFlamegraphSpanDTOResource = { [key: string]: string };
 
+export type SpantypesScopeDTOAttributes = { [key: string]: unknown };
+
+export interface SpantypesScopeDTO {
+	/**
+	 * @type object
+	 */
+	attributes?: SpantypesScopeDTOAttributes;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	version?: string;
+}
+
 export interface SpantypesFlamegraphSpanDTO {
 	/**
 	 * @type object
@@ -13299,6 +13523,7 @@ export interface SpantypesFlamegraphSpanDTO {
 	 * @type object
 	 */
 	resource: SpantypesFlamegraphSpanDTOResource;
+	scope: SpantypesScopeDTO;
 	/**
 	 * @type string
 	 */
@@ -13844,6 +14069,7 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @type string
 	 */
 	response_status_code?: string;
+	scope?: SpantypesScopeDTO;
 	/**
 	 * @type 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/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -21,6 +21,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
 import {
 	convertBuilderQueriesToV5,
+	mapPanelTypeToRequestType,
 	prepareQueryRangePayloadV5,
 } from './prepareQueryRangePayloadV5';
 
@@ -904,6 +905,12 @@ describe('prepareQueryRangePayloadV5', () => {
 	});
 });
 
+describe('mapPanelTypeToRequestType', () => {
+	it('sends a scatter plot as scalar, like a table', () => {
+		expect(mapPanelTypeToRequestType(PANEL_TYPES.SCATTER)).toBe('scalar');
+	});
+});
+
 describe('convertBuilderQueriesToV5 having normalization', () => {
 	const buildSpec = (having: unknown): MetricBuilderQuery => {
 		const [envelope] = convertBuilderQueriesToV5(

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

@@ -51,6 +51,7 @@ export function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
 		case PANEL_TYPES.BAR:
 			return 'time_series';
 		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.SCATTER:
 		case PANEL_TYPES.PIE:
 		case PANEL_TYPES.VALUE:
 			return 'scalar';
@@ -274,6 +275,7 @@ export function createAggregation(
 		queryData.dataSource === DataSource.METRICS &&
 		panelType &&
 		(panelType === PANEL_TYPES.TABLE ||
+			panelType === PANEL_TYPES.SCATTER ||
 			panelType === PANEL_TYPES.PIE ||
 			panelType === PANEL_TYPES.VALUE);
 

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,6 +1,6 @@
 import { useCallback, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { Dot } from '@signozhq/icons';
+import { useAppLocation } from 'lib/router/useAppLocation';
+import { Dot, Globe, Inbox, SquarePen } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
@@ -16,7 +16,6 @@ import {
 import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { Globe, Inbox, SquarePen } from '@signozhq/icons';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
@@ -39,7 +38,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/LogDetail/index.tsx

@@ -4,6 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
 import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
+import { SavedviewtypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -147,7 +148,7 @@ function LogDetailInner({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		sourcePage: SavedviewtypesSourceDTO.logs,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

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

@@ -106,9 +106,17 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[resolvedConfig],
 	);
 
+	const traceOperatorField = useMemo(
+		() =>
+			resolveQueryBuilderField(QueryBuilderField.TraceOperator, resolvedConfig),
+		[resolvedConfig],
+	);
+
+	const canShowTraceOperator = showTraceOperator && !traceOperatorField.hidden;
+
 	const isMultiQueryAllowed = useMemo(
-		() => !additionalQueries.hidden && (!isRawQuery || showTraceOperator),
-		[additionalQueries.hidden, showTraceOperator, isRawQuery],
+		() => !additionalQueries.hidden && (!isRawQuery || canShowTraceOperator),
+		[additionalQueries.hidden, canShowTraceOperator, isRawQuery],
 	);
 
 	const queryDataSources = useMemo(
@@ -146,13 +154,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	);
 
 	const hasTraceOperator = useMemo(
-		() => showTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+		() =>
+			canShowTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
+		[canShowTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
 	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isRawQuery) || showTraceOperator,
-		[isRawQuery, showOnlyWhereClause, showTraceOperator],
+		() => (!showOnlyWhereClause && !isRawQuery) || canShowTraceOperator,
+		[isRawQuery, showOnlyWhereClause, canShowTraceOperator],
 	);
 
 	const showFormula = useMemo(() => {
@@ -168,8 +177,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	}, [formula.hidden, isRawQuery, currentDataSource]);
 
 	const showAddTraceOperator = useMemo(
-		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+		() => canShowTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
+		[canShowTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
 	// Nothing left to add means no footer at all, rather than an empty bar under the
@@ -178,13 +187,13 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		() =>
 			(!additionalQueries.hidden || showFormula || showAddTraceOperator) &&
 			((!showOnlyWhereClause && !isRawQuery) ||
-				(currentDataSource === DataSource.TRACES && showTraceOperator)),
+				(currentDataSource === DataSource.TRACES && canShowTraceOperator)),
 		[
 			additionalQueries.hidden,
 			showFormula,
 			showAddTraceOperator,
 			isRawQuery,
-			showTraceOperator,
+			canShowTraceOperator,
 			showOnlyWhereClause,
 			currentDataSource,
 		],
@@ -222,7 +231,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							fieldsConfig={fieldsConfig}
 							allowedDataSources={queryDataSources}
 							isMultiQueryAllowed={isMultiQueryAllowed}
-							showTraceOperator={showTraceOperator}
+							showTraceOperator={canShowTraceOperator}
 							hasTraceOperator={hasTraceOperator}
 							version={version}
 							isAvailableToDisable={false}
@@ -247,7 +256,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
-								showTraceOperator={showTraceOperator}
+								showTraceOperator={canShowTraceOperator}
 								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/types.ts

@@ -6,7 +6,8 @@ export type NonAddOnField =
 	| QueryBuilderField.StepInterval
 	| QueryBuilderField.Functions
 	| QueryBuilderField.Formula
-	| QueryBuilderField.AdditionalQueries;
+	| QueryBuilderField.AdditionalQueries
+	| QueryBuilderField.TraceOperator;
 
 export type AddOnField = Exclude<QueryBuilderField, NonAddOnField>;
 

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

@@ -18,6 +18,7 @@ import {
 	STEP_INTERVAL_PLACEHOLDER,
 } from '../../queryBuilderFields.utils';
 
+import { isScalarPanelType } from '../panelTypes';
 import QueryAggregationSelect from './QueryAggregationSelect';
 
 import './QueryAggregation.styles.scss';
@@ -45,10 +46,7 @@ function QueryAggregationOptions({
 		const isNonMetricSource =
 			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
 
-		if (
-			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
-		) {
+		if (isNonMetricSource && isScalarPanelType(panelType)) {
 			return { hidden: true, disabled: false, pinned: false };
 		}
 

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

@@ -9,7 +9,6 @@ import {
 import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
 import { QueryProps } from 'container/QueryBuilder/type';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
@@ -27,6 +26,7 @@ import {
 	resolveQueryBuilderField,
 } from '../queryBuilderFields.utils';
 
+import { isScalarPanelType } from './panelTypes';
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -112,11 +112,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	}
 
 	const showReduceTo = useMemo(
-		() =>
-			dataSource === DataSource.METRICS &&
-			(panelType === PANEL_TYPES.TABLE ||
-				panelType === PANEL_TYPES.PIE ||
-				panelType === PANEL_TYPES.VALUE),
+		() => dataSource === DataSource.METRICS && isScalarPanelType(panelType),
 		[dataSource, panelType],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/panelTypes.ts

@@ -0,0 +1,13 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+/** Panels that reduce each query to one value per group over the whole window. */
+const SCALAR_PANEL_TYPES: ReadonlySet<string> = new Set<string>([
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.SCATTER,
+	PANEL_TYPES.PIE,
+	PANEL_TYPES.VALUE,
+]);
+
+export function isScalarPanelType(panelType?: string | null): boolean {
+	return panelType != null && SCALAR_PANEL_TYPES.has(panelType);
+}

frontend/src/components/QueryBuilderV2/__tests__/QueryAggregation.test.tsx

@@ -14,6 +14,17 @@ jest.mock('../QueryV2/QueryAggregation/QueryAggregationSelect', () => ({
 const queryData = initialQueriesMap.traces.builder
 	.queryData[0] as IBuilderQuery;
 
+function renderFor(panelType: PANEL_TYPES, dataSource: DataSource): void {
+	render(
+		<QueryAggregationOptions
+			dataSource={dataSource}
+			panelType={panelType}
+			onAggregationIntervalChange={jest.fn()}
+			queryData={queryData}
+		/>,
+	);
+}
+
 describe('QueryAggregationOptions step interval placeholder', () => {
 	it('shows the configured placeholder', () => {
 		render(
@@ -34,14 +45,27 @@ describe('QueryAggregationOptions step interval placeholder', () => {
 	});
 
 	it('falls back to Auto', () => {
-		render(
-			<QueryAggregationOptions
-				dataSource={DataSource.TRACES}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				onAggregationIntervalChange={jest.fn()}
-				queryData={queryData}
-			/>,
-		);
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
 		expect(screen.getByPlaceholderText('Auto')).toBeInTheDocument();
 	});
 });
+
+describe('QueryAggregationOptions step interval', () => {
+	it.each([PANEL_TYPES.TABLE, PANEL_TYPES.SCATTER, PANEL_TYPES.PIE])(
+		'is hidden for a %s panel over traces, which reduces the whole window',
+		(panelType) => {
+			renderFor(panelType, DataSource.TRACES);
+			expect(screen.queryByText('every')).not.toBeInTheDocument();
+		},
+	);
+
+	it('stays for a scatter plot over metrics, where it sets the series step', () => {
+		renderFor(PANEL_TYPES.SCATTER, DataSource.METRICS);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+
+	it('stays for a time series over traces', () => {
+		renderFor(PANEL_TYPES.TIME_SERIES, DataSource.TRACES);
+		expect(screen.getByText('every')).toBeInTheDocument();
+	});
+});

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -20,6 +20,7 @@ export enum QueryBuilderField {
 	// Builder level
 	Formula = 'formula',
 	AdditionalQueries = 'additional_queries',
+	TraceOperator = 'trace_operator',
 }
 
 /** Per-query builder fields that can be kept equal across a panel's queries. */

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -65,13 +65,13 @@ export function resolveQueryBuilderFields(
 
 /**
  * The surface a raw-row builder starts from, layered under a caller's own config.
- * `AdditionalQueries` is deliberately absent — a raw trace builder still takes several
- * queries when trace matching is on. Omit rather than Partial, so a field added to the
- * enum has to be placed on one side.
+ * `AdditionalQueries` and `TraceOperator` are deliberately absent — a raw trace builder
+ * still takes several queries, and their trace operator, when trace matching is on.
+ * Omit rather than Partial, so a field added to the enum has to be placed on one side.
  */
 export const RAW_QUERY_FIELDS: Omit<
 	Record<QueryBuilderField, QueryBuilderFieldRule>,
-	QueryBuilderField.AdditionalQueries
+	QueryBuilderField.AdditionalQueries | QueryBuilderField.TraceOperator
 > = {
 	[QueryBuilderField.Aggregation]: { state: 'hidden' },
 	[QueryBuilderField.StepInterval]: { state: 'hidden' },

frontend/src/components/QueryBuilderV2/stories/QueryBuilderV2.behaviour.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, waitFor } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { QueryBuilderV2 } from '../QueryBuilderV2';
+import {
+	addOnToggles,
+	appendToAggregation,
+	DEFAULT_ARGS,
+	expectFirstQuery,
+	PANEL_EDITOR_ARGS,
+	PANEL_EDITOR_PATH,
+	payloadIn,
+	routeWith,
+	selectMetric,
+} from './QueryBuilderV2.stories.mocks';
+import QueryProbe from './QueryProbe';
+
+const METRICS_EXPLORER_ARGS = {
+	config: { initialDataSource: DataSource.METRICS, queryVariant: 'static' },
+	showFunctions: false,
+} as const;
+
+const metricsExplorerRoute = routeWith(
+	ROUTES.METRICS_EXPLORER_EXPLORER,
+	initialQueriesMap.metrics,
+);
+
+/**
+ * Builder rules that hold without a backend: which add-ons a panel kind
+ * offers, the aggregations a metric type defaults to, and input limits. The
+ * probe below the builder prints the payload each play asserts on.
+ */
+const meta = {
+	title: 'Components/Query Builder/Behaviour',
+	component: QueryBuilderV2,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 1100 })],
+	args: DEFAULT_ARGS,
+	render: (args): JSX.Element => (
+		<>
+			<QueryBuilderV2 {...args} />
+			<QueryProbe />
+		</>
+	),
+} satisfies Meta<typeof QueryBuilderV2>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** A Value panel offers only the legend add-on. */
+export const LogsOnValuePanel: Story = {
+	args: { ...PANEL_EDITOR_ARGS, panelType: PANEL_TYPES.VALUE },
+	parameters: {
+		signoz: { route: routeWith(PANEL_EDITOR_PATH, initialQueriesMap.logs) },
+	},
+	play: async ({ canvasElement }) => {
+		await waitFor(() =>
+			expect(addOnToggles(canvasElement)).toStrictEqual(['legend_format']),
+		);
+	},
+};
+
+/** Metrics on a Table: reduce-to is offered; group by lives in the aggregation row. */
+export const MetricsOnTablePanel: Story = {
+	args: { ...PANEL_EDITOR_ARGS, panelType: PANEL_TYPES.TABLE },
+	parameters: {
+		signoz: { route: routeWith(PANEL_EDITOR_PATH, initialQueriesMap.metrics) },
+	},
+	play: async ({ canvasElement }) => {
+		await waitFor(() =>
+			expect(addOnToggles(canvasElement)).toStrictEqual([
+				'having',
+				'order_by',
+				'limit',
+				'legend_format',
+				'reduce_to',
+			]),
+		);
+	},
+};
+
+/** Traces on a time series: every add-on, with group by as a toggle. */
+export const TracesOnTimeSeriesPanel: Story = {
+	args: PANEL_EDITOR_ARGS,
+	parameters: {
+		signoz: { route: routeWith(PANEL_EDITOR_PATH, initialQueriesMap.traces) },
+	},
+	play: async ({ canvasElement }) => {
+		await waitFor(() =>
+			expect(addOnToggles(canvasElement)).toStrictEqual([
+				'group_by',
+				'having',
+				'order_by',
+				'limit',
+				'legend_format',
+			]),
+		);
+	},
+};
+
+/** Picking a gauge defaults to avg over time and avg across series. */
+export const GaugeMetricDefaults: Story = {
+	args: METRICS_EXPLORER_ARGS,
+	parameters: { signoz: { route: metricsExplorerRoute } },
+	play: async ({ canvasElement }) => {
+		await selectMetric(canvasElement, 'container_cpu_utilization');
+
+		await expectFirstQuery(canvasElement, {
+			aggregations: [
+				expect.objectContaining({
+					metricName: 'container_cpu_utilization',
+					timeAggregation: 'avg',
+					spaceAggregation: 'avg',
+				}),
+			],
+		});
+	},
+};
+
+/** Picking a histogram defaults to the p90 across series. */
+export const HistogramMetricDefaults: Story = {
+	args: METRICS_EXPLORER_ARGS,
+	parameters: { signoz: { route: metricsExplorerRoute } },
+	play: async ({ canvasElement }) => {
+		await selectMetric(canvasElement, 'signoz_latency_bucket');
+
+		await expectFirstQuery(canvasElement, {
+			aggregations: [
+				expect.objectContaining({
+					metricName: 'signoz_latency_bucket',
+					spaceAggregation: 'p90',
+				}),
+			],
+		});
+	},
+};
+
+/** A Value panel takes a single aggregation: a second one is not accepted. */
+export const ValuePanelTakesOneAggregation: Story = {
+	args: { ...PANEL_EDITOR_ARGS, panelType: PANEL_TYPES.VALUE },
+	parameters: {
+		signoz: { route: routeWith(PANEL_EDITOR_PATH, initialQueriesMap.logs) },
+	},
+	play: async ({ canvasElement }) => {
+		await expectFirstQuery(canvasElement, {
+			aggregations: [{ expression: 'count()' }],
+		});
+
+		const { before, after } = appendToAggregation(
+			canvasElement,
+			', count_distinct(service.name)',
+		);
+		await expect(after).toBe(before);
+
+		await expectFirstQuery(canvasElement, {
+			aggregations: [{ expression: 'count()' }],
+		});
+		await expect(
+			payloadIn(canvasElement).queries[0].spec.aggregations,
+		).toHaveLength(1);
+	},
+};

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

@@ -0,0 +1,134 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { EditorView } from '@codemirror/view';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import type { QueryBuilderV2 } from '../QueryBuilderV2';
+
+type QueryBuilderProps = Parameters<typeof QueryBuilderV2>[0];
+
+/** The builder's provider reads its starting query from the URL, as every host seeds it. */
+export const routeWith = (path: string, query: Query): string =>
+	`${path}?compositeQuery=${encodeURIComponent(JSON.stringify(query))}`;
+
+export const meterQuery: Query = {
+	...initialQueriesMap.metrics,
+	builder: {
+		...initialQueriesMap.metrics.builder,
+		queryData: [
+			{ ...initialQueriesMap.metrics.builder.queryData[0], source: 'meter' },
+		],
+	},
+};
+
+/** `PanelEditorQueryBuilder`'s props, less the per-kind field config. */
+export const PANEL_EDITOR_ARGS: Partial<QueryBuilderProps> = {
+	allowedDataSources: [
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+		TelemetrytypesSignalDTO.metrics,
+	],
+	showTraceOperator: true,
+	signalSourceChangeEnabled: true,
+	savePreviousQuery: true,
+};
+
+export const PANEL_EDITOR_PATH = '/dashboard/story/panel/story';
+
+interface ProbedQuery {
+	type: string;
+	spec: {
+		aggregations?: Record<string, unknown>[];
+		[key: string]: unknown;
+	};
+}
+
+/** The `compositeQuery` the story's `QueryProbe` prints for the builder's state. */
+export const payloadIn = (
+	canvasElement: HTMLElement,
+): { queries: ProbedQuery[] } =>
+	JSON.parse(
+		within(canvasElement).getByTestId('qb-payload').textContent ?? '{}',
+	) as { queries: ProbedQuery[] };
+
+export const expectFirstQuery = async (
+	canvasElement: HTMLElement,
+	spec: Record<string, unknown>,
+): Promise<void> => {
+	await waitFor(() =>
+		expect(payloadIn(canvasElement).queries[0]).toMatchObject({
+			type: 'builder_query',
+			spec: expect.objectContaining(spec),
+		}),
+	);
+};
+
+/** The add-on toggles query `A` offers, in order (`group_by`, `having`, …). */
+export const addOnToggles = (canvasElement: HTMLElement): string[] =>
+	within(within(canvasElement).getByTestId('query-A'))
+		.queryAllByTestId(/^query-add-on-/)
+		.map((toggle) =>
+			(toggle.getAttribute('data-testid') ?? '').replace('query-add-on-', ''),
+		);
+
+/** Picks `metricName` in query `A`'s metric selector; its list portals out. */
+export const selectMetric = async (
+	canvasElement: HTMLElement,
+	metricName: string,
+): Promise<void> => {
+	const field = within(canvasElement).getByTestId('metric-name-selector-0');
+	const input = within(field).getByRole('combobox');
+	await userEvent.click(input);
+	await userEvent.type(input, metricName);
+	const option = await waitFor(async () => {
+		const match = Array.from(
+			document.querySelectorAll<HTMLElement>(
+				'.ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-item-option',
+			),
+		).find((candidate) => candidate.textContent?.includes(metricName));
+		await expect(match).toBeDefined();
+		return match as HTMLElement;
+	});
+	await userEvent.click(option);
+	await waitFor(() => expect(screen.queryByRole('listbox')).toBeNull());
+};
+
+/**
+ * Appends `text` to query `A`'s aggregation editor and returns its document
+ * before and after. Dispatched as a CodeMirror transaction: `userEvent.type`
+ * strands the caret when the line redraws, and a transaction runs the editor's
+ * own filters, which is what an input limit is.
+ */
+export const appendToAggregation = (
+	canvasElement: HTMLElement,
+	text: string,
+): { before: string; after: string } => {
+	const content = within(canvasElement)
+		.getByTestId('query-aggregation-editor')
+		.querySelector<HTMLElement>('.cm-content');
+	const view = content ? EditorView.findFromDOM(content) : null;
+	if (!view) {
+		throw new Error('aggregation editor not mounted');
+	}
+	const before = view.state.doc.toString();
+	view.dispatch({
+		changes: { from: before.length, insert: text },
+		selection: { anchor: before.length + text.length },
+		userEvent: 'input.type',
+	});
+	// Read synchronously: the document is the editor's own verdict, before
+	// React state catches up.
+	return { before, after: view.state.doc.toString() };
+};
+
+export const DEFAULT_ARGS: Partial<QueryBuilderProps> = {
+	panelType: PANEL_TYPES.TIME_SERIES,
+	version: 'v3',
+};

frontend/src/components/QueryBuilderV2/stories/QueryBuilderV2.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { QueryBuilderV2 } from '../QueryBuilderV2';
+import {
+	DEFAULT_ARGS,
+	expectFirstQuery,
+	meterQuery,
+	PANEL_EDITOR_ARGS,
+	PANEL_EDITOR_PATH,
+	routeWith,
+} from './QueryBuilderV2.stories.mocks';
+import QueryProbe from './QueryProbe';
+
+/**
+ * The query builder as each host mounts it: the props come from that host's
+ * call site, the starting query from its route. The probe below the builder
+ * prints the `query_range` payload its state would send.
+ */
+const meta = {
+	title: 'Components/Query Builder',
+	component: QueryBuilderV2,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 1100 })],
+	args: DEFAULT_ARGS,
+	render: (args): JSX.Element => (
+		<>
+			<QueryBuilderV2 {...args} />
+			<QueryProbe />
+		</>
+	),
+} satisfies Meta<typeof QueryBuilderV2>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Logs explorer, graph view: a fixed logs signal with `count()`. */
+export const LogsExplorer: Story = {
+	args: {
+		config: { initialDataSource: DataSource.LOGS, queryVariant: 'static' },
+	},
+	parameters: {
+		signoz: { route: routeWith(ROUTES.LOGS_EXPLORER, initialQueriesMap.logs) },
+	},
+	play: async ({ canvasElement }) => {
+		await expectFirstQuery(canvasElement, {
+			signal: 'logs',
+			aggregations: [{ expression: 'count()' }],
+		});
+	},
+};
+
+/** Traces explorer: a fixed traces signal, with trace matching offered. */
+export const TracesExplorer: Story = {
+	args: {
+		config: { initialDataSource: DataSource.TRACES, queryVariant: 'static' },
+		showTraceOperator: true,
+	},
+	parameters: {
+		signoz: {
+			route: routeWith(ROUTES.TRACES_EXPLORER, initialQueriesMap.traces),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		await expectFirstQuery(canvasElement, { signal: 'traces' });
+	},
+};
+
+/** Metrics explorer: a fixed metrics signal, functions hidden. */
+export const MetricsExplorer: Story = {
+	args: {
+		config: { initialDataSource: DataSource.METRICS, queryVariant: 'static' },
+		showFunctions: false,
+	},
+	parameters: {
+		signoz: {
+			route: routeWith(
+				ROUTES.METRICS_EXPLORER_EXPLORER,
+				initialQueriesMap.metrics,
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		await expectFirstQuery(canvasElement, { signal: 'metrics' });
+	},
+};
+
+/** Meter explorer: metrics read from the meter source. */
+export const MeterExplorer: Story = {
+	args: {
+		config: {
+			initialDataSource: DataSource.METRICS,
+			queryVariant: 'static',
+			signalSource: 'meter',
+		},
+		showFunctions: false,
+	},
+	parameters: {
+		signoz: { route: routeWith(ROUTES.METER_EXPLORER, meterQuery) },
+	},
+	play: async ({ canvasElement }) => {
+		await expectFirstQuery(canvasElement, { signal: 'metrics', source: 'meter' });
+	},
+};
+
+/**
+ * V2 panel editor: a data-source dropdown per query, several queries,
+ * formulas and trace matching.
+ */
+export const PanelEditor: Story = {
+	args: PANEL_EDITOR_ARGS,
+	parameters: {
+		signoz: {
+			route: routeWith(PANEL_EDITOR_PATH, initialQueriesMap.logs),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		await expectFirstQuery(canvasElement, { signal: 'logs' });
+		await expect(
+			within(canvasElement).getByTestId('query-data-source-selector-0'),
+		).toBeVisible();
+	},
+};
+
+/** Logs alert: a fixed logs signal with functions, as the alert form mounts it. */
+export const LogsAlert: Story = {
+	args: {
+		config: { initialDataSource: DataSource.LOGS, queryVariant: 'static' },
+		showFunctions: true,
+		signalSourceChangeEnabled: true,
+	},
+	parameters: {
+		signoz: { route: routeWith(ROUTES.ALERTS_NEW, initialQueriesMap.logs) },
+	},
+	play: async ({ canvasElement }) => {
+		await expectFirstQuery(canvasElement, { signal: 'logs' });
+	},
+};

frontend/src/components/QueryBuilderV2/stories/QueryProbe.module.scss

@@ -0,0 +1,11 @@
+.probe {
+	margin-top: 16px;
+	padding: 12px;
+	max-height: 320px;
+	overflow: auto;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	font-size: 12px;
+	color: var(--l2-foreground);
+	background: var(--l1-background);
+}

frontend/src/components/QueryBuilderV2/stories/QueryProbe.tsx

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { prepareQueryRangePayloadV5 } from 'api/v5/queryRange/prepareQueryRangePayloadV5';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+
+import styles from './QueryProbe.module.scss';
+
+/** Fixed, so the printed payload is the same on every render and capture. */
+const WINDOW = { start: 1_700_000_000_000, end: 1_700_003_600_000 };
+
+/**
+ * Prints the `compositeQuery` the builder's live state would send, so a play
+ * function asserts on the query rather than on the DOM that edits it.
+ */
+function QueryProbe(): JSX.Element {
+	const { currentQuery, panelType } = useQueryBuilder();
+
+	const payload = useMemo(() => {
+		try {
+			return prepareQueryRangePayloadV5({
+				query: currentQuery,
+				graphType: panelType ?? PANEL_TYPES.TIME_SERIES,
+				selectedTime: 'GLOBAL_TIME',
+				...WINDOW,
+			}).queryPayload.compositeQuery;
+		} catch (error) {
+			return { error: String(error) };
+		}
+	}, [currentQuery, panelType]);
+
+	return (
+		<pre className={styles.probe} data-testid="qb-payload">
+			{JSON.stringify(payload, null, 2)}
+		</pre>
+	);
+}
+
+export default QueryProbe;

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/constants/panelTypes.ts

@@ -36,6 +36,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
+		[PANEL_TYPES.SCATTER]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -3,7 +3,6 @@ import {
 	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName';
 import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
@@ -337,6 +336,7 @@ export enum PANEL_TYPES {
 	TRACE = 'trace',
 	BAR = 'bar',
 	AREA = 'area',
+	SCATTER = 'scatter',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	HEATMAP = 'heatmap',
@@ -591,7 +591,6 @@ export const listViewInitialTraceQuery: Query = {
 				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
 				offset: 0,
 				pageSize: 10,
-				selectColumns: defaultTraceSelectedColumns,
 			},
 		],
 	},

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/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,13 +16,11 @@ 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,
 	findSavedViewInLists,
 	openSavedView,
 	openSavedViewByKey,
@@ -39,6 +37,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 +61,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,
@@ -228,33 +230,18 @@ describe('findSavedViewInLists', () => {
 	});
 });
 
-describe('buildExplorerNavigationUrl', () => {
-	it('encodes composite query and view selectors', () => {
-		const url = buildExplorerNavigationUrl(
-			ROUTES.LOGS_EXPLORER,
-			{ queryType: 'builder' } as never,
-			{
-				[QueryParams.panelTypes]: PANEL_TYPES.LIST,
-				[QueryParams.viewKey]: 'view-1',
-			},
-		);
-
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-		expect(url).toContain(`${QueryParams.compositeQuery}=`);
-		expect(url).toContain(`${QueryParams.viewKey}=`);
-	});
-});
-
 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 +253,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 +268,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';
+import { buildExplorerNavigationUrl } from 'utils/buildExplorerNavigationUrl';
 
 type SavedViewSourceHint = SavedViewSourcePage;
 
@@ -72,30 +72,7 @@ export function explorerRouteForSourcePage(
 	return SOURCEPAGE_VS_ROUTES[sourcePage] ?? null;
 }
 
-/**
- * Builds an explorer URL the same way `redirectWithQueryBuilderData` does —
- * without inheriting stale query params from the current page's `urlQuery`.
- */
-export function buildExplorerNavigationUrl(
-	route: string,
-	query: Query,
-	searchParams: Record<string, unknown>,
-): string {
-	const params = new URLSearchParams();
-	params.set(
-		QueryParams.compositeQuery,
-		encodeURIComponent(JSON.stringify(query)),
-	);
-	Object.entries(searchParams).forEach(([key, value]) => {
-		params.set(key, JSON.stringify(value));
-	});
-	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 +87,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 ? (