From a2c8dc7ef040144b2ee9cb1375bed75cefdef098 Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Mon, 24 Aug 2026 07:20:16 -0700
Subject: [PATCH 1/2] fix(site): render token badges at text-sm

---
 .../pages/AIBridgePage/TokenBadges.stories.tsx   | 16 ----------------
 site/src/pages/AIBridgePage/TokenBadges.tsx      |  8 +++-----
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/site/src/pages/AIBridgePage/TokenBadges.stories.tsx b/site/src/pages/AIBridgePage/TokenBadges.stories.tsx
index 109c310da27..044c97bc58c 100644
--- a/site/src/pages/AIBridgePage/TokenBadges.stories.tsx
+++ b/site/src/pages/AIBridgePage/TokenBadges.stories.tsx
@@ -40,19 +40,3 @@ export const WithMetadata: Story = {
 		},
 	},
 };
-
-export const SizeXs: Story = {
-	args: {
-		size: "xs",
-		inputTokens: 1234,
-		outputTokens: 567,
-	},
-};
-
-export const SizeMd: Story = {
-	args: {
-		size: "md",
-		inputTokens: 1234,
-		outputTokens: 567,
-	},
-};
diff --git a/site/src/pages/AIBridgePage/TokenBadges.tsx b/site/src/pages/AIBridgePage/TokenBadges.tsx
index dd4b39ce562..802f398ff03 100644
--- a/site/src/pages/AIBridgePage/TokenBadges.tsx
+++ b/site/src/pages/AIBridgePage/TokenBadges.tsx
@@ -11,14 +11,12 @@ import { JsonPrettyPrinter } from "./JsonPrettyPrinter";
 import { roundTokenDisplay } from "./utils";
 
 interface TokenBadgesProps {
-	size?: "xs" | "sm" | "md";
 	inputTokens: number;
 	outputTokens: number;
 	tokenUsageMetadata?: Record<string, unknown>;
 }
 
 export const TokenBadges: FC<TokenBadgesProps> = ({
-	size = "sm",
 	inputTokens,
 	outputTokens,
 	tokenUsageMetadata,
@@ -28,15 +26,15 @@ export const TokenBadges: FC<TokenBadgesProps> = ({
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<span>
-						<Badge className="gap-0 rounded-e-none" size={size}>
+						<Badge className="gap-0 rounded-e-none text-sm font-normal" size="md">
 							<ArrowDownIcon className="size-icon-lg flex-shrink-0" />
 							<span className="truncate min-w-0">
 								{roundTokenDisplay(inputTokens)}
 							</span>
 						</Badge>
 						<Badge
-							className="gap-0 bg-surface-tertiary rounded-s-none"
-							size={size}
+							className="gap-0 bg-surface-tertiary rounded-s-none text-sm font-normal"
+							size="md"
 						>
 							<ArrowUpIcon className="size-icon-lg flex-shrink-0" />
 							<span className="truncate min-w-0">

From 4900671eea50e47b1e0fed0ea999726b6c21c3c7 Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Mon, 24 Aug 2026 07:33:45 -0700
Subject: [PATCH 2/2] fix(site): match token badges to provider/client badge
 sizing

---
 site/src/pages/AIBridgePage/TokenBadges.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/AIBridgePage/TokenBadges.tsx b/site/src/pages/AIBridgePage/TokenBadges.tsx
index 802f398ff03..50e30a8797b 100644
--- a/site/src/pages/AIBridgePage/TokenBadges.tsx
+++ b/site/src/pages/AIBridgePage/TokenBadges.tsx
@@ -26,17 +26,14 @@ export const TokenBadges: FC<TokenBadgesProps> = ({
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<span>
-						<Badge className="gap-0 rounded-e-none text-sm font-normal" size="md">
-							<ArrowDownIcon className="size-icon-lg flex-shrink-0" />
+						<Badge className="gap-0.5 rounded-e-none">
+							<ArrowDownIcon className="size-icon-xs flex-shrink-0" />
 							<span className="truncate min-w-0">
 								{roundTokenDisplay(inputTokens)}
 							</span>
 						</Badge>
-						<Badge
-							className="gap-0 bg-surface-tertiary rounded-s-none text-sm font-normal"
-							size="md"
-						>
-							<ArrowUpIcon className="size-icon-lg flex-shrink-0" />
+						<Badge className="gap-0.5 bg-surface-tertiary rounded-s-none">
+							<ArrowUpIcon className="size-icon-xs flex-shrink-0" />
 							<span className="truncate min-w-0">
 								{roundTokenDisplay(outputTokens)}
 							</span>