feat: migrate from NativeWind to react-native-unistyles and add Speechmatics audio

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/app/components/connection-status.tsx

@@ -1,15 +1,50 @@
 import { View, Text } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 
 interface ConnectionStatusProps {
   isConnected: boolean;
 }
 
+const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  container: {
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.zinc[800],
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: theme.borderRadius.full,
+    marginRight: theme.spacing[2],
+  },
+  dotConnected: {
+    backgroundColor: theme.colors.green[500],
+  },
+  dotDisconnected: {
+    backgroundColor: theme.colors.red[500],
+  },
+  text: {
+    fontSize: theme.fontSize.sm,
+  },
+  textConnected: {
+    color: theme.colors.green[500],
+  },
+  textDisconnected: {
+    color: theme.colors.red[500],
+  },
+}));
+
 export function ConnectionStatus({ isConnected }: ConnectionStatusProps) {
   return (
-    <View className="px-4 py-3 border-b border-zinc-800">
-      <View className="flex-row items-center">
-        <View className={`w-2 h-2 rounded-full mr-2 ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
-        <Text className={isConnected ? 'text-green-500 text-sm' : 'text-red-500 text-sm'}>
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <View style={[styles.dot, isConnected ? styles.dotConnected : styles.dotDisconnected]} />
+        <Text style={[styles.text, isConnected ? styles.textConnected : styles.textDisconnected]}>
           {isConnected ? 'Connected' : 'Disconnected'}
         </Text>
       </View>