From 045a3d54b9394a4a56ebdf554a0f64a09e1229b1 Mon Sep 17 00:00:00 2001
From: plind-dm <59729252+plind-dm@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:14:05 +0900
Subject: [PATCH] fix(ui): dim paused agents in list and org chart views

Paused agents were visually identical to active agents in both the
list view and org chart, making it hard to distinguish them at a
glance. Add opacity-50 to agent rows when pausedAt is set.

Closes #2199
---
 ui/src/pages/Agents.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx
index a157f777..7051b775 100644
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -234,6 +234,7 @@ export function Agents() {
                 title={agent.name}
                 subtitle={`${roleLabels[agent.role] ?? agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
                 to={agentUrl(agent)}
+                className={agent.pausedAt ? "opacity-50" : ""}
                 leading={
                   <span className="relative flex h-2.5 w-2.5">
                     <span
@@ -329,7 +330,7 @@ function OrgTreeNode({
     <div style={{ paddingLeft: depth * 24 }}>
       <Link
         to={agent ? agentUrl(agent) : `/agents/${node.id}`}
-        className="flex items-center gap-3 px-3 py-2 hover:bg-accent/30 transition-colors w-full text-left no-underline text-inherit"
+        className={cn("flex items-center gap-3 px-3 py-2 hover:bg-accent/30 transition-colors w-full text-left no-underline text-inherit", agent?.pausedAt && "opacity-50")}
       >
         <span className="relative flex h-2.5 w-2.5 shrink-0">
           <span className={`absolute inline-flex h-full w-full rounded-full ${statusColor}`} />