feat(app): show live phone voice status

Author: AnkushMalaker

app/app/index.tsx

@@ -323,6 +323,7 @@ export default function App() {
                 isDisabled={!!deviceConnection.connectedDeviceId || deviceConnection.isConnecting}
                 audioLevel={phoneAudioRecorder.audioLevel}
                 error={phoneAudioRecorder.error}
+                playbackState={audioStreamer.phonePlaybackState}
                 onPress={orchestrator.handleTogglePhoneAudio}
               />
             </>

app/scripts/test-phone-duplex-controller.cjs

@@ -30,6 +30,8 @@ const controllerPath = path.join(__dirname, '../src/protocol/phoneDuplexControll
 const { PhoneDuplexController } = loadTypeScript(controllerPath, {
   './voiceProtocol': protocol,
 });
+const statusPath = path.join(__dirname, '../src/protocol/phoneVoiceStatus.ts');
+const { phoneVoiceStatus } = loadTypeScript(statusPath);
 
 const capabilities = {
   mode: 'duplex_full',
@@ -58,6 +60,28 @@ const bound = (type, eventId) => ({
 });
 
 (async () => {
+  assert.equal(phoneVoiceStatus(false, null), null);
+  assert.deepEqual(phoneVoiceStatus(true, null), {
+    label: 'Listening',
+    tone: 'muted',
+  });
+  assert.deepEqual(phoneVoiceStatus(true, 'started'), {
+    label: 'Chronicle speaking',
+    tone: 'accent',
+  });
+  assert.deepEqual(phoneVoiceStatus(true, 'cancelled'), {
+    label: 'Speech interrupted',
+    tone: 'warning',
+  });
+  assert.deepEqual(phoneVoiceStatus(true, 'done'), {
+    label: 'Response complete',
+    tone: 'success',
+  });
+  assert.deepEqual(phoneVoiceStatus(true, 'failed'), {
+    label: 'Playback failed',
+    tone: 'danger',
+  });
+
   const appConfig = JSON.parse(
     fs.readFileSync(path.join(__dirname, '../app.json'), 'utf8'),
   );

app/src/components/PhoneAudioButton.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { Button, Caption, type ButtonVariant } from '@/components/ui';
+import type { NativePlaybackState } from '../../modules/chronicle-duplex-audio';
+import {
+  phoneVoiceStatus,
+  type PhoneVoiceStatusTone,
+} from '@/protocol/phoneVoiceStatus';
 import { useTheme, type Theme } from '@/theme';
 
 interface PhoneAudioButtonProps {
@@ -10,6 +15,7 @@ interface PhoneAudioButtonProps {
   isDisabled: boolean;
   audioLevel: number;
   error: string | null;
+  playbackState: NativePlaybackState['state'] | null;
   onPress: () => void;
 }
 
@@ -19,10 +25,22 @@ const PhoneAudioButton: React.FC<PhoneAudioButtonProps> = ({
   isDisabled,
   audioLevel,
   error,
+  playbackState,
   onPress,
 }) => {
   const t = useTheme();
   const s = createStyles(t);
+  const voiceStatus = phoneVoiceStatus(isRecording, playbackState);
+
+  const statusColor = (tone: PhoneVoiceStatusTone): string => {
+    switch (tone) {
+      case 'accent': return t.color.accent.fg;
+      case 'warning': return t.color.status.warning.fg;
+      case 'success': return t.color.status.success.fg;
+      case 'danger': return t.color.status.danger.fg;
+      default: return t.color.text.muted;
+    }
+  };
 
   const getButtonVariant = (): ButtonVariant => {
     // `secondary` is the neutral chip fill, which is the old `disabled` grey;
@@ -60,13 +78,17 @@ const PhoneAudioButton: React.FC<PhoneAudioButtonProps> = ({
             <View style={[s.audioLevelBar, { width: `${Math.min(audioLevel * 100, 100)}%` }]} />
           </View>
           <Caption style={s.audioLevelText}>Audio Level</Caption>
+          {voiceStatus && (
+            <Caption
+              accessibilityLiveRegion="polite"
+              style={[s.voiceStatusText, { color: statusColor(voiceStatus.tone) }]}
+            >
+              {voiceStatus.label}
+            </Caption>
+          )}
         </View>
       )}
 
-      {isRecording && (
-        <Caption style={s.statusText}>Streaming audio to backend...</Caption>
-      )}
-
       {error && !isRecording && (
         <Caption style={s.errorText}>{error}</Caption>
       )}
@@ -85,10 +107,6 @@ const createStyles = (t: Theme) => StyleSheet.create({
   buttonWrapper: {
     alignSelf: 'stretch',
   },
-  statusText: {
-    textAlign: 'center',
-    marginTop: t.space[2],
-  },
   errorText: {
     textAlign: 'center',
     marginTop: t.space[2],
@@ -118,6 +136,10 @@ const createStyles = (t: Theme) => StyleSheet.create({
   audioLevelText: {
     marginTop: t.space[1],
   },
+  voiceStatusText: {
+    marginTop: t.space[1],
+    fontWeight: t.weight.medium,
+  },
 });
 
 export default PhoneAudioButton;

app/src/hooks/useAudioStreamer.ts

@@ -12,6 +12,7 @@ import {
   cancelResponse,
   scheduleResponse,
   stopVoiceSession,
+  type NativePlaybackState,
 } from '../../modules/chronicle-duplex-audio';
 import {
   PhoneDuplexController,
@@ -31,6 +32,7 @@ interface UseAudioStreamer {
   isStreaming: boolean;
   isConnecting: boolean;
   error: string | null;
+  phonePlaybackState: NativePlaybackState['state'] | null;
   startStreaming: (url: string, config?: StreamStartConfig) => Promise<void>;
   getWebSocketReadyState: () => number | undefined;
   stopStreaming: () => Promise<void>;
@@ -162,6 +164,9 @@ export const useAudioStreamer = (options?: UseAudioStreamerOptions): UseAudioStr
   const [isStreaming, setIsStreaming] = useState<boolean>(false);
   const [isConnecting, setIsConnecting] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
+  const [phonePlaybackState, setPhonePlaybackState] = useState<
+    NativePlaybackState['state'] | null
+  >(null);
 
   const websocketRef = useRef<WebSocket | null>(null);
   const manuallyStoppedRef = useRef<boolean>(false);
@@ -368,6 +373,7 @@ export const useAudioStreamer = (options?: UseAudioStreamerOptions): UseAudioStr
     activeAudioFormatRef.current = AMBIENT_AUDIO_FORMAT;
     streamConfigRef.current = undefined;
     duplexUnsupportedRef.current = false;
+    setStateSafe(setPhonePlaybackState, null);
     await stopForegroundServiceNotification();
   }, [clearDuplexSocketState, sendWyomingEvent, setStateSafe]);
 
@@ -436,6 +442,9 @@ export const useAudioStreamer = (options?: UseAudioStreamerOptions): UseAudioStr
     }
     currentUrlRef.current = trimmed;
     streamConfigRef.current = requestedConfig;
+    if (requestedConfig?.phoneVoice) {
+      setStateSafe(setPhonePlaybackState, null);
+    }
     activeAudioFormatRef.current = requestedConfig?.phoneVoice
       ? phoneAudioFormat(
           requestedConfig.phoneVoice,
@@ -535,6 +544,7 @@ export const useAudioStreamer = (options?: UseAudioStreamerOptions): UseAudioStr
             duplexControllerRef.current = controller;
             duplexSubscriptionsRef.current = [
               addPlaybackStateListener((state) => {
+                setStateSafe(setPhonePlaybackState, state.state);
                 controller.nativePlaybackChanged(state).catch((cause) =>
                   console.error('[AudioStreamer] Playback ACK failed:', cause)
                 );
@@ -848,6 +858,7 @@ export const useAudioStreamer = (options?: UseAudioStreamerOptions): UseAudioStr
     isStreaming,
     isConnecting,
     error,
+    phonePlaybackState,
     startStreaming,
     getWebSocketReadyState,
     stopStreaming,

app/src/protocol/phoneVoiceStatus.ts

@@ -0,0 +1,28 @@
+import type { NativePlaybackState } from '../../modules/chronicle-duplex-audio';
+
+export type PhoneVoiceStatusTone = 'muted' | 'accent' | 'warning' | 'success' | 'danger';
+
+export interface PhoneVoiceStatus {
+  label: string;
+  tone: PhoneVoiceStatusTone;
+}
+
+export function phoneVoiceStatus(
+  isRecording: boolean,
+  playbackState: NativePlaybackState['state'] | null
+): PhoneVoiceStatus | null {
+  if (!isRecording) return null;
+
+  switch (playbackState) {
+    case 'started':
+      return { label: 'Chronicle speaking', tone: 'accent' };
+    case 'cancelled':
+      return { label: 'Speech interrupted', tone: 'warning' };
+    case 'done':
+      return { label: 'Response complete', tone: 'success' };
+    case 'failed':
+      return { label: 'Playback failed', tone: 'danger' };
+    default:
+      return { label: 'Listening', tone: 'muted' };
+  }
+}