feat: Introduce a comprehensive set of AI agent skills, agents, and workflows, along with new UI components and application structure.

app/_layout.tsx

@@ -0,0 +1,37 @@
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { StatusBar } from 'expo-status-bar';
+import { useEffect } from 'react';
+import 'react-native-reanimated';
+
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { useAppStore } from '@/store/useAppStore';
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const systemColorScheme = useColorScheme();
+  const themePreference = useAppStore((state) => state.theme);
+
+  useEffect(() => {
+    SplashScreen.hideAsync();
+  }, []);
+
+  const isDark = themePreference === 'system'
+    ? systemColorScheme === 'dark'
+    : themePreference === 'dark';
+
+  return (
+    <ThemeProvider value={isDark ? DarkTheme : DefaultTheme}>
+      <Stack>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="chat" options={{ headerShown: false }} />
+        <Stack.Screen name="settings" options={{ presentation: 'modal', title: 'Settings' }} />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style={isDark ? 'light' : 'dark'} />
+    </ThemeProvider>
+  );
+}

app/chat/_layout.tsx

@@ -0,0 +1,83 @@
+import { ModelSelector } from '@/components/chat/ModelSelector';
+import { useAppStore } from '@/store/useAppStore';
+import { Stack, useRouter } from 'expo-router';
+import { Plus, Settings } from 'lucide-react-native';
+import { Platform, StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+
+export default function ChatLayout() {
+    const { width } = useWindowDimensions();
+    const router = useRouter();
+    const clearChat = useAppStore(state => state.clearChat);
+
+    const isLargeScreen = width > 768;
+    const containerStyle = isLargeScreen ? styles.desktopContainer : styles.mobileContainer;
+    const chatMaxWidth = isLargeScreen ? 800 : '100%';
+
+    return (
+        <View style={containerStyle}>
+            <View style={[styles.chatWrapper, { maxWidth: chatMaxWidth }]}>
+                <Stack>
+                    <Stack.Screen
+                        name="index"
+                        options={{
+                            headerTitle: () => <ModelSelector />,
+                            headerShadowVisible: false,
+                            headerLeft: () => (
+                                <TouchableOpacity
+                                    onPress={clearChat}
+                                    style={styles.headerBtn}
+                                    activeOpacity={0.7}
+                                >
+                                    <Plus size={22} color="#111827" />
+                                </TouchableOpacity>
+                            ),
+                            headerRight: () => (
+                                <TouchableOpacity
+                                    onPress={() => router.push('/settings')}
+                                    style={styles.headerBtn}
+                                    activeOpacity={0.7}
+                                >
+                                    <Settings size={22} color="#111827" />
+                                </TouchableOpacity>
+                            ),
+                        }}
+                    />
+                </Stack>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    desktopContainer: {
+        flex: 1,
+        backgroundColor: '#F3F4F6',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    mobileContainer: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    chatWrapper: {
+        flex: 1,
+        width: '100%',
+        backgroundColor: '#FFFFFF',
+        ...Platform.select({
+            web: {
+                shadowColor: '#000',
+                shadowOpacity: 0.1,
+                shadowRadius: 12,
+                shadowOffset: { width: 0, height: 4 },
+            }
+        })
+    },
+    headerBtn: {
+        width: 40,
+        height: 40,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginHorizontal: 4,
+    },
+});

app/chat/index.tsx

@@ -0,0 +1,244 @@
+import { ChatInput } from '@/components/chat/ChatInput';
+import { MessageBubble } from '@/components/chat/MessageBubble';
+import { TypingIndicator } from '@/components/chat/TypingIndicator';
+import { useLMStudio } from '@/hooks/useLMStudio';
+import { useAppStore } from '@/store/useAppStore';
+import { MessageSquare, Sparkles } from 'lucide-react-native';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { FlatList, KeyboardAvoidingView, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+const PROMPT_SUGGESTIONS = [
+    'Explain recursion in simple terms',
+    'Write a short poem about coding',
+    'What are the best practices for React Native?',
+    'Help me debug a JavaScript error',
+];
+
+export default function ChatScreen() {
+    const messages = useAppStore(state => state.messages);
+    const editingMessageId = useAppStore(state => state.editingMessageId);
+    const setEditingMessageId = useAppStore(state => state.setEditingMessageId);
+    const deleteMessagesAfter = useAppStore(state => state.deleteMessagesAfter);
+    const deleteMessage = useAppStore(state => state.deleteMessage);
+    const editMessage = useAppStore(state => state.editMessage);
+    const { sendMessage, stopStreaming, regenerateResponse, isStreaming, isConnected } = useLMStudio();
+    const flatListRef = useRef<FlatList>(null);
+
+    // Find the editing message content
+    const editingMessage = editingMessageId
+        ? messages.find(m => m.id === editingMessageId)
+        : null;
+
+    const handleSend = useCallback((text: string) => {
+        if (editingMessageId && editingMessage) {
+            // Edit mode: update message, delete all after, and resend
+            editMessage(editingMessageId, text);
+            // Get updated messages, delete everything after the edited message
+            deleteMessagesAfter(editingMessageId);
+            setEditingMessageId(null);
+
+            // Now send the edited message for a new response
+            // Small delay to allow state update
+            setTimeout(() => {
+                const store = useAppStore.getState();
+                const msgs = store.messages;
+                const apiMsgs = msgs.map(m => ({ role: m.role, content: m.content }));
+                const modelId = store.activeModelId;
+                if (!modelId) return;
+
+                const assistantId = store.addMessage({ role: 'assistant', content: '' });
+                store.setIsStreaming(true);
+
+                const { chatCompletionStream } = require('@/services/lmStudioApi');
+                chatCompletionStream(
+                    store.serverConfig,
+                    modelId,
+                    apiMsgs,
+                    (chunk: string) => store.appendToMessage(assistantId, chunk),
+                    () => { store.setIsStreaming(false); },
+                    (error: Error) => {
+                        store.appendToMessage(assistantId, `\n\n⚠️ Error: ${error.message}`);
+                        store.setIsStreaming(false);
+                    },
+                );
+            }, 100);
+        } else {
+            sendMessage(text);
+        }
+    }, [editingMessageId, editingMessage, editMessage, deleteMessagesAfter, setEditingMessageId, sendMessage]);
+
+    const handleEdit = useCallback((id: string) => {
+        setEditingMessageId(id);
+    }, [setEditingMessageId]);
+
+    const handleCancelEdit = useCallback(() => {
+        setEditingMessageId(null);
+    }, [setEditingMessageId]);
+
+    const handleDelete = useCallback((id: string) => {
+        deleteMessage(id);
+    }, [deleteMessage]);
+
+    // Find the last assistant message id
+    const lastAssistantId = messages.length > 0
+        ? [...messages].reverse().find(m => m.role === 'assistant')?.id
+        : null;
+
+    // Auto-scroll
+    useEffect(() => {
+        if (messages.length > 0 && flatListRef.current) {
+            setTimeout(() => {
+                flatListRef.current?.scrollToEnd({ animated: true });
+            }, 100);
+        }
+    }, [messages.length, messages[messages.length - 1]?.content?.length]);
+
+    // Show typing indicator when streaming and last assistant message is empty
+    const showTypingIndicator = isStreaming &&
+        messages.length > 0 &&
+        messages[messages.length - 1]?.role === 'assistant' &&
+        messages[messages.length - 1]?.content === '';
+
+    return (
+        <KeyboardAvoidingView
+            style={styles.container}
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
+        >
+            {!isConnected && (
+                <View style={styles.banner}>
+                    <Text style={styles.bannerText}>
+                        ⚠️ Not connected to LM Studio. Check Settings → Server Connection.
+                    </Text>
+                </View>
+            )}
+
+            {messages.length === 0 ? (
+                <View style={styles.emptyState}>
+                    <View style={styles.emptyIconWrap}>
+                        <MessageSquare size={40} color="#D1D5DB" />
+                    </View>
+                    <Text style={styles.emptyTitle}>Start a conversation</Text>
+                    <Text style={styles.emptySubtitle}>
+                        Send a message to begin chatting with your local AI model.
+                    </Text>
+
+                    <View style={styles.suggestionsWrap}>
+                        {PROMPT_SUGGESTIONS.map((prompt, i) => (
+                            <TouchableOpacity
+                                key={i}
+                                style={styles.suggestionChip}
+                                onPress={() => sendMessage(prompt)}
+                                activeOpacity={0.7}
+                            >
+                                <Sparkles size={14} color="#6B7280" />
+                                <Text style={styles.suggestionText} numberOfLines={1}>{prompt}</Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                </View>
+            ) : (
+                <>
+                    <FlatList
+                        ref={flatListRef}
+                        data={messages}
+                        keyExtractor={(item) => item.id}
+                        renderItem={({ item }) => (
+                            <MessageBubble
+                                message={item}
+                                onEdit={() => handleEdit(item.id)}
+                                onRegenerate={regenerateResponse}
+                                onDelete={() => handleDelete(item.id)}
+                                isStreaming={isStreaming}
+                                isLastAssistant={item.id === lastAssistantId}
+                            />
+                        )}
+                        contentContainerStyle={styles.listContent}
+                    />
+                    {showTypingIndicator && <TypingIndicator />}
+                </>
+            )}
+
+            <ChatInput
+                onSend={handleSend}
+                onStop={stopStreaming}
+                isLoading={isStreaming}
+                editingText={editingMessage?.content ?? null}
+                onCancelEdit={handleCancelEdit}
+            />
+        </KeyboardAvoidingView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    listContent: {
+        paddingTop: 8,
+        paddingBottom: 16,
+    },
+    banner: {
+        backgroundColor: '#FEF3C7',
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#FDE68A',
+    },
+    bannerText: {
+        fontSize: 13,
+        color: '#92400E',
+        textAlign: 'center',
+    },
+    emptyState: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 32,
+        paddingBottom: 80,
+    },
+    emptyIconWrap: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        backgroundColor: '#F3F4F6',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 16,
+    },
+    emptyTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#111827',
+        marginBottom: 8,
+    },
+    emptySubtitle: {
+        fontSize: 15,
+        color: '#6B7280',
+        textAlign: 'center',
+        lineHeight: 22,
+        marginBottom: 28,
+    },
+    suggestionsWrap: {
+        width: '100%',
+        maxWidth: 400,
+        gap: 8,
+    },
+    suggestionChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        backgroundColor: '#F9FAFB',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        borderRadius: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+    },
+    suggestionText: {
+        fontSize: 14,
+        color: '#374151',
+        flex: 1,
+    },
+});

app/index.tsx

@@ -0,0 +1,6 @@
+import { Redirect } from 'expo-router';
+
+export default function Index() {
+    // Directly point to the chat flow
+    return <Redirect href="/chat" />;
+}

app/settings/index.tsx

@@ -0,0 +1,317 @@
+import { ConnectionBadge } from '@/components/ui/ConnectionBadge';
+import * as api from '@/services/lmStudioApi';
+import { ServerConfig } from '@/services/types';
+import { useAppStore } from '@/store/useAppStore';
+import React, { useState } from 'react';
+import {
+    ActivityIndicator,
+    ScrollView,
+    StyleSheet,
+    Switch,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    useWindowDimensions,
+    View
+} from 'react-native';
+
+export default function SettingsScreen() {
+    const { width } = useWindowDimensions();
+    const theme = useAppStore(state => state.theme);
+    const setTheme = useAppStore(state => state.setTheme);
+    const serverConfig = useAppStore(state => state.serverConfig);
+    const setServerConfig = useAppStore(state => state.setServerConfig);
+    const isConnected = useAppStore(state => state.isConnected);
+    const setIsConnected = useAppStore(state => state.setIsConnected);
+
+    const [host, setHost] = useState(serverConfig.host);
+    const [port, setPort] = useState(serverConfig.port.toString());
+    const [apiKey, setApiKey] = useState(serverConfig.apiKey ?? '');
+    const [isTesting, setIsTesting] = useState(false);
+    const [testResult, setTestResult] = useState<boolean | null>(null);
+
+    const isDarkMode = theme === 'dark' || theme === 'system';
+    const toggleTheme = () => setTheme(isDarkMode ? 'light' : 'dark');
+
+    const isLargeScreen = width > 768;
+
+    const currentConfig: ServerConfig = {
+        host: host.trim() || 'localhost',
+        port: parseInt(port, 10) || 1234,
+        apiKey: apiKey.trim() || undefined,
+    };
+
+    const handleSaveConfig = () => {
+        setServerConfig(currentConfig);
+        setTestResult(null);
+    };
+
+    const handleTestConnection = async () => {
+        handleSaveConfig();
+        setIsTesting(true);
+        setTestResult(null);
+
+        const ok = await api.testConnection(currentConfig);
+        setTestResult(ok);
+        setIsConnected(ok);
+        setIsTesting(false);
+    };
+
+    const configChanged =
+        host !== serverConfig.host ||
+        port !== serverConfig.port.toString() ||
+        apiKey !== (serverConfig.apiKey ?? '');
+
+    return (
+        <ScrollView
+            style={styles.container}
+            contentContainerStyle={[
+                styles.scrollContent,
+                isLargeScreen && styles.desktopContent,
+            ]}
+        >
+            {/* Server Connection */}
+            <View style={[styles.card, isLargeScreen && styles.desktopCard]}>
+                <View style={styles.sectionHeader}>
+                    <Text style={styles.sectionTitle}>Server Connection</Text>
+                    <ConnectionBadge isConnected={isConnected} />
+                </View>
+
+                <View style={styles.inputGroup}>
+                    <Text style={styles.label}>Host</Text>
+                    <TextInput
+                        style={styles.textInput}
+                        value={host}
+                        onChangeText={setHost}
+                        placeholder="localhost"
+                        placeholderTextColor="#9CA3AF"
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                    />
+                </View>
+
+                <View style={styles.inputGroup}>
+                    <Text style={styles.label}>Port</Text>
+                    <TextInput
+                        style={styles.textInput}
+                        value={port}
+                        onChangeText={setPort}
+                        placeholder="1234"
+                        placeholderTextColor="#9CA3AF"
+                        keyboardType="numeric"
+                    />
+                </View>
+
+                <View style={styles.inputGroup}>
+                    <Text style={styles.label}>API Key (optional)</Text>
+                    <TextInput
+                        style={styles.textInput}
+                        value={apiKey}
+                        onChangeText={setApiKey}
+                        placeholder="Leave empty for local"
+                        placeholderTextColor="#9CA3AF"
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                        secureTextEntry
+                    />
+                </View>
+
+                <View style={styles.buttonRow}>
+                    {configChanged && (
+                        <TouchableOpacity style={styles.saveButton} onPress={handleSaveConfig}>
+                            <Text style={styles.saveButtonText}>Save</Text>
+                        </TouchableOpacity>
+                    )}
+                    <TouchableOpacity
+                        style={[styles.testButton, isTesting && styles.testButtonDisabled]}
+                        onPress={handleTestConnection}
+                        disabled={isTesting}
+                    >
+                        {isTesting ? (
+                            <ActivityIndicator size="small" color="#FFFFFF" />
+                        ) : (
+                            <Text style={styles.testButtonText}>Test Connection</Text>
+                        )}
+                    </TouchableOpacity>
+                </View>
+
+                {testResult !== null && (
+                    <View style={[styles.resultBox, testResult ? styles.resultSuccess : styles.resultError]}>
+                        <Text style={[styles.resultText, testResult ? styles.resultTextSuccess : styles.resultTextError]}>
+                            {testResult
+                                ? '✅ Connected successfully!'
+                                : '❌ Connection failed. Check host, port, and if LM Studio is running.'}
+                        </Text>
+                    </View>
+                )}
+            </View>
+
+            {/* Appearance */}
+            <View style={[styles.card, isLargeScreen && styles.desktopCard]}>
+                <Text style={styles.sectionTitle}>Appearance</Text>
+
+                <View style={styles.row}>
+                    <View style={styles.rowText}>
+                        <Text style={styles.rowTitle}>Dark Mode</Text>
+                        <Text style={styles.rowSubtitle}>Toggle application theme</Text>
+                    </View>
+                    <Switch
+                        value={isDarkMode}
+                        onValueChange={toggleTheme}
+                        trackColor={{ false: '#D1D5DB', true: '#000000' }}
+                        thumbColor={'#FFFFFF'}
+                    />
+                </View>
+            </View>
+
+            {/* About */}
+            <View style={[styles.card, isLargeScreen && styles.desktopCard]}>
+                <Text style={styles.sectionTitle}>About</Text>
+                <Text style={styles.infoText}>LocalAiApp - Cross Platform Version</Text>
+                <Text style={[styles.infoText, { marginTop: 4, fontSize: 13, color: '#9CA3AF' }]}>
+                    Using OpenAI-compatible API (/v1)
+                </Text>
+            </View>
+        </ScrollView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F3F4F6',
+    },
+    scrollContent: {
+        padding: 16,
+        paddingBottom: 40,
+    },
+    desktopContent: {
+        alignItems: 'center',
+        paddingTop: 40,
+    },
+    card: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 8,
+        elevation: 2,
+    },
+    desktopCard: {
+        width: '100%',
+        maxWidth: 600,
+    },
+    sectionHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 16,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#111827',
+    },
+    inputGroup: {
+        marginBottom: 14,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#374151',
+        marginBottom: 6,
+    },
+    textInput: {
+        backgroundColor: '#F9FAFB',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        borderRadius: 10,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        fontSize: 15,
+        color: '#111827',
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        gap: 10,
+        marginTop: 4,
+    },
+    saveButton: {
+        flex: 1,
+        backgroundColor: '#F3F4F6',
+        paddingVertical: 12,
+        borderRadius: 10,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+    },
+    saveButtonText: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#374151',
+    },
+    testButton: {
+        flex: 2,
+        backgroundColor: '#000000',
+        paddingVertical: 12,
+        borderRadius: 10,
+        alignItems: 'center',
+    },
+    testButtonDisabled: {
+        opacity: 0.6,
+    },
+    testButtonText: {
+        fontSize: 15,
+        fontWeight: '600',
+        color: '#FFFFFF',
+    },
+    resultBox: {
+        marginTop: 12,
+        borderRadius: 8,
+        padding: 12,
+    },
+    resultSuccess: {
+        backgroundColor: '#F0FDF4',
+    },
+    resultError: {
+        backgroundColor: '#FEF2F2',
+    },
+    resultText: {
+        fontSize: 14,
+        textAlign: 'center',
+    },
+    resultTextSuccess: {
+        color: '#166534',
+    },
+    resultTextError: {
+        color: '#991B1B',
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 8,
+    },
+    rowText: {
+        flex: 1,
+        paddingRight: 16,
+    },
+    rowTitle: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#111827',
+        marginBottom: 4,
+    },
+    rowSubtitle: {
+        fontSize: 14,
+        color: '#6B7280',
+    },
+    infoText: {
+        fontSize: 15,
+        lineHeight: 22,
+        color: '#4B5563',
+    },
+});