@jskit-ai/assistant-voice 0.1.4 → 0.1.6

package/README.md

@@ -83,9 +83,45 @@ The host's `avatar` slot receives state, mouthLevel, mouthPose, avatar and bindi
 Opening a target does not start capture. Tap Talk for hands-free, or hold it for
 push-to-talk and release to send; connection setup is automatic.
 Pause finishes the current utterance, flushing the audio tail before muting.
-Completed words follow the captured review policy; resume opens a fresh recording.
+Completed words follow the captured review policy. Pending delivery does not disable
+the microphone: tap can resume the existing continuous capture or start another
+one while preserving the prior pending transcript. A busy Pause or hold release
+mutes newer capture and finishes it through the original owner after that prior
+admission settles. Resuming first keeps the capture open. No pending words are
+replaced or appended. The icon reflects actual unmuted capture, not readiness.
 Automatic sends keep the call layout fixed. A failed send exposes the retained
-transcript for review and retry with the same message identity. Captions,
+transcript for review and retry with the same message identity. An application
+can call `beginTranscriptEdit(messageId)` for its exact unsent preview; this
+retains the existing pending transcript and capture destination before cancelling
+only capture. `editTranscript(text, messageId)` updates that pending identity and
+`deliverTranscript()` keeps the original send/retry owner. Hands-free resumes
+through the existing pending-clear watcher after send/discard, not during editing.
+An adapter's `previewMessage.actions` may project `editing`, `update(id, text)`,
+`send(id)`, `canSend` and `sending` alongside its original ×/edit actions. The
+standard transcript uses the same review textarea inside that preview bubble,
+including an empty editor, and reuses its existing action row for pending Send.
+A matching canonical user with `receipt: false` is still unadmitted: it does not
+clear pending words, forbid Edit or acknowledge a speech invitation. Confirmed
+readback (an absent flag or `receipt: true`) retains the original identity-based
+acknowledgement. For a known failed local delivery, a host can cancel that exact
+entry through the original delivery owner only upon explicit Edit, then author
+fresh edited text and intent on Send. Plain Retry retains its original payload;
+uncertain, accepted and sending entries remain fenced.
+When continuous recognition has newer words while an earlier pending send fails,
+both identities remain in their original pending/recording owners. Hosts can
+project these two existing snapshots through `previewMessages`, deduplicated by
+ID, while retaining the singular `previewMessage` contract. `canTakeTranscript(id)`
+checks either exact existing identity with the original admission guards. The
+newer capture is discardable, but cannot replace the occupied pending editor.
+Editing the earlier transcript pauses the newer recording through the original
+mute owner, retaining its words, ID, focus and endpoint. Transient
+`editPausedCaptureId` on the pending transcript owns only this pause; an explicit
+microphone choice supersedes it. Original pending resolution releases only the
+matching Edit-owned pause, and the existing endpoint watcher handles newer words.
+No additional transcript queue, playback owner or capture process is created.
+The app must retain current-target and uncertain-admission guards. Controls use
+`reviewInTranscript` only while that preview is projected, suppressing a duplicate
+inline review; standalone voice retains its original review fallback. Captions,
 review, explicit microphone/sound controls and bounded reconnection share one
 session. Opening the same ID reveals it. Switching targets releases the previous
 audio first; unfinished words require completion or explicit discard. A pending

package/examples/conversation/App.vue

@@ -10,6 +10,7 @@ const closed = ref([]);
 const views = new Map();
 const error = ref("");
 const avatarSize = ref("compact");
+const voicePresentation = ref("dialog");
 const acquireConversation = useAssistantConversationFactory();
 const controller = createVoiceConversationController({ connectSpeech: binding => binding.socketUrl });
 async function openText(id) {
@@ -91,7 +92,7 @@ onScopeDispose(() => { void controller.dispose(); });
         </section>
       </div>
     </main>
-    <VoiceConversationHost v-model:avatar-size="avatarSize" :controller="controller" />
+    <VoiceConversationHost v-model:avatar-size="avatarSize" :controller="controller" :presentation="voicePresentation" />
     <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.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",
+    "@jskit-ai/assistant-core": "0.1.206",
+    "@jskit-ai/assistant-runtime": "0.1.199",
+    "@jskit-ai/assistant-voice": "0.1.6",
+    "@jskit-ai/connectors-catalog": "0.1.45",
+    "@jskit-ai/http-runtime": "0.1.226",
+    "@jskit-ai/kernel": "0.1.228",
+    "@jskit-ai/realtime": "0.1.225",
+    "@jskit-ai/shell-web": "0.1.232",
     "@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.4",
+  "version": "0.1.6",
   "type": "module",
   "description": "Duplex voice conversations with application-owned targets, authorization and speech services.",
   "scripts": {
@@ -18,7 +18,7 @@
     "examples"
   ],
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.204",
+    "@jskit-ai/assistant-core": "0.1.206",
     "@mdi/js": "^7.4.47",
     "ws": "^8.20.1"
   },

package/src/client/ConversationDialog.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { mdiClose, mdiMessageTextOutline, mdiMicrophone, mdiMinus } from "@mdi/js";
 import { useDisplay } from "vuetify";
+import { VCard, VDialog } from "vuetify/components";
+import { computed } from "vue";
 
 const { xs } = useDisplay();
 
@@ -11,7 +13,16 @@ const props = defineProps({
   mode: { type: String, default: "talk" },
   showModes: Boolean,
   minimizable: Boolean,
-  closeLabel: { type: String, default: "Close conversation" }
+  closeLabel: { type: String, default: "Close conversation" },
+  presentation: { type: String, default: "dialog", validator: value => ["dialog", "inline"].includes(value) }
+});
+const dialogProps = computed(() => props.presentation === "inline" ? {} : {
+  activator: props.activator, openOnClick: false, modelValue: props.modelValue,
+  transition: false, fullscreen: xs.value, width: xs.value ? "100%" : 620,
+  maxWidth: xs.value ? "100%" : "calc(100% - 32px)", height: xs.value ? "100%" : 860,
+  maxHeight: xs.value ? "100%" : "calc(100% - 32px)",
+  contentProps: { style: { margin: xs.value ? 0 : "16px" } },
+  "aria-hidden": !props.modelValue
 });
 const emit = defineEmits(["update:modelValue", "update:mode", "minimize"]);
 let dismissedFromActivator = false;
@@ -29,18 +40,16 @@ function updateOpen(value) {
 </script>
 
 <template>
-  <v-dialog
-    class="conversation-dialog" :activator="activator" :open-on-click="false"
-    :model-value="modelValue" :transition="false" :fullscreen="xs" :width="xs ? '100%' : 620" :max-width="xs ? '100%' : 'calc(100% - 32px)'"
-    :height="xs ? '100%' : 860" :max-height="xs ? '100%' : 'calc(100% - 32px)'"
-    :content-props="{ style: { margin: xs ? 0 : '16px' } }" :aria-label="`${title} conversation`" :aria-hidden="!modelValue"
+  <component
+    :is="presentation === 'inline' ? 'section' : VDialog" v-bind="dialogProps"
+    class="conversation-dialog" :class="{ 'conversation-dialog--inline': presentation === 'inline' }" :aria-label="`${title} conversation`"
     @click:outside="outsideClick" @update:model-value="updateOpen"
   >
-    <v-card class="conversation-dialog__surface" :rounded="xs ? 0 : 'lg'">
-      <v-card-title class="conversation-dialog__title text-title-large">
+    <component :is="presentation === 'inline' ? 'div' : VCard" class="conversation-dialog__surface" :rounded="presentation === 'inline' ? undefined : xs ? 0 : 'lg'">
+      <v-card-title v-if="presentation !== 'inline'" class="conversation-dialog__title text-title-large">
         <span :title="title">{{ title }}</span>
         <slot name="header-actions" />
-        <v-btn v-if="minimizable" :icon="mdiMinus" variant="text" aria-label="Minimize conversation" title="Minimize conversation" @click="$emit('minimize')" />
+        <v-btn v-if="minimizable" :icon="mdiMinus" variant="text" aria-label="Minimize conversation" title="Minimize conversation" @click="$emit('minimize', $event)" />
         <v-btn :icon="mdiClose" variant="text" :aria-label="closeLabel" :title="closeLabel" @click="$emit('update:modelValue', false)" />
       </v-card-title>
       <v-tabs v-if="showModes" :model-value="mode" class="conversation-dialog__tabs" grow aria-label="Conversation mode" @update:model-value="$emit('update:mode', $event)">
@@ -48,8 +57,8 @@ function updateOpen(value) {
         <v-tab value="text" :prepend-icon="mdiMessageTextOutline">Text</v-tab>
       </v-tabs>
       <div class="conversation-dialog__body"><slot /></div>
-    </v-card>
-  </v-dialog>
+    </component>
+  </component>
 </template>
 
 <style scoped>
@@ -57,11 +66,13 @@ function updateOpen(value) {
 .conversation-dialog :deep(.v-overlay__scrim) { transition: none; opacity: var(--v-overlay-opacity); }
 .conversation-dialog:not(.v-overlay--active) :deep(.v-overlay__scrim) { display: none; }
 .conversation-dialog__surface { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
+.conversation-dialog--inline { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.conversation-dialog--inline .conversation-dialog__surface { height: auto; }
 .conversation-dialog__title { display: flex; align-items: center; flex: 0 0 64px; height: 64px; gap: 8px; padding: 8px 16px; }
 .conversation-dialog__title > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .conversation-dialog__tabs { flex: 0 0 48px; height: 48px; }
 .conversation-dialog__body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
 @media (max-width: 599px) {
-  .conversation-dialog__surface { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
+  .conversation-dialog:not(.conversation-dialog--inline) .conversation-dialog__surface { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
 }
 </style>

package/src/client/VoiceConversation.vue

@@ -3,6 +3,7 @@ import { computed, ref, watch } from "vue";
 import { AssistantConversationElement } from "@jskit-ai/assistant-core/client/conversation";
 import VoiceAvatar from "./VoiceAvatar.vue";
 import VoiceConversationControls from "./VoiceConversationControls.vue";
+import { mdiMicrophone, mdiVolumeHigh } from "@mdi/js";
 
 const props = defineProps({
   session: { type: Object, required: true }, disabled: { type: Boolean, default: false },
@@ -15,7 +16,7 @@ const { targetLabel, voice, microphoneMuted, heldTranscript, pendingTranscript,
   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 }
+  composer: { ...props.adapter.composer, canSend: props.adapter.composer?.canSend && !props.session.composerBlocked.value }
 }));
 const toolsTarget = ref(null);
 const voiceWordsTarget = ref(null);
@@ -38,10 +39,21 @@ for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWo
           <VoiceAvatar v-bind="avatarVisual" />
         </slot>
       </template>
-      <template #composer-tools><div ref="toolsTarget" class="assistant-voice-conversation__tools" /></template>
+      <template v-if="showAvatar" #avatar-tools><div ref="toolsTarget" class="assistant-voice-conversation__tools" /></template>
+      <template #avatar-control="scope">
+        <slot name="avatar-control" v-bind="scope">
+          <span v-if="scope.size === 'hidden' && voice.listening.value && !microphoneMuted" role="img" aria-label="Listening" title="Listening">
+            <v-icon :icon="mdiMicrophone" size="20" aria-hidden="true" />
+          </span>
+          <span v-if="scope.size === 'hidden' && voice.speaking.value" role="img" aria-label="Speaking" title="Speaking">
+            <v-icon :icon="mdiVolumeHigh" size="20" aria-hidden="true" />
+          </span>
+        </slot>
+      </template>
       <template #composer-feedback>
-        <VoiceConversationControls :session="session" :disabled="disabled" compact :tools-target="toolsTarget">
+        <VoiceConversationControls :session="session" :disabled="disabled" compact :icon-only="showAvatar" :tools-target="toolsTarget" :review-in-transcript="Boolean(presentationAdapter?.conversation?.previewMessage)">
           <template #work-control><slot name="work-control" /></template>
+          <template #settings-control><slot name="settings-control" /></template>
         </VoiceConversationControls>
       </template>
     </AssistantConversationElement>
@@ -66,7 +78,10 @@ for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWo
           <p class="assistant-voice__caption-text text-body-medium">{{ voiceAnswer }}</p>
         </section>
       </div>
-      <VoiceConversationControls :session="session" :disabled="disabled"><template #work-control><slot name="work-control" /></template></VoiceConversationControls>
+      <VoiceConversationControls :session="session" :disabled="disabled">
+        <template #work-control><slot name="work-control" /></template>
+        <template #settings-control><slot name="settings-control" /></template>
+      </VoiceConversationControls>
     </section>
   </fieldset>
 </template>

package/src/client/VoiceConversationControls.vue

@@ -6,8 +6,12 @@ import { useVoiceLauncher } from "./voiceLauncher.js";
 const props = defineProps({
   session: { type: Object, required: true },
   disabled: { type: Boolean, default: false },
+  speakerDisabled: { type: Boolean, default: false },
   compact: { type: Boolean, default: false },
-  toolsTarget: { type: Object, default: null }
+  iconOnly: { type: Boolean, default: false },
+  reviewInTranscript: { type: Boolean, default: false },
+  toolsTarget: { type: Object, default: null },
+  feedbackTarget: { type: Object, default: null }
 });
 const {
   targetLabel, voice, error, microphoneMuted, live, starting, callMode,
@@ -17,13 +21,14 @@ const {
   deliverTranscript, discardHeldRecording, editTranscript
 } = props.session;
 const controlStatus = computed(() => {
+  if (props.iconOnly && voice.listening.value && !starting.value && !error.value && !voice.error.value) return "";
   if (!props.compact || !props.session.hasUnsentSpeech.value) return callStatus.value;
-  if (pendingTranscript.value) return "Send or discard speech to send text.";
+  if (pendingTranscript.value) return props.reviewInTranscript ? "" : "Send or discard speech to send text.";
+  if (live.value && callMode.value === "hands-free" && voice.listening.value && !microphoneMuted.value) return "Listening…";
   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 handsFreeListening = computed(() => live.value && callMode.value === "hands-free" && voice.listening.value && !microphoneMuted.value);
+const canTalk = computed(() => !props.disabled && (!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({
@@ -36,42 +41,64 @@ const gesture = useVoiceLauncher({
 
 <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="feedbackTarget" :disabled="!feedbackTarget">
+      <fieldset class="assistant-voice-controls__feedback" :class="{ 'assistant-voice-controls__feedback--compact': compact }" :disabled="disabled">
+        <p
+          v-if="error || voice.error.value" class="assistant-voice__error"
+          :class="{ 'text-body-small': compact }" 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 && !reviewInTranscript && 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="!reviewInTranscript && pendingTranscript && (pendingTranscript.reviewBeforeSend || !sending)" class="assistant-voice__review" aria-label="Review voice message">
+          <v-textarea
+            class="assistant-voice__review-input" :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>
+      </fieldset>
+    </Teleport>
     <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" />
+      <fieldset class="assistant-voice-controls__tools" :class="{ 'assistant-voice-controls__tools--compact': compact, 'assistant-voice-controls__tools--icons': iconOnly }" :disabled="disabled" :aria-label="`${targetLabel} voice chat controls`">
+        <div v-if="compact || iconOnly || speechActive" class="assistant-voice-controls__stop">
+          <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" />
+        </div>
         <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"
+            class="assistant-voice__talk" color="primary" :variant="iconOnly ? 'text' : handsFreeListening ? 'tonal' : 'flat'" :min-height="iconOnly ? 44 : compact ? 48 : 64" rounded="xl"
+            :icon="iconOnly ? (voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff) : undefined"
+            :prepend-icon="iconOnly ? undefined : (voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff)"
+            :aria-label="iconOnly ? talkLabel : undefined" title="click or long press to talk"
+            :aria-pressed="handsFreeListening || pushHolding" :aria-describedby="gestureHint"
+            :disabled="!canTalk" :slim="compact || iconOnly"
+            :width="iconOnly ? 40 : compact ? 148 : undefined" :min-width="iconOnly ? 40 : compact ? 148 : undefined"
             @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 }}
+            <span v-if="iconOnly" class="assistant-voice-controls__icon-disc"><v-icon size="20" :icon="voice.listening.value && !microphoneMuted ? mdiMicrophone : mdiMicrophoneOff" /></span>
+            <template v-else>{{ talkLabel }}</template>
           </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"
+            :icon="readAloud ? mdiVolumeHigh : mdiVolumeOff" :aria-pressed="readAloud" :variant="iconOnly ? 'text' : 'tonal'" :color="iconOnly ? 'primary' : undefined" :min-height="iconOnly ? 44 : compact ? 48 : 64" :width="iconOnly ? 40 : undefined" :min-width="iconOnly ? 40 : 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"
-          />
+            :title="readAloud ? 'Spoken replies on' : 'Spoken replies off'"
+            :disabled="speakerDisabled || session.readAloudChangePending?.value === true" @click="toggleReadAloud"
+          >
+            <template v-if="iconOnly" #default>
+              <span class="assistant-voice-controls__icon-disc"><v-icon size="20" :icon="readAloud ? mdiVolumeHigh : mdiVolumeOff" /></span>
+            </template>
+          </v-btn>
+          <slot name="settings-control" />
           <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>
@@ -80,11 +107,18 @@ const gesture = useVoiceLauncher({
 </template>
 
 <style scoped>
-.assistant-voice-controls, .assistant-voice-controls__tools { border: 0; padding: 0; margin: 0; min-width: 0; }
+.assistant-voice-controls, .assistant-voice-controls__feedback, .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__feedback--compact > .assistant-voice-controls__status { min-height: 1lh; }
+.assistant-voice-controls__stop { display: contents; }
+.assistant-voice-controls__tools--compact .assistant-voice-controls__stop {
+  display: block;
+  flex: 0 0 48px;
+  height: 48px;
+}
 .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; }
@@ -92,10 +126,24 @@ const gesture = useVoiceLauncher({
 .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 { justify-content: flex-start; gap: 2px; }
+.assistant-voice-controls__tools--compact .assistant-voice__talk-action { display: flex; padding: 0; width: auto; gap: 0; }
 .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; }
+.assistant-voice-controls__tools--icons { position: relative; width: max-content; flex-wrap: nowrap; justify-content: flex-end; gap: 0; }
+.assistant-voice-controls__tools--icons .assistant-voice-controls__stop { position: absolute; right: calc(100% + 2px); top: 0; width: 48px; height: 48px; pointer-events: none; }
+.assistant-voice-controls__tools--icons .assistant-voice-controls__stop > .v-btn { pointer-events: auto; }
+.assistant-voice-controls__icon-disc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--v-theme-primary), .12); }
+.assistant-voice-controls__tools--icons .assistant-voice__talk-action { display: flex; padding: 0; width: auto; gap: 0; }
+.assistant-voice-controls__tools--icons .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__feedback--compact .assistant-voice__review {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  max-height: 128px;
+  padding: 0;
+}
+.assistant-voice-controls__feedback--compact .assistant-voice__review-input { flex: 1 1 auto; min-width: 0; }
+.assistant-voice-controls__feedback--compact .assistant-voice__review-actions { flex: 0 0 auto; }
+.assistant-voice-controls__feedback--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

@@ -1,9 +1,14 @@
 <script setup>
-import { mdiCog, mdiHeadset, mdiStop } from "@mdi/js";
+import { mdiHeadset, mdiStop } from "@mdi/js";
 import ConversationDialog from "./ConversationDialog.vue";
 import VoiceConversation from "./VoiceConversation.vue";
+import VoiceConversationSettings from "./VoiceConversationSettings.vue";
 
-const props = defineProps({ controller: { type: Object, required: true }, activator: { type: Object, default: null }, avatarSize: { type: String, default: "compact" } });
+const props = defineProps({
+  controller: { type: Object, required: true }, activator: { type: Object, default: null },
+  avatarSize: { type: String, default: "hidden" },
+  presentation: { type: String, default: "dialog", validator: value => ["dialog", "inline"].includes(value) }
+});
 defineEmits(["update:avatarSize"]);
 const state = props.controller.state;
 async function invoke(operation) {
@@ -20,31 +25,16 @@ async function openText() {
 
 <template>
   <ConversationDialog
-    v-if="state.session" :model-value="state.visible" :activator="activator"
+    v-if="state.session" :model-value="state.visible" :activator="activator" :presentation="presentation"
     :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 }))"
+    :minimizable="presentation === 'dialog'" close-label="Close voice chat" @minimize="controller.minimize()" @update:model-value="invoke(() => controller.end({ discard: true }))"
     @update:mode="value => value === 'text' && invoke(openText)"
   >
-    <template #header-actions>
-      <v-menu :close-on-content-click="false" location="bottom end" @update:model-value="open => open && !$slots.settings && invoke(() => state.session.voice.connect())">
-        <template #activator="{ props: settingsButton }">
-          <v-btn v-bind="settingsButton" :icon="mdiCog" variant="text" aria-label="Voice settings" title="Voice settings" />
-        </template>
-        <v-card class="voice-host__settings" role="region" aria-label="Voice settings">
-          <v-card-text>
-            <slot name="settings" :voice="state.session.voice">
-              <v-select
-                v-model="state.session.voice.selectedVoice.value"
-                :items="state.session.voice.availableVoices.value" item-title="label" item-value="id"
-                :disabled="state.session.voice.availableVoices.value.length < 2"
-                label="Speaking voice" density="comfortable"
-                hint="Applies to the next spoken reply" persistent-hint
-              />
-            </slot>
-          </v-card-text>
-        </v-card>
-      </v-menu>
+    <template v-if="!state.binding.adapter" #header-actions>
+      <VoiceConversationSettings :voice="state.session.voice" @error="state.error = $event.message">
+        <template v-if="$slots.settings" #default="settings"><slot name="settings" v-bind="settings" /></template>
+      </VoiceConversationSettings>
     </template>
     <v-alert v-if="state.error" type="error" density="compact" role="alert">{{ state.error }}</v-alert>
     <v-alert v-if="state.nextTarget" type="info" class="voice-host__switch">
@@ -63,6 +53,12 @@ async function openText() {
           :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 v-if="$slots['avatar-control']" #avatar-control="scope"><slot name="avatar-control" v-bind="scope" :binding="state.binding" :session="state.session" /></template>
+          <template v-if="presentation === 'inline' || state.binding.adapter" #settings-control>
+            <VoiceConversationSettings :voice="state.session.voice" compact @error="state.error = $event.message">
+              <template v-if="$slots.settings" #default="settings"><slot name="settings" v-bind="settings" /></template>
+            </VoiceConversationSettings>
+          </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>
@@ -70,7 +66,7 @@ async function openText() {
       </slot>
     </div>
   </ConversationDialog>
-  <template v-if="state.session && !state.visible">
+  <template v-if="presentation === 'dialog' && state.session && !state.visible">
     <slot v-if="$slots.reopen" name="reopen" :controller="controller" />
     <v-btn v-else class="voice-host__reopen" color="primary" :prepend-icon="mdiHeadset" min-height="56" @click="controller.reveal()">
       {{ state.binding.label || 'Assistant' }} · Voice chat
@@ -82,6 +78,5 @@ async function openText() {
 .voice-host__body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
 .voice-host__switch-actions { display: flex; flex-wrap: wrap; gap: 4px; }
 .voice-host__switch { flex: 0 0 auto; }
-.voice-host__settings { width: 320px; max-width: calc(100vw - 32px); }
 .voice-host__reopen { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); z-index: 1900; }
 </style>

package/src/client/VoiceConversationSettings.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { mdiCog } from "@mdi/js";
+import { useSlots } from "vue";
+
+const props = defineProps({
+  voice: { type: Object, default: null },
+  compact: Boolean
+});
+const emit = defineEmits(["error"]);
+const slots = useSlots();
+function selectVoice(value) {
+  const selectedVoice = props.voice.selectedVoice;
+  selectedVoice.value = value;
+}
+async function openSettings(open) {
+  if (!open || slots.default || !props.voice) return;
+  try { await props.voice.connect(); }
+  catch (error) { emit("error", error); }
+}
+</script>
+
+<template>
+  <v-menu :close-on-content-click="false" location="bottom end" @update:model-value="openSettings">
+    <template #activator="{ props: settingsButton }">
+      <v-btn
+        v-bind="settingsButton" :icon="mdiCog" variant="text" :color="compact ? 'primary' : undefined"
+        :width="compact ? 40 : undefined" :min-width="compact ? 40 : 48" :min-height="compact ? 44 : 48" :disabled="!voice && !$slots.default"
+        aria-label="Voice settings" title="Voice settings"
+      >
+        <template v-if="compact" #default><span class="voice-settings__disc"><v-icon size="20" :icon="mdiCog" /></span></template>
+      </v-btn>
+    </template>
+    <v-card class="voice-settings__menu" role="region" aria-label="Voice settings">
+      <v-card-text>
+        <slot :voice="voice">
+          <v-select
+            v-if="voice" :model-value="voice.selectedVoice.value" @update:model-value="selectVoice"
+            :items="voice.availableVoices.value" item-title="label" item-value="id"
+            :disabled="voice.availableVoices.value.length < 2"
+            label="Speaking voice" density="comfortable"
+            hint="Applies to the next spoken reply" persistent-hint
+          />
+        </slot>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<style scoped>
+.voice-settings__menu { width: 320px; max-width: calc(100vw - 32px); }
+.voice-settings__disc { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--v-theme-primary), .12); }
+</style>

package/src/client/index.js

@@ -4,6 +4,7 @@ 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 { default as VoiceConversationSettings } from "./VoiceConversationSettings.vue";
 
 export { useVoiceLauncher } from "./voiceLauncher.js";
 export { useVoiceAvatar } from "./voiceAvatar.js";

package/src/client/voiceConversation.js

@@ -1,12 +1,14 @@
 import { computed, onScopeDispose, ref, watch } from "vue";
 import { useVoiceTransport } from "./voiceTransport.js";
 import { takeStreamingSpeech } from "../shared/protocol.js";
+import { createConversationNarrationTracker } from "./conversationNarration.js";
 
 /** Created inside the controller's effect scope, independent of a mounted screen. */
 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(binding.defaults?.readAloud === true);
+  const readAloudChangePending = computed(() => binding.readAloudChangePending === true);
   const soundPreparing = ref(false);
   let soundRevision = 0;
   const conversationId = binding.conversationId || binding.id;
@@ -15,6 +17,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
   const heldReview = ref(false);
   const holding = ref(false);
   const sending = ref(false);
+  const takingTranscript = ref(false);
   const live = ref(false);
   const starting = ref(false);
   const callMode = ref(binding.defaults?.mode === "hands-free" ? "hands-free" : "push-to-talk");
@@ -109,6 +112,72 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
   let requestedMessageId = "";
   let speechInvitation = "";
   let lastStreamingId = "";
+  const narrationTracker = createConversationNarrationTracker();
+  const narrationPageVisible = ref(globalThis.document?.visibilityState !== "hidden");
+  const hiddenNarrationPage = computed(() => Boolean(binding.narration) && !narrationPageVisible.value);
+  let narrationSettleTimer;
+  let thinkingMurmurTimer;
+  let narrationEpoch = 0;
+
+  function clearNarrationTimers() {
+    ++narrationEpoch;
+    clearTimeout(narrationSettleTimer);
+    clearTimeout(thinkingMurmurTimer);
+  }
+  function retireNarration(selected = () => true) {
+    for (let index = speechQueue.length - 1; index >= 0; --index) {
+      const reply = speechQueue[index];
+      if (!reply.narrationKind || !selected(reply.narrationKind)) continue;
+      cancelReply(reply, "narration-retired");
+      speechQueue.splice(index, 1);
+      if (reply.turnId && voice.activeSpeechTurnId.value === reply.turnId) voice.stopSpeaking("narration-retired");
+    }
+  }
+  function narrationEnabled() {
+    const narration = binding.narration;
+    return Boolean(narration && narration.eligible && !narration.loading && readAloud.value
+      && binding.state.available !== false && narrationPageVisible.value && !capturing.value
+      && !starting.value && !speechSuppressed && !disposed);
+  }
+  function queueNarration(kind, text) {
+    // Optional activity uses the original queue but never impersonates a canonical output.
+    if (!narrationEnabled() || speechQueue.some(reply => !reply.narrationKind)
+      || speechActive.value && !speechQueue.some(reply => reply.narrationKind && reply.turnId === voice.activeSpeechTurnId.value)) return;
+    speechQueue.push({ narrationKind: kind, raw: text, consumed: 0, final: true, started: false });
+    void drainSpeech();
+  }
+  function observeNarration(settled = false, enabled = narrationEnabled()) {
+    const narration = binding.narration;
+    if (!narration) return;
+    const entries = narrationTracker.observe(narration.turns, {
+      includeFinals: false, settled, enabled,
+      vocalizeThinking: narration.vocalizeThinking,
+      vocalizeInterimTurns: narration.vocalizeInterimTurns
+    });
+    for (const entry of entries) queueNarration(entry.kind, entry.text);
+  }
+  function scheduleThinkingMurmur(epoch) {
+    const narration = binding.narration;
+    if (!narrationEnabled() || !narration.working || !narration.thinkingSounds) return;
+    thinkingMurmurTimer = setTimeout(() => {
+      if (epoch !== narrationEpoch || !narrationEnabled() || !binding.narration?.working || !binding.narration.thinkingSounds) return;
+      if (!speechQueue.length && !draining && !speechActive.value && voice.state.value === "idle") queueNarration("murmur", "Hmm...");
+      scheduleThinkingMurmur(epoch);
+    }, 20_000);
+  }
+  function refreshNarration(settled = false) {
+    clearNarrationTimers();
+    observeNarration(settled);
+    const narration = binding.narration;
+    if (!narrationEnabled() || !narration.working) return;
+    const epoch = narrationEpoch;
+    if (narration.vocalizeThinking || narration.vocalizeInterimTurns) {
+      narrationSettleTimer = setTimeout(() => {
+        if (epoch === narrationEpoch && narrationEnabled()) observeNarration(true);
+      }, 700);
+    }
+    scheduleThinkingMurmur(epoch);
+  }
 
   function observe(callback, value) {
     try {
@@ -121,16 +190,18 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     if (reply.terminal || (phase === "started" && reply.audible)) return;
     if (phase === "started") reply.audible = true;
     else reply.terminal = true;
+    if (reply.narrationKind) return;
     observe(binding.onPlayback, {
       conversationId, outputId: reply.outputId, phase, ...(reason ? { reason } : {})
     });
   }
   function receivePlayback(event) {
-    const reply = [...replies.values()].find(reply => reply.turnId === event.turnId);
+    const reply = [...replies.values()].find(reply => reply.turnId === event.turnId)
+      || speechQueue.find(reply => reply.narrationKind && reply.turnId === event.turnId);
     if (!reply) return;
     if (event.phase === "completed") {
       reply.drained = true;
-      if (reply.canonicalFinal) emitReply(reply, "completed");
+      if (reply.canonicalFinal || reply.narrationKind) emitReply(reply, "completed");
     } else emitReply(reply, event.phase, event.reason);
   }
   function cancelReply(reply, reason = "cancelled", phase = "interrupted") {
@@ -139,6 +210,8 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
   }
   function stopSpeech() { cancelSpeech(); }
   function cancelSpeech(reason = "cancelled", phase = "interrupted") {
+    clearNarrationTimers();
+    retireNarration();
     for (const reply of replies.values()) {
       if (!reply.terminal) cancelReply(reply, reason, phase);
     }
@@ -180,7 +253,11 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
           reply.started = true;
           reply.turnId = crypto.randomUUID();
           const accepted = await voice.speak(chunk.text, reply.turnId, { stream: true });
-          if (reply.cancelled || disposed) return;
+          if (disposed) return;
+          if (reply.cancelled) {
+            if (reply.narrationKind) continue;
+            return;
+          }
           if (accepted === false) {
             cancelReply(reply, "no-audio");
             continue;
@@ -195,6 +272,7 @@ 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;
+      retireNarration();
       reply = {
         id: message.id, outputId: message.outputId || message.id, streamId: message.streamId,
         raw: "", consumed: 0, final: false, canonicalFinal: false, started: false
@@ -203,6 +281,14 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       speechQueue.push(reply);
     }
     if (reply.cancelled) return;
+    if (hiddenNarrationPage.value && !reply.canonicalFinal && (final || !reply.raw)) {
+      // Consume hidden outputs without replay; a streaming answer cannot claim
+      // completion when its first canonical final was not admitted for speech.
+      cancelReply(reply, "page-hidden");
+      if (reply.turnId && voice.activeSpeechTurnId.value === reply.turnId) voice.stopSpeaking("page-hidden");
+      return;
+    }
+    if (final) retireNarration();
     const text = String(message.text || "").slice(0, 4000);
     const spokenPrefix = reply.raw.slice(0, reply.consumed);
     if (!text.startsWith(spokenPrefix) && !(final && text.trimEnd() === spokenPrefix.trimEnd())) {
@@ -233,9 +319,13 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     }
   }
   async function toggleReadAloud() {
+    if (readAloudChangePending.value) return;
     error.value = "";
     readAloud.value = !readAloud.value;
     observe(binding.onReadAloudChange, readAloud.value);
+    await applyReadAloud();
+  }
+  async function applyReadAloud() {
     if (!readAloud.value) {
       ++soundRevision;
       soundPreparing.value = false;
@@ -245,7 +335,13 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     speechSuppressed = false;
     speechInvitation = "";
     await enableSound();
+    if (!disposed) refreshNarration();
   }
+  watch(() => binding.defaults?.readAloud, (value) => {
+    if (disposed || typeof value !== "boolean" || value === readAloud.value) return;
+    readAloud.value = value;
+    void applyReadAloud();
+  });
   async function deliverTranscript() {
     const pending = pendingTranscript.value;
     if (!pending || sending.value) return;
@@ -263,6 +359,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     startupAbort?.abort();
     startupAbort = null;
     starting.value = false;
+    releaseEditCapturePause();
     recording = null;
     await voice.cancelListening();
   }
@@ -273,11 +370,21 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     await cancelRecording();
   }
   function dismissTranscript() {
+    releaseEditCapturePause();
     pendingTranscript.value = null;
     heldReview.value = false;
     holding.value = false;
     error.value = "";
   }
+  function releaseEditCapturePause() {
+    const pending = pendingTranscript.value;
+    const captureId = pending?.editPausedCaptureId;
+    if (!captureId) return;
+    delete pending.editPausedCaptureId;
+    if (recording?.messageId === captureId && !disposed && live.value && callMode.value === "hands-free") {
+      voice.setMicrophoneMuted(false);
+    }
+  }
   async function talk() {
     error.value = "";
     try {
@@ -288,7 +395,8 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     } catch (cause) { recording = null; error.value = cause.message; }
   }
   async function startRecording(reviewBeforeSend, continuous = false) {
-    if (disposed || starting.value || microphoneMuted.value || capturing.value || pendingTranscript.value || sending.value) return;
+    if (disposed || hiddenNarrationPage.value || starting.value || microphoneMuted.value || capturing.value || committing ||
+        (pendingTranscript.value || sending.value) && !(continuous && live.value && (callMode.value === "hands-free" || pushHolding.value))) return;
     error.value = "";
     reviewBeforeSend ||= binding.defaults?.reviewBeforeSend === true;
     heldReview.value = reviewBeforeSend;
@@ -302,10 +410,13 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     } catch (cause) { if (recording === next) { recording = null; error.value = cause.message; } }
   }
   async function toggleMicrophoneMuted() {
+    // A person's explicit microphone choice supersedes an Edit-owned pause.
+    if (pendingTranscript.value) delete pendingTranscript.value.editPausedCaptureId;
     voice.setMicrophoneMuted(!microphoneMuted.value);
+    if (!microphoneMuted.value && recording) delete recording.finishAfterPending;
     clearTimeout(stopTimer);
     if (microphoneMuted.value && starting.value) await cancelRecording();
-    else if (!microphoneMuted.value && live.value && callMode.value === "hands-free" && !capturing.value && !pendingTranscript.value && !sending.value) await startRecording(false, true);
+    else if (!microphoneMuted.value && live.value && callMode.value === "hands-free" && !capturing.value) await startRecording(false, true);
   }
   async function changeCallMode(mode) {
     if (!["push-to-talk", "hands-free"].includes(mode) || mode === callMode.value || callModeBusy.value || committing) return;
@@ -317,13 +428,15 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     } finally { changingCallMode.value = false; }
   }
   async function startPushToTalk(event) {
-    if (event?.repeat || event?.isPrimary === false || event?.button !== undefined && event.button !== 0 || pushHolding.value || disposed || starting.value
-      || capturing.value && !voice.listening.value || pendingTranscript.value || sending.value || committing) return;
+    if (event?.repeat || event?.isPrimary === false || event?.button !== undefined && event.button !== 0 || pushHolding.value
+      || disposed || hiddenNarrationPage.value || starting.value
+      || capturing.value && !voice.listening.value || committing) return;
     if (event?.pointerId !== undefined) event.currentTarget.setPointerCapture(event.pointerId);
     pushInput = event?.pointerId ?? event?.key ?? null;
     pushHolding.value = true;
     callMode.value = "push-to-talk";
     voice.setMicrophoneMuted(false);
+    if (recording) delete recording.finishAfterPending;
     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
@@ -332,7 +445,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       recording.continuous = false;
       return;
     }
-    await startRecording(false);
+    await startRecording(false, Boolean(pendingTranscript.value || sending.value));
     if (!recording) pushHolding.value = false;
   }
   async function finishPushToTalk(event) {
@@ -340,6 +453,11 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     pushHolding.value = false;
     pushInput = null;
     try {
+      if (voice.listening.value && (pendingTranscript.value || sending.value || committing)) {
+        if (recording) recording.finishAfterPending = true;
+        voice.setMicrophoneMuted(true);
+        return;
+      }
       if (voice.listening.value) await voice.stopListening();
       else await cancelRecording();
     } catch (cause) { await cancelRecording(); error.value = cause.message; }
@@ -351,7 +469,15 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     await cancelRecording();
   }
   async function toggleHandsFree() {
-    if (disposed || pushHolding.value || pendingTranscript.value || sending.value || committing) return;
+    if (disposed || hiddenNarrationPage.value || pushHolding.value) return;
+    if (live.value && callMode.value === "hands-free" && voice.listening.value && (pendingTranscript.value || sending.value || committing)) {
+      // Pause must finish the newer recording after the existing admission,
+      // without replacing the one pending transcript or stopping output.
+      if (!microphoneMuted.value && recording) recording.finishAfterPending = true;
+      await toggleMicrophoneMuted();
+      return;
+    }
+    if (committing) return;
     if (starting.value) { await cancelRecording(); return; }
     if (capturing.value && !voice.listening.value) return;
     if (live.value && callMode.value === "hands-free") {
@@ -360,10 +486,16 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
         // final sound is included; resuming starts a fresh recording.
         await voice.stopListening();
         voice.setMicrophoneMuted(true);
-      } else await toggleMicrophoneMuted();
+      } else if (microphoneMuted.value) await toggleMicrophoneMuted();
+      else await startRecording(false, true);
       return;
     }
-    if (callModeBusy.value) return;
+    if (callMode.value === "hands-free" && (pendingTranscript.value || sending.value)) {
+      voice.setMicrophoneMuted(false);
+      await toggleLive();
+      return;
+    }
+    if (pendingTranscript.value || sending.value || callModeBusy.value) return;
     voice.setMicrophoneMuted(false);
     await changeCallMode("hands-free");
     if (!live.value) await toggleLive();
@@ -379,7 +511,8 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       await cancelRecording();
       return;
     }
-    if (disposed || microphoneMuted.value || capturing.value || pendingTranscript.value || sending.value) return;
+    if (disposed || hiddenNarrationPage.value || microphoneMuted.value || capturing.value || committing ||
+        (pendingTranscript.value || sending.value) && callMode.value !== "hands-free" && !pushHolding.value) return;
     const controller = new AbortController();
     startupAbort = controller;
     starting.value = true;
@@ -415,7 +548,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
   }
   function decideTurn() {
     const candidate = voice.endpoint.value;
-    if (!live.value || callMode.value !== "hands-free" || !voice.listening.value || microphoneMuted.value || pendingTranscript.value || sending.value || !candidate) return;
+    if (takingTranscript.value || !live.value || callMode.value !== "hands-free" || !voice.listening.value || microphoneMuted.value || pendingTranscript.value || sending.value || !candidate) return;
     const key = `${candidate.turnId}:${candidate.revision}`;
     if (decidedCandidate === key) return;
     decidedCandidate = key;
@@ -441,6 +574,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       }
       committing = { ...captured, turnId: candidate.turnId, revision: candidate.revision };
       if (!voice.finishUtterance(candidate)) { committing = null; return; }
+      publishTranscript();
       // The daemon rechecks the endpoint revision before returning final text.
       // Ordinary steering leaves the current answer and queued audio intact.
     } catch (cause) {
@@ -451,7 +585,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       }
     }
   }
-  watch([voice.endpoint, pendingTranscript, sending], decideTurn);
+  watch([voice.endpoint, pendingTranscript, sending, takingTranscript], decideTurn);
   watch(voice.completedUtterance, (utterance) => {
     if (!utterance || !live.value || !committing || committing.turnId !== utterance.turnId || committing.revision !== utterance.revision) return;
     pendingTranscript.value = { ...committing, text: utterance.text };
@@ -462,7 +596,8 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     // A discard can lose a race with resumed speech. Keep this utterance's
     // identity and destination until the daemon acknowledges the boundary.
     if (reset?.turnId !== voice.activeListenTurnId.value || !live.value || !recording) return;
-    recording = { focus: { ...(binding.captureContext?.() || {}) }, messageId: crypto.randomUUID(), started: true, continuous: true };
+    recording = { focus: { ...(binding.captureContext?.() || {}) }, messageId: crypto.randomUUID(), started: true, continuous: true,
+      ...(recording.finishAfterPending ? { finishAfterPending: true } : {}) };
   });
   watch(voice.partialTranscript, (text, previous) => {
     clearTimeout(stopTimer);
@@ -473,7 +608,16 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
       if (live.value && !microphoneMuted.value && voice.partialTranscript.value === text) stopSpeech();
     }, 120);
   });
-  watch([pendingTranscript, sending], () => {
+  watch([pendingTranscript, sending, voice.utteranceReset], () => {
+    if (!disposed && live.value && !pushHolding.value && !changingCallMode.value &&
+        !pendingTranscript.value && !sending.value && !committing && microphoneMuted.value &&
+        recording?.finishAfterPending && voice.listening.value) {
+      // Retire intent before the asynchronous PCM drain so a receipt/reset
+      // cannot finalize this capture twice. Its original final watcher sends B.
+      delete recording.finishAfterPending;
+      void voice.stopListening().catch(cause => { error.value = cause.message; });
+      return;
+    }
     if (live.value && callMode.value === "hands-free" && !changingCallMode.value && !microphoneMuted.value && !capturing.value && !pendingTranscript.value && !sending.value && !voice.error.value) void startRecording(false, true);
   });
   async function startHeldRecording() { await startRecording(true); }
@@ -524,14 +668,18 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     text: binding.state.streamingReply?.text }), ({ messages = [], reply }) => {
     if (!binding.id) return;
     // Reconcile an uncertain send by identity, never by equal transcript text.
-    if (pendingTranscript.value && messages.some((message) => message.role === "user" && message.id === pendingTranscript.value.messageId)) {
+    if (pendingTranscript.value && messages.some((message) => message.role === "user" && message.id === pendingTranscript.value.messageId && message.receipt !== false)) {
       dismissTranscript();
     }
+    let invited = false;
     for (const message of messages) {
+      // Unadmitted local records do not acknowledge a request or lift speech silence.
+      if (message.role === "user" && message.receipt === false) continue;
       if (seen.has(message.id)) continue;
       if (message.role === "user" && message.id === speechInvitation) {
         speechSuppressed = false;
         speechInvitation = "";
+        invited = true;
       }
       if (message.role === "assistant") queueReply(message, true);
       seen.add(message.id);
@@ -546,7 +694,7 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     lastStreamingId = reply?.id || "";
     if (reply?.text) {
       queueReply(reply, reply.status === "completed");
-      if (!readAloud.value || !primed || reply.autonomous) seen.add(reply.id);
+      if (!readAloud.value || !primed || reply.autonomous || hiddenNarrationPage.value) 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),
@@ -554,24 +702,119 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     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;
+    if (invited) refreshNarration();
     void drainSpeech();
   }, { immediate: true });
+  watch(() => {
+    const narration = binding.narration;
+    return {
+      id: binding.id, conversationId: binding.conversationId, narration,
+      loading: narration?.loading, eligible: narration?.eligible, working: narration?.working,
+      thinking: narration?.vocalizeThinking, interim: narration?.vocalizeInterimTurns,
+      sounds: narration?.thinkingSounds, turns: narration?.turns, enabled: narrationEnabled()
+    };
+  }, (current, previous) => {
+    clearNarrationTimers();
+    if (!current.narration || current.loading || current.id !== previous?.id || current.conversationId !== previous?.conversationId) {
+      narrationTracker.reset();
+      retireNarration();
+      if (!current.narration || current.loading) return;
+    }
+    if (!current.enabled) retireNarration();
+    else retireNarration(kind => kind === "thinking" ? !current.thinking
+      : kind === "commentary" ? !current.interim : !current.sounds || !current.working);
+    // Retire disabled tails before enabling a flag; settings are not a request to replay history.
+    if (previous && (current.enabled !== previous.enabled || current.thinking !== previous.thinking || current.interim !== previous.interim)) observeNarration(true, false);
+    refreshNarration(!current.enabled);
+  }, { immediate: true, deep: true });
   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], () => {
+  function currentTranscript() {
     const pending = pendingTranscript.value;
-    const transcript = pending ? { id: pending.messageId, text: pending.text }
-      : recording && ["listening", "transcribing"].includes(voice.captureState.value) && voice.partialTranscript.value
-        ? { id: recording.messageId, text: voice.partialTranscript.value } : null;
-    binding.onTranscript?.(transcript);
-  }, { immediate: true });
+    const currentWords = recording && ["listening", "transcribing"].includes(voice.captureState.value)
+      && voice.partialTranscript.value && recording.messageId !== pending?.messageId;
+    return currentWords ? { id: recording.messageId, text: voice.partialTranscript.value }
+      : pending ? { id: pending.messageId, text: pending.text } : null;
+  }
+  function canTakeTranscript(messageId) {
+    return !disposed && !starting.value && !sending.value && !committing && !takingTranscript.value
+      && (pendingTranscript.value?.messageId === messageId || currentTranscript()?.id === messageId)
+      && !binding.state.messages?.some(message => message.role === "user" && message.id === messageId && message.receipt !== false);
+  }
+  async function beginTranscriptEdit(messageId) {
+    if (!canTakeTranscript(messageId)) return false;
+    const pending = pendingTranscript.value;
+    if (pending && pending.messageId !== messageId) return false;
+    const selected = pending ? { id: pending.messageId, text: pending.text } : currentTranscript();
+    const capture = recording;
+    takingTranscript.value = true;
+    try {
+      // Retain the selected words and destination before cancelling capture.
+      // The existing pending-clear watcher resumes hands-free after resolution.
+      pendingTranscript.value = {
+        ...(pending?.messageId === messageId ? pending : capture),
+        messageId, text: selected.text, reviewBeforeSend: true, editing: true
+      };
+      if (capture) {
+        if (capture.messageId !== messageId && live.value && callMode.value === "hands-free") {
+          // Newer continuous words retain their recording identity and endpoint.
+          if (!microphoneMuted.value) {
+            pendingTranscript.value.editPausedCaptureId = capture.messageId;
+            voice.setMicrophoneMuted(true);
+          }
+        } else if (pushHolding.value) await cancelPushToTalk();
+        else await cancelRecording();
+      }
+      return true;
+    } finally { takingTranscript.value = false; }
+  }
+  async function takeTranscript(messageId, transfer) {
+    if (!canTakeTranscript(messageId)) return false;
+    const pending = pendingTranscript.value;
+    const selected = pending?.messageId === messageId ? { id: messageId, text: pending.text } : currentTranscript();
+    takingTranscript.value = true;
+    try {
+      // The host rechecks its draft and transfers synchronously before cancellation.
+      if (transfer && transfer(selected.text) !== true) return false;
+      if (pendingTranscript.value?.messageId === messageId) dismissTranscript();
+      else if (recording?.messageId === messageId) {
+        if (pushHolding.value) await cancelPushToTalk();
+        else await cancelRecording();
+        if (!disposed && live.value && callMode.value === "hands-free" && !microphoneMuted.value) {
+          await startRecording(false, true);
+        }
+      }
+      return true;
+    } finally { takingTranscript.value = false; }
+  }
+  function publishTranscript() {
+    const transcript = currentTranscript();
+    binding.onTranscript?.(transcript, { canTake: Boolean(transcript && canTakeTranscript(transcript.id)) });
+  }
+  watch([pendingTranscript, voice.captureState, voice.partialTranscript, voice.endpoint, sending, starting, takingTranscript], publishTranscript, { immediate: true });
   watch(avatarVisual, (visual) => binding.onVisual?.(visual), { immediate: true });
   const page = globalThis.window || globalThis;
+  const updateNarrationVisibility = () => {
+    narrationPageVisible.value = globalThis.document?.visibilityState !== "hidden";
+    if (disposed || !hiddenNarrationPage.value || !(recording || starting.value || committing || capturing.value)) return;
+    // This is the original document-hidden capture boundary, not avatar/body
+    // visibility. Retire B before cancellation; A's delivery stays untouched.
+    pushHolding.value = false;
+    pushInput = null;
+    if (!pendingTranscript.value) {
+      holding.value = false;
+      heldReview.value = false;
+    }
+    void discardRecording();
+    voice.stopSpeaking("page-hidden");
+  };
+  globalThis.document?.addEventListener?.("visibilitychange", updateNarrationVisibility);
   const cancelStartup = () => { if (starting.value) void discardRecording(); else void cancelPushToTalk(); };
   page.addEventListener?.("pagehide", cancelStartup);
   page.addEventListener?.("blur", cancelPushToTalk);
   onScopeDispose(() => {
+    globalThis.document?.removeEventListener?.("visibilitychange", updateNarrationVisibility);
     page.removeEventListener?.("pagehide", cancelStartup);
     page.removeEventListener?.("blur", cancelPushToTalk);
     startupAbort?.abort(); startupAbort = null;
@@ -589,18 +832,21 @@ export function useVoiceConversation(binding, { socketUrl, createTransport = use
     stopSpeech();
     await voice.close();
   }
-  function editTranscript(text) {
-    if (pendingTranscript.value && !sending.value) pendingTranscript.value = { ...pendingTranscript.value, text: String(text) };
+  function editTranscript(text, messageId = pendingTranscript.value?.messageId) {
+    if (pendingTranscript.value && pendingTranscript.value.messageId === messageId && !sending.value) pendingTranscript.value = { ...pendingTranscript.value, text: String(text) };
   }
+  const composerBlocked = computed(() => starting.value ||
+    (!live.value || callMode.value !== "hands-free") &&
+      (sending.value || Boolean(pendingTranscript.value) || capturing.value));
   const hasUnsentSpeech = computed(() => capturing.value || starting.value || sending.value || Boolean(pendingTranscript.value));
   return {
-    oneOffTalkMode, targetLabel, voice, readAloud, error, pendingTranscript, heldReview, holding, sending,
+    oneOffTalkMode, targetLabel, voice, readAloud, readAloudChangePending, error, pendingTranscript, heldReview, holding, sending,
     live, starting, callMode, changingCallMode, pushHolding, microphoneMuted, capturing,
     speechActive, talkLabel, liveLabel, callConnection, callStatus, callDetail, callModeBusy,
     microphoneStatus, avatarVisual, callAudioLevel, status, heldTranscript, voiceWords, voiceAnswer,
     stopSpeech, inviteSpeech, toggleReadAloud, enableSound, soundPreparing, deliverTranscript, cancelRecording,
     discardRecording, dismissTranscript, talk, toggleMicrophoneMuted, changeCallMode,
     startPushToTalk, finishPushToTalk, cancelPushToTalk, toggleLive, toggleHandsFree, startHeldRecording,
-    finishHeldRecording, discardHeldRecording, close, editTranscript, hasUnsentSpeech
+    finishHeldRecording, discardHeldRecording, close, editTranscript, canTakeTranscript, beginTranscriptEdit, takeTranscript, hasUnsentSpeech, composerBlocked
   };
 }