@olares/lares-mobile 0.15.17 → 0.15.19

package/src/desktop/DesktopComposer.vue

@@ -42,7 +42,7 @@
       <LaresPcPopover
         v-model="modelOpen"
         class="desktop-composer__model-slot"
-        :width="260"
+        :width="280"
         placement="top-end"
       >
         <template #trigger="{ toggle }">
@@ -52,61 +52,71 @@
             :disabled="state.modelBusy"
             aria-haspopup="menu"
             :aria-expanded="modelOpen"
+            :aria-label="modelSwitchLabel"
             @mousedown.prevent
             @click="toggle"
           >
-            <span>{{ state.modelLabel }}</span>
+            <span class="desktop-composer__model-name">{{ state.modelLabel }}</span>
+            <span v-if="!state.effortDisabled" class="desktop-composer__model-effort">{{ state.effortLabel }}</span>
             <ChevronIcon />
           </button>
         </template>
-        <div class="desktop-composer__menu">
-          <p v-if="state.modelError" class="desktop-composer__menu-status">{{ state.modelError }}</p>
-          <p v-else-if="!state.models" class="desktop-composer__menu-status">{{ t("agent.loading") }}</p>
-          <template v-for="group in state.modelGroups" :key="group.provider">
-            <p class="desktop-composer__menu-label">{{ group.name || group.provider }}</p>
+        <div class="desktop-composer__menu" @keydown="onModelMenuKey">
+          <template v-if="modelPane === 'root'">
+            <button type="button" class="desktop-composer__drill" @click="modelPane = 'model'">
+              <span>{{ t("menu.model") }}</span>
+              <span class="desktop-composer__drill-value">{{ state.modelLabel }}</span>
+              <ChevronIcon class="desktop-composer__drill-caret" />
+            </button>
+            <button v-if="!state.effortDisabled" type="button" class="desktop-composer__drill" @click="modelPane = 'effort'">
+              <span>{{ t("menu.effort") }}</span>
+              <span class="desktop-composer__drill-value">{{ state.effortLabel }}</span>
+              <ChevronIcon class="desktop-composer__drill-caret" />
+            </button>
+          </template>
+          <template v-else-if="modelPane === 'model'">
+            <button type="button" class="desktop-composer__drill" @click="modelPane = 'root'">
+              <ChevronIcon class="desktop-composer__back-caret" />
+              <span>{{ t("menu.model") }}</span>
+            </button>
+            <p v-if="state.modelCatalogError" class="desktop-composer__menu-status" role="status">{{ state.modelCatalogError }}</p>
+            <button type="button" class="desktop-composer__option" @click="state.refreshModels()">{{ t('agent.refresh') }}</button>
+            <p v-if="state.modelError" class="desktop-composer__menu-status">{{ state.modelError }}</p>
+            <p v-else-if="!state.models" class="desktop-composer__menu-status">{{ t("agent.loading") }}</p>
+            <template v-for="group in state.modelGroups" :key="group.provider">
+              <p class="desktop-composer__menu-label">{{ group.name || group.provider }}</p>
+              <button
+                v-for="model in group.models"
+                :key="modelKey(model)"
+                type="button"
+                class="desktop-composer__option"
+                :data-selected="modelKey(model) === state.modelCurrent"
+                @click="chooseModel(model)"
+              >
+                <span>{{ model.name }}</span>
+                <CheckIcon v-if="modelKey(model) === state.modelCurrent" />
+              </button>
+            </template>
+          </template>
+          <template v-else>
+            <button type="button" class="desktop-composer__drill" @click="modelPane = 'root'">
+              <ChevronIcon class="desktop-composer__back-caret" />
+              <span>{{ t("menu.effort") }}</span>
+            </button>
             <button
-              v-for="model in group.models"
-              :key="modelKey(model)"
+              v-for="row in state.effortRows"
+              :key="row.key"
               type="button"
               class="desktop-composer__option"
-              :data-selected="modelKey(model) === state.modelCurrent"
-              @click="chooseModel(model)"
+              :data-selected="row.id === state.effortId"
+              @click="chooseEffort(row.id)"
             >
-              <span>{{ model.name }}</span>
-              <CheckIcon v-if="modelKey(model) === state.modelCurrent" />
+              <span>{{ effortName(row) }}</span>
+              <CheckIcon v-if="row.id === state.effortId" />
             </button>
           </template>
         </div>
       </LaresPcPopover>
-      <LaresPcPopover v-if="!state.effortDisabled" v-model="effortOpen" :width="180" placement="top-end">
-        <template #trigger="{ toggle }">
-          <button
-            type="button"
-            class="desktop-composer__model"
-            :disabled="state.modelBusy"
-            aria-haspopup="menu"
-            :aria-expanded="effortOpen"
-            @mousedown.prevent
-            @click="toggle"
-          >
-            <span>{{ state.effortLabel }}</span>
-            <ChevronIcon />
-          </button>
-        </template>
-        <div class="desktop-composer__menu">
-          <button
-            v-for="row in state.effortRows"
-            :key="row.key"
-            type="button"
-            class="desktop-composer__option"
-            :data-selected="row.id === state.effortId"
-            @click="chooseEffort(row.id)"
-          >
-            <span>{{ effortName(row) }}</span>
-            <CheckIcon v-if="row.id === state.effortId" />
-          </button>
-        </div>
-      </LaresPcPopover>
     </div>
 
     <LaresDesktopTodos :rows="state.todos || []" :t="t" />
@@ -243,7 +253,14 @@
           </button>
         </figure>
       </div>
+      <LaresVoiceInput
+        v-if="dictating"
+        :view="state.voicePanelState"
+        :t="t"
+        @action="$emit('voice-action', $event)"
+      />
       <textarea
+        v-show="!dictating"
         ref="input"
         :value="state.draft"
         class="desktop-composer__input"
@@ -371,6 +388,20 @@
           :breakdown="state.contextBreakdown"
           :t="t"
         />
+        <div class="desktop-composer__submit">
+        <LaresPcTooltip v-if="showMic" :label="micLabel" placement="top">
+          <button
+            type="button"
+            class="desktop-composer__circle"
+            data-kind="dictate"
+            :disabled="micDisabled"
+            :aria-label="micLabel"
+            @mousedown.prevent
+            @click="dictate"
+          >
+            <MicIcon />
+          </button>
+        </LaresPcTooltip>
         <LaresPcTooltip
           class="desktop-composer__send-slot"
           :label="state.running ? t('chat.stop') : t('chat.send')"
@@ -388,6 +419,7 @@
             <ArrowIcon v-else />
           </button>
         </LaresPcTooltip>
+        </div>
       </div>
       </div>
     </Transition>
@@ -443,6 +475,7 @@ import { resolveSubmitMode } from "@olares/lares-core/larepass/submission-settin
 import { DEFAULT_WORKSPACE_TITLE } from "@olares/lares-core/workspace/constants";
 import { activeReferenceToken, insertReference } from "@olares/lares-core/larepass/references";
 import { draftImageStatus } from "@olares/lares-core/files/draft-images";
+import LaresVoiceInput from "../chat/VoiceInput.vue";
 import LaresDesktopQueue from "./DesktopQueue.vue";
 import LaresDesktopQuestions from "./DesktopQuestions.vue";
 import LaresDesktopContextMeter from "./DesktopContextMeter.vue";
@@ -473,6 +506,15 @@ const StopIcon = {
   },
 };
 const CloseIcon = icon("CloseIcon", "m7 7 10 10M17 7 7 17");
+const MicIcon = {
+  name: "MicIcon",
+  render() {
+    return h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, [
+      h("rect", { x: 9, y: 2, width: 6, height: 12, rx: 3 }),
+      h("path", { d: "M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8" }),
+    ]);
+  },
+};
 
 const SHIELD = "M12 3.5 19 6v5.4c0 4.2-2.8 7.4-7 9.1-4.2-1.7-7-4.9-7-9.1V6l7-2.5Z";
 /** One shield, three glyphs: what this preset lets a tool do. */
@@ -496,7 +538,7 @@ const PermissionIcon = {
 
 export default {
   name: "LaresDesktopComposer",
-  components: { LaresDesktopContextMeter, LaresDesktopGoal, LaresDesktopQuestions, LaresDesktopQueue, LaresDesktopTodos, LaresPcDialog, LaresPcPopover, LaresPcTooltip, ChevronIcon, CheckIcon, PlusIcon, PaperclipIcon, ArrowIcon, StopIcon, CloseIcon, PermissionIcon },
+  components: { LaresVoiceInput, LaresDesktopContextMeter, LaresDesktopGoal, LaresDesktopQuestions, LaresDesktopQueue, LaresDesktopTodos, LaresPcDialog, LaresPcPopover, LaresPcTooltip, ChevronIcon, CheckIcon, PlusIcon, PaperclipIcon, ArrowIcon, StopIcon, CloseIcon, MicIcon, PermissionIcon },
   props: {
     state: { type: Object, required: true },
     t: { type: Function, required: true },
@@ -507,12 +549,13 @@ export default {
   emits: [
     "update-draft", "send", "stop", "steer-queue", "files", "choose-model", "choose-effort", "answer-approval", "answer-questions",
     "choose-permission", "disable-plan", "goal-action", "open-commands", "pick-command", "queue-action", "remove-image", "pick-workspace",
+    "dictate", "voice-action",
   ],
   data() {
     return {
       modelOpen: false,
+      modelPane: "root",
       workspaceOpen: false,
-      effortOpen: false,
       permissionOpen: false,
       permissionConfirm: false,
       permissionAcknowledged: false,
@@ -557,6 +600,25 @@ export default {
     attachDisabled() {
       return !this.state.sessionId || this.state.historyLoading || this.state.starting;
     },
+    modelSwitchLabel() {
+      const model = this.state.modelLabel;
+      const label = this.state.effortDisabled ? model : `${model}, ${this.state.effortLabel}`;
+      return this.t("model.switchAria", { label });
+    },
+    dictating() {
+      const view = this.state.voicePanelState;
+      return Boolean(view?.inputActive && view.mode === "single");
+    },
+    showMic() {
+      return this.state.voiceDictation !== false;
+    },
+    micLabel() {
+      return this.t(this.state.voiceReady ? "settings.mode.single" : "mic.checking");
+    },
+    micDisabled() {
+      const view = this.state.voicePanelState;
+      return !this.state.voiceReady || view?.busy || (view?.visible && view?.mode === "single");
+    },
     visibleCommands() {
       const rows = this.state.commands || [];
       if (!this.commandTyped) return rows;
@@ -585,6 +647,15 @@ export default {
     },
   },
   watch: {
+    modelOpen(open) {
+      if (open) {
+        this.modelPane = "root";
+        window.addEventListener("keydown", this.onModelMenuKey, true);
+        if (this.state.modelCatalogError) void this.state.refreshModels();
+      } else {
+        window.removeEventListener("keydown", this.onModelMenuKey, true);
+      }
+    },
     "state.draft"() {
       this.autosize();
     },
@@ -599,6 +670,7 @@ export default {
   beforeUnmount() {
     window.clearTimeout(this.referenceTimer);
     window.removeEventListener("mousedown", this.onComposerOverlayPointer, true);
+    window.removeEventListener("keydown", this.onModelMenuKey, true);
   },
   methods: {
     pickWorkspace(workspaceId) {
@@ -611,9 +683,15 @@ export default {
       this.$emit("choose-model", model);
     },
     chooseEffort(id) {
-      this.effortOpen = false;
+      this.modelOpen = false;
       this.$emit("choose-effort", id);
     },
+    onModelMenuKey(event) {
+      if (event.key !== "Escape" || !this.modelOpen || this.modelPane === "root") return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.modelPane = "root";
+    },
     choosePermission(value) {
       this.permissionOpen = false;
       if (value === this.state.permissionCurrent) return;
@@ -809,6 +887,9 @@ export default {
     primary() {
       this.$emit(this.state.running ? "stop" : "send");
     },
+    dictate() {
+      this.$emit("dictate");
+    },
     autosize() {
       this.$nextTick(() => {
         const input = this.$refs.input;
@@ -844,8 +925,15 @@ export default {
 .desktop-composer__workspace,
 .desktop-composer__model-slot .desktop-composer__model { min-width:0; max-width:100%; }
 .desktop-composer__workspace span,
-.desktop-composer__model-slot .desktop-composer__model span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.desktop-composer__model-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.desktop-composer__model-effort { flex:none; color:var(--q-ink-3); }
+.desktop-composer__drill { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; border:0; border-radius:6px; padding:7px 8px; background:transparent; color:var(--q-ink-1); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
+.desktop-composer__drill:hover { background:var(--q-background-hover); }
+.desktop-composer__drill-value { min-width:0; flex:1; overflow:hidden; color:var(--q-ink-3); text-align:right; text-overflow:ellipsis; white-space:nowrap; }
+.desktop-composer__drill-caret { transform:rotate(-90deg); }
+.desktop-composer__back-caret { transform:rotate(90deg); }
 .desktop-composer__model svg,
+.desktop-composer__drill svg,
 .desktop-composer__permission svg,
 .desktop-composer__circle svg,
 .desktop-composer__send svg,
@@ -911,8 +999,9 @@ export default {
 /* The meter rides with the send button; it renders nothing without an occupancy,
    in which case the send button keeps the auto margin itself. */
 .desktop-composer__meter { margin-left:auto; }
-.desktop-composer__send-slot { margin-left:auto; }
-.desktop-composer__meter + .desktop-composer__send-slot { margin-left:0; }
+.desktop-composer__submit { margin-left:auto; display:flex; align-items:center; gap:8px; }
+.desktop-composer__meter + .desktop-composer__submit { margin-left:0; }
+.desktop-composer__submit .desktop-composer__send-slot { margin-left:0; }
 .desktop-composer__send { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:var(--q-blue-default); color:var(--q-ink-on-brand); }
 .desktop-composer button:disabled { opacity:.45; cursor:default; }
 .desktop-composer__menu { margin:-2px; }

package/src/desktop/DesktopShell.vue

@@ -85,6 +85,8 @@
           @open-references="$emit('open-references', $event)"
           @pick-command="$emit('pick-command', $event)"
           @queue-action="onQueueAction"
+          @dictate="$emit('dictate')"
+          @voice-action="$emit('voice-action', $event)"
         />
         <Transition name="lares-desk-preview">
           <LaresDesktopPreview
@@ -154,7 +156,7 @@ export default {
     "refresh-workspaces", "browse-workspaces", "browse-directory",
     "close-directory", "choose-directory", "create-folder", "toggle-hidden", "rename-workspace",
     "delete-workspace", "move-workspace", "move-session", "rename-session",
-    "fork-session", "archive-session",
+    "fork-session", "archive-session", "dictate", "voice-action",
   ],
   computed: {
     newSessionHero() {

package/src/host.js

@@ -175,6 +175,7 @@ export async function defaultRequest(url, init = {}) {
       ...init.headers,
     },
   });
+  if (init.responseType === "blob" && res.ok && !/json/i.test(res.headers.get("content-type") || "")) return { ok: true, status: res.status, body: await res.blob() };
   const text = await res.text();
   let body;
   if (text) {
@@ -207,6 +208,16 @@ export function createHostClient(ports = {}) {
   );
   return {
     urlFor,
+    async ttsFetch(path, init = {}) {
+      const audio = path.endsWith("/audio/speech");
+      const result = await request(path, { ...init, ...(audio ? { responseType: "blob" } : {}) });
+      return { ok: result.ok, status: result.status, json: async () => result.body,
+        blob: async () => {
+          if (result.body instanceof Blob) return result.body;
+          if (result.body instanceof ArrayBuffer || ArrayBuffer.isView(result.body)) return new Blob([result.body], { type: "audio/wav" });
+          throw new Error("tts_preview_failed");
+        } };
+    },
     probe() {
       if (ports.missing) return Promise.resolve({ status: "missing" });
       return probeHost((path) => request(path), MODELS_PATH);
@@ -270,9 +281,9 @@ export function createHostClient(ports = {}) {
         request: direct,
       });
     },
-    voiceSocket(ticket) {
+    voiceSocket(ticket, path = `${VOICE_API}/realtime`) {
       const auth = socketProtocols(ports);
-      return new WebSocket(muxWsUrl(urlFor(`${VOICE_API}/realtime`), pageOrigin()), ["lares-voice", `lares-ticket.${ticket}`, ...(Array.isArray(auth) ? auth : auth ? [auth] : [])]);
+      return new WebSocket(muxWsUrl(urlFor(path), pageOrigin()), ["lares-voice", `lares-ticket.${ticket}`, ...(Array.isArray(auth) ? auth : auth ? [auth] : [])]);
     },
     voiceRequest(path, options) { return request(path, options); },
     transcribe(blob, language, signal, model) {

package/src/index.d.ts

@@ -86,4 +86,6 @@ export const LaresAgentSettings: DefineComponent<{
   env?: HostEnv;
   request?: (url: string, init?: HostRequestInit) => Promise<HostResponse>;
   missing?: boolean;
+  /** Register the settings close/navigation guard; exposed beforeLeave() is the imperative alternative. */
+  bindBeforeLeave?: (listener: () => Promise<boolean>) => (() => void);
 }>;

package/src/mobile/MobileShell.vue

@@ -172,6 +172,8 @@
     </div>
 
     <LaresSheet :open="state.modelSheet" :title="t('model.menuAria')" @close="$emit('close-model')">
+      <p v-if="state.modelCatalogError" class="lares-shell__status" role="status">{{ state.modelCatalogError }}</p>
+      <button type="button" @click="state.refreshModels()">{{ t('agent.refresh') }}</button>
       <p v-if="state.modelError" class="lares-shell__status">{{ state.modelError }}</p>
       <p v-else-if="!state.models" class="lares-shell__hint">{{ t("agent.loading") }}</p>
       <p v-else-if="!state.modelGroups.length" class="lares-shell__hint">{{ t("model.empty") }}</p>

package/src/settings/AgentSettings.vue

@@ -45,7 +45,7 @@
       <h2>{{ tVoice("settings.title") }}</h2>
       <div class="lares-agent__list">
         <LaresSettingRow
-          :label="tVoice('settings.model.title')"
+          :label="tVoice('settings.stt.model')"
           :value="voiceModelLabel"
           chevron
           boxed
@@ -61,55 +61,13 @@
           @click="openSheet('voiceLang')"
         />
       </div>
-      <template v-if="voice?.config?.dictationProfiles">
-        <label class="lares-agent__hint">{{ tVoice('dictation.preset') }}
-          <select :value="voice.config.dictationPreset" :disabled="busy" @change="patchVoice('dictationPreset', $event.target.value)"><option v-for="id in dictationPresets" :key="id" :value="id">{{ tVoice(`dictation.${id}`) }}</option></select>
-        </label>
-        <label class="lares-agent__hint">{{ tVoice('dictation.configure') }}
-          <select v-model="dictationEditor"><option v-for="id in dictationPresets" :key="id" :value="id">{{ tVoice(`dictation.${id}`) }}</option></select>
-        </label>
-        <template v-if="dictationEditor !== 'raw'">
-          <label class="lares-agent__hint">{{ tVoice('dictation.model') }}
-            <select :value="voice.config.dictationProfiles[dictationEditor].model" :disabled="busy" @change="patchDictation('model', $event.target.value)"><option value="">—</option><option v-for="id in voice.chatModels || []" :key="id" :value="id">{{ id }}</option></select>
-          </label>
-          <label class="lares-agent__hint">{{ tVoice('dictation.instructions') }}
-            <textarea :key="dictationEditor + voice.config.dictationProfiles[dictationEditor].instructions" :value="voice.config.dictationProfiles[dictationEditor].instructions" :disabled="busy" maxlength="8000" @change="patchDictation('instructions', $event.target.value)" />
-          </label>
-          <button type="button" :disabled="busy" @click="resetDictation">{{ tVoice('dictation.reset') }}</button>
-        </template>
-        <p v-else class="lares-agent__hint">{{ tVoice('dictation.noLlm') }}</p>
-      </template>
-      <label class="lares-agent__hint">{{ tVoice('settings.preset') }}
-        <select :value="voice?.config?.preset || 'assistant'" @change="patchVoice('preset', $event.target.value)">
-          <option v-for="preset in ['dictation', 'chat', 'assistant', 'direct']" :key="preset" :value="preset">{{ tVoice(`settings.preset.${preset}`) }}</option>
-        </select>
-      </label>
-      <label class="lares-agent__hint">{{ tVoice('settings.chatModel') }}
-        <select :value="voice?.config?.chatModel || 'default-chat'" @change="patchVoice('chatModel', $event.target.value)">
-          <option value="default-chat">default-chat</option>
-          <option v-for="model in voice?.chatModels || []" :key="model" :value="model">{{ model }}</option>
-        </select>
-      </label>
-      <label class="lares-agent__hint">{{ tVoice('settings.backend') }}
-        <select :value="voice?.config?.backend || 'pipeline'" @change="patchVoice('backend', $event.target.value)">
-          <option value="pipeline">{{ tVoice('settings.backend.pipeline') }}</option>
-          <option v-if="voice?.realtimeReady?.includes(voice?.config?.realtimeModel)" value="realtime">Realtime</option>
-        </select>
-      </label>
-      <label v-if="voice?.realtimeModels?.length" class="lares-agent__hint">{{ tVoice('settings.realtime.model') }}
-        <select :value="voice?.config?.realtimeModel || ''" @change="patchVoice('realtimeModel', $event.target.value)">
-          <option value="" disabled>—</option>
-          <option v-for="model in voice.realtimeModels" :key="model" :value="model">{{ model }}</option>
-        </select>
-      </label>
-      <p class="lares-agent__hint">{{ tVoice('settings.realtime.hint') }}</p>
+      <VoicePreferences :key="hostKey" ref="voicePreferences" :settings="settings" :tts-fetch="ttsFetch" :snapshot="voice" :device="device" :t="tVoice" :bind-before-leave="bindBeforeLeave" @change="voice = $event" />
       <label class="lares-agent__hint">{{ tVoice('settings.mobileMode') }}
         <select :value="voice?.config?.mobileMode || 'continuous'" @change="patchVoice('mobileMode', $event.target.value)">
           <option value="single">{{ tVoice('settings.mode.single') }}</option>
           <option value="continuous">{{ tVoice('settings.mode.continuous') }}</option>
         </select>
       </label>
-      <label class="lares-agent__hint"><input type="checkbox" :checked="voice?.config?.speak === true" :disabled="busy" @change="patchVoice('speak', $event.target.checked)" /> {{ tVoice('settings.speak.title') }}</label>
       <label class="lares-agent__hint">{{ tVoice('settings.device') }}
         <select :value="voice?.config?.device || 'auto'" @change="patchVoice('device', $event.target.value)">
           <option v-for="device in ['auto', 'device', 'headset']" :key="device" :value="device">{{ tVoice(`settings.device.${device}`) }}</option>
@@ -159,7 +117,6 @@
 <script>
 import { t as translate } from "@olares/lares-core/i18n/t";
 import { EN as MODEL_EN, ZH as MODEL_ZH } from "@olares/lares-core/i18n/chat-model";
-import { DICTATION_PRESETS, DICTATION_INSTRUCTIONS } from "@olares/lares-core/voice/dictation";
 import { EN as VOICE_EN, ZH as VOICE_ZH } from "@olares/lares-core/i18n/voice";
 import { EN as SEARCH_EN, ZH as SEARCH_ZH } from "@olares/lares-core/i18n/search";
 import { groupModelsByProvider, selectionKey } from "@olares/lares-core/router/session-model";
@@ -180,6 +137,7 @@ import { createHostClient } from "../host.js";
 import { adoptHost } from "../runtime.js";
 import { createT } from "../i18n.js";
 import { chatDevice, DEVICE_DESKTOP } from "../layout.js";
+import VoicePreferences from "./VoicePreferences.vue";
 import LaresSettingRow from "./SettingRow.vue";
 import LaresSheet from "./Sheet.vue";
 import LaresSelect from "./Select.vue";
@@ -196,8 +154,8 @@ function itemLabel(items, id) {
 
 export default {
   name: "LaresAgentSettings",
-  components: { LaresSettingRow, LaresSheet, LaresSelect },
-  expose: ["reload"],
+  components: { VoicePreferences, LaresSettingRow, LaresSheet, LaresSelect },
+  expose: ["reload", "beforeLeave"],
   props: {
     locale: { type: String, default: "en" },
     device: { type: String, default: "mobile" },
@@ -206,6 +164,7 @@ export default {
     request: { type: Function, default: undefined },
     env: { type: Object, default: undefined },
     missing: { type: Boolean, default: false },
+    bindBeforeLeave: { type: Function, default: undefined },
   },
   data() {
     const remembered = rememberedSettings();
@@ -218,8 +177,6 @@ export default {
       search: remembered.search,
       conversation: remembered.conversation,
       modelError: "",
-      dictationEditor: "clean",
-      dictationPresets: DICTATION_PRESETS,
       voiceError: "",
       searchError: "",
       conversationError: "",
@@ -247,6 +204,7 @@ export default {
     hostKey() {
       return hostSessionKey(this.ports);
     },
+    ttsFetch() { return createHostClient(this.ports).ttsFetch; },
     settings() {
       return createHostClient(this.ports).settings;
     },
@@ -324,7 +282,7 @@ export default {
     },
     sheetTitle() {
       if (this.panel === "model") return this.tModel("settings.title");
-      if (this.panel === "voiceModel") return this.tVoice("settings.model.title");
+      if (this.panel === "voiceModel") return this.tVoice("settings.stt.model");
       if (this.panel === "voiceLang") return this.tVoice("settings.language.title");
       if (this.panel === "search") return this.tSearch("settings.default");
       return "";
@@ -417,7 +375,9 @@ export default {
       if (panel === "search") return searchMenuValue(this.search);
       return "";
     },
+    beforeLeave() { return this.$refs.voicePreferences?.beforeLeave() ?? Promise.resolve(true); },
     reload() {
+      void this.$refs.voicePreferences?.reload().catch(() => {});
       return this.load(true);
     },
     async load(force) {
@@ -437,7 +397,7 @@ export default {
       this.conversationError = "";
       const [models, voice, search, conversation] = await Promise.allSettled([
         this.settings.models({ force }),
-        this.settings.voice(force),
+        this.settings.voice(force, { diagnostics: false }),
         this.settings.search({ force }),
         this.settings.conversation({ force }),
       ]);
@@ -465,18 +425,13 @@ export default {
         this.pending = "";
       }
     },
-    patchDictation(key, value) { return this.patchVoice("dictationProfiles", { ...this.voice.config.dictationProfiles, [this.dictationEditor]: { ...this.voice.config.dictationProfiles[this.dictationEditor], [key]: value } }); },
-    resetDictation() { return this.patchDictation("instructions", DICTATION_INSTRUCTIONS[this.dictationEditor]); },
     async patchVoice(key, value) {
       if (!this.voice || this.busy) return;
-      const previous = this.voice;
-      this.voice = { ...this.voice, config: { ...this.voice.config, [key]: value } };
       this.pending = `voice:${key}`;
       this.voiceError = "";
       try {
-        this.voice = await this.settings.saveVoice({ [key]: value });
+        this.voice = await this.$refs.voicePreferences.patch({ [key]: value });
       } catch {
-        this.voice = previous;
         this.voiceError = this.tVoice("settings.saveFailed");
       } finally {
         this.pending = "";

package/src/settings/TtsSettings.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="lares-tts-settings">
+    <h3>{{ t('settings.tts.title') }}</h3>
+    <label>{{ t('settings.tts.model') }}
+      <select :value="view.value.config.ttsModel || ''" :disabled="state.saving" @change="save(controller.selectModel($event.target.value))">
+        <option value="">{{ t('settings.model.auto') }}</option>
+        <option v-for="id in models" :key="id" :value="id">{{ id }}</option>
+      </select>
+    </label>
+    <p v-if="view.errors.ttsModel" role="alert">{{ t('settings.saveFailed') }}</p>
+    <p v-if="!state.model">{{ t('preferences.modelsMissing') }}</p>
+    <p v-else-if="state.loading" role="status">{{ t('tts.loading') }}</p>
+    <p v-else-if="state.error" role="alert">{{ t('tts.loadFailed') }} <button type="button" @click="controller.load()">{{ t('dictation.retry') }}</button></p>
+    <label v-else-if="state.voices.length || state.unavailable">{{ t('tts.voice') }}
+      <select :value="state.selected" :disabled="state.saving" @change="save(controller.selectVoice($event.target.value))">
+        <option value="">{{ t('tts.default') }}</option>
+        <option v-if="state.unavailable" :value="state.selected" disabled>{{ state.selected }} · {{ t('preferences.unavailable') }}</option>
+        <option v-for="voice in state.voices" :key="voice.id" :value="voice.id">{{ voice.label }}</option>
+      </select>
+    </label>
+    <p v-else>{{ t('tts.noPresets') }}</p>
+    <p v-if="view.errors.ttsVoiceByModel" role="alert">{{ t('settings.saveFailed') }}</p>
+    <div class="lares-tts-settings__preview">
+      <button type="button" :disabled="!state.model || state.loading || Boolean(state.error) || state.saving || state.unavailable || state.blocked" @click="controller.audition()">{{ t(state.playing ? 'tts.stopPreview' : 'tts.preview') }}</button>
+      <p role="status">{{ t(state.blocked ? 'tts.busy' : 'tts.previewHint') }}</p>
+    </div>
+    <p v-if="state.previewError" role="alert">{{ t('tts.previewFailed') }}</p>
+    <label class="lares-tts-settings__speak"><input type="checkbox" :checked="view.value.config.speak === true" :disabled="Boolean(view.pending.speak)" @change="save(preferences.patch({ speak: $event.target.checked }))" />{{ t('settings.speak.title') }}</label>
+    <p v-if="view.errors.speak" role="alert">{{ t('settings.saveFailed') }}</p>
+  </section>
+</template>
+<script>
+import { markRaw } from "vue";
+import { createTtsSettings } from "@olares/lares-core/voice/tts-settings";
+import { fetchTtsVoices } from "@olares/lares-core/voice/tts-voice";
+import { previewTts } from "@olares/lares-core/voice/tts-preview";
+export default {
+  props: { preferences: { type: Object, required: true }, view: { type: Object, required: true }, t: { type: Function, required: true }, fetcher: { type: Function, required: true } },
+  data() {
+    const controller = markRaw(createTtsSettings({ preferences: this.preferences, list: (model, options) => fetchTtsVoices(model, { ...options, fetcher: this.fetcher }), preview: take => previewTts(take, { fetcher: this.fetcher }) }));
+    return { controller, state: controller.getSnapshot() };
+  },
+  computed: { models() { return [...new Set([this.view.value.config.ttsModel, ...(this.view.value.ttsModels || [])].filter(Boolean))]; } },
+  mounted() { this.off = this.controller.subscribe(() => { this.state = this.controller.getSnapshot(); }); void this.controller.load(); },
+  beforeUnmount() { this.off?.(); this.controller.dispose(); },
+  methods: { save(operation) { void operation.catch(() => {}); } },
+};
+</script>
+<style scoped>
+.lares-tts-settings { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.lares-tts-settings label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.lares-tts-settings select { width: 100%; min-width: 0; max-width: 100%; font: inherit; color: inherit; border: 1px solid var(--q-separator); border-radius: 8px; background: var(--q-background-2, transparent); padding: 10px; }
+.lares-tts-settings button:disabled { opacity: .45; cursor: default; }
+.lares-tts-settings button:focus-visible, .lares-tts-settings select:focus-visible { outline: 2px solid var(--q-blue-default, #3978f6); outline-offset: 2px; }
+.lares-tts-settings button { font: inherit; color: inherit; border: 1px solid var(--q-separator); border-radius: 8px; background: transparent; padding: 8px 14px; }
+.lares-tts-settings p { margin: 0; font-size: 13px; color: var(--q-ink-3); }
+.lares-tts-settings [role="alert"] { color: var(--q-orange-default); }
+.lares-tts-settings label.lares-tts-settings__speak { flex-direction: row; align-items: center; }
+.lares-tts-settings__preview { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+</style>