From de10269d10ed7e66cff65db6b844db26d58fabff Mon Sep 17 00:00:00 2001
From: Daniel Sousa <danielosousa@gmail.com>
Date: Fri, 20 Mar 2026 20:30:07 +0000
Subject: [PATCH] fix: update ReportsToPicker to display terminated status and
 improve layout

- Modified the display of the current agent's name to include a "(terminated)" suffix if the agent's status is terminated.
- Adjusted button layout to ensure proper text truncation and overflow handling for agent names and roles.
---
 ui/src/components/ReportsToPicker.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/ReportsToPicker.tsx b/ui/src/components/ReportsToPicker.tsx
index 5c9fe50d..6ce5a40b 100644
--- a/ui/src/components/ReportsToPicker.tsx
+++ b/ui/src/components/ReportsToPicker.tsx
@@ -48,7 +48,7 @@ export function ReportsToPicker({
           {current ? (
             <>
               <AgentIcon icon={current.icon} className="h-3 w-3 text-muted-foreground" />
-              {`Reports to ${current.name}`}
+              {`Reports to ${current.name}${current.status === "terminated" ? " (terminated)" : ""}`}
             </>
           ) : (
             <>
@@ -77,7 +77,7 @@ export function ReportsToPicker({
             type="button"
             key={a.id}
             className={cn(
-              "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 truncate",
+              "flex items-center gap-2 w-full min-w-0 px-2 py-1.5 text-xs rounded hover:bg-accent/50 overflow-hidden",
               a.id === value && "bg-accent",
             )}
             onClick={() => {
@@ -86,8 +86,8 @@ export function ReportsToPicker({
             }}
           >
             <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
-            {a.name}
-            <span className="text-muted-foreground ml-auto">{roleLabels[a.role] ?? a.role}</span>
+            <span className="truncate min-w-0">{a.name}</span>
+            <span className="text-muted-foreground ml-auto shrink-0">{roleLabels[a.role] ?? a.role}</span>
           </button>
         ))}
       </PopoverContent>