From 75832876fa83c64feba1af3705e8160f45056fe3 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 2 Aug 2026 21:32:27 +0300
Subject: [PATCH] fix(ui): align multi-file patch interactions

---
 .../chat/message/parts/ToolPart.tsx           | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
index f62cf195..0067b05a 100644
--- a/packages/ui/src/components/chat/message/parts/ToolPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
@@ -2198,12 +2198,17 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
             <div
                 className={cn(
                     'group/tool flex gap-1.5 pr-2 pl-px py-1.5 rounded-xl',
-                    isMultiFileApplyPatch ? 'flex-wrap items-start' : 'items-center cursor-pointer',
+                    isMultiFileApplyPatch ? 'flex-wrap items-start cursor-pointer' : 'items-center cursor-pointer',
                 )}
-                onClick={isMultiFileApplyPatch ? undefined : handleMainClick}
-                onKeyDown={isMultiFileApplyPatch ? undefined : handleMainKeyDown}
-                role={isMultiFileApplyPatch ? undefined : 'button'}
-                tabIndex={isMultiFileApplyPatch ? undefined : 0}
+                onClick={isMultiFileApplyPatch ? () => onToggle(part.id) : handleMainClick}
+                onKeyDown={isMultiFileApplyPatch ? (event) => {
+                    if (event.target !== event.currentTarget) return;
+                    if (event.key !== 'Enter' && event.key !== ' ') return;
+                    event.preventDefault();
+                    onToggle(part.id);
+                } : handleMainKeyDown}
+                role="button"
+                tabIndex={0}
             >
                 <div className={cn('flex gap-1.5', isMultiFileApplyPatch ? 'w-full min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5' : 'items-center flex-shrink-0')}>
                     {isMultiFileApplyPatch ? (
@@ -2215,11 +2220,26 @@ const ToolPartContent: React.FC<ToolPartProps> = ({
                                 aria-expanded={isExpanded}
                                 aria-label={displayName}
                                 title={displayName}
-                                onClick={() => onToggle(part.id)}
+                                onClick={(event) => {
+                                    event.stopPropagation();
+                                    onToggle(part.id);
+                                }}
                             >
-                                {isExpanded
-                                    ? <Icon name="arrow-down-s" className="h-3.5 w-3.5" />
-                                    : getToolIcon(normalizedPartTool || part.tool)}
+                                <span className="relative h-3.5 w-3.5 flex-shrink-0">
+                                    <span className={cn(
+                                        'absolute inset-0 flex items-center justify-center transition-opacity',
+                                        isExpanded ? 'opacity-0' : 'group-hover/tool:opacity-0',
+                                    )}>
+                                        {getToolIcon(normalizedPartTool || part.tool)}
+                                    </span>
+                                    <Icon
+                                        name={isExpanded ? 'arrow-down-s' : 'arrow-right-s'}
+                                        className={cn(
+                                            'absolute inset-0 h-3.5 w-3.5 transition-opacity',
+                                            isExpanded ? 'opacity-100' : 'opacity-0 group-hover/tool:opacity-100',
+                                        )}
+                                    />
+                                </span>
                                 <MinDurationShineText
                                     active={Boolean(isActive && !isError)}
                                     minDurationMs={300}