Add run size badge to run header

Surfaces the existing summary.size (XS/S/M/L/XL) as a compact bold
badge to the right of the last-event chip, with a tooltip showing
the underlying billed cost. Hidden when no billing data is available
so we don't show a misleading "XS" for runs with zero cost.
This commit is contained in:
Bryan Helmkamp 2026-05-24 09:21:44 -04:00
parent 78037c22cc
commit 38ae3b7c81
No known key found for this signature in database

View file

@ -76,7 +76,12 @@ import {
type LifecycleMutationResult,
type PreviewMutationResult,
} from "../lib/mutations";
import { formatAbsoluteTs, formatDurationMs, formatRelativeTime } from "../lib/format";
import {
formatAbsoluteTs,
formatDurationMs,
formatRelativeTime,
formatUsdMicros,
} from "../lib/format";
import { queryKeys } from "../lib/query-keys";
import { useRunEvents } from "../lib/run-events";
import { useRunToasts } from "../hooks/use-run-toasts";
@ -551,6 +556,14 @@ export default function RunDetail({ params }: { params: { id: string } }) {
{run.workflow}
</span>
);
const totalUsdMicros = summary.billing?.total_usd_micros;
const sizeChip = totalUsdMicros != null && (
<Tooltip label={`Size ${summary.size} · ${formatUsdMicros(totalUsdMicros)} billed`}>
<span className="rounded bg-overlay px-1.5 py-0.5 font-mono text-xs font-bold text-fg-muted tabular-nums">
{summary.size}
</span>
</Tooltip>
);
const visibility = lifecycleActionVisibility(run.lifecycleStatus);
const previewPending = previewMutation.isMutating;
@ -670,6 +683,7 @@ export default function RunDetail({ params }: { params: { id: string } }) {
</span>
</Tooltip>
)}
{sizeChip}
</div>
</div>