@olares/lares-mobile 0.15.17 → 0.15.19

package/package.json

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

package/src/App.vue

@@ -51,6 +51,8 @@
       @rename-session="renameSession"
       @fork-session="forkSession"
       @archive-session="archiveSession"
+      @dictate="startDictation"
+      @voice-action="onVoiceAction"
     />
     <LaresMobileShell
       v-else
@@ -100,6 +102,10 @@
       @pick-command="pickCommand"
       @toggle-speak="toggleSpeak"
     />
+    <div v-if="voicePanelState?.readAloudError" class="lares-speak-notice" role="alert">
+      {{ voiceReadAloudError }}
+      <button type="button" @click="voicePanel.retryReadAloud()">{{ t('dictation.retry') }}</button>
+    </div>
     <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')" />
@@ -107,6 +113,9 @@
 </template>
 
 <script>
+import { modelState, modelStateLabel } from "@olares/lares-core/router/model-state";
+import { matchVoiceShortcut } from "@olares/lares-core/voice/shortcuts";
+import { markRaw } from "vue";
 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";
@@ -116,10 +125,13 @@ 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 { laresVoiceConfig, laresVoiceAvailability } from "@olares/lares-core/voice/lares-policy";
 import { createVoiceConversation } from "@olares/lares-core/voice/conversation";
 import { createAnswerPlayer } from "./chat/playback.js";
 import { createReplySpeaker, createSentencePlayer, speakable } from "@olares/lares-core/voice/speech";
-import { wavBlob } from "@olares/lares-core/voice/client";
+import { prepareBrowserCapture } from "@olares/lares-core/voice/browser-capture";
+import { playAudioStream, createStreamingCapture } from "@olares/lares-core/voice/stream-client";
+import { voiceHeaders, wavBlob } from "@olares/lares-core/voice/client";
 import { browserPlays } from "@olares/lares-core/voice/playback";
 import { speakProblemText, speakToggleNotice } from "@olares/lares-core/voice/problem";
 import { appendDraftMentions } from "@olares/lares-core/files/mention";
@@ -220,6 +232,8 @@ export default {
       historyLoading: false,
       modelCatalog: null,
       modelError: "",
+      modelCatalogError: "",
+      modelCatalogLoading: false,
       modelPending: "",
       modelSheet: false,
       effortSheet: false,
@@ -234,6 +248,7 @@ export default {
       voiceLanguage: "",
       voiceSpeak: false,
       voiceDefaultMode: "continuous",
+      voiceSettings: null,
       voiceStreaming: false,
       speakBusy: false,
       speakNotice: "",
@@ -326,7 +341,9 @@ export default {
         sessions: this.sessions,
         sessionsReady: this.sessionsReady,
         models: this.models,
+        refreshModels: () => this.loadModelCatalog(true),
         modelError: this.modelError,
+        modelCatalogError: this.modelCatalogError,
         modelGroups: this.modelGroups,
         modelCurrent: this.modelCurrent,
         modelLabel: this.modelLabel,
@@ -343,6 +360,8 @@ export default {
         voiceDefaultMode: this.voiceDefaultMode,
         voiceCall: this.voiceCall,
         voicePanelState: this.voicePanelState,
+        voiceReady: Boolean(this.voiceSettings),
+        voiceDictation: !this.voiceSettings || laresVoiceAvailability(this.voiceSettings).dictation,
         voicePhase: this.voicePhase,
         voiceElapsed: this.voiceElapsed,
         voiceErrorText: this.voiceErrorText,
@@ -427,8 +446,11 @@ export default {
       }
       return null;
     },
+    modelStatus() {
+      return { models: this.models?.models ?? [], current: this.models?.default, status: this.modelCatalogLoading || !this.modelCatalog ? "loading" : "ready", failures: this.models?.failures, error: this.modelCatalogError };
+    },
     modelLabel() {
-      return this.currentListedModel?.name || this.models?.default?.model || this.t("model.select");
+      return modelStateLabel(this.modelStatus, this.locale || "en");
     },
     liveModelSelection() {
       const row = this.sessions.find((item) => item.sessionId === this.sessionId);
@@ -507,11 +529,12 @@ export default {
       return this.models?.default ? selectionKey(this.models.default) : "";
     },
     modelBusy() {
-      return Boolean(this.modelPending) || (this.modelSheet && !this.modelCatalog);
+      return this.modelCatalogLoading || Boolean(this.modelPending) || (this.modelSheet && !this.modelCatalog);
     },
     modelBlocked() {
-      return this.chatDevice === "desktop" && this.models?.routable === false;
+      return !modelState(this.modelStatus).valid;
     },
+    voiceReadAloudError() { return this.t("settings.readAloudSyncFailed"); },
     voiceErrorText() {
       return this.voiceError ? messageFromCode(this.t, this.voiceError, "error.voice_failed") : "";
     },
@@ -541,7 +564,8 @@ export default {
     this.player = createAnswerPlayer();
     this.voicePanel = createVoicePanel({
       create: (options) => this.createMobileVoiceConversation(options),
-      loadConfig: async () => (await this.runtime.settings.voice(true)).config,
+      prepareInput: (config) => config?.device === "headset" ? null : prepareBrowserCapture(),
+      loadConfig: async () => (await this.runtime.settings.voice(false, { diagnostics: false })).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"] || "";
@@ -554,7 +578,13 @@ 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.voiceSettingsUnsub = subscribeVoiceSettings((value) => {
+      this.voiceDefaultMode = value.config.mobileMode; this.voiceSettings = markRaw(value);
+      const next = value.config.speak === true;
+      if (this.voiceSpeak && !next) this.reader?.stop();
+      this.voiceSpeak = next;
+      void this.voicePanel.setReadAloud(next);
+    });
     this.voicePanelState = this.voicePanel.getSnapshot();
     this.voicePanelUnsub = this.voicePanel.subscribe(() => {
       const view = this.voicePanel.getSnapshot(); this.voicePanelState = view;
@@ -563,6 +593,7 @@ export default {
     });
     this.replySpeaker = createReplySpeaker();
     this.reader = createSentencePlayer({
+      stream: (value) => playAudioStream({ ...value, request: (path, options) => this.runtime.voiceRequest(path, options), headers: voiceHeaders(captureSource("mobile", this.voiceSettings?.config?.device)), socket: (ticket) => this.runtime.voiceSocket(ticket, "/api/lares/voice/stream") }),
       send: async (request) => {
         const result = await this.runtime.speak?.(request);
         if (!result) throw Object.assign(new Error("voice_speak_failed"), { code: "voice_speak_failed" });
@@ -593,9 +624,12 @@ export default {
       this.busyEnter = section.busyEnter;
     });
     this.voiceVisibilityHandler = () => {
-      if (document.hidden) void this.voicePanel.pause().catch(() => {});
+      if (document.hidden) { this.reader.stop(); void this.voicePanel.pause().catch(() => {}); }
     };
+    this.voiceOfflineHandler = () => { this.reader.stop(); void this.voicePanel.pause().catch(() => {}); };
+    window.addEventListener("offline", this.voiceOfflineHandler);
     document.addEventListener("visibilitychange", this.voiceVisibilityHandler);
+    window.addEventListener("keydown", this.onVoiceShortcut, true);
     this.voiceClock = setInterval(() => {
       if (this.voicePhase === "recording") this.voiceElapsed += 1;
     }, 1000);
@@ -605,11 +639,14 @@ export default {
     this.restoreLog();
   },
   deactivated() {
+    this.reader.stop();
     void this.voicePanel?.pause().catch(() => {});
     this.captureLog();
   },
   beforeUnmount() {
+    window.removeEventListener("offline", this.voiceOfflineHandler);
     document.removeEventListener("visibilitychange", this.voiceVisibilityHandler);
+    window.removeEventListener("keydown", this.onVoiceShortcut, true);
     clearInterval(this.voiceClock);
     this.captureLog();
     this.noteSeen(this.sessionId);
@@ -691,8 +728,8 @@ export default {
       this.items = snap.items;
       this.running = snap.running;
       this.runningSince = snap.runningSince || 0;
-      const target = this.voiceSpeak && !this.voiceCall ? speakable(utterance, this.voiceStreaming) : null;
-      if (target) this.reader.follow({ ...target, key: `${snap.sessionId}:${target.key}` });
+      const target = this.voiceSpeak && !this.voiceCall && !document.hidden ? speakable(utterance, true) : null;
+      if (target) this.reader.follow({ ...target, sessionId: snap.sessionId, source: { sessionId: snap.sessionId, turn: target.turn, step: target.step, attemptId: target.attemptId }, key: `${snap.sessionId}:${target.key}` });
       this.failed = snap.failed;
       this.error = snap.error;
       this.sessions = snap.sessions ?? this.sessions;
@@ -972,6 +1009,7 @@ export default {
       try {
         await this.runtime.start({ workspaces: this.chatDevice === "desktop" });
         if (gen !== this.hostGen) return;
+        void this.runtime.settings.voice(false, { diagnostics: false }).then(value => { if (gen === this.hostGen) { this.voiceSettings = markRaw(value); this.voiceDefaultMode = value.config.mobileMode; } }).catch(() => {});
         if (this.chatDevice !== "desktop") await this.runtime.refreshWorkspaces();
         await this.loadComposerMeta();
       } finally {
@@ -986,6 +1024,7 @@ export default {
       this.unsub = this.runtime.subscribe((snap) => this.applySnap(snap));
     },
     switchHost() {
+      this.voiceSettings = null;
       void this.voicePanel?.end().catch(() => {});
       for (const controller of this.imageUploadControllers.values()) controller.abort();
       this.imageUploadControllers.clear();
@@ -1002,6 +1041,8 @@ export default {
       this.failed = "";
       this.error = "";
       this.modelCatalog = null;
+      this.modelCatalogError = "";
+      this.modelCatalogLoading = false;
       this.modelError = "";
       this.modelPending = "";
       this.modelSheet = false;
@@ -1076,17 +1117,21 @@ export default {
       }
       await Promise.all(jobs);
     },
-    async loadModelCatalog() {
+    async loadModelCatalog(refresh = false) {
       const gen = ++this.modelCatalogGen;
-      const loaded = await this.runtime.modelCatalog();
-      if (gen !== this.modelCatalogGen) return;
-      if (!loaded.ok) {
-        this.modelCatalog = null;
-        this.modelError = loaded.error?.message || loaded.error?.code || "models";
-        return;
+      this.modelCatalogLoading = true;
+      try {
+        if (refresh) await this.runtime.refreshModelCatalog();
+        const loaded = await this.runtime.modelCatalog();
+        if (gen !== this.modelCatalogGen) return;
+        if (!loaded.ok) throw new Error(loaded.error?.message || loaded.error?.code || "models");
+        this.modelCatalog = loaded.value ?? null;
+        this.modelCatalogError = "";
+      } catch (error) {
+        if (gen === this.modelCatalogGen) this.modelCatalogError = error.message;
+      } finally {
+        if (gen === this.modelCatalogGen) this.modelCatalogLoading = false;
       }
-      this.modelCatalog = loaded.value ?? null;
-      this.modelError = "";
     },
     openEffortSheet() {
       if (this.effortDisabled) return;
@@ -1114,7 +1159,7 @@ export default {
     },
     openModelSheet() {
       this.modelSheet = true;
-      if (!this.modelCatalog) void this.loadModelCatalog();
+      if (!this.modelCatalog || this.modelCatalogError || this.models?.failures?.length) void this.loadModelCatalog(true);
     },
     async chooseModel(model) {
       const key = this.modelKey(model);
@@ -1222,10 +1267,40 @@ export default {
       this.draftImages = [];
       this.imagesBySession = {};
     },
+    async onVoiceShortcut(event) {
+      if (this.chatDevice !== "desktop" || document.hidden || navigator.onLine === false || event.composedPath?.().some(node => node?.hasAttribute?.("data-voice-shortcut-recorder"))) return;
+      if (event.key === "Escape" && !event.defaultPrevented) { this.reader.stop(); void this.voicePanel.pause().catch(() => {}); return; }
+      const action = matchVoiceShortcut(event, this.voiceSettings?.config?.dictationShortcuts);
+      if (!action || !laresVoiceAvailability(this.voiceSettings).dictation) return;
+      event.preventDefault();
+      await this.openDictation(action);
+    },
+    async startDictation() {
+      await this.openDictation();
+    },
+    async openDictation(preset) {
+      if (document.hidden || navigator.onLine === false) return;
+      if (!this.voiceSettings) {
+        try { this.voiceSettings = markRaw(await this.runtime.settings.voice(false, { diagnostics: false })); }
+        catch { return; }
+      }
+      if (!laresVoiceAvailability(this.voiceSettings).dictation) return;
+      const view = this.voicePanel.getSnapshot();
+      if (view.busy) return;
+      if (view.visible && view.mode === "single") { if (view.snapshot?.capture === "recording") await this.voicePanel.finish().catch(() => {}); return; }
+      await this.voicePanel.pause().catch(() => {});
+      await this.voicePanel.open({ mode: "single", sessionId: this.sessionId || null, preset: preset && preset !== "default" ? preset : undefined, configSnapshot: this.voiceSettings.config }).catch(() => {});
+    },
     async onHoldStart() {
-      const settings = await this.runtime.settings.voice(true);
+      if (this.voicePanelState?.mode === "single" && this.voicePanelState.raw) {
+        await this.voicePanel.open({ mode: "single", sessionId: this.sessionId || null });
+        return;
+      }
+      const settings = await this.runtime.settings.voice(false, { diagnostics: false });
       this.voiceDefaultMode = settings.config.mobileMode;
-      await this.voicePanel.open({ mode: this.voicePanelState?.mode === "single" && this.voicePanelState.raw ? "single" : this.voiceDefaultMode, sessionId: this.sessionId || null });
+      const available = laresVoiceAvailability(settings, !this.modelBlocked);
+      if (!(this.voiceDefaultMode === "single" ? available.dictation : available.conversation)) { this.voiceError = "voice_model_unavailable"; return; }
+      await this.voicePanel.open({ mode: this.voiceDefaultMode, sessionId: this.sessionId || null });
     },
     onVoiceAction({ action, value }) {
       if (action === "stopPlayback") { void this.voicePanel.conversation?.controller.stopPlayback().catch(() => {}); return; }
@@ -1234,13 +1309,16 @@ export default {
     },
     runVoicePanel(action) { void this.voicePanel[action]().catch(() => {}); },
     async createMobileVoiceConversation({ mode, onTranscript, onDevice, config }) {
+      config = laresVoiceConfig(config, mode);
       const settings = { config };
       const continuous = mode === "continuous";
-      onDevice(captureSource("mobile", settings.config.device));
+      const device = settings.config.device === "headset" ? "headset" : "device";
+      onDevice(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({
+        stream: device === "device" ? (value) => playAudioStream({ ...value, request: (path, options) => this.runtime.voiceRequest(path, options), headers: conversation.headers, socket: (ticket) => this.runtime.voiceSocket(ticket, "/api/lares/voice/stream") }) : undefined,
         send: (value) => conversation.speak(value),
         play: (sentence) => sentence.bluetooth === "played" ? Promise.resolve() : this.player.play(wavBlob(sentence.audio)),
         halt: () => this.player.stop(), silence: () => {},
@@ -1248,17 +1326,18 @@ export default {
         fail: (error) => { this.showSpeakProblem(error); void conversation.controller.disconnect("voice_playback_failed"); },
       });
       conversation = createVoiceConversation({
+        streamInput: (stream, callbacks) => createStreamingCapture(stream, { ...callbacks, request: (path, options) => this.runtime.voiceRequest(path, options), headers: conversation.headers, model: config.model, language: config.language, socket: (ticket) => this.runtime.voiceSocket(ticket, "/api/lares/voice/stream") }),
         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),
+        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,
+        preset: settings.config.preset, backend: settings.config.backend, 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); },
+        playback: { get canPause() { return reader.canPause; }, get key() { return reader.key; }, pause: () => reader.pause(), resume: () => reader.resume(), stop: () => { reader.stop(); this.player.stop(); } },
+        onReply: (reply) => { const value = speakable(reply, device === "device"); if (value) reader.follow(value); },
       });
       return conversation;
     },
@@ -1449,6 +1528,8 @@ export default {
     async send(mode = "queue") {
       const text = this.draft.trim();
       if (!this.canSend) return;
+      this.reader.stop();
+      if (this.voiceCall?.connection === "open") await this.voicePanel.pause();
       this.player?.unlock();
       const sessionId = this.sessionId;
       const images = this.draftImages.filter((row) => draftImageStatus(row) === "ready");

package/src/chat/Composer.vue

@@ -6,6 +6,7 @@
       :data-hero="hero ? 'true' : 'false'"
       :data-mode="voiceView?.inputActive ? 'voice' : 'text'"
       :data-expanded="expanded ? 'true' : 'false'"
+      :data-attachments="draftImages.length > 0"
       :data-holding="voiceView?.holding ? 'true' : 'false'"
       :data-cancel-armed="Boolean(voiceView?.cancelArmed)"
     >
@@ -137,7 +138,7 @@
             <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 && !voiceView?.inputActive"
+            v-if="hasContent && !voiceView?.inputActive"
             type="submit"
             class="lares-composer__icon"
             data-kind="send"
@@ -202,6 +203,9 @@ export default {
   ],
   data() {
     return {
+      inputMultiline: false,
+      inputWidth: 0,
+      inputResizeObserver: null,
       commandsOpen: false,
       commandTyped: false,
       commandIndex: 0,
@@ -219,8 +223,11 @@ export default {
       if (this.hero) return this.t("chat.placeholderNewSession");
       return this.t("chat.placeholder");
     },
+    hasContent() {
+      return this.draft.trim().length > 0 || this.draftImages.length > 0;
+    },
     expanded() {
-      return !this.voiceView?.inputActive && (this.draft.trim().length > 0 || this.draftImages.length > 0);
+      return !this.voiceView?.inputActive && this.inputMultiline;
     },
     referenceMenuRows() {
       return referenceRows(this.references, this.t);
@@ -236,6 +243,9 @@ export default {
     draft(value) {
       this.autosize();
     },
+    "voiceView.inputActive"() {
+      this.autosize();
+    },
     overlayPointerActive(active) {
       if (active) window.addEventListener("pointerdown", this.onTokenPointer, true);
       else window.removeEventListener("pointerdown", this.onTokenPointer, true);
@@ -243,8 +253,16 @@ export default {
   },
   mounted() {
     this.autosize();
+    this.inputResizeObserver = new ResizeObserver(([entry]) => {
+      const width = entry.contentRect.width;
+      if (width <= 0 || width === this.inputWidth) return;
+      this.inputWidth = width;
+      this.autosize();
+    });
+    this.inputResizeObserver.observe(this.$refs.input);
   },
   beforeUnmount() {
+    this.inputResizeObserver?.disconnect();
     window.clearTimeout(this.referenceTimer);
     window.removeEventListener("pointerdown", this.onTokenPointer, true);
   },
@@ -398,9 +416,13 @@ export default {
     autosize() {
       this.$nextTick(() => {
         const el = this.$refs.input;
-        if (!el) return;
-        el.style.height = "auto";
-        el.style.height = `${Math.min(el.scrollHeight, 176)}px`;
+        if (!el || !el.getClientRects().length) return;
+        el.style.height = "36px";
+        el.style.overflowY = "hidden";
+        const height = Math.max(36, el.scrollHeight);
+        this.inputMultiline = height > 36;
+        el.style.height = `${Math.min(height, 176)}px`;
+        el.style.overflowY = height > 176 ? "auto" : "hidden";
       });
     },
     focus() {
@@ -542,9 +564,9 @@ export default {
   white-space: nowrap;
 }
 
-.lares-composer__card[data-expanded="true"] {
+.lares-composer__card[data-expanded="true"],
+.lares-composer__card[data-attachments="true"] {
   border-radius: 24px;
-  padding: 16px 14px 12px;
 }
 
 .lares-composer__card[data-holding="true"] {
@@ -636,15 +658,7 @@ export default {
 }
 
 .lares-composer__line[data-expanded="true"] {
-  flex-wrap: wrap;
-  row-gap: 14px;
-}
-
-.lares-composer__line[data-expanded="true"] .lares-composer__input {
-  order: -1;
-  flex: 1 0 100%;
-  min-height: 26px;
-  padding: 0;
+  align-items: flex-end;
 }
 
 .lares-composer__input,
@@ -659,6 +673,8 @@ export default {
 }
 
 .lares-composer__input {
+  box-sizing: border-box;
+  height: 36px;
   max-height: 176px;
   resize: none;
   overflow-y: auto;
@@ -719,10 +735,6 @@ export default {
   gap: 12px;
 }
 
-.lares-composer__line[data-expanded="true"] .lares-composer__tools {
-  margin-left: auto;
-}
-
 .lares-composer__picker {
   display: none;
 }

package/src/chat/Transcript.vue

@@ -34,6 +34,10 @@
       :data-type="row.type"
       :data-pending="row.pending ? 'true' : 'false'"
     >
+      <div v-if="hasReadout(row)" role="status" class="lares-message-readout">
+        <span>{{ speechLabel }}</span>
+        <button type="button" class="lares-message-stop" @click="readout.stop()">{{ t(readout.status === 'error' ? 'readout.dismiss' : 'readout.stop') }}</button>
+      </div>
       <div v-if="row.type === 'user'" class="lares-msg" data-role="user">{{ row.text }}</div>
       <LaresStageRow
         v-else-if="row.type === 'context'"
@@ -79,7 +83,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>
+        <button v-if="!readout && isSpeaking(row)" type="button" class="lares-message-stop" @click="$emit('stop-speaking')">{{ t('input.stopSpeaking') }}</button>
         <LaresMessageActions
           :text="row.text"
           :reaction="reactions[actionKey(index)] || ''"
@@ -107,6 +111,7 @@
 </template>
 
 <script>
+import { readoutState } from "@olares/lares-core/voice/speech";
 import { partitionPreviews } from "@olares/lares-core/files/preview-groups";
 import { parseAskUserQuestions } from "@olares/lares-core/larepass/questions";
 import { hidesRunningClock, processFoldLabel, transcriptBlocks } from "@olares/lares-core/larepass/process-fold";
@@ -142,6 +147,7 @@ export default {
   emits: ["open", "media", "answer", "stop-speaking"],
   data() {
     return {
+      readout: null, readoutUnsub: null,
       applyingScroll: false,
       logRo: null,
       logPin: 0,
@@ -153,6 +159,7 @@ export default {
     };
   },
   computed: {
+    speechLabel() { return this.t(`readout.${this.readout?.status}`); },
     runningText() {
       return runningLabel(this.runningSince, this.t, this.now);
     },
@@ -172,17 +179,25 @@ export default {
     runningSince: "syncClock",
   },
   mounted() {
+    this.readout = readoutState.getSnapshot();
+    this.readoutUnsub = readoutState.subscribe(() => { this.readout = readoutState.getSnapshot(); });
     this.bindLog();
     this.restoreLog();
     this.syncClock();
   },
   beforeUnmount() {
+    this.readoutUnsub?.();
     this.captureLog();
     this.unbindLog();
     if (this.logPin) cancelAnimationFrame(this.logPin);
     clearInterval(this.clock);
   },
   methods: {
+    hasReadout(row) {
+      if (!this.readout || this.readout.sessionId !== this.sessionId || row.type !== "assistant" || row.turn !== this.readout.turn) return false;
+      const latest = this.items.findLast(item => item.type === "assistant" && item.turn === this.readout.turn);
+      return latest && (row.id || row.key) === (latest.id || latest.key);
+    },
     isSpeaking(row) {
       const snapshot = this.voiceView?.snapshot;
       if (snapshot?.playback !== "playing") return false;
@@ -569,5 +584,7 @@ export 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; }
+.lares-message-readout { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-block: 8px; color: var(--q-ink-2, #777); font-size: 13px; }
+.lares-message-stop { appearance: none; border: 1px solid var(--q-stroke-2, #8885); border-radius: 8px; background: transparent; color: inherit; font: inherit; padding: 5px 10px; cursor: pointer; }
+.lares-message-stop:focus-visible { outline: 2px solid var(--q-blue-default, #467cff); outline-offset: 2px; }
 </style>

package/src/chat/VoicePanel.vue

@@ -14,6 +14,7 @@
             </div>
           </details>
           <textarea class="lares-voice-draft" :aria-label="t('panel.draft')" :value="view.draft" :disabled="ui.pending" @input="$emit('edit', $event.target.value)" />
+          <button v-if="view.stage === 'processing' && view.raw" type="button" @click="choose('raw')">{{ t('dictation.useOriginal') }}</button>
           <div v-if="showOriginal" class="lares-voice-original" :aria-label="t('dictation.original')">{{ view.raw }}</div>
         </template>
       </section>