dsh-soul 0.6.2 → 0.7.1

package/client/index.mjs

@@ -3,11 +3,12 @@
 // 在设置页面添加「个性化」栏目：
 //   - 启用/禁用个性化设置
 //   - 「关于你」（昵称/职业/介绍）、回复风格和语调、特质、输出语言、自定义指令
-//   - 人设预设：保存当前为预设、一键使用（★ 标记当前匹配项）、删除
+//   - 人设预设：7 个内置人设（随插件提供、不可删除，行尾标「内置」）+ 保存当前为预设、一键使用（★ 标记当前匹配项）、删除
 //   - Agent 工具：set_persona 确认模式开关
 //   - 输入框光轨：Agent 回复中时输入框边框的流光动效（颜色 / 速度 / 粗细 + 实时示例）
 //   - dirty 检测（无改动禁用保存）、统一 toast 提示
-//   - 查看当前生效提示词（只读）与字符数
+//   - 提示词预览（只读）：无未保存编辑时显示「当前生效提示词」，有编辑时改为编译草稿
+//     —— 展示保存后真正会生效的内容，并在保存/重置/应用预设后自动刷新
 //
 // 光轨另注册到 conversation.input.overlay 槽位（输入框卡片内部），
 // 运行时按会话 running 状态在卡片上挂载/隐藏 SVG 环，见 SoulTrail。
@@ -47,7 +48,7 @@ window.__ModuleLoader__.load({
     // -------------------------------------------------------------------------
 
     const NS = 'soul'
-    const VERSION = '0.6.2'
+    const VERSION = '0.7.1'
     const INITIAL = {
       enabled: true,
       nickname: '',
@@ -56,6 +57,8 @@ window.__ModuleLoader__.load({
       style: 'professional',
       headingLists: 'default',
       emoji: 'default',
+      tables: 'default',
+      replyLength: 'normal',
       language: 'zh',
       customInstructions: '',
       // set_persona 确认模式（v0.5.0）
@@ -68,11 +71,10 @@ window.__ModuleLoader__.load({
       // 人设预设库与当前匹配项（GET /api/soul/personas 带回）
       personas: null,
       activePersona: null,
-      loading: false,
+      // 预设列表请求失败的原因（成功时清空）。用于把「加载中」与「加载失败」区分开
+      personasError: null,
       saving: false,
-      error: null,
-      // 最近一次保存实际变化的字段名数组（来自写路径的 changed）
-      lastChanged: null
+      error: null
     }
 
     // 第三方插件不能 require('@deepseek-ai/dsh-client-runtime/client')——
@@ -88,13 +90,43 @@ window.__ModuleLoader__.load({
         update: (mutator) => {
           const next = { ...state }
           mutator(next)
-          state = next
-          notify()
+          // 值全等时不换引用、也不通知：设置页每 2s 轮询一次宿主配置，绝大多数轮次
+          // 什么都没变，此前却每次都让订阅方（设置页 / 快捷开关 / 光轨）白重渲染一次。
+          // 取两侧键集的并集比较：只遍历 next 会漏掉「mutator 删了某个键」的情形，
+          // 那会变成静默不更新 —— 比多通知一次严重得多。
+          for (const key of new Set([...Object.keys(state), ...Object.keys(next)])) {
+            if (!Object.is(next[key], state[key])) {
+              state = next
+              notify()
+              return
+            }
+          }
         },
         set: (next) => { state = next; notify() },
       }
     }
 
+    // 一层浅比较：用于判断服务端新解析出的对象是否与已存的等价。
+    // 预设条目本身是扁平对象（人格字段 + updatedAt / builtin），所以一层足够。
+    const shallowEqual = (a, b) => {
+      if (a === b) return true
+      if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false
+      const ka = Object.keys(a)
+      const kb = Object.keys(b)
+      if (ka.length !== kb.length) return false
+      return ka.every((key) => Object.is(a[key], b[key]))
+    }
+
+    // 预设库是「库 → 条目」两层结构，需要逐条目比。
+    const samePersonas = (a, b) => {
+      if (a === b) return true
+      if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false
+      const ka = Object.keys(a)
+      const kb = Object.keys(b)
+      if (ka.length !== kb.length) return false
+      return ka.every((key) => shallowEqual(a[key], b[key]))
+    }
+
     function hostBase() {
       const origin = globalThis.location?.origin
       return origin !== void 0 && origin !== 'null' ? origin : 'http://dsh.internal'
@@ -346,6 +378,8 @@ window.__ModuleLoader__.load({
         s.style = config.style
         s.headingLists = config.headingLists || 'default'
         s.emoji = config.emoji || 'default'
+        s.tables = config.tables || 'default'
+        s.replyLength = config.replyLength || 'normal'
         s.language = config.language || 'zh'
         s.customInstructions = config.customInstructions
         s.requireToolConfirmation = config.requireToolConfirmation === true
@@ -357,18 +391,25 @@ window.__ModuleLoader__.load({
 
       async loadConfig() {
         if (this.disposed) return
-        this.store.update(s => { s.loading = true; s.error = null })
+        // 开始读取就清掉上一次的错误；此前还写了一个 s.loading，但全客户端零处读取
+        // （设置页首帧直接显示 INITIAL 默认值），属于只写不读的死状态，已删。
+        this.store.update(s => { s.error = null })
 
         try {
           const payload = await this.postJSON('/api/soul/config', null, { method: 'GET' })
           this.store.update(s => {
             this.applyConfig(s, payload.config)
-            s.loading = false
+            // 两类问题分开上报、合到同一条提示里：
+            //   configError     —— 磁盘配置读不出来（回退默认值，写入被拒）
+            //   deliveryWarning —— 配置送不到活动会话（agents 服务不可用等）
+            // 两者表面症状都是「改了人设不生效」，所以都要让用户看得见。
+            s.error = typeof payload.configError === 'string'
+              ? payload.configError
+              : (typeof payload.deliveryWarning === 'string' ? payload.deliveryWarning : null)
           })
         } catch (error) {
           if (this.disposed) return
           this.store.update(s => {
-            s.loading = false
             s.error = messageOf(error)
           })
         }
@@ -382,7 +423,8 @@ window.__ModuleLoader__.load({
           const payload = await this.postJSON('/api/soul/config', config)
           this.store.update(s => {
             this.applyConfig(s, payload.config)
-            s.lastChanged = Array.isArray(payload.changed) ? payload.changed : []
+            // 保存成功也可能带着送达警告（配置写下了但送不到会话）
+            s.error = typeof payload.deliveryWarning === 'string' ? payload.deliveryWarning : null
             s.saving = false
           })
           return payload
@@ -403,7 +445,7 @@ window.__ModuleLoader__.load({
           const payload = await this.postJSON('/api/soul/config/reset')
           this.store.update(s => {
             this.applyConfig(s, payload.config)
-            s.lastChanged = Array.isArray(payload.changed) ? payload.changed : []
+            s.error = typeof payload.deliveryWarning === 'string' ? payload.deliveryWarning : null
             s.saving = false
           })
           return payload
@@ -430,7 +472,9 @@ window.__ModuleLoader__.load({
         if (!this.disposed) {
           this.store.update(s => {
             this.applyConfig(s, payload.config)
-            s.lastChanged = Array.isArray(payload.changed) ? payload.changed : []
+            // 清掉上一轮的失败提示：该端点不返回 deliveryWarning，此前一旦上一轮
+            // 保存失败过，切预设成功后红色错误条会一直挂着。
+            s.error = null
           })
         }
         return payload
@@ -462,6 +506,14 @@ window.__ModuleLoader__.load({
         return payload
       }
 
+      // 预览「未保存的编辑」编译出的提示词：POST 草稿字段，服务端以已保存配置为底
+      // 覆盖后编译。不落盘、不影响生效提示词 —— 返回的 invalid 列出未通过校验、因而未计入
+      // 预览的字段名，供界面如实提示，避免用户以为改动已生效。
+      async previewPrompt(draft) {
+        const payload = await this.postJSON('/api/soul/prompt/preview', draft)
+        return payload
+      }
+
       async dispose() {
         this.disposed = true
       }
@@ -478,6 +530,9 @@ window.__ModuleLoader__.load({
       '.soul-version{flex:0 0 auto;color:var(--dsw-alias-label-tertiary);font-size:11px;font-weight:400;line-height:1.4;white-space:nowrap}',
       '.soul-field{margin-bottom:16px;width:100%}',
       '.soul-field label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--dsw-alias-label-secondary)}',
+      // 与上面的 label 同形，但用于「没有对应控件」的分组标题（如光轨示例预览）：
+      // 那种位置写 <label> 会是一个指向空的标签，语义错误
+      '.soul-field-label{display:block;margin-bottom:6px;font-size:13px;font-weight:500;color:var(--dsw-alias-label-secondary)}',
       '.soul-field select,.soul-field textarea,.soul-field input[type=text]{width:100%;padding:8px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:6px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;box-sizing:border-box}',
       '.soul-field select option{color:var(--dsw-alias-label-primary)}',
       '.soul-section{color-scheme:light}',
@@ -513,6 +568,9 @@ window.__ModuleLoader__.load({
       '.soul-quick-toggle > *{position:relative;z-index:1}',
       '.soul-quick-toggle-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--dsw-alias-label-tertiary)}',
       '.soul-quick-toggle[data-enabled="true"] .soul-quick-toggle-dot{background:var(--dsw-static-green-500,#22c55e);animation:soul-status-pulse 1.8s ease-in-out infinite}',
+      // 保存失败：小圆点转红并停止脉冲（按钮文案不变，故必须靠颜色 + title/aria-label 反馈）
+      '.soul-quick-toggle[data-failed="true"]{border-color:var(--dsw-alias-label-error);color:var(--dsw-alias-label-error)}',
+      '.soul-quick-toggle[data-failed="true"] .soul-quick-toggle-dot{background:var(--dsw-alias-label-error);animation:none}',
       '.soul-quick-toggle:disabled{cursor:wait;opacity:.6}',
       '@keyframes soul-toggle-red-sweep{from{transform:translateX(100%)}to{transform:translateX(-100%)}}',
       '@keyframes soul-toggle-green-sweep{from{transform:translateX(100%)}to{transform:translateX(-100%)}}',
@@ -523,12 +581,40 @@ window.__ModuleLoader__.load({
       '.soul-hint:hover{color:var(--dsw-alias-label-primary)}',
       '.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}',
+      // 键盘聚焦同样要能拿到说明：只有 :hover 的话，键盘 / 读屏用户永远看不到提示
+      '.soul-hint:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px;border-radius:3px}',
+      '.soul-hint:focus-visible .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-persona-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--dsw-alias-border-l2);font-size:12px}',
-      '.soul-persona-name{color:var(--dsw-alias-label-primary);font-weight:500;white-space:nowrap}',
-      '.soul-persona-meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary)}',
-      '.soul-persona-actions{display:flex;gap:10px;white-space:nowrap}',
+      // 人设预设行：三列网格「名称 | 摘要 | 操作」。
+      // 用网格而非 flex 是为了让操作列**列宽固定并右对齐**——内容驱动的 flex 下，
+      // 自建行多一个「删除」按钮会把「使用」挤左约 34px，与内置行的「使用」不在同一竖列。
+      // 名称列同时容纳「★ 标记」「名称」「来源徽标」，徽标是名称的修饰而非操作，
+      // 因此放在这里而不是操作区（放操作区会让内置/自建两类的按钮列错位）。
+      '.soul-persona-row{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px dashed var(--dsw-alias-border-l2);font-size:12px;border-radius:6px}',
+      // 内置行用底色区分来源：不再靠标签占位，横向空间留给摘要
+      '.soul-persona-row[data-builtin="true"]{background:var(--dsw-alias-interactive-bg-hover);border-bottom-color:transparent}',
+      // 名称区：名称 + 徽标。徽标弱化（无边框、更小、更淡），避免与「使用 / 删除」抢注意力
+      '.soul-persona-name{display:flex;align-items:center;gap:6px;min-width:0;color:var(--dsw-alias-label-primary);font-weight:500}',
+      '.soul-persona-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+      '.soul-persona-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary)}',
+      // 操作区：两列等宽槽位，「使用」永远在第 1 列、「删除」永远在第 2 列 ⇒ 跨行严格同列。
+      // 内置行第 2 列为空占位（不留按钮，因为后端也拒绝删除），这正是两类行能对齐的原因。
+      // 操作区：固定宽度 + 两个等宽轨道，「使用」永远在第 1 轨、删除位永远在第 2 轨。
+      //
+      // 为什么不能用 `auto` / `minmax()`：每一行的操作区都是**独立的**网格容器，列宽由该行
+      // 自己的内容算出——内置行第 2 轨为空（宽 0），自建行第 2 轨是「删除」的宽度，于是
+      // 两行的「使用」仍不同列。只有把容器宽度与轨道都定死，跨行几何才必然一致。
+      //
+      // 9em（12px 字号下 108px）对中英文都足够：中文「使用/删除」约 24px，英文
+      // 「Use/Delete」约 22/39px，两轨各 54px 都有余量。客户端词典只提供 zh / en，
+      // 因此这个宽度不需要为其它语言再放宽。
+      '.soul-persona-actions{display:grid;grid-template-columns:1fr 1fr;justify-items:end;align-items:center;gap:4px 10px;width:9em;white-space:nowrap}',
+      // 内置行第 2 轨的空占位：只负责让该轨道存在（不是可点控件，所以用 span）
+      '.soul-persona-slot{display:block;width:0}',
+      // 内置行第 2 列的空占位：只负责撑住列宽，不是可点控件
+      '.soul-persona-slot{display:block;width:0}',
+      '.soul-persona-badge{font-size:10px;line-height:14px;padding:0 5px;border-radius:6px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-tertiary);white-space:nowrap}',
       '.soul-persona-save{display:flex;gap:8px}',
       '.soul-persona-save input[type=text]{flex:1}',
       '.soul-prompt-link{background:none;border:none;padding:0;font-size:12px;color:var(--dsw-alias-label-secondary);cursor:pointer;text-decoration:underline}',
@@ -581,7 +667,12 @@ window.__ModuleLoader__.load({
       '.soul-trail-preview{position:relative;margin-top:6px;padding:16px;border:1px solid var(--dsw-alias-border-l2);border-radius:22px;background:var(--dsw-alias-bg-layer-1)}',
       '.soul-trail-preview[data-soul-trail="on"]{border-color:transparent}',
       '.soul-trail-preview-text{font-size:12px;color:var(--dsw-alias-label-tertiary)}',
-      '@media (prefers-reduced-motion:reduce){.soul-trail-layer{animation:none}}'
+      // 开了「减少动态效果」时：光轨层停动画；提示条（.soul-toast，内联 fadeInOut）
+      // 也要停 —— 它此前被漏掉了，于是每次保存/失败都会平移缩放淡出。
+      // 实测（真实 Chrome + --force-prefers-reduced-motion）：内联 animation 属 author
+      // 普通声明，样式表的普通声明同样能覆盖；这里仍用 !important 以免将来被内联改动
+      // 或选择器顺序变化影响。
+      '@media (prefers-reduced-motion:reduce){.soul-trail-layer{animation:none}.soul-toast{animation:none!important}}'
     ].join('')
 
     const tagId = 'dsh-soul/styles.css'
@@ -610,6 +701,8 @@ window.__ModuleLoader__.load({
       'settings.title': '个性化设置',
       'accordion.filled': '项已填写',
       'accordion.empty': '未填写',
+      // 分组摘要在「拉取失败」时的显示（折叠态下用户只看得到这一行）
+      'accordion.loadFailed': '加载失败',
       'accordion.personas': '个预设',
       'accordion.on': '已开启',
       'accordion.off': '未开启',
@@ -618,6 +711,8 @@ window.__ModuleLoader__.load({
       'quick.disable': '关闭个性化',
       'quick.statusEnabled': '个性化已启用',
       'quick.statusDisabled': '个性化已关闭',
+      // 快捷开关保存失败时的兜底文案（有服务端 error 时优先显示它）
+      'quick.toggleFailed': '保存失败，请重试',
       'group.aboutYou': '关于你',
       'field.nickname': '用户昵称',
       'field.nicknamePlaceholder': '输入你的昵称，回复时会称呼你',
@@ -632,6 +727,10 @@ window.__ModuleLoader__.load({
       'hint.headingLists': '在回复风格和语调的基础上选择额外的自定义特质项。控制回答中标题和列表的使用程度。',
       'field.emoji': '表情符号',
       'hint.emoji': '在回复风格和语调的基础上选择额外的自定义特质项。控制表情符号的使用程度。',
+      'field.tables': '表格',
+      'hint.tables': '在回复风格和语调的基础上选择额外的自定义特质项。控制回答中表格的使用程度。',
+      'field.replyLength': '回复长度',
+      'hint.replyLength': '控制回答的篇幅。选「适中」时不额外约束，由 Agent 自行判断。',
       'field.language': '输出语言',
       'hint.language': '设置 Agent 回复你使用的语言，同时影响 /soul 命令的输出语言。',
       'field.instructions': '自定义指令',
@@ -644,6 +743,10 @@ window.__ModuleLoader__.load({
       'personas.delete': '删除',
       'personas.confirmDelete': '确定删除预设「{name}」？',
       'personas.empty': '暂无人设预设，保存当前配置后可一键切换',
+      // 列表拉取失败（此前是空 catch ⇒ 界面会永远停在「加载中...」）
+      'personas.loadFailed': '人设预设加载失败：{reason}',
+      'personas.builtin': '内置',
+      'personas.hint': '预设只保存 Agent 的人设（风格 / 特质 / 回复长度 / 输出语言 / 自定义指令），不含「关于你」；内置预设随插件提供，不可删除',
       'style.professional': '专业严谨',
       'style.casual': '轻松自然',
       'style.humorous': '幽默风趣',
@@ -655,6 +758,23 @@ window.__ModuleLoader__.load({
       'trait.emoji.default': '默认',
       'trait.emoji.more': '增强（使用较多表情符号）',
       'trait.emoji.less': '减弱（尽量减少使用表情符号）',
+      'trait.tables.default': '默认',
+      'trait.tables.more': '增强（优先用表格呈现对比与多字段信息）',
+      'trait.tables.less': '减弱（避免使用表格，改用列表或段落）',
+      'trait.replyLength.concise': '简洁（只讲要点，不展开）',
+      'trait.replyLength.normal': '适中（不额外约束）',
+      'trait.replyLength.detailed': '详尽（充分展开背景与推理）',
+      // 预设行摘要用的短标签（trait.* 的完整说明太长，一行放不下）
+      'meta.replyLength.concise': '简洁',
+      'meta.replyLength.detailed': '详尽',
+      'meta.headingLists.more': '多列表',
+      'meta.headingLists.less': '少列表',
+      'meta.emoji.more': '多表情',
+      'meta.emoji.less': '少表情',
+      'meta.tables.more': '多用表格',
+      'meta.tables.less': '少用表格',
+      'meta.language.zh': '中文',
+      'meta.language.en': '英文',
       'group.tool': 'Agent 工具',
       'field.toolConfirm': '人设变更需确认',
       'hint.toolConfirm': '开启后，Agent 通过 set_persona 工具做出的修改不会立即生效，需在会话中使用 /soul confirm 确认或 /soul reject 拒绝。',
@@ -666,12 +786,14 @@ window.__ModuleLoader__.load({
       'toast.saved': '✅ 设置已保存',
       'toast.noChanges': '✅ 配置无变化',
       'toast.reset': '✅ 已重置为默认值',
+      'toast.resetRecovered': '✅ 已重置为默认值（损坏的配置已备份）',
+      'toast.resetFailed': '❌ 重置失败',
       'toast.personaSaved': '✅ 预设已保存',
       'toast.personaUsed': '✅ 预设已应用',
+      // 预设含非法取值时服务端只应用合法部分，被跳过的字段必须回报
+      'toast.personaPartial': '⚠ 预设仅部分应用，以下字段取值非法已跳过：{fields}',
       'toast.personaUnchanged': 'ℹ 预设与当前配置一致',
       'toast.personaDeleted': '✅ 预设已删除',
-      'prompt.view': '查看当前生效提示词',
-      'prompt.hide': '收起提示词',
       'prompt.title': '当前生效提示词',
       'prompt.summaryEnabled': '已启用',
       'prompt.summaryDisabled': '已禁用',
@@ -679,6 +801,12 @@ window.__ModuleLoader__.load({
       'prompt.loading': '提示词加载中...',
       'prompt.empty': '（个性化已禁用，提示词为空）',
       'prompt.chars': '当前字符数：{n}',
+      'prompt.titleDraft': '保存后将生效的提示词',
+      'prompt.summaryDraft': '{n} 字符 · 未保存',
+      'prompt.invalid': '以下字段未通过校验，未计入本次预览：{fields}',
+      // 列表分隔符：中文用顿号、英文用逗号 + 空格。此前英文界面里也硬编码「、」，
+      // 会渲染成 `...excluded from this preview: style、tables`（中英混排）。
+      'common.listSep': '、',
       'toast.saveFailed': '❌ 保存失败，请检查配置',
       'trail.title': '输入框光轨',
       'trail.enable': '启用输入框光轨',
@@ -701,6 +829,8 @@ window.__ModuleLoader__.load({
       'settings.title': 'Personalization Settings',
       'accordion.filled': 'fields filled',
       'accordion.empty': 'No fields set',
+      // 分组摘要在「拉取失败」时的显示（折叠态下用户只看得到这一行）
+      'accordion.loadFailed': 'Failed to load',
       'accordion.personas': 'personas',
       'accordion.on': 'enabled',
       'accordion.off': 'disabled',
@@ -709,6 +839,8 @@ window.__ModuleLoader__.load({
       'quick.disable': 'Disable personalization',
       'quick.statusEnabled': 'Personalization enabled',
       'quick.statusDisabled': 'Personalization disabled',
+      // 快捷开关保存失败时的兜底文案（有服务端 error 时优先显示它）
+      'quick.toggleFailed': 'Save failed, please retry',
       'group.aboutYou': 'About you',
       'field.nickname': 'Nickname',
       'field.nicknamePlaceholder': 'Your nickname — the agent will address you by it',
@@ -723,6 +855,10 @@ window.__ModuleLoader__.load({
       '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.tables': 'Tables',
+      'hint.tables': 'An extra trait layered on top of style & tone. Controls how much answers rely on tables.',
+      'field.replyLength': 'Reply length',
+      'hint.replyLength': 'Controls how long answers are. "Balanced" adds no constraint and lets the agent decide.',
       'field.language': 'Output language',
       'hint.language': 'Sets the language the agent replies in; also affects the /soul command output.',
       'field.instructions': 'Custom instructions',
@@ -735,6 +871,10 @@ window.__ModuleLoader__.load({
       'personas.delete': 'Delete',
       'personas.confirmDelete': 'Delete persona "{name}"?',
       'personas.empty': 'No personas yet — save the current config to switch with one click',
+      // 列表拉取失败（此前是空 catch ⇒ 界面会永远停在「加载中...」）
+      'personas.loadFailed': 'Failed to load personas: {reason}',
+      'personas.builtin': 'Built-in',
+      'personas.hint': 'A persona saves the agent personality only (style / traits / reply length / reply language / custom instructions), never your own identity fields; built-ins ship with the plugin and cannot be deleted',
       'style.professional': 'Professional',
       'style.casual': 'Casual',
       'style.humorous': 'Humorous',
@@ -746,6 +886,23 @@ window.__ModuleLoader__.load({
       'trait.emoji.default': 'Default',
       'trait.emoji.more': 'More (frequent emoji usage)',
       'trait.emoji.less': 'Less (minimal emoji usage)',
+      'trait.tables.default': 'Default',
+      'trait.tables.more': 'More (prefer tables for comparisons and multi-field data)',
+      'trait.tables.less': 'Less (avoid tables; use lists or paragraphs)',
+      'trait.replyLength.concise': 'Concise (key points only)',
+      'trait.replyLength.normal': 'Balanced (no extra constraint)',
+      'trait.replyLength.detailed': 'Detailed (expand background and reasoning)',
+      // Short labels for the persona row summary (trait.* full text is too long)
+      'meta.replyLength.concise': 'Concise',
+      'meta.replyLength.detailed': 'Detailed',
+      'meta.headingLists.more': 'More lists',
+      'meta.headingLists.less': 'Fewer lists',
+      'meta.emoji.more': 'More emoji',
+      'meta.emoji.less': 'Less emoji',
+      'meta.tables.more': 'More tables',
+      'meta.tables.less': 'Fewer tables',
+      'meta.language.zh': 'Chinese',
+      'meta.language.en': 'English',
       'group.tool': 'Agent tools',
       'field.toolConfirm': 'Require confirmation for persona changes',
       'hint.toolConfirm': 'When enabled, changes made by the agent through the set_persona tool do not apply immediately — confirm with /soul confirm or reject with /soul reject in the conversation.',
@@ -757,12 +914,14 @@ window.__ModuleLoader__.load({
       'toast.saved': '✅ Settings saved',
       'toast.noChanges': '✅ No changes to save',
       'toast.reset': '✅ Reset to defaults',
+      'toast.resetRecovered': '✅ Reset to defaults (the damaged config was backed up)',
+      'toast.resetFailed': '❌ Reset failed',
       'toast.personaSaved': '✅ Persona saved',
       'toast.personaUsed': '✅ Persona applied',
+      // 预设含非法取值时服务端只应用合法部分，被跳过的字段必须回报
+      'toast.personaPartial': '⚠ Persona applied partially; skipped as invalid: {fields}',
       'toast.personaUnchanged': 'ℹ Persona matches current config',
       'toast.personaDeleted': '✅ Persona deleted',
-      'prompt.view': 'View the active system prompt',
-      'prompt.hide': 'Hide the prompt',
       'prompt.title': 'Active system prompt',
       'prompt.summaryEnabled': 'Enabled',
       'prompt.summaryDisabled': 'Disabled',
@@ -770,6 +929,12 @@ window.__ModuleLoader__.load({
       'prompt.loading': 'Loading prompt...',
       'prompt.empty': '(personalization disabled — the prompt is empty)',
       'prompt.chars': 'Current character count: {n}',
+      'prompt.titleDraft': 'Prompt after saving',
+      'prompt.summaryDraft': '{n} chars · unsaved',
+      'prompt.invalid': 'These fields failed validation and are excluded from this preview: {fields}',
+      // 列表分隔符：中文用顿号、英文用逗号 + 空格。此前英文界面里也硬编码「、」，
+      // 会渲染成 `...excluded from this preview: style、tables`（中英混排）。
+      'common.listSep': ', ',
       'toast.saveFailed': '❌ Save failed — please check the config',
       'trail.title': 'Composer light trail',
       'trail.enable': 'Enable composer light trail',
@@ -811,6 +976,28 @@ window.__ModuleLoader__.load({
     // 选项取值（label 走词典；取值与 lib/config.mjs 的合法值保持一致）
     const STYLE_VALUES = ['professional', 'casual', 'humorous', 'roast', 'efficient']
     const TRAIT_VALUES = ['default', 'more', 'less']
+    // 回复长度偏好（与宿主 lib/config.mjs 的 REPLY_LENGTH_VALUES 对齐）
+    const REPLY_LENGTH_VALUES = ['concise', 'normal', 'detailed']
+    // 输出语言（与宿主 lib/config.mjs 的 LANGUAGE_VALUES 对齐）
+    const LANGUAGE_VALUES = ['zh', 'en']
+
+    // 预设行摘要只显示「与默认值不同」的字段——若把 10 个字段全列出来，每行都是
+    // 一长串「默认 / 适中」，反而看不出两个预设到底差在哪。默认值须与宿主
+    // lib/config.mjs 的 DEFAULT_CONFIG 保持一致。
+    const META_FIELD_VALUES = {
+      replyLength: REPLY_LENGTH_VALUES,
+      headingLists: TRAIT_VALUES,
+      emoji: TRAIT_VALUES,
+      tables: TRAIT_VALUES,
+      language: LANGUAGE_VALUES
+    }
+    const META_FIELD_DEFAULTS = {
+      replyLength: 'normal',
+      headingLists: 'default',
+      emoji: 'default',
+      tables: 'default',
+      language: 'zh'
+    }
     // 输出语言选项（两种 UI 语言下均自解释，不进词典）
     const LANGUAGE_OPTIONS = [
       { value: 'zh', label: '中文' },
@@ -818,11 +1005,19 @@ window.__ModuleLoader__.load({
     ]
 
     // 表单字段与 store 字段的一一对应（dirty 检测与保存载荷共用）
-    const FIELD_KEYS = ['enabled', 'nickname', 'occupation', 'bio', 'style', 'headingLists', 'emoji', 'language', 'customInstructions', 'requireToolConfirmation', 'trailEnabled', 'trailColor', 'trailSpeed', 'trailWidth']
+    const FIELD_KEYS = ['enabled', 'nickname', 'occupation', 'bio', 'style', 'headingLists', 'emoji', 'tables', 'replyLength', 'language', 'customInstructions', 'requireToolConfirmation', 'trailEnabled', 'trailColor', 'trailSpeed', 'trailWidth']
 
-    // 提示词小图标：hover 展示说明文字
+    // 其中真正参与 compilePrompt 的字段子集。
+    // 提示词预览只依赖它们：改光轨颜色 / 粗细、切换 set_persona 确认模式都不会改变
+    // 编译结果，不该因此重新请求，也不该让预览被标成「未保存」。
+    const PROMPT_FIELD_KEYS = ['enabled', 'nickname', 'occupation', 'bio', 'style', 'headingLists', 'emoji', 'tables', 'replyLength', 'language', 'customInstructions']
+
+    // 提示词小图标：hover / 键盘聚焦都展示说明文字。
+    // 此前只有 :hover 可达，且提示节点用 visibility:hidden —— 那会把它移出无障碍树，
+    // 键盘与读屏用户拿不到字段说明。这里补 tabIndex 让它可以聚焦，并在 :focus-visible
+    // 下显示提示（同时保留 aria-label，聚焦时读屏会念出说明本身）。
     function SoulHint(props) {
-      return e('span', { className: 'soul-hint', 'aria-label': props.text },
+      return e('span', { className: 'soul-hint', 'aria-label': props.text, tabIndex: 0 },
         e('svg', {
           viewBox: '0 0 24 24',
           width: 14,
@@ -869,18 +1064,28 @@ window.__ModuleLoader__.load({
       const enabled = state.enabled === true
       const busy = state.saving === true
 
+      // 保存失败的本地标记：失败时 store.error 会带上原因，但按钮本身此前毫无反馈
+      // （enabled 没变 ⇒ 外观与文案都不变），用户视角是「点了没反应」。
+      const [failed, setFailed] = React.useState(false)
+      const failureText = failed ? (state.error || t('quick.toggleFailed')) : null
+
       const toggle = async () => {
         if (busy) return
-        await controller.saveConfig({ enabled: !enabled })
+        setFailed(false)
+        const payload = await controller.saveConfig({ enabled: !enabled })
+        // saveConfig 失败时返回 undefined；成功时返回载荷
+        setFailed(!payload)
       }
 
       return e('button', {
         type: 'button',
-        className: 'soul-quick-toggle',
+        className: failed ? 'soul-quick-toggle soul-quick-toggle-failed' : 'soul-quick-toggle',
         'data-enabled': enabled ? 'true' : 'false',
+        'data-failed': failed ? 'true' : 'false',
         'aria-pressed': enabled,
-        'aria-label': enabled ? t('quick.disable') : t('quick.enable'),
-        title: enabled ? t('quick.disable') : t('quick.enable'),
+        // 失败时把原因写进 aria-label / title：否则按钮外观不变，用户无从得知保存失败
+        'aria-label': failureText || (enabled ? t('quick.disable') : t('quick.enable')),
+        title: failureText || (enabled ? t('quick.disable') : t('quick.enable')),
         disabled: busy,
         onClick: toggle
       },
@@ -894,7 +1099,7 @@ window.__ModuleLoader__.load({
       // 渲染器按槽位 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, requireToolConfirmation, trailEnabled, trailColor, trailSpeed, trailWidth, personas, activePersona, loading, saving, error } = state
+      const { enabled, nickname, occupation, bio, style, headingLists, emoji, tables, replyLength, language, customInstructions, requireToolConfirmation, trailEnabled, trailColor, trailSpeed, trailWidth, personas, activePersona, personasError, saving, error } = state
 
       const [localEnabled, setLocalEnabled] = React.useState(enabled)
       const [localNickname, setLocalNickname] = React.useState(nickname || '')
@@ -903,6 +1108,8 @@ window.__ModuleLoader__.load({
       const [localStyle, setLocalStyle] = React.useState(style)
       const [localHeadingLists, setLocalHeadingLists] = React.useState(headingLists)
       const [localEmoji, setLocalEmoji] = React.useState(emoji)
+      const [localTables, setLocalTables] = React.useState(tables)
+      const [localReplyLength, setLocalReplyLength] = React.useState(replyLength)
       const [localLanguage, setLocalLanguage] = React.useState(language || 'zh')
       const [localInstructions, setLocalInstructions] = React.useState(customInstructions)
       const [localToolConfirm, setLocalToolConfirm] = React.useState(requireToolConfirmation === true)
@@ -916,6 +1123,10 @@ window.__ModuleLoader__.load({
       const [promptText, setPromptText] = React.useState('')
       const [promptLoading, setPromptLoading] = React.useState(false)
       const [promptError, setPromptError] = React.useState(null)
+      // 当前预览的是「未保存的编辑」编译结果（true）还是已生效的提示词（false）
+      const [promptIsDraft, setPromptIsDraft] = React.useState(false)
+      // 未通过校验、因而未计入预览的字段名（服务端返回 invalid）
+      const [promptInvalid, setPromptInvalid] = React.useState([])
       const [openSection, setOpenSection] = React.useState(() => {
         try {
           return globalThis.localStorage?.getItem('dsh-soul:open-section') || 'about'
@@ -934,7 +1145,14 @@ window.__ModuleLoader__.load({
       }, [openSection])
 
       // 同步状态
+      // 用 store 回填本地表单。
+      //
+      // **dirty 期间不回填**：否则任何客户端侧对共享 store 的写入（例如快捷开关成功后
+      // 的 applyConfig）都会让依赖变化、本 effect 重跑，把用户正在编辑、尚未保存的
+      // 内容整片覆盖 —— 且没有任何提示。轮询路径（下方 refresh）已有 `if (dirty ||
+      // saving) return` 的保护，这里此前漏了同一道保护。
       React.useEffect(() => {
+        if (dirty || saving) return
         setLocalEnabled(enabled)
         setLocalNickname(nickname || '')
         setLocalOccupation(occupation || '')
@@ -942,6 +1160,8 @@ window.__ModuleLoader__.load({
         setLocalStyle(style)
         setLocalHeadingLists(headingLists)
         setLocalEmoji(emoji)
+        setLocalTables(tables)
+        setLocalReplyLength(replyLength)
         setLocalLanguage(language || 'zh')
         setLocalInstructions(customInstructions)
         setLocalToolConfirm(requireToolConfirmation === true)
@@ -949,7 +1169,7 @@ window.__ModuleLoader__.load({
         setLocalTrailColor(trailColor || TRAIL_COLOR_FALLBACK)
         setLocalTrailSpeed(trailSpeed || 'slow')
         setLocalTrailWidth(trailWidth || 'thin')
-      }, [enabled, nickname, occupation, bio, style, headingLists, emoji, language, customInstructions, requireToolConfirmation, trailEnabled, trailColor, trailSpeed, trailWidth])
+      }, [enabled, nickname, occupation, bio, style, headingLists, emoji, tables, replyLength, language, customInstructions, requireToolConfirmation, trailEnabled, trailColor, trailSpeed, trailWidth])
 
       // toast 自动消失
       React.useEffect(() => {
@@ -959,17 +1179,47 @@ window.__ModuleLoader__.load({
         }
       }, [toast])
 
-      // dirty 检测：本地表单与已保存配置逐字段比较
-      const savedMap = { enabled, nickname, occupation, bio, style, headingLists, emoji, language, customInstructions, requireToolConfirmation, trailEnabled, trailColor, trailSpeed, trailWidth }
-      const localMap = { enabled: localEnabled, nickname: localNickname, occupation: localOccupation, bio: localBio, style: localStyle, headingLists: localHeadingLists, emoji: localEmoji, language: localLanguage, customInstructions: localInstructions, requireToolConfirmation: localToolConfirm, trailEnabled: localTrailEnabled, trailColor: localTrailColor, trailSpeed: localTrailSpeed, trailWidth: localTrailWidth }
-      const dirty = FIELD_KEYS.some((key) => savedMap[key] !== localMap[key])
+      // dirty 检测：本地表单与已保存配置逐字段比较。
+      //
+      // 字符串一律先 trim 再比：服务端对每个字符串字段都会 trim（文本字段 trim、枚举值
+      // trim、颜色 trim），所以「只改了首尾空格」落盘后与原值完全相同。此前按原始串
+      // 比较会出现「用户敲了个空格 → 保存按钮亮了 → 保存成功却提示『配置无变化』」。
+      // 不另造一份 TEXT_FIELDS 复刻表：那会多一处需要手工同步的常量。
+      const sameValue = (a, b) => (typeof a === 'string' && typeof b === 'string'
+        ? a.trim() === b.trim()
+        : a === b)
+      const savedMap = { enabled, nickname, occupation, bio, style, headingLists, emoji, tables, replyLength, language, customInstructions, requireToolConfirmation, trailEnabled, trailColor, trailSpeed, trailWidth }
+      const localMap = { enabled: localEnabled, nickname: localNickname, occupation: localOccupation, bio: localBio, style: localStyle, headingLists: localHeadingLists, emoji: localEmoji, tables: localTables, replyLength: localReplyLength, language: localLanguage, customInstructions: localInstructions, requireToolConfirmation: localToolConfirm, trailEnabled: localTrailEnabled, trailColor: localTrailColor, trailSpeed: localTrailSpeed, trailWidth: localTrailWidth }
+      const dirty = FIELD_KEYS.some((key) => !sameValue(savedMap[key], localMap[key]))
+
+      // 预览是否反映未保存的编辑：只看参与编译的字段（见 PROMPT_FIELD_KEYS）。
+      // 这里用 localMap/savedMap 逐字段比，而不是复用上面的 dirty —— 改光轨颜色会让
+      // dirty 为真，但那不影响提示词，此时预览仍是「已生效内容」，标成草稿反而误导。
+      // 必须与 dirty 用**同一个** sameValue 判据：否则「只改了首尾空格」时 dirty 为假
+      // （保存按钮禁用）而 promptDirty 为真（预览标成草稿），两处自相矛盾。
+      const promptDirty = PROMPT_FIELD_KEYS.some((key) => !sameValue(savedMap[key], localMap[key]))
+      // 草稿指纹：仅在影响编译的字段真的变化时才重新预览
+      const promptDraftKey = PROMPT_FIELD_KEYS.map((key) => String(localMap[key])).join('\u0000')
+
+      // 只把参与编译的字段发给预览端点：光轨等字段的校验失败不该出现在提示词预览里
+      const promptDraft = () => {
+        const out = {}
+        for (const key of PROMPT_FIELD_KEYS) out[key] = localMap[key]
+        return out
+      }
 
+      // 有未保存编辑时预览草稿（＝保存后真正会生效的内容），否则预览已生效提示词
       const loadPrompt = async () => {
+        const asDraft = promptDirty
         setPromptLoading(true)
         setPromptError(null)
         try {
-          const payload = await controller.fetchPrompt()
+          const payload = asDraft
+            ? await controller.previewPrompt(promptDraft())
+            : await controller.fetchPrompt()
           setPromptText(payload.prompt || '')
+          setPromptInvalid(Array.isArray(payload.invalid) ? payload.invalid : [])
+          setPromptIsDraft(asDraft)
         } catch (err) {
           setPromptError(messageOf(err))
         } finally {
@@ -977,21 +1227,27 @@ window.__ModuleLoader__.load({
         }
       }
 
-      const togglePrompt = async () => {
-        const next = !showPrompt
-        setShowPrompt(next)
-        if (next) await loadPrompt()
-      }
+      // 展开/收起只切状态；编译由下方 effect 统一驱动（唯一入口，避免重复请求）
+      const togglePrompt = () => setShowPrompt((open) => !open)
 
       const loadPersonas = async () => {
         try {
           const payload = await controller.fetchPersonas()
           controller.store.update((s) => {
-            s.personas = payload.personas
+            // 内容相同就保留旧引用：每 2s 轮询都会重新解析出**新对象**，若直接赋值，
+            // store 的浅比较永远判为「变了」⇒ 上面那层去重失效，整页仍每 2s 白重渲染。
+            s.personas = samePersonas(s.personas, payload.personas) ? s.personas : payload.personas
             s.activePersona = payload.activeName
+            // 拉取成功：清掉上一次的失败痕迹（否则失败后即便恢复，提示会一直挂着）
+            s.personasError = null
+          })
+        } catch (err) {
+          // 预设列表加载失败不打断主配置界面 —— 但必须**留下痕迹**：
+          // 此前是空 catch，personas 永远是 null，摘要与面板就一直显示「加载中...」，
+          // 与「真的还没有预设」无从区分，也没有任何失败提示。
+          controller.store.update((s) => {
+            s.personasError = messageOf(err)
           })
-        } catch {
-          // 预设列表加载失败不打断主配置界面
         }
       }
 
@@ -1017,6 +1273,28 @@ window.__ModuleLoader__.load({
         }
       }, [controller, dirty, saving])
 
+      // 提示词预览的编译入口（唯一）。
+      // 展开时立即编译一次；此后只要影响编译的字段或脏状态变化，停止 400ms 再编译 —
+      // 边改边看保存后真正会生效的内容。
+      // promptSettled 用来区分「刚展开」与「展开后字段又变了」：否则展开这一动作自身
+      // 会先立即编译一次、再被防抖重复编译一次。
+      // 依赖里刻意不放 loadPrompt（组件体内每次渲染都会重建函数，放进去会无限循环）；
+      // 两个依赖项任一变化都会让 effect 带着最新闭包重跑，闭包不会过期。
+      const promptSettled = React.useRef(false)
+      React.useEffect(() => {
+        if (!showPrompt) {
+          promptSettled.current = false
+          return
+        }
+        if (!promptSettled.current) {
+          promptSettled.current = true
+          void loadPrompt()
+          return
+        }
+        const timer = setTimeout(() => { void loadPrompt() }, 400)
+        return () => clearTimeout(timer)
+      }, [showPrompt, promptDraftKey, promptDirty])
+
       const handleSave = async () => {
         const payload = await controller.saveConfig(localMap)
         // saveConfig 失败时内部已记录 error 并返回 undefined：给出失败提示，而非误报「无变化」
@@ -1028,13 +1306,25 @@ window.__ModuleLoader__.load({
           text: Array.isArray(payload.changed) && payload.changed.length > 0 ? t('toast.saved') : t('toast.noChanges'),
           kind: 'success'
         })
-        if (showPrompt) await loadPrompt()
+        // 预览刷新交由下方 effect 统一驱动（保存 / 重置 / 应用预设都会改变
+        // promptDraftKey 或 promptDirty，effect 自会带上最新闭包重编译）
       }
 
       const handleReset = async () => {
-        await controller.resetConfig()
-        setToast({ text: t('toast.reset'), kind: 'success' })
-        if (showPrompt) await loadPrompt()
+        // resetConfig 失败时内部已记录 error 并返回 undefined。
+        // 此前这里无条件报「已重置」——失败也显示成功，正好把「配置损坏时唯一的自救操作
+        // 没成功」这件事藏了起来。
+        const payload = await controller.resetConfig()
+        if (!payload) {
+          setToast({ text: t('toast.resetFailed'), kind: 'error' })
+          return
+        }
+        setToast({
+          text: payload.backupPath ? t('toast.resetRecovered') : t('toast.reset'),
+          kind: 'success'
+        })
+        // 预览刷新交由下方 effect 统一驱动（保存 / 重置 / 应用预设都会改变
+        // promptDraftKey 或 promptDirty，effect 自会带上最新闭包重编译）
       }
 
       const handleSavePersona = async () => {
@@ -1054,8 +1344,16 @@ window.__ModuleLoader__.load({
         try {
           const payload = await controller.usePersona(name)
           await loadPersonas()
-          setToast({ text: payload && payload.unchanged ? t('toast.personaUnchanged') : t('toast.personaUsed'), kind: 'success' })
-          if (showPrompt) await loadPrompt()
+          // 服务端回报了被丢弃的非法字段 ⇒ 预设只被部分应用，必须说出来而不是报「已应用」
+          const invalid = Array.isArray(payload && payload.invalid) ? payload.invalid : []
+          const toast = invalid.length > 0
+            ? { text: t('toast.personaPartial', { fields: invalid.join(', ') }), kind: 'error' }
+            : (payload && payload.unchanged
+              ? { text: t('toast.personaUnchanged'), kind: 'success' }
+              : { text: t('toast.personaUsed'), kind: 'success' })
+          setToast(toast)
+          // 预览刷新交由下方 effect 统一驱动（保存 / 重置 / 应用预设都会改变
+        // promptDraftKey 或 promptDirty，effect 自会带上最新闭包重编译）
         } catch (err) {
           setToast({ text: messageOf(err), kind: 'error' })
         }
@@ -1075,24 +1373,47 @@ window.__ModuleLoader__.load({
       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 personaNames = personas ? Object.keys(personas).sort() : null
+      const tablesOptions = TRAIT_VALUES.map((value) => ({ value, label: t(`trait.tables.${value}`) }))
+      const replyLengthOptions = REPLY_LENGTH_VALUES.map((value) => ({ value, label: t(`trait.replyLength.${value}`) }))
+      // 内置预设排在前面（沿用宿主返回的定义顺序，便于发现），用户预设紧随其后。
+      // Array.prototype.sort 自 ES2019 起保证稳定，同类项因此维持原有插入顺序。
+      const personaNames = personas
+        ? Object.keys(personas).sort((a, b) => {
+          const aBuiltin = personas[a] && personas[a].builtin ? 0 : 1
+          const bBuiltin = personas[b] && personas[b].builtin ? 0 : 1
+          return aBuiltin - bBuiltin
+        })
+        : null
       const aboutFilled = [localNickname, localOccupation, localBio].filter(Boolean).length
       const aboutSummary = aboutFilled > 0 ? `${aboutFilled}/3 ${t('accordion.filled')}` : t('accordion.empty')
       const traitsSummary = t(`style.${localStyle}`)
-      const personasSummary = personas === null ? t('status.loading') : `${Object.keys(personas).length} ${t('accordion.personas')}`
+      // 失败时摘要也要区分（折叠状态下用户只看得到这一行）
+      const personasSummary = personasError
+        ? t('accordion.loadFailed')
+        : (personas === null ? t('status.loading') : `${Object.keys(personas).length} ${t('accordion.personas')}`)
       const toolSummary = localToolConfirm ? t('accordion.on') : t('accordion.off')
       const promptSummary = promptText.length > 0
-        ? t('prompt.summaryChars', { n: String(promptText.length) })
+        ? t(promptIsDraft ? 'prompt.summaryDraft' : 'prompt.summaryChars', { n: String(promptText.length) })
         : (enabled ? t('prompt.summaryEnabled') : t('prompt.summaryDisabled'))
       const toggleSection = (section) => () => {
         setOpenSection(current => current === section ? null : section)
       }
 
+      // 预设行摘要：风格 + 所有「偏离默认值」的人设维度。
+      // 预设只描述 Agent 的人格，不含「关于你」（昵称 / 职业 / 介绍）—— 那是使用者
+      // 的身份信息，不随预设切换。所以摘要里不再出现昵称，剩下的恰好也是比较两个
+      // 预设时最需要看到的信息。
       const personaRowMeta = (entry) => {
+        const row = entry || {}
         const parts = []
-        if (entry && STYLE_VALUES.includes(entry.style)) parts.push(t(`style.${entry.style}`))
-        else if (entry && entry.style) parts.push(entry.style)
-        if (entry && entry.nickname) parts.push(entry.nickname)
+        if (STYLE_VALUES.includes(row.style)) parts.push(t(`style.${row.style}`))
+        else if (row.style) parts.push(row.style)
+        for (const [field, allowed] of Object.entries(META_FIELD_VALUES)) {
+          const value = row[field]
+          if (!value || value === META_FIELD_DEFAULTS[field]) continue
+          if (!allowed.includes(value)) continue
+          parts.push(t(`meta.${field}.${value}`))
+        }
         return parts.join(' · ')
       }
 
@@ -1197,6 +1518,32 @@ window.__ModuleLoader__.load({
                 ...emojiOptions.map(opt => e('option', { key: opt.value, value: opt.value }, opt.label))
               )
             ),
+            e('div', { className: 'soul-field' },
+              e('label', { htmlFor: 'soul-tables' },
+                t('field.tables'),
+                e(SoulHint, { text: t('hint.tables') })
+              ),
+              e('select', {
+                id: 'soul-tables',
+                value: localTables,
+                onChange: (ev) => setLocalTables(ev.target.value)
+              },
+                ...tablesOptions.map(opt => e('option', { key: opt.value, value: opt.value }, opt.label))
+              )
+            ),
+            e('div', { className: 'soul-field' },
+              e('label', { htmlFor: 'soul-replyLength' },
+                t('field.replyLength'),
+                e(SoulHint, { text: t('hint.replyLength') })
+              ),
+              e('select', {
+                id: 'soul-replyLength',
+                value: localReplyLength,
+                onChange: (ev) => setLocalReplyLength(ev.target.value)
+              },
+                ...replyLengthOptions.map(opt => e('option', { key: opt.value, value: opt.value }, opt.label))
+              )
+            ),
             e('div', { className: 'soul-field' },
               e('label', { htmlFor: 'soul-language' },
                 t('field.language'),
@@ -1232,23 +1579,38 @@ window.__ModuleLoader__.load({
             onToggle: toggleSection('personas')
           },
             e('div', { className: 'soul-field' },
-              personaNames === null
+              // 加载失败优先于「加载中」：否则失败时界面永远停在加载态，与「还没有预设」无从区分
+              personasError
+                ? e('div', { className: 'soul-error' }, t('personas.loadFailed', { reason: personasError }))
+                : (personaNames === null
                 ? e('div', { className: 'soul-status' }, t('status.loading'))
                 : (personaNames.length === 0
                   ? e('div', { className: 'soul-status' }, t('personas.empty'))
                   : e(Fragment, null,
                     ...personaNames.map((name) => {
                       const entry = personas[name] || {}
-                      return e('div', { className: 'soul-persona-row', key: name },
-                        e('span', { className: 'soul-persona-name' }, name === activePersona ? `★ ${name}` : name),
+                      const builtin = !!entry.builtin
+                      // data-builtin 同时承担两件事：内置行的底色区分，以及回归断言的可断言锚点
+                      return e('div', { className: 'soul-persona-row', key: name, 'data-builtin': builtin ? 'true' : 'false' },
+                        e('span', { className: 'soul-persona-name' },
+                          e('span', { className: 'soul-persona-label' }, name === activePersona ? `★ ${name}` : name),
+                          // 来源徽标紧贴名称：它说明「这个预设从哪来」，属于名称的修饰而非操作，
+                          // 放在操作区会把「使用」挤出竖列
+                          builtin && e('span', { className: 'soul-persona-badge' }, t('personas.builtin'))
+                        ),
                         e('span', { className: 'soul-persona-meta' }, personaRowMeta(entry)),
                         e('span', { className: 'soul-persona-actions' },
                           e('button', { type: 'button', className: 'soul-prompt-link', onClick: () => handleUsePersona(name) }, t('personas.use')),
-                          e('button', { type: 'button', className: 'soul-prompt-link soul-persona-danger', onClick: () => handleDeletePersona(name) }, t('personas.delete'))
+                          // 内置预设不提供删除（后端也拒绝）：留一个空占位槽，让「使用」与
+                          // 自建行严格同列。这里刻意不是按钮，避免造出一个点了没反应的控件。
+                          builtin
+                            ? e('span', { className: 'soul-persona-slot', 'aria-hidden': true })
+                            : e('button', { type: 'button', className: 'soul-prompt-link soul-persona-danger', onClick: () => handleDeletePersona(name) }, t('personas.delete'))
                         )
                       )
                     })
                   ))
+                )
             ),
             e('div', { className: 'soul-field soul-persona-save' },
               e('input', {
@@ -1262,7 +1624,8 @@ window.__ModuleLoader__.load({
                 onClick: handleSavePersona,
                 disabled: saving || !personaName.trim()
               }, t('personas.save'))
-            )
+            ),
+            e('div', { className: 'soul-status' }, t('personas.hint'))
           ),
 
           e(SoulAccordion, {
@@ -1348,9 +1711,10 @@ window.__ModuleLoader__.load({
                 )
               ),
               e('div', { className: 'soul-field' },
-                e('label', null, t('trail.preview')),
+                // 预览示例不是表单控件，没有可关联的 id —— 用 label 会是「指向空的标签」，
+                // 所以改用同风格的 div（样式见 .soul-field-label）
+                e('div', { className: 'soul-field-label' }, t('trail.preview')),
                 e(SoulTrailPreview, {
-                  enabled: localTrailEnabled,
                   color: localTrailColor,
                   speed: localTrailSpeed,
                   width: localTrailWidth,
@@ -1363,7 +1727,7 @@ window.__ModuleLoader__.load({
 
         e(SoulAccordion, {
           id: 'soul-prompt',
-          title: t('prompt.title'),
+          title: t(promptIsDraft ? 'prompt.titleDraft' : 'prompt.title'),
           summary: promptSummary,
           open: showPrompt,
           onToggle: togglePrompt
@@ -1374,7 +1738,9 @@ window.__ModuleLoader__.load({
               ? 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) }))
+                e('div', { className: 'soul-status' }, t('prompt.chars', { n: String(promptText.length) })),
+                promptInvalid.length > 0 && e('div', { className: 'soul-error' },
+                  t('prompt.invalid', { fields: promptInvalid.join(t('common.listSep')) }))
               ))
         ),
 
@@ -1396,6 +1762,10 @@ window.__ModuleLoader__.load({
 
         toast && e('div', {
           className: `soul-toast ${toast.kind === 'error' ? 'soul-toast-error' : 'soul-toast-success'}`,
+          // 读屏播报：toast 2s 后自动移除（见上方计时器），没有 aria-live 时
+          // 保存成功 / 失败对读屏用户等于没有发生。
+          role: toast.kind === 'error' ? 'alert' : 'status',
+          'aria-live': toast.kind === 'error' ? 'assertive' : 'polite',
           style: {
             animation: 'fadeInOut 2s ease-in-out'
           }
@@ -1409,33 +1779,29 @@ window.__ModuleLoader__.load({
 
     // 设置页内的实时示例：与线上光轨共用同一渲染层、同一挂载点解析（resolveTrailMountPoint）
     // 与同一份 CSS，因此「示例所见」即「回复时所得」；颜色/速度/粗细随表单实时联动。
+    //
+    // 本组件**只在光轨开启时**被渲染（见调用处的 `localTrailEnabled &&`），所以它没有
+    // 「关闭」这一态：此前它接了一个 `enabled` prop 并写了 off 分支，那是永不执行的死
+    // 代码（且 `data-soul-trail="off"` 会连带影响 CSS 选择器），现在去掉。
     function SoulTrailPreview(props) {
       const t = typeof props.t === 'function' ? props.t : FALLBACK_T
       const hostRef = React.useRef(null)
       const anchorRef = React.useRef(null)
-      const mountedRef = React.useRef(null)
 
       React.useEffect(() => {
         const host = hostRef.current
         if (!host) return undefined
         // 与线上 SoulTrail 同一条路径：解析出的挂载点即示例内的零高度锚点 .soul-trail-anchor
         const mounted = mountTrailRing(host, resolveTrailMountPoint(host, anchorRef.current))
-        mountedRef.current = mounted
-        return () => {
-          mountedRef.current = null
-          mounted.unmount()
-        }
+        // 环的内联样式以 display:none 起（见 mountTrailRing），必须显式显形一次
+        mounted.setVisible(true)
+        return () => mounted.unmount()
       }, [])
 
-      React.useEffect(() => {
-        const mounted = mountedRef.current
-        if (mounted) mounted.setVisible(props.enabled !== false)
-      }, [props.enabled])
-
       return e('div', {
         ref: hostRef,
         className: 'soul-trail-preview',
-        'data-soul-trail': props.enabled ? 'on' : 'off',
+        'data-soul-trail': 'on',
         'data-soul-trail-speed': props.speed || 'slow',
         'data-soul-trail-width': props.width || 'thin',
         style: { '--soul-trail-color': safeTrailColor(props.color) }
@@ -1528,13 +1894,84 @@ window.__ModuleLoader__.load({
       // 导航 label / 图标替换用的翻译函数（bind 返回的函数在调用时读取当前语言）
       const navT = ctx.locale.bind(NS)
 
-      // DSH 0.1.x 不支持 settings.section 的 icon 字段
-      // 使用 DOM 操作动态替换图标（类似 dsh-better-sidebar 的方案）
+      // DSH 的设置导航图标是壳层硬编码的 id → 图标映射（见 ui-settings-general 的
+      // navIcon()：account/models/agent-presets/plugins/archived-sessions，其余一律
+      // 回退成设置齿轮），插件无法通过槽位声明自己的图标（settings.section 的选项
+      // 只有 id / order / label）。因此改用 DOM 替换，把齿轮换成与插件图标同一套
+      // 几何的「灵魂火花 + 光轨」（类似 dsh-better-sidebar 的方案）。
       const SOUL_NAV_MARKER = 'data-soul-settings-nav'
       const SOUL_ICON_MARKER = 'data-soul-icon-replaced'
 
+      // 与 assets/icon.svg（插件图标）同源几何：同一条光轨与火花路径。
+      // 客户端读不到文件系统，只能内联一份；verify-nav-icon.mjs 有断言核对二者的
+      // 路径数据逐字一致，防止漂移。
+      //
+      // 与插件图标有两处**有意差异**，都是为了与设置导航里的兄弟栏目看齐：
+      //   1) 颜色——插件图标是彩色渐变，而导航栏那一排图标全是单色线描（壳层
+      //      navIcon() 生成的宿主机图标用 stroke="currentColor"）。这里同样用
+      //      currentColor：既与邻居统一，又能自动跟随主题、选中态与禁用态，
+      //      不必自己判断暗色模式。
+      //   2) 显示窗口——icon.svg 用 `0 0 36 36`（图形含描边占 26.8 单位，留白适合
+      //      列表里的大图标）。导航栏旁的宿主图标实测几乎满格——16px 下墨迹跨度
+      //      14.25px（占 89%），所以沿用 36 网格会让这个小图标显得又小又轻。这里把
+      //      窗口收紧到「同一个中心 (18,18)、边长 28.4」，让墨迹跨度落到 ~14px。
+      //      数值是量出来的：预览探针把两种图标渲染到 canvas 逐像素统计。
+      const NAV_ICON_VIEW_BOX = '3.8 3.8 28.4 28.4'
+      const NAV_ICON_TRAIL_D = 'M18 6A12 12 0 1 1 6.72 22.1'
+      const NAV_ICON_SPARK_D = 'M18 11.6C18.52 15.15 20.85 17.48 24.4 18C20.85 18.52 18.52 20.85 18 24.4C17.48 20.85 15.15 18.52 11.6 18C15.15 17.48 17.48 15.15 18 11.6Z'
+      // 线宽按**显示后的像素**与邻居对齐：宿主图标是 16 网格 + 1.3 线宽，而我们
+      // 的窗口是 28.4 单位宽、显示成 16px（缩放 16 ÷ 28.4 ≈ 0.5634），所以取
+      // 1.3 ÷ 0.5634 ≈ 2.3。照搬 icon.svg 的 2.8 会让弧线比邻居粗一圈。
+      const NAV_ICON_STROKE_WIDTH = '2.3'
+      // 宿主按 size=16 渲染，宽高是 svg 的属性（不是 CSS）。万一将来改由 CSS 控制尺寸，
+      // 我们也补一个 16——否则 svg 会退回 300×150 的默认尺寸，把导航栏撑坏。
+      const NAV_ICON_FALLBACK_SIZE = '16'
+      const SVG_NS = 'http://www.w3.org/2000/svg'
+
+      /** 建一个 SVG 元素并铺上属性（避免 innerHTML，无需解析）。 */
+      const svgNode = (name, attributes) => {
+        const node = document.createElementNS(SVG_NS, name)
+        for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, value)
+        return node
+      }
+
+      /**
+       * 把导航按钮里宿主生成的齿轮图标改画成插件图标（单色版）。
+       *
+       * 只替换 <svg> 的内容与 viewBox，保留节点本身——宿主的 className
+       * （…navIcon，flex:none）、width/height（size=16）与 aria-hidden 因此
+       * 原样生效，不必自己复刻一套尺寸规则；只有宿主将来不给宽高时才补默认值。
+       *
+       * 宿主 svg 上挂着 fill="none" 与 stroke-width（medium 为 1.3），这两条会
+       * 向下继承，所以每条 path 都写全自身样式：光轨只要描边，火花只要填充。
+       * 颜色一律 currentColor，取到的是按钮文字色——与旁边几个图标同一个值。
+       */
+      const paintSoulNavIcon = (svg) => {
+        svg.setAttribute('viewBox', NAV_ICON_VIEW_BOX)
+        if (!svg.getAttribute('width')) svg.setAttribute('width', NAV_ICON_FALLBACK_SIZE)
+        if (!svg.getAttribute('height')) svg.setAttribute('height', NAV_ICON_FALLBACK_SIZE)
+
+        const trail = svgNode('path', {
+          d: NAV_ICON_TRAIL_D,
+          fill: 'none',
+          stroke: 'currentColor',
+          'stroke-width': NAV_ICON_STROKE_WIDTH,
+          'stroke-linecap': 'round'
+        })
+        const spark = svgNode('path', {
+          d: NAV_ICON_SPARK_D,
+          fill: 'currentColor',
+          stroke: 'none'
+        })
+
+        svg.replaceChildren(trail, spark)
+      }
+
       const registerSettingsNavIcon = () => {
         let disposed = false
+        // 改画前记下宿主 svg 的原始子节点：此前卸载时只清 marker 属性、不还原内容，
+        // 于是禁用插件 / HMR 之后导航栏仍显示插件图标，直到壳层重建那个按钮。
+        const originalIcons = new Map()
 
         const sync = () => {
           if (disposed) return
@@ -1548,28 +1985,13 @@ window.__ModuleLoader__.load({
               // 检查是否已经替换过图标
               if (button.hasAttribute(SOUL_ICON_MARKER)) continue
 
-              // 查找并替换图标
+              // 把宿主给未知 id 用的设置齿轮，改画成插件自身的图标
               const existingIcon = button.querySelector('svg')
               if (existingIcon) {
-                // 标记已替换
+                // 标记已替换；React 重建按钮时标记随之消失，会重新画一次
                 button.setAttribute(SOUL_ICON_MARKER, 'true')
-
-                // 创建星形图标（跟随主题色）
-                const starSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-                starSvg.setAttribute('viewBox', '0 0 24 24')
-                starSvg.setAttribute('fill', 'none')
-                starSvg.setAttribute('stroke', 'currentColor')
-                starSvg.setAttribute('stroke-width', '2')
-                starSvg.setAttribute('stroke-linecap', 'round')
-                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)
+                originalIcons.set(existingIcon, Array.from(existingIcon.childNodes))
+                paintSoulNavIcon(existingIcon)
               }
             } else {
               button.removeAttribute(SOUL_NAV_MARKER)
@@ -1579,14 +2001,24 @@ window.__ModuleLoader__.load({
 
         // 延迟执行初始同步，等待设置页面渲染完成
         let timer = setTimeout(sync, 500)
+        // 最长等待：防抖只该合并「一连串变化」，不该被无限推迟 —— 会话流式输出时
+        // body 每帧都在变，纯 100ms 防抖会让 sync 永远排不到（图标一直不替换）。
+        const MAX_WAIT_MS = 600
+        let pendingSince = 0
 
         // 监听 DOM 变化（只监听子节点添加，不监听所有变化）
         const observer = new MutationObserver(() => {
           // 防抖：每次变化都重置计时器，停止变化 100ms 后执行
           // （修复：此前新计时器未赋回 timer，clearTimeout 永远只清除首个 500ms
           // 计时器，防抖实际失效，每次 DOM 变化都会调度一次 sync）
+          const now = Date.now()
+          if (!pendingSince) pendingSince = now
           clearTimeout(timer)
-          timer = setTimeout(sync, 100)
+          const waited = now - pendingSince
+          timer = setTimeout(() => {
+            pendingSince = 0
+            sync()
+          }, waited >= MAX_WAIT_MS ? 0 : 100)
         })
 
         observer.observe(document.body, {
@@ -1598,6 +2030,11 @@ window.__ModuleLoader__.load({
           disposed = true
           clearTimeout(timer)
           observer.disconnect()
+          // 先还原图标内容，再清 marker：顺序反了会留下「无标记但已被改画」的节点
+          for (const [svg, nodes] of originalIcons) {
+            if (svg && typeof svg.replaceChildren === 'function') svg.replaceChildren(...nodes)
+          }
+          originalIcons.clear()
           document.querySelectorAll(`[${SOUL_NAV_MARKER}]`).forEach((element) => {
             element.removeAttribute(SOUL_NAV_MARKER)
           })