coder · ibetitsmike · Jul 17, 2025 · Jul 21, 2025 · Jul 21, 2025 · Jul 21, 2025
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx
@@ -85,6 +85,9 @@ const LicensesSettingsPage: FC = () => {
 				isRemovingLicense={isRemovingLicense}
 				removeLicense={(licenseId: number) => removeLicenseApi(licenseId)}
 				activeUsers={userStatusCount?.active}
+				managedAgentFeature={
+					entitlementsQuery.data?.features.managed_agent_limit
+				}
 				refreshEntitlements={async () => {
 					try {
 						await refreshEntitlementsMutation.mutateAsync();

diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -4,7 +4,7 @@ import MuiLink from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
 import type { GetLicensesResponse } from "api/api";
-import type { UserStatusChangeCount } from "api/typesGenerated";
+import type { Feature, UserStatusChangeCount } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import {
 	SettingsHeader,
@@ -20,6 +20,7 @@ import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
 import { LicenseCard } from "./LicenseCard";
 import { LicenseSeatConsumptionChart } from "./LicenseSeatConsumptionChart";
+import { ManagedAgentsConsumption } from "./ManagedAgentsConsumption";
 
 type Props = {
 	showConfetti: boolean;
@@ -32,6 +33,7 @@ type Props = {
 	removeLicense: (licenseId: number) => void;
 	refreshEntitlements: () => void;
 	activeUsers: UserStatusChangeCount[] | undefined;
+	managedAgentFeature?: Feature;
 };
 
 const LicensesSettingsPageView: FC<Props> = ({
@@ -45,6 +47,7 @@ const LicensesSettingsPageView: FC<Props> = ({
 	removeLicense,
 	refreshEntitlements,
 	activeUsers,
+	managedAgentFeature,
 }) => {
 	const theme = useTheme();
 	const { width, height } = useWindowSize();
@@ -151,6 +154,10 @@ const LicensesSettingsPageView: FC<Props> = ({
 						}))}
 					/>
 				)}
+
+				{licenses && licenses.length > 0 && (
+					<ManagedAgentsConsumption managedAgentFeature={managedAgentFeature} />
+				)}
 			</div>
 		</>
 	);

diff --git a/...rc/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx b/...rc/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx
@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ManagedAgentsConsumption } from "./ManagedAgentsConsumption";
+
+const meta: Meta<typeof ManagedAgentsConsumption> = {
+	title:
+		"pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption",
+	component: ManagedAgentsConsumption,
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof ManagedAgentsConsumption>;
+
+export const Default: Story = {};
+
+export const NearLimit: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 115000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const OverIncluded: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 80000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const LowUsage: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 25000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const IncludedAtLimit: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 25000,
+			soft_limit: 30500,
+			limit: 30500,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: false,
+			actual: undefined,
+			soft_limit: undefined,
+			limit: undefined,
+			usage_period: undefined,
+			entitlement: "not_entitled",
+		},
+	},
+};
+
+export const NoFeature: Story = {
+	args: {
+		managedAgentFeature: undefined,
+	},
+};
+
+// Error States for Validation
+export const ErrorMissingData: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: undefined,
+			soft_limit: undefined,
+			limit: undefined,
+			usage_period: undefined,
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorNegativeValues: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: -100,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorSoftLimitExceedsLimit: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 150000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorInvalidDates: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "invalid-date",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorEndBeforeStart: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2026",
+				end: "February 27, 2025",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};