feat(base-path): updated lint error comment to oxlint

feat(base-path): migrated the new files added after rebase with main
feat(base-path): migrate backend bound urls and eslint upgrade to error
2026-04-23 12:20:31 +01:00 · 2026-04-23 12:25:38 +05:30 · 2026-04-23 12:22:36 +05:30 · 2026-04-23 12:22:33 +05:30 · 2026-04-23 12:20:02 +05:30 · 2026-04-23 12:20:02 +05:30
120 changed files with 4040 additions and 1053 deletions
--- a/ee/zeus/httpzeus/provider.go
+++ b/ee/zeus/httpzeus/provider.go
@@ -7,6 +7,7 @@ import (
 	"io"
 	"net/http"
 	"net/url"
+	"time"

 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
@@ -37,6 +38,7 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		providerSettings.MeterProvider,
 		client.WithRequestResponseLog(true),
 		client.WithRetryCount(3),
+		client.WithTimeout(30*time.Second),
 	)
 	if err != nil {
 		return nil, err
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -286,6 +286,8 @@
    // Prevents useStore.getState() - export standalone actions instead
    "signoz/no-navigator-clipboard": "error",
    // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
+    "signoz/no-raw-absolute-path": "error",
+    // Prevents window.open(path), window.location.origin + path, window.location.href = path
    "no-restricted-imports": [
      "error",
      {
@@ -597,8 +599,9 @@
      "rules": {
        "import/first": "off",
        // Should ignore due to mocks
-        "signoz/no-navigator-clipboard": "off"
-        // Tests can use navigator.clipboard directly
+        "signoz/no-navigator-clipboard": "off",
+        // Tests can use navigator.clipboard directly,
+        "signoz/no-raw-absolute-path":"off"
      }
    },
    {
--- a/frontend/.stylelintrc.cjs
+++ b/frontend/.stylelintrc.cjs
@@ -1,3 +1,4 @@
+// oxlint-disable-next-line typescript/no-require-imports
 const path = require('path');

 module.exports = {
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -39,12 +40,12 @@
 		<meta
 			data-react-helmet="true"
 			property="og:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
 			name="twitter:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
@@ -59,7 +60,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<script>
@@ -136,7 +137,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,7 +52,7 @@
    "@signozhq/design-tokens": "2.1.4",
    "@signozhq/icons": "0.1.0",
    "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.9",
+    "@signozhq/ui": "0.0.10",
    "@tanstack/react-table": "8.21.3",
    "@tanstack/react-virtual": "3.13.22",
    "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -266,4 +266,4 @@
    "tmp": "0.2.4",
    "vite": "npm:rolldown-vite@7.3.1"
  }
-}
+}
--- a/frontend/plugins/rules/no-raw-absolute-path.mjs
+++ b/frontend/plugins/rules/no-raw-absolute-path.mjs
@@ -0,0 +1,152 @@
+/**
+ * Rule: no-raw-absolute-path
+ *
+ * Catches patterns that break at runtime when the app is served from a
+ * sub-path (e.g. /signoz/):
+ *
+ *   1. window.open(path, '_blank')
+ *      → use openInNewTab(path) which calls withBasePath internally
+ *
+ *   2. window.location.origin + path  /  `${window.location.origin}${path}`
+ *      → use getAbsoluteUrl(path)
+ *
+ *   3. frontendBaseUrl: window.location.origin  (bare origin usage)
+ *      → use getBaseUrl() to include the base path
+ *
+ *   4. window.location.href = path
+ *      → use withBasePath(path) or navigate() for internal navigation
+ *
+ * External URLs (first arg starts with "http") are explicitly allowed.
+ */
+
+function isOriginAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'origin' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isHrefAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'href' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isExternalUrl(node) {
+	if (node.type === 'Literal' && typeof node.value === 'string') {
+		return node.value.startsWith('http://') || node.value.startsWith('https://');
+	}
+	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
+		const raw = node.quasis[0].value.raw;
+		return raw.startsWith('http://') || raw.startsWith('https://');
+	}
+	return false;
+}
+
+
+// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
+function isSafeHelperCall(node) {
+	return (
+		node.type === 'CallExpression' &&
+		node.callee.type === 'Identifier' &&
+		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
+	);
+}
+
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
+			category: 'Base Path Safety',
+		},
+		schema: [],
+		messages: {
+			windowOpen:
+				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
+			originConcat:
+				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
+			originDirect:
+				'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
+			hrefAssign:
+				'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
+		},
+	},
+
+	create(context) {
+		return {
+			// window.open(path, ...) — allow only external first-arg URLs
+			CallExpression(node) {
+				const { callee, arguments: args } = node;
+				if (
+					callee.type !== 'MemberExpression' ||
+					callee.object.type !== 'Identifier' ||
+					callee.object.name !== 'window' ||
+					callee.property.name !== 'open'
+				)
+					{return;}
+				if (args.length === 0) {return;}
+				if (isExternalUrl(args[0])) {return;}
+				if (isSafeHelperCall(args[0])) {return;}
+
+				context.report({ node, messageId: 'windowOpen' });
+			},
+
+			// window.location.origin + path
+			BinaryExpression(node) {
+				if (node.operator !== '+') {return;}
+				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// `${window.location.origin}${path}`
+			TemplateLiteral(node) {
+				if (node.expressions.some(isOriginAccess)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// window.location.origin used directly (not in concatenation)
+			// Catches: frontendBaseUrl: window.location.origin
+			MemberExpression(node) {
+				if (!isOriginAccess(node)) {return;}
+
+				const parent = node.parent;
+				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
+				if (parent.type === 'BinaryExpression' && parent.operator === '+') {return;}
+				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
+				if (parent.type === 'TemplateLiteral') {return;}
+
+				context.report({ node, messageId: 'originDirect' });
+			},
+
+			// window.location.href = path
+			AssignmentExpression(node) {
+				if (node.operator !== '=') {return;}
+				if (!isHrefAccess(node.left)) {return;}
+
+				// Allow external URLs
+				if (isExternalUrl(node.right)) {return;}
+				// Allow safe helper calls
+				if (isSafeHelperCall(node.right)) {return;}
+
+				context.report({ node, messageId: 'hrefAssign' });
+			},
+		};
+	},
+};
--- a/frontend/plugins/signoz.mjs
+++ b/frontend/plugins/signoz.mjs
@@ -8,6 +8,7 @@
 import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
+import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';

 export default {
 	meta: {
@@ -17,5 +18,6 @@ export default {
 		'no-zustand-getstate-in-hooks': noZustandGetStateInHooks,
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
+		'no-raw-absolute-path': noRawAbsolutePath,
 	},
 };
--- a/frontend/src/ReactI18/index.tsx
+++ b/frontend/src/ReactI18/index.tsx
@@ -2,6 +2,7 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { getBasePath } from 'utils/basePath';

 import cacheBursting from '../../i18n-translations-hash.json';

@@ -24,7 +25,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `/locales/${language}/${namespace}.json?h=${hash}`;
+				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {
--- a/frontend/src/api/generatedAPIInstance.ts
+++ b/frontend/src/api/generatedAPIInstance.ts
@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };

+generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -11,6 +11,7 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';

 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -67,6 +68,39 @@ export const interceptorsRequestResponse = (
 	return value;
 };

+// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
+// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
+function prependBase(base: string, path: string): string {
+	return path.startsWith(base) ? path : base + path.slice(1);
+}
+
+// Prepends the runtime base path to outgoing requests so API calls work under
+// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
+// (dev baseURL is a full http:// URL, not an absolute path).
+export const interceptorsRequestBasePath = (
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+	const basePath = getBasePath();
+	if (basePath === '/') {
+		return value;
+	}
+
+	if (value.baseURL?.startsWith('/')) {
+		// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
+		value.baseURL = prependBase(basePath, value.baseURL);
+	} else if (value.baseURL?.startsWith('http')) {
+		// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
+		const url = new URL(value.baseURL);
+		url.pathname = prependBase(basePath, url.pathname);
+		value.baseURL = url.toString();
+	} else if (!value.baseURL && value.url?.startsWith('/')) {
+		// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
+		value.url = prependBase(basePath, value.url);
+	}
+
+	return value;
+};
+
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -133,6 +167,7 @@ const instance = axios.create({
 });

 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);

 export const AxiosAlertManagerInstance = axios.create({
@@ -147,6 +182,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);

 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +194,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios V4
@@ -170,6 +207,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios V5
@@ -182,6 +220,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios Base
@@ -194,6 +233,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //

 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +241,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);

 export { apiV1 };
 export default instance;
--- a/frontend/src/components/CeleryTask/useNavigateToExplorer.ts
+++ b/frontend/src/components/CeleryTask/useNavigateToExplorer.ts
@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';

 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;

-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,
--- a/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx
+++ b/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx
@@ -9,6 +9,7 @@ import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';

 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
@@ -54,7 +55,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		});

 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};

--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
@@ -28,6 +28,7 @@ import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 import { toAPIError } from 'utils/errorUtils';

 import DeleteMemberDialog from './DeleteMemberDialog';
@@ -381,7 +382,7 @@ function EditMemberDrawer({
 				pathParams: { id: member.id },
 			});
 			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
+				const link = getAbsoluteUrl(`/password-reset?token=${response.data.token}`);
 				setResetLink(link);
 				setResetLinkExpiresAt(
 					response.data.expiresAt
--- a/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
+++ b/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
@@ -13,6 +13,7 @@ import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getAbsoluteUrl } from 'utils/basePath';

 const routesToBeSharedWithTime = [
 	ROUTES.LOGS_EXPLORER,
@@ -80,17 +81,13 @@ function ShareURLModal(): JSX.Element {

 				urlQuery.delete(QueryParams.relativeTime);

-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			} else {
 				urlQuery.delete(QueryParams.startTime);
 				urlQuery.delete(QueryParams.endTime);

 				urlQuery.set(QueryParams.relativeTime, selectedTime);
-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			}
 		}

--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
@@ -17,6 +17,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';

@@ -191,7 +192,7 @@ function InviteMembersModal({
 					email: row.email.trim(),
 					name: '',
 					role: row.role as ROLES,
-					frontendBaseUrl: window.location.origin,
+					frontendBaseUrl: getBaseUrl(),
 				});
 			} else {
 				await inviteUsers({
@@ -199,7 +200,7 @@ function InviteMembersModal({
 						email: row.email.trim(),
 						name: '',
 						role: row.role,
-						frontendBaseUrl: window.location.origin,
+						frontendBaseUrl: getBaseUrl(),
 					})),
 				});
 			}
--- a/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx
+++ b/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx
@@ -14,6 +14,7 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';

 import './LaunchChatSupport.styles.scss';

@@ -154,7 +155,7 @@ function LaunchChatSupport({
 		});

 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};

--- a/frontend/src/components/LearnMore/LearnMore.tsx
+++ b/frontend/src/components/LearnMore/LearnMore.tsx
@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';

 import './LearnMore.styles.scss';

@@ -14,7 +15,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	};
 	return (
--- a/frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx
+++ b/frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx
@@ -20,6 +20,7 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';

 import './MessagingQueueHealthCheck.styles.scss';
@@ -76,7 +77,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 	return {
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx
@@ -9,6 +9,7 @@ import {
 } from 'container/ApiMonitoring/utils';
 import { UnfoldVertical } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
+import { openInNewTab } from 'utils/navigation';

 import emptyStateUrl from '@/assets/Icons/emptyState.svg';

@@ -94,20 +95,14 @@ function DependentServices({
 					}}
 					onRow={(record): { onClick: () => void; className: string } => ({
 						onClick: (): void => {
-							const url = new URL(
-								`/services/${
-									record.serviceData.serviceName &&
-									record.serviceData.serviceName !== '-'
-										? record.serviceData.serviceName
-										: ''
-								}`,
-								window.location.origin,
-							);
+							const serviceName =
+								record.serviceData.serviceName && record.serviceData.serviceName !== '-'
+									? record.serviceData.serviceName
+									: '';
 							const urlQuery = new URLSearchParams();
 							urlQuery.set(QueryParams.startTime, timeRange.startTime.toString());
 							urlQuery.set(QueryParams.endTime, timeRange.endTime.toString());
-							url.search = urlQuery.toString();
-							window.open(url.toString(), '_blank');
+							openInNewTab(`/services/${serviceName}?${urlQuery.toString()}`);
 						},
 						className: 'clickable-row',
 					})}
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -73,6 +73,7 @@ import {
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
+import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
@@ -461,7 +462,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {

 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [manageCreditCard]);

--- a/frontend/src/container/BillingContainer/BillingContainer.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.tsx
@@ -31,6 +31,7 @@ import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';

 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
@@ -324,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
 			});

 			updateCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		} else {
 			logEvent('Billing : Manage Billing', {
@@ -333,7 +334,7 @@ export default function BillingContainer(): JSX.Element {
 			});

 			manageCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
+++ b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
@@ -7,6 +7,7 @@ import { FeatureKeys } from 'constants/features';
 import { useAppContext } from 'providers/App/App';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';

 import { getOptionList } from './config';
 import { AlertTypeCard, SelectTypeContainer } from './styles';
@@ -55,7 +56,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 			page: 'New alert data source selection page',
 		});

-		window.open(url, '_blank');
+		openInNewTab(url);
 	}
 	const renderOptions = useMemo(
 		() => (
--- a/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx
@@ -14,6 +14,7 @@ import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';

 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
@@ -387,7 +388,7 @@ export function NotificationChannelsNotFoundContent({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								window.open(ROUTES.CHANNELS_NEW, '_blank');
+								openInNewTab(ROUTES.CHANNELS_NEW);
 							}}
 						>
 							here.
--- a/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
@@ -46,6 +46,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffix={<ExternalLink size={12} />}
 					onClick={(): void => {
+						// oxlint-disable-next-line signoz/no-raw-absolute-path
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
 				>
@@ -74,10 +75,8 @@ export default function CustomDomainSettings(): JSX.Element {
 	const [isPollingEnabled, setIsPollingEnabled] = useState(false);
 	const [hosts, setHosts] = useState<ZeustypesHostDTO[] | null>(null);

-	const [
-		updateDomainError,
-		setUpdateDomainError,
-	] = useState<AxiosError<RenderErrorResponseDTO> | null>(null);
+	const [updateDomainError, setUpdateDomainError] =
+		useState<AxiosError<RenderErrorResponseDTO> | null>(null);

 	const [customDomainSubdomain, setCustomDomainSubdomain] = useState<
 		string | undefined
@@ -90,10 +89,8 @@ export default function CustomDomainSettings(): JSX.Element {
 		refetch: refetchHosts,
 	} = useGetHosts();

-	const {
-		mutate: updateSubDomain,
-		isLoading: isLoadingUpdateCustomDomain,
-	} = usePutHost<AxiosError<RenderErrorResponseDTO>>();
+	const { mutate: updateSubDomain, isLoading: isLoadingUpdateCustomDomain } =
+		usePutHost<AxiosError<RenderErrorResponseDTO>>();

 	const stripProtocol = (url: string): string => url?.split('://')[1] ?? url;

@@ -137,7 +134,7 @@ export default function CustomDomainSettings(): JSX.Element {
 			{
 				onSuccess: () => {
 					setIsPollingEnabled(true);
-					refetchHosts();
+					void refetchHosts();
 					setIsEditModalOpen(false);
 					setCustomDomainSubdomain(subdomain);
 					const newUrl = `https://${subdomain}.${dnsSuffix}`;
--- a/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx
@@ -15,6 +15,8 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';

 import './PublicDashboard.styles.scss';

@@ -212,7 +214,7 @@ function PublicDashboardSetting(): JSX.Element {

 		try {
 			setCopyPublicDashboardURL(
-				`${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+				getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 			);
 			toast.success('Copied Public Dashboard URL successfully');
 		} catch (error) {
@@ -221,7 +223,7 @@ function PublicDashboardSetting(): JSX.Element {
 	};

 	const publicDashboardURL = useMemo(
-		() => `${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+		() => getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 		[publicDashboardResponse],
 	);

@@ -294,7 +296,7 @@ function PublicDashboardSetting(): JSX.Element {
 								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
-										window.open(publicDashboardURL, '_blank');
+										openInNewTab(publicDashboardURL);
 									}
 								}}
 							/>
--- a/frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx
@@ -37,6 +37,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
+				canPinTooltip: rest.canPinTooltip,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
@@ -46,6 +47,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.yAxisUnit,
 			rest.decimalPrecision,
 			isStackedBarChart,
+			rest.canPinTooltip,
 		],
 	);

--- a/frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx
@@ -25,6 +25,8 @@ export default function ChartWrapper({
 	showTooltip = true,
 	showLegend = true,
 	canPinTooltip = false,
+	pinKey,
+	onClick,
 	syncMode,
 	syncKey,
 	onDestroy = noop,
@@ -101,6 +103,8 @@ export default function ChartWrapper({
 							<TooltipPlugin
 								config={config}
 								canPinTooltip={canPinTooltip}
+								pinKey={pinKey}
+								onClick={onClick}
 								syncMode={syncMode}
 								maxWidth={Math.max(
 									TOOLTIP_MIN_WIDTH,
--- a/frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx
@@ -26,10 +26,11 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 				...props,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				canPinTooltip: rest.canPinTooltip,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.yAxisUnit, rest.decimalPrecision],
+		[customTooltip, rest.yAxisUnit, rest.decimalPrecision, rest.canPinTooltip],
 	);

 	return (
--- a/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
@@ -21,10 +21,17 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				canPinTooltip: rest.canPinTooltip,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[
+			customTooltip,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+			rest.canPinTooltip,
+		],
 	);

 	return (
--- a/frontend/src/container/DashboardContainer/visualization/charts/types.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/types.ts
@@ -13,6 +13,12 @@ interface BaseChartProps {
 	showTooltip?: boolean;
 	showLegend?: boolean;
 	canPinTooltip?: boolean;
+	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
+	pinKey?: string;
+	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
+	onClick?: (clickData: TooltipClickData) => void;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
@@ -121,6 +121,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
+					canPinTooltip
 					plotRef={onPlotRef}
 					onDestroy={onPlotDestroy}
 					data={chartData as uPlot.AlignedData}
--- a/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
@@ -89,6 +89,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={(): void => {
 						uPlotRef.current = null;
 					}}
+					canPinTooltip
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					isQueriesMerged={widget.mergeAllActiveQueries}
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
@@ -112,6 +112,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
 					}}
+					canPinTooltip
 					timezone={timezone}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
--- a/frontend/src/container/ForgotPassword/index.tsx
+++ b/frontend/src/container/ForgotPassword/index.tsx
@@ -9,6 +9,7 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import APIError from 'types/api/error';
 import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+import { getBaseUrl } from 'utils/basePath';

 import tvUrl from '@/assets/svgs/tv.svg';

@@ -104,7 +105,7 @@ function ForgotPassword({
 			data: {
 				email: values.email,
 				orgId: currentOrgId,
-				frontendBaseURL: window.location.origin,
+				frontendBaseURL: getBaseUrl(),
 			},
 		});
 	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);
--- a/frontend/src/container/FormAlertRules/BasicInfo.tsx
+++ b/frontend/src/container/FormAlertRules/BasicInfo.tsx
@@ -15,6 +15,7 @@ import { AlertDef, Labels } from 'types/api/alerts/def';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
+import { openInNewTab } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';

 import ChannelSelect from './ChannelSelect';
@@ -87,7 +88,7 @@ function BasicInfo({
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
 			ruleId: isNewRule ? 0 : alertDef?.id,
 		});
-		window.open(ROUTES.CHANNELS_NEW, '_blank');
+		openInNewTab(ROUTES.CHANNELS_NEW);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	const hasLoggedEvent = useRef(false);
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -55,6 +55,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isModifierKeyPressed } from 'utils/app';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
+import { openInNewTab } from 'utils/navigation';

 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
@@ -760,7 +761,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	}

--- a/frontend/src/container/Home/Dashboards/Dashboards.tsx
+++ b/frontend/src/container/Home/Dashboards/Dashboards.tsx
@@ -10,6 +10,7 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';

 import dialsUrl from '@/assets/Icons/dials.svg';

@@ -114,7 +115,7 @@ export default function Dashboards({
 							dashboardName: dashboard.data.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
-							window.open(getLink(), '_blank');
+							openInNewTab(getLink());
 						} else {
 							safeNavigate(getLink());
 						}
--- a/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx
+++ b/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx
@@ -9,6 +9,7 @@ import { Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { openInNewTab } from 'utils/navigation';

 import containerPlusUrl from '@/assets/Icons/container-plus.svg';
 import helloWaveUrl from '@/assets/Icons/hello-wave.svg';
@@ -51,7 +52,7 @@ function DataSourceInfo({
 		if (activeLicense && activeLicense.platform === LicensePlatform.CLOUD) {
 			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 		} else {
-			window?.open(DOCS_LINKS.ADD_DATA_SOURCE, '_blank', 'noopener noreferrer');
+			openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 		}
 	};

--- a/frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx
+++ b/frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx
@@ -8,6 +8,7 @@ import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';

 import './HomeChecklist.styles.scss';

@@ -99,11 +100,7 @@ function HomeChecklist({
 														) {
 															history.push(item.toRoute || '');
 														} else {
-															window?.open(
-																item.docsLink || '',
-																'_blank',
-																'noopener noreferrer',
-															);
+															openInNewTab(item.docsLink || '');
 														}
 													}}
 												>
@@ -119,7 +116,7 @@ function HomeChecklist({
 																step: item.id,
 															});

-															window?.open(item.docsLink, '_blank', 'noopener noreferrer');
+															openInNewTab(item.docsLink ?? '');
 														}}
 													>
 														<BookOpenText size={16} />
--- a/frontend/src/container/Home/Services/ServiceMetrics.tsx
+++ b/frontend/src/container/Home/Services/ServiceMetrics.tsx
@@ -31,6 +31,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';

 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';

@@ -79,11 +80,7 @@ const EmptyState = memo(
 								) {
 									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
-									window?.open(
-										DOCS_LINKS.ADD_DATA_SOURCE,
-										'_blank',
-										'noopener noreferrer',
-									);
+									openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 								}
 							}}
 						>
--- a/frontend/src/container/Home/Services/ServiceTraces.tsx
+++ b/frontend/src/container/Home/Services/ServiceTraces.tsx
@@ -17,6 +17,7 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';

 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';

@@ -133,11 +134,7 @@ export default function ServiceTraces({
 									) {
 										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
-										window?.open(
-											DOCS_LINKS.ADD_DATA_SOURCE,
-											'_blank',
-											'noopener noreferrer',
-										);
+										openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 									}
 								}}
 							>
--- a/frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx
@@ -51,6 +51,7 @@ import {
 	LogsAggregatorOperator,
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';

 import { filterDuplicateFilters } from '../commonUtils';
@@ -569,10 +570,7 @@ function K8sBaseDetails<T>({

 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));

-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -591,10 +589,7 @@ function K8sBaseDetails<T>({

 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));

-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};

--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards.tsx
@@ -4,6 +4,7 @@ import {
 	CloudintegrationtypesServiceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { withBasePath } from 'utils/basePath';

 import './ServiceDashboards.styles.scss';

@@ -44,7 +45,11 @@ function ServiceDashboards({
 									return;
 								}
 								if (event.metaKey || event.ctrlKey) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
 									return;
 								}
 								safeNavigate(dashboardUrl);
@@ -54,7 +59,11 @@ function ServiceDashboards({
 									return;
 								}
 								if (event.button === 1) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
 								}
 							}}
 							onKeyDown={(event): void => {
--- a/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx
+++ b/frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx
@@ -1,5 +1,6 @@
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';

 interface AlertInfoCardProps {
 	header: string;
@@ -19,7 +20,7 @@ function AlertInfoCard({
 			className="alert-info-card"
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 		>
 			<div className="alert-card-text">
--- a/frontend/src/container/ListAlertRules/AlertsEmptyState/InfoLinkText.tsx
+++ b/frontend/src/container/ListAlertRules/AlertsEmptyState/InfoLinkText.tsx
@@ -1,5 +1,6 @@
 import { ArrowRightOutlined, PlayCircleFilled } from '@ant-design/icons';
 import { Flex, Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';

 interface InfoLinkTextProps {
 	infoText: string;
@@ -20,7 +21,7 @@ function InfoLinkText({
 		<Flex
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 			className="info-link-container"
 		>
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -83,6 +83,8 @@ import {
 } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';

 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 import dashboardsUrl from '@/assets/Icons/dashboards.svg';
@@ -457,7 +459,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														window.open(getLink(), '_blank');
+														openInNewTab(getLink());
 													}}
 												>
 													Open in New Tab
@@ -469,7 +471,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														setCopy(`${window.location.origin}${getLink()}`);
+														setCopy(getAbsoluteUrl(getLink()));
 													}}
 												>
 													Copy Link
--- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
@@ -1,6 +1,7 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
+import { openInNewTab } from 'utils/navigation';

 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
@@ -12,7 +13,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {

 	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 		if (event.metaKey || event.ctrlKey) {
-			window.open(getLink(), '_blank');
+			openInNewTab(getLink());
 		} else {
 			history.push(getLink());
 		}
--- a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
@@ -17,6 +17,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { withBasePath } from 'utils/basePath';

 import { useContextLogData } from './useContextLogData';

@@ -116,7 +117,7 @@ function ContextLogRenderer({
 			);

 			const link = `${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`;
-			window.open(link, '_blank', 'noopener,noreferrer');
+			window.open(withBasePath(link), '_blank', 'noopener,noreferrer');
 		},
 		[query, urlQuery],
 	);
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/frontend/src/container/LogDetailedView/TableView.tsx
@@ -34,6 +34,7 @@ import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { openInNewTab } from 'utils/navigation';

 import { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
@@ -191,7 +192,7 @@ function TableView({

 			if (event.ctrlKey || event.metaKey) {
 				// open the trace in new tab
-				window.open(route, '_blank');
+				openInNewTab(route);
 			} else {
 				history.push(route);
 			}
--- a/frontend/src/container/Login/index.tsx
+++ b/frontend/src/container/Login/index.tsx
@@ -60,10 +60,8 @@ function Login(): JSX.Element {
 	const [sessionsContext, setSessionsContext] = useState<SessionsContext>();
 	const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 	const [sessionsOrgId, setSessionsOrgId] = useState<string>('');
-	const [
-		sessionsContextLoading,
-		setIsLoadingSessionsContext,
-	] = useState<boolean>(false);
+	const [sessionsContextLoading, setIsLoadingSessionsContext] =
+		useState<boolean>(false);
 	const [form] = Form.useForm<FormValues>();
 	const [errorMessage, setErrorMessage] = useState<APIError>();

@@ -213,6 +211,7 @@ function Login(): JSX.Element {
 			if (isCallbackAuthN) {
 				const url = form.getFieldValue('url');

+				// oxlint-disable-next-line signoz/no-raw-absolute-path
 				window.location.href = url;
 			}
 		} catch (error) {
@@ -328,7 +327,6 @@ function Login(): JSX.Element {
 								data-testid="email"
 								required
 								placeholder="e.g. john@signoz.io"
-								autoFocus
 								disabled={versionLoading}
 								className="login-form-input"
 								onPressEnter={onNextHandler}
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx
@@ -34,6 +34,7 @@ import ROUTES from 'constants/routes';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDragColumns from 'hooks/useDragColumns';
+import { getAbsoluteUrl } from 'utils/basePath';

 import { infinityDefaultStyles } from '../InfinityTableView/config';
 import { TanStackTableStyled } from '../InfinityTableView/styles';
@@ -239,7 +240,7 @@ const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 				urlQuery.delete(QueryParams.activeLogId);
 				urlQuery.delete(QueryParams.relativeTime);
 				urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
-				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+				const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);

 				setCopy(link);
 				toast.success('Copied to clipboard', { position: 'top-right' });
--- a/frontend/src/container/MetricsApplication/utils.ts
+++ b/frontend/src/container/MetricsApplication/utils.ts
@@ -1,5 +1,6 @@
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { withBasePath } from 'utils/basePath';

 import { TopOperationList } from './TopOperationsTable';
 import { NavigateToTraceProps } from './types';
@@ -37,7 +38,7 @@ export const navigateToTrace = ({
 	}=${JSONCompositeQuery}`;

 	if (openInNewTab) {
-		window.open(newTraceExplorerPath, '_blank');
+		window.open(withBasePath(newTraceExplorerPath), '_blank');
 	} else {
 		safeNavigate(newTraceExplorerPath);
 	}
--- a/frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx
@@ -9,6 +9,7 @@ import {
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { Bell, Grid } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 import { pluralize } from 'utils/pluralize';

 import { DashboardsAndAlertsPopoverProps } from './types';
@@ -67,9 +68,8 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={alert.alertId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=${alert.alertId}`,
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"
@@ -90,11 +90,10 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={dashboard.dashboardId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboardId,
 								}),
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"
--- a/frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx
@@ -18,6 +18,7 @@ import {
 import useContextVariables from 'hooks/dashboard/useContextVariables';
 import { Plus, Trash2 } from 'lucide-react';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
+import { getBaseUrl } from 'utils/basePath';

 import VariablesDropdown from './VariablesDropdown';

@@ -84,7 +85,7 @@ function UpdateContextLinks({
 	);

 	// Function to get current domain
-	const getCurrentDomain = (): string => window.location.origin;
+	const getCurrentDomain = (): string => getBaseUrl();

 	// Function to handle variable selection from dropdown
 	const handleVariableSelect = (
--- a/frontend/src/container/NoLogs/NoLogs.tsx
+++ b/frontend/src/container/NoLogs/NoLogs.tsx
@@ -6,6 +6,7 @@ import history from 'lib/history';
 import { ArrowUpRight } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 import DOCLINKS from 'utils/docLinks';
+import { openInNewTab } from 'utils/navigation';

 import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';

@@ -42,11 +43,11 @@ export default function NoLogs({
 			}
 			history.push(link);
 		} else if (dataSource === 'traces') {
-			window.open(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE, '_blank');
+			openInNewTab(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE);
 		} else if (dataSource === DataSource.METRICS) {
-			window.open(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE, '_blank');
+			openInNewTab(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE);
 		} else {
-			window.open(`${DOCLINKS.USER_GUIDE}${dataSource}/`, '_blank');
+			openInNewTab(`${DOCLINKS.USER_GUIDE}${dataSource}/`);
 		}
 	};
 	return (
--- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
@@ -16,6 +16,7 @@ import {
 	Trash2,
 } from 'lucide-react';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 import { v4 as uuid } from 'uuid';

 import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
@@ -58,7 +59,7 @@ function InviteTeamMembers({
 		email: '',
 		role: '',
 		name: '',
-		frontendBaseUrl: window.location.origin,
+		frontendBaseUrl: getBaseUrl(),
 		id: '',
 	};

--- a/frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx
+++ b/frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx
@@ -8,6 +8,7 @@ import { DOCS_BASE_URL } from 'constants/app';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
 import { useNotifications } from 'hooks/useNotifications';
 import { ArrowUpRight, Copy, Info, Key, TriangleAlert } from 'lucide-react';
+import { withBasePath } from 'utils/basePath';

 import './IngestionDetails.styles.scss';

@@ -215,7 +216,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 							</a>
 							. To create a new one,{' '}
 							<a
-								href="/settings/ingestion-settings"
+								href={withBasePath('/settings/ingestion-settings')}
 								target="_blank"
 								className="learn-more"
 								rel="noreferrer"
--- a/frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx
+++ b/frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx
@@ -8,6 +8,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, debounce, isEmpty } from 'lodash-es';
 import { ArrowRight, CheckCircle, Plus, TriangleAlert, X } from 'lucide-react';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 import { v4 as uuid } from 'uuid';

 import './InviteTeamMembers.styles.scss';
@@ -56,7 +57,7 @@ function InviteTeamMembers({
 		email: '',
 		role: 'EDITOR',
 		name: '',
-		frontendBaseUrl: window.location.origin,
+		frontendBaseUrl: getBaseUrl(),
 		id: '',
 	};

--- a/frontend/src/container/OrganizationSettings/AuthDomain/index.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/index.tsx
@@ -17,6 +17,7 @@ import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';

 import CreateEdit from './CreateEdit/CreateEdit';
 import SSOEnforcementToggle from './SSOEnforcementToggle';
@@ -144,7 +145,7 @@ function AuthDomain(): JSX.Element {
 						return <span className="auth-domain-list-na">N/A</span>;
 					}

-					const href = `${window.location.origin}/${relayPath}`;
+					const href = getAbsoluteUrl(`/${relayPath}`);
 					return <CopyToClipboard textToCopy={href} />;
 				},
 			},
--- a/frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.tsx
+++ b/frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.tsx
@@ -4,6 +4,7 @@ import { Button, Form, FormInstance, Modal } from 'antd';
 import sendInvite from 'api/v1/invite/create';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';

 import InviteTeamMembers from '../InviteTeamMembers';
 import { InviteMemberFormValues } from '../utils';
@@ -40,7 +41,7 @@ function InviteUserModal(props: InviteUserModalProps): JSX.Element {
 								email: member.email,
 								name: member?.name,
 								role: member.role,
-								frontendBaseUrl: window.location.origin,
+								frontendBaseUrl: getBaseUrl(),
 							});

 							notifications.success({
--- a/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
@@ -14,6 +14,7 @@ import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { openInNewTab } from 'utils/navigation';

 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
@@ -115,7 +116,7 @@ const useBaseAggregateOptions = ({
 					key={id}
 					icon={<LinkOutlined />}
 					onClick={(): void => {
-						window.open(url, '_blank');
+						openInNewTab(url);
 						onClose?.();
 					}}
 				>
--- a/frontend/src/container/RoutingPolicies/RoutingPolicyDetails.tsx
+++ b/frontend/src/container/RoutingPolicies/RoutingPolicyDetails.tsx
@@ -14,6 +14,7 @@ import { ModalTitle } from 'container/PipelinePage/PipelineListsView/styles';
 import { Check, Loader, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';

 import { INITIAL_ROUTING_POLICY_DETAILS_FORM_STATE } from './constants';
 import {
@@ -76,7 +77,7 @@ function RoutingPolicyDetails({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								window.open(ROUTES.CHANNELS_NEW, '_blank');
+								openInNewTab(ROUTES.CHANNELS_NEW);
 							}}
 						>
 							here.
--- a/frontend/src/container/SideNav/SideNav.tsx
+++ b/frontend/src/container/SideNav/SideNav.tsx
@@ -818,7 +818,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		);

 		if (item && !('type' in item) && item.isExternal && item.url) {
-			window.open(item.url, '_blank');
+			openInNewTab(item.url);
 		}

 		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
--- a/frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/SpanLogs/SpanLogs.tsx
@@ -28,6 +28,7 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';

 import noDataUrl from '@/assets/Icons/no-data.svg';
@@ -143,7 +144,7 @@ function SpanLogs({

 			const url = `${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`;

-			window.open(url, '_blank');
+			openInNewTab(url);
 		},
 		[
 			isLogSpanRelated,
--- a/frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx
+++ b/frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx
@@ -17,6 +17,7 @@ import { BarChart2, Compass, X } from 'lucide-react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Span } from 'types/api/trace/getTraceV2';
 import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
+import { getAbsoluteUrl } from 'utils/basePath';

 import { RelatedSignalsViews } from '../constants';
 import SpanLogs from '../SpanLogs/SpanLogs';
@@ -158,9 +159,7 @@ function SpanRelatedSignals({
 		searchParams.set(QueryParams.endTime, endTimeMs.toString());

 		window.open(
-			`${window.location.origin}${
-				ROUTES.LOGS_EXPLORER
-			}?${searchParams.toString()}`,
+			getAbsoluteUrl(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`),
 			'_blank',
 			'noopener,noreferrer',
 		);
--- a/frontend/src/container/Trace/TraceTable/index.tsx
+++ b/frontend/src/container/Trace/TraceTable/index.tsx
@@ -31,6 +31,7 @@ import {
 	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 } from 'types/actions/trace';
 import { TraceReducer } from 'types/reducer/trace';
+import { openInNewTab } from 'utils/navigation';
 import { v4 } from 'uuid';

 dayjs.extend(duration);
@@ -214,7 +215,7 @@ function TraceTable(): JSX.Element {
 					event.preventDefault();
 					event.stopPropagation();
 					if (event.metaKey || event.ctrlKey) {
-						window.open(getLink(record), '_blank');
+						openInNewTab(getLink(record));
 					} else {
 						history.push(getLink(record));
 					}
--- a/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
+++ b/frontend/src/container/TracesTableComponent/TracesTableComponent.tsx
@@ -28,6 +28,7 @@ import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { openInNewTab } from 'utils/navigation';

 import './TracesTableComponent.styles.scss';

@@ -86,7 +87,7 @@ function TracesTableComponent({
 				event.preventDefault();
 				event.stopPropagation();
 				if (event.metaKey || event.ctrlKey) {
-					window.open(getTraceLink(record), '_blank');
+					openInNewTab(getTraceLink(record));
 				} else {
 					history.push(getTraceLink(record));
 				}
--- a/frontend/src/hooks/integration/aws/useIntegrationModal.ts
+++ b/frontend/src/hooks/integration/aws/useIntegrationModal.ts
@@ -72,7 +72,7 @@ export function useIntegrationModal({
 		ModalStateEnum.FORM,
 	);
 	const [isLoading, setIsLoading] = useState(false);
-	const [accountId, setAccountId] = useState<string | undefined>(undefined);
+	const [accountId, setAccountId] = useState<string | undefined>();
 	const [activeView, setActiveView] = useState<ActiveViewEnum>(
 		ActiveViewEnum.FORM,
 	);
@@ -80,7 +80,7 @@ export function useIntegrationModal({
 	const [includeAllRegions, setIncludeAllRegions] = useState(false);
 	const [selectedDeploymentRegion, setSelectedDeploymentRegion] = useState<
 		string | undefined
-	>(undefined);
+	>();
 	const allRegions = useMemo(
 		() => regions.flatMap((r) => r.subRegions.map((sr) => sr.name)),
 		[],
@@ -108,7 +108,7 @@ export function useIntegrationModal({

 	const handleConnectionSuccess = useCallback(
 		(payload: { cloudAccountId: string; status?: unknown }): void => {
-			logEvent('AWS Integration: Account connected', {
+			void logEvent('AWS Integration: Account connected', {
 				cloudAccountId: payload.cloudAccountId,
 				status: payload.status,
 			});
@@ -126,7 +126,7 @@ export function useIntegrationModal({
 	const handleConnectionTimeout = useCallback(
 		(payload: { id?: string }): void => {
 			setModalState(ModalStateEnum.ERROR);
-			logEvent('AWS Integration: Account connection attempt timed out', {
+			void logEvent('AWS Integration: Account connection attempt timed out', {
 				id: payload.id,
 			});
 		},
@@ -140,19 +140,17 @@ export function useIntegrationModal({
 	const { mutate: generateUrl, isLoading: isGeneratingUrl } = useCreateAccount();

 	const handleError = useAxiosError();
-	const {
-		data: connectionParams,
-		isLoading: isConnectionParamsLoading,
-	} = useGetConnectionCredentials<GetConnectionCredentialsQueryResult>(
-		{
-			cloudProvider: INTEGRATION_TYPES.AWS,
-		},
-		{
-			query: {
-				onError: handleError,
+	const { data: connectionParams, isLoading: isConnectionParamsLoading } =
+		useGetConnectionCredentials<GetConnectionCredentialsQueryResult>(
+			{
+				cloudProvider: INTEGRATION_TYPES.AWS,
 			},
-		},
-	);
+			{
+				query: {
+					onError: handleError,
+				},
+			},
+		);

 	const handleGenerateUrl = useCallback(
 		(payload: CloudintegrationtypesPostableAccountDTO): void => {
@@ -166,12 +164,13 @@ export function useIntegrationModal({
 						const accountId = response.data.id;
 						const connectionUrl = response.data.connectionArtifact.aws.connectionUrl;

-						logEvent(
+						void logEvent(
 							'AWS Integration: Account connection attempt redirected to AWS',
 							{
 								id: accountId,
 							},
 						);
+						// oxlint-disable-next-line signoz/no-raw-absolute-path -- connectionUrl is an external AWS console URL, not an internal path
 						window.open(connectionUrl, '_blank');
 						setModalState(ModalStateEnum.WAITING);
 						setAccountId(accountId);
--- a/frontend/src/hooks/logs/useCopyLogLink.ts
+++ b/frontend/src/hooks/logs/useCopyLogLink.ts
@@ -17,6 +17,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getAbsoluteUrl } from 'utils/basePath';

 import { HIGHLIGHTED_DELAY } from './configs';
 import { UseCopyLogLink } from './types';
@@ -60,7 +61,7 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => {
 			urlQuery.set(QueryParams.startTime, minTime?.toString() || '');
 			urlQuery.set(QueryParams.endTime, maxTime?.toString() || '');

-			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);

 			setCopy(link);

--- a/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx
+++ b/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx
@@ -21,6 +21,7 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';
 import { getGraphType } from 'utils/getGraphType';

 const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
@@ -95,7 +96,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {

 				const url = `${ROUTES.ALERTS_NEW}?${params.toString()}`;

-				window.open(url, '_blank', 'noreferrer');
+				window.open(withBasePath(url), '_blank', 'noreferrer');
 			},
 			onError: () => {
 				notifications.error({
--- a/frontend/src/hooks/trace/useCopySpanLink.ts
+++ b/frontend/src/hooks/trace/useCopySpanLink.ts
@@ -4,6 +4,7 @@ import { useCopyToClipboard } from 'react-use';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Span } from 'types/api/trace/getTraceV2';
+import { getAbsoluteUrl } from 'utils/basePath';

 export const useCopySpanLink = (
 	span?: Span,
@@ -28,7 +29,7 @@ export const useCopySpanLink = (
 				urlQuery.set('spanId', span?.spanId);
 			}

-			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+			const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);

 			setCopy(link);
 			notifications.success({
--- a/frontend/src/hooks/useResourceAttribute/tests/ResourceProvider.test.tsx
+++ b/frontend/src/hooks/useResourceAttribute/tests/ResourceProvider.test.tsx
@@ -1,577 +0,0 @@
-import { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Router } from 'react-router-dom';
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import ROUTES from 'constants/routes';
-import { createMemoryHistory, MemoryHistory } from 'history';
-import { encode } from 'js-base64';
-import { AppContext } from 'providers/App/App';
-import { IAppContext } from 'providers/App/types';
-import { getAppContextMock } from 'tests/test-utils';
-
-import ResourceProvider from '../ResourceProvider';
-import useResourceAttribute from '../useResourceAttribute';
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: {
-			search: '',
-			pathname: '/',
-		},
-	},
-}));
-
-jest.mock('api/metrics/getResourceAttributes', () => ({
-	getResourceAttributesTagKeys: jest.fn(),
-	getResourceAttributesTagValues: jest.fn(),
-}));
-
-// eslint-disable-next-line import/first, import/order
-import {
-	getResourceAttributesTagKeys,
-	getResourceAttributesTagValues,
-	// eslint-disable-next-line import/newline-after-import
-} from 'api/metrics/getResourceAttributes';
-// eslint-disable-next-line import/first, import/order
-import history from 'lib/history';
-
-const mockTagKeys = getResourceAttributesTagKeys as jest.MockedFunction<
-	typeof getResourceAttributesTagKeys
->;
-const mockTagValues = getResourceAttributesTagValues as jest.MockedFunction<
-	typeof getResourceAttributesTagValues
->;
-
-function createWrapper({
-	routerHistory,
-	appContextOverrides,
-}: {
-	routerHistory: MemoryHistory;
-	appContextOverrides?: Partial<IAppContext>;
-}): ({ children }: { children: ReactNode }) => JSX.Element {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<AppContext.Provider value={getAppContextMock('ADMIN', appContextOverrides)}>
-					<Router history={routerHistory}>
-						<ResourceProvider>{children}</ResourceProvider>
-					</Router>
-				</AppContext.Provider>
-			</QueryClientProvider>
-		);
-	};
-}
-
-function mockLibHistory(search = '', pathname = '/'): void {
-	(history.location as { search: string; pathname: string }).search = search;
-	(history.location as { search: string; pathname: string }).pathname = pathname;
-}
-
-type TagKeysPayload = Parameters<typeof mockTagKeys.mockResolvedValue>[0];
-type TagValuesPayload = Parameters<typeof mockTagValues.mockResolvedValue>[0];
-
-function successTagKeysPayload(keys: string[]): TagKeysPayload {
-	return ({
-		statusCode: 200,
-		error: null,
-		message: 'ok',
-		payload: {
-			data: {
-				attributeKeys: keys.map((key) => ({
-					key,
-					dataType: 'string',
-					type: 'resource',
-					isColumn: false,
-				})),
-			},
-		},
-	} as unknown) as TagKeysPayload;
-}
-
-function successTagValuesPayload(values: string[]): TagValuesPayload {
-	return ({
-		statusCode: 200,
-		error: null,
-		message: 'ok',
-		payload: {
-			data: {
-				stringAttributeValues: values,
-			},
-		},
-	} as unknown) as TagValuesPayload;
-}
-
-describe('ResourceProvider', () => {
-	beforeEach(() => {
-		mockSafeNavigate.mockReset();
-		mockTagKeys.mockReset();
-		mockTagValues.mockReset();
-		mockLibHistory('', '/');
-	});
-
-	describe('initial state', () => {
-		it('starts loading with empty staging, selectedQuery, and queries', () => {
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.loading).toBe(true);
-			expect(result.current.queries).toStrictEqual([]);
-			expect(result.current.staging).toStrictEqual([]);
-			expect(result.current.selectedQuery).toStrictEqual([]);
-			expect(result.current.optionsData).toStrictEqual({ mode: undefined, options: [] });
-		});
-
-		it('hydrates queries from the resourceAttribute URL param on mount', () => {
-			const seeded = [
-				{
-					id: 'abc',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toStrictEqual(seeded);
-		});
-	});
-
-	describe('state-machine transitions via handleFocus / handleChange', () => {
-		it('Idle → TagKey fetches tag keys and populates options', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-
-			await waitFor(() => {
-				expect(mockTagKeys).toHaveBeenCalledTimes(1);
-				expect(result.current.loading).toBe(false);
-				expect(result.current.optionsData.options).toStrictEqual([
-					{ label: 'service.name', value: 'resource_service_name' },
-				]);
-			});
-		});
-
-		it('TagKey → Operator sets OperatorSchema on handleChange (no mode)', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-
-			act(() => {
-				result.current.handleChange('resource_service_name');
-			});
-
-			expect(result.current.staging).toStrictEqual(['resource_service_name']);
-			expect(result.current.optionsData.options).toStrictEqual([
-				{ label: 'IN', value: 'IN' },
-				{ label: 'Not IN', value: 'Not IN' },
-			]);
-		});
-
-		it('Operator → TagValue fetches values using staging[0]', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend', 'backend']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => {
-				result.current.handleChange('resource_service_name');
-			});
-			act(() => {
-				result.current.handleChange('IN');
-			});
-
-			await waitFor(() => {
-				expect(mockTagValues).toHaveBeenCalledWith(
-					expect.objectContaining({ tagKey: 'resource_service_name' }),
-				);
-				expect(result.current.optionsData.mode).toBe('multiple');
-				expect(result.current.optionsData.options).toStrictEqual([
-					{ label: 'frontend', value: 'frontend' },
-					{ label: 'backend', value: 'backend' },
-				]);
-			});
-		});
-
-		it('handleChange with mode updates selectedQuery instead of staging', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => {
-				result.current.handleChange('resource_service_name');
-			});
-			act(() => {
-				result.current.handleChange('IN');
-			});
-			await waitFor(() => expect(result.current.optionsData.mode).toBe('multiple'));
-
-			act(() => {
-				// In multiple mode, handleChange treats value as iterable of selected values.
-				result.current.handleChange(('frontend' as unknown) as string);
-			});
-
-			expect(result.current.selectedQuery).toStrictEqual([
-				'f',
-				'r',
-				'o',
-				'n',
-				't',
-				'e',
-				'n',
-				'd',
-			]);
-			// Staging not advanced by mode-mode handleChange
-			expect(result.current.staging).toStrictEqual(['resource_service_name', 'IN']);
-		});
-	});
-
-	describe('handleBlur', () => {
-		it('commits a query when TagValue staging is complete and selectedQuery non-empty', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			mockTagValues.mockResolvedValue(successTagValuesPayload(['frontend']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/svc'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => result.current.handleChange('resource_service_name'));
-			act(() => result.current.handleChange('IN'));
-			await waitFor(() => expect(result.current.optionsData.mode).toBe('multiple'));
-			act(() => {
-				// Build selectedQuery = ['frontend']
-				result.current.handleChange((['frontend'] as unknown) as string);
-			});
-
-			act(() => {
-				result.current.handleBlur();
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toHaveLength(1);
-				expect(result.current.queries[0]).toMatchObject({
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				});
-				expect(result.current.staging).toStrictEqual([]);
-				expect(result.current.selectedQuery).toStrictEqual([]);
-				expect(mockSafeNavigate).toHaveBeenCalled();
-			});
-		});
-
-		it('resets state without committing when staging is incomplete', async () => {
-			mockTagKeys.mockResolvedValue(successTagKeysPayload(['resource_service_name']));
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleFocus();
-			});
-			await waitFor(() => expect(result.current.loading).toBe(false));
-			act(() => result.current.handleChange('resource_service_name'));
-
-			act(() => {
-				result.current.handleBlur();
-			});
-
-			expect(result.current.queries).toStrictEqual([]);
-			expect(result.current.staging).toStrictEqual([]);
-			expect(mockSafeNavigate).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('handleClose / handleClearAll', () => {
-		it('handleClose removes the matching query and navigates', async () => {
-			const seeded = [
-				{ id: 'a', tagKey: 'resource_a', operator: 'IN', tagValue: ['x'] },
-				{ id: 'b', tagKey: 'resource_b', operator: 'IN', tagValue: ['y'] },
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toHaveLength(2);
-
-			act(() => {
-				result.current.handleClose('a');
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toStrictEqual([seeded[1]]);
-				expect(mockSafeNavigate).toHaveBeenCalled();
-			});
-		});
-
-		it('handleClearAll wipes queries, staging, selectedQuery, options', async () => {
-			const seeded = [
-				{ id: 'a', tagKey: 'resource_a', operator: 'IN', tagValue: ['x'] },
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleClearAll();
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toStrictEqual([]);
-				expect(result.current.staging).toStrictEqual([]);
-				expect(result.current.optionsData).toStrictEqual({
-					mode: undefined,
-					options: [],
-				});
-			});
-		});
-	});
-
-	describe('handleEnvironmentChange', () => {
-		it('adds an environment query when envs are provided', async () => {
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['production']);
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries).toHaveLength(1);
-				expect(result.current.queries[0]).toMatchObject({
-					tagKey: 'resource_deployment_environment',
-					operator: 'IN',
-					tagValue: ['production'],
-				});
-			});
-		});
-
-		it('clears the environment query when an empty array is passed', async () => {
-			const seeded = [
-				{
-					id: 'env',
-					tagKey: 'resource_deployment_environment',
-					operator: 'IN',
-					tagValue: ['production'],
-				},
-				{
-					id: 'svc',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange([]);
-			});
-
-			await waitFor(() => {
-				const tagKeys = result.current.queries.map((q) => q.tagKey);
-				expect(tagKeys).not.toContain('resource_deployment_environment');
-				expect(tagKeys).toContain('resource_service_name');
-			});
-		});
-
-		it('replaces an existing environment query rather than appending', async () => {
-			const seeded = [
-				{
-					id: 'env',
-					tagKey: 'resource_deployment_environment',
-					operator: 'IN',
-					tagValue: ['production'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['staging']);
-			});
-
-			await waitFor(() => {
-				const envQueries = result.current.queries.filter(
-					(q) => q.tagKey === 'resource_deployment_environment',
-				);
-				expect(envQueries).toHaveLength(1);
-				expect(envQueries[0].tagValue).toStrictEqual(['staging']);
-			});
-		});
-
-		it('uses the dotted deployment env key when DOT_METRICS_ENABLED is active', async () => {
-			const routerHistory = createMemoryHistory({ initialEntries: ['/'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({
-					routerHistory,
-					appContextOverrides: {
-						featureFlags: [
-							{
-								name: FeatureKeys.DOT_METRICS_ENABLED,
-								active: true,
-								usage: 0,
-								usage_limit: -1,
-								route: '',
-							},
-						],
-					},
-				}),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['production']);
-			});
-
-			await waitFor(() => {
-				expect(result.current.queries[0].tagKey).toBe(
-					'resource_deployment.environment',
-				);
-			});
-		});
-
-		it('preserves unrelated query params when dispatching', async () => {
-			const routerHistory = createMemoryHistory({
-				initialEntries: ['/?tab=overview'],
-			});
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			act(() => {
-				result.current.handleEnvironmentChange(['production']);
-			});
-
-			await waitFor(() => {
-				expect(mockSafeNavigate).toHaveBeenCalled();
-				const calledWith = mockSafeNavigate.mock.calls[0][0] as string;
-				expect(calledWith).toContain('tab=overview');
-				expect(calledWith).toContain('resourceAttribute=');
-			});
-		});
-	});
-
-	describe('getVisibleQueries (SERVICE_MAP filtering)', () => {
-		it('filters queries down to whitelisted keys on SERVICE_MAP', () => {
-			const seeded = [
-				{
-					id: 'a',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-				{
-					id: 'b',
-					tagKey: 'resource_k8s_cluster_name',
-					operator: 'IN',
-					tagValue: ['prod'],
-				},
-			];
-			mockLibHistory(
-				`?resourceAttribute=${encode(JSON.stringify(seeded))}`,
-				ROUTES.SERVICE_MAP,
-			);
-
-			const routerHistory = createMemoryHistory({
-				initialEntries: [ROUTES.SERVICE_MAP],
-			});
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toStrictEqual([seeded[1]]);
-		});
-
-		it('returns all queries on non-SERVICE_MAP routes', () => {
-			const seeded = [
-				{
-					id: 'a',
-					tagKey: 'resource_service_name',
-					operator: 'IN',
-					tagValue: ['frontend'],
-				},
-				{
-					id: 'b',
-					tagKey: 'resource_k8s_cluster_name',
-					operator: 'IN',
-					tagValue: ['prod'],
-				},
-			];
-			mockLibHistory(`?resourceAttribute=${encode(JSON.stringify(seeded))}`, '/services');
-
-			const routerHistory = createMemoryHistory({ initialEntries: ['/services'] });
-			const { result } = renderHook(() => useResourceAttribute(), {
-				wrapper: createWrapper({ routerHistory }),
-			});
-
-			expect(result.current.queries).toHaveLength(2);
-		});
-	});
-});
--- a/frontend/src/hooks/useSafeNavigate.ts
+++ b/frontend/src/hooks/useSafeNavigate.ts
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
+import { withBasePath } from 'utils/basePath';

 interface NavigateOptions {
 	replace?: boolean;
@@ -25,12 +26,9 @@ const areUrlsEffectivelySame = (url1: URL, url2: URL): boolean => {
 	const params1 = new URLSearchParams(url1.search);
 	const params2 = new URLSearchParams(url2.search);

-	const allParams = new Set([
-		...Array.from(params1.keys()),
-		...Array.from(params2.keys()),
-	]);
+	const allParams = new Set([...params1.keys(), ...params2.keys()]);

-	return Array.from(allParams).every((param) => {
+	return [...allParams].every((param) => {
 		if (param === 'compositeQuery') {
 			try {
 				const query1 = params1.get('compositeQuery');
@@ -83,11 +81,11 @@ const isDefaultNavigation = (currentUrl: URL, targetUrl: URL): boolean => {
 	}

 	// Case 2: Check for new params that didn't exist before
-	const currentKeys = new Set(Array.from(currentParams.keys()));
-	const targetKeys = new Set(Array.from(targetParams.keys()));
+	const currentKeys = new Set(currentParams.keys());
+	const targetKeys = new Set(targetParams.keys());

 	// Find keys that exist in target but not in current
-	const newKeys = Array.from(targetKeys).filter((key) => !currentKeys.has(key));
+	const newKeys = [...targetKeys].filter((key) => !currentKeys.has(key));

 	return newKeys.length > 0;
 };
@@ -107,19 +105,18 @@ export const useSafeNavigate = (
 	const safeNavigate = useCallback(
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(to: string | SafeNavigateParams, options?: NavigateOptions) => {
-			const currentUrl = new URL(
-				`${location.pathname}${location.search}`,
-				window.location.origin,
-			);
+			// oxlint-disable-next-line signoz/no-raw-absolute-path
+			const base = window.location.origin;
+			const currentUrl = new URL(`${location.pathname}${location.search}`, base);

 			let targetUrl: URL;

 			if (typeof to === 'string') {
-				targetUrl = new URL(to, window.location.origin);
+				targetUrl = new URL(to, base);
 			} else {
 				targetUrl = new URL(
 					`${to.pathname || location.pathname}${to.search || ''}`,
-					window.location.origin,
+					base,
 				);
 			}

@@ -130,7 +127,7 @@ export const useSafeNavigate = (
 					typeof to === 'string'
 						? to
 						: `${to.pathname || location.pathname}${to.search || ''}`;
-				window.open(targetPath, '_blank');
+				window.open(withBasePath(targetPath), '_blank');
 				return;
 			}

--- a/frontend/src/lib/history.ts
+++ b/frontend/src/lib/history.ts
@@ -1,3 +1,4 @@
 import { createBrowserHistory } from 'history';
+import { getBasePath } from 'utils/basePath';

-export default createBrowserHistory();
+export default createBrowserHistory({ basename: getBasePath() });
--- a/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.module.scss
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.module.scss
@@ -1,73 +1,22 @@
-.uplot-tooltip-container {
+.container {
 	font-family: 'Inter';
 	font-size: 12px;
-	background: var(--bg-ink-300);
+	background: var(--l2-background);
 	-webkit-font-smoothing: antialiased;
-	color: var(--bg-vanilla-100);
+	color: var(--l2-foreground);
 	border-radius: 6px;
-	border: 1px solid var(--bg-ink-100);
+	border: 1px solid var(--l2-border);
 	display: flex;
 	flex-direction: column;
 	gap: 8px;

-	&.lightMode {
-		background: var(--bg-vanilla-100);
-		color: var(--bg-ink-500);
-		border: 1px solid var(--bg-vanilla-300);
-
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-vanilla-400);
-			}
-		}
-
-		.uplot-tooltip-divider {
-			background-color: var(--bg-vanilla-300);
-		}
+	&.pinned {
+		border-color: var(--ring);
 	}

-	.uplot-tooltip-header-container {
-		padding: 1rem 1rem 0 1rem;
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		&:last-child {
-			padding-bottom: 1rem;
-		}
-
-		.uplot-tooltip-header {
-			font-size: 13px;
-			font-weight: 500;
-		}
-	}
-
-	.uplot-tooltip-divider {
+	.divider {
 		width: 100%;
 		height: 1px;
-		background-color: var(--bg-ink-100);
-	}
-
-	.uplot-tooltip-list {
-		// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
-		// horizontal offset when the scroller has padding or transform applied.
-		div[data-viewport-type='element'] {
-			left: 0;
-			box-sizing: border-box;
-			padding: 4px 12px 4px 16px;
-		}
-
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-100);
-			border-radius: 0.5rem;
-		}
+		background-color: var(--l2-border);
 	}
 }
--- a/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx
@@ -1,71 +1,28 @@
-import { useMemo, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
+import { useMemo } from 'react';
 import cx from 'classnames';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useTimezone } from 'providers/Timezone';

 import { TooltipProps } from '../types';
-import TooltipItem from './components/TooltipItem/TooltipItem';
+import TooltipFooter from './components/TooltipFooter/TooltipFooter';
+import TooltipHeader from './components/TooltipHeader/TooltipHeader';
+import TooltipList from './components/TooltipList/TooltipList';

 import Styles from './Tooltip.module.scss';

-// Fallback per-item height used for the initial size estimate before
-// Virtuoso reports the real total height via totalListHeightChanged.
-const TOOLTIP_ITEM_HEIGHT = 38;
-const LIST_MAX_HEIGHT = 300;
-
 export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
 	showTooltipHeader = true,
+	isPinned,
+	canPinTooltip,
+	dismiss,
 }: TooltipProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const { timezone: userTimezone } = useTimezone();
-	const [totalListHeight, setTotalListHeight] = useState(0);
-
 	const tooltipContent = useMemo(() => content ?? [], [content]);
-
-	const resolvedTimezone = timezone?.value ?? userTimezone.value;
-
-	const headerTitle = useMemo(() => {
-		if (!showTooltipHeader) {
-			return null;
-		}
-		const cursorIdx = uPlotInstance.cursor.idx;
-		if (cursorIdx == null) {
-			return null;
-		}
-		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
-		if (timestamp == null) {
-			return null;
-		}
-		return dayjs(timestamp * 1000)
-			.tz(resolvedTimezone)
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [
-		resolvedTimezone,
-		uPlotInstance.data,
-		uPlotInstance.cursor.idx,
-		showTooltipHeader,
-	]);
-
 	const activeItem = useMemo(
 		() => tooltipContent.find((item) => item.isActive) ?? null,
 		[tooltipContent],
 	);

-	// Use the measured height from Virtuoso when available; fall back to a
-	// per-item estimate on the first render.  Math.ceil prevents a 1 px
-	// subpixel rounding gap from triggering a spurious scrollbar.
-	const virtuosoHeight = useMemo(() => {
-		return totalListHeight > 0
-			? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
-			: Math.min(tooltipContent.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT);
-	}, [totalListHeight, tooltipContent.length]);
-
 	const showHeader = showTooltipHeader || activeItem != null;
 	// With a single series the active item is fully represented in the header —
 	// hide the divider and list to avoid showing a duplicate row.
@@ -74,46 +31,24 @@ export default function Tooltip({

 	return (
 		<div
-			className={cx(Styles.uplotTooltipContainer, !isDarkMode && Styles.lightMode)}
+			className={cx(Styles.container, isPinned && Styles.pinned)}
 			data-testid="uplot-tooltip-container"
 		>
 			{showHeader && (
-				<div className={Styles.uplotTooltipHeaderContainer}>
-					{showTooltipHeader && headerTitle && (
-						<div
-							className={Styles.uplotTooltipHeader}
-							data-testid="uplot-tooltip-header"
-						>
-							<span>{headerTitle}</span>
-						</div>
-					)}
-
-					{activeItem && (
-						<TooltipItem
-							item={activeItem}
-							isItemActive={true}
-							containerTestId="uplot-tooltip-pinned"
-							markerTestId="uplot-tooltip-pinned-marker"
-							contentTestId="uplot-tooltip-pinned-content"
-						/>
-					)}
-				</div>
-			)}
-
-			{showDivider && <span className={Styles.uplotTooltipDivider} />}
-
-			{showList && (
-				<Virtuoso
-					className={Styles.uplotTooltipList}
-					data-testid="uplot-tooltip-list"
-					data={tooltipContent}
-					style={{ height: virtuosoHeight, width: '100%' }}
-					totalListHeightChanged={setTotalListHeight}
-					itemContent={(_, item): JSX.Element => (
-						<TooltipItem item={item} isItemActive={false} />
-					)}
+				<TooltipHeader
+					uPlotInstance={uPlotInstance}
+					timezone={timezone}
+					showTooltipHeader={showTooltipHeader}
+					isPinned={isPinned}
+					activeItem={activeItem}
 				/>
 			)}
+
+			{showDivider && <span className={Styles.divider} />}
+
+			{showList && <TooltipList content={tooltipContent} />}
+
+			{canPinTooltip && <TooltipFooter isPinned={isPinned} dismiss={dismiss} />}
 		</div>
 	);
 }
--- a/frontend/src/lib/uPlotV2/components/Tooltip/tests/Tooltip.test.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/tests/Tooltip.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
+import userEvent from '@testing-library/user-event';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -92,7 +93,6 @@ function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 		isPinned: false,
 		dismiss: jest.fn(),
 		viaSync: false,
-		clickData: null,
 	} as TooltipTestProps;

 	return render(
@@ -191,3 +191,85 @@ describe('Tooltip', () => {
 		expect(list).toHaveStyle({ height: '76px' });
 	});
 });
+
+describe('Tooltip footer hint', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseIsDarkMode.mockReturnValue(false);
+	});
+
+	it('renders footer with "Press P to pin the tooltip" hint when not pinned', () => {
+		renderTooltip({ isPinned: false, canPinTooltip: true });
+
+		const footer = screen.getByTestId('uplot-tooltip-footer');
+		expect(footer).toBeInTheDocument();
+		expect(footer).toHaveTextContent('Press');
+		expect(footer).toHaveTextContent('P');
+		expect(footer).toHaveTextContent('to pin the tooltip');
+	});
+
+	it('renders footer with "Press P or Esc to unpin" hint when pinned', () => {
+		renderTooltip({ isPinned: true, canPinTooltip: true });
+
+		const footer = screen.getByTestId('uplot-tooltip-footer');
+		expect(footer).toHaveTextContent('Press');
+		expect(footer).toHaveTextContent('P');
+		expect(footer).toHaveTextContent('Esc');
+		expect(footer).toHaveTextContent('to unpin');
+	});
+
+	it('does not render Unpin button when not pinned', () => {
+		renderTooltip({ isPinned: false, canPinTooltip: true });
+
+		expect(screen.queryByTestId('uplot-tooltip-unpin')).not.toBeInTheDocument();
+	});
+
+	it('renders Unpin button when pinned', () => {
+		renderTooltip({ isPinned: true, canPinTooltip: true });
+
+		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
+		expect(unpinBtn).toBeInTheDocument();
+		expect(unpinBtn).toHaveAttribute('aria-label', 'Unpin tooltip');
+	});
+
+	it('calls dismiss when Unpin button is clicked', async () => {
+		const dismiss = jest.fn();
+		renderTooltip({ isPinned: true, canPinTooltip: true, dismiss });
+
+		const user = userEvent.setup();
+		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
+		await user.click(unpinBtn);
+
+		expect(dismiss).toHaveBeenCalledTimes(1);
+	});
+
+	it('footer has role="status" for screen reader announcements', () => {
+		renderTooltip({ canPinTooltip: true });
+
+		const footer = screen.getByRole('status');
+		expect(footer).toBeInTheDocument();
+	});
+});
+
+describe('Tooltip header status pill', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUseIsDarkMode.mockReturnValue(false);
+	});
+
+	it('shows Pinned status when pinned and header is visible', () => {
+		const uPlotInstance = createUPlotInstance(0);
+
+		renderTooltip({ uPlotInstance, isPinned: true });
+
+		expect(screen.getByText('Pinned')).toBeInTheDocument();
+	});
+
+	it('does not render status pill when showTooltipHeader is false', () => {
+		const uPlotInstance = createUPlotInstance(0);
+
+		renderTooltip({ uPlotInstance, showTooltipHeader: false, isPinned: false });
+
+		expect(screen.queryByTestId('uplot-tooltip-status')).not.toBeInTheDocument();
+	});
+});
--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipFooter/TooltipFooter.module.scss
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipFooter/TooltipFooter.module.scss
@@ -0,0 +1,18 @@
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	padding: 7px 12px;
+	border-top: 1px solid var(--l2-border);
+	background: var(--l2-background);
+	border-radius: 0 0 6px 6px;
+}
+
+.hint {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	font-size: 11px;
+	color: var(--l2-foreground);
+}
--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipFooter/TooltipFooter.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipFooter/TooltipFooter.tsx
@@ -0,0 +1,58 @@
+import { Button } from '@signozhq/ui';
+import { Kbd } from '@signozhq/ui';
+import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { X } from 'lucide-react';
+
+import Styles from './TooltipFooter.module.scss';
+
+interface TooltipFooterProps {
+	pinKey?: string;
+	isPinned: boolean;
+	dismiss: () => void;
+}
+
+export default function TooltipFooter({
+	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
+	isPinned,
+	dismiss,
+}: TooltipFooterProps): JSX.Element {
+	return (
+		<div
+			className={Styles.footer}
+			role="status"
+			data-testid="uplot-tooltip-footer"
+		>
+			<div className={Styles.hint}>
+				{isPinned ? (
+					<>
+						<span>Press</span>
+						<Kbd active>{pinKey.toUpperCase()}</Kbd>
+						<span>or</span>
+						<Kbd active>Esc</Kbd>
+						<span>to unpin</span>
+					</>
+				) : (
+					<>
+						<span>Press</span>
+						<Kbd>{pinKey.toUpperCase()}</Kbd>
+						<span>to pin the tooltip</span>
+					</>
+				)}
+			</div>
+
+			{isPinned && (
+				<Button
+					variant="outlined"
+					color="secondary"
+					size="sm"
+					onClick={dismiss}
+					aria-label="Unpin tooltip"
+					data-testid="uplot-tooltip-unpin"
+				>
+					<X size={10} />
+					<span>Unpin</span>
+				</Button>
+			)}
+		</div>
+	);
+}
--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.module.scss
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.module.scss
@@ -0,0 +1,32 @@
+.headerContainer {
+	padding: 1rem 1rem 0 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+
+	&:last-child {
+		padding-bottom: var(--spacing-4);
+	}
+}
+
+.headerRow {
+	font-size: var(--font-size-sm);
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-2);
+}
+
+.status {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-1);
+	font-size: 10px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--callout-primary-title);
+	flex-shrink: 0;
+}
+
--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx
@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { Pin } from 'lucide-react';
+import { useTimezone } from 'providers/Timezone';
+import type uPlot from 'uplot';
+
+import { TooltipContentItem } from '../../../types';
+import TooltipItem from '../TooltipItem/TooltipItem';
+
+import Styles from './TooltipHeader.module.scss';
+
+interface TooltipHeaderProps {
+	uPlotInstance: uPlot;
+	timezone?: Timezone;
+	showTooltipHeader: boolean;
+	isPinned: boolean;
+	activeItem: TooltipContentItem | null;
+}
+
+export default function TooltipHeader({
+	uPlotInstance,
+	timezone,
+	showTooltipHeader,
+	isPinned,
+	activeItem,
+}: TooltipHeaderProps): JSX.Element {
+	const { timezone: userTimezone } = useTimezone();
+	const resolvedTimezone = timezone?.value ?? userTimezone.value;
+
+	const headerTitle = useMemo(() => {
+		if (!showTooltipHeader) {
+			return null;
+		}
+		const cursorIdx = uPlotInstance.cursor.idx;
+		if (cursorIdx == null) {
+			return null;
+		}
+		const timestamp = uPlotInstance.data[0]?.[cursorIdx];
+		if (timestamp == null) {
+			return null;
+		}
+		return dayjs(timestamp * 1000)
+			.tz(resolvedTimezone)
+			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
+	}, [
+		resolvedTimezone,
+		uPlotInstance.data,
+		uPlotInstance.cursor.idx,
+		showTooltipHeader,
+	]);
+
+	return (
+		<div
+			className={Styles.headerContainer}
+			data-testid="uplot-tooltip-header-container"
+		>
+			{showTooltipHeader && headerTitle && (
+				<div className={Styles.headerRow}>
+					<span>{headerTitle}</span>
+					{isPinned && (
+						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">
+							<>
+								<Pin size={12} />
+								<span>Pinned</span>
+							</>
+						</div>
+					)}
+				</div>
+			)}
+
+			{activeItem && (
+				<TooltipItem
+					item={activeItem}
+					isItemActive={true}
+					containerTestId="uplot-tooltip-pinned"
+					markerTestId="uplot-tooltip-pinned-marker"
+					contentTestId="uplot-tooltip-pinned-content"
+				/>
+			)}
+		</div>
+	);
+}
--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.module.scss
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.module.scss
@@ -0,0 +1,27 @@
+.list {
+	width: 100%;
+	:global(div[data-viewport-type='element']) {
+		left: 0;
+		box-sizing: border-box;
+		padding: 4px 12px 4px 16px;
+	}
+
+	&::-webkit-scrollbar {
+		width: 0.3rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-slate-100);
+		border-radius: 0.5rem;
+	}
+}
+
+.listLightMode {
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-vanilla-400);
+	}
+}
--- a/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.tsx
@@ -0,0 +1,48 @@
+import { useMemo, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { TooltipContentItem } from '../../../types';
+import TooltipItem from '../TooltipItem/TooltipItem';
+
+import Styles from './TooltipList.module.scss';
+
+// Fallback per-item height before Virtuoso reports the real total.
+const TOOLTIP_ITEM_HEIGHT = 38;
+const LIST_MAX_HEIGHT = 300;
+
+interface TooltipListProps {
+	content: TooltipContentItem[];
+}
+
+export default function TooltipList({
+	content,
+}: TooltipListProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	const [totalListHeight, setTotalListHeight] = useState(0);
+
+	// Use the measured height from Virtuoso when available; fall back to a
+	// per-item estimate on first render. Math.ceil prevents a 1 px
+	// subpixel rounding gap from triggering a spurious scrollbar.
+	const height = useMemo(
+		() =>
+			totalListHeight > 0
+				? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
+				: Math.min(content.length * TOOLTIP_ITEM_HEIGHT, LIST_MAX_HEIGHT),
+		[totalListHeight, content.length],
+	);
+
+	return (
+		<Virtuoso
+			className={cx(Styles.list, !isDarkMode && Styles.listLightMode)}
+			data-testid="uplot-tooltip-list"
+			data={content}
+			style={{ height }}
+			totalListHeightChanged={setTotalListHeight}
+			itemContent={(_, item): JSX.Element => (
+				<TooltipItem item={item} isItemActive={false} />
+			)}
+		/>
+	);
+}
--- a/frontend/src/lib/uPlotV2/components/types.ts
+++ b/frontend/src/lib/uPlotV2/components/types.ts
@@ -62,6 +62,7 @@ export interface TooltipRenderArgs {

 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
+	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
--- a/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.module.scss
+++ b/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.module.scss
@@ -1,4 +1,4 @@
-.tooltip-plugin-container {
+.tooltipPluginContainer {
 	top: 0;
 	left: 0;
 	width: 100%;
@@ -10,13 +10,9 @@
 	transform: translate(-1000px, -1000px); // hide the tooltip initially
 	opacity: 0;
 	pointer-events: none;
-
-	&.pinned {
-		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-	}
-
-	&.visible {
-		opacity: 1;
-		pointer-events: all;
-	}
+}
+
+.visible {
+	opacity: 1;
+	pointer-events: all;
 }
--- a/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx
+++ b/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
-import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';

 import { syncCursorRegistry } from './syncCursorRegistry';
@@ -17,18 +16,21 @@ import {
 } from './tooltipController';
 import {
 	DashboardCursorSync,
-	TooltipClickData,
+	DEFAULT_PIN_TOOLTIP_KEY,
 	TooltipControllerContext,
 	TooltipControllerState,
 	TooltipLayoutInfo,
 	TooltipPluginProps,
 	TooltipViewState,
 } from './types';
-import { createInitialViewState, createLayoutObserver } from './utils';
+import {
+	buildClickData,
+	createInitialViewState,
+	createLayoutObserver,
+} from './utils';

-import './TooltipPlugin.styles.scss';
+import Styles from './TooltipPlugin.module.scss';

-const INTERACTIVE_CONTAINER_CLASSNAME = '.tooltip-plugin-container';
 // Delay before hiding an unpinned tooltip when the cursor briefly leaves
 // the plot – this avoids flicker when moving between nearby points.
 const HOVER_DISMISS_DELAY_MS = 100;
@@ -44,6 +46,8 @@ export default function TooltipPlugin({
 	syncMetadata,
 	pinnedTooltipElement,
 	canPinTooltip = false,
+	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
+	onClick,
 }: TooltipPluginProps): JSX.Element | null {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const rafId = useRef<number | null>(null);
@@ -131,8 +135,8 @@ export default function TooltipPlugin({
 		// Dismiss the tooltip when the user clicks / presses a key
 		// outside the tooltip container while it is pinned.
 		const onOutsideInteraction = (event: Event): void => {
-			const target = event.target as HTMLElement;
-			if (!target.closest(INTERACTIVE_CONTAINER_CLASSNAME)) {
+			const target = event.target as Node;
+			if (!containerRef.current?.contains(target)) {
 				dismissTooltip();
 			}
 		};
@@ -159,13 +163,14 @@ export default function TooltipPlugin({

 		// Attach / detach global listeners when pin state changes so
 		// we can detect when the user interacts outside the tooltip.
+		// Keyboard unpinning is handled exclusively in handleKeyDown so
+		// that only P (toggle) and Escape (release) can dismiss — not
+		// arbitrary keystrokes like arrow keys or Tab.
 		function toggleOutsideListeners(enable: boolean): void {
 			if (enable) {
 				document.addEventListener('mousedown', onOutsideInteraction, true);
-				document.addEventListener('keydown', onOutsideInteraction, true);
 			} else {
 				document.removeEventListener('mousedown', onOutsideInteraction, true);
-				document.removeEventListener('keydown', onOutsideInteraction, true);
 			}
 		}

@@ -283,66 +288,84 @@ export default function TooltipPlugin({
 			}
 		};

-		// When pinning is enabled, a click on the plot overlay while
-		// hovering converts the transient tooltip into a pinned one.
-		// Uses getPlot(controller) to avoid closing over u (plot), which
-		// would retain the plot and detached canvases across unmounts.
-		const handleUPlotOverClick = (event: MouseEvent): void => {
+		// Handles all tooltip-pin keyboard interactions:
+		//   Escape  — always releases the tooltip when pinned (never steals Escape
+		//             from other handlers since we do not call stopPropagation).
+		//   pinKey  — toggles: pins when hovering+unpinned, unpins when pinned.
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			// Escape: release-only (never toggles on).
+			if (event.key === 'Escape') {
+				if (controller.pinned) {
+					dismissTooltip();
+				}
+				return;
+			}
+
+			if (event.key.toLowerCase() !== pinKey.toLowerCase()) {
+				return;
+			}
+
+			// Toggle off: P pressed while already pinned.
+			if (controller.pinned) {
+				dismissTooltip();
+				return;
+			}
+
+			// Toggle on: P pressed while hovering.
 			const plot = getPlot(controller);
+			if (
+				!plot ||
+				!controller.hoverActive ||
+				controller.focusedSeriesIndex == null
+			) {
+				return;
+			}
+
+			const cursorLeft = plot.cursor.left ?? -1;
+			const cursorTop = plot.cursor.top ?? -1;
+			if (cursorLeft < 0 || cursorTop < 0) {
+				return;
+			}
+
+			const plotRect = plot.over.getBoundingClientRect();
+			const syntheticEvent = ({
+				clientX: plotRect.left + cursorLeft,
+				clientY: plotRect.top + cursorTop,
+				target: plot.over,
+				offsetX: cursorLeft,
+				offsetY: cursorTop,
+			} as unknown) as MouseEvent;
+
+			controller.clickData = buildClickData(syntheticEvent, plot);
+			controller.pinned = true;
+			scheduleRender(true);
+		};
+
+		// Forward overlay clicks to the consumer-provided onClick callback.
+		const handleOverClick = (event: MouseEvent): void => {
+			const plot = getPlot(controller);
+			/**
+			 * Only trigger onClick if the click happened on the plot overlay and there is a focused series.
+			 * It also ensures that clicks only trigger onClick when there is a relevant data point (i.e. a focused series) to provide context for the click.
+			 */
 			if (
 				plot &&
 				event.target === plot.over &&
-				controller.hoverActive &&
-				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
-				const xValue = plot.posToVal(event.offsetX, 'x');
-				const yValue = plot.posToVal(event.offsetY, 'y');
-				const focusedSeries = getFocusedSeriesAtPosition(event, plot);
-
-				let clickedDataTimestamp = xValue;
-				if (focusedSeries) {
-					const dataIndex = plot.posToIdx(event.offsetX);
-					const xSeriesData = plot.data[0];
-					if (
-						xSeriesData &&
-						dataIndex >= 0 &&
-						dataIndex < xSeriesData.length &&
-						xSeriesData[dataIndex] !== undefined
-					) {
-						clickedDataTimestamp = xSeriesData[dataIndex];
-					}
-				}
-
-				const clickData: TooltipClickData = {
-					xValue,
-					yValue,
-					focusedSeries,
-					clickedDataTimestamp,
-					mouseX: event.offsetX,
-					mouseY: event.offsetY,
-					absoluteMouseX: event.clientX,
-					absoluteMouseY: event.clientY,
-				};
-
-				controller.clickData = clickData;
-
-				setTimeout(() => {
-					controller.pinned = true;
-					scheduleRender(true);
-				}, 0);
+				const clickData = buildClickData(event, plot);
+				onClick?.(clickData);
 			}
 		};

 		let overClickHandler: ((event: MouseEvent) => void) | null = null;

-		// Called once per uPlot instance; used to store the instance
-		// on the controller and optionally attach the pinning handler.
+		// Called once per uPlot instance; used to store the instance on the controller.
 		const handleInit = (u: uPlot): void => {
 			controller.plot = u;
 			updateState({ hasPlot: true });
-			if (canPinTooltip) {
-				overClickHandler = handleUPlotOverClick;
+			if (onClick) {
+				overClickHandler = handleOverClick;
 				u.over.addEventListener('click', overClickHandler);
 			}
 		};
@@ -389,13 +412,18 @@ export default function TooltipPlugin({

 		window.addEventListener('resize', handleWindowResize);
 		window.addEventListener('scroll', handleScroll, true);
+		if (canPinTooltip) {
+			document.addEventListener('keydown', handleKeyDown, true);
+		}

 		return (): void => {
 			layoutRef.current?.observer.disconnect();
 			window.removeEventListener('resize', handleWindowResize);
 			window.removeEventListener('scroll', handleScroll, true);
 			document.removeEventListener('mousedown', onOutsideInteraction, true);
-			document.removeEventListener('keydown', onOutsideInteraction, true);
+			if (canPinTooltip) {
+				document.removeEventListener('keydown', handleKeyDown, true);
+			}
 			cancelPendingRender();
 			removeReadyHook();
 			removeInitHook();
@@ -405,9 +433,7 @@ export default function TooltipPlugin({
 			removeSetCursorHook();
 			if (overClickHandler) {
 				const plot = getPlot(controller);
-				if (plot) {
-					plot.over.removeEventListener('click', overClickHandler);
-				}
+				plot?.over.removeEventListener('click', overClickHandler);
 				overClickHandler = null;
 			}
 			clearPlotReferences();
@@ -447,8 +473,12 @@ export default function TooltipPlugin({
 	}, [isHovering, hasPlot]);

 	const tooltipBody = useMemo(() => {
-		if (isPinned && pinnedTooltipElement != null && viewState.clickData != null) {
-			return pinnedTooltipElement(viewState.clickData);
+		if (isPinned) {
+			if (pinnedTooltipElement != null && viewState.clickData != null) {
+				return pinnedTooltipElement(viewState.clickData);
+			}
+			// No custom pinned element — keep showing the last hover contents.
+			return contents ?? null;
 		}

 		if (isHovering) {
@@ -471,9 +501,8 @@ export default function TooltipPlugin({

 	return createPortal(
 		<div
-			className={cx('tooltip-plugin-container', {
-				pinned: isPinned,
-				visible: isTooltipVisible,
+			className={cx(Styles.tooltipPluginContainer, {
+				[Styles.visible]: isTooltipVisible,
 			})}
 			style={{
 				...style,
@@ -484,6 +513,7 @@ export default function TooltipPlugin({
 			aria-atomic="true"
 			aria-hidden={!isTooltipVisible}
 			ref={containerRef}
+			data-pinned={isPinned}
 			data-testid="tooltip-plugin-container"
 		>
 			{tooltipBody}
--- a/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts
+++ b/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts
@@ -102,6 +102,12 @@ export function updateHoverState(
 	controller: TooltipControllerState,
 	syncTooltipWithDashboard: boolean,
 ): void {
+	// When pinned, keep hoverActive stable so the tooltip stays visible
+	// until explicitly dismissed — the cursor lock fires asynchronously
+	// and setSeries/setLegend can otherwise race and clear hoverActive.
+	if (controller.pinned) {
+		return;
+	}
 	// When the cursor is driven by dashboard‑level sync, we only show
 	// the tooltip if the plot is in viewport and at least one series
 	// is active. Otherwise we fall back to local interaction logic.
--- a/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts
+++ b/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts
@@ -11,6 +11,9 @@ import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';

 export const TOOLTIP_OFFSET = 10;

+// Default key that pins the tooltip while hovering over the chart.
+export const DEFAULT_PIN_TOOLTIP_KEY = 'p';
+
 export enum DashboardCursorSync {
 	Crosshair,
 	None,
@@ -41,6 +44,10 @@ export interface TooltipSyncMetadata {
 export interface TooltipPluginProps {
 	config: UPlotConfigBuilder;
 	canPinTooltip?: boolean;
+	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
+	pinKey?: string;
+	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
+	onClick?: (clickData: TooltipClickData) => void;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	syncMetadata?: TooltipSyncMetadata;
--- a/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts
+++ b/frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts
@@ -1,4 +1,11 @@
-import { TOOLTIP_OFFSET, TooltipLayoutInfo, TooltipViewState } from './types';
+import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
+
+import {
+	TOOLTIP_OFFSET,
+	TooltipClickData,
+	TooltipLayoutInfo,
+	TooltipViewState,
+} from './types';

 export function isPlotInViewport(
 	rect: uPlot.BBox,
@@ -158,3 +165,40 @@ export function createLayoutObserver(
 	};
 	return layout;
 }
+
+/**
+ * Resolves a TooltipClickData snapshot from a MouseEvent (real or synthetic)
+ * and the current uPlot instance. Shared by the overlay click handler and the
+ * keyboard-pin handler (which synthesises an event from the cursor position).
+ */
+export function buildClickData(
+	event: MouseEvent,
+	plot: uPlot,
+): TooltipClickData {
+	const xValue = plot.posToVal(event.offsetX, 'x');
+	const yValue = plot.posToVal(event.offsetY, 'y');
+	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
+
+	const dataIndex = plot.posToIdx(event.offsetX);
+	let clickedDataTimestamp = xValue;
+	const xSeriesData = plot.data[0];
+	if (
+		xSeriesData &&
+		dataIndex >= 0 &&
+		dataIndex < xSeriesData.length &&
+		xSeriesData[dataIndex] !== undefined
+	) {
+		clickedDataTimestamp = xSeriesData[dataIndex];
+	}
+
+	return {
+		xValue,
+		yValue,
+		focusedSeries,
+		clickedDataTimestamp,
+		mouseX: event.offsetX,
+		mouseY: event.offsetY,
+		absoluteMouseX: event.clientX,
+		absoluteMouseY: event.clientY,
+	};
+}
--- a/frontend/src/lib/uPlotV2/plugins/tests/TooltipPlugin.test.ts
+++ b/frontend/src/lib/uPlotV2/plugins/tests/TooltipPlugin.test.ts
@@ -7,7 +7,10 @@ import type uPlot from 'uplot';
 import { TooltipRenderArgs } from '../../components/types';
 import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
-import { DashboardCursorSync } from '../TooltipPlugin/types';
+import {
+	DashboardCursorSync,
+	DEFAULT_PIN_TOOLTIP_KEY,
+} from '../TooltipPlugin/types';

 // Avoid depending on the full uPlot + onClickPlugin behaviour in these tests.
 // We only care that pinning logic runs without throwing, not which series is focused.
@@ -60,7 +63,7 @@ function getHandler(config: ConfigMock, hookName: string): HookHandler {
 function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
-	cursor: { event: Record<string, unknown> };
+	cursor: { event: Record<string, unknown>; left: number; top: number };
 	posToVal: jest.Mock<number, [value: number]>;
 	posToIdx: jest.Mock<number, []>;
 	data: [number[], number[]];
@@ -71,7 +74,9 @@ function createFakePlot(): {
 	return {
 		over,
 		setCursor: jest.fn(),
-		cursor: { event: {} },
+		// left / top are set to valid values so keyboard-pin tests do not
+		// hit the "cursor off-screen" guard inside handleKeyDown.
+		cursor: { event: {}, left: 50, top: 50 },
 		// In real uPlot these map overlay coordinates to data-space values.
 		posToVal: jest.fn((value: number) => value),
 		posToIdx: jest.fn(() => 0),
@@ -144,7 +149,7 @@ describe('TooltipPlugin', () => {
 				}),
 			);

-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
+			expect(screen.queryByTestId('tooltip-plugin-container')).toBeNull();
 		});

 		it('registers all required uPlot hooks on mount', () => {
@@ -182,9 +187,7 @@ describe('TooltipPlugin', () => {
 			expect(renderTooltip).toHaveBeenCalled();
 			expect(screen.getByText('tooltip-body')).toBeInTheDocument();

-			const container = document.querySelector(
-				'.tooltip-plugin-container',
-			) as HTMLElement;
+			const container = screen.getByTestId('tooltip-plugin-container');
 			expect(container).not.toBeNull();
 			expect(container.parentElement).toBe(document.body);
 		});
@@ -203,9 +206,7 @@ describe('TooltipPlugin', () => {

 			renderAndActivateHover(config);

-			const container = document.querySelector(
-				'.tooltip-plugin-container',
-			) as HTMLElement;
+			const container = screen.getByTestId('tooltip-plugin-container');
 			expect(container.parentElement).toBe(document.body);

 			const fullscreenRoot = document.createElement('div');
@@ -245,24 +246,27 @@ describe('TooltipPlugin', () => {
 	// ---- Pin behaviour ----------------------------------------------------------

 	describe('pin behaviour', () => {
-		it('pins the tooltip when canPinTooltip is true and overlay is clicked', () => {
+		it('pins the tooltip when canPinTooltip is true and the pinKey is pressed while hovering', () => {
 			const config = createConfigMock();

-			const fakePlot = renderAndActivateHover(config, undefined, {
-				canPinTooltip: true,
-			});
+			renderAndActivateHover(config, undefined, { canPinTooltip: true });

 			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.classList.contains('pinned')).toBe(false);
+			expect(container.getAttribute('data-pinned') === 'true').toBe(false);

 			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
 			});

 			return waitFor(() => {
 				const updated = screen.getByTestId('tooltip-plugin-container');
 				expect(updated).toBeInTheDocument();
-				expect(updated.classList.contains('pinned')).toBe(true);
+				expect(updated.getAttribute('data-pinned') === 'true').toBe(true);
 			});
 		});

@@ -272,7 +276,7 @@ describe('TooltipPlugin', () => {
 				React.createElement('div', null, 'pinned-tooltip'),
 			);

-			const fakePlot = renderAndActivateHover(
+			renderAndActivateHover(
 				config,
 				() => React.createElement('div', null, 'hover-tooltip'),
 				{
@@ -284,7 +288,12 @@ describe('TooltipPlugin', () => {
 			expect(screen.getByText('hover-tooltip')).toBeInTheDocument();

 			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
 			});

 			await waitFor(() => {
@@ -318,18 +327,20 @@ describe('TooltipPlugin', () => {
 				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
 			});

-			// Pin the tooltip.
+			// Pin the tooltip via the keyboard shortcut.
 			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
 			});

-			// Wait until the tooltip is actually pinned (pointer events enabled)
+			// Wait until the tooltip is actually pinned.
 			await waitFor(() => {
-				const container = document.querySelector(
-					'.tooltip-plugin-container',
-				) as HTMLElement | null;
-				expect(container).not.toBeNull();
-				expect(container?.classList.contains('pinned')).toBe(true);
+				const container = screen.getByTestId('tooltip-plugin-container');
+				expect(container.getAttribute('data-pinned') === 'true').toBe(true);
 			});

 			const button = await screen.findByRole('button', { name: 'Dismiss' });
@@ -342,8 +353,7 @@ describe('TooltipPlugin', () => {

 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
+				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
 				expect(container.textContent).toBe('');
 			});
 		});
@@ -369,16 +379,21 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});

-			// Pin.
+			// Pin via keyboard.
 			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
 				jest.runAllTimers();
 			});

 			expect(
-				(document.querySelector(
-					'.tooltip-plugin-container',
-				) as HTMLElement)?.classList.contains('pinned'),
+				screen
+					.getByTestId('tooltip-plugin-container')
+					.getAttribute('data-pinned') === 'true',
 			).toBe(true);

 			// Simulate data update – should dismiss the pinned tooltip.
@@ -390,8 +405,7 @@ describe('TooltipPlugin', () => {
 			const container = screen.getByTestId('tooltip-plugin-container');
 			expect(container).toBeInTheDocument();
 			expect(container.getAttribute('aria-hidden')).toBe('true');
-			expect(container.classList.contains('visible')).toBe(false);
-			expect(container.classList.contains('pinned')).toBe(false);
+			expect(container.getAttribute('data-pinned') === 'true').toBe(false);

 			jest.useRealTimers();
 		});
@@ -417,15 +431,21 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});

+			// Pin via keyboard.
 			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
 				jest.runAllTimers();
 			});

 			expect(
-				document
-					.querySelector('.tooltip-plugin-container')
-					?.classList.contains('pinned'),
+				screen
+					.getByTestId('tooltip-plugin-container')
+					.getAttribute('data-pinned') === 'true',
 			).toBe(true);

 			// Click outside the tooltip container.
@@ -439,14 +459,13 @@ describe('TooltipPlugin', () => {

 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
+				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
 			});

 			jest.useRealTimers();
 		});

-		it('unpins the tooltip on outside keydown', async () => {
+		it('unpins the tooltip when Escape is pressed while pinned', async () => {
 			jest.useFakeTimers();
 			const config = createConfigMock();

@@ -467,18 +486,24 @@ describe('TooltipPlugin', () => {
 				jest.runAllTimers();
 			});

+			// Pin via keyboard.
 			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
 				jest.runAllTimers();
 			});

 			expect(
-				document
-					.querySelector('.tooltip-plugin-container')
-					?.classList.contains('pinned'),
+				screen
+					.getByTestId('tooltip-plugin-container')
+					.getAttribute('data-pinned') === 'true',
 			).toBe(true);

-			// Press a key outside the tooltip.
+			// Press Escape to release.
 			act(() => {
 				document.body.dispatchEvent(
 					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
@@ -490,12 +515,282 @@ describe('TooltipPlugin', () => {
 				const container = screen.getByTestId('tooltip-plugin-container');
 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.classList.contains('visible')).toBe(false);
-				expect(container.classList.contains('pinned')).toBe(false);
+				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
 			});

 			jest.useRealTimers();
 		});
+
+		it('unpins the tooltip when the pin key is pressed a second time (toggle off)', async () => {
+			jest.useFakeTimers();
+			const config = createConfigMock();
+
+			renderAndActivateHover(config, undefined, { canPinTooltip: true });
+			jest.runAllTimers();
+
+			// First press — pin.
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
+				jest.runAllTimers();
+			});
+
+			await waitFor(() => {
+				expect(
+					screen
+						.getByTestId('tooltip-plugin-container')
+						.getAttribute('data-pinned') === 'true',
+				).toBe(true);
+			});
+
+			// Second press — unpin (toggle off).
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
+				jest.runAllTimers();
+			});
+
+			await waitFor(() => {
+				const container = screen.getByTestId('tooltip-plugin-container');
+				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			});
+
+			jest.useRealTimers();
+		});
+
+		it('does not unpin on Escape when tooltip is not pinned', () => {
+			const config = createConfigMock();
+			renderAndActivateHover(config, undefined, { canPinTooltip: true });
+
+			// Escape without pinning first — should be a no-op.
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+				);
+			});
+
+			const container = screen.getByTestId('tooltip-plugin-container');
+			// Tooltip should still be hovering (visible), not dismissed.
+			expect(container.getAttribute('aria-hidden')).toBe('false');
+			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+		});
+
+		it('does not unpin on arbitrary keys that are not Escape or the pin key', async () => {
+			jest.useFakeTimers();
+			const config = createConfigMock();
+
+			renderAndActivateHover(config, undefined, { canPinTooltip: true });
+			jest.runAllTimers();
+
+			// Pin.
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
+				jest.runAllTimers();
+			});
+
+			await waitFor(() => {
+				expect(
+					screen
+						.getByTestId('tooltip-plugin-container')
+						.getAttribute('data-pinned') === 'true',
+				).toBe(true);
+			});
+
+			// Arrow key — should NOT unpin.
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+				);
+				jest.runAllTimers();
+			});
+
+			await waitFor(() => {
+				expect(
+					screen
+						.getByTestId('tooltip-plugin-container')
+						.getAttribute('data-pinned') === 'true',
+				).toBe(true);
+			});
+
+			jest.useRealTimers();
+		});
+	});
+
+	// ---- Keyboard pin edge cases ------------------------------------------------
+
+	describe('keyboard pin edge cases', () => {
+		it('does not pin when cursor coordinates are negative (cursor off-screen)', () => {
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => React.createElement('div', null, 'tooltip-body'),
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: true,
+				}),
+			);
+
+			// Negative cursor coords — handleKeyDown bails out before pinning.
+			const fakePlot = {
+				...createFakePlot(),
+				cursor: { event: {}, left: -1, top: -1 },
+			};
+
+			act(() => {
+				getHandler(config, 'init')(fakePlot);
+				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
+			});
+
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
+			});
+
+			const container = screen.getByTestId('tooltip-plugin-container');
+			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+		});
+
+		it('does not pin when hover is not active', () => {
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => React.createElement('div', null, 'tooltip-body'),
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: true,
+				}),
+			);
+
+			const fakePlot = createFakePlot();
+
+			act(() => {
+				// Initialise the plot but do NOT call setSeries – hoverActive stays false.
+				getHandler(config, 'init')(fakePlot);
+			});
+
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: DEFAULT_PIN_TOOLTIP_KEY,
+						bubbles: true,
+					}),
+				);
+			});
+
+			// The container exists once the plot is initialised, but it should
+			// be hidden and not pinned since hover was never activated.
+			const container = screen.getByTestId('tooltip-plugin-container');
+			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.getAttribute('aria-hidden')).toBe('true');
+		});
+
+		it('ignores other keys and only pins on the configured pinKey', async () => {
+			const config = createConfigMock();
+
+			renderAndActivateHover(config, undefined, {
+				canPinTooltip: true,
+				pinKey: 'p',
+			});
+
+			// 'l' should NOT pin when pinKey is 'p'.
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: 'l',
+						bubbles: true,
+					}),
+				);
+			});
+
+			await waitFor(() => {
+				expect(
+					screen
+						.getByTestId('tooltip-plugin-container')
+						.getAttribute('data-pinned') === 'true',
+				).toBe(false);
+			});
+
+			// Custom pin key 'p' SHOULD pin.
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', { key: 'p', bubbles: true }),
+				);
+			});
+
+			await waitFor(() => {
+				expect(
+					screen
+						.getByTestId('tooltip-plugin-container')
+						.getAttribute('data-pinned') === 'true',
+				).toBe(true);
+			});
+		});
+
+		it('does not register a keydown listener when canPinTooltip is false', () => {
+			const config = createConfigMock();
+			const addSpy = jest.spyOn(document, 'addEventListener');
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: false,
+				}),
+			);
+
+			const keydownCalls = addSpy.mock.calls.filter(
+				([type]) => type === 'keydown',
+			);
+			expect(keydownCalls).toHaveLength(0);
+		});
+
+		it('removes the keydown pin listener on unmount', () => {
+			const config = createConfigMock();
+			const addSpy = jest.spyOn(document, 'addEventListener');
+			const removeSpy = jest.spyOn(document, 'removeEventListener');
+
+			const { unmount } = render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: true,
+				}),
+			);
+
+			const pinListenerCall = addSpy.mock.calls.find(
+				([type]) => type === 'keydown',
+			);
+			expect(pinListenerCall).toBeDefined();
+			if (!pinListenerCall) {
+				return;
+			}
+			const [, pinListener, pinOptions] = pinListenerCall;
+
+			unmount();
+
+			expect(removeSpy).toHaveBeenCalledWith('keydown', pinListener, pinOptions);
+		});
 	});

 	// ---- Cursor sync ------------------------------------------------------------
--- a/frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx
+++ b/frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx
@@ -4,6 +4,7 @@ import ROUTES from 'constants/routes';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Home, LifeBuoy } from 'lucide-react';
+import { withBasePath } from 'utils/basePath';

 import cloudUrl from '@/assets/Images/cloud.svg';

@@ -11,8 +12,8 @@ import './ErrorBoundaryFallback.styles.scss';

 function ErrorBoundaryFallback(): JSX.Element {
 	const handleReload = (): void => {
-		// Go to home page
-		window.location.href = ROUTES.HOME;
+		// Hard reload resets Sentry.ErrorBoundary state; withBasePath preserves any /signoz/ prefix.
+		window.location.href = withBasePath(ROUTES.HOME);
 	};

 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
--- a/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx
+++ b/frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx
@@ -19,6 +19,7 @@ import {
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';

 import {
 	convertToMilliseconds,
@@ -93,7 +94,7 @@ export function getColumns(
 											key={item}
 											className="traceid-text"
 											onClick={(): void => {
-												window.open(`${ROUTES.TRACE}/${item}`, '_blank');
+												openInNewTab(`${ROUTES.TRACE}/${item}`);
 												logEvent(`MQ Kafka: Drop Rate - traceid navigation`, {
 													item,
 												});
@@ -123,7 +124,7 @@ export function getColumns(
 						onClick={(e): void => {
 							e.preventDefault();
 							e.stopPropagation();
-							window.open(`/services/${encodeURIComponent(text)}`, '_blank');
+							openInNewTab(`/services/${encodeURIComponent(text)}`);
 						}}
 					>
 						{text}
--- a/frontend/src/pages/MessagingQueues/MessagingQueues.tsx
+++ b/frontend/src/pages/MessagingQueues/MessagingQueues.tsx
@@ -59,7 +59,7 @@ function MessagingQueues(): JSX.Element {
 				history.push(link);
 			}
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};

--- a/frontend/src/pages/Support/Support.tsx
+++ b/frontend/src/pages/Support/Support.tsx
@@ -20,6 +20,8 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';

 import './Support.styles.scss';

@@ -92,7 +94,7 @@ export default function Support(): JSX.Element {

 	const { pathname } = useLocation();
 	const handleChannelWithRedirects = (url: string): void => {
-		window.open(url, '_blank');
+		openInNewTab(url);
 	};

 	useEffect(() => {
@@ -150,7 +152,7 @@ export default function Support(): JSX.Element {
 		});

 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};

--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
@@ -29,6 +29,7 @@ import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { isModifierKeyPressed } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate } from 'utils/timeUtils';

 import CustomerStoryCard from './CustomerStoryCard';
@@ -115,7 +116,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 		logEvent('Workspace Blocked: User Clicked Update Credit Card', {});

 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [updateCreditCard]);

--- a/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx
+++ b/frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx
@@ -21,6 +21,7 @@ import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDateWithMinutes } from 'utils/timeUtils';

 import featureGraphicCorrelationUrl from '@/assets/Images/feature-graphic-correlation.svg';
@@ -57,7 +58,7 @@ function WorkspaceSuspended(): JSX.Element {

 	const handleUpdateCreditCard = useCallback(async () => {
 		manageCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [manageCreditCard]);

--- a/frontend/src/providers/EventSource.tsx
+++ b/frontend/src/providers/EventSource.tsx
@@ -22,6 +22,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { EventListener, EventSourcePolyfill } from 'event-source-polyfill';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
+import { withBasePath } from 'utils/basePath';

 interface IEventSourceContext {
 	eventSourceInstance: EventSourcePolyfill | null;
@@ -129,9 +130,12 @@ export function EventSourceProvider({

 	const handleStartOpenConnection = useCallback(
 		(filterExpression?: string): void => {
-			const eventSourceUrl = `${
-				ENVIRONMENT.baseURL
-			}${apiV3}logs/livetail?filter=${encodeURIComponent(filterExpression || '')}`;
+			const apiPath = `${apiV3}logs/livetail?filter=${encodeURIComponent(
+				filterExpression || '',
+			)}`;
+			const eventSourceUrl = ENVIRONMENT.baseURL
+				? `${ENVIRONMENT.baseURL}${apiPath}`
+				: withBasePath(apiPath);

 			eventSourceRef.current = new EventSourcePolyfill(eventSourceUrl, {
 				headers: {
--- a/frontend/src/utils/tests/base-path.test.ts
+++ b/frontend/src/utils/tests/base-path.test.ts
@@ -0,0 +1,118 @@
+/**
+ * basePath is memoized at module init, so each describe block isolates the
+ * module with a fresh DOM state using jest.isolateModules + require.
+ */
+
+type BasePath = typeof import('../basePath');
+
+function loadModule(href?: string): BasePath {
+	if (href !== undefined) {
+		const base = document.createElement('base');
+		base.setAttribute('href', href);
+		document.head.append(base);
+	}
+
+	let mod!: BasePath;
+	jest.isolateModules(() => {
+		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+		mod = require('../basePath');
+	});
+	return mod;
+}
+
+afterEach(() => {
+	for (const el of document.head.querySelectorAll('base')) { el.remove(); }
+});
+
+describe('at basePath="/"', () => {
+	let m: BasePath;
+	beforeEach(() => {
+		m = loadModule('/');
+	});
+
+	it('getBasePath returns "/"', () => {
+		expect(m.getBasePath()).toBe('/');
+	});
+
+	it('withBasePath is a no-op for any internal path', () => {
+		expect(m.withBasePath('/logs')).toBe('/logs');
+		expect(m.withBasePath('/logs/explorer')).toBe('/logs/explorer');
+	});
+
+	it('withBasePath passes through external URLs', () => {
+		expect(m.withBasePath('https://example.com/foo')).toBe(
+			'https://example.com/foo',
+		);
+	});
+
+	it('getAbsoluteUrl returns origin + path', () => {
+		expect(m.getAbsoluteUrl('/logs')).toBe(`${window.location.origin}/logs`);
+	});
+
+	it('getBaseUrl returns bare origin', () => {
+		expect(m.getBaseUrl()).toBe(window.location.origin);
+	});
+});
+
+describe('at basePath="/signoz/"', () => {
+	let m: BasePath;
+	beforeEach(() => {
+		m = loadModule('/signoz/');
+	});
+
+	it('getBasePath returns "/signoz/"', () => {
+		expect(m.getBasePath()).toBe('/signoz/');
+	});
+
+	it('withBasePath prepends the prefix', () => {
+		expect(m.withBasePath('/logs')).toBe('/signoz/logs');
+		expect(m.withBasePath('/logs/explorer')).toBe('/signoz/logs/explorer');
+	});
+
+	it('withBasePath is idempotent — safe to call twice', () => {
+		expect(m.withBasePath('/signoz/logs')).toBe('/signoz/logs');
+	});
+
+	it('withBasePath is idempotent when path equals the prefix without trailing slash', () => {
+		expect(m.withBasePath('/signoz')).toBe('/signoz');
+	});
+
+	it('withBasePath passes through external URLs', () => {
+		expect(m.withBasePath('https://example.com/foo')).toBe(
+			'https://example.com/foo',
+		);
+	});
+
+	it('getAbsoluteUrl returns origin + prefixed path', () => {
+		expect(m.getAbsoluteUrl('/logs')).toBe(
+			`${window.location.origin}/signoz/logs`,
+		);
+	});
+
+	it('getBaseUrl returns origin + prefix without trailing slash', () => {
+		expect(m.getBaseUrl()).toBe(`${window.location.origin}/signoz`);
+	});
+});
+
+describe('no <base> tag', () => {
+	it('getBasePath falls back to "/"', () => {
+		const m = loadModule();
+		expect(m.getBasePath()).toBe('/');
+	});
+});
+
+describe('href without trailing slash', () => {
+	it('normalises to trailing slash', () => {
+		const m = loadModule('/signoz');
+		expect(m.getBasePath()).toBe('/signoz/');
+		expect(m.withBasePath('/logs')).toBe('/signoz/logs');
+	});
+});
+
+describe('nested prefix "/a/b/prefix/"', () => {
+	it('withBasePath handles arbitrary depth', () => {
+		const m = loadModule('/a/b/prefix/');
+		expect(m.withBasePath('/logs')).toBe('/a/b/prefix/logs');
+		expect(m.withBasePath('/a/b/prefix/logs')).toBe('/a/b/prefix/logs');
+	});
+});
--- a/frontend/src/utils/tests/navigation.test.ts
+++ b/frontend/src/utils/tests/navigation.test.ts
@@ -1,25 +1,38 @@
 import { isModifierKeyPressed } from '../app';
-import { openInNewTab } from '../navigation';
+
+type NavigationModule = typeof import('../navigation');
+
+function loadNavigationModule(href?: string): NavigationModule {
+	if (href !== undefined) {
+		const base = document.createElement('base');
+		base.setAttribute('href', href);
+		document.head.append(base);
+	}
+	let mod!: NavigationModule;
+	jest.isolateModules(() => {
+		// oxlint-disable-next-line typescript-eslint/no-require-imports, typescript-eslint/no-var-requires
+		mod = require('../navigation');
+	});
+	return mod;
+}
+
+const createMouseEvent = (overrides: Partial<MouseEvent> = {}): MouseEvent =>
+	({
+		metaKey: false,
+		ctrlKey: false,
+		button: 0,
+		...overrides,
+	}) as MouseEvent;

 describe('navigation utilities', () => {
 	const originalWindowOpen = window.open;

-	beforeEach(() => {
-		window.open = jest.fn();
-	});
-
 	afterEach(() => {
 		window.open = originalWindowOpen;
+		for (const el of document.head.querySelectorAll('base')) { el.remove(); }
 	});

 	describe('isModifierKeyPressed', () => {
-		const createMouseEvent = (overrides: Partial<MouseEvent> = {}): MouseEvent =>
-			({
-				metaKey: false,
-				ctrlKey: false,
-				button: 0,
-				...overrides,
-			} as MouseEvent);

 		it('returns true when metaKey is pressed (Cmd on Mac)', () => {
 			const event = createMouseEvent({ metaKey: true });
@@ -56,25 +69,59 @@ describe('navigation utilities', () => {
 	});

 	describe('openInNewTab', () => {
-		it('calls window.open with the given path and _blank target', () => {
-			openInNewTab('/dashboard');
-			expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
+		describe('at basePath="/"', () => {
+			let m: NavigationModule;
+			beforeEach(() => {
+				jest.spyOn(window, 'open').mockImplementation();
+				m = loadNavigationModule('/');
+			});
+
+			it('passes internal path through unchanged', () => {
+				m.openInNewTab('/dashboard');
+				expect(window.open).toHaveBeenCalledWith('/dashboard', '_blank');
+			});
+
+			it('passes through external URLs unchanged', () => {
+				m.openInNewTab('https://example.com/page');
+				expect(window.open).toHaveBeenCalledWith(
+					'https://example.com/page',
+					'_blank',
+				);
+			});
+
+			it('handles paths with query strings', () => {
+				m.openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
+				expect(window.open).toHaveBeenCalledWith(
+					'/alerts?tab=AlertRules&relativeTime=30m',
+					'_blank',
+				);
+			});
 		});

-		it('handles full URLs', () => {
-			openInNewTab('https://example.com/page');
-			expect(window.open).toHaveBeenCalledWith(
-				'https://example.com/page',
-				'_blank',
-			);
-		});
+		describe('at basePath="/signoz/"', () => {
+			let m: NavigationModule;
+			beforeEach(() => {
+				jest.spyOn(window, 'open').mockImplementation();
+				m = loadNavigationModule('/signoz/');
+			});

-		it('handles paths with query strings', () => {
-			openInNewTab('/alerts?tab=AlertRules&relativeTime=30m');
-			expect(window.open).toHaveBeenCalledWith(
-				'/alerts?tab=AlertRules&relativeTime=30m',
-				'_blank',
-			);
+			it('prepends base path to internal paths', () => {
+				m.openInNewTab('/dashboard');
+				expect(window.open).toHaveBeenCalledWith('/signoz/dashboard', '_blank');
+			});
+
+			it('passes through external URLs unchanged', () => {
+				m.openInNewTab('https://example.com/page');
+				expect(window.open).toHaveBeenCalledWith(
+					'https://example.com/page',
+					'_blank',
+				);
+			});
+
+			it('is idempotent — does not double-prefix an already-prefixed path', () => {
+				m.openInNewTab('/signoz/dashboard');
+				expect(window.open).toHaveBeenCalledWith('/signoz/dashboard', '_blank');
+			});
 		});
 	});
 });
--- a/frontend/src/utils/basePath.ts
+++ b/frontend/src/utils/basePath.ts
@@ -0,0 +1,51 @@
+// Read once at module init — avoids a DOM query on every axios request.
+const _basePath: string = ((): string => {
+	const href = document.querySelector('base')?.getAttribute('href') ?? '/';
+	return href.endsWith('/') ? href : `${href}/`;
+})();
+
+/** Returns the runtime base path — always trailing-slashed. e.g. "/" or "/signoz/" */
+export function getBasePath(): string {
+	return _basePath;
+}
+
+/**
+ * Prepends the base path to an internal absolute path.
+ * Idempotent and safe to call on any value.
+ *
+ *   withBasePath('/logs')         → '/signoz/logs'
+ *   withBasePath('/signoz/logs')  → '/signoz/logs'  (already prefixed)
+ *   withBasePath('https://x.com') → 'https://x.com' (external, passthrough)
+ */
+export function withBasePath(path: string): string {
+	if (!path.startsWith('/')) {
+		return path;
+	}
+	if (_basePath === '/') {
+		return path;
+	}
+	if (path.startsWith(_basePath) || path === _basePath.slice(0, -1)) {
+		return path;
+	}
+	return _basePath + path.slice(1);
+}
+
+/**
+ * Full absolute URL — for copy-to-clipboard and window.open calls.
+ * getAbsoluteUrl(ROUTES.LOGS_EXPLORER) → 'https://host/signoz/logs/logs-explorer'
+ */
+export function getAbsoluteUrl(path: string): string {
+	// oxlint-disable-next-line signoz/no-raw-absolute-path
+	return window.location.origin + withBasePath(path);
+}
+
+/**
+ * Origin + base path without trailing slash — for sending to the backend
+ * as frontendBaseUrl in invite / password-reset email flows.
+ * getBaseUrl() → 'https://host/signoz'
+ */
+export function getBaseUrl(): string {
+	// oxlint-disable-next-line signoz/no-raw-absolute-path
+	const origin = window.location.origin;
+	return origin + (_basePath === '/' ? '' : _basePath.slice(0, -1));
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
SagarRajput-7	9127268e99	feat(base-path): updated lint error comment to oxlint	2026-04-23 12:25:38 +05:30
SagarRajput-7	2c01589298	feat(base-path): migrated the new files added after rebase with main	2026-04-23 12:22:36 +05:30
SagarRajput-7	0f842b8500	feat(base-path): migrate backend bound urls and eslint upgrade to error	2026-04-23 12:22:33 +05:30
SagarRajput-7	4a42093a65	feat(base-path): migrate remaining pattern for window.location.origin + path	2026-04-23 12:20:02 +05:30
SagarRajput-7	c2c2f5b458	feat(base-path): replace window.open with openInNewTab for internal paths	2026-04-23 12:20:02 +05:30
SagarRajput-7	6227d5a700	feat(base-path): fix lint issues	2026-04-23 11:50:29 +05:30
SagarRajput-7	9189072d49	feat(base-path): mirgate rule to oxlint	2026-04-23 11:32:24 +05:30
SagarRajput-7	cb3df7ffbb	feat: code refactor around feedbacks	2026-04-23 11:16:01 +05:30
SagarRajput-7	970b2e8c14	feat: applied suggested patch changes	2026-04-23 11:16:01 +05:30
SagarRajput-7	3237be65fc	feat: code refactor around feedbacks	2026-04-23 11:15:58 +05:30
SagarRajput-7	b703035ff5	feat: updated base path utils and fixed navigation and translations	2026-04-23 11:15:09 +05:30
SagarRajput-7	35591dc28f	feat: updated the html template	2026-04-23 11:10:09 +05:30
SagarRajput-7	743612306f	feat: removed plugin and serving the index.html only as the template	2026-04-23 11:10:09 +05:30
SagarRajput-7	e6aab70222	feat: refactor the interceptor and added gotmpl into gitignore	2026-04-23 11:10:09 +05:30
SagarRajput-7	8b89a682d6	feat: changed output path to dir level	2026-04-23 11:10:08 +05:30
SagarRajput-7	aaaea95a6b	feat: base path config setup and plugin for gotmpl generation at build time	2026-04-23 11:10:08 +05:30
Abhishek Kumar Singh	30d3f754b5	feat: markdown renderer (#10682 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: custom notifiers in alert manager * chore: lint fixs * chore: fix email linter * chore: added tracing to msteamsv2 notifier * feat: alert manager template to template title and notification body * chore: updated test name + code for timeout errors * chore: added utils for using variables with $ notation * chore: exposed templates for alertmanager types * feat: added preprocessor for alert templater * chore: hooked preProcess function in expandTitle and body, added labels and annotations in alertdata * chore: fix lint issues * chore: added handling for missing variable used in template * feat: converted alerttemplater to interface and updated tests * refactor: added extractCommonKV instead of 2 different functions * test: fix preprocessor test case * feat: added support for and in templating * chore: lint fix * chore: renamed the interface * chore: added test for missing function * refactor: test case and sb related changed * refactor: comments and test improvements * chore: lint fix * chore: updated comments * feat: added basic html markdown templater * chore: updated newline to markdown format * feat: slack blockkit renderer using goldmark * test: added test for html rendering * feat: integrated slack blockit in markdownrenderer package and removed plaintext format * chore: updated br with new line in test and logs added * refactor: review comments * refactor: lint fixes * chore: updated licenses for notifiers * chore: updated email notifier from upstream * feat: return single templating result from with flag for template type * fix: variables with symbols in template * feat: slack mrkdwn renderer * feat: custom raw html renderer to escape <no value> * chore: integrated slack mrkdwn renderer and added NoOp formatter * chore: removed notifier test files * fix: concurrent rendering in markdown renderer * refactor: changes as per internal review * chore: lint issue * chore: removed special handling for softline break * refactor: removed logger as markdown renderer dependency * refactor: changed markdown renderer from interface to package-level functions --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2026-04-22 21:22:45 +00:00
Abhi kumar	d5dcdf382c	chore: added changes for pinning tooltip with a shortcut key (#10953 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: added changes for pinning tooltip with a shortcut key * chore: updated tooltipplugin tests * chore: added support for onclick in tooltip * chore: fixed minor issue * chore: updated tooltip pinning desings * chore: minor changes * chore: updated failing test * chore: updated pr review changes * chore: fixed tooltip tests * chore: fixed module css issues * chore: pr review fixes * chore: replaced kbd component with component from signozui * chore: updated the tokens * chore: updated tokens * chore: updated pinned color * chore: updated footer styles * chore: fixed linter issue	2026-04-22 17:37:38 +00:00
aniketio-ctrl	ce5e3e7943	feat(billing): increase zeus http client timeout (#11061 ) * feat(billing): add zeus put meters api * feat(billing): add zeus put meters api * feat(billing): increase zeuss http client timeour	2026-04-22 17:27:39 +00:00