feat(llm-pricing): add model cost drawer and wire into listing page

frontend/src/AppRoutes/pageComponents.ts

@@ -323,3 +323,10 @@ export const AIAssistantPage = Loadable(
 			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
 		),
 );
+
+export const LLMObservabilityModelPricingPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "LLM Observability Model Pricing Page" */ 'pages/LLMObservabilityModelPricing'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -22,6 +22,7 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
+	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -507,6 +508,13 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
+		exact: true,
+		component: LLMObservabilityModelPricingPage,
+		key: 'LLM_OBSERVABILITY_MODEL_PRICING',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/constants/routes.ts

@@ -91,6 +91,7 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
+	LLM_OBSERVABILITY_MODEL_PRICING: '/llm-observability/settings/model-pricing',
 } as const;
 
 export default ROUTES;

frontend/src/container/LLMObservabilityModelPricing/ExtraPricingBuckets.tsx

@@ -0,0 +1,148 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { CACHE_BUCKETS, CACHE_MODE_OPTIONS } from './constants';
+import { parsePricingAmount } from './utils';
+import type { CacheBucketKey, DrawerDraft } from './types';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface ExtraPricingBucketsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+// Optional, add-on-demand pricing buckets. A bucket is "added" once its value
+// is non-null; adding seeds it at 0 and removing clears it back to null. Only
+// the cache buckets are backed by the API today (pricing.cache.read/write).
+function ExtraPricingBuckets({
+	pricing,
+	isReadOnly,
+	onChange,
+}: ExtraPricingBucketsProps): JSX.Element {
+	const [isPicking, setIsPicking] = useState<boolean>(false);
+
+	const addedBuckets = CACHE_BUCKETS.filter((b) => pricing[b.key] !== null);
+	const availableBuckets = CACHE_BUCKETS.filter((b) => pricing[b.key] === null);
+
+	const addBucket = (key: CacheBucketKey): void => {
+		onChange({ [key]: 0 } as Partial<Pricing>);
+		// Close the picker once nothing is left to add.
+		if (availableBuckets.length <= 1) {
+			setIsPicking(false);
+		}
+	};
+
+	const removeBucket = (key: CacheBucketKey): void => {
+		onChange({ [key]: null } as Partial<Pricing>);
+	};
+
+	return (
+		<div className="extra-buckets-section drawer-section">
+			<div className="extra-buckets-section__head">
+				<span className="field-label">Extra pricing buckets</span>
+				<span className="optional-label">optional</span>
+			</div>
+
+			{addedBuckets.map((bucket) => (
+				<div className="bucket-row" key={bucket.key}>
+					<span className="bucket-row__name">{bucket.label}</span>
+					<Input
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing[bucket.key] ?? 0}
+						placeholder="0.00"
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							// Empty coerces to 0 (not null) so editing never makes the row
+							// vanish — removal is explicit via the trash button.
+							onChange({
+								[bucket.key]: parsePricingAmount(e.target.value) ?? 0,
+							} as Partial<Pricing>)
+						}
+						testId={`drawer-${bucket.testId}-cost`}
+					/>
+					<span className="bucket-row__unit">/ 1M</span>
+					{!isReadOnly && (
+						<button
+							type="button"
+							className="bucket-row__remove"
+							onClick={(): void => removeBucket(bucket.key)}
+							aria-label={`Remove ${bucket.label}`}
+							data-testid={`drawer-remove-${bucket.testId}`}
+						>
+							<Trash2 size={14} />
+						</button>
+					)}
+				</div>
+			))}
+
+			{addedBuckets.length > 0 && (
+				<div className="pricing-field cache-mode-field">
+					<label htmlFor="cache-mode">Cache mode</label>
+					<SelectSimple
+						id="cache-mode"
+						value={pricing.cacheMode}
+						items={CACHE_MODE_OPTIONS}
+						onChange={(v): void => onChange({ cacheMode: v as CacheModeDTO })}
+						disabled={isReadOnly}
+						className="full-width"
+						withPortal={false}
+						testId="drawer-cache-mode"
+					/>
+				</div>
+			)}
+
+			{!isReadOnly && !isPicking && availableBuckets.length > 0 && (
+				<Button
+					variant="dashed"
+					color="secondary"
+					className="bucket-add-btn"
+					prefix={<Plus size={14} />}
+					onClick={(): void => setIsPicking(true)}
+					testId="drawer-add-bucket-btn"
+				>
+					Add pricing bucket
+				</Button>
+			)}
+
+			{!isReadOnly && isPicking && (
+				<div className="bucket-picker" data-testid="drawer-bucket-picker">
+					<div className="bucket-picker__title">Add a pricing bucket</div>
+					<div className="bucket-picker__chips">
+						{availableBuckets.map((bucket) => (
+							<Button
+								key={bucket.key}
+								variant="outlined"
+								color="secondary"
+								size="sm"
+								prefix={<Plus size={12} />}
+								onClick={(): void => addBucket(bucket.key)}
+								testId={`drawer-add-bucket-${bucket.testId}`}
+							>
+								{bucket.label}
+							</Button>
+						))}
+					</div>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setIsPicking(false)}
+						testId="drawer-add-bucket-cancel"
+					>
+						Cancel
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ExtraPricingBuckets;

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.styles.scss

@@ -0,0 +1,172 @@
+.llm-observability-model-pricing {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 24px 32px;
+
+	.page-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 16px;
+
+		&__title {
+			h1 {
+				margin: 0;
+				font-size: 22px;
+				font-weight: 600;
+			}
+
+			p {
+				margin: 4px 0 0;
+				color: var(--bg-vanilla-400);
+				font-size: 13px;
+			}
+		}
+
+		&__actions {
+			display: flex;
+			gap: 8px;
+		}
+	}
+
+	.page-tabs {
+		.ant-tabs-nav {
+			margin-bottom: 0;
+		}
+	}
+
+	.filters-bar {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+
+		&__search {
+			flex: 1;
+			max-width: 360px;
+		}
+
+		&__source,
+		&__currency {
+			min-width: 160px;
+		}
+
+		&__add {
+			margin-left: auto;
+		}
+	}
+
+	.page-error {
+		padding: 12px 16px;
+		border-radius: 4px;
+		background: rgba(255, 90, 90, 0.08);
+		color: var(--bg-cherry-400);
+		font-size: 13px;
+	}
+
+	.page-pagination {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 8px;
+	}
+
+	.page-footer {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+	}
+}
+
+.model-costs-table {
+	.ant-table-thead > tr > th {
+		color: var(--bg-vanilla-400) !important;
+		font-size: 11px;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+
+	.ant-table-tbody > tr > td {
+		color: var(--bg-vanilla-400);
+	}
+
+	.model-cell {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		// Allow the flex children to shrink below their content width so the
+		// table's fixed-layout / nowrap cells truncate instead of overflowing
+		// into the Provider column.
+		min-width: 0;
+
+		&__name {
+			color: var(--bg-vanilla-100);
+			font-weight: 600;
+		}
+
+		&__name,
+		&__canonical-id {
+			max-width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		&__canonical-id {
+			color: var(--bg-vanilla-400);
+			font-family: var(--code-font-family, monospace);
+			font-size: 12px;
+		}
+	}
+
+	.price-cell {
+		font-family: var(--code-font-family, monospace);
+		color: var(--bg-vanilla-400);
+	}
+
+	.extra-buckets {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+
+		&__chip {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			margin: 0;
+		}
+
+		&__key {
+			font-family: var(--code-font-family, monospace);
+			font-size: 12px;
+		}
+
+		&__price {
+			font-family: var(--code-font-family, monospace);
+			font-weight: 600;
+		}
+	}
+
+	.muted {
+		color: var(--bg-vanilla-400);
+	}
+
+	.source-badge {
+		margin: 0;
+
+		&--auto {
+			background: rgba(78, 116, 248, 0.12);
+			color: var(--bg-robin-400);
+			border-color: rgba(78, 116, 248, 0.24);
+		}
+
+		&--override {
+			background: rgba(245, 175, 25, 0.12);
+			color: var(--bg-amber-400);
+			border-color: rgba(245, 175, 25, 0.24);
+		}
+	}
+
+	&__row--selected {
+		background: rgba(78, 116, 248, 0.06);
+	}
+}

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Pagination } from '@signozhq/ui/pagination';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Tabs } from '@signozhq/ui/tabs';
+import { Plus, Search } from '@signozhq/icons';
+import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
+import useComponentPermission from 'hooks/useComponentPermission';
+import useDebounce from 'hooks/useDebounce';
+import { useAppContext } from 'providers/App/App';
+
+import ModelCostDrawer from './ModelCostDrawer';
+import ModelCostsTable from './ModelCostsTable';
+import { useModelCostDrawer } from './useModelCostDrawer';
+import { useModelPricingFilters } from './useModelPricingFilters';
+import type {
+	ListModelPricingParams,
+	PricingRule,
+	SourceFilter,
+} from './types';
+
+import './LLMObservabilityModelPricing.styles.scss';
+
+const SOURCE_OPTIONS: { value: SourceFilter; label: string }[] = [
+	{ value: 'all', label: 'Source: All' },
+	{ value: 'auto', label: 'Auto-populated' },
+	{ value: 'override', label: 'User override' },
+];
+
+const CURRENCY_OPTIONS = [
+	{ value: 'USD', label: 'USD' },
+	{ value: 'EUR', label: 'EUR', disabled: true },
+	{ value: 'INR', label: 'INR', disabled: true },
+];
+
+const PAGE_SIZE = 20;
+
+function LLMObservabilityModelPricing(): JSX.Element {
+	const { search, source, page, setSearch, setSource, setPage } =
+		useModelPricingFilters();
+	const [currency, setCurrency] = useState<string>('USD');
+
+	// Controlled locally for instant typing feedback; the URL `q` param (which
+	// drives the request) is updated on a debounce so we don't fire a request
+	// per keystroke.
+	const [searchInput, setSearchInput] = useState<string>(search);
+	const debouncedSearch = useDebounce(searchInput, 400);
+
+	useEffect(() => {
+		if (debouncedSearch.trim() !== search) {
+			setSearch(debouncedSearch);
+		}
+	}, [debouncedSearch, search, setSearch]);
+
+	const listParams: ListModelPricingParams = {
+		offset: (page - 1) * PAGE_SIZE,
+		limit: PAGE_SIZE,
+		...(search ? { q: search } : {}),
+		...(source !== 'all' ? { source } : {}),
+	};
+
+	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
+
+	const { user } = useAppContext();
+	const [canManagePricing] = useComponentPermission(
+		['manage_llm_pricing'],
+		user.role,
+	);
+
+	const rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
+	const total = data?.data?.total ?? 0;
+
+	const drawer = useModelCostDrawer();
+
+	return (
+		<div
+			className="llm-observability-model-pricing"
+			data-testid="llm-observability-model-pricing-page"
+		>
+			<header className="page-header">
+				<div className="page-header__title">
+					<h1>Configuration</h1>
+					<p>Model pricing and cost estimation settings</p>
+				</div>
+			</header>
+
+			<Tabs
+				className="page-tabs"
+				defaultValue="model-costs"
+				items={[
+					{ key: 'model-costs', label: 'Model costs', children: null },
+					{
+						key: 'unpriced-models',
+						label: 'Unpriced models',
+						disabled: true,
+						children: null,
+					},
+				]}
+			/>
+
+			<div className="filters-bar">
+				<Input
+					className="filters-bar__search"
+					placeholder="Search by model or provider…"
+					prefix={<Search size={14} />}
+					value={searchInput}
+					onChange={(event): void => setSearchInput(event.target.value)}
+					testId="search-input"
+				/>
+				<SelectSimple
+					className="filters-bar__source"
+					value={source}
+					onChange={(value): void => setSource(value as SourceFilter)}
+					items={SOURCE_OPTIONS}
+					testId="source-select"
+				/>
+				<SelectSimple
+					className="filters-bar__currency"
+					value={currency}
+					onChange={(value): void => setCurrency(value as string)}
+					items={CURRENCY_OPTIONS}
+					testId="currency-select"
+				/>
+				{canManagePricing && (
+					<Button
+						variant="solid"
+						color="primary"
+						className="filters-bar__add"
+						prefix={<Plus size={14} />}
+						onClick={(): void => drawer.openForAdd()}
+						testId="add-model-cost-btn"
+					>
+						Add model cost
+					</Button>
+				)}
+			</div>
+
+			{isError && (
+				<div className="page-error" role="alert">
+					Failed to load pricing rules. Please try again.
+				</div>
+			)}
+
+			<ModelCostsTable
+				rules={rules}
+				isLoading={isLoading}
+				selectedRuleId={drawer.selectedRuleId}
+				canManage={canManagePricing}
+				onEdit={drawer.openForEdit}
+			/>
+
+			{total > PAGE_SIZE && (
+				<Pagination
+					className="page-pagination"
+					total={total}
+					pageSize={PAGE_SIZE}
+					current={page}
+					onPageChange={setPage}
+				/>
+			)}
+
+			<footer className="page-footer">
+				Showing {rules.length} of {total} model{total === 1 ? '' : 's'}
+				{' · '}All prices per 1M tokens (USD)
+			</footer>
+
+			<ModelCostDrawer
+				isOpen={drawer.isOpen}
+				mode={drawer.mode}
+				draft={drawer.draft}
+				setDraft={drawer.setDraft}
+				onClose={drawer.close}
+				onSave={drawer.save}
+				onDelete={drawer.deleteRule}
+				isSaving={drawer.isSaving}
+				isDeleting={drawer.isDeleting}
+				saveError={drawer.saveError}
+				canManage={canManagePricing}
+			/>
+		</div>
+	);
+}
+
+export default LLMObservabilityModelPricing;

frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.styles.scss

@@ -0,0 +1,388 @@
+.model-cost-drawer {
+	// Uniform horizontal padding across header / body / footer. The header and
+	// footer read these dialog vars; the body (rendered in drawer-description)
+	// is set directly below.
+	--dialog-header-padding: 20px 24px;
+	--dialog-footer-padding: 16px 24px;
+
+	// The drawer body — children render inside [data-slot='drawer-description']
+	// (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op).
+	[data-slot='drawer-description'] {
+		display: flex;
+		flex-direction: column;
+		gap: 18px;
+		padding: 20px 24px;
+	}
+
+	[data-slot='select-content'] {
+		width: var(--radix-select-trigger-width);
+	}
+	display: flex;
+	overflow-y: auto;
+
+	&__title {
+		h3 {
+			margin: 0;
+			font-size: 16px;
+			font-weight: 600;
+		}
+
+		p {
+			margin: 4px 0 0;
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+		}
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		// Horizontal padding is provided by the drawer-footer slot var above.
+		padding: 0;
+		width: 100%;
+
+		&-right {
+			display: flex;
+			gap: 8px;
+			margin-left: auto;
+		}
+	}
+
+	.drawer-section {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+
+		label,
+		.field-label {
+			font-size: 12px;
+			font-weight: 600;
+			color: var(--bg-vanilla-200);
+		}
+
+		.help {
+			margin: 0;
+			font-size: 11px;
+		}
+	}
+
+	.muted {
+		color: var(--bg-vanilla-400);
+	}
+
+	.required {
+		color: var(--bg-cherry-400);
+	}
+
+	.full-width {
+		width: 100%;
+	}
+
+	.drawer-surface {
+		padding: 14px;
+		border-radius: 6px;
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid var(--bg-slate-300);
+
+		&__head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 10px;
+
+			h4 {
+				margin: 0;
+				font-size: 13px;
+				font-weight: 600;
+				text-transform: uppercase;
+				letter-spacing: 0.04em;
+				color: var(--bg-vanilla-300);
+			}
+		}
+	}
+
+	.managed-label {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 11px;
+		color: var(--bg-vanilla-400);
+	}
+
+	.pattern-box {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px;
+		border-radius: 6px;
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid var(--bg-slate-300);
+	}
+
+	.pattern-chips {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		min-height: 28px;
+	}
+
+	.pattern-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+
+		&__remove {
+			background: transparent;
+			border: none;
+			padding: 0;
+			margin-left: 2px;
+			cursor: pointer;
+			color: inherit;
+			display: inline-flex;
+			align-items: center;
+
+			&:hover {
+				color: var(--bg-cherry-400);
+			}
+		}
+	}
+
+	.pattern-add {
+		display: flex;
+		gap: 6px;
+	}
+
+	.help {
+		code {
+			padding: 1px 4px;
+			border-radius: 3px;
+			background: rgba(255, 255, 255, 0.06);
+			font-family: var(--code-font-family, monospace);
+			font-size: 10px;
+		}
+	}
+
+	.source-radio-group {
+		// @signozhq/ui's RadioGroupItem defaults its unchecked border to
+		// --l3-background, which matches the drawer surface and makes the dot
+		// invisible. Override with a contrasting border so users can see the
+		// unchecked state.
+		--radio-group-item-border-color: var(--bg-slate-200);
+
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+
+		// Layout overrides for @signozhq/ui's RadioGroupItem wrapper. The
+		// library injects single-class CSS at runtime (after our bundled
+		// stylesheet loads), so we use a two-class selector to win the
+		// cascade and force the wrapper to lay the dot on the left with the
+		// label text flush beside it.
+		.source-radio {
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: flex-start;
+			gap: 10px;
+			padding: 10px 12px;
+			border-radius: 4px;
+			border: 1px solid transparent;
+			background: rgba(255, 255, 255, 0.02);
+			margin: 0;
+			width: 100%;
+			// Include padding + border in the 100% width so the card fits inside
+			// the SOURCE surface instead of overflowing its right edge.
+			box-sizing: border-box;
+			cursor: pointer;
+			transition:
+				background-color 0.12s ease,
+				border-color 0.12s ease;
+
+			// The radio button itself: keep it fixed-size and aligned with
+			// the title baseline (margin-top compensates for align-items:
+			// flex-start vs the title's line-box).
+			> button[role='radio'] {
+				flex: 0 0 16px;
+				width: 16px;
+				height: 16px;
+				margin-top: 3px;
+			}
+
+			// The library wraps children in a <label>. Make it grow into the
+			// remaining width and reset the .drawer-section label typography
+			// leak (set earlier in this file) so the title/desc divs use
+			// their own styles.
+			> label {
+				flex: 1 1 auto;
+				min-width: 0;
+				display: block;
+				text-align: left;
+				cursor: pointer;
+				font-size: inherit;
+				font-weight: inherit;
+				color: inherit;
+			}
+
+			&__title {
+				font-weight: 600;
+				font-size: 13px;
+				color: var(--bg-vanilla-100);
+			}
+
+			&__desc {
+				margin-top: 2px;
+				font-size: 12px;
+				color: var(--bg-vanilla-400);
+			}
+
+			// Radix RadioGroupItem renders <button data-state="checked|unchecked">.
+			// Use :has() to highlight the wrapper card when its inner button is checked.
+			&.source-radio--auto:has(button[data-state='checked']) {
+				background: rgba(78, 116, 248, 0.1);
+				border-color: rgba(78, 116, 248, 0.3);
+			}
+
+			&.source-radio--override:has(button[data-state='checked']) {
+				background: rgba(245, 175, 25, 0.1);
+				border-color: rgba(245, 175, 25, 0.3);
+			}
+
+			&:hover {
+				background: rgba(255, 255, 255, 0.04);
+			}
+		}
+	}
+
+	.reset-confirm {
+		margin-top: 12px;
+		padding: 12px;
+		border-radius: 4px;
+		background: rgba(78, 116, 248, 0.06);
+		border: 1px solid rgba(78, 116, 248, 0.2);
+
+		p {
+			margin: 0 0 10px;
+			font-size: 12px;
+		}
+
+		&__actions {
+			display: flex;
+			gap: 8px;
+			justify-content: flex-end;
+		}
+	}
+
+	.pricing-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 12px;
+	}
+
+	.pricing-field {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		input {
+			width: 100%;
+		}
+	}
+
+	.cache-mode-field {
+		margin-top: 10px;
+	}
+
+	.extra-buckets-section {
+		margin-top: 14px;
+		gap: 10px;
+
+		&__head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.optional-label {
+				font-size: 11px;
+				font-weight: 400;
+				color: var(--bg-vanilla-400);
+			}
+		}
+	}
+
+	.bucket-row {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+
+		&__name {
+			flex: 0 0 110px;
+			font-size: 12px;
+			color: var(--bg-vanilla-200);
+			font-family: var(--code-font-family, monospace);
+		}
+
+		input {
+			flex: 1 1 auto;
+			min-width: 0;
+		}
+
+		&__unit {
+			flex: 0 0 auto;
+			font-size: 12px;
+			color: var(--bg-vanilla-400);
+		}
+
+		&__remove {
+			flex: 0 0 auto;
+			background: transparent;
+			border: none;
+			padding: 4px;
+			cursor: pointer;
+			color: var(--bg-vanilla-400);
+			display: inline-flex;
+			align-items: center;
+
+			&:hover {
+				color: var(--bg-cherry-400);
+			}
+		}
+	}
+
+	.bucket-add-btn {
+		width: 100%;
+	}
+
+	.bucket-picker {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 10px;
+		padding: 12px;
+		border-radius: 6px;
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid var(--bg-slate-300);
+
+		&__title {
+			font-size: 11px;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: var(--bg-vanilla-400);
+		}
+
+		&__chips {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 8px;
+		}
+	}
+
+	.drawer-error {
+		padding: 10px 12px;
+		border-radius: 4px;
+		background: rgba(255, 90, 90, 0.08);
+		color: var(--bg-cherry-400);
+		font-size: 12px;
+	}
+}

frontend/src/container/LLMObservabilityModelPricing/ModelCostDrawer.tsx

@@ -0,0 +1,177 @@
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Trash2 } from '@signozhq/icons';
+
+import PatternEditor from './PatternEditor';
+import PricingFields from './PricingFields';
+import SourceSelector from './SourceSelector';
+import { PROVIDER_OPTIONS } from './constants';
+import { validateDraft } from './utils';
+import type { DrawerDraft, DrawerMode } from './types';
+import './ModelCostDrawer.styles.scss';
+
+interface ModelCostDrawerProps {
+	isOpen: boolean;
+	mode: DrawerMode;
+	draft: DrawerDraft;
+	setDraft: (next: DrawerDraft) => void;
+	onClose: () => void;
+	onSave: () => void;
+	onDelete: () => void;
+	isSaving: boolean;
+	isDeleting: boolean;
+	saveError: string | null;
+	canManage: boolean;
+}
+
+function ModelCostDrawer({
+	isOpen,
+	mode,
+	draft,
+	setDraft,
+	onClose,
+	onSave,
+	onDelete,
+	isSaving,
+	isDeleting,
+	saveError,
+	canManage,
+}: ModelCostDrawerProps): JSX.Element {
+	// Metadata (model id / provider / patterns / source) is editable by any
+	// manager. Pricing fields are editable only once the user picks "User
+	// override" — auto-populated pricing is managed by SigNoz. Write APIs are
+	// Admin-only, so non-managers can't edit anything.
+	const metadataReadOnly = !canManage;
+	const pricingReadOnly = !canManage || !draft.isOverride;
+
+	const validation = validateDraft(draft, mode);
+	const showValidationTooltip =
+		canManage && !validation.ok && !!validation.message;
+
+	const update = (patch: Partial<DrawerDraft>): void => {
+		setDraft({ ...draft, ...patch });
+	};
+
+	const footer = (
+		<div className="model-cost-drawer__footer">
+			{mode === 'edit' && canManage && (
+				<Button
+					variant="ghost"
+					color="destructive"
+					prefix={<Trash2 size={14} />}
+					onClick={onDelete}
+					loading={isDeleting}
+					testId="drawer-delete-btn"
+				>
+					Delete
+				</Button>
+			)}
+			<div className="model-cost-drawer__footer-right">
+				<Button
+					variant="outlined"
+					color="secondary"
+					onClick={onClose}
+					testId="drawer-cancel-btn"
+				>
+					{canManage ? 'Cancel' : 'Close'}
+				</Button>
+				{canManage && (
+					<TooltipSimple
+						title={showValidationTooltip ? validation.message : ''}
+						withPortal={false}
+					>
+						{/* span wrapper so the tooltip fires even when the button is disabled */}
+						<span className="model-cost-drawer__save-wrap">
+							<Button
+								variant="solid"
+								color="primary"
+								onClick={onSave}
+								loading={isSaving}
+								disabled={!validation.ok}
+								testId="drawer-save-btn"
+							>
+								Save
+							</Button>
+						</span>
+					</TooltipSimple>
+				)}
+			</div>
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			width="base"
+			className="model-cost-drawer"
+			footer={footer}
+			title={mode === 'edit' ? 'Edit model cost' : 'Add model cost'}
+			subTitle="Pricing computes gen_ai.estimated_total_cost at ingest."
+			drawerHeaderProps={{ className: 'model-cost-drawer__title' }}
+		>
+			<div className="drawer-section">
+				<label htmlFor="billing-model-id">Billing model ID</label>
+				<Input
+					id="billing-model-id"
+					placeholder="e.g. openai:gpt-4o"
+					value={draft.modelName}
+					disabled={mode === 'edit' || metadataReadOnly}
+					onChange={(e): void => update({ modelName: e.target.value })}
+					testId="drawer-model-id-input"
+				/>
+			</div>
+
+			<div className="drawer-section">
+				<label htmlFor="provider-select">Provider</label>
+				<SelectSimple
+					id="provider-select"
+					value={draft.provider}
+					onChange={(value): void => update({ provider: value as string })}
+					items={PROVIDER_OPTIONS}
+					disabled={mode === 'edit' || metadataReadOnly}
+					className="full-width"
+					withPortal={false}
+					testId="drawer-provider-select"
+				/>
+			</div>
+
+			<PatternEditor
+				patterns={draft.patterns}
+				isReadOnly={metadataReadOnly}
+				onChange={(patterns): void => update({ patterns })}
+			/>
+
+			<SourceSelector
+				isOverride={draft.isOverride}
+				isReadOnly={metadataReadOnly}
+				disableAuto={mode === 'add'}
+				onChange={(isOverride): void => update({ isOverride })}
+			/>
+
+			<PricingFields
+				pricing={draft.pricing}
+				isReadOnly={pricingReadOnly}
+				onChange={(patch): void =>
+					setDraft({ ...draft, pricing: { ...draft.pricing, ...patch } })
+				}
+			/>
+
+			{saveError && (
+				<div className="drawer-error" role="alert">
+					{saveError}
+				</div>
+			)}
+		</DrawerWrapper>
+	);
+}
+
+export default ModelCostDrawer;

frontend/src/container/LLMObservabilityModelPricing/ModelCostsTable.tsx

@@ -0,0 +1,179 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@signozhq/ui/table';
+import { ChevronDown } from '@signozhq/icons';
+import cx from 'classnames';
+import { startCase } from 'lodash-es';
+
+import type { PricingRule } from './types';
+import {
+	formatPricePerMillion,
+	getCanonicalId,
+	getExtraBuckets,
+	getRelativeLastSeen,
+	getSourceLabel,
+} from './utils';
+
+const COLUMN_COUNT = 8;
+
+interface ModelCostsTableProps {
+	rules: PricingRule[];
+	isLoading: boolean;
+	selectedRuleId: string | null;
+	canManage: boolean;
+	onEdit: (rule: PricingRule) => void;
+}
+
+interface RowProps {
+	rule: PricingRule;
+	isSelected: boolean;
+	canManage: boolean;
+	onEdit: (rule: PricingRule) => void;
+}
+
+function ModelCostRow({
+	rule,
+	isSelected,
+	canManage,
+	onEdit,
+}: RowProps): JSX.Element {
+	const buckets = getExtraBuckets(rule);
+
+	return (
+		<TableRow
+			className={cx({ 'model-costs-table__row--selected': isSelected })}
+			data-testid={`model-cost-row-${rule.id}`}
+		>
+			<TableCell>
+				<div className="model-cell">
+					<div
+						className="model-cell__name"
+						data-testid={`model-cell-name-${rule.id}`}
+					>
+						{rule.modelName}
+					</div>
+					<div
+						className="model-cell__canonical-id"
+						data-testid={`model-cell-canonical-id-${rule.id}`}
+					>
+						{getCanonicalId(rule)}
+					</div>
+				</div>
+			</TableCell>
+			<TableCell>{rule.provider}</TableCell>
+			<TableCell>
+				<span className="price-cell" data-testid={`price-cell-input-${rule.id}`}>
+					{formatPricePerMillion(rule.pricing?.input)}
+				</span>
+			</TableCell>
+			<TableCell>
+				<span className="price-cell" data-testid={`price-cell-output-${rule.id}`}>
+					{formatPricePerMillion(rule.pricing?.output)}
+				</span>
+			</TableCell>
+			<TableCell>
+				{buckets.length === 0 ? (
+					<span className="muted">—</span>
+				) : (
+					<div className="extra-buckets">
+						{buckets.map((bucket) => (
+							<Badge
+								key={bucket.key}
+								color="vanilla"
+								variant="outline"
+								className="extra-buckets__chip"
+							>
+								<span className="extra-buckets__key">{startCase(bucket.key)}</span>
+								<span className="extra-buckets__price">
+									{formatPricePerMillion(bucket.pricePerMillion)}
+								</span>
+							</Badge>
+						))}
+					</div>
+				)}
+			</TableCell>
+			<TableCell>
+				<Badge
+					color={rule.isOverride ? 'amber' : 'robin'}
+					variant="outline"
+					className="source-badge"
+					data-testid={`source-badge-${rule.id}`}
+				>
+					{getSourceLabel(rule)}
+				</Badge>
+			</TableCell>
+			<TableCell>{getRelativeLastSeen(rule)}</TableCell>
+			<TableCell>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					suffix={<ChevronDown size={14} />}
+					testId={`edit-rule-${rule.id}`}
+					onClick={(): void => onEdit(rule)}
+				>
+					{canManage ? 'Edit' : 'View'}
+				</Button>
+			</TableCell>
+		</TableRow>
+	);
+}
+
+function ModelCostsTable({
+	rules,
+	isLoading,
+	selectedRuleId,
+	canManage,
+	onEdit,
+}: ModelCostsTableProps): JSX.Element {
+	return (
+		<Table className="model-costs-table" testId="model-costs-table">
+			<TableHeader>
+				<TableRow>
+					<TableHead>Model</TableHead>
+					<TableHead>Provider</TableHead>
+					<TableHead>Input / 1M</TableHead>
+					<TableHead>Output / 1M</TableHead>
+					<TableHead>Extra buckets</TableHead>
+					<TableHead>Source</TableHead>
+					<TableHead>Last seen</TableHead>
+					<TableHead aria-label="Actions" />
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{isLoading && rules.length === 0 && (
+					<TableRow>
+						<TableCell colSpan={COLUMN_COUNT} className="model-costs-table__empty">
+							Loading pricing rules…
+						</TableCell>
+					</TableRow>
+				)}
+				{!isLoading && rules.length === 0 && (
+					<TableRow>
+						<TableCell colSpan={COLUMN_COUNT} className="model-costs-table__empty">
+							No model costs yet.
+						</TableCell>
+					</TableRow>
+				)}
+				{rules.map((rule) => (
+					<ModelCostRow
+						key={rule.id}
+						rule={rule}
+						isSelected={rule.id === selectedRuleId}
+						canManage={canManage}
+						onEdit={onEdit}
+					/>
+				))}
+			</TableBody>
+		</Table>
+	);
+}
+
+export default ModelCostsTable;

frontend/src/container/LLMObservabilityModelPricing/PatternEditor.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { X } from '@signozhq/icons';
+
+interface PatternEditorProps {
+	patterns: string[];
+	isReadOnly: boolean;
+	onChange: (patterns: string[]) => void;
+}
+
+// Model-name prefix patterns as removable chips + an add input.
+function PatternEditor({
+	patterns,
+	isReadOnly,
+	onChange,
+}: PatternEditorProps): JSX.Element {
+	const [patternInput, setPatternInput] = useState<string>('');
+
+	const addPattern = (): void => {
+		const next = patternInput.trim();
+		if (!next || patterns.includes(next)) {
+			setPatternInput('');
+			return;
+		}
+		onChange([...patterns, next]);
+		setPatternInput('');
+	};
+
+	const removePattern = (pattern: string): void => {
+		onChange(patterns.filter((p) => p !== pattern));
+	};
+
+	return (
+		<div className="drawer-section">
+			<span className="field-label">
+				Model name patterns <span className="muted">(prefix match)</span>
+			</span>
+			<div className="pattern-box">
+				<div className="pattern-chips">
+					{patterns.map((pattern) => (
+						<Badge
+							key={pattern}
+							color="vanilla"
+							variant="outline"
+							className="pattern-chip"
+						>
+							{pattern}*
+							{!isReadOnly && (
+								<button
+									type="button"
+									aria-label={`Remove pattern ${pattern}`}
+									className="pattern-chip__remove"
+									onClick={(): void => removePattern(pattern)}
+								>
+									<X size={10} />
+								</button>
+							)}
+						</Badge>
+					))}
+				</div>
+				{!isReadOnly && (
+					<div className="pattern-add">
+						<Input
+							placeholder="Add pattern…"
+							value={patternInput}
+							onChange={(e): void => setPatternInput(e.target.value)}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter') {
+									e.preventDefault();
+									addPattern();
+								}
+							}}
+							testId="drawer-pattern-input"
+						/>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={addPattern}
+							testId="drawer-pattern-add-btn"
+						>
+							+ Add
+						</Button>
+					</div>
+				)}
+			</div>
+			<p className="muted help">
+				Each pattern uses <strong>prefix matching</strong> against{' '}
+				<code>gen_ai.request.model</code>.
+			</p>
+		</div>
+	);
+}
+
+export default PatternEditor;

frontend/src/container/LLMObservabilityModelPricing/PricingFields.tsx

@@ -0,0 +1,78 @@
+import { Input } from '@signozhq/ui/input';
+import { Lock } from '@signozhq/icons';
+
+import ExtraPricingBuckets from './ExtraPricingBuckets';
+import { parsePricingAmount } from './utils';
+import type { DrawerDraft } from './types';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface PricingFieldsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+function PricingFields({
+	pricing,
+	isReadOnly,
+	onChange,
+}: PricingFieldsProps): JSX.Element {
+	return (
+		<div className="drawer-section drawer-surface">
+			<div className="drawer-surface__head">
+				<h4>Pricing (per 1M tokens, USD)</h4>
+				{isReadOnly && (
+					<span className="managed-label" data-testid="drawer-readonly-label">
+						<Lock size={12} />
+						Read-only
+					</span>
+				)}
+			</div>
+			<div className="pricing-grid">
+				<div className="pricing-field">
+					<label htmlFor="input-cost">
+						Input cost <span className="required">*</span>
+					</label>
+					<Input
+						id="input-cost"
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing.input}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ input: parsePricingAmount(e.target.value) ?? 0 })
+						}
+						testId="drawer-input-cost"
+					/>
+				</div>
+				<div className="pricing-field">
+					<label htmlFor="output-cost">
+						Output cost <span className="required">*</span>
+					</label>
+					<Input
+						id="output-cost"
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing.output}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ output: parsePricingAmount(e.target.value) ?? 0 })
+						}
+						testId="drawer-output-cost"
+					/>
+				</div>
+			</div>
+
+			<ExtraPricingBuckets
+				pricing={pricing}
+				isReadOnly={isReadOnly}
+				onChange={onChange}
+			/>
+		</div>
+	);
+}
+
+export default PricingFields;

frontend/src/container/LLMObservabilityModelPricing/SourceSelector.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Lock } from '@signozhq/icons';
+
+interface SourceSelectorProps {
+	isOverride: boolean;
+	isReadOnly: boolean;
+	disableAuto?: boolean;
+	onChange: (isOverride: boolean) => void;
+}
+
+// Auto-populated vs user-override selector, with a confirm step before
+// discarding custom values back to defaults.
+function SourceSelector({
+	isOverride,
+	isReadOnly,
+	disableAuto = false,
+	onChange,
+}: SourceSelectorProps): JSX.Element {
+	const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
+
+	const handleSourceChange = (value: 'auto' | 'override'): void => {
+		if (value === 'auto' && isOverride) {
+			setShowResetConfirm(true);
+			return;
+		}
+		if (value === 'override' && !isOverride) {
+			onChange(true);
+		}
+	};
+
+	const confirmReset = (): void => {
+		onChange(false);
+		setShowResetConfirm(false);
+	};
+
+	return (
+		<div className="drawer-section drawer-surface">
+			<div className="drawer-surface__head">
+				<h4>Source</h4>
+				{isReadOnly && (
+					<span className="managed-label" data-testid="drawer-managed-label">
+						<Lock size={12} />
+						Managed by SigNoz
+					</span>
+				)}
+			</div>
+			<RadioGroup
+				value={isOverride ? 'override' : 'auto'}
+				onChange={(value): void => handleSourceChange(value as 'auto' | 'override')}
+				className="source-radio-group"
+			>
+				<RadioGroupItem
+					value="auto"
+					containerClassName="source-radio source-radio--auto"
+					testId="drawer-source-auto"
+					disabled={disableAuto}
+				>
+					<div className="source-radio__title">Auto-populated</div>
+					<div className="source-radio__desc">
+						{disableAuto
+							? 'Available once SigNoz has default pricing for this model.'
+							: 'Default pricing from SigNoz.'}
+					</div>
+				</RadioGroupItem>
+				<RadioGroupItem
+					value="override"
+					containerClassName="source-radio source-radio--override"
+					testId="drawer-source-override"
+				>
+					<div className="source-radio__title">User override</div>
+					<div className="source-radio__desc">Custom pricing. Takes precedence.</div>
+				</RadioGroupItem>
+			</RadioGroup>
+			{showResetConfirm && (
+				<div
+					className="reset-confirm"
+					role="dialog"
+					aria-label="Reset to default pricing"
+				>
+					<p>
+						Reset to default pricing? Custom values will be discarded. it might take
+						24 hours for changes to take effect.
+					</p>
+					<div className="reset-confirm__actions">
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={(): void => setShowResetConfirm(false)}
+							testId="drawer-reset-keep-btn"
+						>
+							Keep
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={confirmReset}
+							testId="drawer-reset-confirm-btn"
+						>
+							Reset
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default SourceSelector;

frontend/src/container/LLMObservabilityModelPricing/constants.ts

@@ -0,0 +1,41 @@
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { CacheBucketDef, DrawerDraft } from './types';
+
+export const PROVIDER_OPTIONS = [
+	{ value: 'OpenAI', label: 'OpenAI' },
+	{ value: 'Anthropic', label: 'Anthropic' },
+	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
+	{ value: 'Google', label: 'Google' },
+	{ value: 'Self-hosted', label: 'Self-hosted' },
+	{ value: 'Other', label: 'Other' },
+];
+
+export const CACHE_MODE_OPTIONS = [
+	{ value: CacheModeDTO.subtract, label: 'Subtract (OpenAI style)' },
+	{ value: CacheModeDTO.additive, label: 'Additive (Anthropic style)' },
+	{ value: CacheModeDTO.unknown, label: 'Unknown' },
+];
+
+// Optional buckets offered in the "Add pricing bucket" picker. Only the cache
+// buckets are persisted by the API today (pricing.cache.read/write).
+export const CACHE_BUCKETS: CacheBucketDef[] = [
+	{ key: 'cacheRead', label: 'cache_read', testId: 'cache-read' },
+	{ key: 'cacheWrite', label: 'cache_write', testId: 'cache-write' },
+];
+
+export const EMPTY_DRAFT: DrawerDraft = {
+	id: null,
+	sourceId: null,
+	modelName: '',
+	provider: 'OpenAI',
+	patterns: [],
+	isOverride: true,
+	pricing: {
+		input: 0,
+		output: 0,
+		cacheMode: CacheModeDTO.unknown,
+		cacheRead: null,
+		cacheWrite: null,
+	},
+};

frontend/src/container/LLMObservabilityModelPricing/types.ts

@@ -0,0 +1,55 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	type ListLLMPricingRulesParams,
+	type LlmpricingruletypesLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
+
+export type SourceFilter = 'all' | 'auto' | 'override';
+
+// List request params. Extends the generated (offset/limit) params with the
+// search/source filters — backend support is pending, but sending them now
+// keeps the page backend-driven so no FE change is needed once it lands.
+export type ListModelPricingParams = ListLLMPricingRulesParams & {
+	q?: string;
+	source?: Exclude<SourceFilter, 'all'>;
+};
+
+export interface ExtraBucket {
+	key: string;
+	pricePerMillion: number;
+}
+
+export type DrawerMode = 'add' | 'edit';
+
+// Optional pricing buckets the user can add/remove. Keyed by the matching
+// DrawerDraft['pricing'] field.
+export type CacheBucketKey = 'cacheRead' | 'cacheWrite';
+
+export interface CacheBucketDef {
+	key: CacheBucketKey;
+	label: string;
+	testId: string;
+}
+
+export interface DrawerDraft {
+	id: string | null;
+	sourceId: string | null;
+	modelName: string;
+	provider: string;
+	patterns: string[];
+	isOverride: boolean;
+	pricing: {
+		input: number;
+		output: number;
+		cacheMode: CacheModeDTO;
+		cacheRead: number | null;
+		cacheWrite: number | null;
+	};
+}
+
+export interface ValidationResult {
+	ok: boolean;
+	message?: string;
+}

frontend/src/container/LLMObservabilityModelPricing/useModelCostDrawer.ts

@@ -0,0 +1,123 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	useCreateOrUpdateLLMPricingRules,
+	useDeleteLLMPricingRule,
+} from 'api/generated/services/llmpricingrules';
+
+import { EMPTY_DRAFT } from './constants';
+import type { DrawerDraft, DrawerMode, PricingRule } from './types';
+import { buildRulePayload, draftFromRule } from './utils';
+
+interface UseModelCostDrawerResult {
+	isOpen: boolean;
+	mode: DrawerMode;
+	draft: DrawerDraft;
+	setDraft: (next: DrawerDraft) => void;
+	openForAdd: (prefillModelName?: string) => void;
+	openForEdit: (rule: PricingRule) => void;
+	close: () => void;
+	save: () => Promise<void>;
+	deleteRule: () => Promise<void>;
+	isSaving: boolean;
+	isDeleting: boolean;
+	saveError: string | null;
+	selectedRuleId: string | null;
+}
+
+export function useModelCostDrawer(): UseModelCostDrawerResult {
+	const queryClient = useQueryClient();
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<DrawerMode>('add');
+	const [draft, setDraft] = useState<DrawerDraft>(EMPTY_DRAFT);
+	const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
+	const [saveError, setSaveError] = useState<string | null>(null);
+
+	const { mutateAsync: createOrUpdate, isLoading: isSaving } =
+		useCreateOrUpdateLLMPricingRules();
+	const { mutateAsync: deleteRuleApi, isLoading: isDeleting } =
+		useDeleteLLMPricingRule();
+
+	const invalidateList = useCallback(async (): Promise<void> => {
+		await queryClient.invalidateQueries({
+			queryKey: getListLLMPricingRulesQueryKey(),
+		});
+	}, [queryClient]);
+
+	const openForAdd = useCallback((prefillModelName?: string): void => {
+		setMode('add');
+		setDraft({
+			...EMPTY_DRAFT,
+			modelName: prefillModelName || '',
+			patterns: prefillModelName ? [prefillModelName] : [],
+		});
+		setSelectedRuleId(null);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((rule: PricingRule): void => {
+		setMode('edit');
+		setDraft(draftFromRule(rule));
+		setSelectedRuleId(rule.id);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+		setSelectedRuleId(null);
+		setSaveError(null);
+	}, []);
+
+	const save = useCallback(async (): Promise<void> => {
+		setSaveError(null);
+		try {
+			await createOrUpdate({
+				data: { rules: [buildRulePayload(draft)] },
+			});
+			await invalidateList();
+			setIsOpen(false);
+			setSelectedRuleId(null);
+			toast.success(mode === 'edit' ? 'Model cost updated' : 'Model cost added');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Save failed';
+			setSaveError(message);
+		}
+	}, [createOrUpdate, draft, invalidateList, mode]);
+
+	const deleteRule = useCallback(async (): Promise<void> => {
+		if (!draft.id) {
+			return;
+		}
+		setSaveError(null);
+		try {
+			await deleteRuleApi({ pathParams: { id: draft.id } });
+			await invalidateList();
+			setIsOpen(false);
+			setSelectedRuleId(null);
+			toast.success('Model cost deleted');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Delete failed';
+			setSaveError(message);
+		}
+	}, [deleteRuleApi, draft.id, invalidateList]);
+
+	return {
+		isOpen,
+		mode,
+		draft,
+		setDraft,
+		openForAdd,
+		openForEdit,
+		close,
+		save,
+		deleteRule,
+		isSaving,
+		isDeleting,
+		saveError,
+		selectedRuleId,
+	};
+}

frontend/src/container/LLMObservabilityModelPricing/useModelPricingFilters.ts

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import type { SourceFilter } from './types';
+
+const SEARCH_KEY = 'q';
+const SOURCE_KEY = 'source';
+const PAGE_KEY = 'page';
+
+const DEFAULT_SOURCE: SourceFilter = 'all';
+
+export interface ModelPricingFilters {
+	search: string;
+	source: SourceFilter;
+	page: number;
+	setSearch: (value: string) => void;
+	setSource: (value: SourceFilter) => void;
+	setPage: (value: number) => void;
+}
+
+const isSourceFilter = (value: string | null): value is SourceFilter =>
+	value === 'all' || value === 'auto' || value === 'override';
+
+// Keeps the model-cost list filters (search / source / page) in the URL so the
+// view is shareable and reload-safe. These map straight onto the list request
+// params (q, source, offset), making the table backend-driven once the API
+// honours them.
+export function useModelPricingFilters(): ModelPricingFilters {
+	const history = useHistory();
+	const urlQuery = useUrlQuery();
+
+	const search = urlQuery.get(SEARCH_KEY) ?? '';
+	const sourceParam = urlQuery.get(SOURCE_KEY);
+	const source = isSourceFilter(sourceParam) ? sourceParam : DEFAULT_SOURCE;
+	const page = Math.max(1, Number(urlQuery.get(PAGE_KEY)) || 1);
+
+	const setParam = useCallback(
+		(key: string, value: string | null, resetPage: boolean): void => {
+			const next = new URLSearchParams(urlQuery.toString());
+			if (value) {
+				next.set(key, value);
+			} else {
+				next.delete(key);
+			}
+			// Filter changes invalidate the current page offset.
+			if (resetPage) {
+				next.delete(PAGE_KEY);
+			}
+			history.replace({ search: next.toString() });
+		},
+		[history, urlQuery],
+	);
+
+	const setSearch = useCallback(
+		(value: string): void => setParam(SEARCH_KEY, value.trim(), true),
+		[setParam],
+	);
+
+	const setSource = useCallback(
+		(value: SourceFilter): void =>
+			// 'all' is the default, so keep it out of the URL.
+			setParam(SOURCE_KEY, value === DEFAULT_SOURCE ? null : value, true),
+		[setParam],
+	);
+
+	const setPage = useCallback(
+		(value: number): void =>
+			setParam(PAGE_KEY, value <= 1 ? null : String(value), false),
+		[setParam],
+	);
+
+	return { search, source, page, setSearch, setSource, setPage };
+}

frontend/src/container/LLMObservabilityModelPricing/utils.ts

@@ -0,0 +1,162 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+	type LlmpricingruletypesLLMPricingCacheCostsDTO,
+	type LlmpricingruletypesLLMRulePricingDTO,
+	type LlmpricingruletypesUpdatableLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import type {
+	DrawerDraft,
+	DrawerMode,
+	ExtraBucket,
+	PricingRule,
+	ValidationResult,
+} from './types';
+
+// Idempotent — relativeTime is also extended globally in utils/timeUtils.
+dayjs.extend(relativeTime);
+
+const lc = (value: string): string => value.toLowerCase();
+
+const hasCacheValue = (value: number | null): boolean =>
+	typeof value === 'number' && value > 0;
+
+// ─── Input helpers ───────────────────────────────────────────────────────────
+
+// Parses a price input's raw string. Empty → null (used by optional buckets),
+// otherwise a finite number (NaN coerced to 0).
+export const parsePricingAmount = (raw: string): number | null => {
+	if (raw.trim() === '') {
+		return null;
+	}
+	const value = Number(raw);
+	return Number.isFinite(value) ? value : 0;
+};
+
+// ─── Display helpers ─────────────────────────────────────────────────────────
+
+export const formatPricePerMillion = (value: number | undefined): string => {
+	if (value === undefined || value === null || Number.isNaN(value)) {
+		return '—';
+	}
+	return `$${value.toFixed(2)}`;
+};
+
+export const getExtraBuckets = (rule: PricingRule): ExtraBucket[] => {
+	const cache = rule.pricing?.cache;
+	if (!cache) {
+		return [];
+	}
+	const buckets: ExtraBucket[] = [];
+	if (typeof cache.read === 'number' && cache.read > 0) {
+		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
+	}
+	if (typeof cache.write === 'number' && cache.write > 0) {
+		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
+	}
+	return buckets;
+};
+
+export const getSourceLabel = (rule: PricingRule): 'Auto' | 'User override' =>
+	rule.isOverride ? 'User override' : 'Auto';
+
+export const getRelativeLastSeen = (rule: PricingRule): string => {
+	const ts = rule.updatedAt || rule.syncedAt || rule.createdAt;
+	const parsed = ts ? dayjs(ts) : null;
+	return parsed?.isValid() ? parsed.fromNow() : '—';
+};
+
+export const getCanonicalId = (rule: PricingRule): string => {
+	const provider = rule.provider?.trim() || 'unknown';
+	return `${lc(provider)}:${rule.modelName}`;
+};
+
+// ─── Drawer draft <-> API helpers ────────────────────────────────────────────
+
+export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
+	id: rule.id,
+	sourceId: rule.sourceId ?? null,
+	modelName: rule.modelName,
+	provider: rule.provider || 'OpenAI',
+	patterns: rule.modelPattern || [],
+	isOverride: !!rule.isOverride,
+	pricing: {
+		input: rule.pricing?.input ?? 0,
+		output: rule.pricing?.output ?? 0,
+		cacheMode: rule.pricing?.cache?.mode ?? CacheModeDTO.unknown,
+		cacheRead: rule.pricing?.cache?.read ?? null,
+		cacheWrite: rule.pricing?.cache?.write ?? null,
+	},
+});
+
+export const buildPricingPayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesLLMRulePricingDTO => {
+	const pricing: LlmpricingruletypesLLMRulePricingDTO = {
+		input: draft.pricing.input,
+		output: draft.pricing.output,
+	};
+	if (
+		hasCacheValue(draft.pricing.cacheRead) ||
+		hasCacheValue(draft.pricing.cacheWrite)
+	) {
+		const cache: LlmpricingruletypesLLMPricingCacheCostsDTO = {
+			mode: draft.pricing.cacheMode,
+		};
+		if (hasCacheValue(draft.pricing.cacheRead)) {
+			cache.read = draft.pricing.cacheRead as number;
+		}
+		if (hasCacheValue(draft.pricing.cacheWrite)) {
+			cache.write = draft.pricing.cacheWrite as number;
+		}
+		pricing.cache = cache;
+	}
+	return pricing;
+};
+
+export const buildRulePayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesUpdatableLLMPricingRuleDTO => ({
+	id: draft.id || undefined,
+	sourceId: draft.sourceId || undefined,
+	modelName: draft.modelName.trim(),
+	provider: draft.provider.trim(),
+	modelPattern:
+		draft.patterns.length > 0 ? draft.patterns : [draft.modelName.trim()],
+	isOverride: draft.isOverride,
+	enabled: true,
+	unit: UnitDTO.per_million_tokens,
+	pricing: buildPricingPayload(draft),
+});
+
+export const validateDraft = (
+	draft: DrawerDraft,
+	mode: DrawerMode,
+): ValidationResult => {
+	if (mode === 'add' && !draft.modelName.trim()) {
+		return { ok: false, message: 'Billing model ID is required.' };
+	}
+	if (!draft.provider.trim()) {
+		return { ok: false, message: 'Provider is required.' };
+	}
+	// Pricing is only user-entered for overrides; auto-populated rules are
+	// managed by SigNoz (and may legitimately be 0 for self-hosted models).
+	if (draft.isOverride) {
+		if (!(draft.pricing.input > 0)) {
+			return { ok: false, message: 'Input cost must be greater than 0.' };
+		}
+		if (!(draft.pricing.output > 0)) {
+			return { ok: false, message: 'Output cost must be greater than 0.' };
+		}
+		if (
+			(draft.pricing.cacheRead !== null && draft.pricing.cacheRead < 0) ||
+			(draft.pricing.cacheWrite !== null && draft.pricing.cacheWrite < 0)
+		) {
+			return { ok: false, message: 'Cache costs must be non-negative.' };
+		}
+	}
+	return { ok: true };
+};

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -206,6 +206,7 @@ export const routesToSkip = [
 	ROUTES.METER,
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.SOMETHING_WENT_WRONG,
+	ROUTES.LLM_OBSERVABILITY_MODEL_PRICING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/pages/LLMObservabilityModelPricing/index.tsx

@@ -0,0 +1,7 @@
+import LLMObservabilityModelPricing from 'container/LLMObservabilityModelPricing/LLMObservabilityModelPricing';
+
+function LLMObservabilityModelPricingPage(): JSX.Element {
+	return <LLMObservabilityModelPricing />;
+}
+
+export default LLMObservabilityModelPricingPage;

frontend/src/utils/permission/index.ts

@@ -20,7 +20,8 @@ export type ComponentTypes =
 	| 'add_panel'
 	| 'page_pipelines'
 	| 'edit_locked_dashboard'
-	| 'add_panel_locked_dashboard';
+	| 'add_panel_locked_dashboard'
+	| 'manage_llm_pricing';
 
 export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	current_org_settings: ['ADMIN'],
@@ -42,6 +43,7 @@ export const componentPermission: Record<ComponentTypes, ROLES[]> = {
 	page_pipelines: ['ADMIN', 'EDITOR'],
 	edit_locked_dashboard: ['ADMIN', 'AUTHOR'],
 	add_panel_locked_dashboard: ['ADMIN', 'AUTHOR'],
+	manage_llm_pricing: ['ADMIN', 'EDITOR', 'AUTHOR'],
 };
 
 export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
@@ -136,4 +138,5 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
+	LLM_OBSERVABILITY_MODEL_PRICING: ['ADMIN', 'EDITOR', 'VIEWER'],
 };

tests/e2e/fixtures/auth.ts

@@ -6,13 +6,6 @@ import {
 	type Page,
 } from '@playwright/test';
 
-import {
-	detectPersona,
-	detectSettingsEnv,
-	type Persona,
-	type SettingsEnv,
-} from '../helpers/persona';
-
 export type User = { email: string; password: string };
 
 // Default user — admin from the pytest bootstrap (.env.local) or staging .env.
@@ -27,11 +20,6 @@ export const ADMIN: User = {
 type StorageState = Awaited<ReturnType<BrowserContext['storageState']>>;
 const storageByUser = new Map<string, Promise<StorageState>>();
 
-// Per-worker persona/env caches by user email. Detection is constant for a
-// given backend + user, so it runs once per worker.
-const personaByUser = new Map<string, Promise<Persona>>();
-const envByUser = new Map<string, Promise<SettingsEnv>>();
-
 async function storageFor(browser: Browser, user: User): Promise<StorageState> {
 	const cached = storageByUser.get(user.email);
 	if (cached) {
@@ -84,10 +72,6 @@ export const test = base.extend<{
 	 * storageState is held in memory and reused for all later requests.
 	 */
 	authedPage: Page;
-
-	persona: Persona;
-
-	env: SettingsEnv;
 }>({
 	user: [ADMIN, { option: true }],
 
@@ -109,24 +93,6 @@ export const test = base.extend<{
 		await use(page);
 		await ctx.close();
 	},
-
-	persona: async ({ authedPage, user }, use) => {
-		let task = personaByUser.get(user.email);
-		if (!task) {
-			task = detectPersona(authedPage);
-			personaByUser.set(user.email, task);
-		}
-		await use(await task);
-	},
-
-	env: async ({ authedPage, user }, use) => {
-		let task = envByUser.get(user.email);
-		if (!task) {
-			task = detectSettingsEnv(authedPage);
-			envByUser.set(user.email, task);
-		}
-		await use(await task);
-	},
 });
 
 export { expect };

tests/e2e/helpers/persona.ts

@@ -1,124 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { authToken } from './dashboards';
-
-export type Tier =
-	| 'cloud'
-	| 'enterprise'
-	| 'community'
-	| 'community-enterprise';
-export type Role = 'ADMIN' | 'EDITOR' | 'VIEWER' | 'ANONYMOUS';
-
-export interface Persona {
-	tier: Tier;
-	role: Role;
-}
-
-export interface SettingsEnv {
-	isGatewayEnabled: boolean;
-}
-
-interface AuthzCheckItem {
-	authorized?: boolean;
-	object?: { selector?: string };
-}
-
-interface FeatureFlag {
-	name?: string;
-	active?: boolean;
-}
-
-const LICENSE_URL = '/api/v3/licenses/active';
-const AUTHZ_CHECK_URL = '/api/v1/authz/check';
-const FEATURES_URL = '/api/v1/features';
-
-// Mirrors IsAdmin/Editor/Viewer in frontend/src/hooks/useAuthZ/legacy.ts:
-// relation 'assignee' on resource kind/type 'role', selector = preset role id.
-const ROLE_PROBES: { role: Exclude<Role, 'ANONYMOUS'>; selector: string }[] = [
-	{ role: 'ADMIN', selector: 'signoz-admin' },
-	{ role: 'EDITOR', selector: 'signoz-editor' },
-	{ role: 'VIEWER', selector: 'signoz-viewer' },
-];
-
-function authHeaders(token: string): Record<string, string> {
-	return { Authorization: `Bearer ${token}` };
-}
-
-function parseOverride(): Persona | null {
-	const raw = process.env.SIGNOZ_E2E_PERSONA;
-	if (!raw) {
-		return null;
-	}
-	const parts = raw.toLowerCase().split('-');
-	const roleRaw = parts.pop();
-	const tier = parts.join('-') as Tier;
-	const role = roleRaw?.toUpperCase() as Role;
-	return { tier, role };
-}
-
-async function detectTier(page: Page, token: string): Promise<Tier> {
-	const res = await page.request.get(LICENSE_URL, {
-		headers: authHeaders(token),
-	});
-	if (res.status() === 404) {
-		return 'community-enterprise';
-	}
-	if (res.status() === 501) {
-		return 'community';
-	}
-	const body = await res.json();
-	const platform = body?.data?.platform;
-	if (platform === 'CLOUD') {
-		return 'cloud';
-	}
-	return 'enterprise';
-}
-
-async function detectRole(page: Page, token: string): Promise<Role> {
-	const payload = ROLE_PROBES.map((p) => ({
-		relation: 'assignee',
-		object: {
-			resource: { kind: 'role', type: 'role' },
-			selector: p.selector,
-		},
-	}));
-	const res = await page.request.post(AUTHZ_CHECK_URL, {
-		headers: authHeaders(token),
-		data: payload,
-	});
-	const body = await res.json();
-	const items: AuthzCheckItem[] = body?.data ?? [];
-	const granted = new Set(
-		items.filter((i) => i?.authorized).map((i) => i?.object?.selector),
-	);
-	for (const p of ROLE_PROBES) {
-		if (granted.has(p.selector)) {
-			return p.role;
-		}
-	}
-	return 'ANONYMOUS';
-}
-
-export async function detectPersona(page: Page): Promise<Persona> {
-	const override = parseOverride();
-	if (override) {
-		return override;
-	}
-	const token = await authToken(page);
-	const [tier, role] = await Promise.all([
-		detectTier(page, token),
-		detectRole(page, token),
-	]);
-	return { tier, role };
-}
-
-export async function detectSettingsEnv(page: Page): Promise<SettingsEnv> {
-	const token = await authToken(page);
-	const res = await page.request.get(FEATURES_URL, {
-		headers: authHeaders(token),
-	});
-	const body = await res.json();
-	const flags: FeatureFlag[] = body?.data ?? [];
-	const gateway = flags.find((f) => f?.name === 'gateway');
-	return { isGatewayEnabled: !!gateway?.active };
-}

tests/e2e/helpers/settings.ts

@@ -1,52 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect } from '../fixtures/auth';
-
-// Verbatim from frontend/src/constants/routes.ts
-export const SETTINGS_ROUTES = {
-	WORKSPACE: '/settings',
-	MY_SETTINGS: '/settings/my-settings',
-	ORG_SETTINGS: '/settings/org-settings',
-	ALL_CHANNELS: '/settings/channels',
-	INGESTION: '/settings/ingestion-settings',
-	BILLING: '/settings/billing',
-	ROLES: '/settings/roles',
-	MEMBERS: '/settings/members',
-	SERVICE_ACCOUNTS: '/settings/service-accounts',
-	SHORTCUTS: '/settings/shortcuts',
-	MCP_SERVER: '/settings/mcp-server',
-	INTEGRATIONS: '/integrations',
-} as const;
-
-export type SettingsRoute =
-	(typeof SETTINGS_ROUTES)[keyof typeof SETTINGS_ROUTES];
-
-// Sidenav item data-testid == itemKey in menuItems.tsx settingsNavSections.
-export const NAV_TESTID: Record<string, string> = {
-	[SETTINGS_ROUTES.WORKSPACE]: 'workspace',
-	[SETTINGS_ROUTES.MY_SETTINGS]: 'account',
-	[SETTINGS_ROUTES.ALL_CHANNELS]: 'notification-channels',
-	[SETTINGS_ROUTES.BILLING]: 'billing',
-	[SETTINGS_ROUTES.INTEGRATIONS]: 'integrations',
-	[SETTINGS_ROUTES.MCP_SERVER]: 'mcp-server',
-	[SETTINGS_ROUTES.ROLES]: 'roles',
-	[SETTINGS_ROUTES.MEMBERS]: 'members',
-	[SETTINGS_ROUTES.SERVICE_ACCOUNTS]: 'service-accounts',
-	[SETTINGS_ROUTES.INGESTION]: 'ingestion',
-	[SETTINGS_ROUTES.ORG_SETTINGS]: 'sso',
-	[SETTINGS_ROUTES.SHORTCUTS]: 'keyboard-shortcuts',
-};
-
-export async function gotoSettings(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.WORKSPACE);
-	await expect(page.getByTestId('settings-page-title')).toBeVisible();
-}
-
-export async function openSettingsTab(
-	page: Page,
-	route: SettingsRoute,
-): Promise<void> {
-	const testid = NAV_TESTID[route];
-	await page.getByTestId('settings-page-sidenav').getByTestId(testid).click();
-	await expect(page).toHaveURL(new RegExp(route.replace(/\//g, '\\/')));
-}

tests/e2e/helpers/settingsAccess.ts

@@ -1,156 +0,0 @@
-import type { Persona, SettingsEnv, Tier } from './persona';
-import { SETTINGS_ROUTES, NAV_TESTID } from './settings';
-
-// Mirrors the isEnabled effect in frontend/src/pages/Settings/Settings.tsx.
-// Returns the set of sidenav item testids (itemKeys) that should be visible.
-export function visibleNavItems(
-	persona: Persona,
-	_env: SettingsEnv,
-): Set<string> {
-	const { tier, role } = persona;
-	const isAdmin = role === 'ADMIN';
-	const isEditor = role === 'EDITOR';
-	const isViewer = role === 'VIEWER';
-
-	// Defaults that start enabled in menuItems.tsx settingsNavSections.
-	const s = new Set<string>([
-		'workspace',
-		'account',
-		'notification-channels',
-		'keyboard-shortcuts',
-	]);
-
-	const enableForAllUsers = (): void => {
-		s.add('roles');
-		s.add('service-accounts');
-	};
-
-	if (tier === 'cloud') {
-		enableForAllUsers();
-		if (isAdmin) {
-			[
-				'billing',
-				'integrations',
-				'ingestion',
-				'sso',
-				'members',
-				'mcp-server',
-			].forEach((k) => s.add(k));
-		}
-		if (isEditor) {
-			['ingestion', 'integrations', 'mcp-server'].forEach((k) => s.add(k));
-		}
-		if (isViewer) {
-			s.add('mcp-server');
-		}
-		return s;
-	}
-
-	if (tier === 'enterprise') {
-		enableForAllUsers();
-		if (isAdmin) {
-			[
-				'billing',
-				'integrations',
-				'sso',
-				'members',
-				'ingestion',
-				'mcp-server',
-			].forEach((k) => s.add(k));
-		}
-		if (isEditor) {
-			['integrations', 'ingestion', 'mcp-server'].forEach((k) => s.add(k));
-		}
-		if (isViewer) {
-			s.add('mcp-server');
-		}
-		return s;
-	}
-
-	// community / community-enterprise (!cloud && !enterprise)
-	enableForAllUsers();
-	if (isAdmin) {
-		s.add('sso');
-		s.add('members');
-	}
-	// billing & integrations explicitly disabled for non-cloud users.
-	s.delete('billing');
-	s.delete('integrations');
-	return s;
-}
-
-// Mirrors getRoutes() in frontend/src/pages/Settings/utils.ts.
-// Returns the set of /settings route paths that are mounted (navigable).
-export function registeredRoutes(
-	persona: Persona,
-	env: SettingsEnv,
-): Set<string> {
-	const { tier, role } = persona;
-	const isAdmin = role === 'ADMIN';
-	const isEditor = role === 'EDITOR';
-	const isCloud = tier === 'cloud';
-	const isEnterprise = tier === 'enterprise';
-
-	const r = new Set<string>([
-		SETTINGS_ROUTES.WORKSPACE, // generalSettings — always
-		SETTINGS_ROUTES.ALL_CHANNELS, // always
-		SETTINGS_ROUTES.SERVICE_ACCOUNTS, // always
-		SETTINGS_ROUTES.ROLES, // always
-		SETTINGS_ROUTES.MY_SETTINGS, // always
-		SETTINGS_ROUTES.SHORTCUTS, // always
-		SETTINGS_ROUTES.MCP_SERVER, // always
-	]);
-
-	// organizationSettings — gated by current_org_settings; mirrored as admin-only.
-	if (isAdmin) {
-		r.add(SETTINGS_ROUTES.ORG_SETTINGS);
-	}
-	// multiIngestionSettings if gateway && (admin||editor); cloud read-only if cloud && !gateway.
-	if (
-		(env.isGatewayEnabled && (isAdmin || isEditor)) ||
-		(isCloud && !env.isGatewayEnabled)
-	) {
-		r.add(SETTINGS_ROUTES.INGESTION);
-	}
-	// membersSettings if admin.
-	if (isAdmin) {
-		r.add(SETTINGS_ROUTES.MEMBERS);
-	}
-	// billing if (cloud||enterprise) && admin.
-	if ((isCloud || isEnterprise) && isAdmin) {
-		r.add(SETTINGS_ROUTES.BILLING);
-	}
-	return r;
-}
-
-// Skip reason when a route's nav item is hidden for the persona; null when
-// visible. Centralised so every skip reads identically and is greppable.
-export function personaSkipReason(
-	persona: Persona,
-	env: SettingsEnv,
-	route: string,
-): string | null {
-	const visible = visibleNavItems(persona, env);
-	const testid = NAV_TESTID[route];
-	if (testid && visible.has(testid)) {
-		return null;
-	}
-	return `PERSONA_SKIP: ${route} hidden for ${persona.tier}×${persona.role}`;
-}
-
-// Second skip axis: a route is visible but renders tier-specific CONTENT (e.g.
-// /settings shows a cloud support card vs self-hosted retention controls).
-// Gates a test to the tiers whose content it asserts. Shares the PERSONA_SKIP:
-// prefix.
-export function tierSkipReason(
-	persona: Persona,
-	allowedTiers: Tier[],
-	label: string,
-): string | null {
-	if (allowedTiers.includes(persona.tier)) {
-		return null;
-	}
-	return `PERSONA_SKIP: ${label} not applicable for tier ${persona.tier} (needs ${allowedTiers.join(
-		'|',
-	)})`;
-}

tests/e2e/tests/settings/general.spec.ts

@@ -1,151 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import {
-	personaSkipReason,
-	tierSkipReason,
-} from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// Workspace (/settings) has two views: cloud (retention inputs disabled, no Save,
-// GeneralSettingsCloud support card) and self-hosted (interactive inputs, per-row Save).
-// Retention inputs in compact mode have no data-testid — role/text/CSS fallback.
-
-async function gotoWorkspace(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.WORKSPACE);
-	// Retention data is fetched server-side; allow margin for the API response.
-	await expect(page.locator('.retention-controls-container')).toBeVisible({
-		timeout: 15_000,
-	});
-}
-
-function retentionRow(page: Page, signal: string) {
-	return page.locator('.retention-row').filter({ hasText: signal });
-}
-
-function retentionInput(page: Page, signal: string) {
-	return retentionRow(page, signal).locator('input[type="number"]').first();
-}
-
-function saveButton(page: Page, signal: string) {
-	return retentionRow(page, signal).getByRole('button', { name: /^save$/i });
-}
-
-// Tier sets for the two Workspace content variants.
-const CLOUD_TIERS = ['cloud'] as const;
-const SELF_HOSTED_TIERS = [
-	'enterprise',
-	'community',
-	'community-enterprise',
-] as const;
-
-test.describe('Settings — Workspace / General page', () => {
-	test('TC-01 page renders retention controls and license-key row', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.WORKSPACE),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.WORKSPACE) ?? undefined,
-		);
-
-		await gotoWorkspace(page);
-
-		// Scoped to avoid strict-mode conflict with the sidenav item.
-		await expect(page.locator('.general-settings-title')).toContainText(
-			'Workspace',
-		);
-		await expect(page.locator('.general-settings-subtitle')).toContainText(
-			'Manage your workspace settings.',
-		);
-
-		await expect(page.getByText('Retention Controls')).toBeVisible();
-
-		await expect(retentionRow(page, 'Metrics')).toBeVisible();
-		await expect(retentionRow(page, 'Traces')).toBeVisible();
-		await expect(retentionRow(page, 'Logs')).toBeVisible();
-
-		await expect(retentionInput(page, 'Metrics')).toBeVisible();
-		await expect(retentionInput(page, 'Traces')).toBeVisible();
-		await expect(retentionInput(page, 'Logs')).toBeVisible();
-
-		await expect(page.getByTestId('license-key-row-copy-btn')).toBeVisible();
-	});
-
-	// RISK MODE: read-only — only asserts disabled state, nothing is mutated.
-	test('TC-02 cloud view — retention inputs are disabled and support card is visible', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.WORKSPACE),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.WORKSPACE) ?? undefined,
-		);
-		test.skip(
-			!!tierSkipReason(persona, [...CLOUD_TIERS], 'cloud retention view'),
-			tierSkipReason(persona, [...CLOUD_TIERS], 'cloud retention view') ??
-				undefined,
-		);
-
-		await gotoWorkspace(page);
-
-		await expect(retentionInput(page, 'Metrics')).toBeDisabled();
-		await expect(retentionInput(page, 'Traces')).toBeDisabled();
-		await expect(retentionInput(page, 'Logs')).toBeDisabled();
-
-		await expect(saveButton(page, 'Metrics')).toHaveCount(0);
-		await expect(saveButton(page, 'Traces')).toHaveCount(0);
-		await expect(saveButton(page, 'Logs')).toHaveCount(0);
-
-		await expect(
-			page.getByText(/please.*email us.*or connect.*via chat support/i),
-		).toBeVisible();
-	});
-
-	// RISK MODE: never clicks Save — only asserts enable-on-change / disable-on-clear; no PUT/POST.
-	test('TC-03 self-hosted view — retention input enables/disables Save — no save triggered', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.WORKSPACE),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.WORKSPACE) ?? undefined,
-		);
-		test.skip(
-			!!tierSkipReason(
-				persona,
-				[...SELF_HOSTED_TIERS],
-				'self-hosted retention controls',
-			),
-			tierSkipReason(
-				persona,
-				[...SELF_HOSTED_TIERS],
-				'self-hosted retention controls',
-			) ?? undefined,
-		);
-
-		await gotoWorkspace(page);
-
-		const metricsInput = retentionInput(page, 'Metrics');
-		const metricsSaveBtn = saveButton(page, 'Metrics');
-
-		const originalValue = await metricsInput.inputValue();
-
-		try {
-			await metricsInput.fill('9999');
-			await expect(metricsSaveBtn).toBeEnabled();
-
-			await metricsInput.fill('');
-			await expect(metricsSaveBtn).toBeDisabled();
-			await expect(
-				page.getByText(/retention period for .+ is not set yet/i),
-			).toBeVisible();
-		} finally {
-			// Restore so unsaved UI state does not leak to other workers sharing this stack.
-			await metricsInput.fill(originalValue);
-		}
-	});
-});

tests/e2e/tests/settings/ingestion.spec.ts

@@ -1,117 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import {
-	personaSkipReason,
-	tierSkipReason,
-} from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// Ingestion page, two variants gated by env.isGatewayEnabled / tier:
-// MultiIngestionSettings (gateway ON) vs read-only IngestionSettings (cloud, gateway OFF).
-// RISK MODE — READ-ONLY: never create/edit/delete keys or rate limits; create
-// button and copy affordances asserted for presence only, never clicked.
-// Each TC guards its variant via test.skip so bodies stay branch-free
-// (playwright/no-conditional-in-test).
-
-test.describe.configure({ mode: 'serial' });
-
-async function gotoIngestion(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.INGESTION);
-	// Ingestion keys/settings are fetched server-side; allow margin for the API response.
-	await expect(
-		page
-			.locator('.ingestion-key-container, .ingestion-settings-container')
-			.first(),
-	).toBeVisible({ timeout: 15_000 });
-}
-
-test.describe('Settings — Ingestion page', () => {
-	test('TC-01 MultiIngestionSettings — page chrome, search, table, and create affordance render', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.INGESTION),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.INGESTION) ?? undefined,
-		);
-		test.skip(
-			!!tierSkipReason(
-				persona,
-				['cloud', 'enterprise'],
-				'MultiIngestionSettings (gateway)',
-			) || !env.isGatewayEnabled,
-			!env.isGatewayEnabled
-				? 'PERSONA_SKIP: gateway feature flag is OFF — MultiIngestionSettings does not render'
-				: (tierSkipReason(
-						persona,
-						['cloud', 'enterprise'],
-						'MultiIngestionSettings (gateway)',
-					) ?? undefined),
-		);
-
-		await gotoIngestion(page);
-
-		const container = page.locator('.ingestion-key-container');
-		await expect(container).toBeVisible();
-
-		// Exact name match avoids the subtitle partial match.
-		await expect(
-			container.getByRole('heading', { name: 'Ingestion Keys' }),
-		).toBeVisible();
-		await expect(
-			container.getByText(/Create and manage ingestion keys/i),
-		).toBeVisible();
-
-		await expect(
-			container.getByPlaceholder('Search for ingestion key...'),
-		).toBeVisible();
-
-		await expect(
-			container.getByRole('button', { name: /new ingestion key/i }),
-		).toBeVisible();
-
-		await expect(container.locator('.ingestion-keys-table')).toBeVisible();
-
-		await expect(
-			container.locator('.ingestion-key-url-label', { hasText: 'Ingestion URL' }),
-		).toBeVisible();
-	});
-
-	test('TC-02 IngestionSettings (read-only) — table rows for URL, key, and region render', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.INGESTION),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.INGESTION) ?? undefined,
-		);
-		// This view only renders on cloud when gateway is disabled
-		test.skip(
-			env.isGatewayEnabled,
-			'PERSONA_SKIP: gateway is ON — MultiIngestionSettings renders instead of read-only table',
-		);
-		test.skip(
-			!!tierSkipReason(persona, ['cloud'], 'IngestionSettings read-only table'),
-			tierSkipReason(persona, ['cloud'], 'IngestionSettings read-only table') ??
-				undefined,
-		);
-
-		await gotoIngestion(page);
-
-		const container = page.locator('.ingestion-settings-container');
-		await expect(container).toBeVisible();
-
-		await expect(
-			container.getByText(/start sending your telemetry data/i),
-		).toBeVisible();
-
-		const table = container.locator('.ant-table');
-		await expect(table).toBeVisible();
-		await expect(table.getByText('Ingestion URL')).toBeVisible();
-		await expect(table.getByText('Ingestion Key')).toBeVisible();
-		await expect(table.getByText('Ingestion Region')).toBeVisible();
-	});
-});

tests/e2e/tests/settings/mcp-server.spec.ts

@@ -1,153 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
-import { authToken } from '../../helpers/dashboards';
-import { personaSkipReason } from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// MCP Server settings, two variants gated by mcp_url in /api/v1/global/config:
-// full page (mcp_url present, cloud) vs NotCloudFallback (absent, community/self-hosted).
-// RISK MODE — READ-ONLY: never create a service account; copy/create/install
-// buttons asserted for presence only, never clicked.
-// mcpEndpointPresent is probed in beforeAll (real backend state) so TC-01/TC-02
-// skip via test.skip rather than branching in bodies (playwright/no-conditional-in-test).
-
-test.describe.configure({ mode: 'serial' });
-
-let mcpEndpointPresent = false;
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		const res = await page.request.get('/api/v1/global/config', {
-			headers: { Authorization: `Bearer ${token}` },
-		});
-		if (res.ok()) {
-			const body = await res.json();
-			const mcpUrl: unknown = body?.data?.mcp_url;
-			mcpEndpointPresent = typeof mcpUrl === 'string' && mcpUrl.length > 0;
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoMcpServer(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.MCP_SERVER);
-	// Spinner gone => either full page or fallback has rendered.
-	await expect(page.locator('.ant-spin-spinning')).toHaveCount(0);
-}
-
-test.describe('Settings — MCP Server page', () => {
-	// Locators below use CSS classes / role-text; only mcp-settings has a data-testid.
-	test('TC-01 full page renders: header, client tabs, auth card, use-cases card', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MCP_SERVER),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MCP_SERVER) ?? undefined,
-		);
-		// Full-page content requires mcp_url to be configured. If not present the
-		// NotCloudFallback renders instead — TC-02 covers that path.
-		test.skip(
-			!mcpEndpointPresent,
-			'PERSONA_SKIP: mcp_url not configured on this stack — NotCloudFallback renders; see TC-02',
-		);
-
-		await gotoMcpServer(page);
-
-		await expect(page.getByTestId('mcp-settings')).toBeVisible();
-
-		await expect(page.locator('.mcp-settings__header-title')).toContainText(
-			'SigNoz MCP Server',
-		);
-		await expect(page.locator('.mcp-settings__header-subtitle')).toContainText(
-			'Model Context Protocol',
-		);
-
-		await expect(page.locator('.mcp-settings__card')).toBeVisible();
-		await expect(page.locator('.mcp-settings__card-title')).toContainText(
-			'Configure your client',
-		);
-
-		const tabsRoot = page.locator('.mcp-client-tabs-root');
-		await expect(tabsRoot).toBeVisible();
-		await expect(tabsRoot.getByRole('tab', { name: /cursor/i })).toBeVisible();
-		await expect(
-			tabsRoot.getByRole('tab', { name: /claude code/i }),
-		).toBeVisible();
-		await expect(tabsRoot.getByRole('tab', { name: /vs code/i })).toBeVisible();
-
-		await expect(
-			page.locator('.mcp-client-tabs__snippet-pre').first(),
-		).toBeVisible();
-
-		await expect(
-			page.getByRole('button', { name: /copy cursor config/i }),
-		).toBeVisible();
-
-		const authCard = page.locator('.mcp-auth-card');
-		await expect(authCard).toBeVisible();
-		await expect(authCard.locator('.mcp-auth-card__title')).toContainText(
-			'Authenticate from your client',
-		);
-
-		await expect(
-			authCard.locator('.mcp-auth-card__field-label').first(),
-		).toContainText('SigNoz Instance URL');
-		await expect(
-			authCard.getByRole('button', { name: /copy signoz instance url/i }),
-		).toBeVisible();
-
-		await expect(
-			authCard.locator('.mcp-auth-card__field-label').nth(1),
-		).toContainText('API Key');
-		await expect(
-			authCard.getByRole('button', { name: /create service account/i }),
-		).toBeVisible();
-
-		const useCasesCard = page.locator('.mcp-use-cases-card');
-		await expect(useCasesCard).toBeVisible();
-		await expect(
-			useCasesCard.locator('.mcp-use-cases-card__title'),
-		).toContainText('What you can do with it');
-		await expect(useCasesCard.locator('.mcp-use-cases-card__list')).toBeVisible();
-
-		await expect(
-			useCasesCard.getByRole('button', { name: /see more use cases/i }),
-		).toBeVisible();
-	});
-
-	// Skipped when the beforeAll probe found mcp_url — full page renders instead.
-	test('TC-02 NotCloudFallback renders when MCP endpoint is not configured', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MCP_SERVER),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MCP_SERVER) ?? undefined,
-		);
-		test.skip(
-			mcpEndpointPresent,
-			'PERSONA_SKIP: mcp_url is configured on this stack — NotCloudFallback does not render',
-		);
-
-		await gotoMcpServer(page);
-
-		await expect(page.locator('.not-cloud-fallback')).toBeVisible();
-		await expect(page.locator('.not-cloud-fallback__title')).toContainText(
-			'MCP Server is available on SigNoz',
-		);
-		await expect(
-			page.getByRole('button', { name: /view mcp server docs/i }),
-		).toBeVisible();
-
-		await expect(page.getByTestId('mcp-settings')).toHaveCount(0);
-	});
-});

tests/e2e/tests/settings/members.spec.ts

@@ -1,205 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { personaSkipReason } from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// RISK MODE: read-only plus one non-submitting invite-modal check — no member is
-// created/edited/deleted/role-changed. The fresh bootstrap stack has exactly one
-// member (seeded admin, active), so filter/search coverage is limited to that row.
-// No data-testid exists in MembersSettings/Table/InviteModal — role/placeholder/text/CSS fallback.
-
-test.describe.configure({ mode: 'serial' });
-
-const ADMIN_EMAIL = process.env.SIGNOZ_E2E_USERNAME ?? 'admin@integration.test';
-const SEARCH_PLACEHOLDER = 'Search by name or email...';
-
-async function gotoMembers(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.MEMBERS);
-	// Members list is fetched server-side; allow margin for the API response.
-	await expect(page.locator('.members-table-wrapper')).toBeVisible({
-		timeout: 15_000,
-	});
-}
-
-test.describe('Settings — Members page', () => {
-	test('TC-01 list renders with columns and the bootstrap admin user row', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS) ?? undefined,
-		);
-
-		await gotoMembers(page);
-
-		await expect(
-			page.getByRole('heading', { name: 'Members', level: 1 }),
-		).toBeVisible();
-		await expect(
-			page.getByText('Overview of people added to this workspace.'),
-		).toBeVisible();
-
-		await expect(page.locator('.members-filter-trigger')).toBeVisible();
-		await expect(page.getByPlaceholder(SEARCH_PLACEHOLDER)).toBeVisible();
-		await expect(
-			page.getByRole('button', { name: /invite member/i }),
-		).toBeVisible();
-
-		const table = page.locator('.members-table');
-		await expect(
-			table.getByRole('columnheader', { name: 'Name / Email' }),
-		).toBeVisible();
-		await expect(
-			table.getByRole('columnheader', { name: 'Status' }),
-		).toBeVisible();
-		await expect(
-			table.getByRole('columnheader', { name: 'Joined On' }),
-		).toBeVisible();
-
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toBeVisible();
-
-		const adminRow = page
-			.locator('tr')
-			.filter({ has: page.locator('.member-email', { hasText: ADMIN_EMAIL }) });
-		await expect(adminRow.getByText('ACTIVE')).toBeVisible();
-	});
-
-	// On the single-member stack, Pending/Deleted both yield the empty state.
-	test('TC-02 filter dropdown — cycles All / Pending / Deleted and updates the list', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS) ?? undefined,
-		);
-
-		await gotoMembers(page);
-
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toBeVisible();
-
-		await page.locator('.members-filter-trigger').click();
-		const menu = page.getByRole('menu');
-		await expect(menu).toBeVisible();
-		await menu.getByText(/pending invites/i).click();
-
-		await expect(page.locator('.members-empty-state')).toBeVisible();
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toHaveCount(0);
-
-		await page.locator('.members-filter-trigger').click();
-		await expect(page.getByRole('menu')).toBeVisible();
-		await page
-			.getByRole('menu')
-			.getByText(/^deleted/i)
-			.click();
-
-		await expect(page.locator('.members-empty-state')).toBeVisible();
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toHaveCount(0);
-
-		await page.locator('.members-filter-trigger').click();
-		await expect(page.getByRole('menu')).toBeVisible();
-		await page
-			.getByRole('menu')
-			.getByText(/all members/i)
-			.click();
-
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toBeVisible();
-		await expect(page.locator('.members-empty-state')).toHaveCount(0);
-	});
-
-	test('TC-03 search filters by email match and shows empty state on no match', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS) ?? undefined,
-		);
-
-		await gotoMembers(page);
-
-		const searchInput = page.getByPlaceholder(SEARCH_PLACEHOLDER);
-
-		await searchInput.fill(ADMIN_EMAIL);
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toBeVisible();
-		await expect(page.locator('.members-empty-state')).toHaveCount(0);
-
-		await searchInput.fill('xyznonexistentuser999@nowhere.invalid');
-		await expect(page.locator('.members-empty-state')).toBeVisible();
-		await expect(
-			page
-				.locator('.members-empty-state__text')
-				.getByText('xyznonexistentuser999@nowhere.invalid'),
-		).toBeVisible();
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toHaveCount(0);
-
-		await searchInput.fill('');
-		await expect(
-			page.locator('.member-email', { hasText: ADMIN_EMAIL }),
-		).toBeVisible();
-		await expect(page.locator('.members-empty-state')).toHaveCount(0);
-	});
-
-	// RISK MODE: submit is never clicked; no invite is sent.
-	test('TC-04 invite modal — renders correctly, submit disabled on untouched rows, Cancel dismisses', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MEMBERS) ?? undefined,
-		);
-
-		await gotoMembers(page);
-
-		await page.getByRole('button', { name: /invite member/i }).click();
-
-		const modal = page.getByRole('dialog');
-		await expect(modal).toBeVisible();
-
-		await expect(
-			modal.getByRole('heading', { name: 'Invite Team Members' }),
-		).toBeVisible();
-
-		// Header cells scoped to class selectors to avoid matching input placeholders.
-		await expect(modal.locator('.email-header')).toBeVisible();
-		await expect(modal.locator('.role-header')).toBeVisible();
-
-		// Modal starts with 3 empty rows.
-		const emailInputs = modal.locator('input[type="email"]');
-		await expect(emailInputs.first()).toBeVisible();
-		await expect(emailInputs).toHaveCount(3);
-
-		await expect(
-			modal.getByRole('button', { name: /add another/i }),
-		).toBeVisible();
-
-		// Submit is disabled while all rows are untouched.
-		const submitBtn = modal.getByRole('button', { name: 'Invite Team Members' });
-		await expect(submitBtn).toBeVisible();
-		await expect(submitBtn).toBeDisabled();
-
-		await modal.getByRole('button', { name: /cancel/i }).click();
-		await expect(modal).not.toBeVisible();
-	});
-});

tests/e2e/tests/settings/my-settings.spec.ts

@@ -1,262 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { authToken } from '../../helpers/dashboards';
-import { personaSkipReason } from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-test.describe.configure({ mode: 'serial' });
-
-// Runtime branching lives in these helpers, not test() bodies — playwright/no-conditional-in-test.
-
-async function gotoMySettings(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.MY_SETTINGS);
-	await expect(page.getByTestId('theme-selector')).toBeVisible();
-}
-
-async function readThemeState(
-	page: Page,
-): Promise<{ theme: string; autoSwitch: string }> {
-	// globalThis cast: the evaluate callback runs in the browser, but the e2e
-	// tsconfig uses the ES2020 lib (no DOM), so `localStorage` isn't typed here.
-	return page.evaluate(() => ({
-		theme: (globalThis as any).localStorage.getItem('THEME') ?? 'dark',
-		autoSwitch:
-			(globalThis as any).localStorage.getItem('THEME_AUTO_SWITCH') ?? 'false',
-	}));
-}
-
-async function restoreTheme(
-	page: Page,
-	theme: string,
-	autoSwitch: string,
-): Promise<void> {
-	await page.evaluate(
-		([t, a]) => {
-			(globalThis as any).localStorage.setItem('THEME', t);
-			(globalThis as any).localStorage.setItem('THEME_AUTO_SWITCH', a);
-		},
-		[theme, autoSwitch],
-	);
-}
-
-async function restoreSideNavPinned(
-	page: Page,
-	originalChecked: string,
-): Promise<void> {
-	const token = await authToken(page);
-	await page.request.put('/api/v1/user/preferences/sidenav_pinned', {
-		data: { value: originalChecked === 'true' },
-		headers: { Authorization: `Bearer ${token}` },
-	});
-}
-
-function flipAriaChecked(current: string): string {
-	if (current === 'true') {
-		return 'false';
-	}
-	return 'true';
-}
-
-test.describe('My Settings — Account page', () => {
-	test('TC-01 page renders with all expected controls', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS) ?? undefined,
-		);
-
-		await gotoMySettings(page);
-
-		await expect(
-			page.getByRole('button', { name: /update name/i }),
-		).toBeVisible();
-		await expect(
-			page.getByRole('button', { name: /reset password/i }).first(),
-		).toBeVisible();
-
-		await expect(page.getByTestId('theme-selector')).toBeVisible();
-		await expect(page.getByTestId('timezone-adaptation-switch')).toBeVisible();
-		await expect(page.getByTestId('side-nav-pinned-switch')).toBeVisible();
-
-		// License copy button renders because bootstrap issues an enterprise license on cloud.
-		await expect(page.getByTestId('license-key-copy-btn')).toBeVisible();
-	});
-
-	test('TC-02 theme toggle cycles dark → light → auto and applies', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS) ?? undefined,
-		);
-
-		await gotoMySettings(page);
-
-		const originalTheme = await readThemeState(page);
-
-		try {
-			// Radix ToggleGroup renders items as role="radio" within a radiogroup.
-			const selector = page.getByTestId('theme-selector');
-			const darkRadio = selector.getByRole('radio', { name: /dark/i });
-			const lightRadio = selector.getByRole('radio', { name: /light/i });
-			const systemRadio = selector.getByRole('radio', { name: /system/i });
-
-			await lightRadio.click();
-			await expect(lightRadio).toBeChecked();
-
-			await systemRadio.click();
-			await expect(systemRadio).toBeChecked();
-
-			await darkRadio.click();
-			await expect(darkRadio).toBeChecked();
-		} finally {
-			await restoreTheme(page, originalTheme.theme, originalTheme.autoSwitch);
-		}
-	});
-
-	test('TC-03 sidebar pin toggle flips checked state', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS) ?? undefined,
-		);
-
-		await gotoMySettings(page);
-
-		const switchEl = page.getByTestId('side-nav-pinned-switch');
-		const originalChecked =
-			(await switchEl.getAttribute('aria-checked')) ?? 'false';
-		const expectedAfterToggle = flipAriaChecked(originalChecked);
-
-		try {
-			await switchEl.click();
-			// Pin state persists server-side; allow margin for the update under
-			// parallel-worker CPU contention (default 5s expect timeout flakes).
-			await expect(switchEl).toHaveAttribute('aria-checked', expectedAfterToggle, {
-				timeout: 15_000,
-			});
-		} finally {
-			await restoreSideNavPinned(page, originalChecked);
-		}
-	});
-
-	test('TC-04 timezone adaptation toggle flips checked state', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS) ?? undefined,
-		);
-
-		await gotoMySettings(page);
-
-		const switchEl = page.getByTestId('timezone-adaptation-switch');
-		const originalChecked =
-			(await switchEl.getAttribute('aria-checked')) ?? 'true';
-		const expectedAfterToggle = flipAriaChecked(originalChecked);
-
-		try {
-			await switchEl.click();
-			await expect(switchEl).toHaveAttribute('aria-checked', expectedAfterToggle, {
-				timeout: 15_000,
-			});
-		} finally {
-			// isAdaptationEnabled is not persisted — toggle back to restore session state.
-			await switchEl.click();
-		}
-	});
-
-	// note: PUT /api/v2/users/me returns root_user_operation_unsupported for the
-	// bootstrap admin user. Only the modal open/input/submit-button UI is tested
-	// here; the "name reflects in card after save" assertion cannot be verified
-	// against this stack.
-	test('TC-05 update name modal — opens, pre-fills, submit button active', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS) ?? undefined,
-		);
-
-		await gotoMySettings(page);
-
-		const currentName = await page.locator('.user-name').first().innerText();
-
-		await page.getByRole('button', { name: /update name/i }).click();
-
-		const nameInput = page.getByPlaceholder('e.g. John Doe');
-		await expect(nameInput).toBeVisible();
-
-		await expect(nameInput).toHaveValue(currentName);
-
-		const submitBtn = page.getByTestId('update-name-btn');
-		await expect(submitBtn).toBeVisible();
-		await expect(submitBtn).toBeEnabled();
-
-		// Close via × button — Ant Modal's Escape handler can race with input focus in headless mode.
-		await page
-			.locator('.update-name-modal')
-			.getByRole('button', { name: 'Close' })
-			.click();
-		await expect(nameInput).not.toBeVisible();
-	});
-
-	test('TC-06 reset-password modal — validation only, never submits', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.MY_SETTINGS) ?? undefined,
-		);
-
-		await gotoMySettings(page);
-
-		// The button that OPENS the modal has no testid; reset-password-btn is the SUBMIT button inside.
-		await page
-			.getByRole('button', { name: /reset password/i })
-			.first()
-			.click();
-
-		const currentPasswordInput = page.getByTestId('current-password-textbox');
-		const newPasswordInput = page.getByTestId('new-password-textbox');
-		const submitBtn = page.getByTestId('reset-password-btn');
-
-		await expect(currentPasswordInput).toBeVisible();
-		await expect(newPasswordInput).toBeVisible();
-
-		await expect(submitBtn).toBeDisabled();
-
-		await currentPasswordInput.fill('somepassword');
-		await expect(submitBtn).toBeDisabled();
-
-		// Same value → passwords match → validation error + disabled
-		await newPasswordInput.fill('somepassword');
-		await expect(page.getByText(/new password must be different/i)).toBeVisible();
-		await expect(submitBtn).toBeDisabled();
-
-		// Stop at enabled — clicking would rotate the admin password and break every other worker.
-		await newPasswordInput.fill('differentpassword!1');
-		await expect(submitBtn).toBeEnabled();
-
-		await page
-			.locator('.reset-password-modal')
-			.getByRole('button', { name: 'Close' })
-			.click();
-		await expect(currentPasswordInput).not.toBeVisible();
-	});
-});

tests/e2e/tests/settings/org-sso.spec.ts

@@ -1,106 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { personaSkipReason } from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// OrganizationSettings (/settings/org-settings): DisplayName form + AuthDomain section.
-// Invite coverage lives in members.spec.ts — the #invite-team-members hash is ignored here.
-//
-// note: PUT /api/v2/orgs returns root_user_operation_unsupported for the bootstrap
-// admin user. TC-02 only asserts the field is editable and the Submit button enables;
-// it does NOT submit the form. The original org name is never mutated.
-
-test.describe.configure({ mode: 'serial' });
-
-async function gotoOrgSettings(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.ORG_SETTINGS);
-	await expect(page.getByLabel('Display name')).toBeVisible();
-}
-
-test.describe('Organization Settings — SSO & Org page', () => {
-	test('TC-01 page renders display-name field and authenticated-domains section', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.ORG_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.ORG_SETTINGS) ?? undefined,
-		);
-
-		await gotoOrgSettings(page);
-
-		await expect(page.getByLabel('Display name')).toBeVisible();
-		await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
-
-		await expect(
-			page.getByRole('heading', { name: 'Authenticated Domains' }),
-		).toBeVisible();
-		await expect(page.getByRole('button', { name: 'Add Domain' })).toBeVisible();
-	});
-
-	// note: root_user_operation_unsupported on save (see header) — never clicks Submit; value restored in finally.
-	test('TC-02 org display name — field is editable and Submit enables on change', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.ORG_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.ORG_SETTINGS) ?? undefined,
-		);
-
-		await gotoOrgSettings(page);
-
-		const nameInput = page.getByLabel('Display name');
-		const submitBtn = page.getByRole('button', { name: 'Submit' });
-
-		const originalValue = await nameInput.inputValue();
-
-		try {
-			// Submit is disabled when the value equals the current saved name.
-			await expect(submitBtn).toBeDisabled();
-
-			await nameInput.fill('org-sso-spec-temp');
-			await expect(nameInput).toHaveValue('org-sso-spec-temp');
-			await expect(submitBtn).toBeEnabled();
-
-			await nameInput.fill('');
-			await expect(submitBtn).toBeDisabled();
-		} finally {
-			// Restored value equals the saved one, so Submit stays disabled — no API call.
-			await nameInput.fill(originalValue);
-			await expect(submitBtn).toBeDisabled();
-		}
-	});
-
-	// RISK MODE: never enable SSO/SAML or click Save — that changes auth for the whole stack.
-	test('TC-03 SSO config — Add Domain opens provider-selector modal, close dismisses it', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.ORG_SETTINGS),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.ORG_SETTINGS) ?? undefined,
-		);
-
-		await gotoOrgSettings(page);
-
-		await page.getByRole('button', { name: 'Add Domain' }).click();
-
-		const modal = page.getByRole('dialog');
-		await expect(modal).toBeVisible();
-
-		await expect(
-			modal.getByText('Configure Authentication Method'),
-		).toBeVisible();
-		await expect(modal.getByText('Google Apps Authentication')).toBeVisible();
-
-		// SAML/OIDC visibility depends on the SSO flag — only assert Google Auth, always enabled.
-
-		await modal.getByRole('button', { name: /close/i }).click();
-		await expect(modal).not.toBeVisible();
-	});
-});

tests/e2e/tests/settings/roles.spec.ts

@@ -1,172 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
-import { authToken } from '../../helpers/dashboards';
-import { personaSkipReason } from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// Roles page. RISK MODE — READ-ONLY: never create/edit/delete a role; TC-03
-// only views a managed role's detail page and navigates back.
-// rolesEnabled probes /api/v1/features for USE_FINE_GRAINED_AUTHZ — real backend
-// state, not a guess; row navigation is only wired up when it is on, so TC-03 skips otherwise.
-
-test.describe.configure({ mode: 'serial' });
-
-let rolesEnabled = false;
-
-async function gotoRolesList(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.ROLES);
-	await expect(page.getByTestId('roles-settings')).toBeVisible();
-}
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		const res = await page.request.get('/api/v1/features', {
-			headers: { Authorization: `Bearer ${token}` },
-		});
-		const body = await res.json();
-		const flags: { name?: string; active?: boolean }[] = body?.data ?? [];
-		const flag = flags.find((f) => f?.name === 'use_fine_grained_authz');
-		rolesEnabled = !!flag?.active;
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.describe('Settings — Roles page', () => {
-	test('TC-01 list renders with container, header, search, and managed-role rows', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.ROLES),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.ROLES) ?? undefined,
-		);
-
-		await gotoRolesList(page);
-
-		await expect(page.locator('.roles-settings-header-title')).toContainText(
-			'Roles',
-		);
-		await expect(
-			page.locator('.roles-settings-header-description'),
-		).toContainText('Create and manage custom roles for your team.');
-
-		await expect(page.locator('input[type="search"]')).toBeVisible();
-		await expect(
-			page.locator('input[placeholder="Search for roles..."]'),
-		).toBeVisible();
-
-		const table = page.locator('.roles-listing-table');
-		await expect(table).toBeVisible();
-		await expect(table.locator('.roles-table-header-cell--name')).toContainText(
-			'Name',
-		);
-		await expect(
-			table.locator('.roles-table-header-cell--description'),
-		).toContainText('Description');
-		await expect(
-			table.locator('.roles-table-header-cell--updated-at'),
-		).toContainText('Updated At');
-		await expect(
-			table.locator('.roles-table-header-cell--created-at'),
-		).toContainText('Created At');
-
-		await expect(
-			table.locator('.roles-table-section-header', { hasText: 'Managed roles' }),
-		).toBeVisible();
-
-		await expect(table.locator('.roles-table-row').first()).toBeVisible();
-	});
-
-	test('TC-02 search filters roles by match and shows empty state on no match', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.ROLES),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.ROLES) ?? undefined,
-		);
-
-		await gotoRolesList(page);
-
-		const searchInput = page.locator('input[placeholder="Search for roles..."]');
-		const table = page.locator('.roles-listing-table');
-
-		await searchInput.fill('Admin');
-		await expect(
-			table.locator('.roles-table-cell--name', { hasText: /admin/i }).first(),
-		).toBeVisible();
-		await expect(table.locator('.roles-table-empty')).toHaveCount(0);
-
-		await searchInput.fill('xyznonexistentrole999');
-		await expect(table.locator('.roles-table-empty')).toBeVisible();
-		await expect(table.locator('.roles-table-empty')).toContainText(
-			'No roles match your search.',
-		);
-		await expect(table.locator('.roles-table-row')).toHaveCount(0);
-
-		await searchInput.fill('');
-		await expect(table.locator('.roles-table-row').first()).toBeVisible();
-		await expect(table.locator('.roles-table-empty')).toHaveCount(0);
-	});
-
-	// Read-only: views a managed role, asserts no edit/delete, navigates back.
-	// Skipped when USE_FINE_GRAINED_AUTHZ is off — rows have no click handler.
-	test('TC-03 role detail page — clicking a managed role navigates to its detail view', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, SETTINGS_ROUTES.ROLES),
-			personaSkipReason(persona, env, SETTINGS_ROUTES.ROLES) ?? undefined,
-		);
-		test.skip(
-			!rolesEnabled,
-			'PERSONA_SKIP: USE_FINE_GRAINED_AUTHZ feature flag is off — role rows are not clickable',
-		);
-
-		await gotoRolesList(page);
-
-		const table = page.locator('.roles-listing-table');
-
-		const firstRow = table.locator('.roles-table-row').first();
-		await firstRow.scrollIntoViewIfNeeded();
-		await firstRow.click();
-
-		await expect(page).toHaveURL(/\/settings\/roles\/[^/]+/);
-
-		const detailPage = page.locator('.role-details-page');
-		await expect(detailPage).toBeVisible();
-		await expect(detailPage.locator('.role-details-title')).toBeVisible();
-		await expect(detailPage.locator('.role-details-title')).toContainText(
-			'Role —',
-		);
-
-		await expect(
-			detailPage.getByText(
-				'This is a managed role. Permissions and settings are view-only and cannot be modified.',
-			),
-		).toBeVisible();
-
-		await expect(
-			detailPage.getByRole('button', { name: 'Edit Role Details' }),
-		).toHaveCount(0);
-
-		await expect(
-			detailPage.locator('.role-details-section-label', {
-				hasText: 'Permissions',
-			}),
-		).toBeVisible();
-
-		await page.goto(SETTINGS_ROUTES.ROLES);
-		await expect(page.getByTestId('roles-settings')).toBeVisible();
-	});
-});

tests/e2e/tests/settings/service-accounts.spec.ts

@@ -1,191 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
-import { authToken } from '../../helpers/dashboards';
-import { personaSkipReason } from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// Service Accounts page. RISK MODE — READ-ONLY: never create/edit/delete an
-// account or generate a token; the create modal is never opened.
-// listAccessible probes the real authz/check backend state in beforeAll (when
-// use_fine_grained_authz is on the admin may lack serviceaccount:list, rendering
-// PermissionDeniedFullPage); the functional TCs skip when it is false.
-
-test.describe.configure({ mode: 'serial' });
-
-let listAccessible = false;
-
-async function gotoServiceAccounts(page: Page): Promise<void> {
-	await page.goto(SETTINGS_ROUTES.SERVICE_ACCOUNTS);
-	await expect(page.locator('.sa-settings__title')).toBeVisible();
-}
-
-function buildSkipReason(
-	persona: Parameters<typeof personaSkipReason>[0],
-	env: Parameters<typeof personaSkipReason>[1],
-): string | null {
-	return personaSkipReason(persona, env, SETTINGS_ROUTES.SERVICE_ACCOUNTS);
-}
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		const res = await page.request.get('/api/v1/features', {
-			headers: { Authorization: `Bearer ${token}` },
-		});
-		const body = await res.json();
-		const flags: { name?: string; active?: boolean }[] = body?.data ?? [];
-		const fgAuthz = flags.find((f) => f?.name === 'use_fine_grained_authz');
-
-		if (!fgAuthz?.active) {
-			// Without fine-grained authz the SA list is always accessible.
-			listAccessible = true;
-			return;
-		}
-
-		// Probe the authz check endpoint for serviceaccount:list (wildcard).
-		const authzRes = await page.request.post('/api/v1/authz/check', {
-			headers: { Authorization: `Bearer ${token}` },
-			data: [
-				{
-					relation: 'list',
-					object: {
-						resource: { kind: 'serviceaccount', type: 'serviceaccount' },
-						selector: '*',
-					},
-				},
-			],
-		});
-		const authzBody = await authzRes.json();
-		const items: { authorized?: boolean }[] = authzBody?.data ?? [];
-		listAccessible = items.some((i) => i?.authorized);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.describe('Settings — Service Accounts page', () => {
-	test('TC-01 page chrome and empty-state render', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!buildSkipReason(persona, env),
-			buildSkipReason(persona, env) ?? undefined,
-		);
-		test.skip(
-			!listAccessible,
-			'PERSONA_SKIP: serviceaccount:list permission not granted for this persona — PermissionDeniedFullPage renders instead',
-		);
-
-		await gotoServiceAccounts(page);
-
-		await expect(page.locator('.sa-settings__title')).toContainText(
-			'Service Accounts',
-		);
-		await expect(page.locator('.sa-settings__subtitle')).toContainText(
-			'Overview of service accounts added to this workspace.',
-		);
-		await expect(
-			page.locator('.sa-settings__subtitle a[href*="signoz.io/docs"]'),
-		).toBeVisible();
-
-		const controls = page.locator('.sa-settings__controls');
-		await expect(controls).toBeVisible();
-		await expect(
-			controls.getByRole('button', { name: /All accounts/i }),
-		).toBeVisible();
-		await expect(
-			controls.locator('input[placeholder="Search by name or email..."]'),
-		).toBeVisible();
-
-		await expect(
-			controls.getByRole('button', { name: /New Service Account/i }),
-		).toBeVisible();
-
-		await expect(page.locator('.sa-table-wrapper')).toBeVisible();
-		await expect(page.locator('.sa-empty-state')).toBeVisible();
-		await expect(page.locator('.sa-empty-state__text')).toContainText(
-			'No service accounts.',
-		);
-	});
-
-	test('TC-02 filter dropdown writes URL param and shows empty-state per mode', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!buildSkipReason(persona, env),
-			buildSkipReason(persona, env) ?? undefined,
-		);
-		test.skip(
-			!listAccessible,
-			'PERSONA_SKIP: serviceaccount:list permission not granted for this persona — PermissionDeniedFullPage renders instead',
-		);
-
-		await gotoServiceAccounts(page);
-
-		const filterTrigger = page.getByRole('button', { name: /All accounts/i });
-
-		await filterTrigger.click();
-		await page.getByText(/^Active ⎯/).click();
-		await expect(page).toHaveURL(/[?&]filter=active/);
-		await expect(page.locator('.sa-empty-state')).toBeVisible();
-
-		await page.getByRole('button', { name: /Active ⎯/i }).click();
-		await page.getByText(/^Deleted ⎯/).click();
-		await expect(page).toHaveURL(/[?&]filter=deleted/);
-		await expect(page.locator('.sa-empty-state')).toBeVisible();
-
-		await page.getByRole('button', { name: /Deleted ⎯/i }).click();
-		await page.getByText(/^All accounts ⎯/).click();
-		await expect(page).not.toHaveURL(/[?&]filter=active/);
-		await expect(page).not.toHaveURL(/[?&]filter=deleted/);
-		await expect(page.locator('.sa-empty-state')).toBeVisible();
-	});
-
-	test('TC-03 search updates URL and empty-state; create button enabled', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!buildSkipReason(persona, env),
-			buildSkipReason(persona, env) ?? undefined,
-		);
-		test.skip(
-			!listAccessible,
-			'PERSONA_SKIP: serviceaccount:list permission not granted for this persona — PermissionDeniedFullPage renders instead',
-		);
-
-		await gotoServiceAccounts(page);
-
-		const searchInput = page.locator(
-			'input[placeholder="Search by name or email..."]',
-		);
-
-		await searchInput.fill('xyznonexistent999');
-		await expect(page).toHaveURL(/[?&]search=xyznonexistent999/);
-		await expect(page.locator('.sa-empty-state__text')).toContainText(
-			'No results for',
-		);
-		await expect(page.locator('.sa-empty-state__text strong')).toContainText(
-			'xyznonexistent999',
-		);
-
-		await searchInput.fill('');
-		await expect(page).not.toHaveURL(/[?&]search=xyznonexistent999/);
-		await expect(page.locator('.sa-empty-state__text')).toContainText(
-			'No service accounts.',
-		);
-
-		const createBtn = page.getByRole('button', { name: /New Service Account/i });
-		await expect(createBtn).toBeVisible();
-		await expect(createBtn).toBeEnabled();
-	});
-});

tests/e2e/tests/settings/shell.spec.ts

@@ -1,125 +0,0 @@
-import type { Persona, SettingsEnv } from '../../helpers/persona';
-
-import { expect, test } from '../../fixtures/auth';
-import {
-	registeredRoutes,
-	visibleNavItems,
-} from '../../helpers/settingsAccess';
-import {
-	NAV_TESTID,
-	SETTINGS_ROUTES,
-	gotoSettings,
-} from '../../helpers/settings';
-
-// Branching lives in module-level helpers, not test bodies — the repo's
-// playwright/no-conditional-in-test rule forbids `if` inside `test()`.
-
-function partitionNavTestids(
-	persona: Persona,
-	env: SettingsEnv,
-): { visible: string[]; hidden: string[] } {
-	const all = Object.values(NAV_TESTID);
-	const expected = visibleNavItems(persona, env);
-	return {
-		visible: all.filter((testid) => expected.has(testid)),
-		hidden: all.filter((testid) => !expected.has(testid)),
-	};
-}
-
-// Visible nav items whose /settings route is not registered (mounted).
-// INTEGRATIONS is excluded — it is a top-level page, not a RouteTab route.
-function navRouteMismatches(persona: Persona, env: SettingsEnv): string[] {
-	const visible = visibleNavItems(persona, env);
-	const registered = registeredRoutes(persona, env);
-	const routeByTestid = Object.fromEntries(
-		Object.entries(NAV_TESTID).map(([route, testid]) => [testid, route]),
-	);
-	return [...visible]
-		.map((testid) => routeByTestid[testid])
-		.filter((route) => !!route && route !== SETTINGS_ROUTES.INTEGRATIONS)
-		.filter((route) => !registered.has(route))
-		.map((route) => `${route} is nav-visible but route not registered`);
-}
-
-test.describe('Settings — shell, gating matrix & integrity', () => {
-	test('TC-01 settings shell chrome renders with no JS pageerror', async ({
-		authedPage: page,
-	}) => {
-		const errors: Error[] = [];
-		page.on('pageerror', (err) => errors.push(err));
-
-		await gotoSettings(page);
-
-		await expect(page.getByTestId('settings-page-title')).toBeVisible();
-		await expect(page.getByTestId('settings-page-sidenav')).toBeVisible();
-		expect(errors, errors.map((e) => e.message).join('\n')).toHaveLength(0);
-	});
-
-	test('TC-02 sidenav shows exactly the matrix-predicted items', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		await gotoSettings(page);
-		const sidenav = page.getByTestId('settings-page-sidenav');
-		const { visible, hidden } = partitionNavTestids(persona, env);
-
-		for (const testid of visible) {
-			await expect(
-				sidenav.getByTestId(testid),
-				`${testid} should be visible`,
-			).toBeVisible();
-		}
-		for (const testid of hidden) {
-			await expect(
-				sidenav.getByTestId(testid),
-				`${testid} should be hidden`,
-			).toHaveCount(0);
-		}
-	});
-
-	test('TC-03 every registered route deep-links with no JS pageerror', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		const routes = [...registeredRoutes(persona, env)];
-		for (const route of routes) {
-			const errors: Error[] = [];
-			const onError = (err: Error): void => {
-				errors.push(err);
-			};
-			page.on('pageerror', onError);
-			await page.goto(route);
-			await expect(page.getByTestId('settings-page-title')).toBeVisible();
-			page.off('pageerror', onError);
-			expect(
-				errors,
-				`pageerror on ${route}: ${errors.map((e) => e.message).join('\n')}`,
-			).toHaveLength(0);
-		}
-	});
-
-	test('TC-04 every visible nav item resolves to a registered route', async ({
-		persona,
-		env,
-	}) => {
-		const mismatches = navRouteMismatches(persona, env);
-		expect(mismatches, mismatches.join('\n')).toHaveLength(0);
-	});
-
-	test('TC-05 clicking a nav item navigates and marks active', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!visibleNavItems(persona, env).has('account'),
-			'PERSONA_SKIP: account nav hidden',
-		);
-		await gotoSettings(page);
-		const sidenav = page.getByTestId('settings-page-sidenav');
-		await sidenav.getByTestId('account').click();
-		await expect(page).toHaveURL(/\/settings\/my-settings/);
-	});
-});

tests/e2e/tests/settings/shortcuts.spec.ts

@@ -1,69 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { personaSkipReason } from '../../helpers/settingsAccess';
-import { SETTINGS_ROUTES } from '../../helpers/settings';
-
-// Keyboard Shortcuts — static read-only page (RISK MODE: nothing mutated).
-// No testids here, so locators are CSS classes (.keyboard-shortcuts,
-// .shortcut-section-heading) and role/text.
-
-const ROUTE = SETTINGS_ROUTES.SHORTCUTS;
-
-async function gotoShortcuts(page: Page): Promise<void> {
-	await page.goto(ROUTE);
-	await expect(page.locator('.keyboard-shortcuts')).toBeVisible();
-}
-
-test.describe('Settings — Keyboard Shortcuts page', () => {
-	test('TC-01 shortcuts page renders all four grouped sections with entries', async ({
-		authedPage: page,
-		persona,
-		env,
-	}) => {
-		test.skip(
-			!!personaSkipReason(persona, env, ROUTE),
-			personaSkipReason(persona, env, ROUTE) ?? undefined,
-		);
-
-		await gotoShortcuts(page);
-
-		await expect(page.getByTestId('settings-page-title')).toBeVisible();
-		await expect(page.getByTestId('settings-page-sidenav')).toBeVisible();
-
-		await expect(
-			page.getByTestId('settings-page-sidenav').getByTestId('keyboard-shortcuts'),
-		).toBeVisible();
-
-		const sections = page.locator('.shortcut-section-heading');
-		await expect(sections).toHaveCount(4);
-		await expect(sections.nth(0)).toHaveText('Global Shortcuts');
-		await expect(sections.nth(1)).toHaveText('Logs Explorer Shortcuts');
-		await expect(sections.nth(2)).toHaveText('Query Builder Shortcuts');
-		await expect(sections.nth(3)).toHaveText('Dashboard Shortcuts');
-
-		await expect(page.locator('.shortcut-section-table')).toHaveCount(4);
-
-		const firstTable = page.locator('.shortcut-section-table').first();
-		await expect(
-			firstTable.getByRole('columnheader', { name: 'Keyboard Shortcut' }),
-		).toBeVisible();
-		await expect(
-			firstTable.getByRole('columnheader', { name: 'Description' }),
-		).toBeVisible();
-
-		// "shift+d" chosen as it is stable across OS variants (no cmd/ctrl).
-		const globalTable = page.locator('.shortcut-section-table').nth(0);
-		await expect(
-			globalTable.getByRole('cell', { name: 'shift+d' }),
-		).toBeVisible();
-		await expect(
-			globalTable.getByRole('cell', { name: 'Navigate to Dashboards List' }),
-		).toBeVisible();
-
-		for (let i = 0; i < 4; i++) {
-			const table = page.locator('.shortcut-section-table').nth(i);
-			await expect(table.locator('tbody tr').first()).toBeVisible();
-		}
-	});
-});