From a213b2e10fb05ec6cf35cef3a3034cf461e1b422 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Fri, 3 Jul 2026 01:49:06 +0200
Subject: [PATCH] feat: anchor the favorite star at the card's right edge

Swap the ToolCard action-bar order so the star sits rightmost with the
configure/info icon to its left. Every card can be favorited but only some
are configurable, so anchoring the star keeps it in a consistent position
across the grid.
---
 .../SidePanel/Agents/Tools/ToolCard.tsx       | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/src/components/SidePanel/Agents/Tools/ToolCard.tsx b/client/src/components/SidePanel/Agents/Tools/ToolCard.tsx
index f5864ec733..6bb5779db6 100644
--- a/client/src/components/SidePanel/Agents/Tools/ToolCard.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/ToolCard.tsx
@@ -192,6 +192,26 @@ function ToolCardImpl({
       </button>
       {(canFavorite || canConfigure || showInfoOnly) && (
         <div className="absolute bottom-2 right-2 flex items-center gap-1">
+          {(canConfigure || showInfoOnly) && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onConfigure?.(item);
+              }}
+              aria-label={
+                canConfigure ? localize('com_ui_tools_configure') : localize('com_ui_tools_info')
+              }
+              className={cn(
+                'flex size-7 items-center justify-center rounded-lg text-text-secondary',
+                'opacity-0 transition duration-150 hover:bg-surface-hover hover:text-text-primary',
+                'group-focus-within:opacity-100 group-hover:opacity-100',
+                'focus:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring-primary',
+              )}
+            >
+              <DetailIcon className="size-4" aria-hidden="true" />
+            </button>
+          )}
           {canFavorite && (
             <button
               type="button"
@@ -213,26 +233,6 @@ function ToolCardImpl({
               <Star className={cn('size-4', isFavorited && 'fill-current')} aria-hidden="true" />
             </button>
           )}
-          {(canConfigure || showInfoOnly) && (
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                onConfigure?.(item);
-              }}
-              aria-label={
-                canConfigure ? localize('com_ui_tools_configure') : localize('com_ui_tools_info')
-              }
-              className={cn(
-                'flex size-7 items-center justify-center rounded-lg text-text-secondary',
-                'opacity-0 transition duration-150 hover:bg-surface-hover hover:text-text-primary',
-                'group-focus-within:opacity-100 group-hover:opacity-100',
-                'focus:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring-primary',
-              )}
-            >
-              <DetailIcon className="size-4" aria-hidden="true" />
-            </button>
-          )}
         </div>
       )}
     </div>