@olares/lares-mobile 0.15.11 → 0.15.13

package/package.json

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

package/src/App.vue

@@ -89,6 +89,7 @@
       @files="attachFiles"
       @hold-start="onHoldStart"
       @hold-end="onHoldEnd"
+      @voice-action="voiceAction"
       @close-model="modelSheet = false"
       @choose-model="chooseModel"
       @close-effort="effortSheet = false"
@@ -100,19 +101,26 @@
       @pick-command="pickCommand"
       @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" />
   </div>
 </template>
 
 <script>
+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 { createVoiceCapture } from "./chat/voice.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";
 import { wavBlob } from "@olares/lares-core/voice/client";
-import { captureSource } from "@olares/lares-core/voice/input";
 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";
@@ -169,7 +177,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" },
@@ -218,11 +226,15 @@ export default {
       effortSheet: false,
       upload: { pending: 0, failures: [] },
       draftImages: [],
+      voiceCall: null,
+      voicePanelState: null,
+      voiceRecords: [],
       voicePhase: "idle",
       voiceElapsed: 0,
       voiceError: "",
       voiceLanguage: "",
       voiceSpeak: false,
+      voiceDefaultMode: "continuous",
       voiceStreaming: false,
       speakBusy: false,
       speakNotice: "",
@@ -329,6 +341,8 @@ export default {
         effortDisabled: this.effortDisabled,
         upload: this.upload,
         draftImages: this.draftImages,
+        voiceDefaultMode: this.voiceDefaultMode,
+        voiceCall: this.voiceCall,
         voicePhase: this.voicePhase,
         voiceElapsed: this.voiceElapsed,
         voiceErrorText: this.voiceErrorText,
@@ -442,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);
@@ -510,6 +524,8 @@ export default {
       },
     },
     sessionId(id) {
+      this.bindVoiceHistory(id);
+      void this.voicePanel?.bind(id || null).catch(() => {});
       this.bindIntake(id);
     },
     hostKey() {
@@ -523,6 +539,25 @@ 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),
+      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.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) => {
@@ -538,25 +573,7 @@ export default {
       silence: () => void this.runtime.interruptSpeech?.(),
       fail: (err) => this.showSpeakProblem(err),
     });
-    this.voiceCap = createVoiceCapture({
-      transcribe: (blob, signal) => this.runtime.transcribe(blob, this.voiceLanguage, signal),
-      onPhase: (phase, extra = {}) => {
-        this.voicePhase = phase;
-        if (extra.elapsed != null) this.voiceElapsed = extra.elapsed;
-        if (extra.error != null) this.voiceError = extra.error;
-      },
-      onTrace: (event, fields) => {
-        void this.runtime.reportLog?.("voice", event, fields);
-      },
-      submit: (text) => {
-        void this.runtime.reportLog?.("voice", "submit", {
-          chars: String(text ?? "").trim().length,
-          running: Boolean(this.running),
-          session: Boolean(this.sessionId),
-        });
-        void this.sendTranscript(text);
-      },
-    });
+
     this.bindIntake(this.sessionId);
     this.bindRuntime();
     try {
@@ -572,20 +589,32 @@ export default {
     this.conversationUnsub = subscribeConversationSettings((section) => {
       this.busyEnter = section.busyEnter;
     });
+    this.voiceVisibilityHandler = () => {
+      if (document.hidden) void this.voicePanel.pause().catch(() => {});
+    };
+    document.addEventListener("visibilitychange", this.voiceVisibilityHandler);
+    this.voiceClock = setInterval(() => {
+      if (this.voicePhase === "recording") this.voiceElapsed += 1;
+    }, 1000);
     this.retry();
   },
   activated() {
     this.restoreLog();
   },
   deactivated() {
+    void this.voicePanel?.pause().catch(() => {});
     this.captureLog();
   },
   beforeUnmount() {
+    document.removeEventListener("visibilitychange", this.voiceVisibilityHandler);
+    clearInterval(this.voiceClock);
     this.captureLog();
     this.noteSeen(this.sessionId);
     for (const controller of this.imageUploadControllers?.values?.() ?? []) controller.abort();
     this.imageUploadControllers?.clear?.();
-    this.voiceCap?.dispose();
+    void this.voicePanel?.dispose().catch(() => {});
+    this.voicePanelUnsub?.();
+    this.voiceHistoryUnsub?.();
     this.conversationUnsub?.();
     this.intakeUnsub?.();
     if (this.sessionId) this.intake?.cancelSession(this.sessionId);
@@ -642,10 +671,12 @@ export default {
         this.commands = null;
         this.commandsError = "";
       }
-      if (sessionChanged) {
+      if (sessionChanged && snap.sessionId !== this.voiceAdoptingSession) {
+        void this.voicePanel?.pause().catch(() => {});
         this.reader.stop();
         this.player?.stop();
       }
+      if (sessionChanged) this.voiceAdoptingSession = null;
       const utterance = this.replySpeaker.observe({
         sessionChanged,
         wasRunning: this.running,
@@ -656,7 +687,7 @@ export default {
       this.items = snap.items;
       this.running = snap.running;
       this.runningSince = snap.runningSince || 0;
-      const target = this.voiceSpeak ? speakable(utterance, this.voiceStreaming) : null;
+      const target = this.voiceSpeak && !this.voiceCall ? speakable(utterance, this.voiceStreaming) : null;
       if (target) this.reader.follow({ ...target, key: `${snap.sessionId}:${target.key}` });
       this.failed = snap.failed;
       this.error = snap.error;
@@ -951,7 +982,7 @@ export default {
       this.unsub = this.runtime.subscribe((snap) => this.applySnap(snap));
     },
     switchHost() {
-      this.voiceCap?.stop?.(true);
+      void this.voicePanel?.end().catch(() => {});
       for (const controller of this.imageUploadControllers.values()) controller.abort();
       this.imageUploadControllers.clear();
       this.releaseDraftImages();
@@ -1030,6 +1061,7 @@ export default {
       if (settings) {
         jobs.push(settings.voice().then((voice) => {
           this.voiceLanguage = voice.config?.language || "";
+          this.voiceDefaultMode = voice.config?.mobileMode || "continuous";
           this.voiceSpeak = voice.config?.speak === true;
           this.voiceStreaming = voice.config?.streaming === true;
         }).catch(() => {
@@ -1186,24 +1218,52 @@ export default {
       this.draftImages = [];
       this.imagesBySession = {};
     },
-    onHoldStart(detail) {
-      void this.runtime.reportLog?.("voice", "hold-start", {
-        via: detail?.via || "",
-        phase: this.voicePhase,
+    async onHoldStart({ mode } = {}) {
+      await this.voicePanel.open({ mode: mode || this.voiceDefaultMode || "continuous", sessionId: this.sessionId || null });
+    },
+    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);
+      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 (captureSource("mobile") !== "device") return;
-      if (this.voicePhase === "idle" || this.voicePhase === "error") void this.voiceCap?.start();
-      this.reader.stop();
-      this.player?.stop();
-      this.player?.unlock();
-      void this.runtime.interruptSpeech?.();
+        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(detail) {
-      void this.runtime.reportLog?.("voice", "hold-end", {
-        via: detail?.via || "",
-        phase: this.voicePhase,
+    onHoldEnd() { this.voicePanel.conversation?.controller.stopRecording(); },
+    async voiceAction(action) { await this.voicePanel.action(action).catch(() => {}); },
+    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; },
       });
-      this.voiceCap?.stop(false);
     },
     showSpeakProblem(err) {
       this.speakNotice = speakProblemText(this.t, err);
@@ -1381,27 +1441,6 @@ export default {
       if (!sessionId) return;
       return this.runtime.archiveSession(sessionId);
     },
-    async sendTranscript(text) {
-      const spoken = String(text ?? "").trim();
-      if (!spoken || !this.sessionId || this.modelBlocked || this.historyLoading || this.upload?.pending) return;
-      const mode = resolveSubmitMode(this.running, false, true, this.busyEnter);
-      this.sending = true;
-      this.pendingUser = this.running ? "" : spoken;
-      this.runtime.pinToBottom();
-      this.pinLog();
-      try {
-        const sent = await this.runtime.send([{ type: "text", text: spoken }], mode);
-        if (!sent.ok) {
-          this.pendingUser = "";
-          this.failed = sent.error?.message || sent.error?.code || "send";
-        }
-      } catch (err) {
-        this.pendingUser = "";
-        this.failed = err instanceof Error ? err.message : "send";
-      } finally {
-        this.sending = false;
-      }
-    },
     async send(mode = "queue") {
       const text = this.draft.trim();
       if (!this.canSend) return;

package/src/chat/Composer.vue

@@ -96,7 +96,7 @@
           </svg>
         </button>
         <textarea
-          v-show="inputMode === 'text'"
+
           ref="input"
           :value="draft"
           class="lares-composer__input"
@@ -110,25 +110,6 @@
           @select="onCaretMove"
           @contextmenu="onContextMenu"
         />
-        <button
-          v-show="inputMode === 'voice'"
-          type="button"
-          class="lares-composer__talk"
-          :data-phase="voicePhase"
-          :disabled="voiceBlocked"
-          :aria-label="voiceLabel"
-          @pointerdown="onVoiceDown"
-          @touchstart.prevent="onVoiceTouchStart"
-          @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"
@@ -138,13 +119,13 @@
             @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('call.start')"
+            aria-haspopup="dialog"
+            @click="onVoiceClick"
           >
             <svg class="lares-composer__wave" viewBox="0 0 24 24" aria-hidden="true">
               <path d="M5 8v8" />
@@ -164,24 +145,11 @@
               <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>
+          <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="voiceError && voicePhase === 'error'" class="lares-composer__hint" data-status="error">{{ voiceError }}</p>
+    <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>
@@ -189,7 +157,6 @@
 </template>
 
 <script>
-import { formatElapsed } from "./voice.js";
 import {
   REFERENCE_DEBOUNCE_MS,
   activeReference,
@@ -208,6 +175,7 @@ export default {
     canSend: { type: Boolean, default: false },
     attachPending: { type: Boolean, default: false },
     attachDisabled: { type: Boolean, default: false },
+    voiceCall: { type: Object, default: null },
     voicePhase: { type: String, default: "idle" },
     voiceElapsed: { type: Number, default: 0 },
     voiceError: { type: String, default: "" },
@@ -219,11 +187,12 @@ export default {
     commands: { type: Array, default: null },
     commandsError: { type: String, default: "" },
     hero: { type: Boolean, default: false },
+    voiceDefaultMode: { type: String, default: "continuous" },
     inputMode: { type: String, default: "text" },
     t: { type: Function, required: true },
   },
   emits: [
-    "update:draft", "update:inputMode", "send", "files", "voice", "hold-start", "hold-end",
+    "update:draft", "update:inputMode", "send", "files", "voice", "voice-action", "hold-start", "hold-end",
     "open-commands", "open-references", "pick-command", "remove-image",
   ],
   data() {
@@ -239,21 +208,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("composer.hold")} · ${this.elapsed}`;
-      if (this.voicePhase === "transcribing") return this.t("mic.transcribing");
-      if (this.holding) return this.t("composer.hold");
-      return this.t("composer.holdToTalk");
-    },
-    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");
     },
@@ -261,16 +215,6 @@ 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("composer.hold");
-      if (this.voicePhase === "transcribing") return this.t("mic.transcribing");
-      return this.t("composer.voice");
-    },
-    voiceBlocked() {
-      return this.voicePhase === "transcribing" || this.sending;
-    },
     expanded() {
       return this.inputMode === "text" && (this.draft.trim().length > 0 || this.draftImages.length > 0);
     },
@@ -287,7 +231,6 @@ export default {
   watch: {
     draft(value) {
       this.autosize();
-      if (value && this.inputMode === "voice" && !this.voiceBusy) this.setMode("text");
     },
     overlayPointerActive(active) {
       if (active) window.addEventListener("pointerdown", this.onTokenPointer, true);
@@ -383,18 +326,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");
@@ -447,55 +378,14 @@ export default {
         event.preventDefault();
       }
     },
-    onVoiceDown(event) {
-      if (event.pointerType === "touch") return;
-      if (event.button > 0 || this.voiceBlocked || this.holding) return;
-      event.preventDefault();
-      event.currentTarget.setPointerCapture?.(event.pointerId);
-      this.beginHold("mouse");
-    },
-    onVoiceTouchStart() {
-      if (this.voiceBlocked || this.holdKind === "touch") return;
-      this.beginHold("touch");
-    },
-    beginHold(kind) {
-      const starting = !this.holding;
-      this.detachHold();
-      this.holding = true;
-      this.holdKind = kind;
-      if (starting) this.$refs.input?.blur();
-      const end = (event) => {
-        if (kind === "touch" && event.type.startsWith("pointer")) return;
-        if (kind === "mouse" && event.type.startsWith("touch")) return;
-        this.detachHold();
-        if (!this.holding) return;
-        this.holding = false;
-        this.holdKind = "";
-        this.$emit("hold-end", { via: event.type });
-      };
-      this.holdEnd = end;
-      if (kind === "touch") {
-        window.addEventListener("touchend", end);
-        window.addEventListener("touchcancel", end);
-      } else {
-        window.addEventListener("pointerup", end, true);
-        window.addEventListener("pointercancel", end, true);
-      }
-      if (starting) this.$emit("hold-start", { via: kind });
-    },
-    detachHold() {
-      if (!this.holdEnd) return;
-      window.removeEventListener("touchend", this.holdEnd);
-      window.removeEventListener("touchcancel", this.holdEnd);
-      window.removeEventListener("pointerup", this.holdEnd, true);
-      window.removeEventListener("pointercancel", this.holdEnd, true);
-      this.holdEnd = null;
+    onVoiceClick() {
+      this.$emit("hold-start", { mode: "continuous" });
     },
     clearHold() {
-      this.detachHold();
       this.holding = false;
       this.holdKind = "";
     },
+    detachHold() {},
     pickFiles() {
       this.$refs.picker?.click();
     },
@@ -520,6 +410,9 @@ 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;
   flex-direction: column;
@@ -915,3 +808,11 @@ 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; }
+</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,7 @@
       >{{ 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>
         <LaresMessageActions
           :text="row.text"
           :reaction="reactions[actionKey(index)] || ''"
@@ -483,6 +484,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;

package/src/chat/VoicePanel.vue

@@ -0,0 +1,65 @@
+<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>
+      </section>
+    </div>
+  </dialog>
+</template>
+<script>
+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 }),
+  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'); },
+  },
+  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?.(); } },
+    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(); },
+  },
+};
+</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; }
+</style>

package/src/host.js

@@ -12,7 +12,7 @@ import {
   rawFileUrl,
 } from "@olares/lares-core/files/preview-workspace";
 import { FILES_UPLOAD_PATH, uploadFile } from "@olares/lares-core/files/upload-client";
-import { API as VOICE_API, postTranscribe } from "@olares/lares-core/voice/client";
+import { API as VOICE_API, postTranscribe, voiceHeaders } from "@olares/lares-core/voice/client";
 import { postReport, REPORT_PATH } from "@olares/lares-core/log/report";
 
 function pageOrigin() {
@@ -270,6 +270,11 @@ export function createHostClient(ports = {}) {
         request: direct,
       });
     },
+    voiceSocket(ticket) {
+      const auth = socketProtocols(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) {
       return postTranscribe(blob, language, signal, {
         baseUrl: urlFor(VOICE_API),
@@ -286,6 +291,7 @@ export function createHostClient(ports = {}) {
     async speak({ key, text, done, part }) {
       const res = await request(`${VOICE_API}/speak`, {
         method: "POST",
+        headers: voiceHeaders("device"),
         body: Number.isInteger(part) ? { key, text, done, part } : { key, text, done },
       });
       const body = res?.body;
@@ -302,7 +308,7 @@ export function createHostClient(ports = {}) {
       throw Object.assign(new Error(message), { code });
     },
     async interruptSpeech() {
-      const res = await request(`${VOICE_API}/playback/stop`, { method: "POST" });
+      const res = await request(`${VOICE_API}/playback/stop`, { method: "POST", headers: voiceHeaders("device") });
       return Boolean(res?.ok);
     },
     async openMux(signal) {

package/src/mobile/MobileShell.vue

@@ -72,6 +72,8 @@
             :can-send="state.canSend"
             :attach-pending="state.upload.pending > 0"
             :attach-disabled="!state.sessionId || state.historyLoading || state.starting"
+            :voice-call="state.voiceCall"
+            :voice-default-mode="state.voiceDefaultMode"
             :voice-phase="state.voicePhase"
             :voice-elapsed="state.voiceElapsed"
             :voice-error="state.voiceErrorText"
@@ -91,6 +93,7 @@
             @voice="$emit('voice')"
             @hold-start="$emit('hold-start', $event)"
             @hold-end="$emit('hold-end', $event)"
+            @voice-action="$emit('voice-action', $event)"
             @open-commands="$emit('open-commands')"
             @open-references="$emit('open-references', $event)"
             @pick-command="$emit('pick-command', $event)"
@@ -133,6 +136,8 @@
             :can-send="state.canSend"
             :attach-pending="state.upload.pending > 0"
             :attach-disabled="!state.sessionId || state.historyLoading || state.starting"
+            :voice-call="state.voiceCall"
+            :voice-default-mode="state.voiceDefaultMode"
             :voice-phase="state.voicePhase"
             :voice-elapsed="state.voiceElapsed"
             :voice-error="state.voiceErrorText"
@@ -152,6 +157,7 @@
             @voice="$emit('voice')"
             @hold-start="$emit('hold-start', $event)"
             @hold-end="$emit('hold-end', $event)"
+            @voice-action="$emit('voice-action', $event)"
             @open-commands="$emit('open-commands')"
             @open-references="$emit('open-references', $event)"
             @pick-command="$emit('pick-command', $event)"
@@ -249,7 +255,7 @@ export default {
   emits: [
     "history", "create", "toggle-speak", "close-history", "pick-session", "retry", "open-file",
     "answer", "update-draft", "send", "queue-action", "open-model", "open-effort", "files",
-    "voice", "hold-start", "hold-end", "close-model", "choose-model",
+    "voice", "voice-action", "hold-start", "hold-end", "close-model", "choose-model",
     "close-effort", "choose-effort", "close-preview",
     "open-commands", "open-references", "pick-command", "remove-image",
     "refresh-workspaces", "browse-workspaces", "browse-directory",

package/src/settings/AgentSettings.vue

@@ -41,7 +41,6 @@
       <p class="lares-agent__hint">{{ t("settings.input.busyEnter.hint") }}</p>
       <p v-if="conversationError" class="lares-agent__hint" data-status="error">{{ conversationError }}</p>
     </section>
-    <!-- Voice input parked.
     <section class="lares-agent__group">
       <h2>{{ tVoice("settings.title") }}</h2>
       <div class="lares-agent__list">
@@ -62,9 +61,43 @@
           @click="openSheet('voiceLang')"
         />
       </div>
+      <label class="lares-agent__hint">{{ tVoice('settings.preset') }}
+        <select :value="voice?.config?.preset || 'assistant'" @change="patchVoice('preset', $event.target.value)">
+          <option v-for="preset in ['dictation', 'chat', 'assistant', 'direct']" :key="preset" :value="preset">{{ tVoice(`settings.preset.${preset}`) }}</option>
+        </select>
+      </label>
+      <label class="lares-agent__hint">{{ tVoice('settings.chatModel') }}
+        <select :value="voice?.config?.chatModel || 'default-chat'" @change="patchVoice('chatModel', $event.target.value)">
+          <option value="default-chat">default-chat</option>
+          <option v-for="model in voice?.chatModels || []" :key="model" :value="model">{{ model }}</option>
+        </select>
+      </label>
+      <label class="lares-agent__hint">{{ tVoice('settings.backend') }}
+        <select :value="voice?.config?.backend || 'pipeline'" @change="patchVoice('backend', $event.target.value)">
+          <option value="pipeline">{{ tVoice('settings.backend.pipeline') }}</option>
+          <option v-if="voice?.realtimeReady?.includes(voice?.config?.realtimeModel)" value="realtime">Realtime</option>
+        </select>
+      </label>
+      <label v-if="voice?.realtimeModels?.length" class="lares-agent__hint">{{ tVoice('settings.realtime.model') }}
+        <select :value="voice?.config?.realtimeModel || ''" @change="patchVoice('realtimeModel', $event.target.value)">
+          <option value="" disabled>—</option>
+          <option v-for="model in voice.realtimeModels" :key="model" :value="model">{{ model }}</option>
+        </select>
+      </label>
+      <p class="lares-agent__hint">{{ tVoice('settings.realtime.hint') }}</p>
+      <label class="lares-agent__hint">{{ tVoice('settings.mobileMode') }}
+        <select :value="voice?.config?.mobileMode || 'continuous'" @change="patchVoice('mobileMode', $event.target.value)">
+          <option value="single">{{ tVoice('settings.mode.single') }}</option>
+          <option value="continuous">{{ tVoice('settings.mode.continuous') }}</option>
+        </select>
+      </label>
+      <label class="lares-agent__hint">{{ 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>
+        </select>
+      </label>
       <p v-if="voiceError" class="lares-agent__hint" data-status="error">{{ voiceError }}</p>
     </section>
-    -->
     <section class="lares-agent__group">
       <h2>{{ tSearch("settings.title") }}</h2>
       <LaresSelect

package/src/chat/voice.js

@@ -1,269 +0,0 @@
-import {
-  formatElapsed,
-  isRecordingTooShort,
-  pickRecordingMime,
-} from "@olares/lares-core/voice/recorder";
-
-export { formatElapsed };
-
-/** Phone mic. Bare booleans are exact and iOS rejects the headset profile. */
-const DEVICE_AUDIO = {
-  channelCount: { ideal: 1 },
-  echoCancellation: { ideal: true },
-  noiseSuppression: { ideal: true },
-  autoGainControl: { ideal: true },
-};
-
-const CHUNK_MS = 250;
-
-function micFailure(err) {
-  const name = err?.name || "";
-  if (name === "NotAllowedError" || name === "PermissionDeniedError") return "voice_permission_denied";
-  if (name === "SecurityError") return "voice_unsupported";
-  return "voice_failed";
-}
-
-async function openDeviceMic(mediaDevices) {
-  try {
-    return await mediaDevices.getUserMedia({ audio: DEVICE_AUDIO });
-  } catch (err) {
-    if (micFailure(err) !== "voice_failed") throw err;
-    return mediaDevices.getUserMedia({ audio: true });
-  }
-}
-
-export function createVoiceCapture({
-  transcribe,
-  submit,
-  onPhase,
-  onTrace,
-  now = Date.now,
-  media,
-}) {
-  const mediaDevices = media?.mediaDevices ?? globalThis.navigator?.mediaDevices;
-  const Recorder = media?.MediaRecorder ?? globalThis.MediaRecorder;
-  let recorder = null;
-  let stream = null;
-  let chunks = [];
-  let started = 0;
-  let timer = 0;
-  let errorTimer = 0;
-  let finishTimer = 0;
-  let cancel = false;
-  let released = false;
-  let finished = false;
-  let dead = false;
-  let abort = null;
-  let phase = "idle";
-
-  const emit = (next, extra = {}) => {
-    phase = next;
-    onPhase?.(next, extra);
-  };
-
-  const trace = (event, fields) => {
-    try {
-      onTrace?.(event, fields);
-    } catch {
-      /* a trace must not change the take */
-    }
-  };
-
-  const stopTimer = () => {
-    if (timer) {
-      clearInterval(timer);
-      timer = 0;
-    }
-  };
-
-  const release = () => {
-    stream?.getTracks().forEach((track) => track.stop());
-    stream = null;
-    recorder = null;
-  };
-
-  const fail = (code) => {
-    if (dead) return;
-    if (errorTimer) clearTimeout(errorTimer);
-    emit("error", { error: code, elapsed: 0 });
-    errorTimer = setTimeout(() => {
-      errorTimer = 0;
-      if (!dead && phase === "error") emit("idle", { error: "", elapsed: 0 });
-    }, 3200);
-  };
-
-  const finish = async () => {
-    if (finished || dead) return;
-    finished = true;
-    stopTimer();
-    const took = now() - started;
-    const type = recorder?.mimeType || chunks[0]?.type || "audio/webm";
-    const blobChunks = chunks;
-    chunks = [];
-    release();
-    if (cancel) {
-      emit("idle", { error: "", elapsed: 0 });
-      return;
-    }
-    const blob = new Blob(blobChunks, { type });
-    trace("blob", { bytes: blob.size, type, ms: took, chunks: blobChunks.length });
-    if (isRecordingTooShort(took, blob.size)) {
-      trace("too-short", { bytes: blob.size, ms: took });
-      fail("voice_too_short");
-      return;
-    }
-    emit("transcribing", { elapsed: took, error: "" });
-    abort = new AbortController();
-    try {
-      const text = String(await transcribe(blob, abort.signal) ?? "").trim();
-      if (dead || cancel) return;
-      if (!text) {
-        trace("no-input", {});
-        fail("voice_no_input");
-        return;
-      }
-      trace("transcript", { chars: text.length, head: text.slice(0, 40) });
-      emit("idle", { error: "", elapsed: 0 });
-      submit?.(text);
-    } catch (err) {
-      if (dead || abort.signal.aborted || cancel) return;
-      const code = err instanceof Error ? err.message : "voice_failed";
-      trace("transcribe-error", { code });
-      fail(code);
-    } finally {
-      abort = null;
-    }
-  };
-
-  const scheduleFinish = () => {
-    if (finishTimer) clearTimeout(finishTimer);
-    finishTimer = setTimeout(() => {
-      finishTimer = 0;
-      void finish();
-    }, 30);
-  };
-
-  const endRecorder = () => {
-    if (!recorder || recorder.state === "inactive") {
-      scheduleFinish();
-      return;
-    }
-    try {
-      recorder.requestData?.();
-    } catch {
-      /* the final dataavailable still arrives from stop() */
-    }
-    try {
-      recorder.stop();
-    } catch {
-      scheduleFinish();
-    }
-  };
-
-  return {
-    get phase() {
-      return phase;
-    },
-    async start() {
-      if (dead || phase === "preparing" || phase === "recording" || phase === "transcribing") return;
-      if (typeof Recorder === "undefined" || !mediaDevices?.getUserMedia) {
-        fail("voice_unsupported");
-        return;
-      }
-      cancel = false;
-      released = false;
-      finished = false;
-      trace("open", {});
-      emit("preparing", { elapsed: 0, error: "" });
-      let next;
-      try {
-        next = await openDeviceMic(mediaDevices);
-      } catch (err) {
-        const code = micFailure(err);
-        trace("mic-fail", { code, name: err?.name || "" });
-        if (!dead) fail(code);
-        return;
-      }
-      if (dead || cancel) {
-        next.getTracks().forEach((track) => track.stop());
-        if (!dead && phase === "preparing") emit("idle", { error: "", elapsed: 0 });
-        return;
-      }
-      stream = next;
-      chunks = [];
-      const mime = pickRecordingMime(Recorder);
-      try {
-        recorder = new Recorder(stream, mime ? { mimeType: mime } : undefined);
-      } catch {
-        release();
-        fail("voice_unsupported");
-        return;
-      }
-      recorder.ondataavailable = (event) => {
-        if (event.data?.size) chunks.push(event.data);
-        if (recorder?.state === "inactive") scheduleFinish();
-      };
-      recorder.onstop = () => scheduleFinish();
-      started = now();
-      try {
-        recorder.start(CHUNK_MS);
-      } catch {
-        trace("record-fail", { mime });
-        release();
-        fail("voice_unsupported");
-        return;
-      }
-      trace("recording", { mime: recorder.mimeType || mime || "" });
-      if (released || cancel) {
-        endRecorder();
-        return;
-      }
-      emit("recording", { elapsed: 0, error: "" });
-      timer = setInterval(() => emit("recording", { elapsed: now() - started, error: "" }), 200);
-    },
-    /**
-     * Finger-up finishes the take. The mic opens asynchronously, so the finger
-     * often lifts while still preparing — that is not a cancel.
-     */
-    stop(aborting = false) {
-      if (phase === "transcribing") {
-        if (aborting) {
-          cancel = true;
-          abort?.abort();
-        }
-        return;
-      }
-      if (phase !== "preparing" && phase !== "recording") {
-        trace("stop-ignored", { aborting: Boolean(aborting), phase });
-        return;
-      }
-      trace("stop", {
-        aborting: Boolean(aborting),
-        phase,
-        recorder: recorder?.state || "none",
-      });
-      if (aborting) {
-        cancel = true;
-        released = false;
-        if (recorder && recorder.state !== "inactive") recorder.stop();
-        return;
-      }
-      released = true;
-      stopTimer();
-      if (recorder && recorder.state !== "inactive") {
-        emit("transcribing", { elapsed: now() - started, error: "" });
-        endRecorder();
-      }
-    },
-    dispose() {
-      dead = true;
-      cancel = true;
-      if (errorTimer) clearTimeout(errorTimer);
-      if (finishTimer) clearTimeout(finishTimer);
-      stopTimer();
-      abort?.abort();
-      if (recorder && recorder.state !== "inactive") recorder.stop();
-      release();
-    },
-  };
-}