chore: rename draft

frontend/src/AppRoutes/pageComponents.ts

@@ -323,9 +323,9 @@ export const AIAssistantPage = Loadable(
 		),
 );
 
-export const LLMObservabilityPage = Loadable(
+export const AIObservabilityPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "LLM Observability Page" */ 'pages/LLMObservability'
+			/* webpackChunkName: "AI Observability Page" */ 'pages/AIObservability'
 		),
 );

frontend/src/AppRoutes/routes.ts

@@ -23,7 +23,7 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
-	LLMObservabilityPage,
+	AIObservabilityPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -516,21 +516,21 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
 		exact: true,
-		component: LLMObservabilityPage,
+		component: AIObservabilityPage,
 		key: 'AI_OBSERVABILITY_ATTRIBUTE_MAPPING',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_OVERVIEW,
 		exact: true,
-		component: LLMObservabilityPage,
+		component: AIObservabilityPage,
 		key: 'AI_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
 		exact: true,
-		component: LLMObservabilityPage,
+		component: AIObservabilityPage,
 		key: 'AI_OBSERVABILITY_CONFIGURATION',
 		isPrivate: true,
 	},

frontend/src/container/AIObservability/AIObservability.module.scss

@@ -1,4 +1,4 @@
-.llmObservability {
+.aiObservability {
 	display: flex;
 	flex-direction: column;
 	height: 100%;

frontend/src/container/AIObservability/AIObservability.tsx

@@ -0,0 +1,24 @@
+import { Tabs } from '@signozhq/ui/tabs';
+
+import { useAIObservabilityTabs } from './hooks/useAIObservabilityTabs';
+import styles from './AIObservability.module.scss';
+
+// Shell for the AI Observability page: renders the top-level tab bar
+// (Overview / Configuration) using the SigNoz design-system Tabs, with
+// route-driven active state from useAIObservabilityTabs.
+function AIObservability(): JSX.Element {
+	const { items, activeTab, onTabChange } = useAIObservabilityTabs();
+
+	return (
+		<div className={styles.aiObservability} data-testid="ai-observability-page">
+			<Tabs
+				items={items}
+				value={activeTab}
+				onChange={onTabChange}
+				testId="ai-observability-tabs"
+			/>
+		</div>
+	);
+}
+
+export default AIObservability;

frontend/src/container/AIObservability/AttributeMapping/AIObservabilityAttributeMapping.module.scss

@@ -1,4 +1,4 @@
-.llmObservabilityAttributeMapping {
+.aiObservabilityAttributeMapping {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-4);

frontend/src/container/AIObservability/AttributeMapping/AIObservabilityAttributeMapping.tsx

@@ -7,11 +7,11 @@ import AttributeMappingHeader from './components/AttributeMappingHeader/Attribut
 import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
 import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
-import styles from './LLMObservabilityAttributeMapping.module.scss';
+import styles from './AIObservabilityAttributeMapping.module.scss';
 import { useAttributeMappingEditor } from './hooks/useAttributeMappingEditor';
 import { useGroupFormDrawer } from './components/GroupFormDrawer/hooks/useGroupFormDrawer';
 
-function LLMObservabilityAttributeMapping(): JSX.Element {
+function AIObservabilityAttributeMapping(): JSX.Element {
 	const editor = useAttributeMappingEditor();
 	const groupDrawer = useGroupFormDrawer();
 
@@ -52,8 +52,8 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 
 	return (
 		<div
-			className={styles.llmObservabilityAttributeMapping}
-			data-testid="llm-observability-attribute-mapping-page"
+			className={styles.aiObservabilityAttributeMapping}
+			data-testid="ai-observability-attribute-mapping-page"
 		>
 			<AttributeMappingHeader
 				isDirty={editor.isDirty}
@@ -93,4 +93,4 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 	);
 }
 
-export default LLMObservabilityAttributeMapping;
+export default AIObservabilityAttributeMapping;

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/__tests__/AttributeMappingsTab.test.tsx

@@ -23,8 +23,8 @@ import {
 	mappersEndpoint,
 	mockGroups,
 	mockMappers,
-} from 'container/LLMObservability/AttributeMapping/__tests__/fixtures';
-import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+} from 'container/AIObservability/AttributeMapping/__tests__/fixtures';
+import { DraftGroup } from 'container/AIObservability/AttributeMapping/types';
 import AttributeMappingsTab from '../AttributeMappingsTab';
 import { useAttributeMappingEditor } from '../../hooks/useAttributeMappingEditor';
 

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupActionsMenu/GroupActionsMenu.tsx

@@ -3,7 +3,7 @@ import { EllipsisVertical, Pencil, Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 
-import type { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+import type { DraftGroup } from 'container/AIObservability/AttributeMapping/types';
 
 interface GroupActionsMenuProps {
 	group: DraftGroup;

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/GroupHeader.tsx

@@ -2,7 +2,7 @@ import { Info } from '@signozhq/icons';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 
-import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { DraftGroup } from 'container/AIObservability/AttributeMapping/types';
 
 import ConditionsTooltip from './ConditionsTooltip';
 import styles from './GroupHeader.module.scss';

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx

@@ -1,6 +1,6 @@
 import { Switch } from '@signozhq/ui/switch';
 
-import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { DraftGroup } from 'container/AIObservability/AttributeMapping/types';
 import GroupActionsMenu from '../GroupActionsMenu/GroupActionsMenu';
 import styles from './GroupHeaderActions.module.scss';
 

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx

@@ -9,8 +9,8 @@ import {
 	DraftGroup,
 	DraftMapper,
 	Mapper,
-} from 'container/LLMObservability/AttributeMapping/types';
-import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+} from 'container/AIObservability/AttributeMapping/types';
+import { AttributeMappingEditor } from 'container/AIObservability/AttributeMapping/hooks/useAttributeMappingEditor';
 import { COLUMN_COUNT } from '../constants';
 import MapperRow from '../MapperRow/MapperRow';
 import MapperRowSkeleton from '../MapperRow/MapperRowSkeleton';

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperActionsMenu/MapperActionsMenu.tsx

@@ -3,7 +3,7 @@ import { EllipsisVertical, Pencil, Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 
-import type { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
+import type { DraftMapper } from 'container/AIObservability/AttributeMapping/types';
 
 interface MapperActionsMenuProps {
 	mapper: DraftMapper;

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx

@@ -5,7 +5,7 @@ import { SpantypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas'
 import cx from 'classnames';
 import { motion } from 'motion/react';
 
-import { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
+import { DraftMapper } from 'container/AIObservability/AttributeMapping/types';
 import MapperActionsMenu from '../MapperActionsMenu/MapperActionsMenu';
 import styles from './MapperRow.module.scss';
 

frontend/src/container/AIObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx

@@ -4,13 +4,13 @@ import { Typography } from '@signozhq/ui/typography';
 import { ChevronDown, ChevronRight, Layers, Plus } from '@signozhq/icons';
 import { Collapse, type CollapseProps, Skeleton } from 'antd';
 
-import MapperFormDrawer from 'container/LLMObservability/AttributeMapping/components/MapperFormDrawer/MapperFormDrawer';
-import { useMapperFormDrawer } from 'container/LLMObservability/AttributeMapping/components/MapperFormDrawer/hooks/useMapperFormDrawer';
+import MapperFormDrawer from 'container/AIObservability/AttributeMapping/components/MapperFormDrawer/MapperFormDrawer';
+import { useMapperFormDrawer } from 'container/AIObservability/AttributeMapping/components/MapperFormDrawer/hooks/useMapperFormDrawer';
 import {
 	DraftGroup,
 	DraftMapper,
-} from 'container/LLMObservability/AttributeMapping/types';
-import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+} from 'container/AIObservability/AttributeMapping/types';
+import { AttributeMappingEditor } from 'container/AIObservability/AttributeMapping/hooks/useAttributeMappingEditor';
 import GroupHeader from './GroupHeader/GroupHeader';
 import GroupHeaderActions from './GroupHeaderActions/GroupHeaderActions';
 import GroupMappers from './GroupMappers/GroupMappers';

frontend/src/container/AIObservability/AttributeMapping/__tests__/AIObservabilityAttributeMapping.test.tsx

@@ -1,7 +1,7 @@
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
-import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
+import AIObservabilityAttributeMapping from '../AIObservabilityAttributeMapping';
 import { GROUPS_ENDPOINT, makeGroupsResponse, mockGroups } from './fixtures';
 
 function setupGroups(): void {
@@ -12,7 +12,7 @@ function setupGroups(): void {
 	);
 }
 
-describe('LLMObservabilityAttributeMapping', () => {
+describe('AIObservabilityAttributeMapping', () => {
 	beforeEach(() => {
 		window.history.pushState(null, '', '/');
 		setupGroups();
@@ -23,15 +23,15 @@ describe('LLMObservabilityAttributeMapping', () => {
 	});
 
 	it('renders the page shell', () => {
-		render(<LLMObservabilityAttributeMapping />);
+		render(<AIObservabilityAttributeMapping />);
 
 		expect(
-			screen.getByTestId('llm-observability-attribute-mapping-page'),
+			screen.getByTestId('ai-observability-attribute-mapping-page'),
 		).toBeInTheDocument();
 	});
 
 	it('shows the attribute-mappings and test sub-tab labels', () => {
-		render(<LLMObservabilityAttributeMapping />);
+		render(<AIObservabilityAttributeMapping />);
 
 		expect(
 			screen.getByRole('tab', { name: 'Attribute Mappings' }),
@@ -40,7 +40,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 	});
 
 	it('activates the attribute-mappings tab by default and renders its content', async () => {
-		render(<LLMObservabilityAttributeMapping />);
+		render(<AIObservabilityAttributeMapping />);
 
 		const attributeMappingsTab = screen.getByRole('tab', {
 			name: 'Attribute Mappings',
@@ -52,7 +52,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 	});
 
 	it('renders the header with its description and no Save/Discard while pristine', () => {
-		render(<LLMObservabilityAttributeMapping />);
+		render(<AIObservabilityAttributeMapping />);
 
 		expect(
 			screen.getByText(
@@ -67,7 +67,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 
 	it('prompts before discarding, then reverts staged changes on confirm', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<LLMObservabilityAttributeMapping />);
+		render(<AIObservabilityAttributeMapping />);
 
 		const toggle = await screen.findByTestId('group-enabled-group-1');
 		expect(toggle).toBeChecked();
@@ -88,7 +88,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 
 	it('keeps staged changes when the discard prompt is dismissed', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<LLMObservabilityAttributeMapping />);
+		render(<AIObservabilityAttributeMapping />);
 
 		const toggle = await screen.findByTestId('group-enabled-group-1');
 		await user.click(toggle);

frontend/src/container/AIObservability/AttributeMapping/components/GroupFormDrawer/components/ConditionKeyList/ConditionKeyList.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@signozhq/ui/button';
 import { Plus, X } from '@signozhq/icons';
 
-import { FieldContextValue } from 'container/LLMObservability/AttributeMapping/types';
+import { FieldContextValue } from 'container/AIObservability/AttributeMapping/types';
 import KeySearchInput from '../../../KeySearchInput/KeySearchInput';
 import styles from './ConditionKeyList.module.scss';
 

frontend/src/container/AIObservability/AttributeMapping/components/KeySearchInput/KeySearchInput.tsx

@@ -12,7 +12,7 @@ import useDebounce from 'hooks/useDebounce';
 import {
 	FieldContext,
 	FieldContextValue,
-} from 'container/LLMObservability/AttributeMapping/types';
+} from 'container/AIObservability/AttributeMapping/types';
 import styles from './KeySearchInput.module.scss';
 
 const SUGGESTION_LIMIT = 50;

frontend/src/container/AIObservability/AttributeMapping/components/MapperFormDrawer/components/SourceAttributeRow/SourceAttributeRow.tsx

@@ -10,7 +10,7 @@ import {
 	MapperOperation,
 	MapperOperationValue,
 	SourceConfig,
-} from 'container/LLMObservability/AttributeMapping/types';
+} from 'container/AIObservability/AttributeMapping/types';
 import KeySearchInput from '../../../KeySearchInput/KeySearchInput';
 import styles from './SourceAttributeRow.module.scss';
 

frontend/src/container/AIObservability/Overview/Overview.tsx

@@ -8,7 +8,7 @@ function Overview(): JSX.Element {
 	const { dashboard, refetch } = useSeededDashboardV2();
 
 	return (
-		<div className={styles.overview} data-testid="llm-observability-overview">
+		<div className={styles.overview} data-testid="ai-observability-overview">
 			<DashboardContainer dashboard={dashboard} refetch={refetch} />
 		</div>
 	);

frontend/src/container/AIObservability/Overview/json/dashboard.json

@@ -1,5 +1,5 @@
 {
-  "id": "llm-observability-overview",
+  "id": "ai-observability-overview",
   "orgId": "",
   "locked": true,
   "name": "AI Observability Overview",

frontend/src/container/AIObservability/Settings/ModelPricing/AIObservabilityModelPricing.module.scss

@@ -1,4 +1,4 @@
-.llmObservabilityModelPricing {
+.aiObservabilityModelPricing {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);

frontend/src/container/AIObservability/Settings/ModelPricing/AIObservabilityModelPricing.tsx

@@ -4,11 +4,11 @@ import { useListUnmappedLLMModels } from 'api/generated/services/llmpricingrules
 import { parseAsStringEnum, useQueryState } from 'nuqs';
 
 import { MODEL_COSTS_TAB, TAB_KEY, UNPRICED_MODELS_TAB } from './constants';
-import styles from './LLMObservabilityModelPricing.module.scss';
+import styles from './AIObservabilityModelPricing.module.scss';
 import ModelCostTabPanel from './ModelCostTabPanel';
 import UnpricedModelsTab from './UnpricedModelsTab';
 
-function LLMObservabilityModelPricing(): JSX.Element {
+function AIObservabilityModelPricing(): JSX.Element {
 	const [activeTab, setActiveTab] = useQueryState(
 		TAB_KEY,
 		parseAsStringEnum([MODEL_COSTS_TAB, UNPRICED_MODELS_TAB]).withDefault(
@@ -22,8 +22,8 @@ function LLMObservabilityModelPricing(): JSX.Element {
 
 	return (
 		<div
-			className={styles.llmObservabilityModelPricing}
-			data-testid="llm-observability-model-pricing-page"
+			className={styles.aiObservabilityModelPricing}
+			data-testid="ai-observability-model-pricing-page"
 		>
 			<Tabs
 				value={activeTab}
@@ -60,4 +60,4 @@ function LLMObservabilityModelPricing(): JSX.Element {
 	);
 }
 
-export default LLMObservabilityModelPricing;
+export default AIObservabilityModelPricing;

frontend/src/container/AIObservability/Settings/ModelPricing/ModelCostTabPanel/__tests__/ModelCostTabPanel.test.tsx

@@ -2,13 +2,13 @@ import { LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO } from 'api/generat
 import {
 	TOAST_MODEL_COST_DELETED,
 	TOAST_MODEL_COST_UPDATED,
-} from 'container/LLMObservability/Settings/ModelPricing/constants';
+} from 'container/AIObservability/Settings/ModelPricing/constants';
 import {
 	LLM_PRICING_ENDPOINT,
 	LLM_PRICING_RULE_ENDPOINT,
 	makeListResponse,
 	mockRules,
-} from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
+} from 'container/AIObservability/Settings/ModelPricing/__tests__/fixtures';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
 

frontend/src/container/AIObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/__tests__/ModelCostDrawer.test.tsx

@@ -1,6 +1,6 @@
-import { makePricingRule } from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
-import { EMPTY_DRAFT } from 'container/LLMObservability/Settings/ModelPricing/constants';
-import { draftFromRule } from 'container/LLMObservability/Settings/ModelPricing/utils';
+import { makePricingRule } from 'container/AIObservability/Settings/ModelPricing/__tests__/fixtures';
+import { EMPTY_DRAFT } from 'container/AIObservability/Settings/ModelPricing/constants';
+import { draftFromRule } from 'container/AIObservability/Settings/ModelPricing/utils';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ModelCostDrawer from '../ModelCostDrawer';

frontend/src/container/AIObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts

@@ -11,16 +11,16 @@ import {
 	EMPTY_DRAFT,
 	TOAST_MODEL_COST_ADDED,
 	TOAST_MODEL_COST_UPDATED,
-} from 'container/LLMObservability/Settings/ModelPricing/constants';
+} from 'container/AIObservability/Settings/ModelPricing/constants';
 import type {
 	DrawerDraft,
 	DrawerMode,
 	PricingRule,
-} from 'container/LLMObservability/Settings/ModelPricing/types';
+} from 'container/AIObservability/Settings/ModelPricing/types';
 import {
 	buildRulePayload,
 	draftFromRule,
-} from 'container/LLMObservability/Settings/ModelPricing/utils';
+} from 'container/AIObservability/Settings/ModelPricing/utils';
 
 interface UseModelCostDrawerResult {
 	isOpen: boolean;

frontend/src/container/AIObservability/Settings/ModelPricing/UnpricedModelsTab/__tests__/UnpricedModelsTab.test.tsx

@@ -5,7 +5,7 @@ import {
 	makeListResponse,
 	makeUnmappedResponse,
 	mockRules,
-} from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
+} from 'container/AIObservability/Settings/ModelPricing/__tests__/fixtures';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
 

frontend/src/container/AIObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapConfirmDialog/MapConfirmDialog.tsx

@@ -8,12 +8,12 @@ import styles from './MapConfirmDialog.module.scss';
 import type {
 	PricingRule,
 	UnpricedModel,
-} from 'container/LLMObservability/Settings/ModelPricing/types';
+} from 'container/AIObservability/Settings/ModelPricing/types';
 import {
 	formatPricePerMillion,
 	getCanonicalId,
 	getExtraBuckets,
-} from 'container/LLMObservability/Settings/ModelPricing/utils';
+} from 'container/AIObservability/Settings/ModelPricing/utils';
 
 interface MapConfirmDialogProps {
 	open: boolean;

frontend/src/container/AIObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/MapToBillingModelSelect.tsx

@@ -15,10 +15,10 @@ import { Plus } from '@signozhq/icons';
 import { Skeleton } from 'antd';
 
 import styles from './MapToBillingModelSelect.module.scss';
-import { RULE_OPTIONS_LIMIT } from 'container/LLMObservability/Settings/ModelPricing/constants';
-import type { PricingRule } from 'container/LLMObservability/Settings/ModelPricing/types';
-import { getRuleOptionLabel } from 'container/LLMObservability/Settings/ModelPricing/utils';
-import { usePendingMappingLabel } from 'container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/usePendingMappingStore';
+import { RULE_OPTIONS_LIMIT } from 'container/AIObservability/Settings/ModelPricing/constants';
+import type { PricingRule } from 'container/AIObservability/Settings/ModelPricing/types';
+import { getRuleOptionLabel } from 'container/AIObservability/Settings/ModelPricing/utils';
+import { usePendingMappingLabel } from 'container/AIObservability/Settings/ModelPricing/UnpricedModelsTab/usePendingMappingStore';
 import { useMapToBillingModelSearch } from './useMapToBillingModelSearch';
 
 // One placeholder row per fetched option, so the skeleton height matches the