feat: Implement local chat saving and history management using Zustand and AsyncStorage.

app/chat/_layout.tsx

@@ -2,7 +2,7 @@ import { ModelSelector } from '@/components/chat/ModelSelector';
 import { useThemeColor } from '@/hooks/useThemeColor';
 import { useAppStore } from '@/store/useAppStore';
 import { Stack, useRouter } from 'expo-router';
-import { Plus, Settings } from 'lucide-react-native';
+import { History, Plus, Settings } from 'lucide-react-native';
 import { Platform, StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 
 export default function ChatLayout() {
@@ -33,13 +33,22 @@ export default function ChatLayout() {
                             headerShadowVisible: false,
                             headerStyle: { backgroundColor: colors.backgroundColor },
                             headerLeft: () => (
-                                <TouchableOpacity
-                                    onPress={clearChat}
-                                    style={[styles.headerBtn, { backgroundColor: colors.cardBackground }]}
-                                    activeOpacity={0.7}
-                                >
-                                    <Plus size={22} color={colors.text} />
-                                </TouchableOpacity>
+                                <View style={{ flexDirection: 'row', gap: 8 }}>
+                                    <TouchableOpacity
+                                        onPress={() => router.push('/chat/history')}
+                                        style={[styles.headerBtn, { backgroundColor: colors.cardBackground }]}
+                                        activeOpacity={0.7}
+                                    >
+                                        <History size={22} color={colors.text} />
+                                    </TouchableOpacity>
+                                    <TouchableOpacity
+                                        onPress={clearChat}
+                                        style={[styles.headerBtn, { backgroundColor: colors.cardBackground }]}
+                                        activeOpacity={0.7}
+                                    >
+                                        <Plus size={22} color={colors.text} />
+                                    </TouchableOpacity>
+                                </View>
                             ),
                             headerRight: () => (
                                 <TouchableOpacity
@@ -52,6 +61,7 @@ export default function ChatLayout() {
                             ),
                         }}
                     />
+                    <Stack.Screen name="history" options={{ headerShown: false, presentation: 'modal' }} />
                 </Stack>
             </View>
         </View>

app/chat/history.tsx

@@ -0,0 +1,124 @@
+import { useThemeColor } from '@/hooks/useThemeColor';
+import { ChatSession, useAppStore } from '@/store/useAppStore';
+import { useRouter } from 'expo-router';
+import { ArrowLeft, MessageSquare, Trash2 } from 'lucide-react-native';
+import React from 'react';
+import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export default function HistoryScreen() {
+    const colors = useThemeColor();
+    const router = useRouter();
+    const chatSessions = useAppStore(state => state.chatSessions);
+    const loadChat = useAppStore(state => state.loadChat);
+    const deleteChatSession = useAppStore(state => state.deleteChatSession);
+
+    const handleLoadChat = (id: string) => {
+        loadChat(id);
+        router.back();
+    };
+
+    return (
+        <View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
+            <View style={[styles.header, { borderBottomColor: colors.border, backgroundColor: colors.backgroundColor }]}>
+                <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
+                    <ArrowLeft size={24} color={colors.text} />
+                </TouchableOpacity>
+                <Text style={[styles.title, { color: colors.text }]}>Chat History</Text>
+            </View>
+
+            {chatSessions.length === 0 ? (
+                <View style={styles.emptyState}>
+                    <MessageSquare size={48} color={colors.textMuted} />
+                    <Text style={[styles.emptyText, { color: colors.textMuted }]}>No saved chats yet.</Text>
+                </View>
+            ) : (
+                <FlatList
+                    data={chatSessions}
+                    keyExtractor={(item) => item.id}
+                    contentContainerStyle={styles.listContent}
+                    renderItem={({ item }: { item: ChatSession }) => (
+                        <TouchableOpacity
+                            style={[
+                                styles.chatItem,
+                                { backgroundColor: colors.cardBackground, borderColor: colors.border }
+                            ]}
+                            onPress={() => handleLoadChat(item.id)}
+                        >
+                            <View style={styles.chatInfo}>
+                                <Text style={[styles.chatTitle, { color: colors.text }]} numberOfLines={1}>
+                                    {item.title}
+                                </Text>
+                                <Text style={[styles.chatDate, { color: colors.textMuted }]}>
+                                    {new Date(item.updatedAt).toLocaleString()} · {item.messages.length} msgs
+                                </Text>
+                            </View>
+                            <TouchableOpacity
+                                style={styles.deleteButton}
+                                onPress={() => deleteChatSession(item.id)}
+                            >
+                                <Trash2 size={20} color={colors.errorText} />
+                            </TouchableOpacity>
+                        </TouchableOpacity>
+                    )}
+                />
+            )}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderBottomWidth: 1,
+    },
+    backButton: {
+        marginRight: 16,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
+    emptyState: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 32,
+    },
+    emptyText: {
+        marginTop: 16,
+        fontSize: 16,
+    },
+    listContent: {
+        padding: 16,
+        gap: 12,
+    },
+    chatItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: 1,
+    },
+    chatInfo: {
+        flex: 1,
+        marginRight: 16,
+    },
+    chatTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    chatDate: {
+        fontSize: 12,
+    },
+    deleteButton: {
+        padding: 8,
+    },
+});