@jskit-ai/assistant-voice 0.0.0-stage → 0.1.2

package/examples/conversation/server.js

@@ -0,0 +1,105 @@
+import Fastify from "fastify";
+import websocket from "@fastify/websocket";
+import { randomUUID } from "node:crypto";
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { createAiConnectionResolver } from "@jskit-ai/connectors-catalog/server/ai";
+import { createConversationRuntime, createFileConversationStorage } from "@jskit-ai/assistant-core/server/conversation";
+import { registerFastifyConversations } from "@jskit-ai/assistant-runtime/server";
+import { registerVoiceProxyRoute, resolveVoiceProxyConfig } from "@jskit-ai/assistant-voice/server";
+import { appConfig, conversations } from "./config.js";
+
+export async function createExampleServer({ env = process.env } = {}) {
+  const app = Fastify({ bodyLimit: 16384 });
+  await app.register(websocket);
+  const allowedOrigin = env.APP_ORIGIN || "http://127.0.0.1:5176";
+  const context = Object.freeze({ applicationId: "talking-assistant-example", subjectId: "local-user" });
+  const ids = new Set(conversations.map(value => value.id));
+  function requireLocalRequest(request) {
+    // Normal same-origin GETs may omit Origin. The shared socket readRequest()
+    // reconstructs headers without an HTTP method, so it also requires Origin.
+    // No hosted actor is made up for this local application.
+    if (!request || ((request.method !== "GET" || request.headers?.origin) && request.headers?.origin !== allowedOrigin)) {
+      throw Object.assign(new Error("Open this example on its configured origin."), { statusCode: 403 });
+    }
+  }
+  function authorizedContext(actor) {
+    if (actor === context) return true;
+    if (actor?.applicationId !== context.applicationId || actor?.subjectId !== context.subjectId) return false;
+    requireLocalRequest(actor.requestMeta?.request);
+    return true;
+  }
+  const engine = env.ASSISTANT_ENGINE || "api";
+  const integrationConfiguration = env.ASSISTANT_INTEGRATIONS
+    ? JSON.parse(await readFile(resolve(env.ASSISTANT_INTEGRATIONS), "utf8"))
+    : { schemaVersion: 1, registrations: {}, integrations: {} };
+  const connections = createAiConnectionResolver({
+    configuration: integrationConfiguration, authorize: actor => authorizedContext(actor) ? context : null
+  });
+  const runtime = createConversationRuntime({
+    engine, connections, defaultIntegrationId: "assistant",
+    host: { workdir: resolve(env.ASSISTANT_WORKDIR || ".") },
+    limits: { maxInputCharacters: 8000, maxOutputCharacters: 16000 },
+    storage: createFileConversationStorage({ directory: resolve(env.ASSISTANT_STORAGE_DIRECTORY || ".assistant/conversations") }),
+    authorize: ({ context: actor, conversationId }) => authorizedContext(actor) &&
+      (ids.has(conversationId) || (actor === context && conversationId === "headless"))
+  });
+  function configuration(label) {
+    return {
+      systemPrompt: `You are the assistant for ${label}. Answer briefly in plain language.`,
+      integrationId: env.ASSISTANT_INTEGRATION_ID || (env.ASSISTANT_INTEGRATIONS ? "assistant" : undefined),
+      model: env.ASSISTANT_NATIVE_MODEL || undefined,
+      effort: env.ASSISTANT_NATIVE_EFFORT || undefined
+    };
+  }
+  app.addHook("onClose", () => runtime.close());
+  registerVoiceProxyRoute(app, { route: "/api/conversations/:id/voice", proxyConfig: resolveVoiceProxyConfig({
+    endpoint: env.SPEECH_ENDPOINT, accessTokenFile: env.SPEECH_TOKEN_FILE
+  }), authorize(request) {
+    if (request.headers.origin !== allowedOrigin || !ids.has(request.params.id)) {
+      throw Object.assign(new Error("This conversation is not available for voice."), { statusCode: 403 });
+    }
+  } });
+  try {
+    for (const value of conversations) await runtime.open({ id: value.id, context, configuration: configuration(value.label) });
+    await registerFastifyConversations(app, {
+      runtime, config: appConfig, env,
+      authenticate(request) {
+        requireLocalRequest(request);
+        return context;
+      },
+      bootstrap: () => ({ example: { subjectId: context.subjectId, conversations,
+        provider: ({ claude: "Claude Code", codex: "Codex", opencode: "OpenCode" })[engine] ||
+          (env.ASSISTANT_INTEGRATIONS ? "Application AI connection" : "Configure ASSISTANT_INTEGRATIONS to send messages") } })
+    });
+  }
+  catch (error) { await app.close(); throw error; }
+
+  // A separately addressed server task uses the same runtime/store directly.
+  // It has no browser route and is never automatically resumed or retried.
+  async function runHeadless(text) {
+    const conversation = await runtime.open({ id: "headless", context, configuration: configuration("Headless task") });
+    await conversation.send({ messageId: randomUUID(), text });
+    const state = await conversation.wait();
+    if (state.error) throw new Error(state.error);
+    return state.conversationLog.at(-1)?.assistant?.text || "";
+  }
+  return { app, runtime, runHeadless };
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(resolve(process.argv[1])).href) {
+  const headless = process.argv[2] === "--headless";
+  const headlessText = process.argv.slice(3).join(" ").trim();
+  if (headless && !headlessText) throw new Error("Pass a task after --headless.");
+  const { app, runHeadless } = await createExampleServer();
+  await app.listen({ host: "127.0.0.1", port: 3042 });
+  for (const signal of ["SIGINT", "SIGTERM"]) process.once(signal, () => {
+    app.close().catch(error => { app.log.error(error); process.exitCode = 1; });
+  });
+  console.log("Voice example API ready on 127.0.0.1:3042");
+  if (headless) {
+    runHeadless(headlessText).then(answer => console.log(`Headless task: ${answer}`))
+      .catch(error => console.error(`Headless task failed: ${error.message}`));
+  }
+}

package/examples/conversation/src/error.js

@@ -0,0 +1 @@
+export default {};

package/examples/conversation/src/placement.js

@@ -0,0 +1 @@
+export default [];

package/examples/conversation/src/placementTopology.js

@@ -0,0 +1 @@
+export default [];

package/examples/conversation/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { createJskitClientBootstrapPlugin } from "@jskit-ai/kernel/client/vite";
+const apiTarget = "http://127.0.0.1:3042";
+export default defineConfig({ plugins: [vue(), createJskitClientBootstrapPlugin({ proxyTarget: apiTarget })],
+  server: { proxy: {
+    "/api": { target: apiTarget, ws: true }
+  } }
+});

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@jskit-ai/assistant-voice",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "type": "module",
+  "description": "Duplex voice conversations with application-owned targets, authorization and speech services.",
+  "scripts": {
+    "test": "node --test --test-concurrency=1"
+  },
+  "exports": {
+    "./client": "./src/client/index.js",
+    "./server": "./src/server/index.js",
+    "./shared/protocol": "./src/shared/protocol.js",
+    "./shared/visemes": "./src/shared/visemes.js"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "examples"
+  ],
+  "dependencies": {
+    "@mdi/js": "^7.4.47",
+    "ws": "^8.20.1"
+  },
+  "jskit": {
+    "kind": "runtime",
+    "capabilities": {
+      "provides": [],
+      "requires": []
+    },
+    "runtime": {
+      "client": {
+        "providers": []
+      },
+      "server": {
+        "providers": []
+      }
+    },
+    "metadata": {
+      "apiSummary": {
+        "surfaces": [
+          {
+            "subpath": "./client",
+            "summary": "One application voice controller and Vue modal, with push-to-talk, hands-free capture, playback, review and avatar presentation."
+          },
+          {
+            "subpath": "./server",
+            "summary": "Authorized WebSocket proxy, bounded speech daemon, access tokens and service configuration."
+          },
+          {
+            "subpath": "./shared/protocol",
+            "summary": "Voice control validation, PCM frame limits and streamed speech text segmentation."
+          },
+          {
+            "subpath": "./shared/visemes",
+            "summary": "Shared mouth poses and pronunciation timing for voice avatars."
+          }
+        ],
+        "capabilities": []
+      }
+    }
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vuetify": "^4.0.0"
+  },
+  "devDependencies": {
+    "@fastify/websocket": "^11.3.2"
+  }
+}

package/src/client/ConversationDialog.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { mdiClose, mdiMessageTextOutline, mdiMicrophone, mdiMinus } from "@mdi/js";
+import { useDisplay } from "vuetify";
+
+const { xs } = useDisplay();
+
+const props = defineProps({
+  modelValue: Boolean,
+  activator: { type: Object, default: null },
+  title: { type: String, default: "Assistant" },
+  mode: { type: String, default: "talk" },
+  showModes: Boolean,
+  minimizable: Boolean,
+  closeLabel: { type: String, default: "Close conversation" }
+});
+const emit = defineEmits(["update:modelValue", "update:mode", "minimize"]);
+let dismissedFromActivator = false;
+function outsideClick(event) {
+  // The scrim receives a pointer aimed at the covered launcher.
+  const bounds = props.minimizable && props.activator?.getBoundingClientRect();
+  dismissedFromActivator = Boolean(bounds && event.clientX >= bounds.left && event.clientX <= bounds.right &&
+    event.clientY >= bounds.top && event.clientY <= bounds.bottom);
+}
+function updateOpen(value) {
+  if (!value && dismissedFromActivator) emit("minimize");
+  else emit("update:modelValue", value);
+  dismissedFromActivator = false;
+}
+</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"
+    @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">
+        <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 :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)">
+        <v-tab value="talk" :prepend-icon="mdiMicrophone">Talk</v-tab>
+        <v-tab value="text" :prepend-icon="mdiMessageTextOutline">Text</v-tab>
+      </v-tabs>
+      <div class="conversation-dialog__body"><slot /></div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+/* VOverlay animates its scrim independently of the dialog transition. */
+.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__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); }
+}
+</style>

package/src/client/VoiceAvatar.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { computed } from "vue";
+import { useVoiceAvatar } from "./voiceAvatar.js";
+const props = defineProps({ state: { type: String, default: "idle" }, mouthPose: { type: String, default: "closed" }, mouthLevel: { type: Number, default: 0 } });
+const { blinking, visibleMouthPose, reducedMotion } = useVoiceAvatar(props);
+const mouthHeight = computed(() => reducedMotion.value || visibleMouthPose.value === "closed" ? 3 : Math.max(4, Math.min(18, props.mouthLevel * 28)));
+</script>
+<template>
+  <svg viewBox="0 0 128 128" aria-label="Assistant avatar" role="img" class="voice-avatar">
+    <circle cx="64" cy="64" r="59" fill="currentColor" opacity=".1" />
+    <rect x="25" y="31" width="78" height="66" rx="24" fill="none" stroke="currentColor" stroke-width="3" />
+    <path d="M64 31V21" stroke="currentColor" stroke-width="3" />
+    <circle cx="64" cy="18" r="4" fill="currentColor" />
+    <ellipse v-for="x in [47,81]" :key="x" :cx="x" cy="55" rx="5" :ry="blinking ? 1 : 7" fill="currentColor" />
+    <ellipse cx="64" cy="77" :rx="visibleMouthPose === 'round' ? 6 : 15" :ry="mouthHeight" fill="currentColor" />
+  </svg>
+</template>
+<style scoped>.voice-avatar { color: rgb(var(--v-theme-primary)); width: 100%; height: 100%; }</style>

package/src/client/VoiceConversation.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, ref, useId, watch } from "vue";
+import { mdiMicrophone, mdiMicrophoneOff, mdiStop, mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
+import VoiceAvatar from "./VoiceAvatar.vue";
+import { useVoiceLauncher } from "./voiceLauncher.js";
+
+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 voiceWordsTarget = ref(null);
+const voiceAnswerTarget = ref(null);
+const followWords = ref(true);
+const followAnswer = ref(true);
+function isAtBottom(element) { return element.scrollHeight - element.scrollTop - element.clientHeight < 24; }
+for (const [text, target, following] of [[voiceWords, voiceWordsTarget, followWords], [voiceAnswer, voiceAnswerTarget, followAnswer]]) {
+  watch(text, () => {
+    if (target.value && following.value) target.value.scrollTop = target.value.scrollHeight;
+  }, { flush: "post" });
+}
+</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">
+        <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)">
+          <strong class="text-label-medium">You<span v-if="heldTranscript && voice.listening.value && !microphoneMuted"> · Hearing…</span><span v-else-if="pendingTranscript && !sending"> · Not sent</span></strong>
+          <p class="assistant-voice__caption-text text-body-medium">{{ voiceWords }}</p>
+        </section>
+        <section ref="voiceAnswerTarget" class="assistant-voice__caption" :aria-label="`${targetLabel} latest answer`" tabindex="0" @scroll="followAnswer = isAtBottom($event.currentTarget)">
+          <strong class="text-label-medium">{{ targetLabel }}</strong>
+          <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>
+    </section>
+  </fieldset>
+</template>
+
+<style scoped>
+.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-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/VoiceConversationHost.vue

@@ -0,0 +1,78 @@
+<script setup>
+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 state = props.controller.state;
+async function invoke(operation) {
+  try { await operation(); }
+  catch (error) { state.error = error.message; }
+}
+async function openText() {
+  const opening = state.binding.openText();
+  props.controller.minimize();
+  try { await opening; }
+  catch (error) { props.controller.reveal(); throw error; }
+}
+</script>
+
+<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)"
+    minimizable 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-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">
+      Finish or discard your recording for {{ state.binding.label || 'this conversation' }} before switching to {{ state.nextTarget.label || 'another conversation' }}.
+      <div class="voice-host__switch-actions">
+        <v-btn variant="text" @click="controller.cancelSwitch()">Stay here</v-btn>
+        <v-btn :disabled="state.busy || state.session.sending.value" variant="text" @click="invoke(() => controller.switchTarget({ discard: true }))">Discard and switch</v-btn>
+        <v-btn v-if="!state.session.hasUnsentSpeech.value" :disabled="state.busy" variant="text" @click="invoke(() => controller.switchTarget())">Switch</v-btn>
+      </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>
+    </div>
+  </ConversationDialog>
+  <template v-if="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
+    </v-btn>
+  </template>
+</template>
+
+<style scoped>
+.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>