From e012063f5b70b00e36d8e2ec106de9ab022b9be7 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Mon, 10 Aug 2026 15:09:39 -0400
Subject: [PATCH] add the budget to the models on the provider

---
 messages/en-US.json                           |  5 +-
 .../ai-providers/[providerId]/models/page.tsx |  2 +
 src/components/AiProviderModelListEditor.tsx  | 91 ++++++++++++++-----
 3 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index f8619f7da..4ff3f9da2 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -1820,7 +1820,10 @@
     "aiProviderModelsSourceAll": "Matches every model key",
     "aiProviderModelsBudgetConfigured": "Budget configured",
     "aiProviderModelsEditTitle": "Edit Model",
-    "aiProviderModelsEditDescription": "Update the model key. Additional settings such as budgets will appear here later.",
+    "aiProviderModelsEditDescription": "Update the model key or configure its inference budget.",
+    "aiProviderModelsBudgetTab": "Inference Budget",
+    "aiProviderModelsBudgetDescription": "Configure how this model restricts usage based on spending or token limits",
+    "aiProviderModelsBudgetUnsaved": "Save this model first to configure its inference budget.",
     "aiProviderModelsKeyLabel": "Model Key",
     "aiProviderModelsKeyRequired": "Enter a model key",
     "aiProviderModelsKeyDuplicate": "This model key is already on a list",
diff --git a/src/app/[orgId]/settings/ai-providers/[providerId]/models/page.tsx b/src/app/[orgId]/settings/ai-providers/[providerId]/models/page.tsx
index c8a1a4483..f8ace5cb2 100644
--- a/src/app/[orgId]/settings/ai-providers/[providerId]/models/page.tsx
+++ b/src/app/[orgId]/settings/ai-providers/[providerId]/models/page.tsx
@@ -235,6 +235,7 @@ export default function AiProviderModelsPage() {
                         <div className="space-y-2">
                             <Label>{t("aiProviderModelsAllow")}</Label>
                             <AiProviderModelListEditor
+                                orgId={provider.orgId}
                                 listType="allow"
                                 items={allowItems}
                                 onChange={setAllowItems}
@@ -254,6 +255,7 @@ export default function AiProviderModelsPage() {
                         <div className="space-y-2">
                             <Label>{t("aiProviderModelsBlock")}</Label>
                             <AiProviderModelListEditor
+                                orgId={provider.orgId}
                                 listType="block"
                                 items={blockItems}
                                 onChange={setBlockItems}
diff --git a/src/components/AiProviderModelListEditor.tsx b/src/components/AiProviderModelListEditor.tsx
index e3bf2bf07..6bf935f4d 100644
--- a/src/components/AiProviderModelListEditor.tsx
+++ b/src/components/AiProviderModelListEditor.tsx
@@ -42,6 +42,8 @@ import {
 } from "@app/components/ui/tooltip";
 import { cn } from "@app/lib/cn";
 import { isModelKeyPattern } from "@server/lib/aiModelKeyMatch";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { BudgetsEditor } from "@app/components/BudgetsEditor";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
     Asterisk,
@@ -75,6 +77,7 @@ export type AiProviderModelListItem = {
 };
 
 export type AiProviderModelListEditorProps = {
+    orgId: string;
     listType: ModelListType;
     items: AiProviderModelListItem[];
     catalogModels: string[];
@@ -146,6 +149,7 @@ function useModelGridColumns(): number {
 }
 
 export function AiProviderModelListEditor({
+    orgId,
     listType,
     items,
     catalogModels,
@@ -632,6 +636,7 @@ export function AiProviderModelListEditor({
 
             {editing && (
                 <EditModelCredenza
+                    orgId={orgId}
                     item={editing}
                     open={editingClientId !== null}
                     onOpenChange={(open) => {
@@ -772,12 +777,14 @@ type EditFormValues = {
 };
 
 function EditModelCredenza({
+    orgId,
     item,
     open,
     onOpenChange,
     existingKeys,
     onSave
 }: {
+    orgId: string;
     item: AiProviderModelListItem;
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -835,27 +842,69 @@ function EditModelCredenza({
                         id="ai-provider-model-edit-form"
                         onSubmit={form.handleSubmit(handleSubmit)}
                     >
-                        <CredenzaBody className="space-y-4">
-                            <FormField
-                                control={form.control}
-                                name="modelKey"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>
-                                            {t("aiProviderModelsKeyLabel")}
-                                        </FormLabel>
-                                        <FormControl>
-                                            <Input
-                                                {...field}
-                                                autoComplete="off"
-                                                spellCheck={false}
-                                                className="font-mono"
-                                            />
-                                        </FormControl>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
+                        <CredenzaBody>
+                            <HorizontalTabs
+                                clientSide={true}
+                                defaultTab={0}
+                                items={[
+                                    { title: t("general"), href: "#" },
+                                    {
+                                        title: t(
+                                            "aiProviderModelsBudgetTab"
+                                        ),
+                                        href: "#"
+                                    }
+                                ]}
+                            >
+                                <div className="space-y-4 mt-4">
+                                    <FormField
+                                        control={form.control}
+                                        name="modelKey"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t(
+                                                        "aiProviderModelsKeyLabel"
+                                                    )}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        {...field}
+                                                        autoComplete="off"
+                                                        spellCheck={false}
+                                                        className="font-mono"
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+                                <div className="space-y-4 mt-4">
+                                    {item.modelId !== undefined ? (
+                                        <BudgetsEditor
+                                            orgId={orgId}
+                                            scope={{
+                                                type: "model",
+                                                id: item.modelId
+                                            }}
+                                            hideCardHeader={true}
+                                            title={t(
+                                                "aiProviderModelsBudgetTab"
+                                            )}
+                                            description={t(
+                                                "aiProviderModelsBudgetDescription"
+                                            )}
+                                        />
+                                    ) : (
+                                        <p className="text-sm text-muted-foreground">
+                                            {t(
+                                                "aiProviderModelsBudgetUnsaved"
+                                            )}
+                                        </p>
+                                    )}
+                                </div>
+                            </HorizontalTabs>
                         </CredenzaBody>
                     </form>
                 </Form>