@steerable/agent-shell-web 0.6.52 → 0.6.55

package/src/components/settings/AgentsSettingsPanel.tsx

@@ -6,6 +6,7 @@ import {
   LuTrash2,
 } from 'react-icons/lu';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { t } from '@/i18n';
 import { isElectron } from '@/lib/electron-bridge';
 import {
   archiveChatAgent,
@@ -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;
@@ -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>

package/src/components/settings/InsightsSettingsPanel.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { LuChartBar } from 'react-icons/lu';
 import { BRAND_NAME } from '@/brand';
+import { t } from '@/i18n';
 import { getElectronBridge, isElectron } from '@/lib/electron-bridge';
 
 type InsightsWire = {
@@ -71,13 +72,13 @@ export function InsightsConsentBanner() {
       className="flex-shrink-0 border-t border-agent-border bg-agent-muted px-2.5 py-2"
       data-testid="insights-consent-banner"
       role="region"
-      aria-label="帮助改进产品同意"
+      aria-label={t('Consent to help improve the product')}
     >
       <div className="flex items-center justify-between gap-3">
         <div className="min-w-0">
-          <p className="text-xs font-medium text-agent-foreground">帮助改进{BRAND_NAME}</p>
+          <p className="text-xs font-medium text-agent-foreground">{t('Help improve {brand}', { brand: BRAND_NAME })}</p>
           <p className="mt-1 text-xs leading-relaxed text-agent-muted-foreground">
-            同意上传数据到服务器，帮助改进产品。之后可在设置里更改。
+            {t('Agree to upload data to the server to help improve the product. You can change this later in Settings.')}
           </p>
         </div>
         <div className="flex shrink-0 gap-2">
@@ -87,7 +88,7 @@ export function InsightsConsentBanner() {
             onClick={() => void save(true)}
             className="h-8 whitespace-nowrap rounded-full bg-agent-foreground px-3.5 text-xs text-agent-canvas disabled:opacity-50"
           >
-            保存
+            {t('Save')}
           </button>
           <button
             type="button"
@@ -95,7 +96,7 @@ export function InsightsConsentBanner() {
             onClick={() => void save(false)}
             className="h-8 whitespace-nowrap rounded-full border border-agent-border bg-agent-canvas px-3.5 text-xs text-agent-foreground disabled:opacity-50"
           >
-            取消
+            {t('Cancel')}
           </button>
         </div>
       </div>
@@ -152,7 +153,7 @@ export function InsightsSettingsPanel() {
         },
       });
       setData({ ...empty, ...res, profile: { ...empty.profile, ...res.profile } });
-      setStatus('已保存。未勾选的种类只留在本机。');
+      setStatus(t('Saved. Unchecked categories stay on this device only.'));
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {
@@ -170,11 +171,11 @@ export function InsightsSettingsPanel() {
       });
       const text = `${JSON.stringify(bundle, null, 2)}\n`;
       const saved = await getElectronBridge()!.local?.saveTextFile?.({
-        title: '导出本地洞察记录',
+        title: t('Export local insight records'),
         defaultPath: `deeppath-insights-${new Date().toISOString().slice(0, 10)}.json`,
         content: text,
       });
-      if (saved?.canceled === false) setStatus(`已保存到 ${saved.filePath}`);
+      if (saved?.canceled === false) setStatus(t('Saved to {path}', { path: saved.filePath ?? '' }));
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
     }
@@ -188,7 +189,11 @@ export function InsightsSettingsPanel() {
         method: 'POST',
         path: '/api/v2/insights/upload-local',
       });
-      setStatus(res.ok ? `已上传到${BRAND_NAME}服务器` : '上传失败，记录仍在本机，可改导出文件发送');
+      setStatus(
+        res.ok
+          ? t('Uploaded to the {brand} server', { brand: BRAND_NAME })
+          : t('Upload failed. The records are still on this device. You can export a file and send it instead.'),
+      );
       await load();
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -202,15 +207,17 @@ export function InsightsSettingsPanel() {
       <div className="rounded-agent-md border border-agent-border/60 bg-agent-muted/30 p-2.5 space-y-2">
         <h4 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
           <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
-          帮助改进产品（行为 / 对话 / 用户信息 分开确认）
+          {t('Help improve the product (behavior / conversations / user info are confirmed separately)')}
         </h4>
         <p className="text-[11px] text-agent-muted-foreground">
-          即使用户不同意上传，记录也会留在本机。可导出 JSON 发给产品团队，或点一次「现在上传」。
+          {t(
+            'Even if the user does not agree to upload, records stay on this device. You can export JSON and send it to the product team, or click "Upload now" once.',
+          )}
         </p>
         {!isElectron() ? (
-          <p className="text-[11px] text-agent-muted-foreground">需要在桌面客户端中打开</p>
+          <p className="text-[11px] text-agent-muted-foreground">{t('Open this in the desktop app')}</p>
         ) : loading ? (
-          <p className="text-[11px] text-agent-muted-foreground">读取中…</p>
+          <p className="text-[11px] text-agent-muted-foreground">{t('Loading…')}</p>
         ) : (
           <>
             <label className="flex items-start gap-2 text-xs">
@@ -220,8 +227,8 @@ export function InsightsSettingsPanel() {
                 onChange={(e) => setData((d) => ({ ...d, shareBehavior: e.target.checked }))}
               />
               <span>
-                自动上传<strong>行为</strong>
-                <span className="block text-[10px] text-agent-muted-foreground">打开、发送、设置卡住等，不含问答正文</span>
+                {t('Auto-upload')} <strong>{t('behavior')}</strong>
+                <span className="block text-[10px] text-agent-muted-foreground">{t('Opens, sends, stuck settings, and so on. No question or answer text.')}</span>
               </span>
             </label>
             <label className="flex items-start gap-2 text-xs">
@@ -231,8 +238,8 @@ export function InsightsSettingsPanel() {
                 onChange={(e) => setData((d) => ({ ...d, shareConversation: e.target.checked }))}
               />
               <span>
-                自动上传<strong>对话</strong>
-                <span className="block text-[10px] text-agent-muted-foreground">提问与回答（已脱敏密钥和用户目录）</span>
+                {t('Auto-upload')} <strong>{t('conversations')}</strong>
+                <span className="block text-[10px] text-agent-muted-foreground">{t('Questions and answers (keys and user directories are redacted)')}</span>
               </span>
             </label>
             <label className="flex items-start gap-2 text-xs">
@@ -242,21 +249,21 @@ export function InsightsSettingsPanel() {
                 onChange={(e) => setData((d) => ({ ...d, shareProfile: e.target.checked }))}
               />
               <span>
-                自动上传<strong>用户信息</strong>
-                <span className="block text-[10px] text-agent-muted-foreground">与上面两项分开，不勾选则称呼/邮箱只留本机</span>
+                {t('Auto-upload')} <strong>{t('user info')}</strong>
+                <span className="block text-[10px] text-agent-muted-foreground">{t('Separate from the two above. If unchecked, your name and email stay on this device only.')}</span>
               </span>
             </label>
             <div className="grid grid-cols-2 gap-2">
               {(
                 [
-                  ['displayName', '称呼'],
-                  ['email', '邮箱'],
-                  ['company', '公司/团队'],
-                  ['note', '想告诉我们的'],
+                  ['displayName', 'Name'],
+                  ['email', 'Email'],
+                  ['company', 'Company/team'],
+                  ['note', 'Anything to tell us'],
                 ] as const
               ).map(([key, label]) => (
                 <label key={key} className="space-y-1 text-[11px] text-agent-muted-foreground">
-                  {label}
+                  {t(label)}
                   <input
                     value={data.profile[key]}
                     onChange={(e) =>
@@ -268,7 +275,15 @@ export function InsightsSettingsPanel() {
               ))}
             </div>
             <p className="text-[10px] text-agent-muted-foreground">
-              本机已记 行为 {stats.events} / 对话 {stats.turns} / 资料 {stats.profile}，待上传 {stats.pending}
+              {t(
+                'Recorded on this device: behavior {events} / conversations {turns} / profile {profile}, pending upload {pending}',
+                {
+                  events: stats.events,
+                  turns: stats.turns,
+                  profile: stats.profile,
+                  pending: stats.pending,
+                },
+              )}
               {data.installId ? ` · ${data.installId.slice(0, 8)}` : ''}
             </p>
             <div className="flex flex-wrap gap-2">
@@ -278,21 +293,21 @@ export function InsightsSettingsPanel() {
                 onClick={() => void save()}
                 className="h-8 rounded-full bg-agent-foreground px-4 text-xs text-agent-canvas"
               >
-                保存
+                {t('Save')}
               </button>
               <button
                 type="button"
                 onClick={() => void exportFile()}
                 className="h-8 rounded-full border border-agent-border px-4 text-xs"
               >
-                导出文件发给开发者
+                {t('Export a file for the developers')}
               </button>
               <button
                 type="button"
                 onClick={() => void uploadNow()}
                 className="h-8 rounded-full border border-agent-border px-4 text-xs"
               >
-                现在上传本地记录
+                {t('Upload local records now')}
               </button>
             </div>
           </>