mirror of
https://github.com/coder/coder.git
synced 2026-10-31 02:43:21 +08:00
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
This commit is contained in:
@@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user