diff --git a/src/serve/demo.html b/src/serve/demo.html
index d896601..4a41f52 100644
--- a/src/serve/demo.html
+++ b/src/serve/demo.html
@@ -3,1087 +3,561 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>kotoba TTS — voice chat demo</title>
+<title>kotoba — voice</title>
 <style>
   :root {
-    --bg: #0f1115;
-    --panel: #1a1d24;
-    --panel-2: #222632;
-    --border: #2a2f3a;
-    --text: #e6e8ec;
-    --muted: #8a8f99;
+    --bg: #0a0a0f;
+    --surface: #14141f;
+    --surface-2: #1e1e2e;
+    --border: #2a2a3a;
+    --text: #e6e8f0;
+    --muted: #6b6b80;
     --accent: #7c5cff;
-    --accent-hover: #9277ff;
+    --accent-glow: rgba(124, 92, 255, 0.35);
     --danger: #ef4444;
-    --warning: #f59e0b;
     --success: #10b981;
-    --blue: #3b82f6;
-    --purple: #a855f7;
   }
-  * { box-sizing: border-box; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
   html, body {
-    margin: 0; padding: 0;
+    height: 100%; overflow: hidden;
     background: var(--bg); color: var(--text);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-    height: 100%;
   }
-  .container {
-    max-width: 760px;
-    margin: 40px auto;
-    padding: 0 20px 60px;
-  }
-  h1 {
-    font-size: 28px; font-weight: 600;
-    margin: 0 0 4px; letter-spacing: -0.02em;
+
+  .app {
+    display: flex; flex-direction: column;
+    height: 100vh; max-width: 520px; margin: 0 auto;
+    padding: 0 16px;
   }
-  .subtitle { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
 
-  .panel {
-    background: var(--panel);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 16px;
+  /* ---- Header ---- */
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 0 8px;
+    flex-shrink: 0;
+  }
+  .header h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
+  .settings-btn {
+    background: none; border: 1px solid var(--border); border-radius: 8px;
+    color: var(--muted); font-size: 13px; padding: 6px 12px; cursor: pointer;
   }
+  .settings-btn:hover { border-color: var(--accent); color: var(--text); }
 
-  /* ---- Settings ---- */
-  details.settings { cursor: pointer; }
-  details.settings summary {
-    font-size: 14px; font-weight: 500; color: var(--muted);
-    list-style: none; user-select: none;
-    display: flex; align-items: center; gap: 8px;
+  /* ---- Orb ---- */
+  .orb-container {
+    display: flex; align-items: center; justify-content: center;
+    padding: 32px 0 24px;
+    flex-shrink: 0;
+  }
+  .orb {
+    width: 120px; height: 120px; border-radius: 50%;
+    background: radial-gradient(circle at 40% 40%, #3a3a5c, #1a1a2e);
+    box-shadow: 0 0 0 0 var(--accent-glow);
+    transition: box-shadow 0.4s, background 0.4s, transform 0.3s;
+    position: relative;
   }
-  details.settings summary::before {
-    content: "▸"; display: inline-block;
-    transition: transform 0.15s;
+  .orb.recording {
+    background: radial-gradient(circle at 40% 40%, #2d5a3d, #1a2e1a);
+    box-shadow: 0 0 40px 10px rgba(16, 185, 129, 0.3);
+    animation: orb-pulse 1.5s ease-in-out infinite;
   }
-  details.settings[open] summary::before { transform: rotate(90deg); }
-  .settings-grid {
-    margin-top: 16px;
-    display: grid;
-    grid-template-columns: 120px 1fr;
-    gap: 10px 12px;
-    align-items: center;
+  .orb.generating {
+    background: radial-gradient(circle at 40% 40%, #4a3a6c, #2a1a4e);
+    box-shadow: 0 0 50px 15px var(--accent-glow);
+    animation: orb-spin 2s linear infinite;
   }
-  .settings-grid label {
-    font-size: 12px; color: var(--muted);
-    text-align: right;
+  @keyframes orb-pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.06); }
   }
-  input[type="text"], input[type="password"], select, .settings-grid textarea {
-    font-family: inherit; font-size: 13px; color: var(--text);
-    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
-    padding: 8px 10px; outline: none; width: 100%;
+  @keyframes orb-spin {
+    0% { box-shadow: 0 0 50px 15px var(--accent-glow); }
+    50% { box-shadow: 0 0 70px 20px rgba(124, 92, 255, 0.45); }
+    100% { box-shadow: 0 0 50px 15px var(--accent-glow); }
   }
-  .settings-grid textarea { resize: vertical; line-height: 1.4; min-height: 36px; }
-  input[type="text"]:focus, input[type="password"]:focus,
-  select:focus, .settings-grid textarea:focus { border-color: var(--accent); }
-  select {
-    cursor: pointer; appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8f99' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 10px center;
-    padding-right: 30px;
+  .orb-label {
+    text-align: center; font-size: 13px; color: var(--muted);
+    margin-top: 12px;
   }
 
   /* ---- Conversation ---- */
   .conversation {
-    min-height: 240px;
-    max-height: 440px;
-    overflow-y: auto;
-    padding: 4px 4px 8px;
-    display: flex; flex-direction: column; gap: 12px;
-  }
-  .conversation:empty::before {
-    content: "Press Start to begin the conversation.";
-    color: var(--muted); font-size: 13px; font-style: italic;
-    align-self: center; margin-top: 80px;
+    flex: 1; overflow-y: auto;
+    padding: 8px 0;
+    display: flex; flex-direction: column; gap: 10px;
+    min-height: 0;
   }
+  .conversation::-webkit-scrollbar { width: 4px; }
+  .conversation::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
   .msg {
-    max-width: 80%;
-    padding: 10px 14px;
-    border-radius: 12px;
-    font-size: 14px;
-    line-height: 1.5;
-    white-space: pre-wrap;
-    word-wrap: break-word;
+    max-width: 85%; padding: 10px 14px;
+    border-radius: 14px; font-size: 14px; line-height: 1.5;
+    white-space: pre-wrap; word-wrap: break-word;
   }
   .msg.user {
-    align-self: flex-start;
-    background: var(--panel-2);
-    color: var(--text);
-    border-bottom-left-radius: 4px;
-  }
-  .msg.assistant {
     align-self: flex-end;
-    background: var(--accent);
-    color: white;
+    background: var(--accent); color: white;
     border-bottom-right-radius: 4px;
   }
-  .msg .role {
-    font-size: 11px; opacity: 0.7;
-    margin-bottom: 4px; font-weight: 500;
-  }
-
-  /* Interim preview of user speech while listening */
-  .interim {
+  .msg.assistant {
     align-self: flex-start;
-    background: transparent;
-    color: var(--muted);
-    border: 1px dashed var(--border);
-    font-style: italic;
-  }
-
-  /* ---- Status ---- */
-  .status-bar {
-    display: flex; align-items: center; gap: 10px;
-    margin-bottom: 16px;
-    font-size: 13px;
-    color: var(--muted);
+    background: var(--surface-2); color: var(--text);
+    border-bottom-left-radius: 4px;
   }
-  .dot {
-    width: 10px; height: 10px; border-radius: 50%;
-    background: var(--muted);
-    flex-shrink: 0;
+  .msg.partial {
+    opacity: 0.7; border: 1px dashed var(--border);
+    background: transparent;
   }
-  .dot.listening { background: var(--success); animation: pulse 1.2s infinite; }
-  .dot.thinking  { background: var(--blue);    animation: pulse 1.2s infinite; }
-  .dot.speaking  { background: var(--purple);  animation: pulse 1.2s infinite; }
-  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
-
-  /* ---- Controls ---- */
-  .controls { display: flex; gap: 10px; }
-  button {
-    font-family: inherit; font-size: 14px; font-weight: 500;
-    cursor: pointer; transition: all 0.15s;
-    border: none; padding: 12px 20px;
+  .msg.error-msg {
+    align-self: center; color: var(--danger);
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid var(--danger); font-size: 12px;
     border-radius: 8px;
   }
-  button.primary { background: var(--accent); color: white; flex: 1; }
-  button.primary:hover:not(:disabled) { background: var(--accent-hover); }
-  button.danger {
-    background: transparent; color: var(--danger);
-    border: 1px solid var(--danger); flex: 1;
-  }
-  button.danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); }
-  button:disabled { opacity: 0.4; cursor: not-allowed; }
 
-  /* ---- Warning banner ---- */
-  .banner {
-    display: none;
-    margin-bottom: 16px;
-    padding: 10px 14px;
-    background: rgba(245, 158, 11, 0.1);
-    border: 1px solid var(--warning);
-    border-radius: 8px;
-    color: var(--warning);
-    font-size: 13px;
+  /* ---- Controls ---- */
+  .controls {
+    display: flex; justify-content: center; gap: 16px;
+    padding: 16px 0 24px;
+    flex-shrink: 0;
   }
-  .banner.visible { display: block; }
-
-  .footer { margin-top: 24px; text-align: center; color: var(--muted); font-size: 12px; }
-  a { color: var(--accent); text-decoration: none; }
-  a:hover { text-decoration: underline; }
-  code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; }
+  .ctrl-btn {
+    width: 64px; height: 64px; border-radius: 50%; border: none;
+    cursor: pointer; font-size: 24px; transition: all 0.2s;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ctrl-btn.mic {
+    background: var(--accent); color: white;
+  }
+  .ctrl-btn.mic:hover { transform: scale(1.08); }
+  .ctrl-btn.mic.active {
+    background: var(--danger); animation: mic-pulse 1.2s infinite;
+  }
+  @keyframes mic-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
+    50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
+  }
+  .ctrl-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
+
+  /* ---- Settings modal ---- */
+  .modal-overlay {
+    display: none; position: fixed; inset: 0;
+    background: rgba(0,0,0,0.6); z-index: 100;
+    align-items: center; justify-content: center;
+  }
+  .modal-overlay.open { display: flex; }
+  .modal {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: 16px; padding: 24px; width: 90%; max-width: 420px;
+    max-height: 80vh; overflow-y: auto;
+  }
+  .modal h2 { font-size: 16px; margin-bottom: 16px; }
+  .field { margin-bottom: 12px; }
+  .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
+  .field input, .field select, .field textarea {
+    width: 100%; font-family: inherit; font-size: 13px;
+    color: var(--text); background: var(--bg);
+    border: 1px solid var(--border); border-radius: 8px;
+    padding: 8px 10px; outline: none;
+  }
+  .field textarea { resize: vertical; min-height: 60px; line-height: 1.4; }
+  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
+  .modal-actions { display: flex; gap: 8px; margin-top: 16px; }
+  .modal-actions button {
+    flex: 1; padding: 10px; border: none; border-radius: 8px;
+    font-size: 13px; font-weight: 500; cursor: pointer;
+  }
+  .btn-save { background: var(--accent); color: white; }
+  .btn-cancel { background: var(--surface-2); color: var(--muted); }
 </style>
 </head>
 <body>
-<div class="container">
-  <h1>kotoba — voice chat</h1>
-  <div class="subtitle">Real-time multilingual voice conversation · STT → LLM → streaming TTS</div>
-
-  <!-- Settings panel -->
-  <div class="panel">
-    <details class="settings">
-      <summary>Settings</summary>
-      <div class="settings-grid">
-        <label for="llm-url">LLM URL</label>
-        <input type="text" id="llm-url" value="http://localhost:11434/v1"
-               placeholder="https://api.openai.com/v1">
-
-        <label for="llm-key">API Key</label>
-        <input type="password" id="llm-key" value=""
-               placeholder="sk-... (optional, stored in localStorage)">
-
-        <label for="llm-model">Model</label>
-        <input type="text" id="llm-model" value="qwen2.5:7b"
-               placeholder="gpt-4o-mini, qwen2.5:7b, ...">
-
-        <label for="lang">Language</label>
-        <select id="lang">
-          <option value="ja-JP">日本語 (ja-JP)</option>
-          <option value="zh-CN">中文 (zh-CN)</option>
-          <option value="zh-TW">中文繁體 (zh-TW)</option>
-          <option value="en-US">English (en-US)</option>
-        </select>
-
-        <label for="voice">Voice</label>
-        <select id="voice"></select>
-
-        <label for="system-prompt">System</label>
-        <textarea id="system-prompt" rows="2"
-          >You are a friendly conversation partner. Reply in the same language as the user, and keep responses short and natural.</textarea>
-      </div>
-    </details>
+<div class="app">
+  <div class="header">
+    <h1>kotoba voice</h1>
+    <button class="settings-btn" id="settings-btn">Settings</button>
   </div>
 
-  <!-- Warning banner (e.g. LLM unreachable, STT unsupported) -->
-  <div class="banner" id="banner"></div>
+  <div class="orb-container">
+    <div>
+      <div class="orb" id="orb"></div>
+      <div class="orb-label" id="orb-label">tap to start</div>
+    </div>
+  </div>
 
-  <!-- Conversation panel -->
-  <div class="panel">
-    <div class="conversation" id="conversation"></div>
+  <div class="conversation" id="conversation"></div>
+
+  <div class="controls">
+    <button class="ctrl-btn mic" id="mic-btn" title="Hold to talk / tap to toggle">
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+        <line x1="12" y1="19" x2="12" y2="23"/>
+        <line x1="8" y1="23" x2="16" y2="23"/>
+      </svg>
+    </button>
   </div>
+</div>
 
-  <!-- Status + controls -->
-  <div class="panel">
-    <div class="status-bar">
-      <div class="dot" id="dot"></div>
-      <span id="status-text">idle</span>
+<!-- Settings modal -->
+<div class="modal-overlay" id="modal-overlay">
+  <div class="modal">
+    <h2>Settings</h2>
+    <div class="field">
+      <label>ASR URL</label>
+      <input type="text" id="s-asr-url" placeholder="http://localhost:8000/v1/audio/transcriptions">
     </div>
-    <div class="controls">
-      <button id="start" class="primary">Start Conversation</button>
-      <button id="stop" class="danger" disabled>Stop</button>
+    <div class="field">
+      <label>LLM URL</label>
+      <input type="text" id="s-llm-url" placeholder="http://localhost:11434/v1">
+    </div>
+    <div class="field">
+      <label>LLM API Key</label>
+      <input type="password" id="s-llm-key" placeholder="sk-... (optional)">
+    </div>
+    <div class="field">
+      <label>LLM Model</label>
+      <input type="text" id="s-llm-model" placeholder="qwen2.5:7b">
+    </div>
+    <div class="field">
+      <label>Voice</label>
+      <input type="text" id="s-voice" placeholder="kokoro:jf_alpha">
+    </div>
+    <div class="field">
+      <label>System Prompt</label>
+      <textarea id="s-system-prompt" rows="3"></textarea>
+    </div>
+    <div class="modal-actions">
+      <button class="btn-cancel" id="modal-cancel">Cancel</button>
+      <button class="btn-save" id="modal-save">Save</button>
     </div>
-  </div>
-
-  <div class="footer">
-    <code>WS /ws/tts</code> · <code>POST /v1/chat/completions</code> ·
-    <a href="https://github.com/rararulab/kotoba">github.com/rararulab/kotoba</a>
   </div>
 </div>
 
 <script>
 // ============================================================================
-// kotoba voice chat demo
-//
-// Pipeline: browser SpeechRecognition (STT) -> OpenAI-compatible LLM
-//           -> sentence buffer -> /ws/tts WebSocket -> Web Audio playback.
+// kotoba voice — mlx-live-style real-time voice conversation
 //
-// Key design points:
-// - Interruption: if the user starts talking while the assistant is
-//   speaking, we cancel TTS, abort the LLM fetch, and flush the audio queue.
-// - One persistent /ws/tts socket per LLM response, so we avoid
-//   reconnect latency between sentences.
-// - Sentences are split on Japanese punctuation (。！？) and newlines
-//   as tokens stream in, so the first sentence can be spoken before
-//   the LLM has finished generating.
-// - If the LLM endpoint is unreachable, we fall back to an "echo mode"
-//   so the end-to-end voice loop still works without any local LLM.
+// Pipeline: browser mic (AudioWorklet PCM) -> WS /ws/voice (server-side
+// VAD + ASR + LLM + TTS) -> float32 PCM playback via AudioContext.
 // ============================================================================
 
-const $ = (id) => document.getElementById(id);
-
-const el = {
-  dot:         $('dot'),
-  statusText:  $('status-text'),
-  startBtn:    $('start'),
-  stopBtn:     $('stop'),
-  conversation:$('conversation'),
-  banner:      $('banner'),
-  voice:       $('voice'),
-  llmUrl:      $('llm-url'),
-  llmKey:      $('llm-key'),
-  llmModel:    $('llm-model'),
-  lang:        $('lang'),
-  systemPrompt:$('system-prompt'),
+const STORAGE_PREFIX = 'kotoba.voice.';
+const DEFAULTS = {
+  asrUrl: 'http://localhost:8000/v1/audio/transcriptions',
+  llmUrl: 'http://localhost:11434/v1',
+  llmKey: '',
+  llmModel: 'qwen2.5:7b',
+  voice: 'kokoro:jf_alpha',
+  systemPrompt: 'You are a friendly conversation partner. Reply in the same language as the user, and keep responses short and natural.',
 };
 
-// Persist sensitive settings (URL, API key, model) in localStorage so users
-// don't have to re-enter them on every page load.
-const STORAGE_KEYS = {
-  llmUrl:       'kotoba.demo.llmUrl',
-  llmKey:       'kotoba.demo.llmKey',
-  llmModel:     'kotoba.demo.llmModel',
-  lang:         'kotoba.demo.lang',
-  systemPrompt: 'kotoba.demo.systemPrompt',
-};
-for (const [field, key] of Object.entries(STORAGE_KEYS)) {
-  const stored = localStorage.getItem(key);
-  if (stored !== null && el[field]) el[field].value = stored;
-  // Use `input` (fires on every keystroke / select change) rather than
-  // `change` (which only fires on blur for text inputs and textareas), so
-  // settings persist even if the user clicks Start without leaving the
-  // field first.
-  if (el[field]) el[field].addEventListener('input', () => {
-    localStorage.setItem(key, el[field].value);
-  });
+function loadSettings() {
+  const s = {};
+  for (const [k, v] of Object.entries(DEFAULTS)) {
+    s[k] = localStorage.getItem(STORAGE_PREFIX + k) || v;
+  }
+  return s;
+}
+function saveSettings(s) {
+  for (const [k, v] of Object.entries(s)) {
+    localStorage.setItem(STORAGE_PREFIX + k, v);
+  }
 }
 
-// ---------------------------------------------------------------------------
-// State
-// ---------------------------------------------------------------------------
-
-/** Finite state machine states for the conversation loop. */
-const State = Object.freeze({
-  IDLE:      'idle',
-  LISTENING: 'listening',
-  THINKING:  'thinking',
-  SPEAKING:  'speaking',
-});
-
-let state = State.IDLE;
-
-/** Whether the user has pressed "Start Conversation". When false,
- *  any `recognition.onend` event terminates the loop instead of
- *  auto-restarting. */
-let running = false;
-
-/** Rolling chat history (user + assistant turns), capped at 10 entries
- *  so we don't let prompts grow without bound. */
-const history = [];
-const HISTORY_MAX = 10;
-
-/** The SpeechRecognition instance. Recreated per listening session
- *  because some browsers don't cleanly reuse it after errors. */
-let recognition = null;
-/** Whether recognition auto-restart is currently desired. */
-let recognitionShouldRun = false;
-
-/** AbortController for the in-flight LLM fetch, so user interruptions
- *  can cancel it immediately. */
-let llmAbort = null;
+let settings = loadSettings();
 
-/** The persistent TTS WebSocket for the current assistant turn. */
-let ttsWs = null;
-/** Number of sentence-level TTS requests sent and waiting for terminal
- *  server responses (`done`/`error`/`cancelled`). */
-let ttsInFlight = 0;
-/** Deferred resolvers for callers waiting until all in-flight TTS requests
- *  have finished. */
-let ttsDrainResolvers = [];
+// DOM refs
+const orbEl = document.getElementById('orb');
+const orbLabel = document.getElementById('orb-label');
+const convEl = document.getElementById('conversation');
+const micBtn = document.getElementById('mic-btn');
+const settingsBtn = document.getElementById('settings-btn');
+const modalOverlay = document.getElementById('modal-overlay');
 
-/** Web Audio context (lazy-created on first user gesture so Safari
- *  doesn't block it). */
+// State
+let ws = null;
 let audioCtx = null;
-
-/** Decoded AudioBuffers waiting to be played in order. */
-let playQueue = [];
-
-/** The currently playing AudioBufferSourceNode, kept so we can stop
- *  it on interruption. */
-let currentSource = null;
+let mediaStream = null;
+let workletNode = null;
+let isConnected = false;
+let playbackQueue = [];
 let isPlaying = false;
+let nextPlayTime = 0;
+let outputSampleRate = 24000;
+
+// ---- Settings modal ----
+settingsBtn.onclick = () => {
+  document.getElementById('s-asr-url').value = settings.asrUrl;
+  document.getElementById('s-llm-url').value = settings.llmUrl;
+  document.getElementById('s-llm-key').value = settings.llmKey;
+  document.getElementById('s-llm-model').value = settings.llmModel;
+  document.getElementById('s-voice').value = settings.voice;
+  document.getElementById('s-system-prompt').value = settings.systemPrompt;
+  modalOverlay.classList.add('open');
+};
+document.getElementById('modal-cancel').onclick = () => {
+  modalOverlay.classList.remove('open');
+};
+document.getElementById('modal-save').onclick = () => {
+  settings = {
+    asrUrl: document.getElementById('s-asr-url').value || DEFAULTS.asrUrl,
+    llmUrl: document.getElementById('s-llm-url').value || DEFAULTS.llmUrl,
+    llmKey: document.getElementById('s-llm-key').value,
+    llmModel: document.getElementById('s-llm-model').value || DEFAULTS.llmModel,
+    voice: document.getElementById('s-voice').value || DEFAULTS.voice,
+    systemPrompt: document.getElementById('s-system-prompt').value || DEFAULTS.systemPrompt,
+  };
+  saveSettings(settings);
+  modalOverlay.classList.remove('open');
+  // Reconnect with new settings if active.
+  if (isConnected) { disconnect(); connect(); }
+};
 
-/** The DOM element for the currently streaming assistant message,
- *  so we can append tokens as they arrive. */
-let currentAssistantEl = null;
-
-/** The DOM element that previews interim (not-yet-final) STT text. */
-let interimEl = null;
-/** Monotonic turn id used to invalidate stale async turn continuations. */
-let activeTurnId = 0;
-/** Assistant text visible to the user in the current turn, used for
- *  echo-guard heuristics during barge-in detection. */
-let currentAssistantText = '';
-/** Timestamp when we entered speaking state for the current turn. */
-let speakingStartedAtMs = 0;
-/** Timestamp when assistant playback finished in the previous turn. */
-let lastAssistantFinishedAtMs = 0;
-
-// ---------------------------------------------------------------------------
-// UI helpers
-// ---------------------------------------------------------------------------
-
-function setState(next, text) {
-  state = next;
-  el.dot.className = 'dot ' + (next === State.IDLE ? '' : next);
-  el.statusText.textContent = text || next;
-}
-
-function showBanner(message) {
-  el.banner.textContent = message;
-  el.banner.classList.add('visible');
+// ---- Orb state ----
+function setPhase(phase) {
+  orbEl.className = 'orb';
+  if (phase === 'recording' || phase === 'idle') {
+    // When connected, the mic is always live — show recording state.
+    if (isConnected) {
+      orbEl.classList.add('recording');
+      orbLabel.textContent = 'listening...';
+    } else {
+      orbLabel.textContent = 'tap to start';
+    }
+  } else if (phase === 'generating') {
+    orbEl.classList.add('generating');
+    orbLabel.textContent = 'thinking...';
+  }
 }
 
-function hideBanner() {
-  el.banner.classList.remove('visible');
-}
+// ---- Conversation UI ----
+let partialEl = null;
 
-function appendMessage(role, text) {
+function addMessage(role, text) {
+  // Remove partial if it exists.
+  removePartial();
   const div = document.createElement('div');
   div.className = 'msg ' + role;
-  const roleLabel = document.createElement('div');
-  roleLabel.className = 'role';
-  roleLabel.textContent = role === 'user' ? '👤 ユーザー' : '🤖 アシスタント';
-  const body = document.createElement('div');
-  body.textContent = text;
-  div.appendChild(roleLabel);
-  div.appendChild(body);
-  el.conversation.appendChild(div);
-  el.conversation.scrollTop = el.conversation.scrollHeight;
-  return body;
+  div.textContent = text;
+  convEl.appendChild(div);
+  convEl.scrollTop = convEl.scrollHeight;
 }
 
-function showInterim(text) {
-  if (!interimEl) {
-    const div = document.createElement('div');
-    div.className = 'msg interim';
-    const roleLabel = document.createElement('div');
-    roleLabel.className = 'role';
-    roleLabel.textContent = '👤 ユーザー (speaking…)';
-    const body = document.createElement('div');
-    div.appendChild(roleLabel);
-    div.appendChild(body);
-    el.conversation.appendChild(div);
-    interimEl = { wrap: div, body };
-  }
-  interimEl.body.textContent = text;
-  el.conversation.scrollTop = el.conversation.scrollHeight;
-}
-
-function clearInterim() {
-  if (interimEl) {
-    interimEl.wrap.remove();
-    interimEl = null;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Voices
-// ---------------------------------------------------------------------------
-
-// Map a UI language code to the Kokoro voice prefix that best matches it.
-// Kokoro v1.0 uses single-letter prefixes: a/b = English, j = Japanese,
-// z = Mandarin Chinese, etc.
-function preferredKokoroPrefixForLang(lang) {
-  if (lang.startsWith('zh')) return 'z';
-  if (lang.startsWith('ja')) return 'j';
-  if (lang.startsWith('en')) return 'a';
-  return null;
-}
-
-// Pick a sensible default voice for the currently selected language.
-function pickDefaultVoiceForLang(lang) {
-  const prefix = preferredKokoroPrefixForLang(lang);
-  if (!prefix) return null;
-  for (const opt of el.voice.options) {
-    const id = opt.value;
-    // strip "kokoro:" prefix if present
-    const name = id.startsWith('kokoro:') ? id.slice(7) : id;
-    if (name.startsWith(prefix)) return id;
-  }
-  return null;
+function addError(text) {
+  const div = document.createElement('div');
+  div.className = 'msg error-msg';
+  div.textContent = text;
+  convEl.appendChild(div);
+  convEl.scrollTop = convEl.scrollHeight;
 }
 
-async function loadVoices() {
-  try {
-    const r = await fetch('/v1/voices');
-    const data = await r.json();
-    el.voice.innerHTML = '';
-    if (!data.voices || data.voices.length === 0) {
-      el.voice.innerHTML = '<option value="kokoro:jf_alpha">kokoro:jf_alpha (default)</option>';
-      return;
-    }
-    for (const v of data.voices) {
-      const opt = document.createElement('option');
-      opt.value = v.id;
-      opt.textContent = `${v.id} — ${v.name}`;
-      el.voice.appendChild(opt);
-    }
-    // Auto-select a voice that matches the currently chosen language.
-    const def = pickDefaultVoiceForLang(el.lang.value);
-    if (def) el.voice.value = def;
-  } catch (e) {
-    el.voice.innerHTML = '<option value="kokoro:jf_alpha">kokoro:jf_alpha (default)</option>';
+function updatePartial(text) {
+  if (!partialEl) {
+    partialEl = document.createElement('div');
+    partialEl.className = 'msg assistant partial';
+    convEl.appendChild(partialEl);
   }
+  partialEl.textContent = text;
+  convEl.scrollTop = convEl.scrollHeight;
 }
 
-// When the user changes language, snap voice to a matching language voice
-// (only if their current voice is from a different language family).
-function syncVoiceToLanguage() {
-  const currentPrefix = el.voice.value.replace(/^kokoro:/, '').charAt(0);
-  const desiredPrefix = preferredKokoroPrefixForLang(el.lang.value);
-  if (desiredPrefix && currentPrefix !== desiredPrefix) {
-    const match = pickDefaultVoiceForLang(el.lang.value);
-    if (match) el.voice.value = match;
+function removePartial() {
+  if (partialEl) {
+    partialEl.remove();
+    partialEl = null;
   }
 }
 
-// ---------------------------------------------------------------------------
-// Audio playback
-// ---------------------------------------------------------------------------
-
-// Create or return the AudioContext. Browsers create it in `suspended`
-// state until a user gesture; callers must `await resumeAudioCtx()` from
-// inside a click handler to actually unlock it.
+// ---- Audio playback ----
 function ensureAudioCtx() {
   if (!audioCtx) {
-    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    audioCtx = new AudioContext();
   }
-  return audioCtx;
-}
-
-// Resume the AudioContext if it's suspended. Safe to call repeatedly.
-async function resumeAudioCtx() {
-  const ctx = ensureAudioCtx();
-  if (ctx.state === 'suspended') {
-    try { await ctx.resume(); }
-    catch (e) { console.error('audio resume failed', e); }
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume();
   }
-  return ctx;
 }
 
-async function enqueueAudio(bytes) {
-  try {
-    // Safari can re-suspend the context between user gesture and playback,
-    // so defensively resume before decoding.
-    const ctx = await resumeAudioCtx();
-    // decodeAudioData mutates the ArrayBuffer; slice to be safe.
-    const buffer = await ctx.decodeAudioData(bytes.slice(0));
-    playQueue.push(buffer);
-    if (!isPlaying) playNext();
-  } catch (e) {
-    console.error('audio decode failed', e);
-  }
+function queueAudio(float32Samples) {
+  ensureAudioCtx();
+  const buffer = audioCtx.createBuffer(1, float32Samples.length, outputSampleRate);
+  buffer.getChannelData(0).set(float32Samples);
+  playbackQueue.push(buffer);
+  if (!isPlaying) scheduleNext();
 }
 
-function playNext() {
-  if (playQueue.length === 0) {
+function scheduleNext() {
+  if (playbackQueue.length === 0) {
     isPlaying = false;
-    currentSource = null;
     return;
   }
   isPlaying = true;
-  const buffer = playQueue.shift();
-  const src = audioCtx.createBufferSource();
-  src.buffer = buffer;
-  src.connect(audioCtx.destination);
-  src.onended = () => {
-    if (currentSource === src) currentSource = null;
-    playNext();
-  };
-  currentSource = src;
-  src.start();
-}
-
-function flushAudio() {
-  playQueue = [];
-  if (currentSource) {
-    try { currentSource.onended = null; currentSource.stop(); }
-    catch (_) { /* already stopped */ }
-    currentSource = null;
-  }
-  isPlaying = false;
-}
-
-// ---------------------------------------------------------------------------
-// TTS WebSocket
-// ---------------------------------------------------------------------------
-
-function openTtsSocket() {
-  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
-  const ws = new WebSocket(`${proto}://${location.host}/ws/tts`);
-  ws.binaryType = 'arraybuffer';
-
-  ws.addEventListener('message', async (ev) => {
-    if (ev.data instanceof ArrayBuffer) {
-      await enqueueAudio(ev.data);
-      return;
-    }
-    try {
-      const msg = JSON.parse(ev.data);
-      if (msg.type === 'done' || msg.type === 'error' || msg.type === 'cancelled') {
-        settleOneTtsRequest();
-      }
-      if (msg.type === 'error') {
-        console.warn('tts error', msg.message);
-      }
-    } catch (_) { /* ignore non-JSON text */ }
-  });
-
-  ws.addEventListener('error', () => {
-    console.warn('tts ws error');
-  });
-  ws.addEventListener('close', () => {
-    // Unexpected close with outstanding requests would otherwise leave the
-    // turn waiting forever.
-    if (ttsInFlight > 0) {
-      console.warn('tts ws closed with pending requests', ttsInFlight);
-      resetTtsDrainState();
-    }
-  });
+  const buffer = playbackQueue.shift();
+  const source = audioCtx.createBufferSource();
+  source.buffer = buffer;
+  source.connect(audioCtx.destination);
 
-  return ws;
-}
+  const now = audioCtx.currentTime;
+  const startTime = Math.max(now, nextPlayTime);
+  source.start(startTime);
+  nextPlayTime = startTime + buffer.duration;
 
-function settleOneTtsRequest() {
-  if (ttsInFlight > 0) ttsInFlight -= 1;
-  resolveTtsDrainWaiters();
+  source.onended = () => scheduleNext();
 }
 
-function resolveTtsDrainWaiters() {
-  if (ttsInFlight !== 0) return;
-  const waiters = ttsDrainResolvers;
-  ttsDrainResolvers = [];
-  for (const resolve of waiters) resolve();
+function flushPlayback() {
+  playbackQueue = [];
+  nextPlayTime = 0;
+  isPlaying = false;
 }
 
-function resetTtsDrainState() {
-  ttsInFlight = 0;
-  resolveTtsDrainWaiters();
-}
+// ---- WebSocket + mic ----
+async function connect() {
+  ensureAudioCtx();
+
+  // Build WS URL with query params.
+  const loc = window.location;
+  const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
+  const params = new URLSearchParams({
+    asr_url: settings.asrUrl,
+    llm_url: settings.llmUrl,
+    llm_key: settings.llmKey,
+    llm_model: settings.llmModel,
+    voice: settings.voice,
+    system_prompt: settings.systemPrompt,
+  });
+  const url = `${proto}//${loc.host}/ws/voice?${params}`;
 
-function waitForTtsDrain() {
-  if (ttsInFlight === 0) return Promise.resolve();
-  return new Promise((resolve) => ttsDrainResolvers.push(resolve));
-}
+  ws = new WebSocket(url);
+  ws.binaryType = 'arraybuffer';
 
-function sendSentenceToTts(sentence) {
-  if (!sentence || sentence.trim().length === 0) return;
-  if (!ttsWs) ttsWs = openTtsSocket();
-  // Capture a local reference: the deferred 'open' callback may fire after
-  // the module-global `ttsWs` has been cleared by post-turn cleanup, and
-  // we must still send on the same socket the sentence was queued for.
-  const ws = ttsWs;
-  const payload = {
-    type: 'tts',
-    text: sentence,
-    voice: el.voice.value,
+  ws.onopen = async () => {
+    isConnected = true;
+    micBtn.classList.add('active');
+    setPhase('idle');
+    await startMic();
   };
-  // Count this request as in-flight immediately, including the period while
-  // we are waiting for the socket to transition from CONNECTING to OPEN.
-  ttsInFlight += 1;
-  const send = () => {
-    if (ws.readyState !== WebSocket.OPEN) {
-      settleOneTtsRequest();
+
+  ws.onmessage = (event) => {
+    if (event.data instanceof ArrayBuffer) {
+      // Float32 PCM audio from TTS.
+      const float32 = new Float32Array(event.data);
+      queueAudio(float32);
       return;
     }
+    // JSON text frame.
     try {
-      ws.send(JSON.stringify(payload));
-    }
-    catch (e) {
-      console.warn('tts send failed', e);
-      settleOneTtsRequest();
+      const msg = JSON.parse(event.data);
+      handleServerMessage(msg);
+    } catch (e) {
+      console.error('bad server message', e);
     }
   };
-  if (ws.readyState === WebSocket.OPEN) {
-    send();
-  } else if (ws.readyState === WebSocket.CONNECTING) {
-    ws.addEventListener('open', send, { once: true });
-  } else {
-    settleOneTtsRequest();
-  }
-}
-
-function cancelTts() {
-  if (ttsWs && ttsWs.readyState === WebSocket.OPEN) {
-    try { ttsWs.send(JSON.stringify({ type: 'cancel' })); }
-    catch (_) { /* ignore */ }
-  }
-  if (ttsWs) {
-    try { ttsWs.close(); } catch (_) { /* ignore */ }
-    ttsWs = null;
-  }
-  resetTtsDrainState();
-  flushAudio();
-}
-
-// ---------------------------------------------------------------------------
-// Sentence splitter
-//
-// Scans a running buffer for Japanese sentence terminators plus newlines,
-// emits each complete sentence, and returns the unflushed remainder. The
-// caller keeps the remainder and re-feeds it with the next token batch.
-// ---------------------------------------------------------------------------
-
-const SENTENCE_TERMINATORS = new Set(['。', '！', '？', '!', '?', '\n']);
-
-function extractSentences(buffer) {
-  const sentences = [];
-  let start = 0;
-  // Iterate by code units; sentence terminators are all BMP chars.
-  for (let i = 0; i < buffer.length; i++) {
-    if (SENTENCE_TERMINATORS.has(buffer[i])) {
-      const piece = buffer.slice(start, i + 1).trim();
-      if (piece.length > 0) sentences.push(piece);
-      start = i + 1;
-    }
-  }
-  const remainder = buffer.slice(start);
-  return { sentences, remainder };
-}
 
-// Remove model reasoning blocks wrapped by `<think>...</think>` from text
-// before showing UI text or forwarding content to TTS.
-function stripThinkingBlocks(text) {
-  return text.replace(/<think\b[^>]*>[\s\S]*?(?:<\/think>|$)/gi, '');
-}
-
-// Normalize text for fuzzy echo comparison between what the assistant just
-// said and what SpeechRecognition captured while speaking.
-function normalizeForEchoCompare(text) {
-  return text
-    .toLowerCase()
-    .replace(/[\s\u3000]/g, '')
-    .replace(/[，。！？、,.!?:;"'“”‘’（）()\-]/g, '');
-}
+  ws.onclose = () => {
+    isConnected = false;
+    micBtn.classList.remove('active');
+    setPhase('idle');
+    stopMic();
+  };
 
-// Heuristic: if the recognized fragment is mostly contained in the current
-// assistant reply, it's likely speaker echo rather than a real interruption.
-function isLikelyAssistantEcho(recognizedText) {
-  const heard = normalizeForEchoCompare(recognizedText);
-  const spoken = normalizeForEchoCompare(currentAssistantText);
-  if (!heard || heard.length < 2 || !spoken) return false;
-  return spoken.includes(heard);
+  ws.onerror = (err) => {
+    console.error('WS error', err);
+    addError('WebSocket connection failed');
+  };
 }
 
-// ---------------------------------------------------------------------------
-// LLM streaming
-// ---------------------------------------------------------------------------
-
-/**
- * Stream a completion from an OpenAI-compatible endpoint. Calls
- * `onToken(text)` for each delta chunk. Returns the full assistant text,
- * or throws on network / HTTP failure.
- */
-async function streamLlm(userText, onToken) {
-  llmAbort = new AbortController();
-
-  const messages = [
-    { role: 'system', content: el.systemPrompt.value },
-    ...history,
-    { role: 'user', content: userText },
-  ];
-
-  const headers = { 'Content-Type': 'application/json' };
-  const apiKey = el.llmKey.value.trim();
-  if (apiKey) {
-    headers['Authorization'] = `Bearer ${apiKey}`;
-  }
-
-  const resp = await fetch(`${el.llmUrl.value.replace(/\/+$/, '')}/chat/completions`, {
-    method:  'POST',
-    headers,
-    body:    JSON.stringify({
-      model:   el.llmModel.value,
-      messages,
-      stream:  true,
-    }),
-    signal: llmAbort.signal,
-  });
-
-  if (!resp.ok) {
-    throw new Error(`LLM HTTP ${resp.status}`);
-  }
-
-  const reader = resp.body.getReader();
-  const decoder = new TextDecoder();
-  let sseBuffer = '';
-  let full = '';
-
-  while (true) {
-    const { value, done } = await reader.read();
-    if (done) break;
-    sseBuffer += decoder.decode(value, { stream: true });
-
-    // SSE: events separated by \n\n, each line inside starts with `data: `.
-    let newlineIdx;
-    while ((newlineIdx = sseBuffer.indexOf('\n')) !== -1) {
-      const line = sseBuffer.slice(0, newlineIdx).trim();
-      sseBuffer = sseBuffer.slice(newlineIdx + 1);
-      if (!line.startsWith('data:')) continue;
-      const payload = line.slice(5).trim();
-      if (payload === '[DONE]') return full;
-      try {
-        const json = JSON.parse(payload);
-        const delta = json.choices?.[0]?.delta?.content || '';
-        if (delta) {
-          full += delta;
-          onToken(delta);
-        }
-      } catch (_) { /* partial json, skip */ }
-    }
+function disconnect() {
+  if (ws) { ws.close(); ws = null; }
+  stopMic();
+  flushPlayback();
+  isConnected = false;
+  micBtn.classList.remove('active');
+  setPhase('idle');
+}
+
+function handleServerMessage(msg) {
+  switch (msg.type) {
+    case 'init':
+      outputSampleRate = msg.outputSampleRate || 24000;
+      break;
+    case 'state':
+      setPhase(msg.phase);
+      break;
+    case 'asr':
+      addMessage('user', msg.text);
+      break;
+    case 'llm_partial':
+      updatePartial(msg.text);
+      break;
+    case 'interrupt':
+      flushPlayback();
+      removePartial();
+      break;
+    case 'done':
+      // Finalize partial as a real message.
+      if (partialEl) {
+        const text = partialEl.textContent;
+        removePartial();
+        addMessage('assistant', text);
+      }
+      setPhase('idle');
+      break;
+    case 'error':
+      addError(msg.message);
+      setPhase('idle');
+      break;
   }
-  return full;
 }
 
-// ---------------------------------------------------------------------------
-// Conversation turn: user text -> LLM (or echo) -> TTS
-// ---------------------------------------------------------------------------
-
-async function handleUserTurn(userText) {
-  if (!running) return;
-  const turnId = ++activeTurnId;
-  setState(State.THINKING, 'thinking…');
-
-  // Push user message to history + UI.
-  history.push({ role: 'user', content: userText });
-  if (history.length > HISTORY_MAX) history.splice(0, history.length - HISTORY_MAX);
-  appendMessage('user', userText);
-
-  // Create assistant bubble to stream tokens into.
-  currentAssistantEl = appendMessage('assistant', '');
-
-  // Running buffer used by the sentence splitter.
-  let textBuffer = '';
-  // Raw model text can include `<think>...</think>` blocks. We keep a raw
-  // stream and derive the visible/speakable text incrementally.
-  let rawText = '';
-  let visibleText = '';
-  currentAssistantText = '';
-
-  // Start (or reuse) the TTS socket for this turn.
-  resetTtsDrainState();
-  if (ttsWs) {
-    try { ttsWs.close(); } catch (_) { /* ignore */ }
-  }
-  ttsWs = openTtsSocket();
-
-  const onToken = (delta) => {
-    if (!running || turnId !== activeTurnId) return;
-    rawText += delta;
-    const nextVisible = stripThinkingBlocks(rawText);
-    const visibleDelta = nextVisible.slice(visibleText.length);
-    if (!visibleDelta) return;
-    visibleText = nextVisible;
-
-    // First visible token = transition to speaking and arm barge-in.
-    if (state === State.THINKING) {
-      setState(State.SPEAKING, 'speaking…');
-      speakingStartedAtMs = Date.now();
-      recognitionShouldRun = true;
-      startRecognition();
-    }
-    currentAssistantEl.textContent += visibleDelta;
-    currentAssistantText += visibleDelta;
-    el.conversation.scrollTop = el.conversation.scrollHeight;
-
-    textBuffer += visibleDelta;
-    const { sentences, remainder } = extractSentences(textBuffer);
-    textBuffer = remainder;
-    for (const s of sentences) sendSentenceToTts(s);
-  };
-
-  let fullText = '';
+async function startMic() {
   try {
-    await streamLlm(userText, onToken);
-    if (turnId !== activeTurnId || !running) return;
-    fullText = visibleText;
-    hideBanner();
-  } catch (err) {
-    if (err.name === 'AbortError') {
-      // User interrupted: the interruption path already cleaned up.
-      return;
-    }
-    // Fallback: echo mode.
-    console.warn('LLM unreachable, using echo mode:', err);
-    showBanner('LLM unreachable, using echo mode');
-    fullText = `「${userText}」と聞きました。`;
-    currentAssistantEl.textContent = fullText;
-    currentAssistantText = fullText;
-    textBuffer = fullText;
-    setState(State.SPEAKING, 'speaking…');
-    speakingStartedAtMs = Date.now();
-    recognitionShouldRun = true;
-    startRecognition();
-  }
-
-  // Flush any trailing partial sentence.
-  if (textBuffer.trim().length > 0) {
-    sendSentenceToTts(textBuffer.trim());
-    textBuffer = '';
-  }
-
-  // Wait until all sentence-level TTS requests receive terminal server
-  // responses before closing the socket.
-  await waitForTtsDrain();
-  if (turnId !== activeTurnId || !running) return;
-  if (ttsWs) {
-    try { ttsWs.close(); } catch (_) { /* ignore */ }
-    ttsWs = null;
-  }
-
-  // Record the completed assistant turn in history.
-  if (fullText) {
-    history.push({ role: 'assistant', content: fullText });
-    if (history.length > HISTORY_MAX) history.splice(0, history.length - HISTORY_MAX);
-  }
-
-  // After the LLM finishes, wait for audio to drain before returning
-  // to listening. We poll the playback queue because AudioBuffer playback
-  // has no single "all done" event across multiple buffers.
-  await waitForPlaybackToDrain();
-  if (turnId !== activeTurnId || !running) return;
-  lastAssistantFinishedAtMs = Date.now();
-
-  if (running) {
-    setState(State.LISTENING, 'listening…');
-    recognitionShouldRun = true;
-    startRecognition();
-  }
-}
-
-function waitForPlaybackToDrain() {
-  return new Promise((resolve) => {
-    const tick = () => {
-      if (!running) return resolve();
-      if (!isPlaying && playQueue.length === 0) return resolve();
-      setTimeout(tick, 120);
+    mediaStream = await navigator.mediaDevices.getUserMedia({
+      audio: { sampleRate: 16000, channelCount: 1, echoCancellation: true, noiseSuppression: true }
+    });
+
+    const micCtx = new AudioContext({ sampleRate: mediaStream.getAudioTracks()[0].getSettings().sampleRate || 48000 });
+    await micCtx.audioWorklet.addModule('/static/pcm-recorder-worklet.js');
+
+    const source = micCtx.createMediaStreamSource(mediaStream);
+    workletNode = new AudioWorkletNode(micCtx, 'pcm-recorder-processor', {
+      processorOptions: { targetSampleRate: 16000 }
+    });
+
+    workletNode.port.onmessage = (event) => {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        // event.data is an ArrayBuffer of int16 PCM.
+        ws.send(event.data);
+      }
     };
-    tick();
-  });
-}
-
-// ---------------------------------------------------------------------------
-// Interruption
-// ---------------------------------------------------------------------------
 
-function interrupt() {
-  activeTurnId += 1;
-  // Stop any in-flight LLM fetch.
-  if (llmAbort) {
-    try { llmAbort.abort(); } catch (_) { /* ignore */ }
-    llmAbort = null;
+    source.connect(workletNode);
+    workletNode.connect(micCtx.destination); // needed for processing, outputs silence
+  } catch (e) {
+    console.error('mic error', e);
+    addError('Microphone access denied or unavailable');
   }
-  // Cancel TTS and flush audio.
-  cancelTts();
-  // Drop the current assistant bubble reference; what was typed stays on
-  // screen as a partial reply.
-  currentAssistantEl = null;
 }
 
-// ---------------------------------------------------------------------------
-// Speech recognition
-// ---------------------------------------------------------------------------
-
-function buildRecognition() {
-  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
-  if (!SR) {
-    showBanner('SpeechRecognition API not supported in this browser (try Chrome).');
-    return null;
+function stopMic() {
+  if (workletNode) { workletNode.disconnect(); workletNode = null; }
+  if (mediaStream) {
+    mediaStream.getTracks().forEach(t => t.stop());
+    mediaStream = null;
   }
-  const rec = new SR();
-  rec.lang = el.lang.value || 'ja-JP';
-  rec.continuous = true;
-  rec.interimResults = true;
-
-  rec.onstart = () => {
-    if (state === State.IDLE || state === State.THINKING) {
-      setState(State.LISTENING, 'listening…');
-    }
-  };
-
-  rec.onspeechstart = () => {
-    // We do not interrupt immediately on speechstart because speaker echo
-    // can trigger false positives. Interruption is confirmed on final text.
-  };
-
-  rec.onresult = (ev) => {
-    let interim = '';
-    let finalText = '';
-    for (let i = ev.resultIndex; i < ev.results.length; i++) {
-      const res = ev.results[i];
-      if (res.isFinal) finalText += res[0].transcript;
-      else interim += res[0].transcript;
-    }
-    if (interim) showInterim(interim);
-    const final = finalText.trim();
-    if (final) {
-      if (state === State.SPEAKING) {
-        // Guard against echo loops: assistant audio can be picked up by the
-        // microphone and re-recognized as user speech.
-        if (isLikelyAssistantEcho(final)) return;
-        // Ignore ultra-early short fragments right after speaking starts.
-        const speakingMs = Date.now() - speakingStartedAtMs;
-        if (speakingMs < 350 && final.length < 4) return;
-        interrupt();
-        setState(State.LISTENING, 'listening… (interrupted)');
-      } else if (state === State.LISTENING) {
-        // Ignore echoes of assistant text that leak into recognition.
-        if (isLikelyAssistantEcho(final)) return;
-      }
-      clearInterim();
-      recognitionShouldRun = false;
-      stopRecognition();
-      handleUserTurn(final).catch((e) => console.error(e));
-    }
-  };
-
-  rec.onerror = (ev) => {
-    // `no-speech` and `aborted` are noisy/expected; ignore them silently.
-    if (ev.error === 'no-speech' || ev.error === 'aborted') return;
-    console.warn('recognition error', ev.error);
-    showBanner(`Speech recognition error: ${ev.error}`);
-  };
-
-  rec.onend = () => {
-    // Auto-restart while active so barge-in keeps working during speaking.
-    if (
-      running &&
-      recognitionShouldRun &&
-      (state === State.LISTENING || state === State.SPEAKING)
-    ) {
-      try { rec.start(); }
-      catch (_) { /* start() throws if already started */ }
-    }
-  };
-
-  return rec;
-}
-
-function startRecognition() {
-  if (!recognition) recognition = buildRecognition();
-  if (!recognition) return;
-  try { recognition.start(); }
-  catch (_) { /* already started */ }
 }
 
-// Re-create the recognizer when the language changes so the new lang takes
-// effect on the next start, and snap the voice picker to a matching voice.
-el.lang.addEventListener('change', () => {
-  if (recognition) {
-    try { recognition.abort(); } catch (_) {}
-    recognition = null;
+// ---- Mic button: toggle ----
+micBtn.onclick = () => {
+  if (isConnected) {
+    disconnect();
+  } else {
+    connect();
   }
-  syncVoiceToLanguage();
-});
-
-function stopRecognition() {
-  if (!recognition) return;
-  try { recognition.stop(); }
-  catch (_) { /* not started */ }
-}
-
-// ---------------------------------------------------------------------------
-// Start / Stop
-// ---------------------------------------------------------------------------
-
-el.startBtn.addEventListener('click', async () => {
-  if (running) return;
-  running = true;
-  hideBanner();
-  // Unlock Web Audio via the click user gesture. Must await — creating
-  // the context isn't enough; modern browsers require an explicit resume
-  // before any audio will play.
-  await resumeAudioCtx();
-  el.startBtn.disabled = true;
-  el.stopBtn.disabled = false;
-  setState(State.LISTENING, 'listening…');
-  recognitionShouldRun = true;
-  startRecognition();
-});
-
-el.stopBtn.addEventListener('click', () => {
-  running = false;
-  recognitionShouldRun = false;
-  interrupt();
-  stopRecognition();
-  recognition = null;
-  clearInterim();
-  el.startBtn.disabled = false;
-  el.stopBtn.disabled = true;
-  setState(State.IDLE, 'idle');
-});
-
-// ---------------------------------------------------------------------------
-// Init
-// ---------------------------------------------------------------------------
+};
 
-loadVoices();
-if (!(window.SpeechRecognition || window.webkitSpeechRecognition)) {
-  showBanner('SpeechRecognition API not supported in this browser (try Chrome).');
-  el.startBtn.disabled = true;
-}
 </script>
 </body>
 </html>
diff --git a/src/serve/handlers.rs b/src/serve/handlers.rs
index 11377d5..73b9925 100644
--- a/src/serve/handlers.rs
+++ b/src/serve/handlers.rs
@@ -6,7 +6,7 @@ use async_trait::async_trait;
 use axum::{
     Json,
     extract::{
-        State,
+        Query, State,
         ws::{Message, WebSocket, WebSocketUpgrade},
     },
     http::{HeaderMap, StatusCode, header},
@@ -571,3 +571,29 @@ async fn send_ws_json(socket: &mut WebSocket, response: &WsResponse) -> Result<(
 async fn send_ws_error(socket: &mut WebSocket, message: String) -> Result<(), ()> {
     send_ws_json(socket, &WsResponse::error(message)).await
 }
+
+/// Bundled PCM recorder `AudioWorklet` processor.
+const PCM_WORKLET_JS: &str = include_str!("pcm_worklet.js");
+
+/// `GET /static/pcm-recorder-worklet.js` — serve the `AudioWorklet` processor.
+pub async fn pcm_worklet() -> impl IntoResponse {
+    (
+        [(
+            header::CONTENT_TYPE,
+            "application/javascript; charset=utf-8",
+        )],
+        PCM_WORKLET_JS,
+    )
+}
+
+/// `GET /ws/voice` — WebSocket endpoint for real-time voice conversation.
+///
+/// Accepts query parameters for ASR/LLM/TTS configuration and upgrades to
+/// a WebSocket that runs the full voice pipeline server-side.
+pub async fn voice_ws(
+    State(state): State<AppState>,
+    Query(params): Query<super::voice::VoiceParams>,
+    ws: WebSocketUpgrade,
+) -> impl IntoResponse {
+    ws.on_upgrade(move |socket| super::voice::handle_voice_ws(socket, state, params))
+}
diff --git a/src/serve/mod.rs b/src/serve/mod.rs
index 2a50096..10c3ec9 100644
--- a/src/serve/mod.rs
+++ b/src/serve/mod.rs
@@ -1,16 +1,20 @@
 //! OpenAI-compatible TTS API server.
 //!
-//! Exposes five endpoints:
+//! Exposes seven endpoints:
 //! - `POST /v1/audio/speech` — synthesize speech from text
 //! - `GET /v1/voices` — list available voices
 //! - `GET /health` — health check
 //! - `WS /ws/tts` — streaming TTS over WebSocket
-//! - `GET /demo` — bundled web demo for the streaming TTS endpoint
+//! - `WS /ws/voice` — real-time voice conversation pipeline
+//! - `GET /static/pcm-recorder-worklet.js` — `AudioWorklet` processor for PCM
+//!   recording
+//! - `GET /demo` — bundled web demo for real-time voice conversation
 
 mod handlers;
 mod models;
 #[cfg(test)]
 mod tests;
+mod voice;
 
 use std::sync::Arc;
 
@@ -34,6 +38,11 @@ pub fn build_router(state: AppState) -> Router {
         .route("/v1/voices", get(handlers::list_voices))
         .route("/v1/audio/speech", post(handlers::speech))
         .route("/ws/tts", get(handlers::ws_tts))
+        .route("/ws/voice", get(handlers::voice_ws))
+        .route(
+            "/static/pcm-recorder-worklet.js",
+            get(handlers::pcm_worklet),
+        )
         .route("/demo", get(handlers::demo))
         .layer(CorsLayer::permissive())
         .layer(TraceLayer::new_for_http())
@@ -60,6 +69,7 @@ pub async fn run(host: &str, port: u16) -> crate::error::Result<()> {
     eprintln!("  POST /v1/audio/speech");
     eprintln!("  GET  /v1/voices");
     eprintln!("  WS   /ws/tts");
+    eprintln!("  WS   /ws/voice");
     eprintln!("  GET  /health");
     eprintln!("  GET  /demo  →  http://{addr}/demo");
 
diff --git a/src/serve/pcm_worklet.js b/src/serve/pcm_worklet.js
new file mode 100644
index 0000000..8379128
--- /dev/null
+++ b/src/serve/pcm_worklet.js
@@ -0,0 +1,49 @@
+class PcmRecorderProcessor extends AudioWorkletProcessor {
+    constructor(options) {
+        super();
+        this.targetSampleRate = options.processorOptions?.targetSampleRate || 16000;
+        this.sourceOffset = 0;
+        this.inputBuffer = [];
+        this.outputBuffer = [];
+        this.outputChunkSize = Math.ceil(this.targetSampleRate / 31.25);
+        this.port.onmessage = (event) => {
+            if (event.data?.type === 'flush') { this.flush(); }
+        };
+    }
+    process(inputs) {
+        const inputChannel = inputs[0]?.[0];
+        if (!inputChannel?.length) return true;
+        for (let i = 0; i < inputChannel.length; i++) this.inputBuffer.push(inputChannel[i]);
+        if (sampleRate === this.targetSampleRate) {
+            for (let i = 0; i < this.inputBuffer.length; i++) this.outputBuffer.push(this.inputBuffer[i]);
+            this.inputBuffer = [];
+            this.sourceOffset = 0;
+        } else {
+            const ratio = sampleRate / this.targetSampleRate;
+            while (this.sourceOffset + ratio < this.inputBuffer.length) {
+                const index = Math.floor(this.sourceOffset);
+                const nextIndex = Math.min(index + 1, this.inputBuffer.length - 1);
+                const fraction = this.sourceOffset - index;
+                this.outputBuffer.push(this.inputBuffer[index] + (this.inputBuffer[nextIndex] - this.inputBuffer[index]) * fraction);
+                this.sourceOffset += ratio;
+            }
+            const consumed = Math.floor(this.sourceOffset);
+            if (consumed > 0) { this.inputBuffer = this.inputBuffer.slice(consumed); this.sourceOffset -= consumed; }
+        }
+        this.flush(false);
+        return true;
+    }
+    flush(flushAll = true) {
+        while (this.outputBuffer.length >= this.outputChunkSize || (flushAll && this.outputBuffer.length > 0)) {
+            const frameCount = flushAll ? Math.min(this.outputChunkSize, this.outputBuffer.length) : this.outputChunkSize;
+            const chunk = this.outputBuffer.splice(0, frameCount);
+            const pcm16 = new Int16Array(chunk.length);
+            for (let i = 0; i < chunk.length; i++) {
+                const sample = Math.max(-1, Math.min(1, chunk[i]));
+                pcm16[i] = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+            }
+            this.port.postMessage(pcm16.buffer, [pcm16.buffer]);
+        }
+    }
+}
+registerProcessor('pcm-recorder-processor', PcmRecorderProcessor);
diff --git a/src/serve/tests.rs b/src/serve/tests.rs
index 1a04c0d..61b810f 100644
--- a/src/serve/tests.rs
+++ b/src/serve/tests.rs
@@ -230,21 +230,36 @@ async fn demo_returns_html_page() {
         .expect("ascii content-type");
     assert!(ct.starts_with("text/html"), "got content-type: {ct}");
     let body = resp.text().await.expect("html body");
-    assert!(body.contains("<title>kotoba TTS"));
-    assert!(body.contains("/ws/tts"));
-    // Voice chat demo markers: the page advertises itself as a voice
-    // chat experience, uses the browser SpeechRecognition API, and
-    // calls an OpenAI-compatible chat completions endpoint.
-    assert!(body.contains("voice chat"));
-    assert!(body.contains("SpeechRecognition"));
-    assert!(body.contains("chat/completions"));
-    // Regression: do not close the TTS socket on a fixed timer.
-    assert!(body.contains("waitForTtsDrain"));
-    assert!(!body.contains("socketToClose?.close"));
-    // Regression: strip model `<think>` blocks before rendering/TTS.
-    assert!(body.contains("stripThinkingBlocks"));
-    // Regression: keep speaking-stage barge-in from echo-looping.
-    assert!(body.contains("isLikelyAssistantEcho"));
+    assert!(body.contains("<title>kotoba"));
+    // mlx-live-style voice pipeline: connects via /ws/voice and uses
+    // an AudioWorklet for PCM recording.
+    assert!(body.contains("/ws/voice"));
+    assert!(body.contains("pcm-recorder-worklet"));
+    assert!(body.contains("AudioWorklet"));
+    // Settings are persisted in localStorage.
+    assert!(body.contains("localStorage"));
+}
+
+#[tokio::test]
+async fn pcm_worklet_returns_javascript() {
+    let url = test_server().await;
+    let resp = reqwest::get(format!("{url}/static/pcm-recorder-worklet.js"))
+        .await
+        .expect("worklet request");
+    assert_eq!(resp.status(), 200);
+    let ct = resp
+        .headers()
+        .get("content-type")
+        .expect("content-type header")
+        .to_str()
+        .expect("ascii content-type");
+    assert!(
+        ct.contains("javascript"),
+        "expected javascript content-type, got: {ct}"
+    );
+    let body = resp.text().await.expect("js body");
+    assert!(body.contains("PcmRecorderProcessor"));
+    assert!(body.contains("registerProcessor"));
 }
 
 // ---------------------------------------------------------------------------
diff --git a/src/serve/voice.rs b/src/serve/voice.rs
new file mode 100644
index 0000000..07a146a
--- /dev/null
+++ b/src/serve/voice.rs
@@ -0,0 +1,779 @@
+//! Real-time voice conversation pipeline over WebSocket.
+//!
+//! Implements an mlx-live-style server-side pipeline:
+//! client PCM audio -> VAD -> ASR (Whisper) -> LLM (streaming) -> TTS (Kokoro)
+//! -> client PCM audio.
+
+use std::{sync::Arc, time::Duration};
+
+use axum::extract::ws::{Message, WebSocket};
+use futures_util::{SinkExt, StreamExt};
+use serde::{Deserialize, Serialize};
+use tokio::sync::mpsc;
+use tracing::{debug, error, warn};
+
+use super::handlers::AppState;
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/// Input sample rate expected from the client (16 kHz mono int16).
+const INPUT_SAMPLE_RATE: u32 = 16_000;
+
+/// Output sample rate advertised to the client (Kokoro native rate).
+const OUTPUT_SAMPLE_RATE: u32 = 24_000;
+
+/// RMS energy threshold for speech detection (float32 scale).
+const VAD_THRESHOLD: f32 = 0.01;
+
+/// Number of consecutive frames above threshold to start speech.
+const VAD_SPEECH_START_FRAMES: usize = 3;
+
+/// Number of consecutive frames below threshold to end speech (~1 s at 31.25
+/// fps).
+const VAD_SPEECH_END_FRAMES: usize = 30;
+
+/// Minimum number of samples to consider valid speech (0.5 s at 16 kHz).
+const VAD_MIN_SPEECH_SAMPLES: usize = INPUT_SAMPLE_RATE as usize / 2;
+
+/// Maximum number of chat turns kept in context.
+const MAX_HISTORY_TURNS: usize = 10;
+
+/// Samples per VAD frame (matches worklet output chunk size: ceil(16000 /
+/// 31.25) = 512).
+const VAD_FRAME_SIZE: usize = 512;
+
+// ---------------------------------------------------------------------------
+// Protocol messages (server -> client)
+// ---------------------------------------------------------------------------
+
+/// JSON message sent from server to client over the WebSocket.
+#[derive(Debug, Serialize)]
+#[serde(tag = "type")]
+#[allow(dead_code)]
+enum ServerMessage {
+    /// Sent on connect with sample rate info.
+    #[serde(rename = "init")]
+    Init {
+        #[serde(rename = "outputSampleRate")]
+        output_sample_rate: u32,
+        #[serde(rename = "inputSampleRate")]
+        input_sample_rate:  u32,
+    },
+    /// Pipeline phase change.
+    #[serde(rename = "state")]
+    State { phase: String },
+    /// ASR transcription result.
+    #[serde(rename = "asr")]
+    Asr { text: String },
+    /// Partial LLM response (accumulated so far).
+    #[serde(rename = "llm_partial")]
+    LlmPartial { text: String },
+    /// The current generation was interrupted by new speech.
+    #[serde(rename = "interrupt")]
+    Interrupt,
+    /// Generation complete.
+    #[serde(rename = "done")]
+    Done,
+    /// An error occurred.
+    #[serde(rename = "error")]
+    Error { message: String },
+}
+
+// ---------------------------------------------------------------------------
+// Query parameters
+// ---------------------------------------------------------------------------
+
+/// Configuration passed as query parameters on the WebSocket URL.
+#[derive(Debug, Clone, Deserialize)]
+pub struct VoiceParams {
+    /// Whisper-compatible ASR endpoint URL.
+    #[serde(default = "default_asr_url")]
+    pub asr_url:       String,
+    /// OpenAI-compatible LLM endpoint base URL.
+    #[serde(default = "default_llm_url")]
+    pub llm_url:       String,
+    /// LLM API key (optional).
+    #[serde(default)]
+    pub llm_key:       String,
+    /// LLM model name.
+    #[serde(default = "default_llm_model")]
+    pub llm_model:     String,
+    /// TTS voice identifier.
+    #[serde(default = "default_voice")]
+    pub voice:         String,
+    /// System prompt for the LLM.
+    #[serde(default = "default_system_prompt")]
+    pub system_prompt: String,
+}
+
+fn default_asr_url() -> String { "http://localhost:8000/v1/audio/transcriptions".to_string() }
+
+fn default_llm_url() -> String { "http://localhost:11434/v1".to_string() }
+
+fn default_llm_model() -> String { "qwen2.5:7b".to_string() }
+
+fn default_voice() -> String { "kokoro:jf_alpha".to_string() }
+
+fn default_system_prompt() -> String {
+    "You are a friendly conversation partner. Reply in the same language as the user, and keep \
+     responses short and natural."
+        .to_string()
+}
+
+// ---------------------------------------------------------------------------
+// VAD state machine
+// ---------------------------------------------------------------------------
+
+/// Simple RMS-energy voice activity detector.
+struct Vad {
+    /// Accumulated PCM samples for the current utterance.
+    buffer:      Vec<i16>,
+    /// Number of consecutive frames above the speech threshold.
+    above_count: usize,
+    /// Number of consecutive frames below the speech threshold.
+    below_count: usize,
+    /// Whether we are currently inside a speech region.
+    in_speech:   bool,
+}
+
+impl Vad {
+    const fn new() -> Self {
+        Self {
+            buffer:      Vec::new(),
+            above_count: 0,
+            below_count: 0,
+            in_speech:   false,
+        }
+    }
+
+    /// Feed a frame of int16 PCM samples and return `Some(audio)` when a
+    /// complete utterance has been detected (speech start + speech end).
+    fn feed(&mut self, samples: &[i16]) -> Option<Vec<i16>> {
+        let rms = compute_rms_i16(samples);
+        let is_loud = rms > VAD_THRESHOLD;
+
+        if is_loud {
+            self.above_count += 1;
+            self.below_count = 0;
+        } else {
+            self.below_count += 1;
+            self.above_count = 0;
+        }
+
+        if !self.in_speech && self.above_count >= VAD_SPEECH_START_FRAMES {
+            self.in_speech = true;
+            debug!("VAD: speech start");
+        }
+
+        if self.in_speech {
+            self.buffer.extend_from_slice(samples);
+        }
+
+        if self.in_speech && self.below_count >= VAD_SPEECH_END_FRAMES {
+            self.in_speech = false;
+            debug!("VAD: speech end, {} samples", self.buffer.len());
+
+            if self.buffer.len() >= VAD_MIN_SPEECH_SAMPLES {
+                let utterance = std::mem::take(&mut self.buffer);
+                self.reset_counts();
+                return Some(utterance);
+            }
+            // Too short — discard.
+            self.buffer.clear();
+            self.reset_counts();
+        }
+
+        None
+    }
+
+    /// Check if speech is currently detected (for interruption logic).
+    #[allow(dead_code)]
+    const fn is_speaking(&self) -> bool { self.in_speech }
+
+    /// Reset internal counters (but not the buffer).
+    const fn reset_counts(&mut self) {
+        self.above_count = 0;
+        self.below_count = 0;
+    }
+
+    /// Discard all buffered audio and reset state.
+    fn reset(&mut self) {
+        self.buffer.clear();
+        self.in_speech = false;
+        self.reset_counts();
+    }
+}
+
+/// Compute RMS energy of int16 samples, returning a value in float32 scale.
+fn compute_rms_i16(samples: &[i16]) -> f32 {
+    if samples.is_empty() {
+        return 0.0;
+    }
+    let sum_sq: f64 = samples
+        .iter()
+        .map(|&s| {
+            let f = f64::from(s) / f64::from(i16::MAX);
+            f * f
+        })
+        .sum();
+    #[allow(clippy::cast_precision_loss)]
+    let mean = sum_sq / samples.len() as f64;
+    #[allow(clippy::cast_possible_truncation)]
+    let rms = mean.sqrt() as f32;
+    rms
+}
+
+// ---------------------------------------------------------------------------
+// WAV encoding / decoding helpers
+// ---------------------------------------------------------------------------
+
+/// Wrap raw PCM int16 samples in a minimal WAV header.
+#[allow(clippy::cast_possible_truncation)]
+fn encode_wav(samples: &[i16], sample_rate: u32, channels: u16) -> Vec<u8> {
+    let data_len = samples.len() * 2;
+    let file_len = 36 + data_len;
+    let byte_rate = sample_rate * u32::from(channels) * 2;
+    let block_align = channels * 2;
+
+    let mut buf = Vec::with_capacity(44 + data_len);
+    // RIFF header
+    buf.extend_from_slice(b"RIFF");
+    buf.extend_from_slice(&(file_len as u32).to_le_bytes());
+    buf.extend_from_slice(b"WAVE");
+    // fmt chunk
+    buf.extend_from_slice(b"fmt ");
+    buf.extend_from_slice(&16u32.to_le_bytes()); // chunk size
+    buf.extend_from_slice(&1u16.to_le_bytes()); // PCM format
+    buf.extend_from_slice(&channels.to_le_bytes());
+    buf.extend_from_slice(&sample_rate.to_le_bytes());
+    buf.extend_from_slice(&byte_rate.to_le_bytes());
+    buf.extend_from_slice(&block_align.to_le_bytes());
+    buf.extend_from_slice(&16u16.to_le_bytes()); // bits per sample
+    // data chunk
+    buf.extend_from_slice(b"data");
+    buf.extend_from_slice(&(data_len as u32).to_le_bytes());
+    for &s in samples {
+        buf.extend_from_slice(&s.to_le_bytes());
+    }
+    buf
+}
+
+/// Read a WAV file and return samples as float32 in [-1, 1].
+fn wav_to_float32(wav_bytes: &[u8]) -> Result<Vec<f32>, String> {
+    // Find "data" chunk
+    let data_pos = wav_bytes
+        .windows(4)
+        .position(|w| w == b"data")
+        .ok_or("no data chunk in WAV")?;
+    let header_end = data_pos + 8; // skip "data" + 4-byte size
+    if wav_bytes.len() < header_end {
+        return Err("WAV too short".to_string());
+    }
+
+    // Read bits per sample from fmt chunk (byte 34-35)
+    let bits_per_sample = if wav_bytes.len() >= 36 {
+        u16::from_le_bytes([wav_bytes[34], wav_bytes[35]])
+    } else {
+        16
+    };
+
+    let data = &wav_bytes[header_end..];
+
+    match bits_per_sample {
+        16 => {
+            let samples: Vec<f32> = data
+                .chunks_exact(2)
+                .map(|chunk| {
+                    let s = i16::from_le_bytes([chunk[0], chunk[1]]);
+                    f32::from(s) / 32768.0
+                })
+                .collect();
+            Ok(samples)
+        }
+        32 => {
+            // Check if it's float32 (format tag at byte 20-21)
+            let format_tag = if wav_bytes.len() >= 22 {
+                u16::from_le_bytes([wav_bytes[20], wav_bytes[21]])
+            } else {
+                1
+            };
+            if format_tag == 3 {
+                // IEEE float
+                let samples: Vec<f32> = data
+                    .chunks_exact(4)
+                    .map(|chunk| f32::from_le_bytes([chunk[0], chunk[1], chunk[2], chunk[3]]))
+                    .collect();
+                Ok(samples)
+            } else {
+                // int32
+                let samples: Vec<f32> = data
+                    .chunks_exact(4)
+                    .map(|chunk| {
+                        let s = i32::from_le_bytes([chunk[0], chunk[1], chunk[2], chunk[3]]);
+                        #[allow(clippy::cast_precision_loss)]
+                        let f = s as f32 / 2_147_483_648.0;
+                        f
+                    })
+                    .collect();
+                Ok(samples)
+            }
+        }
+        other => Err(format!("unsupported bits per sample: {other}")),
+    }
+}
+
+// ---------------------------------------------------------------------------
+// ASR (Whisper-compatible HTTP endpoint)
+// ---------------------------------------------------------------------------
+
+/// Send audio to a Whisper-compatible ASR endpoint and return the transcript.
+async fn transcribe(
+    client: &reqwest::Client,
+    asr_url: &str,
+    audio: &[i16],
+    sample_rate: u32,
+) -> Result<String, String> {
+    let wav = encode_wav(audio, sample_rate, 1);
+
+    let part = reqwest::multipart::Part::bytes(wav)
+        .file_name("audio.wav")
+        .mime_str("audio/wav")
+        .map_err(|e| format!("mime error: {e}"))?;
+
+    let form = reqwest::multipart::Form::new()
+        .part("file", part)
+        .text("model", "whisper-1");
+
+    let resp = client
+        .post(asr_url)
+        .multipart(form)
+        .timeout(Duration::from_secs(30))
+        .send()
+        .await
+        .map_err(|e| format!("ASR request failed: {e}"))?;
+
+    if !resp.status().is_success() {
+        let status = resp.status();
+        let body = resp.text().await.unwrap_or_default();
+        return Err(format!("ASR returned {status}: {body}"));
+    }
+
+    let json: serde_json::Value = resp
+        .json()
+        .await
+        .map_err(|e| format!("ASR response parse failed: {e}"))?;
+
+    json["text"]
+        .as_str()
+        .map(|s| s.trim().to_string())
+        .ok_or_else(|| "ASR response missing 'text' field".to_string())
+}
+
+// ---------------------------------------------------------------------------
+// LLM (OpenAI-compatible streaming endpoint)
+// ---------------------------------------------------------------------------
+
+/// Chat message for the LLM API.
+#[derive(Debug, Clone, Serialize, Deserialize)]
+struct ChatMessage {
+    role:    String,
+    content: String,
+}
+
+/// Stream LLM completion, sending each sentence to the `sentence_tx` channel
+/// as soon as a sentence boundary is detected. Returns the full response text.
+async fn stream_llm(
+    client: &reqwest::Client,
+    params: &VoiceParams,
+    history: &[ChatMessage],
+    sentence_tx: &mpsc::Sender<String>,
+    partial_tx: &mpsc::Sender<String>,
+) -> Result<String, String> {
+    let url = format!("{}/chat/completions", params.llm_url.trim_end_matches('/'));
+
+    let body = serde_json::json!({
+        "model": params.llm_model,
+        "messages": history,
+        "stream": true,
+    });
+
+    let mut req = client
+        .post(&url)
+        .json(&body)
+        .timeout(Duration::from_secs(60));
+
+    if !params.llm_key.is_empty() {
+        req = req.header("Authorization", format!("Bearer {}", params.llm_key));
+    }
+
+    let resp = req
+        .send()
+        .await
+        .map_err(|e| format!("LLM request failed: {e}"))?;
+
+    if !resp.status().is_success() {
+        let status = resp.status();
+        let body = resp.text().await.unwrap_or_default();
+        return Err(format!("LLM returned {status}: {body}"));
+    }
+
+    let mut full_text = String::new();
+    let mut sentence_buf = String::new();
+    let mut stream = resp.bytes_stream();
+
+    // Buffer for incomplete SSE lines across chunk boundaries.
+    let mut line_buf = String::new();
+
+    while let Some(chunk_result) = stream.next().await {
+        let chunk = chunk_result.map_err(|e| format!("LLM stream error: {e}"))?;
+        let text = String::from_utf8_lossy(&chunk);
+        line_buf.push_str(&text);
+
+        // Process complete lines.
+        while let Some(newline_pos) = line_buf.find('\n') {
+            let line = line_buf[..newline_pos].trim().to_string();
+            line_buf = line_buf[newline_pos + 1..].to_string();
+
+            if line.is_empty() || !line.starts_with("data: ") {
+                continue;
+            }
+
+            let data = &line[6..];
+            if data == "[DONE]" {
+                break;
+            }
+
+            if let Ok(json) = serde_json::from_str::<serde_json::Value>(data)
+                && let Some(content) = json["choices"][0]["delta"]["content"].as_str()
+            {
+                full_text.push_str(content);
+                sentence_buf.push_str(content);
+
+                // Send partial text update.
+                let _ = partial_tx.send(full_text.clone()).await;
+
+                // Check for sentence boundaries and emit complete sentences.
+                while let Some(boundary) = find_sentence_boundary(&sentence_buf) {
+                    let sentence = sentence_buf[..=boundary].trim().to_string();
+                    sentence_buf = sentence_buf[boundary + 1..].to_string();
+                    if !sentence.is_empty() && sentence_tx.send(sentence).await.is_err() {
+                        // Receiver dropped (interrupted).
+                        return Ok(full_text);
+                    }
+                }
+            }
+        }
+    }
+
+    // Flush remaining text as a final sentence.
+    let remaining = sentence_buf.trim().to_string();
+    if !remaining.is_empty() {
+        let _ = sentence_tx.send(remaining).await;
+    }
+
+    Ok(full_text)
+}
+
+/// Find the byte index of the first sentence-ending character.
+fn find_sentence_boundary(text: &str) -> Option<usize> {
+    text.char_indices()
+        .find(|(_, ch)| matches!(ch, '。' | '！' | '？' | '!' | '?' | '\n'))
+        .map(|(i, ch)| i + ch.len_utf8() - 1)
+}
+
+// ---------------------------------------------------------------------------
+// TTS helper
+// ---------------------------------------------------------------------------
+
+/// Synthesize a sentence to a WAV file and return the audio as float32 samples.
+async fn synthesize_sentence(
+    state: &AppState,
+    voice: &str,
+    sentence: &str,
+) -> Result<Vec<f32>, String> {
+    let (backend_name, speaker_id) = voice.split_once(':').map_or_else(
+        || ("kokoro".to_string(), voice.to_string()),
+        |(b, s)| (b.to_string(), s.to_string()),
+    );
+
+    let tmp_dir = tempfile::tempdir().map_err(|e| format!("tempdir failed: {e}"))?;
+    let output_path = tmp_dir.path().join("tts.wav");
+
+    let backend = state
+        .factory
+        .create(&backend_name, &speaker_id, 1.0, &state.config)
+        .map_err(|e| format!("backend creation failed: {e}"))?;
+
+    backend
+        .synthesize(sentence, &output_path)
+        .await
+        .map_err(|e| format!("TTS synthesis failed: {e}"))?;
+
+    let wav_bytes = tokio::fs::read(&output_path)
+        .await
+        .map_err(|e| format!("failed to read TTS output: {e}"))?;
+
+    wav_to_float32(&wav_bytes)
+}
+
+// ---------------------------------------------------------------------------
+// WebSocket session
+// ---------------------------------------------------------------------------
+
+/// Handle a voice WebSocket connection.
+///
+/// This is the main entry point called by the axum route handler.
+pub async fn handle_voice_ws(mut socket: WebSocket, state: AppState, params: VoiceParams) {
+    // Send init message.
+    let init = ServerMessage::Init {
+        output_sample_rate: OUTPUT_SAMPLE_RATE,
+        input_sample_rate:  INPUT_SAMPLE_RATE,
+    };
+    if send_json(&mut socket, &init).await.is_err() {
+        return;
+    }
+
+    let client = reqwest::Client::new();
+    let mut history: Vec<ChatMessage> = vec![ChatMessage {
+        role:    "system".to_string(),
+        content: params.system_prompt.clone(),
+    }];
+    let mut vad = Vad::new();
+
+    // Split the socket into sender/receiver so we can use them concurrently.
+    let (ws_sender, mut ws_receiver) = socket.split();
+    let ws_sender = Arc::new(tokio::sync::Mutex::new(ws_sender));
+
+    // Send idle state.
+    let _ = send_json_via(
+        &ws_sender,
+        &ServerMessage::State {
+            phase: "idle".to_string(),
+        },
+    )
+    .await;
+
+    loop {
+        let msg = match ws_receiver.next().await {
+            Some(Ok(msg)) => msg,
+            Some(Err(e)) => {
+                debug!("WS receive error: {e}");
+                break;
+            }
+            None => break,
+        };
+
+        match msg {
+            Message::Binary(data) => {
+                // Interpret as int16 PCM samples.
+                let samples: Vec<i16> = data
+                    .chunks_exact(2)
+                    .map(|c| i16::from_le_bytes([c[0], c[1]]))
+                    .collect();
+
+                // Feed frames to VAD.
+                for frame in samples.chunks(VAD_FRAME_SIZE) {
+                    if let Some(utterance) = vad.feed(frame) {
+                        // We have a complete utterance — process it.
+                        let sender = Arc::clone(&ws_sender);
+                        let client_clone = client.clone();
+                        let params_clone = params.clone();
+                        let state_clone = state.clone();
+                        let history_snapshot = history.clone();
+
+                        // Process the utterance and collect results.
+                        let result = process_utterance(
+                            &sender,
+                            &client_clone,
+                            &params_clone,
+                            &state_clone,
+                            &history_snapshot,
+                            &utterance,
+                        )
+                        .await;
+
+                        match result {
+                            Ok((user_text, assistant_text)) => {
+                                history.push(ChatMessage {
+                                    role:    "user".to_string(),
+                                    content: user_text,
+                                });
+                                history.push(ChatMessage {
+                                    role:    "assistant".to_string(),
+                                    content: assistant_text,
+                                });
+                                // Trim history to last N turns (keep system prompt).
+                                trim_history(&mut history);
+                            }
+                            Err(e) => {
+                                warn!("utterance processing error: {e}");
+                                let _ =
+                                    send_json_via(&sender, &ServerMessage::Error { message: e })
+                                        .await;
+                            }
+                        }
+
+                        // Back to idle.
+                        let _ = send_json_via(
+                            &ws_sender,
+                            &ServerMessage::State {
+                                phase: "idle".to_string(),
+                            },
+                        )
+                        .await;
+                        vad.reset();
+                    }
+                }
+            }
+            Message::Close(_) => break,
+            _ => {}
+        }
+    }
+}
+
+/// Process a single detected utterance through the full pipeline:
+/// ASR -> LLM (streaming) -> TTS (per-sentence) -> audio playback.
+///
+/// Returns `(user_text, assistant_text)` on success.
+async fn process_utterance(
+    ws_sender: &Arc<tokio::sync::Mutex<futures_util::stream::SplitSink<WebSocket, Message>>>,
+    client: &reqwest::Client,
+    params: &VoiceParams,
+    state: &AppState,
+    history: &[ChatMessage],
+    audio: &[i16],
+) -> Result<(String, String), String> {
+    // Phase: generating (ASR).
+    let _ = send_json_via(
+        ws_sender,
+        &ServerMessage::State {
+            phase: "generating".to_string(),
+        },
+    )
+    .await;
+
+    // 1. ASR
+    let transcript = transcribe(client, &params.asr_url, audio, INPUT_SAMPLE_RATE).await?;
+
+    if transcript.is_empty() {
+        return Err("empty transcript".to_string());
+    }
+
+    let _ = send_json_via(
+        ws_sender,
+        &ServerMessage::Asr {
+            text: transcript.clone(),
+        },
+    )
+    .await;
+
+    // 2. Build messages for LLM.
+    let mut messages = history.to_vec();
+    messages.push(ChatMessage {
+        role:    "user".to_string(),
+        content: transcript.clone(),
+    });
+
+    // 3. Stream LLM and synthesize sentences as they arrive.
+    let (sentence_tx, mut sentence_rx) = mpsc::channel::<String>(16);
+    let (partial_tx, mut partial_rx) = mpsc::channel::<String>(64);
+
+    let client_for_llm = client.clone();
+    let params_for_llm = params.clone();
+    let messages_for_llm = messages.clone();
+
+    // Spawn LLM streaming task.
+    let llm_handle = tokio::spawn(async move {
+        stream_llm(
+            &client_for_llm,
+            &params_for_llm,
+            &messages_for_llm,
+            &sentence_tx,
+            &partial_tx,
+        )
+        .await
+    });
+
+    // Forward partial LLM updates to the client.
+    let ws_for_partial = Arc::clone(ws_sender);
+    let partial_handle = tokio::spawn(async move {
+        while let Some(text) = partial_rx.recv().await {
+            let _ = send_json_via(&ws_for_partial, &ServerMessage::LlmPartial { text }).await;
+        }
+    });
+
+    // Consume sentences and synthesize TTS.
+    let mut full_assistant_text = String::new();
+    while let Some(sentence) = sentence_rx.recv().await {
+        full_assistant_text.push_str(&sentence);
+
+        match synthesize_sentence(state, &params.voice, &sentence).await {
+            Ok(samples) => {
+                // Send float32 PCM as binary frame.
+                let bytes: Vec<u8> = samples.iter().flat_map(|s| s.to_le_bytes()).collect();
+                let mut sender = ws_sender.lock().await;
+                if sender.send(Message::Binary(bytes.into())).await.is_err() {
+                    error!("failed to send TTS audio");
+                    break;
+                }
+            }
+            Err(e) => {
+                warn!("TTS error for sentence: {e}");
+                let _ = send_json_via(
+                    ws_sender,
+                    &ServerMessage::Error {
+                        message: format!("TTS failed: {e}"),
+                    },
+                )
+                .await;
+            }
+        }
+    }
+
+    // Wait for LLM to finish.
+    if let Ok(Ok(full_text)) = llm_handle.await
+        && full_assistant_text.is_empty()
+    {
+        full_assistant_text = full_text;
+    }
+
+    // Wait for partial forwarder to finish.
+    let _ = partial_handle.await;
+
+    // Send done.
+    let _ = send_json_via(ws_sender, &ServerMessage::Done).await;
+
+    Ok((transcript, full_assistant_text))
+}
+
+/// Send a JSON text frame over a mutex-wrapped split sink.
+async fn send_json_via(
+    sender: &Arc<tokio::sync::Mutex<futures_util::stream::SplitSink<WebSocket, Message>>>,
+    msg: &ServerMessage,
+) -> Result<(), ()> {
+    let json = serde_json::to_string(msg).expect("ServerMessage serializes to JSON");
+    let mut guard = sender.lock().await;
+    guard.send(Message::Text(json.into())).await.map_err(|_| ())
+}
+
+/// Send a JSON text frame over a non-split WebSocket.
+async fn send_json(socket: &mut WebSocket, msg: &ServerMessage) -> Result<(), ()> {
+    let json = serde_json::to_string(msg).expect("ServerMessage serializes to JSON");
+    socket
+        .send(Message::Text(json.into()))
+        .await
+        .map_err(|_| ())
+}
+
+/// Keep only the system prompt + last `MAX_HISTORY_TURNS` user/assistant pairs.
+fn trim_history(history: &mut Vec<ChatMessage>) {
+    // First message is always the system prompt.
+    let non_system = history.len().saturating_sub(1);
+    let max_non_system = MAX_HISTORY_TURNS * 2; // 2 messages per turn
+    if non_system > max_non_system {
+        let remove_count = non_system - max_non_system;
+        history.drain(1..=remove_count);
+    }
+}
