refactor(streaming): complete rewrite of message streaming architecture

Completely redesigned streaming message accumulation to fix persistent
issues with messages disappearing, flickering, and being replaced during
streaming.

Key changes:
- Simplified streaming state to single accumulating message + completed array
- New message boundary detection: finalize on reasoning_message ID change
- Display both completed and current messages simultaneously (no more "one slot")
- Convert streaming messages to permanent format only after stream completes
- Remove server message fetching - build from stream data only

New architecture:
- currentStreamingMessage: single message being accumulated
- completedStreamingMessages[]: finished messages (stream still active)
- Simple API: accumulateReasoning, accumulateToolCall, accumulateAssistant

This follows the Letta streaming protocol correctly:
- Chunks are DELTAS (incremental, not full text)
- Reasoning + content share same message ID
- New reasoning with different ID = previous message complete

Files changed:
- src/stores/chatStore.ts: New StreamingMessage interface, simple accumulation
- src/hooks/useMessageStream.ts: Dead simple chunk handler with ID-based finalization
- src/hooks/useMessageGroups.ts: Display both completed and current streams
- src/screens/ChatScreen.tsx: Auto-expand reasoning blocks
- STREAMING_ANALYSIS.md: Complete documentation of streaming behavior

This resolves days of streaming issues with a simpler, more correct implementation.

STREAMING_ANALYSIS.md

···
+# Letta Streaming Analysis & Implementation Guide
+
+## Real Streaming Behavior (From Testing)
+
+Based on actual testing with the message "create a memory block called cameron":
+
+### Message Flow Pattern
+
+```
+[0-21]   reasoning_message      (ID: message-f7b4fa60-0195-4e50-98c9-dfb6a03b013f)
+[22-36]  tool_call_message      (ID: message-f7b4fa60-0195-4e50-98c9-dfb6a03b013f)  ← SAME ID
+[37]     tool_return_message    (ID: message-e906b6cc-33a1-440c-8ff6-15b06ec287c8)  ← NEW ID
+[38-53]  reasoning_message      (ID: message-cc7aa672-7859-4e22-9ccd-2efbde068e6c)  ← NEW ID
+[54-88]  assistant_message      (ID: message-cc7aa672-7859-4e22-9ccd-2efbde068e6c)  ← SAME ID
+[89]     stop_reason
+[90]     usage_statistics
+```
+
+### Key Insights
+
+1. **Chunks are DELTAS** - Each chunk contains only the new text, not the full accumulated text
+2. **Message IDs group related chunks** - All chunks with the same ID belong together
+3. **Reasoning + Content share IDs** - Reasoning and its paired content (tool_call OR assistant) have the same ID
+4. **Tool returns have separate IDs** - Tool return messages have different IDs from their calls
+5. **New reasoning = New message group** - When a new reasoning_message with a different ID arrives, the previous group is complete
+
+## Message Grouping Rules
+
+### Rule 1: Message Boundary Detection
+A new message group starts when we receive a `reasoning_message` chunk with a **different ID** than the current one.
+
+### Rule 2: Message Structure
+Each message group contains:
+- `reasoning` (optional) - from `reasoning_message` chunks
+- `content` - from either `tool_call_message` OR `assistant_message` chunks
+- `id` - the shared message ID from Letta
+
+### Rule 3: Tool Returns
+Tool return messages (`tool_return_message`) have separate IDs and should be stored separately, then paired with their tool call using `step_id`.
+
+## Correct Implementation Strategy
+
+### Data Structure
+```typescript
+interface AccumulatingMessage {
+  id: string;
+  reasoning: string;  // Accumulate reasoning chunks here
+  content: string;    // Accumulate tool_call OR assistant chunks here
+  type: 'tool_call' | 'assistant' | null;  // What kind of content
+  toolCallName?: string;  // For tool calls
+}
+```
+
+### Algorithm
+
+```
+currentMessage = null
+completedMessages = []
+
+ON CHUNK RECEIVED:
+  chunkId = chunk.id
+
+  // NEW MESSAGE GROUP DETECTED
+  if chunk.message_type === 'reasoning_message' AND currentMessage AND currentMessage.id !== chunkId:
+    // Previous message is complete
+    completedMessages.push(currentMessage)
+    currentMessage = { id: chunkId, reasoning: '', content: '', type: null }
+
+  // INITIALIZE IF NEEDED
+  if NOT currentMessage:
+    currentMessage = { id: chunkId, reasoning: '', content: '', type: null }
+
+  // ACCUMULATE BASED ON TYPE
+  if chunk.message_type === 'reasoning_message':
+    currentMessage.reasoning += chunk.reasoning
+
+  else if chunk.message_type === 'tool_call_message':
+    currentMessage.type = 'tool_call'
+    currentMessage.toolCallName = chunk.tool_call.name
+    currentMessage.content += chunk.tool_call.arguments  // Delta!
+
+  else if chunk.message_type === 'assistant_message':
+    currentMessage.type = 'assistant'
+    currentMessage.content += extractText(chunk.content)  // Delta!
+
+  else if chunk.message_type === 'tool_return_message':
+    // Tool returns are separate - just store them
+    storeToolReturn(chunk)
+
+ON STREAM COMPLETE:
+  // Finalize the last message
+  if currentMessage:
+    completedMessages.push(currentMessage)
+
+  // Convert to display format and add to messages array
+  convertAndStore(completedMessages)
+```
+
+## Problems We've Had
+
+### Problem 1: "One Slot" - Messages Replacing Each Other
+**Symptom**: Only one message visible during streaming, messages replace each other
+**Cause**: Only showing `currentStream`, not showing `completedStreamPhases` alongside it
+**Fix**: Display BOTH completed messages AND current accumulating message
+
+### Problem 2: Messages Disappearing After Completion
+**Symptom**: Messages visible during stream, gone after stream ends
+**Cause**: Clearing state before converting to permanent messages
+**Fix**: Convert to messages FIRST, THEN clear streaming state
+
+### Problem 3: Finalization Timing
+**Symptom**: Messages not moving to completed at the right time
+**Cause**: Finalizing on message TYPE change instead of ID change
+**Fix**: Only finalize when we see a new reasoning_message with a different ID
+
+### Problem 4: Fetching from Server
+**Symptom**: Flickering, delay, messages appearing twice
+**Cause**: Trying to fetch "official" messages from server after streaming
+**Fix**: Don't fetch from server - we have everything from the stream
+
+## Current Issues
+
+1. Messages still disappearing during streaming (one slot problem persists)
+2. Messages not reappearing after completion
+3. Flickering between phases
+
+## Required Fixes
+
+1. **Simplify state structure** - One accumulating message, one array of completed
+2. **Fix display logic** - Show BOTH accumulated + completed simultaneously
+3. **Fix finalization** - Trigger only on ID change
+4. **Fix persistence** - Convert to messages immediately, don't clear state prematurely

src/hooks/useMessageGroups.ts

···
 }
 
 /**
- * Streaming state interface
+ * Simple streaming message
  */
-export interface StreamingState {
+interface StreamingMessage {
+  id: string;
   reasoning: string;
-  assistantMessage: string;
-  toolCalls: Array<{
-    id: string;
-    name: string;
-    args: string;
-  }>;
+  content: string;
+  type: 'tool_call' | 'assistant' | null;
+  toolCallName?: string;
+  timestamp: string;
 }
 
 interface UseMessageGroupsParams {
   messages: LettaMessage[];
   isStreaming: boolean;
-  streamingState?: StreamingState;
+  currentStreamingMessage: StreamingMessage | null;
+  completedStreamingMessages: StreamingMessage[];
 }
 
 /**
···
 export function useMessageGroups({
   messages,
   isStreaming,
-  streamingState,
+  currentStreamingMessage,
+  completedStreamingMessages,
 }: UseMessageGroupsParams): MessageGroup[] {
   return useMemo(() => {
     // Step 1: Filter out system messages and login/heartbeat
···
       return timeA - timeB;
     });
 
-    // Step 6: Append streaming groups if active
-    if (isStreaming && streamingState) {
-      const streamingGroups = createStreamingGroups(streamingState);
-      filteredGroups.push(...streamingGroups);
+    // Step 6: Add completed streaming messages (finished but stream still active)
+    console.log('📊 Completed streaming messages:', completedStreamingMessages.length);
+    completedStreamingMessages.forEach((msg, index) => {
+      const group: MessageGroup = {
+        id: msg.id,
+        groupKey: `streaming-completed-${msg.id}`,
+        type: msg.type === 'tool_call' ? 'tool_call' : 'assistant',
+        content: msg.content,
+        reasoning: msg.reasoning || undefined,
+        created_at: msg.timestamp,
+        role: 'assistant',
+        isStreaming: false,  // It's done, just not persisted yet
+      };
+
+      if (msg.type === 'tool_call' && msg.toolCallName) {
+        group.toolCall = {
+          name: msg.toolCallName,
+          args: msg.content,
+        };
+      }
+
+      filteredGroups.push(group);
+      console.log(`  ✅ [${index}] ${msg.type}:`, msg.content.substring(0, 40));
+    });
+
+    // Step 7: Add current accumulating message (if any)
+    if (currentStreamingMessage) {
+      const group: MessageGroup = {
+        id: currentStreamingMessage.id,
+        groupKey: `streaming-current-${currentStreamingMessage.id}`,
+        type: currentStreamingMessage.type === 'tool_call' ? 'tool_call' : 'assistant',
+        content: currentStreamingMessage.content,
+        reasoning: currentStreamingMessage.reasoning || undefined,
+        created_at: currentStreamingMessage.timestamp,
+        role: 'assistant',
+        isStreaming: true,  // Still accumulating
+      };
+
+      if (currentStreamingMessage.type === 'tool_call' && currentStreamingMessage.toolCallName) {
+        group.toolCall = {
+          name: currentStreamingMessage.toolCallName,
+          args: currentStreamingMessage.content,
+        };
+      }
+
+      filteredGroups.push(group);
+      console.log('  🔄 Current streaming:', currentStreamingMessage.type, currentStreamingMessage.content.substring(0, 40));
     }
 
+    console.log('📊 FINAL GROUP COUNT:', filteredGroups.length, 'groups');
     return filteredGroups;
-  }, [messages, isStreaming, streamingState]);
+  }, [messages, isStreaming, currentStreamingMessage, completedStreamingMessages]);
 }
 
 /**
···
 
   // Unknown message type - skip
   return null;
-}
-
-/**
- * Create streaming groups from current stream state
- * Returns an array because multiple tool calls can be streaming simultaneously
- */
-function createStreamingGroups(state: StreamingState): MessageGroup[] {
-  const now = new Date().toISOString();
-  const groups: MessageGroup[] = [];
-
-  // If we have tool calls, create a group for EACH one
-  if (state.toolCalls.length > 0) {
-    state.toolCalls.forEach((toolCall, index) => {
-      groups.push({
-        id: 'streaming',
-        groupKey: `streaming-tool_call-${toolCall.id || index}`,
-        type: 'tool_call',
-        content: toolCall.args,
-        reasoning: index === 0 ? state.reasoning || undefined : undefined, // Only first gets reasoning
-        toolCall: {
-          name: toolCall.name,
-          args: toolCall.args,
-        },
-        toolReturn: undefined, // No return yet during streaming
-        created_at: now,
-        role: 'assistant',
-        isStreaming: true,
-      });
-    });
-    return groups;
-  }
-
-  // Assistant message streaming
-  if (state.assistantMessage || state.reasoning) {
-    groups.push({
-      id: 'streaming',
-      groupKey: 'streaming-assistant',
-      type: 'assistant',
-      content: state.assistantMessage,
-      reasoning: state.reasoning || undefined,
-      created_at: now,
-      role: 'assistant',
-      isStreaming: true,
-    });
-  }
-
-  return groups;
 }
 
 /**

src/hooks/useMessageInteractions.ts

···
     }
   }, []);
 
+  // Auto-expand reasoning for a message (doesn't toggle, just adds)
+  const expandReasoning = useCallback((messageId: string) => {
+    setExpandedReasoning((prev) => {
+      if (prev.has(messageId)) return prev; // Already expanded
+      const next = new Set(prev);
+      next.add(messageId);
+      return next;
+    });
+  }, []);
+
   return {
     // State
     expandedReasoning,
···
     toggleCompaction,
     toggleToolReturn,
     copyToClipboard,
+    expandReasoning,
   };
 }

src/hooks/useMessageStream.ts

···
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { useChatStore } from '../stores/chatStore';
 import { useAgentStore } from '../stores/agentStore';
 import lettaApi from '../api/lettaApi';
···
   const chatStore = useChatStore();
   const coAgent = useAgentStore((state) => state.coAgent);
 
-  // Handle individual streaming chunks
+  // Track last message ID to detect when a new message starts
+  const lastMessageIdRef = useRef<string | null>(null);
+
+  // Handle individual streaming chunks - ULTRA SIMPLE
   const handleStreamingChunk = useCallback((chunk: StreamingChunk) => {
-    console.log('Streaming chunk:', chunk.message_type, 'content:', chunk.content);
+    const chunkType = chunk.message_type;
+    const chunkId = (chunk as any).id;
 
-    // Handle error chunks
-    if ((chunk as any).error) {
-      console.error('Error chunk received:', (chunk as any).error);
-      chatStore.stopStreaming();
-      chatStore.setSendingMessage(false);
-      chatStore.clearStream();
+    // Skip non-content chunks
+    if (chunkType === 'stop_reason' || chunkType === 'usage_statistics') {
       return;
     }
 
-    // Handle stop_reason chunks
-    if ((chunk as any).message_type === 'stop_reason') {
-      console.log('Stop reason received:', (chunk as any).stopReason || (chunk as any).stop_reason);
+    // Handle errors
+    if ((chunk as any).error) {
+      console.error('❌ Stream error:', (chunk as any).error);
       return;
     }
 
-    // Process reasoning messages
-    if (chunk.message_type === 'reasoning_message' && chunk.reasoning) {
-      chatStore.updateStreamReasoning(chunk.reasoning);
+    console.log(`📦 [${chunkType}] ID: ${chunkId?.substring(0, 8)}...`);
+
+    // DETECT NEW MESSAGE: If we see a new reasoning with different ID, finalize current
+    if (chunkType === 'reasoning_message' && chunkId) {
+      if (lastMessageIdRef.current && chunkId !== lastMessageIdRef.current) {
+        console.log('🔄 NEW MESSAGE DETECTED - finalizing previous');
+        chatStore.finalizeCurrentMessage();
+      }
+      lastMessageIdRef.current = chunkId;
     }
 
-    // Process tool call messages
-    else if ((chunk.message_type === 'tool_call_message' || chunk.message_type === 'tool_call') && chunk.tool_call) {
-      // CRITICAL FIX: When we get the first tool call, clear reasoning from the previous assistant message
-      // The tool call will have its own reasoning chunks coming
-      const currentToolCallCount = chatStore.currentStream.toolCalls.length;
-      if (currentToolCallCount === 0) {
-        // This is the first tool call - clear accumulated reasoning from assistant phase
-        chatStore.clearStream();
+    // ACCUMULATE BASED ON TYPE
+    if (chunkType === 'reasoning_message' && chunk.reasoning && chunkId) {
+      chatStore.accumulateReasoning(chunkId, chunk.reasoning);
+    }
+    else if (chunkType === 'tool_call_message' && chunkId) {
+      const toolCall = (chunk as any).toolCall || (chunk as any).tool_call;
+      if (toolCall) {
+        const toolName = toolCall.name || toolCall.tool_name || 'unknown';
+        const args = toolCall.arguments || '';
+        chatStore.accumulateToolCall(chunkId, toolName, args);
       }
-
-      const callObj = chunk.tool_call.function || chunk.tool_call;
-      const toolName = callObj?.name || callObj?.tool_name || 'tool';
-      const args = callObj?.arguments || callObj?.args || {};
-      const toolCallId = chunk.id || `tool_${toolName}_${Date.now()}`;
-
-      const formatArgsPython = (obj: any): string => {
-        if (!obj || typeof obj !== 'object') return '';
-        return Object.entries(obj)
-          .map(([k, v]) => `${k}=${typeof v === 'string' ? `"${v}"` : JSON.stringify(v)}`)
-          .join(', ');
-      };
-
-      const toolLine = `${toolName}(${formatArgsPython(args)})`;
-      chatStore.addStreamToolCall({ id: toolCallId, name: toolName, args: toolLine });
     }
-
-    // Process assistant messages
-    else if (chunk.message_type === 'assistant_message' && chunk.content) {
+    else if (chunkType === 'assistant_message' && chunkId) {
       let contentText = '';
       const content = chunk.content as any;
 
       if (typeof content === 'string') {
         contentText = content;
-      } else if (typeof content === 'object' && content !== null) {
-        if (Array.isArray(content)) {
-          contentText = content
-            .filter((item: any) => item.type === 'text')
-            .map((item: any) => item.text || '')
-            .join('');
-        } else if (content.text) {
-          contentText = content.text;
-        }
+      } else if (Array.isArray(content)) {
+        contentText = content
+          .filter((item: any) => item.type === 'text')
+          .map((item: any) => item.text || '')
+          .join('');
+      } else if (content?.text) {
+        contentText = content.text;
       }
 
       if (contentText) {
-        chatStore.updateStreamAssistant(contentText);
+        chatStore.accumulateAssistant(chunkId, contentText);
       }
     }
+    // tool_return_message - just log, we'll handle pairing later
+    else if (chunkType === 'tool_return_message') {
+      console.log('📨 Tool return received');
+    }
   }, [chatStore]);
 
   // Send a message with streaming
···
 
       try {
         chatStore.startStreaming();
+        lastMessageIdRef.current = null; // Reset for new stream
 
         // Build message content
         let messageContent: any;
···
             handleStreamingChunk(chunk);
           },
           async (response) => {
-            console.log('Stream complete - refreshing messages from server');
+            console.log('🎬 STREAM COMPLETE');
+
+            // Finalize the last message
+            chatStore.finalizeCurrentMessage();
+
+            // Get all completed messages
+            const { currentStreamingMessage, completedStreamingMessages } = useChatStore.getState();
 
-            // Wait for server to finalize, then refresh messages
-            setTimeout(async () => {
-              try {
-                const currentCount = chatStore.messages.filter((msg) => !msg.id.startsWith('temp-')).length;
-                const fetchLimit = Math.max(currentCount + 10, 100);
+            const allStreamedMessages = [...completedStreamingMessages];
+            if (currentStreamingMessage) {
+              allStreamedMessages.push(currentStreamingMessage);
+            }
+
+            console.log('📨 Converting', allStreamedMessages.length, 'streamed messages to permanent messages');
+
+            // Convert to LettaMessage format and add to messages
+            const permanentMessages: LettaMessage[] = allStreamedMessages.map((msg, idx) => ({
+              id: msg.id,
+              role: 'assistant',
+              message_type: msg.type === 'tool_call' ? 'tool_call_message' : 'assistant_message',
+              content: msg.content,
+              reasoning: msg.reasoning,
+              ...(msg.type === 'tool_call' && msg.toolCallName ? {
+                tool_call: {
+                  name: msg.toolCallName,
+                  arguments: msg.content,
+                }
+              } : {}),
+              created_at: msg.timestamp,
+            } as any));
 
-                const recentMessages = await lettaApi.listMessages(coAgent.id, {
-                  limit: fetchLimit,
-                  use_assistant_message: true,
-                });
+            // Add to messages array
+            if (permanentMessages.length > 0) {
+              chatStore.addMessages(permanentMessages);
+            }
 
-                console.log('Received', recentMessages.length, 'messages from server after stream');
+            // Clear streaming state
+            chatStore.clearAllStreamingState();
+            chatStore.stopStreaming();
+            chatStore.setSendingMessage(false);
+            chatStore.clearImages();
 
-                // Replace all messages with server version
-                chatStore.setMessages(recentMessages);
-              } catch (error) {
-                console.error('Failed to refresh messages after stream:', error);
-              } finally {
-                chatStore.stopStreaming();
-                chatStore.setSendingMessage(false);
-                chatStore.clearStream();
-                chatStore.clearImages();
-              }
-            }, 500);
+            console.log('✅ Stream finished and converted to messages');
           },
           (error) => {
             console.error('Stream error:', error);
+            chatStore.clearAllStreamingState();
             chatStore.stopStreaming();
             chatStore.setSendingMessage(false);
-            chatStore.clearStream();
           }
         );
       } catch (error) {
         console.error('Failed to send message:', error);
+        chatStore.clearAllStreamingState();
         chatStore.stopStreaming();
         chatStore.setSendingMessage(false);
-        chatStore.clearStream();
         throw error;
       }
     },
···
   return {
     isStreaming: chatStore.isStreaming,
     isSendingMessage: chatStore.isSendingMessage,
-    currentStream: chatStore.currentStream,
     sendMessage,
   };
 }

src/screens/ChatScreen.tsx

···
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import {
   View,
   StyleSheet,
···
     toggleCompaction,
     toggleToolReturn,
     copyToClipboard,
+    expandReasoning,
   } = useMessageInteractions();
 
   // Scroll management
···
   const addImage = useChatStore((state) => state.addImage);
   const removeImage = useChatStore((state) => state.removeImage);
   const lastMessageNeedsSpace = useChatStore((state) => state.lastMessageNeedsSpace);
-  const currentStream = useChatStore((state) => state.currentStream);
+  const currentStreamingMessage = useChatStore((state) => state.currentStreamingMessage);
+  const completedStreamingMessages = useChatStore((state) => state.completedStreamingMessages);
 
   /**
    * Transform raw Letta messages into unified MessageGroup objects.
    *
    * This groups messages by ID (reasoning + assistant → single group),
-   * pairs tool calls with returns, and appends a temporary streaming group
-   * while the agent is responding.
+   * pairs tool calls with returns, and appends streaming messages.
    *
    * Each MessageGroup has a unique groupKey for FlatList rendering.
    */
   const messageGroups = useMessageGroups({
     messages,
     isStreaming,
-    streamingState: currentStream,
+    currentStreamingMessage,
+    completedStreamingMessages,
   });
 
   // Animation refs and layout
   const spacerHeightAnim = useRef(new Animated.Value(0)).current;
   const [containerHeight, setContainerHeight] = React.useState(0);
 
+  // Auto-expand reasoning blocks when message groups change
+  useEffect(() => {
+    messageGroups.forEach((group) => {
+      // Auto-expand any message with reasoning
+      if (group.reasoning && group.reasoning.trim()) {
+        expandReasoning(group.id);
+      }
+    });
+  }, [messageGroups, expandReasoning]);
+
   // Handle send message - no auto-scroll
   const handleSend = async (text: string) => {
     await sendMessage(text, selectedImages);
···
     );
   };
 
+  const isEmpty = messageGroups.length === 0 && !isLoadingMessages;
+
   return (
     <KeyboardAvoidingView
       style={[styles.container, { backgroundColor: theme.colors.background.primary }]}
···
       keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
       onLayout={(e) => setContainerHeight(e.nativeEvent.layout.height)}
     >
-      {/* Messages List */}
-      <FlatList
-        ref={scrollViewRef}
-        data={messageGroups}
-        renderItem={renderMessageGroup}
-        keyExtractor={(group) => group.groupKey}
-        contentContainerStyle={[
-          styles.messagesList,
-          { paddingBottom: insets.bottom + 80 },
-        ]}
-        onContentSizeChange={onContentSizeChange}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
-        onEndReached={loadMoreMessages}
-        onEndReachedThreshold={0.5}
-        initialNumToRender={100}
-        maxToRenderPerBatch={20}
-        windowSize={21}
-        removeClippedSubviews={Platform.OS === 'android'}
-      />
+      {!isEmpty && (
+        <>
+          {/* Messages List */}
+          <FlatList
+            ref={scrollViewRef}
+            data={messageGroups}
+            renderItem={renderMessageGroup}
+            keyExtractor={(group) => group.groupKey}
+            contentContainerStyle={[
+              styles.messagesList,
+              { paddingBottom: insets.bottom + 80 },
+            ]}
+            onContentSizeChange={onContentSizeChange}
+            onScroll={onScroll}
+            scrollEventThrottle={16}
+            onEndReached={loadMoreMessages}
+            onEndReachedThreshold={0.5}
+            initialNumToRender={100}
+            maxToRenderPerBatch={20}
+            windowSize={21}
+            removeClippedSubviews={Platform.OS === 'android'}
+          />
 
-      {/* Spacer for animation */}
-      {lastMessageNeedsSpace && <Animated.View style={{ height: spacerHeightAnim }} />}
+          {/* Spacer for animation */}
+          {lastMessageNeedsSpace && <Animated.View style={{ height: spacerHeightAnim }} />}
+        </>
+      )}
 
-      {/* Message Input - Enhanced with rainbow animations */}
-      <MessageInputEnhanced
-        onSend={handleSend}
-        isSendingMessage={isSendingMessage || isLoadingMessages}
-        theme={theme}
-        colorScheme={colorScheme}
-        hasMessages={messageGroups.length > 0}
-        isLoadingMessages={isLoadingMessages}
-        isStreaming={isStreaming}
-        hasExpandedReasoning={expandedReasoning.size > 0}
-        selectedImages={selectedImages}
-        onAddImage={addImage}
-        onRemoveImage={removeImage}
-        disabled={isSendingMessage || isLoadingMessages}
-      />
+      {/* Message Input - Centered when empty, at bottom when has messages */}
+      <View style={isEmpty ? styles.centeredInputContainer : styles.inputWrapper}>
+        <MessageInputEnhanced
+          onSend={handleSend}
+          isSendingMessage={isSendingMessage || isLoadingMessages}
+          theme={theme}
+          colorScheme={colorScheme}
+          hasMessages={messageGroups.length > 0}
+          isLoadingMessages={isLoadingMessages}
+          isStreaming={isStreaming}
+          hasExpandedReasoning={expandedReasoning.size > 0}
+          selectedImages={selectedImages}
+          onAddImage={addImage}
+          onRemoveImage={removeImage}
+          disabled={isSendingMessage || isLoadingMessages}
+        />
+      </View>
     </KeyboardAvoidingView>
   );
 }
···
     maxWidth: 800,
     width: '100%',
     alignSelf: 'center',
+  },
+  centeredInputContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  inputWrapper: {
+    // Wrapper for when messages exist (no special styling needed)
   },
   inputContainer: {
     position: 'absolute',

src/stores/chatStore.ts

···
 import type { LettaMessage, StreamingChunk } from '../types/letta';
 
 /**
- * Streaming state for accumulating message chunks
- *
- * Used by useMessageGroups to create a temporary streaming MessageGroup
- * that displays while the agent is responding.
+ * Simple streaming message accumulator
+ * One message = reasoning + content (tool_call OR assistant)
  */
-interface StreamState {
+interface StreamingMessage {
+  id: string;  // Message ID from Letta
   reasoning: string;
-  toolCalls: Array<{ id: string; name: string; args: string }>;
-  assistantMessage: string;
+  content: string;
+  type: 'tool_call' | 'assistant' | null;
+  toolCallName?: string;
+  timestamp: string;
 }
 
 interface ChatState {
···
   earliestCursor: string | null;
   hasMoreBefore: boolean;
 
-  // Streaming state
+  // Streaming state - SIMPLE!
   isStreaming: boolean;
   isSendingMessage: boolean;
-  currentStream: StreamState;
+  currentStreamingMessage: StreamingMessage | null;  // What we're accumulating right now
+  completedStreamingMessages: StreamingMessage[];     // Messages finished but stream still active
 
   // UI state
   hasInputText: boolean;
···
   prependMessages: (messages: LettaMessage[]) => void;
   clearMessages: () => void;
 
-  // Streaming actions
+  // Streaming actions - SIMPLE!
   startStreaming: () => void;
   stopStreaming: () => void;
-  updateStreamReasoning: (reasoning: string) => void;
-  updateStreamAssistant: (content: string) => void;
-  addStreamToolCall: (toolCall: { id: string; name: string; args: string }) => void;
-  clearStream: () => void;
+
+  // Accumulate into current message
+  accumulateReasoning: (messageId: string, reasoning: string) => void;
+  accumulateToolCall: (messageId: string, toolName: string, args: string) => void;
+  accumulateAssistant: (messageId: string, content: string) => void;
+
+  // Move current to completed (when we detect new message)
+  finalizeCurrentMessage: () => void;
+
+  // Clear all streaming state
+  clearAllStreamingState: () => void;
 
   // Image actions
   addImage: (image: { uri: string; base64: string; mediaType: string }) => void;
···
 
   isStreaming: false,
   isSendingMessage: false,
-  currentStream: {
-    reasoning: '',
-    toolCalls: [],
-    assistantMessage: '',
-  },
+  currentStreamingMessage: null,
+  completedStreamingMessages: [],
 
   hasInputText: false,
   lastMessageNeedsSpace: false,
···
     set({ messages: [], earliestCursor: null, hasMoreBefore: false });
   },
 
-  // Streaming actions
+  // Streaming actions - DEAD SIMPLE
   startStreaming: () => {
+    console.log('▶️ START STREAMING');
     set({
       isStreaming: true,
-      currentStream: { reasoning: '', toolCalls: [], assistantMessage: '' },
+      currentStreamingMessage: null,
+      completedStreamingMessages: [],
       lastMessageNeedsSpace: true,
     });
   },
 
   stopStreaming: () => {
+    console.log('⏹️ STOP STREAMING');
     set({ isStreaming: false, lastMessageNeedsSpace: false });
   },
 
-  // Accumulate reasoning chunks (useMessageGroups will pair with assistant message)
-  updateStreamReasoning: (reasoning) => {
-    set((state) => ({
-      currentStream: {
-        ...state.currentStream,
-        reasoning: state.currentStream.reasoning + reasoning,
-      },
-    }));
+  // Accumulate reasoning (delta)
+  accumulateReasoning: (messageId, reasoning) => {
+    set((state) => {
+      // If no current message OR different ID, create new
+      if (!state.currentStreamingMessage || state.currentStreamingMessage.id !== messageId) {
+        console.log('🆕 New message started:', messageId.substring(0, 20));
+        return {
+          currentStreamingMessage: {
+            id: messageId,
+            reasoning: reasoning,
+            content: '',
+            type: null,
+            timestamp: new Date().toISOString(),
+          },
+        };
+      }
+
+      // Same message, accumulate reasoning
+      return {
+        currentStreamingMessage: {
+          ...state.currentStreamingMessage,
+          reasoning: state.currentStreamingMessage.reasoning + reasoning,
+        },
+      };
+    });
   },
 
-  // Accumulate assistant message chunks (useMessageGroups will pair with reasoning)
-  updateStreamAssistant: (content) => {
-    set((state) => ({
-      currentStream: {
-        ...state.currentStream,
-        assistantMessage: state.currentStream.assistantMessage + content,
-      },
-    }));
+  // Accumulate tool call (delta)
+  accumulateToolCall: (messageId, toolName, args) => {
+    set((state) => {
+      if (!state.currentStreamingMessage || state.currentStreamingMessage.id !== messageId) {
+        console.error('❌ Tool call for unknown message:', messageId);
+        return {};
+      }
+
+      return {
+        currentStreamingMessage: {
+          ...state.currentStreamingMessage,
+          type: 'tool_call',
+          toolCallName: toolName,
+          content: state.currentStreamingMessage.content + args,
+        },
+      };
+    });
   },
 
-  addStreamToolCall: (toolCall) => {
+  // Accumulate assistant (delta)
+  accumulateAssistant: (messageId, content) => {
     set((state) => {
-      // Check if tool call already exists
-      const exists = state.currentStream.toolCalls.some((tc) => tc.id === toolCall.id);
-      if (exists) return state;
+      if (!state.currentStreamingMessage || state.currentStreamingMessage.id !== messageId) {
+        console.error('❌ Assistant content for unknown message:', messageId);
+        return {};
+      }
 
       return {
-        currentStream: {
-          ...state.currentStream,
-          toolCalls: [...state.currentStream.toolCalls, toolCall],
+        currentStreamingMessage: {
+          ...state.currentStreamingMessage,
+          type: 'assistant',
+          content: state.currentStreamingMessage.content + content,
         },
       };
     });
   },
 
-  clearStream: () => {
+  // Move current to completed
+  finalizeCurrentMessage: () => {
+    set((state) => {
+      if (!state.currentStreamingMessage) {
+        console.log('⚠️ No current message to finalize');
+        return {};
+      }
+
+      console.log('✅ FINALIZE MESSAGE:', state.currentStreamingMessage.id.substring(0, 20));
+      return {
+        completedStreamingMessages: [...state.completedStreamingMessages, state.currentStreamingMessage],
+        currentStreamingMessage: null,
+      };
+    });
+  },
+
+  // Clear everything
+  clearAllStreamingState: () => {
+    console.log('🧹 CLEAR ALL STREAMING STATE');
     set({
-      currentStream: { reasoning: '', toolCalls: [], assistantMessage: '' },
+      currentStreamingMessage: null,
+      completedStreamingMessages: [],
     });
   },