feat(llm-pricing): add listing page and table

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,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,147 @@
+import { useEffect, useMemo, useState } from 'react';
+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 { Search } from '@signozhq/icons';
+import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
+import useDebounce from 'hooks/useDebounce';
+
+import ModelCostsTable from './ModelCostsTable';
+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 rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
+	const total = data?.data?.total ?? 0;
+
+	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"
+				/>
+			</div>
+
+			{isError && (
+				<div className="page-error" role="alert">
+					Failed to load pricing rules. Please try again.
+				</div>
+			)}
+
+			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
+			<ModelCostsTable
+				rules={rules}
+				isLoading={isLoading}
+				selectedRuleId={null}
+				canManage={false}
+				onEdit={(): void => undefined}
+			/>
+
+			{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>
+		</div>
+	);
+}
+
+export default LLMObservabilityModelPricing;

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/types.ts

@@ -0,0 +1,21 @@
+import {
+	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;
+}

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,47 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import type { ExtraBucket, PricingRule } from './types';
+
+// Idempotent — relativeTime is also extended globally in utils/timeUtils.
+dayjs.extend(relativeTime);
+
+const lc = (value: string): string => value.toLowerCase();
+
+// ─── 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}`;
+};

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

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