@alia.onl/sdk 3.0.0 → 3.1.1

package/src/components/Markdown.tsx

@@ -1,9 +1,33 @@
-import React from 'react';
-import { View, Text, Platform, Linking } from 'react-native';
+import React, { useMemo } from 'react';
+import { View, Text, Platform, Linking, useColorScheme } from 'react-native';
 import Markdown from 'react-native-markdown-display';
-import { useAliaColors } from '../theme';
+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'> = {
+  text: '#11181C',
+  muted: '#F4F4F5',
+  border: '#E5E5EA',
+  primary: '#7C3AED',
+  mutedForeground: '#71717A',
+};
+const FALLBACK_DARK: typeof FALLBACK_LIGHT = {
+  text: '#ECEDEE',
+  muted: '#27272A',
+  border: '#2C2C2E',
+  primary: '#A78BFA',
+  mutedForeground: '#A1A1AA',
+};
+
+const BODY_TEXT = { fontSize: 16, lineHeight: 28 } as const;
+const HEADING_TEXT = { fontSize: 16, lineHeight: 22 } as const;
+const SANS_FONT = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' })!;
+const MONO_FONT = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' })!;
+
+function createRules(colors: AliaColors) {
+  const { text: textColor, muted, border, primary, mutedForeground } = colors;
 
-function createRules(isDark: boolean, textColor: string, monoFont: string) {
   return {
     heading1: (node: any, children: any) => (
       <Text
@@ -16,7 +40,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading2: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 8, marginTop: 12, fontWeight: '600', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 8, marginTop: 12, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
       >
         {children}
       </Text>
@@ -24,7 +48,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading3: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, fontWeight: '600', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
       >
         {children}
       </Text>
@@ -32,7 +56,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading4: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -40,7 +64,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading5: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -48,7 +72,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading6: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -61,23 +85,23 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
             marginVertical: 8,
             overflow: 'hidden',
             borderRadius: 6,
-            backgroundColor: isDark ? '#18181b' : '#f4f4f5',
+            backgroundColor: muted,
             borderWidth: 1,
-            borderColor: isDark ? '#3f3f46' : '#e4e4e7',
+            borderColor: border,
             padding: 12,
           }}
         >
-          <Text style={{ fontSize: 13, fontFamily: monoFont }}>{children}</Text>
+          <Text style={{ fontSize: 13, fontFamily: MONO_FONT }}>{children}</Text>
         </View>
       ) : (
         <Text
           key={node.key}
           style={{
-            backgroundColor: isDark ? '#27272a' : '#f4f4f5',
+            backgroundColor: muted,
             paddingHorizontal: 4,
             paddingVertical: 1,
             fontSize: 13,
-            fontFamily: monoFont,
+            fontFamily: MONO_FONT,
             borderRadius: 3,
           }}
         >
@@ -93,8 +117,8 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
 
       return (
         <View key={node.key} style={{ flexDirection: 'row', paddingVertical: 2, paddingLeft: 16 }}>
-          <Text style={{ marginRight: 8, minWidth: 14, color: '#71717A' }}>{bullet}</Text>
-          <Text style={{ flex: 1, color: textColor }}>{children}</Text>
+          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: mutedForeground }}>{bullet}</Text>
+          <Text style={{ flex: 1, ...BODY_TEXT, color: textColor }}>{children}</Text>
         </View>
       );
     },
@@ -105,12 +129,12 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
       <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
     ),
     strong: (node: any, children: any) => (
-      <Text key={node.key} style={{ fontWeight: '600', color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
     link: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ color: isDark ? '#60a5fa' : '#2563eb', textDecorationLine: 'underline' }}
+        style={{ color: primary, textDecorationLine: 'underline', ...BODY_TEXT }}
         onPress={() => {
           if (node.attributes?.href) Linking.openURL(node.attributes.href);
         }}
@@ -119,7 +143,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
       </Text>
     ),
     paragraph: (node: any, children: any) => (
-      <Text key={node.key} style={{ marginBottom: 8, color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
     blockquote: (node: any, children: any) => (
       <View
@@ -127,8 +151,8 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
         style={{
           marginVertical: 8,
           borderLeftWidth: 4,
-          borderLeftColor: isDark ? '#52525b' : '#d4d4d8',
-          backgroundColor: isDark ? 'rgba(39,39,42,0.5)' : 'rgba(244,244,245,0.5)',
+          borderLeftColor: border,
+          backgroundColor: muted,
           paddingHorizontal: 12,
           paddingVertical: 4,
           borderTopRightRadius: 6,
@@ -144,77 +168,34 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
         style={{
           marginVertical: 16,
           height: 1,
-          backgroundColor: isDark ? '#3f3f46' : '#d4d4d8',
+          backgroundColor: border,
         }}
       />
     ),
-    text: (node: any) => {
-      return node.content;
-    },
     body: (node: any, children: any) => {
-      return <View key={node.key}>{children}</View>;
+      return <View key={node.key} style={{ marginBottom: -8 }}>{children}</View>;
     },
   };
 }
 
-export function AliaMarkdown({ content }: { content: string }) {
-  const colors = useAliaColors();
-  const isDark = colors.isDark;
+function createStyles(colors: AliaColors) {
+  const { text: textColor, muted, border, primary, mutedForeground } = colors;
 
-  const textColor = isDark ? '#ffffff' : '#0a0a0a';
-  const sansFont = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' });
-  const monoFont = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' });
-
-  const customRules = createRules(isDark, textColor, monoFont);
-
-  const markdownStyles = {
-    body: {
-      color: textColor,
-      fontSize: 16,
-      lineHeight: 28,
-      fontFamily: sansFont,
-    },
-    text: {
-      color: textColor,
-      fontSize: 16,
-      lineHeight: 28,
-      fontFamily: sansFont,
-    },
-    paragraph: {
-      marginTop: 0,
-      marginBottom: 8,
-    },
-    strong: {
-      fontWeight: '600' as const,
-    },
-    em: {
-      fontStyle: 'italic' as const,
-    },
-    s: {
-      textDecorationLine: 'line-through' as const,
-    },
-    bullet_list_icon: {
-      marginLeft: 0,
-      marginRight: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    ordered_list_icon: {
-      marginLeft: 0,
-      marginRight: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    bullet_list_content: {
-      flex: 1,
-    },
-    ordered_list_content: {
-      flex: 1,
-    },
+  return {
+    body: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
+    text: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
+    paragraph: { marginTop: 0, marginBottom: 8 },
+    strong: { fontWeight: '600' as const },
+    em: { fontStyle: 'italic' as const },
+    s: { textDecorationLine: 'line-through' as const },
+    bullet_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT, color: mutedForeground },
+    ordered_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT, color: mutedForeground },
+    bullet_list_content: { flex: 1 },
+    ordered_list_content: { flex: 1 },
     code_inline: {
       fontSize: 13,
-      fontFamily: monoFont,
-      backgroundColor: isDark ? '#27272a' : '#f4f4f5',
+      fontFamily: MONO_FONT,
+      backgroundColor: muted,
       borderWidth: 0,
       borderRadius: 3,
       paddingHorizontal: 4,
@@ -222,67 +203,50 @@ export function AliaMarkdown({ content }: { content: string }) {
     },
     code_block: {
       fontSize: 13,
-      fontFamily: monoFont,
-      backgroundColor: isDark ? '#18181b' : '#f4f4f5',
+      fontFamily: MONO_FONT,
+      backgroundColor: muted,
       borderWidth: 1,
-      borderColor: isDark ? '#3f3f46' : '#e4e4e7',
+      borderColor: border,
       borderRadius: 6,
       padding: 12,
     },
     fence: {
       fontSize: 13,
-      fontFamily: monoFont,
-      backgroundColor: isDark ? '#18181b' : '#f4f4f5',
+      fontFamily: MONO_FONT,
+      backgroundColor: muted,
       borderWidth: 1,
-      borderColor: isDark ? '#3f3f46' : '#e4e4e7',
+      borderColor: border,
       borderRadius: 6,
       padding: 12,
     },
-    table: {
-      borderWidth: 1,
-      borderColor: colors.border,
-      borderRadius: 6,
-      marginVertical: 8,
-    },
-    thead: {
-      backgroundColor: colors.muted,
-    },
-    th: {
-      flex: 1,
-      padding: 8,
-      fontWeight: '600' as const,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    td: {
-      flex: 1,
-      padding: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    tr: {
-      borderBottomWidth: 1,
-      borderColor: colors.border,
-      flexDirection: 'row' as const,
-    },
-    link: {
-      textDecorationLine: 'underline' as const,
-      color: isDark ? '#60a5fa' : '#2563eb',
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    hr: {
-      backgroundColor: isDark ? '#3f3f46' : '#d4d4d8',
-      height: 1,
-      marginVertical: 16,
-    },
+    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 },
+    tr: { borderBottomWidth: 1, borderColor: border, flexDirection: 'row' as const },
+    link: { textDecorationLine: 'underline' as const, color: primary, ...BODY_TEXT },
+    hr: { backgroundColor: border, height: 1, marginVertical: 16 },
     heading1: { fontSize: 18, fontWeight: '600' as const },
-    heading2: { fontSize: 16, fontWeight: '600' as const },
-    heading3: { fontSize: 16, fontWeight: '600' as const },
-    heading4: { fontSize: 16, fontWeight: '500' as const },
-    heading5: { fontSize: 16, fontWeight: '500' as const },
-    heading6: { fontSize: 16, fontWeight: '500' as const },
+    heading2: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading3: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading4: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading5: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading6: { ...HEADING_TEXT, fontWeight: '500' as const },
   };
+}
+
+export interface AliaMarkdownProps {
+  content: string;
+  colors?: Partial<AliaColors>;
+}
+
+export function AliaMarkdown({ content, colors: colorOverrides }: AliaMarkdownProps) {
+  const scheme = useColorScheme();
+  const fallback = scheme === 'dark' ? FALLBACK_DARK : FALLBACK_LIGHT;
+  const colors = { ...fallback, ...colorOverrides } as AliaColors;
+
+  const customRules = useMemo(() => createRules(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
+  const markdownStyles = useMemo(() => createStyles(colors), [colors.text, colors.muted, colors.border, colors.primary, colors.mutedForeground]);
 
   return <Markdown rules={customRules} style={markdownStyles}>{content}</Markdown>;
 }

package/src/components/PlanPreviewCard.tsx

@@ -0,0 +1,76 @@
+import { View, Pressable } from 'react-native';
+import { Text } from './ui/text';
+import { Button } from './ui/button';
+import { Check, X, ListChecks } from 'lucide-react-native';
+import Animated, { FadeInUp } from 'react-native-reanimated';
+import type { PlanStep } from '../types';
+
+interface PlanPreviewCardProps {
+  steps: PlanStep[];
+  onApprove: () => void;
+  onReject: () => void;
+  approved?: boolean;
+  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>
+    );
+  }
+
+  if (rejected) {
+    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>
+      </View>
+    );
+  }
+
+  return (
+    <Animated.View entering={FadeInUp.springify()}>
+      <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>
+          ))}
+        </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>
+    </Animated.View>
+  );
+}

package/src/components/Reasoning.tsx

@@ -8,7 +8,7 @@ import Animated, {
   withSequence,
   cancelAnimation,
 } from 'react-native-reanimated';
-import { useAliaColors } from '../theme';
+
 
 // Context
 type ReasoningContextType = {
@@ -80,7 +80,6 @@ export function Reasoning({ isStreaming = false, defaultOpen = true, duration: e
 // Trigger — shows "Thinking for Xs..." label with pulsing icon
 export function ReasoningTrigger({ onPress }: ReasoningTriggerProps) {
   const { isStreaming, isOpen, setIsOpen, duration } = useReasoning();
-  const colors = useAliaColors();
   const pulseOpacity = useSharedValue(1);
 
   useEffect(() => {
@@ -114,7 +113,6 @@ export function ReasoningTrigger({ onPress }: ReasoningTriggerProps) {
 // Content — renders thinking text (collapsible)
 export function ReasoningContent({ children }: ReasoningContentProps) {
   const { isOpen, isStreaming } = useReasoning();
-  const colors = useAliaColors();
 
   if (!isOpen) return null;
 

package/src/components/ResearchProgressCard.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import { View, Pressable } from 'react-native';
+import { Text } from './ui/text';
+import { cn } from '../lib/utils';
+import {
+  Search,
+  BookOpen,
+  CheckCircle,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Loader2,
+} from 'lucide-react-native';
+import type { ResearchProgress } from '../types';
+
+interface ResearchProgressCardProps {
+  progress: ResearchProgress;
+}
+
+const PHASE_LABELS: Record<string, string> = {
+  decomposing: 'Planning research',
+  searching: 'Searching the web',
+  reading: 'Reading sources',
+  synthesizing: 'Synthesizing report',
+  follow_up: 'Follow-up research',
+  finalizing: 'Polishing report',
+  complete: 'Research complete',
+};
+
+const PHASE_ORDER = ['decomposing', 'searching', 'synthesizing', 'follow_up', 'finalizing', 'complete'];
+
+export function ResearchProgressCard({ progress }: ResearchProgressCardProps) {
+  const [showSources, setShowSources] = useState(false);
+  const [showQuestions, setShowQuestions] = useState(true);
+
+  const phaseIndex = PHASE_ORDER.indexOf(progress.phase || '');
+  const isComplete = progress.phase === 'complete' || progress.isComplete;
+
+  return (
+    <View className="mx-3 my-2 rounded-xl border border-border bg-card p-4 gap-3">
+      {/* Header */}
+      <View className="flex-row items-center gap-2">
+        <View className="w-8 h-8 rounded-full bg-primary/10 items-center justify-center">
+          {isComplete ? (
+            <CheckCircle size={16} className="text-green-500" />
+          ) : (
+            <Search size={16} className="text-primary" />
+          )}
+        </View>
+        <View className="flex-1">
+          <Text className="text-sm font-semibold text-foreground">
+            Deep Research
+          </Text>
+          <Text className="text-xs text-muted-foreground">
+            {progress.message || PHASE_LABELS[progress.phase || ''] || 'Researching...'}
+          </Text>
+        </View>
+        {progress.sourcesFound !== undefined && (
+          <View className="bg-muted rounded-full px-2 py-0.5">
+            <Text className="text-[10px] text-muted-foreground">
+              {progress.sourcesFound} sources
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {/* Phase progress */}
+      <View className="flex-row gap-1">
+        {PHASE_ORDER.map((phase, i) => (
+          <View
+            key={phase}
+            className={cn(
+              'flex-1 h-1 rounded-full',
+              i <= phaseIndex
+                ? (isComplete ? 'bg-green-500' : 'bg-primary')
+                : 'bg-muted',
+            )}
+          />
+        ))}
+      </View>
+
+      {/* Sub-questions */}
+      {progress.subQuestions && progress.subQuestions.length > 0 && (
+        <View>
+          <Pressable
+            onPress={() => setShowQuestions(!showQuestions)}
+            className="flex-row items-center gap-1 mb-1"
+          >
+            <BookOpen size={12} className="text-muted-foreground" />
+            <Text className="text-xs font-medium text-muted-foreground">
+              Research angles ({progress.subQuestions.length})
+            </Text>
+            {showQuestions ? (
+              <ChevronUp size={12} className="text-muted-foreground" />
+            ) : (
+              <ChevronDown size={12} className="text-muted-foreground" />
+            )}
+          </Pressable>
+          {showQuestions && (
+            <View className="gap-1 pl-4">
+              {progress.subQuestions.map((q, i) => (
+                <Text key={i} className="text-xs text-muted-foreground">
+                  {i + 1}. {q}
+                </Text>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Current search query indicator */}
+      {progress.currentQuery && !isComplete && (
+        <View className="flex-row items-center gap-2 bg-muted/50 rounded-lg px-3 py-1.5">
+          <Loader2 size={12} className="text-muted-foreground" />
+          <Text className="text-xs text-muted-foreground flex-1" numberOfLines={1}>
+            {progress.currentQuery}
+          </Text>
+        </View>
+      )}
+
+      {/* Sources list (collapsed by default) */}
+      {progress.sources && progress.sources.length > 0 && (
+        <View>
+          <Pressable
+            onPress={() => setShowSources(!showSources)}
+            className="flex-row items-center gap-1"
+          >
+            <ExternalLink size={12} className="text-muted-foreground" />
+            <Text className="text-xs font-medium text-muted-foreground">
+              Sources ({progress.sources.length})
+            </Text>
+            {showSources ? (
+              <ChevronUp size={12} className="text-muted-foreground" />
+            ) : (
+              <ChevronDown size={12} className="text-muted-foreground" />
+            )}
+          </Pressable>
+          {showSources && (
+            <View className="gap-1 pl-4 mt-1">
+              {progress.sources.map((s) => (
+                <Text key={s.id} className="text-xs text-primary" numberOfLines={1}>
+                  [{s.id}] {s.title}
+                </Text>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+
+      {/* Search count */}
+      {progress.totalSearches !== undefined && isComplete && (
+        <Text className="text-[10px] text-muted-foreground text-right">
+          {progress.totalSearches} searches performed
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/components/ThinkingIndicator.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text } from "react-native";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -8,7 +8,6 @@ import Animated, {
   withSequence,
   Easing,
 } from "react-native-reanimated";
-import { useAliaColors } from "../theme";
 
 const thinkingPhrases = [
   "Thinking...",
@@ -33,7 +32,6 @@ const workingPhrases = [
 ];
 
 export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking?: boolean; statusText?: string }) {
-  const colors = useAliaColors();
   const phrases = isWorking ? workingPhrases : thinkingPhrases;
   const [phraseIndex, setPhraseIndex] = useState(() =>
     Math.floor(Math.random() * phrases.length)
@@ -104,31 +102,18 @@ export function ThinkingIndicator({ isWorking = false, statusText }: { isWorking
   const shownText = statusText || displayText;
 
   return (
-    <View style={styles.container}>
+    <View className="flex-row items-center gap-2 py-2">
       <Animated.View style={spinStyle}>
-        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>✱</Text>
+        <Text className="text-base text-muted-foreground">✱</Text>
       </Animated.View>
-      <View style={styles.textRow}>
-        <Text style={{ fontSize: 16, color: colors.mutedForeground }}>{shownText}</Text>
+      <View className="flex-row items-center">
+        <Text className="text-base text-muted-foreground">{shownText}</Text>
         {(statusText || isTyping) && (
           <Animated.View style={cursorStyle}>
-            <Text style={{ fontSize: 16, color: colors.mutedForeground }}>|</Text>
+            <Text className="text-base text-muted-foreground">|</Text>
           </Animated.View>
         )}
       </View>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingVertical: 8,
-  },
-  textRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});