dsh-avatar-frame 0.11.4 → 0.14.0

package/client.js

@@ -17,6 +17,10 @@ window.__ModuleLoader__.load({
     const ENDPOINT_KEY = 'dsh-avatar-frame/endpoint/v1';
     const RATE_KEY = 'dsh-avatar-frame/rate/v1';
     const TONE_KEY = 'dsh-avatar-frame/tone/v1';
+    const SYSVOICE_KEY = 'dsh-avatar-frame/sysvoice/v1';
+    const AUTO_SPEECH_KEY = 'dsh-avatar-frame/autospeech/v1';
+    const VOLUME_KEY = 'dsh-avatar-frame/volume/v1';
+    const DEFAULT_VOLUME = 0.5;
     /**
      * The plugin ships no model, no reference audio, and no service: it only
      * calls a TTS endpoint the user runs. This is just the default address.
@@ -69,20 +73,32 @@ window.__ModuleLoader__.load({
       'engine.label': '音色',
       'engine.system': '系统语音',
       'engine.clone': '本地服务',
-      'engine.hint': '插件只负责调用；语音服务、模型和参考音由你自己准备。',
+      'engine.hint': '想用本地语音服务请在本机配置（模型和参考音频自备）。',
+      'sysvoice.label': '系统语音',
+      'sysvoice.auto': '自动选择',
+      'sysvoice.test': '试听',
+      'sysvoice.refresh': '刷新列表',
+      'sysvoice.count': '共 {n} 个音色',
       'endpoint.label': '服务地址',
       'endpoint.placeholder': '例如 http://127.0.0.1:8123',
       'status.checking': '检测中',
       'status.online': '已连接',
       'status.offline': '未连接',
-      'endpoint.offlineHint': '连不上时先确认语音服务已经启动；启动后这里每 8 秒自动重试，不用刷新。',
+      'status.warming': '正在启动语音服务，已等待 {s} 秒（模型加载通常要 10–30 秒）',
+      'status.reasonTimeout': '连接超时：服务 4 秒没有响应',
+      'status.reasonUnreachable': '连不上服务：可能还没启动，或地址不对',
+      'status.reasonHttp': '服务返回 HTTP {code}',
+      'endpoint.offlineHint': '连不上时先确认语音服务已经启动；启动后这里每 2.5 秒自动重试，不用刷新。',
       'tone.label': '语气',
       'tone.calm': '平稳',
       'tone.normal': '自然',
       'tone.lively': '活泼',
       'speech.rate': '语速',
+      'auto.label': '自动朗读新回复',
+      'volume.label': '音量',
       'audition.label': '试听一句',
-      'audition.stopHint': '正在朗读',
+      'audition.playing': '试听中 {n}/{m}',
+      'audition.failed': '试听失败',
       'audition.text': '程序启动，访问人，用户，你好！',
       'bar.label': '朗读控制',
       'bar.pause': '暂停',
@@ -97,13 +113,14 @@ window.__ModuleLoader__.load({
       'section.speech': '朗读',
       'section.service': '语音服务',
       'section.diagnostics': '诊断',
-      'service.title': '服务进程',
+      'service.onlyForLocal': '这一段只对「本地服务」生效；进程还在跑，所以留一个停止入口。',
       'service.running': '运行中',
       'service.stopped': '未运行',
       'service.external': '端口上已有服务（非本插件启动）',
       'service.start': '启动服务',
       'service.stop': '停止服务',
-      'service.autostart': '随 DSH 启动',
+      'service.restart': '重启服务',
+      'service.autostart': 'DSH 启动时拉起语音服务',
       'service.configure': '启动配置',
       'service.command': '启动命令',
       'service.commandPlaceholder': '例如 "C:\\Python\\python.exe" server.py',
@@ -122,7 +139,6 @@ window.__ModuleLoader__.load({
       'diag.lastError': '最近错误',
       'diag.none': '无',
       'dialog.title': '设置 AI 头像',
-      'dialog.pickHint': '在这里写 ID；要换图时再点下面的按钮。',
       'dialog.choose': '选择头像图片',
       'dialog.hint': '拖动图片调整位置，滚轮或滑块缩放。',
       'dialog.cancel': '取消',
@@ -161,20 +177,32 @@ window.__ModuleLoader__.load({
       'engine.label': 'Voice',
       'engine.system': 'System voice',
       'engine.clone': 'Local service',
-      'engine.hint': 'The plugin only calls the service; the model and reference audio are yours to provide.',
+      'engine.hint': 'To use a local voice, set up your own speech service on this machine (model and reference audio are yours to provide).',
+      'sysvoice.label': 'System voice',
+      'sysvoice.auto': 'Automatic',
+      'sysvoice.test': 'Preview',
+      'sysvoice.refresh': 'Refresh list',
+      'sysvoice.count': '{n} voices found',
       'endpoint.label': 'Service address',
       'endpoint.placeholder': 'e.g. http://127.0.0.1:8123',
       'status.checking': 'Checking',
       'status.online': 'Connected',
       'status.offline': 'Not connected',
-      'endpoint.offlineHint': 'Start your TTS service first; this dot retries every 8 seconds and reconnects on its own.',
+      'status.warming': 'Starting the speech service — {s}s elapsed (model loading usually takes 10–30s)',
+      'status.reasonTimeout': 'Timed out: no response within 4s',
+      'status.reasonUnreachable': 'Cannot reach the service: not running, or wrong address',
+      'status.reasonHttp': 'The service answered HTTP {code}',
+      'endpoint.offlineHint': 'Start your TTS service first; this dot retries every 2.5 seconds and reconnects on its own.',
       'tone.label': 'Tone',
       'tone.calm': 'Calm',
       'tone.normal': 'Natural',
       'tone.lively': 'Lively',
       'speech.rate': 'Speed',
+      'auto.label': 'Read new replies automatically',
+      'volume.label': 'Volume',
       'audition.label': 'Preview',
-      'audition.stopHint': 'Reading…',
+      'audition.playing': 'Previewing {n}/{m}',
+      'audition.failed': 'Preview failed',
       'audition.text': 'Program initializing. Accessor: user.',
       'bar.label': 'Read-aloud controls',
       'bar.pause': 'Pause',
@@ -189,13 +217,14 @@ window.__ModuleLoader__.load({
       'section.speech': 'Read aloud',
       'section.service': 'Speech service',
       'section.diagnostics': 'Diagnostics',
-      'service.title': 'Service process',
+      'service.onlyForLocal': 'This section applies to the local service only; the process is still running, so the stop button stays here.',
       'service.running': 'Running',
       'service.stopped': 'Stopped',
       'service.external': 'A service is already listening (started outside the plugin)',
       'service.start': 'Start service',
       'service.stop': 'Stop service',
-      'service.autostart': 'Start with DSH',
+      'service.restart': 'Restart',
+      'service.autostart': 'Start the speech service with DSH',
       'service.configure': 'Launch settings',
       'service.command': 'Command',
       'service.commandPlaceholder': 'e.g. "C:\\Python\\python.exe" server.py',
@@ -214,7 +243,6 @@ window.__ModuleLoader__.load({
       'diag.lastError': 'Last error',
       'diag.none': 'none',
       'dialog.title': 'Assistant avatar',
-      'dialog.pickHint': 'Write the ID here; pick an image with the button below.',
       'dialog.choose': 'Choose avatar image',
       'dialog.hint': 'Drag to reposition; scroll or use the slider to zoom.',
       'dialog.cancel': 'Cancel',
@@ -259,6 +287,15 @@ window.__ModuleLoader__.load({
       return Math.min(MAX_SIZE, Math.max(MIN_SIZE, Math.round(numeric)));
     }
 
+    /** 音量：没设置过就是 50%，显式存 0 才表示静音。 */
+    function readStoredVolume() {
+      const raw = readStored(VOLUME_KEY);
+      if (raw === null || raw === '') return DEFAULT_VOLUME;
+      const value = Number(raw);
+      if (!Number.isFinite(value)) return DEFAULT_VOLUME;
+      return Math.min(1, Math.max(0, value));
+    }
+
     function readStoredSize() {
       const raw = readStored(SIZE_KEY);
       return raw === null ? DEFAULT_SIZE : clampSize(raw);
@@ -282,13 +319,16 @@ window.__ModuleLoader__.load({
       endpoint: readStored(ENDPOINT_KEY) || DEFAULT_ENDPOINT,
       rate: Number(readStored(RATE_KEY)) > 0 ? Number(readStored(RATE_KEY)) : DEFAULT_RATE,
       tone: TONES.includes(readStored(TONE_KEY)) ? readStored(TONE_KEY) : 'normal',
+      sysVoice: readStored(SYSVOICE_KEY) || '',
+      autoSpeech: readStored(AUTO_SPEECH_KEY) === '1',
+      volume: readStoredVolume(),
       lang: readStoredLang(),
     });
     let translate = (key) => key;
     const dialogStore = createStore({ open: false, mode: 'idle', draft: null });
     const statsStore = createStore({ lastMs: null });
     /** 计数器：每次 +1 让健康检查重新探一次（启动服务后立刻刷新状态）。 */
-    const probeStore = createStore({ tick: 0 });
+    const probeStore = createStore({ tick: 0, startingSince: null });
     const speechStore = createStore({ status: 'idle', sessionId: null, turn: null, index: 0, total: 0, rate: DEFAULT_RATE, error: null, engine: null });
 
     function persist(key, value) {
@@ -320,7 +360,24 @@ window.__ModuleLoader__.load({
 
     /* --------------------------------------------------------------- speech */
 
+    /** 诊断：把一行信息发到宿主端，落到 ~/.dsh/storages/dsh-avatar-frame/debug.log。 */
+    function trace(message) {
+      try {
+        fetch('/dsh-avatar-frame/service', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: 'debug', message: String(message) }),
+        }).catch(() => {});
+      } catch {
+        // 忽略。
+      }
+    }
+
     let cachedVoices = [];
+    /** 是否已经向浏览器要过一次列表（列表可能是空的，那就别再问了）。 */
+    let voicesProbed = false;
+    /** 系统语音列表（浏览器异步加载，加载完要让下拉框刷新）。 */
+    const voicesStore = createStore({ list: [] });
     /** One active playback: a token guards against stopped or replaced runs. */
     const speechRun = {
       token: 0,
@@ -334,30 +391,112 @@ window.__ModuleLoader__.load({
       seek: null,
       rate: DEFAULT_RATE,
       paused: false,
+      /** 当前这段朗读是不是走浏览器自带语音。 */
+      system: false,
+      /** 本地播放的音量节点。 */
+      gain: null,
+      /** 看门狗用：状态进入「在播」但没有音源时的起始时间。 */
+      settledAt: null,
+      /** 正在等待返回的合成请求数量；>0 说明在正常等待，不算卡住。 */
+      pendingFetches: 0,
       sessionId: null,
       turn: null,
       error: null,
     };
 
+    function sameVoiceList(a, b) {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i += 1) {
+        if (a[i].name !== b[i].name || a[i].lang !== b[i].lang) return false;
+      }
+      return true;
+    }
+
+    /** 读取浏览器音色列表。只有内容真的变了才写 store —— 渲染期间调用绝不能触发 set。 */
     function refreshVoices() {
+      voicesProbed = true;
+      let list = [];
       try {
-        cachedVoices = window.speechSynthesis.getVoices() || [];
+        list = window.speechSynthesis.getVoices() || [];
       } catch {
-        cachedVoices = [];
+        list = [];
       }
+      cachedVoices = list;
+      const previous = voicesStore.get().list;
+      if (!sameVoiceList(previous, list)) voicesStore.set({ list: list.slice() });
     }
 
-    /** Prefer a Chinese female-sounding system voice; fall back to any Chinese voice. */
-    function pickVoice() {
-      if (cachedVoices.length === 0) refreshVoices();
-      const chinese = cachedVoices.filter((voice) => /^zh/i.test(voice.lang || ''));
-      const pool = chinese.length > 0 ? chinese : cachedVoices;
-      const preferred = ['Xiaoxiao', 'Xiaoyi', 'Yaoyao', 'Huihui', 'Natural', 'Female', '女'];
-      for (const keyword of preferred) {
-        const hit = pool.find((voice) => (voice.name || '').includes(keyword));
-        if (hit) return hit;
+    /**
+     * 系统语音排序：神经网络音色（Natural / Online / Neural）> 中文 > 女声常见命名，
+     * 老的 SAPI 音色（Huihui 等）排最后。用户手动选过就直接用它。
+     */
+    function scoreVoice(voice) {
+      const name = String(voice.name || '');
+      const lang = String(voice.lang || '');
+      let score = 0;
+      if (/natural|neural|online|premium|enhanced/i.test(name)) score += 100;
+      if (/^zh/i.test(lang)) score += 20;
+      // 成年女声优先（和默认人设一致）；童声、男声略降
+      if (/xiaoxiao|xiaoyi|xiaomo|xiaoxuan|xiaohan|xiaorui|huihui|zira|aria|jenny|female|女子|女/i.test(name)) score += 10;
+      if (/yaoyao|童|child/i.test(name)) score -= 10;
+      if (/kangkang|mark|guy|david|male/i.test(name)) score -= 10;
+      if (/google/i.test(name)) score += 15;
+      return score;
+    }
+
+    /** 判断一段文本该用哪种语言的系统语音：有汉字就是中文，否则英文。 */
+    function detectTextLang(text) {
+      return /[\u3400-\u9fff]/.test(String(text || '')) ? 'zh' : 'en';
+    }
+
+    /**
+     * 可选的系统语音。
+     * - 传 'zh' / 'en' 时只留该语言（没有就退回全部）；
+     * - 不传则全部返回，中文按界面语言排在前面。
+     */
+    function voiceOptions(lang) {
+      if (cachedVoices.length === 0 && !voicesProbed) {
+        voicesProbed = true;
+        try {
+          cachedVoices = window.speechSynthesis.getVoices() || [];
+        } catch {
+          cachedVoices = [];
+        }
       }
-      return pool[0] || null;
+      const all = cachedVoices.slice().sort((a, b) => scoreVoice(b) - scoreVoice(a));
+      if (lang === 'zh' || lang === 'en') {
+        const hit = all.filter((voice) => new RegExp('^' + lang, 'i').test(voice.lang || ''));
+        if (hit.length > 0) return hit;
+        return all;
+      }
+      const uiZh = avatarStore.get().lang !== 'en';
+      return all.sort((a, b) => {
+        const za = /^zh/i.test(a.lang || '') === uiZh ? 0 : 1;
+        const zb = /^zh/i.test(b.lang || '') === uiZh ? 0 : 1;
+        return za - zb || scoreVoice(b) - scoreVoice(a);
+      });
+    }
+
+    /**
+     * 挑一个声音：用户手动选过就用它；否则按**要读的文本**挑语言——
+     * 英文回复配英文音色，中文回复配中文音色，界面是哪种语言都不影响。
+     */
+    function pickVoice(text) {
+      const chosen = avatarStore.get().sysVoice;
+      if (chosen !== '') {
+        if (cachedVoices.length === 0 && !voicesProbed) {
+          voicesProbed = true;
+          try {
+            cachedVoices = window.speechSynthesis.getVoices() || [];
+          } catch {
+            cachedVoices = [];
+          }
+        }
+        const hit = cachedVoices.find((voice) => voice.name === chosen);
+        if (hit !== undefined) return hit;
+      }
+      const options = voiceOptions(detectTextLang(text));
+      return options[0] || null;
     }
 
     function interruptPlayback() {
@@ -393,10 +532,19 @@ window.__ModuleLoader__.load({
       speechRun.index = 0;
       speechRun.seek = null;
       try {
-        window.speechSynthesis.cancel();
+        const synth = window.speechSynthesis;
+        // Chromium 的已知毛病：cancel() 偶尔只清掉队列、当前这句继续念完。
+        // 先 pause 再 cancel，并补一次 cancel，确保真的停住。
+        synth.pause();
+        synth.cancel();
+        if (synth.speaking) synth.cancel();
       } catch {
         // An absent or failed engine simply leaves nothing playing.
       }
+      speechRun.system = false;
+      speechRun.paused = false;
+      speechRun.pendingFetches = 0;
+      speechRun.settledAt = null;
       speechRun.sessionId = null;
       speechRun.turn = null;
       speechRun.error = null;
@@ -409,12 +557,32 @@ window.__ModuleLoader__.load({
         if (Ctor === undefined) return null;
         speechRun.ctx = new Ctor();
       }
-      if (speechRun.ctx.state === 'suspended' && speechRun.paused !== true) {
-        speechRun.ctx.resume().catch(() => {});
-      }
       return speechRun.ctx;
     }
 
+    /**
+     * 浏览器默认会把没有用户手势的 AudioContext 挂起（suspended），
+     * 此时 source.start() 不会有声音、onended 也不会触发——表现就是「点了没反应」，
+     * 而且状态会一直卡在 speaking。所以播放前必须确认它真的在 running。
+     */
+    async function runningAudioContext() {
+      const ctx = ensureAudioContext();
+      if (ctx === null) return null;
+      if (ctx.state !== 'running') {
+        try {
+          // 有些环境下 resume() 会一直挂起（没有用户手势、被策略拦住），
+          // 不能无限等——最多等 1.5 秒，之后照常返回，由播放层判断。
+          await Promise.race([
+            ctx.resume(),
+            new Promise((resolve) => window.setTimeout(resolve, 1500)),
+          ]);
+        } catch {
+          // 恢复失败就按失败处理，让界面显示原因。
+        }
+      }
+      return ctx;
+    }
+
     function publishSpeech(status) {
       speechStore.set({
         status,
@@ -429,7 +597,18 @@ window.__ModuleLoader__.load({
     }
 
     function pauseSpeech() {
-      if (speechRun.ctx === null || speechStore.get().status !== 'speaking') return;
+      if (speechStore.get().status !== 'speaking') return;
+      if (speechRun.system) {
+        try {
+          window.speechSynthesis.pause();
+        } catch {
+          return;
+        }
+        speechRun.paused = true;
+        publishSystem('paused');
+        return;
+      }
+      if (speechRun.ctx === null) return;
       speechRun.paused = true;
       speechRun.ctx.suspend().catch(() => {});
       publishSpeech('paused');
@@ -438,6 +617,15 @@ window.__ModuleLoader__.load({
     function resumeSpeech() {
       if (speechStore.get().status !== 'paused') return;
       speechRun.paused = false;
+      if (speechRun.system) {
+        try {
+          window.speechSynthesis.resume();
+        } catch {
+          return;
+        }
+        publishSystem('speaking');
+        return;
+      }
       if (speechRun.ctx !== null) speechRun.ctx.resume().catch(() => {});
       publishSpeech('speaking');
     }
@@ -471,6 +659,17 @@ window.__ModuleLoader__.load({
     function skipSentence(delta) {
       if (speechRun.chunks.length === 0) return;
       const target = Math.min(speechRun.chunks.length - 1, Math.max(0, speechRun.index + delta));
+      if (speechRun.system) {
+        speechRun.token += 1;
+        speechRun.paused = false;
+        try {
+          window.speechSynthesis.cancel();
+        } catch {
+          // 忽略。
+        }
+        speakSystemFrom(target, speechRun.token);
+        return;
+      }
       speechRun.seek = target;
       interruptPlayback();
       publishSpeech(speechStore.get().status);
@@ -511,10 +710,88 @@ window.__ModuleLoader__.load({
     }
 
     /** One synthesis request for one chunk. */
+    /** base64 → Blob（宿主端代理回来的音频）。 */
+    function base64ToBlob(base64, contentType) {
+      const binary = window.atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+      return new Blob([bytes], { type: contentType || 'audio/wav' });
+    }
+
+    /** 走宿主端转发：浏览器直连被网络策略拦下时的兜底通道。 */
+    async function requestSpeechViaHost(chunk, avatar) {
+      const response = await fetch(SERVICE_ROUTE, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          action: 'tts',
+          endpoint: resolveEndpoint(),
+          text: chunk,
+          speed: avatar.rate || DEFAULT_RATE,
+          tone: avatar.tone || 'normal',
+        }),
+      });
+      if (!response.ok) throw new Error('host tts proxy responded ' + response.status);
+      const payload = await response.json();
+      if (!payload || payload.ok !== true || typeof payload.base64 !== 'string') {
+        throw new Error((payload && payload.error) || 'host tts proxy returned no audio');
+      }
+      return base64ToBlob(payload.base64, payload.contentType);
+    }
+
+    /** 一旦直连失败过，就记住这个事实，后续直接走宿主代理，不再每段等超时。 */
+    let directTtsBroken = false;
+
     function requestSpeech(chunk, controller) {
       const avatar = avatarStore.get();
       const started = typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now();
-      return fetch(resolveEndpoint() + '/tts', {
+      const url = resolveEndpoint() + '/tts';
+      trace('tts: post ' + url + ' chunk=' + chunk.slice(0, 12));
+      // 直连只等 1.5 秒：dsh-app:// 页面访问 127.0.0.1 常被网络策略拦下，
+      // 与其干等，不如尽快改走宿主代理（宿主进程不受这层限制）。
+      speechRun.pendingFetches += 1;
+      const done = () => {
+        speechRun.pendingFetches = Math.max(0, speechRun.pendingFetches - 1);
+      };
+
+      if (directTtsBroken) {
+        trace('tts: direct disabled, going straight to host proxy');
+        return requestSpeechViaHost(chunk, avatar).then(
+          (blob) => {
+            done();
+            return blob;
+          },
+          (error) => {
+            done();
+            trace('tts: host proxy failed ' + String(error && error.message));
+            throw error;
+          },
+        );
+      }
+
+      // 独立的取消器：只影响这一次请求；同时跟随整体停止信号。
+      const local = new AbortController();
+      const forwardAbort = () => {
+        try {
+          local.abort();
+        } catch {
+          // 忽略。
+        }
+      };
+      if (controller && controller.signal && typeof controller.signal.addEventListener === 'function') {
+        if (controller.signal.aborted) local.abort();
+        else controller.signal.addEventListener('abort', forwardAbort, { once: true });
+      }
+      const timer = typeof window.setTimeout === 'function'
+        ? window.setTimeout(() => {
+            try {
+              local.abort();
+            } catch {
+              // 忽略。
+            }
+          }, 1500)
+        : null;
+      return fetch(url, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -522,12 +799,33 @@ window.__ModuleLoader__.load({
           speed: avatar.rate || DEFAULT_RATE,
           tone: avatar.tone || 'normal',
         }),
-        signal: controller.signal,
+        signal: local.signal,
       }).then((response) => {
+        trace('tts: status ' + response.status);
         if (!response.ok) throw new Error('tts responded ' + response.status);
         const now = typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now();
         statsStore.set({ lastMs: now - started });
-        return response.blob();
+        return response.blob().then((blob) => {
+          trace('tts: blob ' + blob.size);
+          return blob;
+        });
+      }).catch(async (error) => {
+        directTtsBroken = true;
+        trace('tts: direct failed (' + String(error && error.name) + ' ' + String(error && error.message) + ') -> host proxy');
+        const blob = await requestSpeechViaHost(chunk, avatar);
+        trace('tts: host proxy ok ' + blob.size);
+        return blob;
+      }).then((blob) => {
+        done();
+        return blob;
+      }, (error) => {
+        done();
+        throw error;
+      }).finally(() => {
+        if (timer !== null && typeof window.clearTimeout === 'function') window.clearTimeout(timer);
+        if (controller && controller.signal && typeof controller.signal.removeEventListener === 'function') {
+          controller.signal.removeEventListener('abort', forwardAbort);
+        }
       });
     }
 
@@ -545,6 +843,7 @@ window.__ModuleLoader__.load({
     }
 
     function playSpeechBuffer(buffer) {
+      const volume = Math.min(1, Math.max(0, Number(avatarStore.get().volume)));
       return new Promise((resolve) => {
         const ctx = ensureAudioContext();
         if (ctx === null) {
@@ -558,7 +857,17 @@ window.__ModuleLoader__.load({
         } catch {
           // Rate stays at 1 if unsupported.
         }
-        source.connect(ctx.destination);
+        // 有 GainNode 才走音量节点；极老的引擎没有就直连，别让播放在这里断掉。
+        if (typeof ctx.createGain === 'function') {
+          if (speechRun.gain === null) {
+            speechRun.gain = ctx.createGain();
+            speechRun.gain.connect(ctx.destination);
+          }
+          speechRun.gain.gain.value = volume;
+          source.connect(speechRun.gain);
+        } else {
+          source.connect(ctx.destination);
+        }
         speechRun.source = source;
         let done = false;
         const finish = () => {
@@ -583,9 +892,6 @@ window.__ModuleLoader__.load({
      */
     async function speakClone(text, sessionId, turn) {
       stopSpeech();
-      // Prime the audio graph inside the click itself; creating it after the
-      // first await would land outside the gesture and stay suspended.
-      ensureAudioContext();
       const token = speechRun.token;
       const chunks = splitSpeech(text);
       if (chunks.length === 0) return;
@@ -599,7 +905,19 @@ window.__ModuleLoader__.load({
       speechRun.turn = turn;
       speechRun.error = null;
       speechRun.controller = new AbortController();
+      // 先让界面进入「试听中」，再做需要 await 的准备工作：
+      // 任何一步卡住都不会表现成"点了没反应"。
       publishSpeech('speaking');
+      trace('clone: start chunks=' + chunks.length + ' rate=' + speechRun.rate);
+      try {
+        // 音频上下文要在这次点击的手势里创建/恢复，晚了会被浏览器挂起。
+        const ctx = await runningAudioContext();
+        trace('clone: ctx=' + (ctx === null ? 'null' : ctx.state));
+      } catch (error) {
+        speechRun.error = String(error && error.message ? error.message : error);
+        trace('clone: ctx error ' + speechRun.error);
+      }
+      if (speechRun.token !== token) return;
       prefetchSpeech(0);
       let played = 0;
       try {
@@ -617,13 +935,21 @@ window.__ModuleLoader__.load({
             publishSpeech('speaking');
             continue;
           }
-          const ctx = ensureAudioContext();
+          const ctx = await runningAudioContext();
           if (ctx === null) throw new Error('no audio context');
+          if (ctx.state !== 'running') throw new Error('audio context is suspended: ' + ctx.state);
           const data = await result.arrayBuffer();
+          trace('clone: chunk ' + index + ' bytes=' + (data && data.byteLength));
           if (speechRun.token !== token) return;
           const buffer = await ctx.decodeAudioData(data);
+          trace('clone: decoded ' + index + ' duration=' + (buffer ? buffer.duration : 'n/a'));
+          if (speechRun.error !== null) {
+            speechRun.error = null;
+            publishSpeech(speechStore.get().status);
+          }
           if (speechRun.token !== token) return;
           await playSpeechBuffer(buffer);
+          trace('clone: played ' + index);
           if (speechRun.token !== token) return;
           if (speechRun.seek !== null) {
             speechRun.index = speechRun.seek;
@@ -641,57 +967,97 @@ window.__ModuleLoader__.load({
           speechStore.set({ status: 'idle', sessionId: null, turn: null, index: 0, total: 0, rate: speechRun.rate, error: speechRun.error, engine: null });
         }
       } catch (error) {
+        trace('clone: error ' + String(error && error.message ? error.message : error));
         if (speechRun.token !== token) return;
         speechRun.error = String(error && error.message ? error.message : error);
         console.warn('[dsh-avatar-frame] clone voice playback problem', error);
         // Only fall back when nothing has been heard yet; otherwise the reader
         // would hear the reply twice, once from each engine.
-        if (played === 0) startSpeech(text, sessionId, turn);
+        if (played === 0) {
+          speechRun.fallbackReason = speechRun.error;
+          startSpeech(text, sessionId, turn);
+        }
         // Keep the owning turn so its row can show the failure dot.
         else speechStore.set({ status: 'idle', sessionId: speechRun.sessionId, turn: speechRun.turn, index: 0, total: 0, rate: speechRun.rate, error: speechRun.error, engine: null });
       }
     }
 
+    /** 系统语音的状态广播：和本地服务的 publishSpeech 对齐，界面上控制条才认得。 */
+    function publishSystem(status) {
+      speechStore.set({
+        status,
+        sessionId: speechRun.sessionId,
+        turn: speechRun.turn,
+        index: speechRun.index,
+        total: speechRun.chunks.length,
+        rate: speechRun.rate,
+        error: speechRun.error,
+        engine: 'system',
+      });
+    }
+
+    /** 从第 index 句开始念；token 变了说明这次朗读已被取消。 */
+    function speakSystemFrom(index, token) {
+      if (token !== speechRun.token) return;
+      const synth = window.speechSynthesis;
+      if (!synth) return;
+      if (index >= speechRun.chunks.length) {
+        speechRun.system = false;
+        speechStore.set({ status: 'idle', sessionId: null, turn: null, index: 0, total: 0, engine: null, error: null });
+        return;
+      }
+      speechRun.index = index;
+      const chunk = speechRun.chunks[index];
+      const utterance = new SpeechSynthesisUtterance(chunk);
+      const voice = pickVoice(chunk);
+      if (voice !== null) {
+        utterance.voice = voice;
+        utterance.lang = voice.lang;
+      } else {
+        utterance.lang = /[\u3400-\u9fff]/.test(chunk) ? 'zh-CN' : 'en-US';
+      }
+      // 跟随设置里的语速；系统语音略放慢更自然。
+      utterance.rate = Math.min(1.3, Math.max(0.7, Number(avatarStore.get().rate) || 1)) * 0.95;
+      utterance.pitch = 1;
+      utterance.volume = Math.min(1, Math.max(0, Number(avatarStore.get().volume)));
+      utterance.onend = () => {
+        if (token !== speechRun.token) return;
+        speakSystemFrom(index + 1, token);
+      };
+      utterance.onerror = () => {
+        if (token !== speechRun.token) return;
+        speakSystemFrom(index + 1, token);
+      };
+      publishSystem(speechRun.paused ? 'paused' : 'speaking');
+      try {
+        // 之前 stopSpeech 里 pause 过，Chromium 会一直保持暂停态；
+        // 不 resume 的话新句子只入队不出声。
+        synth.resume();
+        synth.speak(utterance);
+      } catch {
+        speechRun.system = false;
+        speechStore.set({ status: 'idle', sessionId: null, turn: null, index: 0, total: 0, engine: null, error: null });
+      }
+    }
+
     function startSpeech(text, sessionId, turn) {
       const synth = window.speechSynthesis;
       if (!synth || text === '') return;
       synth.cancel();
-      const speak = () => {
-        const utterance = new SpeechSynthesisUtterance(text);
-        const voice = pickVoice();
-        if (voice !== null) {
-          utterance.voice = voice;
-          utterance.lang = voice.lang;
-        } else {
-          utterance.lang = 'zh-CN';
-        }
-        // Slow and even, closer to a composed reading voice than the default.
-        utterance.rate = 0.95;
-        utterance.pitch = 1;
-        utterance.volume = 1;
-        utterance.onend = () => {
-          if (speechStore.get().turn === turn) speechStore.set({ status: 'idle', sessionId: null, turn: null, engine: null });
-        };
-        utterance.onerror = () => {
-          speechStore.set({ status: 'idle', sessionId: null, turn: null, engine: null });
-        };
-        speechStore.set({ status: 'speaking', sessionId, turn, engine: 'system', index: 0, total: 0, error: null });
-        synth.speak(utterance);
-      };
-      if ((synth.getVoices() || []).length === 0) {
-        let started = false;
-        const kick = () => {
-          if (started) return;
-          started = true;
-          refreshVoices();
-          speak();
-        };
-        if (typeof synth.addEventListener === 'function') synth.addEventListener('voiceschanged', kick, { once: true });
-        window.setTimeout(kick, 400);
-      } else {
-        refreshVoices();
-        speak();
+      refreshVoices();
+      speechRun.token += 1;
+      speechRun.system = true;
+      speechRun.paused = false;
+      speechRun.chunks = splitSpeech(text);
+      speechRun.index = 0;
+      speechRun.sessionId = sessionId;
+      speechRun.turn = turn;
+      speechRun.error = null;
+      if (speechRun.chunks.length === 0) {
+        speechRun.system = false;
+        return;
       }
+      speakSystemFrom(0, speechRun.token);
     }
 
     function setSpeech(enabled) {
@@ -710,6 +1076,56 @@ window.__ModuleLoader__.load({
     function setEndpoint(value) {
       avatarStore.set({ endpoint: value });
       persist(ENDPOINT_KEY, value);
+      // 换了地址就重新给直连一次机会。
+      directTtsBroken = false;
+    }
+
+    function setAutoSpeech(enabled) {
+      avatarStore.set({ autoSpeech: enabled === true });
+      persist(AUTO_SPEECH_KEY, enabled === true ? '1' : '0');
+      if (enabled !== true) {
+        // 关掉时清空基线，重新打开后从当时的会话状态起算。
+        autoSpeechState.baselines.clear();
+        autoSpeechState.highest.clear();
+        lastAutoSession = null;
+      }
+    }
+
+    function setVolume(value) {
+      const next = Math.min(1, Math.max(0, Math.round(Number(value) * 100) / 100 || 0));
+      avatarStore.set({ volume: next });
+      persist(VOLUME_KEY, String(next));
+      if (speechRun.gain !== null) {
+        try {
+          speechRun.gain.gain.value = next;
+        } catch {
+          // 已经销毁的节点忽略。
+        }
+      }
+    }
+
+    function setSysVoice(name) {
+      const next = typeof name === 'string' ? name : '';
+      avatarStore.set({ sysVoice: next });
+      persist(SYSVOICE_KEY, next);
+    }
+
+    /** 用系统语音念一句，给「试听」按钮用。 */
+    function auditionSystemVoice() {
+      if (typeof window.speechSynthesis === 'undefined') return;
+      const sample = tRaw('audition.text');
+      const utterance = new SpeechSynthesisUtterance(sample);
+      const voice = pickVoice(sample);
+      if (voice !== null) {
+        utterance.voice = voice;
+        utterance.lang = voice.lang;
+      }
+      utterance.rate = Math.min(1.3, Math.max(0.7, Number(avatarStore.get().rate) || 1));
+      utterance.pitch = 1;
+      utterance.volume = Math.min(1, Math.max(0, Number(avatarStore.get().volume)));
+      window.speechSynthesis.cancel();
+      window.speechSynthesis.resume();
+      window.speechSynthesis.speak(utterance);
     }
 
     function chooseTone(value) {
@@ -957,6 +1373,9 @@ window.__ModuleLoader__.load({
         endpoint: readStored(ENDPOINT_KEY) || DEFAULT_ENDPOINT,
         rate: Number(readStored(RATE_KEY)) > 0 ? Number(readStored(RATE_KEY)) : DEFAULT_RATE,
         tone: TONES.includes(readStored(TONE_KEY)) ? readStored(TONE_KEY) : 'normal',
+        sysVoice: readStored(SYSVOICE_KEY) || '',
+        autoSpeech: readStored(AUTO_SPEECH_KEY) === '1',
+        volume: readStoredVolume(),
         lang: readStoredLang(),
       });
       presetStore.set({ items: readPresets() });
@@ -1049,6 +1468,35 @@ window.__ModuleLoader__.load({
       return React.useSyncExternalStore(speechStore.subscribe, speechStore.get, speechStore.get);
     }
 
+    /**
+     * 聊天里每一轮都有一个行组件，它们只需要头像设置里的少数几项。
+     * 用字符串快照订阅，打字改 ID、调语速这些都不会牵动所有行。
+     */
+    function useRowAvatar() {
+      React.useSyncExternalStore(
+        avatarStore.subscribe,
+        () => {
+          const a = avatarStore.get();
+          return [a.id, a.size, a.speech ? 1 : 0, a.engine, a.autoSpeech ? 1 : 0, a.src === null ? 0 : a.src.length].join('|');
+        },
+        () => '',
+      );
+      return avatarStore.get();
+    }
+
+    /** 行组件关心的播放状态：进度变化不应该让所有行重渲染。 */
+    function useRowSpeech() {
+      React.useSyncExternalStore(
+        speechStore.subscribe,
+        () => {
+          const s = speechStore.get();
+          return [s.status, s.sessionId, s.turn, s.engine, s.error === null ? '' : 'e' + s.error.length].join('|');
+        },
+        () => '',
+      );
+      return speechStore.get();
+    }
+
     function useStats() {
       return React.useSyncExternalStore(statsStore.subscribe, statsStore.get, statsStore.get);
     }
@@ -1202,6 +1650,62 @@ window.__ModuleLoader__.load({
       );
     }
 
+    /**
+     * 自动朗读的状态。
+     * - 每个会话各记一条"基线"（打开自动朗读时已有的最新一轮），基线及更早的不念；
+     * - 基线要等这一批渲染结束再定，否则会把最新的那条当成"新回复"立刻念出来。
+     */
+    const autoSpeechState = { baselines: new Map(), highest: new Map(), settleTimers: new Map(), spoken: null, pending: null, timer: null };
+    /** 最近一次渲染所属的会话；切会话时用它判断，并把该会话的基线重置到当前最新。 */
+    let lastAutoSession = null;
+
+    function scheduleAutoSpeech(turn, text, enabled, sessionId) {
+      if (!enabled) {
+        // 关掉再打开时重新取基线，别把中间那段时间的回复补念了。
+        autoSpeechState.baselines.clear();
+        autoSpeechState.highest.clear();
+        return;
+      }
+      if (text === '' || turn === undefined || sessionId === undefined) return;
+      const state = autoSpeechState;
+      const key = String(sessionId);
+
+      const seen = state.highest.get(key);
+      state.highest.set(key, seen === undefined ? turn : Math.max(seen, turn));
+
+      if (!state.baselines.has(key)) {
+        // 等这一批行都渲染完，再把这个会话当前最高的轮次定为基线。
+        const timer = state.settleTimers.get(key);
+        if (timer !== undefined) window.clearTimeout(timer);
+        state.settleTimers.set(
+          key,
+          window.setTimeout(() => {
+            state.settleTimers.delete(key);
+            state.baselines.set(key, state.highest.get(key));
+          }, 400),
+        );
+        return;
+      }
+
+      const baseline = state.baselines.get(key);
+      if (turn <= baseline || turn === state.spoken) return;
+      state.pending = { turn, text, sessionId };
+      if (state.timer !== null) window.clearTimeout(state.timer);
+      // 等一轮渲染稳定再念，避免同一轮被重复触发。
+      state.timer = window.setTimeout(() => {
+        state.timer = null;
+        const pending = state.pending;
+        if (pending === null) return;
+        state.pending = null;
+        state.spoken = pending.turn;
+        // 上一轮还没念完就来了新回复：打断它，先念新的。
+        if (speechStore.get().status !== 'idle') stopSpeech();
+        const engine = avatarStore.get().engine;
+        if (engine === 'clone') speakClone(pending.text, pending.sessionId, pending.turn);
+        else startSpeech(pending.text, pending.sessionId, pending.turn);
+      }, 600);
+    }
+
     /**
      * Replacement renderer for the settled Turn header row ("已完成，用时 …").
      * It keeps the shipped disclosure behaviour, adds the character avatar in
@@ -1211,17 +1715,34 @@ window.__ModuleLoader__.load({
       const { node, turnProcess, t: hostT, useChat, sessionId } = props;
       // 语言按钮改的是插件自己的文案，这里把宿主的 t 换掉。
       const t = useT(hostT);
-      const avatar = useAvatar();
-      const speech = useSpeech();
+      const avatar = useRowAvatar();
+      const speech = useRowSpeech();
       const turnNumber = node !== undefined && node.data !== undefined ? node.data.turn : undefined;
       const answerStep =
         turnProcess !== undefined && turnProcess.spec !== undefined ? turnProcess.spec.answerStep : undefined;
       const selectChat = typeof useChat === 'function' ? useChat : (selector) => selector(EMPTY_CHAT_SNAPSHOT);
       const replyText = selectChat((snapshot) => readReplyText(snapshot, turnNumber, answerStep, avatar.speech));
+      React.useEffect(() => {
+        if (!avatar.speech || !avatar.autoSpeech) return;
+        // 切进一个会话时，把它已有的最新一轮当作基线：旧内容不念，之后的回复照常念。
+        const current = String(sessionId);
+        if (lastAutoSession !== current) {
+          lastAutoSession = current;
+          autoSpeechState.baselines.delete(current);
+          autoSpeechState.settleTimers.forEach((timer) => window.clearTimeout(timer));
+          autoSpeechState.settleTimers.clear();
+        }
+        scheduleAutoSpeech(turnNumber, replyText, true, sessionId);
+      }, [turnNumber, replyText, avatar.autoSpeech, avatar.speech, sessionId]);
+      // 换会话（或这一轮已经不属于当前播放）时，把还在响的声音停掉：
+      // 之前只监听 sessionId 变化，有时状态已经切走、声音却还在播。
       React.useEffect(() => {
         const current = speechStore.get();
-        if (current.status === 'speaking' && current.sessionId !== sessionId) stopSpeech();
-      }, [sessionId]);
+        if (current.status === 'idle') return;
+        // 试听（sessionId 为 null）不属于任何会话，不能被聊天行停掉。
+        if (current.sessionId === null) return;
+        if (current.sessionId !== sessionId) stopSpeech();
+      }, [sessionId, speech.status, speech.sessionId]);
       if (turnProcess === undefined || node === undefined) return null;
       const location = node.location;
       const turn = location && (location.kind === 'turn' || location.kind === 'step') ? location.turn : undefined;
@@ -1297,7 +1818,7 @@ window.__ModuleLoader__.load({
       const failureDot =
         showSpeaker && failed ? h('span', { className: 'dsav-errorDot', title: speech.error, 'aria-label': speech.error }) : null;
       // 朗读时把控制条接在小喇叭右边，紧贴正在读的那一行。
-      const inlineControls = speaking && speech.engine === 'clone' ? h(SpeechControls, { t, speech }) : null;
+      const inlineControls = speaking && speech.engine !== null ? h(SpeechControls, { t, speech }) : null;
 
       const captionRow =
         caption === null && speaker === null && failureDot === null
@@ -1439,58 +1960,74 @@ window.__ModuleLoader__.load({
     /** Live reachability of the user's own service, so a blank voice is explainable. */
     function useCloneStatus(endpoint) {
       const [state, setState] = React.useState({ status: 'checking', model: null });
-      const tick = React.useSyncExternalStore(probeStore.subscribe, probeStore.get, probeStore.get).tick;
+      const probe = React.useSyncExternalStore(probeStore.subscribe, probeStore.get, probeStore.get);
+      const tick = probe.tick;
+      const startingSince = probe.startingSince;
       React.useEffect(() => {
         const address = (endpoint || '').trim().replace(/\/+$/, '') || DEFAULT_ENDPOINT;
         let alive = true;
         let retryTimer = null;
         let controller = null;
         // 服务重启时第一次请求可能落在旧连接上，先重试一次再判定离线；
-        // 判定离线后每 8 秒再探一次，服务起来后界面会自己变回已连接。
-        const schedule = (delay) => {
+        // 判定离线后每 2.5 秒再探一次（本机 /health 只要 2ms，成本可忽略），
+        // 连上后改成每 30 秒一次的静默保活，服务中途挂掉也能自己变红。
+        const OFFLINE_RETRY_MS = 2500;
+        const ONLINE_KEEPALIVE_MS = 30000;
+        const TRANSIENT_RETRY_MS = 700;
+        const schedule = (delay, attempt, silent) => {
           retryTimer = window.setTimeout(() => {
             if (!alive) return;
-            probe(0);
+            probe(attempt, silent);
           }, delay);
         };
-        const probe = (attempt) => {
+        const probe = (attempt, silent) => {
           if (!alive) return;
           controller = new AbortController();
           const timer = window.setTimeout(() => controller.abort(), 4000);
+          const retryOrOffline = (reason) => {
+            if (!alive) return;
+            const since = probeStore.get().startingSince;
+            const warming = since !== null && Date.now() - since < SERVICE_WARMUP_MS;
+            if (warming) {
+              // 暖机期：服务大概率还在加载模型，保持「检测中」，别显示「未连接」。
+              setState({ status: 'checking', model: null, reason: null });
+              schedule(1200, 0, true);
+              return;
+            }
+            if (attempt < 1) schedule(TRANSIENT_RETRY_MS, attempt + 1, silent);
+            else setOffline(reason);
+          };
+          const markOnline = (model) => {
+            if (!alive) return;
+            if (probeStore.get().startingSince !== null) probeStore.set({ startingSince: null });
+            setState({ status: 'online', model, reason: null });
+            schedule(ONLINE_KEEPALIVE_MS, 0, true);
+          };
           fetch(address + '/health', { signal: controller.signal })
             .then((response) => {
               if (!alive) return;
               if (!response.ok) {
-                if (attempt === 0) schedule(700);
-                else setOffline();
+                retryOrOffline('http:' + response.status);
                 return;
               }
               return response
                 .json()
-                .then((payload) => {
-                  if (alive) setState({ status: 'online', model: payload && payload.model ? String(payload.model) : null });
-                })
-                .catch(() => {
-                  if (alive) setState({ status: 'online', model: null });
-                });
-            })
-            .catch(() => {
-              if (!alive) return;
-              if (attempt === 0) schedule(700);
-              else setOffline();
+                .then((payload) => markOnline(payload && payload.model ? String(payload.model) : null))
+                .catch(() => markOnline(null));
             })
+            .catch((error) => retryOrOffline(error && error.name === 'AbortError' ? 'timeout' : 'unreachable'))
             .finally(() => {
               window.clearTimeout(timer);
             });
         };
-        const setOffline = () => {
-          setState({ status: 'offline', model: null });
-          schedule(8000);
+        const setOffline = (reason) => {
+          setState({ status: 'offline', model: null, reason: typeof reason === 'string' ? reason : 'unreachable' });
+          schedule(OFFLINE_RETRY_MS, 0, true);
         };
         // Wait for typing to settle, so the address is not probed per keystroke.
         const debounce = window.setTimeout(() => {
           setState({ status: 'checking', model: null });
-          probe(0);
+          probe(0, false);
         }, 350);
         return () => {
           alive = false;
@@ -1498,8 +2035,20 @@ window.__ModuleLoader__.load({
           if (retryTimer !== null) window.clearTimeout(retryTimer);
           if (controller !== null) controller.abort();
         };
-      }, [endpoint, tick]);
-      return state;
+      }, [endpoint, tick, startingSince]);
+
+      // 等待期间每秒重渲染一次，让「已等待 N 秒」走起来。
+      const [nowTick, setNowTick] = React.useState(0);
+      React.useEffect(() => {
+        if (startingSince === null) return undefined;
+        const timer = window.setInterval(() => setNowTick((value) => value + 1), 1000);
+        return () => window.clearInterval(timer);
+      }, [startingSince]);
+
+      const warming = startingSince !== null && Date.now() - startingSince < SERVICE_WARMUP_MS;
+      return warming && state.status !== 'online'
+        ? { status: 'checking', model: null, waitingSeconds: Math.max(1, Math.round((Date.now() - startingSince) / 1000)) }
+        : state;
     }
 
     /** 让健康检查立刻再探一次。 */
@@ -1507,6 +2056,30 @@ window.__ModuleLoader__.load({
       probeStore.set({ tick: probeStore.get().tick + 1 });
     }
 
+    /**
+     * 点了「启动服务」之后调用：进入暖机期。
+     * 模型加载要十几秒，这段时间探测必然失败，但不能因此显示「未连接」把人吓走。
+     */
+    const SERVICE_WARMUP_MS = 25000;
+    function beginServiceWarmup() {
+      probeStore.set({ tick: probeStore.get().tick + 1, startingSince: Date.now() });
+    }
+
+    /** 状态下面那行小字：等待进度或失败原因。原因限制长度，避免撑破界面。 */
+    function statusDetail(t, status) {
+      if (status.waitingSeconds) {
+        return t('status.warming').replace('{s}', String(status.waitingSeconds));
+      }
+      if (status.status !== 'offline' || !status.reason) return null;
+      const reason = String(status.reason);
+      const text = reason.startsWith('http:')
+        ? t('status.reasonHttp').replace('{code}', reason.slice(5))
+        : reason === 'timeout'
+          ? t('status.reasonTimeout')
+          : t('status.reasonUnreachable');
+      return text.length > 70 ? text.slice(0, 70) + '…' : text;
+    }
+
     function EndpointField({ t }) {
       const avatar = useAvatar();
       const status = useCloneStatus(avatar.endpoint);
@@ -1538,6 +2111,51 @@ window.__ModuleLoader__.load({
     }
 
     /** Which engine reads the reply: the system voice or a local service the user runs. */
+    /** 系统语音选择：浏览器自带的音色有软有硬，交给用户挑，附一个试听。 */
+    function SystemVoiceField({ t }) {
+      const avatar = useAvatar();
+      const voices = React.useSyncExternalStore(voicesStore.subscribe, voicesStore.get, voicesStore.get).list;
+      React.useEffect(() => {
+        refreshVoices();
+        const synth = window.speechSynthesis;
+        if (synth && typeof synth.addEventListener === 'function') {
+          const onChange = () => refreshVoices();
+          synth.addEventListener('voiceschanged', onChange);
+          return () => synth.removeEventListener('voiceschanged', onChange);
+        }
+        return undefined;
+      }, []);
+      const options = voiceOptions();  // 中英都列，按界面语言排序
+      const autoLabel = options.length > 0 ? t('sysvoice.auto') + ' · ' + options[0].name : t('sysvoice.auto');
+      return h(
+        'div',
+        { className: 'dsav-field' },
+        h(
+          'div',
+          { className: 'dsav-fieldHead' },
+          h('span', { className: 'dsav-toggleLabel' }, t('sysvoice.label')),
+          h(
+            'span',
+            { className: 'dsav-voiceTools' },
+            h('span', { className: 'dsav-endpointHint dsav-voiceCount' }, t('sysvoice.count').replace('{n}', String(options.length))),
+            h('button', { type: 'button', className: 'dsav-btn', onClick: () => refreshVoices() }, t('sysvoice.refresh')),
+            h('button', { type: 'button', className: 'dsav-btn', onClick: () => auditionSystemVoice() }, t('sysvoice.test')),
+          ),
+        ),
+        h(
+          'select',
+          {
+            className: 'dsav-select dsav-selectFull',
+            value: avatar.sysVoice,
+            'aria-label': t('sysvoice.label'),
+            onChange: (event) => setSysVoice(event.target.value),
+          },
+          h('option', { value: '' }, autoLabel),
+          options.map((voice) => h('option', { key: voice.name, value: voice.name }, voice.name + ' · ' + voice.lang)),
+        ),
+      );
+    }
+
     function EngineField({ t }) {
       const avatar = useAvatar();
       const options = [
@@ -1788,11 +2406,18 @@ window.__ModuleLoader__.load({
               h(IdField, { t, id: avatar.id }),
               h(FontSizeField, { t }),
               h(SpeechToggle, { t }),
+              h(AutoSpeechField, { t }),
+              h(VolumeField, { t }),
               h(EngineField, { t }),
+              avatar.engine === 'clone' ? null : h(SystemVoiceField, { t }),
+              h(
+                'div',
+                { className: 'dsav-sectionRow dsav-auditionRow' },
+                h(AuditionButton, { t }),
+              ),
               avatar.engine === 'clone' ? h(ToneField, { t }) : null,
               avatar.engine === 'clone' ? h(RateField, { t }) : null,
               h(PresetBar, { t }),
-              h('div', { className: 'dsav-pickHint' }, t('dialog.pickHint')),
               h(
                 'div',
                 { className: 'dsav-actions' },
@@ -1999,21 +2624,133 @@ window.__ModuleLoader__.load({
           }),
         ),
         h(FontSizeField, { t }),
+        h(PresetBar, { t }),
+        h(SpeechSettings, { t, status }),
+        h(ServiceControl, { t, online: status.status === 'online', engine: avatar.engine }),
+        h(DiagnosticsBlock, { t, status }),
+        h('div', { className: 'dsav-bundleHint' }, t('bundle.hint')),
+      );
+    }
+
+    /**
+     * 朗读相关的整块设置：设置页与插件详情页共用。
+     * 以前两边各写一份，改了一边另一边就落后；现在只维护这里。
+     */
+    function SpeechSettings({ t, status }) {
+      const avatar = useAvatar();
+      return h(
+        Fragment,
+        null,
+        h('div', { className: 'dsav-sectionTitle' }, t('section.speech')),
         h(SpeechToggle, { t }),
+        h(AutoSpeechField, { t }),
+        h(VolumeField, { t }),
         h(EngineField, { t }),
+        avatar.engine === 'clone' ? null : h(SystemVoiceField, { t }),
         avatar.engine === 'clone' ? h(ToneField, { t }) : null,
         h(RateField, { t }),
-        avatar.engine === 'clone' ? h(AuditionButton, { t }) : null,
-        h(PresetBar, { t }),
-        h('div', { className: 'dsav-sectionTitle' }, t('section.service')),
-        h(ServiceControl, { t, online: status.status === 'online' }),
-        h('div', { className: 'dsav-bundleHint' }, t('bundle.hint')),
+        h(
+          'div',
+          { className: 'dsav-sectionRow' },
+          h(AuditionButton, { t }),
+          h(
+            'span',
+            { className: 'dsav-statusLine' },
+            h(
+              'span',
+              { className: 'dsav-state dsav-state-' + status.status },
+              h('span', { className: 'dsav-dot' }),
+              t('status.' + status.status) + (status.model ? ' · ' + status.model : ''),
+            ),
+            statusDetail(t, status) === null
+              ? null
+              : h('span', { className: 'dsav-endpointHint dsav-warming' }, statusDetail(t, status)),
+          ),
+        ),
+      );
+    }
+
+    /** 诊断信息：两个页面共用。 */
+    function DiagnosticsBlock({ t, status }) {
+      const avatar = useAvatar();
+      const speech = useSpeech();
+      const stats = useStats();
+      return h(
+        Fragment,
+        null,
+        h('div', { className: 'dsav-sectionTitle' }, t('section.diagnostics')),
+        h(
+          'div',
+          { className: 'dsav-diagnostics' },
+          avatar.engine === 'clone' ? h('div', null, t('diag.service') + ': ' + t('status.' + status.status)) : null,
+          avatar.engine !== 'clone' || stats.lastMs === null ? null : h('div', null, t('diag.latency') + ': ' + Math.round(stats.lastMs) + ' ms'),
+          speech.status === 'idle' ? null : h('div', null, t('diag.progress') + ': ' + (speech.index + 1) + ' / ' + speech.total),
+          h(
+            'div',
+            { className: speech.error ? 'dsav-diagError' : undefined },
+            t('diag.lastError') + ': ' + (speech.error || t('diag.none')),
+          ),
+        ),
       );
     }
 
     /* ------------------------------------------------------ settings row */
 
     /** 情绪档位：映射到服务端的 temperature / top_k。 */
+    /** 自动朗读新回复。 */
+    function AutoSpeechField({ t }) {
+      const avatar = useAvatar();
+      const disabled = !avatar.speech;
+      return h(
+        'div',
+        { className: 'dsav-toggleRow' },
+        h(
+          'span',
+          { className: 'dsav-toggleLabel' + (disabled ? ' dsav-muted' : '') },
+          t('auto.label'),
+        ),
+        h(
+          'button',
+          {
+            type: 'button',
+            role: 'switch',
+            'aria-checked': avatar.autoSpeech ? 'true' : 'false',
+            'aria-label': t('auto.label'),
+            disabled,
+            className: 'dsav-switch' + (avatar.autoSpeech ? ' dsav-switchOn' : ''),
+            onClick: () => setAutoSpeech(!avatar.autoSpeech),
+          },
+          h('span', { className: 'dsav-switchDot' }),
+        ),
+      );
+    }
+
+    /** 音量：两种引擎都生效。 */
+    function VolumeField({ t }) {
+      const avatar = useAvatar();
+      const percent = Math.round(avatar.volume * 100);
+      return h(
+        'div',
+        { className: 'dsav-toggleRow' },
+        h('span', { className: 'dsav-toggleLabel' }, t('volume.label')),
+        h(
+          'span',
+          { className: 'dsav-volume' },
+          h('input', {
+            className: 'dsav-range',
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 5,
+            value: percent,
+            'aria-label': t('volume.label'),
+            onChange: (event) => setVolume(Number(event.target.value) / 100),
+          }),
+          h('span', { className: 'dsav-volumeValue' }, percent + '%'),
+        ),
+      );
+    }
+
     function ToneField({ t }) {
       const avatar = useAvatar();
       const options = [
@@ -2077,15 +2814,43 @@ window.__ModuleLoader__.load({
     function AuditionButton({ t }) {
       const speech = useSpeech();
       const busy = speech.status === 'speaking' || speech.status === 'paused';
+      // 只显示试听自己产生的错误：试听不属于任何会话（sessionId 为 null），
+      // 聊天里某句朗读失败不应该在设置页显示成「试听失败」。
+      const failed = !busy && speech.error && speech.sessionId === null;
+      const hint = busy
+        ? t('audition.playing').replace('{n}', String(speech.index + 1)).replace('{m}', String(speech.total))
+        : failed
+          ? t('audition.failed') + '：' + String(speech.error).slice(0, 60)
+          : null;
       return h(
-        'button',
-        {
-          type: 'button',
-          className: 'dsav-btn dsav-audition',
-          disabled: busy,
-          onClick: () => speakClone(t('audition.text'), null, null),
-        },
-        busy ? t('audition.stopHint') : t('audition.label'),
+        Fragment,
+        null,
+        h(
+          'button',
+          {
+            type: 'button',
+            className: 'dsav-btn dsav-audition',
+            // 永远可点：状态可能残留成 speaking（没有对应行能停掉），
+            // 点一下就先收干净再从头念，保证有反应。
+            onClick: () => {
+              const text = t('audition.text');
+              const engine = avatarStore.get().engine;
+              trace('audition: click received engine=' + engine + ' text=' + text.slice(0, 20));
+              stopSpeech();
+              if (engine === 'clone') {
+                speakClone(text, null, null).catch((error) => trace('audition: unhandled ' + String(error)));
+              } else {
+                auditionSystemVoice();
+              }
+            },
+            onMouseDown: (event) => event.stopPropagation(),
+            onPointerDown: (event) => event.stopPropagation(),
+          },
+          t('audition.label'),
+        ),
+        hint === null
+          ? null
+          : h('span', { className: failed ? 'dsav-endpointHint dsav-auditionError' : 'dsav-endpointHint' }, hint),
       );
     }
 
@@ -2182,7 +2947,7 @@ window.__ModuleLoader__.load({
     const EMPTY_SERVICE_CONFIG = { command: '', cwd: '', env: '', autostart: false };
 
     /** 语音服务：手动启动/停止、随 DSH 启动、启动命令配置。 */
-    function ServiceControl({ t, online }) {
+    function ServiceControl({ t, online, engine }) {
       const [ready, setReady] = React.useState(false);
       const [available, setAvailable] = React.useState(true);
       const [running, setRunning] = React.useState(false);
@@ -2232,7 +2997,28 @@ window.__ModuleLoader__.load({
       React.useEffect(load, []);
 
       const act = (action, payload) => {
-        setBusy(action);
+        const restart = action === 'restart';
+        setBusy(restart ? 'restart' : action);
+        if (restart) {
+          serviceCall('POST', { action: 'stop' })
+            .then((data) => {
+              adopt(data);
+              return new Promise((resolve) => window.setTimeout(resolve, 600));
+            })
+            .then(() => serviceCall('POST', { action: 'start' }))
+            .then((data) => {
+              adopt(data);
+              setMessage(data.ok === false ? data.error || t('service.failed') : t('service.startDone'));
+              beginServiceWarmup();
+              window.setTimeout(load, 3000);
+            })
+            .catch((error) => {
+              setAvailable(false);
+              setMessage(String(error && error.message ? error.message : error));
+            })
+            .finally(() => setBusy(''));
+          return;
+        }
         serviceCall('POST', { action, ...(payload || {}) })
           .then((data) => {
             setAvailable(true);
@@ -2243,7 +3029,7 @@ window.__ModuleLoader__.load({
               setMessage(t('service.' + action + 'Done'));
             }
             if (action === 'start') {
-              window.setTimeout(recheckService, 1500);
+              beginServiceWarmup();
               // 进程若几秒内就退出，把它的输出取回来给用户看。
               window.setTimeout(load, 3000);
             }
@@ -2256,14 +3042,15 @@ window.__ModuleLoader__.load({
           .finally(() => setBusy(''));
       };
 
-      if (!ready) {
-        return h('div', { className: 'dsav-service' }, h('div', { className: 'dsav-sectionTitle' }, t('service.title')));
-      }
+      // 先拿到宿主端状态再决定显示什么：音色是「系统语音」时这块默认整段隐藏，
+      // 但进程还在跑、或者开着「随 DSH 启动」时仍要露出来，否则用户没有收尾的入口。
+      if (!ready) return null;
+      if (engine !== 'clone' && !running && !config.autostart) return null;
       if (!available) {
         return h(
           'div',
           { className: 'dsav-service' },
-          h('div', { className: 'dsav-sectionTitle' }, t('service.title')),
+          h('div', { className: 'dsav-sectionTitle' }, t('section.service')),
           h('div', { className: 'dsav-endpointHint' }, t('service.unavailable')),
         );
       }
@@ -2271,7 +3058,8 @@ window.__ModuleLoader__.load({
       return h(
         'div',
         { className: 'dsav-service' },
-        h('div', { className: 'dsav-sectionTitle' }, t('service.title')),
+        h('div', { className: 'dsav-sectionTitle' }, t('section.service')),
+        engine === 'clone' ? null : h('div', { className: 'dsav-endpointHint' }, t('service.onlyForLocal')),
         h(
           'div',
           { className: 'dsav-serviceRow' },
@@ -2281,16 +3069,18 @@ window.__ModuleLoader__.load({
             h('span', { className: 'dsav-dot' }),
             running ? t('service.running') : online ? t('service.external') : t('service.stopped'),
           ),
-          h(
-            'button',
-            {
-              type: 'button',
-              className: 'dsav-btn',
-              disabled: busy !== '' || running || online,
-              onClick: () => act('start'),
-            },
-            t('service.start'),
-          ),
+          engine === 'clone'
+            ? h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'dsav-btn',
+                  disabled: busy !== '' || running || online,
+                  onClick: () => act('start'),
+                },
+                t('service.start'),
+              )
+            : null,
           h(
             'button',
             {
@@ -2301,6 +3091,18 @@ window.__ModuleLoader__.load({
             },
             t('service.stop'),
           ),
+          engine === 'clone'
+            ? h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'dsav-btn',
+                  disabled: busy !== '' || !running,
+                  onClick: () => act('restart'),
+                },
+                t('service.restart'),
+              )
+            : null,
         ),
         h(
           'div',
@@ -2391,9 +3193,7 @@ window.__ModuleLoader__.load({
     function SettingsSection({ t: hostT }) {
       const t = useT(hostT);
       const avatar = useAvatar();
-      const speech = useSpeech();
       const status = useCloneStatus(avatar.endpoint);
-      const stats = useStats();
       return h(
         'div',
         { className: 'dsav-section' },
@@ -2434,39 +3234,9 @@ window.__ModuleLoader__.load({
         ),
         h(FontSizeField, { t }),
         h(PresetBar, { t }),
-        h('div', { className: 'dsav-sectionTitle' }, t('section.speech')),
-        h(SpeechToggle, { t }),
-        h(EngineField, { t }),
-        avatar.engine === 'clone' ? h(ToneField, { t }) : null,
-        h(RateField, { t }),
-        avatar.engine === 'clone'
-          ? h(
-              'div',
-              { className: 'dsav-sectionRow' },
-              h(AuditionButton, { t }),
-              h(
-                'span',
-                { className: 'dsav-state dsav-state-' + status.status },
-                h('span', { className: 'dsav-dot' }),
-                t('status.' + status.status) + (status.model ? ' · ' + status.model : ''),
-              ),
-            )
-          : null,
-        h('div', { className: 'dsav-sectionTitle' }, t('section.service')),
-        h(ServiceControl, { t, online: status.status === 'online' }),
-        h('div', { className: 'dsav-sectionTitle' }, t('section.diagnostics')),
-        h(
-          'div',
-          { className: 'dsav-diagnostics' },
-          h('div', null, t('diag.service') + ': ' + t('status.' + status.status)),
-          stats.lastMs === null ? null : h('div', null, t('diag.latency') + ': ' + Math.round(stats.lastMs) + ' ms'),
-          speech.status === 'idle' ? null : h('div', null, t('diag.progress') + ': ' + (speech.index + 1) + ' / ' + speech.total),
-          h(
-            'div',
-            { className: speech.error ? 'dsav-diagError' : undefined },
-            t('diag.lastError') + ': ' + (speech.error || t('diag.none')),
-          ),
-        ),
+        h(SpeechSettings, { t, status }),
+        h(ServiceControl, { t, online: status.status === 'online', engine: avatar.engine }),
+        h(DiagnosticsBlock, { t, status }),
       );
     }
 
@@ -2503,11 +3273,24 @@ window.__ModuleLoader__.load({
 .dsav-langBtn{height:22px;padding:0 10px;border:0;background:transparent;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:11px;line-height:1;cursor:pointer}
 .dsav-langBtn:hover{color:var(--dsw-alias-label-primary)}
 .dsav-langOn{background:var(--dsw-alias-bg-l2);color:var(--dsw-alias-label-primary);font-weight:600}
-.dsav-dialogSmall{width:min(368px,100%)}
+.dsav-field{display:flex;flex-direction:column;gap:8px;margin-top:12px}
+.dsav-fieldHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.dsav-selectFull{width:100%;max-width:none}
+.dsav-voiceTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.dsav-voiceCount{white-space:nowrap}
+.dsav-warming{font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dsav-muted{opacity:.5}
+.dsav-auditionError{color:var(--dsw-alias-label-error, #c0392b);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:0}
+.dsav-sectionRow .dsav-auditionError,.dsav-sectionRow .dsav-endpointHint{margin-top:0;align-self:center}
+.dsav-volume{display:flex;align-items:center;gap:8px;min-width:160px}
+.dsav-volume .dsav-range{margin:0;flex:1}
+.dsav-volumeValue{font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
+.dsav-select{box-sizing:border-box;height:28px;padding:0 8px;border-radius:var(--dsw-radius-sm,6px);border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;line-height:1}
+.dsav-select:focus{outline:none;border-color:var(--dsw-alias-brand-primary)}
+.dsav-dialogSmall{width:min(420px,100%)}
 .dsav-input{box-sizing:border-box;width:100%;height:32px;padding:0 10px;border-radius:var(--dsw-radius-sm,6px);border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:20px}
 .dsav-input::placeholder{color:var(--dsw-alias-label-tertiary)}
 .dsav-input:focus{outline:none;border-color:var(--dsw-alias-brand-primary)}
-.dsav-pickHint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;margin-top:10px}
 .dsav-stage{position:relative;width:${STAGE}px;height:${STAGE}px;max-width:100%;margin:0 auto;border-radius:50%;overflow:hidden;background:var(--dsw-alias-bg-layer-2);cursor:grab;touch-action:none;user-select:none}
 .dsav-stage:active{cursor:grabbing}
 .dsav-stageImg{position:absolute;left:50%;top:50%;max-width:none;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
@@ -2593,6 +3376,9 @@ window.__ModuleLoader__.load({
 .dsav-section{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
 .dsav-sectionTitle{font-size:12px;font-weight:600;color:var(--dsw-alias-label-secondary);margin-top:6px}
 .dsav-sectionRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.dsav-statusLine{display:inline-flex;align-items:center;gap:8px;min-width:0;flex:1}
+.dsav-auditionRow{margin-top:12px}
+.dsav-statusLine .dsav-endpointHint{margin-top:0;flex:0 1 auto;min-width:0}
 .dsav-sectionPreview{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--dsw-alias-bg-l2);display:inline-flex;align-items:center;justify-content:center;color:var(--dsw-alias-label-tertiary)}
 .dsav-sectionPreview img{width:100%;height:100%;object-fit:cover}
 .dsav-sectionField{flex:1;min-width:180px}
@@ -2654,6 +3440,34 @@ window.__ModuleLoader__.load({
           tag.remove();
         };
       }, 'dsh-avatar-frame: styles');
+      ctx.effect(() => {
+        if (typeof window.setInterval !== 'function') return () => {};
+        const timer = window.setInterval(() => {
+          const state = speechStore.get();
+          if (state.status === 'idle') return;
+          if (speechRun.source !== null || speechRun.system || speechRun.pendingFetches > 0) {
+            speechRun.settledAt = null;
+            return;
+          }
+          if (speechRun.settledAt === null) {
+            speechRun.settledAt = Date.now();
+            return;
+          }
+          if (Date.now() - speechRun.settledAt < 3000) return;
+          speechRun.settledAt = null;
+          speechStore.set({
+            status: 'idle',
+            sessionId: null,
+            turn: null,
+            index: 0,
+            total: 0,
+            rate: speechRun.rate,
+            error: 'playback did not start',
+            engine: null,
+          });
+        }, 1000);
+        return () => window.clearInterval(timer);
+      }, 'dsh-avatar-frame: playback watchdog');
       // Do not keep talking after the plugin itself is unloaded.
       ctx.effect(() => () => stopSpeech(), 'dsh-avatar-frame: stop audio on unload');
       // A second window keeps its own copy of the stores; reload on its writes.