display user friendly model name

src/components/image-editor/EditorAgentConversation/PendingToolCall.tsx

@@ -2,6 +2,7 @@ import { Check, Coins, Loader2, Pencil, X } from 'lucide-react';
 
 import type { EditorAgentToolCall } from '@/packages/shared/src/contracts';
 import { editorAgentToolLabel } from '@/src/components/image-editor/EditorAgentConversation/toolCallPresentation.ts';
+import { getEditorGenerationModelDisplayName } from '@/src/components/image-editor/ImageCanvasGenerationModel.ts';
 import { ResolvedAssetImage } from '@/src/components/ResolvedAssetImage.tsx';
 
 type PendingToolCallAction = 'confirm' | 'cancel' | null;
@@ -18,6 +19,10 @@ function readString(value: unknown) {
   return typeof value === 'string' && value.trim() ? value.trim() : null;
 }
 
+function displayStringArgument(name: string, value: string) {
+  return name === 'model' ? getEditorGenerationModelDisplayName(value) : value;
+}
+
 export function PendingToolCall({
   messageId,
   toolCall,
@@ -64,7 +69,7 @@ export function PendingToolCall({
                 {argument.label}
               </div>
               <div className="mt-1 whitespace-pre-wrap break-words text-sm leading-5 text-slate-800">
-                {argument.value}
+                {displayStringArgument(argument.name, argument.value)}
               </div>
             </div>
           ))}

src/components/image-editor/ImageCanvasGenerationModel.ts

@@ -582,6 +582,28 @@ export function getEditorImageModelDisplayName(
   );
 }
 
+export function getEditorGenerationModelDisplayName(
+  model: string | null | undefined,
+) {
+  const normalizedModel = model?.trim();
+  if (normalizedModel === BACKGROUND_MUSIC_MODEL_SUNO) {
+    return 'Suno';
+  }
+  const soundEffectLabel = EDITOR_SOUND_EFFECT_MODEL_OPTIONS.find(
+    (option) => option.value === normalizedModel,
+  )?.label;
+  if (soundEffectLabel) {
+    return soundEffectLabel;
+  }
+  const videoLabel = EDITOR_VIDEO_MODEL_OPTIONS.find(
+    (option) => option.value === normalizedModel,
+  )?.label;
+  if (videoLabel) {
+    return videoLabel;
+  }
+  return getEditorImageModelDisplayName(normalizedModel);
+}
+
 export function buildQuickEditModelOptions(currentModel: string) {
   void currentModel;
   const options = [...QUICK_EDIT_MODEL_OPTIONS];
@@ -1292,17 +1314,17 @@ export function isCanvasGenerationDialog(
 ): dialog is CanvasGenerationDialogState {
   return Boolean(
     dialog?.id &&
-      (dialog.mode === 'generate' ||
-        dialog.mode === 'spec' ||
-        dialog.mode === 'character' ||
-        dialog.mode === 'icon' ||
-        dialog.mode === 'publication' ||
-        dialog.mode === 'ui-design' ||
-        dialog.mode === 'quick-edit' ||
-        dialog.mode === 'character-animation' ||
-        dialog.mode === 'video' ||
-        dialog.mode === 'audio-sound-effect' ||
-        dialog.mode === 'audio-background-music'),
+    (dialog.mode === 'generate' ||
+      dialog.mode === 'spec' ||
+      dialog.mode === 'character' ||
+      dialog.mode === 'icon' ||
+      dialog.mode === 'publication' ||
+      dialog.mode === 'ui-design' ||
+      dialog.mode === 'quick-edit' ||
+      dialog.mode === 'character-animation' ||
+      dialog.mode === 'video' ||
+      dialog.mode === 'audio-sound-effect' ||
+      dialog.mode === 'audio-background-music'),
   );
 }