@steerable/agent-shell-web 0.6.52 → 0.6.55

package/src/components/settings/SettingsNavMenu.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { t } from '@/i18n';
 
 export interface SettingsNavItem {
   id: string;
@@ -21,10 +22,10 @@ export function SettingsNavMenu({
     <aside
       className="sticky top-0 h-fit w-44 shrink-0 py-1 select-none"
       data-testid="settings-side-nav"
-      aria-label="设置目录导航"
+      aria-label={t('Settings section navigation')}
     >
       <div className="mb-2 px-2.5 text-[11px] font-semibold tracking-wider text-agent-muted-foreground uppercase">
-        设置导航
+        {t('Settings navigation')}
       </div>
       <nav className="space-y-0.5">
         {items.map((item) => {

package/src/components/settings/SettingsSaveButton.tsx

@@ -1,4 +1,5 @@
 import { LuCheck, LuLoaderCircle } from 'react-icons/lu';
+import { t } from '@/i18n';
 
 interface SettingsSaveButtonProps {
   saving: boolean;
@@ -29,7 +30,7 @@ export function SettingsSaveButton({
       ) : savedOk ? (
         <LuCheck className="h-3.5 w-3.5" />
       ) : null}
-      保存
+      {t('Save')}
     </button>
   );
 }

package/src/components/settings/SkillsSettingsPanel.tsx

@@ -5,6 +5,7 @@ import {
   LuLoaderCircle,
   LuTrash2,
 } from 'react-icons/lu';
+import { t } from '@/i18n';
 import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
 import { getPackHiddenSlashSkills } from '@/packs/registry';
 
@@ -68,7 +69,7 @@ export function SkillsSettingsPanel() {
       });
       setSkills(res.skills || []);
     } catch (err) {
-      console.error('获取技能列表失败:', err);
+      console.error('Failed to load skill list:', err);
       setError(err instanceof Error ? err.message : String(err));
     } finally {
       setSkillsLoading(false);
@@ -84,20 +85,20 @@ export function SkillsSettingsPanel() {
     try {
       const bridge = getElectronBridge();
       if (bridge?.local?.selectDirectory) {
-        setImportStatus('正在打开文件夹选择器...');
+        setImportStatus(t('Opening folder picker...'));
         const result = await bridge.local.selectDirectory();
         if (result && !result.canceled && result.filePaths.length > 0) {
           const selectedPath = result.filePaths[0];
           setImportPath(selectedPath);
-          setImportStatus(`已选择路径: ${selectedPath}`);
+          setImportStatus(t('Selected path: {path}', { path: selectedPath }));
         } else {
-          setImportStatus('已取消选择文件夹');
+          setImportStatus(t('Folder selection canceled'));
         }
       } else {
-        setError('当前版本的客户端不支持文件夹选择器');
+        setError(t('This version of the app does not support the folder picker'));
       }
     } catch (err) {
-      console.error('选择文件夹失败:', err);
+      console.error('Failed to select folder:', err);
       setError(err instanceof Error ? err.message : String(err));
     }
   };
@@ -107,7 +108,7 @@ export function SkillsSettingsPanel() {
     if (!trimmed) return;
     setImporting(true);
     setError(null);
-    setImportStatus('正在导入本地技能...');
+    setImportStatus(t('Importing local skill...'));
     try {
       const res = await getElectronBridge()!.localBackend.request<{ success: boolean; name: string }>({
         method: 'POST',
@@ -116,16 +117,16 @@ export function SkillsSettingsPanel() {
       });
       if (res.success) {
         setImportPath('');
-        setImportStatus(`导入成功! 已添加技能 "${res.name}"`);
+        setImportStatus(t('Import succeeded. Added skill "{name}"', { name: res.name }));
         await fetchSkills();
       } else {
-        setError('导入技能失败');
-        setImportStatus('导入失败: 无法将技能拷贝到运行目录');
+        setError(t('Failed to import skill'));
+        setImportStatus(t('Import failed: could not copy the skill to the runtime directory'));
       }
     } catch (err) {
       const errMsg = err instanceof Error ? err.message : String(err);
       setError(errMsg);
-      setImportStatus(`导入出错: ${errMsg}`);
+      setImportStatus(t('Import error: {error}', { error: errMsg }));
     } finally {
       setImporting(false);
     }
@@ -143,7 +144,7 @@ export function SkillsSettingsPanel() {
       if (res.success) {
         await fetchSkills();
       } else {
-        setError('删除技能失败');
+        setError(t('Failed to delete skill'));
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -158,11 +159,15 @@ export function SkillsSettingsPanel() {
       <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
         <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
           <LuBlocks className="h-3.5 w-3.5 text-agent-muted-foreground" />
-          导入本地技能目录 (Import Local Skill Directory)
+          {t('Import local skill directory')}
         </h4>
         <p className="text-[11px] text-agent-muted-foreground">
-          写到当前项目（或工作目录）下 <code>skills/技能名/</code> 的技能会自动出现在下方列表，无需导入。
-          也可以在这里导入其它本地目录（包含 <code>SKILL.md</code> 的文件夹，例如：<code>my-team/sql-tools</code>）。
+          {t('Skills saved in the current project (or working directory) under')}{' '}
+          <code>skills/{t('skill-name')}/</code>{' '}
+          {t('appear in the list below automatically. No import needed.')}{' '}
+          {t('You can also import other local directories here (any folder with')}{' '}
+          <code>SKILL.md</code> {t('inside, for example')} <code>my-team/sql-tools</code>
+          {t(').')}
         </p>
         <div className="flex gap-2">
           <div className="relative flex-1 flex items-center">
@@ -170,7 +175,7 @@ export function SkillsSettingsPanel() {
               type="text"
               value={importPath}
               onChange={(e) => setImportPath(e.target.value)}
-              placeholder="请输入技能路径，或点击右侧选择文件夹"
+              placeholder={t('Enter a skill path, or click the button on the right to choose a folder')}
               className="w-full pl-3 pr-8 h-8 text-xs bg-agent-canvas text-agent-foreground border border-agent-border rounded-agent-md focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               disabled={importing}
               data-testid="skills-import-path"
@@ -180,7 +185,7 @@ export function SkillsSettingsPanel() {
               onClick={handleBrowseFolder}
               disabled={importing}
               className="absolute right-2.5 text-agent-muted-foreground hover:text-agent-foreground transition-colors"
-              title="选择本地文件夹"
+              title={t('Choose a local folder')}
               data-testid="skills-import-browse"
             >
               <LuFolderOpen className="h-4 w-4" />
@@ -200,7 +205,7 @@ export function SkillsSettingsPanel() {
             {importing ? (
               <LuLoaderCircle className="h-3 w-3 animate-spin" />
             ) : (
-              '导入'
+              t('Import')
             )}
           </button>
         </div>
@@ -217,16 +222,16 @@ export function SkillsSettingsPanel() {
       {/* Skills List */}
       <div className="space-y-2">
         <h4 className="text-xs font-semibold text-agent-muted-foreground uppercase tracking-wide">
-          已加载技能
+          {t('Loaded skills')}
         </h4>
         {skillsLoading ? (
           <div className="flex items-center gap-2 py-4 text-xs text-agent-muted-foreground">
             <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
-            获取已加载技能...
+            {t('Fetching loaded skills...')}
           </div>
         ) : skills.length === 0 ? (
           <div className="text-center py-6 text-xs text-agent-muted-foreground">
-            暂无已加载技能
+            {t('No loaded skills yet')}
           </div>
         ) : (
           <div className="divide-y divide-agent-border/40 pr-1">
@@ -257,38 +262,38 @@ export function SkillsSettingsPanel() {
                       )}
                       {isBuiltin && (
                         <span className="px-1 py-0.2 rounded bg-agent-muted text-[9px] text-agent-muted-foreground font-medium flex-shrink-0 scale-95 origin-left">
-                          内置
+                          {t('Built-in')}
                         </span>
                       )}
                       {isWorkspace && (
                         <span
                           className="px-1 py-0.2 rounded bg-agent-muted text-[9px] text-agent-muted-foreground font-medium flex-shrink-0 scale-95 origin-left"
-                          title="来自项目或工作目录的 skills/ 文件夹，写进去即出现在此列表"
+                          title={t('From the skills/ folder of the project or working directory. Anything saved there appears in this list.')}
                         >
-                          工作区
+                          {t('Workspace')}
                         </span>
                       )}
                       {skill.layer === 'eager' ? (
                         <span
                           className="px-1 py-0.2 rounded bg-agent-muted text-[9px] text-agent-muted-foreground font-medium flex-shrink-0 scale-95 origin-left"
-                          title="常驻层：正文始终注入系统提示词"
+                          title={t('Always-on layer: the body is always injected into the system prompt')}
                         >
-                          常驻
+                          {t('Always on')}
                         </span>
                       ) : (
                         <span
                           className="px-1 py-0.2 rounded bg-agent-muted text-[9px] text-agent-muted-foreground font-medium flex-shrink-0 scale-95 origin-left"
-                          title="按需层：仅在目录中列出，模型经 skill 工具按需加载"
+                          title={t('On-demand layer: only listed in the catalog. The model loads it through the skill tool when needed.')}
                         >
-                          按需
+                          {t('On demand')}
                         </span>
                       )}
                       {skill.modelInvocable === false && (
                         <span
                           className="px-1 py-0.2 rounded bg-agent-muted text-[9px] text-agent-muted-foreground font-medium flex-shrink-0 scale-95 origin-left"
-                          title="disable-model-invocation：模型不可调用，只能用 /名称 手动触发"
+                          title={t('disable-model-invocation: the model cannot call it. Trigger it manually with /name.')}
                         >
-                          仅手动
+                          {t('Manual only')}
                         </span>
                       )}
                     </div>
@@ -304,7 +309,7 @@ export function SkillsSettingsPanel() {
                       onClick={() => handleDeleteSkill(skill.name)}
                       disabled={deletingName === skill.name}
                       className="text-agent-muted-foreground hover:text-agent-destructive p-1 rounded-full hover:bg-agent-muted transition-colors"
-                      title="卸载此技能"
+                      title={t('Uninstall this skill')}
                       data-testid={`skill-uninstall-${skill.name}`}
                     >
                       {deletingName === skill.name ? (

package/src/components/settings/TelemetrySettingsPanel.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { LuLoaderCircle, LuActivity } from 'react-icons/lu';
+import { t } from '@/i18n';
 import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
 
 /**
@@ -70,8 +71,10 @@ export function TelemetrySettingsPanel() {
       setEndpoint(saved.endpoint ?? '');
       setStatus(
         saved.endpoint
-          ? `已保存 — 遥测开启(${saved.privacyMode === 'full' ? '完整(已脱敏)' : '仅元数据'})`
-          : '已保存 — 未配置 collector 地址,遥测保持关闭',
+          ? t('Saved. Telemetry is on ({mode})', {
+              mode: saved.privacyMode === 'full' ? t('Full (redacted)') : t('Metadata only'),
+            })
+          : t('Saved. No collector URL is set, so telemetry stays off'),
       );
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -91,32 +94,32 @@ export function TelemetrySettingsPanel() {
         {loading ? (
           <div className="flex items-center gap-2 py-2 text-xs text-agent-muted-foreground">
             <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
-            读取遥测设置...
+            {t('Loading telemetry settings...')}
           </div>
         ) : (
           <>
             <div className="space-y-1.5">
               <label className="text-[11px] font-medium text-agent-muted-foreground">
-                Collector 地址(/v1/traces)
+                {t('Collector URL (/v1/traces)')}
               </label>
               <input
                 type="text"
                 value={endpoint}
                 onChange={(e) => setEndpoint(e.target.value)}
-                placeholder="http://127.0.0.1:4318/v1/traces(留空 = 关闭遥测)"
+                placeholder={t('http://127.0.0.1:4318/v1/traces (leave blank = telemetry off)')}
                 className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
             </div>
 
             <div className="space-y-1.5">
               <label className="text-[11px] font-medium text-agent-muted-foreground">
-                隐私档位
+                {t('Privacy level')}
               </label>
               <div className="flex gap-2">
                 {(
                   [
-                    { value: 'metadata', label: '仅元数据', hint: '结构/时延/状态,不含内容' },
-                    { value: 'full', label: '完整(已脱敏)', hint: '含 payload,密钥已打码' },
+                    { value: 'metadata', label: 'Metadata only', hint: 'Structure, latency, and status. No content.' },
+                    { value: 'full', label: 'Full (redacted)', hint: 'Includes payloads. Secrets are masked.' },
                   ] as const
                 ).map((opt) => (
                   <button
@@ -129,8 +132,8 @@ export function TelemetrySettingsPanel() {
                         : 'border-agent-border bg-agent-canvas hover:bg-agent-muted/40'
                     }`}
                   >
-                    <div className="text-xs font-medium text-agent-foreground">{opt.label}</div>
-                    <div className="text-[10px] text-agent-muted-foreground">{opt.hint}</div>
+                    <div className="text-xs font-medium text-agent-foreground">{t(opt.label)}</div>
+                    <div className="text-[10px] text-agent-muted-foreground">{t(opt.hint)}</div>
                   </button>
                 ))}
               </div>
@@ -138,7 +141,7 @@ export function TelemetrySettingsPanel() {
 
             <div className="flex items-center justify-between gap-2">
               <p className="text-[10px] text-agent-muted-foreground">
-                无论哪一档,密钥/令牌在导出前都会被脱敏;留空地址则完全不导出。
+                {t('At either level, keys and tokens are redacted before export. Leave the URL blank to export nothing.')}
               </p>
               <button
                 type="button"
@@ -150,7 +153,7 @@ export function TelemetrySettingsPanel() {
                     : 'bg-agent-foreground text-agent-canvas hover:opacity-90'
                 }`}
               >
-                {saving ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : '保存'}
+                {saving ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : t('Save')}
               </button>
             </div>
 

package/src/components/settings/UsagePanel.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { LuLoaderCircle, LuChartBar, LuRefreshCw } from 'react-icons/lu';
+import { t } from '@/i18n';
 import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
 
 /**
@@ -40,11 +41,7 @@ interface UsageSummaryWire {
   };
 }
 
-const WINDOW_OPTIONS = [
-  { days: 7, label: '近 7 天' },
-  { days: 30, label: '近 30 天' },
-  { days: 90, label: '近 90 天' },
-] as const;
+const WINDOW_OPTIONS = [{ days: 7 }, { days: 30 }, { days: 90 }] as const;
 
 function formatTokens(n: number): string {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
@@ -95,7 +92,7 @@ export function UsagePanel() {
         <div className="flex items-center justify-between">
           <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
             <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
-            用量与成本
+            {t('Usage and cost')}
           </h4>
           <div className="flex items-center gap-1.5">
             {WINDOW_OPTIONS.map((opt) => (
@@ -109,7 +106,7 @@ export function UsagePanel() {
                     : 'bg-agent-canvas text-agent-muted-foreground border border-agent-border hover:bg-agent-muted/40'
                 }`}
               >
-                {opt.label}
+                {t('Last {days} days', { days: opt.days })}
               </button>
             ))}
             <button
@@ -117,7 +114,7 @@ export function UsagePanel() {
               onClick={() => void fetchSummary(days)}
               disabled={loading}
               className="h-6 w-6 rounded-full border border-agent-border bg-agent-canvas text-agent-muted-foreground hover:bg-agent-muted/40 flex items-center justify-center"
-              title="刷新"
+              title={t('Refresh')}
             >
               <LuRefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
             </button>
@@ -127,30 +124,30 @@ export function UsagePanel() {
         {loading && !summary ? (
           <div className="flex items-center gap-2 py-4 text-xs text-agent-muted-foreground">
             <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
-            读取用量...
+            {t('Loading usage...')}
           </div>
         ) : !summary || summary.byModel.length === 0 ? (
           <p className="text-[11px] text-agent-muted-foreground py-2">
-            该时间窗内暂无用量记录。完成一轮对话后,这里会按模型聚合 token 与成本。
+            {t('No usage in this time window yet. After a conversation turn finishes, tokens and cost are grouped by model here.')}
           </p>
         ) : (
           <>
             {/* 总计卡片 */}
             <div className="grid grid-cols-4 gap-2">
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
-                <div className="text-[10px] text-agent-muted-foreground">总轮次</div>
+                <div className="text-[10px] text-agent-muted-foreground">{t('Total turns')}</div>
                 <div className="text-xs font-semibold text-agent-foreground">{summary.totals.turns}</div>
               </div>
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
-                <div className="text-[10px] text-agent-muted-foreground">总 Token</div>
+                <div className="text-[10px] text-agent-muted-foreground">{t('Total tokens')}</div>
                 <div className="text-xs font-semibold text-agent-foreground">{formatTokens(summary.totals.totalTokens)}</div>
               </div>
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
-                <div className="text-[10px] text-agent-muted-foreground">缓存命中</div>
+                <div className="text-[10px] text-agent-muted-foreground">{t('Cache hits')}</div>
                 <div className="text-xs font-semibold text-agent-foreground">{formatTokens(summary.totals.cachedPromptTokens)}</div>
               </div>
               <div className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-2">
-                <div className="text-[10px] text-agent-muted-foreground">估算成本</div>
+                <div className="text-[10px] text-agent-muted-foreground">{t('Estimated cost')}</div>
                 <div className="text-xs font-semibold text-agent-foreground">{formatCost(summary.totals.costUsd)}</div>
               </div>
             </div>
@@ -160,11 +157,11 @@ export function UsagePanel() {
               <table className="w-full text-[11px]">
                 <thead>
                   <tr className="bg-agent-muted/40 text-agent-muted-foreground">
-                    <th className="text-left font-medium px-2.5 py-1.5">模型</th>
-                    <th className="text-right font-medium px-2.5 py-1.5">轮次</th>
-                    <th className="text-right font-medium px-2.5 py-1.5">输入</th>
-                    <th className="text-right font-medium px-2.5 py-1.5">输出</th>
-                    <th className="text-right font-medium px-2.5 py-1.5">成本</th>
+                    <th className="text-left font-medium px-2.5 py-1.5">{t('Model')}</th>
+                    <th className="text-right font-medium px-2.5 py-1.5">{t('Turns')}</th>
+                    <th className="text-right font-medium px-2.5 py-1.5">{t('Input')}</th>
+                    <th className="text-right font-medium px-2.5 py-1.5">{t('Output')}</th>
+                    <th className="text-right font-medium px-2.5 py-1.5">{t('Cost')}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -184,7 +181,9 @@ export function UsagePanel() {
             </div>
 
             <p className="text-[10px] text-agent-muted-foreground">
-              成本按 framework 单价表估算后按约 1 美元 = 7.2 元换算为人民币,只统计有单价的模型;"—" 表示该模型无单价(本地/未知)。缓存命中为命中 prompt 缓存的 token 数。
+              {t(
+                'Cost is estimated from the framework price table and converted to RMB at about 1 USD = 7.2 CNY. Only models with a price are counted; "—" means the model has no price (local or unknown). Cache hits are the tokens served from the prompt cache.',
+              )}
             </p>
           </>
         )}

package/src/components/settings/WebSearchSettingsPanel.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { LuLoaderCircle, LuSearch } from 'react-icons/lu';
+import { t } from '@/i18n';
 import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
 
 /**
@@ -71,11 +72,15 @@ export function WebSearchSettingsPanel() {
       setProvider(nextProvider);
       setApiKey(saved?.apiKey ?? '');
       if (nextProvider === 'ddg') {
-        setStatus('已保存 — 重启应用后 sidecar 会注册免费搜索（DuckDuckGo）');
+        setStatus(t('Saved. After you restart the app, the sidecar registers free search (DuckDuckGo).'));
       } else if (saved?.apiKey) {
-        setStatus('已保存 — 重启应用后 sidecar 会注册 web_search');
+        setStatus(t('Saved. After you restart the app, the sidecar registers web_search.'));
       } else {
-        setStatus('已保存 — 未配置则模型没有搜索工具（OpenAI 可用聊天凭证走托管搜索）');
+        setStatus(
+          t(
+            'Saved. Without a key the model has no search tool (OpenAI can use the chat credentials for hosted search).',
+          ),
+        );
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -89,25 +94,25 @@ export function WebSearchSettingsPanel() {
       <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2">
         <h4 className="text-xs font-semibold text-agent-foreground flex items-center gap-1.5">
           <LuSearch className="h-3.5 w-3.5 text-agent-muted-foreground" />
-          网络搜索
+          {t('Web search')}
         </h4>
 
         {loading ? (
           <div className="flex items-center gap-2 py-2 text-xs text-agent-muted-foreground">
             <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
-            读取搜索设置...
+            {t('Loading search settings...')}
           </div>
         ) : (
           <>
             <div className="space-y-1.5">
               <label className="text-[11px] font-medium text-agent-muted-foreground">
-                搜索后端
+                {t('Search backend')}
               </label>
               <div className="flex gap-2">
                 {(
                   [
-                    { value: 'ddg', label: '免费', hint: 'DuckDuckGo，无需 Key' },
-                    { value: 'tavily', label: 'Tavily', hint: '需 API Key，结果更稳' },
+                    { value: 'ddg', label: 'Free', hint: 'DuckDuckGo, no key needed' },
+                    { value: 'tavily', label: 'Tavily', hint: 'Needs an API key, more reliable results' },
                   ] as const
                 ).map((opt) => (
                   <button
@@ -121,8 +126,8 @@ export function WebSearchSettingsPanel() {
                         : 'border-agent-border bg-agent-canvas hover:bg-agent-muted/40'
                     }`}
                   >
-                    <div className="text-xs font-medium text-agent-foreground">{opt.label}</div>
-                    <div className="text-[10px] text-agent-muted-foreground">{opt.hint}</div>
+                    <div className="text-xs font-medium text-agent-foreground">{t(opt.label)}</div>
+                    <div className="text-[10px] text-agent-muted-foreground">{t(opt.hint)}</div>
                   </button>
                 ))}
               </div>
@@ -137,7 +142,7 @@ export function WebSearchSettingsPanel() {
                   type="password"
                   value={apiKey}
                   onChange={(e) => setApiKey(e.target.value)}
-                  placeholder="tvly-...（留空 = 不注册 Tavily）"
+                  placeholder={t('tvly-... (leave blank = do not register Tavily)')}
                   className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
                   autoComplete="off"
                 />
@@ -147,8 +152,12 @@ export function WebSearchSettingsPanel() {
             <div className="flex items-center justify-between gap-2">
               <p className="text-[10px] text-agent-muted-foreground">
                 {provider === 'ddg'
-                  ? '免费后端走 DuckDuckGo 公开搜索页，无需 Key。质量与稳定性不如 Tavily；国内网络可能需要系统代理。Harbor 评测仍关闭网络工具。'
-                  : 'GLM / OpenRouter / DeepSeek 需要这把钥；OpenAI（api.openai.com）可用聊天凭证走托管搜索，不必另配。Harbor 评测仍关闭网络工具。'}
+                  ? t(
+                      'The free backend uses the public DuckDuckGo search page and needs no key. Quality and reliability are lower than Tavily, and networks in mainland China may need a system proxy. Harbor evaluations still turn off network tools.',
+                    )
+                  : t(
+                      'GLM / OpenRouter / DeepSeek need this key. OpenAI (api.openai.com) can use the chat credentials for hosted search with no extra setup. Harbor evaluations still turn off network tools.',
+                    )}
               </p>
               <button
                 type="button"
@@ -160,7 +169,7 @@ export function WebSearchSettingsPanel() {
                     : 'bg-agent-foreground text-agent-canvas hover:opacity-90'
                 }`}
               >
-                {saving ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : '保存'}
+                {saving ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : t('Save')}
               </button>
             </div>
 

package/src/components/settings/llm-vendors.ts

@@ -3,6 +3,7 @@
  * 常用置顶、中文标签、以及 sidecar 未就绪时的本地回退。
  */
 
+import { t } from '@/i18n';
 import type {
   CatalogProviderDescriptor,
   GatewayModelEntry,
@@ -42,14 +43,14 @@ export const VENDOR_LABELS: Record<string, string> = {
   anthropic: 'Anthropic',
   google: 'Google Gemini',
   openrouter: 'OpenRouter',
-  'alibaba-cn': '阿里云百炼',
-  'moonshotai-cn': '月之暗面 Kimi',
-  zhipuai: '智谱 GLM',
+  'alibaba-cn': 'Alibaba Cloud Model Studio',
+  'moonshotai-cn': 'Moonshot AI Kimi',
+  zhipuai: 'Zhipu GLM',
   groq: 'Groq',
   xai: 'xAI',
   lmstudio: 'LM Studio',
-  ollama: 'Ollama (本地)',
-  custom: '自定义 OpenAI 兼容',
+  ollama: 'Ollama (local)',
+  custom: 'Custom OpenAI-compatible',
 };
 
 /** sidecar 未就绪时仍能选常用服务商。 */
@@ -155,7 +156,8 @@ const LOCAL_VENDORS: VendorOption[] = [
 ];
 
 export function vendorLabel(id: string): string {
-  return VENDOR_LABELS[id] ?? id;
+  const label = VENDOR_LABELS[id];
+  return label ? t(label) : id;
 }
 
 export function llmProviderFromWireKind(wireKind: string): LlmProvider {
@@ -190,7 +192,10 @@ export function mergeVendorOptions(catalog: CatalogProviderDescriptor[]): Vendor
     featured: featured.has(row.id),
   }));
   const seen = new Set(fromCatalog.map((v) => v.id));
-  const extras = LOCAL_VENDORS.filter((v) => !seen.has(v.id));
+  const extras = LOCAL_VENDORS.filter((v) => !seen.has(v.id)).map((v) => ({
+    ...v,
+    label: vendorLabel(v.id),
+  }));
   const featuredOrder = [...FEATURED_VENDOR_IDS, 'ollama', 'custom'];
   const rank = (id: string) => {
     const idx = featuredOrder.indexOf(id);