fix(site/src/pages/AIBridgePage): align token badges with neighboring…

… badge sizing (#28477) The in/out token pills on the AI Gateway sessions pages looked out of place next to the provider/client/model badges: they used `Badge size="sm"` while their neighbors use the default `md`, and their arrow icons were `size-icon-lg` (24px) — taller than the badge itself, inflating the pill height. > [!NOTE] > The underlying font-size problem (`Badge sm` = 10px `text-2xs`) is fixed globally in #28517. This PR handles what that one doesn't: the token pills' size variant, icon sizing, and API cleanup. ## Changes - Token pills use Badge's default `md` size, matching the provider/client/model badges next to them. - Arrow icons drop from `size-icon-lg` (24px) to `size-icon-xs` (14px), the same icon size the neighboring badges use, with `gap-0.5` between icon and count. - Removed the unused `size` prop from `TokenBadges` — no call site ever passed one — and dropped the now-meaningless `SizeXs`/`SizeMd` stories. Affects every `TokenBadges` consumer: the sessions list, the session summary card, and the timeline prompt/tool-call tables. > 🤖 Generated by Coder Agents on behalf of @tracyjohnsonux (cherry picked from commit e98e2b9)
mtojek · Aug 27, 2026 · Aug 25, 2026 · Aug 25, 2026 · Aug 25, 2026 · Aug 25, 2026
commit 29b44bf75474357920b352898cdca6644958a1b3
diff --git 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
@@ -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,17 +26,14 @@ export const TokenBadges: FC<TokenBadgesProps> = ({
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<span>
-						<Badge className="gap-0 rounded-e-none" size={size}>
-							<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"
-							size={size}
-						>
-							<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>