refactor: update routes

# Conflicts:
#	frontend/src/constants/features.ts

frontend/src/AppRoutes/Private.tsx

@@ -9,6 +9,7 @@ import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { useIsAIObservabilityEnabled } from 'hooks/useIsAIObservabilityEnabled';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
@@ -42,6 +43,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
+	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
 
 	const mapRoutes = useMemo(
 		() =>
@@ -133,6 +135,14 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <Redirect to={ROUTES.HOME} />;
 	}
 
+	if (
+		(pathname.startsWith(`${ROUTES.LLM_OBSERVABILITY_BASE}/`) ||
+			pathname === ROUTES.LLM_OBSERVABILITY_BASE) &&
+		!isAIObservabilityEnabled
+	) {
+		return <Redirect to={ROUTES.HOME} />;
+	}
+
 	// Check for workspace access restriction (cloud only)
 	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
 

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

@@ -23,6 +23,8 @@ import {
 	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
+	LLMObservabilityPage,
+	LLMObservabilityModelPricingPage,
 	LiveLogs,
 	Login,
 	Logs,
@@ -513,6 +515,20 @@ const routes: AppRoutes[] = [
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LLM_OBSERVABILITY_BASE,
+		exact: true,
+		component: LLMObservabilityPage,
+		key: 'LLM_OBSERVABILITY_BASE',
+		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/features.ts

@@ -12,5 +12,5 @@ export enum FeatureKeys {
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
 	USE_DASHBOARD_V2 = 'use_dashboard_v2',
-	EMABLE_AI_OBSERVABILITY = 'enable_ai_observability',
+	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 }

frontend/src/constants/routes.ts

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

frontend/src/container/LLMObservability/LLMObservability.module.scss

@@ -0,0 +1,27 @@
+.llmObservability {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-12) var(--spacing-16);
+}
+
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	.title {
+		margin: 0;
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.subtitle {
+		margin: var(--spacing-2) 0 0;
+		color: var(--text-vanilla-400);
+		font-size: var(--periscope-font-size-base);
+	}
+}

frontend/src/container/LLMObservability/LLMObservability.tsx

@@ -0,0 +1,18 @@
+import styles from './LLMObservability.module.scss';
+
+function LLMObservability(): JSX.Element {
+	return (
+		<div className={styles.llmObservability} data-testid="llm-observability-page">
+			<header className={styles.pageHeader}>
+				<div className={styles.pageHeaderTitle}>
+					<h1 className={styles.title}>LLM Observability</h1>
+					<p className={styles.subtitle}>
+						Monitor and analyze your LLM usage, costs, and performance
+					</p>
+				</div>
+			</header>
+		</div>
+	);
+}
+
+export default LLMObservability;

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -0,0 +1,27 @@
+.llmObservabilityModelPricing {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+	padding: var(--spacing-12) var(--spacing-16);
+}
+
+.pageHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-8);
+}
+
+.pageHeaderTitle {
+	.title {
+		margin: 0;
+		font-size: var(--font-size-xl);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	.subtitle {
+		margin: var(--spacing-2) 0 0;
+		color: var(--text-vanilla-400);
+		font-size: var(--periscope-font-size-base);
+	}
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx

@@ -0,0 +1,21 @@
+import styles from './LLMObservabilityModelPricing.module.scss';
+
+function LLMObservabilityModelPricing(): JSX.Element {
+	return (
+		<div
+			className={styles.llmObservabilityModelPricing}
+			data-testid="llm-observability-model-pricing-page"
+		>
+			<header className={styles.pageHeader}>
+				<div className={styles.pageHeaderTitle}>
+					<h1 className={styles.title}>Configuration</h1>
+					<p className={styles.subtitle}>
+						Model pricing and cost estimation settings
+					</p>
+				</div>
+			</header>
+		</div>
+	);
+}
+
+export default LLMObservabilityModelPricing;

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

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

frontend/src/hooks/useIsAIObservabilityEnabled.ts

@@ -0,0 +1,11 @@
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+
+export function useIsAIObservabilityEnabled(): boolean {
+	const { featureFlags } = useAppContext();
+	return (
+		featureFlags?.find(
+			(flag) => flag.name === FeatureKeys.ENABLE_AI_OBSERVABILITY,
+		)?.active || false
+	);
+}

frontend/src/pages/LLMObservability/index.tsx

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

frontend/src/pages/LLMObservabilityModelPricing/index.tsx

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

frontend/src/utils/permission/index.ts

@@ -137,4 +137,6 @@ 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_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
+	LLM_OBSERVABILITY_MODEL_PRICING: ['ADMIN', 'EDITOR', 'VIEWER'],
 };