@olares/lares-mobile 0.15.12 → 0.15.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.12",
+  "version": "0.15.14",
   "description": "Lares chat component for LarePass",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@olares/lares-core": "0.15.12",
+    "@olares/lares-core": "0.15.14",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -88,8 +88,7 @@
       @open-effort="openEffortSheet"
       @files="attachFiles"
       @hold-start="onHoldStart"
-      @hold-end="onHoldEnd"
-      @voice-action="voiceAction"
+      @voice-action="onVoiceAction"
       @close-model="modelSheet = false"
       @choose-model="chooseModel"
       @close-effort="effortSheet = false"
@@ -101,16 +100,22 @@
       @pick-command="pickCommand"
       @toggle-speak="toggleSpeak"
     />
+    <LaresVoicePanel v-if="voicePanelState" :view="voicePanelState" :t="t"
+      @close="runVoicePanel('close')" @edit="voicePanel.edit($event)" @preset="voicePanel.selectPreset($event, true).catch(() => {})"
+      @complete="runVoicePanel('complete')" @discard="runVoicePanel('discard')" />
   </div>
 </template>
 
 <script>
+import { subscribeVoiceSettings } from "@olares/lares-core/larepass/settings";
+import { createVoicePanel } from "@olares/lares-core/voice/panel";
+import { mergeVoiceTranscript, subscribeVoiceHistory } from "@olares/lares-core/voice/projection";
+import LaresVoicePanel from "./chat/VoicePanel.vue";
 import { pickHostPorts } from "@olares/lares-core/larepass/host";
 import { connectChat } from "./runtime.js";
 import { createT } from "./i18n.js";
 import { failText, withPendingUser } from "./chat/format.js";
 import { captureSource } from "@olares/lares-core/voice/input";
-import { createRealtimeConversation } from "@olares/lares-core/voice/realtime-conversation";
 import { createVoiceConversation } from "@olares/lares-core/voice/conversation";
 import { createAnswerPlayer } from "./chat/playback.js";
 import { createReplySpeaker, createSentencePlayer, speakable } from "@olares/lares-core/voice/speech";
@@ -171,7 +176,7 @@ function imageData(file) {
 
 export default {
   name: "LaresApp",
-  components: { LaresMobileShell, LaresDesktopShell },
+  components: { LaresMobileShell, LaresDesktopShell, LaresVoicePanel },
   props: {
     locale: { type: String, default: "en" },
     device: { type: String, default: "mobile" },
@@ -221,8 +226,8 @@ export default {
       upload: { pending: 0, failures: [] },
       draftImages: [],
       voiceCall: null,
-      voiceHistory: null,
-      voiceCaption: "",
+      voicePanelState: null,
+      voiceRecords: [],
       voicePhase: "idle",
       voiceElapsed: 0,
       voiceError: "",
@@ -337,6 +342,7 @@ export default {
         draftImages: this.draftImages,
         voiceDefaultMode: this.voiceDefaultMode,
         voiceCall: this.voiceCall,
+        voicePanelState: this.voicePanelState,
         voicePhase: this.voicePhase,
         voiceElapsed: this.voiceElapsed,
         voiceErrorText: this.voiceErrorText,
@@ -450,7 +456,7 @@ export default {
       return effortMenuRows(this.reasoning, this.t("reasoning.default"));
     },
     viewItems() {
-      return withPendingUser(this.items, this.pendingUser);
+      return mergeVoiceTranscript(withPendingUser(this.items, this.pendingUser), this.voiceRecords);
     },
     failText() {
       return failText(this.t, this.failed, this.error);
@@ -518,6 +524,8 @@ export default {
       },
     },
     sessionId(id) {
+      this.bindVoiceHistory(id);
+      void this.voicePanel?.bind(id || null).catch(() => {});
       this.bindIntake(id);
     },
     hostKey() {
@@ -531,6 +539,28 @@ export default {
     this.intake = new FileIntake((file, sessionId, options) => this.runtime.upload(file, options, sessionId));
     this.imageUploadControllers = new Map();
     this.player = createAnswerPlayer();
+    this.voicePanel = createVoicePanel({
+      create: (options) => this.createMobileVoiceConversation(options),
+      loadConfig: async () => (await this.runtime.settings.voice(true)).config,
+      process: async ({ text, preset, config, signal }) => { const response = await this.runtime.voiceRequest("/api/lares/voice/dictation/clean", { method: "POST", body: { text, preset, config: { dictationProfiles: config.dictationProfiles } }, signal }); if (!response.ok) throw new Error(response.body?.error?.code || "voice_cleanup_failed"); return response.body.text; },
+      complete: async ({ sessionId, text }) => {
+        const previous = sessionId === (this.sessionId || null) ? this.draft : this.draftBySession[sessionId || "@pending"] || "";
+        const value = [previous, text].filter(Boolean).join(" ");
+        this.draftBySession = { ...this.draftBySession, [sessionId || "@pending"]: value };
+        if (sessionId === (this.sessionId || null)) this.draft = value;
+      },
+      onSession: (sessionId) => {
+        this.voiceAdoptingSession = sessionId;
+        void Promise.resolve(this.runtime.openSession(sessionId)).catch((error) => { this.voiceError = error.message; this.voiceAdoptingSession = null; });
+      },
+    });
+    this.voiceSettingsUnsub = subscribeVoiceSettings((value) => { this.voiceDefaultMode = value.config.mobileMode; });
+    this.voicePanelState = this.voicePanel.getSnapshot();
+    this.voicePanelUnsub = this.voicePanel.subscribe(() => {
+      const view = this.voicePanel.getSnapshot(); this.voicePanelState = view;
+      this.voiceCall = view.snapshot?.connection === "closed" ? null : view.snapshot;
+      this.voicePhase = view.snapshot?.capture || "idle"; this.voiceError = view.error || view.snapshot?.error || "";
+    });
     this.replySpeaker = createReplySpeaker();
     this.reader = createSentencePlayer({
       send: async (request) => {
@@ -563,7 +593,7 @@ export default {
       this.busyEnter = section.busyEnter;
     });
     this.voiceVisibilityHandler = () => {
-      if (document.hidden) void this.voiceConversation?.controller.disconnect("voice_background");
+      if (document.hidden) void this.voicePanel.pause().catch(() => {});
     };
     document.addEventListener("visibilitychange", this.voiceVisibilityHandler);
     this.voiceClock = setInterval(() => {
@@ -575,6 +605,7 @@ export default {
     this.restoreLog();
   },
   deactivated() {
+    void this.voicePanel?.pause().catch(() => {});
     this.captureLog();
   },
   beforeUnmount() {
@@ -584,8 +615,10 @@ export default {
     this.noteSeen(this.sessionId);
     for (const controller of this.imageUploadControllers?.values?.() ?? []) controller.abort();
     this.imageUploadControllers?.clear?.();
-    void this.voiceConversation?.stop().catch(() => {});
-    this.voiceUnsub?.();
+    void this.voicePanel?.dispose().catch(() => {});
+    this.voicePanelUnsub?.();
+    this.voiceSettingsUnsub?.();
+    this.voiceHistoryUnsub?.();
     this.conversationUnsub?.();
     this.intakeUnsub?.();
     if (this.sessionId) this.intake?.cancelSession(this.sessionId);
@@ -643,7 +676,7 @@ export default {
         this.commandsError = "";
       }
       if (sessionChanged && snap.sessionId !== this.voiceAdoptingSession) {
-        void this.voiceConversation?.stop().catch(() => {});
+        void this.voicePanel?.pause().catch(() => {});
         this.reader.stop();
         this.player?.stop();
       }
@@ -953,7 +986,7 @@ export default {
       this.unsub = this.runtime.subscribe((snap) => this.applySnap(snap));
     },
     switchHost() {
-      void this.voiceConversation?.stop().catch(() => {});
+      void this.voicePanel?.end().catch(() => {});
       for (const controller of this.imageUploadControllers.values()) controller.abort();
       this.imageUploadControllers.clear();
       this.releaseDraftImages();
@@ -1189,90 +1222,53 @@ export default {
       this.draftImages = [];
       this.imagesBySession = {};
     },
-    async onHoldStart({ mode: selectedMode } = {}) {
-      this.voiceReleased = false;
-      if (this.voiceCall?.connection === "open") {
-        await this.voiceConversation.stop(); return;
-      }
-      const target = this.sessionId;
-      this.voicePhase = "preparing"; this.voiceElapsed = 0;
-      try {
-        const settings = await this.runtime.settings.voice(true);
-        if (this.sessionId !== target) return;
-        const continuous = (selectedMode || settings.config.mobileMode || "continuous") === "continuous";
-        if (settings.config.backend === "realtime" && continuous) {
-          const conversation = createRealtimeConversation({ readAloud: settings.config.speak, idleTimeoutMs: settings.config.idleTimeoutMs, recoveryTimeoutMs: settings.config.recoveryTimeoutMs,
-            request: (path, options) => this.runtime.voiceRequest(path, options), socket: (ticket) => this.runtime.voiceSocket(ticket),
-            device: captureSource("mobile", settings.config.device), playback: this.player,
-            onCaption: (text) => { this.voiceCaption = `${this.voiceCaption}${text}`.slice(-300); },
-          });
-          await this.attachVoiceConversation(conversation, target, true);
-          return;
-        }
-        this.reader.stop(); this.player?.stop(); this.player?.unlock();
-        let conversation;
-        const reader = createSentencePlayer({
-          send: (value) => conversation.speak(value),
-          play: (sentence) => sentence.bluetooth === "played" ? Promise.resolve() : this.player.play(wavBlob(sentence.audio)),
-          halt: () => this.player.stop(), silence: () => {},
-          onState: (playing) => conversation?.playbackState(playing),
-          fail: (error) => { this.showSpeakProblem(error); void conversation.controller.disconnect("voice_playback_failed"); },
-        });
-        conversation = createVoiceConversation({
-          request: (path, options) => this.runtime.voiceRequest(path, options),
-          transcribe: (blob, signal) => this.runtime.transcribe(blob, this.voiceLanguage, signal),
-          device: captureSource("mobile", settings.config.device),
-          readAloud: continuous && settings.config.speak,
-          preset: settings.config.preset, endpointSilenceMs: settings.config.endpointSilenceMs, idleTimeoutMs: settings.config.idleTimeoutMs, recoveryTimeoutMs: settings.config.recoveryTimeoutMs,
-          onText: (text) => { this.voiceCaption = text; if (this.voiceCall) this.voiceCall = { ...this.voiceCall, caption: text }; },
-          onTranscript: continuous && settings.config.preset !== "dictation" ? null : ({ text }) => {
-            if (this.sessionId !== target) return;
-            this.draft = [this.draft, text].filter(Boolean).join(" ");
-            this.draftBySession = { ...this.draftBySession, [target || "@pending"]: this.draft };
-          },
-          mode: () => resolveSubmitMode(this.running, false, true, this.busyEnter),
-          playback: { stop: () => { reader.stop(); this.player.stop(); } },
-          onReply: (reply) => { const value = speakable(reply, settings.config.streaming); if (value) reader.follow(value); },
-        });
-        await this.attachVoiceConversation(conversation, target, continuous);
-      } catch (error) { this.voicePhase = "error"; this.voiceError = error.message; }
-    },
-    async attachVoiceConversation(conversation, target, continuous) {
-      this.voiceCaption = ""; this.voiceHistory = null;
-      this.voiceConversation = conversation;
-      this.voiceUnsub?.();
-      this.voiceUnsub = conversation.controller.subscribe(() => {
-        const state = conversation.controller.getSnapshot();
-        if (state.connection === "open" && !target && !this.sessionId && !this.voiceAdoptingSession && state.sessionId) {
-          this.voiceAdoptingSession = state.sessionId;
-          void Promise.resolve(this.runtime.openSession(state.sessionId)).catch((error) => { this.voiceError = error.message; this.voiceAdoptingSession = null; });
-        }
-        this.voiceCall = state.connection === "closed" ? null : { ...state, caption: this.voiceCaption, history: this.voiceHistory };
-        this.voicePhase = state.error ? "error" : state.capture;
-        this.voiceError = state.error || "";
+    async onHoldStart() {
+      const settings = await this.runtime.settings.voice(true);
+      this.voiceDefaultMode = settings.config.mobileMode;
+      await this.voicePanel.open({ mode: this.voicePanelState?.mode === "single" && this.voicePanelState.raw ? "single" : this.voiceDefaultMode, sessionId: this.sessionId || null });
+    },
+    onVoiceAction({ action, value }) {
+      if (action === "stopPlayback") { void this.voicePanel.conversation?.controller.stopPlayback().catch(() => {}); return; }
+      if (action === "setCancelArmed") { this.voicePanel.setCancelArmed(value); return; }
+      if (["holdStart", "holdEnd", "finish", "start", "close"].includes(action)) void Promise.resolve(this.voicePanel[action](value)).catch(() => {});
+    },
+    runVoicePanel(action) { void this.voicePanel[action]().catch(() => {}); },
+    async createMobileVoiceConversation({ mode, onTranscript, onDevice, config }) {
+      const settings = { config };
+      const continuous = mode === "continuous";
+      onDevice(captureSource("mobile", settings.config.device));
+      if (settings.config.backend === "realtime" && continuous) throw new Error("voice_manual_realtime_unavailable");
+      this.reader.stop(); this.player?.stop(); this.player?.unlock();
+      let conversation;
+      const reader = createSentencePlayer({
+        send: (value) => conversation.speak(value),
+        play: (sentence) => sentence.bluetooth === "played" ? Promise.resolve() : this.player.play(wavBlob(sentence.audio)),
+        halt: () => this.player.stop(), silence: () => {},
+        onState: (playing) => conversation?.playbackState(playing),
+        fail: (error) => { this.showSpeakProblem(error); void conversation.controller.disconnect("voice_playback_failed"); },
       });
-      await conversation.start({ sessionId: target || null, continuous });
-      if (this.voiceReleased && !continuous) conversation.controller.stopRecording();
-    },
-    onHoldEnd() {
-      this.voiceReleased = true;
-      if (!this.voiceConversation?.controller.getSnapshot().continuous) this.voiceConversation?.controller.stopRecording();
+      conversation = createVoiceConversation({
+        captureConfig: { model: config.model, language: config.language },
+        request: (path, options) => this.runtime.voiceRequest(path, options),
+        transcribe: (blob, signal) => this.runtime.transcribe(blob, config.language, signal, config.model),
+        device: captureSource("mobile", settings.config.device),
+        readAloud: continuous && settings.config.speak,
+        preset: continuous && settings.config.preset === "dictation" ? "assistant" : settings.config.preset, endpointSilenceMs: settings.config.endpointSilenceMs, idleTimeoutMs: settings.config.idleTimeoutMs, recoveryTimeoutMs: settings.config.recoveryTimeoutMs,
+        presentationSession: true,
+        onTranscript: continuous ? null : onTranscript,
+        mode: () => resolveSubmitMode(this.running, false, true, this.busyEnter),
+        playback: { stop: () => { reader.stop(); this.player.stop(); } },
+        onReply: (reply) => { const value = speakable(reply, settings.config.streaming); if (value) reader.follow(value); },
+      });
+      return conversation;
     },
-    async voiceAction(action) {
-      try {
-        if (action === "mute") await this.voiceConversation?.setReadAloud(this.voiceCall.outputMuted);
-        if (action === "history") {
-          this.voiceHistory = (await this.voiceConversation?.records()).records;
-          if (this.voiceCall) this.voiceCall = { ...this.voiceCall, history: this.voiceHistory };
-        }
-        if (action === "clear-history") { await this.voiceConversation?.clearRecords(); this.voiceHistory = null; }
-        if (action === "input-pause") await this.voiceConversation?.controller.pauseInput();
-        if (action === "input-resume") this.voiceConversation?.controller.resumeInput();
-        if (action === "stop") await this.voiceConversation?.stop();
-        if (action === "playback") await this.voiceConversation?.controller.stopPlayback();
-        if (action === "cancel") await this.voiceConversation?.controller.cancelTask();
-        if (action === "resume") await this.voiceConversation?.resume();
-      } catch (error) { this.voiceError = error.message; }
+    bindVoiceHistory(sessionId) {
+      this.voiceHistoryUnsub?.(); this.voiceRecords = [];
+      if (!sessionId) return;
+      this.voiceHistoryUnsub = subscribeVoiceHistory({ sessionId, request: (path, options) => this.runtime.voiceRequest(path, options),
+        onRecords: (rows) => { if (this.sessionId === sessionId) this.voiceRecords = rows; },
+        onError: (error) => { this.voiceError = error.message; },
+      });
     },
     showSpeakProblem(err) {
       this.speakNotice = speakProblemText(this.t, err);

package/src/chat/Composer.vue

@@ -4,9 +4,10 @@
       class="lares-composer__card"
       data-composer-card
       :data-hero="hero ? 'true' : 'false'"
-      :data-mode="inputMode"
+      :data-mode="voiceView?.inputActive ? 'voice' : 'text'"
       :data-expanded="expanded ? 'true' : 'false'"
-      :data-holding="holding ? 'true' : 'false'"
+      :data-holding="voiceView?.holding ? 'true' : 'false'"
+      :data-cancel-armed="Boolean(voiceView?.cancelArmed)"
     >
       <div v-if="referenceOpen" ref="referenceMenu" class="lares-composer__menu" role="listbox">
         <p v-if="referencesError" class="lares-composer__menu-status">{{ referencesError }}</p>
@@ -82,10 +83,6 @@
           </button>
         </figure>
       </div>
-      <select v-if="inputMode === 'voice' && !voiceCall" :value="voiceSelection || voiceDefaultMode" @change="voiceSelection = $event.target.value" class="lares-composer__voice-mode" :aria-label="t('settings.mode')">
-        <option value="single">{{ t('settings.mode.single') }}</option>
-        <option value="continuous">{{ t('settings.mode.continuous') }}</option>
-      </select>
       <div class="lares-composer__line" :data-expanded="expanded ? 'true' : 'false'">
         <button
           type="button"
@@ -99,8 +96,9 @@
             <path d="M12 5v14M5 12h14" />
           </svg>
         </button>
-        <textarea
-          v-show="inputMode === 'text'"
+        <LaresVoiceInput v-if="voiceView?.inputActive" :view="voiceView" :t="t" @action="$emit('voice-action', $event)" />
+        <textarea v-show="!voiceView?.inputActive"
+
           ref="input"
           :value="draft"
           class="lares-composer__input"
@@ -114,24 +112,6 @@
           @select="onCaretMove"
           @contextmenu="onContextMenu"
         />
-        <button
-          v-show="inputMode === 'voice'"
-          type="button"
-          class="lares-composer__talk"
-          :data-phase="voicePhase"
-          :disabled="voiceBlocked"
-          :aria-label="voiceLabel"
-          @click="onVoiceClick"
-          @contextmenu.prevent
-        >
-          <span v-if="voicePhase === 'preparing' || voicePhase === 'transcribing'" class="lares-composer__talk-status">
-            <svg class="lares-composer__spin" viewBox="0 0 16 16" aria-hidden="true">
-              <circle cx="8" cy="8" r="6" />
-            </svg>
-            <span>{{ talkLabel }}</span>
-          </span>
-          <span v-else>{{ talkLabel }}</span>
-        </button>
         <div class="lares-composer__tools">
           <input
             ref="picker"
@@ -141,22 +121,23 @@
             @change="onFiles"
           />
           <button
-            v-if="inputMode === 'text'"
             type="button"
             class="lares-composer__icon"
             data-kind="voice"
             :disabled="sending"
-            :aria-label="t('composer.voice')"
-            @click="setMode('voice')"
+            :aria-label="t(voiceView?.inputActive ? 'input.keyboard' : voiceDefaultMode === 'single' ? 'settings.mode.single' : 'call.start')"
+            :aria-expanded="Boolean(voiceView?.inputActive)"
+            @click="onVoiceClick"
           >
-            <svg class="lares-composer__wave" viewBox="0 0 24 24" aria-hidden="true">
+            <svg v-if="!voiceView?.inputActive" class="lares-composer__wave" viewBox="0 0 24 24" aria-hidden="true">
               <path d="M5 8v8" />
               <path d="M12 5v14" />
               <path d="M19 8v8" />
             </svg>
+            <svg v-else viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3" /><path d="M7 9h1m3 0h1m3 0h1M7 12h1m3 0h1m3 0h1M8 15h8" /></svg>
           </button>
           <button
-            v-if="expanded"
+            v-if="expanded && !voiceView?.inputActive"
             type="submit"
             class="lares-composer__icon"
             data-kind="send"
@@ -167,43 +148,10 @@
               <path d="M12 19V5M5 12.5 12 5l7 7.5" />
             </svg>
           </button>
-          <button
-            v-if="inputMode === 'voice'"
-            type="button"
-            class="lares-composer__icon"
-            data-kind="keyboard"
-            :disabled="voiceBusy"
-            :aria-label="t('composer.keyboard')"
-            @click="setMode('text')"
-          >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <rect x="3.5" y="6" width="17" height="12" rx="2" />
-              <path d="M7 10h2M11 10h2M15 10h2M8 14h8" />
-            </svg>
-          </button>
         </div>
       </div>
     </div>
-    <div v-if="voiceCall" class="lares-composer__hint" role="status" aria-live="polite">
-      <button v-if="voiceCall.continuous" type="button" @click="$emit('voice-action', 'mute')">{{ t(voiceCall.outputMuted ? 'call.unmute' : 'call.mute') }}</button>
-      <button v-if="voiceCall.continuous" type="button" @click="$emit('voice-action', 'history')">{{ t('call.history') }}</button>
-      <details v-if="voiceCall.history" open>
-        <summary>{{ t('call.history') }}</summary>
-        <p v-for="row in voiceCall.history" :key="row.id">{{ row.role }}: {{ row.text }}</p>
-        <button type="button" @click="$emit('voice-action', 'clear-history')">{{ t('call.clearHistory') }}</button>
-      </details>
-      <svg v-if="voiceCall.capture === 'recording' && voiceCall.inputLevel != null" width="80" height="24" aria-hidden="true">
-        <line v-for="(level, index) in levels" :key="index" :x1="index * 5" :x2="index * 5" :y1="12 - Math.min(11, level * 800)" :y2="12 + Math.min(11, level * 800)" stroke="currentColor" stroke-width="2" />
-      </svg>
-      <span v-if="voiceCall.caption">{{ voiceCall.caption }}</span>
-      <span>{{ voiceCall.capture === 'transcribing' ? t('mic.transcribing') : voiceCall.capture === 'recording' ? t('call.listening') : voiceCall.inputPaused ? t('call.inputPaused') : voiceCall.playback !== 'idle' ? t('call.halfDuplex') : t('call.waiting') }}</span>
-      <span v-if="voiceCall.playback !== 'idle'">{{ t('call.speaking') }}</span>
-      <button v-if="!voiceCall.continuous && voiceCall.capture === 'recording'" type="button" @click="$emit('hold-end')">{{ t('mic.finish') }}</button>
-      <button v-if="voiceCall.continuous && voiceCall.connection === 'open'" type="button" @click="$emit('voice-action', voiceCall.inputPaused ? 'input-resume' : 'input-pause')">{{ t(voiceCall.inputPaused ? 'call.resumeInput' : 'call.pauseInput') }}</button>
-      <button type="button" @click="$emit('voice-action', voiceCall.connection === 'paused' ? 'resume' : 'stop')">{{ t(voiceCall.connection === 'paused' ? 'call.resume' : voiceCall.continuous ? 'call.end' : 'mic.cancel') }}</button>
-      <button v-if="voiceCall.playback !== 'idle'" type="button" @click="$emit('voice-action', 'playback')">{{ t('call.stopPlayback') }}</button>
-    </div>
-    <p v-if="voiceError && voicePhase === 'error'" class="lares-composer__hint" data-status="error">{{ voiceError }}</p>
+
     <p v-for="item in failures" :key="item.id" class="lares-composer__hint" data-status="error">
       {{ t("upload.failed", { name: item.name, reason: t(`error.${item.code}`) }) }}
     </p>
@@ -211,7 +159,7 @@
 </template>
 
 <script>
-import { formatElapsed } from "@olares/lares-core/voice/recorder";
+import LaresVoiceInput from "./VoiceInput.vue";
 import {
   REFERENCE_DEBOUNCE_MS,
   activeReference,
@@ -224,12 +172,14 @@ import { draftImageStatus } from "@olares/lares-core/files/draft-images";
 
 export default {
   name: "LaresComposer",
+  components: { LaresVoiceInput },
   props: {
     draft: { type: String, default: "" },
     sending: { type: Boolean, default: false },
     canSend: { type: Boolean, default: false },
     attachPending: { type: Boolean, default: false },
     attachDisabled: { type: Boolean, default: false },
+    voiceView: { type: Object, default: null },
     voiceCall: { type: Object, default: null },
     voicePhase: { type: String, default: "idle" },
     voiceElapsed: { type: Number, default: 0 },
@@ -252,12 +202,9 @@ export default {
   ],
   data() {
     return {
-      holding: false,
       commandsOpen: false,
       commandTyped: false,
       commandIndex: 0,
-      levels: [],
-      voiceSelection: "",
       referenceOpen: false,
       referenceToken: null,
       referenceIndex: 0,
@@ -265,21 +212,6 @@ export default {
     };
   },
   computed: {
-    elapsed() {
-      return formatElapsed(this.voiceElapsed);
-    },
-    talkLabel() {
-      if (this.voicePhase === "preparing") return this.t("composer.opening");
-      if (this.voicePhase === "recording") return `${this.t("call.listening")} · ${this.elapsed}`;
-      if (this.voicePhase === "transcribing") return this.t("mic.transcribing");
-      if (this.holding) return this.t("composer.hold");
-      return this.t("call.start");
-    },
-    voiceBusy() {
-      return this.voicePhase === "preparing"
-        || this.voicePhase === "recording"
-        || this.voicePhase === "transcribing";
-    },
     attachLabel() {
       return this.attachPending ? this.t("button.uploading", { count: 1 }) : this.t("composer.attach");
     },
@@ -287,18 +219,8 @@ export default {
       if (this.hero) return this.t("chat.placeholderNewSession");
       return this.t("chat.placeholder");
     },
-    voiceLabel() {
-      if (this.voicePhase === "error" && this.voiceError) return this.voiceError;
-      if (this.voicePhase === "preparing") return this.t("composer.opening");
-      if (this.voicePhase === "recording") return this.t("call.listening");
-      if (this.voicePhase === "transcribing") return this.t("mic.transcribing");
-      return this.t("call.start");
-    },
-    voiceBlocked() {
-      return this.voicePhase === "transcribing" || this.sending;
-    },
     expanded() {
-      return this.inputMode === "text" && (this.draft.trim().length > 0 || this.draftImages.length > 0);
+      return !this.voiceView?.inputActive && (this.draft.trim().length > 0 || this.draftImages.length > 0);
     },
     referenceMenuRows() {
       return referenceRows(this.references, this.t);
@@ -311,10 +233,8 @@ export default {
     },
   },
   watch: {
-    "voiceCall.inputLevel"(level) { if (level != null) this.levels = [...this.levels.slice(-15), level]; },
     draft(value) {
       this.autosize();
-      if (value && this.inputMode === "voice" && !this.voiceBusy) this.setMode("text");
     },
     overlayPointerActive(active) {
       if (active) window.addEventListener("pointerdown", this.onTokenPointer, true);
@@ -325,7 +245,6 @@ export default {
     this.autosize();
   },
   beforeUnmount() {
-    this.clearHold();
     window.clearTimeout(this.referenceTimer);
     window.removeEventListener("pointerdown", this.onTokenPointer, true);
   },
@@ -410,18 +329,6 @@ export default {
     imageStatus(image) {
       return draftImageStatus(image);
     },
-    setMode(mode) {
-      if (mode === this.inputMode) return;
-      if (mode === "text" && this.voiceBusy) return;
-      if (mode === "voice") {
-        this.closeReferences();
-        this.commandsOpen = false;
-        this.commandTyped = false;
-        this.$refs.input?.blur();
-      }
-      this.$emit("update:inputMode", mode);
-      if (mode === "text") this.$nextTick(() => this.focus());
-    },
     onSend() {
       if (this.referenceOpen || this.commandsOpen) return;
       if (this.canSend) this.$emit("send");
@@ -475,14 +382,11 @@ export default {
       }
     },
     onVoiceClick() {
-      if (this.voiceBusy) return;
-      this.$emit("hold-start", { mode: this.voiceSelection || undefined });
-    },
-    clearHold() {
-      this.holding = false;
-      this.holdKind = "";
+      this.closeReferences(); this.commandsOpen = false; this.commandTyped = false;
+      this.$refs.input?.blur();
+      if (this.voiceView?.inputActive) { this.$emit("voice-action", { action: "close" }); this.$nextTick(() => this.$refs.input?.focus()); }
+      else this.$emit("hold-start", { mode: this.voiceDefaultMode });
     },
-    detachHold() {},
     pickFiles() {
       this.$refs.picker?.click();
     },
@@ -507,6 +411,7 @@ export default {
 </script>
 
 <style scoped>
+
 .lares-composer {
   display: flex;
   flex-direction: column;
@@ -647,6 +552,8 @@ export default {
   background: var(--q-blue-alpha);
 }
 
+.lares-composer__card[data-cancel-armed="true"] { border-color: var(--q-red-default); background: var(--q-background-1); }
+
 .lares-composer__attachments {
   display: flex;
   gap: 8px;
@@ -904,6 +811,7 @@ export default {
 </style>
 
 <style scoped>
+
 .lares-composer__voice-mode { margin: 8px 12px; border: 0; border-radius: 8px; padding: 6px; background: transparent; color: inherit; font: inherit; }
 .lares-composer__hint button { min-height: 44px; border: 0; border-radius: 12px; padding: 8px 12px; background: var(--lares-bg-secondary, #f0f0f0); color: inherit; font: inherit; }
 </style>

package/src/chat/Transcript.vue

@@ -29,7 +29,7 @@
     </li>
     <li
       v-for="{ row, index } in shown(block)"
-      :key="index"
+      :key="row.id || row.key || index"
       class="lares-log__item"
       :data-type="row.type"
       :data-pending="row.pending ? 'true' : 'false'"
@@ -78,6 +78,8 @@
       >{{ row.text }}</div>
       <template v-else-if="row.type === 'assistant'">
         <div class="lares-md" v-html="renderMarkdown(row.text)" />
+        <p v-if="row.voiceSummary" class="lares-voice-summary">{{ row.voiceSummary }}</p>
+        <button v-if="isSpeaking(row)" type="button" class="lares-message-stop" @click="$emit('stop-speaking')">{{ t('input.stopSpeaking') }}</button>
         <LaresMessageActions
           :text="row.text"
           :reaction="reactions[actionKey(index)] || ''"
@@ -124,6 +126,7 @@ export default {
     running: { type: Boolean, default: false },
     runningSince: { type: Number, default: 0 },
     loading: { type: Boolean, default: false },
+    voiceView: { type: Object, default: null },
     previews: { type: Object, default: () => ({}) },
     mediaUrl: { type: Function, required: true },
     scrollTop: { type: Function, required: true },
@@ -136,7 +139,7 @@ export default {
     questionTakeover: { type: Boolean, default: false },
     t: { type: Function, required: true },
   },
-  emits: ["open", "media", "answer"],
+  emits: ["open", "media", "answer", "stop-speaking"],
   data() {
     return {
       applyingScroll: false,
@@ -180,6 +183,12 @@ export default {
     clearInterval(this.clock);
   },
   methods: {
+    isSpeaking(row) {
+      const snapshot = this.voiceView?.snapshot;
+      if (snapshot?.playback !== "playing") return false;
+      const latest = this.items.findLast(item => item.type === "assistant" && (item.voiceId || item.voicePlayback?.voiceId) === snapshot.voiceId);
+      return latest && (row.id || row.key) === (latest.id || latest.key);
+    },
     syncClock() {
       clearInterval(this.clock);
       this.clock = 0;
@@ -483,6 +492,8 @@ export default {
   overflow-wrap: anywhere;
 }
 
+.lares-voice-summary { border-left: 2px solid var(--q-blue-default); padding-left: 12px; font-size: 14px; opacity: .8; }
+
 .lares-md[data-pending="true"] {
   white-space: pre-wrap;
   opacity: 0.92;
@@ -556,3 +567,7 @@ export default {
   color: var(--q-blue-default);
 }
 </style>
+
+<style scoped>
+.lares-message-stop { border: 0; background: transparent; color: var(--q-ink-2, #777); font: inherit; font-size: 12px; padding: 6px 0; cursor: pointer; }
+</style>

package/src/chat/VoiceInput.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="lares-inline-voice" :data-phase="ui.phase" @keydown="onKey" @pointerdown.capture="gesture.additionalPointer">
+    <span v-if="view.holding" class="lares-inline-cancel" :data-armed="view.cancelArmed" aria-hidden="true">{{ t(view.cancelArmed ? 'gesture.cancelRelease' : 'gesture.slideCancel') }}</span>
+    <button ref="main" type="button" class="lares-inline-main" :disabled="ui.disabled" :aria-pressed="view.mode === 'continuous' ? view.holding : undefined" :aria-label="t(ui.label)"
+      @pointerdown="down" @pointermove="gesture.pointerMove" @pointerup="gesture.pointerUp" @pointercancel="gesture.cancel" @lostpointercapture="gesture.cancel" @keydown="keyDown" @keyup="keyUp" @blur="gesture.cancel" @click="click">
+      <svg v-if="view.mode === 'single' && ui.recording && levels.length" class="lares-inline-level" viewBox="0 0 32 24" aria-hidden="true"><line v-for="(level, index) in levels" :key="index" :x1="index * 5 + 3" :x2="index * 5 + 3" :y1="12 - Math.max(2, Math.min(10, level * 500))" :y2="12 + Math.max(2, Math.min(10, level * 500))" /></svg>
+      <span>{{ t(ui.label) }}</span><span v-if="ui.timed" class="lares-inline-time" aria-hidden="true"> · {{ ui.elapsed }}</span>
+    </button>
+    <span class="lares-inline-status" :data-error="Boolean(ui.error)" :data-visible="['speaking', 'working'].includes(ui.phase)" role="status" aria-live="polite" aria-atomic="true">{{ status }}</span>
+  </div>
+</template>
+<script>
+import { createHoldGesture } from '@olares/lares-core/voice/hold';
+import { voiceInputPresentation } from '@olares/lares-core/voice/presentation';
+import { messageFromCode } from '@olares/lares-core/i18n/t';
+export default {
+  name: 'LaresVoiceInput', props: { view: { type: Object, required: true }, t: { type: Function, required: true } }, emits: ['action'],
+  data: () => ({ now: Date.now(), clock: null, gesture: null }),
+  computed: {
+    ui() { return voiceInputPresentation(this.view, this.now); },
+    levels() { return (this.view.levels || []).slice(-6); },
+    status() { return this.ui.error ? messageFromCode(this.t, this.ui.error, 'error.voice_failed') : this.t(this.ui.status); },
+  },
+  created() { this.gesture = createHoldGesture({ start: () => this.action('holdStart'), end: value => this.action('holdEnd', value), onCancelChange: value => this.action('setCancelArmed', value), isActive: () => this.view.holding }); },
+  mounted() { this.$refs.main?.focus(); this.clock = setInterval(() => { this.now = Date.now(); }, 250); window.addEventListener('blur', this.cancel); window.addEventListener('pointerdown', this.additionalPointer, true); },
+  beforeUnmount() { this.gesture.cancel(); clearInterval(this.clock); window.removeEventListener('blur', this.cancel); window.removeEventListener('pointerdown', this.additionalPointer, true); },
+  methods: {
+    action(action, value) { this.$emit('action', { action, value }); },
+    down(event) { if (this.view.mode === 'continuous') this.gesture.pointerDown(event); },
+    keyDown(event) { if (this.view.mode === 'continuous') { this.gesture.keyDown(event); if (['Space', 'Enter'].includes(event.code)) event.stopPropagation(); } },
+    keyUp(event) { if (this.view.mode === 'continuous') this.gesture.keyUp(event); },
+    click(event) { if (this.view.mode === 'single') this.action(this.ui.error ? 'start' : 'finish'); else if (event.detail === 0) this.gesture.activate(); },
+    onKey(event) { if (event.key !== 'Escape') return; event.preventDefault(); event.stopPropagation(); if (!event.repeat && !this.gesture.escape()) this.action('close'); },
+    cancel() { this.gesture.cancel(); }, additionalPointer(event) { this.gesture.additionalPointer(event); },
+  },
+};
+</script>
+<style scoped>
+.lares-inline-voice { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; min-height: 40px; }
+.lares-inline-main { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 6px 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 600; touch-action: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
+.lares-inline-main:focus-visible { outline: 2px solid var(--q-blue-default, #3377ff); outline-offset: 2px; border-radius: 8px; }
+.lares-inline-time { font-variant-numeric: tabular-nums; white-space: pre; }
+.lares-inline-level { width: 28px; height: 24px; margin-right: 8px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+.lares-inline-cancel { position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; padding: 7px 12px; border-radius: 10px; background: var(--q-background-1, white); box-shadow: 0 2px 12px #0001; pointer-events: none; }
+[data-phase=recording] .lares-inline-main { color: var(--q-blue-default, #3377ff); }
+[data-phase=cancel] .lares-inline-main, .lares-inline-cancel[data-armed=true] { color: var(--q-red-default, #c23d32); }
+.lares-inline-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.lares-inline-status[data-visible=true], .lares-inline-status[data-error=true] { width: auto; height: auto; clip-path: none; bottom: calc(100% + 16px); background: var(--q-background-1, white); padding: 6px; font-size: 12px; color: var(--q-ink-2, #777); }
+.lares-inline-status[data-error=true] { color: var(--q-red-default, #c23d32); }
+</style>

package/src/chat/VoicePanel.vue

@@ -0,0 +1,92 @@
+<template>
+  <dialog ref="dialog" class="lares-voice-panel" :data-mode="view.mode" :data-phase="ui.phase" :data-preview="ui.preview" aria-labelledby="lares-mobile-voice-title" @cancel.prevent="$emit('close')" @click="onBackdrop">
+    <div class="lares-voice-panel-body">
+      <header><h2 id="lares-mobile-voice-title">{{ t(`settings.mode.${view.mode}`) }}</h2><button type="button" class="lares-voice-close" :aria-label="t('panel.close')" @click="$emit('close')">×</button></header>
+      <section class="lares-voice-content">
+        <p class="lares-voice-status" role="status" aria-live="polite" aria-atomic="true">{{ status }}</p>
+        <template v-if="ui.preview">
+          <details ref="menu" class="lares-voice-menu">
+            <summary :aria-label="t('dictation.preset')">{{ t(`dictation.${view.preset}`) }} ▾</summary>
+            <div class="lares-voice-menu-body">
+              <select :aria-label="t('dictation.preset')" :value="view.preset" :disabled="view.busy" @change="choose($event.target.value)"><option v-for="id in presets" :key="id" :value="id">{{ t(`dictation.${id}`) }}</option></select>
+              <button type="button" @click="showOriginal = !showOriginal; closeMenu()">{{ t('dictation.original') }}</button>
+              <template v-if="ui.error"><button type="button" :disabled="view.busy" @click="choose(view.preset)">{{ t('dictation.retry') }}</button><button type="button" :disabled="view.busy" @click="choose('raw')">{{ t('dictation.useOriginal') }}</button></template>
+            </div>
+          </details>
+          <textarea class="lares-voice-draft" :aria-label="t('panel.draft')" :value="view.draft" :disabled="ui.pending" @input="$emit('edit', $event.target.value)" />
+          <div v-if="showOriginal" class="lares-voice-original" :aria-label="t('dictation.original')">{{ view.raw }}</div>
+        </template>
+      </section>
+      <footer class="lares-voice-panel-actions">
+        <button type="button" class="lares-voice-primary" :disabled="view.busy || !view.draft.trim()" @click="$emit('complete')">{{ t('dictation.insert') }}</button>
+        <button type="button" :disabled="view.busy" @click="$emit('discard')">{{ t('dictation.discard') }}</button>
+      </footer>
+    </div>
+  </dialog>
+</template>
+<script>
+import { messageFromCode } from '@olares/lares-core/i18n/t';
+import { DICTATION_PRESETS } from '@olares/lares-core/voice/dictation';
+import { voicePanelPresentation } from '@olares/lares-core/voice/presentation';
+export default {
+  name: 'LaresVoicePanel', props: { view: { type: Object, required: true }, t: { type: Function, required: true } },
+  emits: ['close', 'complete', 'discard', 'edit', 'preset'],
+  data: () => ({ previousFocus: null, presets: DICTATION_PRESETS, showOriginal: false }),
+  computed: {
+    ui() { return voicePanelPresentation(this.view); },
+    status() { return this.ui.error ? messageFromCode(this.t, this.ui.error, "error.voice_failed") : this.t(this.ui.status); },
+  },
+  watch: { 'view.previewVisible': { immediate: true, handler() { this.$nextTick(this.sync); } } },
+  mounted() {
+    this.updateViewport(); window.addEventListener('resize', this.updateViewport);
+    window.visualViewport?.addEventListener('resize', this.updateViewport); window.visualViewport?.addEventListener('scroll', this.updateViewport);
+  },
+  beforeUnmount() {
+    this.$refs.dialog?.close(); this.restoreFocus();
+    window.removeEventListener('resize', this.updateViewport); window.visualViewport?.removeEventListener('resize', this.updateViewport); window.visualViewport?.removeEventListener('scroll', this.updateViewport);
+  },
+  methods: {
+    updateViewport() {
+      const dialog = this.$refs.dialog; if (!dialog) return;
+      const viewport = window.visualViewport; const height = viewport?.height || window.innerHeight;
+      dialog.style.setProperty('--voice-view-height', `${height}px`);
+      dialog.style.setProperty('--voice-bottom', `${Math.max(0, window.innerHeight - height - (viewport?.offsetTop || 0))}px`);
+    },
+    sync() {
+      const dialog = this.$refs.dialog; if (!dialog) return;
+      if (this.view.previewVisible) { if (!dialog.open) { this.previousFocus = document.querySelector('.lares-composer__icon[data-kind=voice]') || document.activeElement; dialog.showModal(); } this.updateViewport(); }
+      else if (dialog.open) { dialog.close(); this.$nextTick(this.restoreFocus); this.showOriginal = false; }
+    },
+    onBackdrop(event) { if (event.target === this.$refs.dialog) this.$emit('close'); },
+    closeMenu() { if (this.$refs.menu) this.$refs.menu.open = false; },
+    choose(preset) { if (this.view.edited && !confirm(this.t('dictation.replaceEdited'))) return; this.closeMenu(); this.$emit('preset', preset); },
+    restoreFocus() { const target = this.previousFocus?.isConnected ? this.previousFocus : document.querySelector('.lares-composer__icon[data-kind=voice]'); target?.focus?.(); },
+  },
+};
+</script>
+<style scoped>
+.lares-voice-panel { position: fixed; inset: auto; margin: 0; box-sizing: border-box; padding: 0; border: 1px solid #8883; border-radius: 20px; color: var(--color-text-primary, #202124); background: var(--color-background-primary, white); width: min(400px, calc(var(--voice-view-width, 100vw) - 24px)); max-width: none; max-height: calc(var(--voice-view-height, 100dvh) * .85); box-shadow: 0 12px 48px #0002; overflow: hidden; }
+.lares-voice-panel::backdrop { background: #10182826; }
+.lares-voice-panel-body { padding: 16px; display: flex; flex-direction: column; box-sizing: border-box; max-height: calc(var(--voice-view-height, 100dvh) * .85 - 2px); }
+.lares-voice-panel header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; }
+.lares-voice-panel h2 { font-size: 16px; line-height: 24px; margin: 0; font-weight: 600; }
+.lares-voice-panel button { font: inherit; color: inherit; cursor: pointer; border: 1px solid #8883; border-radius: 12px; padding: 10px 16px; min-height: 44px; box-sizing: border-box; background: transparent; }
+.lares-voice-panel button:focus-visible, .lares-voice-panel summary:focus-visible, .lares-voice-panel textarea:focus-visible, .lares-voice-panel select:focus-visible { outline: 2px solid #3478f6; outline-offset: 2px; }
+.lares-voice-panel button:disabled { opacity: .45; cursor: default; }
+.lares-voice-panel .lares-voice-close { border: 0; padding: 0; font-size: 24px; min-width: 44px; }
+.lares-voice-content { text-align: center; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
+.lares-voice-status { margin: 12px 0; min-height: 24px; line-height: 24px; font-size: 14px; }
+.lares-voice-panel-actions { display: flex; flex: none; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; }
+.lares-voice-panel textarea { display: block; flex: 1 1 180px; width: 100%; box-sizing: border-box; min-height: 80px; height: 180px; max-height: 32dvh; margin: 12px 0 0; padding: 12px; color: inherit; background: #88808; font: inherit; line-height: 1.6; border: 1px solid #8883; border-radius: 12px; resize: none; overflow: auto; }
+.lares-voice-panel select { font: inherit; padding: 8px 12px; border-radius: 10px; color: inherit; background: transparent; max-width: 100%; }
+.lares-voice-menu { flex: none; text-align: start; font-size: 13px; }
+.lares-voice-menu summary { display: inline-block; list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; background: #8881; }
+.lares-voice-menu summary::-webkit-details-marker { display: none; }
+.lares-voice-menu-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
+.lares-voice-menu-body button { font-size: 12px; }
+.lares-voice-original { text-align: start; white-space: pre-wrap; overflow: auto; max-height: 100px; padding: 12px; margin-top: 8px; background: #8881; border-radius: 8px; font-size: 13px; }
+
+.lares-voice-panel { color: var(--q-ink-1, #202124); background: var(--q-background-1, white); inset: auto 0 var(--voice-bottom, 0px); margin: 0 auto; width: min(100vw, 560px); border-radius: 24px 24px 0 0; border-bottom: 0; }
+.lares-voice-panel-body { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); }
+.lares-voice-panel .lares-voice-primary { background: var(--q-ink-1, var(--color-text-primary, #202124)); color: var(--q-background-1, var(--color-background-primary, white)); border-color: transparent; }
+</style>

package/src/host.js

@@ -275,8 +275,9 @@ export function createHostClient(ports = {}) {
       return new WebSocket(muxWsUrl(urlFor(`${VOICE_API}/realtime`), pageOrigin()), ["lares-voice", `lares-ticket.${ticket}`, ...(Array.isArray(auth) ? auth : auth ? [auth] : [])]);
     },
     voiceRequest(path, options) { return request(path, options); },
-    transcribe(blob, language, signal) {
+    transcribe(blob, language, signal, model) {
       return postTranscribe(blob, language, signal, {
+        model,
         baseUrl: urlFor(VOICE_API),
         request: direct,
       });

package/src/mobile/MobileShell.vue

@@ -72,6 +72,7 @@
             :can-send="state.canSend"
             :attach-pending="state.upload.pending > 0"
             :attach-disabled="!state.sessionId || state.historyLoading || state.starting"
+            :voice-view="state.voicePanelState"
             :voice-call="state.voiceCall"
             :voice-default-mode="state.voiceDefaultMode"
             :voice-phase="state.voicePhase"
@@ -104,6 +105,8 @@
         <div v-else key="chat" class="lares-shell__chat">
           <LaresTranscript
             ref="transcript"
+            :voice-view="state.voicePanelState"
+            @stop-speaking="$emit('voice-action', { action: 'stopPlayback' })"
             :items="state.viewItems"
             :running="state.running"
             :running-since="state.runningSince"
@@ -136,6 +139,7 @@
             :can-send="state.canSend"
             :attach-pending="state.upload.pending > 0"
             :attach-disabled="!state.sessionId || state.historyLoading || state.starting"
+            :voice-view="state.voicePanelState"
             :voice-call="state.voiceCall"
             :voice-default-mode="state.voiceDefaultMode"
             :voice-phase="state.voicePhase"

package/src/settings/AgentSettings.vue

@@ -61,6 +61,24 @@
           @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>
@@ -91,6 +109,7 @@
           <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>
@@ -140,6 +159,7 @@
 <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";
@@ -198,6 +218,8 @@ export default {
       search: remembered.search,
       conversation: remembered.conversation,
       modelError: "",
+      dictationEditor: "clean",
+      dictationPresets: DICTATION_PRESETS,
       voiceError: "",
       searchError: "",
       conversationError: "",
@@ -443,6 +465,8 @@ 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;