dsh-soul 0.3.3 → 0.4.0

package/client/index.mjs

@@ -2,12 +2,17 @@
 //
 // 在设置页面添加「个性化」栏目：
 //   - 启用/禁用个性化设置
-//   - 选择回复风格和语调
-//   - 输入自定义指令
+//   - 「关于你」（昵称/职业/介绍）、回复风格和语调、特质、输出语言、自定义指令
+//   - dirty 检测（无改动禁用保存）、保存结果提示（已保存 / 无变化）
+//   - 查看当前生效提示词（只读）与字符数
 //
 // 纯 JS + React jsx-runtime 手写（不依赖 JSX 构建），开箱即用。
 // 注意：dsh web 使用 React 17+ 的 jsx-runtime，children 必须放在 props.children
 // 里；不能把 children 当第三个参数传（第三个参数是 key）。
+//
+// 文案全部走宿主 locale 词典：槽位声明 locale: NS 后，渲染器会把绑定本命名
+// 空间的 t 注入组件（props.t），并在语言切换时重渲染；导航 label 由 apply 内
+// 绑定的 navT 实时解析，壳层在语言切换时会重新解析 label。
 
 window.__ModuleLoader__.load({
   id: 'dsh-soul',
@@ -39,19 +44,18 @@ window.__ModuleLoader__.load({
     const INITIAL = {
       enabled: true,
       nickname: '',
-      // 关于你：用户职业 / 用户介绍
       occupation: '',
       bio: '',
-      // 回复风格和语调（合并为单一选项）
       style: 'professional',
-      // 特质：标题和列表 / 表情符号
       headingLists: 'default',
       emoji: 'default',
       language: 'zh',
       customInstructions: '',
       loading: false,
       saving: false,
-      error: null
+      error: null,
+      // 最近一次保存实际变化的字段名数组（来自 POST /api/soul/config 的 changed）
+      lastChanged: null
     }
 
     // 第三方插件不能 require('@deepseek-ai/dsh-client-runtime/client')——
@@ -93,16 +97,16 @@ window.__ModuleLoader__.load({
       async loadConfig() {
         if (this.disposed) return
         this.store.update(s => { s.loading = true; s.error = null })
-        
+
         try {
           const url = new URL('/api/soul/config', hostBase())
           const response = await this.fetcher(url)
           const payload = await response.json().catch(() => ({}))
-          
+
           if (!response.ok || payload.ok !== true) {
             throw new Error(payload.error || `HTTP ${response.status}`)
           }
-          
+
           this.store.update(s => {
             s.enabled = payload.config.enabled
             s.nickname = payload.config.nickname || ''
@@ -127,7 +131,7 @@ window.__ModuleLoader__.load({
       async saveConfig(config) {
         if (this.disposed) return
         this.store.update(s => { s.saving = true; s.error = null })
-        
+
         try {
           const url = new URL('/api/soul/config', hostBase())
           const response = await this.fetcher(url, {
@@ -136,11 +140,11 @@ window.__ModuleLoader__.load({
             body: JSON.stringify(config)
           })
           const payload = await response.json().catch(() => ({}))
-          
+
           if (!response.ok || payload.ok !== true) {
             throw new Error(payload.error || `HTTP ${response.status}`)
           }
-          
+
           this.store.update(s => {
             s.enabled = payload.config.enabled
             s.nickname = payload.config.nickname || ''
@@ -151,6 +155,7 @@ window.__ModuleLoader__.load({
             s.emoji = payload.config.emoji || 'default'
             s.language = payload.config.language || 'zh'
             s.customInstructions = payload.config.customInstructions
+            s.lastChanged = Array.isArray(payload.changed) ? payload.changed : []
             s.saving = false
           })
         } catch (error) {
@@ -165,16 +170,16 @@ window.__ModuleLoader__.load({
       async resetConfig() {
         if (this.disposed) return
         this.store.update(s => { s.saving = true; s.error = null })
-        
+
         try {
           const url = new URL('/api/soul/config/reset', hostBase())
           const response = await this.fetcher(url, { method: 'POST' })
           const payload = await response.json().catch(() => ({}))
-          
+
           if (!response.ok || payload.ok !== true) {
             throw new Error(payload.error || `HTTP ${response.status}`)
           }
-          
+
           this.store.update(s => {
             s.enabled = payload.config.enabled
             s.nickname = payload.config.nickname || ''
@@ -185,6 +190,7 @@ window.__ModuleLoader__.load({
             s.emoji = payload.config.emoji || 'default'
             s.language = payload.config.language || 'zh'
             s.customInstructions = payload.config.customInstructions
+            s.lastChanged = Array.isArray(payload.changed) ? payload.changed : []
             s.saving = false
           })
         } catch (error) {
@@ -196,6 +202,17 @@ window.__ModuleLoader__.load({
         }
       }
 
+      // 读取当前生效（已保存）的提示词：{ ok, prompt, enabled }
+      async fetchPrompt() {
+        const url = new URL('/api/soul/prompt', hostBase())
+        const response = await this.fetcher(url)
+        const payload = await response.json().catch(() => ({}))
+        if (!response.ok || payload.ok !== true) {
+          throw new Error(payload.error || `HTTP ${response.status}`)
+        }
+        return payload
+      }
+
       async dispose() {
         this.disposed = true
       }
@@ -224,11 +241,16 @@ window.__ModuleLoader__.load({
       '.soul-hint-tip{position:absolute;bottom:calc(100% + 8px);left:0;padding:8px 10px;background:#ffffff;border:1px solid rgba(0,0,0,0.1);border-radius:6px;font-size:12px;font-weight:400;line-height:1.5;color:rgba(0,0,0,0.85);white-space:normal;width:max-content;max-width:260px;text-align:left;opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,0.15)}',
       '.soul-hint:hover .soul-hint-tip{opacity:1;visibility:visible}',
       '.soul-status{margin-top:8px;font-size:12px;color:var(--dsw-alias-label-secondary)}',
+      '.soul-dirty{color:#d46b08}',
+      '.soul-prompt-toggle{margin-top:8px}',
+      '.soul-prompt-link{background:none;border:none;padding:0;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer;text-decoration:underline}',
+      '.soul-prompt-link:hover{color:var(--dsw-alias-label-primary)}',
+      '.soul-prompt-pre{margin:8px 0 0 0;padding:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;background:var(--dsw-alias-bg-l1);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto;font-family:Consolas,Menlo,monospace;text-align:left;width:100%;box-sizing:border-box}',
       '.soul-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;z-index:10000;box-shadow:0 2px 8px rgba(0,0,0,0.15);pointer-events:none;text-align:center;min-width:auto;white-space:nowrap}',
       '.soul-toast-success{background:#f6ffed;border:1px solid #b7eb8f;color:#52c41a}',
       '@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-50%) scale(0.9)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(0.9)}}'
     ].join('')
-    
+
     const tagId = 'dsh-soul/styles.css'
     let styleTagMissing = false
     if (typeof document !== 'undefined') {
@@ -247,38 +269,140 @@ window.__ModuleLoader__.load({
     }
 
     // -------------------------------------------------------------------------
-    // 组件
+    // 文案词典（键集中英完全对齐；渲染器按槽位 locale 注入 t）
     // -------------------------------------------------------------------------
 
-    // 回复风格和语调（合并为单一选项）
-    const STYLE_TONE_OPTIONS = [
-      { value: 'professional', label: '专业严谨' },
-      { value: 'casual', label: '轻松自然' },
-      { value: 'humorous', label: '幽默风趣' },
-      { value: 'roast', label: '吐槽达人' },
-      { value: 'efficient', label: '高效干练' }
-    ]
+    const zh = {
+      'nav.label': '个性化',
+      'settings.title': '个性化设置',
+      'toggle.enabled': '启用个性化设置',
+      'group.aboutYou': '关于你',
+      'field.nickname': '用户昵称',
+      'field.nicknamePlaceholder': '输入你的昵称，回复时会称呼你',
+      'field.occupation': '用户职业',
+      'field.occupationPlaceholder': '例如：软件工程师、学生、产品经理',
+      'field.bio': '用户介绍',
+      'field.bioPlaceholder': '简单介绍自己，让回复更贴合你的背景',
+      'group.traits': '特质',
+      'field.style': '回复风格和语调',
+      'hint.style': '设置 Agent 回复你的风格和语调。这不会影响 Agent 的功能。',
+      'field.headingLists': '标题和列表',
+      'hint.headingLists': '在回复风格和语调的基础上选择额外的自定义特质项。控制回答中标题和列表的使用程度。',
+      'field.emoji': '表情符号',
+      'hint.emoji': '在回复风格和语调的基础上选择额外的自定义特质项。控制表情符号的使用程度。',
+      'field.language': '输出语言',
+      'hint.language': '设置 Agent 回复你使用的语言，同时影响 /soul 命令的输出语言。',
+      'field.instructions': '自定义指令',
+      'hint.instructions': '补充角色、习惯等个性化要求。建议不要重复设置回复风格和语调类似的话术，以免与上方选项冲突。',
+      'field.instructionsPlaceholder': '输入自定义指令，可以是其他行为、回复风格和语调等偏好设置',
+      'style.professional': '专业严谨',
+      'style.casual': '轻松自然',
+      'style.humorous': '幽默风趣',
+      'style.roast': '吐槽达人',
+      'style.efficient': '高效干练',
+      'trait.headingLists.default': '默认',
+      'trait.headingLists.more': '增强（采用清晰格式和列表结构）',
+      'trait.headingLists.less': '减弱（使用更多段落文本）',
+      'trait.emoji.default': '默认',
+      'trait.emoji.more': '增强（使用较多表情符号）',
+      'trait.emoji.less': '减弱（尽量减少使用表情符号）',
+      'button.save': '保存设置',
+      'button.saving': '保存中...',
+      'button.reset': '重置默认',
+      'status.loading': '加载中...',
+      'status.unsaved': '有未保存的更改',
+      'toast.saved': '✅ 设置已保存',
+      'toast.noChanges': '✅ 配置无变化',
+      'toast.reset': '✅ 已重置为默认值',
+      'prompt.view': '查看当前生效提示词',
+      'prompt.hide': '收起提示词',
+      'prompt.loading': '提示词加载中...',
+      'prompt.empty': '（个性化已禁用，提示词为空）',
+      'prompt.chars': '当前字符数：{n}'
+    }
 
-    // 特质：标题和列表
-    const HEADING_LISTS_OPTIONS = [
-      { value: 'default', label: '默认' },
-      { value: 'more', label: '增强（采用清晰格式和列表结构）' },
-      { value: 'less', label: '减弱（使用更多段落文本）' }
-    ]
+    const en = {
+      'nav.label': 'Personalization',
+      'settings.title': 'Personalization Settings',
+      'toggle.enabled': 'Enable personalization',
+      'group.aboutYou': 'About you',
+      'field.nickname': 'Nickname',
+      'field.nicknamePlaceholder': 'Your nickname — the agent will address you by it',
+      'field.occupation': 'Occupation',
+      'field.occupationPlaceholder': 'e.g. software engineer, student, product manager',
+      'field.bio': 'Bio',
+      'field.bioPlaceholder': 'A short introduction so replies fit your background',
+      'group.traits': 'Traits',
+      'field.style': 'Reply style & tone',
+      'hint.style': "Sets the style and tone the agent uses when replying to you. It does not affect the agent's capabilities.",
+      'field.headingLists': 'Headings & lists',
+      'hint.headingLists': 'An extra trait layered on top of style & tone. Controls how much answers rely on headings and lists.',
+      'field.emoji': 'Emoji',
+      'hint.emoji': 'An extra trait layered on top of style & tone. Controls how many emojis answers use.',
+      'field.language': 'Output language',
+      'hint.language': 'Sets the language the agent replies in; also affects the /soul command output.',
+      'field.instructions': 'Custom instructions',
+      'hint.instructions': 'Extra persona or habit requirements. Avoid repeating wording similar to the style & tone option above to prevent conflicts.',
+      'field.instructionsPlaceholder': 'Custom instructions — other behaviors, style or tone preferences',
+      'style.professional': 'Professional',
+      'style.casual': 'Casual',
+      'style.humorous': 'Humorous',
+      'style.roast': 'Roast Master',
+      'style.efficient': 'Efficient',
+      'trait.headingLists.default': 'Default',
+      'trait.headingLists.more': 'More (clear formatting with headings and lists)',
+      'trait.headingLists.less': 'Less (more paragraph text)',
+      'trait.emoji.default': 'Default',
+      'trait.emoji.more': 'More (frequent emoji usage)',
+      'trait.emoji.less': 'Less (minimal emoji usage)',
+      'button.save': 'Save Settings',
+      'button.saving': 'Saving...',
+      'button.reset': 'Reset to Default',
+      'status.loading': 'Loading...',
+      'status.unsaved': 'You have unsaved changes',
+      'toast.saved': '✅ Settings saved',
+      'toast.noChanges': '✅ No changes to save',
+      'toast.reset': '✅ Reset to defaults',
+      'prompt.view': 'View the active system prompt',
+      'prompt.hide': 'Hide the prompt',
+      'prompt.loading': 'Loading prompt...',
+      'prompt.empty': '(personalization disabled — the prompt is empty)',
+      'prompt.chars': 'Current character count: {n}'
+    }
 
-    // 特质：表情符号
-    const EMOJI_OPTIONS = [
-      { value: 'default', label: '默认' },
-      { value: 'more', label: '增强（使用较多表情符号）' },
-      { value: 'less', label: '减弱（尽量减少使用表情符号）' }
-    ]
+    // 图标替换匹配的导航文案（词典中 nav.label 的全部语言取值）
+    const NAV_LABELS = new Set([zh['nav.label'], en['nav.label']])
 
-    // 选项用原生语言显示，两种 UI 语言下均自解释
+    // 组件内翻译回退：渲染器未注入 t 时使用中文词典（保证组件可独立渲染/测试）
+    function makeFallbackT(dict) {
+      return (key, params) => {
+        let text = dict[key] ?? key
+        if (params) {
+          for (const [name, value] of Object.entries(params)) {
+            text = text.split(`{${name}}`).join(String(value))
+          }
+        }
+        return text
+      }
+    }
+    const FALLBACK_T = makeFallbackT(zh)
+
+    // -------------------------------------------------------------------------
+    // 组件
+    // -------------------------------------------------------------------------
+
+    // 选项取值（label 走词典；取值与 lib/config.mjs 的合法值保持一致）
+    const STYLE_VALUES = ['professional', 'casual', 'humorous', 'roast', 'efficient']
+    const TRAIT_VALUES = ['default', 'more', 'less']
+    // 输出语言选项（两种 UI 语言下均自解释，不进词典）
     const LANGUAGE_OPTIONS = [
       { value: 'zh', label: '中文' },
       { value: 'en', label: 'English' }
     ]
 
+    // 表单字段与 store 字段的一一对应（dirty 检测与保存载荷共用）
+    const FIELD_KEYS = ['enabled', 'nickname', 'occupation', 'bio', 'style', 'headingLists', 'emoji', 'language', 'customInstructions']
+
     // 提示词小图标：hover 展示说明文字
     function SoulHint(props) {
       return e('span', { className: 'soul-hint', 'aria-label': props.text },
@@ -303,9 +427,11 @@ window.__ModuleLoader__.load({
 
     function SoulSettings(props) {
       const { useSoulController, controller } = props
+      // 渲染器按槽位 locale 命名空间注入 t（随语言切换更新）；缺失时回退中文
+      const t = typeof props.t === 'function' ? props.t : FALLBACK_T
       const state = useSoulController((state) => state)
-      const { enabled, nickname, occupation, bio, style, headingLists, emoji, language, customInstructions, loading, saving, error } = state
-      
+      const { enabled, nickname, occupation, bio, style, headingLists, emoji, language, customInstructions, loading, saving, error, lastChanged } = state
+
       const [localEnabled, setLocalEnabled] = React.useState(enabled)
       const [localNickname, setLocalNickname] = React.useState(nickname || '')
       const [localOccupation, setLocalOccupation] = React.useState(occupation || '')
@@ -317,7 +443,11 @@ window.__ModuleLoader__.load({
       const [localInstructions, setLocalInstructions] = React.useState(customInstructions)
       const [showSuccess, setShowSuccess] = React.useState(false)
       const [showResetSuccess, setShowResetSuccess] = React.useState(false)
-      
+      const [showPrompt, setShowPrompt] = React.useState(false)
+      const [promptText, setPromptText] = React.useState('')
+      const [promptLoading, setPromptLoading] = React.useState(false)
+      const [promptError, setPromptError] = React.useState(null)
+
       // 同步状态
       React.useEffect(() => {
         setLocalEnabled(enabled)
@@ -330,7 +460,7 @@ window.__ModuleLoader__.load({
         setLocalLanguage(language || 'zh')
         setLocalInstructions(customInstructions)
       }, [enabled, nickname, occupation, bio, style, headingLists, emoji, language, customInstructions])
-      
+
       // 保存成功后显示提示，2秒后自动消失
       React.useEffect(() => {
         if (showSuccess) {
@@ -338,7 +468,7 @@ window.__ModuleLoader__.load({
           return () => clearTimeout(timer)
         }
       }, [showSuccess])
-      
+
       // 重置成功后显示提示，2秒后自动消失
       React.useEffect(() => {
         if (showResetSuccess) {
@@ -346,31 +476,50 @@ window.__ModuleLoader__.load({
           return () => clearTimeout(timer)
         }
       }, [showResetSuccess])
-      
+
+      // dirty 检测：本地表单与已保存配置逐字段比较
+      const savedMap = { enabled, nickname, occupation, bio, style, headingLists, emoji, language, customInstructions }
+      const localMap = { enabled: localEnabled, nickname: localNickname, occupation: localOccupation, bio: localBio, style: localStyle, headingLists: localHeadingLists, emoji: localEmoji, language: localLanguage, customInstructions: localInstructions }
+      const dirty = FIELD_KEYS.some((key) => savedMap[key] !== localMap[key])
+
+      const loadPrompt = async () => {
+        setPromptLoading(true)
+        setPromptError(null)
+        try {
+          const payload = await controller.fetchPrompt()
+          setPromptText(payload.prompt || '')
+        } catch (err) {
+          setPromptError(messageOf(err))
+        } finally {
+          setPromptLoading(false)
+        }
+      }
+
+      const togglePrompt = async () => {
+        const next = !showPrompt
+        setShowPrompt(next)
+        if (next) await loadPrompt()
+      }
+
       const handleSave = async () => {
-        const controller = props.controller
-        await controller.saveConfig({
-          enabled: localEnabled,
-          nickname: localNickname,
-          occupation: localOccupation,
-          bio: localBio,
-          style: localStyle,
-          headingLists: localHeadingLists,
-          emoji: localEmoji,
-          language: localLanguage,
-          customInstructions: localInstructions
-        })
+        await controller.saveConfig(localMap)
         setShowSuccess(true)
+        if (showPrompt) await loadPrompt()
       }
-      
+
       const handleReset = async () => {
-        const controller = props.controller
         await controller.resetConfig()
         setShowResetSuccess(true)
+        if (showPrompt) await loadPrompt()
       }
-      
+
+      const styleOptions = STYLE_VALUES.map((value) => ({ value, label: t(`style.${value}`) }))
+      const headingListsOptions = TRAIT_VALUES.map((value) => ({ value, label: t(`trait.headingLists.${value}`) }))
+      const emojiOptions = TRAIT_VALUES.map((value) => ({ value, label: t(`trait.emoji.${value}`) }))
+      const savedToastText = Array.isArray(lastChanged) && lastChanged.length > 0 ? t('toast.saved') : t('toast.noChanges')
+
       return e('div', { className: 'soul-section' },
-        e('h3', null, '个性化设置'),
+        e('h3', null, t('settings.title')),
         e('div', { className: 'soul-toggle' },
           e('input', {
             type: 'checkbox',
@@ -378,54 +527,54 @@ window.__ModuleLoader__.load({
             checked: localEnabled,
             onChange: (ev) => setLocalEnabled(ev.target.checked)
           }),
-          e('label', { htmlFor: 'soul-enabled' }, '启用个性化设置')
+          e('label', { htmlFor: 'soul-enabled' }, t('toggle.enabled'))
         ),
-        
+
         localEnabled && e(Fragment, null,
-          e('div', { className: 'soul-group-title' }, '关于你'),
+          e('div', { className: 'soul-group-title' }, t('group.aboutYou')),
           e('div', { className: 'soul-field' },
-            e('label', { htmlFor: 'soul-nickname' }, '用户昵称'),
+            e('label', { htmlFor: 'soul-nickname' }, t('field.nickname')),
             e('input', {
               type: 'text',
               id: 'soul-nickname',
               value: localNickname,
               onChange: (ev) => setLocalNickname(ev.target.value),
-              placeholder: '输入你的昵称，回复时会称呼你'
+              placeholder: t('field.nicknamePlaceholder')
             })
           ),
           e('div', { className: 'soul-field' },
-            e('label', { htmlFor: 'soul-occupation' }, '用户职业'),
+            e('label', { htmlFor: 'soul-occupation' }, t('field.occupation')),
             e('input', {
               type: 'text',
               id: 'soul-occupation',
               value: localOccupation,
               onChange: (ev) => setLocalOccupation(ev.target.value),
-              placeholder: '例如：软件工程师、学生、产品经理'
+              placeholder: t('field.occupationPlaceholder')
             })
           ),
           e('div', { className: 'soul-field' },
-            e('label', { htmlFor: 'soul-bio' }, '用户介绍'),
+            e('label', { htmlFor: 'soul-bio' }, t('field.bio')),
             e('textarea', {
               id: 'soul-bio',
               className: 'soul-textarea-sm',
               value: localBio,
               onChange: (ev) => setLocalBio(ev.target.value),
-              placeholder: '简单介绍自己，让回复更贴合你的背景'
+              placeholder: t('field.bioPlaceholder')
             })
           ),
 
-          e('div', { className: 'soul-group-title' }, '特质'),
+          e('div', { className: 'soul-group-title' }, t('group.traits')),
           e('div', { className: 'soul-field' },
             e('label', { htmlFor: 'soul-style' },
-              '回复风格和语调',
-              e(SoulHint, { text: '设置 Agent 回复你的风格和语调。这不会影响 Agent 的功能。' })
+              t('field.style'),
+              e(SoulHint, { text: t('hint.style') })
             ),
             e('select', {
               id: 'soul-style',
               value: localStyle,
               onChange: (ev) => setLocalStyle(ev.target.value)
             },
-              ...STYLE_TONE_OPTIONS.map(opt =>
+              ...styleOptions.map(opt =>
                 e('option', { key: opt.value, value: opt.value }, opt.label)
               )
             )
@@ -433,15 +582,15 @@ window.__ModuleLoader__.load({
 
           e('div', { className: 'soul-field' },
             e('label', { htmlFor: 'soul-headingLists' },
-              '标题和列表',
-              e(SoulHint, { text: '在回复风格和语调的基础上选择额外的自定义特质项。控制回答中标题和列表的使用程度。' })
+              t('field.headingLists'),
+              e(SoulHint, { text: t('hint.headingLists') })
             ),
             e('select', {
               id: 'soul-headingLists',
               value: localHeadingLists,
               onChange: (ev) => setLocalHeadingLists(ev.target.value)
             },
-              ...HEADING_LISTS_OPTIONS.map(opt =>
+              ...headingListsOptions.map(opt =>
                 e('option', { key: opt.value, value: opt.value }, opt.label)
               )
             )
@@ -449,15 +598,15 @@ window.__ModuleLoader__.load({
 
           e('div', { className: 'soul-field' },
             e('label', { htmlFor: 'soul-emoji' },
-              '表情符号',
-              e(SoulHint, { text: '在回复风格和语调的基础上选择额外的自定义特质项。控制表情符号的使用程度。' })
+              t('field.emoji'),
+              e(SoulHint, { text: t('hint.emoji') })
             ),
             e('select', {
               id: 'soul-emoji',
               value: localEmoji,
               onChange: (ev) => setLocalEmoji(ev.target.value)
             },
-              ...EMOJI_OPTIONS.map(opt =>
+              ...emojiOptions.map(opt =>
                 e('option', { key: opt.value, value: opt.value }, opt.label)
               )
             )
@@ -465,8 +614,8 @@ window.__ModuleLoader__.load({
 
           e('div', { className: 'soul-field' },
             e('label', { htmlFor: 'soul-language' },
-              '输出语言',
-              e(SoulHint, { text: '设置 Agent 回复你使用的语言，同时影响 /soul 命令的输出语言。' })
+              t('field.language'),
+              e(SoulHint, { text: t('hint.language') })
             ),
             e('select', {
               id: 'soul-language',
@@ -481,78 +630,70 @@ window.__ModuleLoader__.load({
 
           e('div', { className: 'soul-field' },
             e('label', { htmlFor: 'soul-instructions' },
-              '自定义指令',
-              e(SoulHint, { text: '补充角色、习惯等个性化要求。建议不要重复设置回复风格和语调类似的话术，以免与上方选项冲突。' })
+              t('field.instructions'),
+              e(SoulHint, { text: t('hint.instructions') })
             ),
             e('textarea', {
               id: 'soul-instructions',
               value: localInstructions,
               onChange: (ev) => setLocalInstructions(ev.target.value),
-              placeholder: '输入自定义指令，可以是其他行为、回复风格和语调等偏好设置'
+              placeholder: t('field.instructionsPlaceholder')
             })
           )
         ),
-        
+
         error && e('div', { className: 'soul-error' }, error),
-        
+
         e('div', { className: 'soul-buttons' },
           e(ui.Button, {
             variant: 'primary',
             onClick: handleSave,
-            disabled: saving
-          }, saving ? '保存中...' : '保存设置'),
+            disabled: saving || !dirty
+          }, saving ? t('button.saving') : t('button.save')),
           e(ui.Button, {
             onClick: handleReset,
             disabled: saving
-          }, '重置默认')
+          }, t('button.reset'))
+        ),
+
+        dirty && !saving && e('div', { className: 'soul-status soul-dirty' }, t('status.unsaved')),
+
+        e('div', { className: 'soul-prompt-toggle' },
+          e('button', {
+            type: 'button',
+            className: 'soul-prompt-link',
+            onClick: togglePrompt
+          }, showPrompt ? t('prompt.hide') : t('prompt.view'))
         ),
-        
-        loading && e('div', { className: 'soul-status' }, '加载中...'),
-        
-        showSuccess && e('div', { 
+        showPrompt && e('div', { className: 'soul-prompt-panel' },
+          promptLoading
+            ? e('div', { className: 'soul-status' }, t('prompt.loading'))
+            : (promptError
+              ? e('div', { className: 'soul-error' }, promptError)
+              : e(Fragment, null,
+                e('pre', { className: 'soul-prompt-pre' }, promptText || t('prompt.empty')),
+                e('div', { className: 'soul-status' }, t('prompt.chars', { n: String(promptText.length) }))
+              ))
+        ),
+
+        loading && e('div', { className: 'soul-status' }, t('status.loading')),
+
+        showSuccess && e('div', {
           className: 'soul-toast soul-toast-success',
           style: {
             animation: 'fadeInOut 2s ease-in-out'
           }
-        }, '✅ 设置已保存'),
-        
-        showResetSuccess && e('div', { 
+        }, savedToastText),
+
+        showResetSuccess && e('div', {
           className: 'soul-toast soul-toast-success',
           style: {
             animation: 'fadeInOut 2s ease-in-out'
           }
-        }, '✅ 已重置为默认值')
+        }, t('toast.reset'))
       )
     }
 
-    // -------------------------------------------------------------------------
-    // 文案
-    // -------------------------------------------------------------------------
-
-    const zh = {
-      'settings.title': '个性化设置',
-      'settings.description': '自定义Agent回复的风格和语调',
-      'button.save': '保存设置',
-      'button.reset': '重置默认',
-      'option.style': '回复风格和语调',
-      'option.instructions': '自定义指令',
-      'option.enabled': '启用个性化设置',
-      'status.loading': '加载中...',
-      'status.saving': '保存中...'
-    }
-    
-    const en = {
-      'settings.title': 'Personalization Settings',
-      'settings.description': 'Customize agent response style and tone',
-      'button.save': 'Save Settings',
-      'button.reset': 'Reset to Default',
-      'option.style': 'Response Style & Tone',
-      'option.instructions': 'Custom Instructions',
-      'option.enabled': 'Enable Personalization',
-      'status.loading': 'Loading...',
-      'status.saving': 'Saving...'
-    }
-
     // -------------------------------------------------------------------------
     // 插件装配
     // -------------------------------------------------------------------------
@@ -566,32 +707,36 @@ window.__ModuleLoader__.load({
         controller.dispose()
       }, 'dsh-soul: browser lifecycle')
       ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-soul: dictionaries')
-      
+
+      // 导航 label / 图标替换用的翻译函数（bind 返回的函数在调用时读取当前语言）
+      const navT = ctx.locale.bind(NS)
+
       // DSH 0.1.x 不支持 settings.section 的 icon 字段
       // 使用 DOM 操作动态替换图标（类似 dsh-better-sidebar 的方案）
       const SOUL_NAV_MARKER = 'data-soul-settings-nav'
       const SOUL_ICON_MARKER = 'data-soul-icon-replaced'
-      
+
       const registerSettingsNavIcon = () => {
         let disposed = false
-        
+
         const sync = () => {
           if (disposed) return
-          
+
           const buttons = document.querySelectorAll('[role="dialog"] nav button')
           for (const button of buttons) {
-            if (button.textContent?.trim() === '个性化') {
+            // 匹配本栏目导航按钮：label 由 locale 词典渲染，双语均需识别
+            if (NAV_LABELS.has(button.textContent?.trim())) {
               button.setAttribute(SOUL_NAV_MARKER, '')
-              
+
               // 检查是否已经替换过图标
               if (button.hasAttribute(SOUL_ICON_MARKER)) continue
-              
+
               // 查找并替换图标
               const existingIcon = button.querySelector('svg')
               if (existingIcon) {
                 // 标记已替换
                 button.setAttribute(SOUL_ICON_MARKER, 'true')
-                
+
                 // 创建星形图标（跟随主题色）
                 const starSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
                 starSvg.setAttribute('viewBox', '0 0 24 24')
@@ -602,11 +747,11 @@ window.__ModuleLoader__.load({
                 starSvg.setAttribute('stroke-linejoin', 'round')
                 starSvg.style.width = '16px'
                 starSvg.style.height = '16px'
-                
+
                 const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
                 path.setAttribute('d', 'M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z')
                 starSvg.appendChild(path)
-                
+
                 existingIcon.replaceWith(starSvg)
               }
             } else {
@@ -614,10 +759,10 @@ window.__ModuleLoader__.load({
             }
           }
         }
-        
+
         // 延迟执行初始同步，等待设置页面渲染完成
         let timer = setTimeout(sync, 500)
-        
+
         // 监听 DOM 变化（只监听子节点添加，不监听所有变化）
         const observer = new MutationObserver(() => {
           // 防抖：每次变化都重置计时器，停止变化 100ms 后执行
@@ -626,12 +771,12 @@ window.__ModuleLoader__.load({
           clearTimeout(timer)
           timer = setTimeout(sync, 100)
         })
-        
+
         observer.observe(document.body, {
           childList: true,
           subtree: true
         })
-        
+
         return () => {
           disposed = true
           clearTimeout(timer)
@@ -644,16 +789,16 @@ window.__ModuleLoader__.load({
           })
         }
       }
-      
+
       // 注册图标替换效果
       ctx.effect(() => registerSettingsNavIcon(), 'dsh-soul: settings navigation icon')
-      
-      // 注册到设置页面
+
+      // 注册到设置页面（label 用 navT 实时解析；壳层在语言切换时会重新解析 label）
       ctx.slots.inject('settings.section', () => ctx.slots.register({
         name: 'settings.section',
         id: 'soul-settings',
         order: 50,
-        label: () => '个性化',
+        label: () => navT('nav.label'),
         locale: NS,
         inject: () => ({
           hooks: {
@@ -662,7 +807,7 @@ window.__ModuleLoader__.load({
           controller
         })
       }, SoulSettings))
-      
+
       // 加载初始配置
       controller.loadConfig()
     }
@@ -671,4 +816,4 @@ window.__ModuleLoader__.load({
     exports.inject = inject
     return module.exports
   },
-})
+})