@olares/lares-mobile 0.15.12 → 0.15.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.12",
+  "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.12",
+    "@olares/lares-core": "0.15.13",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -101,10 +101,16 @@
       @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";
@@ -171,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" },
@@ -221,8 +227,8 @@ export default {
       upload: { pending: 0, failures: [] },
       draftImages: [],
       voiceCall: null,
-      voiceHistory: null,
-      voiceCaption: "",
+      voicePanelState: null,
+      voiceRecords: [],
       voicePhase: "idle",
       voiceElapsed: 0,
       voiceError: "",
@@ -450,7 +456,7 @@ export default {
       return effortMenuRows(this.reasoning, this.t("reasoning.default"));
     },
     viewItems() {
-      return withPendingUser(this.items, this.pendingUser);
+      return mergeVoiceTranscript(withPendingUser(this.items, this.pendingUser), this.voiceRecords);
     },
     failText() {
       return failText(this.t, this.failed, this.error);
@@ -518,6 +524,8 @@ export default {
       },
     },
     sessionId(id) {
+      this.bindVoiceHistory(id);
+      void this.voicePanel?.bind(id || null).catch(() => {});
       this.bindIntake(id);
     },
     hostKey() {
@@ -531,6 +539,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) => {
@@ -563,7 +590,7 @@ export default {
       this.busyEnter = section.busyEnter;
     });
     this.voiceVisibilityHandler = () => {
-      if (document.hidden) void this.voiceConversation?.controller.disconnect("voice_background");
+      if (document.hidden) void this.voicePanel.pause().catch(() => {});
     };
     document.addEventListener("visibilitychange", this.voiceVisibilityHandler);
     this.voiceClock = setInterval(() => {
@@ -575,6 +602,7 @@ export default {
     this.restoreLog();
   },
   deactivated() {
+    void this.voicePanel?.pause().catch(() => {});
     this.captureLog();
   },
   beforeUnmount() {
@@ -584,8 +612,9 @@ export default {
     this.noteSeen(this.sessionId);
     for (const controller of this.imageUploadControllers?.values?.() ?? []) controller.abort();
     this.imageUploadControllers?.clear?.();
-    void this.voiceConversation?.stop().catch(() => {});
-    this.voiceUnsub?.();
+    void this.voicePanel?.dispose().catch(() => {});
+    this.voicePanelUnsub?.();
+    this.voiceHistoryUnsub?.();
     this.conversationUnsub?.();
     this.intakeUnsub?.();
     if (this.sessionId) this.intake?.cancelSession(this.sessionId);
@@ -643,7 +672,7 @@ export default {
         this.commandsError = "";
       }
       if (sessionChanged && snap.sessionId !== this.voiceAdoptingSession) {
-        void this.voiceConversation?.stop().catch(() => {});
+        void this.voicePanel?.pause().catch(() => {});
         this.reader.stop();
         this.player?.stop();
       }
@@ -953,7 +982,7 @@ export default {
       this.unsub = this.runtime.subscribe((snap) => this.applySnap(snap));
     },
     switchHost() {
-      void this.voiceConversation?.stop().catch(() => {});
+      void this.voicePanel?.end().catch(() => {});
       for (const controller of this.imageUploadControllers.values()) controller.abort();
       this.imageUploadControllers.clear();
       this.releaseDraftImages();
@@ -1189,26 +1218,20 @@ export default {
       this.draftImages = [];
       this.imagesBySession = {};
     },
-    async onHoldStart({ mode: selectedMode } = {}) {
-      this.voiceReleased = false;
-      if (this.voiceCall?.connection === "open") {
-        await this.voiceConversation.stop(); return;
-      }
-      const target = this.sessionId;
-      this.voicePhase = "preparing"; this.voiceElapsed = 0;
-      try {
-        const settings = await this.runtime.settings.voice(true);
-        if (this.sessionId !== target) return;
-        const continuous = (selectedMode || settings.config.mobileMode || "continuous") === "continuous";
-        if (settings.config.backend === "realtime" && continuous) {
-          const conversation = createRealtimeConversation({ readAloud: settings.config.speak, idleTimeoutMs: settings.config.idleTimeoutMs, recoveryTimeoutMs: settings.config.recoveryTimeoutMs,
-            request: (path, options) => this.runtime.voiceRequest(path, options), socket: (ticket) => this.runtime.voiceSocket(ticket),
-            device: captureSource("mobile", settings.config.device), playback: this.player,
-            onCaption: (text) => { this.voiceCaption = `${this.voiceCaption}${text}`.slice(-300); },
-          });
-          await this.attachVoiceConversation(conversation, target, true);
-          return;
-        }
+    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,
+      });
         this.reader.stop(); this.player?.stop(); this.player?.unlock();
         let conversation;
         const reader = createSentencePlayer({
@@ -1223,56 +1246,24 @@ export default {
           transcribe: (blob, signal) => this.runtime.transcribe(blob, this.voiceLanguage, signal),
           device: captureSource("mobile", settings.config.device),
           readAloud: continuous && settings.config.speak,
-          preset: settings.config.preset, endpointSilenceMs: settings.config.endpointSilenceMs, idleTimeoutMs: settings.config.idleTimeoutMs, recoveryTimeoutMs: settings.config.recoveryTimeoutMs,
-          onText: (text) => { this.voiceCaption = text; if (this.voiceCall) this.voiceCall = { ...this.voiceCall, caption: text }; },
-          onTranscript: continuous && settings.config.preset !== "dictation" ? null : ({ text }) => {
-            if (this.sessionId !== target) return;
-            this.draft = [this.draft, text].filter(Boolean).join(" ");
-            this.draftBySession = { ...this.draftBySession, [target || "@pending"]: this.draft };
-          },
+          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); },
         });
-        await this.attachVoiceConversation(conversation, target, continuous);
-      } catch (error) { this.voicePhase = "error"; this.voiceError = error.message; }
-    },
-    async attachVoiceConversation(conversation, target, continuous) {
-      this.voiceCaption = ""; this.voiceHistory = null;
-      this.voiceConversation = conversation;
-      this.voiceUnsub?.();
-      this.voiceUnsub = conversation.controller.subscribe(() => {
-        const state = conversation.controller.getSnapshot();
-        if (state.connection === "open" && !target && !this.sessionId && !this.voiceAdoptingSession && state.sessionId) {
-          this.voiceAdoptingSession = state.sessionId;
-          void Promise.resolve(this.runtime.openSession(state.sessionId)).catch((error) => { this.voiceError = error.message; this.voiceAdoptingSession = null; });
-        }
-        this.voiceCall = state.connection === "closed" ? null : { ...state, caption: this.voiceCaption, history: this.voiceHistory };
-        this.voicePhase = state.error ? "error" : state.capture;
-        this.voiceError = state.error || "";
-      });
-      await conversation.start({ sessionId: target || null, continuous });
-      if (this.voiceReleased && !continuous) conversation.controller.stopRecording();
-    },
-    onHoldEnd() {
-      this.voiceReleased = true;
-      if (!this.voiceConversation?.controller.getSnapshot().continuous) this.voiceConversation?.controller.stopRecording();
+      return conversation;
     },
-    async voiceAction(action) {
-      try {
-        if (action === "mute") await this.voiceConversation?.setReadAloud(this.voiceCall.outputMuted);
-        if (action === "history") {
-          this.voiceHistory = (await this.voiceConversation?.records()).records;
-          if (this.voiceCall) this.voiceCall = { ...this.voiceCall, history: this.voiceHistory };
-        }
-        if (action === "clear-history") { await this.voiceConversation?.clearRecords(); this.voiceHistory = null; }
-        if (action === "input-pause") await this.voiceConversation?.controller.pauseInput();
-        if (action === "input-resume") this.voiceConversation?.controller.resumeInput();
-        if (action === "stop") await this.voiceConversation?.stop();
-        if (action === "playback") await this.voiceConversation?.controller.stopPlayback();
-        if (action === "cancel") await this.voiceConversation?.controller.cancelTask();
-        if (action === "resume") await this.voiceConversation?.resume();
-      } catch (error) { this.voiceError = error.message; }
+    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; },
+      });
     },
     showSpeakProblem(err) {
       this.speakNotice = speakProblemText(this.t, err);

package/src/chat/Composer.vue

@@ -82,10 +82,6 @@
           </button>
         </figure>
       </div>
-      <select v-if="inputMode === 'voice' && !voiceCall" :value="voiceSelection || voiceDefaultMode" @change="voiceSelection = $event.target.value" class="lares-composer__voice-mode" :aria-label="t('settings.mode')">
-        <option value="single">{{ t('settings.mode.single') }}</option>
-        <option value="continuous">{{ t('settings.mode.continuous') }}</option>
-      </select>
       <div class="lares-composer__line" :data-expanded="expanded ? 'true' : 'false'">
         <button
           type="button"
@@ -100,7 +96,7 @@
           </svg>
         </button>
         <textarea
-          v-show="inputMode === 'text'"
+
           ref="input"
           :value="draft"
           class="lares-composer__input"
@@ -114,24 +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"
-          @click="onVoiceClick"
-          @contextmenu.prevent
-        >
-          <span v-if="voicePhase === 'preparing' || voicePhase === 'transcribing'" class="lares-composer__talk-status">
-            <svg class="lares-composer__spin" viewBox="0 0 16 16" aria-hidden="true">
-              <circle cx="8" cy="8" r="6" />
-            </svg>
-            <span>{{ talkLabel }}</span>
-          </span>
-          <span v-else>{{ talkLabel }}</span>
-        </button>
         <div class="lares-composer__tools">
           <input
             ref="picker"
@@ -141,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" />
@@ -167,43 +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>
-    <div v-if="voiceCall" class="lares-composer__hint" role="status" aria-live="polite">
-      <button v-if="voiceCall.continuous" type="button" @click="$emit('voice-action', 'mute')">{{ t(voiceCall.outputMuted ? 'call.unmute' : 'call.mute') }}</button>
-      <button v-if="voiceCall.continuous" type="button" @click="$emit('voice-action', 'history')">{{ t('call.history') }}</button>
-      <details v-if="voiceCall.history" open>
-        <summary>{{ t('call.history') }}</summary>
-        <p v-for="row in voiceCall.history" :key="row.id">{{ row.role }}: {{ row.text }}</p>
-        <button type="button" @click="$emit('voice-action', 'clear-history')">{{ t('call.clearHistory') }}</button>
-      </details>
-      <svg v-if="voiceCall.capture === 'recording' && voiceCall.inputLevel != null" width="80" height="24" aria-hidden="true">
-        <line v-for="(level, index) in levels" :key="index" :x1="index * 5" :x2="index * 5" :y1="12 - Math.min(11, level * 800)" :y2="12 + Math.min(11, level * 800)" stroke="currentColor" stroke-width="2" />
-      </svg>
-      <span v-if="voiceCall.caption">{{ voiceCall.caption }}</span>
-      <span>{{ voiceCall.capture === 'transcribing' ? t('mic.transcribing') : voiceCall.capture === 'recording' ? t('call.listening') : voiceCall.inputPaused ? t('call.inputPaused') : voiceCall.playback !== 'idle' ? t('call.halfDuplex') : t('call.waiting') }}</span>
-      <span v-if="voiceCall.playback !== 'idle'">{{ t('call.speaking') }}</span>
-      <button v-if="!voiceCall.continuous && voiceCall.capture === 'recording'" type="button" @click="$emit('hold-end')">{{ t('mic.finish') }}</button>
-      <button v-if="voiceCall.continuous && voiceCall.connection === 'open'" type="button" @click="$emit('voice-action', voiceCall.inputPaused ? 'input-resume' : 'input-pause')">{{ t(voiceCall.inputPaused ? 'call.resumeInput' : 'call.pauseInput') }}</button>
-      <button type="button" @click="$emit('voice-action', voiceCall.connection === 'paused' ? 'resume' : 'stop')">{{ t(voiceCall.connection === 'paused' ? 'call.resume' : voiceCall.continuous ? 'call.end' : 'mic.cancel') }}</button>
-      <button v-if="voiceCall.playback !== 'idle'" type="button" @click="$emit('voice-action', 'playback')">{{ t('call.stopPlayback') }}</button>
-    </div>
-    <p v-if="voiceError && voicePhase === 'error'" class="lares-composer__hint" data-status="error">{{ voiceError }}</p>
+    <p v-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>
@@ -211,7 +157,6 @@
 </template>
 
 <script>
-import { formatElapsed } from "@olares/lares-core/voice/recorder";
 import {
   REFERENCE_DEBOUNCE_MS,
   activeReference,
@@ -256,8 +201,6 @@ export default {
       commandsOpen: false,
       commandTyped: false,
       commandIndex: 0,
-      levels: [],
-      voiceSelection: "",
       referenceOpen: false,
       referenceToken: null,
       referenceIndex: 0,
@@ -265,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("call.listening")} · ${this.elapsed}`;
-      if (this.voicePhase === "transcribing") return this.t("mic.transcribing");
-      if (this.holding) return this.t("composer.hold");
-      return this.t("call.start");
-    },
-    voiceBusy() {
-      return this.voicePhase === "preparing"
-        || this.voicePhase === "recording"
-        || this.voicePhase === "transcribing";
-    },
     attachLabel() {
       return this.attachPending ? this.t("button.uploading", { count: 1 }) : this.t("composer.attach");
     },
@@ -287,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("call.listening");
-      if (this.voicePhase === "transcribing") return this.t("mic.transcribing");
-      return this.t("call.start");
-    },
-    voiceBlocked() {
-      return this.voicePhase === "transcribing" || this.sending;
-    },
     expanded() {
       return this.inputMode === "text" && (this.draft.trim().length > 0 || this.draftImages.length > 0);
     },
@@ -311,10 +229,8 @@ export default {
     },
   },
   watch: {
-    "voiceCall.inputLevel"(level) { if (level != null) this.levels = [...this.levels.slice(-15), level]; },
     draft(value) {
       this.autosize();
-      if (value && this.inputMode === "voice" && !this.voiceBusy) this.setMode("text");
     },
     overlayPointerActive(active) {
       if (active) window.addEventListener("pointerdown", this.onTokenPointer, true);
@@ -410,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");
@@ -475,8 +379,7 @@ export default {
       }
     },
     onVoiceClick() {
-      if (this.voiceBusy) return;
-      this.$emit("hold-start", { mode: this.voiceSelection || undefined });
+      this.$emit("hold-start", { mode: "continuous" });
     },
     clearHold() {
       this.holding = false;
@@ -507,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;
@@ -904,6 +810,9 @@ 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>