feat(llm-pricing): add model pricing foundation (route, permission, page shell)

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/LLMObservabilityModelPricing.styles.scss

@@ -0,0 +1,27 @@
+.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;
+			}
+		}
+	}
+}

frontend/src/container/LLMObservabilityModelPricing/LLMObservabilityModelPricing.tsx

@@ -0,0 +1,19 @@
+import './LLMObservabilityModelPricing.styles.scss';
+
+function LLMObservabilityModelPricing(): JSX.Element {
+	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>
+		</div>
+	);
+}
+
+export default LLMObservabilityModelPricing;

frontend/src/container/LLMObservabilityModelPricing/types.ts

@@ -0,0 +1,3 @@
+import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;

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

@@ -136,4 +136,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'],
 };