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 1/3] 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}`} />

From acb2bc6b3b18f9498d83577d1a3c86fcb5c0a2fa Mon Sep 17 00:00:00 2001
From: plind <59729252+plind-dm@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:22:02 +0900
Subject: [PATCH 2/3] Update ui/src/pages/Agents.tsx

Approved

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 ui/src/pages/Agents.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx
index 7051b775..25b8adc0 100644
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -234,7 +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" : ""}
+                className={agent.pausedAt && tab !== "paused" ? "opacity-50" : ""}
                 leading={
                   <span className="relative flex h-2.5 w-2.5">
                     <span

From f749efd412e1a8172f48229dc95a4a7e92b48b18 Mon Sep 17 00:00:00 2001
From: plind-dm <59729252+plind-dm@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:37:03 +0900
Subject: [PATCH 3/3] fix(ui): skip paused dimming on Paused filter tab

On the Paused tab every visible agent is paused, so applying
opacity-50 to all of them is redundant and makes the whole view
dim. Skip the dimming when tab === "paused" in both list and org
chart views. Pass tab prop through to OrgTreeNode for consistency.
---
 ui/src/pages/Agents.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx
index 25b8adc0..ece440a4 100644
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -291,7 +291,7 @@ export function Agents() {
       {effectiveView === "org" && filteredOrg.length > 0 && (
         <div className="border border-border py-1">
           {filteredOrg.map((node) => (
-            <OrgTreeNode key={node.id} node={node} depth={0} agentMap={agentMap} liveRunByAgent={liveRunByAgent} />
+            <OrgTreeNode key={node.id} node={node} depth={0} agentMap={agentMap} liveRunByAgent={liveRunByAgent} tab={tab} />
           ))}
         </div>
       )}
@@ -316,11 +316,13 @@ function OrgTreeNode({
   depth,
   agentMap,
   liveRunByAgent,
+  tab,
 }: {
   node: OrgNode;
   depth: number;
   agentMap: Map<string, Agent>;
   liveRunByAgent: Map<string, { runId: string; liveCount: number }>;
+  tab: FilterTab;
 }) {
   const agent = agentMap.get(node.id);
 
@@ -330,7 +332,7 @@ function OrgTreeNode({
     <div style={{ paddingLeft: depth * 24 }}>
       <Link
         to={agent ? agentUrl(agent) : `/agents/${node.id}`}
-        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")}
+        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 && tab !== "paused" && "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}`} />
@@ -381,7 +383,7 @@ function OrgTreeNode({
       {node.reports && node.reports.length > 0 && (
         <div className="border-l border-border/50 ml-4">
           {node.reports.map((child) => (
-            <OrgTreeNode key={child.id} node={child} depth={depth + 1} agentMap={agentMap} liveRunByAgent={liveRunByAgent} />
+            <OrgTreeNode key={child.id} node={child} depth={depth + 1} agentMap={agentMap} liveRunByAgent={liveRunByAgent} tab={tab} />
           ))}
         </div>
       )}