@jskit-ai/assistant-voice 0.1.2 → 0.1.4

package/examples/conversation/App.vue

@@ -2,12 +2,15 @@
 import { inject, nextTick, onScopeDispose, ref } from "vue";
 import { createVoiceConversationController, projectConversationVoiceState, VoiceConversationHost } from "@jskit-ai/assistant-voice/client";
 import { ShellErrorHost } from "@jskit-ai/shell-web/client";
+import { useAssistantConversationFactory } from "@jskit-ai/assistant-runtime/client";
 import Conversation from "./Conversation.vue";
 
 const example = inject("example.application");
 const closed = ref([]);
 const views = new Map();
 const error = ref("");
+const avatarSize = ref("compact");
+const acquireConversation = useAssistantConversationFactory();
 const controller = createVoiceConversationController({ connectSpeech: binding => binding.socketUrl });
 async function openText(id) {
   closed.value = closed.value.filter(value => value !== id);
@@ -18,12 +21,22 @@ function voiceBinding(runtime, label) {
   const identity = runtime.identity;
   let retained;
   return {
-    id: JSON.stringify([identity.actorKey, identity.conversationId]), label,
+    id: JSON.stringify([identity.actorKey, identity.conversationId]), conversationId: identity.conversationId, label,
+    get adapter() { return retained?.adapter.value; },
     socketUrl: `/api/conversations/${encodeURIComponent(identity.conversationId)}/voice`,
     get state() { return projectConversationVoiceState({ turns: runtime.turns.value, status: runtime.snapshot.value?.status }); },
     get available() { return runtime.available.value; },
     captureContext: () => ({ ...identity }),
-    retain() { retained = runtime.retain(); runtime = retained.runtime; },
+    retain() {
+      retained = acquireConversation({ conversationId: identity.conversationId, endpoint: identity.endpoint,
+        surfaceId: identity.targetSurfaceId, hostSurfaceId: identity.hostSurfaceId,
+        actorKey: identity.actorKey, workspaceSlug: identity.workspaceSlug,
+        presentation: { assistantLabel: label, layout: "compact" } });
+      if (retained.runtime.value !== runtime) {
+        retained.release(); retained = null;
+        throw new Error("Voice must retain the original conversation runtime.");
+      }
+    },
     release() { retained?.release(); retained = null; },
     submitText(text, { messageId, context } = {}) {
       if (context?.actorKey !== identity.actorKey || context?.conversationId !== identity.conversationId) {
@@ -78,7 +91,7 @@ onScopeDispose(() => { void controller.dispose(); });
         </section>
       </div>
     </main>
-    <VoiceConversationHost :controller="controller" />
+    <VoiceConversationHost v-model:avatar-size="avatarSize" :controller="controller" />
     <ShellErrorHost />
   </v-app>
 </template>

package/examples/conversation/package.json

@@ -9,14 +9,14 @@
   },
   "dependencies": {
     "@fastify/websocket": "^11.2.0",
-    "@jskit-ai/assistant-core": "0.1.202",
-    "@jskit-ai/assistant-runtime": "0.1.195",
-    "@jskit-ai/assistant-voice": "0.1.2",
-    "@jskit-ai/connectors-catalog": "0.1.41",
-    "@jskit-ai/http-runtime": "0.1.222",
-    "@jskit-ai/kernel": "0.1.224",
-    "@jskit-ai/realtime": "0.1.221",
-    "@jskit-ai/shell-web": "0.1.228",
+    "@jskit-ai/assistant-core": "0.1.204",
+    "@jskit-ai/assistant-runtime": "0.1.197",
+    "@jskit-ai/assistant-voice": "0.1.4",
+    "@jskit-ai/connectors-catalog": "0.1.43",
+    "@jskit-ai/http-runtime": "0.1.224",
+    "@jskit-ai/kernel": "0.1.226",
+    "@jskit-ai/realtime": "0.1.223",
+    "@jskit-ai/shell-web": "0.1.230",
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-query": "^5.90.5",
     "fastify": "^5.8.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-voice",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "description": "Duplex voice conversations with application-owned targets, authorization and speech services.",
   "scripts": {
@@ -18,6 +18,7 @@
     "examples"
   ],
   "dependencies": {
+    "@jskit-ai/assistant-core": "0.1.204",
     "@mdi/js": "^7.4.47",
     "ws": "^8.20.1"
   },

package/src/client/VoiceConversation.vue

@@ -1,28 +1,23 @@
 <script setup>
-import { computed, ref, useId, watch } from "vue";
-import { mdiMicrophone, mdiMicrophoneOff, mdiStop, mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
+import { computed, ref, watch } from "vue";
+import { AssistantConversationElement } from "@jskit-ai/assistant-core/client/conversation";
 import VoiceAvatar from "./VoiceAvatar.vue";
-import { useVoiceLauncher } from "./voiceLauncher.js";
+import VoiceConversationControls from "./VoiceConversationControls.vue";
 
-const props = defineProps({ session: { type: Object, required: true }, disabled: { type: Boolean, default: false } });
-const {
-  targetLabel, voice, error, microphoneMuted, live, starting, callMode,
-  callStatus, callAudioLevel, avatarVisual, speechActive, heldTranscript,
-  capturing, pendingTranscript, voiceWords, voiceAnswer, pushHolding, sending,
-  stopSpeech, startPushToTalk, finishPushToTalk, cancelPushToTalk, toggleHandsFree, readAloud, toggleReadAloud,
-  deliverTranscript, discardHeldRecording, editTranscript
-} = props.session;
-const handsFreeListening = computed(() => live.value && callMode.value === "hands-free" && !microphoneMuted.value);
-const canTalk = computed(() => !props.disabled && !sending.value && !pendingTranscript.value &&
-  (!capturing.value || voice.listening.value || pushHolding.value || starting.value));
-const talkLabel = computed(() => starting.value ? "Connecting…" : pushHolding.value ? "Release to send" : handsFreeListening.value ? "Pause" : "Talk");
-const gestureHint = useId();
-const gesture = useVoiceLauncher({
-  enabled: canTalk,
-  open: () => ({ startHeldRecording: startPushToTalk, finishHeldRecording: finishPushToTalk, discardHeldRecording: cancelPushToTalk }),
-  onTap: toggleHandsFree,
-  onError: cause => { error.value = cause.message; }
+const props = defineProps({
+  session: { type: Object, required: true }, disabled: { type: Boolean, default: false },
+  adapter: { type: Object, default: null },
+  showAvatar: { type: Boolean, default: true },
+  avatarSize: { type: String, default: "compact" }
 });
+defineEmits(["update:avatarSize"]);
+const { targetLabel, voice, microphoneMuted, heldTranscript, pendingTranscript, sending,
+  avatarVisual, callAudioLevel, voiceWords, voiceAnswer } = props.session;
+const presentationAdapter = computed(() => props.adapter && ({
+  ...props.adapter,
+  composer: { ...props.adapter.composer, canSend: props.adapter.composer?.canSend && !props.session.hasUnsentSpeech.value }
+}));
+const toolsTarget = ref(null);
 const voiceWordsTarget = ref(null);
 const voiceAnswerTarget = ref(null);
 const followWords = ref(true);
@@ -36,18 +31,30 @@ for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWo
 </script>
 
 <template>
-  <fieldset class="assistant-voice" :disabled="disabled">
-    <p v-if="error || voice.error.value" class="assistant-voice__error" role="alert">{{ error || voice.error.value }}</p>
-    <section class="assistant-voice__call" :aria-label="`${targetLabel} voice chat controls`">
-      <div class="assistant-voice__call-body">
+  <fieldset v-if="adapter" class="assistant-voice-conversation" :disabled="disabled">
+    <AssistantConversationElement :adapter="presentationAdapter" :avatar-size="avatarSize" @update:avatar-size="$emit('update:avatarSize', $event)">
+      <template v-if="showAvatar" #avatar="size">
+        <slot name="avatar" v-bind="avatarVisual" :size="size.size" :height="size.height">
+          <VoiceAvatar v-bind="avatarVisual" />
+        </slot>
+      </template>
+      <template #composer-tools><div ref="toolsTarget" class="assistant-voice-conversation__tools" /></template>
+      <template #composer-feedback>
+        <VoiceConversationControls :session="session" :disabled="disabled" compact :tools-target="toolsTarget">
+          <template #work-control><slot name="work-control" /></template>
+        </VoiceConversationControls>
+      </template>
+    </AssistantConversationElement>
+  </fieldset>
+  <fieldset v-else class="assistant-voice" :disabled="disabled">
+    <section
+      class="assistant-voice__call" :class="{ 'assistant-voice__call--without-avatar': !showAvatar }"
+      :aria-label="`${targetLabel} voice chat controls`"
+    >
+      <div v-if="showAvatar" class="assistant-voice__call-body">
         <div class="assistant-voice__call-portrait" :style="{ '--call-audio-scale': 1 + callAudioLevel * .16 }" aria-hidden="true">
           <slot name="avatar" v-bind="avatarVisual"><VoiceAvatar v-bind="avatarVisual" /></slot>
         </div>
-        <div class="assistant-voice__call-status-row">
-          <p class="text-title-medium" role="status">{{ callStatus }}</p>
-          <v-btn v-if="speechActive" :icon="mdiStop" variant="text" min-width="48" min-height="48" :aria-label="`Stop ${targetLabel} speaking`" title="Stop speaking" @click="stopSpeech" />
-          <slot name="work-control" />
-        </div>
       </div>
       <div class="assistant-voice__captions" aria-label="Voice conversation text">
         <section ref="voiceWordsTarget" class="assistant-voice__caption" aria-label="Recognized words" tabindex="0" @scroll="followWords = isAtBottom($event.currentTarget)">
@@ -59,59 +66,29 @@ for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWo
           <p class="assistant-voice__caption-text text-body-medium">{{ voiceAnswer }}</p>
         </section>
       </div>
-      <section v-if="pendingTranscript && (pendingTranscript.reviewBeforeSend || !sending)" class="assistant-voice__review" aria-label="Review voice message">
-        <v-textarea :model-value="pendingTranscript.text" label="Review your message" :disabled="sending" rows="2" max-rows="3" auto-grow hide-details @update:model-value="editTranscript" />
-        <div class="assistant-voice__review-actions">
-          <v-btn :disabled="sending" min-height="48" @click="discardHeldRecording">Discard</v-btn>
-          <v-btn :disabled="sending || !pendingTranscript.text.trim()" min-height="48" color="primary" @click="deliverTranscript">{{ sending ? 'Sending…' : 'Send' }}</v-btn>
-        </div>
-      </section>
-      <div class="assistant-voice__talk-action">
-        <v-btn
-          class="assistant-voice__talk" color="primary" :variant="handsFreeListening ? 'tonal' : 'flat'" min-height="64" rounded="xl"
-          :prepend-icon="voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff" :aria-pressed="handsFreeListening || pushHolding" :aria-describedby="gestureHint"
-          :disabled="!canTalk"
-          @pointerdown="gesture.pointerDown" @pointerup="gesture.pointerUp" @pointercancel="gesture.cancel" @lostpointercapture="gesture.cancel"
-          @keydown.space.prevent="gesture.keyDown" @keyup.space.prevent="gesture.keyUp"
-          @keydown.enter.prevent="gesture.keyDown" @keyup.enter.prevent="gesture.keyUp" @blur="gesture.cancel" @contextmenu.prevent @click="gesture.click"
-        >
-          {{ talkLabel }}
-        </v-btn>
-        <v-btn
-          :icon="readAloud ? mdiVolumeHigh : mdiVolumeOff" :aria-pressed="readAloud" variant="tonal" min-height="64" min-width="64" rounded="xl"
-          :aria-label="readAloud ? `Turn ${targetLabel} read-aloud off` : `Read ${targetLabel} answers aloud`"
-          :title="readAloud ? 'Spoken replies on' : 'Spoken replies off'" @click="toggleReadAloud"
-        />
-        <p :id="gestureHint" class="text-body-small text-medium-emphasis">{{ handsFreeListening ? 'Tap to pause · hold to speak' : 'Tap for hands-free · hold to speak' }}</p>
-      </div>
+      <VoiceConversationControls :session="session" :disabled="disabled"><template #work-control><slot name="work-control" /></template></VoiceConversationControls>
     </section>
   </fieldset>
 </template>
 
 <style scoped>
+.assistant-voice-conversation { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; height: 100%; border: 0; padding: 0; margin: 0; }
+.assistant-voice-conversation__tools { display: flex; flex-wrap: wrap; gap: 4px; }
 .assistant-voice { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border: 0; padding: 0; margin: 0; min-width: 0; }
 .assistant-voice__call { width: 100%; flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) minmax(144px, 30%) auto; }
+.assistant-voice__call--without-avatar { grid-template-rows: minmax(144px, 1fr) auto; }
 .assistant-voice__call-body { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 16px 0; text-align: center; }
 .assistant-voice__call-portrait { position: relative; height: min(240px, calc(100% - 64px)); aspect-ratio: 1; max-width: 100%; margin: 8px auto; isolation: isolate; }
 .assistant-voice__call-portrait::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: rgba(var(--v-theme-primary), .12); transform: scale(var(--call-audio-scale)); transition: transform 80ms linear; z-index: -1; }
 .assistant-voice__call-portrait :deep(svg) { width: 100%; height: 100%; }
-.assistant-voice__call-status-row { display: flex; flex: 0 0 48px; justify-content: center; align-items: center; gap: 8px; height: 48px; }
-.assistant-voice__call-status-row p { margin: 0; max-height: 48px; overflow: hidden; }
 .assistant-voice__captions { min-height: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px; }
 .assistant-voice__caption { min-height: 0; padding: 8px 12px; border-radius: 12px; background: rgba(var(--v-theme-on-surface), .04); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: pan-y; }
 .assistant-voice__caption > strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .assistant-voice__caption-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
-.assistant-voice__talk-action { justify-self: center; width: min(288px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 8px; padding: 16px; }
-.assistant-voice__talk { touch-action: none; user-select: none; -webkit-touch-callout: none; }
-.assistant-voice__talk-action p { grid-column: 1 / -1; margin: 0; text-align: center; white-space: nowrap; }
-.assistant-voice__review { flex: 0 0 auto; max-height: 160px; overflow-y: auto; padding: 8px 16px; }
-.assistant-voice__review-actions { display: flex; justify-content: flex-end; gap: 8px; }
-.assistant-voice__error { padding: 8px 16px; color: rgb(var(--v-theme-error)); }
 @media (max-height: 650px) {
   .assistant-voice__call-body { padding-top: 0; }
   .assistant-voice__captions { gap: 4px; }
   .assistant-voice__caption { padding-block: 4px; }
-  .assistant-voice__talk-action { padding-top: 8px; }
 }
 @media (prefers-reduced-motion: reduce) { .assistant-voice__call-portrait::before { transition: none; transform: none; } }
 </style>

package/src/client/VoiceConversationControls.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { computed, useId } from "vue";
+import { mdiMicrophone, mdiMicrophoneOff, mdiStop, mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
+import { useVoiceLauncher } from "./voiceLauncher.js";
+
+const props = defineProps({
+  session: { type: Object, required: true },
+  disabled: { type: Boolean, default: false },
+  compact: { type: Boolean, default: false },
+  toolsTarget: { type: Object, default: null }
+});
+const {
+  targetLabel, voice, error, microphoneMuted, live, starting, callMode,
+  callStatus, speechActive, heldTranscript,
+  capturing, pendingTranscript, pushHolding, sending,
+  stopSpeech, startPushToTalk, finishPushToTalk, cancelPushToTalk, toggleHandsFree, readAloud, toggleReadAloud, enableSound,
+  deliverTranscript, discardHeldRecording, editTranscript
+} = props.session;
+const controlStatus = computed(() => {
+  if (!props.compact || !props.session.hasUnsentSpeech.value) return callStatus.value;
+  if (pendingTranscript.value) return "Send or discard speech to send text.";
+  return voice.listening.value ? "Recording · finish speech to send text." : "Finish speech to send text.";
+});
+const handsFreeListening = computed(() => live.value && callMode.value === "hands-free" && !microphoneMuted.value);
+const canTalk = computed(() => !props.disabled && !sending.value && !pendingTranscript.value &&
+  (!capturing.value || voice.listening.value || pushHolding.value || starting.value));
+const talkLabel = computed(() => starting.value ? "Connecting…" : pushHolding.value ? "Release to send" : handsFreeListening.value ? "Pause" : "Talk");
+const gestureHint = useId();
+const gesture = useVoiceLauncher({
+  enabled: canTalk,
+  open: () => ({ startHeldRecording: startPushToTalk, finishHeldRecording: finishPushToTalk, discardHeldRecording: cancelPushToTalk }),
+  onTap: toggleHandsFree,
+  onError: cause => { error.value = cause.message; }
+});
+</script>
+
+<template>
+  <fieldset class="assistant-voice-controls" :class="{ 'assistant-voice-controls--compact': compact }" :disabled="disabled">
+    <p v-if="error || voice.error.value" class="assistant-voice__error" role="alert">{{ error || voice.error.value }}</p>
+    <p v-if="controlStatus" class="assistant-voice-controls__status text-body-small" role="status" :title="callStatus">{{ controlStatus }}</p>
+    <p v-if="compact && heldTranscript && !pendingTranscript" class="assistant-voice-controls__provisional" role="status" aria-label="Recognized words">Not sent · {{ heldTranscript }}</p>
+    <p v-if="readAloud && voice.playbackBlocked?.value" class="assistant-voice-controls__status" role="status">Sound is blocked. Enable sound to hear future replies.</p>
+    <v-btn v-if="readAloud && voice.playbackBlocked?.value" min-height="48" @click="enableSound">Enable sound</v-btn>
+    <section v-if="pendingTranscript && (pendingTranscript.reviewBeforeSend || !sending)" class="assistant-voice__review" aria-label="Review voice message">
+      <v-textarea
+        :model-value="pendingTranscript.text" label="Review your message" :disabled="sending"
+        :density="compact ? 'compact' : 'default'" :rows="compact ? 1 : 2" :max-rows="compact ? 2 : 3"
+        auto-grow hide-details @update:model-value="editTranscript"
+      />
+      <div class="assistant-voice__review-actions">
+        <v-btn :disabled="sending" min-height="48" @click="discardHeldRecording">Discard</v-btn>
+        <v-btn :disabled="sending || !pendingTranscript.text.trim()" min-height="48" color="primary" @click="deliverTranscript">{{ sending ? 'Sending…' : 'Send' }}</v-btn>
+      </div>
+    </section>
+    <Teleport :to="toolsTarget" :disabled="!toolsTarget">
+      <fieldset class="assistant-voice-controls__tools" :class="{ 'assistant-voice-controls__tools--compact': compact }" :disabled="disabled" :aria-label="`${targetLabel} voice chat controls`">
+        <v-btn v-if="speechActive" :icon="mdiStop" variant="text" min-width="48" min-height="48" :aria-label="`Stop ${targetLabel} speaking`" title="Stop speaking" @click="stopSpeech" />
+        <slot name="work-control" />
+        <div class="assistant-voice__talk-action">
+          <v-btn
+            class="assistant-voice__talk" color="primary" :variant="handsFreeListening ? 'tonal' : 'flat'" :min-height="compact ? 48 : 64" rounded="xl"
+            :prepend-icon="voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff" :aria-pressed="handsFreeListening || pushHolding" :aria-describedby="gestureHint"
+            :disabled="!canTalk"
+            @pointerdown="gesture.pointerDown" @pointerup="gesture.pointerUp" @pointercancel="gesture.cancel" @lostpointercapture="gesture.cancel"
+            @keydown.space.prevent="gesture.keyDown" @keyup.space.prevent="gesture.keyUp"
+            @keydown.enter.prevent="gesture.keyDown" @keyup.enter.prevent="gesture.keyUp" @blur="gesture.cancel" @contextmenu.prevent @click="gesture.click"
+          >
+            {{ talkLabel }}
+          </v-btn>
+          <v-btn
+            :icon="readAloud ? mdiVolumeHigh : mdiVolumeOff" :aria-pressed="readAloud" variant="tonal" :min-height="compact ? 48 : 64" :min-width="compact ? 48 : 64" rounded="xl"
+            :aria-label="readAloud ? `Turn ${targetLabel} read-aloud off` : `Read ${targetLabel} answers aloud`"
+            :title="readAloud ? 'Spoken replies on' : 'Spoken replies off'" @click="toggleReadAloud"
+          />
+          <p :id="gestureHint" class="text-body-small text-medium-emphasis">{{ handsFreeListening ? 'Tap to pause · hold to speak' : 'Tap for hands-free · hold to speak' }}</p>
+        </div>
+      </fieldset>
+    </Teleport>
+  </fieldset>
+</template>
+
+<style scoped>
+.assistant-voice-controls, .assistant-voice-controls__tools { border: 0; padding: 0; margin: 0; min-width: 0; }
+.assistant-voice-controls { flex: 0 0 auto; }
+.assistant-voice-controls--compact { flex: 1 1 100%; width: 100%; }
+.assistant-voice-controls__tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
+.assistant-voice-controls__status { text-align: center; margin: 0; }
+.assistant-voice-controls__provisional { margin: 0; max-height: 3rem; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
+.assistant-voice__talk-action { width: min(288px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 8px; padding: 16px; }
+.assistant-voice__talk { touch-action: none; user-select: none; -webkit-touch-callout: none; }
+.assistant-voice__talk-action p { grid-column: 1 / -1; margin: 0; text-align: center; white-space: nowrap; }
+.assistant-voice__review { flex: 0 0 auto; max-height: 160px; overflow-y: auto; padding: 8px 16px; }
+.assistant-voice__review-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.assistant-voice__error { padding: 8px 16px; color: rgb(var(--v-theme-error)); }
+.assistant-voice-controls__tools--compact { justify-content: flex-start; gap: 4px; }
+.assistant-voice-controls__tools--compact .assistant-voice__talk-action { display: flex; padding: 0; width: auto; gap: 4px; }
+.assistant-voice-controls__tools--compact .assistant-voice__talk-action p { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.assistant-voice-controls--compact .assistant-voice__review { max-height: 128px; padding: 0; }
+.assistant-voice-controls--compact .assistant-voice__error { margin: 0; padding: 0; }
+@media (max-height: 650px) { .assistant-voice__talk-action { padding-top: 8px; } }
+</style>

package/src/client/VoiceConversationHost.vue

@@ -3,7 +3,8 @@ import { mdiCog, mdiHeadset, mdiStop } from "@mdi/js";
 import ConversationDialog from "./ConversationDialog.vue";
 import VoiceConversation from "./VoiceConversation.vue";
 
-const props = defineProps({ controller: { type: Object, required: true }, activator: { type: Object, default: null } });
+const props = defineProps({ controller: { type: Object, required: true }, activator: { type: Object, default: null }, avatarSize: { type: String, default: "compact" } });
+defineEmits(["update:avatarSize"]);
 const state = props.controller.state;
 async function invoke(operation) {
   try { await operation(); }
@@ -19,7 +20,9 @@ async function openText() {
 
 <template>
   <ConversationDialog
-    v-if="state.session" :model-value="state.visible" :activator="activator" :title="state.binding.label || 'Assistant'" mode="talk" :show-modes="Boolean(state.binding.openText)"
+    v-if="state.session" :model-value="state.visible" :activator="activator"
+    :title="state.binding.label || 'Assistant'" mode="talk"
+    :show-modes="Boolean(state.binding.openText && !state.binding.adapter)"
     minimizable close-label="Close voice chat" @minimize="controller.minimize()" @update:model-value="invoke(() => controller.end({ discard: true }))"
     @update:mode="value => value === 'text' && invoke(openText)"
   >
@@ -53,12 +56,18 @@ async function openText() {
       </div>
     </v-alert>
     <div class="voice-host__body">
-      <VoiceConversation :key="state.binding.id" :session="state.session" :disabled="state.busy">
-        <template v-if="$slots.avatar" #avatar="visual"><slot name="avatar" v-bind="visual" :binding="state.binding" /></template>
-        <template #work-control>
-          <v-btn v-if="state.binding.cancelWork && state.binding.state.status === 'working'" :disabled="state.busy" :icon="mdiStop" variant="text" aria-label="Stop agent work" title="Stop agent work" @click="invoke(state.binding.cancelWork)" />
-        </template>
-      </VoiceConversation>
+      <slot name="conversation" :binding="state.binding" :session="state.session" :disabled="state.busy">
+        <VoiceConversation
+          :key="state.binding.id" :session="state.session" :disabled="state.busy"
+          :adapter="state.binding.adapter || null" :show-avatar="state.binding.showAvatar !== false"
+          :avatar-size="avatarSize" @update:avatar-size="$emit('update:avatarSize', $event)"
+        >
+          <template v-if="$slots.avatar" #avatar="visual"><slot name="avatar" v-bind="visual" :binding="state.binding" /></template>
+          <template #work-control>
+            <v-btn v-if="state.binding.cancelWork && state.binding.state.status === 'working'" :disabled="state.busy" :icon="mdiStop" variant="text" aria-label="Stop agent work" title="Stop agent work" @click="invoke(state.binding.cancelWork)" />
+          </template>
+        </VoiceConversation>
+      </slot>
     </div>
   </ConversationDialog>
   <template v-if="state.session && !state.visible">

package/src/client/index.js

@@ -3,6 +3,7 @@ export { createVoiceConversationController } from "./voiceController.js";
 export { default as VoiceConversationHost } from "./VoiceConversationHost.vue";
 export { default as ConversationDialog } from "./ConversationDialog.vue";
 export { default as VoiceConversation } from "./VoiceConversation.vue";
+export { default as VoiceConversationControls } from "./VoiceConversationControls.vue";
 
 export { useVoiceLauncher } from "./voiceLauncher.js";
 export { useVoiceAvatar } from "./voiceAvatar.js";

package/src/client/voiceConversation.js

@@ -6,7 +6,10 @@ import { takeStreamingSpeech } from "../shared/protocol.js";
 export function useVoiceConversation(binding, { socketUrl, createTransport = useVoiceTransport } = {}) {
   const oneOffTalkMode = computed(() => binding.defaults?.talkMode === "hold" ? "hold" : "tap");
   const targetLabel = computed(() => binding.label || "Assistant");
-  const readAloud = ref(false);
+  const readAloud = ref(binding.defaults?.readAloud === true);
+  const soundPreparing = ref(false);
+  let soundRevision = 0;
+  const conversationId = binding.conversationId || binding.id;
   const error = ref("");
   const pendingTranscript = ref(null);
   const heldReview = ref(false);
@@ -27,7 +30,8 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     voiceId: binding.defaults?.voiceId || "",
     speechEnabled: readAloud,
     interruptSpeechOnListen: false,
-    autoReconnect: true
+    autoReconnect: true,
+    onPlayback: receivePlayback
   });
   watch([() => binding.defaults?.voiceId, voice.availableVoices], ([voiceId, voices]) => {
     if (voiceId === undefined) return;
@@ -106,12 +110,42 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
   let speechInvitation = "";
   let lastStreamingId = "";
 
-  function stopSpeech() {
-    for (const reply of speechQueue) reply.cancelled = true;
+  function observe(callback, value) {
+    try {
+      Promise.resolve(callback?.(value)).catch(() => {});
+    } catch {
+      // Observers cannot take ownership of scheduling or cleanup.
+    }
+  }
+  function emitReply(reply, phase, reason) {
+    if (reply.terminal || (phase === "started" && reply.audible)) return;
+    if (phase === "started") reply.audible = true;
+    else reply.terminal = true;
+    observe(binding.onPlayback, {
+      conversationId, outputId: reply.outputId, phase, ...(reason ? { reason } : {})
+    });
+  }
+  function receivePlayback(event) {
+    const reply = [...replies.values()].find(reply => reply.turnId === event.turnId);
+    if (!reply) return;
+    if (event.phase === "completed") {
+      reply.drained = true;
+      if (reply.canonicalFinal) emitReply(reply, "completed");
+    } else emitReply(reply, event.phase, event.reason);
+  }
+  function cancelReply(reply, reason = "cancelled", phase = "interrupted") {
+    reply.cancelled = true;
+    emitReply(reply, phase, reason);
+  }
+  function stopSpeech() { cancelSpeech(); }
+  function cancelSpeech(reason = "cancelled", phase = "interrupted") {
+    for (const reply of replies.values()) {
+      if (!reply.terminal) cancelReply(reply, reason, phase);
+    }
     speechQueue.length = 0;
     speechSuppressed = true;
     speechInvitation = "";
-    voice.stopSpeaking();
+    voice.stopSpeaking(reason);
   }
   function inviteSpeech(messageId) {
     // Only a new request from this page can lift silence. A delayed admission,
@@ -121,7 +155,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     speechInvitation = messageId;
   }
   async function drainSpeech() {
-    if (draining || disposed || !readAloud.value || speechSuppressed) return;
+    if (draining || disposed || !readAloud.value || speechSuppressed || soundPreparing.value || voice.playbackBlocked?.value) return;
     draining = true;
     try {
       while (speechQueue.length) {
@@ -133,15 +167,24 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
         const chunk = takeStreamingSpeech(reply.raw.slice(reply.consumed), reply.final, reply.started ? 140 : 64);
         if (!chunk) {
           if (reply.final && reply.started) voice.endSpeech();
-          else if (reply.final) { speechQueue.shift(); continue; }
+          else if (reply.final) {
+            cancelReply(reply, "no-audio");
+            speechQueue.shift();
+            continue;
+          }
           return;
         }
         reply.consumed += chunk.consumed;
         if (!chunk.text) continue;
         if (!reply.started) {
           reply.started = true;
-          await voice.speak(chunk.text, crypto.randomUUID(), { stream: true });
+          reply.turnId = crypto.randomUUID();
+          const accepted = await voice.speak(chunk.text, reply.turnId, { stream: true });
           if (reply.cancelled || disposed) return;
+          if (accepted === false) {
+            cancelReply(reply, "no-audio");
+            continue;
+          }
         } else if (!voice.appendSpeech(chunk.text)) return;
         if (reply.final && reply.consumed >= reply.raw.length) { voice.endSpeech(); return; }
       }
@@ -152,7 +195,10 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     let reply = replies.get(message.id);
     if (!reply) {
       if (!primed || !readAloud.value || speechSuppressed || seen.has(message.id) || (!final && message.autonomous)) return;
-      reply = { id: message.id, streamId: message.streamId, raw: "", consumed: 0, final: false, started: false };
+      reply = {
+        id: message.id, outputId: message.outputId || message.id, streamId: message.streamId,
+        raw: "", consumed: 0, final: false, canonicalFinal: false, started: false
+      };
       replies.set(message.id, reply);
       speechQueue.push(reply);
     }
@@ -162,25 +208,43 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     if (!text.startsWith(spokenPrefix) && !(final && text.trimEnd() === spokenPrefix.trimEnd())) {
       // A model revision cannot unsay words. Retire that projection; never splice
       // its old prefix onto a different answer or replay it as a second answer.
-      reply.cancelled = true;
+      cancelReply(reply);
       if (speechQueue[0] === reply) voice.stopSpeaking();
       return;
     }
     reply.consumed = Math.min(reply.consumed, text.length);
     reply.raw = text;
+    reply.canonicalFinal ||= final;
     reply.final = final || text.length >= 4000;
+    if (reply.canonicalFinal && reply.drained) emitReply(reply, "completed");
   }
-  async function enableSpeech() {
-    speechSuppressed = false;
-    speechInvitation = "";
-    await voice.preparePlayback();
-    readAloud.value = true;
+  async function enableSound() {
+    const revision = ++soundRevision;
+    soundPreparing.value = true;
+    try {
+      await voice.preparePlayback();
+    } catch {
+      // Requested sound stays on; its recovery control remains available.
+    } finally {
+      if (revision === soundRevision && !disposed) {
+        soundPreparing.value = false;
+        void drainSpeech();
+      }
+    }
   }
   async function toggleReadAloud() {
     error.value = "";
-    if (readAloud.value) { readAloud.value = false; stopSpeech(); return; }
-    try { await enableSpeech(); }
-    catch (cause) { error.value = cause.message; }
+    readAloud.value = !readAloud.value;
+    observe(binding.onReadAloudChange, readAloud.value);
+    if (!readAloud.value) {
+      ++soundRevision;
+      soundPreparing.value = false;
+      cancelSpeech("muted");
+      return;
+    }
+    speechSuppressed = false;
+    speechInvitation = "";
+    await enableSound();
   }
   async function deliverTranscript() {
     const pending = pendingTranscript.value;
@@ -232,10 +296,6 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     // Keep the starting target even if navigation changes during this utterance.
     const next = { focus: { ...(binding.captureContext?.() || {}) }, messageId: crypto.randomUUID(), started: false, reviewBeforeSend, continuous };
     recording = next;
-    if (!reviewBeforeSend && !live.value) {
-      readAloud.value = true;
-      void voice.preparePlayback().catch((cause) => { error.value = cause.message; });
-    }
     try {
       const started = await voice.startListening({ continuous });
       if (recording === next) { next.started = started; if (!started) recording = null; }
@@ -264,7 +324,6 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     pushHolding.value = true;
     callMode.value = "push-to-talk";
     voice.setMicrophoneMuted(false);
-    retireAnswer(true);
     if (!live.value) await toggleLive();
     if (!pushHolding.value || !live.value || disposed) return;
     // A hold can take over an open hands-free microphone without throwing away
@@ -318,9 +377,6 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       committing = null;
       clearTimeout(stopTimer);
       await cancelRecording();
-      stopSpeech();
-      readAloud.value = false;
-      void voice.close().catch(cause => { if (!live.value) error.value = cause.message; });
       return;
     }
     if (disposed || microphoneMuted.value || capturing.value || pendingTranscript.value || sending.value) return;
@@ -329,16 +385,14 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     starting.value = true;
     const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(10000)]);
     try {
-      // Unlock playback in the click gesture. Live capture uses the same model
-      // admission as typed chat and does not need a separate Helper connection.
-      await voice.preparePlayback();
+      // Unlock requested sound in the gesture without delaying microphone startup.
+      if (readAloud.value) void enableSound();
       signal.throwIfAborted();
       await voice.connect();
       signal.throwIfAborted();
       if (disposed) return;
       starting.value = false;
       live.value = true;
-      readAloud.value = true;
       if (callMode.value === "hands-free") {
         await startRecording(false, true);
         if (startupAbort === controller && !recording?.started) live.value = false;
@@ -352,12 +406,6 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       if (startupAbort === controller) { startupAbort = null; starting.value = false; }
     }
   }
-  function retireAnswer(smooth = false) {
-    for (const reply of speechQueue) reply.cancelled = true;
-    speechQueue.length = 0;
-    if (smooth) voice.finishCurrentPhrase();
-    else voice.stopSpeaking();
-  }
   function currentSpokenText() {
     const reply = speechQueue[0];
     return reply ? reply.raw.slice(0, reply.consumed).slice(-2000) : "";
@@ -394,8 +442,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       committing = { ...captured, turnId: candidate.turnId, revision: candidate.revision };
       if (!voice.finishUtterance(candidate)) { committing = null; return; }
       // The daemon rechecks the endpoint revision before returning final text.
-      // Continue the current phrase while the ordinary request steers the conversation.
-      retireAnswer(true);
+      // Ordinary steering leaves the current answer and queued audio intact.
     } catch (cause) {
       if (live.value && candidate === voice.endpoint.value) {
         live.value = false;
@@ -491,8 +538,8 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     }
     if (lastStreamingId && lastStreamingId !== reply?.id && !messages.some(message => message.id === lastStreamingId)) {
       const retired = replies.get(lastStreamingId);
-      if (retired && !retired.final && !retired.cancelled) {
-        retired.cancelled = true;
+      if (retired && !retired.canonicalFinal && !retired.cancelled) {
+        cancelReply(retired);
         if (speechQueue[0] === retired) voice.finishCurrentPhrase();
       }
     }
@@ -502,13 +549,14 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       if (!readAloud.value || !primed || reply.autonomous) seen.add(reply.id);
     }
     // Keep only the visible history plus active playback receipts in memory.
-    const retained = new Set([...messages.map((message) => message.id), reply?.id, ...speechQueue.map((item) => item.id)]);
+    const retained = new Set([...messages.map((message) => message.id), reply?.id, ...speechQueue.map((item) => item.id),
+      ...[...replies.values()].filter(item => !item.terminal).map(item => item.id)]);
     for (const id of seen) if (!retained.has(id)) seen.delete(id);
     for (const id of replies.keys()) if (!retained.has(id)) replies.delete(id);
     primed = true;
     void drainSpeech();
   }, { immediate: true });
-  watch(voice.error, (message) => { if (message) stopSpeech(); });
+  watch(voice.error, (message) => { if (message) cancelSpeech("playback-error", "failed"); });
   watch(() => error.value || voice.error.value, (message) => { if (message) binding.onError?.(message); });
   watch([voice.activeSpeechTurnId, voice.canAppendSpeech], () => { void drainSpeech(); });
   watch([pendingTranscript, voice.captureState, voice.partialTranscript], () => {
@@ -527,6 +575,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     page.removeEventListener?.("pagehide", cancelStartup);
     page.removeEventListener?.("blur", cancelPushToTalk);
     startupAbort?.abort(); startupAbort = null;
+    stopSpeech();
     binding.onTranscript?.(null); binding.onVisual?.(null); disposed = true; live.value = false; clearTimeout(stopTimer); recording = null; speechQueue.length = 0;
   });
 
@@ -549,7 +598,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     live, starting, callMode, changingCallMode, pushHolding, microphoneMuted, capturing,
     speechActive, talkLabel, liveLabel, callConnection, callStatus, callDetail, callModeBusy,
     microphoneStatus, avatarVisual, callAudioLevel, status, heldTranscript, voiceWords, voiceAnswer,
-    stopSpeech, inviteSpeech, toggleReadAloud, deliverTranscript, cancelRecording,
+    stopSpeech, inviteSpeech, toggleReadAloud, enableSound, soundPreparing, deliverTranscript, cancelRecording,
     discardRecording, dismissTranscript, talk, toggleMicrophoneMuted, changeCallMode,
     startPushToTalk, finishPushToTalk, cancelPushToTalk, toggleLive, toggleHandsFree, startHeldRecording,
     finishHeldRecording, discardHeldRecording, close, editTranscript, hasUnsentSpeech

package/src/client/voiceTransport.js

@@ -29,13 +29,14 @@ function resolveWebSocketUrl(value) {
   return url.toString();
 }
 
-function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnListen = false, autoReconnect = false, voiceId = "" } = {}) {
+function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnListen = false, autoReconnect = false, voiceId = "", onPlayback } = {}) {
   const availableVoices = ref([]);
   const selectedVoice = ref(voiceId);
   const connectionState = ref("idle");
   const captureState = ref("idle");
   const speechState = ref("idle");
   const error = ref("");
+  const playbackBlocked = ref(false);
   const transcript = ref("");
   const endpoint = ref(null);
   const completedUtterance = ref(null);
@@ -71,8 +72,10 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
   let playbackGain = null;
   let playbackAnalyser = null;
   let playbackFrame = 0;
+  let playbackPreparation = 0;
   let nextPlaybackTime = 0;
   let playbackEpoch = 0;
+  let playbackReceipt = null;
   let playbackQueue = Promise.resolve();
   let queuedPlaybackFrames = 0;
   let speechStreamEnded = false;
@@ -102,12 +105,31 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
   const canAppendSpeech = computed(() => Boolean(activeSpeechTurnId.value) && !speechInputEnded.value &&
     synthesisPending.value < 2 && bufferedSeconds.value < 4);
 
-  function setError(message = "") {
+  function emitPlayback(phase, reason) {
+    const receipt = playbackReceipt;
+    if (!receipt || receipt.terminal || (phase === "started" && receipt.started)) return;
+    if (phase === "started") receipt.started = true;
+    else receipt.terminal = true;
+    try {
+      Promise.resolve(onPlayback?.({
+        turnId: receipt.turnId, phase, ...(reason ? { reason } : {})
+      })).catch(() => {});
+    } catch {
+      // Observers cannot take ownership of playback or cleanup.
+    }
+  }
+
+  function observePlaybackStart(source) {
+    if (!source.voiceCancelled && playbackContext.state === "running" &&
+      playbackContext.currentTime >= source.voiceStartsAt) emitPlayback("started");
+  }
+
+  function setError(message = "", reason = "playback-error") {
     pendingListenTurnId = "";
     endpoint.value = null;
     activeListenTurnId.value = "";
     void closeMicrophone().catch(() => null);
-    stopPlayback();
+    stopPlayback("failed", reason);
     error.value = String(message || "Voice could not continue.");
     captureState.value = "idle";
     connectionState.value = "idle";
@@ -129,7 +151,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
       ? "Voice connection was interrupted. Your unfinished recording needs review; use Talk to resume."
       : "Voice connection was interrupted. The answer remains in chat; use Talk to resume.";
     const wasActive = Boolean(activeListenTurnId.value || pendingListenTurnId || activeSpeechTurnId.value || reconnecting.value);
-    setError(message);
+    setError(message, "disconnected");
     disconnect({ preserveError: true });
     recoveryWanted = autoReconnect && wasActive;
     scheduleRecovery();
@@ -190,6 +212,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
       return total / Math.max(1, end - start);
     };
     const update = () => {
+      for (const source of playbackSources) observePlaybackStart(source);
       bufferedSeconds.value = Math.max(0, nextPlaybackTime - playbackContext.currentTime);
       playbackAnalyser.getFloatTimeDomainData(samples);
       playbackAnalyser.getByteFrequencyData(spectrum);
@@ -235,6 +258,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
   async function preparePlayback() {
     const AudioContextCtor = window.AudioContext || window.webkitAudioContext;
     if (!AudioContextCtor) {
+      playbackBlocked.value = true;
       throw new Error("This browser does not support streamed audio playback.");
     }
     if (!playbackContext || playbackContext.state === "closed") {
@@ -247,13 +271,29 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
       playbackAnalyser.connect(playbackContext.destination);
     }
     playbackGain.gain.value = speechOutputEnabled.value ? 1 : 0;
-    await playbackContext.resume();
+    const context = playbackContext;
+    const preparation = ++playbackPreparation;
+    try {
+      const resumed = context.resume();
+      if (preparation === playbackPreparation && context.state !== "running") playbackBlocked.value = true;
+      await resumed;
+      if (context.state !== "running") throw new Error("Sound is blocked by this browser.");
+      if (preparation === playbackPreparation && !unmounted) playbackBlocked.value = false;
+    } catch (cause) {
+      // A newer unlock of this same context supersedes an older resume failure.
+      if (preparation !== playbackPreparation && context === playbackContext &&
+        context.state === "running" && !unmounted) return;
+      if (preparation === playbackPreparation && !unmounted) playbackBlocked.value = true;
+      throw cause;
+    }
   }
 
   function finishPlaybackWhenDrained() {
     if (!activeSpeechTurnId.value || !speechStreamEnded || playbackSources.size || queuedPlaybackFrames) {
       return;
     }
+    if (playbackReceipt?.started) emitPlayback("completed");
+    else emitPlayback("failed", "playback-error");
     activeSpeechTurnId.value = "";
     speechState.value = "idle";
     if (speechOwner.value === speechClaim) speechOwner.value = null;
@@ -312,6 +352,8 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
     source.onended = () => {
       source.disconnect();
       if (epoch !== playbackEpoch) return;
+      // A natural end also observes very short sounds between animation frames.
+      if (!source.voiceCancelled && playbackContext.state === "running") emitPlayback("started");
       playbackSources.delete(source);
       bufferedSeconds.value = playbackSources.size ? Math.max(0, nextPlaybackTime - playbackContext.currentTime) : 0;
       if (!playbackSources.size) speechState.value = "thinking";
@@ -337,7 +379,8 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
       });
   }
 
-  function stopPlayback() {
+  function stopPlayback(phase = "interrupted", reason = "cancelled") {
+    emitPlayback(phase, reason);
     playbackEpoch += 1;
     activeSpeechTurnId.value = "";
     speechState.value = "idle";
@@ -347,6 +390,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
     queuedPlaybackFrames = 0;
     for (const source of playbackSources) {
       try {
+        source.voiceCancelled = true;
         source.stop();
       } catch {
         // A source that already ended needs no further cleanup.
@@ -681,6 +725,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
     }
     stopPlayback();
     const epoch = playbackEpoch;
+    playbackReceipt = { turnId, started: false, terminal: false };
     activeSpeechTurnId.value = turnId;
     speechState.value = "thinking";
     try {
@@ -708,7 +753,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
       return true;
     } catch (speechError) {
       if (epoch !== playbackEpoch) return false;
-      stopPlayback();
+      stopPlayback("failed", "playback-error");
       speechState.value = "idle";
       throw speechError;
     }
@@ -732,6 +777,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
 
   function finishCurrentPhrase() {
     if (!activeSpeechTurnId.value) return;
+    emitPlayback("interrupted", "cancelled");
     const now = playbackContext?.currentTime || 0;
     const current = [...playbackSources].find(source => source.voiceEndsAt > now);
     if (!current?.voiceSegment) { stopSpeaking(); return; }
@@ -739,6 +785,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
     speechInputEnded.value = true;
     for (const source of [...playbackSources]) {
       if (source.voiceSegment?.index <= stopAfterSegment) continue;
+      source.voiceCancelled = true;
       source.stop();
       playbackSources.delete(source);
     }
@@ -747,10 +794,10 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
     sendControl({ type: "speak.stop-after", turnId: activeSpeechTurnId.value, segmentIndex: stopAfterSegment });
   }
 
-  function stopSpeaking() {
+  function stopSpeaking(reason = "cancelled") {
     const turnId = activeSpeechTurnId.value;
     const pending = turnId && !ready.value && !activeListenTurnId.value && !pendingListenTurnId;
-    stopPlayback();
+    stopPlayback("interrupted", reason);
     if (turnId && socket?.readyState === WEBSOCKET_OPEN) sendControl({ turnId, type: "cancel" });
     if (pending) disconnect();
   }
@@ -807,7 +854,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
       playbackGain.gain.value = enabled ? 1 : 0;
     }
     if (!enabled && activeSpeechTurnId.value) {
-      stopSpeaking();
+      stopSpeaking("muted");
     }
   }, { flush: "sync" });
   watch(selectedSocketPath, () => {
@@ -869,6 +916,7 @@ function useVoiceTransport({ socketUrl, speechEnabled = true, interruptSpeechOnL
     microphoneMuted,
     muted,
     partialTranscript,
+    playbackBlocked,
     preparePlayback,
     ready,
     reconnecting,