@steerable/agent-shell-web 0.6.53 → 0.6.55

package/src/components/CreateProjectModal.tsx

@@ -8,6 +8,7 @@ import { LuFolder, LuFolderPlus, LuX } from 'react-icons/lu';
 import { BRAND_NAME } from '@/brand';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
 import { getElectronBridge } from '@/lib/electron-bridge';
+import { t } from '@/i18n';
 
 export interface ProjectFormValues {
   name: string;
@@ -65,7 +66,7 @@ export function CreateProjectModal({
   if (typeof document === 'undefined') return null;
 
   const trimmed = name.trim();
-  const homePreview = `~/Documents/${BRAND_NAME}/${trimmed || '项目名'}`;
+  const homePreview = `~/Documents/${BRAND_NAME}/${trimmed || t('project-name')}`;
   const titleId = isEdit ? 'edit-project-title' : 'create-project-title';
 
   const addSourceFolder = (folder: string) => {
@@ -84,11 +85,11 @@ export function CreateProjectModal({
     }
     const picker = getElectronBridge()?.local?.selectDirectory;
     if (!picker) {
-      setError('请输入文件夹路径');
+      setError(t('Enter a folder path'));
       return;
     }
     try {
-      const result = await picker({ title: '添加源文件夹' });
+      const result = await picker({ title: t('Add source folder') });
       if (!result || result.canceled || result.filePaths.length === 0) return;
       addSourceFolder(result.filePaths[0]);
     } catch (err) {
@@ -137,13 +138,13 @@ export function CreateProjectModal({
       <div className="flex w-[440px] max-w-[92vw] flex-col overflow-hidden rounded-2xl border border-agent-border bg-agent-canvas shadow-2xl">
         <div className="flex items-center justify-between px-5 pb-1 pt-4">
           <h2 id={titleId} className="text-base font-semibold text-agent-foreground">
-            {isEdit ? '编辑项目' : '新建项目'}
+            {isEdit ? t('Edit project') : t('New project')}
           </h2>
           <button
             type="button"
             onClick={onClose}
             className="rounded-full p-1 text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
-            aria-label="关闭"
+            aria-label={t('Close')}
           >
             <LuX className="h-4 w-4" />
           </button>
@@ -159,7 +160,7 @@ export function CreateProjectModal({
               onKeyDown={(event) => {
                 if (event.key === 'Enter') void handleSubmit();
               }}
-              placeholder="项目名称"
+              placeholder={t('Project name')}
               autoFocus
               className="h-full min-w-0 flex-1 bg-transparent text-sm text-agent-foreground outline-none placeholder:text-agent-muted-foreground"
               data-testid={isEdit ? 'edit-project-name' : 'create-project-name'}
@@ -167,14 +168,14 @@ export function CreateProjectModal({
           </label>
           {!isEdit && (
             <p className="px-1 text-[11px] text-agent-muted-foreground">
-              默认位置：{homePreview}
+              {t('Default location: {path}', { path: homePreview })}
             </p>
           )}
 
           <div>
-            <div className="mb-1 text-sm text-agent-foreground">源文件夹</div>
+            <div className="mb-1 text-sm text-agent-foreground">{t('Source folders')}</div>
             <p className="mb-2 text-[11px] text-agent-muted-foreground">
-              这些目录及其子目录可读写。
+              {t('These folders and their subfolders are readable and writable.')}
             </p>
             <div className="overflow-hidden rounded-2xl border border-agent-border">
               {sourceFolders.map((folder) => (
@@ -192,7 +193,7 @@ export function CreateProjectModal({
                       setSourceFolders((prev) => prev.filter((item) => item !== folder))
                     }
                     className="rounded-full p-0.5 text-agent-muted-foreground hover:text-agent-foreground"
-                    aria-label={`移除 ${folder}`}
+                    aria-label={t('Remove {folder}', { folder })}
                   >
                     <LuX className="h-3.5 w-3.5" />
                   </button>
@@ -210,7 +211,7 @@ export function CreateProjectModal({
                       void handleAddFolder();
                     }
                   }}
-                  placeholder="输入路径或点添加浏览"
+                  placeholder={t('Type a path, or click Add to browse')}
                   className="h-7 min-w-0 flex-1 bg-transparent text-xs text-agent-foreground outline-none placeholder:text-agent-muted-foreground"
                   data-testid={isEdit ? 'edit-project-folder-path' : 'create-project-folder-path'}
                 />
@@ -220,7 +221,7 @@ export function CreateProjectModal({
                   className="shrink-0 rounded-full px-2 py-1 text-xs font-medium text-agent-foreground hover:bg-agent-muted"
                   data-testid={isEdit ? 'edit-project-add-folder' : 'create-project-add-folder'}
                 >
-                  添加
+                  {t('Add')}
                 </button>
               </div>
             </div>
@@ -239,11 +240,11 @@ export function CreateProjectModal({
               type="button"
               onClick={() => setDeleteConfirmOpen(true)}
               disabled={deleting || submitting}
-              title="删除项目（会话保留为无项目对话）"
+              title={t('Delete project (its chats stay as chats without a project)')}
               className="mr-auto h-9 rounded-full px-3 text-sm text-agent-destructive transition-colors hover:bg-agent-destructive/10 disabled:opacity-40"
               data-testid="edit-project-delete"
             >
-              删除本地项目
+              {t('Delete local project')}
             </button>
           )}
           <button
@@ -253,7 +254,7 @@ export function CreateProjectModal({
               onDelete ? '' : 'ml-auto'
             }`}
           >
-            取消
+            {t('Cancel')}
           </button>
           <button
             type="button"
@@ -262,16 +263,25 @@ export function CreateProjectModal({
             className="h-9 rounded-full bg-agent-foreground px-4 text-sm font-medium text-agent-canvas transition-opacity disabled:opacity-40"
             data-testid={isEdit ? 'edit-project-submit' : 'create-project-submit'}
           >
-            {submitting ? (isEdit ? '保存中…' : '创建中…') : isEdit ? '保存' : '创建项目'}
+            {submitting
+              ? isEdit
+                ? t('Saving…')
+                : t('Creating…')
+              : isEdit
+                ? t('Save')
+                : t('Create project')}
           </button>
         </div>
       </div>
       {onDelete && (
         <ConfirmDialog
           open={deleteConfirmOpen}
-          title="删除项目"
-          description={`确定删除项目「${trimmed || '未命名'}」？会话会保留为无项目对话。`}
-          confirmLabel="删除项目"
+          title={t('Delete project')}
+          description={t(
+            'Delete project "{name}"? Its chats will stay as chats without a project.',
+            { name: trimmed || t('Untitled') },
+          )}
+          confirmLabel={t('Delete project')}
           pending={deleting}
           onCancel={() => {
             if (deleting) return;

package/src/components/LocalLlmSettingsModal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import { LuX } from 'react-icons/lu';
 import type { LlmSettings } from '@/lib/local-api';
 import { LlmSettingsPanel } from '@/components/settings/LlmSettingsPanel';
+import { t } from '@/i18n';
 
 interface LocalLlmSettingsModalProps {
   open: boolean;
@@ -43,12 +44,12 @@ export function LocalLlmSettingsModal({ open, onClose, onSaved }: LocalLlmSettin
         className="flex h-[560px] max-h-[90vh] w-[540px] max-w-[92vw] flex-col overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-2xl animate-fade-in"
       >
         <div className="flex h-9 flex-shrink-0 items-center justify-between border-b border-agent-border px-3">
-          <h2 className="text-xs font-semibold text-agent-foreground">本地模型设置</h2>
+          <h2 className="text-xs font-semibold text-agent-foreground">{t('Local model settings')}</h2>
           <button
             type="button"
             onClick={onClose}
             className="rounded-full p-1 text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
-            aria-label="关闭"
+            aria-label={t('Close')}
           >
             <LuX className="h-4 w-4" />
           </button>
@@ -62,7 +63,7 @@ export function LocalLlmSettingsModal({ open, onClose, onSaved }: LocalLlmSettin
             onClick={onClose}
             className="h-7 rounded-full px-3 text-xs font-medium text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
           >
-            关闭
+            {t('Close')}
           </button>
         </div>
       </div>

package/src/components/SidebarRelease.tsx

@@ -7,6 +7,7 @@ import {
   getElectronBridge,
   type AppReleaseSnapshot,
 } from '@/lib/electron-bridge';
+import { t } from '@/i18n';
 
 export function useAppRelease(): AppReleaseView & { run: () => void } {
   const [snap, setSnap] = useState<AppReleaseSnapshot | null>(null);
@@ -59,7 +60,7 @@ export function SidebarVersionLabel({ release }: { release: AppReleaseView }) {
     <span
       className="ml-auto text-[10px] tabular-nums text-agent-muted-foreground/70"
       data-testid="sidebar-app-version"
-      title={`当前版本 ${release.version}`}
+      title={t('Current version {version}', { version: release.version })}
     >
       v{release.version}
     </span>

package/src/components/TerminalPanel.tsx

@@ -1,5 +1,6 @@
 import { Suspense, lazy, useEffect, useState } from 'react';
 import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
+import { t } from '@/i18n';
 
 // 把 xterm 那一坨 (~300KB) 拆到独立 chunk —— 用户没打开终端就不下载。
 // 跟原 Next.js 版本里 `dynamic(() => import('./TerminalView'), {ssr:false})`
@@ -42,9 +43,9 @@ export function TerminalPanel({
     return (
       <div className="flex h-full w-full items-center justify-center bg-black p-4 text-center font-mono text-xs text-white">
         <div>
-          <p className="mb-2">⚠️ 此面板需要桌面客户端或 BS server 连接。</p>
+          <p className="mb-2">⚠️ {t('This panel needs the desktop client or a BS server connection.')}</p>
           <p className="text-white/60">
-            当前页面没有可用的宿主 bridge，无法连接到本地 PTY。
+            {t('This page has no host bridge, so it cannot connect to a local PTY.')}
           </p>
         </div>
       </div>

package/src/components/TerminalView.tsx

@@ -7,6 +7,7 @@ import '@xterm/xterm/css/xterm.css';
 import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
 import { getElectronBridge } from '@/lib/electron-bridge';
 import { BRAND_NAME } from '@/brand';
+import { t } from '@/i18n';
 
 /**
  * Renders an xterm.js terminal wired up to the main-process PTY via the
@@ -48,7 +49,7 @@ export function TerminalView({
     const terminal = bridge?.terminal;
     if (!terminal) {
       setStatus('error');
-      setStatusMsg('window.electron.terminal 不可用');
+      setStatusMsg(t('window.electron.terminal is unavailable'));
       return;
     }
 
@@ -199,23 +200,27 @@ export function TerminalView({
   }, []);
 
   const statusLabel =
-    status === 'starting' ? '启动中…' : status === 'ready' ? '在线' : `错误：${statusMsg}`;
+    status === 'starting'
+      ? t('Starting…')
+      : status === 'ready'
+        ? t('Online')
+        : t('Error: {message}', { message: statusMsg });
 
   return (
     <div className="flex h-full w-full flex-col bg-[#0b0b0c]">
       <DockPanelHeader
-        title={`${BRAND_NAME} · 终端 · ${statusLabel}`}
+        title={t('{brand} · Terminal · {status}', { brand: BRAND_NAME, status: statusLabel })}
         onClose={onClose}
-        closeLabel="关闭终端面板"
+        closeLabel={t('Close terminal panel')}
         actions={
           onShowTaskProcess && (
             <DockHeaderButton
               icon={<LuListTodo className="h-3 w-3" />}
-              label="后台任务"
+              label={t('Background tasks')}
               title={
                 taskProcessTitle
-                  ? `切换到后台推理：${taskProcessTitle}`
-                  : '切换到后台推理'
+                  ? t('Switch to background reasoning: {title}', { title: taskProcessTitle })
+                  : t('Switch to background reasoning')
               }
               onClick={onShowTaskProcess}
             />

package/src/components/chat/ApprovalModal.tsx

@@ -3,6 +3,7 @@ import {
   type ApprovalDecisionKind,
   type ApprovalPromptRequest,
 } from '@/lib/electron-bridge';
+import { t } from '@/i18n';
 
 /**
  * ApprovalPromptMenu — W4-1 审批代数的输入区 UI。
@@ -19,10 +20,10 @@ import {
  */
 
 const MODE_LABEL: Record<string, string> = {
-  read: '只读',
-  safe_write: '写入',
-  destructive: '危险',
-  other: '其他',
+  read: 'Read only',
+  safe_write: 'Write',
+  destructive: 'Dangerous',
+  other: 'Other',
 };
 
 function summarizeArguments(args: Record<string, unknown>): string {
@@ -45,15 +46,15 @@ interface DecisionButton {
 }
 
 const ALLOW_BUTTONS: DecisionButton[] = [
-  { kind: 'allow_once', label: '允许一次', tone: 'allow' },
-  { kind: 'allow_for_session', label: '本次会话允许', tone: 'allow' },
-  { kind: 'allow_always', label: '始终允许', tone: 'allow' },
+  { kind: 'allow_once', label: 'Allow once', tone: 'allow' },
+  { kind: 'allow_for_session', label: 'Allow for this chat', tone: 'allow' },
+  { kind: 'allow_always', label: 'Always allow', tone: 'allow' },
 ];
 
 const DENY_BUTTONS: DecisionButton[] = [
-  { kind: 'deny_once', label: '拒绝一次', tone: 'deny' },
-  { kind: 'deny_for_session', label: '本次会话拒绝', tone: 'deny' },
-  { kind: 'deny_always', label: '始终拒绝', tone: 'deny' },
+  { kind: 'deny_once', label: 'Deny once', tone: 'deny' },
+  { kind: 'deny_for_session', label: 'Deny for this chat', tone: 'deny' },
+  { kind: 'deny_always', label: 'Always deny', tone: 'deny' },
 ];
 
 function DecisionRow({
@@ -77,7 +78,7 @@ function DecisionRow({
               : 'rounded-agent-md border border-agent-border px-3 py-1.5 text-xs font-medium text-agent-foreground transition hover:bg-agent-muted'
           }
         >
-          {b.label}
+          {t(b.label)}
         </button>
       ))}
     </div>
@@ -120,27 +121,29 @@ export function ApprovalPromptMenu({
             <div className="text-xs font-medium text-agent-foreground">
               {isEgress ? (
                 <>
-                  Agent 请求访问外网
+                  {t('Agent requests internet access')}
                   <span className="mx-1 font-mono">
                     {egressHost}
                     {egressPort !== null ? `:${egressPort}` : ''}
                   </span>
                 </>
               ) : isSandboxEscalation ? (
-                <>Agent 请求在工作区外执行命令</>
+                <>{t('Agent requests to run a command outside the workspace')}</>
               ) : (
                 <>
-                  Agent 请求执行
+                  {t('Agent requests to run')}
                   <span className="mx-1 font-mono">{current.toolName}</span>
                   <span className="text-agent-muted-foreground">
-                    （{MODE_LABEL[current.mode] ?? current.mode}操作）
+                    {t('({mode} action)', {
+                      mode: MODE_LABEL[current.mode] ? t(MODE_LABEL[current.mode]) : current.mode,
+                    })}
                   </span>
                 </>
               )}
             </div>
             {pendingCount > 0 && (
               <div className="mt-0.5 text-[11px] text-agent-muted-foreground">
-                还有 {pendingCount} 个待审批
+                {t('{count} more awaiting approval', { count: pendingCount })}
               </div>
             )}
           </div>
@@ -152,23 +155,30 @@ export function ApprovalPromptMenu({
           </pre>
             {isEgress ? (
             <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
-              该域名不在出网白名单内。放行前请核对完整域名拼写（仿冒域名常
-              用相似拼写，如 cdn.jsdelivr.net.evil.com）。放行仅对本次会话
-              生效；要持久放行请把域名加入设置的出网白名单。
+              {t(
+                'This domain is not on the egress allowlist. Check the full spelling before allowing it (lookalike domains often use similar spellings, such as cdn.jsdelivr.net.evil.com). Allowing it applies only to this chat. To allow it permanently, add the domain to the egress allowlist in Settings.',
+              )}
             </p>
           ) : isSandboxEscalation ? (
             <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
-              命令已在工作区沙箱中被拒绝。允许后只重试这条命令，不再限制写入范围。
+              {t(
+                'The workspace sandbox blocked this command. Allowing it retries only this command, without limiting where it can write.',
+              )}
             </p>
           ) : (
             <>
               {current.category !== current.toolName && (
                 <p className="mt-2 text-[11px] text-agent-muted-foreground">
-                  持久化类别：{current.category}（会话/始终决定对该类别所有调用生效）
+                  {t(
+                    'Saved category: {category} (a chat or always decision applies to every call in this category)',
+                    { category: current.category },
+                  )}
                 </p>
               )}
               <p className="mt-2 text-[11px] leading-relaxed text-agent-muted-foreground">
-                在工作区沙箱中执行，范围外的写入会被拒绝。需要写到外面时，把沙箱切到「完整权限」后再试。
+                {t(
+                  'Runs in the workspace sandbox. Writes outside it are blocked. To write outside, switch the sandbox to "Full access" and try again.',
+                )}
               </p>
             </>
           )}
@@ -198,13 +208,17 @@ export function ApprovalPromptMenu({
               className="shrink-0 rounded-agent-md bg-agent-destructive px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
               data-testid="approval-abort"
             >
-              中止本轮
+              {t('Abort this turn')}
             </button>
           </div>
           <p className="text-[11px] leading-relaxed text-agent-muted-foreground">
             {isEgress
-              ? '「会话」决定在本对话内记住（代理进程退出即失效）。不操作约 3 分钟后按拒绝处理。'
-              : '「会话」决定在本对话内记住；「始终」决定写入本机 ~/.steerable/approvals.json，跨对话生效。不操作约 2 分钟后按拒绝处理。'}
+              ? t(
+                  '"This chat" decisions are remembered in this chat until the agent process exits. With no action for about 3 minutes, the request is denied.',
+                )
+              : t(
+                  '"This chat" decisions are remembered in this chat. "Always" decisions are written to ~/.steerable/approvals.json on this computer and apply across chats. With no action for about 2 minutes, the request is denied.',
+                )}
           </p>
         </div>
     </div>

package/src/components/chat/ApprovalPromptProvider.tsx

@@ -67,7 +67,7 @@ export function ApprovalPromptProvider({ children }: { children: ReactNode }) {
         if (active) addRequests(requests, 'prepend');
       })
       .catch((error) => {
-        console.error('恢复待审批请求失败:', error);
+        console.error('Failed to restore pending approval requests:', error);
       });
     return () => {
       active = false;

package/src/components/chat/AskUserPromptProvider.tsx

@@ -65,7 +65,7 @@ export function AskUserPromptProvider({ children }: { children: ReactNode }) {
         if (active) addRequests(requests, 'prepend');
       })
       .catch((error) => {
-        console.error('恢复待回答问题失败:', error);
+        console.error('Failed to restore pending questions:', error);
       });
     return () => {
       active = false;

package/src/components/chat/AskUserQuestionMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LuCheck, LuChevronLeft, LuPencil, LuWand } from 'react-icons/lu';
+import { t } from '@/i18n';
 
 /**
  * AskUserQuestionMenu — W8 结构化提问的分步菜单卡片。
@@ -94,7 +95,7 @@ function initialDraft(question: AskQuestion, answer: AnswerValue | undefined): {
     return {
       selected,
       customMode: customBits.length > 0,
-      customText: customBits.join('、'),
+      customText: customBits.join(t(', ')),
     };
   }
   if (typeof answer === 'string' && answer.length > 0) {
@@ -129,7 +130,7 @@ function Footer({
             className="inline-flex items-center gap-1 rounded-agent-md border border-agent-border px-2.5 py-1.5 text-xs font-medium text-agent-foreground transition hover:bg-agent-muted"
           >
             <LuChevronLeft size={12} />
-            上一题
+            {t('Previous')}
           </button>
         )}
         {onAutoContinue && (
@@ -139,7 +140,7 @@ function Footer({
             className="inline-flex items-center gap-1 rounded-agent-md px-2.5 py-1.5 text-xs font-medium text-agent-muted-foreground transition hover:bg-agent-muted hover:text-agent-foreground"
           >
             <LuWand size={12} />
-            交给AI决定
+            {t('Let AI decide')}
           </button>
         )}
       </div>
@@ -175,7 +176,7 @@ function PrimaryButton({
       ].join(' ')}
     >
       <LuCheck size={12} />
-      {isLast ? '提交' : '下一题'}
+      {isLast ? t('Submit') : t('Next')}
     </button>
   );
 }
@@ -352,7 +353,7 @@ function SelectQuestionStep({
           <LuCheck size={10} />
         </span>
         <LuPencil size={12} className="shrink-0" />
-        <span className="min-w-0 flex-1">其他 / 自定义</span>
+        <span className="min-w-0 flex-1">{t('Other / custom')}</span>
       </button>
     );
   };
@@ -395,7 +396,7 @@ function SelectQuestionStep({
                 commitMulti();
               }
             }}
-            placeholder={question.placeholder || '输入你的补充...'}
+            placeholder={question.placeholder || t('Add your details...')}
             className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
           />
         )}
@@ -413,7 +414,7 @@ function SelectQuestionStep({
                   commitCustom();
                 }
               }}
-              placeholder={question.placeholder || '输入你的回答...'}
+              placeholder={question.placeholder || t('Type your answer...')}
               className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
             />
             <button
@@ -424,7 +425,7 @@ function SelectQuestionStep({
               }}
               className="text-xs text-agent-muted-foreground transition hover:text-agent-foreground"
             >
-              ← 返回选项
+              {t('← Back to options')}
             </button>
           </div>
         )}
@@ -434,7 +435,11 @@ function SelectQuestionStep({
         canGoBack={Boolean(onBack)}
         onBack={onBack}
         onAutoContinue={onAutoContinue}
-        hint={question.multiSelect ? '↑↓ 移动，Enter 勾选' : '↑↓ 选择，Enter 确认'}
+        hint={
+          question.multiSelect
+            ? t('↑↓ to move, Enter to check')
+            : t('↑↓ to choose, Enter to confirm')
+        }
       >
         {question.multiSelect ? (
           <PrimaryButton
@@ -511,7 +516,7 @@ function TextQuestionStep({
               commit();
             }
           }}
-          placeholder={question.placeholder || '输入你的回答...'}
+          placeholder={question.placeholder || t('Type your answer...')}
           className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground outline-none placeholder:text-agent-muted-foreground focus:border-agent-foreground focus:ring-1 focus:ring-agent-foreground"
         />
       </div>
@@ -520,7 +525,7 @@ function TextQuestionStep({
         canGoBack={Boolean(onBack)}
         onBack={onBack}
         onAutoContinue={onAutoContinue}
-        hint="Enter 确认"
+        hint={t('Enter to confirm')}
       >
         <PrimaryButton disabled={!value.trim()} isLast={isLast} onClick={commit} />
       </Footer>
@@ -581,16 +586,16 @@ export function AskUserQuestionMenu({
       <div className="flex items-start justify-between gap-2 border-b border-agent-border px-3 py-2">
         <div className="min-w-0 flex-1">
           <p className="text-xs font-medium text-agent-foreground">
-            {intro || '需要你的输入'}
+            {intro || t('Your input is needed')}
           </p>
           <p className="mt-0.5 text-[11px] text-agent-muted-foreground">
-            问题 {step + 1} / {normalized.length}
+            {t('Question {current} / {total}', { current: step + 1, total: normalized.length })}
             {bottomHint ? ` · ${bottomHint}` : ''}
           </p>
         </div>
         {current.type === 'password' || current.multiSelect ? (
           <span className="rounded-full border border-agent-border px-2 py-0.5 text-[10px] font-medium text-agent-muted-foreground">
-            {current.type === 'password' ? '密码输入' : '可多选'}
+            {current.type === 'password' ? t('Password input') : t('Multiple choice')}
           </span>
         ) : null}
       </div>