first commit

ui/app/workspace/model-limits/views/modelLimitSheet.tsx

@@ -0,0 +1,479 @@
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Label } from "@/components/ui/label";
+import { ModelMultiselect } from "@/components/ui/modelMultiselect";
+import NumberAndSelect from "@/components/ui/numberAndSelect";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { DottedSeparator } from "@/components/ui/separator";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { resetDurationOptions } from "@/lib/constants/governance";
+import { RenderProviderIcon } from "@/lib/constants/icons";
+import { ProviderLabels, ProviderName } from "@/lib/constants/logs";
+import {
+	getErrorMessage,
+	useCreateModelConfigMutation,
+	useGetProvidersQuery,
+	useLazyGetModelsQuery,
+	useUpdateModelConfigMutation,
+} from "@/lib/store";
+import { KnownProvider } from "@/lib/types/config";
+import { ModelConfig } from "@/lib/types/governance";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface ModelLimitSheetProps {
+	modelConfig?: ModelConfig | null;
+	onSave: () => void;
+	onCancel: () => void;
+}
+
+const formSchema = z.object({
+	modelName: z.string().min(1, "Model name is required"),
+	provider: z.string().optional(),
+	budgetMaxLimit: z.number().nonnegative().optional(),
+	budgetResetDuration: z.string().optional(),
+	tokenMaxLimit: z.number().int().nonnegative().optional(),
+	tokenResetDuration: z.string().optional(),
+	requestMaxLimit: z.number().int().nonnegative().optional(),
+	requestResetDuration: z.string().optional(),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export default function ModelLimitSheet({ modelConfig, onSave, onCancel }: ModelLimitSheetProps) {
+	const [isOpen, setIsOpen] = useState(true);
+	const isEditing = !!modelConfig;
+
+	const hasCreateAccess = useRbac(RbacResource.Governance, RbacOperation.Create);
+	const hasUpdateAccess = useRbac(RbacResource.Governance, RbacOperation.Update);
+	const canSubmit = isEditing ? hasUpdateAccess : hasCreateAccess;
+
+	const handleClose = () => {
+		setIsOpen(false);
+		setTimeout(() => {
+			onCancel();
+		}, 150);
+	};
+
+	const { data: providersData } = useGetProvidersQuery();
+	const [createModelConfig, { isLoading: isCreating }] = useCreateModelConfigMutation();
+	const [updateModelConfig, { isLoading: isUpdating }] = useUpdateModelConfigMutation();
+	const [getModels] = useLazyGetModelsQuery();
+	const isLoading = isCreating || isUpdating;
+
+	const availableProviders = providersData || [];
+
+	// Handle provider change - clear model if it doesn't exist for the new provider
+	const handleProviderChange = async (newProvider: string, currentModel: string, onChange: (value: string) => void) => {
+		onChange(newProvider);
+		if (!currentModel) return;
+
+		try {
+			const response = await getModels({
+				provider: newProvider || undefined,
+				query: currentModel,
+				limit: 50,
+			}).unwrap();
+
+			const modelExists = response.models.some((model) => model.name === currentModel);
+			if (!modelExists) {
+				form.setValue("modelName", "", { shouldDirty: true });
+			}
+		} catch {
+			// On error, don't clear the model
+		}
+	};
+
+	const form = useForm<FormData>({
+		mode: "onChange",
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			modelName: modelConfig?.model_name || "",
+			provider: modelConfig?.provider || "",
+			budgetMaxLimit: modelConfig?.budget?.max_limit ?? undefined,
+			budgetResetDuration: modelConfig?.budget?.reset_duration || "1M",
+			tokenMaxLimit: modelConfig?.rate_limit?.token_max_limit ?? undefined,
+			tokenResetDuration: modelConfig?.rate_limit?.token_reset_duration || "1h",
+			requestMaxLimit: modelConfig?.rate_limit?.request_max_limit ?? undefined,
+			requestResetDuration: modelConfig?.rate_limit?.request_reset_duration || "1h",
+		},
+	});
+
+	const hasAnyLimit =
+		(form.watch("budgetMaxLimit") !== undefined && form.watch("budgetMaxLimit") !== null) ||
+		(form.watch("tokenMaxLimit") !== undefined && form.watch("tokenMaxLimit") !== null) ||
+		(form.watch("requestMaxLimit") !== undefined && form.watch("requestMaxLimit") !== null);
+
+	useEffect(() => {
+		if (modelConfig) {
+			// Never reset form if user is editing - skip reset entirely
+			if (form.formState.isDirty) {
+				return;
+			}
+			form.reset({
+				modelName: modelConfig.model_name || "",
+				provider: modelConfig.provider || "",
+				budgetMaxLimit: modelConfig.budget?.max_limit ?? undefined,
+				budgetResetDuration: modelConfig.budget?.reset_duration || "1M",
+				tokenMaxLimit: modelConfig.rate_limit?.token_max_limit ?? undefined,
+				tokenResetDuration: modelConfig.rate_limit?.token_reset_duration || "1h",
+				requestMaxLimit: modelConfig.rate_limit?.request_max_limit ?? undefined,
+				requestResetDuration: modelConfig.rate_limit?.request_reset_duration || "1h",
+			});
+		}
+	}, [modelConfig, form]);
+
+	const onSubmit = async (data: FormData) => {
+		if (!canSubmit) {
+			toast.error("You don't have permission to perform this action");
+			return;
+		}
+
+		try {
+			const provider = data.provider && data.provider.trim() !== "" ? data.provider : undefined;
+
+			if (isEditing && modelConfig) {
+				const hadBudget = !!modelConfig.budget;
+				const hasBudget = data.budgetMaxLimit !== undefined && data.budgetMaxLimit !== null;
+				const hadRateLimit = !!modelConfig.rate_limit;
+				const hasRateLimit =
+					(data.tokenMaxLimit !== undefined && data.tokenMaxLimit !== null) ||
+					(data.requestMaxLimit !== undefined && data.requestMaxLimit !== null);
+
+				let budgetPayload: { max_limit?: number; reset_duration?: string } | undefined;
+				if (hasBudget) {
+					budgetPayload = {
+						max_limit: data.budgetMaxLimit,
+						reset_duration: data.budgetResetDuration || "1M",
+					};
+				} else if (hadBudget) {
+					budgetPayload = {};
+				}
+
+				let rateLimitPayload:
+					| {
+							token_max_limit?: number | null;
+							token_reset_duration?: string | null;
+							request_max_limit?: number | null;
+							request_reset_duration?: string | null;
+					  }
+					| undefined;
+				if (hasRateLimit) {
+					rateLimitPayload = {
+						token_max_limit: data.tokenMaxLimit ?? null,
+						token_reset_duration: data.tokenMaxLimit !== undefined && data.tokenMaxLimit !== null ? data.tokenResetDuration || "1h" : null,
+						request_max_limit: data.requestMaxLimit ?? null,
+						request_reset_duration:
+							data.requestMaxLimit !== undefined && data.requestMaxLimit !== null ? data.requestResetDuration || "1h" : null,
+					};
+				} else if (hadRateLimit) {
+					rateLimitPayload = {};
+				}
+
+				await updateModelConfig({
+					id: modelConfig.id,
+					data: {
+						model_name: data.modelName,
+						provider: provider,
+						budget: budgetPayload,
+						rate_limit: rateLimitPayload,
+					},
+				}).unwrap();
+				toast.success("Model limit updated successfully");
+			} else {
+				await createModelConfig({
+					model_name: data.modelName,
+					provider,
+					budget:
+						data.budgetMaxLimit !== undefined && data.budgetMaxLimit !== null
+							? {
+									max_limit: data.budgetMaxLimit,
+									reset_duration: data.budgetResetDuration || "1M",
+								}
+							: undefined,
+					rate_limit:
+						(data.tokenMaxLimit !== undefined && data.tokenMaxLimit !== null) ||
+						(data.requestMaxLimit !== undefined && data.requestMaxLimit !== null)
+							? {
+									token_max_limit: data.tokenMaxLimit,
+									token_reset_duration:
+										data.tokenMaxLimit !== undefined && data.tokenMaxLimit !== null ? data.tokenResetDuration || "1h" : undefined,
+									request_max_limit: data.requestMaxLimit,
+									request_reset_duration:
+										data.requestMaxLimit !== undefined && data.requestMaxLimit !== null ? data.requestResetDuration || "1h" : undefined,
+								}
+							: undefined,
+				}).unwrap();
+				toast.success("Model limit created successfully");
+			}
+
+			onSave();
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	return (
+		<Sheet open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+			<SheetContent
+				className="flex w-full flex-col overflow-x-hidden p-8"
+				onInteractOutside={(e) => {
+					if (isEditing ? form.formState.isDirty : !!form.watch("modelName") || hasAnyLimit) e.preventDefault();
+				}}
+				onEscapeKeyDown={(e) => {
+					if (isEditing ? form.formState.isDirty : !!form.watch("modelName") || hasAnyLimit) e.preventDefault();
+				}}
+				data-testid="model-limit-sheet"
+			>
+				<SheetHeader className="flex flex-col items-start p-0">
+					<SheetTitle>{isEditing ? "Edit Model Limit" : "Create Model Limit"}</SheetTitle>
+					<SheetDescription>
+						{isEditing ? "Update budget and rate limit configuration." : "Set up budget and rate limits for a model."}
+					</SheetDescription>
+				</SheetHeader>
+
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="flex h-full flex-col gap-6">
+						<div className="space-y-4">
+							{/* Provider */}
+							<FormField
+								control={form.control}
+								name="provider"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Provider</FormLabel>
+										<Select
+											value={field.value || "all"}
+											onValueChange={(value) =>
+												handleProviderChange(value === "all" ? "" : value, form.getValues("modelName"), field.onChange)
+											}
+											disabled={isEditing}
+										>
+											<FormControl>
+												<SelectTrigger className="w-full" data-testid="model-limit-provider-select">
+													<SelectValue placeholder="All Providers" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												<SelectItem value="all">All Providers</SelectItem>
+												{availableProviders
+													.filter((p) => p.name)
+													.map((provider) => (
+														<SelectItem key={provider.name} value={provider.name}>
+															<RenderProviderIcon
+																provider={provider.custom_provider_config?.base_provider_type || (provider.name as KnownProvider)}
+																size="sm"
+																className="h-4 w-4"
+															/>
+															{provider.custom_provider_config
+																? provider.name
+																: ProviderLabels[provider.name as ProviderName] || provider.name}
+														</SelectItem>
+													))}
+											</SelectContent>
+										</Select>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{/* Model Name */}
+							<FormField
+								control={form.control}
+								name="modelName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Model Name</FormLabel>
+										<FormControl>
+											<div data-testid="model-limit-model-select">
+												<ModelMultiselect
+													provider={form.watch("provider") || undefined}
+													value={field.value}
+													onChange={field.onChange}
+													placeholder="Search for a model..."
+													isSingleSelect
+													loadModelsOnEmptyProvider="base_models"
+													disabled={isEditing}
+												/>
+											</div>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<DottedSeparator />
+
+							{/* Budget Configuration */}
+							<div className="space-y-4">
+								<Label className="text-sm font-medium">Budget</Label>
+								<FormField
+									control={form.control}
+									name="budgetMaxLimit"
+									render={({ field }) => (
+										<FormItem>
+											<NumberAndSelect
+												id="modelBudgetMaxLimit"
+												labelClassName="font-normal"
+												label="Maximum Spend (USD)"
+												value={field.value}
+												selectValue={form.watch("budgetResetDuration") || "1M"}
+												onChangeNumber={(value) => field.onChange(value)}
+												onChangeSelect={(value) => form.setValue("budgetResetDuration", value, { shouldDirty: true })}
+												options={resetDurationOptions}
+											/>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+
+							<DottedSeparator />
+
+							{/* Rate Limiting Configuration */}
+							<div className="space-y-4">
+								<Label className="text-sm font-medium">Rate Limits</Label>
+
+								<FormField
+									control={form.control}
+									name="tokenMaxLimit"
+									render={({ field }) => (
+										<FormItem>
+											<NumberAndSelect
+												id="modelTokenMaxLimit"
+												labelClassName="font-normal"
+												label="Maximum Tokens"
+												value={field.value}
+												selectValue={form.watch("tokenResetDuration") || "1h"}
+												onChangeNumber={(value) => field.onChange(value)}
+												onChangeSelect={(value) => form.setValue("tokenResetDuration", value, { shouldDirty: true })}
+												options={resetDurationOptions}
+											/>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="requestMaxLimit"
+									render={({ field }) => (
+										<FormItem>
+											<NumberAndSelect
+												id="modelRequestMaxLimit"
+												labelClassName="font-normal"
+												label="Maximum Requests"
+												value={field.value}
+												selectValue={form.watch("requestResetDuration") || "1h"}
+												onChangeNumber={(value) => field.onChange(value)}
+												onChangeSelect={(value) => form.setValue("requestResetDuration", value, { shouldDirty: true })}
+												options={resetDurationOptions}
+											/>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+
+							{/* Current Usage Display (for editing) */}
+							{isEditing && (modelConfig?.budget || modelConfig?.rate_limit) && (
+								<>
+									<DottedSeparator />
+									<div className="space-y-3">
+										<Label className="text-sm font-medium">Current Usage</Label>
+										<div className="bg-muted/50 grid grid-cols-2 gap-4 rounded-lg p-4">
+											{modelConfig?.budget && (
+												<div className="space-y-1">
+													<p className="text-muted-foreground text-xs">Budget</p>
+													<p className="text-sm font-medium">
+														${modelConfig.budget.current_usage.toFixed(2)} / ${modelConfig.budget.max_limit.toFixed(2)}
+													</p>
+												</div>
+											)}
+											{modelConfig?.rate_limit?.token_max_limit && (
+												<div className="space-y-1">
+													<p className="text-muted-foreground text-xs">Tokens</p>
+													<p className="text-sm font-medium">
+														{modelConfig.rate_limit.token_current_usage.toLocaleString()} /{" "}
+														{modelConfig.rate_limit.token_max_limit.toLocaleString()}
+													</p>
+												</div>
+											)}
+											{modelConfig?.rate_limit?.request_max_limit && (
+												<div className="space-y-1">
+													<p className="text-muted-foreground text-xs">Requests</p>
+													<p className="text-sm font-medium">
+														{modelConfig.rate_limit.request_current_usage.toLocaleString()} /{" "}
+														{modelConfig.rate_limit.request_max_limit.toLocaleString()}
+													</p>
+												</div>
+											)}
+										</div>
+									</div>
+								</>
+							)}
+						</div>
+
+						{/* Footer */}
+						<div className="py-4">
+							<div className="flex justify-end gap-3">
+								<Button type="button" variant="outline" onClick={handleClose}>
+									Cancel
+								</Button>
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<span className="inline-block">
+												<Button
+													type="submit"
+													data-testid="model-limit-button-submit"
+													disabled={
+														isLoading ||
+														!form.formState.isDirty ||
+														!form.formState.isValid ||
+														!canSubmit ||
+														!form.watch("modelName") ||
+														!hasAnyLimit
+													}
+												>
+													{isLoading ? "Saving..." : isEditing ? "Save Changes" : "Create Limit"}
+												</Button>
+											</span>
+										</TooltipTrigger>
+										{(isLoading ||
+											!form.formState.isDirty ||
+											!form.formState.isValid ||
+											!canSubmit ||
+											!form.watch("modelName") ||
+											!hasAnyLimit) && (
+											<TooltipContent>
+												<p>
+													{!canSubmit
+														? "You don't have permission"
+														: isLoading
+															? "Saving..."
+															: !form.formState.isDirty
+																? "No changes made"
+																: !form.watch("modelName")
+																	? "Model name is required"
+																	: !hasAnyLimit
+																		? "At least one budget or rate limit is required"
+																		: "Please fix validation errors"}
+												</p>
+											</TooltipContent>
+										)}
+									</Tooltip>
+								</TooltipProvider>
+							</div>
+						</div>
+					</form>
+				</Form>
+			</SheetContent>
+		</Sheet>
+	);
+}

ui/app/workspace/model-limits/views/modelLimitsEmptyState.tsx

@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+import { Wallet } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
+
+const MODEL_LIMITS_DOCS_URL = "https://docs.getbifrost.ai/features/governance";
+
+interface ModelLimitsEmptyStateProps {
+	onAddClick: () => void;
+	canCreate?: boolean;
+}
+
+export function ModelLimitsEmptyState({ onAddClick, canCreate = true }: ModelLimitsEmptyStateProps) {
+	return (
+		<div className="flex min-h-[80vh] w-full flex-col items-center justify-center gap-4 py-16 text-center">
+			<div className="text-muted-foreground">
+				<Wallet className="h-[5.5rem] w-[5.5rem]" strokeWidth={1} />
+			</div>
+			<div className="flex flex-col gap-1">
+				<h1 className="text-muted-foreground text-xl font-medium">Budgets and rate limits at the model level</h1>
+				<div className="text-muted-foreground mx-auto mt-2 max-w-[600px] text-sm font-normal">
+					Set spending caps and rate limits per model. For provider-specific limits, configure each provider in Model providers.
+				</div>
+				<div className="mx-auto mt-6 flex flex-row flex-wrap items-center justify-center gap-2">
+					<Button
+						variant="outline"
+						aria-label="Read more about budgets and limits (opens in new tab)"
+						data-testid="model-limits-button-read-more"
+						onClick={() => {
+							window.open(`${MODEL_LIMITS_DOCS_URL}?utm_source=bfd`, "_blank", "noopener,noreferrer");
+						}}
+					>
+						Read more <ArrowUpRight className="text-muted-foreground h-3 w-3" />
+					</Button>
+					<Button
+						aria-label="Add your first model limit"
+						onClick={onAddClick}
+						disabled={!canCreate}
+						data-testid="model-limits-button-create"
+					>
+						Add Model Limit
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

ui/app/workspace/model-limits/views/modelLimitsTable.tsx

@@ -0,0 +1,434 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alertDialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { resetDurationLabels } from "@/lib/constants/governance";
+import { ProviderIconType, RenderProviderIcon } from "@/lib/constants/icons";
+import { ProviderLabels, ProviderName } from "@/lib/constants/logs";
+import { getErrorMessage, useDeleteModelConfigMutation } from "@/lib/store";
+import { ModelConfig } from "@/lib/types/governance";
+import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/utils/governance";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { ChevronLeft, ChevronRight, Edit, Plus, Search, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import ModelLimitSheet from "./modelLimitSheet";
+import { ModelLimitsEmptyState } from "./modelLimitsEmptyState";
+
+// Helper to format reset duration for display
+const formatResetDuration = (duration: string) => {
+	return resetDurationLabels[duration] || duration;
+};
+
+const toTestIdPart = (value: string) =>
+	value
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, "-")
+		.replace(/^-|-$/g, "");
+
+interface ModelLimitsTableProps {
+	modelConfigs: ModelConfig[];
+	totalCount: number;
+	search: string;
+	debouncedSearch: string;
+	onSearchChange: (value: string) => void;
+	offset: number;
+	limit: number;
+	onOffsetChange: (offset: number) => void;
+}
+
+export default function ModelLimitsTable({
+	modelConfigs,
+	totalCount,
+	search,
+	debouncedSearch,
+	onSearchChange,
+	offset,
+	limit,
+	onOffsetChange,
+}: ModelLimitsTableProps) {
+	const [showModelLimitSheet, setShowModelLimitSheet] = useState(false);
+	const [editingModelConfigId, setEditingModelConfigId] = useState<string | null>(null);
+
+	// Derive editingModelConfig from props so it stays in sync with RTK cache updates
+	const editingModelConfig = useMemo(
+		() => (editingModelConfigId ? (modelConfigs.find((mc) => mc.id === editingModelConfigId) ?? null) : null),
+		[editingModelConfigId, modelConfigs],
+	);
+
+	const hasCreateAccess = useRbac(RbacResource.Governance, RbacOperation.Create);
+	const hasUpdateAccess = useRbac(RbacResource.Governance, RbacOperation.Update);
+	const hasDeleteAccess = useRbac(RbacResource.Governance, RbacOperation.Delete);
+
+	const [deleteModelConfig, { isLoading: isDeleting }] = useDeleteModelConfigMutation();
+
+	const handleDelete = async (id: string) => {
+		try {
+			await deleteModelConfig(id).unwrap();
+			toast.success("Model limit deleted successfully");
+		} catch (error) {
+			toast.error(getErrorMessage(error));
+		}
+	};
+
+	const handleAddModelLimit = () => {
+		setEditingModelConfigId(null);
+		setShowModelLimitSheet(true);
+	};
+
+	const handleEditModelLimit = (config: ModelConfig, e: React.MouseEvent) => {
+		e.stopPropagation();
+		setEditingModelConfigId(config.id);
+		setShowModelLimitSheet(true);
+	};
+
+	const handleModelLimitSaved = () => {
+		setShowModelLimitSheet(false);
+		setEditingModelConfigId(null);
+	};
+
+	const hasActiveFilters = debouncedSearch;
+
+	// True empty state: no model limits at all (not just filtered to zero)
+	if (totalCount === 0 && !hasActiveFilters) {
+		return (
+			<>
+				{showModelLimitSheet && (
+					<ModelLimitSheet modelConfig={editingModelConfig} onSave={handleModelLimitSaved} onCancel={() => setShowModelLimitSheet(false)} />
+				)}
+				<ModelLimitsEmptyState onAddClick={handleAddModelLimit} canCreate={hasCreateAccess} />
+			</>
+		);
+	}
+
+	return (
+		<>
+			{showModelLimitSheet && (
+				<ModelLimitSheet modelConfig={editingModelConfig} onSave={handleModelLimitSaved} onCancel={() => setShowModelLimitSheet(false)} />
+			)}
+
+			<div className="space-y-4">
+				<div className="flex items-center justify-between">
+					<div>
+						<h1 className="text-lg font-semibold">Model Limits</h1>
+						<p className="text-muted-foreground text-sm">
+							Configure budgets and rate limits at the model level. For provider-specific limits, visit each provider&apos;s settings.
+						</p>
+					</div>
+					<Button onClick={handleAddModelLimit} disabled={!hasCreateAccess} data-testid="model-limits-button-create">
+						<Plus className="h-4 w-4" />
+						Add Model Limit
+					</Button>
+				</div>
+
+				{/* Toolbar: Search */}
+				<div className="flex items-center gap-3">
+					<div className="relative max-w-sm flex-1">
+						<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+						<Input
+							aria-label="Search model limits by model name"
+							placeholder="Search by model name..."
+							value={search}
+							onChange={(e) => onSearchChange(e.target.value)}
+							className="pl-9"
+							data-testid="model-limits-search-input"
+						/>
+					</div>
+				</div>
+
+				<div className="rounded-sm border" data-testid="model-limits-table">
+					<Table>
+						<TableHeader>
+							<TableRow className="hover:bg-transparent">
+								<TableHead className="font-medium">Model</TableHead>
+								<TableHead className="font-medium">Provider</TableHead>
+								<TableHead className="font-medium">Budget</TableHead>
+								<TableHead className="font-medium">Rate Limit</TableHead>
+								<TableHead className="w-[100px]"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{modelConfigs.length === 0 ? (
+								<TableRow>
+									<TableCell colSpan={5} className="h-24 text-center">
+										<span className="text-muted-foreground text-sm">No matching model limits found.</span>
+									</TableCell>
+								</TableRow>
+							) : (
+								modelConfigs.map((config) => {
+									const isBudgetExhausted =
+										config.budget?.max_limit && config.budget.max_limit > 0 && config.budget.current_usage >= config.budget.max_limit;
+									const isRateLimitExhausted =
+										(config.rate_limit?.token_max_limit &&
+											config.rate_limit.token_max_limit > 0 &&
+											config.rate_limit.token_current_usage >= config.rate_limit.token_max_limit) ||
+										(config.rate_limit?.request_max_limit &&
+											config.rate_limit.request_max_limit > 0 &&
+											config.rate_limit.request_current_usage >= config.rate_limit.request_max_limit);
+									const isExhausted = isBudgetExhausted || isRateLimitExhausted;
+
+									// Compute safe percentages to avoid division by zero
+									const budgetPercentage =
+										config.budget?.max_limit && config.budget.max_limit > 0
+											? Math.min((config.budget.current_usage / config.budget.max_limit) * 100, 100)
+											: 0;
+									const tokenPercentage =
+										config.rate_limit?.token_max_limit && config.rate_limit.token_max_limit > 0
+											? Math.min((config.rate_limit.token_current_usage / config.rate_limit.token_max_limit) * 100, 100)
+											: 0;
+									const requestPercentage =
+										config.rate_limit?.request_max_limit && config.rate_limit.request_max_limit > 0
+											? Math.min((config.rate_limit.request_current_usage / config.rate_limit.request_max_limit) * 100, 100)
+											: 0;
+
+									return (
+										<TableRow
+											key={config.id}
+											data-testid={`model-limit-row-${toTestIdPart(config.model_name)}-${toTestIdPart(config.provider || "all")}`}
+											className={cn("group transition-colors", isExhausted && "bg-red-500/5 hover:bg-red-500/10")}
+										>
+											<TableCell className="max-w-[280px] py-4">
+												<div className="flex flex-col gap-2">
+													<span className="truncate font-mono text-sm font-medium">{config.model_name}</span>
+													{isExhausted && (
+														<Badge variant="destructive" className="w-fit text-xs">
+															Limit Reached
+														</Badge>
+													)}
+												</div>
+											</TableCell>
+											<TableCell>
+												{config.provider ? (
+													<div className="flex items-center gap-2">
+														<RenderProviderIcon provider={config.provider as ProviderIconType} size="sm" className="h-4 w-4" />
+														<span className="text-sm">{ProviderLabels[config.provider as ProviderName] || config.provider}</span>
+													</div>
+												) : (
+													<span className="text-muted-foreground text-sm">All Providers</span>
+												)}
+											</TableCell>
+											<TableCell className="min-w-[180px]">
+												{config.budget ? (
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<div className="space-y-2">
+																	<div className="flex items-center justify-between gap-4">
+																		<span className="font-medium">{formatCurrency(config.budget.max_limit)}</span>
+																		<span className="text-muted-foreground text-xs">
+																			{formatResetDuration(config.budget.reset_duration)}
+																		</span>
+																	</div>
+																	<Progress
+																		value={budgetPercentage}
+																		className={cn(
+																			"bg-muted/70 dark:bg-muted/30 h-1.5",
+																			isBudgetExhausted
+																				? "[&>div]:bg-red-500/70"
+																				: budgetPercentage > 80
+																					? "[&>div]:bg-amber-500/70"
+																					: "[&>div]:bg-emerald-500/70",
+																		)}
+																	/>
+																</div>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p className="font-medium">
+																	{formatCurrency(config.budget.current_usage)} / {formatCurrency(config.budget.max_limit)}
+																</p>
+																<p className="text-primary-foreground/80 text-xs">
+																	Resets {formatResetDuration(config.budget.reset_duration)}
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												) : (
+													<span className="text-muted-foreground text-sm">-</span>
+												)}
+											</TableCell>
+											<TableCell className="min-w-[180px]">
+												{config.rate_limit ? (
+													<div className="space-y-2.5">
+														{config.rate_limit.token_max_limit && (
+															<TooltipProvider>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<div className="space-y-1.5">
+																			<div className="flex items-center justify-between gap-4 text-xs">
+																				<span className="font-medium">{config.rate_limit.token_max_limit.toLocaleString()} tokens</span>
+																				<span className="text-muted-foreground">
+																					{formatResetDuration(config.rate_limit.token_reset_duration || "1h")}
+																				</span>
+																			</div>
+																			<Progress
+																				value={tokenPercentage}
+																				className={cn(
+																					"bg-muted/70 dark:bg-muted/30 h-1",
+																					config.rate_limit.token_current_usage >= config.rate_limit.token_max_limit
+																						? "[&>div]:bg-red-500/70"
+																						: tokenPercentage > 80
+																							? "[&>div]:bg-amber-500/70"
+																							: "[&>div]:bg-emerald-500/70",
+																				)}
+																			/>
+																		</div>
+																	</TooltipTrigger>
+																	<TooltipContent>
+																		<p className="font-medium">
+																			{config.rate_limit.token_current_usage.toLocaleString()} /{" "}
+																			{config.rate_limit.token_max_limit.toLocaleString()} tokens
+																		</p>
+																		<p className="text-primary-foreground/80 text-xs">
+																			Resets {formatResetDuration(config.rate_limit.token_reset_duration || "1h")}
+																		</p>
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+														)}
+														{config.rate_limit.request_max_limit && (
+															<TooltipProvider>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<div className="space-y-1.5">
+																			<div className="flex items-center justify-between gap-4 text-xs">
+																				<span className="font-medium">{config.rate_limit.request_max_limit.toLocaleString()} req</span>
+																				<span className="text-muted-foreground">
+																					{formatResetDuration(config.rate_limit.request_reset_duration || "1h")}
+																				</span>
+																			</div>
+																			<Progress
+																				value={requestPercentage}
+																				className={cn(
+																					"bg-muted/70 dark:bg-muted/30 h-1",
+																					config.rate_limit.request_current_usage >= config.rate_limit.request_max_limit
+																						? "[&>div]:bg-red-500/70"
+																						: requestPercentage > 80
+																							? "[&>div]:bg-amber-500/70"
+																							: "[&>div]:bg-emerald-500/70",
+																				)}
+																			/>
+																		</div>
+																	</TooltipTrigger>
+																	<TooltipContent>
+																		<p className="font-medium">
+																			{config.rate_limit.request_current_usage.toLocaleString()} /{" "}
+																			{config.rate_limit.request_max_limit.toLocaleString()} requests
+																		</p>
+																		<p className="text-primary-foreground/80 text-xs">
+																			Resets {formatResetDuration(config.rate_limit.request_reset_duration || "1h")}
+																		</p>
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+														)}
+													</div>
+												) : (
+													<span className="text-muted-foreground text-sm">-</span>
+												)}
+											</TableCell>
+											<TableCell onClick={(e) => e.stopPropagation()}>
+												<div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
+													<Button
+														variant="ghost"
+														size="icon"
+														className="h-8 w-8"
+														onClick={(e) => handleEditModelLimit(config, e)}
+														disabled={!hasUpdateAccess}
+														aria-label={`Edit model limit for ${config.model_name}`}
+														data-testid={`model-limit-button-edit-${toTestIdPart(config.model_name)}-${toTestIdPart(config.provider || "all")}`}
+													>
+														<Edit className="h-4 w-4" />
+													</Button>
+													<AlertDialog>
+														<AlertDialogTrigger asChild>
+															<Button
+																variant="ghost"
+																size="icon"
+																className="h-8 w-8 text-red-500 hover:bg-red-500/10 hover:text-red-500"
+																onClick={(e) => e.stopPropagation()}
+																disabled={!hasDeleteAccess}
+																aria-label={`Delete model limit for ${config.model_name}`}
+																data-testid={`model-limit-button-delete-${toTestIdPart(config.model_name)}-${toTestIdPart(config.provider || "all")}`}
+															>
+																<Trash2 className="h-4 w-4" />
+															</Button>
+														</AlertDialogTrigger>
+														<AlertDialogContent>
+															<AlertDialogHeader>
+																<AlertDialogTitle>Delete Model Limit</AlertDialogTitle>
+																<AlertDialogDescription>
+																	Are you sure you want to delete the limit for &quot;
+																	{config.model_name.length > 30 ? `${config.model_name.slice(0, 30)}...` : config.model_name}
+																	&quot;? This action cannot be undone.
+																</AlertDialogDescription>
+															</AlertDialogHeader>
+															<AlertDialogFooter>
+																<AlertDialogCancel>Cancel</AlertDialogCancel>
+																<AlertDialogAction
+																	onClick={() => handleDelete(config.id)}
+																	disabled={isDeleting}
+																	className="bg-red-600 hover:bg-red-700"
+																>
+																	{isDeleting ? "Deleting..." : "Delete"}
+																</AlertDialogAction>
+															</AlertDialogFooter>
+														</AlertDialogContent>
+													</AlertDialog>
+												</div>
+											</TableCell>
+										</TableRow>
+									);
+								})
+							)}
+						</TableBody>
+					</Table>
+				</div>
+
+				{/* Pagination */}
+				{totalCount > 0 && (
+					<div className="flex items-center justify-between px-2">
+						<p className="text-muted-foreground text-sm">
+							Showing {offset + 1}-{Math.min(offset + limit, totalCount)} of {totalCount}
+						</p>
+						<div className="flex gap-2">
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={offset === 0}
+								onClick={() => onOffsetChange(Math.max(0, offset - limit))}
+								data-testid="model-limits-pagination-prev-btn"
+							>
+								<ChevronLeft className="mr-1 h-4 w-4" />
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								disabled={offset + limit >= totalCount}
+								onClick={() => onOffsetChange(offset + limit)}
+								data-testid="model-limits-pagination-next-btn"
+							>
+								Next
+								<ChevronRight className="ml-1 h-4 w-4" />
+							</Button>
+						</div>
+					</div>
+				)}
+			</div>
+		</>
+	);
+}

ui/app/workspace/model-limits/views/modelLimitsView.tsx

@@ -0,0 +1,65 @@
+import { getErrorMessage, useGetModelConfigsQuery } from "@/lib/store";
+import { useDebouncedValue } from "@/hooks/useDebounce";
+import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import ModelLimitsTable from "./modelLimitsTable";
+
+const POLLING_INTERVAL = 5000;
+const PAGE_SIZE = 25;
+
+export default function ModelLimitsView() {
+	const hasGovernanceAccess = useRbac(RbacResource.Governance, RbacOperation.View);
+
+	const [search, setSearch] = useState("");
+	const [offset, setOffset] = useState(0);
+
+	const debouncedSearch = useDebouncedValue(search, 300);
+
+	// Reset to first page when search changes
+	useEffect(() => {
+		setOffset(0);
+	}, [debouncedSearch]);
+
+	const { data: modelConfigsData, error: modelConfigsError } = useGetModelConfigsQuery(
+		{
+			limit: PAGE_SIZE,
+			offset,
+			search: debouncedSearch || undefined,
+		},
+		{
+			skip: !hasGovernanceAccess,
+			pollingInterval: POLLING_INTERVAL,
+		},
+	);
+
+	const totalCount = modelConfigsData?.total_count ?? 0;
+
+	// Snap offset back when total shrinks past current page (e.g. delete last item on last page)
+	useEffect(() => {
+		if (!modelConfigsData || offset < totalCount) return;
+		setOffset(totalCount === 0 ? 0 : Math.floor((totalCount - 1) / PAGE_SIZE) * PAGE_SIZE);
+	}, [totalCount, offset]);
+
+	// Handle query errors
+	useEffect(() => {
+		if (modelConfigsError) {
+			toast.error(`Failed to load model configs: ${getErrorMessage(modelConfigsError)}`);
+		}
+	}, [modelConfigsError]);
+
+	return (
+		<div className="mx-auto w-full max-w-7xl">
+			<ModelLimitsTable
+				modelConfigs={modelConfigsData?.model_configs || []}
+				totalCount={modelConfigsData?.total_count || 0}
+				search={search}
+				debouncedSearch={debouncedSearch}
+				onSearchChange={setSearch}
+				offset={offset}
+				limit={PAGE_SIZE}
+				onOffsetChange={setOffset}
+			/>
+		</div>
+	);
+}