fix(pr): address comments

frontend/__mocks__/lib/env.ts

@@ -0,0 +1,3 @@
+export const IS_DEV = false;
+export const IS_PROD = true;
+export const MODE = 'test';

frontend/jest.config.ts

@@ -29,6 +29,7 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
+		'^lib/env$': '<rootDir>/__mocks__/lib/env.ts',
 		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -22,6 +22,7 @@ import {
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { IS_DEV } from 'lib/env';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
@@ -30,6 +31,33 @@ import { useCmdK } from '../../providers/cmdKProvider';
 
 import './cmdKPalette.scss';
 
+const AuthZDevModal = IS_DEV
+	? React.lazy(() =>
+			import('lib/authz/devtools/AuthZDevModal/AuthZDevModal').then((m) => ({
+				default: m.AuthZDevModal,
+			})),
+		)
+	: null;
+
+const AuthZDevFloatingIndicator = IS_DEV
+	? React.lazy(() =>
+			import('lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator').then(
+				(m) => ({
+					default: m.AuthZDevFloatingIndicator,
+				}),
+			),
+		)
+	: null;
+
+const openAuthZDevModal = IS_DEV
+	? (): void => {
+			void import('lib/authz/devtools/useAuthZDevStore').then((m) => {
+				m.openAuthZDevModal();
+				return m;
+			});
+		}
+	: undefined;
+
 type CmdAction = {
 	id: string;
 	name: string;
@@ -110,6 +138,7 @@ export function CmdKPalette({
 		aiAssistant: isAIAssistantEnabled
 			? { open: handleOpenAIAssistant }
 			: undefined,
+		authzDevTools: openAuthZDevModal ? { open: openAuthZDevModal } : undefined,
 	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
@@ -146,37 +175,57 @@ export function CmdKPalette({
 	};
 
 	return (
-		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
-			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
-			<CommandList className="cmdk-list-scroll">
-				<CommandEmpty>No results</CommandEmpty>
-				{grouped.map(([section, items]) => (
-					<CommandGroup
-						key={section}
-						heading={section}
-						className="cmdk-section-heading"
-					>
-						{items.map((it) => (
-							<CommandItem
-								key={it.id}
-								onSelect={(): void => handleInvoke(it)}
-								value={it.name}
-								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
-							>
-								<span
-									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
+		<>
+			<CommandDialog
+				open={open}
+				onOpenChange={setOpen}
+				position="top"
+				offset={110}
+			>
+				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+				<CommandList className="cmdk-list-scroll">
+					<CommandEmpty>No results</CommandEmpty>
+					{grouped.map(([section, items]) => (
+						<CommandGroup
+							key={section}
+							heading={section}
+							className="cmdk-section-heading"
+						>
+							{items.map((it) => (
+								<CommandItem
+									key={it.id}
+									onSelect={(): void => handleInvoke(it)}
+									value={it.name}
+									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
 								>
-									{it.icon}
-								</span>
-								{it.name}
-								{it.shortcut && it.shortcut.length > 0 && (
-									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-								)}
-							</CommandItem>
-						))}
-					</CommandGroup>
-				))}
-			</CommandList>
-		</CommandDialog>
+									<span
+										className={cx(
+											'cmd-item-icon',
+											it.id === 'ai-assistant' && 'noz-icon',
+										)}
+									>
+										{it.icon}
+									</span>
+									{it.name}
+									{it.shortcut && it.shortcut.length > 0 && (
+										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+									)}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					))}
+				</CommandList>
+			</CommandDialog>
+			{IS_DEV && AuthZDevModal && (
+				<React.Suspense fallback={null}>
+					<AuthZDevModal />
+				</React.Suspense>
+			)}
+			{IS_DEV && AuthZDevFloatingIndicator && (
+				<React.Suspense fallback={null}>
+					<AuthZDevFloatingIndicator />
+				</React.Suspense>
+			)}
+		</>
 	);
 }

frontend/src/constants/shortcutActions.tsx

@@ -43,10 +43,17 @@ type ActionDeps = {
 	aiAssistant?: {
 		open: () => void;
 	};
+	/**
+	 * Provided only in development mode. Opens the AuthZ DevTools modal
+	 * for testing permission overrides.
+	 */
+	authzDevTools?: {
+		open: () => void;
+	};
 };
 
 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange, aiAssistant } = deps;
+	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
 
 	const actions: CmdAction[] = [
 		{
@@ -302,5 +309,17 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 		});
 	}
 
+	if (authzDevTools) {
+		actions.push({
+			id: 'authz-devtools',
+			name: 'AuthZ DevTools',
+			keywords: 'authz permissions rbac debug devtools override testing',
+			section: 'Dev',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: authzDevTools.open,
+		});
+	}
+
 	return actions;
 }

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -48,6 +48,8 @@ describe('CreateRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.authz.test.tsx

@@ -77,6 +77,8 @@ describe('EditRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.authz.test.tsx

@@ -409,6 +409,8 @@ describe('ViewRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx

@@ -16,6 +16,8 @@ const noPermissions = {
 	isFetching: false,
 	error: null,
 	permissions: null,
+	allowed: false,
+	deniedPermissions: [],
 	refetchPermissions: jest.fn(),
 };
 

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.module.css

@@ -0,0 +1,28 @@
+.container {
+	position: fixed;
+	top: 12px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 9998;
+	pointer-events: auto;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.button {
+	box-shadow:
+		0 4px 12px rgb(0 0 0 / 15%),
+		0 0 0 1px rgb(0 0 0 / 5%);
+}
+
+.badge {
+	margin-left: 4px;
+}
+
+.closeButton {
+	border-radius: 4px;
+	box-shadow:
+		0 4px 12px rgb(0 0 0 / 15%),
+		0 0 0 1px rgb(0 0 0 / 5%);
+}

frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.tsx

@@ -0,0 +1,61 @@
+import { X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useAuthZDevStore } from '../useAuthZDevStore';
+
+import styles from './AuthZDevFloatingIndicator.module.css';
+
+export function AuthZDevFloatingIndicator(): JSX.Element | null {
+	const overrides = useAuthZDevStore((s) => s.overrides);
+	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
+	const openModal = useAuthZDevStore((s) => s.openModal);
+	const [isDismissed, setIsDismissed] = useState(false);
+
+	const overrideCount = Object.keys(overrides).length;
+
+	if (overrideCount === 0 || isModalOpen || isDismissed) {
+		return null;
+	}
+
+	const handleOpen = (): void => {
+		setIsDismissed(false);
+		openModal();
+	};
+
+	const handleDismiss = (e: React.MouseEvent): void => {
+		e.stopPropagation();
+		setIsDismissed(true);
+	};
+
+	return createPortal(
+		<div className={styles.container}>
+			<Button
+				variant="solid"
+				color="warning"
+				size="sm"
+				onClick={handleOpen}
+				className={styles.button}
+				data-testid="authz-dev-floating-indicator"
+			>
+				AuthZ Overrides
+				<Badge color="warning" className={styles.badge}>
+					{overrideCount}
+				</Badge>
+			</Button>
+			<Button
+				variant="ghost"
+				color="secondary"
+				size="sm"
+				onClick={handleDismiss}
+				className={styles.closeButton}
+				aria-label="Dismiss indicator"
+				data-testid="authz-dev-floating-dismiss"
+				prefix={<X />}
+			/>
+		</div>,
+		document.body,
+	);
+}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.module.css

@@ -0,0 +1,140 @@
+.modal {
+	--dialog-width: 640px;
+	--dialog-max-width: 92vw;
+	--dialog-max-height: 78vh;
+	--dialog-description-padding: var(--spacing-4) var(--spacing-4) 0px
+		var(--spacing-4);
+
+	[data-slot='dialog-description'],
+	[data-slot='dialog-header'] {
+		background-color: var(--l2-background);
+	}
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	max-height: calc(78vh - 80px);
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	gap: var(--spacing-4);
+	padding-bottom: var(--spacing-4);
+}
+
+.searchRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+
+	--input-background: var(--l3-background);
+	--input-hover-background: var(--l3-background);
+	--input-focus-background: var(--l3-background);
+	--input-border-color: var(--l3-border);
+	--input-hover-border-color: var(--l3-border);
+	--input-focus-border-color: var(--l3-border);
+
+	--select-trigger-background-color: var(--l3-background);
+	--select-trigger-hover-background: var(--l3-background);
+	--select-trigger-focus-background: var(--l3-background);
+	--select-trigger-border-color: var(--l3-border);
+
+	--select-content-background: var(--l3-background);
+	--select-item-highlight-background: var(--l3-background-hover);
+}
+
+.search {
+	flex: 1 1 auto;
+	min-width: 0;
+
+	--input-width: 100%;
+}
+
+.filter {
+	flex: 0 0 176px;
+	/* Normalize the library trigger height (2.25rem) to match the input. */
+	--select-trigger-height: 2rem;
+}
+
+.search > *,
+.filter > * {
+	box-sizing: border-box;
+}
+
+.searchIcon {
+	display: inline-flex;
+	color: var(--l3-foreground);
+}
+
+.actionsRow {
+	display: flex;
+	gap: var(--spacing-3);
+}
+
+.actionButton {
+	flex: 0 0 auto;
+	height: 2rem;
+}
+
+.list {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	padding: var(--spacing-4) 0;
+	overflow-y: auto;
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.sectionHeader {
+	display: flex;
+	align-items: baseline;
+	gap: var(--spacing-3);
+	padding: var(--spacing-3) var(--spacing-2);
+	margin: 0 0 var(--spacing-1);
+	border-bottom: 1px solid var(--l2-border);
+}
+
+.empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 160px;
+	padding: var(--spacing-16);
+}
+
+.footer {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	padding: var(--spacing-4) 0;
+	border-top: 1px solid var(--l2-border);
+}
+
+.hint {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.hintGroup {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.count {
+	flex: 0 0 auto;
+	white-space: nowrap;
+}

frontend/src/lib/authz/devtools/AuthZDevModal/AuthZDevModal.tsx

@@ -0,0 +1,240 @@
+import { Search } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Input } from '@signozhq/ui/input';
+import { Kbd } from '@signozhq/ui/kbd';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { useCallback, useRef } from 'react';
+
+import { useAuthZDevStore } from '../useAuthZDevStore';
+import { useAuthZQueryInvalidation } from '../useAuthZQueryInvalidation';
+
+import { PermissionRow } from './PermissionRow';
+import { useAuthZDevModalData } from './useAuthZDevModalData';
+import { useModalKeyboard } from './useModalKeyboard';
+
+import styles from './AuthZDevModal.module.css';
+
+export function AuthZDevModal(): JSX.Element | null {
+	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
+	const closeModal = useAuthZDevStore((s) => s.closeModal);
+	const observed = useAuthZDevStore((s) => s.observed);
+	const overrides = useAuthZDevStore((s) => s.overrides);
+	const cycleOverride = useAuthZDevStore((s) => s.cycleOverride);
+	const setOverride = useAuthZDevStore((s) => s.setOverride);
+	const clearAllOverrides = useAuthZDevStore((s) => s.clearAllOverrides);
+	const grantAll = useAuthZDevStore((s) => s.grantAll);
+	const denyAll = useAuthZDevStore((s) => s.denyAll);
+
+	useAuthZQueryInvalidation(overrides);
+
+	const searchInputRef = useRef<HTMLInputElement>(null);
+
+	const {
+		search,
+		setSearch,
+		resourceFilter,
+		setResourceFilter,
+		observedList,
+		resourceFilterItems,
+		filteredPermissions,
+		groups,
+		orderedPermissions,
+		indexByPermission,
+		hasActiveFilter,
+		filteredOverrideCount,
+		overrideCount,
+	} = useAuthZDevModalData(observed, overrides);
+
+	const { selectedIndex, setSelectedIndex } = useModalKeyboard({
+		permissions: orderedPermissions,
+		overrides,
+		onCycle: cycleOverride,
+		onSetOverride: setOverride,
+		onClose: closeModal,
+		searchInputRef,
+	});
+
+	const handleOpenChange = useCallback(
+		(open: boolean): void => {
+			if (!open) {
+				closeModal();
+				setSelectedIndex(-1);
+			}
+		},
+		[closeModal, setSelectedIndex],
+	);
+
+	const handleGrantAll = useCallback((): void => {
+		grantAll(hasActiveFilter ? filteredPermissions : undefined);
+	}, [grantAll, hasActiveFilter, filteredPermissions]);
+
+	const handleDenyAll = useCallback((): void => {
+		denyAll(hasActiveFilter ? filteredPermissions : undefined);
+	}, [denyAll, hasActiveFilter, filteredPermissions]);
+
+	const handleClearAll = useCallback((): void => {
+		clearAllOverrides(hasActiveFilter ? filteredPermissions : undefined);
+	}, [clearAllOverrides, hasActiveFilter, filteredPermissions]);
+
+	const handleSelectIndex = useCallback(
+		(index: number) => (): void => {
+			setSelectedIndex(index);
+		},
+		[setSelectedIndex],
+	);
+
+	return (
+		<DialogWrapper
+			open={isModalOpen}
+			onOpenChange={handleOpenChange}
+			title="AuthZ DevTools"
+			subTitle="Force permission results locally without touching the backend."
+			className={styles.modal}
+			width="wide"
+		>
+			<div className={styles.content}>
+				<div className={styles.header}>
+					<div className={styles.searchRow}>
+						<div className={styles.search}>
+							<Input
+								ref={searchInputRef}
+								placeholder="Search permissions..."
+								value={search}
+								onChange={(e): void => setSearch(e.target.value)}
+								prefix={<Search size={14} className={styles.searchIcon} />}
+								aria-label="Search permissions"
+								data-testid="authz-dev-search"
+							/>
+						</div>
+						<div className={styles.filter}>
+							<SelectSimple
+								items={resourceFilterItems}
+								value={resourceFilter}
+								onChange={(value): void => setResourceFilter(value as string)}
+								testId="authz-dev-resource-filter"
+								withPortal={false}
+							/>
+						</div>
+					</div>
+					<div className={styles.actionsRow}>
+						<Button
+							className={styles.actionButton}
+							variant="outlined"
+							color="success"
+							size="sm"
+							onClick={handleGrantAll}
+							disabled={filteredPermissions.length === 0}
+							data-testid="authz-dev-grant-all"
+						>
+							{hasActiveFilter ? 'Grant filtered' : 'Grant all'}
+						</Button>
+						<Button
+							className={styles.actionButton}
+							variant="outlined"
+							color="error"
+							size="sm"
+							onClick={handleDenyAll}
+							disabled={filteredPermissions.length === 0}
+							data-testid="authz-dev-deny-all"
+						>
+							{hasActiveFilter ? 'Deny filtered' : 'Deny all'}
+						</Button>
+						<Button
+							className={styles.actionButton}
+							variant="outlined"
+							color="secondary"
+							size="sm"
+							onClick={handleClearAll}
+							disabled={
+								hasActiveFilter ? filteredOverrideCount === 0 : overrideCount === 0
+							}
+							data-testid="authz-dev-clear-all"
+						>
+							{hasActiveFilter
+								? `Clear filtered (${filteredOverrideCount})`
+								: `Clear all (${overrideCount})`}
+						</Button>
+					</div>
+				</div>
+				<div className={styles.list} data-testid="authz-dev-permission-list">
+					{orderedPermissions.length === 0 ? (
+						<div className={styles.empty}>
+							<Typography.Text align="center" color="muted">
+								{observedList.length === 0
+									? 'No permissions observed yet. Navigate the app to trigger permission checks.'
+									: 'No permissions match your search.'}
+							</Typography.Text>
+						</div>
+					) : (
+						groups.map((group) => (
+							<div key={group.resource} className={styles.section}>
+								<div className={styles.sectionHeader}>
+									<Typography.Text as="span" size="medium" weight="semibold">
+										{group.resource}
+									</Typography.Text>
+									<Typography.Text as="span" size="small" color="muted">
+										{group.items.length}
+									</Typography.Text>
+								</div>
+								{group.items.map((permission) => {
+									const index = indexByPermission.get(permission) ?? 0;
+									return (
+										<PermissionRow
+											key={permission}
+											observed={observed[permission]}
+											override={overrides[permission]}
+											isSelected={index === selectedIndex}
+											onSetOverride={setOverride}
+											onSelect={handleSelectIndex(index)}
+										/>
+									);
+								})}
+							</div>
+						))
+					)}
+				</div>
+				<div className={styles.footer}>
+					<div className={styles.hint}>
+						<span className={styles.hintGroup}>
+							<Kbd>↑</Kbd>
+							<Kbd>↓</Kbd>
+							<Typography.Text as="span" size="small" color="muted">
+								navigate
+							</Typography.Text>
+						</span>
+						<span className={styles.hintGroup}>
+							<Kbd>←</Kbd>
+							<Kbd>→</Kbd>
+							<Typography.Text as="span" size="small" color="muted">
+								mode
+							</Typography.Text>
+						</span>
+						<span className={styles.hintGroup}>
+							<Kbd>1-5</Kbd>
+							<Typography.Text as="span" size="small" color="muted">
+								set
+							</Typography.Text>
+						</span>
+						<span className={styles.hintGroup}>
+							<Kbd>/</Kbd>
+							<Typography.Text as="span" size="small" color="muted">
+								search
+							</Typography.Text>
+						</span>
+						<span className={styles.hintGroup}>
+							<Kbd>Esc</Kbd>
+							<Typography.Text as="span" size="small" color="muted">
+								close
+							</Typography.Text>
+						</span>
+					</div>
+					<Typography.Text size="small" color="muted" className={styles.count}>
+						{orderedPermissions.length} of {observedList.length} permissions
+					</Typography.Text>
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.module.css

@@ -0,0 +1,60 @@
+.segmented {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-1);
+	padding: var(--spacing-1);
+	background: var(--l2-background);
+	border: 1px solid var(--l3-border);
+	border-radius: var(--radius-2);
+}
+
+.segment {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	height: 22px;
+	padding: 0 var(--spacing-3);
+	color: var(--l2-foreground);
+	background: transparent;
+	border: none;
+	border-radius: calc(var(--radius-2) - 1px);
+	cursor: pointer;
+	transition:
+		background 120ms ease,
+		color 120ms ease;
+}
+
+.segment:not(.segmentActive):hover {
+	color: var(--l2-foreground-hover);
+	background: var(--l2-background);
+}
+
+.segmentIcon {
+	display: inline-flex;
+	align-items: center;
+}
+
+.segment.optAuto {
+	color: var(--l1-foreground);
+	background: var(--l3-background);
+}
+
+.segment.optGranted {
+	color: var(--success-foreground);
+	background: color-mix(in srgb, var(--accent-forest) 22%, transparent);
+}
+
+.segment.optDenied {
+	color: var(--danger-foreground);
+	background: color-mix(in srgb, var(--accent-cherry) 22%, transparent);
+}
+
+.segment.optDelay {
+	color: var(--warning-foreground);
+	background: color-mix(in srgb, var(--accent-amber) 22%, transparent);
+}
+
+.segment.optError {
+	color: var(--danger-foreground);
+	background: color-mix(in srgb, var(--accent-cherry) 22%, transparent);
+}

frontend/src/lib/authz/devtools/AuthZDevModal/OverrideControl.tsx

@@ -0,0 +1,90 @@
+import { Check, Clock, RotateCcw, X, Zap } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import type { BrandedPermission } from '../../hooks/useAuthZ/types';
+import { OverrideState } from '../types';
+
+import styles from './OverrideControl.module.css';
+
+type OverrideControlProps = {
+	permission: BrandedPermission;
+	value: OverrideState;
+	onSelect: (permission: BrandedPermission, state: OverrideState) => void;
+};
+
+type OverrideOption = {
+	state: OverrideState;
+	label: string;
+	icon: React.ReactNode;
+	activeClassName: string;
+};
+
+const OVERRIDE_OPTIONS: OverrideOption[] = [
+	{
+		state: OverrideState.Reset,
+		label: 'Auto',
+		icon: <RotateCcw size={13} />,
+		activeClassName: styles.optAuto,
+	},
+	{
+		state: OverrideState.Granted,
+		label: 'Grant',
+		icon: <Check size={13} />,
+		activeClassName: styles.optGranted,
+	},
+	{
+		state: OverrideState.Denied,
+		label: 'Deny',
+		icon: <X size={13} />,
+		activeClassName: styles.optDenied,
+	},
+	{
+		state: OverrideState.Delay,
+		label: 'Delay',
+		icon: <Clock size={13} />,
+		activeClassName: styles.optDelay,
+	},
+	{
+		state: OverrideState.Error,
+		label: 'Error',
+		icon: <Zap size={13} />,
+		activeClassName: styles.optError,
+	},
+];
+
+export function OverrideControl({
+	permission,
+	value,
+	onSelect,
+}: OverrideControlProps): JSX.Element {
+	return (
+		<div className={styles.segmented}>
+			{OVERRIDE_OPTIONS.map((option) => {
+				const isActive = value === option.state;
+				return (
+					<button
+						key={option.state}
+						type="button"
+						aria-pressed={isActive}
+						aria-label={option.label}
+						title={option.label}
+						className={cx(styles.segment, {
+							[styles.segmentActive]: isActive,
+							[option.activeClassName]: isActive,
+						})}
+						onClick={(): void => onSelect(permission, option.state)}
+						data-testid={`override-${option.state}-${permission}`}
+					>
+						<span className={styles.segmentIcon}>{option.icon}</span>
+						{isActive && (
+							<Typography.Text as="span" size="small" weight="medium">
+								{option.label}
+							</Typography.Text>
+						)}
+					</button>
+				);
+			})}
+		</div>
+	);
+}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.module.css

@@ -0,0 +1,68 @@
+.permissionRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-6);
+	padding: var(--spacing-2);
+	border: 1px solid transparent;
+	border-radius: var(--radius-2);
+	cursor: pointer;
+	transition:
+		background 120ms ease,
+		border-color 120ms ease;
+}
+
+.permissionRow:hover {
+	background: var(--l2-background-hover);
+}
+
+/* Overridden rows carry a faint full border in the override color. */
+.permissionRow.rowGranted {
+	border-color: color-mix(in srgb, var(--accent-forest) 45%, transparent);
+}
+
+.permissionRow.rowDenied {
+	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
+}
+
+.permissionRow.rowDelay {
+	border-color: color-mix(in srgb, var(--accent-amber) 45%, transparent);
+}
+
+.permissionRow.rowError {
+	border-color: color-mix(in srgb, var(--accent-cherry) 45%, transparent);
+}
+
+/* Keyboard selection wins over the override border. */
+.permissionRow.isSelected {
+	border-color: var(--primary);
+}
+
+.permissionInfo {
+	display: flex;
+	flex: 1 1 auto;
+	align-items: baseline;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.relation {
+	flex: 0 0 auto;
+	--typography-color: var(--accent-primary);
+}
+
+.separator {
+	flex: 0 0 auto;
+}
+
+.object {
+	flex: 0 1 auto;
+	min-width: 0;
+}
+
+.permissionMeta {
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+	gap: var(--spacing-5);
+}

frontend/src/lib/authz/devtools/AuthZDevModal/PermissionRow.tsx

@@ -0,0 +1,114 @@
+import { Badge, BadgeColor } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import { memo, useCallback, useMemo } from 'react';
+
+import type { BrandedPermission } from '../../hooks/useAuthZ/types';
+import { parsePermission } from '../../hooks/useAuthZ/utils';
+import { OverrideState, type ObservedPermission } from '../types';
+
+import { OverrideControl } from './OverrideControl';
+
+import styles from './PermissionRow.module.css';
+
+type PermissionRowProps = {
+	observed: ObservedPermission;
+	override: OverrideState | undefined;
+	isSelected: boolean;
+	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
+	onSelect: () => void;
+};
+
+const ROW_OVERRIDE_CLASSES: Record<OverrideState, string | null> = {
+	[OverrideState.Reset]: null,
+	[OverrideState.Granted]: styles.rowGranted,
+	[OverrideState.Denied]: styles.rowDenied,
+	[OverrideState.Delay]: styles.rowDelay,
+	[OverrideState.Error]: styles.rowError,
+};
+
+export const PermissionRow = memo(function PermissionRow({
+	observed,
+	override,
+	isSelected,
+	onSetOverride,
+	onSelect,
+}: PermissionRowProps): JSX.Element {
+	const currentState = override ?? OverrideState.Reset;
+
+	const { relation, objectId } = useMemo(() => {
+		const parsed = parsePermission(observed.permission);
+		const separatorIndex = parsed.object.indexOf(':');
+		return {
+			relation: parsed.relation,
+			objectId:
+				separatorIndex === -1
+					? parsed.object
+					: parsed.object.slice(separatorIndex + 1),
+		};
+	}, [observed.permission]);
+
+	const handleSetOverride = useCallback(
+		(permission: BrandedPermission, state: OverrideState): void => {
+			onSelect();
+			onSetOverride(permission, state);
+		},
+		[onSelect, onSetOverride],
+	);
+
+	let apiColor: BadgeColor = 'secondary';
+	let apiLabel = 'API ?';
+	if (observed.apiValue === true) {
+		apiColor = 'success';
+		apiLabel = 'API ✓';
+	} else if (observed.apiValue === false) {
+		apiColor = 'error';
+		apiLabel = 'API ✗';
+	}
+
+	return (
+		<div
+			className={cx(styles.permissionRow, ROW_OVERRIDE_CLASSES[currentState], {
+				[styles.isSelected]: isSelected,
+			})}
+			data-testid={`permission-row-${observed.permission}`}
+		>
+			<div className={styles.permissionInfo}>
+				<Typography.Text
+					as="span"
+					size="small"
+					weight="medium"
+					className={styles.relation}
+				>
+					{relation}
+				</Typography.Text>
+				<Typography.Text
+					as="span"
+					size="small"
+					color="muted"
+					className={styles.separator}
+				>
+					:
+				</Typography.Text>
+				<Typography.Text
+					as="span"
+					size="small"
+					truncate={1}
+					className={styles.object}
+				>
+					{objectId}
+				</Typography.Text>
+			</div>
+			<div className={styles.permissionMeta}>
+				<Badge variant="outline" color={apiColor}>
+					{apiLabel}
+				</Badge>
+				<OverrideControl
+					permission={observed.permission}
+					value={currentState}
+					onSelect={handleSetOverride}
+				/>
+			</div>
+		</div>
+	);
+});

frontend/src/lib/authz/devtools/AuthZDevModal/useAuthZDevModalData.ts

@@ -0,0 +1,172 @@
+import { useMemo, useState } from 'react';
+
+import type { BrandedPermission } from '../../hooks/useAuthZ/types';
+import { parsePermission } from '../../hooks/useAuthZ/utils';
+import type { ObservedPermission, OverrideState } from '../types';
+
+type SelectItem = {
+	value: string;
+	label: string;
+};
+
+type PermissionGroup = {
+	resource: string;
+	items: BrandedPermission[];
+};
+
+type UseAuthZDevModalDataResult = {
+	search: string;
+	setSearch: (search: string) => void;
+	resourceFilter: string;
+	setResourceFilter: (filter: string) => void;
+	observedList: ObservedPermission[];
+	resourceFilterItems: SelectItem[];
+	filteredPermissions: BrandedPermission[];
+	groups: PermissionGroup[];
+	orderedPermissions: BrandedPermission[];
+	indexByPermission: Map<string, number>;
+	hasActiveFilter: boolean;
+	filteredOverrideCount: number;
+	overrideCount: number;
+};
+
+export function useAuthZDevModalData(
+	observed: Record<string, ObservedPermission>,
+	overrides: Record<string, OverrideState>,
+): UseAuthZDevModalDataResult {
+	const [search, setSearch] = useState('');
+	const [resourceFilter, setResourceFilter] = useState<string>('all');
+
+	const observedList = useMemo(
+		() =>
+			Object.values(observed).sort((a, b) =>
+				a.permission.localeCompare(b.permission),
+			),
+		[observed],
+	);
+
+	const resources = useMemo(() => {
+		const resourceSet = new Set<string>();
+		for (const obs of observedList) {
+			const { object } = parsePermission(obs.permission);
+			const resource = object.split(':')[0];
+			resourceSet.add(resource);
+		}
+		return Array.from(resourceSet).sort();
+	}, [observedList]);
+
+	const resourceFilterItems = useMemo<SelectItem[]>(
+		() => [
+			{ value: 'all', label: 'All resources' },
+			...resources.map((resource) => ({
+				value: resource,
+				label: resource,
+			})),
+		],
+		[resources],
+	);
+
+	const filteredPermissions = useMemo(() => {
+		let filtered = observedList;
+
+		if (search) {
+			const searchLower = search.toLowerCase();
+			filtered = filtered.filter((obs) =>
+				obs.permission.toLowerCase().includes(searchLower),
+			);
+		}
+
+		if (resourceFilter !== 'all') {
+			filtered = filtered.filter((obs) => {
+				const { object } = parsePermission(obs.permission);
+				const resource = object.split(':')[0];
+				return resource === resourceFilter;
+			});
+		}
+
+		return filtered.map((obs) => obs.permission);
+	}, [observedList, search, resourceFilter]);
+
+	const { groups, orderedPermissions } = useMemo(() => {
+		const groupMap = new Map<string, BrandedPermission[]>();
+		for (const permission of filteredPermissions) {
+			const { object } = parsePermission(permission);
+			const resource = object.split(':')[0] || 'other';
+			const bucket = groupMap.get(resource);
+			if (bucket) {
+				bucket.push(permission);
+			} else {
+				groupMap.set(resource, [permission]);
+			}
+		}
+
+		const sortItems = (items: BrandedPermission[]): BrandedPermission[] =>
+			[...items].sort((a, b) => {
+				const objA = parsePermission(a).object;
+				const objB = parsePermission(b).object;
+				const idA = objA.split(':')[1] ?? '';
+				const idB = objB.split(':')[1] ?? '';
+				const isWildcardA = idA === '*';
+				const isWildcardB = idB === '*';
+
+				// Wildcards first
+				if (isWildcardA && !isWildcardB) {
+					return -1;
+				}
+				if (!isWildcardA && isWildcardB) {
+					return 1;
+				}
+
+				// Then by object ID, then by full permission
+				const idCompare = idA.localeCompare(idB);
+				if (idCompare !== 0) {
+					return idCompare;
+				}
+				return a.localeCompare(b);
+			});
+
+		const sortedGroups = Array.from(groupMap, ([resource, items]) => ({
+			resource,
+			items: sortItems(items),
+		})).sort((a, b) => a.resource.localeCompare(b.resource));
+		return {
+			groups: sortedGroups,
+			orderedPermissions: sortedGroups.flatMap((group) => group.items),
+		};
+	}, [filteredPermissions]);
+
+	const indexByPermission = useMemo(() => {
+		const map = new Map<string, number>();
+		orderedPermissions.forEach((permission, index) => {
+			map.set(permission, index);
+		});
+		return map;
+	}, [orderedPermissions]);
+
+	const hasActiveFilter = search !== '' || resourceFilter !== 'all';
+
+	const filteredOverrideCount = useMemo(() => {
+		if (!hasActiveFilter) {
+			return Object.keys(overrides).length;
+		}
+		return filteredPermissions.filter((p) => p in overrides).length;
+	}, [hasActiveFilter, overrides, filteredPermissions]);
+
+	const overrideCount = Object.keys(overrides).length;
+
+	return {
+		search,
+		setSearch,
+		resourceFilter,
+		setResourceFilter,
+		observedList,
+		resourceFilterItems,
+		filteredPermissions,
+		groups,
+		orderedPermissions,
+		indexByPermission,
+		hasActiveFilter,
+		filteredOverrideCount,
+		overrideCount,
+	};
+}

frontend/src/lib/authz/devtools/AuthZDevModal/useModalKeyboard.ts

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import type { BrandedPermission } from '../../hooks/useAuthZ/types';
+import { OverrideState, OVERRIDE_CYCLE } from '../types';
+
+type UseModalKeyboardOptions = {
+	permissions: BrandedPermission[];
+	overrides: Record<string, OverrideState>;
+	onCycle: (permission: BrandedPermission) => void;
+	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
+	onClose: () => void;
+	searchInputRef: React.RefObject<HTMLInputElement | null>;
+};
+
+type UseModalKeyboardResult = {
+	selectedIndex: number;
+	setSelectedIndex: (index: number) => void;
+};
+
+type KeyContext = {
+	permissions: BrandedPermission[];
+	overrides: Record<string, OverrideState>;
+	selectedIndex: number;
+	setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
+	onCycle: (permission: BrandedPermission) => void;
+	onSetOverride: (permission: BrandedPermission, state: OverrideState) => void;
+};
+
+const ARROW_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']);
+
+const NUMBER_KEY_INDEX: Record<string, number> = {
+	'1': 0,
+	'2': 1,
+	'3': 2,
+	'4': 3,
+	'5': 4,
+};
+
+function stepOverrideState(
+	current: OverrideState,
+	direction: number,
+): OverrideState {
+	const currentIndex = OVERRIDE_CYCLE.indexOf(current);
+	const nextIndex =
+		(currentIndex + direction + OVERRIDE_CYCLE.length) % OVERRIDE_CYCLE.length;
+	return OVERRIDE_CYCLE[nextIndex];
+}
+
+// Arrow keys stay active even while the search input is focused so the list can
+// be driven without leaving the search field.
+function handleArrowKey(key: string, ctx: KeyContext): void {
+	if (key === 'ArrowDown') {
+		ctx.setSelectedIndex((prev) =>
+			Math.min(prev + 1, ctx.permissions.length - 1),
+		);
+		return;
+	}
+	if (key === 'ArrowUp') {
+		ctx.setSelectedIndex((prev) => Math.max(prev - 1, 0));
+		return;
+	}
+	const selected = ctx.permissions[ctx.selectedIndex];
+	if (!selected) {
+		return;
+	}
+	const direction = key === 'ArrowLeft' ? -1 : 1;
+	ctx.onSetOverride(
+		selected,
+		stepOverrideState(ctx.overrides[selected] ?? OverrideState.Reset, direction),
+	);
+}
+
+// Number and space/enter shortcuts type into the search field, so they only run
+// when it is not focused. Returns whether the key was handled.
+function handleActionKey(key: string, ctx: KeyContext): boolean {
+	const selected = ctx.permissions[ctx.selectedIndex];
+	const numberIndex = NUMBER_KEY_INDEX[key];
+	if (numberIndex !== undefined) {
+		if (selected) {
+			ctx.onSetOverride(selected, OVERRIDE_CYCLE[numberIndex]);
+		}
+		return true;
+	}
+	if (key === ' ' || key === 'Enter') {
+		if (selected) {
+			ctx.onCycle(selected);
+		}
+		return true;
+	}
+	return false;
+}
+
+export function useModalKeyboard({
+	permissions,
+	overrides,
+	onCycle,
+	onSetOverride,
+	onClose,
+	searchInputRef,
+}: UseModalKeyboardOptions): UseModalKeyboardResult {
+	// Start with no selection (-1) to avoid accidental override changes from
+	// Enter keypress that opened the modal also triggering cycleOverride.
+	const [selectedIndex, setSelectedIndex] = useState(-1);
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			const isSearchFocused = document.activeElement === searchInputRef.current;
+
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				onClose();
+				return;
+			}
+
+			if (e.key === '/') {
+				if (!isSearchFocused) {
+					e.preventDefault();
+					searchInputRef.current?.focus();
+				}
+				return;
+			}
+
+			const ctx: KeyContext = {
+				permissions,
+				overrides,
+				selectedIndex,
+				setSelectedIndex,
+				onCycle,
+				onSetOverride,
+			};
+
+			if (ARROW_KEYS.has(e.key)) {
+				e.preventDefault();
+				handleArrowKey(e.key, ctx);
+				return;
+			}
+
+			if (isSearchFocused) {
+				return;
+			}
+
+			if (handleActionKey(e.key, ctx)) {
+				e.preventDefault();
+			}
+		},
+		[
+			permissions,
+			overrides,
+			selectedIndex,
+			onCycle,
+			onSetOverride,
+			onClose,
+			searchInputRef,
+		],
+	);
+
+	useEffect((): (() => void) => {
+		window.addEventListener('keydown', handleKeyDown);
+		return (): void => {
+			window.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [handleKeyDown]);
+
+	useEffect((): void => {
+		if (selectedIndex >= permissions.length && permissions.length > 0) {
+			setSelectedIndex(permissions.length - 1);
+		}
+	}, [permissions.length, selectedIndex]);
+
+	return {
+		selectedIndex,
+		setSelectedIndex,
+	};
+}

frontend/src/lib/authz/devtools/types.ts

@@ -0,0 +1,46 @@
+import type { BrandedPermission } from '../hooks/useAuthZ/types';
+
+export enum OverrideState {
+	Granted = 'granted',
+	Denied = 'denied',
+	Delay = 'delay',
+	Error = 'error',
+	Reset = 'reset',
+}
+
+export type ObservedPermission = {
+	permission: BrandedPermission;
+	apiValue: boolean | null;
+	lastSeen: number;
+};
+
+export type PermissionOverride = {
+	permission: BrandedPermission;
+	state: OverrideState;
+};
+
+export type AuthZDevStore = {
+	isModalOpen: boolean;
+	observed: Record<string, ObservedPermission>;
+	overrides: Record<string, OverrideState>;
+
+	openModal: () => void;
+	closeModal: () => void;
+	toggleModal: () => void;
+
+	registerObserved: (permission: BrandedPermission, apiValue: boolean) => void;
+	setOverride: (permission: BrandedPermission, state: OverrideState) => void;
+	clearOverride: (permission: BrandedPermission) => void;
+	clearAllOverrides: (permissions?: BrandedPermission[]) => void;
+	grantAll: (permissions?: BrandedPermission[]) => void;
+	denyAll: (permissions?: BrandedPermission[]) => void;
+	cycleOverride: (permission: BrandedPermission) => void;
+};
+
+export const OVERRIDE_CYCLE: OverrideState[] = [
+	OverrideState.Reset,
+	OverrideState.Granted,
+	OverrideState.Denied,
+	OverrideState.Delay,
+	OverrideState.Error,
+];

frontend/src/lib/authz/devtools/useAuthZDevStore.ts

@@ -0,0 +1,137 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import type { BrandedPermission } from '../hooks/useAuthZ/types';
+import { OverrideState, OVERRIDE_CYCLE, type AuthZDevStore } from './types';
+import { getScopedKey } from 'utils/storage';
+
+export const useAuthZDevStore = create<AuthZDevStore>()(
+	persist(
+		(set, get) => ({
+			isModalOpen: false,
+			observed: {},
+			overrides: {},
+
+			openModal: (): void => {
+				set({ isModalOpen: true });
+			},
+
+			closeModal: (): void => {
+				set({ isModalOpen: false });
+			},
+
+			toggleModal: (): void => {
+				set((state) => ({ isModalOpen: !state.isModalOpen }));
+			},
+
+			registerObserved: (
+				permission: BrandedPermission,
+				apiValue: boolean,
+			): void => {
+				set((state) => ({
+					observed: {
+						...state.observed,
+						[permission]: {
+							permission,
+							apiValue,
+							lastSeen: Date.now(),
+						},
+					},
+				}));
+			},
+
+			setOverride: (permission: BrandedPermission, state: OverrideState): void => {
+				if (state === OverrideState.Reset) {
+					get().clearOverride(permission);
+					return;
+				}
+				set((s) => ({
+					overrides: {
+						...s.overrides,
+						[permission]: state,
+					},
+				}));
+			},
+
+			clearOverride: (permission: BrandedPermission): void => {
+				set((state) => {
+					const { [permission]: _, ...rest } = state.overrides;
+					return { overrides: rest };
+				});
+			},
+
+			clearAllOverrides: (permissions?: BrandedPermission[]): void => {
+				if (permissions) {
+					set((state) => {
+						const newOverrides = { ...state.overrides };
+						for (const permission of permissions) {
+							delete newOverrides[permission];
+						}
+						return { overrides: newOverrides };
+					});
+				} else {
+					set({ overrides: {} });
+				}
+			},
+
+			grantAll: (permissions?: BrandedPermission[]): void => {
+				set((state) => {
+					const keys = permissions ?? Object.keys(state.observed);
+					const newOverrides: Record<string, OverrideState> = {
+						...state.overrides,
+					};
+					for (const key of keys) {
+						newOverrides[key] = OverrideState.Granted;
+					}
+					return { overrides: newOverrides };
+				});
+			},
+
+			denyAll: (permissions?: BrandedPermission[]): void => {
+				set((state) => {
+					const keys = permissions ?? Object.keys(state.observed);
+					const newOverrides: Record<string, OverrideState> = {
+						...state.overrides,
+					};
+					for (const key of keys) {
+						newOverrides[key] = OverrideState.Denied;
+					}
+					return { overrides: newOverrides };
+				});
+			},
+
+			cycleOverride: (permission: BrandedPermission): void => {
+				const currentOverride = get().overrides[permission] ?? OverrideState.Reset;
+				const currentIndex = OVERRIDE_CYCLE.indexOf(currentOverride);
+				const nextIndex = (currentIndex + 1) % OVERRIDE_CYCLE.length;
+				const nextState = OVERRIDE_CYCLE[nextIndex];
+				get().setOverride(permission, nextState);
+			},
+		}),
+		{
+			name: `@signoz/${getScopedKey('authz-dev-overrides')}`,
+			partialize: (state) => {
+				// Clear apiValue for permissions without active override (auto mode)
+				// since the API value can change between sessions
+				const observed: typeof state.observed = {};
+				for (const [key, obs] of Object.entries(state.observed)) {
+					observed[key] = {
+						...obs,
+						apiValue: key in state.overrides ? obs.apiValue : null,
+					};
+				}
+				return {
+					observed,
+					overrides: state.overrides,
+				};
+			},
+		},
+	),
+);
+
+export const openAuthZDevModal = (): void =>
+	useAuthZDevStore.getState().openModal();
+export const closeAuthZDevModal = (): void =>
+	useAuthZDevStore.getState().closeModal();
+export const toggleAuthZDevModal = (): void =>
+	useAuthZDevStore.getState().toggleModal();

frontend/src/lib/authz/devtools/useAuthZQueryInvalidation.ts

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import { useQueryClient } from 'react-query';
+
+import type { OverrideState } from './types';
+
+type Overrides = Record<string, OverrideState>;
+
+export function useAuthZQueryInvalidation(overrides: Overrides): void {
+	const queryClient = useQueryClient();
+	const prevOverridesRef = useRef<Overrides>(overrides);
+
+	useEffect(() => {
+		const prevOverrides = prevOverridesRef.current;
+		prevOverridesRef.current = overrides;
+
+		const allKeys = new Set([
+			...Object.keys(prevOverrides),
+			...Object.keys(overrides),
+		]);
+
+		for (const key of allKeys) {
+			if (prevOverrides[key] !== overrides[key]) {
+				// Reset query to initial state and trigger refetch for active observers
+				void queryClient.resetQueries(['authz', key]);
+			}
+		}
+	}, [overrides, queryClient]);
+}

frontend/src/lib/authz/hooks/useAuthZ/types.ts

@@ -89,5 +89,13 @@ export type UseAuthZResult = {
 	isFetching: boolean;
 	error: Error | null;
 	permissions: AuthZCheckResponse | null;
+	/**
+	 * True if every check is granted. False while loading or on error.
+	 */
+	allowed: boolean;
+	/**
+	 * Checks that resolved as not granted (empty while loading/error).
+	 */
+	deniedPermissions: BrandedPermission[];
 	refetchPermissions: () => void;
 };

frontend/src/lib/authz/hooks/useAuthZ/useAuthZ.authz.test.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useQueryClient } from 'react-query';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { AllTheProviders } from 'tests/test-utils';
@@ -46,12 +47,16 @@ describe('useAuthZ', () => {
 
 		expect(result.current.isLoading).toBe(true);
 		expect(result.current.permissions).toBeNull();
+		expect(result.current.allowed).toBe(false);
+		expect(result.current.deniedPermissions).toStrictEqual([]);
 
 		await waitFor(() => {
 			expect(result.current.isLoading).toBe(false);
 		});
 
 		expect(result.current.permissions).toStrictEqual(expectedResponse);
+		expect(result.current.allowed).toBe(false);
+		expect(result.current.deniedPermissions).toStrictEqual([permission2]);
 	});
 
 	it('should return error and null permissions when API errors', async () => {
@@ -73,6 +78,89 @@ describe('useAuthZ', () => {
 
 		expect(result.current.error).not.toBeNull();
 		expect(result.current.permissions).toBeNull();
+		expect(result.current.allowed).toBe(false);
+		expect(result.current.deniedPermissions).toStrictEqual([]);
+	});
+
+	it('should set allowed to true when all permissions are granted', async () => {
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [true, true])),
+				);
+			}),
+		);
+
+		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.allowed).toBe(true);
+		expect(result.current.deniedPermissions).toStrictEqual([]);
+	});
+
+	it('should collect all denied permissions when multiple are denied', async () => {
+		const permission1 = buildPermission('read', 'role:*');
+		const permission2 = buildPermission('update', 'role:123');
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [false, false])),
+				);
+			}),
+		);
+
+		const { result } = renderHook(() => useAuthZ([permission1, permission2]), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(result.current.allowed).toBe(false);
+		expect(result.current.deniedPermissions).toStrictEqual([
+			permission1,
+			permission2,
+		]);
+	});
+
+	it('should not fetch when enabled is false', async () => {
+		let requestCount = 0;
+		const permission = buildPermission('read', 'role:*');
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount += 1;
+				const payload = await req.json();
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const { result } = renderHook(
+			() => useAuthZ([permission], { enabled: false }),
+			{ wrapper },
+		);
+
+		await waitFor(() => {
+			expect(result.current.isLoading).toBe(false);
+		});
+
+		expect(requestCount).toBe(0);
+		expect(result.current.allowed).toBe(false);
+		expect(result.current.permissions).toStrictEqual({});
 	});
 
 	it('should refetch when permissions array changes', async () => {
@@ -474,3 +562,120 @@ describe('useAuthZ', () => {
 		expect(result2.current.permissions).not.toHaveProperty(permission1);
 	});
 });
+
+describe('useAuthZ cache invalidation', () => {
+	it('should re-render with updated data when query is invalidated', async () => {
+		const permission = buildPermission('read', 'role:*');
+
+		let requestCount = 0;
+		let shouldGrant = true;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [shouldGrant])),
+				);
+			}),
+		);
+
+		const { result } = renderHook(
+			() => {
+				const queryClient = useQueryClient();
+				const authz = useAuthZ([permission]);
+				return { authz, queryClient };
+			},
+			{ wrapper },
+		);
+
+		await waitFor(() => {
+			expect(result.current.authz.isLoading).toBe(false);
+		});
+
+		expect(requestCount).toBe(1);
+		expect(result.current.authz.allowed).toBe(true);
+		expect(result.current.authz.permissions).toStrictEqual({
+			[permission]: { isGranted: true },
+		});
+
+		// Change server response and reset query (forces refetch)
+		shouldGrant = false;
+
+		await act(async () => {
+			await result.current.queryClient.resetQueries(['authz', permission]);
+		});
+
+		await waitFor(() => {
+			expect(result.current.authz.allowed).toBe(false);
+		});
+
+		expect(requestCount).toBe(2);
+		expect(result.current.authz.permissions).toStrictEqual({
+			[permission]: { isGranted: false },
+		});
+	});
+
+	it('should re-render all components using the same permission when invalidated', async () => {
+		const permission = buildPermission('update', 'role:123');
+
+		let requestCount = 0;
+		let shouldGrant = true;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [shouldGrant])),
+				);
+			}),
+		);
+
+		// Two separate hooks using the same permission
+		const { result: result1 } = renderHook(
+			() => {
+				const queryClient = useQueryClient();
+				const authz = useAuthZ([permission]);
+				return { authz, queryClient };
+			},
+			{ wrapper },
+		);
+
+		const { result: result2 } = renderHook(() => useAuthZ([permission]), {
+			wrapper,
+		});
+
+		await waitFor(() => {
+			expect(result1.current.authz.isLoading).toBe(false);
+			expect(result2.current.isLoading).toBe(false);
+		});
+
+		// Both should show granted, single batched request
+		expect(requestCount).toBe(1);
+		expect(result1.current.authz.allowed).toBe(true);
+		expect(result2.current.allowed).toBe(true);
+
+		// Change server response and reset query (forces refetch)
+		shouldGrant = false;
+
+		await act(async () => {
+			await result1.current.queryClient.resetQueries(['authz', permission]);
+		});
+
+		// Both hooks should update
+		await waitFor(() => {
+			expect(result1.current.authz.allowed).toBe(false);
+			expect(result2.current.allowed).toBe(false);
+		});
+
+		expect(result1.current.authz.permissions).toStrictEqual({
+			[permission]: { isGranted: false },
+		});
+		expect(result2.current.permissions).toStrictEqual({
+			[permission]: { isGranted: false },
+		});
+	});
+});

frontend/src/lib/authz/hooks/useAuthZ/useAuthZ.tsx

@@ -1,13 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import { useQueries } from 'react-query';
+import { isAxiosError } from 'axios';
 import { authzCheck } from 'api/generated/services/authz';
 import type {
 	CoretypesObjectDTO,
 	AuthtypesTransactionDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { IS_DEV, MODE } from 'lib/env';
 
 import { AUTHZ_CACHE_TIME, SINGLE_FLIGHT_WAIT_TIME_MS } from './constants';
-import {
+import type {
 	AuthZCheckResponse,
 	BrandedPermission,
 	UseAuthZOptions,
@@ -17,6 +19,59 @@ import {
 	gettableTransactionToPermission,
 	permissionToTransactionDto,
 } from './utils';
+import { OverrideState } from '../../devtools/types';
+
+let devStoreRef:
+	| typeof import('../../devtools/useAuthZDevStore').useAuthZDevStore
+	| null = null;
+
+if (IS_DEV) {
+	void import('../../devtools/useAuthZDevStore').then((mod) => {
+		devStoreRef = mod.useAuthZDevStore;
+		return mod;
+	});
+}
+
+const DEV_DELAY_MS = 2000;
+
+function getDevOverride(permission: BrandedPermission): OverrideState | null {
+	if (!IS_DEV || !devStoreRef) {
+		return null;
+	}
+	return devStoreRef.getState().overrides[permission] ?? null;
+}
+
+async function applyDevOverrideToQuery(
+	permission: BrandedPermission,
+	fetchFn: () => Promise<AuthZCheckResponse>,
+): Promise<AuthZCheckResponse> {
+	const override = getDevOverride(permission);
+
+	if (override === OverrideState.Error) {
+		throw new Error(`[AuthZ DevTools] Simulated error for: ${permission}`);
+	}
+
+	if (override === OverrideState.Delay) {
+		await new Promise((resolve) => setTimeout(resolve, DEV_DELAY_MS));
+	}
+
+	const response = await fetchFn();
+
+	if (IS_DEV && devStoreRef) {
+		const apiValue = response[permission]?.isGranted ?? false;
+		devStoreRef.getState().registerObserved(permission, apiValue);
+	}
+
+	if (override === OverrideState.Granted) {
+		return { [permission]: { isGranted: true } };
+	}
+
+	if (override === OverrideState.Denied) {
+		return { [permission]: { isGranted: false } };
+	}
+
+	return response;
+}
 
 let ctx: Promise<AuthZCheckResponse> | null;
 let pendingPermissions: BrandedPermission[] = [];
@@ -27,10 +82,11 @@ function dispatchPermission(
 	pendingPermissions.push(permission);
 
 	if (!ctx) {
-		let resolve: (v: AuthZCheckResponse) => void, reject: (reason?: any) => void;
-		ctx = new Promise<AuthZCheckResponse>((r, re) => {
-			resolve = r;
-			reject = re;
+		let promiseResolve: (v: AuthZCheckResponse) => void,
+			promiseReject: (reason?: unknown) => void;
+		ctx = new Promise<AuthZCheckResponse>((resolve, reject) => {
+			promiseResolve = resolve;
+			promiseReject = reject;
 		});
 
 		setTimeout(() => {
@@ -38,7 +94,9 @@ function dispatchPermission(
 			pendingPermissions = [];
 			ctx = null;
 
-			fetchManyPermissions(copiedPermissions).then(resolve).catch(reject);
+			fetchManyPermissions(copiedPermissions)
+				.then(promiseResolve)
+				.catch(promiseReject);
 		}, SINGLE_FLIGHT_WAIT_TIME_MS);
 	}
 
@@ -85,19 +143,50 @@ export function useAuthZ(
 			return {
 				queryKey: ['authz', permission],
 				cacheTime: AUTHZ_CACHE_TIME,
+				staleTime: AUTHZ_CACHE_TIME,
+				// Keep errored state in cache instead of refetching when new observers subscribe
+				retryOnMount: false,
+				// Only override retry in non-test mode to avoid interfering with test-utils QueryClient defaults
+				...(MODE !== 'test' && {
+					retry: (failureCount: number, error: unknown): boolean => {
+						// Don't retry simulated dev errors - they will always fail
+						if (
+							error instanceof Error &&
+							error.message.includes('[AuthZ DevTools]')
+						) {
+							return false;
+						}
+						// Don't retry server errors (5xx) - they won't recover
+						if (
+							isAxiosError(error) &&
+							error.response?.status &&
+							error.response.status >= 500
+						) {
+							return false;
+						}
+						return failureCount < 3;
+					},
+				}),
 				refetchOnMount: false,
 				refetchIntervalInBackground: false,
 				refetchOnWindowFocus: false,
 				refetchOnReconnect: true,
 				enabled,
 				queryFn: async (): Promise<AuthZCheckResponse> => {
-					const response = await dispatchPermission(permission);
-
-					return {
-						[permission]: {
-							isGranted: response[permission].isGranted,
-						},
+					const fetchFn = async (): Promise<AuthZCheckResponse> => {
+						const response = await dispatchPermission(permission);
+						return {
+							[permission]: {
+								isGranted: response[permission].isGranted,
+							},
+						};
 					};
+
+					if (IS_DEV) {
+						return applyDevOverrideToQuery(permission, fetchFn);
+					}
+
+					return fetchFn();
 				},
 			};
 		}),
@@ -107,6 +196,7 @@ export function useAuthZ(
 		() => queryResults.some((q) => q.isLoading),
 		[queryResults],
 	);
+
 	const isFetching = useMemo(
 		() => queryResults.some((q) => q.isFetching),
 		[queryResults],
@@ -139,15 +229,31 @@ export function useAuthZ(
 
 	const refetchPermissions = useCallback(() => {
 		for (const query of queryResults) {
-			query.refetch();
+			void query.refetch();
 		}
 	}, [queryResults]);
 
+	const allowed = useMemo(() => {
+		if (isLoading || error || !data) {
+			return false;
+		}
+		return permissions.every((check) => data[check]?.isGranted === true);
+	}, [permissions, data, isLoading, error]);
+
+	const deniedPermissions = useMemo(() => {
+		if (!data) {
+			return [];
+		}
+		return permissions.filter((check) => data[check]?.isGranted !== true);
+	}, [permissions, data]);
+
 	return {
 		isLoading,
 		isFetching,
 		error,
 		permissions: data ?? null,
+		allowed,
+		deniedPermissions,
 		refetchPermissions,
 	};
 }

frontend/src/lib/authz/utils/authz-test-utils.ts

@@ -149,6 +149,8 @@ export function mockUseAuthZGrantAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: true }]),
 		) as UseAuthZResult['permissions'],
+		allowed: true,
+		deniedPermissions: [],
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -164,6 +166,8 @@ export function mockUseAuthZDenyAll(
 		permissions: Object.fromEntries(
 			permissions.map((p) => [p, { isGranted: false }]),
 		) as UseAuthZResult['permissions'],
+		allowed: false,
+		deniedPermissions: permissions,
 		refetchPermissions: jest.fn(),
 	};
 }
@@ -174,16 +178,23 @@ export function mockUseAuthZGrantByPrefix(
 	permissions: BrandedPermission[],
 	options?: UseAuthZOptions,
 ) => UseAuthZResult {
-	return (permissions, _options) => ({
-		isLoading: false,
-		isFetching: false,
-		error: null,
-		permissions: Object.fromEntries(
-			permissions.map((p) => [
-				p,
-				{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
-			]),
-		) as UseAuthZResult['permissions'],
-		refetchPermissions: jest.fn(),
-	});
+	return (permissions, _options) => {
+		const denied = permissions.filter(
+			(p) => !prefixes.some((prefix) => p.startsWith(prefix)),
+		);
+		return {
+			isLoading: false,
+			isFetching: false,
+			error: null,
+			permissions: Object.fromEntries(
+				permissions.map((p) => [
+					p,
+					{ isGranted: prefixes.some((prefix) => p.startsWith(prefix)) },
+				]),
+			) as UseAuthZResult['permissions'],
+			allowed: denied.length === 0,
+			deniedPermissions: denied,
+			refetchPermissions: jest.fn(),
+		};
+	};
 }

frontend/src/lib/env.ts

@@ -0,0 +1,3 @@
+export const IS_DEV = import.meta.env.DEV;
+export const IS_PROD = import.meta.env.PROD;
+export const MODE = import.meta.env.MODE;