From 29dfc25b51840f0cd6097fdd6402e2a31ce121df Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 8 Apr 2026 17:21:20 +1000
Subject: [PATCH] fix: move tool elapsed time to stable badge before chevron
 (#124)

Extract the elapsed time from the tool title string into a separate
`tabular-nums` badge rendered before the chevron. This prevents the
title text and subsequent elements from shifting each second as the
number width changes.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/goose2/src/features/chat/ui/ToolCallAdapter.tsx | 7 ++++---
 ui/goose2/src/shared/ui/ai-elements/tool.tsx       | 7 +++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/goose2/src/features/chat/ui/ToolCallAdapter.tsx b/ui/goose2/src/features/chat/ui/ToolCallAdapter.tsx
index 06adcefa27..d272d9ff28 100644
--- a/ui/goose2/src/features/chat/ui/ToolCallAdapter.tsx
+++ b/ui/goose2/src/features/chat/ui/ToolCallAdapter.tsx
@@ -217,8 +217,8 @@ export function ToolCallAdapter({
   const elapsed = useElapsedTime(status, startedAt);
   const state = toolStatusMap[status];
 
-  const title =
-    status === "executing" && elapsed >= 3 ? `${name} (${elapsed}s)` : name;
+  const elapsedSeconds =
+    status === "executing" && elapsed >= 3 ? elapsed : undefined;
 
   return (
     <div>
@@ -226,9 +226,10 @@ export function ToolCallAdapter({
         <ToolHeader
           type="dynamic-tool"
           toolName={name}
-          title={title}
+          title={name}
           state={state}
           showIcon={false}
+          elapsedSeconds={elapsedSeconds}
         />
         <ToolContent>
           {Object.keys(args).length > 0 && <ToolInput input={args} />}
diff --git a/ui/goose2/src/shared/ui/ai-elements/tool.tsx b/ui/goose2/src/shared/ui/ai-elements/tool.tsx
index cd0936b5e5..5927bfae99 100644
--- a/ui/goose2/src/shared/ui/ai-elements/tool.tsx
+++ b/ui/goose2/src/shared/ui/ai-elements/tool.tsx
@@ -30,6 +30,7 @@ export type ToolHeaderProps = {
   title?: string;
   className?: string;
   showIcon?: boolean;
+  elapsedSeconds?: number;
 } & (
   | { type: ToolUIPart["type"]; state: ToolUIPart["state"]; toolName?: never }
   | {
@@ -76,6 +77,7 @@ export const ToolHeader = ({
   state,
   toolName,
   showIcon = true,
+  elapsedSeconds,
   ...props
 }: ToolHeaderProps) => {
   const derivedName =
@@ -89,6 +91,11 @@ export const ToolHeader = ({
       {showIcon && <WrenchIcon className="size-4 text-muted-foreground" />}
       <span className="font-medium text-sm">{title ?? derivedName}</span>
       {getStatusBadge(state)}
+      {elapsedSeconds != null && (
+        <span className="tabular-nums text-xs text-muted-foreground">
+          {elapsedSeconds}s
+        </span>
+      )}
       <ChevronDownIcon className="size-3.5 text-muted-foreground transition-transform group-data-[state=closed]:-rotate-90" />
     </CollapsibleTrigger>
   );