@steerable/agent-shell-web 0.6.53 → 0.6.55

package/src/components/settings/McpSettingsPanel.tsx

@@ -9,6 +9,7 @@ import {
   LuToggleRight,
   LuTrash2,
 } from 'react-icons/lu';
+import { t } from '@/i18n';
 import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
 
 /**
@@ -77,7 +78,7 @@ export function McpSettingsPanel() {
       });
       setMcpServers(res.servers || []);
     } catch (err) {
-      console.error('获取 MCP 服务列表失败:', err);
+      console.error('Failed to load MCP server list:', err);
       setError(err instanceof Error ? err.message : String(err));
     } finally {
       setMcpLoading(false);
@@ -228,7 +229,7 @@ export function McpSettingsPanel() {
         path: `/api/v2/mcp/servers/${encodeURIComponent(server.id)}/test`,
       });
       if (!res.success && res.error) {
-        setError(`「${server.name}」连接失败：${res.error}`);
+        setError(t('"{name}" failed to connect: {error}', { name: server.name, error: res.error }));
       }
       await fetchMcpServers();
     } catch (err) {
@@ -253,9 +254,23 @@ export function McpSettingsPanel() {
         body: { json },
       });
       const parts: string[] = [];
-      if (res.added.length > 0) parts.push(`已导入 ${res.added.length} 个：${res.added.map((s) => s.name).join('、')}`);
-      if (res.skipped.length > 0) parts.push(`跳过 ${res.skipped.length} 个（重名或缺 command）：${res.skipped.join('、')}`);
-      setMcpImportStatus(parts.join('；') || '没有可导入的服务');
+      if (res.added.length > 0) {
+        parts.push(
+          t('Imported {count}: {names}', {
+            count: res.added.length,
+            names: res.added.map((s) => s.name).join(t(', ')),
+          }),
+        );
+      }
+      if (res.skipped.length > 0) {
+        parts.push(
+          t('Skipped {count} (duplicate name or missing command): {names}', {
+            count: res.skipped.length,
+            names: res.skipped.join(t(', ')),
+          }),
+        );
+      }
+      setMcpImportStatus(parts.join(t('; ')) || t('No servers to import'));
       if (res.added.length > 0) setMcpImportJson('');
       await fetchMcpServers();
     } catch (err) {
@@ -271,7 +286,7 @@ export function McpSettingsPanel() {
       <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">
           <LuPlug className="h-3.5 w-3.5 text-agent-muted-foreground" />
-          粘贴 JSON 导入 (Claude Desktop 格式)
+          {t('Paste JSON to import (Claude Desktop format)')}
         </h4>
         <textarea
           value={mcpImportJson}
@@ -283,7 +298,7 @@ export function McpSettingsPanel() {
         />
         <div className="flex items-center justify-between gap-2">
           <p className="text-[10px] text-agent-muted-foreground">
-            与 Claude Desktop / Cursor 的 mcpServers 配置格式一致，可整段粘贴。
+            {t('Same mcpServers format as Claude Desktop / Cursor. You can paste the whole block.')}
           </p>
           <button
             type="button"
@@ -295,7 +310,7 @@ export function McpSettingsPanel() {
                 : 'bg-agent-foreground text-agent-canvas hover:opacity-90'
             }`}
           >
-            {mcpImporting ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : '导入'}
+            {mcpImporting ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : t('Import')}
           </button>
         </div>
         {mcpImportStatus && (
@@ -309,7 +324,7 @@ export function McpSettingsPanel() {
       {mcpFormOpen ? (
         <div className="bg-agent-muted/30 border border-agent-border/60 rounded-agent-md p-2.5 space-y-2.5">
           <h4 className="text-xs font-semibold text-agent-foreground">
-            {mcpEditingId ? '编辑 MCP 服务' : '手动添加 MCP 服务'}
+            {mcpEditingId ? t('Edit MCP server') : t('Add MCP server manually')}
           </h4>
           <select
             value={mcpFormTransport}
@@ -318,15 +333,15 @@ export function McpSettingsPanel() {
             }
             className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
           >
-            <option value="stdio">本地进程（stdio）</option>
-            <option value="streamable-http">远程服务（Streamable HTTP）</option>
+            <option value="stdio">{t('Local process (stdio)')}</option>
+            <option value="streamable-http">{t('Remote server (Streamable HTTP)')}</option>
           </select>
           <div className="grid grid-cols-2 gap-2">
             <input
               type="text"
               value={mcpFormName}
               onChange={(e) => setMcpFormName(e.target.value)}
-              placeholder="名称，如 filesystem"
+              placeholder={t('Name, e.g. filesystem')}
               className="h-8 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
             />
             {mcpFormTransport === 'stdio' ? (
@@ -334,7 +349,7 @@ export function McpSettingsPanel() {
                 type="text"
                 value={mcpFormCommand}
                 onChange={(e) => setMcpFormCommand(e.target.value)}
-                placeholder="启动命令，如 npx / uvx / node"
+                placeholder={t('Launch command, e.g. npx / uvx / node')}
                 className="h-8 rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
             ) : (
@@ -352,14 +367,18 @@ export function McpSettingsPanel() {
               <textarea
                 value={mcpFormArgs}
                 onChange={(e) => setMcpFormArgs(e.target.value)}
-                placeholder="参数（每行一个）"
+                placeholder={t('Arguments (one per line)')}
                 rows={3}
                 className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
               <textarea
                 value={mcpFormEnv}
                 onChange={(e) => setMcpFormEnv(e.target.value)}
-                placeholder={mcpEditingId ? '环境变量；留空保留现有值' : '环境变量（每行 KEY=VALUE）'}
+                placeholder={
+                  mcpEditingId
+                    ? t('Environment variables; leave blank to keep current values')
+                    : t('Environment variables (one KEY=VALUE per line)')
+                }
                 rows={2}
                 className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
@@ -367,7 +386,7 @@ export function McpSettingsPanel() {
                 type="text"
                 value={mcpFormCwd}
                 onChange={(e) => setMcpFormCwd(e.target.value)}
-                placeholder="工作目录（可选）"
+                placeholder={t('Working directory (optional)')}
                 className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
             </>
@@ -376,14 +395,18 @@ export function McpSettingsPanel() {
               <textarea
                 value={mcpFormHeaders}
                 onChange={(e) => setMcpFormHeaders(e.target.value)}
-                placeholder={mcpEditingId ? '普通请求头；留空保留现有值' : '普通请求头（每行 Header=Value）'}
+                placeholder={
+                  mcpEditingId
+                    ? t('Plain headers; leave blank to keep current values')
+                    : t('Plain headers (one Header=Value per line)')
+                }
                 rows={2}
                 className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
               <textarea
                 value={mcpFormHeadersFromEnv}
                 onChange={(e) => setMcpFormHeadersFromEnv(e.target.value)}
-                placeholder="环境变量请求头（每行 Header=ENV_NAME）"
+                placeholder={t('Headers from environment variables (one Header=ENV_NAME per line)')}
                 rows={2}
                 className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 font-mono text-[11px] text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
@@ -391,7 +414,7 @@ export function McpSettingsPanel() {
                 type="text"
                 value={mcpFormBearerEnv}
                 onChange={(e) => setMcpFormBearerEnv(e.target.value)}
-                placeholder="Bearer token 环境变量名（可选）"
+                placeholder={t('Bearer token environment variable name (optional)')}
                 className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
               />
             </>
@@ -402,7 +425,7 @@ export function McpSettingsPanel() {
               onClick={() => { resetMcpForm(); setMcpFormOpen(false); }}
               className="h-8 rounded-full px-4 text-xs font-medium text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
             >
-              取消
+              {t('Cancel')}
             </button>
             <button
               type="button"
@@ -424,7 +447,7 @@ export function McpSettingsPanel() {
                   : 'bg-agent-foreground text-agent-canvas hover:opacity-90'
               }`}
             >
-              {mcpSaving ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : '保存'}
+              {mcpSaving ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : t('Save')}
             </button>
           </div>
         </div>
@@ -436,23 +459,23 @@ export function McpSettingsPanel() {
           data-testid="mcp-add-manual"
         >
           <LuPlus className="h-3.5 w-3.5" />
-          手动添加服务
+          {t('Add server manually')}
         </button>
       )}
 
       {/* 服务列表 */}
       <div className="space-y-2">
         <h4 className="text-xs font-semibold text-agent-muted-foreground uppercase tracking-wide">
-          已注册服务
+          {t('Registered servers')}
         </h4>
         {mcpLoading ? (
           <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" />
-            获取 MCP 服务...
+            {t('Loading MCP servers...')}
           </div>
         ) : mcpServers.length === 0 ? (
           <div className="text-center py-6 text-xs text-agent-muted-foreground">
-            暂无 MCP 服务，粘贴 JSON 或手动添加
+            {t('No MCP servers yet. Paste JSON or add one manually.')}
           </div>
         ) : (
           <div className="divide-y divide-agent-border/40 pr-1">
@@ -471,11 +494,11 @@ export function McpSettingsPanel() {
                           : 'bg-agent-muted text-agent-muted-foreground'
                       }`}
                     >
-                      {server.enabled ? '已启用' : '已停用'}
+                      {server.enabled ? t('Enabled') : t('Disabled')}
                     </span>
                     {server.enabled && server.toolCount > 0 && (
                       <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">
-                        {server.toolCount} 个工具
+                        {t('{count} tools', { count: server.toolCount })}
                       </span>
                     )}
                   </div>
@@ -486,12 +509,13 @@ export function McpSettingsPanel() {
                   </p>
                   {server.lastError && (
                     <p className="text-[10px] text-agent-destructive line-clamp-2">
-                      连接失败：{server.lastError}
+                      {t('Connection failed: {error}', { error: server.lastError })}
                     </p>
                   )}
                   {!server.lastError && server.toolsPreview.length > 0 && (
                     <p className="text-[10px] text-agent-muted-foreground/80 line-clamp-1">
-                      工具：{server.toolsPreview.join('、')}{server.toolCount > server.toolsPreview.length ? ' …' : ''}
+                      {t('Tools: {names}', { names: server.toolsPreview.join(t(', ')) })}
+                      {server.toolCount > server.toolsPreview.length ? ' …' : ''}
                     </p>
                   )}
                 </div>
@@ -501,7 +525,7 @@ export function McpSettingsPanel() {
                     onClick={() => handleTestMcpServer(server)}
                     disabled={mcpTestingId === server.id}
                     className="text-agent-muted-foreground hover:text-agent-foreground p-1 rounded-full hover:bg-agent-muted transition-colors"
-                    title="测试连接并刷新工具列表"
+                    title={t('Test connection and refresh tool list')}
                   >
                     {mcpTestingId === server.id ? (
                       <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
@@ -513,7 +537,7 @@ export function McpSettingsPanel() {
                     type="button"
                     onClick={() => handleEditMcpServer(server)}
                     className="text-agent-muted-foreground hover:text-agent-foreground p-1 rounded-full hover:bg-agent-muted transition-colors"
-                    title="编辑"
+                    title={t('Edit')}
                   >
                     <LuPencil className="h-3.5 w-3.5" />
                   </button>
@@ -521,7 +545,7 @@ export function McpSettingsPanel() {
                     type="button"
                     onClick={() => handleToggleMcpServer(server)}
                     className="text-agent-muted-foreground hover:text-agent-foreground p-1 rounded-full hover:bg-agent-muted transition-colors"
-                    title={server.enabled ? '停用' : '启用'}
+                    title={server.enabled ? t('Disable') : t('Enable')}
                   >
                     {server.enabled ? (
                       <LuToggleRight className="h-3.5 w-3.5" />
@@ -534,7 +558,7 @@ export function McpSettingsPanel() {
                     onClick={() => handleDeleteMcpServer(server)}
                     disabled={mcpDeletingId === server.id}
                     className="text-agent-muted-foreground hover:text-agent-destructive p-1 rounded-full hover:bg-agent-muted transition-colors"
-                    title="删除"
+                    title={t('Delete')}
                   >
                     {mcpDeletingId === server.id ? (
                       <LuLoaderCircle className="h-3 w-3 animate-spin" />
@@ -549,7 +573,9 @@ export function McpSettingsPanel() {
         )}
       </div>
       <p className="text-[10px] text-agent-muted-foreground">
-        支持 stdio 与 Streamable HTTP。密钥请填写环境变量名，不要写进普通请求头；已启用服务的工具通过 tool_search 提供给助手。
+        {t(
+          'Supports stdio and Streamable HTTP. Enter secrets as environment variable names, not in plain headers. Tools from enabled servers reach the assistant through tool_search.',
+        )}
       </p>
 
       {error && (

package/src/components/settings/ModelIdCombobox.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { LuChevronDown } from 'react-icons/lu';
+import { t } from '@/i18n';
 import { ModelCapabilityChips } from '@/components/settings/ModelCapabilityChips';
 import type { ModelPickerRow } from '@/components/settings/llm-vendors';
 
@@ -164,7 +165,7 @@ export function ModelIdCombobox({
       <button
         type="button"
         tabIndex={-1}
-        aria-label="打开模型列表"
+        aria-label={t('Open model list')}
         onClick={() => {
           if (open) setOpen(false);
           else show();

package/src/components/settings/OrchestrationSettingsPanel.tsx

@@ -1,5 +1,6 @@
 import { LuGitFork } from 'react-icons/lu';
 import { useOrchestrationSetting } from '@/lib/orchestration-settings';
+import { t } from '@/i18n';
 
 /**
  * OrchestrationSettingsPanel — 多智能体协同编排设置面板。
@@ -17,10 +18,12 @@ export function OrchestrationSettingsPanel() {
         <div className="space-y-1">
           <div className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
             <LuGitFork className="h-3.5 w-3.5 text-violet-600 dark:text-violet-400" />
-            <span>多智能体协同编排 (Fork-Join)</span>
+            <span>{t('Multi-agent orchestration (Fork-Join)')}</span>
           </div>
           <p className="text-xs leading-relaxed text-agent-muted-foreground">
-            允许主智能体通过派生子任务（agent_spawn）并行推理计算，并在输入框上方呈现流程图与实时协同进度看板。
+            {t(
+              'Let the main agent spawn subtasks (agent_spawn) to reason in parallel, and show a flow chart and live progress board above the input box.',
+            )}
           </p>
         </div>
 
@@ -28,7 +31,7 @@ export function OrchestrationSettingsPanel() {
         <div
           className="flex shrink-0 rounded-full border border-agent-border bg-agent-canvas p-0.5"
           role="radiogroup"
-          aria-label="多智能体协同编排功能开关"
+          aria-label={t('Multi-agent orchestration toggle')}
         >
           <button
             type="button"
@@ -42,7 +45,7 @@ export function OrchestrationSettingsPanel() {
                 : 'text-agent-muted-foreground hover:text-agent-foreground',
             ].join(' ')}
           >
-            开启
+            {t('On')}
           </button>
           <button
             type="button"
@@ -56,7 +59,7 @@ export function OrchestrationSettingsPanel() {
                 : 'text-agent-muted-foreground hover:text-agent-foreground',
             ].join(' ')}
           >
-            关闭
+            {t('Off')}
           </button>
         </div>
       </div>