From 2e3a71862c00dfc1a31b3ce2103e90ba63fe8eae Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 7 May 2026 13:28:53 -0700
Subject: [PATCH] style(web): increase stage event row padding and split token
 counts

Bumps the row's vertical padding from py-1.5 to py-2.5 so the hover
and selected highlight band is taller and the rows breathe more, and
shows Agent token counts as input / output rather than a single total.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/routes/run-stages.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index f0df23298..af13ab374 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -311,8 +311,8 @@ function formatTokenCount(n: number): string {
 export function turnMetric(turn: TurnType): string | null {
   switch (turn.kind) {
     case "assistant": {
-      const total = turn.inputTokens + turn.outputTokens;
-      return total > 0 ? `${formatTokenCount(total)} tok` : null;
+      if (turn.inputTokens === 0 && turn.outputTokens === 0) return null;
+      return `${formatTokenCount(turn.inputTokens)} / ${formatTokenCount(turn.outputTokens)}`;
     }
     case "tool":
     case "command":
@@ -363,7 +363,7 @@ function EventRow({
       type="button"
       onClick={onSelect}
       aria-pressed={selected}
-      className={`grid w-full grid-cols-[5rem_1fr_auto_auto] items-center gap-4 px-5 py-1.5 text-left transition-colors hover:bg-overlay focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-teal-500 ${
+      className={`grid w-full grid-cols-[5rem_1fr_auto_auto] items-center gap-4 px-5 py-2.5 text-left transition-colors hover:bg-overlay focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-teal-500 ${
         selected ? "bg-overlay" : ""
       }`}
     >