fix(ui): show tool name in approval prompt (#9216)

Signed-off-by: Douwe Osinga <douwe@squareup.com>
Co-authored-by: Douwe Osinga <douwe@squareup.com>

ui/desktop/src/components/ToolCallConfirmation.tsx

@@ -1,18 +1,25 @@
 import { ActionRequired } from '../api';
 import { defineMessages, useIntl } from '../i18n';
+import { snakeToTitleCase } from '../utils';
 import ToolApprovalButtons from './ToolApprovalButtons';
 
 const i18n = defineMessages({
-  allowToolCall: {
-    id: 'toolConfirmation.allowToolCall',
-    defaultMessage: 'Do you allow this tool call?',
+  allowToolCallWithName: {
+    id: 'toolConfirmation.allowToolCallWithName',
+    defaultMessage: 'Allow {toolName}?',
   },
-  gooseWouldLikeToCall: {
-    id: 'toolConfirmation.gooseWouldLikeToCall',
-    defaultMessage: 'Goose would like to call the above tool. Allow?',
+  gooseWouldLikeToCallWithName: {
+    id: 'toolConfirmation.gooseWouldLikeToCallWithName',
+    defaultMessage: 'Goose would like to call {toolName}. Allow?',
   },
 });
 
+function formatToolName(fullName: string): string {
+  const delimiterIndex = fullName.lastIndexOf('__');
+  const shortName = delimiterIndex === -1 ? fullName : fullName.substring(delimiterIndex + 2);
+  return snakeToTitleCase(shortName);
+}
+
 type ToolConfirmationData = Extract<ActionRequired['data'], { actionType: 'toolConfirmation' }>;
 
 interface ToolConfirmationProps {
@@ -29,13 +36,14 @@ export default function ToolConfirmation({
   const intl = useIntl();
   const data = actionRequiredContent.data as ToolConfirmationData;
   const { id, toolName, prompt } = data;
+  const displayName = formatToolName(toolName);
 
   return (
     <div className="goose-message-content bg-background-primary border border-border-primary rounded-2xl overflow-hidden">
       <div className="bg-background-secondary px-4 py-2 text-text-primary">
         {prompt
-          ? intl.formatMessage(i18n.allowToolCall)
-          : intl.formatMessage(i18n.gooseWouldLikeToCall)}
+          ? intl.formatMessage(i18n.allowToolCallWithName, { toolName: displayName })
+          : intl.formatMessage(i18n.gooseWouldLikeToCallWithName, { toolName: displayName })}
       </div>
       <ToolApprovalButtons
         data={{ id, toolName, prompt: prompt ?? undefined, sessionId, isClicked }}

ui/desktop/src/i18n/messages/en.json

@@ -4614,11 +4614,11 @@
   "toolCallWithResponse.viewSubagentSession": {
     "defaultMessage": "View subagent session"
   },
-  "toolConfirmation.allowToolCall": {
-    "defaultMessage": "Do you allow this tool call?"
+  "toolConfirmation.allowToolCallWithName": {
+    "defaultMessage": "Allow {toolName}?"
   },
-  "toolConfirmation.gooseWouldLikeToCall": {
-    "defaultMessage": "Goose would like to call the above tool. Allow?"
+  "toolConfirmation.gooseWouldLikeToCallWithName": {
+    "defaultMessage": "Goose would like to call {toolName}. Allow?"
   },
   "tunnelSection.appStoreQrInstructions": {
     "defaultMessage": "Scan this QR code with your iPhone camera to install the goose mobile app from the App Store"

ui/desktop/src/i18n/messages/zh-CN.json

@@ -4520,11 +4520,11 @@
   "toolCallWithResponse.viewSubagentSession": {
     "defaultMessage": "查看子 agent 会话"
   },
-  "toolConfirmation.allowToolCall": {
-    "defaultMessage": "允许此次工具调用吗？"
+  "toolConfirmation.allowToolCallWithName": {
+    "defaultMessage": "允许 {toolName} 吗？"
   },
-  "toolConfirmation.gooseWouldLikeToCall": {
-    "defaultMessage": "Goose 想调用上述工具，允许吗？"
+  "toolConfirmation.gooseWouldLikeToCallWithName": {
+    "defaultMessage": "Goose 想调用 {toolName}，允许吗？"
   },
   "tunnelSection.appStoreQrInstructions": {
     "defaultMessage": "用 iPhone 相机扫描此二维码，从 App Store 安装 goose 手机应用"