From e0b3b0fc7068c271720835af7e91e2beb9f86299 Mon Sep 17 00:00:00 2001
From: LordMelkor <LordMelkor@users.noreply.github.com>
Date: Thu, 17 Jul 2025 17:03:18 -0400
Subject: [PATCH] Enhancement: Extension name tooltips for tool banners (#3250)

---
 .../src/components/ToolCallWithResponse.tsx   | 48 +++++++++++++++----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/ui/desktop/src/components/ToolCallWithResponse.tsx b/ui/desktop/src/components/ToolCallWithResponse.tsx
index f5daabfe..a75a7065 100644
--- a/ui/desktop/src/components/ToolCallWithResponse.tsx
+++ b/ui/desktop/src/components/ToolCallWithResponse.tsx
@@ -7,6 +7,7 @@ import { cn, snakeToTitleCase } from '../utils';
 import Dot, { LoadingStatus } from './ui/Dot';
 import { NotificationEvent } from '../hooks/useMessageStream';
 import { ChevronRight, LoaderCircle } from 'lucide-react';
+import { TooltipWrapper } from './settings/providers/subcomponents/buttons/TooltipWrapper';
 
 interface ToolCallWithResponseProps {
   isCancelledMessage: boolean;
@@ -121,6 +122,17 @@ const logToString = (logMessage: NotificationEvent) => {
 const notificationToProgress = (notification: NotificationEvent): Progress =>
   notification.message.params as unknown as Progress;
 
+// Helper function to extract extension name for tooltip
+const getExtensionTooltip = (toolCallName: string): string | null => {
+  const lastIndex = toolCallName.lastIndexOf('__');
+  if (lastIndex === -1) return null;
+  
+  const extensionName = toolCallName.substring(0, lastIndex);
+  if (!extensionName) return null;
+  
+  return `${extensionName} extension`;
+};
+
 function ToolCallView({
   isCancelledMessage,
   toolCall,
@@ -387,6 +399,25 @@ function ToolCallView({
     return null;
   };
 
+  // Get extension tooltip for the current tool
+  const extensionTooltip = getExtensionTooltip(toolCall.name);
+
+  // Extract tool label content to avoid duplication
+  const getToolLabelContent = () => {
+    const description = getToolDescription();
+    if (description) {
+      return description;
+    }
+    // Fallback tool name formatting
+    return snakeToTitleCase(toolCall.name.substring(toolCall.name.lastIndexOf('__') + 2));
+  };
+
+  const toolLabel = (
+    <span className={cn("ml-2", extensionTooltip && "cursor-pointer hover:opacity-80")}>
+      {getToolLabelContent()}
+    </span>
+  );
+
   return (
     <ToolCallExpandable
       isStartExpanded={isRenderingProgress}
@@ -400,16 +431,13 @@ function ToolCallView({
               <Dot size={2} loadingStatus={loadingStatus} />
             )}
           </div>
-          <span className="ml-2">
-            {(() => {
-              const description = getToolDescription();
-              if (description) {
-                return description;
-              }
-              // Fallback tool name formatting
-              return snakeToTitleCase(toolCall.name.substring(toolCall.name.lastIndexOf('__') + 2));
-            })()}
-          </span>
+          {extensionTooltip ? (
+            <TooltipWrapper tooltipContent={extensionTooltip} side="top" align="start">
+              {toolLabel}
+            </TooltipWrapper>
+          ) : (
+            toolLabel
+          )}
         </>
       }
     >