@epicbagel/saas-kit 1.6.0 → 1.10.0

package/README.md

@@ -7,6 +7,7 @@ dark modes.
 
 ## Install
 
+
 ```bash
 npm install @epicbagel/saas-kit
 ```
@@ -14,6 +15,65 @@ npm install @epicbagel/saas-kit
 Peer dependencies: `react` and `react-dom` (18 or 19), `lucide-react`
 (`>=0.400.0 <2`), `react-icons` (5) and `tailwindcss` (4.3 or later).
 
+## Live voice in Chat
+
+Pass a controlled `voiceSession` to `Chat` or `ChatInput` to show start, mute,
+end, connection and speaking controls alongside a separate dictation mic.
+Dictation is disabled during a live call and the typed draft is preserved.
+`VoiceSessionControls` is also exported on its own.
+The host owns audio, authentication, transcripts, retries and cleanup; the kit
+does not import a voice provider. Stop and release audio tracks before setting
+`state: "error"` or unmounting. Every label is replaceable through `labels`.
+
+```tsx
+<Chat messages={messages} onSend={sendMessage} voiceSession={{
+  state: voiceState, muted, error,
+  onStart: startVoice, onEnd: endVoice, onMutedChange: setMuted,
+}} />
+```
+
+## API dictation
+
+Wrap the application in `DictationProvider` to use an authenticated transcription
+API for every `VoiceDictationButton`, including buttons nested in chat, forms or
+another component library. The existing dialog records until **Done**, shows
+**Transcribing…**, then commits the returned text once. Failed requests keep the
+take available for retry. Cancel stops microphone tracks, aborts the request and
+ignores a late answer. The kit never persists audio or knows provider credentials.
+
+```tsx
+import { DictationProvider } from "@epicbagel/saas-kit/primitives/dictation-provider";
+
+<DictationProvider scopeKey={`${actorId}:${workspaceId}`} transcribe={async (audio, { language, signal }) => {
+  // The host sends the Blob to its authenticated API. Preserve audio.type
+  // and pass signal to fetch; keep provider keys on the server.
+  return transcribeRecording(audio, { language, signal });
+}}>
+  <App />
+</DictationProvider>
+```
+
+Set `scopeKey` from the acting user and workspace (including impersonation, if
+the app supports it). A changed scope discards the active take, stops recording
+and aborts transcription without remounting the application. Responses from the
+previous scope are ignored even before the cleanup effect runs; a failed take
+cannot be retried under the new scope.
+
+`useDictation` (`hooks/use-dictation`) exposes the same capture lifecycle for a
+custom trigger such as press-and-hold: `start()`, `stop()`, `retry()`, `cancel()`,
+`state`, `supported`, `transcript`, `interimTranscript`, `error` and `canRetry`.
+`stop()` and `retry()` return the completed text, or `null` after cancellation or
+failure. Choose either that result or `onTranscript` to commit; using both would
+duplicate the host action. The callback receives one complete API transcript,
+or finalized chunks with native recognition. API recording requires HTTPS (or
+localhost), microphone permission and MediaRecorder. It does not produce live
+interim text; the live voice controls are a separate feature.
+
+Without a provider, controls retain browser-native speech recognition. The
+private ui-kit's `VoiceInput` uses this same provider and capture hook, and its
+provider export is a shim of this exact context.
+
+
 ## Styles
 
 If the app has no Tailwind entry of its own, import the complete stylesheet:
@@ -94,7 +154,8 @@ public in 1.1.0, and these were the decisions about its props then:
   ("Thinking…"), `scrollButtonLabel` ("Scroll to latest message"),
   `uploadingLabel` ("Uploading…"), `voiceHeroLabel` ("Tap to speak"),
   `voiceHeroSwitchLabel` ("or type instead"), `examplePromptsLabel` ("Try"),
-  `examplePromptsLoadingLabel` ("Loading suggestions…"), `addFilesLabel`,
+  `examplePromptsLoadingLabel` ("Loading suggestions…"),
+  `replySuggestionsLabel` ("Suggested replies"), `addFilesLabel`,
   `placeholder` and `activePlaceholder`. The defaults are plain English with
   no product voice, and the empty state has no title unless you pass
   `emptyTitle`. The icon buttons' accessible names ("Send", "Add to
@@ -114,6 +175,15 @@ public in 1.1.0, and these were the decisions about its props then:
 - **Example prompts.** `examplePromptsVariant` is `chips` (the default: chips
   that wrap onto as many lines as they need), `row` (one line that scrolls
   sideways) or `cards` (a two-column grid).
+- **Reply suggestions (1.7.0).** `replySuggestions` are the replies the
+  conversation offers next. They show once the conversation has started, at
+  the composer, directly above the input, as the example prompts' chips (one
+  implementation draws both), and wrap rather than cover the input on a
+  phone. `replySuggestionsLabel` ("Suggested replies") names the group.
+  Picking a suggestion of either kind sends only its words, `onSend(text,
+  [])`: the draft and staged files stay, and a failure is reported without
+  touching them. Suggestions are disabled while `pending`; pass none once
+  they no longer apply.
 - **Failed sends.** When `onSend` rejects, Chat puts the text back in the
   composer and calls `onSendError`; without one it reports the rejection
   through `reportError`, so a failure is never silent.

package/THIRD_PARTY_NOTICES.md

@@ -268,3 +268,17 @@ The Apache License, Version 2.0:
 
    END OF TERMS AND CONDITIONS
 ```
+
+
+## LiveKit Agents UI
+
+Source: https://github.com/livekit/components-js/tree/3f74806f1c8484b2eb2fd40773dd1be80760750c/packages/shadcn
+
+`primitives/agent-audio-visualizer-bar` and
+`hooks/use-agent-audio-visualizer-bar` are adapted from LiveKit's
+`components/agents-ui/agent-audio-visualizer-bar.tsx` and
+`hooks/agents-ui/use-agent-audio-visualizer-bar.ts` at that commit.
+LiveKit contributors license them under Apache-2.0 (full license above).
+The compiled output includes these adaptations. We removed the LiveKit React
+track hook and accept host-supplied volume bands, clamp band values/counts,
+and respect reduced motion and stop idle animation loops.

package/dist/chunk-2BSFYU22.cjs

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+// src/hooks/use-agent-audio-visualizer-bar.ts
+var _react = require('react');
+function generateConnectingSequenceBar(columns) {
+  const seq = [];
+  for (let x = 0; x < columns; x++) {
+    seq.push([x, columns - 1 - x]);
+  }
+  return seq;
+}
+function generateListeningSequenceBar(columns) {
+  const center = Math.floor(columns / 2);
+  const noIndex = -1;
+  return [[center], [noIndex]];
+}
+function useAgentAudioVisualizerBarAnimator(state, columns, interval) {
+  const [index, setIndex] = _react.useState.call(void 0, 0);
+  const [sequence, setSequence] = _react.useState.call(void 0, [[]]);
+  _react.useEffect.call(void 0, () => {
+    if (state === "thinking") {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === "connecting" || state === "initializing") {
+      const sequence2 = [...generateConnectingSequenceBar(columns)];
+      setSequence(sequence2);
+    } else if (state === "listening") {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === void 0 || state === "speaking") {
+      setSequence([new Array(columns).fill(0).map((_, idx) => idx)]);
+    } else {
+      setSequence([[]]);
+    }
+    setIndex(0);
+  }, [state, columns]);
+  const animationFrameId = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (sequence.length < 2) return;
+    const preference = _optionalChain([window, 'access', _2 => _2.matchMedia, 'optionalCall', _3 => _3("(prefers-reduced-motion: reduce)")]);
+    const stop = () => {
+      if (animationFrameId.current !== null) cancelAnimationFrame(animationFrameId.current);
+      animationFrameId.current = null;
+    };
+    const start = () => {
+      stop();
+      if (_optionalChain([preference, 'optionalAccess', _4 => _4.matches])) {
+        setIndex(0);
+        return;
+      }
+      let startTime = performance.now();
+      const animate = (time) => {
+        if (time - startTime >= interval) {
+          setIndex((prev) => prev + 1);
+          startTime = time;
+        }
+        animationFrameId.current = requestAnimationFrame(animate);
+      };
+      animationFrameId.current = requestAnimationFrame(animate);
+    };
+    start();
+    _optionalChain([preference, 'optionalAccess', _5 => _5.addEventListener, 'call', _6 => _6("change", start)]);
+    return () => {
+      stop();
+      _optionalChain([preference, 'optionalAccess', _7 => _7.removeEventListener, 'call', _8 => _8("change", start)]);
+    };
+  }, [interval, columns, state, sequence.length]);
+  return _nullishCoalesce(sequence[index % sequence.length], () => ( []));
+}
+
+
+
+exports.useAgentAudioVisualizerBarAnimator = useAgentAudioVisualizerBarAnimator;

package/dist/{chunk-GTVSRRE3.cjs → chunk-BGCNGYPL.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkMU4F3DSWcjs = require('./chunk-MU4F3DSW.cjs');
+var _chunkFARCLWLUcjs = require('./chunk-FARCLWLU.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
@@ -38,7 +38,7 @@ function CodeBlock({
       }
     ),
     copy ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkMU4F3DSWcjs.CopyButton,
+      _chunkFARCLWLUcjs.CopyButton,
       {
         text: copyText,
         label: copyLabel,

package/dist/{chunk-QTWJQQDH.cjs → chunk-FBVZRRA4.cjs}

@@ -7,16 +7,16 @@ var _chunkEUFV25KLcjs = require('./chunk-EUFV25KL.cjs');
 var _chunk7YCKII7Gcjs = require('./chunk-7YCKII7G.cjs');
 
 
-var _chunkCRTH5GJ5cjs = require('./chunk-CRTH5GJ5.cjs');
+var _chunkMW67PHAQcjs = require('./chunk-MW67PHAQ.cjs');
 
 
-var _chunkLELBCBDTcjs = require('./chunk-LELBCBDT.cjs');
 
 
 
+var _chunkU2NES7VRcjs = require('./chunk-U2NES7VR.cjs');
 
 
-var _chunkU2NES7VRcjs = require('./chunk-U2NES7VR.cjs');
+var _chunkLELBCBDTcjs = require('./chunk-LELBCBDT.cjs');
 
 
 
@@ -32,10 +32,10 @@ var _chunkPQUSJEXLcjs = require('./chunk-PQUSJEXL.cjs');
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
 
 
-var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
 
 
-var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
 
 // src/primitives/resource-list.tsx
 var _lucidereact = require('lucide-react');
@@ -268,7 +268,7 @@ function ResourceList({
   const controlsVisible = !(hideControlsWhenEmpty && !loading && !error && _optionalChain([data, 'optionalAccess', _5 => _5.length]) === 0);
   const filterOnQuickRow = filterBarVisible && !toolbarHasOtherControls && hasQuickFilters;
   const filterBarNode = filterBarVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkCRTH5GJ5cjs.FilterBar,
+    _chunkMW67PHAQcjs.FilterBar,
     {
       filters: filterSchema,
       onFiltersChange,

package/dist/chunk-GJ7S3L6R.js

@@ -0,0 +1,71 @@
+"use client";
+
+// src/hooks/use-agent-audio-visualizer-bar.ts
+import { useEffect, useRef, useState } from "react";
+function generateConnectingSequenceBar(columns) {
+  const seq = [];
+  for (let x = 0; x < columns; x++) {
+    seq.push([x, columns - 1 - x]);
+  }
+  return seq;
+}
+function generateListeningSequenceBar(columns) {
+  const center = Math.floor(columns / 2);
+  const noIndex = -1;
+  return [[center], [noIndex]];
+}
+function useAgentAudioVisualizerBarAnimator(state, columns, interval) {
+  const [index, setIndex] = useState(0);
+  const [sequence, setSequence] = useState([[]]);
+  useEffect(() => {
+    if (state === "thinking") {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === "connecting" || state === "initializing") {
+      const sequence2 = [...generateConnectingSequenceBar(columns)];
+      setSequence(sequence2);
+    } else if (state === "listening") {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === void 0 || state === "speaking") {
+      setSequence([new Array(columns).fill(0).map((_, idx) => idx)]);
+    } else {
+      setSequence([[]]);
+    }
+    setIndex(0);
+  }, [state, columns]);
+  const animationFrameId = useRef(null);
+  useEffect(() => {
+    if (sequence.length < 2) return;
+    const preference = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    const stop = () => {
+      if (animationFrameId.current !== null) cancelAnimationFrame(animationFrameId.current);
+      animationFrameId.current = null;
+    };
+    const start = () => {
+      stop();
+      if (preference?.matches) {
+        setIndex(0);
+        return;
+      }
+      let startTime = performance.now();
+      const animate = (time) => {
+        if (time - startTime >= interval) {
+          setIndex((prev) => prev + 1);
+          startTime = time;
+        }
+        animationFrameId.current = requestAnimationFrame(animate);
+      };
+      animationFrameId.current = requestAnimationFrame(animate);
+    };
+    start();
+    preference?.addEventListener("change", start);
+    return () => {
+      stop();
+      preference?.removeEventListener("change", start);
+    };
+  }, [interval, columns, state, sequence.length]);
+  return sequence[index % sequence.length] ?? [];
+}
+
+export {
+  useAgentAudioVisualizerBarAnimator
+};

package/dist/{chunk-LKPM6DQP.cjs → chunk-HTCW6AEH.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
@@ -6,6 +6,9 @@ var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
 
+
+var _chunkO6F3LVZYcjs = require('./chunk-O6F3LVZY.cjs');
+
 // src/primitives/voice-dictation-button.tsx
 
 
@@ -31,87 +34,61 @@ function VoiceDictationButton({
   visibility = "visible",
   shrink = true
 }) {
-  const [supported, setSupported] = _react.useState.call(void 0, false);
   const [open, setOpen] = _react.useState.call(void 0, false);
-  const [transcript, setTranscript] = _react.useState.call(void 0, "");
-  const [interim, setInterim] = _react.useState.call(void 0, "");
-  const [errored, setErrored] = _react.useState.call(void 0, false);
-  const recognitionRef = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
-    const w = window;
-    const Ctor = _nullishCoalesce(w.SpeechRecognition, () => ( w.webkitSpeechRecognition));
-    setSupported(typeof Ctor === "function");
-  }, []);
-  const stop = _react.useCallback.call(void 0, () => {
-    _optionalChain([recognitionRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.stop, 'call', _3 => _3()]);
-    recognitionRef.current = null;
-  }, []);
-  const startRecognition = _react.useCallback.call(void 0, () => {
-    const w = window;
-    const Ctor = _nullishCoalesce(w.SpeechRecognition, () => ( w.webkitSpeechRecognition));
-    if (!Ctor) return;
-    const rec = new Ctor();
-    rec.continuous = continuous;
-    rec.interimResults = true;
-    rec.lang = lang;
-    rec.onresult = (event) => {
-      let finalChunk = "";
-      let interimChunk = "";
-      for (let i = event.resultIndex; i < event.results.length; i++) {
-        const r = event.results[i];
-        if (!r) continue;
-        if (r.isFinal) finalChunk += r[0].transcript;
-        else interimChunk += r[0].transcript;
-      }
-      if (finalChunk) {
-        setTranscript((prev) => prev ? prev + " " + finalChunk : finalChunk);
-        setInterim("");
-      } else if (interimChunk) {
-        setInterim(interimChunk);
-      }
-    };
-    rec.onerror = () => {
-      setErrored(true);
-    };
-    rec.onend = () => {
-      recognitionRef.current = null;
-    };
-    recognitionRef.current = rec;
-    setErrored(false);
-    rec.start();
-  }, [continuous, lang]);
+  const capture = _chunkO6F3LVZYcjs.useDictation.call(void 0, { lang, continuous });
+  const { transcript, interimTranscript: interim, supported, error } = capture;
+  const generation = _react.useRef.call(void 0, 0);
+  const finishing = _react.useRef.call(void 0, false);
+  const busy = capture.state === "requesting" || capture.state === "transcribing";
   const openOverlay = _react.useCallback.call(void 0, () => {
-    setTranscript("");
-    setInterim("");
+    generation.current++;
+    finishing.current = false;
     setOpen(true);
-    startRecognition();
-  }, [startRecognition]);
+    void capture.start();
+  }, [capture.start]);
   const closeOverlay = _react.useCallback.call(void 0, () => {
-    stop();
+    generation.current++;
+    finishing.current = false;
+    capture.cancel();
     setOpen(false);
-    setInterim("");
-  }, [stop]);
-  const handleDone = _react.useCallback.call(void 0, () => {
-    const final = `${transcript} ${interim}`.trim();
+  }, [capture.cancel]);
+  const handleDone = _react.useCallback.call(void 0, async () => {
+    if (finishing.current || busy) return;
+    if (capture.state === "error" && !capture.canRetry) {
+      void capture.start();
+      return;
+    }
+    finishing.current = true;
+    const started = generation.current;
+    const final = await (capture.canRetry ? capture.retry() : capture.stop());
+    if (started !== generation.current) return;
+    finishing.current = false;
+    if (final === null) return;
     closeOverlay();
     if (final) onCommit(final);
-    else _optionalChain([onCancel, 'optionalCall', _4 => _4()]);
-  }, [transcript, interim, onCommit, onCancel, closeOverlay]);
+    else _optionalChain([onCancel, 'optionalCall', _ => _()]);
+  }, [busy, capture.canRetry, capture.retry, capture.start, capture.state, capture.stop, onCommit, onCancel, closeOverlay]);
   const handleCancel = _react.useCallback.call(void 0, () => {
     closeOverlay();
-    _optionalChain([onCancel, 'optionalCall', _5 => _5()]);
+    _optionalChain([onCancel, 'optionalCall', _2 => _2()]);
   }, [closeOverlay, onCancel]);
+  _react.useEffect.call(void 0, () => {
+    if (open && capture.state === "idle") handleCancel();
+  }, [capture.state, handleCancel, open]);
   _react.useEffect.call(void 0, () => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Enter" && !e.shiftKey) handleDone();
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        void handleDone();
+      }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, handleDone]);
   _react.useEffect.call(void 0, () => {
     return () => {
-      _optionalChain([recognitionRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.abort, 'call', _8 => _8()]);
+      generation.current++;
     };
   }, []);
   if (!supported) return null;
@@ -148,7 +125,7 @@ function VoiceDictationButton({
       {
         open,
         onOpenChange: (next) => {
-          if (!next) closeOverlay();
+          if (!next) handleCancel();
         },
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Portal, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           DialogPrimitive.Content,
@@ -161,9 +138,10 @@ function VoiceDictationButton({
             className: "fixed inset-0 z-[200] flex flex-col bg-background outline-hidden md:items-center md:justify-center md:bg-black/40 md:backdrop-blur-sm",
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Title, { className: "sr-only", children: "Voice dictation" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogPrimitive.Description, { className: "sr-only", children: "Record your message, then choose Done to add the text. Cancel discards the recording." }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 md:flex-initial w-full md:max-w-lg md:rounded-xl bg-background flex flex-col md:max-h-[80vh] md:shadow-2xl md:border md:border-border", children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between px-4 py-3 border-b border-border md:rounded-t-xl", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono text-xs uppercase tracking-wider text-muted-foreground", children: caption }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "status", className: "font-mono text-xs uppercase tracking-wider text-muted-foreground", children: capture.state === "transcribing" ? "transcribing" : capture.state === "requesting" ? "microphone" : caption }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "button",
                     {
@@ -183,7 +161,7 @@ function VoiceDictationButton({
                         "aria-hidden": true,
                         className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                           "absolute inset-0 rounded-full",
-                          errored ? "bg-destructive/20" : "bg-destructive/20 animate-ping"
+                          error || busy || capture.state !== "recording" ? "bg-destructive/20" : "bg-destructive/20 animate-ping"
                         )
                       }
                     ),
@@ -193,7 +171,7 @@ function VoiceDictationButton({
                         "aria-hidden": true,
                         className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                           "absolute inset-2 rounded-full",
-                          errored ? "bg-destructive/40" : "bg-destructive/40"
+                          "bg-destructive/40"
                         )
                       }
                     ),
@@ -206,8 +184,8 @@ function VoiceDictationButton({
                       transcript ? " " : "",
                       interim
                     ] })
-                  ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground italic text-base", children: "Start speaking \u2014 I'm listening." }) }),
-                  errored && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-destructive mt-4", children: "Couldn't access the microphone. Check permissions." })
+                  ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground italic text-base", children: capture.state === "transcribing" ? "Converting your recording to text\u2026" : capture.state === "requesting" ? "Allow microphone access to start." : "Start speaking, then choose Done." }) }),
+                  error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { role: "alert", className: "text-sm text-destructive mt-4", children: error })
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border-t border-border px-4 py-4 pb-[calc(1rem+env(safe-area-inset-bottom))] md:pb-4 md:rounded-b-xl flex flex-col items-stretch gap-2", children: [
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -215,11 +193,12 @@ function VoiceDictationButton({
                     {
                       size: "lg",
                       className: "h-12 w-full",
-                      onClick: handleDone,
-                      disabled: !displayTranscript.trim(),
-                      children: "Done"
+                      onClick: () => void handleDone(),
+                      disabled: busy,
+                      children: capture.state === "transcribing" ? "Transcribing\u2026" : capture.canRetry ? "Retry transcription" : error ? "Try again" : "Done"
                     }
                   ),
+                  capture.canRetry && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJDEXZGIYcjs.Button, { variant: "ghost", onClick: () => void capture.start(), children: "Record again" }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "button",
                     {

package/dist/{chunk-F3B4M6DU.js → chunk-HTPPNW74.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   CopyButton
-} from "./chunk-HREEZUKL.js";
+} from "./chunk-DILYV4FI.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";

package/dist/chunk-KUG4ONYC.js

@@ -0,0 +1,127 @@
+"use client";
+import {
+  AgentAudioVisualizerBar
+} from "./chunk-VBKJXNEL.js";
+import {
+  Button
+} from "./chunk-W326GKML.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/voice-session-controls.tsx
+import { useSyncExternalStore } from "react";
+import { Mic, MicOff, PhoneOff, AudioLines } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SILENCE = [];
+var silence = () => SILENCE;
+var noSubscription = () => () => {
+};
+var DEFAULT_LABELS = {
+  disconnected: "Voice chat",
+  connecting: "Connecting\u2026",
+  listening: "Listening",
+  thinking: "Thinking\u2026",
+  speaking: "Speaking",
+  reconnecting: "Reconnecting\u2026",
+  error: "Voice chat unavailable",
+  start: "Start voice chat",
+  end: "End voice chat",
+  mute: "Mute microphone",
+  unmute: "Unmute microphone",
+  muted: "Microphone muted",
+  retry: "Retry voice chat"
+};
+function VoiceSessionControls({
+  state,
+  onStart,
+  onEnd,
+  muted = false,
+  onMutedChange,
+  disabled = false,
+  error,
+  volumeBands,
+  audioLevels,
+  labels,
+  size = "icon",
+  className
+}) {
+  const liveBands = useSyncExternalStore(audioLevels?.subscribe ?? noSubscription, audioLevels?.getSnapshot ?? silence, silence);
+  const copy = { ...DEFAULT_LABELS, ...labels };
+  const active = state !== "disconnected" && state !== "error";
+  const waiting = state === "connecting" || state === "reconnecting";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "voice-session-controls",
+      "data-state": state,
+      className: cn("flex min-w-0 items-center gap-2", active && "w-full flex-col gap-3 py-4", !active && "flex-wrap", className),
+      children: [
+        active ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            AgentAudioVisualizerBar,
+            {
+              "aria-hidden": "true",
+              size: "sm",
+              barCount: 5,
+              state: state === "reconnecting" ? "connecting" : state,
+              volumeBands: volumeBands ?? liveBands
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { role: "status", className: "text-sm text-muted-foreground", children: muted && state === "listening" ? copy.muted : copy[state] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                className: "min-h-[44px] min-w-[44px] shrink-0",
+                "aria-label": muted ? copy.unmute : copy.mute,
+                title: muted ? copy.unmute : copy.mute,
+                "aria-pressed": muted,
+                disabled: waiting,
+                onClick: () => onMutedChange(!muted),
+                children: muted ? /* @__PURE__ */ jsx(MicOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Mic, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                shape: "pill",
+                className: "min-h-[44px] shrink-0",
+                "aria-label": copy.end,
+                title: copy.end,
+                onClick: onEnd,
+                children: [
+                  /* @__PURE__ */ jsx(PhoneOff, { "aria-hidden": "true" }),
+                  copy.end
+                ]
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            shape: "circle",
+            disabled,
+            onClick: onStart,
+            "aria-label": state === "error" ? copy.retry : copy.start,
+            title: state === "error" ? copy.retry : copy.start,
+            className: cn("min-h-[44px] min-w-[44px] shrink-0 rounded-full", size === "hero" && "size-24 [&_svg]:size-7"),
+            children: /* @__PURE__ */ jsx(AudioLines, { "aria-hidden": "true" })
+          }
+        ),
+        state === "error" && /* @__PURE__ */ jsx("span", { role: "alert", className: "basis-full text-xs text-destructive", children: error || copy.error })
+      ]
+    }
+  );
+}
+
+export {
+  VoiceSessionControls
+};