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/active-processes.tsx

@@ -1,4 +1,5 @@
 import { View, Text, Pressable, ScrollView } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import type { AgentStatus } from '@server/server/acp/types';
 
 export interface ActiveProcessesProps {
@@ -59,6 +60,81 @@ function getModeColor(modeId?: string): string {
   return '#9ca3af'; // gray - unknown
 }
 
+const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  container: {
+    backgroundColor: theme.colors.zinc[900],
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.zinc[800],
+  },
+  header: {
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.zinc[800],
+  },
+  backButton: {
+    backgroundColor: theme.colors.zinc[800],
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+  },
+  backButtonActive: {
+    backgroundColor: theme.colors.zinc[700],
+  },
+  backButtonText: {
+    color: '#fff',
+    fontSize: theme.fontSize.sm,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  scrollView: {
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+  },
+  processItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+  },
+  processItemActive: {
+    backgroundColor: theme.colors.blue[600],
+  },
+  processItemInactive: {
+    backgroundColor: theme.colors.zinc[800],
+  },
+  agentIcon: {
+    width: 12,
+    height: 12,
+    borderRadius: theme.borderRadius.full,
+    backgroundColor: theme.colors.blue[500],
+  },
+  commandIcon: {
+    width: 12,
+    height: 12,
+    borderRadius: theme.borderRadius.sm,
+    backgroundColor: theme.colors.purple[500],
+  },
+  processText: {
+    color: '#fff',
+    fontSize: theme.fontSize.xs,
+    fontWeight: '500',
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: theme.borderRadius.full,
+  },
+  modeIndicator: {
+    width: 6,
+    height: 6,
+    borderRadius: theme.borderRadius.full,
+    opacity: 0.3,
+  },
+}));
+
 export function ActiveProcesses({
   agents,
   commands,
@@ -74,29 +150,24 @@ export function ActiveProcesses({
   }
 
   return (
-    <View className="bg-zinc-900 border-b border-zinc-800">
-      {/* Header with Back button */}
+    <View style={styles.container}>
       {hasActiveProcess && (
-        <View className="px-4 py-3 border-b border-zinc-800">
+        <View style={styles.header}>
           <Pressable
             onPress={onBackToOrchestrator}
-            className="bg-zinc-800 px-4 py-2 rounded-lg active:bg-zinc-700"
+            style={({ pressed }) => [styles.backButton, pressed && styles.backButtonActive]}
           >
-            <Text className="text-white text-sm font-semibold text-center">
-              Back to Chat
-            </Text>
+            <Text style={styles.backButtonText}>Back to Chat</Text>
           </Pressable>
         </View>
       )}
 
-      {/* Scrollable process list */}
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
-        className="px-4 py-3"
+        style={styles.scrollView}
         contentContainerStyle={{ gap: 8 }}
       >
-        {/* Agents */}
         {agents.map((agent) => {
           const modeName = getModeName(agent.currentModeId, agent.availableModes);
           const isActive = activeProcessType === 'agent' && activeProcessId === agent.id;
@@ -105,36 +176,25 @@ export function ActiveProcesses({
             <Pressable
               key={`agent-${agent.id}`}
               onPress={() => onSelectAgent(agent.id)}
-              className={`flex-row items-center gap-2 px-3 py-2 rounded-lg ${
-                isActive ? 'bg-blue-600' : 'bg-zinc-800'
-              } active:opacity-70`}
+              style={({ pressed }) => [
+                styles.processItem,
+                isActive ? styles.processItemActive : styles.processItemInactive,
+                pressed && { opacity: 0.7 },
+              ]}
             >
-              {/* Agent icon */}
-              <View className="w-3 h-3 rounded-full bg-blue-500" />
+              <View style={styles.agentIcon} />
 
-              {/* Agent ID (shortened) */}
-              <Text className="text-white text-xs font-medium">
-                {agent.id.substring(0, 8)}
-              </Text>
+              <Text style={styles.processText}>{agent.id.substring(0, 8)}</Text>
 
-              {/* Status indicator */}
-              <View
-                className="w-2 h-2 rounded-full"
-                style={{ backgroundColor: getAgentStatusColor(agent.status) }}
-              />
+              <View style={[styles.statusDot, { backgroundColor: getAgentStatusColor(agent.status) }]} />
 
-              {/* Mode indicator */}
               {agent.currentModeId && (
-                <View
-                  className="w-1.5 h-1.5 rounded-full opacity-30"
-                  style={{ backgroundColor: getModeColor(agent.currentModeId) }}
-                />
+                <View style={[styles.modeIndicator, { backgroundColor: getModeColor(agent.currentModeId) }]} />
               )}
             </Pressable>
           );
         })}
 
-        {/* Commands */}
         {commands.map((command) => {
           const statusColor = command.isDead
             ? command.exitCode === 0
@@ -143,23 +203,14 @@ export function ActiveProcesses({
             : '#3b82f6';
 
           return (
-            <View
-              key={`command-${command.id}`}
-              className="flex-row items-center gap-2 px-3 py-2 rounded-lg bg-zinc-800"
-            >
-              {/* Command icon */}
-              <View className="w-3 h-3 rounded-sm bg-purple-500" />
+            <View key={`command-${command.id}`} style={[styles.processItem, styles.processItemInactive]}>
+              <View style={styles.commandIcon} />
 
-              {/* Command name */}
-              <Text className="text-white text-xs font-medium" numberOfLines={1}>
+              <Text style={styles.processText} numberOfLines={1}>
                 {command.name || command.currentCommand.substring(0, 20)}
               </Text>
 
-              {/* Status indicator */}
-              <View
-                className="w-2 h-2 rounded-full"
-                style={{ backgroundColor: statusColor }}
-              />
+              <View style={[styles.statusDot, { backgroundColor: statusColor }]} />
             </View>
           );
         })}

packages/app/components/agent-stream-view.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { View, Text, ScrollView, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet } from 'react-native-unistyles';
 import type { AgentStatus } from '@server/server/acp/types';
 import type { SessionNotification } from '@agentclientprotocol/sdk';
 
@@ -80,11 +81,11 @@ function AgentUpdate({
     // Handle message chunks
     if (sessionUpdate.kind === 'agent_message_chunk') {
       return (
-        <View className="bg-zinc-800 rounded-lg p-3 mb-2">
-          <Text className="text-zinc-500 text-xs mb-1">
+        <View style={stylesheet.updateCard}>
+          <Text style={stylesheet.timestampText}>
             {formatTimestamp(update.timestamp)}
           </Text>
-          <Text className="text-white text-sm">{sessionUpdate.chunk || ''}</Text>
+          <Text style={stylesheet.messageText}>{sessionUpdate.chunk || ''}</Text>
         </View>
       );
     }
@@ -92,21 +93,21 @@ function AgentUpdate({
     // Handle tool calls
     if (sessionUpdate.kind === 'tool_call') {
       return (
-        <View className="bg-zinc-800 rounded-lg mb-2 overflow-hidden">
+        <View style={stylesheet.collapsibleCard}>
           <Pressable
             onPress={() => setIsExpanded(!isExpanded)}
-            className="px-3 py-2 active:bg-zinc-700"
+            style={stylesheet.collapsibleHeader}
           >
-            <Text className="text-zinc-500 text-xs mb-1">
+            <Text style={stylesheet.timestampText}>
               {formatTimestamp(update.timestamp)}
             </Text>
-            <Text className="text-blue-400 text-sm font-medium">
+            <Text style={stylesheet.toolCallText}>
               Tool Call: {sessionUpdate.toolName || 'unknown'}
             </Text>
           </Pressable>
           {isExpanded && sessionUpdate.arguments && (
-            <View className="px-3 pb-3 border-t border-zinc-700">
-              <Text className="text-zinc-400 text-xs font-mono mt-2">
+            <View style={stylesheet.collapsibleContent}>
+              <Text style={stylesheet.codeText}>
                 {JSON.stringify(sessionUpdate.arguments, null, 2)}
               </Text>
             </View>
@@ -118,11 +119,11 @@ function AgentUpdate({
     // Handle tool call updates
     if (sessionUpdate.kind === 'tool_call_update') {
       return (
-        <View className="bg-zinc-800 rounded-lg p-3 mb-2">
-          <Text className="text-zinc-500 text-xs mb-1">
+        <View style={stylesheet.updateCard}>
+          <Text style={stylesheet.timestampText}>
             {formatTimestamp(update.timestamp)}
           </Text>
-          <Text className="text-yellow-400 text-sm">
+          <Text style={stylesheet.updateStatusText}>
             {sessionUpdate.status || 'updating'}
           </Text>
         </View>
@@ -133,22 +134,22 @@ function AgentUpdate({
     if (sessionUpdate.kind === 'available_commands_update') {
       const commands = sessionUpdate.commands || [];
       return (
-        <View className="bg-zinc-800 rounded-lg mb-2 overflow-hidden">
+        <View style={stylesheet.collapsibleCard}>
           <Pressable
             onPress={() => setIsExpanded(!isExpanded)}
-            className="px-3 py-2 active:bg-zinc-700"
+            style={stylesheet.collapsibleHeader}
           >
-            <Text className="text-zinc-500 text-xs mb-1">
+            <Text style={stylesheet.timestampText}>
               {formatTimestamp(update.timestamp)}
             </Text>
-            <Text className="text-green-400 text-sm font-medium">
+            <Text style={stylesheet.commandsText}>
               Available Commands ({commands.length})
             </Text>
           </Pressable>
           {isExpanded && (
-            <View className="px-3 pb-3 border-t border-zinc-700">
+            <View style={stylesheet.collapsibleContent}>
               {commands.map((cmd: any, idx: number) => (
-                <Text key={idx} className="text-zinc-400 text-xs mt-1">
+                <Text key={idx} style={stylesheet.commandItem}>
                   • {cmd.name || cmd}
                 </Text>
               ))}
@@ -160,11 +161,11 @@ function AgentUpdate({
 
     // Generic session update
     return (
-      <View className="bg-zinc-800 rounded-lg p-3 mb-2">
-        <Text className="text-zinc-500 text-xs mb-1">
+      <View style={stylesheet.updateCard}>
+        <Text style={stylesheet.timestampText}>
           {formatTimestamp(update.timestamp)}
         </Text>
-        <Text className="text-zinc-400 text-xs font-mono">
+        <Text style={stylesheet.codeText}>
           {JSON.stringify(sessionUpdate, null, 2)}
         </Text>
       </View>
@@ -173,11 +174,11 @@ function AgentUpdate({
 
   // Fallback for unknown notification types
   return (
-    <View className="bg-zinc-800 rounded-lg p-3 mb-2">
-      <Text className="text-zinc-500 text-xs mb-1">
+    <View style={stylesheet.updateCard}>
+      <Text style={stylesheet.timestampText}>
         {formatTimestamp(update.timestamp)}
       </Text>
-      <Text className="text-zinc-400 text-xs font-mono">
+      <Text style={stylesheet.codeText}>
         {JSON.stringify(notification, null, 2)}
       </Text>
     </View>
@@ -204,49 +205,51 @@ export function AgentStreamView({
   const canKill = agent.status !== 'killed' && agent.status !== 'completed';
 
   return (
-    <View className="flex-1 bg-black">
+    <View style={stylesheet.container}>
       {/* Header */}
-      <View className="bg-zinc-900 border-b border-zinc-800 px-4 pb-4" style={{ paddingTop: insets.top + 16 }}>
+      <View style={[stylesheet.header, { paddingTop: insets.top + 16 }]}>
         {/* Back button */}
         <Pressable
           onPress={onBack}
-          className="bg-zinc-800 px-4 py-2 rounded-lg mb-4 active:bg-zinc-700"
+          style={stylesheet.backButton}
         >
-          <Text className="text-white text-sm font-semibold text-center">
+          <Text style={stylesheet.backButtonText}>
             ← Back to Chat
           </Text>
         </Pressable>
 
         {/* Agent info */}
-        <View className="flex-row items-center justify-between mb-3">
-          <View className="flex-row items-center gap-2">
-            <Text className="text-zinc-400 text-sm">Agent:</Text>
-            <Text className="text-white text-sm font-mono">
+        <View style={stylesheet.agentInfoRow}>
+          <View style={stylesheet.agentIdRow}>
+            <Text style={stylesheet.agentLabel}>Agent:</Text>
+            <Text style={stylesheet.agentId}>
               {agentId.substring(0, 8)}
             </Text>
           </View>
           <View
-            className="flex-row items-center gap-2 px-3 py-1 rounded-full"
-            style={{ backgroundColor: getStatusColor(agent.status) }}
+            style={[
+              stylesheet.statusBadge,
+              { backgroundColor: getStatusColor(agent.status) }
+            ]}
           >
-            <Text className="text-white text-xs">{getStatusIcon(agent.status)}</Text>
-            <Text className="text-white text-xs font-medium">{agent.status}</Text>
+            <Text style={stylesheet.statusIcon}>{getStatusIcon(agent.status)}</Text>
+            <Text style={stylesheet.statusText}>{agent.status}</Text>
           </View>
         </View>
 
-        <Text className="text-zinc-500 text-xs">
+        <Text style={stylesheet.createdText}>
           Created: {formatTimestamp(agent.createdAt)}
         </Text>
 
         {/* Control buttons */}
         {(canCancel || canKill) && (
-          <View className="flex-row gap-2 mt-4">
+          <View style={stylesheet.controlButtons}>
             {canCancel && (
               <Pressable
                 onPress={() => onCancelAgent(agentId)}
-                className="flex-1 bg-orange-600 px-4 py-2 rounded-lg active:bg-orange-700"
+                style={stylesheet.cancelButton}
               >
-                <Text className="text-white text-sm font-semibold text-center">
+                <Text style={stylesheet.controlButtonText}>
                   Cancel
                 </Text>
               </Pressable>
@@ -254,9 +257,9 @@ export function AgentStreamView({
             {canKill && (
               <Pressable
                 onPress={() => onKillAgent(agentId)}
-                className="flex-1 bg-red-600 px-4 py-2 rounded-lg active:bg-red-700"
+                style={stylesheet.killButton}
               >
-                <Text className="text-white text-sm font-semibold text-center">
+                <Text style={stylesheet.controlButtonText}>
                   Kill
                 </Text>
               </Pressable>
@@ -268,12 +271,12 @@ export function AgentStreamView({
       {/* Updates list */}
       <ScrollView
         ref={scrollViewRef}
-        className="flex-1 px-4"
+        style={stylesheet.scrollView}
         contentContainerStyle={{ paddingTop: 16, paddingBottom: Math.max(insets.bottom, 32) }}
       >
         {updates.length === 0 ? (
-          <View className="flex-1 items-center justify-center py-12">
-            <Text className="text-zinc-500 text-sm text-center">
+          <View style={stylesheet.emptyState}>
+            <Text style={stylesheet.emptyStateText}>
               No updates yet.{'\n'}Waiting for agent activity...
             </Text>
           </View>
@@ -284,3 +287,167 @@ export function AgentStreamView({
     </View>
   );
 }
+
+const stylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.black,
+  },
+  header: {
+    backgroundColor: theme.colors.zinc[900],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.zinc[800],
+    paddingHorizontal: theme.spacing[4],
+    paddingBottom: theme.spacing[4],
+  },
+  backButton: {
+    backgroundColor: theme.colors.zinc[800],
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+    marginBottom: theme.spacing[4],
+  },
+  backButtonText: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+    textAlign: "center",
+  },
+  agentInfoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing[3],
+  },
+  agentIdRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  agentLabel: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.sm,
+  },
+  agentId: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.sm,
+    fontFamily: "monospace",
+  },
+  statusBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[1],
+    borderRadius: theme.borderRadius.full,
+  },
+  statusIcon: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.xs,
+  },
+  statusText: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  createdText: {
+    color: theme.colors.zinc[500],
+    fontSize: theme.fontSize.xs,
+  },
+  controlButtons: {
+    flexDirection: "row",
+    gap: theme.spacing[2],
+    marginTop: theme.spacing[4],
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: theme.colors.orange[600],
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+  },
+  killButton: {
+    flex: 1,
+    backgroundColor: theme.colors.red[600],
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+  },
+  controlButtonText: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+    textAlign: "center",
+  },
+  scrollView: {
+    flex: 1,
+    paddingHorizontal: theme.spacing[4],
+  },
+  emptyState: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.spacing[12],
+  },
+  emptyStateText: {
+    color: theme.colors.zinc[500],
+    fontSize: theme.fontSize.sm,
+    textAlign: "center",
+  },
+  updateCard: {
+    backgroundColor: theme.colors.zinc[800],
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing[3],
+    marginBottom: theme.spacing[2],
+  },
+  collapsibleCard: {
+    backgroundColor: theme.colors.zinc[800],
+    borderRadius: theme.borderRadius.lg,
+    marginBottom: theme.spacing[2],
+    overflow: "hidden",
+  },
+  collapsibleHeader: {
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+  },
+  collapsibleContent: {
+    paddingHorizontal: theme.spacing[3],
+    paddingBottom: theme.spacing[3],
+    borderTopWidth: theme.borderWidth[1],
+    borderTopColor: theme.colors.zinc[700],
+  },
+  timestampText: {
+    color: theme.colors.zinc[500],
+    fontSize: theme.fontSize.xs,
+    marginBottom: theme.spacing[1],
+  },
+  messageText: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.sm,
+  },
+  toolCallText: {
+    color: "#60a5fa",
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  updateStatusText: {
+    color: "#fbbf24",
+    fontSize: theme.fontSize.sm,
+  },
+  commandsText: {
+    color: "#4ade80",
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  commandItem: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.xs,
+    marginTop: theme.spacing[1],
+  },
+  codeText: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.xs,
+    fontFamily: "monospace",
+    marginTop: theme.spacing[2],
+  },
+}));

packages/app/components/artifact-drawer.tsx

@@ -1,10 +1,17 @@
-import { View, Text, ScrollView, Pressable, Modal } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useEffect } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Pressable,
+  Modal,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useEffect } from "react";
+import { StyleSheet } from "react-native-unistyles";
 
 export interface Artifact {
   id: string;
-  type: 'markdown' | 'diff' | 'image' | 'code';
+  type: "markdown" | "diff" | "image" | "code";
   title: string;
   content: string;
   isBase64: boolean;
@@ -15,10 +22,145 @@ interface ArtifactDrawerProps {
   onClose: () => void;
 }
 
+const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.black,
+    flexDirection: "column",
+  },
+  header: {
+    paddingBottom: theme.spacing[4],
+    paddingHorizontal: theme.spacing[4],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.zinc[800],
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  titleContainer: {
+    flex: 1,
+    marginRight: theme.spacing[4],
+  },
+  title: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize["2xl"],
+    fontWeight: theme.fontWeight.bold,
+  },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  badge: {
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[1],
+    borderRadius: theme.borderRadius.full,
+  },
+  badgeMarkdown: {
+    backgroundColor: theme.colors.blue[600],
+  },
+  badgeDiff: {
+    backgroundColor: theme.colors.purple[600],
+  },
+  badgeImage: {
+    backgroundColor: theme.colors.green[600],
+  },
+  badgeCode: {
+    backgroundColor: theme.colors.orange[600],
+  },
+  badgeText: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  closeButton: {
+    backgroundColor: theme.colors.zinc[800],
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  closeButtonText: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize["2xl"],
+    fontWeight: theme.fontWeight.bold,
+  },
+  contentScroll: {
+    flex: 1,
+    backgroundColor: theme.colors.black,
+  },
+  contentScrollContainer: {
+    padding: theme.spacing[4],
+    flexGrow: 1,
+  },
+  imagePlaceholder: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  imagePlaceholderText: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.sm,
+  },
+  imagePlaceholderSubtext: {
+    color: theme.colors.zinc[600],
+    fontSize: theme.fontSize.xs,
+    marginTop: theme.spacing[2],
+  },
+  codeContainer: {
+    backgroundColor: theme.colors.zinc[900],
+    borderRadius: theme.borderRadius.lg,
+    padding: theme.spacing[4],
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.zinc[800],
+  },
+  codeText: {
+    color: theme.colors.zinc[300],
+    fontSize: theme.fontSize.sm,
+    fontFamily: "monospace",
+  },
+  metadataContainer: {
+    backgroundColor: theme.colors.zinc[900],
+    padding: theme.spacing[3],
+    borderTopWidth: theme.borderWidth[1],
+    borderTopColor: theme.colors.zinc[800],
+    marginTop: theme.spacing[2],
+  },
+  metadataTitle: {
+    color: theme.colors.zinc[500],
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+    marginBottom: theme.spacing[2],
+  },
+  metadataRow: {
+    flexDirection: "row",
+    marginBottom: theme.spacing[1],
+  },
+  metadataLabel: {
+    color: theme.colors.zinc[500],
+    fontSize: theme.fontSize.xs,
+    width: 80,
+  },
+  metadataValue: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.xs,
+    flex: 1,
+    fontFamily: "monospace",
+  },
+}));
+
 export function ArtifactDrawer({ artifact, onClose }: ArtifactDrawerProps) {
   useEffect(() => {
     if (!artifact) return;
-    console.log('[ArtifactDrawer] Showing artifact:', artifact.id, artifact.type, artifact.title);
+    console.log(
+      "[ArtifactDrawer] Showing artifact:",
+      artifact.id,
+      artifact.type,
+      artifact.title
+    );
   }, [artifact]);
 
   if (!artifact) {
@@ -28,12 +170,12 @@ export function ArtifactDrawer({ artifact, onClose }: ArtifactDrawerProps) {
   // Decode content if base64
   const content = artifact.isBase64 ? atob(artifact.content) : artifact.content;
 
-  // Type badge colors
-  const typeColors = {
-    markdown: 'bg-blue-600',
-    diff: 'bg-purple-600',
-    image: 'bg-green-600',
-    code: 'bg-orange-600',
+  // Type badge style mapping
+  const typeBadgeStyles = {
+    markdown: styles.badgeMarkdown,
+    diff: styles.badgeDiff,
+    image: styles.badgeImage,
+    code: styles.badgeCode,
   };
 
   return (
@@ -43,84 +185,81 @@ export function ArtifactDrawer({ artifact, onClose }: ArtifactDrawerProps) {
       presentationStyle="pageSheet"
       onRequestClose={onClose}
     >
-      <SafeAreaView edges={['top', 'bottom']} className="flex-1 bg-black">
+      <SafeAreaView edges={["top", "bottom"]} style={styles.container}>
         {/* Header */}
-        <View className="pb-4 px-4 border-b border-zinc-800">
-          <View className="flex-row items-center justify-between">
-            <View className="flex-1 mr-4">
-              <Text className="text-white text-xl font-bold" numberOfLines={2}>
+        <View style={styles.header}>
+          <View style={styles.headerRow}>
+            <View style={styles.titleContainer}>
+              <Text style={styles.title} numberOfLines={2}>
                 {artifact.title}
               </Text>
             </View>
-            <View className="flex-row items-center gap-2">
-              <View className={`${typeColors[artifact.type]} px-3 py-1 rounded-full`}>
-                <Text className="text-white text-xs font-semibold uppercase">
-                  {artifact.type}
+            <View style={styles.headerActions}>
+              <View
+                style={[
+                  styles.badge,
+                  typeBadgeStyles[artifact.type],
+                ]}
+              >
+                <Text style={styles.badgeText}>
+                  {artifact.type.toUpperCase()}
                 </Text>
               </View>
-              <Pressable
-                onPress={onClose}
-                className="bg-zinc-800 w-10 h-10 rounded-full items-center justify-center"
-              >
-                <Text className="text-white text-xl font-bold">×</Text>
+              <Pressable onPress={onClose} style={styles.closeButton}>
+                <Text style={styles.closeButtonText}>×</Text>
               </Pressable>
             </View>
           </View>
         </View>
-
         {/* Content */}
-        <ScrollView className="flex-1" contentContainerClassName="p-4">
-          {artifact.type === 'image' ? (
-            <View className="items-center justify-center">
-              <Text className="text-zinc-400 text-sm">
+        <ScrollView
+          style={styles.contentScroll}
+          contentContainerStyle={styles.contentScrollContainer}
+        >
+          {artifact.type === "image" ? (
+            <View style={styles.imagePlaceholder}>
+              <Text style={styles.imagePlaceholderText}>
                 Image viewing not yet implemented
               </Text>
-              <Text className="text-zinc-600 text-xs mt-2">
+              <Text style={styles.imagePlaceholderSubtext}>
                 Base64 image data received
               </Text>
             </View>
           ) : (
-            <View className="bg-zinc-900 rounded-lg p-4 border border-zinc-800">
+            <View style={styles.codeContainer}>
               <ScrollView horizontal showsHorizontalScrollIndicator={true}>
-                <Text
-                  className="text-zinc-300 text-sm font-mono"
-                  style={{ fontFamily: 'monospace' }}
-                >
-                  {content}
-                </Text>
+                <Text style={styles.codeText}>{content}</Text>
               </ScrollView>
             </View>
           )}
+        </ScrollView>
 
-          {/* Metadata */}
-          <View className="mt-4 bg-zinc-900 rounded-lg p-3 border border-zinc-800">
-            <Text className="text-zinc-500 text-xs font-semibold mb-2">METADATA</Text>
-            <View className="space-y-1">
-              <View className="flex-row">
-                <Text className="text-zinc-500 text-xs w-20">ID:</Text>
-                <Text className="text-zinc-400 text-xs flex-1 font-mono">
-                  {artifact.id}
-                </Text>
-              </View>
-              <View className="flex-row">
-                <Text className="text-zinc-500 text-xs w-20">Type:</Text>
-                <Text className="text-zinc-400 text-xs">{artifact.type}</Text>
-              </View>
-              <View className="flex-row">
-                <Text className="text-zinc-500 text-xs w-20">Encoding:</Text>
-                <Text className="text-zinc-400 text-xs">
-                  {artifact.isBase64 ? 'Base64' : 'Plain text'}
-                </Text>
-              </View>
-              <View className="flex-row">
-                <Text className="text-zinc-500 text-xs w-20">Size:</Text>
-                <Text className="text-zinc-400 text-xs">
-                  {content.length.toLocaleString()} characters
-                </Text>
-              </View>
+        {/* Metadata - Fixed at bottom */}
+        <View style={styles.metadataContainer}>
+          <Text style={styles.metadataTitle}>METADATA</Text>
+          <View>
+            <View style={styles.metadataRow}>
+              <Text style={styles.metadataLabel}>ID:</Text>
+              <Text style={styles.metadataValue}>{artifact.id}</Text>
+            </View>
+            <View style={styles.metadataRow}>
+              <Text style={styles.metadataLabel}>Type:</Text>
+              <Text style={styles.metadataValue}>{artifact.type}</Text>
+            </View>
+            <View style={styles.metadataRow}>
+              <Text style={styles.metadataLabel}>Encoding:</Text>
+              <Text style={styles.metadataValue}>
+                {artifact.isBase64 ? "Base64" : "Plain text"}
+              </Text>
+            </View>
+            <View style={styles.metadataRow}>
+              <Text style={styles.metadataLabel}>Size:</Text>
+              <Text style={styles.metadataValue}>
+                {content.length.toLocaleString()} characters
+              </Text>
             </View>
           </View>
-        </ScrollView>
+        </View>
       </SafeAreaView>
     </Modal>
   );

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>

packages/app/components/conversation-selector.tsx

@@ -3,6 +3,7 @@ import { Modal, View, Text, Pressable, ScrollView, Alert, KeyboardAvoidingView,
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { MessageSquare, X, Plus, Trash2 } from 'lucide-react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { StyleSheet } from 'react-native-unistyles';
 import type { UseWebSocketReturn } from '../hooks/use-websocket';
 
 const STORAGE_KEY = '@voice-dev:conversation-id';
@@ -177,7 +178,7 @@ export function ConversationSelector({
     <View>
       <Pressable
         onPress={() => setIsOpen(true)}
-        className="bg-zinc-800 px-4 py-2 rounded-lg"
+        style={styles.triggerButton}
       >
         <MessageSquare size={20} color="white" />
       </Pressable>
@@ -188,99 +189,94 @@ export function ConversationSelector({
         transparent={true}
         onRequestClose={() => setIsOpen(false)}
       >
-        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}>
+        <View style={styles.modalOverlay}>
           <Pressable
-            style={{ flex: 1 }}
+            style={styles.modalBackdrop}
             onPress={() => setIsOpen(false)}
           />
-          <View style={{ backgroundColor: '#18181b', borderTopLeftRadius: 24, borderTopRightRadius: 24, height: '80%' }}>
-            <View style={{ flex: 1 }}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalInner}>
               {/* Header */}
-              <View className="flex-row items-center justify-between p-6 border-b border-zinc-800">
-              <Text className="text-white text-lg font-semibold">
-                Conversations {conversations.length > 0 && `(${conversations.length})`}
-              </Text>
-              <Pressable onPress={() => setIsOpen(false)}>
-                <X size={24} color="white" />
-              </Pressable>
-            </View>
+              <View style={styles.header}>
+                <Text style={styles.headerTitle}>
+                  Conversations {conversations.length > 0 && `(${conversations.length})`}
+                </Text>
+                <Pressable onPress={() => setIsOpen(false)}>
+                  <X size={24} color="white" />
+                </Pressable>
+              </View>
 
-            {/* New Conversation Button */}
-            <View className="p-4 border-b border-zinc-800">
-              <Pressable
-                onPress={handleNewConversation}
-                className="flex-row items-center justify-center gap-2 bg-zinc-800 py-3 rounded-lg"
-              >
-                <Plus size={20} color="white" />
-                <Text className="text-white font-semibold">New Conversation</Text>
-              </Pressable>
-            </View>
-
-            {/* Conversations List */}
-            <ScrollView
-              style={{ flex: 1 }}
-              contentContainerStyle={{ paddingBottom: 20 }}
-              keyboardShouldPersistTaps="handled"
-              keyboardDismissMode="on-drag"
-            >
-              {isLoading && (
-                <View className="p-8 items-center">
-                  <Text className="text-zinc-400">Loading...</Text>
-                </View>
-              )}
-
-              {!isLoading && conversations.length === 0 && (
-                <View className="p-8 items-center">
-                  <Text className="text-zinc-400">No saved conversations</Text>
-                </View>
-              )}
-
-              {!isLoading && conversations.map((conversation) => (
-                <View
-                  key={conversation.id}
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    padding: 16,
-                    borderBottomWidth: 1,
-                    borderBottomColor: '#27272a',
-                    backgroundColor: conversation.id === currentConversationId ? '#27272a' : 'transparent'
-                  }}
+              {/* New Conversation Button */}
+              <View style={styles.newButtonContainer}>
+                <Pressable
+                  onPress={handleNewConversation}
+                  style={styles.newButton}
                 >
-                  <Pressable
-                    style={{ flex: 1 }}
-                    onPress={() => handleSelectConversation(conversation.id)}
-                  >
-                    <Text style={{ color: 'white', fontWeight: '600', fontSize: 16 }}>
-                      {conversation.messageCount} messages
-                    </Text>
-                    <Text style={{ color: '#a1a1aa', fontSize: 14, marginTop: 4 }}>
-                      {formatDate(conversation.lastUpdated)}
-                    </Text>
-                  </Pressable>
-                  <Pressable
-                    onPress={() => handleDeleteConversation(conversation.id)}
-                    style={{ padding: 8 }}
-                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                  >
-                    <Trash2 size={20} color="#ef4444" />
-                  </Pressable>
-                </View>
-              ))}
+                  <Plus size={20} color="white" />
+                  <Text style={styles.newButtonText}>New Conversation</Text>
+                </Pressable>
+              </View>
 
-              {!isLoading && conversations.length > 0 && (
-                <View className="p-4">
-                  <Pressable
-                    onPress={handleClearAll}
-                    className="flex-row items-center justify-center gap-2 bg-red-900/20 py-3 rounded-lg border border-red-900"
+              {/* Conversations List */}
+              <ScrollView
+                style={styles.scrollView}
+                contentContainerStyle={styles.scrollContent}
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="on-drag"
+              >
+                {isLoading && (
+                  <View style={styles.loadingContainer}>
+                    <Text style={styles.loadingText}>Loading...</Text>
+                  </View>
+                )}
+
+                {!isLoading && conversations.length === 0 && (
+                  <View style={styles.emptyContainer}>
+                    <Text style={styles.emptyText}>No saved conversations</Text>
+                  </View>
+                )}
+
+                {!isLoading && conversations.map((conversation) => (
+                  <View
+                    key={conversation.id}
+                    style={[
+                      styles.conversationItem,
+                      conversation.id === currentConversationId && styles.conversationItemActive
+                    ]}
                   >
-                    <Trash2 size={18} color="#ef4444" />
-                    <Text className="text-red-500 font-semibold">Clear All</Text>
-                  </Pressable>
-                </View>
-              )}
-            </ScrollView>
+                    <Pressable
+                      style={styles.conversationContent}
+                      onPress={() => handleSelectConversation(conversation.id)}
+                    >
+                      <Text style={styles.conversationTitle}>
+                        {conversation.messageCount} messages
+                      </Text>
+                      <Text style={styles.conversationDate}>
+                        {formatDate(conversation.lastUpdated)}
+                      </Text>
+                    </Pressable>
+                    <Pressable
+                      onPress={() => handleDeleteConversation(conversation.id)}
+                      style={styles.deleteButton}
+                      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                    >
+                      <Trash2 size={20} color="#ef4444" />
+                    </Pressable>
+                  </View>
+                ))}
+
+                {!isLoading && conversations.length > 0 && (
+                  <View style={styles.clearAllContainer}>
+                    <Pressable
+                      onPress={handleClearAll}
+                      style={styles.clearAllButton}
+                    >
+                      <Trash2 size={18} color="#ef4444" />
+                      <Text style={styles.clearAllText}>Clear All</Text>
+                    </Pressable>
+                  </View>
+                )}
+              </ScrollView>
             </View>
           </View>
         </View>
@@ -288,3 +284,125 @@ export function ConversationSelector({
     </View>
   );
 }
+
+const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  triggerButton: {
+    backgroundColor: theme.colors.zinc[800],
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  modalBackdrop: {
+    flex: 1,
+  },
+  modalContent: {
+    backgroundColor: theme.colors.zinc[900],
+    borderTopLeftRadius: theme.spacing[6],
+    borderTopRightRadius: theme.spacing[6],
+    height: '80%',
+  },
+  modalInner: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing[6],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.zinc[800],
+  },
+  headerTitle: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.lg,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  newButtonContainer: {
+    padding: theme.spacing[4],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.zinc[800],
+  },
+  newButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing[2],
+    backgroundColor: theme.colors.zinc[800],
+    paddingVertical: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+  },
+  newButtonText: {
+    color: theme.colors.white,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: theme.spacing[4] * 5,
+  },
+  loadingContainer: {
+    padding: theme.spacing[8],
+    alignItems: 'center',
+  },
+  loadingText: {
+    color: theme.colors.zinc[400],
+  },
+  emptyContainer: {
+    padding: theme.spacing[8],
+    alignItems: 'center',
+  },
+  emptyText: {
+    color: theme.colors.zinc[400],
+  },
+  conversationItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing[4],
+    borderBottomWidth: theme.borderWidth[1],
+    borderBottomColor: theme.colors.zinc[800],
+    backgroundColor: 'transparent',
+  },
+  conversationItemActive: {
+    backgroundColor: theme.colors.zinc[800],
+  },
+  conversationContent: {
+    flex: 1,
+  },
+  conversationTitle: {
+    color: theme.colors.white,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize.base,
+  },
+  conversationDate: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.sm,
+    marginTop: theme.spacing[1],
+  },
+  deleteButton: {
+    padding: theme.spacing[2],
+  },
+  clearAllContainer: {
+    padding: theme.spacing[4],
+  },
+  clearAllButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing[2],
+    backgroundColor: 'rgba(127, 29, 29, 0.2)',
+    paddingVertical: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.red[900],
+  },
+  clearAllText: {
+    color: theme.colors.red[500],
+    fontWeight: theme.fontWeight.semibold,
+  },
+}));

packages/app/components/message.tsx

@@ -2,17 +2,40 @@ import { View, Text, Pressable, Animated } from 'react-native';
 import { useState, useEffect, useRef } from 'react';
 import Markdown from 'react-native-markdown-display';
 import { Circle, Info, CheckCircle, XCircle, FileText, ChevronRight, ChevronDown, RefreshCw } from 'lucide-react-native';
+import { StyleSheet } from 'react-native-unistyles';
 
 interface UserMessageProps {
   message: string;
   timestamp: number;
 }
 
+const userMessageStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginBottom: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+  },
+  bubble: {
+    backgroundColor: theme.colors.blue[600],
+    borderRadius: theme.borderRadius['2xl'],
+    borderTopRightRadius: theme.borderRadius.sm,
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    maxWidth: '80%',
+  },
+  text: {
+    color: theme.colors.white,
+    fontSize: theme.fontSize.lg,
+    lineHeight: 24,
+  },
+}));
+
 export function UserMessage({ message, timestamp }: UserMessageProps) {
   return (
-    <View className="flex-row justify-end mb-3 px-4">
-      <View className="bg-blue-600 rounded-2xl rounded-tr-sm px-4 py-3 max-w-[80%]">
-        <Text className="text-white text-base leading-6">{message}</Text>
+    <View style={userMessageStylesheet.container}>
+      <View style={userMessageStylesheet.bubble}>
+        <Text style={userMessageStylesheet.text}>{message}</Text>
       </View>
     </View>
   );
@@ -24,6 +47,22 @@ interface AssistantMessageProps {
   isStreaming?: boolean;
 }
 
+const assistantMessageStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  container: {
+    marginBottom: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+  },
+  streamingIndicator: {
+    marginTop: theme.spacing[1],
+  },
+  streamingText: {
+    color: theme.colors.teal[200],
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.bold,
+  },
+}));
+
 export function AssistantMessage({ message, timestamp, isStreaming = false }: AssistantMessageProps) {
   const fadeAnim = useRef(new Animated.Value(0.3)).current;
 
@@ -60,10 +99,10 @@ export function AssistantMessage({ message, timestamp, isStreaming = false }: As
       marginBottom: 8,
     },
     strong: {
-      fontWeight: '700',
+      fontWeight: '700' as const,
     },
     em: {
-      fontStyle: 'italic',
+      fontStyle: 'italic' as const,
     },
     code_inline: {
       backgroundColor: '#134e4a',
@@ -91,7 +130,7 @@ export function AssistantMessage({ message, timestamp, isStreaming = false }: As
     },
     link: {
       color: '#5eead4',
-      textDecorationLine: 'underline',
+      textDecorationLine: 'underline' as const,
     },
     bullet_list: {
       marginBottom: 8,
@@ -105,11 +144,11 @@ export function AssistantMessage({ message, timestamp, isStreaming = false }: As
   };
 
   return (
-    <View className="mb-3 px-4 py-3">
+    <View style={assistantMessageStylesheet.container}>
       <Markdown style={markdownStyles}>{message}</Markdown>
       {isStreaming && (
-        <Animated.View style={{ opacity: fadeAnim }} className="mt-1">
-          <Text className="text-teal-200 text-xs font-bold">...</Text>
+        <Animated.View style={[assistantMessageStylesheet.streamingIndicator, { opacity: fadeAnim }]}>
+          <Text style={assistantMessageStylesheet.streamingText}>...</Text>
         </Animated.View>
       )}
     </View>
@@ -127,6 +166,76 @@ interface ActivityLogProps {
   onArtifactClick?: (artifactId: string) => void;
 }
 
+const activityLogStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  pressable: {
+    marginHorizontal: theme.spacing[2],
+    marginBottom: theme.spacing[1],
+    borderRadius: theme.borderRadius.md,
+    overflow: 'hidden',
+  },
+  pressableActive: {
+    opacity: 0.7,
+  },
+  systemBg: {
+    backgroundColor: 'rgba(39, 39, 42, 0.5)', // zinc-800/50
+  },
+  infoBg: {
+    backgroundColor: 'rgba(30, 58, 138, 0.3)', // blue-900/30
+  },
+  successBg: {
+    backgroundColor: 'rgba(20, 83, 45, 0.3)', // green-900/30
+  },
+  errorBg: {
+    backgroundColor: 'rgba(127, 29, 29, 0.3)', // red-900/30
+  },
+  artifactBg: {
+    backgroundColor: 'rgba(30, 58, 138, 0.4)', // blue-900/40
+  },
+  content: {
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.spacing[2],
+  },
+  iconContainer: {
+    flexShrink: 0,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  messageText: {
+    fontSize: theme.fontSize.sm,
+    lineHeight: 20,
+  },
+  detailsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: theme.spacing[1],
+  },
+  detailsText: {
+    color: theme.colors.zinc[500],
+    fontSize: theme.fontSize.xs,
+    marginRight: theme.spacing[1],
+  },
+  metadataContainer: {
+    marginTop: theme.spacing[2],
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    borderRadius: theme.borderRadius.base,
+    padding: theme.spacing[2],
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.zinc[700],
+  },
+  metadataText: {
+    color: theme.colors.zinc[300],
+    fontSize: theme.fontSize.xs,
+    fontFamily: 'monospace',
+    lineHeight: 16,
+  },
+}));
+
 export function ActivityLog({
   type,
   message,
@@ -140,11 +249,11 @@ export function ActivityLog({
   const [isExpanded, setIsExpanded] = useState(false);
 
   const typeConfig = {
-    system: { bg: 'bg-zinc-800/50', color: '#a1a1aa', Icon: Circle },
-    info: { bg: 'bg-blue-900/30', color: '#60a5fa', Icon: Info },
-    success: { bg: 'bg-green-900/30', color: '#4ade80', Icon: CheckCircle },
-    error: { bg: 'bg-red-900/30', color: '#f87171', Icon: XCircle },
-    artifact: { bg: 'bg-blue-900/40', color: '#93c5fd', Icon: FileText },
+    system: { bg: activityLogStylesheet.systemBg, color: '#a1a1aa', Icon: Circle },
+    info: { bg: activityLogStylesheet.infoBg, color: '#60a5fa', Icon: Info },
+    success: { bg: activityLogStylesheet.successBg, color: '#4ade80', Icon: CheckCircle },
+    error: { bg: activityLogStylesheet.errorBg, color: '#f87171', Icon: XCircle },
+    artifact: { bg: activityLogStylesheet.artifactBg, color: '#93c5fd', Icon: FileText },
   };
 
   const config = typeConfig[type];
@@ -162,24 +271,30 @@ export function ActivityLog({
     ? `${artifactType}: ${title}`
     : message;
 
+  const isInteractive = type === 'artifact' || metadata;
+
   return (
     <Pressable
       onPress={handlePress}
-      disabled={type !== 'artifact' && !metadata}
-      className={`mx-2 mb-1 rounded-md overflow-hidden ${config.bg} ${
-        (type === 'artifact' || metadata) ? 'active:opacity-70' : ''
-      }`}
+      disabled={!isInteractive}
+      style={[
+        activityLogStylesheet.pressable,
+        config.bg,
+        isInteractive && activityLogStylesheet.pressableActive,
+      ]}
     >
-      <View className="px-3 py-2.5">
-        <View className="flex-row items-start gap-2">
-          <IconComponent size={16} color={config.color} />
-          <View className="flex-1">
-            <Text style={{ color: config.color }} className="text-sm leading-5">
+      <View style={activityLogStylesheet.content}>
+        <View style={activityLogStylesheet.row}>
+          <View style={activityLogStylesheet.iconContainer}>
+            <IconComponent size={16} color={config.color} />
+          </View>
+          <View style={activityLogStylesheet.textContainer}>
+            <Text style={[activityLogStylesheet.messageText, { color: config.color }]}>
               {displayMessage}
             </Text>
             {metadata && (
-              <View className="flex-row items-center mt-1">
-                <Text className="text-zinc-500 text-xs mr-1">Details</Text>
+              <View style={activityLogStylesheet.detailsRow}>
+                <Text style={activityLogStylesheet.detailsText}>Details</Text>
                 {isExpanded ? (
                   <ChevronDown size={12} color="#71717a" />
                 ) : (
@@ -190,8 +305,8 @@ export function ActivityLog({
           </View>
         </View>
         {isExpanded && metadata && (
-          <View className="mt-2 bg-black/50 rounded p-2 border border-zinc-700">
-            <Text className="text-zinc-300 text-xs font-mono leading-4">
+          <View style={activityLogStylesheet.metadataContainer}>
+            <Text style={activityLogStylesheet.metadataText}>
               {JSON.stringify(metadata, null, 2)}
             </Text>
           </View>
@@ -209,6 +324,102 @@ interface ToolCallProps {
   status: 'executing' | 'completed' | 'failed';
 }
 
+const toolCallStylesheet = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  pressable: {
+    marginHorizontal: theme.spacing[2],
+    marginBottom: theme.spacing[2],
+    backgroundColor: theme.colors.zinc[900],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: theme.borderWidth[1],
+    overflow: 'hidden',
+  },
+  pressableActive: {
+    opacity: 0.8,
+  },
+  executingBorder: {
+    borderColor: theme.colors.amber[500],
+  },
+  completedBorder: {
+    borderColor: theme.colors.green[500],
+  },
+  failedBorder: {
+    borderColor: theme.colors.red[500],
+  },
+  content: {
+    padding: theme.spacing[3],
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  chevronContainer: {
+    marginRight: theme.spacing[2],
+  },
+  toolName: {
+    color: theme.colors.slate[200],
+    fontFamily: 'monospace',
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize.sm,
+    flex: 1,
+  },
+  statusBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: theme.spacing[1],
+    borderRadius: theme.borderRadius.base,
+  },
+  executingBadgeBg: {
+    backgroundColor: 'rgba(245, 158, 11, 0.2)', // amber-500/20
+  },
+  completedBadgeBg: {
+    backgroundColor: 'rgba(34, 197, 94, 0.2)', // green-500/20
+  },
+  failedBadgeBg: {
+    backgroundColor: 'rgba(239, 68, 68, 0.2)', // red-500/20
+  },
+  statusText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+    textTransform: 'uppercase',
+  },
+  expandedContent: {
+    marginTop: theme.spacing[3],
+    gap: theme.spacing[2],
+  },
+  section: {
+    // empty - just for grouping
+  },
+  sectionTitle: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.semibold,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 6,
+  },
+  errorSectionTitle: {
+    color: '#fca5a5', // red-300
+  },
+  sectionContent: {
+    backgroundColor: theme.colors.black,
+    borderRadius: theme.borderRadius.base,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.zinc[700],
+    padding: theme.spacing[2],
+  },
+  errorSectionContent: {
+    borderColor: '#991b1b', // red-800
+  },
+  sectionText: {
+    color: theme.colors.slate[200],
+    fontSize: theme.fontSize.xs,
+    fontFamily: 'monospace',
+    lineHeight: 16,
+  },
+}));
+
 export function ToolCall({ toolName, args, result, error, status }: ToolCallProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const spinAnim = useRef(new Animated.Value(0)).current;
@@ -235,20 +446,20 @@ export function ToolCall({ toolName, args, result, error, status }: ToolCallProp
 
   const statusConfig = {
     executing: {
-      border: 'border-amber-500',
-      bg: 'bg-amber-500/20',
+      border: toolCallStylesheet.executingBorder,
+      badgeBg: toolCallStylesheet.executingBadgeBg,
       color: '#fcd34d',
       label: 'executing',
     },
     completed: {
-      border: 'border-green-500',
-      bg: 'bg-green-500/20',
+      border: toolCallStylesheet.completedBorder,
+      badgeBg: toolCallStylesheet.completedBadgeBg,
       color: '#86efac',
       label: 'completed',
     },
     failed: {
-      border: 'border-red-500',
-      bg: 'bg-red-500/20',
+      border: toolCallStylesheet.failedBorder,
+      badgeBg: toolCallStylesheet.failedBadgeBg,
       color: '#fca5a5',
       label: 'failed',
     },
@@ -259,19 +470,21 @@ export function ToolCall({ toolName, args, result, error, status }: ToolCallProp
   return (
     <Pressable
       onPress={() => setIsExpanded(!isExpanded)}
-      className={`mx-2 mb-2 bg-zinc-900 rounded-lg border ${config.border} overflow-hidden active:opacity-80`}
+      style={[toolCallStylesheet.pressable, toolCallStylesheet.pressableActive, config.border]}
     >
-      <View className="p-3">
-        <View className="flex-row items-center">
-          {isExpanded ? (
-            <ChevronDown size={16} color="#9ca3af" className="mr-2" />
-          ) : (
-            <ChevronRight size={16} color="#9ca3af" className="mr-2" />
-          )}
-          <Text className="text-slate-200 font-mono font-medium text-sm flex-1">
+      <View style={toolCallStylesheet.content}>
+        <View style={toolCallStylesheet.headerRow}>
+          <View style={toolCallStylesheet.chevronContainer}>
+            {isExpanded ? (
+              <ChevronDown size={16} color="#9ca3af" />
+            ) : (
+              <ChevronRight size={16} color="#9ca3af" />
+            )}
+          </View>
+          <Text style={toolCallStylesheet.toolName}>
             {toolName}
           </Text>
-          <View className={`flex-row items-center gap-1.5 px-2 py-1 rounded ${config.bg}`}>
+          <View style={[toolCallStylesheet.statusBadge, config.badgeBg]}>
             {status === 'executing' ? (
               <Animated.View style={{ transform: [{ rotate: spin }] }}>
                 <RefreshCw size={14} color={config.color} />
@@ -281,32 +494,32 @@ export function ToolCall({ toolName, args, result, error, status }: ToolCallProp
             ) : (
               <XCircle size={14} color={config.color} />
             )}
-            <Text style={{ color: config.color }} className="text-xs font-medium uppercase">
+            <Text style={[toolCallStylesheet.statusText, { color: config.color }]}>
               {config.label}
             </Text>
           </View>
         </View>
 
         {isExpanded && (
-          <View className="mt-3 gap-2">
-            <View>
-              <Text className="text-zinc-400 text-xs font-semibold uppercase tracking-wide mb-1.5">
+          <View style={toolCallStylesheet.expandedContent}>
+            <View style={toolCallStylesheet.section}>
+              <Text style={toolCallStylesheet.sectionTitle}>
                 Arguments
               </Text>
-              <View className="bg-black rounded border border-zinc-700 p-2">
-                <Text className="text-slate-200 text-xs font-mono leading-4">
+              <View style={toolCallStylesheet.sectionContent}>
+                <Text style={toolCallStylesheet.sectionText}>
                   {JSON.stringify(args, null, 2)}
                 </Text>
               </View>
             </View>
 
             {result !== undefined && (
-              <View>
-                <Text className="text-zinc-400 text-xs font-semibold uppercase tracking-wide mb-1.5">
+              <View style={toolCallStylesheet.section}>
+                <Text style={toolCallStylesheet.sectionTitle}>
                   Result
                 </Text>
-                <View className="bg-black rounded border border-zinc-700 p-2">
-                  <Text className="text-slate-200 text-xs font-mono leading-4">
+                <View style={toolCallStylesheet.sectionContent}>
+                  <Text style={toolCallStylesheet.sectionText}>
                     {JSON.stringify(result, null, 2)}
                   </Text>
                 </View>
@@ -314,12 +527,12 @@ export function ToolCall({ toolName, args, result, error, status }: ToolCallProp
             )}
 
             {error !== undefined && (
-              <View>
-                <Text className="text-red-400 text-xs font-semibold uppercase tracking-wide mb-1.5">
+              <View style={toolCallStylesheet.section}>
+                <Text style={[toolCallStylesheet.sectionTitle, toolCallStylesheet.errorSectionTitle]}>
                   Error
                 </Text>
-                <View className="bg-black rounded border border-red-800 p-2">
-                  <Text className="text-slate-200 text-xs font-mono leading-4">
+                <View style={[toolCallStylesheet.sectionContent, toolCallStylesheet.errorSectionContent]}>
+                  <Text style={toolCallStylesheet.sectionText}>
                     {JSON.stringify(error, null, 2)}
                   </Text>
                 </View>

packages/app/components/voice-button.tsx

@@ -1,5 +1,6 @@
 import { Pressable, View, Text, Animated } from 'react-native';
 import { useEffect, useRef } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
 
 interface VoiceButtonProps {
   state: 'idle' | 'recording' | 'processing' | 'playing';
@@ -7,6 +8,125 @@ interface VoiceButtonProps {
   disabled?: boolean;
 }
 
+const styles = StyleSheet.create((theme: import('../styles/theme').Theme) => ({
+  container: {
+    alignItems: 'center',
+    gap: theme.spacing[4],
+  },
+  pressable: {
+    opacity: 1,
+  },
+  pressableDisabled: {
+    opacity: 0.5,
+  },
+  button: {
+    width: 80,
+    height: 80,
+    borderRadius: theme.borderRadius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  buttonIdle: {
+    backgroundColor: theme.colors.zinc[700],
+  },
+  buttonRecording: {
+    backgroundColor: theme.colors.red[500],
+  },
+  buttonProcessing: {
+    backgroundColor: theme.colors.blue[500],
+  },
+  buttonPlaying: {
+    backgroundColor: theme.colors.green[500],
+  },
+  label: {
+    color: theme.colors.zinc[400],
+    fontSize: theme.fontSize.sm,
+  },
+  // Recording icon
+  recordingIcon: {
+    width: 24,
+    height: 24,
+    backgroundColor: '#fff',
+    borderRadius: theme.borderRadius.md,
+  },
+  // Processing icon
+  processingIconContainer: {
+    width: 24,
+    height: 24,
+  },
+  processingDot: {
+    width: 6,
+    height: 6,
+    backgroundColor: '#fff',
+    borderRadius: theme.borderRadius.full,
+    position: 'absolute',
+  },
+  processingDotTop: {
+    top: 0,
+    left: 12,
+  },
+  processingDotRight: {
+    top: 12,
+    right: 0,
+  },
+  processingDotBottom: {
+    bottom: 0,
+    left: 12,
+  },
+  // Playing icon
+  playingIconContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing[1],
+  },
+  playingBar: {
+    backgroundColor: '#fff',
+    borderRadius: theme.borderRadius.sm,
+  },
+  playingBar1: {
+    width: 4,
+    height: 16,
+  },
+  playingBar2: {
+    width: 4,
+    height: 24,
+  },
+  playingBar3: {
+    width: 4,
+    height: 12,
+  },
+  // Idle icon (microphone)
+  micContainer: {
+    width: 24,
+    height: 32,
+    position: 'relative',
+  },
+  micCapsule: {
+    position: 'absolute',
+    bottom: 0,
+    left: 4,
+    width: 16,
+    height: 24,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 999,
+    borderTopRightRadius: 999,
+  },
+  micBase: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: 24,
+    height: 6,
+    backgroundColor: '#fff',
+    borderRadius: theme.borderRadius.full,
+  },
+}));
+
 export function VoiceButton({ state, onPress, disabled = false }: VoiceButtonProps) {
   const pulseAnim = useRef(new Animated.Value(1)).current;
 
@@ -34,43 +154,41 @@ export function VoiceButton({ state, onPress, disabled = false }: VoiceButtonPro
   const getButtonStyle = () => {
     switch (state) {
       case 'recording':
-        return 'bg-red-500';
+        return styles.buttonRecording;
       case 'processing':
-        return 'bg-blue-500';
+        return styles.buttonProcessing;
       case 'playing':
-        return 'bg-green-500';
+        return styles.buttonPlaying;
       default:
-        return 'bg-zinc-700';
+        return styles.buttonIdle;
     }
   };
 
   const getIcon = () => {
     switch (state) {
       case 'recording':
-        return (
-          <View className="w-6 h-6 bg-white rounded" />
-        );
+        return <View style={styles.recordingIcon} />;
       case 'processing':
         return (
-          <View className="w-6 h-6">
-            <View className="w-1.5 h-1.5 bg-white rounded-full absolute top-0 left-3" />
-            <View className="w-1.5 h-1.5 bg-white rounded-full absolute top-3 right-0" />
-            <View className="w-1.5 h-1.5 bg-white rounded-full absolute bottom-0 left-3" />
+          <View style={styles.processingIconContainer}>
+            <View style={[styles.processingDot, styles.processingDotTop]} />
+            <View style={[styles.processingDot, styles.processingDotRight]} />
+            <View style={[styles.processingDot, styles.processingDotBottom]} />
           </View>
         );
       case 'playing':
         return (
-          <View className="flex-row items-center gap-1">
-            <View className="w-1 h-4 bg-white rounded" />
-            <View className="w-1 h-6 bg-white rounded" />
-            <View className="w-1 h-3 bg-white rounded" />
+          <View style={styles.playingIconContainer}>
+            <View style={[styles.playingBar, styles.playingBar1]} />
+            <View style={[styles.playingBar, styles.playingBar2]} />
+            <View style={[styles.playingBar, styles.playingBar3]} />
           </View>
         );
       default:
         return (
-          <View className="w-6 h-8 relative">
-            <View className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-6 bg-white rounded-t-full" />
-            <View className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-1.5 bg-white rounded-full" />
+          <View style={styles.micContainer}>
+            <View style={styles.micCapsule} />
+            <View style={styles.micBase} />
           </View>
         );
     }
@@ -90,20 +208,17 @@ export function VoiceButton({ state, onPress, disabled = false }: VoiceButtonPro
   };
 
   return (
-    <View className="items-center gap-4">
+    <View style={styles.container}>
       <Pressable
         onPress={onPress}
         disabled={disabled}
-        className={`${disabled ? 'opacity-50' : 'opacity-100'}`}
+        style={disabled ? styles.pressableDisabled : styles.pressable}
       >
-        <Animated.View
-          style={{ transform: [{ scale: pulseAnim }] }}
-          className={`w-20 h-20 rounded-full ${getButtonStyle()} items-center justify-center shadow-lg`}
-        >
+        <Animated.View style={[styles.button, getButtonStyle(), { transform: [{ scale: pulseAnim }] }]}>
           {getIcon()}
         </Animated.View>
       </Pressable>
-      <Text className="text-zinc-400 text-sm">{getLabel()}</Text>
+      <Text style={styles.label}>{getLabel()}</Text>
     </View>
   );
 }