reverted the orange/red based on usage

ibetitsmike · ibetitsmike · commit ba22be648628 · 2025-07-28T11:41:15.000Z
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx
@@ -24,70 +24,13 @@ const meta: Meta<typeof ManagedAgentsConsumption> = {
 export default meta;
 type Story = StoryObj<typeof ManagedAgentsConsumption>;
 
-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 Default: Story = {};
 
 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: 144000, // 120% of limit - should show red
+			actual: 115000,
 			soft_limit: 60000,
 			limit: 120000,
 			usage_period: {
@@ -101,11 +44,10 @@ export const OverLimit: Story = {
 };
 
 export const OverIncluded: Story = {
-	name: "Over Included (67% of limit)",
 	args: {
 		managedAgentFeature: {
 			enabled: true,
-			actual: 80000, // Over included but under 80% of total limit - should still be green
+			actual: 80000,
 			soft_limit: 60000,
 			limit: 120000,
 			usage_period: {
@@ -119,7 +61,6 @@ 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
@@ -94,20 +94,6 @@ 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">
@@ -145,7 +131,7 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
 						<ul>
 							<li className="flex items-center gap-2">
 								<div
-									className={`rounded-[2px] ${usageBarColor} size-3 inline-block`}
+									className="rounded-[2px] bg-highlight-green size-3 inline-block"
 									aria-label="Legend for current usage in the chart"
 								/>
 								Amount of started workspaces with an AI agent.
@@ -182,7 +168,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 ${usageBarColor} transition-all duration-300`}
+						className="absolute top-0 left-0 h-full bg-highlight-green transition-all duration-300"
 						style={{ width: `${usagePercentage}%` }}
 					/>
 
