feat(frontend): adopt reworked @signozhq/ui components across remaining areas

Co-authored-by: Manika Malhotra <manika@signoz.io>

.github/CODEOWNERS

@@ -200,6 +200,15 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
+/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
+/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
+/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
+/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
+/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
+/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -207,6 +216,8 @@ go.mod @therealpandey
 /frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
 
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv

.github/workflows/integrationci.yaml

@@ -38,7 +38,6 @@ jobs:
       fail-fast: false
       matrix:
         suite:
-          - alerts
           - alertmanager
           - alertmanagerrotation
           - basepath
@@ -64,6 +63,7 @@ jobs:
           - querierauthz
           - role
           - rootuser
+          - ruler
           - savedview
           - semconvfamilies
           - serviceaccount

docs/contributing/go/authz.md

@@ -121,7 +121,7 @@ The pieces:
 - **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). When a side's ids come from a list extractor (`BodyJSONArray` or a custom `ResourceIDsExtractor`) and that list resolves to nothing at request time, there is nothing to link: the def resolves to no resources, so no check runs and no audit event is emitted (e.g. inviting a user with an empty `userRoles`). A single-id side (`OneID`) always resolves to exactly one id and fails closed when it is empty. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

docs/contributing/go/handler.md

@@ -179,6 +179,7 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
+- **Stability**: Maturity marker (`handler.StabilityDevelopment`, `handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`, the OpenTelemetry Collector levels) emitted as the `x-signoz-stability` extension on every operation. Unset is emitted as `alpha`.
 
 The generic handler:
 

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -183,32 +183,52 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, errors.New(errors.TypeAlreadyExists, cloudintegrationtypes.ErrCodeCloudIntegrationAlreadyConnected, errMessage)
 	}
 
-	account, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
+	storableAccount, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
 	if err != nil {
 		return nil, err
 	}
 
+	account, err := cloudintegrationtypes.NewAccountFromStorable(storableAccount)
+	if err != nil {
+		return nil, err
+	}
+
+	syncState := account.NextSyncState(req.SyncedVersion)
+
 	// If account has been removed (disconnected), return a minimal response with empty integration config.
-	// The agent uses this response to clean up resources
 	if account.RemovedAt != nil {
+		// Heartbeat stays frozen after removal, only the sync state is updated.
+		if account.AgentReport != nil && syncState != nil {
+			account.UpdateSyncState(syncState)
+
+			storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
+			if err != nil {
+				return nil, err
+			}
+
+			err = module.store.UpdateAgentReport(ctx, storableAccount)
+			if err != nil {
+				return nil, err
+			}
+		}
+
 		return cloudintegrationtypes.NewAgentCheckInResponse(
 			req.ProviderAccountID,
 			account.ID.StringValue(),
 			new(cloudintegrationtypes.ProviderIntegrationConfig),
 			account.RemovedAt,
+			syncState,
 		), nil
 	}
 
-	// update account with cloud provider account id and agent report (heartbeat)
-	account.Update(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data))
+	account.UpdateAgentReport(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data, syncState))
 
-	err = module.store.UpdateAccount(ctx, account)
+	storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
 	if err != nil {
 		return nil, err
 	}
 
-	// Get account as domain object for config access (enabled regions, etc.)
-	domainAccount, err := cloudintegrationtypes.NewAccountFromStorable(account)
+	err = module.store.UpdateAgentReport(ctx, storableAccount)
 	if err != nil {
 		return nil, err
 	}
@@ -223,8 +243,7 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, err
 	}
 
-	// Delegate integration config building entirely to the provider module
-	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, domainAccount, storedServices)
+	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, account, storedServices)
 	if err != nil {
 		return nil, err
 	}
@@ -234,6 +253,7 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		account.ID.StringValue(),
 		integrationConfig,
 		account.RemovedAt,
+		syncState,
 	), nil
 }
 

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,6 +23,15 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	sql := f.TextToJsonColumn(column)
+	sql = append(sql, "->"...)
+	sql = schema.Append(f.bunf, sql, mapField)
+	sql = append(sql, "->>"...)
+	sql = schema.Append(f.bunf, sql, key)
+	return sql
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,6 +55,67 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "PlainKey",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `"data"::jsonb->'labels'->>'team'`,
+		},
+		{
+			name:     "DottedKey_OneMapEntry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
+		},
+		{
+			name:     "SingleQuoteInKey_Doubled",
+			column:   "data",
+			mapField: "labels",
+			key:      "o'brien",
+			expected: `"data"::jsonb->'labels'->>'o''brien'`,
+		},
+		{
+			name:     "BackslashInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a\b`,
+			expected: `"data"::jsonb->'labels'->>'a\b'`,
+		},
+		{
+			name:     "DoubleQuoteInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a"b`,
+			expected: `"data"::jsonb->'labels'->>'a"b'`,
+		},
+		{
+			name:     "QualifiedColumn",
+			column:   "rule.data",
+			mapField: "labels",
+			key:      "severity",
+			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

frontend/.oxlintrc.json

@@ -297,9 +297,6 @@
     // 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 new call sites to the src/lib/router facade. Warn, not error: ~310 pre-existing
-    // violations are what the v6 migration is working through (allowlisted in overrides below)
     "no-restricted-globals": [
       "error",
       {
@@ -592,25 +589,6 @@
         "no-console": "off",
         "sonarjs/cognitive-complexity": "off"
       }
-    },
-    {
-      // The react-router allowlist from docs/react-router-v6-migration.md: the facade itself,
-      // the route table, the router mount, the two navigation hooks, the history singleton
-      // and the two harnesses that mount a router (jest and Storybook).
-      // Test files are deliberately absent, their router imports go away outright.
-      "files": [
-        "src/lib/router/**",
-        "src/AppRoutes/**",
-        "src/app/AppRouter.tsx",
-        "src/hooks/useSafeNavigate.ts",
-        "src/hooks/useNavigationBlocker.ts",
-        "src/lib/history.ts",
-        "src/tests/router.tsx",
-        "src/storybook/renderAtRoute.tsx"
-      ],
-      "rules": {
-        "signoz/no-direct-react-router-import": "off"
-      }
     }
   ]
 }

frontend/.storybook/preview-head.html

@@ -70,3 +70,49 @@
 		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
 	})();
 </script>
+
+<script>
+	// Storybook has no microphone. Chromium's recognizer asks for one and for
+	// Google's speech service, and the `not-allowed` or `network` it reports makes
+	// the assistant hide its mic for the rest of the tab. This one starts
+	// listening at once and hears only what a story passes to `hear`.
+	(() => {
+		class StorySpeechRecognition extends EventTarget {
+			static listening = null;
+			lang = 'en-US';
+			continuous = false;
+			interimResults = false;
+			onstart = null;
+			onresult = null;
+			onerror = null;
+			onend = null;
+
+			start() {
+				StorySpeechRecognition.listening = this;
+				setTimeout(() => this.onstart?.());
+			}
+
+			stop() {
+				if (StorySpeechRecognition.listening === this) {
+					StorySpeechRecognition.listening = null;
+				}
+				setTimeout(() => this.onend?.());
+			}
+
+			abort() {
+				this.stop();
+			}
+
+			/** An interim result: the words so far, still listening. */
+			hear(transcript) {
+				const result = Object.assign([{ transcript, confidence: 1 }], {
+					isFinal: false,
+				});
+				this.onresult?.({ resultIndex: 0, results: [result] });
+			}
+		}
+
+		window.SpeechRecognition = StorySpeechRecognition;
+		window.webkitSpeechRecognition = StorySpeechRecognition;
+	})();
+</script>

frontend/.storybook/preview.tsx

@@ -122,7 +122,21 @@ const preview: Preview = {
 							['List', 'New', 'Edit'],
 						],
 						'Dashboards',
-						['List', 'Detail', 'Panel Editor', 'Public'],
+						[
+							'List',
+							'Detail',
+							[
+								'Overview',
+								'Settings',
+								'Variables',
+								'New Variable',
+								'Edit Variable',
+								'Authz',
+							],
+							'Panel Editor',
+							['Overview', 'Chart Options', 'Thresholds and Links'],
+							'Public',
+						],
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',

frontend/.storybook/test-runner.ts

@@ -23,6 +23,13 @@ const IGNORED_MESSAGES = [
 	// (YouTube embeds, the docs pane) so they hit the real network instead of
 	// an unanswered msw request; the block is the point, not a bug.
 	/violates the following Content Security Policy directive/,
+	// The filter editor's ANTLR parser reports every syntax error through
+	// `console.error` (`line 1:14 missing ...`), so each partial expression
+	// typed into it logs one; the editor shows the same errors on screen.
+	/^line \d+:\d+ /,
+	// Chromium's echo of a 4xx/5xx response, which the `[response]` entry below
+	// already reports with its URL and the time its request left.
+	/^Failed to load resource: the server responded with a status of /,
 ];
 
 interface CapturedMessage {
@@ -86,7 +93,9 @@ const config: TestRunnerConfig = {
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
 				messages.push({
-					at: Date.now(),
+					// The browser's clock, when the request left: a busy runner receives
+					// the outgoing story's responses after the next story has started.
+					at: response.request().timing().startTime,
 					text: `[response] ${response.status()} ${response.url()}`,
 				});
 			}

frontend/AGENTS.md

@@ -25,6 +25,7 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
   - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
+- Before styling a `@signozhq/ui` component, check its props in `node_modules/@signozhq/ui/dist/<component>/*.d.ts` for `className`/`style` support; some omit them. Avoid overriding the component's CSS vars unless explicitly needed.
 - When writing code that could need authorization checks, read ./src/lib/authz/README.md
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:

frontend/jest.config.ts

@@ -13,6 +13,7 @@ const config: Config.InitialOptions = {
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
 	modulePathIgnorePatterns: ['dist'],
 	moduleNameMapper: {
+		'^@signozhq/ui/sonner$': '<rootDir>/src/shims/signozhq-ui-sonner.tsx',
 		'\\.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)$':
 			'<rootDir>/__mocks__/fileMock.ts',
 		// The icon glob module uses `import.meta.glob` (Vite-only); jest can't parse

frontend/jest.setup.ts

@@ -5,8 +5,6 @@
 /**
  * Adds custom matchers from the react testing library to all tests
  */
-import { TextDecoder, TextEncoder } from 'node:util';
-
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import 'jest-styled-components';
@@ -16,14 +14,6 @@ import { server } from './src/mocks-server/server';
 import './src/styles.scss';
 // Establish API mocking before all tests.
 
-// react-router@7's entry point pulls in its server-runtime cookie signing,
-// which builds a TextEncoder at module scope. jsdom ships neither encoder, so
-// importing anything from the router throws before a test starts.
-Object.assign(globalThis, {
-	TextEncoder: globalThis.TextEncoder ?? TextEncoder,
-	TextDecoder: globalThis.TextDecoder ?? TextDecoder,
-});
-
 // Mock window.matchMedia
 window.matchMedia =
 	window.matchMedia ||
@@ -51,6 +41,20 @@ if (!HTMLElement.prototype.releasePointerCapture) {
 	HTMLElement.prototype.releasePointerCapture = function (): void {};
 }
 
+// jsdom has no PointerEvent; Base UI Switch constructs one on click.
+if (typeof window.PointerEvent === 'undefined') {
+	class PointerEventMock extends MouseEvent {
+		pointerId: number;
+		pointerType: string;
+		constructor(type: string, init: PointerEventInit = {}) {
+			super(type, init);
+			this.pointerId = init.pointerId ?? 0;
+			this.pointerType = init.pointerType ?? '';
+		}
+	}
+	(window as any).PointerEvent = PointerEventMock;
+}
+
 if (typeof window.IntersectionObserver === 'undefined') {
 	class IntersectionObserverMock {
 		observe(): void {}

frontend/package.json

@@ -52,9 +52,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.1.6",
+    "@signozhq/design-tokens": "file:.yalc/@signozhq/design-tokens",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.1.0",
+    "@signozhq/ui": "file:.yalc/@signozhq/ui",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -82,7 +82,7 @@
     "dompurify": "3.4.15",
     "event-source-polyfill": "1.0.31",
     "eventemitter3": "5.0.1",
-    "history": "5.3.0",
+    "history": "4.10.1",
     "html-to-image": "1.11.13",
     "http-status-codes": "2.3.0",
     "i18next": "^21.6.12",
@@ -118,7 +118,8 @@
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
     "react-rnd": "^10.5.3",
-    "react-router": "7.18.4",
+    "react-router-dom": "^5.2.0",
+    "react-router-dom-v5-compat": "6.30.6",
     "react-syntax-highlighter": "15.5.0",
     "react-use": "^17.3.2",
     "react-virtuoso": "4.0.3",
@@ -173,6 +174,7 @@
     "@types/crypto-js": "4.2.2",
     "@types/d3-hierarchy": "1.1.11",
     "@types/event-source-polyfill": "^1.0.0",
+    "@types/history": "4.7.11",
     "@types/jest": "30.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^16.10.3",
@@ -184,6 +186,7 @@
     "@types/react-grid-layout": "^1.1.2",
     "@types/react-redux": "^7.1.11",
     "@types/react-resizable": "3.0.3",
+    "@types/react-router-dom": "^5.1.6",
     "@types/react-syntax-highlighter": "15.5.13",
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",

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

@@ -1,91 +0,0 @@
-import { ruleTester } from './rule-tester.mjs';
-
-const FACADE = 'src/lib/router facade';
-const HISTORY = 'lib/history singleton';
-
-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: 'jest.mock is not an import',
-			code: "jest.mock('lib/history');",
-		},
-		{
-			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: '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 is flagged as the v7 re-export shim',
-			code: "import { Outlet } from 'react-router-dom';",
-			errors: [{ message: 'only a re-export shim' }],
-		},
-		{
-			name: 'lib/history default import',
-			code: "import history from 'lib/history';",
-			errors: [{ message: HISTORY }],
-		},
-		{
-			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

@@ -1,99 +0,0 @@
-/**
- * Rule: no-direct-react-router-import
- *
- * The v5 -> v6 migration (docs/react-router-v6-migration.md) routes every router
- * concern through the `src/lib/router/*` facade, so a version flip is a change to
- * one directory instead of ~300 call sites. This rule keeps new call sites from
- * reaching past it.
- *
- * `react-router-dom` is still flagged even though the package is gone: on v7 it is a
- * re-export shim over `react-router`, so reinstalling it would split the tree again.
- *
- * `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, the two navigation hooks, the
- * history singleton and the test harness — 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 MESSAGE_IDS = {
-	'react-router': 'router',
-	'react-router-dom': 'routerDom',
-	'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: {
-			router:
-				'Do not import react-router directly. Use the src/lib/router facade (useAppNavigate, useAppLocation, useAppParams, AppLink, Redirect, matchRoute) so a version flip stays contained. See frontend/docs/react-router-v6-migration.md.',
-			routerDom:
-				'Do not import react-router-dom. The app is on react-router; on v7 react-router-dom is only a re-export shim, and installing it puts two copies of the router in the tree. Use the src/lib/router facade. See frontend/docs/react-router-v7-upgrade.md.',
-			historySingleton:
-				'Do not import the lib/history singleton. Use useAppNavigate() inside components, or the imperative helpers in src/lib/router/navigation.ts outside them — history loses basename handling under v6. See frontend/docs/react-router-v6-migration.md.',
-		},
-	},
-
-	create(context) {
-		const report = (sourceNode) => {
-			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 });
-			}
-		};
-
-		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]);
-				}
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -16,7 +16,6 @@ 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: {
@@ -34,6 +33,5 @@ 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

@@ -74,6 +74,11 @@ overrides:
  #      (postcss-selector-parser ^7.0.0)
  # remove: blocked, 4.2.0 is latest and the range is open, so the floor is what pulls the fix
  postcss-selector-parser@>=7.1.0 <7.1.3: '>=7.1.3 <8'
+ # via: @signozhq/ui > nuqs@2 (react-router ^6.4.0 || ^7)
+ # remove: blocked. GHSA-wrjc-x8rr-h8h6 and the deserializeErrors advisory are patched
+ # only in 7.18.0. Do NOT open the cap: react-router >=7 requires React 19 and breaks
+ # the app-wide CompatRouter, so those two moderates stay until the app moves to React 19
+ react-router@>=6.7.0 <6.30.6: '>=6.30.6 <7'
  # via: msw@1.3.2 (devDep) > inquirer@8 > external-editor@3.1.0 (tmp ^0.0.33)
  # remove: upgrade msw to >=2 (drops the inquirer/external-editor chain)
  tmp@<0.2.6: '>=0.2.6 <0.3.0'

frontend/public/locales/en-GB/titles.json

@@ -33,7 +33,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"LIVE_LOGS": "SigNoz | Live Logs",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",
 	"LIST_LICENSES": "SigNoz | List of Licenses",

frontend/public/locales/en/titles.json

@@ -42,7 +42,6 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
-	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
 	"PASSWORD_RESET": "SigNoz | Password Reset",

frontend/src/AppRoutes/Private.tsx

@@ -1,4 +1,5 @@
 import { ReactChild, useCallback, useMemo } from 'react';
+import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { useListUsers } from 'api/generated/services/users';
@@ -8,9 +9,6 @@ import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { isEmpty } from 'lodash-es';
-import { matchRoute } from 'lib/router/matchRoute';
-import { Redirect } from 'lib/router/Redirect';
-import { useAppLocation } from 'lib/router/useAppLocation';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
@@ -30,7 +28,7 @@ import routes, {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
-	const location = useAppLocation();
+	const location = useLocation();
 	const { pathname } = location;
 	const {
 		org,
@@ -49,11 +47,10 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		() =>
 			new Map(
 				[...routes, LIST_LICENSES, SUPPORT_ROUTE].map((e) => {
-					const patterns = Array.isArray(e.path) ? e.path : [e.path];
-					const matches = patterns.some(
-						(pattern) => matchRoute(pathname, pattern) !== null,
-					);
-					return [matches ? 'current' : null, e];
+					const currentPath = matchPath(pathname, {
+						path: e.path,
+					});
+					return [currentPath === null ? null : 'current', e];
 				}),
 			),
 		[pathname],
@@ -245,7 +242,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			);
 			if (fromPathname) {
 				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-				return <Redirect to={fromPathname} replace={false} />;
+				return <Redirect to={fromPathname} />;
 			}
 			if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
 				return <Redirect to={ROUTES.HOME} />;
@@ -259,7 +256,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 		if (fromPathname) {
 			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-			return <Redirect to={fromPathname} replace={false} />;
+			return <Redirect to={fromPathname} />;
 		}
 		return <Redirect to={ROUTES.HOME} />;
 	} else {

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter, Route, Routes, useLocation } from 'react-router';
+import { MemoryRouter, Route, Switch, useLocation } from 'react-router-dom';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
@@ -237,17 +237,12 @@ function buildPrivateRouteTree(
 			<MemoryRouter initialEntries={[initialRoute]}>
 				<AppContext.Provider value={contextValue}>
 					<PrivateRoute>
-						<Routes>
-							<Route
-								path="*"
-								element={
-									<>
-										<div data-testid="children-rendered">Content</div>
-										<LocationDisplay />
-									</>
-								}
-							/>
-						</Routes>
+						<Switch>
+							<Route path="*">
+								<div data-testid="children-rendered">Content</div>
+								<LocationDisplay />
+							</Route>
+						</Switch>
 					</PrivateRoute>
 				</AppContext.Provider>
 			</MemoryRouter>
@@ -305,14 +300,6 @@ describe('PrivateRoute', () => {
 			);
 		});
 
-		it('should redirect /logs-explorer/live to /logs/logs-explorer/live', () => {
-			renderPrivateRoute({ initialRoute: '/logs-explorer/live' });
-
-			expect(screen.getByTestId('location-display')).toHaveTextContent(
-				'/logs/logs-explorer/live',
-			);
-		});
-
 		it('should redirect /logs-save-views to /logs/saved-views', () => {
 			renderPrivateRoute({ initialRoute: '/logs-save-views' });
 
@@ -1601,7 +1588,6 @@ describe('PrivateRoute', () => {
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
-			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,

frontend/src/AppRoutes/index.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Routes } from 'react-router';
+import { Route, Router, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -11,17 +12,18 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
-import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
+import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
-import { getCurrentLocation, navigate, subscribe } from 'lib/router/navigation';
+import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
@@ -37,6 +39,12 @@ import defaultRoutes, {
 	SUPPORT_ROUTE,
 } from './routes';
 
+const appRouter = (children: ReactNode): ReactNode => (
+	<Router history={history}>
+		<CompatRouter>{children}</CompatRouter>
+	</Router>
+);
+
 const appLayout = (children: ReactNode): ReactNode => (
 	<AppLayout>{children}</AppLayout>
 );
@@ -51,7 +59,6 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
-		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -59,18 +66,18 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isSavedViewEnabled = useSavedViewEnabled();
+	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
-	// Through the facade, not the raw history: the router owns the base path
-	// now, so `history.location.pathname` would still carry it.
-	const [pathname, setPathname] = useState(getCurrentLocation().pathname);
+	const [pathname, setPathname] = useState(history.location.pathname);
 
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
 
 	const [isSentryInitialized, setIsSentryInitialized] = useState(false);
 
 	useEffect(() => {
-		return subscribe(({ location }) => {
+		return history.listen((location) => {
 			setPathname(location.pathname);
 		});
 	}, []);
@@ -248,7 +255,9 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
+		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
+			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -258,71 +267,32 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname]);
+	}, [pathname, isSavedViewEnabled]);
 
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	// Identity for the Pylon widget. Whether this user gets Pylon at all is
+	// `useChatSupport`'s call — this only fills in who they are.
 	useEffect(() => {
-		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
-		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
-		// to something went wrong which would ideally need a reload.
-		if (
-			!isFetchingFeatureFlags &&
-			(featureFlags || featureFlagsFetchError) &&
-			activeLicense &&
-			trialInfo
-		) {
-			let isChatSupportEnabled = false;
-			let isPremiumSupportEnabled = false;
-			if (featureFlags && featureFlags.length > 0) {
-				isChatSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
-						?.active || false;
-
-				isPremiumSupportEnabled =
-					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
-						?.active || false;
-			}
-			const showAddCreditCardModal =
-				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
-
-			if (
-				isLoggedInState &&
-				isChatSupportEnabled &&
-				!showAddCreditCardModal &&
-				(isCloudUser || isEnterpriseSelfHostedUser) &&
-				window.signozBootData?.settings?.pylon?.enabled
-			) {
-				const email = user.email || '';
-				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-				let emailHash = '';
-
-				if (email && secret) {
-					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-				}
-
-				window.pylon = {
-					chat_settings: {
-						app_id: window.signozBootData?.settings?.pylon?.appId,
-						email: user.email,
-						name: user.displayName || user.email,
-						email_hash: emailHash,
-					},
-				};
-			}
+		if (chatSupport !== ChatSupportState.Pylon) {
+			return;
 		}
-	}, [
-		isLoggedInState,
-		user,
-		pathname,
-		trialInfo?.trialConvertedToSubscription,
-		featureFlags,
-		isFetchingFeatureFlags,
-		featureFlagsFetchError,
-		activeLicense,
-		trialInfo,
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-	]);
+
+		const email = user.email || '';
+		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+		let emailHash = '';
+
+		if (email && secret) {
+			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+		}
+
+		window.pylon = {
+			chat_settings: {
+				app_id: window.signozBootData?.settings?.pylon?.appId,
+				email: user.email,
+				name: user.displayName || user.email,
+				email_hash: emailHash,
+			},
+		};
+	}, [chatSupport, user]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {
@@ -434,7 +404,7 @@ function App(): JSX.Element {
 		// this needs to be on top of data missing error because if there is an error, data will never be loaded and it will
 		// move to indefinitive loading
 		if (userFetchError && pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-			navigate(ROUTES.SOMETHING_WENT_WRONG, { replace: true });
+			history.replace(ROUTES.SOMETHING_WENT_WRONG);
 		}
 
 		// if all of the data is not set then return a spinner, this is required because there is some gap between loading states and data setting
@@ -450,6 +420,7 @@ function App(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<AppShell
+				router={appRouter}
 				overlays={
 					isLoggedInState && (
 						<>
@@ -462,19 +433,18 @@ function App(): JSX.Element {
 				<PrivateRoute>
 					<AppPageProviders layout={appLayout}>
 						<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-							<Routes>
-								{routes.flatMap(({ path, component: Component, nested }) =>
-									(Array.isArray(path) ? path : [path]).map((pattern) => (
-										<Route
-											key={pattern}
-											path={nested ? `${pattern}/*` : pattern}
-											element={<Component />}
-										/>
-									)),
-								)}
-								<Route path="/" element={<Home />} />
-								<Route path="*" element={<NotFound />} />
-							</Routes>
+							<Switch>
+								{routes.map(({ path, component, exact }) => (
+									<Route
+										key={`${path}`}
+										exact={exact}
+										path={path}
+										component={component}
+									/>
+								))}
+								<Route exact path="/" component={Home} />
+								<Route path="*" component={NotFound} />
+							</Switch>
 						</Suspense>
 					</AppPageProviders>
 				</PrivateRoute>

frontend/src/AppRoutes/pageComponents.ts

@@ -154,10 +154,6 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
-export const LiveLogs = Loadable(
-	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
-);
-
 export const PipelinePage = Loadable(
 	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 
 import {
@@ -23,7 +23,6 @@ import {
 	LicensePage,
 	ListAllALertsPage,
 	LLMObservabilityPage,
-	LiveLogs,
 	Login,
 	Logs,
 	LogsIndexToFields,
@@ -61,25 +60,27 @@ const routes: AppRoutes[] = [
 	{
 		component: SignupPage,
 		path: ROUTES.SIGN_UP,
+		exact: true,
 		isPrivate: false,
 		key: 'SIGN_UP',
 	},
 	{
 		path: ROUTES.GET_STARTED_WITH_CLOUD,
-		nested: true,
+		exact: false,
 		component: OnboardingV2,
 		isPrivate: true,
 		key: 'GET_STARTED_WITH_CLOUD',
 	},
 	{
 		path: ROUTES.HOME,
+		exact: true,
 		component: Home,
 		isPrivate: true,
 		key: 'HOME',
 	},
 	{
 		path: ROUTES.ONBOARDING,
-		nested: true,
+		exact: false,
 		component: OrgOnboarding,
 		isPrivate: true,
 		key: 'ONBOARDING',
@@ -87,23 +88,27 @@ const routes: AppRoutes[] = [
 	{
 		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,
+		exact: true,
 		isPrivate: true,
 		key: 'LOGS_INDEX_FIELDS',
 	},
 	{
 		component: ServicesTablePage,
 		path: ROUTES.APPLICATION,
+		exact: true,
 		isPrivate: true,
 		key: 'APPLICATION',
 	},
 	{
 		path: ROUTES.SERVICE_METRICS,
+		exact: true,
 		component: ServiceMetricsPage,
 		isPrivate: true,
 		key: 'SERVICE_METRICS',
 	},
 	{
 		path: ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
+		exact: true,
 		component: ServiceTopLevelOperationsPage,
 		isPrivate: true,
 		key: 'SERVICE_TOP_LEVEL_OPERATIONS',
@@ -112,276 +117,313 @@ const routes: AppRoutes[] = [
 		path: ROUTES.SERVICE_MAP,
 		component: ServiceMapPage,
 		isPrivate: true,
+		exact: true,
 		key: 'SERVICE_MAP',
 	},
 	{
 		path: ROUTES.LOGS_SAVE_VIEWS,
 		component: LogsSaveViews,
 		isPrivate: true,
+		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACE_DETAIL,
+		exact: true,
 		component: TraceDetailV3,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
-		nested: true,
+		exact: false,
 		component: SettingsPage,
 		isPrivate: true,
 		key: 'SETTINGS',
 	},
 	{
 		path: ROUTES.USAGE_EXPLORER,
+		exact: true,
 		component: UsageExplorerPage,
 		isPrivate: true,
 		key: 'USAGE_EXPLORER',
 	},
 	{
 		path: ROUTES.ALL_DASHBOARD,
+		exact: true,
 		component: DashboardsListPage,
 		isPrivate: true,
 		key: 'ALL_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD,
+		exact: true,
 		component: DashboardPage,
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
 	{
 		path: ROUTES.PUBLIC_DASHBOARD,
-		nested: true,
+		exact: false,
 		component: PublicDashboardPage,
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
+		exact: true,
 		component: DashboardPanelEditorPage,
 		isPrivate: true,
 		key: 'DASHBOARD_PANEL_EDITOR',
 	},
 	{
 		path: ROUTES.EDIT_ALERTS,
+		exact: true,
 		component: EditRulesPage,
 		isPrivate: true,
 		key: 'EDIT_ALERTS',
 	},
 	{
 		path: ROUTES.LIST_ALL_ALERT,
+		exact: true,
 		component: ListAllALertsPage,
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
 	{
 		path: ROUTES.ALERTS_NEW,
+		exact: true,
 		component: CreateNewAlerts,
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
 	{
 		path: ROUTES.ALERT_HISTORY,
+		exact: true,
 		component: AlertHistory,
 		isPrivate: true,
 		key: 'ALERT_HISTORY',
 	},
 	{
 		path: ROUTES.ALERT_OVERVIEW,
+		exact: true,
 		component: AlertOverview,
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
+		exact: true,
 		component: TracesExplorer,
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
 	{
 		path: ROUTES.TRACES_SAVE_VIEWS,
+		exact: true,
 		component: TracesSaveViews,
 		isPrivate: true,
 		key: 'TRACES_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
+		exact: true,
 		component: TracesFunnels,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS_DETAIL,
+		exact: true,
 		component: TracesFunnelDetails,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS_DETAIL',
 	},
 	{
 		path: ROUTES.CHANNELS_NEW,
+		exact: true,
 		component: ChannelsNew,
 		isPrivate: true,
 		key: 'CHANNELS_NEW',
 	},
 	{
 		path: ROUTES.CHANNELS_EDIT,
+		exact: true,
 		component: ChannelsEdit,
 		isPrivate: true,
 		key: 'CHANNELS_EDIT',
 	},
 	{
 		path: ROUTES.ALL_ERROR,
+		exact: true,
 		isPrivate: true,
 		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
 	{
 		path: ROUTES.ERROR_DETAIL,
+		exact: true,
 		component: ErrorDetails,
 		isPrivate: true,
 		key: 'ERROR_DETAIL',
 	},
 	{
 		path: ROUTES.VERSION,
+		exact: true,
 		component: StatusPage,
 		isPrivate: true,
 		key: 'VERSION',
 	},
 	{
 		path: ROUTES.LOGS,
+		exact: true,
 		component: Logs,
 		key: 'LOGS',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.LIVE_LOGS,
-		component: LiveLogs,
-		key: 'LIVE_LOGS',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
+		exact: true,
 		component: PipelinePage,
 		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGIN,
+		exact: true,
 		component: Login,
 		isPrivate: false,
 		key: 'LOGIN',
 	},
 	{
 		path: ROUTES.FORGOT_PASSWORD,
+		exact: true,
 		component: ForgotPassword,
 		isPrivate: false,
 		key: 'FORGOT_PASSWORD',
 	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
+		exact: true,
 		component: UnAuthorized,
 		key: 'UN_AUTHORIZED',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.PASSWORD_RESET,
+		exact: true,
 		component: PasswordReset,
 		key: 'PASSWORD_RESET',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.SOMETHING_WENT_WRONG,
+		exact: true,
 		component: SomethingWentWrong,
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
+		exact: true,
 		component: WorkspaceBlocked,
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 	{
 		path: ROUTES.WORKSPACE_SUSPENDED,
+		exact: true,
 		component: WorkspaceSuspended,
 		isPrivate: true,
 		key: 'WORKSPACE_SUSPENDED',
 	},
 	{
 		path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
+		exact: true,
 		component: WorkspaceAccessRestricted,
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
 	{
 		path: ROUTES.INTEGRATIONS_DETAIL,
+		exact: true,
 		component: IntegrationsDetailsPage,
 		isPrivate: true,
 		key: 'INTEGRATIONS_DETAIL',
 	},
 	{
 		path: ROUTES.INTEGRATIONS,
+		exact: true,
 		component: Integrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
+		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		exact: true,
 		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
+		exact: true,
 		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_EXPLORER,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VIEWS,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
+		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VOLUME_CONTROL',
 		isPrivate: true,
@@ -389,54 +431,63 @@ const routes: AppRoutes[] = [
 
 	{
 		path: ROUTES.METER,
+		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
+		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER_VIEWS,
+		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.API_MONITORING,
+		exact: true,
 		component: ApiMonitoring,
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
 	{
 		path: [ROUTES.AI_ASSISTANT_BASE, ROUTES.AI_ASSISTANT],
+		exact: true,
 		component: AIAssistantPage,
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_ATTRIBUTE_MAPPING',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_OVERVIEW,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_EXPLORER,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
+		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_CONFIGURATION',
 		isPrivate: true,
@@ -445,6 +496,7 @@ const routes: AppRoutes[] = [
 
 export const SUPPORT_ROUTE: AppRoutes = {
 	path: ROUTES.SUPPORT,
+	exact: true,
 	component: SupportPage,
 	key: 'SUPPORT',
 	isPrivate: true,
@@ -452,6 +504,7 @@ export const SUPPORT_ROUTE: AppRoutes = {
 
 export const LIST_LICENSES: AppRoutes = {
 	path: ROUTES.LIST_LICENSES,
+	exact: true,
 	component: LicensePage,
 	isPrivate: true,
 	key: 'LIST_LICENSES',
@@ -460,7 +513,6 @@ export const LIST_LICENSES: AppRoutes = {
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
-	'/logs-explorer/live': '/logs/logs-explorer/live',
 	'/logs-save-views': '/logs/saved-views',
 	'/traces-save-views': '/traces/saved-views',
 	'/settings/access-tokens': '/settings/service-accounts',
@@ -480,15 +532,9 @@ export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 ];
 
 export interface AppRoutes {
-	component: ComponentType;
-	/** An array registers the same component under each pattern. */
-	path: string | string[];
-	/**
-	 * The route renders its own child routes, so it matches as a prefix. v6
-	 * matches the whole path by default, so the mount appends a `/*` splat for
-	 * these and nothing for the rest.
-	 */
-	nested?: boolean;
+	component: RouteProps['component'];
+	path: RouteProps['path'];
+	exact: RouteProps['exact'];
 	isPrivate: boolean;
 	key: keyof typeof ROUTES;
 }

frontend/src/api/ErrorResponseHandler.ts

@@ -41,17 +41,16 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 			message: data?.error,
 		};
 	}
+	// Avoid logging error when the request was just cancelled for whatever reason
+	if (isCancel(error)) {
+		return {
+			statusCode: 500,
+			payload: null,
+			error: 'Something went wrong',
+			message: null,
+		};
+	}
 	if (request) {
-		// Avoid logging error when the request was just cancelled for whatever reason
-		if (isCancel(error)) {
-			return {
-				statusCode: 500,
-				payload: null,
-				error: 'Something went wrong',
-				message: null,
-			};
-		}
-
 		// client never received a response, or request never left
 		console.error('client never received a response, or request never left');
 

frontend/src/api/__tests__/ErrorResponseHandler.test.ts

@@ -0,0 +1,22 @@
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError, CanceledError } from 'axios';
+
+describe('ErrorResponseHandler', () => {
+	// axios aborts a request whose signal fired before it was sent without ever
+	// creating one, so the error carries neither `response` nor `request`.
+	it('treats a request cancelled before it was sent as a cancellation', () => {
+		const consoleError = jest
+			.spyOn(console, 'error')
+			.mockImplementation(() => undefined);
+
+		expect(ErrorResponseHandler(new CanceledError() as AxiosError)).toEqual({
+			statusCode: 500,
+			payload: null,
+			error: 'Something went wrong',
+			message: null,
+		});
+		expect(consoleError).not.toHaveBeenCalled();
+
+		consoleError.mockRestore();
+	});
+});

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

@@ -41,6 +41,8 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
@@ -73,7 +75,8 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * @deprecated
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -115,6 +118,7 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 
@@ -134,6 +138,7 @@ export function useListRules<
 }
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -1388,3 +1393,97 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
+/**
+ * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
+ * @summary List alert rules (v3)
+ */
+export const listRulesV3 = (
+	params?: ListRulesV3Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListRulesV3200>({
+		url: `/api/v3/rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
+	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListRulesV3QueryOptions = <
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
+		signal,
+	}) => listRulesV3(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRulesV3>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesV3QueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRulesV3>>
+>;
+export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List alert rules (v3)
+ */
+
+export function useListRulesV3<
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesV3QueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List alert rules (v3)
+ */
+export const invalidateListRulesV3 = async (
+	queryClient: QueryClient,
+	params?: ListRulesV3Params,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesV3QueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -104,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[];
+	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
 	/**
 	 * @type string
 	 * @format password
@@ -125,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[];
+	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -166,13 +166,19 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
 	email = 'email',
 }
-export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
+export type AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelEmailConfigDTOHeaders =
+	AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf | null;
+
 export interface AlertmanagertypesChannelEmailConfigDTO {
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
 	/**
@@ -239,10 +245,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
 	pagerduty = 'pagerduty',
 }
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
+export type AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelPagerdutyConfigDTODetails =
+	AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	/**
 	 * @type string
@@ -265,7 +277,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -307,10 +319,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
 	opsgenie = 'opsgenie',
 }
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
+export type AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelOpsgenieConfigDTODetails =
+	AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf | null;
+
 export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	/**
 	 * @type string
@@ -326,7 +344,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -423,10 +441,16 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
+export type AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf = {
 	[key: string]: unknown;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelJiraConfigDTOCustomFields =
+	AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf | null;
+
 export interface AlertmanagertypesChannelJiraConfigDTO {
 	/**
 	 * @type string
@@ -434,7 +458,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -450,9 +474,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	labels?: string[];
+	labels?: string[] | null;
 	/**
 	 * @type string
 	 */
@@ -543,17 +567,23 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
 	incidentio = 'incidentio',
 }
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf = {
 	[key: string]: string;
 };
 
+/**
+ * @nullable
+ */
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata =
+	AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf | null;
+
 export interface AlertmanagertypesChannelIncidentIOConfigDTO {
 	/**
 	 * @type string
 	 */
 	description?: string;
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
 	/**
@@ -3366,6 +3396,37 @@ export interface CloudintegrationtypesAWSServiceConfigDTO {
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
 }
 
+export enum CloudintegrationtypesRegionStateDTO {
+	enabled = 'enabled',
+	disabled = 'disabled',
+}
+export interface CloudintegrationtypesRegionSyncStateDTO {
+	state: CloudintegrationtypesRegionStateDTO;
+}
+
+export type CloudintegrationtypesSyncStateDTORegions = {
+	[key: string]: CloudintegrationtypesRegionSyncStateDTO;
+};
+
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesSyncStateDTO = {
+	/**
+	 * @type boolean
+	 */
+	inSync: boolean;
+	/**
+	 * @type object
+	 */
+	regions: CloudintegrationtypesSyncStateDTORegions;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	version: number;
+} | null;
+
 export type CloudintegrationtypesAgentReportDTODataAnyOf = {
 	[key: string]: unknown;
 };
@@ -3384,6 +3445,7 @@ export type CloudintegrationtypesAgentReportDTO = {
 	 * @type object,null
 	 */
 	data: CloudintegrationtypesAgentReportDTOData;
+	syncState: CloudintegrationtypesSyncStateDTO | null;
 	/**
 	 * @type integer
 	 * @format int64
@@ -3812,6 +3874,7 @@ export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	 * @format date-time
 	 */
 	removedAt: string | null;
+	syncState: CloudintegrationtypesSyncStateDTO | null;
 }
 
 export interface CloudintegrationtypesServiceMetadataDTO {
@@ -3882,6 +3945,10 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type string
 	 */
 	providerAccountId?: string;
+	/**
+	 * @type integer,null
+	 */
+	syncedVersion?: number | null;
 }
 
 export interface CloudintegrationtypesStorableIntegrationDashboardDTO {
@@ -10188,6 +10255,99 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
+export interface RuletypesLabelPairDTO {
+	/**
+	 * @type string
+	 */
+	key: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export enum RuletypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum RuletypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+	state = 'state',
+	severity = 'severity',
+}
+export type RuletypesListableRuleDTOLabels = { [key: string]: string };
+
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
+export interface RuletypesListableRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType: RuletypesAlertTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesListableRuleDTOLabels;
+	ruleType: RuletypesRuleTypeDTO;
+	state: RuletypesAlertStateDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesListableRulesDTO {
+	/**
+	 * @type array
+	 */
+	labels: RuletypesLabelPairDTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
+	/**
+	 * @type array
+	 */
+	rules: RuletypesListableRuleDTO[];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	total: number;
+}
+
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10284,11 +10444,6 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -14189,6 +14344,45 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
+export type ListRulesV3Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	query?: string;
+	/**
+	 * @type array
+	 * @description undefined
+	 */
+	states?: string[];
+	/**
+	 * @description undefined
+	 */
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @description undefined
+	 */
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+};
+
+export type ListRulesV3200 = {
+	data: RuletypesListableRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFlamegraphPathParameters = {
 	traceID: 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 { navigate } from 'lib/router/navigation';
+import history from 'lib/history';
 
 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'));
-	navigate(ROUTES.LOGIN);
+	history.push(ROUTES.LOGIN);
 };

frontend/src/app/AppProviders.tsx

@@ -16,7 +16,6 @@ export interface AppProvidersProps {
 	store: Store;
 	queryClient: QueryClient;
 	appContext: AppLayer;
-	router: AppLayer;
 	searchParams: AppLayer;
 }
 
@@ -28,34 +27,27 @@ export interface AppProvidersProps {
  * A new provider belongs here only if it holds process-wide state that does not
  * depend on the user, the license or the route. One that fetches on mount would
  * fire unauthenticated from here; put it in `AppShell` or lower.
- *
- * `router` is the outermost layer because `searchParams` (nuqs) reads the
- * router's `useNavigate` / `useSearchParams`. Everything below, including the
- * boot spinner, therefore renders inside the router.
  */
 function AppProviders({
 	children,
 	store,
 	queryClient,
 	appContext,
-	router,
 	searchParams,
 }: AppProvidersProps): JSX.Element {
 	return (
 		<HelmetProvider>
-			{router(
-				searchParams(
-					<ThemeProvider>
-						<TimezoneProvider>
-							<QueryClientProvider client={queryClient}>
-								<Provider store={store}>
-									<GlobalTimeStoreAdapter />
-									{appContext(children)}
-								</Provider>
-							</QueryClientProvider>
-						</TimezoneProvider>
-					</ThemeProvider>,
-				),
+			{searchParams(
+				<ThemeProvider>
+					<TimezoneProvider>
+						<QueryClientProvider client={queryClient}>
+							<Provider store={store}>
+								<GlobalTimeStoreAdapter />
+								{appContext(children)}
+							</Provider>
+						</QueryClientProvider>
+					</TimezoneProvider>
+				</ThemeProvider>,
 			)}
 		</HelmetProvider>
 	);

frontend/src/app/AppRouter.tsx

@@ -1,26 +0,0 @@
-import { ReactNode } from 'react';
-import { unstable_HistoryRouter as HistoryRouter } from 'react-router';
-import history from 'lib/history';
-import { getBasePath } from 'utils/basePath';
-
-/**
- * The outermost layer. It is above `NuqsAdapter` on purpose:
- * `nuqs/adapters/react-router/v7` calls `useNavigate` and `useSearchParams`, so
- * it only works inside a router.
- *
- * Transitions are off on purpose: under one React keeps the previous screen up
- * instead of committing the Suspense fallback, so a route whose chunk is not
- * cached yet renders no loader at all. Rendering pending UI under it needs
- * `useNavigation()` and a data router. See docs/react-router-v7-upgrade.md.
- */
-export function appRouter(children: ReactNode): ReactNode {
-	return (
-		<HistoryRouter
-			basename={getBasePath()}
-			history={history}
-			useTransitions={false}
-		>
-			{children}
-		</HistoryRouter>
-	);
-}

frontend/src/app/AppShell.tsx

@@ -5,8 +5,11 @@ import { NotificationProvider } from 'hooks/useNotifications';
 import { CmdKProvider } from 'providers/cmdKProvider';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 
+import { AppLayer } from './types';
+
 export interface AppShellProps {
 	children: ReactNode;
+	router: AppLayer;
 	/** Mounted beside the routed content: the command palette and its siblings. */
 	overlays?: ReactNode;
 }
@@ -16,26 +19,28 @@ export interface AppShellProps {
  * fetches settle, above `PrivateRoute`, so it also covers the redirects and the
  * not-found route, and it survives every navigation.
  *
- * A new provider belongs here if it needs the user and has to outlive the page:
- * a global overlay, a shortcut host, anything one route opens and the next one
- * keeps. The router itself is higher up, in `AppProviders`.
+ * A new provider belongs here if it needs the router or the user and has to
+ * outlive the page: a global overlay, a shortcut host, anything one route opens
+ * and the next one keeps.
  *
  * `ConfigProvider` reads `useThemeConfig`, which needs `ThemeProvider` above it,
  * so the antd theme is settled here instead of by the caller.
  */
-function AppShell({ children, overlays }: AppShellProps): JSX.Element {
+function AppShell({ children, router, overlays }: AppShellProps): JSX.Element {
 	const themeConfig = useThemeConfig();
 
 	return (
 		<ConfigProvider theme={themeConfig}>
-			<CmdKProvider>
-				<NotificationProvider>
-					<ErrorModalProvider>
-						{overlays}
-						{children}
-					</ErrorModalProvider>
-				</NotificationProvider>
-			</CmdKProvider>
+			{router(
+				<CmdKProvider>
+					<NotificationProvider>
+						<ErrorModalProvider>
+							{overlays}
+							{children}
+						</ErrorModalProvider>
+					</NotificationProvider>
+				</CmdKProvider>,
+			)}
 		</ConfigProvider>
 	);
 }

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -0,0 +1,103 @@
+import { useMutation } from 'react-query';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+
+interface AddCreditCardModalProps {
+	open: boolean;
+	onClose: () => void;
+	onAddCreditCard?: () => void;
+}
+
+/**
+ * Shown to trial users who have not added a card, in place of chat support.
+ * Submitting creates the subscription and opens the returned billing URL.
+ */
+function AddCreditCardModal({
+	open,
+	onClose,
+	onAddCreditCard,
+}: AddCreditCardModalProps): JSX.Element {
+	const { notifications } = useNotifications();
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
+	);
+
+	const handleAddCreditCard = (): void => {
+		onAddCreditCard?.();
+		updateCreditCard({ url: getBaseUrl() });
+	};
+
+	return (
+		<Modal
+			className="add-credit-card-modal"
+			title={<span className="title">Add Credit Card for Chat Support</span>}
+			open={open}
+			closable
+			onCancel={onClose}
+			destroyOnClose
+			footer={[
+				<Button
+					key="cancel"
+					onClick={onClose}
+					className="cancel-btn"
+					icon={<X size={16} />}
+				>
+					Cancel
+				</Button>,
+				<AuthZTooltip
+					key="submit"
+					checks={[SubscriptionCreatePermission]}
+					withPortal={false}
+				>
+					<Button
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
+						loading={isLoadingBilling}
+						disabled={isLoadingBilling}
+						onClick={handleAddCreditCard}
+						className="add-credit-card-btn"
+					>
+						Add Credit Card
+					</Button>
+				</AuthZTooltip>,
+			]}
+		>
+			<Typography.Text className="add-credit-card-text">
+				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
+				Add a credit card to access SigNoz chat support to your workspace.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
+
+export default AddCreditCardModal;

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

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+const SUBSCRIPTIONS = 'http://localhost/api/v1/subscriptions';
+
+export const createSubscriptionHandlers = [
+	rest.post(SUBSCRIPTIONS, (_req, res, ctx) =>
+		res(ctx.status(200), ctx.json({ data: { redirectURL: '' } })),
+	),
+];

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { screen, userEvent, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { createSubscriptionHandlers } from './AddCreditCardModal.stories.mocks';
+
+import AddCreditCardModal from '../AddCreditCardModal';
+
+/** Stands in for the surfaces that open it: the strip's Support button, and
+ * `LaunchChatSupport` in the custom domain and onboarding flows. */
+function ModalFixture(): JSX.Element {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Button
+				variant="solid"
+				color="primary"
+				size="md"
+				testId="open-add-credit-card"
+				onClick={(): void => setOpen(true)}
+			>
+				Contact support
+			</Button>
+			<AddCreditCardModal open={open} onClose={(): void => setOpen(false)} />
+		</>
+	);
+}
+
+const meta = {
+	title: 'Components/Add Credit Card Modal',
+	component: ModalFixture,
+	tags: ['play'],
+	decorators: [withCanvas({ maxWidth: 400 })],
+	parameters: {
+		msw: { handlers: createSubscriptionHandlers },
+	},
+} satisfies Meta<typeof ModalFixture>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** What a trial user without a card sees in place of chat support. */
+export const Default: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		await userEvent.click(
+			within(canvasElement).getByTestId('open-add-credit-card'),
+		);
+		await screen.findByRole('dialog', {
+			name: /Add Credit Card for Chat Support/i,
+		});
+	},
+};

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -8,9 +8,12 @@
 	:global(.ant-breadcrumb-separator) {
 		color: var(--muted-foreground);
 	}
+
+	[data-slot='button'] {
+		padding: 0px;
+	}
 }
 
 .divider {
-	--divider-color: var(--l1-border);
-	--divider-margin: 10px 0 16px 0;
+	--divider-border: var(--l1-border);
 }

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -28,7 +28,11 @@ function AlertBreadcrumb({
 				items={breadcrumbItems}
 				data-testid={testId}
 			/>
-			{showDivider && <Divider className={styles.divider} />}
+			{showDivider && (
+				<div className={styles.divider}>
+					<Divider spacing="10px 16px" />
+				</div>
+			)}
 		</>
 	);
 }

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss

@@ -1,9 +1,5 @@
-.item {
-	--button-padding: 0;
-	--button-font-size: var(--periscope-font-size-base);
-}
-
 .itemLast {
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-base);
+	color: var(--button-secondary-label);
+	font-size: var(--button-font-size, var(--periscope-font-size-base));
+	line-height: var(--button-size-line-height, 16px);
 }

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -26,9 +26,9 @@ function BreadcrumbItem({
 
 	return (
 		<Button
-			variant="ghost"
+			size="md"
+			variant="link"
 			color="secondary"
-			className={styles.item}
 			onClick={(e: React.MouseEvent): void => {
 				if (!('route' in props) || !props.route) {
 					return;

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx

@@ -34,21 +34,23 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
+					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					data-testid="error-contact-support-button"
+					testId="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="error-refresh-button"
+						testId="error-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss

@@ -1,20 +1,32 @@
 .labelColumn {
+	// Badges fill their wrapper; the wrapper, as the flex item, owns the cap.
+	--badge-max-width: 100%;
+
+	position: relative;
 	display: flex;
 	gap: 4px;
 	align-items: center;
 	overflow: hidden;
 	max-width: 100%;
 	width: 100%;
+
+	> * {
+		flex-shrink: 0;
+		max-width: 180px;
+	}
 }
 
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
+// Kept mounted so its width can still be measured.
+.overflowed {
+	position: absolute;
+	visibility: hidden;
+	pointer-events: none;
+}
 
-	--badge-display: inline;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
+// The only visible label truncates instead of pushing `+N` out of view.
+.labelColumn > .shrinkable {
+	flex-shrink: 1;
+	min-width: 0;
 }
 
 .overflowTrigger {
@@ -22,11 +34,6 @@
 	cursor: pointer;
 }
 
-.overflowBadge {
-	cursor: pointer;
-	font-size: 12px;
-}
-
 .labelPopover {
 	display: flex;
 	flex-direction: column;

frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx

@@ -1,13 +1,14 @@
-import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { act, render, screen } from '@testing-library/react';
 
 import LabelColumn from './LabelColumn';
 
-let resizeCallback: ResizeObserverCallback | null = null;
+const BADGE_WIDTH = 60;
+
+let resizeCallbacks: ResizeObserverCallback[] = [];
 
 class MockResizeObserver {
 	constructor(callback: ResizeObserverCallback) {
-		resizeCallback = callback;
+		resizeCallbacks.push(callback);
 	}
 
 	observe = jest.fn();
@@ -15,15 +16,23 @@ class MockResizeObserver {
 	disconnect = jest.fn();
 }
 
-function triggerResize(width: number): void {
-	if (resizeCallback) {
-		act(() => {
-			resizeCallback?.(
-				[{ contentRect: { width } } as ResizeObserverEntry],
-				{} as ResizeObserver,
-			);
+// jsdom has no layout: every badge measures BADGE_WIDTH, the column `containerWidth`.
+function mockLayout(containerWidth: number): void {
+	jest
+		.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
+		.mockImplementation(function getClientWidth(this: HTMLElement) {
+			return this.dataset.testid === 'label-column' ? containerWidth : 0;
 		});
-	}
+	jest
+		.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+		.mockReturnValue({ width: BADGE_WIDTH } as DOMRect);
+}
+
+function triggerResize(containerWidth: number): void {
+	mockLayout(containerWidth);
+	act(() => {
+		resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
+	});
 }
 
 beforeAll(() => {
@@ -31,13 +40,14 @@ beforeAll(() => {
 });
 
 afterEach(() => {
-	resizeCallback = null;
+	resizeCallbacks = [];
+	jest.restoreAllMocks();
 });
 
 function renderWithProviders(
 	ui: React.ReactElement,
 ): ReturnType<typeof render> {
-	return render(<TooltipProvider>{ui}</TooltipProvider>);
+	return render(ui);
 }
 
 describe('LabelColumn', () => {
@@ -54,13 +64,10 @@ describe('LabelColumn', () => {
 	it('should truncate labels and show +N badge when container is narrow', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
+		// 3 badges (180px) + overflow reserve (40px)
+		mockLayout(220);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
-		// Simulate narrow container that fits ~3 badges
-		// Badge widths: env=37, service=65, region=58, team=44, owner=51, version=65
-		// 220px available = 3 badges (160px) + gaps (8px) + overflow (44px)
-		triggerResize(220);
-
 		// First 3 visible
 		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
 		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
@@ -93,19 +100,37 @@ describe('LabelColumn', () => {
 		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
 	});
 
-	it('should show overflow badge with remaining count when container is narrow', () => {
+	it('should update the overflow count when the container resizes', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
+		mockLayout(220);
+		renderWithProviders(<LabelColumn labels={labels} />);
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
+
+		// 2 badges (120px) + overflow reserve (40px)
+		triggerResize(160);
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+4');
+
+		triggerResize(1000);
+		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
+	});
+
+	it('should skip the overflow reserve when every label fits', () => {
+		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
+
+		mockLayout(labels.length * BADGE_WIDTH);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
-		// Simulate narrow container to trigger overflow (shows 3 labels)
-		// 220px fits first 3 badges before overflow
-		triggerResize(220);
+		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
+	});
 
-		// Overflow badge shows +3 (remaining labels)
-		const overflowBadge = screen.getByTestId('label-overflow-badge');
-		expect(overflowBadge).toBeInTheDocument();
-		expect(overflowBadge).toHaveTextContent('+3');
+	it('should keep one label visible when even that one does not fit', () => {
+		const labels = ['env', 'service'];
+
+		mockLayout(50);
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+1');
 	});
 
 	it('should render empty when no labels provided', () => {
@@ -126,11 +151,9 @@ describe('LabelColumn', () => {
 	it('should show all labels when container is wide enough', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
+		mockLayout(1000);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
-		// Simulate wide container
-		triggerResize(1000);
-
 		// All labels visible
 		labels.forEach((label) => {
 			expect(screen.getByTestId(`label-tag-${label}`)).toBeInTheDocument();

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,35 +1,19 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Tooltip } from '@signozhq/ui/tooltip';
+import cx from 'classnames';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import LabelTag from './LabelTag';
 
 import styles from './LabelColumn.module.scss';
-import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
+import { getVisibleCount } from './utils';
 
 export interface LabelColumnProps {
 	labels: string[];
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: { [key: string]: string };
 }
 
@@ -39,60 +23,37 @@ function LabelColumn({
 	color = 'primary',
 }: LabelColumnProps): JSX.Element {
 	const containerRef = useRef<HTMLDivElement>(null);
-	const [maxVisibleCount, setMaxVisibleCount] = useState(labels.length);
+	const [visibleCount, setVisibleCount] = useState(labels.length);
 	const [, copyToClipboard] = useCopyToClipboard();
 
-	const calculateMaxVisible = useCallback(
-		(width: number): number => {
-			if (width <= 0) {
-				return 1;
-			}
-
-			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
-			let usedWidth = 0;
-			let count = 0;
-
-			for (const label of labels) {
-				const badgeWidth = estimateBadgeWidth(label, value?.[label]) + BADGE_GAP;
-				if (usedWidth + badgeWidth > availableWidth && count > 0) {
-					break;
-				}
-				usedWidth += badgeWidth;
-				count++;
-			}
-
-			return Math.max(1, count);
-		},
-		[labels, value],
-	);
-
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const container = containerRef.current;
 		if (!container) {
 			return;
 		}
 
-		const observer = new ResizeObserver((entries) => {
-			const entry = entries[0];
-			if (entry && entry.contentRect.width > 0) {
-				setMaxVisibleCount(calculateMaxVisible(entry.contentRect.width));
+		const measure = (): void => {
+			const available = container.clientWidth;
+			if (available <= 0) {
+				return;
 			}
-		});
 
+			const widths = Array.from(container.children)
+				.slice(0, labels.length)
+				.map((item) => item.getBoundingClientRect().width);
+			const gap = parseFloat(getComputedStyle(container).columnGap) || 0;
+
+			setVisibleCount(getVisibleCount(widths, available, gap));
+		};
+
+		const observer = new ResizeObserver(measure);
 		observer.observe(container);
-
-		if (container.clientWidth > 0) {
-			setMaxVisibleCount(calculateMaxVisible(container.clientWidth));
-		}
+		measure();
 
 		return (): void => observer.disconnect();
-	}, [calculateMaxVisible]);
+	}, [labels, value]);
 
-	const needsOverflow = labels.length > maxVisibleCount;
-	const visibleLabels = needsOverflow
-		? labels.slice(0, maxVisibleCount)
-		: labels;
-	const remainingLabels = needsOverflow ? labels.slice(maxVisibleCount) : [];
+	const remainingLabels = labels.slice(visibleCount);
 
 	return (
 		<div
@@ -100,24 +61,23 @@ function LabelColumn({
 			className={styles.labelColumn}
 			data-testid="label-column"
 		>
-			{visibleLabels.map((label) => (
-				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
+			{labels.map((label, index) => (
+				<LabelTag
+					key={label}
+					label={label}
+					color={color}
+					value={value?.[label]}
+					className={cx({
+						[styles.overflowed]: index >= visibleCount,
+						[styles.shrinkable]: index === 0 && visibleCount === 1,
+					})}
+				/>
 			))}
 			{remainingLabels.length > 0 && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span>
-							<Badge
-								color={color}
-								className={styles.overflowBadge}
-								variant="outline"
-								data-testid="label-overflow-badge"
-							>
-								+{remainingLabels.length}
-							</Badge>
-						</span>
-					</TooltipTrigger>
-					<TooltipContent side="bottom" align="end">
+				<Tooltip
+					side="bottom"
+					align="end"
+					title={
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -140,8 +100,14 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					</TooltipContent>
-				</TooltipRoot>
+					}
+				>
+					<span>
+						<Badge color={color} variant="outlined" testId="label-overflow-badge">
+							+{remainingLabels.length}
+						</Badge>
+					</span>
+				</Tooltip>
 			)}
 		</div>
 	);

frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss

@@ -1,11 +1,3 @@
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
-
-	max-width: 180px;
-	text-overflow: ellipsis;
-}
-
 .labelValue {
 	text-overflow: ellipsis;
 	overflow: hidden;

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,35 +1,24 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';
 
 import styles from './LabelTag.module.scss';
 
 export interface LabelTagProps {
 	label: string;
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: string;
+	className?: string;
 }
 
-function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
+function LabelTag({
+	label,
+	value,
+	color,
+	className,
+}: LabelTagProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 	const displayText = value ? `${label}: ${value}` : label;
 	const searchFormat = value ? `${label} ${value}` : label;
@@ -41,20 +30,8 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 	};
 
 	return (
-		<TooltipRoot>
-			<TooltipTrigger asChild>
-				<span>
-					<Badge
-						color={color}
-						className={styles.labelBadge}
-						variant="outline"
-						data-testid={`label-tag-${label}`}
-					>
-						<span className={styles.labelValue}>{displayText}</span>
-					</Badge>
-				</span>
-			</TooltipTrigger>
-			<TooltipContent>
+		<Tooltip
+			title={
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -66,8 +43,19 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 						<Copy size={12} />
 					</button>
 				</div>
-			</TooltipContent>
-		</TooltipRoot>
+			}
+		>
+			<span className={className}>
+				<Badge
+					textTransform="none"
+					color={color ?? 'secondary'}
+					variant="outlined"
+					testId={`label-tag-${label}`}
+				>
+					<span className={styles.labelValue}>{displayText}</span>
+				</Badge>
+			</span>
+		</Tooltip>
 	);
 }
 

frontend/src/components/Alerts/LabelColumn/utils.ts

@@ -1,14 +1,33 @@
-export const BADGE_GAP = 4;
 export const OVERFLOW_BADGE_WIDTH = 40;
 
-export const BADGE_MAX_WIDTH = 180;
-export const BADGE_PADDING = 16;
-export const CHAR_WIDTH = 7;
-
-export function estimateBadgeWidth(label: string, value?: string): number {
-	const displayText = value ? `${label}: ${value}` : label;
-	return Math.min(
-		displayText.length * CHAR_WIDTH + BADGE_PADDING,
-		BADGE_MAX_WIDTH,
+/**
+ * How many leading labels fit in `available` px, reserving room for the `+N` badge
+ * whenever some are left out. At least one label is always shown.
+ */
+export function getVisibleCount(
+	widths: number[],
+	available: number,
+	gap: number,
+): number {
+	const total = widths.reduce(
+		(sum, width, index) => sum + width + (index > 0 ? gap : 0),
+		0,
 	);
+	if (total <= available) {
+		return widths.length;
+	}
+
+	const limit = available - OVERFLOW_BADGE_WIDTH - gap;
+	let used = 0;
+	let count = 0;
+
+	for (const width of widths) {
+		used += width + (count > 0 ? gap : 0);
+		if (used > limit) {
+			break;
+		}
+		count++;
+	}
+
+	return Math.max(1, count);
 }

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx

@@ -30,21 +30,23 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						data-testid="no-results-clear-button"
+						testId="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="no-results-refresh-button"
+						testId="no-results-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/constants.ts

@@ -1,4 +1,4 @@
-import type { BadgeColor } from '@signozhq/ui/badge';
+import type { BadgeColorType } from '@signozhq/ui/badge';
 
 export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
 export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
@@ -24,9 +24,9 @@ export const SEVERITY_COLORS: Record<string, string> = {
 	info: 'var(--bg-robin-500)',
 };
 
-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
-	critical: 'error',
-	error: 'error',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColorType> = {
+	critical: 'danger',
+	error: 'danger',
 	warning: 'warning',
 	info: 'primary',
 };

frontend/src/components/AuthPageContainer/AuthHeader.styles.scss

@@ -33,36 +33,3 @@
 	color: var(--l1-foreground);
 	white-space: nowrap;
 }
-
-.auth-header-help-button {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	height: 32px;
-	padding: 10px 16px;
-	background: var(--l2-background);
-	color: var(--l2-foreground);
-	border: none;
-	border-radius: 2px;
-	cursor: pointer;
-	transition: opacity 0.2s ease;
-
-	span {
-		font-family: var(--font-family-inter, Inter, sans-serif);
-		font-size: 11px;
-		font-weight: 500;
-		line-height: 1;
-		color: var(--l2-foreground);
-		text-align: center;
-	}
-
-	svg {
-		flex-shrink: 0;
-		color: var(--l2-foreground);
-	}
-
-	&:hover {
-		opacity: 0.8;
-	}
-}

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -22,11 +22,11 @@ function AuthHeader(): JSX.Element {
 				<span className="auth-header-logo-text">SigNoz</span>
 			</div>
 			<Button
-				className="auth-header-help-button"
+				size="md"
 				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 				variant="solid"
-				color="none"
+				color="secondary"
 			>
 				Get Help
 			</Button>

frontend/src/components/Badges/Badges.tsx

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
 import { Button, Flex } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Pill } from '@signozhq/ui/pill';
 import Input from 'components/Input';
 
 import './Badges.styles.scss';
@@ -47,18 +47,13 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Badge
+				<Pill.Closeable
+					textTransform="none"
 					key={tag}
-					color="vanilla"
-					style={{ userSelect: 'none' }}
-					closable
-					onClose={(e): void => {
-						e.preventDefault();
-						handleClose(tag);
-					}}
+					onClose={() => handleClose(tag)}
 				>
 					{tag}
-				</Badge>
+				</Pill.Closeable>
 			))}
 
 			{inputVisible && (

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

@@ -1,7 +1,6 @@
 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,
@@ -36,7 +35,8 @@ export function FilterSelect({
 		useCeleryFilterOptions(filterType);
 
 	const urlQuery = useUrlQuery();
-	const location = useAppLocation();
+	const history = useHistory();
+	const location = useLocation();
 
 	// 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,
-					navigate,
+					history,
 					location,
 					queryParam,
 				);
@@ -77,6 +77,7 @@ export function FilterSelect({
 			handleSearch,
 			shouldSetQueryParams,
 			urlQuery,
+			history,
 			location,
 			queryParam,
 			onChange,

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

@@ -56,22 +56,15 @@ function ProgressRender(item: string | number): JSX.Element {
 	const percent = Number(Number(item).toFixed(1));
 	return (
 		<div className="progress-container">
-			<Progress
-				percent={percent}
-				strokeLinecap="butt"
-				showInfo
-				strokeColor={((): string => {
-					const cpuPercent = percent;
-					if (cpuPercent >= 90) {
-						return Color.BG_SAKURA_500;
+			<div className="progress-bar">
+				<Progress
+					percent={percent}
+					showInfo
+					color={
+						percent >= 90 ? 'highlight-danger' : percent >= 60 ? 'warning' : 'success'
 					}
-					if (cpuPercent >= 60) {
-						return Color.BG_AMBER_500;
-					}
-					return Color.BG_FOREST_500;
-				})()}
-				className="progress-bar"
-			/>
+				/>
+			</div>
 		</div>
 	);
 }

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

@@ -1,6 +1,5 @@
+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';
@@ -17,7 +16,8 @@ import './CeleryTaskConfigOptions.styles.scss';
 function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } =
 		useCeleryFilterOptions('celery.task_name');
-	const location = useAppLocation();
+	const history = useHistory();
+	const location = useLocation();
 
 	const urlQuery = useUrlQuery();
 
@@ -52,7 +52,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 						setQueryParamsFromOptions(
 							value,
 							urlQuery,
-							navigate,
+							history,
 							location,
 							QueryParams.taskName,
 						);

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

@@ -72,7 +72,7 @@ export default function CeleryTaskDetail({
 								endTime ? `- ${formatTimestamp(endTime)}` : ''
 							}`}
 						</Typography.Text>
-						<Divider type="vertical" />
+						<Divider orientation="vertical" />
 						<Typography.Text className="subtitle">{taskData.value}</Typography.Text>
 					</div>
 				</div>

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

@@ -1,9 +1,8 @@
 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';
@@ -51,7 +50,8 @@ function CeleryTaskBar({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	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()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	const [barState, setBarState] = useState<CeleryTaskState>(CeleryTaskState.All);

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

@@ -1,9 +1,8 @@
 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';
@@ -55,7 +54,8 @@ function CeleryTaskGraph({
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 	analyticsEvent?: string;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	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()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	return (

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

@@ -1,9 +1,8 @@
 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';
@@ -49,7 +48,8 @@ function CeleryTaskLatencyGraph({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const { pathname } = useAppLocation();
+	const history = useHistory();
+	const { pathname } = useLocation();
 	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()}`;
-			navigate(generatedUrl);
+			history.push(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, history, pathname, urlQuery],
 	);
 
 	const selectedFilters = useMemo(

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,5 +1,5 @@
 import { QueryParams } from 'constants/query';
-import type { AppLocation } from 'lib/router/types';
+import { History, Location } from 'history';
 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,
-	navigate: (to: string, options?: { replace?: boolean }) => void,
-	location: AppLocation,
+	history: History<unknown>,
+	location: Location<unknown>,
 	queryParams: QueryParams,
 ): void {
 	urlQuery.set(queryParams, value.join(','));
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-	navigate(generatedUrl, { replace: true });
+	history.replace(generatedUrl);
 }
 
 export function getFiltersFromQueryParams(

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,62 +1,14 @@
 import { useState } from 'react';
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import { useAppLocation } from 'lib/router/useAppLocation';
-import { Typography } from '@signozhq/ui/typography';
+import { useLocation } from 'react-router-dom';
+import { Button } from 'antd';
+import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
 import logEvent from 'api/common/logEvent';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
+import { MessageSquareText } from '@signozhq/icons';
 
 export default function ChatSupportGateway(): JSX.Element {
-	const { notifications } = useNotifications();
-
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
-	const { pathname } = useAppLocation();
-
-	const handleAddCreditCard = (): void => {
-		logEvent('Add Credit card modal: Clicked', {
-			source: `chat support icon`,
-			page: pathname,
-		});
-
-		updateCreditCard({
-			url: getBaseUrl(),
-		});
-	};
+	const { pathname } = useLocation();
 
 	return (
 		<>
@@ -76,47 +28,16 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
+			<AddCreditCardModal
 				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<AuthZTooltip
-						key="submit"
-						checks={[SubscriptionCreatePermission]}
-						withPortal={false}
-					>
-						<Button
-							type="primary"
-							icon={<CreditCard size={16} />}
-							size="middle"
-							loading={isLoadingBilling}
-							disabled={isLoadingBilling}
-							onClick={handleAddCreditCard}
-							className="add-credit-card-btn"
-						>
-							Add Credit Card
-						</Button>
-					</AuthZTooltip>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
+				onClose={(): void => setIsAddCreditCardModalOpen(false)}
+				onAddCreditCard={(): void => {
+					logEvent('Add Credit card modal: Clicked', {
+						source: `chat support icon`,
+						page: pathname,
+					});
+				}}
+			/>
 		</>
 	);
 }

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -39,9 +39,3 @@
 		}
 	}
 }
-
-.cloud-service-data-collected-table-tooltip {
-	max-width: 280px;
-	white-space: normal;
-	word-break: break-word;
-}

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -4,7 +4,7 @@ import {
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { BarChart, Info, ScrollText } from '@signozhq/icons';
-import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 
 import './CloudServiceDataCollected.styles.scss';
 
@@ -88,23 +88,15 @@ function CloudServiceDataCollected({
 						<BarChart size={14} />
 						Metrics
 						{metricsInfoTooltip && (
-							<TooltipProvider>
-								<TooltipSimple
-									title={metricsInfoTooltip}
-									side="top"
-									tooltipContentProps={{
-										className: 'cloud-service-data-collected-table-tooltip',
-									}}
+							<Tooltip title={metricsInfoTooltip} side="top">
+								<span
+									className="cloud-service-data-collected-table-heading-info"
+									aria-label="About the metrics listed below"
+									data-testid="data-collected-metrics-info"
 								>
-									<span
-										className="cloud-service-data-collected-table-heading-info"
-										aria-label="About the metrics listed below"
-										data-testid="data-collected-metrics-info"
-									>
-										<Info size={12} />
-									</span>
-								</TooltipSimple>
-							</TooltipProvider>
+									<Info size={12} />
+								</span>
+							</Tooltip>
 						)}
 					</div>
 					<Table

frontend/src/components/CodeBlock/CodeBlock.module.scss

@@ -2,6 +2,13 @@
 	position: relative;
 }
 
+.copyButton {
+	position: absolute;
+	right: 8px;
+	top: 8px;
+	z-index: 1;
+}
+
 .codeBlockSyntaxHighlighter {
 	background-color: var(--l2-background) !important;
 	border-radius: 4px !important;

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';
@@ -52,16 +53,20 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					onClick={handleCopy}
-					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
-					aria-label="Copy code"
-					title={isCopied ? 'Copied' : 'Copy'}
-					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
-				/>
+				<div className={styles.copyButton}>
+					<Tooltip title={isCopied ? 'Copied' : 'Copy'}>
+						<Button
+							variant="ghost"
+							color="secondary"
+							size="sm"
+							icon
+							onClick={handleCopy}
+							aria-label="Copy code"
+						>
+							{isCopied ? <Check size={14} /> : <Copy size={14} />}
+						</Button>
+					</Tooltip>
+				</div>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -42,6 +42,16 @@
 		gap: var(--spacing-1);
 		margin-bottom: var(--spacing-4);
 
+		// Input restyle (the old .create-sa-form__input class, as --input-* tokens)
+		--input-foreground: var(--l1-foreground);
+		--input-background: var(--l2-background);
+		--input-border: var(--l1-border);
+		--input-font-size: var(--paragraph-base-400-font-size);
+		--input-border-radius: 2px;
+		--input-placeholder: var(--l3-foreground);
+		--input-placeholder-opacity: 1;
+		--input-focus-ring: var(--primary);
+
 		> label {
 			font-size: var(--paragraph-base-400-font-size);
 			font-weight: var(--paragraph-base-400-font-weight);
@@ -50,25 +60,6 @@
 		}
 	}
 
-	&__input {
-		height: 32px;
-		color: var(--l1-foreground);
-		background-color: var(--l2-background);
-		border-color: var(--l1-border);
-		font-size: var(--paragraph-base-400-font-size);
-		border-radius: 2px;
-		width: 100%;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-
-		&:focus {
-			border-color: var(--primary);
-			box-shadow: none;
-		}
-	}
-
 	&__error {
 		font-size: var(--paragraph-small-400-font-size);
 		color: var(--destructive);

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -116,11 +116,10 @@ function CreateServiceAccountModal(): JSX.Element {
 									<Input
 										id="sa-name"
 										placeholder="Enter a name"
-										className="create-sa-form__input"
 										value={field.value}
 										onChange={field.onChange}
 										onBlur={field.onBlur}
-										data-testid="create-sa-name-input"
+										testId="create-sa-name-input"
 									/>
 								)}
 							/>
@@ -134,26 +133,27 @@ function CreateServiceAccountModal(): JSX.Element {
 
 			<DialogFooter className="create-sa-modal__footer">
 				<Button
+					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					data-testid="create-sa-cancel-btn"
+					testId="create-sa-cancel-btn"
+					prefix={<X size={12} />}
 				>
-					<X size={12} />
 					Cancel
 				</Button>
 
 				<AuthZButton
+					size="md"
 					checks={[SACreatePermission]}
-					withPortal={false}
 					type="submit"
 					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
-					data-testid="create-sa-submit-btn"
+					testId="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>

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

@@ -5,6 +5,7 @@ import {
 } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { submitImplicitly } from 'tests/submitImplicitly';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
@@ -57,10 +58,13 @@ describe('CreateServiceAccountModal', () => {
 		// The form only renders once the create check resolves, and the name field
 		// registers its `required` rule on mount, so the empty-form invalid state
 		// settles a tick later.
-		await screen.findByTestId('create-sa-name-input');
+		await screen.findByTestId('create-sa-name-input-field');
 
 		await waitFor(() =>
-			expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled(),
+			expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
+				'aria-disabled',
+				'true',
+			),
 		);
 	});
 
@@ -68,25 +72,31 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input');
+		const nameInput = await screen.findByTestId('create-sa-name-input-field');
 		const submitBtn = await screen.findByTestId('create-sa-submit-btn');
 
 		await user.type(nameInput, 'test');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 
 		await user.clear(nameInput);
-		await waitFor(() => expect(submitBtn).toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).toHaveAttribute('aria-disabled', 'true'),
+		);
 	});
 
 	it('successful submit shows toast.success and closes modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input');
+		const nameInput = await screen.findByTestId('create-sa-name-input-field');
 		await user.type(nameInput, 'Deploy Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(submitBtn);
 
 		await waitFor(() => {
@@ -102,6 +112,40 @@ describe('CreateServiceAccountModal', () => {
 		});
 	});
 
+	it('pressing Enter again while creating sends one request', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let requests = 0;
+		server.use(
+			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) => {
+				requests += 1;
+				return res(
+					ctx.delay(100),
+					ctx.status(201),
+					ctx.json({ status: 'success', data: {} }),
+				);
+			}),
+		);
+		renderModal();
+
+		const nameInput = await screen.findByTestId<HTMLInputElement>(
+			'create-sa-name-input-field',
+		);
+		await user.type(nameInput, 'Deploy Bot');
+		const submitBtn = screen.getByTestId('create-sa-submit-btn');
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
+
+		submitImplicitly(nameInput);
+		await waitFor(() => expect(submitBtn).toHaveAttribute('aria-busy', 'true'));
+		submitImplicitly(nameInput);
+
+		await waitFor(() => {
+			expect(mockToast.success).toHaveBeenCalled();
+		});
+		expect(requests).toBe(1);
+	});
+
 	it('shows toast.error on API error and keeps modal open', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -116,11 +160,13 @@ describe('CreateServiceAccountModal', () => {
 
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input');
+		const nameInput = await screen.findByTestId('create-sa-name-input-field');
 		await user.type(nameInput, 'Dupe Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() => expect(submitBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(submitBtn);
 
 		await waitFor(() => {
@@ -163,7 +209,9 @@ describe('CreateServiceAccountModal', () => {
 			screen.findByText(/is not authorized to perform/i),
 		).resolves.toBeInTheDocument();
 
-		expect(screen.queryByTestId('create-sa-name-input')).not.toBeInTheDocument();
+		expect(
+			screen.queryByTestId('create-sa-name-input-field'),
+		).not.toBeInTheDocument();
 		expect(
 			screen.getByTestId('create-service-account-modal'),
 		).toBeInTheDocument();
@@ -180,7 +228,10 @@ describe('CreateServiceAccountModal', () => {
 		).resolves.toBeInTheDocument();
 
 		// The footer lives outside the guard: submit is gated, Cancel still works.
-		expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled();
+		expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
+			'aria-disabled',
+			'true',
+		);
 
 		await user.click(screen.getByTestId('create-sa-cancel-btn'));
 
@@ -195,7 +246,7 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input');
+		const nameInput = await screen.findByTestId('create-sa-name-input-field');
 		await user.type(nameInput, 'Bot');
 		await user.clear(nameInput);
 

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -4,30 +4,6 @@
 	align-items: center;
 	gap: 4px;
 
-	.zoom-out-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		color: var(--secondary-foreground);
-		background-color: var(--secondary-background);
-		border: 1px solid var(--secondary-border);
-		border-radius: 2px;
-		box-shadow: none;
-		padding: 10px;
-		height: 33px;
-
-		&:hover:not(:disabled) {
-			color: var(--primary-foreground);
-			background: var(--primary-background);
-		}
-
-		&:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
-
 	.timeSelection-input {
 		&:hover {
 			border-color: var(--l1-border) !important;

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

@@ -5,8 +5,8 @@ import * as timeUtils from 'utils/timeUtils';
 
 import CustomTimePicker from './CustomTimePicker';
 
-jest.mock('react-router', () => {
-	const actual = jest.requireActual('react-router');
+jest.mock('react-router-dom', () => {
+	const actual = jest.requireActual('react-router-dom');
 
 	return {
 		...actual,

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
@@ -72,8 +72,6 @@ interface CustomTimePickerProps {
 	maxTime: number;
 	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
 	isModalTimeSelection?: boolean;
-	/** Lands on the trigger input. Not spread — the component takes no rest props. */
-	'data-testid'?: string;
 }
 
 function CustomTimePicker({
@@ -97,7 +95,6 @@ function CustomTimePicker({
 	minTime,
 	maxTime,
 	isModalTimeSelection = false,
-	'data-testid': dataTestId,
 }: CustomTimePickerProps): JSX.Element {
 	const [selectedTimePlaceholderValue, setSelectedTimePlaceholderValue] =
 		useState('Select / Enter Time Range');
@@ -109,7 +106,7 @@ function CustomTimePicker({
 	const [inputErrorDetails, setInputErrorDetails] = useState<
 		TimeRangeValidationResult['errorDetails'] | null
 	>(null);
-	const location = useAppLocation();
+	const location = useLocation();
 
 	const inputRef = useRef<InputRef>(null);
 	const initialInputValueOnOpenRef = useRef<string>('');
@@ -599,7 +596,6 @@ function CustomTimePicker({
 				>
 					<Input
 						ref={inputRef}
-						data-testid={dataTestId}
 						autoComplete="off"
 						className={cx(
 							'timeSelection-input',
@@ -654,20 +650,20 @@ function CustomTimePicker({
 				</Popover>
 			</Tooltip>
 			{!showLiveLogs && !isModalTimeSelection && (
-				<Tooltip
-					title={
-						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
-					}
-				>
+				<Tooltip title={zoomOutDisabled ? undefined : 'Zoom out'}>
 					<Button
-						className="zoom-out-btn"
+						disabledTooltip="Zoom out time range is limited to 1 month"
+						size="md"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						data-testid="zoom-out-btn"
-						prefix={<ZoomOut size={14} />}
+						testId="zoom-out-btn"
+						icon
+						aria-label="Zoom out"
 						variant="solid"
-						color="none"
-					/>
+						color="secondary"
+					>
+						<ZoomOut size={14} />
+					</Button>
 				</Tooltip>
 			)}
 		</div>
@@ -686,5 +682,4 @@ CustomTimePicker.defaultProps = {
 	onExitLiveLogs: noop,
 	showLiveLogs: false,
 	showRecentlyUsed: true,
-	'data-testid': undefined,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 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 } = useAppLocation();
+	const { pathname } = useLocation();
 
 	const isLogsExplorerPage = useMemo(
 		() => pathname === ROUTES.LOGS_EXPLORER,
@@ -180,7 +180,6 @@ function CustomTimePickerPopoverContent({
 						type="text"
 						className="time-btns"
 						key={option.label + option.value}
-						data-testid={`time-chip-${option.value}`}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
@@ -260,7 +259,6 @@ function CustomTimePickerPopoverContent({
 						<Button
 							type="text"
 							key={option.label + option.value}
-							data-testid={`time-option-${option.value}`}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
 								e.preventDefault();

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -34,34 +34,19 @@ $item-spacing: 8px;
 		@include flex-center;
 		gap: 6px;
 		width: -webkit-fill-available;
-	}
 
-	&__input {
-		@include text-style-base;
-		width: 100%;
-		background: transparent;
-		border: none;
-		border-radius: 0;
-		box-shadow: none;
-		outline: none;
-		height: auto;
-		color: var(--l1-foreground);
-		font-size: 14px;
-		line-height: 20px;
-		letter-spacing: -0.07px;
-		padding: 0;
-
-		&:focus,
-		&:focus-visible,
-		&:hover {
-			border: none;
-			box-shadow: none;
-			outline: none;
-		}
-
-		&::placeholder {
-			color: var(--l2-foreground);
-		}
+		// Restyle the unstyled search Input (old .timezone-picker__input rules,
+		// as --input-* tokens picked up by the Input frame inside)
+		--input-height: auto;
+		--input-padding: 0;
+		--input-border-width: 0;
+		--input-border-radius: 0;
+		--input-foreground: var(--l1-foreground);
+		--input-font-size: 14px;
+		--input-line-height: 20px;
+		--input-letter-spacing: -0.07px;
+		--input-placeholder: var(--l2-foreground);
+		--input-placeholder-opacity: 1;
 	}
 
 	&__esc-key {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -65,7 +65,8 @@ function SearchBar({
 				/>
 				<Input
 					type="text"
-					className="timezone-picker__input"
+					variant="unstyled"
+					noFocusRing
 					placeholder="Search timezones..."
 					value={value}
 					onChange={(e): void => onChange(e.target.value)}

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

@@ -59,7 +59,7 @@ jest.mock('providers/Timezone', () => ({
 	}),
 }));
 
-jest.mock('react-router', () => ({
+jest.mock('react-router-dom', () => ({
 	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
 }));
 
@@ -164,6 +164,6 @@ describe('CustomTimePicker - zoom out button', () => {
 		);
 
 		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		expect(zoomOutBtn).toBeDisabled();
+		expect(zoomOutBtn).toHaveAttribute('aria-disabled', 'true');
 	});
 });

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

@@ -27,12 +27,14 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="icon"
+			size="sm"
+			icon
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-			prefix={<X size={14} />}
-		></Button>
+		>
+			<X size={14} />
+		</Button>
 	);
 
 	return (

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss

@@ -42,12 +42,5 @@
 			height: 1px;
 			background: var(--l1-border);
 		}
-
-		.export-button {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
 	}
 }

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

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass('periscope-btn', 'ghost');
+		expect(button).toHaveAccessibleName('Download');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {
@@ -308,13 +308,16 @@ describe.each([
 
 		fireEvent.click(screen.getByText('Export'));
 
-		expect(screen.getByTestId(testId)).toBeDisabled();
+		expect(screen.getByTestId(testId)).toHaveAttribute('aria-disabled', 'true');
 		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
 		resolveDownload!();
 
 		await waitFor(() => {
-			expect(screen.getByTestId(testId)).not.toBeDisabled();
+			expect(screen.getByTestId(testId)).not.toHaveAttribute(
+				'aria-disabled',
+				'true',
+			);
 		});
 	});
 });

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Tooltip } from 'antd';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Popover, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { RadioGroup } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useExportRawData } from 'hooks/useExportData/useServerExport';
-import { Download, LoaderCircle } from '@signozhq/icons';
+import { Download } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -68,10 +69,15 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
-						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<RadioGroup
+						color="primary"
+						value={exportFormat}
+						onChange={setExportFormat}
+						items={[
+							{ value: DownloadFormats.CSV, label: 'csv' },
+							{ value: DownloadFormats.JSONL, label: 'jsonl' },
+						]}
+					/>
 				</div>
 
 				<div className="horizontal-line" />
@@ -79,19 +85,15 @@ export default function DownloadOptionsMenu({
 				<div className="row-limit">
 					<Typography.Text className="title">Number of Rows</Typography.Text>
 					<RadioGroup
+						color="primary"
 						value={String(rowLimit)}
 						onChange={(value): void => setRowLimit(Number(value))}
-					>
-						<RadioGroupItem value={String(DownloadRowCounts.TEN_K)}>
-							10k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.THIRTY_K)}>
-							30k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.FIFTY_K)}>
-							50k
-						</RadioGroupItem>
-					</RadioGroup>
+						items={[
+							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
+							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
+							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
+						]}
+					/>
 				</div>
 
 				{dataSource !== DataSource.TRACES && (
@@ -100,22 +102,26 @@ export default function DownloadOptionsMenu({
 
 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
-								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
-								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
-									Selected
-								</RadioGroupItem>
-							</RadioGroup>
+							<RadioGroup
+								color="primary"
+								value={columnsScope}
+								onChange={setColumnsScope}
+								items={[
+									{ value: DownloadColumnsScopes.ALL, label: 'All' },
+									{ value: DownloadColumnsScopes.SELECTED, label: 'Selected' },
+								]}
+							/>
 						</div>
 					</>
 				)}
 
 				<Button
-					type="primary"
-					icon={<Download size={16} />}
+					variant="solid"
+					color="primary"
+					prefix={<Download size={16} />}
+					size="md"
+					width="100%"
 					onClick={handleExport}
-					className="export-button"
-					disabled={isDownloading}
 					loading={isDownloading}
 				>
 					Export
@@ -144,17 +150,16 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					className="periscope-btn ghost"
-					icon={
-						isDownloading ? (
-							<LoaderCircle size={14} className="animate-spin" />
-						) : (
-							<Download size={14} />
-						)
-					}
-					data-testid={`periscope-btn-download-${dataSource}`}
-					disabled={isDownloading}
-				/>
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					icon
+					aria-label="Download"
+					testId={`periscope-btn-download-${dataSource}`}
+					loading={isDownloading}
+				>
+					<Download size={14} />
+				</Button>
 			</Tooltip>
 		</Popover>
 	);

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -38,18 +38,23 @@ function DeleteMemberDialog({
 
 	const footer = (
 		<>
-			<Button variant="solid" color="secondary" onClick={onClose}>
-				<X size={12} />
+			<Button
+				size="md"
+				variant="solid"
+				color="secondary"
+				onClick={onClose}
+				prefix={<X size={12} />}
+			>
 				Cancel
 			</Button>
 			<Button
+				size="md"
 				variant="solid"
-				color="destructive"
-				disabled={isDeleting}
+				color="danger"
 				onClick={onConfirm}
 				loading={isDeleting}
+				prefix={<Trash2 size={12} />}
 			>
-				<Trash2 size={12} />
 				{isDeleting ? 'Processing...' : title}
 			</Button>
 		</>

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -90,7 +90,6 @@
 			font-weight: var(--uppercase-small-500-font-weight);
 			line-height: 100%;
 			letter-spacing: 0.44px;
-			text-transform: uppercase;
 		}
 	}
 
@@ -113,6 +112,7 @@
 	&__footer-left {
 		display: flex;
 		align-items: center;
+		gap: var(--spacing-4);
 	}
 
 	&__footer-right {
@@ -128,10 +128,6 @@
 		flex-shrink: 0;
 	}
 
-	&__tooltip-wrapper {
-		display: inline-flex;
-	}
-
 	&__footer-btn {
 		display: inline-flex;
 		align-items: center;
@@ -200,6 +196,7 @@
 		background: var(--l2-background);
 		border: 1px solid var(--l1-border);
 		border-radius: 2px;
+		padding-right: var(--spacing-4);
 	}
 
 	&__link-text-wrap {
@@ -220,8 +217,4 @@
 		line-height: var(--line-height-18);
 		letter-spacing: -0.07px;
 	}
-
-	&__copy-btn {
-		border-left: 1px solid var(--l1-border);
-	}
 }

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -471,20 +471,19 @@ function EditMemberDrawer({
 				<label className="edit-member-drawer__label" htmlFor="member-name">
 					Name
 				</label>
-				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-					<Input
-						id="member-name"
-						value={localDisplayName}
-						onChange={(e): void => {
-							setLocalDisplayName(e.target.value);
-							setSaveErrors((prev) =>
-								prev.filter((err) => err.context !== 'Name update'),
-							);
-						}}
-						placeholder="Enter name"
-						disabled={isRootUser || isDeleted}
-					/>
-				</Tooltip>
+				<Input
+					id="member-name"
+					value={localDisplayName}
+					onChange={(e): void => {
+						setLocalDisplayName(e.target.value);
+						setSaveErrors((prev) =>
+							prev.filter((err) => err.context !== 'Name update'),
+						);
+					}}
+					placeholder="Enter name"
+					disabled={isRootUser || isDeleted}
+					disabledTooltip={isRootUser ? ROOT_USER_TOOLTIP : undefined}
+				/>
 			</div>
 
 			<div className="edit-member-drawer__field">
@@ -519,7 +518,12 @@ function EditMemberDrawer({
 									localRoles.map((roleId) => {
 										const role = availableRoles.find((r) => r.id === roleId);
 										return (
-											<Badge key={roleId} color="vanilla">
+											<Badge
+												textTransform="none"
+												variant="solid"
+												key={roleId}
+												color="secondary"
+											>
 												{role?.name ?? roleId}
 											</Badge>
 										);
@@ -559,15 +563,15 @@ function EditMemberDrawer({
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">Status</span>
 					{member?.status === MemberStatus.Active ? (
-						<Badge color="forest" variant="outline">
+						<Badge color="success" variant="outlined">
 							ACTIVE
 						</Badge>
 					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="cherry" variant="outline">
+						<Badge color="danger" variant="outlined">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="amber" variant="outline">
+						<Badge color="warning" variant="outlined">
 							INVITED
 						</Badge>
 					)}
@@ -575,12 +579,16 @@ function EditMemberDrawer({
 
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
+					<Badge textTransform="none" variant="solid" color="secondary">
+						{formatTimestamp(member?.joinedOn)}
+					</Badge>
 				</div>
 				{!isInvited && (
 					<div className="edit-member-drawer__meta-item">
 						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
+						<Badge textTransform="none" variant="solid" color="secondary">
+							{formatTimestamp(member?.updatedAt)}
+						</Badge>
 					</div>
 				)}
 			</div>
@@ -611,55 +619,59 @@ function EditMemberDrawer({
 			{!isDeleted && (
 				<>
 					<div className="edit-member-drawer__footer-left">
-						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									onClick={(): void => setShowDeleteConfirm(true)}
-									disabled={isRootUser || isSelf}
-									variant="link"
-									color="destructive"
-								>
-									<Trash2 size={12} />
-									{isInvited ? 'Revoke Invite' : 'Delete Member'}
-								</Button>
-							</span>
-						</Tooltip>
+						<Button
+							disabledTooltip={getDeleteTooltip(isRootUser, isSelf)}
+							size="md"
+							onClick={(): void => setShowDeleteConfirm(true)}
+							disabled={isRootUser || isSelf}
+							variant="link"
+							color="danger"
+							prefix={<Trash2 size={12} />}
+						>
+							{isInvited ? 'Revoke Invite' : 'Delete Member'}
+						</Button>
 
 						<div className="edit-member-drawer__footer-divider" />
-						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-									variant="link"
-									color="warning"
-								>
-									<RefreshCw size={12} />
-									{isGeneratingLink
-										? 'Generating...'
-										: isInvited
-											? getInviteButtonLabel(
-													isLoadingTokenStatus,
-													existingToken,
-													isTokenExpired,
-													tokenNotFound,
-												)
-											: 'Generate Password Reset Link'}
-								</Button>
-							</span>
-						</Tooltip>
+						<Button
+							disabledTooltip={ROOT_USER_TOOLTIP}
+							size="md"
+							onClick={handleGenerateResetLink}
+							disabled={isRootUser}
+							loading={isGeneratingLink || isLoadingTokenStatus}
+							variant="link"
+							color="warning"
+							prefix={<RefreshCw size={12} />}
+						>
+							{isGeneratingLink
+								? 'Generating...'
+								: isInvited
+									? getInviteButtonLabel(
+											isLoadingTokenStatus,
+											existingToken,
+											isTokenExpired,
+											tokenNotFound,
+										)
+									: 'Generate Password Reset Link'}
+						</Button>
 					</div>
 
 					<div className="edit-member-drawer__footer-right">
-						<Button variant="outlined" color="secondary" onClick={handleClose}>
-							<X size={14} />
+						<Button
+							size="md"
+							variant="outlined"
+							color="secondary"
+							onClick={handleClose}
+							prefix={<X size={14} />}
+						>
 							Cancel
 						</Button>
 
 						<Button
+							disabledTooltip={isRootUser ? ROOT_USER_TOOLTIP : 'No changes to save'}
+							size="md"
 							variant="solid"
 							color="primary"
-							disabled={!isDirty || isSaving || isRootUser}
+							disabled={!isDirty || isRootUser}
 							onClick={handleSave}
 							loading={isSaving}
 						>

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -45,11 +45,11 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
+						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}
 						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
-						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}
 					</Button>

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

@@ -251,7 +251,7 @@ describe('EditMemberDrawer', () => {
 		expect(screen.getByText('ACTIVE')).toBeInTheDocument();
 		expect(
 			screen.getByRole('button', { name: /save member details/i }),
-		).toBeDisabled();
+		).toHaveAttribute('aria-disabled', 'true');
 	});
 
 	it('enables Save after editing name and calls updateUser on confirm', async () => {
@@ -271,7 +271,9 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Alice Updated');
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 
 		await user.click(saveBtn);
 
@@ -295,7 +297,9 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Alice Updated');
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -323,7 +327,9 @@ describe('EditMemberDrawer', () => {
 		await user.click(await screen.findByTitle('signoz-editor'));
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -349,7 +355,9 @@ describe('EditMemberDrawer', () => {
 		await user.click(removeBtn);
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -505,7 +513,9 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Bob Updated');
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
+		await waitFor(() =>
+			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+		);
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -541,7 +551,9 @@ describe('EditMemberDrawer', () => {
 			await user.type(nameInput, 'Alice Updated');
 
 			const saveBtn = screen.getByRole('button', { name: /save member details/i });
-			await waitFor(() => expect(saveBtn).not.toBeDisabled());
+			await waitFor(() =>
+				expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
+			);
 			await user.click(saveBtn);
 
 			await waitFor(() => {
@@ -619,7 +631,7 @@ describe('EditMemberDrawer', () => {
 			renderDrawer({ member: selfMember });
 			expect(
 				screen.getByRole('button', { name: /delete member/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});
 
 		it('does not open delete confirm dialog when Delete is clicked while disabled (isSelf)', async () => {
@@ -642,7 +654,7 @@ describe('EditMemberDrawer', () => {
 			renderDrawer({ member: selfMember });
 			expect(
 				screen.getByRole('button', { name: /generate password reset link/i }),
-			).not.toBeDisabled();
+			).not.toHaveAttribute('aria-disabled', 'true');
 		});
 	});
 
@@ -664,21 +676,21 @@ describe('EditMemberDrawer', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /delete member/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});
 
 		it('disables Reset Link button for root user', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /generate password reset link/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});
 
 		it('disables Save button for root user', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /save member details/i }),
-			).toBeDisabled();
+			).toHaveAttribute('aria-disabled', 'true');
 		});
 
 		it('does not open delete confirm dialog when Delete is clicked while disabled (root)', async () => {

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -53,7 +53,7 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge color="error">
+					<Badge variant="solid" color="danger">
 						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
 					</Badge>
 				</span>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -137,16 +137,15 @@ function ExplorerCard({
 		);
 	};
 
-	const moreOptionMenu: MenuProps = {
-		items: [
-			{
-				key: 'delete',
-				label: <Typography.Text strong>Delete</Typography.Text>,
-				onClick: onDeleteHandler,
-				icon: <Trash2 size="md" />,
-			},
-		],
-	};
+	const moreOptionItems: DropdownItemType[] = [
+		{
+			type: 'item',
+			value: 'delete',
+			label: <Typography.Text strong>Delete</Typography.Text>,
+			onClick: onDeleteHandler,
+			prefix: <Trash2 size="md" />,
+		},
+	];
 
 	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
@@ -230,9 +229,14 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<DropdownMenuSimple menu={moreOptionMenu}>
+									<Dropdown
+										items={moreOptionItems}
+										nativeButton
+										align="end"
+										side="bottom"
+									>
 										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
-									</DropdownMenuSimple>
+									</Dropdown>
 								)}
 							</Space>
 						</OffSetCol>

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

@@ -7,11 +7,17 @@ import { DataSource } from 'types/common/queryBuilder';
 import { viewMockData } from '../__mock__/viewData';
 import ExplorerCard from '../ExplorerCard';
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+const historyReplace = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
 	}),
+	useHistory: (): any => ({
+		...jest.requireActual('react-router-dom').useHistory(),
+		replace: historyReplace,
+	}),
 }));
 
 jest.mock('hooks/useSafeNavigate', () => ({

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

@@ -6,8 +6,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { viewMockData } from '../__mock__/viewData';
 import MenuItemGenerator from '../MenuItemGenerator';
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
 	}),

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

@@ -5,8 +5,8 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import SaveViewWithName from '../SaveViewWithName';
 
-jest.mock('react-router', () => ({
-	...jest.requireActual('react-router'),
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.APPLICATION}/`,
 	}),

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -26,8 +26,4 @@
 			font-size: var(--periscope-font-size-base);
 		}
 	}
-
-	.export-button {
-		width: 100%;
-	}
 }

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -1,8 +1,8 @@
 import { Download } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { RadioGroup } from '@signozhq/ui/radio-group';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	ClientExportData,
@@ -51,36 +51,41 @@ export default function ExportMenu({
 
 	return (
 		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-			<TooltipSimple title="Download">
+			<Tooltip title="Download">
 				<PopoverTrigger asChild>
 					<Button
 						variant="ghost"
 						color="secondary"
-						size="icon"
+						size="sm"
+						icon
 						aria-label="Download"
-						data-testid={`export-menu-${dataSource}`}
-						disabled={isExporting}
+						testId={`export-menu-${dataSource}`}
 						loading={isExporting}
 					>
 						<Download size={14} />
 					</Button>
 				</PopoverTrigger>
-			</TooltipSimple>
+			</Tooltip>
 			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
-						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<RadioGroup
+						color="primary"
+						value={exportFormat}
+						onChange={setExportFormat}
+						items={[
+							{ value: ExportFormat.Csv, label: 'csv' },
+							{ value: ExportFormat.Jsonl, label: 'jsonl' },
+						]}
+					/>
 				</div>
 
 				<Button
+					size="md"
 					variant="solid"
 					color="primary"
-					className="export-button"
+					width="100%"
 					onClick={handleExport}
-					disabled={isExporting}
 					loading={isExporting}
 					prefix={<Download size={16} />}
 				>

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

@@ -80,6 +80,6 @@ describe('ExportMenu', () => {
 		mockIsExporting = true;
 		renderMenu();
 
-		expect(screen.getByTestId(TEST_ID)).toBeDisabled();
+		expect(screen.getByTestId(TEST_ID)).toHaveAttribute('aria-disabled', 'true');
 	});
 });

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -57,9 +57,8 @@ function SortableField({
 			</div>
 			{!isRequired && (
 				<Button
-					className={cx(styles.removeBtn, 'periscope-btn')}
-					variant="outlined"
-					color="destructive"
+					variant="solid"
+					color="danger"
 					size="sm"
 					onClick={(): void => onRemove(field)}
 				>

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -32,12 +32,16 @@
 	}
 }
 
+// Wraps the search Input; restyles it via its --input-* tokens
+// (the Input is size="large" for the 40px height).
 .searchInput {
-	background-color: var(--l1-background);
-	height: 40px;
-	border-radius: 0;
-	border-left: none;
-	border-right: none;
+	--input-background: var(--l1-background);
+	--input-border-radius: 0;
+
+	[data-slot='input'] {
+		border-left: none;
+		border-right: none;
+	}
 }
 
 .section {
@@ -98,11 +102,15 @@
 	user-select: none;
 	font-size: 13px;
 
+	> [data-slot='button'] {
+		opacity: 0;
+		transition: opacity 0.15s ease-in-out;
+	}
+
 	&:hover {
 		background-color: var(--l2-background);
 
-		.removeBtn,
-		.addBtn {
+		> [data-slot='button'] {
 			opacity: 1;
 		}
 	}
@@ -137,14 +145,6 @@
 	height: 32px;
 }
 
-.removeBtn,
-.addBtn {
-	padding: 4px 10px;
-	opacity: 0;
-	transition: opacity 0.15s ease-in-out;
-	flex-shrink: 0;
-}
-
 .footer {
 	display: flex;
 	gap: 12px;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -140,10 +140,10 @@ function FieldsSelectorContent({
 					<X className={styles.closeIcon} size={16} onClick={onClose} />
 				</div>
 
-				<section>
+				<section className={styles.searchInput}>
 					<Input
-						className={styles.searchInput}
 						type="text"
+						size="large"
 						value={inputValue}
 						placeholder="Search for a field..."
 						onChange={handleInputChange}
@@ -173,6 +173,7 @@ function FieldsSelectorContent({
 				{hasUnsavedChanges && (
 					<div className={styles.footer}>
 						<Button
+							size="md"
 							variant="outlined"
 							color="secondary"
 							onClick={handleDiscard}
@@ -181,6 +182,7 @@ function FieldsSelectorContent({
 							Discard
 						</Button>
 						<Button
+							size="md"
 							variant="solid"
 							color="primary"
 							onClick={handleSave}

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -138,7 +138,6 @@ function OtherFields({
 									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
-											className={cx(styles.addBtn, 'periscope-btn')}
 											variant="outlined"
 											color="secondary"
 											size="sm"

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useAppLocation } from 'lib/router/useAppLocation';
+import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -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 = useAppLocation();
+	const location = useLocation();
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -102,10 +102,12 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroupSimple
+				<ToggleGroup
+					variant="outlined"
+					color="secondary"
+					size="sm"
 					type="single"
 					value={activeTab}
-					className="feedback-modal-tabs"
 					onChange={setActiveTab}
 					items={items}
 				/>