put the budget on the role form

messages/en-US.json

@@ -1079,6 +1079,8 @@
     "accessRoleErrorNewRequired": "New role is required",
     "accessRoleErrorRemove": "Failed to remove role",
     "accessRoleErrorRemoveDescription": "An error occurred while removing the role.",
+    "accessRoleInferenceBudget": "Inference Budget",
+    "accessRoleInferenceBudgetDescription": "Configure how members of this role restrict AI usage based on spending or token limits",
     "accessRoleName": "Role Name",
     "accessRoleQuestionRemove": "You're about to delete the `{name}` role. You cannot undo this action.",
     "accessRoleRemove": "Remove Role",

src/components/BudgetsEditor.tsx

@@ -85,12 +85,14 @@ export function BudgetsEditor({
     scope,
     orgId,
     title,
-    description
+    description,
+    hideCardHeader = false
 }: {
     scope: AiBudgetScope;
     orgId: string;
     title: string;
     description: string;
+    hideCardHeader?: boolean;
 }) {
     const { env } = useEnvContext();
     const api = createApiClient({ env });
@@ -268,15 +270,8 @@ export function BudgetsEditor({
         </Button>
     );
 
-    return (
+    const body = (
-        <SettingsSection>
+        <>
-            <SettingsSectionHeader>
-                <SettingsSectionTitle>{title}</SettingsSectionTitle>
-                <SettingsSectionDescription>
-                    {description}
-                </SettingsSectionDescription>
-            </SettingsSectionHeader>
-
             <SettingsSectionBody>
                 <div className="space-y-4">
                     <Table>
@@ -456,6 +451,22 @@ export function BudgetsEditor({
                     {t("saveSettings")}
                 </Button>
             </SettingsSectionFooter>
+        </>
+    );
+
+    if (hideCardHeader) {
+        return <div className="space-y-4">{body}</div>;
+    }
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>{title}</SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {description}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            {body}
         </SettingsSection>
     );
 }

src/components/RoleForm.tsx

@@ -35,6 +35,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
 import { CheckboxWithLabel } from "./ui/checkbox";
+import { BudgetsEditor } from "@app/components/BudgetsEditor";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import type { Role } from "@server/db";
 
@@ -333,7 +334,15 @@ export function RoleForm({
                             { title: t("general"), href: "#" },
                             ...(env.flags.disableEnterpriseFeatures
                                 ? []
-                                : [{ title: t("sshAccess"), href: "#" }])
+                                : [{ title: t("sshAccess"), href: "#" }]),
+                            ...(variant === "edit" && role
+                                ? [
+                                      {
+                                          title: t("accessRoleInferenceBudget"),
+                                          href: "#"
+                                      }
+                                  ]
+                                : [])
                         ]}
                     >
                         {/* General tab */}
@@ -635,6 +644,24 @@ export function RoleForm({
                                 />
                             </div>
                         )}
+
+                        {/* Inference Budget tab - only available once the role exists */}
+                        {variant === "edit" && role && (
+                            <div className="space-y-4 mt-4">
+                                <BudgetsEditor
+                                    orgId={role.orgId}
+                                    scope={{
+                                        type: "role",
+                                        id: role.roleId
+                                    }}
+                                    hideCardHeader={true}
+                                    title={t("accessRoleInferenceBudget")}
+                                    description={t(
+                                        "accessRoleInferenceBudgetDescription"
+                                    )}
+                                />
+                            </div>
+                        )}
                     </HorizontalTabs>
                 )}
             </form>