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] 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>
       )}