From be908cd0d5d2673349a20e01fb296f8445e6f109 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 7 May 2026 22:39:21 -0700
Subject: [PATCH] style(web): drop redundant when/tool labels in tool group
 accordion

The accordion row already shows elapsed/duration and the group header
already names the tool, so the When and Tool fields inside the expanded
event detail are redundant. Keep them for the standalone single-event
panel.

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

diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index d3983350b..39ec1a7c8 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -697,7 +697,15 @@ function JsonBlock({ value }: { value: string }) {
   );
 }
 
-function EventDetails({ turn, runStart }: { turn: TurnType; runStart: string | undefined }) {
+function EventDetails({
+  turn,
+  runStart,
+  hideMeta = false,
+}: {
+  turn: TurnType;
+  runStart: string | undefined;
+  hideMeta?: boolean;
+}) {
   const elapsed = formatElapsed(turn.ts, runStart);
   const absolute = (() => {
     const ms = Date.parse(turn.ts);
@@ -707,9 +715,11 @@ function EventDetails({ turn, runStart }: { turn: TurnType; runStart: string | u
 
   return (
     <div className="space-y-5">
-      <DetailField label="When" mono>
-        {elapsed ? `${elapsed} · ${absolute}` : absolute}
-      </DetailField>
+      {!hideMeta && (
+        <DetailField label="When" mono>
+          {elapsed ? `${elapsed} · ${absolute}` : absolute}
+        </DetailField>
+      )}
 
       {(turn.kind === "system" || turn.kind === "assistant") && (
         <DetailField label="Content">
@@ -719,10 +729,12 @@ function EventDetails({ turn, runStart }: { turn: TurnType; runStart: string | u
 
       {turn.kind === "tool" && (
         <>
-          <DetailField label="Tool" mono>
-            {humanizeToolName(turn.toolName)}{" "}
-            <span className="text-fg-muted">({turn.toolName})</span>
-          </DetailField>
+          {!hideMeta && (
+            <DetailField label="Tool" mono>
+              {humanizeToolName(turn.toolName)}{" "}
+              <span className="text-fg-muted">({turn.toolName})</span>
+            </DetailField>
+          )}
           <DetailField label="Input">
             <JsonBlock value={turn.input} />
           </DetailField>
@@ -1058,7 +1070,7 @@ function ToolGroupDetails({
             />
             {expandedIndex === i && (
               <div className="bg-overlay/50 px-5 py-4">
-                <EventDetails turn={child.turn} runStart={runStart} />
+                <EventDetails turn={child.turn} runStart={runStart} hideMeta />
               </div>
             )}
           </li>