@steerable/agent-shell-web 0.6.53 → 0.6.56

package/src/components/settings/AgentsSettingsPanel.tsx

@@ -6,7 +6,8 @@ import {
   LuTrash2,
 } from 'react-icons/lu';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { isElectron } from '@/lib/electron-bridge';
+import { t } from '@/i18n';
+import { hasHostBridge } from '@/lib/host-bridge';
 import {
   archiveChatAgent,
   createChatAgent,
@@ -61,15 +62,15 @@ function agentInitial(agent: LocalChatAgent): string {
 function capabilitySummary(agent: LocalChatAgent): string[] {
   const labels: string[] = [];
   const skillCount = agent.skillIds?.length ?? 0;
-  if (skillCount > 0) labels.push(`技能 ${skillCount}`);
-  if (agent.allowExternalSkills === false) labels.push('仅限所选技能');
-  if (agent.loadAllSkills) labels.push('全部技能');
+  if (skillCount > 0) labels.push(t('Skills {count}', { count: skillCount }));
+  if (agent.allowExternalSkills === false) labels.push(t('Selected skills only'));
+  if (agent.loadAllSkills) labels.push(t('All skills'));
   const policy = agent.toolPolicy;
   if (policy && policy.mode !== 'all' && policy.tools.length > 0) {
     labels.push(
       policy.mode === 'allowlist'
-        ? `仅 ${policy.tools.length} 个工具`
-        : `禁用 ${policy.tools.length} 个工具`,
+        ? t('Only {count} tools', { count: policy.tools.length })
+        : t('{count} tools blocked', { count: policy.tools.length }),
     );
   }
   return labels;
@@ -100,7 +101,7 @@ export function AgentsSettingsPanel({
   const [error, setError] = useState<string | null>(null);
 
   const fetchAgents = useCallback(async () => {
-    if (!isElectron()) return;
+    if (!hasHostBridge()) return;
     setLoading(true);
     setError(null);
     try {
@@ -150,7 +151,7 @@ export function AgentsSettingsPanel({
 
   const handleSave = async () => {
     const trimmedName = name.trim();
-    if (!trimmedName || !isElectron()) return;
+    if (!trimmedName || !hasHostBridge()) return;
     setSaving(true);
     setError(null);
     try {
@@ -158,7 +159,7 @@ export function AgentsSettingsPanel({
         name: trimmedName,
         color,
         description: description.trim() || null,
-        rolePrompt: rolePrompt.trim() || `你是 **${trimmedName}**。`,
+        rolePrompt: rolePrompt.trim() || t('You are **{name}**.', { name: trimmedName }),
         skillIds: capability.skillIds,
         allowExternalSkills: capability.allowExternalSkills,
         loadAllSkills: capability.loadAllSkills,
@@ -203,20 +204,21 @@ export function AgentsSettingsPanel({
   return (
     <div className="space-y-3">
       <p className="text-[11px] text-agent-muted-foreground">
-        自定义智能体会出现在输入框上方的专家选择器里。角色设定会作为对话的人设前言，
-        勾选的技能与工具权限在每一轮真实生效。内置智能体可以改文案和能力，但不能删除。
+        {t(
+          'Custom agents appear in the expert picker above the input box. The role prompt opens the conversation as its persona, and the checked skills and tool permissions apply on every turn. Built-in agents can have their text and capabilities edited, but cannot be deleted.',
+        )}
       </p>
 
       {formOpen ? (
         <div className="space-y-2 rounded-agent-md border border-agent-border/60 bg-agent-muted/30 p-2.5">
           <h4 className="text-xs font-semibold text-agent-foreground">
-            {editingId ? '编辑智能体' : '新建智能体'}
+            {editingId ? t('Edit agent') : t('New agent')}
           </h4>
           <input
             type="text"
             value={name}
             onChange={(event) => setName(event.target.value)}
-            placeholder="名称，如 地质顾问"
+            placeholder={t('Name, e.g. Geology advisor')}
             maxLength={40}
             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"
             data-testid="agent-form-name"
@@ -225,13 +227,13 @@ export function AgentsSettingsPanel({
             type="text"
             value={description}
             onChange={(event) => setDescription(event.target.value)}
-            placeholder="一句话简介（可选）"
+            placeholder={t('One-line summary (optional)')}
             maxLength={200}
             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"
             data-testid="agent-form-description"
           />
           <div>
-            <p className="mb-1.5 text-[10px] font-medium text-agent-muted-foreground">颜色</p>
+            <p className="mb-1.5 text-[10px] font-medium text-agent-muted-foreground">{t('Color')}</p>
             <div className="flex flex-wrap gap-1.5" data-testid="agent-form-colors">
               {AGENT_COLORS.map((item) => (
                 <button
@@ -245,7 +247,7 @@ export function AgentsSettingsPanel({
                   }`}
                   style={{ backgroundColor: item }}
                   title={item}
-                  aria-label={`颜色 ${item}`}
+                  aria-label={t('Color {color}', { color: item })}
                 />
               ))}
             </div>
@@ -253,7 +255,7 @@ export function AgentsSettingsPanel({
           <textarea
             value={rolePrompt}
             onChange={(event) => setRolePrompt(event.target.value)}
-            placeholder="角色设定。例如：你是地质顾问，回答简洁，先给结论再给依据。"
+            placeholder={t('Role prompt. For example: You are a geology advisor. Answer concisely, giving the conclusion first and then the evidence.')}
             rows={6}
             className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
             data-testid="agent-form-role"
@@ -268,7 +270,7 @@ export function AgentsSettingsPanel({
               }}
               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"
@@ -281,7 +283,7 @@ export function AgentsSettingsPanel({
                   : '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>
         </div>
@@ -293,13 +295,13 @@ export function AgentsSettingsPanel({
           data-testid="agent-add"
         >
           <LuPlus className="h-3.5 w-3.5" />
-          添加智能体
+          {t('Add agent')}
         </button>
       )}
 
       <div className="space-y-2">
         <h4 className="text-xs font-semibold uppercase tracking-wide text-agent-muted-foreground">
-          已有智能体
+          {t('Existing agents')}
           {agents.length > 0 && (
             <span className="ml-1.5 font-normal normal-case">· {agents.length}</span>
           )}
@@ -307,11 +309,11 @@ export function AgentsSettingsPanel({
         {loading ? (
           <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 agents...')}
           </div>
         ) : agents.length === 0 ? (
           <div className="py-6 text-center text-xs text-agent-muted-foreground">
-            暂无智能体
+            {t('No agents yet')}
           </div>
         ) : (
           <div className="divide-y divide-agent-border/40 pr-1">
@@ -334,7 +336,7 @@ export function AgentsSettingsPanel({
                     </span>
                     {agent.isBuiltin && (
                       <span className="flex-shrink-0 rounded bg-agent-muted px-1 py-0.5 text-[9px] font-medium text-agent-muted-foreground">
-                        内置
+                        {t('Built-in')}
                       </span>
                     )}
                   </div>
@@ -364,7 +366,7 @@ export function AgentsSettingsPanel({
                     type="button"
                     onClick={() => openEdit(agent)}
                     className="rounded-full p-1 text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
-                    title="编辑"
+                    title={t('Edit')}
                     data-testid={`agent-edit-${agent.id}`}
                   >
                     <LuPencil className="h-3.5 w-3.5" />
@@ -377,7 +379,7 @@ export function AgentsSettingsPanel({
                       }
                       disabled={archivingId === agent.id}
                       className="rounded-full p-1 text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-destructive"
-                      title="删除"
+                      title={t('Delete')}
                       data-testid={`agent-archive-${agent.id}`}
                     >
                       {archivingId === agent.id ? (
@@ -404,10 +406,13 @@ export function AgentsSettingsPanel({
       )}
       <ConfirmDialog
         open={pendingArchive !== null}
-        title="删除智能体"
+        title={t('Delete agent')}
         description={
           pendingArchive
-            ? `确定删除「${pendingArchive.name}」？它会从专家选择器中移除，已有会话不受影响。`
+            ? t(
+                'Delete "{name}"? It will be removed from the expert picker. Existing conversations are not affected.',
+                { name: pendingArchive.name },
+              )
             : ''
         }
         pending={pendingArchive !== null && archivingId === pendingArchive.id}

package/src/components/settings/AppUpdateSettingsPanel.tsx

@@ -1,5 +1,6 @@
 import { LuInfo } from 'react-icons/lu';
 import { useAppRelease } from '@/components/SidebarRelease';
+import { t } from '@/i18n';
 
 /**
  * 综合设置里的版本与更新。侧栏只显示版本号；检查、下载和安装在这里。
@@ -17,11 +18,11 @@ export function AppUpdateSettingsPanel() {
     <section className="space-y-2" data-testid="settings-section-update">
       <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
         <LuInfo className="h-3.5 w-3.5 text-agent-muted-foreground" />
-        关于
+        {t('About')}
       </h2>
       <div className="flex items-center gap-3 rounded-agent-md border border-agent-border bg-agent-card p-2.5">
         <div className="min-w-0 flex-1">
-          <p className="text-xs font-medium text-agent-foreground">当前版本</p>
+          <p className="text-xs font-medium text-agent-foreground">{t('Current version')}</p>
           <p
             className="mt-1 text-xs tabular-nums text-agent-muted-foreground"
             data-testid="settings-app-version"

package/src/components/settings/AppearanceSettingsPanel.tsx

@@ -3,54 +3,98 @@ import {
   persistThinkingDisplay,
   useThinkingDisplay,
 } from '@/lib/show-thinking-content';
+import { localeEndonym, supportedLocales, useI18n } from '@/i18n';
 
 /**
  * 界面偏好：思考过程正文按「隐藏 / 显示5行 / 完整显示」三档。
- * 立即写入 localStorage，不走设置页顶部的模型保存按钮。
+ * 产品声明了多于一种语言时，在这里切换。立即写入 localStorage。
  */
 export function AppearanceSettingsPanel() {
+  const { t, locale, setLocale } = useI18n();
   const mode = useThinkingDisplay();
   const current = THINKING_DISPLAY_OPTIONS.find((item) => item.mode === mode);
+  const locales = supportedLocales();
 
   return (
-    <div
-      className="space-y-2 rounded-agent-md border border-agent-border bg-agent-card p-2.5"
-      data-testid="appearance-settings-panel"
-    >
-      <div>
-        <p className="text-xs font-medium text-agent-foreground">显示思考内容</p>
-        <p className="mt-1 text-xs leading-relaxed text-agent-muted-foreground">
-          {current?.hint} 这三档只控制思考正文，不影响工具卡片和工作行。工作行只显示「工作中」或结束后的次数与用时。
-        </p>
-      </div>
+    <div className="space-y-2">
+      {locales.length > 1 ? (
+        <div
+          className="space-y-2 rounded-agent-md border border-agent-border bg-agent-card p-2.5"
+          data-testid="locale-settings"
+        >
+          <p className="text-xs font-medium text-agent-foreground">{t('Language')}</p>
+          <div
+            className="flex w-full rounded-full border border-agent-border bg-agent-canvas p-0.5"
+            role="radiogroup"
+            aria-label={t('Language')}
+            data-testid="locale-toggle"
+          >
+            {locales.map((item) => {
+              const selected = locale === item;
+              return (
+                <button
+                  key={item}
+                  type="button"
+                  role="radio"
+                  aria-checked={selected}
+                  data-testid={`locale-option-${item}`}
+                  onClick={() => setLocale(item)}
+                  className={[
+                    'h-7 flex-1 rounded-full px-2 text-xs transition-colors',
+                    selected
+                      ? 'bg-agent-foreground/10 text-agent-foreground'
+                      : 'text-agent-muted-foreground hover:text-agent-foreground',
+                  ].join(' ')}
+                >
+                  {localeEndonym(item)}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
       <div
-        className="flex w-full rounded-full border border-agent-border bg-agent-canvas p-0.5"
-        role="radiogroup"
-        aria-label="显示思考内容"
-        data-testid="thinking-display-toggle"
+        className="space-y-2 rounded-agent-md border border-agent-border bg-agent-card p-2.5"
+        data-testid="appearance-settings-panel"
       >
-        {THINKING_DISPLAY_OPTIONS.map((item) => {
-          const selected = mode === item.mode;
-          return (
-            <button
-              key={item.mode}
-              type="button"
-              role="radio"
-              aria-checked={selected}
-              aria-label={item.label}
-              data-testid={`thinking-display-${item.mode}`}
-              onClick={() => persistThinkingDisplay(item.mode)}
-              className={[
-                'h-7 flex-1 rounded-full px-2 text-xs transition-colors',
-                selected
-                  ? 'bg-agent-foreground/10 text-agent-foreground'
-                  : 'text-agent-muted-foreground hover:text-agent-foreground',
-              ].join(' ')}
-            >
-              {item.label}
-            </button>
-          );
-        })}
+        <div>
+          <p className="text-xs font-medium text-agent-foreground">{t('Show thinking')}</p>
+          <p className="mt-1 text-xs leading-relaxed text-agent-muted-foreground">
+            {current ? t(current.hint) : null}{' '}
+            {t(
+              'These options only control the thinking text. Tool cards and work rows stay as they are. A work row shows "Working", or the count and elapsed time after it finishes.',
+            )}
+          </p>
+        </div>
+        <div
+          className="flex w-full rounded-full border border-agent-border bg-agent-canvas p-0.5"
+          role="radiogroup"
+          aria-label={t('Show thinking')}
+          data-testid="thinking-display-toggle"
+        >
+          {THINKING_DISPLAY_OPTIONS.map((item) => {
+            const selected = mode === item.mode;
+            return (
+              <button
+                key={item.mode}
+                type="button"
+                role="radio"
+                aria-checked={selected}
+                aria-label={t(item.label)}
+                data-testid={`thinking-display-${item.mode}`}
+                onClick={() => persistThinkingDisplay(item.mode)}
+                className={[
+                  'h-7 flex-1 rounded-full px-2 text-xs transition-colors',
+                  selected
+                    ? 'bg-agent-foreground/10 text-agent-foreground'
+                    : 'text-agent-muted-foreground hover:text-agent-foreground',
+                ].join(' ')}
+              >
+                {t(item.label)}
+              </button>
+            );
+          })}
+        </div>
       </div>
     </div>
   );

package/src/components/settings/DiagnoseSettingsPanel.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { LuCircleCheck, LuCircleX, LuLoader, LuPlay } from 'react-icons/lu';
 import { diagnoseLlmConnection, type DiagnoseResult } from '@/lib/local-api';
+import { t } from '@/i18n';
 
 /**
  * 设置页「链路诊断」面板：一键探测当前 LLM 配置的连通性
@@ -29,8 +30,10 @@ export function DiagnoseSettingsPanel() {
   return (
     <div className="space-y-2 rounded-agent-md border border-agent-border bg-agent-card p-2.5">
       <p className="text-xs text-agent-muted-foreground">
-        诊断当前模型服务的网络连通性，包括 DNS 解析、TCP 连接、TLS 握手、HTTP 接口与对话补全。
-        诊断在宿主进程内执行，会同时报告系统/环境代理配置。
+        {t(
+          'Diagnose network connectivity to the current model service, including DNS resolution, TCP connection, TLS handshake, the HTTP endpoint, and chat completion.',
+        )}{' '}
+        {t('The diagnosis runs in the host process and also reports system and environment proxy settings.')}
       </p>
 
       <button
@@ -42,19 +45,19 @@ export function DiagnoseSettingsPanel() {
         {running ? (
           <>
             <LuLoader className="h-3.5 w-3.5 animate-spin" />
-            诊断中…
+            {t('Diagnosing…')}
           </>
         ) : (
           <>
             <LuPlay className="h-3.5 w-3.5" />
-            开始诊断
+            {t('Start diagnosis')}
           </>
         )}
       </button>
 
       {error && (
         <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
-          诊断请求失败：{error}
+          {t('Diagnosis request failed: {error}', { error })}
         </p>
       )}
 
@@ -64,12 +67,12 @@ export function DiagnoseSettingsPanel() {
             {result.ok ? (
               <span className="inline-flex items-center gap-1 text-agent-success">
                 <LuCircleCheck className="h-4 w-4" />
-                全部通过
+                {t('All checks passed')}
               </span>
             ) : (
               <span className="inline-flex items-center gap-1 text-agent-destructive">
                 <LuCircleX className="h-4 w-4" />
-                诊断失败
+                {t('Diagnosis failed')}
               </span>
             )}
           </div>
@@ -98,7 +101,7 @@ export function DiagnoseSettingsPanel() {
 
           {result.ambientProxies.length > 0 && (
             <div className="rounded-agent-sm border border-agent-border bg-agent-muted/30 p-2.5 text-xs">
-              <p className="font-medium text-agent-foreground">检测到的代理配置</p>
+              <p className="font-medium text-agent-foreground">{t('Detected proxy settings')}</p>
               <ul className="mt-1 list-inside list-disc space-y-0.5 text-agent-muted-foreground">
                 {result.ambientProxies.map((proxy) => (
                   <li key={proxy}>{proxy}</li>