From 38ae3b7c81acf850db207345747c491d815d6cf7 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sun, 24 May 2026 09:21:44 -0400
Subject: [PATCH] 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.
---
 apps/fabro-web/app/routes/run-detail.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/fabro-web/app/routes/run-detail.tsx b/apps/fabro-web/app/routes/run-detail.tsx
index f189d1e79..a73fcaa48 100644
--- a/apps/fabro-web/app/routes/run-detail.tsx
+++ b/apps/fabro-web/app/routes/run-detail.tsx
@@ -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>