removed Emotion styles and added different colouring based on the usage percentage

ibetitsmike · ibetitsmike · commit 873a1a33f0cc · 2025-07-28T10:41:49.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx
@@ -24,13 +24,70 @@ const meta: Meta<typeof ManagedAgentsConsumption> = {
 export default meta;
 type Story = StoryObj<typeof ManagedAgentsConsumption>;
 
-export const Default: Story = {};
+export const Default: Story = {
+	name: "Normal Usage (42% of limit)",
+};
+
+export const Warning: Story = {
+	name: "Warning (80-99% of limit)",
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 96000, // 80% of limit - should show orange
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
 
 export const NearLimit: Story = {
+	name: "Near Limit (95% of limit)",
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 114000, // 95% of limit - should show orange
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const AtLimit: Story = {
+	name: "At Limit (100% of limit)",
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 120000, // 100% of limit - should show red
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const OverLimit: Story = {
+	name: "Over Limit (120% of limit)",
 	args: {
 		managedAgentFeature: {
 			enabled: true,
-			actual: 115000,
+			actual: 144000, // 120% of limit - should show red
 			soft_limit: 60000,
 			limit: 120000,
 			usage_period: {
@@ -44,10 +101,11 @@ export const NearLimit: Story = {
 };
 
 export const OverIncluded: Story = {
+	name: "Over Included (67% of limit)",
 	args: {
 		managedAgentFeature: {
 			enabled: true,
-			actual: 80000,
+			actual: 80000, // Over included but under 80% of total limit - should still be green
 			soft_limit: 60000,
 			limit: 120000,
 			usage_period: {
@@ -61,6 +119,7 @@ export const OverIncluded: Story = {
 };
 
 export const LowUsage: Story = {
+	name: "Low Usage (21% of limit)",
 	args: {
 		managedAgentFeature: {
 			enabled: true,
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import MuiLink from "@mui/material/Link";
 import type { Feature } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -74,13 +73,13 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
 	// If no feature is provided or it's disabled, show disabled state
 	if (!managedAgentFeature?.enabled) {
 		return (
-			<div css={styles.disabledRoot}>
+			<div className="min-h-60 flex items-center justify-center rounded-lg border border-solid p-12">
 				<Stack alignItems="center" spacing={1}>
 					<Stack alignItems="center" spacing={0.5}>
-						<span css={styles.disabledTitle}>
+						<span className="text-base">
 							Managed AI Agents Disabled
 						</span>
-						<span css={styles.disabledDescription}>
+						<span className="text-content-secondary text-center max-w-[464px] mt-2">
 							Managed AI agents are not included in your current license.
 							Contact{" "}
 							<MuiLink href="mailto:sales@coder.com">sales</MuiLink> to upgrade
@@ -102,6 +101,20 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
 	const includedPercentage = Math.min((included / limit) * 100, 100);
 	const remainingPercentage = Math.max(100 - includedPercentage, 0);
 
+	// Determine usage bar color based on percentage
+	const getUsageColor = () => {
+		const actualUsagePercent = (usage / limit) * 100;
+		if (actualUsagePercent >= 100) {
+			return "bg-highlight-red"; // Critical: at or over limit
+		}
+		if (actualUsagePercent >= 80) {
+			return "bg-surface-orange"; // Warning: approaching limit
+		}
+		return "bg-highlight-green"; // Normal: safe usage
+	};
+
+	const usageBarColor = getUsageColor();
+
 	return (
 		<section className="border border-solid rounded">
 			<div className="p-4">
@@ -139,7 +152,7 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
 						<ul>
 							<li className="flex items-center gap-2">
 								<div
-									className="rounded-[2px] bg-highlight-green size-3 inline-block"
+									className={`rounded-[2px] ${usageBarColor} size-3 inline-block`}
 									aria-label="Legend for current usage in the chart"
 								/>
 								Amount of started workspaces with an AI agent.
@@ -175,7 +188,7 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
 
 				<div className="relative h-6 bg-surface-secondary rounded overflow-hidden">
 					<div
-						className="absolute top-0 left-0 h-full bg-highlight-green transition-all duration-300"
+						className={`absolute top-0 left-0 h-full ${usageBarColor} transition-all duration-300`}
 						style={{ width: `${usagePercentage}%` }}
 					/>
 
@@ -230,26 +243,3 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
 		</section>
 	);
 };
-
-const styles = {
-	disabledTitle: {
-		fontSize: 16,
-	},
-
-	disabledRoot: (theme) => ({
-		minHeight: 240,
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		borderRadius: 8,
-		border: `1px solid ${theme.palette.divider}`,
-		padding: 48,
-	}),
-
-	disabledDescription: (theme) => ({
-		color: theme.palette.text.secondary,
-		textAlign: "center",
-		maxWidth: 464,
-		marginTop: 8,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
