Fix message disappearing and duplicate rendering bugs

Fixes two related bugs in message handling:

1. **Message disappearing/reappearing**: Polling was overwriting SDK streaming state with stale backend state. Now only applies poll updates when backend has more messages.

2. **Duplicate message rendering**: Each poll created new message IDs, causing React to render duplicates. Now preserves existing message IDs across conversions.

Changes:
- Add poll update guard to prevent overwriting streaming state
- Preserve message IDs when converting backend messages to UI format
- Pass existing UI messages to llmMessagesToUIMessages() for ID reuse

create-pr.sh

@@ -0,0 +1,123 @@
+#!/bin/bash
+set -e
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Check arguments
+if [ $# -lt 1 ]; then
+    echo -e "${RED}Usage: ./create-pr.sh \"PR Title\" [\"Optional description\"]${NC}"
+    echo ""
+    echo "Example:"
+    echo "  ./create-pr.sh \"Fix authentication bug\" \"This fixes the dev mode auth issue\""
+    exit 1
+fi
+
+TITLE="$1"
+DESCRIPTION="${2:-}"
+
+# Get current branch
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+
+if [ "$BRANCH" = "main" ]; then
+    echo -e "${RED}Error: You're on the main branch. Please create a feature branch first.${NC}"
+    exit 1
+fi
+
+echo -e "${BLUE}Creating PR for branch: ${GREEN}$BRANCH${NC}"
+echo -e "${BLUE}Title: ${GREEN}$TITLE${NC}"
+
+# Get HF_TOKEN from .env
+if [ ! -f .env ]; then
+    echo -e "${RED}Error: .env file not found${NC}"
+    exit 1
+fi
+
+HF_TOKEN=$(grep HF_TOKEN .env | cut -d '=' -f2)
+
+if [ -z "$HF_TOKEN" ]; then
+    echo -e "${RED}Error: HF_TOKEN not found in .env${NC}"
+    exit 1
+fi
+
+# Get list of changed files
+echo -e "${BLUE}Detecting changed files...${NC}"
+CHANGED_FILES=$(git diff --name-only main.."$BRANCH")
+
+if [ -z "$CHANGED_FILES" ]; then
+    echo -e "${RED}Error: No changes detected between main and $BRANCH${NC}"
+    exit 1
+fi
+
+echo -e "${BLUE}Changed files:${NC}"
+echo "$CHANGED_FILES" | while read -r file; do
+    echo -e "  ${GREEN}$file${NC}"
+done
+
+# Create PR using HuggingFace API with actual file operations
+echo -e "${BLUE}Creating pull request with file changes...${NC}"
+
+PR_URL=$(HF_TOKEN="$HF_TOKEN" uv run python - <<EOF
+from huggingface_hub import HfApi, CommitOperationAdd
+import os
+import sys
+
+api = HfApi(token=os.environ.get('HF_TOKEN'))
+
+# Get changed files from stdin
+changed_files = """$CHANGED_FILES""".strip().split('\n')
+
+operations = []
+for file_path in changed_files:
+    file_path = file_path.strip()
+    if not file_path:
+        continue
+
+    try:
+        with open(file_path, 'rb') as f:
+            operations.append(
+                CommitOperationAdd(
+                    path_in_repo=file_path,
+                    path_or_fileobj=f.read()
+                )
+            )
+    except FileNotFoundError:
+        print(f"Warning: File {file_path} not found, skipping", file=sys.stderr)
+        continue
+
+if not operations:
+    print("Error: No valid file operations", file=sys.stderr)
+    sys.exit(1)
+
+description = """$DESCRIPTION"""
+commit_message = """$TITLE"""
+
+# Create PR with actual file changes
+try:
+    result = api.create_commit(
+        repo_id='smolagents/ml-agent',
+        repo_type='space',
+        commit_message=commit_message,
+        commit_description=description if description.strip() else f"Changes from branch $BRANCH",
+        operations=operations,
+        create_pr=True,
+    )
+    print(result.pr_url)
+except Exception as e:
+    print(f"Error creating PR: {e}", file=sys.stderr)
+    import traceback
+    traceback.print_exc(file=sys.stderr)
+    sys.exit(1)
+EOF
+)
+
+if [ $? -ne 0 ]; then
+    echo -e "${RED}Failed to create PR${NC}"
+    exit 1
+fi
+
+echo -e "${GREEN}✓ PR created successfully!${NC}"
+echo -e "${GREEN}  $PR_URL${NC}"

frontend/src/hooks/useAgentChat.ts

@@ -360,7 +360,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
         if (msgsRes.ok) {
           const data = await msgsRes.json();
           if (cancelled || !Array.isArray(data) || data.length === 0) return;
-          const uiMsgs = llmMessagesToUIMessages(data, pendingIds);
+          const uiMsgs = llmMessagesToUIMessages(data, pendingIds, chatActionsRef.current.messages);
           if (uiMsgs.length > 0) {
             chat.setMessages(uiMsgs);
             saveMessages(sessionId, uiMsgs);
@@ -481,7 +481,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
                 // Final hydration to get the complete message state
                 const result = await hydrateMessages();
                 if (result) {
-                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds);
+                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds, chatActionsRef.current.messages);
                   if (uiMsgs.length > 0) {
                     chat.setMessages(uiMsgs);
                     saveMessages(sessionId, uiMsgs);
@@ -495,7 +495,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
                 stopReconnect();
                 const result = await hydrateMessages();
                 if (result) {
-                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds);
+                  const uiMsgs = llmMessagesToUIMessages(result.data, result.pendingIds, chatActionsRef.current.messages);
                   if (uiMsgs.length > 0) {
                     chat.setMessages(uiMsgs);
                     saveMessages(sessionId, uiMsgs);
@@ -519,7 +519,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
       if (!result) return;
 
       const { data, pendingIds, info } = result;
-      const uiMsgs = llmMessagesToUIMessages(data, pendingIds);
+      const uiMsgs = llmMessagesToUIMessages(data, pendingIds, chatActionsRef.current.messages);
       if (uiMsgs.length > 0) {
         chat.setMessages(uiMsgs);
         saveMessages(sessionId, uiMsgs);
@@ -542,11 +542,14 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
         pollTimerRef.current = setInterval(async () => {
           const fresh = await hydrateMessages();
           if (!fresh) return;
-          const msgs = llmMessagesToUIMessages(fresh.data, fresh.pendingIds);
-          if (msgs.length > 0) {
+          const msgs = llmMessagesToUIMessages(fresh.data, fresh.pendingIds, chatActionsRef.current.messages);
+
+          const currentCount = chatActionsRef.current.messages.length;
+          if (msgs.length > currentCount || currentCount === 0) {
             chat.setMessages(msgs);
             saveMessages(sessionId, msgs);
-          }
+          } 
+
           // If backend stopped processing, clean up
           if (fresh.info && !fresh.info.is_processing) {
             updateSession(sessionId, { isProcessing: false });
@@ -570,7 +573,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
     if (chat.messages.length !== prevLenRef.current) {
       prevLenRef.current = chat.messages.length;
       saveMessages(sessionId, chat.messages);
-    }
+    } 
   }, [sessionId, chat.messages]);
 
   // -- Undo last turn (REST call + client-side message removal) -----------

frontend/src/lib/chat-message-store.ts

@@ -38,7 +38,8 @@ function writeAll(map: MessagesMap): void {
 
 export function loadMessages(sessionId: string): UIMessage[] {
   const map = readAll();
-  return map[sessionId] ?? [];
+  const messages = map[sessionId] ?? [];
+  return messages;
 }
 
 export function saveMessages(sessionId: string, messages: UIMessage[]): void {

frontend/src/lib/convert-llm-messages.ts

@@ -16,19 +16,24 @@ interface LLMMessage {
   name?: string | null;
 }
 
-let idCounter = 0;
+// Generate stable IDs based on message position to prevent duplicate renders
+// when the same message is re-converted multiple times (e.g., during polling)
+let uiMessageCounter = 0;
 function nextId(): string {
-  return `msg-${Date.now()}-${++idCounter}`;
+  return `msg-${++uiMessageCounter}`;
 }
 
 /**
  * @param pendingApprovalIds - Set of tool_call_ids that are waiting for approval.
  *   When provided, matching tool calls without results will get state
  *   'approval-requested' instead of 'input-available'.
+ * @param existingUIMessages - Current UI messages to preserve IDs when content matches.
+ *   This prevents React from re-rendering messages with new IDs during polling.
  */
 export function llmMessagesToUIMessages(
   messages: LLMMessage[],
   pendingApprovalIds?: Set<string>,
+  existingUIMessages?: UIMessage[],
 ): UIMessage[] {
   // Build a map of tool_call_id -> tool result for pairing
   const toolResults = new Map<string, { output: string; isError: boolean }>();
@@ -43,13 +48,22 @@ export function llmMessagesToUIMessages(
 
   const uiMessages: UIMessage[] = [];
 
+  // Helper to get existing message ID at a given position if roles match
+  const getExistingId = (index: number, role: 'user' | 'assistant'): string | null => {
+    if (!existingUIMessages || index >= existingUIMessages.length) return null;
+    const existing = existingUIMessages[index];
+    return existing.role === role ? existing.id : null;
+  };
+
   for (const msg of messages) {
     if (msg.role === 'system') continue;
     if (msg.role === 'tool') continue; // handled via tool_calls pairing
 
     if (msg.role === 'user') {
+      // Try to reuse existing ID if the message at this position matches
+      const existingId = getExistingId(uiMessages.length, 'user');
       uiMessages.push({
-        id: nextId(),
+        id: existingId || nextId(),
         role: 'user',
         parts: [{ type: 'text', text: msg.content || '' }],
       });
@@ -109,8 +123,11 @@ export function llmMessagesToUIMessages(
       if (prev && prev.role === 'assistant') {
         prev.parts.push(...parts);
       } else {
+        // Try to reuse existing ID if the message at this position matches
+        const existingId = getExistingId(uiMessages.length, 'assistant');
+        const newId = existingId || nextId();
         uiMessages.push({
-          id: nextId(),
+          id: newId,
           role: 'assistant',
           parts,
         });