From 061678c84db743397f23c3820eb5096bf8dd73bd Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Mon, 27 Jul 2026 18:20:06 +0000
Subject: [PATCH] feat(site/src/pages/AISettingsPage/SpendPage): announce cost
 controls move to AI Governance

Add an informational banner to the Spend tab pointing at the AI Gateway
cost controls docs, so admins know the cost controls features move to AI
Governance in v2.37.
---
 .../SpendPage/SpendPageView.stories.tsx          | 11 +++++++++++
 .../AISettingsPage/SpendPage/SpendPageView.tsx   | 16 ++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/site/src/pages/AISettingsPage/SpendPage/SpendPageView.stories.tsx b/site/src/pages/AISettingsPage/SpendPage/SpendPageView.stories.tsx
index 47dd6ffa611..64d6b102d64 100644
--- a/site/src/pages/AISettingsPage/SpendPage/SpendPageView.stories.tsx
+++ b/site/src/pages/AISettingsPage/SpendPage/SpendPageView.stories.tsx
@@ -300,6 +300,17 @@ export const SpendWithLimitsAndUsers: Story = {
 		const canvas = within(canvasElement);
 
 		await canvas.findByText("Spend limits and usage");
+		await expect(
+			canvas.getByText(
+				/Cost controls features will move to AI Governance in v2\.37\./,
+			),
+		).toBeInTheDocument();
+		await expect(
+			canvas.getByRole("link", { name: /Read more here/ }),
+		).toHaveAttribute(
+			"href",
+			expect.stringContaining("/ai-coder/ai-gateway/cost-controls"),
+		);
 		await expect(
 			canvas.getByRole("switch", { name: "Spend limit" }),
 		).toBeInTheDocument();
diff --git a/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx b/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx
index eb044738786..2514f8c13a4 100644
--- a/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx
+++ b/site/src/pages/AISettingsPage/SpendPage/SpendPageView.tsx
@@ -1,9 +1,11 @@
 import type { FC } from "react";
 import { getErrorMessage } from "#/api/errors";
 import type * as TypesGen from "#/api/typesGenerated";
+import { Alert, AlertDescription } from "#/components/Alert/Alert";
 import { ErrorAlert } from "#/components/Alert/ErrorAlert";
 import { Button } from "#/components/Button/Button";
 import type { DateRangeValue } from "#/components/DateRangePicker/DateRangePicker";
+import { Link } from "#/components/Link/Link";
 import type { PaginationResult } from "#/components/PaginationWidget/PaginationContainer";
 import {
 	SettingsHeader,
@@ -22,6 +24,7 @@ import {
 	useTemporarySavedState,
 } from "#/components/TemporarySavedState/TemporarySavedState";
 import { dollarsToMicros, microsToDollars } from "#/utils/currency";
+import { docs } from "#/utils/docs";
 import {
 	DefaultLimitController,
 	type DefaultLimitFormValues,
@@ -232,6 +235,19 @@ export const SpendPageView: FC<SpendPageViewProps> = ({
 				>
 					{(userCtrl) => (
 						<div className="flex max-w-[1100px] flex-col gap-8">
+							<Alert severity="info">
+								<AlertDescription>
+									Cost controls features will move to AI Governance in v2.37.{" "}
+									<Link
+										href={docs("/ai-coder/ai-gateway/cost-controls")}
+										target="_blank"
+										rel="noreferrer"
+									>
+										Read more here
+									</Link>
+								</AlertDescription>
+							</Alert>
+
 							<SettingsHeader>
 								<SettingsHeaderTitle>
 									Spend limits and usage