@alia.onl/sdk 10.1.1 → 11.0.0

package/src/components/Markdown.tsx

@@ -1,11 +1,15 @@
 import React, { useMemo, type ReactNode } from 'react';
 import { View, Text, Platform, Linking, useColorScheme } from 'react-native';
 import Markdown, { MarkdownIt, type ASTNode } from 'react-native-markdown-display';
+import { CodeBlock } from '@oxy.so/bloom/code';
 import type { AliaColors } from '../theme';
 
 // Hardcoded fallback colors for standalone SDK usage (when no color override is passed).
 // The main app always passes resolved colors via the `colors` prop.
-const FALLBACK_LIGHT: Pick<AliaColors, 'text' | 'muted' | 'border' | 'primary' | 'mutedForeground'> = {
+const FALLBACK_LIGHT: Pick<
+  AliaColors,
+  'text' | 'muted' | 'border' | 'primary' | 'mutedForeground'
+> = {
   text: '#11181C',
   muted: '#F4F4F5',
   border: '#E5E5EA',
@@ -28,32 +32,37 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
   const { text: textColor, muted, border, primary, mutedForeground } = colors;
 
   /**
-   * Fenced and indented code, drawn by the host when it brings a code card of
-   * its own (the app passes Bloom's `CodeBlock`). This package has no Bloom
-   * dependency, so it cannot name one itself; without the prop the library's
-   * default `fence` / `code_block` rendering, styled below, stays.
+   * Fenced and indented code: Bloom's `CodeBlock` unless the host brings a
+   * code card of its own.
    */
-  const codeRules = renderCodeBlock === undefined
-    ? {}
-    : {
-        fence: (node: ASTNode) => (
-          <View key={node.key} style={{ marginVertical: 8 }}>
-            {renderCodeBlock(node.content.replace(/\n$/, ''), codeLanguage(node))}
-          </View>
-        ),
-        code_block: (node: ASTNode) => (
-          <View key={node.key} style={{ marginVertical: 8 }}>
-            {renderCodeBlock(node.content.replace(/\n$/, ''), undefined)}
-          </View>
-        ),
-      };
+  const drawCodeBlock: RenderCodeBlock =
+    renderCodeBlock ?? ((code, language) => <CodeBlock code={code} language={language} />);
+  const codeRules = {
+    fence: (node: ASTNode) => (
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {drawCodeBlock(node.content.replace(/\n$/, ''), codeLanguage(node))}
+      </View>
+    ),
+    code_block: (node: ASTNode) => (
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {drawCodeBlock(node.content.replace(/\n$/, ''), undefined)}
+      </View>
+    ),
+  };
 
   return {
     ...codeRules,
     heading1: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 8, marginTop: 12, fontSize: 18, fontWeight: '600', lineHeight: 24, color: textColor }}
+        style={{
+          marginBottom: 8,
+          marginTop: 12,
+          fontSize: 18,
+          fontWeight: '600',
+          lineHeight: 24,
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -61,7 +70,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading2: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 8, marginTop: 12, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
+        style={{
+          marginBottom: 8,
+          marginTop: 12,
+          ...HEADING_TEXT,
+          fontWeight: '600',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -69,7 +84,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading3: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
+        style={{
+          marginBottom: 6,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '600',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -77,7 +98,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading4: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
+        style={{
+          marginBottom: 6,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -85,7 +112,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading5: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
+        style={{
+          marginBottom: 4,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -93,7 +126,13 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
     heading6: (node: ASTNode, children: ReactNode[]) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
+        style={{
+          marginBottom: 4,
+          marginTop: 8,
+          ...HEADING_TEXT,
+          fontWeight: '500',
+          color: textColor,
+        }}
       >
         {children}
       </Text>
@@ -138,19 +177,27 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
 
       return (
         <View key={node.key} style={{ flexDirection: 'row', paddingVertical: 2, paddingLeft: 16 }}>
-          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>{bullet}</Text>
+          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>
+            {bullet}
+          </Text>
           <Text style={{ flex: 1, ...BODY_TEXT, color: textColor }}>{children}</Text>
         </View>
       );
     },
     ordered_list: (node: ASTNode, children: ReactNode[]) => (
-      <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {children}
+      </View>
     ),
     unordered_list: (node: ASTNode, children: ReactNode[]) => (
-      <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
+      <View key={node.key} style={{ marginVertical: 8 }}>
+        {children}
+      </View>
     ),
     strong: (node: ASTNode, children: ReactNode[]) => (
-      <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>
+        {children}
+      </Text>
     ),
     link: (node: ASTNode, children: ReactNode[]) => (
       <Text
@@ -164,7 +211,9 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
       </Text>
     ),
     paragraph: (node: ASTNode, children: ReactNode[]) => (
-      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>
+        {children}
+      </Text>
     ),
     blockquote: (node: ASTNode, children: ReactNode[]) => (
       <View
@@ -194,7 +243,11 @@ function createRules(colors: AliaColors, renderCodeBlock?: RenderCodeBlock) {
       />
     ),
     body: (node: ASTNode, children: ReactNode[]) => {
-      return <View key={node.key} style={{ marginBottom: -8 }}>{children}</View>;
+      return (
+        <View key={node.key} style={{ marginBottom: -8 }}>
+          {children}
+        </View>
+      );
     },
   };
 }
@@ -215,9 +268,8 @@ function createStyles(colors: AliaColors, fontFamily: string | undefined) {
     // in any Expo consumer, and this renderer cannot inherit a face.
     //
     // `fontFamily` therefore comes from the caller, which is the only party
-    // that both knows the family and is allowed to name it: this package has no
-    // `@oxy.so/bloom` dependency, and react-native-markdown-display takes RN
-    // style objects, so there is no className path to NativeWind's token.
+    // that both knows the family and is allowed to name it: react-native-markdown-display
+    // takes RN style objects, so there is no className path to NativeWind's token.
     body: { ...BODY_TEXT, color: textColor, fontFamily },
     text: { ...BODY_TEXT, color: textColor, fontFamily },
     paragraph: { marginTop: 0, marginBottom: 8 },
@@ -255,7 +307,13 @@ function createStyles(colors: AliaColors, fontFamily: string | undefined) {
       borderRadius: 6,
       padding: 12,
     },
-    table: { borderWidth: 1, borderColor: border, borderRadius: 12, marginVertical: 8, overflow: 'hidden' as const },
+    table: {
+      borderWidth: 1,
+      borderColor: border,
+      borderRadius: 12,
+      marginVertical: 8,
+      overflow: 'hidden' as const,
+    },
     thead: { backgroundColor: muted },
     th: { flex: 1, padding: 8, fontWeight: '600' as const, ...BODY_TEXT, color: textColor },
     td: { flex: 1, padding: 8, ...BODY_TEXT, color: textColor },
@@ -289,8 +347,8 @@ export interface AliaMarkdownProps {
    * Omitted, body text inherits: correct on web, where Bloom's
    * `--bloom-font-sans` reaches it through the cascade. On native nothing is
    * inherited (see `createStyles`), so a native caller that wants Bloom's face
-   * has to pass it — this package has no `@oxy.so/bloom` dependency and so
-   * cannot name it itself.
+   * has to pass it — this renderer takes RN style objects, so it cannot
+   * read Bloom's token itself.
    */
   fontFamily?: string;
   content: string;
@@ -412,13 +470,31 @@ function ParsedMarkdown({ content, rules, styles }: MarkdownBlockProps) {
 
 const MarkdownBlock = React.memo(ParsedMarkdown);
 
-export function AliaMarkdown({ content, colors: colorOverrides, fontFamily, renderCodeBlock }: AliaMarkdownProps) {
+export function AliaMarkdown({
+  content,
+  colors: colorOverrides,
+  fontFamily,
+  renderCodeBlock,
+}: AliaMarkdownProps) {
   const scheme = useColorScheme();
   const fallback = scheme === 'dark' ? FALLBACK_DARK : FALLBACK_LIGHT;
   const colors = { ...fallback, ...colorOverrides } as AliaColors;
 
-  const customRules = useMemo(() => createRules(colors, renderCodeBlock), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground, renderCodeBlock]);
-  const markdownStyles = useMemo(() => createStyles(colors, fontFamily), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground, fontFamily]);
+  const customRules = useMemo(
+    () => createRules(colors, renderCodeBlock),
+    [
+      colors.text,
+      colors.muted,
+      colors.border,
+      colors.primary,
+      colors.mutedForeground,
+      renderCodeBlock,
+    ],
+  );
+  const markdownStyles = useMemo(
+    () => createStyles(colors, fontFamily),
+    [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground, fontFamily],
+  );
   const blocks = useMemo(() => splitMarkdownBlocks(content), [content]);
 
   if (blocks.length === 1) {

package/src/components/PlanPreviewCard.tsx

@@ -1,11 +1,13 @@
-import { View, Pressable } from 'react-native';
-import { Text } from './ui/text';
-import { Button } from './ui/button';
-import Check from 'lucide-react-native/icons/check';
-import X from 'lucide-react-native/icons/x';
-import ListChecks from 'lucide-react-native/icons/list-checks';
+import { Button } from '@oxy.so/bloom/button';
+import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@oxy.so/bloom/card';
+import { RiCheckLine, RiCloseLine, RiListCheck3 } from '@oxy.so/bloom/icons';
+import { Item } from '@oxy.so/bloom/item';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { planPreviewEnter } from '../animations';
+import { useLabels } from '../lib/labels';
 import type { PlanStep } from '../types';
 
 interface PlanPreviewCardProps {
@@ -16,64 +18,78 @@ interface PlanPreviewCardProps {
   rejected?: boolean;
 }
 
-export function PlanPreviewCard({ steps, onApprove, onReject, approved, rejected }: PlanPreviewCardProps) {
-  if (approved) {
-    return (
-      <View className="flex-row items-center gap-1.5 py-1">
-        <Check size={12} className="text-green-500" />
-        <Text className="text-xs text-muted-foreground">Plan approved</Text>
-      </View>
-    );
-  }
+/** The plan Alia proposes, until the person approves or cancels it; then one line saying which. */
+export function PlanPreviewCard({
+  steps,
+  onApprove,
+  onReject,
+  approved,
+  rejected,
+}: PlanPreviewCardProps) {
+  const labels = useLabels();
+  const { colors } = useTheme();
 
-  if (rejected) {
+  if (approved || rejected) {
+    const Icon = approved ? RiCheckLine : RiCloseLine;
     return (
       <View className="flex-row items-center gap-1.5 py-1">
-        <X size={12} className="text-red-500" />
-        <Text className="text-xs text-muted-foreground">Plan cancelled</Text>
+        <Icon width={14} height={14} fill={approved ? colors.success : colors.error} />
+        <Text className="text-xs text-text-secondary">
+          {approved ? labels.planApproved : labels.planCancelled}
+        </Text>
       </View>
     );
   }
 
   return (
-    <Animated.View entering={planPreviewEnter}>
-      <View className="border border-border rounded-xl bg-card p-4 gap-3 my-2">
-        <View className="flex-row items-center gap-2">
-          <ListChecks size={16} className="text-foreground" />
-          <Text className="text-sm font-semibold text-foreground">Here's my plan</Text>
-        </View>
-
-        <View className="gap-2">
-          {steps.map((step, i) => (
-            <View key={i} className="flex-row items-start gap-2.5">
-              <View className="w-5 h-5 rounded-full bg-muted items-center justify-center mt-0.5">
-                <Text className="text-[10px] font-bold text-muted-foreground">{i + 1}</Text>
-              </View>
-              <View className="flex-1">
-                <Text className="text-[13px] font-medium text-foreground">{step.action}</Text>
-                {step.description ? (
-                  <Text className="text-xs text-muted-foreground">{step.description}</Text>
-                ) : null}
-              </View>
-            </View>
+    <Animated.View entering={planPreviewEnter} className="my-2">
+      <Card appearance="outline">
+        <CardHeader>
+          <View className="flex-row items-center gap-2">
+            <RiListCheck3 width={16} height={16} fill={colors.icon} />
+            <CardTitle>{labels.planTitle}</CardTitle>
+          </View>
+        </CardHeader>
+        <CardBody>
+          {steps.map((step, index) => (
+            <Item
+              // A plan has no ids and its steps never reorder: the position is the identity.
+              // biome-ignore lint/suspicious/noArrayIndexKey: see above
+              key={index}
+              density="compact"
+              leading={
+                <Text className="w-5 text-center text-xs font-bold text-text-secondary">
+                  {index + 1}
+                </Text>
+              }
+              title={step.action}
+              subtitle={step.description || undefined}
+            />
           ))}
-        </View>
-
-        <View className="flex-row gap-2 pt-1">
-          <Button onPress={onApprove} size="sm" className="flex-1">
-            <View className="flex-row items-center gap-1.5">
-              <Check size={14} className="text-primary-foreground" />
-              <Text className="text-sm font-medium text-primary-foreground">Approve</Text>
-            </View>
-          </Button>
-          <Pressable
-            onPress={onReject}
-            className="flex-1 items-center justify-center py-2 rounded-lg active:opacity-70"
-          >
-            <Text className="text-sm text-muted-foreground">Cancel</Text>
-          </Pressable>
-        </View>
-      </View>
+        </CardBody>
+        <CardFooter>
+          <View className="flex-1 flex-row gap-2">
+            <Button
+              tone="action"
+              size="sm"
+              className="flex-1"
+              leadingIcon={RiCheckLine}
+              onPress={onApprove}
+            >
+              {labels.planApprove}
+            </Button>
+            <Button
+              tone="neutral"
+              appearance="subtle"
+              size="sm"
+              className="flex-1"
+              onPress={onReject}
+            >
+              {labels.planCancel}
+            </Button>
+          </View>
+        </CardFooter>
+      </Card>
     </Animated.View>
   );
 }

package/src/components/ThinkingBlock.tsx

@@ -0,0 +1,47 @@
+import { AgentThinking } from '@oxy.so/bloom/agent-thinking';
+import { useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { useLabels } from '../lib/labels';
+import { AliaMarkdown } from './Markdown';
+
+interface ThinkingBlockProps {
+  /** The model's reasoning, as Markdown. */
+  text: string;
+  /** Still reasoning: the block opens, and closes again when this turns false. */
+  streaming: boolean;
+}
+
+/**
+ * A turn's reasoning: Bloom's `AgentThinking` as a disclosure (live while it
+ * streams, "Thought for N seconds" once done), with the text set as Markdown.
+ * Open and close, the indicator and the chevron are Bloom's; this only counts
+ * how long the stream ran, because the message carries no duration.
+ */
+export function ThinkingBlock({ text, streaming }: ThinkingBlockProps) {
+  const labels = useLabels();
+  const startedAt = useRef<number | null>(null);
+  const [seconds, setSeconds] = useState<number>();
+
+  useEffect(() => {
+    if (streaming) {
+      startedAt.current = Date.now();
+    } else if (startedAt.current !== null) {
+      setSeconds(Math.max(1, Math.round((Date.now() - startedAt.current) / 1000)));
+      startedAt.current = null;
+    }
+  }, [streaming]);
+
+  const finishedLabel = seconds ? labels.thoughtFor(seconds) : labels.reasoning;
+
+  return (
+    <AgentThinking
+      variant="stars"
+      thinking={streaming}
+      label={streaming ? undefined : finishedLabel}
+    >
+      <View style={{ opacity: streaming ? 0.8 : 1 }}>
+        <AliaMarkdown content={text} />
+      </View>
+    </AgentThinking>
+  );
+}

package/src/components/VoiceModeIcon.tsx

@@ -0,0 +1,10 @@
+import Entypo from '@expo/vector-icons/Entypo';
+import type { BloomIconComponent } from '@oxy.so/bloom/icons';
+
+/**
+ * The glyph of Alia's voice button: Entypo's `sound`. Remix has no equivalent, so it is
+ * handed Bloom's icon contract (`width` / `fill`) for a Bloom `Button` to size and colour.
+ */
+export const VoiceModeIcon: BloomIconComponent = ({ width = 18, fill }) => (
+  <Entypo name="sound" size={width} color={fill} />
+);

package/src/components/voice/VoiceControls.tsx

@@ -1,12 +1,12 @@
 /**
  * Bottom voice control bar that replaces the composer when voice mode is active.
- * Contains status text and mute/end buttons.
+ * Contains status text and Bloom's mute/end call controls.
  */
 
-import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
-import Mic from 'lucide-react-native/icons/mic';
-import MicOff from 'lucide-react-native/icons/mic-off';
-import PhoneOff from 'lucide-react-native/icons/phone-off';
+import { CallControls } from '@oxy.so/bloom/call-ui';
+import { Loading } from '@oxy.so/bloom/loading';
+import { Text } from '@oxy.so/bloom/typography';
+import { View } from 'react-native';
 import type { RoomState, AgentState } from '../../types';
 
 /** Every word the bar shows or announces. An app in another language passes its own. */
@@ -40,8 +40,6 @@ export interface VoiceControlsProps {
   isMuted: boolean;
   onToggleMute: () => void;
   onEnd: () => void;
-  /** Override theme primary color (resolved hex/hsl value, not CSS var) */
-  primaryColor?: string;
   /** Overrides for any of {@link VOICE_CONTROLS_LABELS}. */
   labels?: Partial<VoiceControlsLabels>;
 }
@@ -68,84 +66,35 @@ export function VoiceControls({
   isMuted,
   onToggleMute,
   onEnd,
-  primaryColor,
   labels: labelOverrides,
 }: VoiceControlsProps) {
   const labels = { ...VOICE_CONTROLS_LABELS, ...labelOverrides };
   const statusText = getStatusText(roomState, agentState, isMuted, labels);
 
   return (
-    <View style={styles.container}>
+    <View className="items-center gap-4 pb-6 pt-4">
       {statusText ? (
-        <Text className="text-lg font-medium mb-4 text-foreground" accessibilityLiveRegion="polite" aria-live="polite">
+        <Text
+          className="text-lg font-medium text-text-primary"
+          accessibilityLiveRegion="polite"
+          aria-live="polite"
+        >
           {statusText}
         </Text>
       ) : null}
 
-      {roomState === 'connected' && (
-        <View style={styles.buttonRow}>
-          <View style={styles.buttonWrapper}>
-            <Pressable
-              onPress={onToggleMute}
-              accessibilityRole="button"
-              accessibilityLabel={labels.mute}
-              accessibilityState={{ selected: isMuted }}
-              aria-pressed={isMuted}
-              className={isMuted ? undefined : 'bg-muted'}
-              style={[styles.button, isMuted ? { backgroundColor: '#ef4444' } : undefined]}
-            >
-              {isMuted ? (
-                <MicOff size={24} color="white" />
-              ) : (
-                <Mic size={24} color="white" />
-              )}
-            </Pressable>
-            <Text className="text-xs text-muted-foreground">
-              {isMuted ? labels.unmute : labels.mute}
-            </Text>
-          </View>
-
-          <View style={styles.buttonWrapper}>
-            <Pressable
-              onPress={onEnd}
-              accessibilityRole="button"
-              accessibilityLabel={labels.end}
-              style={[styles.button, { backgroundColor: '#ef4444' }]}
-            >
-              <PhoneOff size={24} color="white" />
-            </Pressable>
-            <Text className="text-xs text-muted-foreground">{labels.end}</Text>
-          </View>
-        </View>
-      )}
+      {roomState === 'connected' ? (
+        <CallControls
+          muted={isMuted}
+          onMutedChange={onToggleMute}
+          onEndCall={onEnd}
+          // TODO(bloom): `CallControls` draws its captions for a dark call stage, so on the
+          // chat's light surface they vanish. The buttons keep their accessible names.
+          labels={{ mute: labels.mute, unmute: labels.unmute, endCall: labels.end }}
+        />
+      ) : null}
 
-      {roomState === 'connecting' && (
-        <ActivityIndicator size="large" className="text-muted-foreground" />
-      )}
+      {roomState === 'connecting' ? <Loading accessibilityLabel={labels.connecting} /> : null}
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    paddingBottom: 24,
-    paddingTop: 16,
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 32,
-  },
-  buttonWrapper: {
-    alignItems: 'center',
-    gap: 8,
-  },
-  button: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/components/voice/VoiceSession.tsx

@@ -11,6 +11,7 @@
 
 import { useEffect, useRef } from 'react';
 import { useVoiceRoom } from '../../hooks/useVoiceRoom';
+import { VOICE_ERROR_MESSAGES } from '../../lib/speech-messages';
 import { useAudioLevelMonitor } from '../../hooks/useAudioLevelMonitor';
 import { useAudioLevels } from '../../hooks/useAudioLevels';
 import { VoiceControls } from './VoiceControls';
@@ -57,7 +58,7 @@ export function VoiceSession({ apiUrl, onStateChange, onEnd }: VoiceSessionProps
   useEffect(() => {
     if (roomState === 'connected') reachedRoomRef.current = true;
     if (error || roomState === 'error') {
-      onEnd();
+      onEnd(error ?? VOICE_ERROR_MESSAGES['turn-failed']);
       return;
     }
     if (roomState === 'disconnected' && reachedRoomRef.current) onEnd();