@steerable/agent-shell-web 0.6.52 → 0.6.55

package/src/components/chat/AssistantMessage.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { LuCheck, LuCopy, LuListChecks, LuLoaderCircle, LuRefreshCw, LuShare2 } from 'react-icons/lu';
 import type { ChatMessage } from '@steerable/agent-protocol';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
+import { t } from '@/i18n';
 import { Markdown } from './Markdown';
 import { ExecutedActionsCard, type ExecutedAction } from './ExecutedActionsCard';
 import type { ChildInfo } from './OrchestrationChildrenCard';
@@ -228,7 +229,7 @@ function readPersistedAgentId(message: ChatMessage): string | undefined {
 function TurnErrorBubble({ reason }: { reason: string }) {
   return (
     <div className="rounded-agent-lg border border-agent-destructive/40 bg-agent-destructive/5 px-2.5 py-2 text-xs leading-relaxed text-agent-destructive shadow-sm">
-      请求失败：{reason}
+      {t('Request failed: {reason}', { reason })}
     </div>
   );
 }
@@ -339,7 +340,7 @@ export function AssistantMessage({
             {isPlanMode && (
               <span className="inline-flex items-center gap-1 rounded-full border border-amber-200 dark:border-amber-800/50 bg-amber-100/70 dark:bg-amber-900/30 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-300 select-none">
                 <LuListChecks className="h-3.5 w-3.5" />
-                <span>计划模式 (Plan)</span>
+                <span>{t('Plan mode (Plan)')}</span>
               </span>
             )}
           </div>
@@ -369,7 +370,7 @@ export function AssistantMessage({
                 </div>
               ) : (
                 <div className={`${bubbleClass(isPlanMode)} text-xs italic text-agent-muted-foreground`}>
-                  (空消息)
+                  {t('(empty message)')}
                 </div>
               )
             }
@@ -427,7 +428,7 @@ export function AssistantMessage({
               </div>
             ) : (
               <div className={`${bubbleClass(isPlanMode)} text-xs italic text-agent-muted-foreground`}>
-                (空消息)
+                {t('(empty message)')}
               </div>
             )}
             {displayContent && failure ? (
@@ -458,14 +459,14 @@ export function AssistantMessage({
               type="button"
               onClick={() => void copy()}
               className={META_ACTION}
-              title={copied ? '已复制' : '复制消息'}
-              aria-label={copied ? '已复制' : '复制消息'}
+              title={copied ? t('Copied') : t('Copy message')}
+              aria-label={copied ? t('Copied') : t('Copy message')}
             >
               {copied ? (
                 <>
                   <LuCheck className="h-3 w-3 text-emerald-600 dark:text-emerald-400" />
                   <span className="text-emerald-600 dark:text-emerald-400">
-                    已复制
+                    {t('Copied')}
                   </span>
                 </>
               ) : (
@@ -493,8 +494,12 @@ export function AssistantMessage({
                   .finally(() => setRegenerating(false));
               }}
               className={`${META_ACTION} disabled:cursor-not-allowed`}
-              title={regenerating ? '正在重新生成…' : '重新生成（旧回复保留为分支）'}
-              aria-label={regenerating ? '正在重新生成' : '重新生成'}
+              title={
+                regenerating
+                  ? t('Regenerating...')
+                  : t('Regenerate (the old reply is kept as a branch)')
+              }
+              aria-label={regenerating ? t('Regenerating') : t('Regenerate')}
               data-action="regenerate"
             >
               <LuRefreshCw
@@ -559,12 +564,12 @@ function ShareChatButton({ onShare }: { onShare: () => Promise<boolean> }) {
       }`}
       title={
         state === 'done'
-          ? '截图已复制到剪贴板'
+          ? t('Screenshot copied to clipboard')
           : state === 'error'
-            ? '截图失败，请重试'
-            : '分享对话（截图复制到剪贴板）'
+            ? t('Screenshot failed. Try again.')
+            : t('Share chat (copy a screenshot to the clipboard)')
       }
-      aria-label="分享对话截图"
+      aria-label={t('Share chat screenshot')}
     >
       {state === 'busy' ? (
         <LuLoaderCircle className="h-3 w-3 animate-spin" />

package/src/components/chat/ChatInput.tsx

@@ -32,9 +32,12 @@ import {
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import type { ExecPolicy } from '@/lib/exec-policy';
 import { getWebChatModes, hostToolCapability, settingsChrome } from '@/lib/host-tools';
-import { hostClipboardAvailable, requestHostPaste } from '@/lib/host-paste';
-import type { AttachmentFile } from '@/lib/attachments';
+import { hostClipboardAvailable, requestHostPaste, type HostClipboardFile } from '@/lib/host-paste';
+import { attachmentFromPath, type AttachmentFile } from '@/lib/attachments';
+import { dropPointHitsRect, hostFileDropAvailable, listenHostFileDrop } from '@/lib/host-file-drop';
 import type { SteerOutcome } from '@steerable/agent-ui';
+import { t } from '@/i18n';
+import { agentLabel } from '@/i18n/agent-label';
 import {
   isHiddenSlashSkill,
   resolveSlashTool,
@@ -277,11 +280,11 @@ function parseMentionSegments(
       if (!ranges.some((range) => offset < range.end && end > range.start)) {
         const name = match.slice(1);
         const agent = agents.find((a) => a.name === name || a.slug === name);
-        const chat = chats.find((c) => (c.title || '未命名对话') === name);
+        const chat = chats.find((c) => (c.title || t('Untitled chat')) === name);
         const ref: MentionReference | undefined = agent
           ? { type: 'agent', id: agent.id, label: agent.name }
           : chat
-            ? { type: 'chat', id: chat.id, label: chat.title || '未命名对话' }
+            ? { type: 'chat', id: chat.id, label: chat.title || t('Untitled chat') }
             : undefined;
 
         ranges.push({ start: offset, end, text: match, ref });
@@ -372,7 +375,7 @@ function writeEditorValue(
       const isChat = seg.ref?.type === 'chat';
       const isSkill = seg.ref?.type === 'skill';
       const isMcp = seg.ref?.type === 'mcp';
-      const removeLabel = `移除 ${seg.text}`;
+      const removeLabel = t('Remove {name}', { name: seg.text });
 
       const chip = document.createElement('button');
       chip.type = 'button';
@@ -714,6 +717,23 @@ function clipboardOf(event: ClipboardEvent<HTMLDivElement>): DataTransfer | null
   return native.clipboardData ?? event.clipboardData ?? null;
 }
 
+function fileFromHostClipboard(file: HostClipboardFile): File | null {
+  if (!file.dataBase64) return null;
+  let binary: string;
+  try {
+    binary = atob(file.dataBase64);
+  } catch {
+    return null;
+  }
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return new File([bytes], file.name || 'image.png', {
+    type: file.mime || 'application/octet-stream',
+  });
+}
+
 function namePastedImage(file: File, serial: number, now: Date): File {
   if (!file.type.startsWith('image/')) return file;
   if (file.name.trim() && !GENERIC_CLIPBOARD_IMAGE_NAME.test(file.name.trim())) return file;
@@ -760,7 +780,7 @@ function AttachmentChip({
         type="button"
         onClick={onRemove}
         className="flex h-4 w-4 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/10 hover:text-agent-foreground"
-        aria-label={`移除文件 ${file.name}`}
+        aria-label={t('Remove file {name}', { name: file.name })}
       >
         <LuX className="h-3 w-3" />
       </button>
@@ -781,7 +801,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       onRemoveFollowUp,
       isStreaming = false,
       disabled = false,
-      placeholder = '向 Agent 发送消息…',
+      placeholder = t('Message the Agent...'),
       currentAgent,
       agents = [],
       chats = [],
@@ -835,7 +855,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     const compositionEndAtRef = useRef<number>(0);
 
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const dropBoxRef = useRef<HTMLDivElement>(null);
     const pasteSerialRef = useRef(0);
+    const attachDroppedRef = useRef<(paths: string[]) => void>(() => {});
+    const dragHoverRef = useRef<(hovering: boolean) => void>(() => {});
+    const hostPasteFilesRef = useRef<(files: HostClipboardFile[]) => void>(() => {});
     const adoptPastedTextRef = useRef<(text: string) => void>(() => {});
     // 工具栏"空间不足时优先隐藏快捷键提示"的测量 refs，见下方 useLayoutEffect。
     const toolbarRowRef = useRef<HTMLDivElement>(null);
@@ -919,8 +943,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         .map((chat) => ({
           type: 'chat',
           id: chat.id,
-          label: chat.title || '未命名对话',
-          description: chat.updatedAt ? `历史对话 · ${new Date(chat.updatedAt).toLocaleString()}` : '历史对话',
+          label: chat.title || t('Untitled chat'),
+          description: chat.updatedAt
+            ? t('Past chat · {time}', { time: new Date(chat.updatedAt).toLocaleString() })
+            : t('Past chat'),
         }));
 
       return [...agentSuggestions, ...chatSuggestions].slice(0, MAX_MENTION_SUGGESTIONS);
@@ -1020,11 +1046,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       const mcpGroup = suggestions.filter((s) => s.kind === 'mcp');
       let idx = 0;
       if (skillGroup.length > 0) {
-        rows.push({ type: 'header', label: '指定运行的本地技能 (Skill)' });
+        rows.push({ type: 'header', label: t('Run a local skill (Skill)') });
         for (const s of skillGroup) rows.push({ type: 'item', item: s, idx: idx++ });
       }
       if (mcpGroup.length > 0) {
-        rows.push({ type: 'header', label: '指定调用的 MCP 工具 (MCP Tool)' });
+        rows.push({ type: 'header', label: t('Call an MCP tool (MCP Tool)') });
         for (const s of mcpGroup) rows.push({ type: 'item', item: s, idx: idx++ });
       }
       return rows;
@@ -1240,6 +1266,33 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       path: (file as { path?: string }).path || '',
       file,
     });
+    attachDroppedRef.current = (paths) => {
+      if (disabled || !allowFileAttach) return;
+      addFiles(paths.map(attachmentFromPath));
+    };
+    dragHoverRef.current = (hovering) => {
+      if (disabled || !allowFileAttach) {
+        setIsDragging(false);
+        return;
+      }
+      setIsDragging(hovering);
+    };
+    hostPasteFilesRef.current = (incoming) => {
+      if (disabled || !allowFileAttach) return;
+      const now = new Date();
+      const next: AttachmentFile[] = [];
+      for (const item of incoming) {
+        if (item.path) {
+          next.push(attachmentFromPath(item.path));
+          continue;
+        }
+        const blob = fileFromHostClipboard(item);
+        if (!blob) continue;
+        pasteSerialRef.current += 1;
+        next.push(toAttachment(namePastedImage(blob, pasteSerialRef.current, now)));
+      }
+      if (next.length > 0) addFiles(next);
+    };
 
     // 按钮点击 → 触发隐藏的 <input type="file" multiple>，由浏览器/Electron
     // 直接弹出系统文件选择框（不依赖 IPC，避免「点击无反应」）。
@@ -1449,14 +1502,44 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         event.preventDefault();
         adoptPastedTextRef.current(text);
       };
+      const onHostPasteFiles = (event: Event) => {
+        const files = (event as CustomEvent<HostClipboardFile[]>).detail;
+        if (!Array.isArray(files) || files.length === 0) return;
+        event.preventDefault();
+        hostPasteFilesRef.current(files);
+      };
       editor.addEventListener('compositionstart', onCompositionStart, true);
       editor.addEventListener('hostpaste', onHostPaste);
+      editor.addEventListener('hostpastefiles', onHostPasteFiles);
       return () => {
         editor.removeEventListener('compositionstart', onCompositionStart, true);
         editor.removeEventListener('hostpaste', onHostPaste);
+        editor.removeEventListener('hostpastefiles', onHostPasteFiles);
       };
     }, []);
 
+    useEffect(() => {
+      if (!hostFileDropAvailable()) return undefined;
+      return listenHostFileDrop((event) => {
+        const box = dropBoxRef.current;
+        if (event.type === 'leave' || !box || event.x == null || event.y == null) {
+          dragHoverRef.current(false);
+          return;
+        }
+        const hit = dropPointHitsRect(
+          { x: event.x, y: event.y },
+          box.getBoundingClientRect(),
+          window.devicePixelRatio,
+        );
+        if (event.type === 'drop') {
+          dragHoverRef.current(false);
+          if (hit) attachDroppedRef.current(event.paths);
+          return;
+        }
+        dragHoverRef.current(hit);
+      });
+    }, []);
+
     const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
       // Read before preventDefault. WebKit clears clipboardData once the paste is canceled.
       const data = clipboardOf(event);
@@ -1608,7 +1691,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
               // 进入待发队列 / 作为新回合发出），草稿都可以清；queued 额外
               // 提示用户"不是追加进当前回合"。
               if (outcome === 'queued') {
-                showSteerNotice('当前回合无法插队，已改为排队，本轮结束后自动发出');
+                showSteerNotice(
+                  t(
+                    'This turn cannot take an interjection. The message was queued and will be sent when this turn ends.',
+                  ),
+                );
               }
               onChange('');
             });
@@ -1695,7 +1782,9 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
             onAutoContinue={() => askUserPrompt.answer({})}
             bottomHint={
               askUserPrompt.pendingCount > 0
-                ? `还有 ${askUserPrompt.pendingCount} 组问题待回答`
+                ? t('{count} more question groups to answer', {
+                    count: askUserPrompt.pendingCount,
+                  })
                 : undefined
             }
           />
@@ -1735,7 +1824,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         {mentionQuery && mentionSuggestions.length > 0 && (
           <div className="absolute bottom-full left-3 z-50 mb-1 max-h-72 w-80 max-w-[calc(100%-0.75rem)] overflow-y-auto rounded-agent-md border border-agent-border bg-agent-canvas p-1 shadow-lg">
             <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-agent-muted-foreground">
-              @ 选择 Agent 或历史对话
+              {t('@ Choose an Agent or past chat')}
             </div>
             {mentionSuggestions.map((item, idx) => (
               <button
@@ -1769,7 +1858,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                   <span className="flex items-center gap-1.5">
                     <span className="truncate text-xs font-medium">@{item.label}</span>
                     <span className="shrink-0 rounded-full bg-agent-muted px-1.5 py-0.5 text-[10px] text-agent-muted-foreground">
-                      {item.type === 'agent' ? 'Agent' : '对话'}
+                      {item.type === 'agent' ? 'Agent' : t('Chat')}
                     </span>
                   </span>
                   {item.description && (
@@ -1822,7 +1911,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                         <div className="text-xs font-medium truncate">
                           {row.item.skill.displayName ? (
                             <>
-                              {row.item.skill.displayName}
+                              {t(row.item.skill.displayName)}
                               <span className="ml-1.5 text-[10px] font-normal text-agent-muted-foreground/70">
                                 /{row.item.skill.name}
                               </span>
@@ -1862,6 +1951,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           </div>
         )}
         <div
+          ref={dropBoxRef}
           className={`chat-input-box flex flex-col rounded-agent-lg border bg-agent-canvas shadow-sm transition-all duration-200 ${
             isDragging
               ? 'border-blue-500 ring-2 ring-blue-500/20'
@@ -1876,7 +1966,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
           {pendingFollowUps.length > 0 && (
             <div className="flex flex-col gap-1 border-b border-agent-border bg-agent-muted/30 px-2.5 py-1.5">
               <div className="text-[11px] font-medium text-agent-muted-foreground">
-                排队中（{pendingFollowUps.length}）· 本轮结束后自动发出 · 停止后恢复到输入框
+                {t(
+                  'Queued ({count}) · Sent when this turn ends · Restored to the input box if stopped',
+                  { count: pendingFollowUps.length },
+                )}
               </div>
               {pendingFollowUps.map((text, i) => (
                 <div
@@ -1887,7 +1980,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                   {onRemoveFollowUp && (
                     <button
                       type="button"
-                      aria-label={`撤回排队消息 ${i + 1}`}
+                      aria-label={t('Withdraw queued message {index}', { index: i + 1 })}
                       onClick={() => onRemoveFollowUp(i)}
                       className="shrink-0 text-agent-muted-foreground opacity-0 transition-opacity hover:text-agent-destructive group-hover:opacity-100"
                     >
@@ -1979,8 +2072,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 onClick={handlePickFiles}
                 disabled={disabled || isStreaming}
                 className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:cursor-not-allowed disabled:opacity-50"
-                title="上传文件，或在输入框粘贴图片"
-                aria-label="上传文件"
+                title={t('Upload files, or paste images into the input box')}
+                aria-label={t('Upload files')}
                 data-testid="chat-attach"
               >
                 <LuPaperclip className="h-3 w-3" />
@@ -2013,7 +2106,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                         <kbd className="rounded border border-agent-border bg-agent-muted px-1 font-sans text-[10px]">
                           Enter
                         </kbd>
-                        <span className="ml-1">排队</span>
+                        <span className="ml-1">{t('Queue')}</span>
                       </span>
                     )}
                     {onSteer && (
@@ -2025,14 +2118,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                         <kbd className="rounded border border-agent-border bg-agent-muted px-1 font-sans text-[10px]">
                           Enter
                         </kbd>
-                        <span className="ml-1">插队</span>
+                        <span className="ml-1">{t('Interject')}</span>
                       </span>
                     )}
                     <span className="ml-2">
                       <kbd className="rounded border border-agent-border bg-agent-muted px-1 font-sans text-[10px]">
                         Esc
                       </kbd>
-                      <span className="ml-1">停止</span>
+                      <span className="ml-1">{t('Stop')}</span>
                     </span>
                   </>
                 ) : (
@@ -2040,7 +2133,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                     <kbd className="rounded border border-agent-border bg-agent-muted px-1 font-sans text-[10px]">
                       Enter
                     </kbd>
-                    <span className="ml-1">发送</span>
+                    <span className="ml-1">{t('Send')}</span>
                     <span className="ml-2">
                       <kbd className="rounded border border-agent-border bg-agent-muted px-1 font-sans text-[10px]">
                         Shift
@@ -2049,7 +2142,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                       <kbd className="rounded border border-agent-border bg-agent-muted px-1 font-sans text-[10px]">
                         Enter
                       </kbd>
-                      <span className="ml-1">换行</span>
+                      <span className="ml-1">{t('New line')}</span>
                     </span>
                   </>
                 )}
@@ -2069,11 +2162,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 title={
                   isStreaming
                     ? pendingFollowUps.length > 0
-                      ? `停止生成 (Esc) · ${pendingFollowUps.length} 条排队消息将恢复到输入框`
-                      : '停止生成 (Esc)'
-                    : '发送 (Enter)'
+                      ? t(
+                          'Stop generating (Esc) · {count} queued messages will be restored to the input box',
+                          { count: pendingFollowUps.length },
+                        )
+                      : t('Stop generating (Esc)')
+                    : t('Send (Enter)')
                 }
-                aria-label={isStreaming ? '停止生成' : '发送消息'}
+                aria-label={isStreaming ? t('Stop generating') : t('Send message')}
                 data-testid="chat-send"
               >
                 {isStreaming ? (
@@ -2091,7 +2187,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 );
 
 function agentInitial(agent: LocalChatAgent): string {
-  return agent.name.trim()[0]?.toUpperCase() ?? 'A';
+  return agentLabel(agent).trim()[0]?.toUpperCase() ?? 'A';
 }
 
 /**
@@ -2113,7 +2209,7 @@ function ModeToggle({
     <div
       className="inline-flex h-6 shrink-0 items-center rounded-full border border-agent-border bg-agent-canvas p-0.5"
       role="radiogroup"
-      aria-label="对话模式"
+      aria-label={t('Chat mode')}
       data-testid="mode-toggle"
     >
       <button
@@ -2122,7 +2218,7 @@ function ModeToggle({
         aria-checked={mode === 'agent'}
         disabled={disabled}
         onClick={() => onChange('agent')}
-        title="Agent 模式：直接执行任务"
+        title={t('Agent mode: carry out the task directly')}
         data-testid="mode-agent"
         className={[
           'inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[12px] leading-[1.45] transition-colors disabled:cursor-not-allowed disabled:opacity-70',
@@ -2140,7 +2236,7 @@ function ModeToggle({
         aria-checked={mode === 'plan'}
         disabled={disabled}
         onClick={() => onChange('plan')}
-        title="Plan 模式：先制定计划，只读不执行"
+        title={t('Plan mode: make a plan first, read only and no execution')}
         data-testid="mode-plan"
         className={[
           'inline-flex h-5 items-center gap-1 rounded-full px-1.5 text-[12px] leading-[1.45] transition-colors disabled:cursor-not-allowed disabled:opacity-70',
@@ -2187,14 +2283,14 @@ function AgentSelect({
 
   const buttonTitle = useMemo(() => {
     const activeNames = [
-      agent.name,
+      agentLabel(agent),
       ...mentionReferences
         .filter((ref) => ref.type === 'agent' && ref.id !== agent.id)
         .map((ref) => ref.label),
     ].filter(Boolean) as string[];
 
-    return `当前激活专家：${activeNames.join(', ')}`;
-  }, [agent.name, agent.id, mentionReferences]);
+    return t('Active experts: {names}', { names: activeNames.join(', ') });
+  }, [agent, mentionReferences]);
 
   return (
     <div
@@ -2213,7 +2309,7 @@ function AgentSelect({
       >
         <AgentDot agent={agent} />
         <span className="truncate font-medium">
-          {agent.name}
+          {agentLabel(agent)}
           {mentionedAgentCount > 0 ? ` +${mentionedAgentCount}` : ''}
         </span>
         <LuChevronDown className="h-3 w-3 shrink-0 text-agent-muted-foreground" />
@@ -2225,7 +2321,7 @@ function AgentSelect({
           className="absolute bottom-full left-0 z-50 mb-1 max-h-64 w-72 overflow-y-auto rounded-agent-md border border-agent-border bg-agent-canvas p-1 shadow-lg"
         >
           <div className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-agent-muted-foreground">
-            选择专家
+            {t('Choose an expert')}
           </div>
           {agents.map((item) => {
             const isPrimary = item.id === agent.id;
@@ -2252,16 +2348,16 @@ function AgentSelect({
                 <span className="min-w-0 flex-1">
                   <span className="flex items-center gap-1.5">
                     <span className="block truncate text-xs font-medium">
-                      {item.name}
+                      {agentLabel(item)}
                     </span>
                     {isPrimary && (
                       <span className="inline-flex items-center rounded bg-agent-foreground/10 px-1 py-0.5 text-[9px] font-medium text-agent-foreground">
-                        当前
+                        {t('Current')}
                       </span>
                     )}
                     {!isPrimary && isMentioned && (
                       <span className="inline-flex items-center rounded bg-agent-muted px-1 py-0.5 text-[9px] font-medium text-agent-muted-foreground border border-agent-border">
-                        已引入
+                        {t('Mentioned')}
                       </span>
                     )}
                   </span>
@@ -2286,7 +2382,7 @@ function AgentSelect({
             className="mt-0.5 flex w-full items-center gap-2 rounded border-t border-agent-border/50 px-2 py-2 text-left text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
           >
             <LuBot className="h-3.5 w-3.5 shrink-0" />
-            <span className="text-xs font-medium">管理智能体</span>
+            <span className="text-xs font-medium">{t('Manage agents')}</span>
           </button>
           )}
         </div>