coder · jaaydenh · Aug 18, 2026 · Aug 10, 2026 · Aug 10, 2026 · Aug 10, 2026
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -365,6 +365,12 @@ type Claims = {
 	license_expires: number;
 	// nbf is a standard JWT claim for "not before" - the license valid from date
 	nbf?: number;
+	// iat is a standard JWT claim for "issued at"; the merged
+	// usage_period.issued_at is stamped from the winning license's iat.
+	iat?: number;
+	// exp is a standard JWT claim for "expires at" (end of grace period);
+	// it stamps usage_period.end, and nbf stamps usage_period.start.
+	exp?: number;
 	account_type?: string;
 	account_id?: string;
 	trial: boolean;

diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceLicensing.ts b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceLicensing.ts
@@ -1,6 +1,6 @@
-import dayjs from "dayjs";
 import type { GetLicensesResponse } from "#/api/api";
 import type { Feature } from "#/api/typesGenerated";
+import { isLicenseApplicableForFeatureUsage } from "./licenseApplicability";
 
 function isPremiumLicense(license: GetLicensesResponse): boolean {
 	return license.claims.feature_set?.toLowerCase() === "premium";
@@ -19,24 +19,6 @@ export function licenseShowsAiGovernanceAddOn(
 	);
 }
 
-export function isLicenseApplicableForAiGovernanceOverage(
-	license: GetLicensesResponse,
-	aiGovernanceUserFeature: Feature | undefined,
-): boolean {
-	const isExpired = dayjs
-		.unix(license.claims.license_expires)
-		.isBefore(dayjs());
-	const isNotYetValid =
-		license.claims.nbf !== undefined &&
-		dayjs.unix(license.claims.nbf).isAfter(dayjs());
-	const isAiGovernanceEntitlementInGracePeriod =
-		aiGovernanceUserFeature?.entitlement === "grace_period";
-
-	return (
-		!isNotYetValid && (!isExpired || isAiGovernanceEntitlementInGracePeriod)
-	);
-}
-
 export function hasAiGovernanceAddOnLicense(
 	licenses: GetLicensesResponse[] | undefined,
 	aiGovernanceUserFeature: Feature | undefined,
@@ -45,10 +27,7 @@ export function hasAiGovernanceAddOnLicense(
 		licenses?.some(
 			(license) =>
 				licenseShowsAiGovernanceAddOn(license) &&
-				isLicenseApplicableForAiGovernanceOverage(
-					license,
-					aiGovernanceUserFeature,
-				),
+				isLicenseApplicableForFeatureUsage(license, aiGovernanceUserFeature),
 		) ?? false
 	);
 }
@@ -65,10 +44,7 @@ function aiGovernanceLimitFromLicenses(
 		.filter(
 			(license) =>
 				licenseShowsAiGovernanceAddOn(license) &&
-				isLicenseApplicableForAiGovernanceOverage(
-					license,
-					aiGovernanceUserFeature,
-				),
+				isLicenseApplicableForFeatureUsage(license, aiGovernanceUserFeature),
 		)
 		.map((license) => license.claims.features?.ai_governance_user_limit)
 		.filter((limit): limit is number => limit !== undefined);

diff --git a/.../src/pages/DeploymentSettingsPage/LicensesSettingsPage/CoderAgentsProductCard.stories.tsx b/.../src/pages/DeploymentSettingsPage/LicensesSettingsPage/CoderAgentsProductCard.stories.tsx
@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
+import { CoderAgentsProductCard } from "./CoderAgentsProductCard";
+
+const meta: Meta<typeof CoderAgentsProductCard> = {
+	title:
+		"pages/DeploymentSettingsPage/LicensesSettingsPage/CoderAgentsProductCard",
+	component: CoderAgentsProductCard,
+	args: {
+		allocation: 20000,
+		actual: 16264.3,
+		isSoftLimitReached: false,
+		isExceeded: false,
+		isHardLimitExceeded: false,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof CoderAgentsProductCard>;
+
+const getMetricValue = (canvas: ReturnType<typeof within>, label: string) =>
+	canvas.getByText(label).parentElement?.nextElementSibling;
+
+export const Default: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(canvas.getByText("Coder Agents")).toBeInTheDocument();
+		await expect(getMetricValue(canvas, "Total Agent hours")).toHaveTextContent(
+			"16,264.3 / 20,000",
+		);
+		await expect(getMetricValue(canvas, "Concurrent chats")).toHaveTextContent(
+			"Unlimited",
+		);
+		const manageUsage = canvas.getByRole("link", { name: "Manage usage" });
+		await expect(manageUsage).toHaveAttribute("href", "/deployment/groups");
+		const agentSettings = canvas.getByRole("link", { name: "Agent settings" });
+		await expect(agentSettings).toHaveAttribute(
+			"href",
+			"/ai/settings/coder-agents",
+		);
+	},
+};
+
+export const TooltipInteractions: Story = {
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		await step("open the Total Agent hours tooltip from keyboard", async () => {
+			await userEvent.tab();
+			await expect(
+				canvas.getByRole("button", { name: "Total Agent hours information" }),
+			).toHaveFocus();
+			await waitFor(async () => {
+				await expect(screen.getByRole("tooltip")).toHaveTextContent(
+					"Total agent runtime hours used out of the hours included in this license.",
+				);
+			});
+			await userEvent.keyboard("{Escape}");
+			await waitFor(async () => {
+				await expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+			});
+		});
+		await step("open the Concurrent chats tooltip on hover", async () => {
+			await userEvent.hover(
+				canvas.getByRole("button", { name: "Concurrent chats information" }),
+			);
+			await waitFor(async () => {
+				await expect(screen.getByRole("tooltip")).toHaveTextContent(
+					"Number of Coder Agents chats that can run at the same time.",
+				);
+			});
+		});
+	},
+};
+
+export const UnlimitedAllocation: Story = {
+	args: {
+		allocation: -1,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(getMetricValue(canvas, "Total Agent hours")).toHaveTextContent(
+			"Unlimited",
+		);
+		await expect(getMetricValue(canvas, "Concurrent chats")).toHaveTextContent(
+			"Unlimited",
+		);
+	},
+};
+
+export const NotProvidingUsage: Story = {
+	args: {
+		actual: undefined,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(getMetricValue(canvas, "Total Agent hours")).toHaveTextContent(
+			"\u2014 / 20,000",
+		);
+	},
+};
+
+export const SoftLimitReached: Story = {
+	args: {
+		actual: 16264.3,
+		isSoftLimitReached: true,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(getMetricValue(canvas, "Total Agent hours")).toHaveTextContent(
+			"16,264.3 / 20,000",
+		);
+		await expect(canvas.getByRole("status")).toHaveTextContent(
+			"Approaching hours limit",
+		);
+		await expect(getMetricValue(canvas, "Concurrent chats")).toHaveTextContent(
+			"Unlimited",
+		);
+	},
+};
+
+export const Exceeded: Story = {
+	args: {
+		actual: 21000,
+		isExceeded: true,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(getMetricValue(canvas, "Total Agent hours")).toHaveTextContent(
+			"21,000.0 / 20,000",
+		);
+		await expect(getMetricValue(canvas, "Concurrent chats")).toHaveTextContent(
+			"Unlimited",
+		);
+		await expect(canvas.queryByRole("status")).not.toBeInTheDocument();
+	},
+};
+
+export const HardLimitExceeded: Story = {
+	args: {
+		actual: 25000,
+		isHardLimitExceeded: true,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(getMetricValue(canvas, "Total Agent hours")).toHaveTextContent(
+			"25,000.0 / 20,000",
+		);
+		await expect(getMetricValue(canvas, "Concurrent chats")).toHaveTextContent(
+			"5",
+		);
+		await expect(canvas.getByRole("status")).toHaveTextContent("Limit reached");
+		await userEvent.hover(
+			canvas.getByRole("button", { name: "Concurrent chats information" }),
+		);
+		await waitFor(async () => {
+			await expect(screen.getByRole("tooltip")).toHaveTextContent(
+				"Number of Coder Agents chats that can run at the same time. You've reached your limit: concurrent chats are now capped at 5 (down from unlimited).",
+			);
+		});
+	},
+};
+
+export const NoAllocation: Story = {
+	args: {
+		allocation: undefined,
+		actual: undefined,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			getMetricValue(canvas, "Max concurrent chats"),
+		).toHaveTextContent("5");
+		await expect(
+			canvas.queryByText(/Agent hours used/),
+		).not.toBeInTheDocument();
+		const upgrade = canvas.getByRole("link", { name: "Upgrade" });
+		await expect(upgrade).toHaveAttribute("href", "mailto:[email protected]");
+	},
+};
+
+export const NoAllocationWithUsage: Story = {
+	args: {
+		allocation: undefined,
+		actual: 1234.5,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(getMetricValue(canvas, "Agent hours used")).toHaveTextContent(
+			"1,234.5",
+		);
+		await expect(
+			canvas.getByRole("link", { name: "Upgrade" }),
+		).toBeInTheDocument();
+	},
+};