@olares/lares-mobile 0.15.13 → 0.15.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.13",
+  "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.13",
+    "@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"
@@ -102,12 +101,13 @@
       @toggle-speak="toggleSpeak"
     />
     <LaresVoicePanel v-if="voicePanelState" :view="voicePanelState" :t="t"
-      @close="runVoicePanel('close')" @mode="openVoiceMode" @start="runVoicePanel('start')" @pause="runVoicePanel('pause')"
-      @complete="runVoicePanel('complete')" @discard="runVoicePanel('discard')" @end="runVoicePanel('end')" @action="voiceAction" />
+      @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";
@@ -116,7 +116,6 @@ 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";
@@ -343,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,
@@ -541,6 +541,8 @@ export default {
     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(" ");
@@ -552,6 +554,7 @@ export default {
         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;
@@ -614,6 +617,7 @@ export default {
     this.imageUploadControllers?.clear?.();
     void this.voicePanel?.dispose().catch(() => {});
     this.voicePanelUnsub?.();
+    this.voiceSettingsUnsub?.();
     this.voiceHistoryUnsub?.();
     this.conversationUnsub?.();
     this.intakeUnsub?.();
@@ -1218,45 +1222,46 @@ export default {
       this.draftImages = [];
       this.imagesBySession = {};
     },
-    async onHoldStart({ mode } = {}) {
-      await this.voicePanel.open({ mode: mode || this.voiceDefaultMode || "continuous", sessionId: this.sessionId || null });
+    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(() => {});
     },
-    openVoiceMode(mode) { void this.voicePanel.open({ mode }).catch(() => {}); },
     runVoicePanel(action) { void this.voicePanel[action]().catch(() => {}); },
-    async createMobileVoiceConversation({ mode, onTranscript, onDevice }) {
-      const settings = await this.runtime.settings.voice(true);
+    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) return createRealtimeConversation({ presentationSession: true,
-        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,
+      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"); },
+      });
+      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); },
       });
-        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: 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;
     },
-    onHoldEnd() { this.voicePanel.conversation?.controller.stopRecording(); },
-    async voiceAction(action) { await this.voicePanel.action(action).catch(() => {}); },
     bindVoiceHistory(sessionId) {
       this.voiceHistoryUnsub?.(); this.voiceRecords = [];
       if (!sessionId) return;

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>
@@ -95,7 +96,8 @@
             <path d="M12 5v14M5 12h14" />
           </svg>
         </button>
-        <textarea
+        <LaresVoiceInput v-if="voiceView?.inputActive" :view="voiceView" :t="t" @action="$emit('voice-action', $event)" />
+        <textarea v-show="!voiceView?.inputActive"
 
           ref="input"
           :value="draft"
@@ -123,18 +125,19 @@
             class="lares-composer__icon"
             data-kind="voice"
             :disabled="sending"
-            :aria-label="t('call.start')"
-            aria-haspopup="dialog"
+            :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"
@@ -145,11 +148,10 @@
               <path d="M12 19V5M5 12.5 12 5l7 7.5" />
             </svg>
           </button>
-          <button type="button" class="lares-composer__voice-entry" aria-haspopup="dialog" @click="$emit('hold-start', { mode: 'single' })">{{ t('settings.mode.single') }}</button>
         </div>
       </div>
     </div>
-    <p v-if="voiceCall?.connection === 'paused'" class="lares-composer__hint" role="status">{{ t('panel.paused') }}</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>
@@ -157,6 +159,7 @@
 </template>
 
 <script>
+import LaresVoiceInput from "./VoiceInput.vue";
 import {
   REFERENCE_DEBOUNCE_MS,
   activeReference,
@@ -169,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 },
@@ -197,7 +202,6 @@ export default {
   ],
   data() {
     return {
-      holding: false,
       commandsOpen: false,
       commandTyped: false,
       commandIndex: 0,
@@ -216,7 +220,7 @@ export default {
       return this.t("chat.placeholder");
     },
     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);
@@ -241,7 +245,6 @@ export default {
     this.autosize();
   },
   beforeUnmount() {
-    this.clearHold();
     window.clearTimeout(this.referenceTimer);
     window.removeEventListener("pointerdown", this.onTokenPointer, true);
   },
@@ -379,13 +382,11 @@ export default {
       }
     },
     onVoiceClick() {
-      this.$emit("hold-start", { mode: "continuous" });
-    },
-    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();
     },
@@ -410,8 +411,6 @@ export default {
 </script>
 
 <style scoped>
-.lares-composer__voice-entry { border: 0; border-radius: 12px; padding: 6px 8px; background: var(--q-background-3); color: var(--q-ink-2); font: inherit; font-size: 12px; min-height: 36px; cursor: pointer; }
-.lares-composer__voice-entry:focus-visible { outline: 2px solid var(--q-blue-default); }
 
 .lares-composer {
   display: flex;
@@ -553,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;
@@ -810,8 +811,6 @@ export default {
 </style>
 
 <style scoped>
-.lares-composer__voice-entry { border: 0; border-radius: 12px; padding: 6px 8px; background: var(--q-background-3); color: var(--q-ink-2); font: inherit; font-size: 12px; min-height: 36px; cursor: pointer; }
-.lares-composer__voice-entry:focus-visible { outline: 2px solid var(--q-blue-default); }
 
 .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; }

package/src/chat/Transcript.vue

@@ -79,6 +79,7 @@
       <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)] || ''"
@@ -125,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 },
@@ -137,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,
@@ -181,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;
@@ -559,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

@@ -1,65 +1,92 @@
 <template>
-  <dialog ref="dialog" class="lares-voice-sheet" aria-labelledby="lares-mobile-voice-title" @cancel.prevent="$emit('close')" @click="onBackdrop">
-    <div class="lares-voice-sheet__body">
-      <header><h2 id="lares-mobile-voice-title">{{ t('panel.title') }}</h2><button type="button" @click="$emit('close')">{{ t('panel.close') }}</button></header>
-      <div role="tablist" :aria-label="t('settings.mode')" @keydown="onTabKey">
-        <button v-for="mode in ['single', 'continuous']" :id="`mobile-voice-${mode}`" :key="mode" type="button" role="tab" :aria-selected="view.mode === mode" :tabindex="view.mode === mode ? 0 : -1" aria-controls="lares-mobile-voice-content" :disabled="view.busy" @click="$emit('mode', mode)">{{ t(`settings.mode.${mode}`) }}</button>
-      </div>
-      <section id="lares-mobile-voice-content" role="tabpanel" :aria-labelledby="`mobile-voice-${view.mode}`">
-        <p class="lares-voice-sheet__device">{{ t(!view.device ? 'settings.device.auto' : view.device === 'headset' ? 'settings.device.headset' : 'settings.device.device') }}</p>
-        <svg class="lares-voice-sheet__wave" viewBox="0 0 120 48" aria-hidden="true"><line v-for="(level, index) in levels" :key="index" :x1="index * 6 + 3" :x2="index * 6 + 3" :y1="24 - Math.max(2, Math.min(22, level * 800))" :y2="24 + Math.max(2, Math.min(22, level * 800))" /></svg>
-        <p role="timer" :aria-label="t('panel.elapsed')">{{ elapsed }}s</p>
-        <p role="status" aria-live="polite">{{ status }}</p>
-        <div v-if="view.mode === 'single'" class="lares-voice-sheet__draft" :aria-label="t('panel.draft')" aria-live="polite">{{ view.draft || t('panel.draftHint') }}</div>
-        <p v-else>{{ t('panel.messages') }}</p>
-        <div class="lares-voice-sheet__actions">
-          <button v-if="!active" type="button" :disabled="view.busy" @click="$emit('start')">{{ t(view.snapshot?.connection === 'paused' ? 'panel.continue' : 'panel.start') }}</button>
-          <button v-else type="button" :disabled="view.busy" @click="$emit('pause')">{{ t('panel.pause') }}</button>
-          <template v-if="view.mode === 'single'">
-            <button type="button" :disabled="view.busy || (!view.draft && view.snapshot?.capture !== 'recording')" @click="$emit('complete')">{{ t('panel.complete') }}</button>
-            <button type="button" :disabled="view.busy" @click="$emit('discard')">{{ t('panel.discard') }}</button>
-          </template>
-          <template v-if="active && view.mode === 'continuous'">
-            <button type="button" :disabled="view.busy" @click="$emit('action', 'mute')">{{ t(view.snapshot.outputMuted ? 'call.unmute' : 'call.mute') }}</button>
-            <button type="button" :disabled="view.busy" @click="$emit('action', 'input')">{{ t(view.snapshot.inputPaused ? 'call.resumeInput' : 'call.pauseInput') }}</button>
-          </template>
-          <button v-if="view.snapshot && view.snapshot.playback !== 'idle'" type="button" :disabled="view.busy" @click="$emit('action', 'playback')">{{ t('call.stopPlayback') }}</button>
-          <button v-if="view.snapshot" type="button" :disabled="view.busy" @click="$emit('end')">{{ t('call.end') }}</button>
-        </div>
+  <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', 'mode', 'start', 'pause', 'complete', 'discard', 'end', 'action'],
-  data: () => ({ now: Date.now(), clock: null, previousFocus: null }),
+  emits: ['close', 'complete', 'discard', 'edit', 'preset'],
+  data: () => ({ previousFocus: null, presets: DICTATION_PRESETS, showOriginal: false }),
   computed: {
-    active() { return this.view.snapshot?.connection === 'open'; },
-    levels() { return this.view.levels?.length ? this.view.levels : Array(20).fill(.003); },
-    elapsed() { return Math.max(0, Math.floor(((this.view.elapsedMs || 0) + (this.view.startedAt ? this.now - this.view.startedAt : 0)) / 1000)); },
-    status() { const state = this.view.snapshot; return this.view.error || state?.error ? this.t(`error.${this.view.error || state.error}`) : this.t(this.view.busy ? 'mic.preparing' : !this.active ? 'panel.paused' : state.capture === 'transcribing' ? 'mic.transcribing' : state.capture === 'recording' ? 'call.listening' : state.playback !== 'idle' ? 'call.halfDuplex' : 'call.waiting'); },
+    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);
   },
-  watch: { 'view.visible': { immediate: true, handler() { this.$nextTick(this.sync); } } },
-  beforeUnmount() { clearInterval(this.clock); this.$refs.dialog?.close(); this.previousFocus?.focus?.(); },
   methods: {
-    sync() { const dialog = this.$refs.dialog; if (!dialog) return; clearInterval(this.clock); if (this.view.visible) { if (!dialog.open) { this.previousFocus = document.activeElement; dialog.showModal(); } this.clock = setInterval(() => { this.now = Date.now(); }, 250); } else if (dialog.open) { dialog.close(); this.previousFocus?.focus?.(); } },
+    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'); },
-    onTabKey(event) { if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return; event.preventDefault(); const mode = event.key === 'Home' ? 'single' : event.key === 'End' ? 'continuous' : this.view.mode === 'single' ? 'continuous' : 'single'; this.$emit('mode', mode); this.$refs.dialog.querySelector(`#mobile-voice-${mode}`)?.focus(); },
+    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-sheet { color: var(--q-ink-1, #202124); background: var(--q-background-1, white); width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; padding: 0; }
-.lares-voice-sheet::backdrop { background: #10182866; }
-.lares-voice-sheet__body { padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); max-width: 560px; margin: auto; }
-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; } h2 { font-size: 22px; }
-button { color: inherit; background: transparent; border: 1px solid var(--q-separator, #ddd); border-radius: 14px; padding: 12px 16px; font: inherit; min-height: 44px; cursor: pointer; }
-button:focus-visible { outline: 2px solid #3478f6; outline-offset: 2px; } button:disabled { opacity: .45; }
-[role=tablist] { display: flex; gap: 8px; margin: 24px 0; } [role=tab] { flex: 1; } [aria-selected=true] { border-color: #3478f6; background: #3478f61a; }
-section { text-align: center; } .lares-voice-sheet__device { font-size: 14px; opacity: .65; }
-.lares-voice-sheet__wave { width: 160px; height: 64px; margin: 24px auto 0; stroke: #3478f6; stroke-width: 3; stroke-linecap: round; }
-.lares-voice-sheet__draft { text-align: start; white-space: pre-wrap; min-height: 100px; max-height: 30dvh; overflow: auto; background: #8881; padding: 16px; border-radius: 12px; }
-.lares-voice-sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }
+.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;