chore: broke down drilldown navigate into a saperate hook

* fix: add ERR_CANCELED retry skip and new query key constants

* refactor: add disabled prop and handleCancelQuery to shared query components (#10959)

* refactor: add disabled prop and handleCancelQuery to shared query components

* feat: add cancel query support to alert rule editing (#10960)

* feat: add cancel query support to alert rule editing

* feat: add cancel query support to CreateAlertV2 (#10961)

* feat: add cancel query support to CreateAlertV2

* feat: add cancel query and AbortSignal support to MetricsExplorer Explorer (#10962)

* feat: add cancel query and AbortSignal support to MetricsExplorer Explorer

* feat: add cancel query support to MetricsExplorer Inspect (#10963)

* feat: add cancel query support to MetricsExplorer Inspect

* feat: add cancel query support to MetricsExplorer Summary (#10964)

* feat: add cancel query support to MetricsExplorer Summary

* feat: add cancel query support to MeterExplorer and dashboard widgets (#10965)

* feat: add cancel query support to MeterExplorer and dashboard widgets

* feat: add cancel query support to Logs, Traces, Exceptions and API Monitoring (#10972)

* feat: add cancel query support to Logs, Traces, Errors, and API Monitoring

* refactor: remove deprecated props and enforce strict query cancel interfaces (#10974)

* refactor: remove deprecated props and enforce strict query cancel interfaces

* fix: metrics explorer inspect cancel and run query bugs (#10975)

* fix: metrics explorer inspect cancel and run query bugs

* fix: api monitoring cancel and run query bugs (#10984)

* feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring (#10988)

* feat: add cancel query support to MeterExplorer and dashboard widgets

* fix: api monitoring cancel and run query bugs

* feat: add cancelled query placeholder UI to alerts, explorers, exceptions, and api monitoring

* fix: cancelled placeholder for alert v2 and metrics inspect, use css modules

* fix: cancelled placeholder race condition in metrics inspect auto-reset

* fix: prioritize cancelled state over loading in metrics inspect content

* fix: keep query builder rendered and match graph view height in inspect fallback

* feat: add cancelled query placeholder to logs, traces, and dashboard widgets (#11007)

* feat: add cancelled query placeholder to logs, traces, and dashboard widgets

* fix: reset cancel on run and swap only chart body in widget graph

* fix: use constants for max retry count (#11049)

* fix: use semantic tokens

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

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"
   }
-}
+}

frontend/src/api/thirdPartyApis/listOverview.ts

@@ -6,15 +6,20 @@ import { PayloadProps, Props } from 'types/api/thirdPartyApis/listOverview';
 
 const listOverview = async (
 	props: Props,
+	signal?: AbortSignal,
 ): Promise<SuccessResponseV2<PayloadProps>> => {
 	const { start, end, show_ip: showIp, filter } = props;
 	try {
-		const response = await axios.post(`/third-party-apis/overview/list`, {
-			start,
-			end,
-			show_ip: showIp,
-			filter,
-		});
+		const response = await axios.post(
+			`/third-party-apis/overview/list`,
+			{
+				start,
+				end,
+				show_ip: showIp,
+				filter,
+			},
+			{ signal },
+		);
 
 		return {
 			httpStatusCode: response.status,

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx

@@ -1,126 +0,0 @@
-import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
-import { parseAsString, useQueryState } from 'nuqs';
-import { useStore } from 'zustand';
-
-import {
-	combineInitialAndUserExpression,
-	getUserExpressionFromCombined,
-} from '../utils';
-import { QuerySearchV2Context } from './context';
-import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
-import { createExpressionStore } from './QuerySearchV2.store';
-
-export interface QuerySearchV2ProviderProps {
-	queryParamKey: string;
-	initialExpression?: string;
-	/**
-	 * @default false
-	 */
-	persistOnUnmount?: boolean;
-	children: ReactNode;
-}
-
-/**
- * Provider component that creates a scoped zustand store and exposes
- * expression state to children via context.
- */
-export function QuerySearchV2Provider({
-	initialExpression = '',
-	persistOnUnmount = false,
-	queryParamKey,
-	children,
-}: QuerySearchV2ProviderProps): JSX.Element {
-	const storeRef = useRef(createExpressionStore());
-	const store = storeRef.current;
-
-	const [urlExpression, setUrlExpression] = useQueryState(
-		queryParamKey,
-		parseAsString,
-	);
-
-	const committedExpression = useStore(store, (s) => s.committedExpression);
-	const setInputExpression = useStore(store, (s) => s.setInputExpression);
-	const commitExpression = useStore(store, (s) => s.commitExpression);
-	const initializeFromUrl = useStore(store, (s) => s.initializeFromUrl);
-	const resetExpression = useStore(store, (s) => s.resetExpression);
-
-	const isInitialized = useRef(false);
-	useEffect(() => {
-		if (!isInitialized.current && urlExpression) {
-			const cleanedExpression = getUserExpressionFromCombined(
-				initialExpression,
-				urlExpression,
-			);
-			initializeFromUrl(cleanedExpression);
-			isInitialized.current = true;
-		}
-	}, [urlExpression, initialExpression, initializeFromUrl]);
-
-	useEffect(() => {
-		if (isInitialized.current || !urlExpression) {
-			setUrlExpression(committedExpression || null);
-		}
-	}, [committedExpression, setUrlExpression, urlExpression]);
-
-	useEffect(() => {
-		return (): void => {
-			if (!persistOnUnmount) {
-				setUrlExpression(null);
-				resetExpression();
-			}
-		};
-	}, [persistOnUnmount, setUrlExpression, resetExpression]);
-
-	const handleChange = useCallback(
-		(expression: string): void => {
-			const userOnly = getUserExpressionFromCombined(
-				initialExpression,
-				expression,
-			);
-			setInputExpression(userOnly);
-		},
-		[initialExpression, setInputExpression],
-	);
-
-	const handleRun = useCallback(
-		(expression: string): void => {
-			const userOnly = getUserExpressionFromCombined(
-				initialExpression,
-				expression,
-			);
-			commitExpression(userOnly);
-		},
-		[initialExpression, commitExpression],
-	);
-
-	const combinedExpression = useMemo(
-		() => combineInitialAndUserExpression(initialExpression, committedExpression),
-		[initialExpression, committedExpression],
-	);
-
-	const contextValue = useMemo<QuerySearchV2ContextValue>(
-		() => ({
-			expression: combinedExpression,
-			userExpression: committedExpression,
-			initialExpression,
-			querySearchProps: {
-				initialExpression: initialExpression.trim() ? initialExpression : undefined,
-				onChange: handleChange,
-				onRun: handleRun,
-			},
-		}),
-		[
-			combinedExpression,
-			committedExpression,
-			initialExpression,
-			handleChange,
-			handleRun,
-		],
-	);
-
-	return (
-		<QuerySearchV2Context.Provider value={contextValue}>
-			{children}
-		</QuerySearchV2Context.Provider>
-	);
-}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.store.ts

@@ -1,60 +0,0 @@
-import { createStore, StoreApi } from 'zustand';
-
-export type QuerySearchV2Store = {
-	/**
-	 * User-typed expression (local state, updates on typing)
-	 */
-	inputExpression: string;
-	/**
-	 * Committed expression (synced to URL, updates on submit)
-	 */
-	committedExpression: string;
-	setInputExpression: (expression: string) => void;
-	commitExpression: (expression: string) => void;
-	resetExpression: () => void;
-	initializeFromUrl: (urlExpression: string) => void;
-};
-
-export interface QuerySearchProps {
-	initialExpression: string | undefined;
-	onChange: (expression: string) => void;
-	onRun: (expression: string) => void;
-}
-
-export interface QuerySearchV2ContextValue {
-	/**
-	 * Combined expression: "initialExpression AND (userExpression)"
-	 */
-	expression: string;
-	userExpression: string;
-	initialExpression: string;
-	querySearchProps: QuerySearchProps;
-}
-
-export function createExpressionStore(): StoreApi<QuerySearchV2Store> {
-	return createStore<QuerySearchV2Store>((set) => ({
-		inputExpression: '',
-		committedExpression: '',
-		setInputExpression: (expression: string): void => {
-			set({ inputExpression: expression });
-		},
-		commitExpression: (expression: string): void => {
-			set({
-				inputExpression: expression,
-				committedExpression: expression,
-			});
-		},
-		resetExpression: (): void => {
-			set({
-				inputExpression: '',
-				committedExpression: '',
-			});
-		},
-		initializeFromUrl: (urlExpression: string): void => {
-			set({
-				inputExpression: urlExpression,
-				committedExpression: urlExpression,
-			});
-		},
-	}));
-}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/QuerySearchExpressionProvider.test.tsx

@@ -1,95 +0,0 @@
-import { ReactNode } from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { useQuerySearchV2Context } from '../context';
-import {
-	QuerySearchV2Provider,
-	QuerySearchV2ProviderProps,
-} from '../QuerySearchV2.provider';
-
-const mockSetQueryState = jest.fn();
-let mockUrlValue: string | null = null;
-
-jest.mock('nuqs', () => ({
-	parseAsString: {},
-	useQueryState: jest.fn(() => [mockUrlValue, mockSetQueryState]),
-}));
-
-function createWrapper(
-	props: Partial<QuerySearchV2ProviderProps> = {},
-): ({ children }: { children: ReactNode }) => JSX.Element {
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QuerySearchV2Provider queryParamKey="testExpression" {...props}>
-				{children}
-			</QuerySearchV2Provider>
-		);
-	};
-}
-
-describe('QuerySearchExpressionProvider', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUrlValue = null;
-	});
-
-	it('should provide initial context values', () => {
-		const { result } = renderHook(() => useQuerySearchV2Context(), {
-			wrapper: createWrapper(),
-		});
-
-		expect(result.current.expression).toBe('');
-		expect(result.current.userExpression).toBe('');
-		expect(result.current.initialExpression).toBe('');
-	});
-
-	it('should combine initialExpression with userExpression', () => {
-		const { result } = renderHook(() => useQuerySearchV2Context(), {
-			wrapper: createWrapper({ initialExpression: 'k8s.pod.name = "my-pod"' }),
-		});
-
-		expect(result.current.expression).toBe('k8s.pod.name = "my-pod"');
-		expect(result.current.initialExpression).toBe('k8s.pod.name = "my-pod"');
-
-		act(() => {
-			result.current.querySearchProps.onChange('service = "api"');
-		});
-		act(() => {
-			result.current.querySearchProps.onRun('service = "api"');
-		});
-
-		expect(result.current.expression).toBe(
-			'k8s.pod.name = "my-pod" AND (service = "api")',
-		);
-		expect(result.current.userExpression).toBe('service = "api"');
-	});
-
-	it('should provide querySearchProps with correct callbacks', () => {
-		const { result } = renderHook(() => useQuerySearchV2Context(), {
-			wrapper: createWrapper({ initialExpression: 'initial' }),
-		});
-
-		expect(result.current.querySearchProps.initialExpression).toBe('initial');
-		expect(typeof result.current.querySearchProps.onChange).toBe('function');
-		expect(typeof result.current.querySearchProps.onRun).toBe('function');
-	});
-
-	it('should initialize from URL value on mount', () => {
-		mockUrlValue = 'status = 500';
-
-		const { result } = renderHook(() => useQuerySearchV2Context(), {
-			wrapper: createWrapper(),
-		});
-
-		expect(result.current.userExpression).toBe('status = 500');
-		expect(result.current.expression).toBe('status = 500');
-	});
-
-	it('should throw error when used outside provider', () => {
-		expect(() => {
-			renderHook(() => useQuerySearchV2Context());
-		}).toThrow(
-			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
-		);
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/store.test.ts

@@ -1,61 +0,0 @@
-import { createExpressionStore } from '../QuerySearchV2.store';
-
-describe('createExpressionStore', () => {
-	it('should create a store with initial state', () => {
-		const store = createExpressionStore();
-		const state = store.getState();
-
-		expect(state.inputExpression).toBe('');
-		expect(state.committedExpression).toBe('');
-	});
-
-	it('should update inputExpression via setInputExpression', () => {
-		const store = createExpressionStore();
-
-		store.getState().setInputExpression('service.name = "api"');
-
-		expect(store.getState().inputExpression).toBe('service.name = "api"');
-		expect(store.getState().committedExpression).toBe('');
-	});
-
-	it('should update both expressions via commitExpression', () => {
-		const store = createExpressionStore();
-
-		store.getState().setInputExpression('service.name = "api"');
-		store.getState().commitExpression('service.name = "api"');
-
-		expect(store.getState().inputExpression).toBe('service.name = "api"');
-		expect(store.getState().committedExpression).toBe('service.name = "api"');
-	});
-
-	it('should reset all state via resetExpression', () => {
-		const store = createExpressionStore();
-
-		store.getState().setInputExpression('service.name = "api"');
-		store.getState().commitExpression('service.name = "api"');
-		store.getState().resetExpression();
-
-		expect(store.getState().inputExpression).toBe('');
-		expect(store.getState().committedExpression).toBe('');
-	});
-
-	it('should initialize from URL value', () => {
-		const store = createExpressionStore();
-
-		store.getState().initializeFromUrl('status = 500');
-
-		expect(store.getState().inputExpression).toBe('status = 500');
-		expect(store.getState().committedExpression).toBe('status = 500');
-	});
-
-	it('should create isolated store instances', () => {
-		const store1 = createExpressionStore();
-		const store2 = createExpressionStore();
-
-		store1.getState().setInputExpression('expr1');
-		store2.getState().setInputExpression('expr2');
-
-		expect(store1.getState().inputExpression).toBe('expr1');
-		expect(store2.getState().inputExpression).toBe('expr2');
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/context.ts

@@ -1,18 +0,0 @@
-// eslint-disable-next-line no-restricted-imports -- React Context required for scoped store pattern
-import { createContext, useContext } from 'react';
-
-import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
-
-export const QuerySearchV2Context = createContext<QuerySearchV2ContextValue | null>(
-	null,
-);
-
-export function useQuerySearchV2Context(): QuerySearchV2ContextValue {
-	const context = useContext(QuerySearchV2Context);
-	if (!context) {
-		throw new Error(
-			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
-		);
-	}
-	return context;
-}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/index.ts

@@ -1,8 +0,0 @@
-export { useQuerySearchV2Context } from './context';
-export type { QuerySearchV2ProviderProps } from './QuerySearchV2.provider';
-export { QuerySearchV2Provider } from './QuerySearchV2.provider';
-export type {
-	QuerySearchProps,
-	QuerySearchV2ContextValue,
-	QuerySearchV2Store,
-} from './QuerySearchV2.store';

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -13,13 +13,6 @@
 		display: flex;
 		flex-direction: row;
 
-		.query-search-initial-scope-label {
-			position: absolute;
-			left: 8px;
-			top: 10px;
-			z-index: 10;
-		}
-
 		.query-where-clause-editor {
 			flex: 1;
 			min-width: 400px;
@@ -54,10 +47,6 @@
 				}
 			}
 		}
-
-		&.hasInitialExpression .cm-editor .cm-content {
-			padding-left: 22px !important;
-		}
 	}
 
 	.cm-editor {
@@ -73,6 +62,7 @@
 			border-radius: 2px;
 			border: 1px solid var(--l1-border);
 			padding: 0px !important;
+			background-color: var(--l1-background) !important;
 
 			&:focus-within {
 				border-color: var(--l1-border);

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

@@ -30,7 +30,7 @@ import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariabl
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Filter, Info, TriangleAlert } from 'lucide-react';
+import { Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -47,7 +47,6 @@ import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { queryExamples } from './constants';
-import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
 
@@ -86,8 +85,6 @@ interface QuerySearchProps {
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
 	showFilterSuggestionsWithoutMetric?: boolean;
-	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
-	initialExpression?: string;
 }
 
 function QuerySearch({
@@ -99,7 +96,6 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
-	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -116,26 +112,18 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const isScopedFilter = initialExpression !== undefined;
-
-	const validateExpressionForEditor = useCallback(
-		(editorDoc: string): void => {
-			const toValidate = isScopedFilter
-				? combineInitialAndUserExpression(initialExpression ?? '', editorDoc)
-				: editorDoc;
-			try {
-				const validationResponse = validateQuery(toValidate);
-				setValidation(validationResponse);
-			} catch (error) {
-				setValidation({
-					isValid: false,
-					message: 'Failed to process query',
-					errors: [error as IDetailedError],
-				});
-			}
-		},
-		[initialExpression, isScopedFilter],
-	);
+	const handleQueryValidation = useCallback((newExpression: string): void => {
+		try {
+			const validationResponse = validateQuery(newExpression);
+			setValidation(validationResponse);
+		} catch (error) {
+			setValidation({
+				isValid: false,
+				message: 'Failed to process query',
+				errors: [error as IDetailedError],
+			});
+		}
+	}, []);
 
 	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -177,8 +165,6 @@ function QuerySearch({
 		setIsEditorReady(true);
 	}, []);
 
-	const prevQueryDataExpressionRef = useRef<string | undefined>();
-
 	useEffect(
 		() => {
 			if (!isEditorReady) {
@@ -187,22 +173,13 @@ function QuerySearch({
 
 			const newExpression = queryData.filter?.expression || '';
 			const currentExpression = getCurrentExpression();
-			const prevExpression = prevQueryDataExpressionRef.current;
 
-			// Only sync editor when queryData.filter?.expression actually changed from external source
-			// Not when focus changed (which would reset uncommitted user input)
-			const queryDataExpressionChanged = prevExpression !== newExpression;
-			prevQueryDataExpressionRef.current = newExpression;
-
-			if (
-				queryDataExpressionChanged &&
-				newExpression !== currentExpression &&
-				!isFocused
-			) {
+			// Do not update codemirror editor if the expression is the same
+			if (newExpression !== currentExpression && !isFocused) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-			}
-			if (!isFocused) {
-				validateExpressionForEditor(currentExpression);
+				if (newExpression) {
+					handleQueryValidation(newExpression);
+				}
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -309,7 +286,7 @@ function QuerySearch({
 						}
 					});
 				}
-				setKeySuggestions([...merged.values()]);
+				setKeySuggestions(Array.from(merged.values()));
 
 				// Force reopen the completion if editor is available and focused
 				if (editorRef.current) {
@@ -362,7 +339,7 @@ function QuerySearch({
 		// If value contains single quotes, escape them and wrap in single quotes
 		if (value.includes("'")) {
 			// Replace single quotes with escaped single quotes
-			const escapedValue = value.replaceAll(/'/g, "\\'");
+			const escapedValue = value.replace(/'/g, "\\'");
 			return `'${escapedValue}'`;
 		}
 
@@ -639,7 +616,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		validateExpressionForEditor(currentExpression);
+		handleQueryValidation(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -657,6 +634,7 @@ function QuerySearch({
 	);
 
 	const handleExampleClick = (exampleQuery: string): void => {
+		// If there's an existing query, append the example with AND
 		const currentExpression = getCurrentExpression();
 		const newExpression = currentExpression
 			? `${currentExpression} AND ${exampleQuery}`
@@ -921,12 +899,12 @@ function QuerySearch({
 
 			// If we have previous pairs, we can prioritize keys that haven't been used yet
 			if (queryContext.queryPairs && queryContext.queryPairs.length > 0) {
-				const usedKeys = new Set(queryContext.queryPairs.map((pair) => pair.key));
+				const usedKeys = queryContext.queryPairs.map((pair) => pair.key);
 
 				// Add boost to unused keys to prioritize them
 				options = options.map((option) => ({
 					...option,
-					boost: usedKeys.has(option.label) ? -10 : 10,
+					boost: usedKeys.includes(option.label) ? -10 : 10,
 				}));
 			}
 
@@ -1341,19 +1319,6 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
-				{isScopedFilter ? (
-					<Tooltip title={initialExpression || ''} placement="left">
-						<div className="query-search-initial-scope-label">
-							<Filter
-								size={14}
-								style={{
-									opacity: 0.9,
-									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-								}}
-							/>
-						</div>
-					</Tooltip>
-				) : null}
 				<Tooltip
 					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
 					placement="left"
@@ -1393,7 +1358,6 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
-						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1428,12 +1392,7 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											const user = getCurrentExpression();
-											onRun(
-												isScopedFilter
-													? combineInitialAndUserExpression(initialExpression ?? '', user)
-													: user,
-											);
+											onRun(getCurrentExpression());
 										}
 										return true;
 									},
@@ -1598,7 +1557,6 @@ QuerySearch.defaultProps = {
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 	showFilterSuggestionsWithoutMetric: false,
-	initialExpression: undefined,
 };
 
 export default QuerySearch;

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/utils.ts

@@ -1,58 +0,0 @@
-import {
-	combineInitialAndUserExpression,
-	getUserExpressionFromCombined,
-} from '../utils';
-
-describe('entityLogsExpression', () => {
-	describe('combineInitialAndUserExpression', () => {
-		it('returns user when initial is empty', () => {
-			expect(combineInitialAndUserExpression('', 'body contains error')).toBe(
-				'body contains error',
-			);
-		});
-
-		it('returns initial when user is empty', () => {
-			expect(combineInitialAndUserExpression('k8s.pod.name = "x"', '')).toBe(
-				'k8s.pod.name = "x"',
-			);
-		});
-
-		it('wraps user in parentheses with AND', () => {
-			expect(
-				combineInitialAndUserExpression('k8s.pod.name = "x"', 'body = "a"'),
-			).toBe('k8s.pod.name = "x" AND (body = "a")');
-		});
-	});
-
-	describe('getUserExpressionFromCombined', () => {
-		it('returns empty when combined equals initial', () => {
-			expect(
-				getUserExpressionFromCombined('k8s.pod.name = "x"', 'k8s.pod.name = "x"'),
-			).toBe('');
-		});
-
-		it('extracts user from wrapped form', () => {
-			expect(
-				getUserExpressionFromCombined(
-					'k8s.pod.name = "x"',
-					'k8s.pod.name = "x" AND (body = "a")',
-				),
-			).toBe('body = "a"');
-		});
-
-		it('extracts user from legacy AND without parens', () => {
-			expect(
-				getUserExpressionFromCombined(
-					'k8s.pod.name = "x"',
-					'k8s.pod.name = "x" AND body = "a"',
-				),
-			).toBe('body = "a"');
-		});
-
-		it('returns full combined when initial is empty', () => {
-			expect(getUserExpressionFromCombined('', 'service.name = "a"')).toBe(
-				'service.name = "a"',
-			);
-		});
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/utils.ts

@@ -1,40 +0,0 @@
-export function combineInitialAndUserExpression(
-	initial: string,
-	user: string,
-): string {
-	const i = initial.trim();
-	const u = user.trim();
-	if (!i) {
-		return u;
-	}
-	if (!u) {
-		return i;
-	}
-	return `${i} AND (${u})`;
-}
-
-export function getUserExpressionFromCombined(
-	initial: string,
-	combined: string | null | undefined,
-): string {
-	const i = initial.trim();
-	const c = (combined ?? '').trim();
-	if (!c) {
-		return '';
-	}
-	if (!i) {
-		return c;
-	}
-	if (c === i) {
-		return '';
-	}
-	const wrappedPrefix = `${i} AND (`;
-	if (c.startsWith(wrappedPrefix) && c.endsWith(')')) {
-		return c.slice(wrappedPrefix.length, -1);
-	}
-	const plainPrefix = `${i} AND `;
-	if (c.startsWith(plainPrefix)) {
-		return c.slice(plainPrefix.length);
-	}
-	return c;
-}

frontend/src/components/QueryBuilderV2/index.ts

@@ -1,14 +0,0 @@
-export type {
-	QuerySearchProps,
-	QuerySearchV2ContextValue,
-	QuerySearchV2ProviderProps,
-} from './QueryV2/QuerySearch/Provider';
-export {
-	QuerySearchV2Provider,
-	useQuerySearchV2Context,
-} from './QueryV2/QuerySearch/Provider';
-export { QueryBuilderV2 } from './QueryBuilderV2';
-export {
-	QueryBuilderV2Provider,
-	useQueryBuilderV2Context,
-} from './QueryBuilderV2Context';

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.module.scss

@@ -0,0 +1,26 @@
+.placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	min-height: 240px;
+	width: 100%;
+	padding: 24px;
+	gap: 12px;
+}
+
+.emoji {
+	width: 48px;
+	height: 48px;
+}
+
+.text {
+	text-align: center;
+	font-size: 14px;
+	color: var(--muted-foreground);
+}
+
+.subText {
+	color: var(--foreground);
+}

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -0,0 +1,31 @@
+import { Typography } from 'antd';
+import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
+
+import styles from './QueryCancelledPlaceholder.module.scss';
+
+interface QueryCancelledPlaceholderProps {
+	subText?: string;
+}
+
+function QueryCancelledPlaceholder({
+	subText,
+}: QueryCancelledPlaceholderProps): JSX.Element {
+	return (
+		<div className={styles.placeholder}>
+			<img className={styles.emoji} src={eyesEmojiUrl} alt="eyes emoji" />
+			<Typography className={styles.text}>
+				Query cancelled.
+				<span className={styles.subText}>
+					{' '}
+					{subText || 'Click "Run Query" to load data.'}
+				</span>
+			</Typography>
+		</div>
+	);
+}
+
+QueryCancelledPlaceholder.defaultProps = {
+	subText: undefined,
+};
+
+export default QueryCancelledPlaceholder;

frontend/src/components/QueryCancelledPlaceholder/index.ts

@@ -0,0 +1 @@
+export { default } from './QueryCancelledPlaceholder';

frontend/src/constants/reactQuery.ts

@@ -0,0 +1,8 @@
+/**
+ * Maximum number of retries for a failed react-query request before giving up.
+ * Used as the upper bound in the default `retry` predicate:
+ *   `return failureCount < MAX_QUERY_RETRIES;`
+ *
+ * This retries up to 3 times (4 attempts total including the initial request).
+ */
+export const MAX_QUERY_RETRIES = 3;

frontend/src/constants/reactQueryKeys.ts

@@ -25,7 +25,8 @@ export const REACT_QUERY_KEY = {
 	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
-	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
+	GET_ALL_ALERTS: 'GET_ALL_ALERTS',
+	ALERT_RULES_CHART_PREVIEW: 'ALERT_RULES_CHART_PREVIEW',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',

frontend/src/container/AllError/index.tsx

@@ -21,6 +21,7 @@ import { FilterConfirmProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
@@ -36,6 +37,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
+import { useAllErrorsQueryState } from 'pages/AllErrors/QueryStateContext';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -121,7 +123,13 @@ function AllErrors(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const compositeData = useGetCompositeQueryParam();
 
-	const [{ isLoading, data }, errorCountResponse] = useQueries([
+	const setIsFetching = useAllErrorsQueryState((s) => s.setIsFetching);
+	const isCancelled = useAllErrorsQueryState((s) => s.isCancelled);
+
+	const [
+		{ isLoading, isFetching: isErrorsFetching, data },
+		errorCountResponse,
+	] = useQueries([
 		{
 			queryKey: ['getAllErrors', updatedPath, maxTime, minTime, compositeData],
 			queryFn: (): Promise<SuccessResponse<PayloadProps> | ErrorResponse> =>
@@ -162,6 +170,12 @@ function AllErrors(): JSX.Element {
 			enabled: !loading,
 		},
 	]);
+
+	const isFetching = isErrorsFetching || errorCountResponse.isFetching;
+	useEffect(() => {
+		setIsFetching(isFetching);
+	}, [isFetching, setIsFetching]);
+
 	const { notifications } = useNotifications();
 
 	useEffect(() => {
@@ -473,6 +487,12 @@ function AllErrors(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [errorCountResponse.data?.payload]);
 
+	if (isCancelled && !data?.payload?.length) {
+		return (
+			<QueryCancelledPlaceholder subText='Click "Run Query" to load exceptions.' />
+		);
+	}
+
 	return (
 		<ResizeTable
 			columns={columns}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -1,12 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
+import emptyStateUrl from 'assets/Icons/emptyState.svg';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -23,8 +27,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
-import emptyStateUrl from '@/assets/Icons/emptyState.svg';
-
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import { columnsConfig, formatDataForTable } from '../../utils';
@@ -40,6 +42,7 @@ function DomainList(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
+	const queryClient = useQueryClient();
 	const { currentQuery, handleRunQuery } = useQueryBuilder();
 	const query = useMemo(() => currentQuery?.builder?.queryData[0] || null, [
 		currentQuery,
@@ -53,6 +56,19 @@ function DomainList(): JSX.Element {
 
 	const compositeData = useGetCompositeQueryParam();
 
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
+	const handleStageAndRunQuery = useCallback(() => {
+		setIsCancelled(false);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.GET_DOMAINS_LIST]);
+		handleRunQuery();
+	}, [queryClient, handleRunQuery]);
+
 	const { data, isLoading, isFetching } = useListOverview({
 		start: minTime,
 		end: maxTime,
@@ -105,6 +121,13 @@ function DomainList(): JSX.Element {
 		[data],
 	);
 
+	// Auto-reset cancelled state when a new fetch starts
+	useEffect(() => {
+		if (isFetching) {
+			setIsCancelled(false);
+		}
+	}, [isFetching]);
+
 	// Open drawer if selectedDomain is set in URL
 	useEffect(() => {
 		if (selectedDomain && formattedDataForTable?.length > 0) {
@@ -119,7 +142,13 @@ function DomainList(): JSX.Element {
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
 				showAutoRefresh={false}
-				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+				rightActions={
+					<RightToolbarActions
+						onStageRunQuery={handleStageAndRunQuery}
+						isLoadingQueries={isFetching}
+						handleCancelQuery={handleCancelQuery}
+					/>
+				}
 			/>
 			<div className={cx('api-monitoring-list-header')}>
 				<QuerySearch
@@ -130,38 +159,44 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
-				<div className="no-filtered-domains-message-container">
-					<div className="no-filtered-domains-message-content">
-						<img
-							src={emptyStateUrl}
-							alt="thinking-emoji"
-							className="empty-state-svg"
-						/>
+			{isCancelled && formattedDataForTable.length === 0 && (
+				<QueryCancelledPlaceholder subText='Click "Run Query" to load API monitoring data.' />
+			)}
+			{!isCancelled &&
+				!isFetching &&
+				!isLoading &&
+				formattedDataForTable.length === 0 && (
+					<div className="no-filtered-domains-message-container">
+						<div className="no-filtered-domains-message-content">
+							<img
+								src={emptyStateUrl}
+								alt="thinking-emoji"
+								className="empty-state-svg"
+							/>
 
-						<div className="no-filtered-domains-message">
-							<div className="no-domain-title">
-								No External API calls detected with applied filters.
+							<div className="no-filtered-domains-message">
+								<div className="no-domain-title">
+									No External API calls detected with applied filters.
+								</div>
+								<div className="no-domain-subtitle">
+									Ensure all HTTP client spans are being sent with kind as{' '}
+									<span className="attribute">Client</span> and url set in{' '}
+									<span className="attribute">url.full</span> or{' '}
+									<span className="attribute">http.url</span> attribute.
+								</div>
+								<a
+									href={DOCLINKS.EXTERNAL_API_MONITORING}
+									target="_blank"
+									rel="noreferrer"
+									className="external-api-doc-link"
+								>
+									Learn how External API monitoring works in SigNoz{' '}
+									<MoveUpRight size={14} />
+								</a>
 							</div>
-							<div className="no-domain-subtitle">
-								Ensure all HTTP client spans are being sent with kind as{' '}
-								<span className="attribute">Client</span> and url set in{' '}
-								<span className="attribute">url.full</span> or{' '}
-								<span className="attribute">http.url</span> attribute.
-							</div>
-							<a
-								href={DOCLINKS.EXTERNAL_API_MONITORING}
-								target="_blank"
-								rel="noreferrer"
-								className="external-api-doc-link"
-							>
-								Learn how External API monitoring works in SigNoz{' '}
-								<MoveUpRight size={14} />
-							</a>
 						</div>
 					</div>
-				</div>
-			)}
+				)}
 			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
 				<Table
 					className="api-monitoring-domain-list-table"

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

@@ -18,9 +18,16 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 export interface ChartPreviewProps {
 	alertDef: AlertDef;
 	source?: YAxisSource;
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
-function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
+function ChartPreview({
+	alertDef,
+	source,
+	isCancelled = false,
+	onFetchingStateChange,
+}: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
 	const {
 		alertType,
@@ -88,6 +95,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 
@@ -102,6 +111,8 @@ function ChartPreview({ alertDef, source }: ChartPreviewProps): JSX.Element {
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
 			additionalThresholds={thresholdState.thresholds}
+			isCancelled={isCancelled}
+			onFetchingStateChange={onFetchingStateChange}
 		/>
 	);
 

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

@@ -1,9 +1,11 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { Button } from 'antd';
 import classNames from 'classnames';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import QuerySectionComponent from 'container/FormAlertRules/QuerySection';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { getMetricNameFromQueryData } from 'hooks/useGetYAxisUnit';
@@ -62,7 +64,24 @@ function QuerySection(): JSX.Element {
 		return currentQueryKey !== stagedQueryKey;
 	}, [currentQuery, alertType, thresholdState, stagedQuery]);
 
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const runQueryHandler = useCallback(() => {
+		setIsCancelled(false);
+		queryClient.invalidateQueries([REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW]);
 		// Reset the source param when the query is changed
 		// Then manually run the query
 		if (source === YAxisSource.DASHBOARDS && didQueryChange) {
@@ -76,6 +95,7 @@ function QuerySection(): JSX.Element {
 		currentQuery,
 		didQueryChange,
 		handleRunQuery,
+		queryClient,
 		redirectWithQueryBuilderData,
 		source,
 	]);
@@ -106,7 +126,12 @@ function QuerySection(): JSX.Element {
 	return (
 		<div className="query-section">
 			<Stepper stepNumber={1} label="Define the query" />
-			<ChartPreview alertDef={alertDef} source={source} />
+			<ChartPreview
+				alertDef={alertDef}
+				source={source}
+				isCancelled={isCancelled}
+				onFetchingStateChange={setIsLoadingQueries}
+			/>
 			<div className="query-section-tabs">
 				<div className="query-section-query-actions">
 					{tabs.map((tab) => (
@@ -130,6 +155,8 @@ function QuerySection(): JSX.Element {
 				setQueryCategory={onQueryCategoryChange}
 				alertType={alertType}
 				runQuery={runQueryHandler}
+				isLoadingQueries={isLoadingQueries}
+				handleCancelQuery={handleCancelQuery}
 				alertDef={alertDef}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				key={currentQuery.queryType}

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,
 		],
 	);
 

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,

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 (

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 (

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;

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}

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}

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}

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

@@ -4,12 +4,14 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import { INITIAL_CRITICAL_THRESHOLD } from 'container/CreateAlertV2/context/constants';
 import { Threshold } from 'container/CreateAlertV2/context/types';
@@ -69,6 +71,8 @@ export interface ChartPreviewProps {
 	setQueryStatus?: (status: string) => void;
 	showSideLegend?: boolean;
 	additionalThresholds?: Threshold[];
+	isCancelled?: boolean;
+	onFetchingStateChange?: (isFetching: boolean) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -86,6 +90,8 @@ function ChartPreview({
 	setQueryStatus,
 	showSideLegend = false,
 	additionalThresholds,
+	isCancelled = false,
+	onFetchingStateChange,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
 	const dispatch = useDispatch();
@@ -185,7 +191,7 @@ function ChartPreview({
 		ENTITY_VERSION_V5,
 		{
 			queryKey: [
-				'chartPreview',
+				REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
 				userQueryKey || JSON.stringify(query),
 				selectedInterval,
 				minTime,
@@ -193,9 +199,14 @@ function ChartPreview({
 				alertDef?.ruleType,
 			],
 			enabled: canQuery,
+			keepPreviousData: true,
 		},
 	);
 
+	useEffect(() => {
+		onFetchingStateChange?.(queryResponse.isFetching);
+	}, [queryResponse.isFetching, onFetchingStateChange]);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 
 	useEffect((): void => {
@@ -334,11 +345,16 @@ function ChartPreview({
 
 	const chartData = getUPlotChartData(queryResponse?.data?.payload);
 
+	const hasResultData = !!queryResponse?.data?.payload?.data?.result?.length;
+
 	const isAnomalyDetectionAlert =
 		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;
 
 	const chartDataAvailable =
-		chartData && !queryResponse.isError && !queryResponse.isLoading;
+		chartData &&
+		hasResultData &&
+		!queryResponse.isLoading &&
+		(!queryResponse.isError || isCancelled);
 
 	const isAnomalyDetectionEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
@@ -359,10 +375,14 @@ function ChartPreview({
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
-					{(queryResponse?.isError || queryResponse?.error) && (
+					{(queryResponse?.isError || queryResponse?.error) && !isCancelled && (
 						<ErrorInPlace error={queryResponse.error as APIError} />
 					)}
 
+					{isCancelled && !queryResponse.isLoading && !hasResultData && (
+						<QueryCancelledPlaceholder subText='Click "Run Query" to load the chart preview.' />
+					)}
+
 					{chartDataAvailable && !isAnomalyDetectionAlert && (
 						<GridPanelSwitch
 							options={options}
@@ -403,6 +423,8 @@ ChartPreview.defaultProps = {
 	setQueryStatus: (): void => {},
 	showSideLegend: false,
 	additionalThresholds: undefined,
+	isCancelled: false,
+	onFetchingStateChange: undefined,
 };
 
 export default ChartPreview;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -35,6 +35,8 @@ function QuerySection({
 	setQueryCategory,
 	alertType,
 	runQuery,
+	isLoadingQueries,
+	handleCancelQuery,
 	alertDef,
 	panelType,
 	ruleId,
@@ -226,6 +228,8 @@ function QuerySection({
 												queryType: queryCategory,
 											});
 										}}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
 									/>
 								</span>
 							}
@@ -245,7 +249,11 @@ function QuerySection({
 							onChange={handleQueryCategoryChange}
 							tabBarExtraContent={
 								<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-									<RunQueryBtn onStageRunQuery={runQuery} />
+									<RunQueryBtn
+										onStageRunQuery={runQuery}
+										handleCancelQuery={handleCancelQuery}
+										isLoadingQueries={isLoadingQueries}
+									/>
 								</span>
 							}
 							items={items}
@@ -287,6 +295,8 @@ interface QuerySectionProps {
 	setQueryCategory: (n: EQueryType) => void;
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	alertDef: AlertDef;
 	panelType: PANEL_TYPES;
 	ruleId: string;

frontend/src/container/FormAlertRules/index.tsx

@@ -136,6 +136,19 @@ function FormAlertRules({
 
 	// use query client
 	const ruleCache = useQueryClient();
+	const [isChartQueryCancelled, setIsChartQueryCancelled] = useState(false);
+	const [isLoadingAlertQuery, setIsLoadingAlertQuery] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingAlertQuery) {
+			setIsChartQueryCancelled(false);
+		}
+	}, [isLoadingAlertQuery]);
+
+	const handleCancelAlertQuery = useCallback(() => {
+		ruleCache.cancelQueries(REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW);
+		setIsChartQueryCancelled(true);
+	}, [ruleCache]);
 
 	const isNewRule = !ruleId || isEmpty(ruleId);
 
@@ -702,6 +715,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -720,6 +735,8 @@ function FormAlertRules({
 			yAxisUnit={yAxisUnit || ''}
 			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 			setQueryStatus={setQueryStatus}
+			isCancelled={isChartQueryCancelled}
+			onFetchingStateChange={setIsLoadingAlertQuery}
 		/>
 	);
 
@@ -902,7 +919,15 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => handleRunQuery()}
+							runQuery={(): void => {
+								setIsChartQueryCancelled(false);
+								ruleCache.invalidateQueries([
+									REACT_QUERY_KEY.ALERT_RULES_CHART_PREVIEW,
+								]);
+								handleRunQuery();
+							}}
+							isLoadingQueries={isLoadingAlertQuery}
+							handleCancelQuery={handleCancelAlertQuery}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -6,6 +6,7 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import {
@@ -18,6 +19,7 @@ import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -86,6 +88,7 @@ function FullView({
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
 
 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
@@ -203,8 +206,8 @@ function FullView({
 		});
 	}, [selectedPanelType]);
 
-	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		queryKey: [
+	const queryRangeKey = useMemo(
+		() => [
 			widget?.query,
 			selectedPanelType,
 			requestData,
@@ -212,10 +215,28 @@ function FullView({
 			minTime,
 			maxTime,
 		],
+		[widget?.query, selectedPanelType, requestData, version, minTime, maxTime],
+	);
+
+	const response = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		queryKey: queryRangeKey,
 		enabled: !isDependedDataLoaded,
 		keepPreviousData: true,
 	});
 
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (response.isFetching) {
+			setIsCancelled(false);
+		}
+	}, [response.isFetching]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(queryRangeKey);
+		setIsCancelled(true);
+	}, [queryClient, queryRangeKey]);
+
 	const onDragSelect = useCallback((start: number, end: number): void => {
 		const startTimestamp = Math.trunc(start);
 		const endTimestamp = Math.trunc(end);
@@ -354,6 +375,8 @@ function FullView({
 									onStageRunQuery={(): void => {
 										handleRunQuery();
 									}}
+									isLoadingQueries={response.isFetching}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							</>
 						)}
@@ -386,23 +409,27 @@ function FullView({
 									}}
 								/>
 							)}
-							<PanelWrapper
-								panelMode={PanelMode.STANDALONE_VIEW}
-								queryResponse={response}
-								widget={widget}
-								setRequestData={setRequestData}
-								isFullViewMode
-								onToggleModelHandler={onToggleModelHandler}
-								setGraphVisibility={setGraphsVisibilityStates}
-								graphVisibility={graphsVisibilityStates}
-								onDragSelect={customOnDragSelect ?? onDragSelect}
-								tableProcessedDataRef={tableProcessedDataRef}
-								searchTerm={searchTerm}
-								onClickHandler={onClickHandler}
-								enableDrillDown={enableDrillDown}
-								selectedGraph={selectedPanelType}
-								onColumnWidthsChange={onColumnWidthsChange}
-							/>
+							{isCancelled ? (
+								<QueryCancelledPlaceholder subText='Click "Run Query" to reload the widget.' />
+							) : (
+								<PanelWrapper
+									panelMode={PanelMode.STANDALONE_VIEW}
+									queryResponse={response}
+									widget={widget}
+									setRequestData={setRequestData}
+									isFullViewMode
+									onToggleModelHandler={onToggleModelHandler}
+									setGraphVisibility={setGraphsVisibilityStates}
+									graphVisibility={graphsVisibilityStates}
+									onDragSelect={customOnDragSelect ?? onDragSelect}
+									tableProcessedDataRef={tableProcessedDataRef}
+									searchTerm={searchTerm}
+									onClickHandler={onClickHandler}
+									enableDrillDown={enableDrillDown}
+									selectedGraph={selectedPanelType}
+									onColumnWidthsChange={onColumnWidthsChange}
+								/>
+							)}
 						</GraphContainer>
 					</div>
 				</>

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,6 +8,7 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -37,6 +39,20 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+		setIsCancelled(true);
+	}, [queryClient]);
 
 	const [showQuickFilters, setShowQuickFilters] = useState(true);
 
@@ -155,7 +171,11 @@ function Explorer(): JSX.Element {
 
 							<div className="explore-header-right-actions">
 								<DateTimeSelector showAutoRefresh />
-								<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+								<RightToolbarActions
+									onStageRunQuery={(): void => handleRunQuery()}
+									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
+								/>
 							</div>
 						</div>
 						<QueryBuilderV2
@@ -171,7 +191,10 @@ function Explorer(): JSX.Element {
 						/>
 
 						<div className="explore-content">
-							<TimeSeries />
+							<TimeSeries
+								onFetchingStateChange={setIsLoadingQueries}
+								isCancelled={isCancelled}
+							/>
 						</div>
 					</div>
 					<ExplorerOptionWrapper

frontend/src/container/MeterExplorer/Explorer/QuerySection.tsx

@@ -1,43 +0,0 @@
-import { Button } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { QueryBuilder } from 'container/QueryBuilder';
-import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
-import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { MeterExplorerEventKeys, MeterExplorerEvents } from '../events';
-
-function QuerySection(): JSX.Element {
-	const { handleRunQuery } = useQueryBuilder();
-
-	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
-
-	return (
-		<div className="query-section">
-			<QueryBuilder
-				panelType={panelTypes}
-				config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
-				version="v4"
-				actions={
-					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
-								handleRunQuery();
-								logEvent(MeterExplorerEvents.QueryBuilderQueryChanged, {
-									[MeterExplorerEventKeys.Tab]: 'explorer',
-								});
-							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
-					</ButtonWrapper>
-				}
-			/>
-		</div>
-	);
-}
-
-export default QuerySection;

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -1,10 +1,12 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { isAxiosError } from 'axios';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
@@ -21,7 +23,15 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-function TimeSeries(): JSX.Element {
+interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
+	isCancelled?: boolean;
+}
+
+function TimeSeries({
+	onFetchingStateChange,
+	isCancelled = false,
+}: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
@@ -67,7 +77,11 @@ function TimeSeries(): JSX.Element {
 				minTime,
 				index,
 			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -79,9 +93,15 @@ function TimeSeries(): JSX.Element {
 						},
 					},
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -94,7 +114,7 @@ function TimeSeries(): JSX.Element {
 					return false;
 				}
 
-				return failureCount < 3;
+				return failureCount < MAX_QUERY_RETRIES;
 			},
 			onError: (error: APIError): void => {
 				showErrorModal(error);
@@ -102,6 +122,11 @@ function TimeSeries(): JSX.Element {
 		})),
 	);
 
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
 
 	const responseData = useMemo(
@@ -122,7 +147,11 @@ function TimeSeries(): JSX.Element {
 			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
-				{hasMetricSelected &&
+				{isCancelled && hasMetricSelected && (
+					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
+				)}
+				{!isCancelled &&
+					hasMetricSelected &&
 					responseData.map((datapoint, index) => (
 						<div
 							className="time-series-view-panel"

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Switch, Tooltip } from 'antd';
@@ -6,6 +7,7 @@ import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
@@ -54,6 +56,21 @@ function Explorer(): JSX.Element {
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
 
+	const queryClient = useQueryClient();
+	const [isLoadingQueries, setIsLoadingQueries] = useState(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const metricNames = useMemo(() => {
 		const currentMetricNames: string[] = [];
 		stagedQuery?.builder.queryData.forEach((query) => {
@@ -307,7 +324,11 @@ function Explorer(): JSX.Element {
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
 						<DateTimeSelector showAutoRefresh />
-						<RightToolbarActions onStageRunQuery={(): void => handleRunQuery()} />
+						<RightToolbarActions
+							onStageRunQuery={(): void => handleRunQuery()}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</div>
 				</div>
 				<QueryBuilderV2
@@ -319,6 +340,7 @@ function Explorer(): JSX.Element {
 				/>
 				<div className="explore-content">
 					<TimeSeries
+						onFetchingStateChange={setIsLoadingQueries}
 						showOneChartPerQuery={showOneChartPerQuery}
 						setWarning={setWarning}
 						areAllMetricUnitsSame={areAllMetricUnitsSame}
@@ -331,6 +353,7 @@ function Explorer(): JSX.Element {
 						yAxisUnit={yAxisUnit}
 						setYAxisUnit={setYAxisUnit}
 						showYAxisUnitSelector={showYAxisUnitSelector}
+						isCancelled={isCancelled}
 					/>
 				</div>
 			</div>

frontend/src/container/MetricsExplorer/Explorer/QuerySection.tsx

@@ -1,7 +1,10 @@
-import { Button } from 'antd';
+import { useCallback } from 'react';
+import { useIsFetching, useQueryClient } from 'react-query';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { QueryBuilder } from 'container/QueryBuilder';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import { ButtonWrapper } from 'container/TracesExplorer/QuerySection/styles';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -11,9 +14,16 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 
 function QuerySection(): JSX.Element {
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
 
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.TIME_SERIES);
 
+	const isLoadingQueries = useIsFetching([REACT_QUERY_KEY.GET_QUERY_RANGE]) > 0;
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries([REACT_QUERY_KEY.GET_QUERY_RANGE]);
+	}, [queryClient]);
+
 	return (
 		<div className="query-section">
 			<QueryBuilder
@@ -22,17 +32,16 @@ function QuerySection(): JSX.Element {
 				version="v4"
 				actions={
 					<ButtonWrapper>
-						<Button
-							onClick={(): void => {
+						<RunQueryBtn
+							onStageRunQuery={(): void => {
 								handleRunQuery();
 								logEvent(MetricsExplorerEvents.QueryBuilderQueryChanged, {
 									[MetricsExplorerEventKeys.Tab]: 'explorer',
 								});
 							}}
-							type="primary"
-						>
-							Run Query
-						</Button>
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
+						/>
 					</ButtonWrapper>
 				}
 			/>

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useQueries, useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,10 +11,12 @@ import {
 } from 'api/generated/services/metrics';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
@@ -36,6 +38,7 @@ import {
 } from './utils';
 
 function TimeSeries({
+	onFetchingStateChange,
 	showOneChartPerQuery,
 	setWarning,
 	isMetricUnitsLoading,
@@ -46,6 +49,7 @@ function TimeSeries({
 	setYAxisUnit,
 	showYAxisUnitSelector,
 	metrics,
+	isCancelled = false,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -98,7 +102,11 @@ function TimeSeries({
 				minTime,
 				index,
 			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+			queryFn: ({
+				signal,
+			}: {
+				signal?: AbortSignal;
+			}): Promise<SuccessResponse<MetricRangePayloadProps>> =>
 				GetMetricQueryRange(
 					{
 						query: payload,
@@ -111,9 +119,15 @@ function TimeSeries({
 					},
 					// ENTITY_VERSION_V4,
 					ENTITY_VERSION_V5,
+					undefined,
+					signal,
 				),
 			enabled: !!payload,
-			retry: (failureCount: number, error: Error): boolean => {
+			retry: (failureCount: number, error: unknown): boolean => {
+				if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+					return false;
+				}
+
 				let status: number | undefined;
 
 				if (error instanceof APIError) {
@@ -126,11 +140,16 @@ function TimeSeries({
 					return false;
 				}
 
-				return failureCount < 3;
+				return failureCount < MAX_QUERY_RETRIES;
 			},
 		})),
 	);
 
+	const isFetching = queries.some((q) => q.isFetching);
+	useEffect(() => {
+		onFetchingStateChange?.(isFetching);
+	}, [isFetching, onFetchingStateChange]);
+
 	const data = useMemo(() => queries.map(({ data }) => data) ?? [], [queries]);
 
 	const responseData = useMemo(
@@ -231,7 +250,11 @@ function TimeSeries({
 				})}
 			>
 				{metricNames.length === 0 && <EmptyMetricsSearch />}
-				{metricNames.length > 0 &&
+				{isCancelled && metricNames.length > 0 && (
+					<QueryCancelledPlaceholder subText='Click "Run Query" to load metrics.' />
+				)}
+				{!isCancelled &&
+					metricNames.length > 0 &&
 					responseData.map((datapoint, index) => {
 						const isQueryDataItem = index < metricNames.length;
 						const metricName = isQueryDataItem ? metricNames[index] : undefined;

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -3,6 +3,7 @@ import { MetricsexplorertypesMetricMetadataDTO } from 'api/generated/services/si
 import { Warning } from 'types/api';
 
 export interface TimeSeriesProps {
+	onFetchingStateChange?: (isFetching: boolean) => void;
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
 	areAllMetricUnitsSame: boolean;
@@ -15,4 +16,5 @@ export interface TimeSeriesProps {
 	yAxisUnit: string | undefined;
 	setYAxisUnit: (unit: string) => void;
 	showYAxisUnitSelector: boolean;
+	isCancelled?: boolean;
 }

frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss

@@ -4,9 +4,25 @@
 
 	.inspect-metrics-fallback {
 		display: flex;
-		align-items: center;
-		justify-content: center;
+		flex-direction: column;
+		gap: 32px;
 		height: 100%;
+
+		.inspect-metrics-fallback-header-placeholder {
+			// Reserve the same vertical space the GraphView header occupies
+			// (antd middle button height) so swapping chart ↔ fallback causes
+			// no layout shift.
+			height: 32px;
+			flex-shrink: 0;
+		}
+
+		.inspect-metrics-fallback-body {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-height: 520px;
+		}
 	}
 
 	.inspect-metrics-title {

frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx

@@ -1,9 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Drawer, Empty, Skeleton, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -109,6 +112,28 @@ function Inspect({
 		reset,
 	} = useInspectMetrics(appliedMetricName);
 
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	// Auto-reset isCancelled only on the rising edge of a new fetch
+	// (transition from not-loading → loading). Watching `isLoading` directly
+	// races with the cancel flow — when the user cancels mid-fetch, loading
+	// is still true in the render right after setIsCancelled(true), which
+	// would immediately reset it.
+	const wasLoadingRef = useRef(false);
+	useEffect(() => {
+		const nowLoading = isInspectMetricsLoading || isInspectMetricsRefetching;
+		if (!wasLoadingRef.current && nowLoading) {
+			setIsCancelled(false);
+		}
+		wasLoadingRef.current = nowLoading;
+	}, [isInspectMetricsLoading, isInspectMetricsRefetching]);
+
+	const queryClient = useQueryClient();
+	const handleCancelInspectQuery = useCallback(() => {
+		queryClient.cancelQueries(REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS);
+		setIsCancelled(true);
+	}, [queryClient]);
+
 	const handleDispatchMetricInspectionOptions = useCallback(
 		(action: MetricInspectionAction): void => {
 			dispatchMetricInspectionOptions(action);
@@ -167,96 +192,66 @@ function Inspect({
 		setExpandedViewOptions(null);
 	}, [inspectionStep]);
 
-	const content = useMemo(() => {
-		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
-			return (
-				<div
-					data-testid="inspect-metrics-loading"
-					className="inspect-metrics-fallback"
-				>
-					<Skeleton active />
-				</div>
+	const chartArea = useMemo(() => {
+		const renderFallback = (testId: string, body: JSX.Element): JSX.Element => (
+			<div data-testid={testId} className="inspect-metrics-fallback">
+				<div className="inspect-metrics-fallback-header-placeholder" />
+				<div className="inspect-metrics-fallback-body">{body}</div>
+			</div>
+		);
+
+		// Cancelled state takes precedence over any react-query state — ensures
+		// the placeholder shows immediately on cancel, regardless of whether
+		// isLoading/isRefetching has settled yet.
+		if (isCancelled) {
+			return renderFallback(
+				'inspect-metrics-cancelled',
+				<QueryCancelledPlaceholder subText='Click "Run Query" to see inspect results.' />,
 			);
 		}
 
-		if (isInspectMetricsError) {
-			const errorMessage = 'Error loading inspect metrics.';
+		if (isInspectMetricsLoading && !isInspectMetricsRefetching) {
+			return renderFallback('inspect-metrics-loading', <Skeleton active />);
+		}
 
-			return (
-				<div
-					data-testid="inspect-metrics-error"
-					className="inspect-metrics-fallback"
-				>
-					<Empty description={errorMessage} />
-				</div>
+		if (isInspectMetricsError) {
+			return renderFallback(
+				'inspect-metrics-error',
+				<Empty description="Error loading inspect metrics." />,
 			);
 		}
 
 		if (!inspectMetricsTimeSeries.length) {
-			return (
-				<div
-					data-testid="inspect-metrics-empty"
-					className="inspect-metrics-fallback"
-				>
-					<Empty description="No time series found for this metric to inspect." />
-				</div>
+			return renderFallback(
+				'inspect-metrics-empty',
+				<Empty description="No time series found for this metric to inspect." />,
 			);
 		}
 
 		return (
-			<div className="inspect-metrics-content">
-				<div className="inspect-metrics-content-first-col">
-					<GraphView
-						inspectMetricsTimeSeries={aggregatedTimeSeries}
-						formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
-						resetInspection={resetInspection}
-						metricName={appliedMetricName}
-						metricUnit={selectedMetricUnit}
-						metricType={selectedMetricType}
-						spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-						inspectionStep={inspectionStep}
-						setPopoverOptions={setPopoverOptions}
-						setShowExpandedView={setShowExpandedView}
-						showExpandedView={showExpandedView}
-						setExpandedViewOptions={setExpandedViewOptions}
-						popoverOptions={popoverOptions}
-						metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-						isInspectMetricsRefetching={isInspectMetricsRefetching}
-					/>
-					<QueryBuilder
-						currentMetricName={currentMetricName}
-						setCurrentMetricName={setCurrentMetricName}
-						setAppliedMetricName={setAppliedMetricName}
-						spaceAggregationLabels={spaceAggregationLabels}
-						currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
-						dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
-						inspectionStep={inspectionStep}
-						inspectMetricsTimeSeries={inspectMetricsTimeSeries}
-						currentQuery={currentQueryData}
-						setCurrentQuery={setCurrentQueryData}
-					/>
-				</div>
-				<div className="inspect-metrics-content-second-col">
-					<Stepper
-						inspectionStep={inspectionStep}
-						resetInspection={resetInspection}
-					/>
-					{showExpandedView && (
-						<ExpandedView
-							options={expandedViewOptions}
-							spaceAggregationSeriesMap={spaceAggregationSeriesMap}
-							step={inspectionStep}
-							metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
-							timeAggregatedSeriesMap={timeAggregatedSeriesMap}
-						/>
-					)}
-				</div>
-			</div>
+			<GraphView
+				inspectMetricsTimeSeries={aggregatedTimeSeries}
+				formattedInspectMetricsTimeSeries={formattedInspectMetricsTimeSeries}
+				resetInspection={resetInspection}
+				metricName={appliedMetricName}
+				metricUnit={selectedMetricUnit}
+				metricType={selectedMetricType}
+				spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+				inspectionStep={inspectionStep}
+				setPopoverOptions={setPopoverOptions}
+				setShowExpandedView={setShowExpandedView}
+				showExpandedView={showExpandedView}
+				setExpandedViewOptions={setExpandedViewOptions}
+				popoverOptions={popoverOptions}
+				metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+				isInspectMetricsRefetching={isInspectMetricsRefetching}
+			/>
 		);
 	}, [
 		isInspectMetricsLoading,
 		isInspectMetricsRefetching,
 		isInspectMetricsError,
+		isCancelled,
 		inspectMetricsTimeSeries,
 		aggregatedTimeSeries,
 		formattedInspectMetricsTimeSeries,
@@ -312,7 +307,46 @@ function Inspect({
 				className="inspect-metrics-modal"
 				destroyOnClose
 			>
-				{content}
+				<div className="inspect-metrics-content">
+					<div className="inspect-metrics-content-first-col">
+						{chartArea}
+						<QueryBuilder
+							currentMetricName={currentMetricName}
+							setCurrentMetricName={setCurrentMetricName}
+							setAppliedMetricName={setAppliedMetricName}
+							spaceAggregationLabels={spaceAggregationLabels}
+							currentMetricInspectionOptions={metricInspectionOptions.currentOptions}
+							dispatchMetricInspectionOptions={handleDispatchMetricInspectionOptions}
+							inspectionStep={inspectionStep}
+							inspectMetricsTimeSeries={inspectMetricsTimeSeries}
+							currentQuery={currentQueryData}
+							setCurrentQuery={setCurrentQueryData}
+							isLoadingQueries={isInspectMetricsLoading || isInspectMetricsRefetching}
+							handleCancelQuery={handleCancelInspectQuery}
+							onRunQuery={(): void => {
+								setIsCancelled(false);
+								queryClient.invalidateQueries([
+									REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
+								]);
+							}}
+						/>
+					</div>
+					<div className="inspect-metrics-content-second-col">
+						<Stepper
+							inspectionStep={inspectionStep}
+							resetInspection={resetInspection}
+						/>
+						{showExpandedView && (
+							<ExpandedView
+								options={expandedViewOptions}
+								spaceAggregationSeriesMap={spaceAggregationSeriesMap}
+								step={inspectionStep}
+								metricInspectionAppliedOptions={metricInspectionOptions.appliedOptions}
+								timeAggregatedSeriesMap={timeAggregatedSeriesMap}
+							/>
+						)}
+					</div>
+				</div>
 			</Drawer>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/container/MetricsExplorer/Inspect/QueryBuilder.tsx

@@ -20,13 +20,22 @@ function QueryBuilder({
 	inspectMetricsTimeSeries,
 	currentQuery,
 	setCurrentQuery,
+	isLoadingQueries,
+	handleCancelQuery,
+	onRunQuery,
 }: QueryBuilderProps): JSX.Element {
 	const applyInspectionOptions = useCallback(() => {
+		onRunQuery?.();
 		setAppliedMetricName(currentMetricName ?? '');
 		dispatchMetricInspectionOptions({
 			type: 'APPLY_METRIC_INSPECTION_OPTIONS',
 		});
-	}, [currentMetricName, setAppliedMetricName, dispatchMetricInspectionOptions]);
+	}, [
+		currentMetricName,
+		setAppliedMetricName,
+		dispatchMetricInspectionOptions,
+		onRunQuery,
+	]);
 
 	return (
 		<div className="inspect-metrics-query-builder">
@@ -39,7 +48,11 @@ function QueryBuilder({
 				>
 					Query Builder
 				</Button>
-				<RunQueryBtn onStageRunQuery={applyInspectionOptions} />
+				<RunQueryBtn
+					onStageRunQuery={applyInspectionOptions}
+					handleCancelQuery={handleCancelQuery}
+					isLoadingQueries={isLoadingQueries}
+				/>
 			</div>
 			<Card className="inspect-metrics-query-builder-content">
 				<MetricNameSearch

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -103,6 +103,8 @@ describe('QueryBuilder', () => {
 			filterExpression: '',
 		} as any,
 		setCurrentQuery: jest.fn(),
+		isLoadingQueries: false,
+		handleCancelQuery: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/MetricsExplorer/Inspect/types.ts

@@ -65,6 +65,9 @@ export interface QueryBuilderProps {
 	inspectMetricsTimeSeries: InspectMetricsSeries[];
 	currentQuery: IBuilderQuery;
 	setCurrentQuery: (query: IBuilderQuery) => void;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery?: () => void;
 }
 
 export interface MetricNameSearchProps {

frontend/src/container/MetricsExplorer/Inspect/useInspectMetrics.ts

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { useQuery } from 'react-query';
 import { inspectMetrics } from 'api/generated/services/metrics';
+import { isAxiosError } from 'axios';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -107,7 +110,7 @@ export function useInspectMetrics(
 		isRefetching: isInspectMetricsRefetching,
 	} = useQuery({
 		queryKey: [
-			'inspectMetrics',
+			REACT_QUERY_KEY.GET_INSPECT_METRICS_DETAILS,
 			metricName,
 			start,
 			end,
@@ -127,6 +130,12 @@ export function useInspectMetrics(
 			),
 		enabled: !!metricName,
 		keepPreviousData: true,
+		retry: (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+			return failureCount < MAX_QUERY_RETRIES;
+		},
 	});
 
 	const inspectMetricsData = useMemo(

frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx

@@ -12,6 +12,8 @@ function MetricsSearch({
 	currentQueryFilterExpression,
 	setCurrentQueryFilterExpression,
 	isLoading,
+	handleCancelQuery,
+	onRunQuery,
 }: MetricsSearchProps): JSX.Element {
 	const handleOnChange = useCallback(
 		(expression: string): void => {
@@ -22,7 +24,8 @@ function MetricsSearch({
 
 	const handleStageAndRunQuery = useCallback(() => {
 		onChange(currentQueryFilterExpression);
-	}, [currentQueryFilterExpression, onChange]);
+		onRunQuery?.();
+	}, [currentQueryFilterExpression, onChange, onRunQuery]);
 
 	const handleRunQuery = useCallback(
 		(expression: string): void => {
@@ -53,6 +56,7 @@ function MetricsSearch({
 			<RunQueryBtn
 				onStageRunQuery={handleStageAndRunQuery}
 				isLoadingQueries={isLoading}
+				handleCancelQuery={handleCancelQuery}
 			/>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -17,6 +18,7 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
@@ -104,6 +106,8 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(appliedFilterExpression);
 
+	const [isCancelled, setIsCancelled] = useState<boolean>(false);
+
 	useEffect(() => {
 		setCurrentQueryFilterExpression(appliedFilterExpression);
 	}, [appliedFilterExpression]);
@@ -164,6 +168,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsStatsLoading,
 		isError: isGetMetricsStatsError,
 		error: metricsStatsError,
+		reset: resetMetricsStats,
 	} = useGetMetricsStats();
 
 	const {
@@ -172,6 +177,7 @@ function Summary(): JSX.Element {
 		isLoading: isGetMetricsTreemapLoading,
 		isError: isGetMetricsTreemapError,
 		error: metricsTreemapError,
+		reset: resetMetricsTreemap,
 	} = useGetMetricsTreemap();
 
 	const metricsStatsApiError = useMemo(
@@ -196,6 +202,40 @@ function Summary(): JSX.Element {
 		});
 	}, [metricsTreemapQuery, getMetricsTreemap]);
 
+	const handleCancelQuery = useCallback(() => {
+		resetMetricsStats();
+		resetMetricsTreemap();
+		setCurrentQueryFilterExpression(appliedFilterExpression);
+		setIsCancelled(true);
+	}, [
+		resetMetricsStats,
+		resetMetricsTreemap,
+		setCurrentQueryFilterExpression,
+		appliedFilterExpression,
+	]);
+
+	const handleRunQuery = useCallback(() => {
+		setIsCancelled(false);
+		getMetricsStats({
+			data: {
+				...metricsListQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+		getMetricsTreemap({
+			data: {
+				...metricsTreemapQuery,
+				filter: { expression: currentQueryFilterExpression },
+			},
+		});
+	}, [
+		getMetricsStats,
+		getMetricsTreemap,
+		metricsListQuery,
+		metricsTreemapQuery,
+		currentQueryFilterExpression,
+	]);
+
 	const handleFilterChange = useCallback(
 		(expression: string) => {
 			const newFilters: TagFilter = {
@@ -330,11 +370,19 @@ function Summary(): JSX.Element {
 		!isGetMetricsTreemapLoading &&
 		!isGetMetricsTreemapError;
 
+	const isLoadingQueries =
+		isGetMetricsStatsLoading || isGetMetricsTreemapLoading;
+
 	const showFullScreenLoading =
-		(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
+		isLoadingQueries &&
 		formattedMetricsData.length === 0 &&
 		!treeMapData?.data[heatmapView]?.length;
 
+	const showNoMetrics =
+		isMetricsListDataEmpty &&
+		isMetricsTreeMapDataEmpty &&
+		!appliedFilterExpression;
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -343,13 +391,26 @@ function Summary(): JSX.Element {
 					onChange={handleFilterChange}
 					currentQueryFilterExpression={currentQueryFilterExpression}
 					setCurrentQueryFilterExpression={setCurrentQueryFilterExpression}
-					isLoading={isGetMetricsStatsLoading || isGetMetricsTreemapLoading}
+					isLoading={isLoadingQueries}
+					handleCancelQuery={handleCancelQuery}
+					onRunQuery={handleRunQuery}
 				/>
 				{showFullScreenLoading ? (
 					<MetricsLoading />
-				) : isMetricsListDataEmpty &&
-				  isMetricsTreeMapDataEmpty &&
-				  !appliedFilterExpression ? (
+				) : isCancelled ? (
+					<div className="no-logs-container">
+						<div className="no-logs-container-content">
+							<img className="eyes-emoji" src={eyesEmojiUrl} alt="eyes emoji" />
+							<Typography className="no-logs-text">
+								Query cancelled.
+								<span className="sub-text">
+									{' '}
+									Click &quot;Run Query&quot; to load metrics.
+								</span>
+							</Typography>
+						</div>
+					</div>
+				) : showNoMetrics ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -33,6 +33,8 @@ export interface MetricsSearchProps {
 	currentQueryFilterExpression: string;
 	setCurrentQueryFilterExpression: (expression: string) => void;
 	isLoading: boolean;
+	handleCancelQuery: () => void;
+	onRunQuery: () => void;
 }
 
 export interface MetricsTreemapProps {

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { QueryKey } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -25,8 +24,8 @@ import PromQLQueryContainer from './QueryBuilder/promQL';
 import './QuerySection.styles.scss';
 function QuerySection({
 	selectedGraph,
-	queryRangeKey,
 	isLoadingQueries,
+	handleCancelQuery,
 	selectedWidget,
 	dashboardVersion,
 	dashboardId,
@@ -179,7 +178,7 @@ function QuerySection({
 							label="Stage & Run Query"
 							onStageRunQuery={handleRunQuery}
 							isLoadingQueries={isLoadingQueries}
-							queryRangeKey={queryRangeKey}
+							handleCancelQuery={handleCancelQuery}
 						/>
 					</span>
 				}
@@ -191,8 +190,8 @@ function QuerySection({
 
 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
-	queryRangeKey?: QueryKey;
-	isLoadingQueries?: boolean;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	selectedWidget: Widgets;
 	dashboardVersion?: string;
 	dashboardId?: string;

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { Card } from 'container/GridCardLayout/styles';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -22,6 +23,7 @@ function WidgetGraph({
 	selectedWidget,
 	isLoadingPanelData,
 	enableDrillDown = false,
+	isCancelled = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 
@@ -46,20 +48,24 @@ function WidgetGraph({
 				</div>
 				<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 			</div>
-			{queryResponse.error && (
+			{!isCancelled && queryResponse.error && (
 				<AlertIconContainer color="red" title={queryResponse.error.message}>
 					<InfoCircleOutlined />
 				</AlertIconContainer>
 			)}
 
-			<WidgetGraphComponent
-				isLoadingPanelData={isLoadingPanelData}
-				selectedGraph={selectedGraph}
-				queryResponse={queryResponse}
-				setRequestData={setRequestData}
-				selectedWidget={selectedWidget}
-				enableDrillDown={enableDrillDown}
-			/>
+			{isCancelled ? (
+				<QueryCancelledPlaceholder subText='Click "Run Query" to reload the chart.' />
+			) : (
+				<WidgetGraphComponent
+					isLoadingPanelData={isLoadingPanelData}
+					selectedGraph={selectedGraph}
+					queryResponse={queryResponse}
+					setRequestData={setRequestData}
+					selectedWidget={selectedWidget}
+					enableDrillDown={enableDrillDown}
+				/>
+			)}
 		</Container>
 	);
 }

frontend/src/container/NewWidget/LeftContainer/index.tsx

@@ -1,5 +1,5 @@
-import { memo, useEffect } from 'react';
-import { useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -34,6 +34,7 @@ function LeftContainer({
 	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
 
 	const { selectedTime: globalSelectedInterval, minTime, maxTime } = useSelector<
 		AppState,
@@ -49,12 +50,25 @@ function LeftContainer({
 		],
 		[globalSelectedInterval, requestData, minTime, maxTime],
 	);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(queryRangeKey);
+		setIsCancelled(true);
+	}, [queryClient, queryRangeKey]);
+
 	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
 		enabled: !!stagedQuery,
 		queryKey: queryRangeKey,
 		keepPreviousData: true,
 	});
 
+	useEffect(() => {
+		if (queryResponse.isFetching) {
+			setIsCancelled(false);
+		}
+	}, [queryResponse.isFetching]);
+
 	// Update parent component with query response for legend colors
 	useEffect(() => {
 		if (setQueryResponse) {
@@ -71,12 +85,13 @@ function LeftContainer({
 				selectedWidget={selectedWidget}
 				isLoadingPanelData={isLoadingPanelData}
 				enableDrillDown={enableDrillDown}
+				isCancelled={isCancelled}
 			/>
 			<QueryContainer className="query-section-left-container">
 				<QuerySection
 					selectedGraph={selectedGraph}
-					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
+					handleCancelQuery={handleCancelQuery}
 					selectedWidget={selectedWidget}
 					dashboardVersion={ENTITY_VERSION_V5}
 					dashboardId={dashboardData?.id}

frontend/src/container/NewWidget/types.ts

@@ -50,4 +50,5 @@ export type WidgetGraphContainerProps = {
 	selectedWidget: Widgets;
 	isLoadingPanelData: boolean;
 	enableDrillDown?: boolean;
+	isCancelled?: boolean;
 };

frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx

@@ -1,5 +1,3 @@
-import { useCallback } from 'react';
-import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from '@signozhq/ui';
 import cx from 'classnames';
 import {
@@ -12,14 +10,23 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 
 import './RunQueryBtn.scss';
-interface RunQueryBtnProps {
+
+type RunQueryBtnProps = {
 	className?: string;
 	label?: string;
-	isLoadingQueries?: boolean;
-	handleCancelQuery?: () => void;
-	onStageRunQuery?: () => void;
-	queryRangeKey?: QueryKey;
-}
+	disabled?: boolean;
+} & (
+	| {
+			onStageRunQuery: () => void;
+			handleCancelQuery: () => void;
+			isLoadingQueries: boolean;
+	  }
+	| {
+			onStageRunQuery?: never;
+			handleCancelQuery?: never;
+			isLoadingQueries?: never;
+	  }
+);
 
 function RunQueryBtn({
 	className,
@@ -27,26 +34,10 @@ function RunQueryBtn({
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
-	queryRangeKey,
+	disabled,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	const queryClient = useQueryClient();
-	const isKeyFetchingCount = useIsFetching(
-		queryRangeKey as QueryKey | undefined,
-	);
-	const isLoading =
-		typeof isLoadingQueries === 'boolean'
-			? isLoadingQueries
-			: isKeyFetchingCount > 0;
-
-	const onCancel = useCallback(() => {
-		if (handleCancelQuery) {
-			return handleCancelQuery();
-		}
-		if (queryRangeKey) {
-			queryClient.cancelQueries(queryRangeKey);
-		}
-	}, [handleCancelQuery, queryClient, queryRangeKey]);
+	const isLoading = isLoadingQueries ?? false;
 
 	return isLoading ? (
 		<Button
@@ -54,7 +45,7 @@ function RunQueryBtn({
 			type="button"
 			prefix={<Loader2 size={14} className="loading-icon animate-spin" />}
 			className={cx('cancel-query-btn', className)}
-			onClick={onCancel}
+			onClick={handleCancelQuery}
 		>
 			Cancel
 		</Button>
@@ -63,7 +54,7 @@ function RunQueryBtn({
 			color="primary"
 			type="button"
 			className={cx('run-query-btn', className)}
-			disabled={isLoading || !onStageRunQuery}
+			disabled={disabled}
 			onClick={onStageRunQuery}
 			prefix={<Play size={14} />}
 		>

frontend/src/container/QueryBuilder/components/RunQueryBtn/__test__/RunQueryBtn.test.tsx

@@ -1,18 +1,8 @@
-// frontend/src/container/QueryBuilder/components/RunQueryBtn/__tests__/RunQueryBtn.test.tsx
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import RunQueryBtn from '../RunQueryBtn';
 
-jest.mock('react-query', () => {
-	const actual = jest.requireActual('react-query');
-	return {
-		...actual,
-		useIsFetching: jest.fn(),
-		useQueryClient: jest.fn(),
-	};
-});
-import { useIsFetching, useQueryClient } from 'react-query';
-
 // Mock OS util
 jest.mock('utils/getUserOS', () => ({
 	getUserOperatingSystem: jest.fn(),
@@ -26,79 +16,60 @@ describe('RunQueryBtn', () => {
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		(useQueryClient as jest.Mock).mockReturnValue({
-			cancelQueries: jest.fn(),
-		});
 	});
 
-	test('uses isLoadingQueries prop over useIsFetching', () => {
-		// Simulate fetching but prop forces not loading
-		(useIsFetching as jest.Mock).mockReturnValue(1);
+	test('renders run state and triggers on click', async () => {
+		const user = userEvent.setup();
 		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} isLoadingQueries={false} />);
-		// Should show "Run Query" (not cancel)
-		const runBtn = screen.getByRole('button', { name: /run query/i });
-		expect(runBtn).toBeInTheDocument();
-		expect(runBtn).toBeEnabled();
-	});
-
-	test('fallback cancel: uses handleCancelQuery when no key provided', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(0);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
-
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
-
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancelBtn);
-		expect(onCancel).toHaveBeenCalledTimes(1);
-		expect(cancelQueries).not.toHaveBeenCalled();
-	});
-
-	test('renders run state and triggers on click', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries={false}
+			/>,
+		);
 		const btn = screen.getByRole('button', { name: /run query/i });
 		expect(btn).toBeEnabled();
-		fireEvent.click(btn);
+		await user.click(btn);
 		expect(onRun).toHaveBeenCalledTimes(1);
 	});
 
-	test('disabled when onStageRunQuery is undefined', () => {
-		render(<RunQueryBtn />);
-		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
-	});
-
-	test('shows cancel state and calls handleCancelQuery', () => {
+	test('shows cancel state and calls handleCancelQuery', async () => {
+		const user = userEvent.setup();
+		const onRun = jest.fn();
 		const onCancel = jest.fn();
-		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={onRun}
+				handleCancelQuery={onCancel}
+				isLoadingQueries
+			/>,
+		);
 		const cancel = screen.getByRole('button', { name: /cancel/i });
-		fireEvent.click(cancel);
+		await user.click(cancel);
 		expect(onCancel).toHaveBeenCalledTimes(1);
 	});
 
-	test('derives loading from queryKey via useIsFetching and cancels via queryClient', () => {
-		(useIsFetching as jest.Mock).mockReturnValue(1);
-		const cancelQueries = jest.fn();
-		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+	test('disabled when disabled prop is true', () => {
+		render(<RunQueryBtn disabled />);
+		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
+	});
 
-		const queryKey = ['GET_QUERY_RANGE', '1h', { some: 'req' }, 1, 2];
-		render(<RunQueryBtn queryRangeKey={queryKey} />);
-
-		// Button switches to cancel state
-		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-		expect(cancelBtn).toBeInTheDocument();
-
-		// Clicking cancel calls cancelQueries with the key
-		fireEvent.click(cancelBtn);
-		expect(cancelQueries).toHaveBeenCalledWith(queryKey);
+	test('disabled when no props provided', () => {
+		render(<RunQueryBtn />);
+		expect(
+			screen.getByRole('button', { name: /run query/i }),
+		).toBeInTheDocument();
 	});
 
 	test('shows Command + CornerDownLeft on mac', () => {
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-command')).toBeInTheDocument();
 		expect(
@@ -111,7 +82,11 @@ describe('RunQueryBtn', () => {
 			UserOperatingSystem.WINDOWS,
 		);
 		const { container } = render(
-			<RunQueryBtn onStageRunQuery={(): void => {}} />,
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+			/>,
 		);
 		expect(container.querySelector('.lucide-chevron-up')).toBeInTheDocument();
 		expect(container.querySelector('.lucide-command')).not.toBeInTheDocument();
@@ -121,8 +96,14 @@ describe('RunQueryBtn', () => {
 	});
 
 	test('renders custom label when provided', () => {
-		const onRun = jest.fn();
-		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
+		render(
+			<RunQueryBtn
+				onStageRunQuery={jest.fn()}
+				handleCancelQuery={jest.fn()}
+				isLoadingQueries={false}
+				label="Stage & Run Query"
+			/>,
+		);
 		expect(
 			screen.getByRole('button', { name: /stage & run query/i }),
 		).toBeInTheDocument();

frontend/src/container/QueryBuilder/components/ToolbarActions/RightToolbarActions.tsx

@@ -1,5 +1,4 @@
-import { MutableRefObject, useEffect } from 'react';
-import { useQueryClient } from 'react-query';
+import { useEffect } from 'react';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 
@@ -9,23 +8,19 @@ import './ToolbarActions.styles.scss';
 
 interface RightToolbarActionsProps {
 	onStageRunQuery: () => void;
-	isLoadingQueries?: boolean;
-	listQueryKeyRef?: MutableRefObject<any>;
-	chartQueryKeyRef?: MutableRefObject<any>;
+	isLoadingQueries: boolean;
+	handleCancelQuery: () => void;
 	showLiveLogs?: boolean;
 }
 
 export default function RightToolbarActions({
 	onStageRunQuery,
 	isLoadingQueries,
-	listQueryKeyRef,
-	chartQueryKeyRef,
+	handleCancelQuery,
 	showLiveLogs,
 }: RightToolbarActionsProps): JSX.Element {
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
-	const queryClient = useQueryClient();
-
 	useEffect(() => {
 		if (showLiveLogs) {
 			return;
@@ -42,20 +37,11 @@ export default function RightToolbarActions({
 	if (showLiveLogs) {
 		return (
 			<div className="right-toolbar-actions-container">
-				<RunQueryBtn />
+				<RunQueryBtn disabled />
 			</div>
 		);
 	}
 
-	const handleCancelQuery = (): void => {
-		if (listQueryKeyRef?.current) {
-			queryClient.cancelQueries(listQueryKeyRef.current);
-		}
-		if (chartQueryKeyRef?.current) {
-			queryClient.cancelQueries(chartQueryKeyRef.current);
-		}
-	};
-
 	return (
 		<div className="right-toolbar-actions-container">
 			<RunQueryBtn
@@ -68,8 +54,5 @@ export default function RightToolbarActions({
 }
 
 RightToolbarActions.defaultProps = {
-	isLoadingQueries: false,
-	listQueryKeyRef: null,
-	chartQueryKeyRef: null,
 	showLiveLogs: false,
 };

frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx

@@ -92,7 +92,12 @@ describe('ToolbarActions', () => {
 		const onStageRunQuery = jest.fn();
 		const { queryByText } = render(
 			<MockQueryClientProvider>
-				<RightToolbarActions onStageRunQuery={onStageRunQuery} />,
+				<RightToolbarActions
+					onStageRunQuery={onStageRunQuery}
+					isLoadingQueries={false}
+					handleCancelQuery={jest.fn()}
+				/>
+				,
 			</MockQueryClientProvider>,
 		);
 

frontend/src/container/QueryTable/Drilldown/__tests__/useBaseDrilldownNavigate.test.ts

@@ -0,0 +1,282 @@
+import { renderHook } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from '../drilldownUtils';
+import { AggregateData } from '../useAggregateDrilldown';
+import useBaseDrilldownNavigate, {
+	buildDrilldownUrl,
+	getRoute,
+} from '../useBaseDrilldownNavigate';
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({ safeNavigate: mockSafeNavigate }),
+}));
+
+jest.mock('../drilldownUtils', () => ({
+	...jest.requireActual('../drilldownUtils'),
+	getViewQuery: jest.fn(),
+}));
+
+const mockGetViewQuery = getViewQuery as jest.Mock;
+
+// ─── Fixtures ────────────────────────────────────────────────────────────────
+
+const MOCK_QUERY: Query = {
+	id: 'q1',
+	queryType: 'builder' as any,
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'metrics' as any,
+				groupBy: [],
+				expression: '',
+				disabled: false,
+				functions: [],
+				legend: '',
+				having: [],
+				limit: null,
+				stepInterval: undefined,
+				orderBy: [],
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	promql: [],
+	clickhouse_sql: [],
+};
+
+const MOCK_VIEW_QUERY: Query = {
+	...MOCK_QUERY,
+	builder: {
+		...MOCK_QUERY.builder,
+		queryData: [
+			{
+				...MOCK_QUERY.builder.queryData[0],
+				filters: { items: [], op: 'AND' },
+			},
+		],
+	},
+};
+
+const MOCK_AGGREGATE_DATA: AggregateData = {
+	queryName: 'A',
+	filters: [{ filterKey: 'service_name', filterValue: 'auth', operator: '=' }],
+	timeRange: { startTime: 1000000, endTime: 2000000 },
+};
+
+// ─── getRoute ─────────────────────────────────────────────────────────────────
+
+describe('getRoute', () => {
+	it.each([
+		['view_logs', ROUTES.LOGS_EXPLORER],
+		['view_metrics', ROUTES.METRICS_EXPLORER],
+		['view_traces', ROUTES.TRACES_EXPLORER],
+	])('maps %s to the correct explorer route', (key, expected) => {
+		expect(getRoute(key)).toBe(expected);
+	});
+
+	it('returns empty string for an unknown key', () => {
+		expect(getRoute('view_dashboard')).toBe('');
+	});
+});
+
+// ─── buildDrilldownUrl ────────────────────────────────────────────────────────
+
+describe('buildDrilldownUrl', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns null for an unknown drilldown key', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_dashboard');
+		expect(url).toBeNull();
+	});
+
+	it('returns null when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toBeNull();
+	});
+
+	it('returns a URL starting with the logs explorer route for view_logs', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+	});
+
+	it('returns a URL starting with the traces explorer route for view_traces', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_traces');
+		expect(url).toContain(ROUTES.TRACES_EXPLORER);
+	});
+
+	it('includes compositeQuery param in the URL', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('includes startTime and endTime when aggregateData has a timeRange', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).toContain('startTime=1000000');
+		expect(url).toContain('endTime=2000000');
+	});
+
+	it('omits startTime and endTime when aggregateData has no timeRange', () => {
+		const { timeRange: _, ...withoutTimeRange } = MOCK_AGGREGATE_DATA;
+		const url = buildDrilldownUrl(MOCK_QUERY, withoutTimeRange, 'view_logs');
+		expect(url).not.toContain('startTime=');
+		expect(url).not.toContain('endTime=');
+	});
+
+	it('includes summaryFilters param for view_metrics', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_metrics');
+		expect(url).toContain(ROUTES.METRICS_EXPLORER);
+		expect(url).toContain('summaryFilters=');
+	});
+
+	it('does not include summaryFilters param for non-metrics routes', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(url).not.toContain('summaryFilters=');
+	});
+
+	it('handles null aggregateData by passing empty filters and empty queryName', () => {
+		const url = buildDrilldownUrl(MOCK_QUERY, null, 'view_logs');
+		expect(url).not.toBeNull();
+		expect(mockGetViewQuery).toHaveBeenCalledWith(MOCK_QUERY, [], 'view_logs', '');
+	});
+
+	it('passes aggregateData filters and queryName to getViewQuery', () => {
+		buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
+		expect(mockGetViewQuery).toHaveBeenCalledWith(
+			MOCK_QUERY,
+			MOCK_AGGREGATE_DATA.filters,
+			'view_logs',
+			MOCK_AGGREGATE_DATA.queryName,
+		);
+	});
+});
+
+// ─── useBaseDrilldownNavigate ─────────────────────────────────────────────────
+
+describe('useBaseDrilldownNavigate', () => {
+	beforeEach(() => {
+		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('calls safeNavigate with the built URL on a valid key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+		const [url] = mockSafeNavigate.mock.calls[0];
+		expect(url).toContain(ROUTES.LOGS_EXPLORER);
+		expect(url).toContain('compositeQuery=');
+	});
+
+	it('opens the explorer in a new tab', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_traces');
+
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.any(String),
+			{ newTab: true },
+		);
+	});
+
+	it('calls callback after successful navigation', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not call safeNavigate for an unknown key', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when the key is unknown', () => {
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_dashboard');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('still calls callback when getViewQuery returns null', () => {
+		mockGetViewQuery.mockReturnValue(null);
+		const callback = jest.fn();
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: MOCK_AGGREGATE_DATA,
+				callback,
+			}),
+		);
+
+		result.current('view_logs');
+
+		expect(callback).toHaveBeenCalledTimes(1);
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('handles null aggregateData without throwing', () => {
+		const { result } = renderHook(() =>
+			useBaseDrilldownNavigate({
+				resolvedQuery: MOCK_QUERY,
+				aggregateData: null,
+			}),
+		);
+
+		expect(() => result.current('view_logs')).not.toThrow();
+		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -166,7 +166,7 @@ export const getAggregateColumnHeader = (
 	};
 };
 
-const getFiltersFromMetric = (metric: any): FilterData[] =>
+export const getFiltersFromMetric = (metric: any): FilterData[] =>
 	Object.keys(metric).map((key) => ({
 		filterKey: key,
 		filterValue: metric[key],

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -2,14 +2,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
 import useContextVariables from 'hooks/dashboard/useContextVariables';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
@@ -17,9 +13,10 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
-import { getAggregateColumnHeader, getViewQuery } from './drilldownUtils';
+import { getAggregateColumnHeader } from './drilldownUtils';
 import { getBaseContextConfig } from './menuOptions';
 import { AggregateData } from './useAggregateDrilldown';
+import useBaseDrilldownNavigate from './useBaseDrilldownNavigate';
 
 interface UseBaseAggregateOptionsProps {
 	query: Query;
@@ -37,19 +34,6 @@ interface BaseAggregateOptionsConfig {
 	items?: ContextMenuItem;
 }
 
-const getRoute = (key: string): string => {
-	switch (key) {
-		case 'view_logs':
-			return ROUTES.LOGS_EXPLORER;
-		case 'view_metrics':
-			return ROUTES.METRICS_EXPLORER;
-		case 'view_traces':
-			return ROUTES.TRACES_EXPLORER;
-		default:
-			return '';
-	}
-};
-
 const useBaseAggregateOptions = ({
 	query,
 	onClose,
@@ -62,10 +46,8 @@ const useBaseAggregateOptions = ({
 	baseAggregateOptionsConfig: BaseAggregateOptionsConfig;
 } => {
 	const [resolvedQuery, setResolvedQuery] = useState<Query>(query);
-	const {
-		getUpdatedQuery,
-		isLoading: isResolveQueryLoading,
-	} = useUpdatedQuery();
+	const { getUpdatedQuery, isLoading: isResolveQueryLoading } =
+		useUpdatedQuery();
 	const { dashboardData } = useDashboardStore();
 
 	useEffect(() => {
@@ -87,8 +69,6 @@ const useBaseAggregateOptions = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query, aggregateData, panelType]);
 
-	const { safeNavigate } = useSafeNavigate();
-
 	// Use the new useContextVariables hook
 	const { processedVariables } = useContextVariables({
 		maxValues: 2,
@@ -122,50 +102,16 @@ const useBaseAggregateOptions = ({
 					{label}
 				</ContextMenu.Item>
 			));
-		} catch (error) {
+		} catch {
 			return [];
 		}
 	}, [contextLinks, processedVariables, onClose, aggregateData, query]);
 
-	const handleBaseDrilldown = useCallback(
-		(key: string): void => {
-			const route = getRoute(key);
-			const timeRange = aggregateData?.timeRange;
-			const filtersToAdd = aggregateData?.filters || [];
-			const viewQuery = getViewQuery(
-				resolvedQuery,
-				filtersToAdd,
-				key,
-				aggregateData?.queryName || '',
-			);
-
-			let queryParams = {
-				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-				...(timeRange && {
-					[QueryParams.startTime]: timeRange?.startTime.toString(),
-					[QueryParams.endTime]: timeRange?.endTime.toString(),
-				}),
-			} as Record<string, string>;
-
-			if (route === ROUTES.METRICS_EXPLORER) {
-				queryParams = {
-					...queryParams,
-					[QueryParams.summaryFilters]: JSON.stringify(
-						viewQuery?.builder.queryData[0].filters,
-					),
-				};
-			}
-
-			if (route) {
-				safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
-					newTab: true,
-				});
-			}
-
-			onClose();
-		},
-		[resolvedQuery, safeNavigate, onClose, aggregateData],
-	);
+	const handleBaseDrilldown = useBaseDrilldownNavigate({
+		resolvedQuery,
+		aggregateData,
+		callback: onClose,
+	});
 
 	const { pathname } = useLocation();
 

frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts

@@ -0,0 +1,117 @@
+import { useCallback } from 'react';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import createQueryParams from 'lib/createQueryParams';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getViewQuery } from './drilldownUtils';
+import { AggregateData } from './useAggregateDrilldown';
+
+type DrilldownKey = 'view_logs' | 'view_metrics' | 'view_traces';
+
+const DRILLDOWN_ROUTE_MAP: Record<DrilldownKey, string> = {
+	view_logs: ROUTES.LOGS_EXPLORER,
+	view_metrics: ROUTES.METRICS_EXPLORER,
+	view_traces: ROUTES.TRACES_EXPLORER,
+};
+
+const getRoute = (key: string): string =>
+	DRILLDOWN_ROUTE_MAP[key as DrilldownKey] ?? '';
+
+interface UseBaseDrilldownNavigateProps {
+	resolvedQuery: Query;
+	aggregateData: AggregateData | null;
+	callback?: () => void;
+}
+
+const useBaseDrilldownNavigate = ({
+	resolvedQuery,
+	aggregateData,
+	callback,
+}: UseBaseDrilldownNavigateProps): ((key: string) => void) => {
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback(
+		(key: string): void => {
+			const route = getRoute(key);
+			const viewQuery = getViewQuery(
+				resolvedQuery,
+				aggregateData?.filters ?? [],
+				key,
+				aggregateData?.queryName ?? '',
+			);
+
+			if (!viewQuery || !route) {
+				callback?.();
+				return;
+			}
+
+			const timeRange = aggregateData?.timeRange;
+			let queryParams: Record<string, string> = {
+				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+				...(timeRange && {
+					[QueryParams.startTime]: timeRange.startTime.toString(),
+					[QueryParams.endTime]: timeRange.endTime.toString(),
+				}),
+			};
+
+			if (route === ROUTES.METRICS_EXPLORER) {
+				queryParams = {
+					...queryParams,
+					[QueryParams.summaryFilters]: JSON.stringify(
+						viewQuery.builder.queryData[0].filters,
+					),
+				};
+			}
+
+			safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
+				newTab: true,
+			});
+
+			callback?.();
+		},
+		[resolvedQuery, safeNavigate, callback, aggregateData],
+	);
+};
+
+export function buildDrilldownUrl(
+	resolvedQuery: Query,
+	aggregateData: AggregateData | null,
+	key: string,
+): string | null {
+	const route = getRoute(key);
+	const viewQuery = getViewQuery(
+		resolvedQuery,
+		aggregateData?.filters ?? [],
+		key,
+		aggregateData?.queryName ?? '',
+	);
+
+	if (!viewQuery || !route) {
+		return null;
+	}
+
+	const timeRange = aggregateData?.timeRange;
+	let queryParams: Record<string, string> = {
+		[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+		...(timeRange && {
+			[QueryParams.startTime]: timeRange.startTime.toString(),
+			[QueryParams.endTime]: timeRange.endTime.toString(),
+		}),
+	};
+
+	if (route === ROUTES.METRICS_EXPLORER) {
+		queryParams = {
+			...queryParams,
+			[QueryParams.summaryFilters]: JSON.stringify(
+				viewQuery.builder.queryData[0].filters,
+			),
+		};
+	}
+
+	return `${route}?${createQueryParams(queryParams)}`;
+}
+
+export { getRoute };
+export default useBaseDrilldownNavigate;

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
 import { isAxiosError } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { updateBarStepInterval } from 'container/GridCardLayout/utils';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
@@ -132,6 +133,10 @@ export const useGetQueryRange: UseGetQueryRange = (
 			return options.retry;
 		}
 		return (failureCount: number, error: Error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+
 			let status: number | undefined;
 
 			if (error instanceof APIError) {
@@ -144,7 +149,7 @@ export const useGetQueryRange: UseGetQueryRange = (
 				return false;
 			}
 
-			return failureCount < 3;
+			return failureCount < MAX_QUERY_RETRIES;
 		};
 	}, [options?.retry]);
 

frontend/src/hooks/thirdPartyApis/useListOverview.ts

@@ -1,5 +1,7 @@
 import { useQuery, UseQueryResult } from 'react-query';
 import listOverview from 'api/thirdPartyApis/listOverview';
+import { isAxiosError } from 'axios';
+import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
@@ -20,12 +22,21 @@ export const useListOverview = (
 			showIp,
 			filter.expression,
 		],
-		queryFn: () =>
-			listOverview({
-				start,
-				end,
-				show_ip: showIp,
-				filter,
-			}),
+		queryFn: ({ signal }) =>
+			listOverview(
+				{
+					start,
+					end,
+					show_ip: showIp,
+					filter,
+				},
+				signal,
+			),
+		retry: (failureCount, error): boolean => {
+			if (isAxiosError(error) && error.code === 'ERR_CANCELED') {
+				return false;
+			}
+			return failureCount < MAX_QUERY_RETRIES;
+		},
 	});
 };

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);
 	}
 }

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>
 	);
 }

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();
+	});
+});

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);
+}

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>
+	);
+}

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;
+}
+

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>
+	);
+}

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);
+	}
+}

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} />
+			)}
+		/>
+	);
+}

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[];

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;
 }

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}

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.

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;

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,
+	};
+}

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 ------------------------------------------------------------

frontend/src/pages/AllErrors/QueryStateContext.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+interface AllErrorsQueryState {
+	isFetching: boolean;
+	isCancelled: boolean;
+	setIsFetching: (isFetching: boolean) => void;
+	setIsCancelled: (isCancelled: boolean) => void;
+}
+
+export const useAllErrorsQueryState = create<AllErrorsQueryState>((set) => ({
+	isFetching: false,
+	isCancelled: false,
+	setIsFetching: (isFetching): void => {
+		set((state) => ({
+			isFetching,
+			// Auto-reset cancelled when a new fetch starts
+			isCancelled: isFetching ? false : state.isCancelled,
+		}));
+	},
+	setIsCancelled: (isCancelled): void => {
+		set({ isCancelled });
+	},
+}));

frontend/src/pages/AllErrors/index.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { FilterOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
@@ -19,12 +20,22 @@ import history from 'lib/history';
 import { isNull } from 'lodash-es';
 
 import { routes } from './config';
+import { useAllErrorsQueryState } from './QueryStateContext';
 
 import './AllErrors.styles.scss';
 
 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
+	const queryClient = useQueryClient();
+
+	const isLoadingQueries = useAllErrorsQueryState((s) => s.isFetching);
+	const setIsCancelled = useAllErrorsQueryState((s) => s.setIsCancelled);
+	const handleCancelQuery = useCallback(() => {
+		queryClient.cancelQueries(['getAllErrors']);
+		queryClient.cancelQueries(['getErrorCounts']);
+		setIsCancelled(true);
+	}, [queryClient, setIsCancelled]);
 
 	const [showFilters, setShowFilters] = useState<boolean>(() => {
 		const localStorageValue = getLocalStorageKey(
@@ -77,7 +88,11 @@ function AllErrors(): JSX.Element {
 							}
 							rightActions={
 								<div className="right-toolbar-actions-container">
-									<RightToolbarActions onStageRunQuery={handleRunQuery} />
+									<RightToolbarActions
+										onStageRunQuery={handleRunQuery}
+										isLoadingQueries={isLoadingQueries}
+										handleCancelQuery={handleCancelQuery}
+									/>
 									<HeaderRightSection
 										enableAnnouncements={false}
 										enableShare

frontend/src/pages/LogsExplorer/index.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -74,6 +76,27 @@ function LogsExplorer(): JSX.Element {
 	const chartQueryKeyRef = useRef<any>();
 
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const queryClient = useQueryClient();
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		if (chartQueryKeyRef.current) {
+			queryClient.cancelQueries(chartQueryKeyRef.current);
+		}
+		setIsCancelled(true);
+		// Reset loading state — the views container unmounts when cancelled, so
+		// no child will call setIsLoadingQueries(false) otherwise.
+		setIsLoadingQueries(false);
+	}, [queryClient]);
 
 	const [warning, setWarning] = useState<Warning | undefined>(undefined);
 
@@ -296,10 +319,12 @@ function LogsExplorer(): JSX.Element {
 							}
 							rightActions={
 								<RightToolbarActions
-									onStageRunQuery={(): void => handleRunQuery()}
-									listQueryKeyRef={listQueryKeyRef}
-									chartQueryKeyRef={chartQueryKeyRef}
+									onStageRunQuery={(): void => {
+										setIsCancelled(false);
+										handleRunQuery();
+									}}
 									isLoadingQueries={isLoadingQueries}
+									handleCancelQuery={handleCancelQuery}
 									showLiveLogs={showLiveLogs}
 								/>
 							}
@@ -315,14 +340,18 @@ function LogsExplorer(): JSX.Element {
 								</ExplorerCard>
 							</div>
 							<div className="logs-explorer-views">
-								<LogsExplorerViewsContainer
-									listQueryKeyRef={listQueryKeyRef}
-									chartQueryKeyRef={chartQueryKeyRef}
-									setIsLoadingQueries={setIsLoadingQueries}
-									setWarning={setWarning}
-									showLiveLogs={showLiveLogs}
-									handleChangeSelectedView={handleChangeSelectedView}
-								/>
+								{isCancelled ? (
+									<QueryCancelledPlaceholder subText='Click "Run Query" to load logs.' />
+								) : (
+									<LogsExplorerViewsContainer
+										listQueryKeyRef={listQueryKeyRef}
+										chartQueryKeyRef={chartQueryKeyRef}
+										setIsLoadingQueries={setIsLoadingQueries}
+										setWarning={setWarning}
+										showLiveLogs={showLiveLogs}
+										handleChangeSelectedView={handleChangeSelectedView}
+									/>
+								)}
 							</div>
 						</div>
 					</section>

frontend/src/pages/TracesExplorer/index.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
+import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -71,11 +73,29 @@ function TracesExplorer(): JSX.Element {
 	});
 
 	const [searchParams] = useSearchParams();
+	const queryClient = useQueryClient();
 	const listQueryKeyRef = useRef<any>();
 
 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 	const [isLoadingQueries, setIsLoadingQueries] = useState<boolean>(false);
+	const [isCancelled, setIsCancelled] = useState(false);
+
+	useEffect(() => {
+		if (isLoadingQueries) {
+			setIsCancelled(false);
+		}
+	}, [isLoadingQueries]);
+
+	const handleCancelQuery = useCallback(() => {
+		if (listQueryKeyRef.current) {
+			queryClient.cancelQueries(listQueryKeyRef.current);
+		}
+		setIsCancelled(true);
+		// Reset loading state — the active view unmounts when cancelled, so no
+		// child will call setIsLoadingQueries(false) otherwise.
+		setIsLoadingQueries(false);
+	}, [queryClient]);
 
 	const [selectedView, setSelectedView] = useState<ExplorerViews>(() =>
 		getExplorerViewFromUrl(searchParams, panelTypesFromUrl),
@@ -210,9 +230,12 @@ function TracesExplorer(): JSX.Element {
 							}
 							rightActions={
 								<RightToolbarActions
-									onStageRunQuery={(): void => handleRunQuery()}
+									onStageRunQuery={(): void => {
+										setIsCancelled(false);
+										handleRunQuery();
+									}}
 									isLoadingQueries={isLoadingQueries}
-									listQueryKeyRef={listQueryKeyRef}
+									handleCancelQuery={handleCancelQuery}
 								/>
 							}
 						/>
@@ -224,7 +247,11 @@ function TracesExplorer(): JSX.Element {
 					</ExplorerCard>
 
 					<div className="traces-explorer-views">
-						{selectedView === ExplorerViews.LIST && (
+						{isCancelled && (
+							<QueryCancelledPlaceholder subText='Click "Run Query" to load traces.' />
+						)}
+
+						{!isCancelled && selectedView === ExplorerViews.LIST && (
 							<div className="trace-explorer-list-view">
 								<ListView
 									isFilterApplied={isFilterApplied}
@@ -235,7 +262,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}
 
-						{selectedView === ExplorerViews.TRACE && (
+						{!isCancelled && selectedView === ExplorerViews.TRACE && (
 							<div className="trace-explorer-traces-view">
 								<TracesView
 									isFilterApplied={isFilterApplied}
@@ -246,7 +273,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}
 
-						{selectedView === ExplorerViews.TIMESERIES && (
+						{!isCancelled && selectedView === ExplorerViews.TIMESERIES && (
 							<div className="trace-explorer-time-series-view">
 								<TimeSeriesView
 									dataSource={DataSource.TRACES}
@@ -258,7 +285,7 @@ function TracesExplorer(): JSX.Element {
 							</div>
 						)}
 
-						{selectedView === ExplorerViews.TABLE && (
+						{!isCancelled && selectedView === ExplorerViews.TABLE && (
 							<div className="trace-explorer-table-view">
 								<TableView
 									setWarning={setWarning}

frontend/yarn.lock

@@ -5593,10 +5593,10 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/ui@0.0.9":
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.9.tgz#e00f2ec86c5528eea91d1669510a702c4253de0d"
-  integrity sha512-L9DV0OF69Z2sMnxwPEGpSTiDxI/liT6+QfzngGVnxMl/9t3WKcPr1/p8dbPOcAS6bU9lQEBOiYlsoIejM8DsXw==
+"@signozhq/ui@0.0.10":
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.10.tgz#cdbab838f8cb543cf5b483a86e9d9b65265b81ff"
+  integrity sha512-XLeET+PgSP7heqKMsb9YZOSRT3TpfMPHNQRnY1I4SK8mXSct7BYWwK0Q3Je0uf4Z3aWOcpRYoRUPHWZQBpweFQ==
   dependencies:
     "@chenglou/pretext" "^0.0.5"
     "@radix-ui/react-checkbox" "^1.2.3"

go.mod

@@ -66,6 +66,7 @@ require (
 	github.com/uptrace/bun/dialect/pgdialect v1.2.9
 	github.com/uptrace/bun/dialect/sqlitedialect v1.2.9
 	github.com/uptrace/bun/extra/bunotel v1.2.9
+	github.com/yuin/goldmark v1.7.16
 	go.opentelemetry.io/collector/confmap v1.51.0
 	go.opentelemetry.io/collector/otelcol v0.144.0
 	go.opentelemetry.io/collector/pdata v1.51.0

go.sum

@@ -1153,6 +1153,8 @@ github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9de
 github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.3.5/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
+github.com/yuin/goldmark v1.7.16 h1:n+CJdUxaFMiDUNnWC3dMWCIQJSkxH4uz3ZwQBkAlVNE=
+github.com/yuin/goldmark v1.7.16/go.mod h1:ip/1k0VRfGynBgxOz0yCqHrbZXhcjxyuS66Brc7iBKg=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 github.com/zeebo/assert v1.3.1 h1:vukIABvugfNMZMQO1ABsyQDJDTVQbn+LWSMy1ol1h6A=

pkg/templating/markdownrenderer/blockkit/blockkit.go

@@ -0,0 +1,755 @@
+package blockkit
+
+import (
+	"bytes"
+	"encoding/json"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/types/templatingtypes"
+	"github.com/yuin/goldmark"
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/extension"
+	extensionast "github.com/yuin/goldmark/extension/ast"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/util"
+)
+
+// Extender is a goldmark.Extender that registers the Block Kit node renderer
+// together with the GFM extensions it relies on (tables, strikethrough, task
+// lists).
+var Extender goldmark.Extender = &extender{}
+
+type extender struct{}
+
+func (e *extender) Extend(m goldmark.Markdown) {
+	extension.Table.Extend(m)
+	extension.Strikethrough.Extend(m)
+	extension.TaskList.Extend(m)
+	m.Renderer().AddOptions(
+		renderer.WithNodeRenderers(util.Prioritized(newRenderer(), 1)),
+	)
+}
+
+// listFrame tracks state for a single level of list nesting.
+type listFrame struct {
+	style     string // "bullet" or "ordered"
+	indent    int
+	itemCount int
+}
+
+// listContext holds all state while processing a list tree.
+type listContext struct {
+	result             []templatingtypes.RichTextList
+	stack              []listFrame
+	current            *templatingtypes.RichTextList
+	currentItemInlines []interface{}
+}
+
+// tableContext holds state while processing a table.
+type tableContext struct {
+	rows               [][]templatingtypes.TableCell
+	currentRow         []templatingtypes.TableCell
+	currentCellInlines []interface{}
+	isHeader           bool
+}
+
+// nodeRenderer converts Markdown AST to Slack Block Kit JSON.
+type nodeRenderer struct {
+	blocks []interface{}
+	mrkdwn strings.Builder
+	// holds active styles for the current rich text element
+	styleStack []templatingtypes.RichTextStyle
+	// holds the current list context while processing a list tree.
+	listCtx *listContext
+	// holds the current table context while processing a table.
+	tableCtx *tableContext
+	// stores the current blockquote depth while processing a blockquote.
+	// so blockquote with nested list can be rendered correctly.
+	blockquoteDepth int
+}
+
+func newRenderer() renderer.NodeRenderer {
+	return &nodeRenderer{}
+}
+
+// RegisterFuncs registers node rendering functions.
+func (r *nodeRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
+	// Blocks
+	reg.Register(ast.KindDocument, r.renderDocument)
+	reg.Register(ast.KindHeading, r.renderHeading)
+	reg.Register(ast.KindParagraph, r.renderParagraph)
+	reg.Register(ast.KindThematicBreak, r.renderThematicBreak)
+	reg.Register(ast.KindCodeBlock, r.renderCodeBlock)
+	reg.Register(ast.KindFencedCodeBlock, r.renderFencedCodeBlock)
+	reg.Register(ast.KindBlockquote, r.renderBlockquote)
+	reg.Register(ast.KindList, r.renderList)
+	reg.Register(ast.KindListItem, r.renderListItem)
+	reg.Register(ast.KindImage, r.renderImage)
+
+	// Inlines
+	reg.Register(ast.KindText, r.renderText)
+	reg.Register(ast.KindEmphasis, r.renderEmphasis)
+	reg.Register(ast.KindCodeSpan, r.renderCodeSpan)
+	reg.Register(ast.KindLink, r.renderLink)
+
+	// Extensions
+	reg.Register(extensionast.KindStrikethrough, r.renderStrikethrough)
+	reg.Register(extensionast.KindTable, r.renderTable)
+	reg.Register(extensionast.KindTableHeader, r.renderTableHeader)
+	reg.Register(extensionast.KindTableRow, r.renderTableRow)
+	reg.Register(extensionast.KindTableCell, r.renderTableCell)
+	reg.Register(extensionast.KindTaskCheckBox, r.renderTaskCheckBox)
+}
+
+// inRichTextMode returns true when we're inside a list or table context
+// in slack blockkit list and table items are rendered as rich_text elements
+// if more cases are found in future those needs to be added here.
+func (r *nodeRenderer) inRichTextMode() bool {
+	return r.listCtx != nil || r.tableCtx != nil
+}
+
+// currentStyle merges the stored style stack into templatingtypes.RichTextStyle
+// which can be applied on rich text elements.
+func (r *nodeRenderer) currentStyle() *templatingtypes.RichTextStyle {
+	s := templatingtypes.RichTextStyle{}
+	for _, f := range r.styleStack {
+		s.Bold = s.Bold || f.Bold
+		s.Italic = s.Italic || f.Italic
+		s.Strike = s.Strike || f.Strike
+		s.Code = s.Code || f.Code
+	}
+	if s == (templatingtypes.RichTextStyle{}) {
+		return nil
+	}
+	return &s
+}
+
+// flushMrkdwn collects markdown text and adds it as a templatingtypes.SectionBlock with mrkdwn text
+// whenever starting a new block we flush markdown to render it as a separate block.
+func (r *nodeRenderer) flushMrkdwn() {
+	text := strings.TrimSpace(r.mrkdwn.String())
+	if text != "" {
+		r.blocks = append(r.blocks, templatingtypes.SectionBlock{
+			Type: "section",
+			Text: &templatingtypes.TextObject{
+				Type: "mrkdwn",
+				Text: text,
+			},
+		})
+	}
+	r.mrkdwn.Reset()
+}
+
+// addInline adds an inline element to the appropriate context.
+func (r *nodeRenderer) addInline(el interface{}) {
+	if r.listCtx != nil {
+		r.listCtx.currentItemInlines = append(r.listCtx.currentItemInlines, el)
+	} else if r.tableCtx != nil {
+		r.tableCtx.currentCellInlines = append(r.tableCtx.currentCellInlines, el)
+	}
+}
+
+// --- Document ---
+
+func (r *nodeRenderer) renderDocument(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.blocks = nil
+		r.mrkdwn.Reset()
+		r.styleStack = nil
+		r.listCtx = nil
+		r.tableCtx = nil
+		r.blockquoteDepth = 0
+	} else {
+		// on exiting the document node write the json for the collected blocks.
+		r.flushMrkdwn()
+		var data []byte
+		var err error
+		if len(r.blocks) > 0 {
+			data, err = json.Marshal(r.blocks)
+			if err != nil {
+				return ast.WalkStop, err
+			}
+		} else {
+			// if no blocks are collected, write an empty array.
+			data = []byte("[]")
+		}
+		_, err = w.Write(data)
+		if err != nil {
+			return ast.WalkStop, err
+		}
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- Heading ---
+
+func (r *nodeRenderer) renderHeading(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.mrkdwn.WriteString("*")
+	} else {
+		r.mrkdwn.WriteString("*\n")
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- Paragraph ---
+
+func (r *nodeRenderer) renderParagraph(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		if r.mrkdwn.Len() > 0 {
+			text := r.mrkdwn.String()
+			if !strings.HasSuffix(text, "\n") {
+				r.mrkdwn.WriteString("\n")
+			}
+		}
+		// handling of nested blockquotes
+		if r.blockquoteDepth > 0 {
+			r.mrkdwn.WriteString(strings.Repeat("> ", r.blockquoteDepth))
+		}
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- ThematicBreak ---
+
+func (r *nodeRenderer) renderThematicBreak(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.flushMrkdwn()
+		r.blocks = append(r.blocks, templatingtypes.DividerBlock{Type: "divider"})
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- CodeBlock (indented) ---
+
+func (r *nodeRenderer) renderCodeBlock(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	r.flushMrkdwn()
+
+	var buf bytes.Buffer
+	lines := node.Lines()
+	for i := 0; i < lines.Len(); i++ {
+		line := lines.At(i)
+		buf.Write(line.Value(source))
+	}
+
+	text := buf.String()
+	// Remove trailing newline
+	text = strings.TrimRight(text, "\n")
+	// Slack API rejects empty text in rich_text_preformatted elements
+	if text == "" {
+		text = " "
+	}
+
+	elements := []interface{}{
+		templatingtypes.RichTextInline{Type: "text", Text: text},
+	}
+
+	r.blocks = append(r.blocks, templatingtypes.RichTextBlock{
+		Type: "rich_text",
+		Elements: []interface{}{
+			templatingtypes.RichTextPreformatted{
+				Type:     "rich_text_preformatted",
+				Elements: elements,
+				Border:   0,
+			},
+		},
+	})
+	return ast.WalkContinue, nil
+}
+
+// --- FencedCodeBlock ---
+
+func (r *nodeRenderer) renderFencedCodeBlock(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	r.flushMrkdwn()
+
+	n := node.(*ast.FencedCodeBlock)
+	var buf bytes.Buffer
+	lines := node.Lines()
+	for i := 0; i < lines.Len(); i++ {
+		line := lines.At(i)
+		buf.Write(line.Value(source))
+	}
+
+	text := buf.String()
+	text = strings.TrimRight(text, "\n")
+	// Slack API rejects empty text in rich_text_preformatted elements
+	if text == "" {
+		text = " "
+	}
+
+	elements := []interface{}{
+		templatingtypes.RichTextInline{Type: "text", Text: text},
+	}
+
+	// If language is specified, collect it.
+	var language string
+	lang := n.Language(source)
+	if len(lang) > 0 {
+		language = string(lang)
+	}
+	// Add the preformatted block to the blocks slice with the collected language.
+	r.blocks = append(r.blocks, templatingtypes.RichTextBlock{
+		Type: "rich_text",
+		Elements: []interface{}{
+			templatingtypes.RichTextPreformatted{
+				Type:     "rich_text_preformatted",
+				Elements: elements,
+				Border:   0,
+				Language: language,
+			},
+		},
+	})
+
+	return ast.WalkSkipChildren, nil
+}
+
+// --- Blockquote ---
+
+func (r *nodeRenderer) renderBlockquote(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.blockquoteDepth++
+	} else {
+		r.blockquoteDepth--
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- List ---
+
+func (r *nodeRenderer) renderList(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	list := node.(*ast.List)
+
+	if entering {
+		style := "bullet"
+		if list.IsOrdered() {
+			style = "ordered"
+		}
+
+		if r.listCtx == nil {
+			// Top-level list: flush mrkdwn and create context
+			r.flushMrkdwn()
+			r.listCtx = &listContext{}
+		} else {
+			// Nested list: check if we already have some collected list items that needs to be flushed.
+			// in slack blockkit, list items with different levels of indentation are added as different rich_text_list blocks.
+			if len(r.listCtx.currentItemInlines) > 0 {
+				sec := templatingtypes.RichTextBlock{
+					Type:     "rich_text_section",
+					Elements: r.listCtx.currentItemInlines,
+				}
+				if r.listCtx.current != nil {
+					r.listCtx.current.Elements = append(r.listCtx.current.Elements, sec)
+				}
+				r.listCtx.currentItemInlines = nil
+				// Increment parent's itemCount
+				if len(r.listCtx.stack) > 0 {
+					r.listCtx.stack[len(r.listCtx.stack)-1].itemCount++
+				}
+			}
+			// Finalize current list to result only if items were collected
+			if r.listCtx.current != nil && len(r.listCtx.current.Elements) > 0 {
+				r.listCtx.result = append(r.listCtx.result, *r.listCtx.current)
+			}
+		}
+
+		// the stack accumulated till this level derives hte indentation
+		// the stack get's collected as we go in more nested levels of list
+		// and as we get our of the nesting we remove the items from the slack
+		indent := len(r.listCtx.stack)
+		r.listCtx.stack = append(r.listCtx.stack, listFrame{
+			style:     style,
+			indent:    indent,
+			itemCount: 0,
+		})
+
+		newList := &templatingtypes.RichTextList{
+			Type:     "rich_text_list",
+			Style:    style,
+			Indent:   indent,
+			Border:   0,
+			Elements: []interface{}{},
+		}
+
+		// Handle ordered list with start > 1
+		if list.IsOrdered() && list.Start > 1 {
+			newList.Offset = list.Start - 1
+		}
+
+		r.listCtx.current = newList
+
+	} else {
+		// Leaving list: finalize current list
+		if r.listCtx.current != nil && len(r.listCtx.current.Elements) > 0 {
+			r.listCtx.result = append(r.listCtx.result, *r.listCtx.current)
+		}
+
+		// Pop stack to so upcoming indentations can be handled correctly.
+		r.listCtx.stack = r.listCtx.stack[:len(r.listCtx.stack)-1]
+
+		if len(r.listCtx.stack) > 0 {
+			// Resume parent: start a new list segment at parent indent/style
+			parent := &r.listCtx.stack[len(r.listCtx.stack)-1]
+			newList := &templatingtypes.RichTextList{
+				Type:     "rich_text_list",
+				Style:    parent.style,
+				Indent:   parent.indent,
+				Border:   0,
+				Elements: []interface{}{},
+			}
+			// Set offset for ordered parent continuation
+			if parent.style == "ordered" && parent.itemCount > 0 {
+				newList.Offset = parent.itemCount
+			}
+			r.listCtx.current = newList
+		} else {
+			// Top-level list is done since all stack are popped: build templatingtypes.RichTextBlock if non-empty
+			if len(r.listCtx.result) > 0 {
+				elements := make([]interface{}, len(r.listCtx.result))
+				for i, l := range r.listCtx.result {
+					elements[i] = l
+				}
+				r.blocks = append(r.blocks, templatingtypes.RichTextBlock{
+					Type:     "rich_text",
+					Elements: elements,
+				})
+			}
+			r.listCtx = nil
+		}
+	}
+
+	return ast.WalkContinue, nil
+}
+
+// --- ListItem ---
+
+func (r *nodeRenderer) renderListItem(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.listCtx.currentItemInlines = nil
+	} else {
+		// Only add if there are inlines (might be empty after nested list consumed them)
+		if len(r.listCtx.currentItemInlines) > 0 {
+			sec := templatingtypes.RichTextBlock{
+				Type:     "rich_text_section",
+				Elements: r.listCtx.currentItemInlines,
+			}
+			if r.listCtx.current != nil {
+				r.listCtx.current.Elements = append(r.listCtx.current.Elements, sec)
+			}
+			r.listCtx.currentItemInlines = nil
+			// Increment parent frame's itemCount
+			if len(r.listCtx.stack) > 0 {
+				r.listCtx.stack[len(r.listCtx.stack)-1].itemCount++
+			}
+		}
+	}
+
+	return ast.WalkContinue, nil
+}
+
+// --- Table ---
+// when table is encountered, we flush the markdown and create a table context.
+// when header row is encountered, we set the isHeader flag to true
+// when each row ends in renderTableRow we add that row to rows array of table context.
+// when table cell is encountered, we apply header related styles to the collected inline items,
+// all inline items are parsed as separate AST items like list item, links, text, etc. are collected
+// using the addInline function and wrapped in a rich_text_section block.
+
+func (r *nodeRenderer) renderTable(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.flushMrkdwn()
+		r.tableCtx = &tableContext{}
+	} else {
+		// Pad short rows to match header column count for valid Block Kit payload
+		// without this slack blockkit attachment is invalid and the API fails
+		rows := r.tableCtx.rows
+		if len(rows) > 0 {
+			maxCols := len(rows[0])
+			for i, row := range rows {
+				for len(row) < maxCols {
+					emptySec := templatingtypes.RichTextBlock{
+						Type:     "rich_text_section",
+						Elements: []interface{}{templatingtypes.RichTextInline{Type: "text", Text: " "}},
+					}
+					row = append(row, templatingtypes.TableCell{
+						Type:     "rich_text",
+						Elements: []interface{}{emptySec},
+					})
+				}
+				rows[i] = row
+			}
+		}
+		r.blocks = append(r.blocks, templatingtypes.TableBlock{
+			Type: "table",
+			Rows: rows,
+		})
+		r.tableCtx = nil
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderTableHeader(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.tableCtx.isHeader = true
+		r.tableCtx.currentRow = nil
+	} else {
+		r.tableCtx.rows = append(r.tableCtx.rows, r.tableCtx.currentRow)
+		r.tableCtx.currentRow = nil
+		r.tableCtx.isHeader = false
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderTableRow(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.tableCtx.currentRow = nil
+	} else {
+		r.tableCtx.rows = append(r.tableCtx.rows, r.tableCtx.currentRow)
+		r.tableCtx.currentRow = nil
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderTableCell(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.tableCtx.currentCellInlines = nil
+	} else {
+		// If header, make text bold for the collected inline items.
+		if r.tableCtx.isHeader {
+			for i, el := range r.tableCtx.currentCellInlines {
+				if inline, ok := el.(templatingtypes.RichTextInline); ok {
+					if inline.Style == nil {
+						inline.Style = &templatingtypes.RichTextStyle{Bold: true}
+					} else {
+						inline.Style.Bold = true
+					}
+					r.tableCtx.currentCellInlines[i] = inline
+				}
+			}
+		}
+		// Ensure cell has at least one element for valid Block Kit payload
+		if len(r.tableCtx.currentCellInlines) == 0 {
+			r.tableCtx.currentCellInlines = []interface{}{
+				templatingtypes.RichTextInline{Type: "text", Text: " "},
+			}
+		}
+		// All inline items that are collected for a table cell are wrapped in a rich_text_section block.
+		sec := templatingtypes.RichTextBlock{
+			Type:     "rich_text_section",
+			Elements: r.tableCtx.currentCellInlines,
+		}
+		// The rich_text_section block is wrapped in a rich_text block.
+		cell := templatingtypes.TableCell{
+			Type:     "rich_text",
+			Elements: []interface{}{sec},
+		}
+		r.tableCtx.currentRow = append(r.tableCtx.currentRow, cell)
+		r.tableCtx.currentCellInlines = nil
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- TaskCheckBox ---
+
+func (r *nodeRenderer) renderTaskCheckBox(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	n := node.(*extensionast.TaskCheckBox)
+	text := "[ ] "
+	if n.IsChecked {
+		text = "[x] "
+	}
+	if r.inRichTextMode() {
+		r.addInline(templatingtypes.RichTextInline{Type: "text", Text: text})
+	} else {
+		r.mrkdwn.WriteString(text)
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- Inline: Text ---
+
+func (r *nodeRenderer) renderText(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	n := node.(*ast.Text)
+	value := string(n.Segment.Value(source))
+
+	if r.inRichTextMode() {
+		r.addInline(templatingtypes.RichTextInline{
+			Type:  "text",
+			Text:  value,
+			Style: r.currentStyle(),
+		})
+		if n.HardLineBreak() || n.SoftLineBreak() {
+			r.addInline(templatingtypes.RichTextInline{Type: "text", Text: "\n"})
+		}
+	} else {
+		r.mrkdwn.WriteString(value)
+		if n.HardLineBreak() || n.SoftLineBreak() {
+			r.mrkdwn.WriteString("\n")
+			if r.blockquoteDepth > 0 {
+				r.mrkdwn.WriteString(strings.Repeat("> ", r.blockquoteDepth))
+			}
+		}
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- Inline: Emphasis ---
+
+func (r *nodeRenderer) renderEmphasis(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	n := node.(*ast.Emphasis)
+	if r.inRichTextMode() {
+		if entering {
+			s := templatingtypes.RichTextStyle{}
+			if n.Level == 1 {
+				s.Italic = true
+			} else {
+				s.Bold = true
+			}
+			r.styleStack = append(r.styleStack, s)
+		} else {
+			// the collected style gets used by the rich text element using currentStyle()
+			// so we remove this style from the stack.
+			if len(r.styleStack) > 0 {
+				r.styleStack = r.styleStack[:len(r.styleStack)-1]
+			}
+		}
+	} else {
+		if n.Level == 1 {
+			r.mrkdwn.WriteString("_")
+		} else {
+			r.mrkdwn.WriteString("*")
+		}
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- Inline: Strikethrough ---
+
+func (r *nodeRenderer) renderStrikethrough(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if r.inRichTextMode() {
+		if entering {
+			r.styleStack = append(r.styleStack, templatingtypes.RichTextStyle{Strike: true})
+		} else {
+			// the collected style gets used by the rich text element using currentStyle()
+			// so we remove this style from the stack.
+			if len(r.styleStack) > 0 {
+				r.styleStack = r.styleStack[:len(r.styleStack)-1]
+			}
+		}
+	} else {
+		r.mrkdwn.WriteString("~")
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- Inline: CodeSpan ---
+
+func (r *nodeRenderer) renderCodeSpan(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	if r.inRichTextMode() {
+		// Collect all child text
+		var buf bytes.Buffer
+		for c := node.FirstChild(); c != nil; c = c.NextSibling() {
+			if t, ok := c.(*ast.Text); ok {
+				v := t.Segment.Value(source)
+				if bytes.HasSuffix(v, []byte("\n")) {
+					buf.Write(v[:len(v)-1])
+					buf.WriteByte(' ')
+				} else {
+					buf.Write(v)
+				}
+			} else if s, ok := c.(*ast.String); ok {
+				buf.Write(s.Value)
+			}
+		}
+		style := r.currentStyle()
+		if style == nil {
+			style = &templatingtypes.RichTextStyle{Code: true}
+		} else {
+			style.Code = true
+		}
+		r.addInline(templatingtypes.RichTextInline{
+			Type:  "text",
+			Text:  buf.String(),
+			Style: style,
+		})
+		return ast.WalkSkipChildren, nil
+	}
+	// mrkdwn mode
+	r.mrkdwn.WriteByte('`')
+	for c := node.FirstChild(); c != nil; c = c.NextSibling() {
+		if t, ok := c.(*ast.Text); ok {
+			v := t.Segment.Value(source)
+			if bytes.HasSuffix(v, []byte("\n")) {
+				r.mrkdwn.Write(v[:len(v)-1])
+				r.mrkdwn.WriteByte(' ')
+			} else {
+				r.mrkdwn.Write(v)
+			}
+		} else if s, ok := c.(*ast.String); ok {
+			r.mrkdwn.Write(s.Value)
+		}
+	}
+	r.mrkdwn.WriteByte('`')
+	return ast.WalkSkipChildren, nil
+}
+
+// --- Inline: Link ---
+
+func (r *nodeRenderer) renderLink(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	n := node.(*ast.Link)
+	if r.inRichTextMode() {
+		if entering {
+			// Walk the entire subtree to collect text from all descendants,
+			// including nested inline nodes like emphasis, strong, code spans, etc.
+			var buf bytes.Buffer
+			_ = ast.Walk(node, func(child ast.Node, entering bool) (ast.WalkStatus, error) {
+				if !entering || child == node {
+					return ast.WalkContinue, nil
+				}
+				if t, ok := child.(*ast.Text); ok {
+					buf.Write(t.Segment.Value(source))
+				} else if s, ok := child.(*ast.String); ok {
+					buf.Write(s.Value)
+				}
+				return ast.WalkContinue, nil
+			})
+			// Once we've collected the text for the link (given it was present)
+			// let's add the link to the rich text block.
+			r.addInline(templatingtypes.RichTextLink{
+				Type:  "link",
+				URL:   string(n.Destination),
+				Text:  buf.String(),
+				Style: r.currentStyle(),
+			})
+			return ast.WalkSkipChildren, nil
+		}
+	} else {
+		if entering {
+			r.mrkdwn.WriteString("<")
+			r.mrkdwn.Write(n.Destination)
+			r.mrkdwn.WriteString("|")
+		} else {
+			r.mrkdwn.WriteString(">")
+		}
+	}
+	return ast.WalkContinue, nil
+}
+
+// --- Image (skip) ---
+
+func (r *nodeRenderer) renderImage(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	return ast.WalkSkipChildren, nil
+}

pkg/templating/markdownrenderer/blockkit/blockkit_test.go

@@ -0,0 +1,542 @@
+package blockkit
+
+import (
+	"bytes"
+	"encoding/json"
+	"testing"
+
+	"github.com/yuin/goldmark"
+)
+
+func jsonEqual(a, b string) bool {
+	var va, vb interface{}
+	if err := json.Unmarshal([]byte(a), &va); err != nil {
+		return false
+	}
+	if err := json.Unmarshal([]byte(b), &vb); err != nil {
+		return false
+	}
+	ja, _ := json.Marshal(va)
+	jb, _ := json.Marshal(vb)
+	return string(ja) == string(jb)
+}
+
+func prettyJSON(s string) string {
+	var v interface{}
+	if err := json.Unmarshal([]byte(s), &v); err != nil {
+		return s
+	}
+	b, _ := json.MarshalIndent(v, "", "  ")
+	return string(b)
+}
+
+func TestRenderer(t *testing.T) {
+	tests := []struct {
+		name     string
+		markdown string
+		expected string
+	}{
+		{
+			name:     "empty input",
+			markdown: "",
+			expected: `[]`,
+		},
+		{
+			name:     "simple paragraph",
+			markdown: "Hello world",
+			expected: `[
+				{
+					"type": "section",
+					"text": { "type": "mrkdwn", "text": "Hello world" }
+				}
+			]`,
+		},
+		{
+			name:     "heading",
+			markdown: "# My Heading",
+			expected: `[
+				{
+					"type": "section",
+					"text": { "type": "mrkdwn", "text": "*My Heading*" }
+				}
+			]`,
+		},
+		{
+			name:     "multiple paragraphs",
+			markdown: "First paragraph\n\nSecond paragraph",
+			expected: `[
+				{
+					"type": "section",
+					"text": { "type": "mrkdwn", "text": "First paragraph\nSecond paragraph" }
+				}
+			]`,
+		},
+		{
+			name:     "todo list ",
+			markdown: "- [ ] item 1\n- [x] item 2",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+					{ 
+						"border": 0, 
+						"elements": [ 
+							{ "elements": [ { "text": "[ ] ", "type": "text" }, { "text": "item 1", "type": "text" } ], "type": "rich_text_section" }, 
+							{ "elements": [ { "text": "[x] ", "type": "text" }, { "text": "item 2", "type": "text" } ], "type": "rich_text_section" } 
+						],
+						"indent": 0, 
+						"style": "bullet", 
+						"type": "rich_text_list" 
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "thematic break between paragraphs",
+			markdown: "Before\n\n---\n\nAfter",
+			expected: `[
+				{ "type": "section", "text": { "type": "mrkdwn", "text": "Before" } },
+				{ "type": "divider" },
+				{ "type": "section", "text": { "type": "mrkdwn", "text": "After" } }
+			]`,
+		},
+		{
+			name:     "fenced code block with language",
+			markdown: "```go\nfmt.Println(\"hello\")\n```",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_preformatted",
+							"border": 0,
+							"language": "go",
+							"elements": [
+								{ "type": "text", "text": "fmt.Println(\"hello\")" }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "indented code block",
+			markdown: "    code line 1\n    code line 2",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_preformatted",
+							"border": 0,
+							"elements": [
+								{ "type": "text", "text": "code line 1\ncode line 2" }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "empty fenced code block",
+			markdown: "```\n```",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_preformatted",
+							"border": 0,
+							"elements": [
+								{ "type": "text", "text": " " }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "simple bullet list",
+			markdown: "- item 1\n- item 2\n- item 3",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "item 1" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "item 2" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "item 3" }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "simple ordered list",
+			markdown: "1. first\n2. second\n3. third",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "first" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "second" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "third" }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "nested bullet list (2 levels)",
+			markdown: "- item 1\n- item 2\n  - sub a\n  - sub b\n- item 3",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "item 1" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "item 2" }] }
+							]
+						},
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 1, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "sub a" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "sub b" }] }
+							]
+						},
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "item 3" }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "nested ordered list with offset",
+			markdown: "1. first\n   1. nested-a\n   2. nested-b\n2. second\n3. third",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "first" }] }
+							]
+						},
+						{
+							"type": "rich_text_list", "style": "ordered", "indent": 1, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "nested-a" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "nested-b" }] }
+							]
+						},
+						{
+							"type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0, "offset": 1,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "second" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "third" }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "mixed ordered/bullet nesting",
+			markdown: "1. ordered\n   - bullet child\n2. ordered again",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "ordered" }] }
+							]
+						},
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 1, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "bullet child" }] }
+							]
+						},
+						{
+							"type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0, "offset": 1,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "ordered again" }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "list items with bold/italic/link/code",
+			markdown: "- **bold item**\n- _italic item_\n- [link](http://example.com)\n- `code item`",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "bold item", "style": { "bold": true } }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "italic item", "style": { "italic": true } }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "link", "url": "http://example.com", "text": "link" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "code item", "style": { "code": true } }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "table with header and body",
+			markdown: "| Name | Age |\n|------|-----|\n| Alice | 30 |",
+			expected: `[
+				{
+					"type": "table",
+					"rows": [
+						[
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "Name", "style": { "bold": true } }] }
+							]},
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "Age", "style": { "bold": true } }] }
+							]}
+						],
+						[
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "Alice" }] }
+							]},
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "30" }] }
+							]}
+						]
+					]
+				}
+			]`,
+		},
+		{
+			name:     "blockquote",
+			markdown: "> quoted text",
+			expected: `[
+				{
+					"type": "section",
+					"text": { "type": "mrkdwn", "text": "> quoted text" }
+				}
+			]`,
+		},
+		{
+			name:     "blockquote with nested list",
+			markdown: "> item 1\n> > item 2\n> > item 3",
+			expected: `[
+				{
+					"text": {
+					"text": "> item 1\n> > item 2\n> > item 3",
+					"type": "mrkdwn"
+					},
+					"type": "section"
+				}
+			]`,
+		},
+		{
+			name:     "inline formatting in paragraph",
+			markdown: "This is **bold** and _italic_ and ~strike~ and `code`",
+			expected: `[
+				{
+					"type": "section",
+					"text": { "type": "mrkdwn", "text": "This is *bold* and _italic_ and ~strike~ and ` + "`code`" + `" }
+				}
+			]`,
+		},
+		{
+			name:     "link in paragraph",
+			markdown: "Visit [Google](http://google.com)",
+			expected: `[
+				{
+					"type": "section",
+					"text": { "type": "mrkdwn", "text": "Visit <http://google.com|Google>" }
+				}
+			]`,
+		},
+		{
+			name:     "image is skipped",
+			markdown: "![alt](http://example.com/image.png)",
+			// For image skip the block and return empty array
+			expected: `[]`,
+		},
+		{
+			name:     "paragraph then list then paragraph",
+			markdown: "Before\n\n- item\n\nAfter",
+			expected: `[
+				{ "type": "section", "text": { "type": "mrkdwn", "text": "Before" } },
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "item" }] }
+							]
+						}
+					]
+				},
+				{ "type": "section", "text": { "type": "mrkdwn", "text": "After" } }
+			]`,
+		},
+		{
+			name:     "ordered list with start > 1",
+			markdown: "5. fifth\n6. sixth",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0, "offset": 4,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "fifth" }] },
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "sixth" }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "deeply nested ordered list (3 levels) with offsets",
+			markdown: "1. Some things\n\t1. are best left\n2. to the fate\n\t1. of the world\n\t\t1. and then\n\t\t2. this is how\n3. it turns out to be",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{ "type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0,
+						  "elements": [{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "Some things" }] }] },
+
+						{ "type": "rich_text_list", "style": "ordered", "indent": 1, "border": 0,
+						  "elements": [{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "are best left" }] }] },
+
+						{ "type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0, "offset": 1,
+						  "elements": [{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "to the fate" }] }] },
+
+						{ "type": "rich_text_list", "style": "ordered", "indent": 1, "border": 0,
+						  "elements": [{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "of the world" }] }] },
+
+						{ "type": "rich_text_list", "style": "ordered", "indent": 2, "border": 0,
+						  "elements": [
+						    { "type": "rich_text_section", "elements": [{ "type": "text", "text": "and then" }] },
+						    { "type": "rich_text_section", "elements": [{ "type": "text", "text": "this is how" }] }
+						  ]
+						},
+
+						{ "type": "rich_text_list", "style": "ordered", "indent": 0, "border": 0, "offset": 2,
+						  "elements": [{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "it turns out to be" }] }] }
+					]
+				}
+			]`,
+		},
+		{
+			name:     "link with bold label in list item",
+			markdown: "- [**docs**](http://example.com)",
+			expected: `[
+				{
+					"type": "rich_text",
+					"elements": [
+						{
+							"type": "rich_text_list", "style": "bullet", "indent": 0, "border": 0,
+							"elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "link", "url": "http://example.com", "text": "docs" }] }
+							]
+						}
+					]
+				}
+			]`,
+		},
+		{
+			name:     "table with empty cell",
+			markdown: "| A | B |\n|---|---|\n| 1 | |",
+			expected: `[
+				{
+					"type": "table",
+					"rows": [
+						[
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "A", "style": { "bold": true } }] }
+							]},
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "B", "style": { "bold": true } }] }
+							]}
+						],
+						[
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "1" }] }
+							]},
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": " " }] }
+							]}
+						]
+					]
+				}
+			]`,
+		},
+		{
+			name:     "table with missing column in row",
+			markdown: "| A | B |\n|---|---|\n| 1 |",
+			expected: `[
+				{
+					"type": "table",
+					"rows": [
+						[
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "A", "style": { "bold": true } }] }
+							]},
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "B", "style": { "bold": true } }] }
+							]}
+						],
+						[
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": "1" }] }
+							]},
+							{ "type": "rich_text", "elements": [
+								{ "type": "rich_text_section", "elements": [{ "type": "text", "text": " " }] }
+							]}
+						]
+					]
+				}
+			]`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			md := goldmark.New(
+				goldmark.WithExtensions(Extender),
+			)
+			var buf bytes.Buffer
+			if err := md.Convert([]byte(tt.markdown), &buf); err != nil {
+				t.Fatalf("convert error: %v", err)
+			}
+			got := buf.String()
+			if !jsonEqual(got, tt.expected) {
+				t.Errorf("JSON mismatch\n\nMarkdown:\n%s\n\nExpected:\n%s\n\nGot:\n%s",
+					tt.markdown, prettyJSON(tt.expected), prettyJSON(got))
+			}
+		})
+	}
+}

pkg/templating/markdownrenderer/blockkit/doc.go

@@ -0,0 +1,9 @@
+// Package blockkit provides a goldmark extension that renders markdown as
+// Slack Block Kit JSON (an array of blocks suitable for the Slack API's
+// `blocks` payload field).
+//
+// The current Slack notifier uses the sibling mrkdwn package instead, because
+// Block Kit's hard limits (one table per message, 50 blocks per message,
+// 12k-character total text) would silently truncate or reject notifications
+// with rich bodies. This package is kept in tree for future use.
+package blockkit

pkg/templating/markdownrenderer/concurrency_test.go

@@ -0,0 +1,47 @@
+package markdownrenderer
+
+import (
+	"sync"
+	"testing"
+)
+
+// TestConcurrentRender exercises every render entry point from many
+// goroutines. Run with `go test -race` to catch shared-state regressions
+// in the HTML, Block Kit or mrkdwn paths.
+func TestConcurrentRender(t *testing.T) {
+	const goroutines = 32
+	const iterations = 20
+
+	markdowns := []string{
+		"# Heading\n\nparagraph **bold** *em* `code`",
+		"- item 1\n- item 2\n  - nested\n- item 3",
+		"| a | b |\n| - | - |\n| 1 | 2 |\n| 3 | 4 |",
+		"> quote\n>> nested quote",
+		"```go\npackage main\n```",
+		"[link](https://example.com) and ![img](https://example.com/i.png)",
+	}
+
+	renderers := map[string]func(string) (string, error){
+		"html":     RenderHTML,
+		"blockkit": RenderSlackBlockKit,
+		"mrkdwn":   RenderSlackMrkdwn,
+	}
+
+	var wg sync.WaitGroup
+	for name, render := range renderers {
+		for g := 0; g < goroutines; g++ {
+			wg.Add(1)
+			go func(name string, render func(string) (string, error), g int) {
+				defer wg.Done()
+				for i := 0; i < iterations; i++ {
+					md := markdowns[(g+i)%len(markdowns)]
+					if _, err := render(md); err != nil {
+						t.Errorf("%s render failed: %v", name, err)
+						return
+					}
+				}
+			}(name, render, g)
+		}
+	}
+	wg.Wait()
+}

pkg/templating/markdownrenderer/doc.go

@@ -0,0 +1,3 @@
+// Package markdownrenderer renders markdown to the formats that alert
+// notifications are delivered in: HTML, Slack Block Kit JSON, and Slack mrkdwn.
+package markdownrenderer

pkg/templating/markdownrenderer/html_test.go

@@ -0,0 +1,166 @@
+package markdownrenderer
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+var testMarkdown = `# 🔥 FIRING: High CPU Usage on api-gateway
+
+https://signoz.example.com/alerts/123
+https://runbooks.example.com/cpu-high
+
+## Alert Details
+
+**Status:** **FIRING** | *api-gateway* service is experiencing high CPU usage. ~~resolved~~ previously.
+
+Alert triggered because ` + "`cpu_usage_percent`" + ` exceeded threshold ` + "`90`" + `.
+
+[View Alert in SigNoz](https://signoz.example.com/alerts/123) | [View Logs](https://signoz.example.com/logs?service=api-gateway) | [View Traces](https://signoz.example.com/traces?service=api-gateway)
+
+![critical](https://signoz.example.com/badges/critical.svg "Critical Alert")
+
+## Alert Labels
+
+| Label    | Value       |
+| -------- | ----------- |
+| service  | api-gateway |
+| instance | pod-5a8b3c  |
+| severity | critical    |
+| region   | us-east-1   |
+
+## Remediation Steps
+
+1. Check current CPU usage on the pod
+2. Review recent deployments for regressions
+3. Scale horizontally if load-related
+    1. Increase replica count
+    2. Verify HPA configuration
+
+## Affected Services
+
+* api-gateway
+* auth-service
+* payment-service
+    * payment-processor
+    * payment-validator
+
+## Incident Checklist
+
+- [x] Alert acknowledged
+- [x] On-call notified
+- [ ] Root cause identified
+- [ ] Fix deployed
+
+## Alert Rule Description
+
+> This alert fires when CPU usage exceeds 90% for more than 5 minutes on any pod in the api-gateway service.
+>
+>> For capacity planning guidelines, see the infrastructure runbook section on horizontal pod autoscaling.
+
+## Triggered Query
+` + "```promql\navg(rate(container_cpu_usage_seconds_total{service=\"api-gateway\"}[5m])) by (pod) > 0.9\n```" + `
+
+## Inline Details
+
+This alert was generated by SigNoz using ` + "`alertmanager`" + ` rules engine.
+`
+
+func TestRenderHTML_Composite(t *testing.T) {
+	html, err := RenderHTML(testMarkdown)
+	require.NoError(t, err)
+
+	expected := "<h1>🔥 FIRING: High CPU Usage on api-gateway</h1>\n" +
+		"<p><a href=\"https://signoz.example.com/alerts/123\">https://signoz.example.com/alerts/123</a>\n<a href=\"https://runbooks.example.com/cpu-high\">https://runbooks.example.com/cpu-high</a></p>\n" +
+		"<h2>Alert Details</h2>\n" +
+		"<p><strong>Status:</strong> <strong>FIRING</strong> | <em>api-gateway</em> service is experiencing high CPU usage. <del>resolved</del> previously.</p>\n" +
+		"<p>Alert triggered because <code>cpu_usage_percent</code> exceeded threshold <code>90</code>.</p>\n" +
+		"<p><a href=\"https://signoz.example.com/alerts/123\">View Alert in SigNoz</a> | <a href=\"https://signoz.example.com/logs?service=api-gateway\">View Logs</a> | <a href=\"https://signoz.example.com/traces?service=api-gateway\">View Traces</a></p>\n" +
+		"<p><img src=\"https://signoz.example.com/badges/critical.svg\" alt=\"critical\" title=\"Critical Alert\"></p>\n" +
+		"<h2>Alert Labels</h2>\n" +
+		"<table>\n<thead>\n<tr>\n<th>Label</th>\n<th>Value</th>\n</tr>\n</thead>\n" +
+		"<tbody>\n<tr>\n<td>service</td>\n<td>api-gateway</td>\n</tr>\n" +
+		"<tr>\n<td>instance</td>\n<td>pod-5a8b3c</td>\n</tr>\n" +
+		"<tr>\n<td>severity</td>\n<td>critical</td>\n</tr>\n" +
+		"<tr>\n<td>region</td>\n<td>us-east-1</td>\n</tr>\n</tbody>\n</table>\n" +
+		"<h2>Remediation Steps</h2>\n" +
+		"<ol>\n<li>Check current CPU usage on the pod</li>\n<li>Review recent deployments for regressions</li>\n<li>Scale horizontally if load-related\n" +
+		"<ol>\n<li>Increase replica count</li>\n<li>Verify HPA configuration</li>\n</ol>\n</li>\n</ol>\n" +
+		"<h2>Affected Services</h2>\n" +
+		"<ul>\n<li>api-gateway</li>\n<li>auth-service</li>\n<li>payment-service\n" +
+		"<ul>\n<li>payment-processor</li>\n<li>payment-validator</li>\n</ul>\n</li>\n</ul>\n" +
+		"<h2>Incident Checklist</h2>\n" +
+		"<ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> Alert acknowledged</li>\n" +
+		"<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> On-call notified</li>\n" +
+		"<li><input disabled=\"\" type=\"checkbox\"> Root cause identified</li>\n" +
+		"<li><input disabled=\"\" type=\"checkbox\"> Fix deployed</li>\n</ul>\n" +
+		"<h2>Alert Rule Description</h2>\n" +
+		"<blockquote>\n<p>This alert fires when CPU usage exceeds 90% for more than 5 minutes on any pod in the api-gateway service.</p>\n" +
+		"<blockquote>\n<p>For capacity planning guidelines, see the infrastructure runbook section on horizontal pod autoscaling.</p>\n</blockquote>\n</blockquote>\n" +
+		"<h2>Triggered Query</h2>\n" +
+		"<pre><code class=\"language-promql\">avg(rate(container_cpu_usage_seconds_total{service=&quot;api-gateway&quot;}[5m])) by (pod) &gt; 0.9\n</code></pre>\n" +
+		"<h2>Inline Details</h2>\n" +
+		"<p>This alert was generated by SigNoz using <code>alertmanager</code> rules engine.</p>\n"
+
+	assert.Equal(t, expected, html)
+}
+
+func TestRenderHTML_InlineFormatting(t *testing.T) {
+	input := `# 🔥 FIRING: High CPU on api-gateway
+## Alert Status
+
+**FIRING** alert for *api-gateway* service — ~~resolved~~ previously.
+
+Metric ` + "`cpu_usage_percent`" + ` exceeded threshold. [View in SigNoz](https://signoz.example.com/alerts/123)
+
+![critical](https://signoz.example.com/badges/critical.svg "Critical Alert")`
+
+	html, err := RenderHTML(input)
+	require.NoError(t, err)
+
+	expected := "<h1>🔥 FIRING: High CPU on api-gateway</h1>\n<h2>Alert Status</h2>\n" +
+		"<p><strong>FIRING</strong> alert for <em>api-gateway</em> service — <del>resolved</del> previously.</p>\n" +
+		"<p>Metric <code>cpu_usage_percent</code> exceeded threshold. <a href=\"https://signoz.example.com/alerts/123\">View in SigNoz</a></p>\n" +
+		"<p><img src=\"https://signoz.example.com/badges/critical.svg\" alt=\"critical\" title=\"Critical Alert\"></p>\n"
+
+	assert.Equal(t, expected, html)
+}
+
+func TestRenderHTML_BlockElements(t *testing.T) {
+	input := `1. Check CPU usage on the pod
+2. Review recent deployments
+3. Scale horizontally if needed
+
+* api-gateway
+* auth-service
+* payment-service
+
+- [x] Alert acknowledged
+- [ ] Root cause identified
+
+> This alert fires when CPU usage exceeds 90% for more than 5 minutes.
+
+| Label    | Value       |
+| -------- | ----------- |
+| service  | api-gateway |
+| severity | <no value>    |
+
+` + "```promql\navg(rate(container_cpu_usage_seconds_total{service=\"api-gateway\"}[5m])) by (pod) > 0.9\n```"
+
+	html, err := RenderHTML(input)
+	require.NoError(t, err)
+
+	expected := "<ol>\n<li>Check CPU usage on the pod</li>\n<li>Review recent deployments</li>\n<li>Scale horizontally if needed</li>\n</ol>\n" +
+		"<ul>\n<li>api-gateway</li>\n<li>auth-service</li>\n<li>payment-service</li>\n</ul>\n" +
+		"<ul>\n<li><input checked=\"\" disabled=\"\" type=\"checkbox\"> Alert acknowledged</li>\n" +
+		"<li><input disabled=\"\" type=\"checkbox\"> Root cause identified</li>\n</ul>\n" +
+		"<blockquote>\n<p>This alert fires when CPU usage exceeds 90% for more than 5 minutes.</p>\n</blockquote>\n" +
+		"<table>\n<thead>\n<tr>\n<th>Label</th>\n<th>Value</th>\n</tr>\n</thead>\n" +
+		"<tbody>\n<tr>\n<td>service</td>\n<td>api-gateway</td>\n</tr>\n" +
+		"<tr>\n<td>severity</td>\n<td>&lt;no value&gt;</td>\n</tr>\n</tbody>\n</table>\n" +
+		"<pre><code class=\"language-promql\">avg(rate(container_cpu_usage_seconds_total{service=&quot;api-gateway&quot;}[5m])) by (pod) &gt; 0.9\n</code></pre>\n"
+
+	assert.Equal(t, expected, html)
+}

pkg/templating/markdownrenderer/markdownrenderer.go

@@ -0,0 +1,62 @@
+package markdownrenderer
+
+import (
+	"bytes"
+	"sync"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/templating/markdownrenderer/blockkit"
+	"github.com/SigNoz/signoz/pkg/templating/markdownrenderer/mrkdwn"
+	"github.com/yuin/goldmark"
+	"github.com/yuin/goldmark/extension"
+)
+
+// htmlRenderer is built once and shared. Goldmark's built-in HTML path and
+// the novalue extension carry no mutable state, so a single goldmark.Markdown
+// is safe to Convert concurrently.
+var htmlRenderer = goldmark.New(goldmark.WithExtensions(extension.GFM, escapeNoValue))
+
+// The Slack renderers hold per-document state on the node renderer (list
+// context, table context, style stack, blockquote/list prefixes). Two
+// goroutines calling Convert on the same goldmark.Markdown would corrupt
+// that state. A sync.Pool gives each concurrent caller its own instance
+// while still amortising the cost of building the pipeline.
+var (
+	blockkitPool = sync.Pool{
+		New: func() any {
+			return goldmark.New(goldmark.WithExtensions(blockkit.Extender))
+		},
+	}
+	mrkdwnPool = sync.Pool{
+		New: func() any {
+			return goldmark.New(goldmark.WithExtensions(mrkdwn.Extender))
+		},
+	}
+)
+
+// RenderHTML converts markdown to HTML.
+func RenderHTML(markdown string) (string, error) {
+	return render(htmlRenderer, markdown, "HTML")
+}
+
+// RenderSlackBlockKit converts markdown to a Slack Block Kit JSON array.
+func RenderSlackBlockKit(markdown string) (string, error) {
+	md := blockkitPool.Get().(goldmark.Markdown)
+	defer blockkitPool.Put(md)
+	return render(md, markdown, "Slack Block Kit")
+}
+
+// RenderSlackMrkdwn converts markdown to Slack's mrkdwn format.
+func RenderSlackMrkdwn(markdown string) (string, error) {
+	md := mrkdwnPool.Get().(goldmark.Markdown)
+	defer mrkdwnPool.Put(md)
+	return render(md, markdown, "Slack mrkdwn")
+}
+
+func render(md goldmark.Markdown, markdown string, format string) (string, error) {
+	var buf bytes.Buffer
+	if err := md.Convert([]byte(markdown), &buf); err != nil {
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "failed to convert markdown to %s", format)
+	}
+	return buf.String(), nil
+}

pkg/templating/markdownrenderer/mrkdwn/doc.go

@@ -0,0 +1,4 @@
+// Package mrkdwn provides a goldmark extension that renders markdown as
+// Slack's "mrkdwn" text format (the legacy text field used in attachments
+// and message payloads).
+package mrkdwn

pkg/templating/markdownrenderer/mrkdwn/mrkdwn.go

@@ -0,0 +1,404 @@
+package mrkdwn
+
+import (
+	"bytes"
+	"fmt"
+	"strings"
+	"unicode/utf8"
+
+	"github.com/yuin/goldmark"
+	"github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/extension"
+	extensionast "github.com/yuin/goldmark/extension/ast"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/util"
+)
+
+// Extender is a goldmark.Extender that registers the Slack mrkdwn node
+// renderer together with the GFM extensions it relies on (tables,
+// strikethrough).
+var Extender goldmark.Extender = &extender{}
+
+type extender struct{}
+
+func (e *extender) Extend(m goldmark.Markdown) {
+	extension.Table.Extend(m)
+	extension.Strikethrough.Extend(m)
+	m.Renderer().AddOptions(
+		renderer.WithNodeRenderers(util.Prioritized(newRenderer(), 1)),
+	)
+}
+
+// nodeRenderer renders nodes as Slack mrkdwn.
+type nodeRenderer struct {
+	prefixes []string
+}
+
+func newRenderer() renderer.NodeRenderer {
+	return &nodeRenderer{}
+}
+
+// RegisterFuncs implements NodeRenderer.RegisterFuncs.
+func (r *nodeRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
+	// Blocks
+	reg.Register(ast.KindDocument, r.renderDocument)
+	reg.Register(ast.KindHeading, r.renderHeading)
+	reg.Register(ast.KindBlockquote, r.renderBlockquote)
+	reg.Register(ast.KindCodeBlock, r.renderCodeBlock)
+	reg.Register(ast.KindFencedCodeBlock, r.renderCodeBlock)
+	reg.Register(ast.KindList, r.renderList)
+	reg.Register(ast.KindListItem, r.renderListItem)
+	reg.Register(ast.KindParagraph, r.renderParagraph)
+	reg.Register(ast.KindTextBlock, r.renderTextBlock)
+	reg.Register(ast.KindRawHTML, r.renderRawHTML)
+	reg.Register(ast.KindThematicBreak, r.renderThematicBreak)
+
+	// Inlines
+	reg.Register(ast.KindAutoLink, r.renderAutoLink)
+	reg.Register(ast.KindCodeSpan, r.renderCodeSpan)
+	reg.Register(ast.KindEmphasis, r.renderEmphasis)
+	reg.Register(ast.KindImage, r.renderImage)
+	reg.Register(ast.KindLink, r.renderLink)
+	reg.Register(ast.KindText, r.renderText)
+
+	// Extensions
+	reg.Register(extensionast.KindStrikethrough, r.renderStrikethrough)
+	reg.Register(extensionast.KindTable, r.renderTable)
+}
+
+func (r *nodeRenderer) writePrefix(w util.BufWriter) {
+	for _, p := range r.prefixes {
+		_, _ = w.WriteString(p)
+	}
+}
+
+// writeLineSeparator writes a newline followed by the current prefix.
+// Used for tight separations (e.g., between list items or text blocks).
+func (r *nodeRenderer) writeLineSeparator(w util.BufWriter) {
+	_ = w.WriteByte('\n')
+	r.writePrefix(w)
+}
+
+// writeBlockSeparator writes a blank line separator between block-level elements,
+// respecting any active prefixes for proper nesting (e.g., inside blockquotes).
+func (r *nodeRenderer) writeBlockSeparator(w util.BufWriter) {
+	r.writeLineSeparator(w)
+	r.writeLineSeparator(w)
+}
+
+// separateFromPrevious writes a block separator if the node has a previous sibling.
+func (r *nodeRenderer) separateFromPrevious(w util.BufWriter, n ast.Node) {
+	if n.PreviousSibling() != nil {
+		r.writeBlockSeparator(w)
+	}
+}
+
+func (r *nodeRenderer) renderDocument(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		// The renderer is pooled, so wipe any prefix stack left over from a
+		// prior document (e.g. one that errored mid-walk and left push/pop
+		// unbalanced) before starting a fresh convert.
+		r.prefixes = r.prefixes[:0]
+	} else {
+		_, _ = w.WriteString("\n\n")
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderHeading(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.separateFromPrevious(w, node)
+	}
+	_, _ = w.WriteString("*")
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderBlockquote(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.separateFromPrevious(w, n)
+		r.prefixes = append(r.prefixes, "> ")
+		_, _ = w.WriteString("> ")
+	} else {
+		r.prefixes = r.prefixes[:len(r.prefixes)-1]
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderCodeBlock(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.separateFromPrevious(w, n)
+		// start code block and write code line by line
+		_, _ = w.WriteString("```\n")
+		l := n.Lines().Len()
+		for i := 0; i < l; i++ {
+			line := n.Lines().At(i)
+			v := line.Value(source)
+			_, _ = w.Write(v)
+		}
+	} else {
+		_, _ = w.WriteString("```")
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderList(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		if node.PreviousSibling() != nil {
+			r.writeLineSeparator(w)
+			// another line break if not a nested list item and starting another block
+			if node.Parent() == nil || node.Parent().Kind() != ast.KindListItem {
+				r.writeLineSeparator(w)
+			}
+		}
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderListItem(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		if n.PreviousSibling() != nil {
+			r.writeLineSeparator(w)
+		}
+		parent := n.Parent().(*ast.List)
+		// compute and write the prefix based on list type and index
+		var prefixStr string
+		if parent.IsOrdered() {
+			index := parent.Start
+			for c := parent.FirstChild(); c != nil && c != n; c = c.NextSibling() {
+				index++
+			}
+			prefixStr = fmt.Sprintf("%d. ", index)
+		} else {
+			prefixStr = "• "
+		}
+		_, _ = w.WriteString(prefixStr)
+		r.prefixes = append(r.prefixes, "\t") // add tab for nested list items
+	} else {
+		r.prefixes = r.prefixes[:len(r.prefixes)-1]
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderParagraph(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.separateFromPrevious(w, n)
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderTextBlock(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering && n.PreviousSibling() != nil {
+		r.writeLineSeparator(w)
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderRawHTML(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		n := n.(*ast.RawHTML)
+		l := n.Segments.Len()
+		for i := 0; i < l; i++ {
+			segment := n.Segments.At(i)
+			_, _ = w.Write(segment.Value(source))
+		}
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderThematicBreak(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		r.separateFromPrevious(w, n)
+		_, _ = w.WriteString("---")
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderAutoLink(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	n := node.(*ast.AutoLink)
+	url := string(n.URL(source))
+	label := string(n.Label(source))
+
+	if n.AutoLinkType == ast.AutoLinkEmail && !strings.HasPrefix(strings.ToLower(url), "mailto:") {
+		url = "mailto:" + url
+	}
+
+	if url == label {
+		_, _ = fmt.Fprintf(w, "<%s>", url)
+	} else {
+		_, _ = fmt.Fprintf(w, "<%s|%s>", url, label)
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderCodeSpan(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
+	if entering {
+		_ = w.WriteByte('`')
+		for c := n.FirstChild(); c != nil; c = c.NextSibling() {
+			segment := c.(*ast.Text).Segment
+			value := segment.Value(source)
+			if bytes.HasSuffix(value, []byte("\n")) { // replace newline with space
+				_, _ = w.Write(value[:len(value)-1])
+				_ = w.WriteByte(' ')
+			} else {
+				_, _ = w.Write(value)
+			}
+		}
+		return ast.WalkSkipChildren, nil
+	}
+	_ = w.WriteByte('`')
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderEmphasis(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	n := node.(*ast.Emphasis)
+	mark := "_"
+	if n.Level == 2 {
+		mark = "*"
+	}
+	_, _ = w.WriteString(mark)
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderLink(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	n := node.(*ast.Link)
+	if entering {
+		_, _ = w.WriteString("<")
+		_, _ = w.Write(util.URLEscape(n.Destination, true))
+		_, _ = w.WriteString("|")
+	} else {
+		_, _ = w.WriteString(">")
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderImage(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	n := node.(*ast.Image)
+	_, _ = w.WriteString("<")
+	_, _ = w.Write(util.URLEscape(n.Destination, true))
+	_, _ = w.WriteString("|")
+
+	// Write the alt text directly
+	var altBuf bytes.Buffer
+	for c := n.FirstChild(); c != nil; c = c.NextSibling() {
+		if textNode, ok := c.(*ast.Text); ok {
+			altBuf.Write(textNode.Segment.Value(source))
+		}
+	}
+	_, _ = w.Write(altBuf.Bytes())
+
+	_, _ = w.WriteString(">")
+	return ast.WalkSkipChildren, nil
+}
+
+func (r *nodeRenderer) renderText(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+	n := node.(*ast.Text)
+	segment := n.Segment
+	value := segment.Value(source)
+	_, _ = w.Write(value)
+	if n.HardLineBreak() || n.SoftLineBreak() {
+		r.writeLineSeparator(w)
+	}
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderStrikethrough(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	_, _ = w.WriteString("~")
+	return ast.WalkContinue, nil
+}
+
+func (r *nodeRenderer) renderTable(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) {
+	if !entering {
+		return ast.WalkContinue, nil
+	}
+
+	r.separateFromPrevious(w, node)
+
+	// Collect cells and max widths
+	var rows [][]string
+	var colWidths []int
+
+	for c := node.FirstChild(); c != nil; c = c.NextSibling() {
+		if c.Kind() == extensionast.KindTableHeader || c.Kind() == extensionast.KindTableRow {
+			var row []string
+			colIdx := 0
+			for cc := c.FirstChild(); cc != nil; cc = cc.NextSibling() {
+				if cc.Kind() == extensionast.KindTableCell {
+					cellText := extractPlainText(cc, source)
+					row = append(row, cellText)
+					runeLen := utf8.RuneCountInString(cellText)
+					if colIdx >= len(colWidths) {
+						colWidths = append(colWidths, runeLen)
+					} else if runeLen > colWidths[colIdx] {
+						colWidths[colIdx] = runeLen
+					}
+					colIdx++
+				}
+			}
+			rows = append(rows, row)
+		}
+	}
+
+	// writing table in code block
+	_, _ = w.WriteString("```\n")
+	for i, row := range rows {
+		for colIdx, cellText := range row {
+			width := 0
+			if colIdx < len(colWidths) {
+				width = colWidths[colIdx]
+			}
+			runeLen := utf8.RuneCountInString(cellText)
+			padding := max(0, width-runeLen)
+
+			_, _ = w.WriteString(cellText)
+			_, _ = w.WriteString(strings.Repeat(" ", padding))
+			if colIdx < len(row)-1 {
+				_, _ = w.WriteString(" | ")
+			}
+		}
+		_ = w.WriteByte('\n')
+
+		// Print separator after header
+		if i == 0 {
+			for colIdx := range row {
+				width := 0
+				if colIdx < len(colWidths) {
+					width = colWidths[colIdx]
+				}
+				_, _ = w.WriteString(strings.Repeat("-", width))
+				if colIdx < len(row)-1 {
+					_, _ = w.WriteString("-|-")
+				}
+			}
+			_ = w.WriteByte('\n')
+		}
+	}
+	_, _ = w.WriteString("```")
+
+	return ast.WalkSkipChildren, nil
+}
+
+// extractPlainText extracts all the text content from the given node.
+func extractPlainText(n ast.Node, source []byte) string {
+	var buf bytes.Buffer
+	_ = ast.Walk(n, func(node ast.Node, entering bool) (ast.WalkStatus, error) {
+		if !entering {
+			return ast.WalkContinue, nil
+		}
+		if textNode, ok := node.(*ast.Text); ok {
+			buf.Write(textNode.Segment.Value(source))
+		} else if strNode, ok := node.(*ast.String); ok {
+			buf.Write(strNode.Value)
+		}
+		return ast.WalkContinue, nil
+	})
+	return strings.TrimSpace(buf.String())
+}

pkg/templating/markdownrenderer/mrkdwn/mrkdwn_test.go

@@ -0,0 +1,115 @@
+package mrkdwn
+
+import (
+	"bytes"
+	"testing"
+
+	"github.com/yuin/goldmark"
+)
+
+func TestRenderer(t *testing.T) {
+	tests := []struct {
+		name     string
+		markdown string
+		expected string
+	}{
+		{
+			name:     "Heading with Thematic Break",
+			markdown: "# Title 1\n# Hello World\n---\nthis is sometext",
+			expected: "*Title 1*\n\n*Hello World*\n\n---\n\nthis is sometext\n\n",
+		},
+		{
+			name:     "Blockquote",
+			markdown: "> This is a quote\n> It continues",
+			expected: "> This is a quote\n> It continues\n\n",
+		},
+		{
+			name:     "Fenced Code Block",
+			markdown: "```go\npackage main\nfunc main() {}\n```",
+			expected: "```\npackage main\nfunc main() {}\n```\n\n",
+		},
+		{
+			name:     "Unordered List",
+			markdown: "- item 1\n- item 2\n- item 3",
+			expected: "• item 1\n• item 2\n• item 3\n\n",
+		},
+		{
+			name:     "nested unordered list",
+			markdown: "- item 1\n- item 2\n\t- item 2.1\n\t\t- item 2.1.1\n\t\t- item 2.1.2\n\t- item 2.2\n- item 3",
+			expected: "• item 1\n• item 2\n\t• item 2.1\n\t\t• item 2.1.1\n\t\t• item 2.1.2\n\t• item 2.2\n• item 3\n\n",
+		},
+		{
+			name:     "Ordered List",
+			markdown: "1. item 1\n2. item 2\n3. item 3",
+			expected: "1. item 1\n2. item 2\n3. item 3\n\n",
+		},
+		{
+			name:     "nested ordered list",
+			markdown: "1. item 1\n2. item 2\n\t1. item 2.1\n\t\t1. item 2.1.1\n\t\t2. item 2.1.2\n\t2. item 2.2\n\t3. item 2.3\n3. item 3\n4. item 4",
+			expected: "1. item 1\n2. item 2\n\t1. item 2.1\n\t\t1. item 2.1.1\n\t\t2. item 2.1.2\n\t2. item 2.2\n\t3. item 2.3\n3. item 3\n4. item 4\n\n",
+		},
+		{
+			name:     "Links and AutoLinks",
+			markdown: "This is a [link](https://example.com) and an autolink <https://test.com>",
+			expected: "This is a <https://example.com|link> and an autolink <https://test.com>\n\n",
+		},
+		{
+			name:     "Images",
+			markdown: "An image ![alt text](https://example.com/image.png)",
+			expected: "An image <https://example.com/image.png|alt text>\n\n",
+		},
+		{
+			name:     "Emphasis",
+			markdown: "This is **bold** and *italic* and __bold__ and _italic_",
+			expected: "This is *bold* and _italic_ and *bold* and _italic_\n\n",
+		},
+		{
+			name:     "Strikethrough",
+			markdown: "This is ~~strike~~",
+			expected: "This is ~strike~\n\n",
+		},
+		{
+			name:     "Code Span",
+			markdown: "This is `inline code` embedded.",
+			expected: "This is `inline code` embedded.\n\n",
+		},
+		{
+			name:     "Table",
+			markdown: "Col 1 | Col 2 | Col 3\n--- | --- | ---\nVal 1 | Long Value 2 | 3\nShort | V | 1000",
+			expected: "```\nCol 1 | Col 2        | Col 3\n------|--------------|------\nVal 1 | Long Value 2 | 3    \nShort | V            | 1000 \n```\n\n",
+		},
+		{
+			name:     "Mixed Nested Lists",
+			markdown: "1. first\n\t- nested bullet\n\t- another bullet\n2. second",
+			expected: "1. first\n\t• nested bullet\n\t• another bullet\n2. second\n\n",
+		},
+		{
+			name:     "Email AutoLink",
+			markdown: "<user@example.com>",
+			expected: "<mailto:user@example.com|user@example.com>\n\n",
+		},
+		{
+			name:     "No value string parsed as is",
+			markdown: "Service: <no value>",
+			expected: "Service: <no value>\n\n",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			md := goldmark.New(goldmark.WithExtensions(Extender))
+
+			var buf bytes.Buffer
+			if err := md.Convert([]byte(tt.markdown), &buf); err != nil {
+				t.Fatalf("failed to convert: %v", err)
+			}
+
+			// Do exact string matching
+			actual := buf.String()
+			if actual != tt.expected {
+				t.Errorf("\nExpected:\n%q\nGot:\n%q\nRaw Expected:\n%s\nRaw Got:\n%s",
+					tt.expected, actual, tt.expected, actual)
+			}
+		})
+	}
+}

pkg/templating/markdownrenderer/novalue.go

@@ -0,0 +1,61 @@
+package markdownrenderer
+
+import (
+	"github.com/yuin/goldmark"
+	gast "github.com/yuin/goldmark/ast"
+	"github.com/yuin/goldmark/renderer"
+	"github.com/yuin/goldmark/renderer/html"
+	"github.com/yuin/goldmark/util"
+)
+
+// Go text/template writes the literal string "<no value>" when a referenced
+// key is missing. The default goldmark HTML path treats it as raw HTML and
+// drops it, hiding the missing value. This renderer escapes it so operators
+// can see which variable was unset in the rendered notification.
+type noValueHTMLRenderer struct {
+	html.Config
+}
+
+func newNoValueHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
+	r := &noValueHTMLRenderer{Config: html.NewConfig()}
+	for _, opt := range opts {
+		opt.SetHTMLOption(&r.Config)
+	}
+	return r
+}
+
+func (r *noValueHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) {
+	reg.Register(gast.KindRawHTML, r.renderRawHTML)
+}
+
+func (r *noValueHTMLRenderer) renderRawHTML(w util.BufWriter, source []byte, node gast.Node, entering bool) (gast.WalkStatus, error) {
+	if !entering {
+		return gast.WalkSkipChildren, nil
+	}
+	n := node.(*gast.RawHTML)
+	if r.Unsafe {
+		for i := 0; i < n.Segments.Len(); i++ {
+			segment := n.Segments.At(i)
+			_, _ = w.Write(segment.Value(source))
+		}
+		return gast.WalkSkipChildren, nil
+	}
+	if string(n.Segments.Value(source)) == "<no value>" {
+		_, _ = w.WriteString("&lt;no value&gt;")
+		return gast.WalkSkipChildren, nil
+	}
+	_, _ = w.WriteString("<!-- raw HTML omitted -->")
+	return gast.WalkSkipChildren, nil
+}
+
+type escapeNoValueExtension struct{}
+
+// escapeNoValue renders the literal `<no value>` produced by Go's text/template
+// as visible escaped text instead of dropping it as raw HTML.
+var escapeNoValue = &escapeNoValueExtension{}
+
+func (e *escapeNoValueExtension) Extend(m goldmark.Markdown) {
+	m.Renderer().AddOptions(renderer.WithNodeRenderers(
+		util.Prioritized(newNoValueHTMLRenderer(), 500),
+	))
+}

pkg/templating/markdownrenderer/novalue_test.go

@@ -0,0 +1,66 @@
+package markdownrenderer
+
+import (
+	"bytes"
+	"testing"
+
+	"github.com/yuin/goldmark"
+	"github.com/yuin/goldmark/extension"
+)
+
+func TestEscapeNoValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		markdown string
+		expected string
+	}{
+		{
+			name:     "plain text",
+			markdown: "Service: <no value>",
+			expected: "<p>Service: &lt;no value&gt;</p>\n",
+		},
+		{
+			name:     "inside strong",
+			markdown: "Service: **<no value>**",
+			expected: "<p>Service: <strong>&lt;no value&gt;</strong></p>\n",
+		},
+		{
+			name:     "inside emphasis",
+			markdown: "Service: *<no value>*",
+			expected: "<p>Service: <em>&lt;no value&gt;</em></p>\n",
+		},
+		{
+			name:     "inside strikethrough",
+			markdown: "Service: ~~<no value>~~",
+			expected: "<p>Service: <del>&lt;no value&gt;</del></p>\n",
+		},
+		{
+			name:     "real html still omitted",
+			markdown: "hello <div>world</div>",
+			expected: "<p>hello <!-- raw HTML omitted -->world<!-- raw HTML omitted --></p>\n",
+		},
+		{
+			name:     "inside heading",
+			markdown: "# Title <no value>",
+			expected: "<h1>Title &lt;no value&gt;</h1>\n",
+		},
+		{
+			name:     "inside list item",
+			markdown: "- item <no value>",
+			expected: "<ul>\n<li>item &lt;no value&gt;</li>\n</ul>\n",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			gm := goldmark.New(goldmark.WithExtensions(escapeNoValue, extension.Strikethrough))
+			var buf bytes.Buffer
+			if err := gm.Convert([]byte(tt.markdown), &buf); err != nil {
+				t.Fatal(err)
+			}
+			if buf.String() != tt.expected {
+				t.Errorf("expected:\n%s\ngot:\n%s", tt.expected, buf.String())
+			}
+		})
+	}
+}