clay-server 4.3.1-beta.5 → 4.4.0-beta.1

package/lib/public/app.js

@@ -318,6 +318,18 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     processing: false,
     scheduledMessageCorrelation: null,
     activeSessionId: null,
+    speechActive: null,
+    speechSettings: null,
+    speechSettingsRequest: 0,
+    speechSettingsSaving: false,
+    speechSettingsError: "",
+    speechPopup: null,
+    speechRetry: null,
+    speechLang: "en-US",
+    speechStatuses: {},
+    speechErrors: {},
+    speechLanguageSaving: false,
+    speechLifecycleBound: false,
     askUserRequests: {},
     activeBackgroundTasks: [],
     sessionVendorBound: false,
@@ -1008,11 +1020,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   });
 
   // --- STT module (voice input via Web Speech API) ---
-  initSTT({
-    inputEl: inputEl,
-    addSystemMessage: addSystemMessage,
-    scrollToBottom: scrollToBottom,
-  });
+  initSTT();
 
   // --- User profile (Discord-style popover on user island) ---
   initProfile({

package/lib/public/css/home-hub.css

@@ -589,6 +589,7 @@ body.home-surface-boot-pending #connect-overlay.hidden {
 
 #home-mate-chat-input {
   flex: 1 1 auto;
+  align-self: center;
   min-width: 0;
   max-height: 108px;
   padding: 6px 0;

package/lib/public/css/messages.css

@@ -1910,8 +1910,7 @@ pre.mermaid-error {
   display: none;
 }
 
-/* DM mode: simplify input bar (no voice, no model config, no context, no slash menu) */
-#main-column.dm-mode #stt-btn,
+/* DM mode: simplify input bar (no model config, no context, no slash menu) */
 #main-column.dm-mode #config-chip-wrap,
 #main-column.dm-mode #context-mini,
 #main-column.dm-mode #context-sources-btn-wrap,

package/lib/public/css/stt.css

@@ -1,155 +1,106 @@
-/* ==========================================================================
-   Speech-to-Text (Web Speech API)
-   ========================================================================== */
-
-/* --- Mic button --- */
-#stt-btn {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: width 0.3s ease, border-radius 0.3s ease, background 0.2s, color 0.2s;
-  touch-action: manipulation;
-  position: relative;
-  overflow: hidden;
-  gap: 6px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-#stt-btn .lucide { width: 20px; height: 20px; flex-shrink: 0; }
-#stt-btn:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
-
-/* Recording active — pill shape */
-#stt-btn.stt-active {
-  width: auto;
-  padding: 0 14px 0 10px;
-  border-radius: 18px;
-  color: #fff;
-  background: #e53935;
-}
-
-#stt-btn.stt-active:hover {
-  background: #c62828;
-}
-
-/* --- Waveform bars --- */
-.stt-wave {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 18px;
-  flex-shrink: 0;
-}
-
-.stt-wave-bar {
-  width: 3px;
-  border-radius: 1.5px;
-  background: rgba(255, 255, 255, 0.85);
-  animation: stt-wave-bounce 1.2s ease-in-out infinite;
-}
-
-.stt-wave-bar:nth-child(1) { height: 6px;  animation-delay: 0s; }
-.stt-wave-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; }
-.stt-wave-bar:nth-child(3) { height: 16px; animation-delay: 0.3s; }
-.stt-wave-bar:nth-child(4) { height: 12px; animation-delay: 0.45s; }
-.stt-wave-bar:nth-child(5) { height: 6px;  animation-delay: 0.6s; }
-
-@keyframes stt-wave-bounce {
-  0%, 100% { transform: scaleY(0.4); }
-  50% { transform: scaleY(1); }
-}
-
-/* Stop label */
-.stt-stop-label {
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  line-height: 1;
-}
-
-/* Loading state */
-#stt-btn.stt-loading {
-  pointer-events: none;
-  opacity: 0.7;
-}
-
-.stt-spinner {
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--border);
-  border-top-color: var(--text-muted);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  display: block;
-}
-
-/* --- Language popover --- */
-.stt-lang-popover {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 8px;
-  background: var(--bg-alt);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.4);
-  z-index: 20;
-  min-width: 200px;
-  overflow: hidden;
-}
-
-.stt-lang-title {
-  padding: 12px 16px 8px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-dimmer);
-}
-
-.stt-lang-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 10px 16px;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 14px;
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.12s;
-  gap: 8px;
-}
-
-.stt-lang-option:hover {
-  background: rgba(var(--overlay-rgb), 0.05);
-}
-
-.stt-lang-option.stt-lang-active {
-  color: var(--accent);
-  font-weight: 600;
-}
-
-.stt-lang-name {
-  flex: 1;
-}
-
-.stt-lang-hint {
-  font-size: 11px;
-  color: var(--text-dimmer);
-  flex-shrink: 0;
-}
-
-.stt-lang-option:last-child {
-  border-radius: 0 0 14px 14px;
-}
+/* Voice controls use the same small overlapping vendor badge as mention avatars. */
+.stt-controls { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; }
+.stt-button, .stt-picker-toggle {
+  position: relative; width: 32px; height: 36px; padding: 0; border: 0; border-radius: 8px;
+  background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex;
+  align-items: center; justify-content: center; touch-action: manipulation; flex-shrink: 0;
+}
+.stt-button .lucide { width: 20px; height: 20px; }
+.stt-picker-toggle { width: 20px; }
+.stt-picker-toggle .lucide { width: 12px; height: 12px; }
+.stt-button:hover, .stt-picker-toggle:hover { background: rgba(var(--overlay-rgb), .06); color: var(--text); }
+.stt-button.stt-active { color: var(--text); background: rgba(var(--overlay-rgb), .08); border: 1px solid var(--border); border-radius: 50%; }
+.stt-button.stt-active .lucide { width: 15px; height: 15px; fill: currentColor; }
+.stt-controls [hidden] { display: none; }
+.stt-vendor-badge {
+  position: absolute; bottom: 2px; right: 0; width: 12px; height: 12px;
+  border-radius: 50%; border: 1.5px solid var(--sidebar-bg); background: #fff;
+  object-fit: contain; box-sizing: content-box;
+}
+.stt-button:disabled, .stt-picker-toggle:disabled { opacity: .45; cursor: default; }
+.stt-progress { display: flex; gap: 8px; align-items: center; padding: 6px 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); min-width: 0; }
+.stt-progress[hidden], .stt-progress [hidden] { display: none; }
+.stt-status { flex: 1; min-width: 100px; line-height: 1.5; }
+.stt-progress-error { margin: 2px 2px 6px; padding: 10px 12px; border: 1px solid #c83737; border-radius: 8px; background: rgba(200, 55, 55, .1); color: var(--text); }
+.stt-progress-error .stt-status { font-size: 12px; font-weight: 500; }
+.stt-progress-error a { color: inherit; text-decoration: underline; }
+.stt-timer { font-variant-numeric: tabular-nums; color: var(--text); }
+.stt-progress button { border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); font: inherit; cursor: pointer; padding: 5px 8px; }
+.stt-progress-active { flex: 1 1 0; flex-wrap: nowrap; padding: 0 8px 0 0; height: 62px; }
+.stt-progress-active .stt-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); min-width: 0; }
+.stt-progress-pending .stt-status { position: static; width: auto; height: auto; clip-path: none; }
+.stt-progress-pending .stt-meter { display: none; }
+.stt-meter canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+.stt-progress-active .stt-cancel { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; padding: 6px; }
+.stt-cancel .lucide { width: 16px; height: 16px; }
+.stt-meter { position: relative; display: block; flex: 1; min-width: 24px; height: 58px; overflow: hidden; color: var(--text); }
+.stt-recording #attach-wrap, .stt-recording #config-chip-wrap, .stt-recording #active-vendor-indicator { display: none; }
+.stt-recording #input-bottom { flex-wrap: nowrap; }
+.home-mate-chat-composer { flex-wrap: wrap; }
+.home-mate-chat-composer.stt-recording { align-items: center; }
+.home-mate-chat-composer.stt-recording .stt-button,
+.home-mate-chat-composer.stt-recording .stt-cancel { width: 34px; height: 34px; flex-basis: 34px; }
+.home-mate-chat-composer > .stt-progress { flex-basis: 100%; }
+#home-mate-chat-composer.stt-recording > #home-mate-chat-input { flex-basis: 100%; order: -1; }
+.home-mate-chat-composer.stt-recording > .stt-progress-active { flex: 1 1 0; }
+.home-mate-chat-composer > .stt-progress-error { margin: 0 0 4px; }
+.stt-picker {
+  position: fixed; z-index: 10010; width: 324px; max-width: calc(100vw - 16px); overflow-y: auto;
+  padding: 14px; box-sizing: border-box; background: var(--sidebar-bg); color: var(--text);
+  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(var(--shadow-rgb), .24);
+  font-size: 12px;
+}
+.stt-picker button, .stt-picker input, .stt-picker select { font: inherit; color: inherit; }
+.stt-picker button { cursor: pointer; }
+.stt-picker button:disabled { opacity: .5; cursor: default; }
+.stt-picker-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
+.stt-picker-heading button { background: transparent; border: 0; padding: 4px; border-radius: 4px; }
+.stt-picker-heading .lucide { width: 16px; height: 16px; }
+.stt-picker p { color: var(--text-muted); line-height: 1.5; margin: 10px 0; }
+.stt-mode-tabs { display: flex; background: rgba(var(--overlay-rgb), .04); padding: 3px; border-radius: 8px; gap: 3px; }
+.stt-mode-tabs button { flex: 1; background: transparent; border: 0; border-radius: 6px; padding: 7px 4px; }
+.stt-mode-tabs button[aria-pressed="true"] { background: var(--bg); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .15); color: var(--text); }
+.stt-model-list { max-height: 270px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -5px; }
+.stt-model { display: flex; width: 100%; text-align: left; align-items: center; gap: 8px; border: 0; background: transparent; padding: 9px 7px; border-radius: 7px; }
+.stt-model:hover, .stt-model[aria-pressed="true"] { background: rgba(var(--overlay-rgb), .06); }
+.stt-model > span:not(.stt-model-check) { flex: 1; min-width: 0; }
+.stt-model strong { font-size: 12px; font-weight: 500; }
+.stt-model small { font-size: 10px; color: var(--accent); flex-shrink: 0; }
+.stt-model-check { width: 14px; flex-shrink: 0; }
+.stt-model-check .lucide { width: 13px; height: 13px; }
+.stt-model img { width: 20px; height: 20px; object-fit: contain; background: white; border-radius: 50%; }
+.stt-picker-footer { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
+.stt-picker-footer label { display: flex; align-items: center; justify-content: space-between; }
+.stt-picker select { max-width: 150px; padding: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; }
+.stt-key-form label { display: block; margin-bottom: 6px; }
+.stt-key-form input { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
+.stt-key-form a { color: var(--accent); }
+.stt-key-actions { display: flex; justify-content: space-between; margin-top: 16px; gap: 8px; }
+.stt-key-actions button { border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; background: var(--bg); }
+.stt-picker .stt-picker-error { color: var(--error, #c83737); }
+.stt-controls button:focus-visible, .stt-picker :focus-visible, .stt-progress button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+#home-mate-chat-input { min-width: 0; }
+@media (max-width: 600px) {
+  .stt-picker { left: 8px !important; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)) !important; width: auto; max-height: 75dvh !important; border-radius: 16px; }
+  .stt-picker-toggle { width: 24px; }
+  .stt-picker button { min-height: 36px; }
+}
+/* Compact provider rows keep setup beside the model it belongs to. */
+.stt-mode-tabs button { text-align: left; padding: 8px; }
+.stt-mode-tabs strong { display: block; font-size: 12px; font-weight: 500; }
+.stt-mode-tabs button span { display: block; font-size: 10px; line-height: 1.4; color: var(--text-muted); margin-top: 4px; white-space: normal; }
+.stt-model-list { margin-top: 10px; max-height: 340px; }
+.stt-model-row { display: flex; align-items: center; gap: 2px; }
+.stt-model-row .stt-model { flex: 1; min-width: 0; gap: 10px; min-height: 38px; }
+.stt-model-row .stt-model > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.stt-key-toggle { border: 0; background: transparent; padding: 8px; color: var(--text-muted); border-radius: 6px; font-size: 10px !important; }
+.stt-key-toggle:hover { background: rgba(var(--overlay-rgb), .06); }
+.stt-key-toggle .lucide, .stt-browser-icon .lucide { width: 16px; height: 16px; }
+.stt-model .stt-browser-icon { flex: 0 0 20px !important; display: flex; justify-content: center; }
+.stt-model .stt-model-check { flex: 0 0 14px; }
+.stt-key-form { padding: 10px; margin: 2px 4px 8px; background: rgba(var(--overlay-rgb), .03); border: 1px solid var(--border); border-radius: 8px; }
+.stt-key-actions { align-items: center; margin-top: 8px; }
+.stt-key-actions a { margin-right: auto; }
+.stt-picker { display: flex; flex-direction: column; overflow: hidden; }
+.stt-picker-heading, .stt-mode-tabs, .stt-picker-footer { flex-shrink: 0; }
+.stt-model-list { min-height: 0; flex-shrink: 1; }

package/lib/public/icons/speech/SOURCES.txt

@@ -0,0 +1,5 @@
+Speech provider marks identify the service receiving a user's audio.
+ElevenLabs and Deepgram SVGs: Simple Icons (CC0-1.0), https://github.com/simple-icons/simple-icons
+Soniox PNG: https://soniox.com/icons/favicon-32x32.png
+Groq SVG: https://groq.com/favicon.svg
+Retrieved 2026-09-25. Brand marks remain subject to their respective owners' trademark rights.

package/lib/public/icons/speech/deepgram.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Deepgram</title><path d="M11.203 24H1.517a.364.364 0 0 1-.258-.62l6.239-6.275a.366.366 0 0 1 .259-.108h3.52c2.723 0 5.025-2.127 5.107-4.845a5.004 5.004 0 0 0-4.999-5.148H7.613v4.646c0 .2-.164.364-.365.364H.968a.365.365 0 0 1-.363-.364V.364C.605.164.768 0 .969 0h10.416c6.684 0 12.111 5.485 12.01 12.187C23.293 18.77 17.794 24 11.202 24z"/></svg>

package/lib/public/icons/speech/elevenlabs.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ElevenLabs</title><path d="M4.6035 0v24h4.9317V0zm9.8613 0v24h4.9317V0z"/></svg>

package/lib/public/icons/speech/groq.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="33" height="33" viewBox="0 0 33 33"><g clip-path="url(#a)"><path fill="#F43E01" d="M.54.39h32v32h-32z"/><path fill="#fff" d="m18.445 4.406-9.468 13.74 7.341.665-1.69 9.578 9.469-13.74-7.342-.664 1.69-9.579Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M.54.39h32v32h-32z"/></clipPath></defs></svg>

package/lib/public/index.html

@@ -183,9 +183,10 @@
                 </section>
                 <div class="home-mate-chat-messages" id="home-mate-chat-messages"></div>
                 <button id="home-chat-new-activity" class="home-chat-new-activity" type="button" hidden><i data-lucide="arrow-down" aria-hidden="true"></i><span>New activity</span></button>
-                <div class="home-mate-chat-composer-frame">
+                <div id="home-mate-chat-composer-frame" class="home-mate-chat-composer-frame">
                   <div id="home-mate-chat-composer" class="home-mate-chat-composer">
                     <textarea id="home-mate-chat-input" rows="1" placeholder="Message"></textarea>
+                    <button id="home-stt-btn" type="button" aria-label="Start voice input"><i data-lucide="mic"></i></button>
                     <button id="home-mate-chat-send" aria-label="Send message"><i data-lucide="arrow-up"></i></button>
                   </div>
                   <div id="home-mate-chat-session-model" class="home-mate-chat-session-model" role="status" aria-live="polite" title="Model for this conversation: Loading model…">
@@ -564,7 +565,6 @@
                 <button id="input-more-btn" type="button" aria-label="More options" title="More options" class="mobile-only"><i data-lucide="plus"></i></button>
                 <button id="attach-file-btn" type="button" aria-label="Attach file" title="Attach file" class="desktop-only"><i data-lucide="paperclip"></i></button>
                 <button id="attach-image-btn" type="button" aria-label="Attach image" title="Attach image" class="desktop-only"><i data-lucide="image"></i></button>
-                <button id="stt-btn" type="button" aria-label="Voice input" title="Voice input"><i data-lucide="mic"></i></button>
                 <div id="context-sources-btn-wrap" class="desktop-only">
                   <button id="context-sources-add" type="button" aria-label="Add context" title="Add context sources"><i data-lucide="library"></i></button>
                   <div id="context-sources-picker" class="hidden">
@@ -640,6 +640,7 @@
                   </div>
                 </div>
               </div>
+              <button id="stt-btn" type="button" aria-label="Voice input" title="Voice input"><i data-lucide="mic"></i></button>
               <button id="send-btn" disabled aria-label="Send"><i data-lucide="arrow-up"></i></button>
             </div>
           </div>

package/lib/public/modules/home-mate-chat.js

@@ -1,3 +1,4 @@
+import { stopSTT } from './stt-controller.js';
 // home-mate-chat.js - Embedded conversation surface for the selected mate.
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
@@ -85,6 +86,7 @@ function renderSessionModel() {
   sessionModelEl.setAttribute("aria-label", "Model for this conversation: " + label);
 }
 function submitMessage() {
+  stopSTT();
   var mateId = store.get('homeChatMateId');
   var text = inputEl ? inputEl.value.trim() : "";
   if (!mateId || !text || streaming || hasPendingHomeDebateQuestion(messages) || !hasCommittedSessionModel()) return false;
@@ -105,6 +107,7 @@ function submitSuggestion(text) {
   submitMessage();
 }
 export function startNewHomeConversation() {
+  stopSTT();
   setHomeSubSurface("chat");
   var mateId = store.get('homeChatMateId');
   if (!mateId || streaming) return;
@@ -118,6 +121,7 @@ export function startNewHomeConversation() {
   renderHomeChat();
 }
 export function startHomeCapsuleCreation(mateId, description) {
+  stopSTT();
   if (!mateId || mateId !== store.get('homeChatMateId') || !description || streaming) return false;
   setHomeSubSurface("chat"); resetHomeDebateLaunch();
   mateCreationActive = false;
@@ -232,6 +236,7 @@ export function renderHomeChat() {
   restoreHomeChatScroll(scrollSnapshot);
 }
 export function openHomeChat(mateId) {
+  stopSTT();
   if (!mateId) return;
   setHomeSubSurface("chat");
   resetHomeDebateLaunch();
@@ -250,6 +255,7 @@ export function openHomeChat(mateId) {
   if (store.get('homeSurfaceLoaded')) resumeHomeChat();
 }
 export function openHomeConversation(mateId, sessionId) {
+  stopSTT();
   if (!mateId || !sessionId) return;
   setHomeSubSurface("chat");
   resetHomeDebateLaunch();
@@ -268,6 +274,7 @@ export function openHomeConversation(mateId, sessionId) {
   if (store.get('homeSurfaceLoaded')) resumeHomeChat();
 }
 export function openHomeMateAction(kind, initialTopic) {
+  stopSTT();
   if (kind !== "debate" && kind !== "mate") return false;
   var mates = store.get('cachedMatesList') || [];
   var clay = null;
@@ -297,6 +304,7 @@ export function resumeHomeChat() {
   else requestHomeSession({ type: "home_mate_open", mateId: mateId }, null);
 }
 export function closeHomeChat() {
+  stopSTT();
   resetHomeDebateLaunch();
   sendMessage({ type: "home_mate_close" });
   streaming = false;

package/lib/public/modules/input.js

@@ -1,3 +1,4 @@
+import { stopSTT } from './stt-controller.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { setRewindMode, isRewindMode } from './rewind.js';
 import { renderPicker as renderContextPicker } from './context-sources.js';
@@ -111,6 +112,7 @@ function showPreThinkingForTurn() {
 
 // --- Send ---
 export function sendMessage() {
+  stopSTT();
   // Debate ended mode intercept: route to resume handler
   if (ctx.isDebateEndedMode && ctx.isDebateEndedMode() && ctx.handleDebateEndedSend) {
     ctx.handleDebateEndedSend();

package/lib/public/modules/profile.js

@@ -3,7 +3,6 @@
 // Generated identities use deterministic local pixel identicons.
 
 import { iconHtml, refreshIcons } from './icons.js';
-import { setSTTLang } from './stt.js';
 import { avatarUrl, mateAvatarUrl, mateMarkUrl, userAvatarSeed } from './avatar.js';
 import { store } from './store.js';
 import { applyTerminalFont } from './terminal-prefs.js';
@@ -519,9 +518,6 @@ export function initProfile(_ctx) {
 
     applyToIsland();
 
-    if (profile.lang) {
-      setSTTLang(profile.lang);
-    }
 
     // Hydrate terminal font prefs at boot. Previously this only happened
     // when the user opened the Settings modal (user-settings.js's

package/lib/public/modules/stt-audio-worklet.js

@@ -0,0 +1,32 @@
+// Downsample microphone audio to mono 16 kHz PCM without retaining the recording.
+class SpeechPCMProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.samples = []; this.phase = 0; this.sum = 0; this.count = 0;
+    this.port.onmessage = function (event) {
+      if (event.data === 'flush') { this.flush(); this.port.postMessage({ flushed: true }); }
+    }.bind(this);
+  }
+  flush() {
+    if (!this.samples.length) return;
+    var pcm = new Int16Array(this.samples); this.samples = [];
+    this.port.postMessage({ pcm: pcm.buffer }, [pcm.buffer]);
+  }
+  process(inputs) {
+    var channels = inputs[0];
+    if (!channels || !channels[0]) return true;
+    for (var i = 0; i < channels[0].length; i++) {
+      var value = 0;
+      for (var c = 0; c < channels.length; c++) value += channels[c][i] / channels.length;
+      this.sum += value; this.count++; this.phase += 16000;
+      if (this.phase >= sampleRate) {
+        var sample = Math.max(-1, Math.min(1, this.sum / this.count));
+        this.samples.push(Math.round(sample * (sample < 0 ? 32768 : 32767)));
+        this.phase -= sampleRate; this.sum = 0; this.count = 0;
+      }
+      if (this.samples.length >= 1600) this.flush();
+    }
+    return true;
+  }
+}
+registerProcessor('clay-speech-pcm', SpeechPCMProcessor);

package/lib/public/modules/stt-audio.js

@@ -0,0 +1,68 @@
+export async function captureSpeech(onAudio, trace) {
+  trace = trace || function () {};
+  var stage = 'capability-check';
+  var Constructor = window.AudioContext || window.webkitAudioContext;
+  trace(stage, { audioContext: !!Constructor, mediaDevices: !!navigator.mediaDevices, secureContext: window.isSecureContext });
+  if (!Constructor || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) throw new Error('Microphone recording is unavailable in this browser.');
+  var context = new Constructor();
+  trace('audio-context-created', { state: context.state, sampleRate: context.sampleRate });
+  var stream; var node; var source; var sink; var closed = false;
+  function close() {
+    if (closed) return; closed = true;
+    trace('audio-cleanup', { stage: stage, hasStream: !!stream, hasWorklet: !!node });
+    if (node) node.disconnect(); if (source) source.disconnect(); if (sink) sink.disconnect();
+    if (stream) stream.getTracks().forEach(function (track) { track.stop(); });
+    context.close().catch(function () {});
+  }
+  try {
+    stage = 'audio-context-resume'; trace(stage);
+    await context.resume();
+    stage = 'microphone-permission'; trace(stage, { state: context.state });
+    stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
+    trace('microphone-granted', { tracks: stream.getTracks().length });
+    stream.getTracks().forEach(function (track) {
+      if (!track.addEventListener) return;
+      ['ended', 'mute', 'unmute'].forEach(function (event) {
+        track.addEventListener(event, function () { trace('microphone-track-' + event, { state: track.readyState }); });
+      });
+    });
+    stage = 'audio-worklet-load'; trace(stage);
+    await context.audioWorklet.addModule('/modules/stt-audio-worklet.js');
+    stage = 'audio-worklet-create'; trace(stage);
+    node = new AudioWorkletNode(context, 'clay-speech-pcm');
+    var flushResolve;
+    node.port.onmessage = function (event) {
+      if (closed) return;
+      if (event.data.pcm) onAudio(event.data.pcm);
+      if (event.data.flushed && flushResolve) flushResolve();
+    };
+    source = context.createMediaStreamSource(stream);
+    sink = context.createGain(); sink.gain.value = 0;
+    source.connect(node); node.connect(sink); sink.connect(context.destination);
+    stage = 'capturing'; trace('audio-connected', { state: context.state, sampleRate: context.sampleRate });
+    return {
+      abort: close,
+      finish: async function () {
+        if (closed) return;
+        source.disconnect();
+        await new Promise(function (resolve) {
+          var timer = setTimeout(resolve, 250);
+          flushResolve = function () { clearTimeout(timer); resolve(); };
+          node.port.postMessage('flush');
+        });
+        close();
+      }
+    };
+  } catch (error) { trace('audio-start-failed', { stage: stage, errorName: error.name }); close(); throw error; }
+}
+
+export function wavRecording(chunks) {
+  var length = chunks.reduce(function (sum, chunk) { return sum + chunk.byteLength; }, 0);
+  var header = new ArrayBuffer(44); var view = new DataView(header);
+  function string(at, text) { for (var i = 0; i < text.length; i++) view.setUint8(at + i, text.charCodeAt(i)); }
+  string(0, 'RIFF'); view.setUint32(4, 36 + length, true); string(8, 'WAVE'); string(12, 'fmt ');
+  view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
+  view.setUint32(24, 16000, true); view.setUint32(28, 32000, true); view.setUint16(32, 2, true); view.setUint16(34, 16, true);
+  string(36, 'data'); view.setUint32(40, length, true);
+  return new Blob([header].concat(chunks), { type: 'audio/wav' });
+}