From 22de01e84f26544e06f9ccf8b51071283f3a3ea2 Mon Sep 17 00:00:00 2001
From: David Hill <1879069+iamdavidhill@users.noreply.github.com>
Date: Wed, 2 Sep 2026 19:47:53 -0600
Subject: [PATCH] fix(app): animate subagent card chevron (#46893)

---
 .../session-ui/src/components/basic-tool.css  | 21 +++++++++++++++----
 .../session-ui/src/tools/tool-renderer.tsx    | 10 ++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/session-ui/src/components/basic-tool.css b/packages/session-ui/src/components/basic-tool.css
index 04b89d063e5..21c06bed967 100644
--- a/packages/session-ui/src/components/basic-tool.css
+++ b/packages/session-ui/src/components/basic-tool.css
@@ -252,13 +252,25 @@
     justify-content: center;
     flex-shrink: 0;
     color: var(--v2-text-text-faint);
-    margin-left: auto;
+    margin-inline-start: auto;
+    opacity: 0;
+    transform: translateX(-4px);
     transition:
       opacity 0.15s ease,
-      color 0.15s ease;
+      color 0.15s ease,
+      transform 0.15s ease;
 
-    @media (hover: hover) {
-      opacity: 0;
+    :dir(rtl) & {
+      transform: translateX(4px);
+    }
+
+    @media (hover: none) {
+      opacity: 1;
+      transform: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
     }
   }
 
@@ -285,6 +297,7 @@
 
     [data-component="task-tool-action"] {
       opacity: 1;
+      transform: none;
     }
   }
 }
diff --git a/packages/session-ui/src/tools/tool-renderer.tsx b/packages/session-ui/src/tools/tool-renderer.tsx
index 02e8021cd7b..5f16eb72bde 100644
--- a/packages/session-ui/src/tools/tool-renderer.tsx
+++ b/packages/session-ui/src/tools/tool-renderer.tsx
@@ -1398,13 +1398,13 @@ ToolRegistry.register({
                 <span data-slot="basic-tool-tool-subtitle">{subtitle()}</span>
               </Show>
             </div>
+            <Show when={clickable()}>
+              <div data-component="task-tool-action">
+                <Icon name="chevron-right" size="small" />
+              </div>
+            </Show>
           </div>
         </div>
-        <Show when={clickable()}>
-          <div data-component="task-tool-action">
-            <Icon name="square-arrow-top-right" size="small" />
-          </div>
-        </Show>
       </div>
     )